/* Concept 3 — Chroma. The page has no colour of its own: it takes the pigment of whichever painting is chosen. */
:root {
  --field: #e3a546; --ink: #17120c;
  --ground: var(--field); --accent: var(--ink); --muted: color-mix(in srgb, var(--ink) 82%, var(--field));
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-text: "Space Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(1rem, 3vw, 3rem);
  --viewer-ground: #0d0c0b; --viewer-ink: #f4efe6;
}
html { background: var(--field); }
body { background: transparent; transition: color .5s var(--ease); }
.drench { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
h1, h2, h3 { font-weight: 800; font-stretch: 112%; letter-spacing: -0.035em; line-height: .92; text-transform: uppercase; }
h2 { font-size: clamp(2.75rem, 8vw, 8rem); }

html[data-ink="light"] .on-light, html[data-ink="dark"] .on-dark { display: none; }

.bar { display: flex; justify-content: space-between; align-items: center; padding: .9rem var(--pad); }
.bar__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 500; }
.bar nav { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); }
.bar nav a { text-decoration: none; font-weight: 500; padding: .7rem 0; }
.bar nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.btn { display: inline-block; padding: 1rem 1.6rem; border-radius: 99px; background: var(--ink); color: var(--field); text-decoration: none; font-weight: 500; transition: transform .35s var(--ease), background-color .5s, color .5s; }
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:active { transform: scale(.98); }
.link { font-weight: 500; }

/* Stage */
.stage { min-height: calc(100svh - 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto auto; padding: 0 var(--pad); overflow: clip; }
.stage__now { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding: 1rem 0 clamp(1rem, 2.5vw, 2rem); }
.stage__pic { justify-self: end; cursor: zoom-in; transition: transform .6s var(--ease); }
.stage__pic:hover { transform: scale(1.02) rotate(-.6deg); }
.stage__pic img { max-height: 48svh; width: auto; }
.stage__pic.is-swap img { animation: swap .7s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(30px) scale(.96); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.stage__text { display: grid; gap: .9rem; justify-items: start; }
.stage__text h2 { font-size: clamp(2.25rem, 5.2vw, 5rem); }
.stage__text.is-swap > * { animation: rise .7s var(--ease) backwards; }
.stage__text.is-swap > :nth-child(2) { animation-delay: .07s; }
.stage__text.is-swap > :nth-child(3) { animation-delay: .14s; }
.stage__text.is-swap > :nth-child(4) { animation-delay: .21s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.stage__note { font-size: 1.25rem; max-width: 34ch; line-height: 1.35; }
.stage__meta { color: var(--muted); }

/* The palette: one flat swatch per painting */
.palette { display: flex; gap: 6px; }
.palette button { flex: 1 1 0; min-width: 44px; height: clamp(52px, 7svh, 76px); background: var(--c); transition: flex-grow .6s var(--ease), transform .4s var(--ease); position: relative; outline-offset: 3px; }
.palette button:hover { transform: translateY(-6px); }
.palette button[aria-pressed="true"] { flex-grow: 3.2; outline: 3px solid var(--ink); outline-offset: -3px; }
.palette button span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 500; font-size: .95rem; color: var(--ci); opacity: 0; transition: opacity .4s; white-space: nowrap; overflow: hidden; }
.palette button[aria-pressed="true"] span { opacity: 1; }
.palette__hint { padding-top: .75rem; font-size: 1rem; }

/* The name as a monument, cut out of the chosen painting and cropped by the fold */
.name { font-size: 22.4vw; font-weight: 900; font-stretch: 125%; line-height: .74; letter-spacing: -0.04em; white-space: nowrap; margin: clamp(.5rem, 1.5vw, 1.5rem) calc(var(--pad) * -1) -0.06em; text-align: center;
  background: var(--ink) center 40% / cover no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* In rooms */
.rooms { padding: clamp(7rem, 15vw, 14rem) var(--pad) 0; }
.rooms__lede { font-size: 1.25rem; max-width: 40ch; margin-top: 1.25rem; }
.rooms__wall { --gap: clamp(.5rem, 1.2vw, 1.25rem); margin-top: clamp(2rem, 5vw, 4.5rem); columns: 3; column-gap: var(--gap); }
.room { position: relative; overflow: hidden; cursor: zoom-in; display: block; break-inside: avoid; margin-bottom: var(--gap); }
.room img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 1.2s var(--ease); }
.room:hover img { transform: scale(1.05); }
.room:nth-child(5n+1) img { aspect-ratio: 4 / 5; }
.room:nth-child(5n+2) img { aspect-ratio: 9 / 14; }
.room:nth-child(5n+4) img { aspect-ratio: 1; }
.room span { position: absolute; inset: auto 0 0 0; padding: .7rem .9rem; background: var(--ink); color: var(--field); font-weight: 500; transform: translateY(101%); transition: transform .5s var(--ease), background-color .5s, color .5s; }
.room:hover span, .room:focus-visible span { transform: none; }

.about { padding: clamp(7rem, 15vw, 14rem) var(--pad) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem) var(--pad); }
.about h2 { grid-column: 1 / -1; }
.about__bio { grid-column: 1 / span 6; display: grid; gap: 1.1rem; font-size: 1.2rem; max-width: 58ch; }
.about__line { grid-column: 8 / span 5; align-self: end; }
.about__line p { font-family: var(--font-display); font-weight: 300; font-stretch: 75%; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.05; }

.contact { padding: clamp(7rem, 15vw, 14rem) var(--pad) clamp(5rem, 10vw, 9rem); display: grid; gap: 1.5rem; justify-items: start; }
.contact h2 { font-size: clamp(3rem, 11vw, 11.5rem); }
.contact p { font-size: 1.25rem; }
.contact__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }

.foot { padding: 2rem var(--pad); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; background: color-mix(in srgb, var(--ink) 10%, var(--field)); }
.foot img { width: 9rem; }
.foot p { font-size: .95rem; }

@media (max-width: 860px) {
  .bar__brand span { display: none; }
  .stage__now { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .stage__pic { justify-self: start; }
  .stage__pic img { max-height: 36svh; }
  .palette { overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 8px var(--pad); scrollbar-width: none; }
  .palette button { flex: 0 0 52px; }
  .palette button[aria-pressed="true"] { flex-basis: 150px; }
  .rooms__wall { columns: 2; }
  .room span { transform: none; position: static; display: block; }
  .about__bio, .about__line { grid-column: 1 / -1; }
}