/* ==========================================================================
   Yenpace Art Gallery — luxury gallery interface
   Palette: warm-white canvas (the gallery walls), warm gold accents from the
            YP monogram, espresso ink. A handful of "deep rooms" — the hero,
            the showcase rails and the closing block — invert to warm charcoal
            so the artwork has something to sit against.
   Type:    Cormorant Garamond (display) / Inter (interface)
   ========================================================================== */

/* Metric-matched stand-in for Cormorant Garamond. Georgia sets ~15% wider at
   the same size, which visibly reflowed the oversized hero headline on font
   swap; size-adjust brings the fallback to the same measure. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 87%;
  ascent-override: 105%;
  descent-override: 27%;
  line-gap-override: 0%;
}

:root {
  /* --- surfaces: the warm-white canvas --- */
  --canvas:    #FAF6EF;
  --canvas-2:  #F3EDE2;
  --canvas-3:  #ECE4D6;
  --paper:     #FFFDF9;   /* raised cards and inputs */
  --plate:     #F1EBDF;   /* mat board behind artwork that is never cropped */
  --veil:      rgba(250, 246, 239, .93);

  /* --- the deep rooms --- */
  --deep:      #17140F;
  --deep-2:    #1F1B15;
  --deep-3:    #29231A;

  /* --- gold ---
     --gold is decorative (rules, fills, buttons); --gold-ink is the text-safe
     value for the current surface. Both flip inside .room-deep. */
  --gold:      #B0873A;
  --gold-ink:  #8A6820;
  --gold-glow: rgba(176, 135, 58, .13);
  --on-gold:   #1A160E;

  /* --- type on the current surface (all three clear 4.5:1 on --canvas) --- */
  --ink:       #1E1A14;
  --ink-2:     #4F4840;
  --ink-3:     #736B5E;

  /* --- lines --- */
  --line:      rgba(138, 104, 32, .28);
  --line-soft: rgba(30, 26, 20, .13);

  /* --- shadows (warm, never neutral black) --- */
  --shadow-sm: 0 14px 32px -22px rgba(58, 44, 18, .40);
  --shadow-md: 0 30px 60px -34px rgba(58, 44, 18, .55);

  /* --- canvas grain ---
     A desaturated fractal-noise tile. It goes on background *colours* only,
     never as an overlay, so it can never sit on top of a painting. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.065'/%3E%3C/svg%3E");
  --grain-size: 160px;
  /* a barely-there warm wash so big panels are never one flat colour */
  --sheen: linear-gradient(152deg, rgba(176, 135, 58, .07), transparent 46%);

  /* --- fonts --- */
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- spacing (spacious / density 3) --- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 96px;  --s-8: 128px;

  --wrap:    1280px;
  --gutter:  clamp(20px, 5vw, 72px);
  --radius:  2px;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur:      .38s;

  --z-nav: 210; --z-menu: 200; --z-fab: 300; --z-lb: 400; --z-pre: 500;
}

/* A deep room re-points the surface tokens rather than restyling components,
   so every rule below stays palette-agnostic and works in either room. */
.room-deep {
  --canvas:    #17140F;
  --canvas-2:  #1F1B15;
  --canvas-3:  #29231A;
  --paper:     #211C15;
  --plate:     #12100C;
  --veil:      rgba(23, 20, 15, .94);

  --gold:      #C9A24A;
  --gold-ink:  #E6CB85;
  --gold-glow: rgba(230, 203, 133, .16);

  --ink:       #F7F2E8;
  --ink-2:     #C6BDAB;
  --ink-3:     #948C7E;

  --line:      rgba(201, 162, 74, .24);
  --line-soft: rgba(247, 242, 232, .11);

  --shadow-sm: 0 14px 32px -22px rgba(0, 0, 0, .8);
  --shadow-md: 0 30px 60px -34px rgba(0, 0, 0, .95);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");
  --sheen: linear-gradient(152deg, rgba(230, 203, 133, .05), transparent 46%);

  background-color: var(--canvas);
  background-image: var(--grain);
  background-size: var(--grain-size);
  color: var(--ink);
}

/* every warm panel on the page gets the same tooth, so nothing reads as a
   flat fill — used by the section bands and the cards alike */
.textured {
  background-image: var(--sheen), var(--grain);
  background-size: auto, var(--grain-size);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  background-color: var(--canvas);
  background-image: var(--grain);
  background-size: var(--grain-size);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 12px 20px; background: var(--gold); color: var(--on-gold);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- shared type ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-ink); display: flex; align-items: center; gap: 12px;
}
.eyebrow .dot { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; display: inline-block; }
.section__head--center .eyebrow { justify-content: center; }

.section__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin-top: var(--s-3);
}
.section__title em { font-style: italic; color: var(--gold-ink); }

.section__lede {
  max-width: 56ch; color: var(--ink-2); margin-top: var(--s-3); font-size: 1.0625rem;
}
.section__head { max-width: 900px; margin-bottom: var(--s-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .section__lede { margin-inline: auto; }

.section { padding-block: clamp(80px, 12vw, 168px); position: relative; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 30px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold-ink);
  border-radius: var(--radius); overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
  will-change: transform;
}
.btn > * { position: relative; z-index: 1; }
.btn svg { width: 17px; height: 17px; }
.btn--gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--canvas); }
.btn--ghost { color: var(--ink); border-color: var(--line-soft); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--gold-ink); border-color: var(--gold); }
.btn--block { width: 100%; }
.btn--lg { min-height: 60px; padding: 18px 40px; font-size: 13px; }
.btn--sm { min-height: 44px; padding: 12px 22px; font-size: 11px; }
.btn__ico { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.btn--gold .btn__ico .bolt { fill: var(--gold); }
.btn--gold:hover .btn__ico .bolt { fill: var(--gold-ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); padding: 12px 0; min-height: 44px;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow svg { width: 18px; height: 18px; }
.link-arrow:hover { gap: 18px; color: var(--gold); }
.link-arrow--back { color: var(--ink-2); }

/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: var(--z-pre);
  background: var(--canvas); display: grid; place-items: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__inner { display: grid; justify-items: center; gap: var(--s-4); }
.preloader__logo {
  width: 96px; height: 96px; border-radius: 2px;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  animation: breathe 2.4s ease-in-out infinite;
}
.preloader__bar { width: 160px; height: 1px; background: var(--line-soft); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s linear; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- nav ----------
   The bar floats over the dark hero, so it carries the deep-room tokens until
   it sticks (or the mobile menu opens) over the warm canvas. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  --ink: #F7F2E8; --ink-2: #C6BDAB; --ink-3: #948C7E;
  --gold: #C9A24A; --gold-ink: #E6CB85;
  --line: rgba(201, 162, 74, .24); --line-soft: rgba(247, 242, 232, .14);
  color: var(--ink);
  transition: transform .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-stuck, .nav.is-inverted {
  --ink: #1E1A14; --ink-2: #5C5449; --ink-3: #8C8477;
  --gold: #B0873A; --gold-ink: #8A6820;
  --line: rgba(138, 104, 32, .28); --line-soft: rgba(30, 26, 20, .13);
}
.nav.is-stuck {
  background: rgba(250, 246, 239, .84);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-102%); }

.nav__inner {
  max-width: 1560px; margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; gap: var(--s-4);
}
.nav__brand { display: flex; align-items: center; gap: 14px; margin-right: auto; }
/* the monogram is a foil-on-black tile, so it keeps a gold hairline and reads
   as a deliberate plate against the warm canvas */
.nav__logo { width: 52px; height: 52px; border-radius: 2px; border: 1px solid var(--line); }
.nav__wordmark { display: grid; line-height: 1.1; }
.nav__name { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .02em; }
.nav__sub { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); }

.nav__links { display: none; gap: var(--s-4); }
.nav__links a {
  position: relative; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); padding: 8px 0; transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav__cta { display: none; }

.nav__burger {
  width: 48px; height: 48px; display: grid; place-content: center; gap: 6px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.nav__burger span {
  display: block; width: 20px; height: 1px; background: var(--ink);
  transition: transform .35s var(--ease), opacity .25s, background-color .4s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background-color: var(--canvas-2); background-image: var(--grain); background-size: var(--grain-size);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-6);
  padding: 120px var(--gutter) max(40px, env(safe-area-inset-bottom));
  opacity: 0; transition: opacity .4s var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__links { display: grid; gap: 4px; }
.mobile-menu__links a {
  display: flex; align-items: baseline; gap: 18px;
  font-family: var(--serif); font-size: clamp(1.65rem, 7.4vw, 2.9rem); font-weight: 300;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(18px);
  transition: color .3s var(--ease);
}
.mobile-menu.is-open .mobile-menu__links a { animation: menuIn .55s var(--ease) forwards; }
.mobile-menu__links a:nth-child(1) { animation-delay: .06s; }
.mobile-menu__links a:nth-child(2) { animation-delay: .12s; }
.mobile-menu__links a:nth-child(3) { animation-delay: .18s; }
.mobile-menu__links a:nth-child(4) { animation-delay: .24s; }
.mobile-menu__links a:nth-child(5) { animation-delay: .30s; }
.mobile-menu__links a:nth-child(6) { animation-delay: .36s; }
.mobile-menu__links a i { font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: .2em; color: var(--gold-ink); }
.mobile-menu__links a:hover { color: var(--gold-ink); }
@keyframes menuIn { to { opacity: 1; transform: none; } }
.mobile-menu__foot { display: grid; gap: var(--s-2); justify-items: start; }
.mobile-menu__foot p { font-size: 13px; color: var(--ink-3); }

/* ---------- hero (deep room) ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px var(--gutter) clamp(32px, 6vw, 64px);
  overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: -12% 0; z-index: -3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(23,20,15,.88) 0%, rgba(23,20,15,.50) 30%, rgba(23,20,15,.84) 68%, var(--canvas) 100%),
    linear-gradient(90deg, rgba(23,20,15,.78) 0%, rgba(23,20,15,.26) 55%, rgba(23,20,15,.52) 100%),
    radial-gradient(130% 85% at 45% 35%, transparent 22%, rgba(23,20,15,.70) 100%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; opacity: .2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero__content { max-width: 1000px; margin-top: auto; }
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3rem, 10vw, 7.5rem); line-height: .96; letter-spacing: -.025em;
  margin: var(--s-3) 0 var(--s-4);
}
.hero__title em { font-style: italic; color: var(--gold-ink); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; }
.hero__lede { max-width: 58ch; color: var(--ink-2); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hero__lede strong { color: var(--ink); font-weight: 400; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  margin-top: clamp(48px, 9vw, 104px); padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.scroll-cue { display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.scroll-cue__line { width: 54px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.scroll-cue__label { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }

.hero__stats { display: flex; gap: clamp(20px, 4vw, 56px); text-align: right; }
.hero__stats dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.hero__stats dd { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.2; margin-top: 2px; }
.hero__stats dd span { color: var(--gold-ink); font-size: .6em; }

/* ---------- marquee ---------- */
.marquee {
  border-block: 1px solid var(--line-soft);
  background-color: var(--canvas-2); background-image: var(--grain); background-size: var(--grain-size);
  overflow: hidden; padding-block: 20px;
}
.marquee__track {
  display: flex; align-items: center; gap: 28px; width: max-content;
  animation: slide 48s linear infinite;
}
.marquee__track span {
  font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.4rem); font-style: italic;
  color: var(--ink-2); white-space: nowrap;
}
.marquee__track i { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- filters ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: var(--s-4); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.filter {
  min-height: 44px; padding: 11px 20px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 999px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.filter sup { font-size: 9px; color: var(--gold-ink); margin-left: 6px; letter-spacing: 0; }
.filter:hover { color: var(--ink); border-color: var(--gold); }
.filter.is-active { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.filter.is-active sup { color: rgba(26, 22, 14, .66); }

/* ---------- the collection blurb above the deck ---------- */
.collection-note {
  display: grid; gap: 12px;
  max-width: 64ch;
  margin: var(--s-4) 0 var(--s-6);
  padding: var(--s-1) 0 var(--s-1) var(--s-3);
  border-left: 1px solid var(--gold);
}
.collection-note__label {
  font-size: 10.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-ink);
}
.collection-note__text {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.62rem);
  line-height: 1.5; color: var(--ink-2);
}

/* ---------- the deck: a fanned stack you click through ---------- */
.deck-wrap {
  --deck-w: min(100%, 268px);
  --fan-space: 84px;      /* transforms don't reserve layout space, so the room
                             the open fan needs is booked explicitly here */
  display: grid; gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.deck-stage {
  position: relative;
  width: min(100%, calc(var(--deck-w) + var(--fan-space)));
}
.deck {
  position: relative;
  width: var(--deck-w);
  aspect-ratio: 4 / 5;
  cursor: pointer;
  perspective: 1400px;
}
.deck__card {
  position: absolute; inset: 0;
  transform-origin: 10% 92%;
  background: var(--canvas-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;                  /* image runs to the card edge, so the
                                        fanned slivers show artwork, not chrome */
  box-shadow: var(--shadow-md);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.deck__card--front { border-color: var(--gold); }
.deck__plate {
  display: block; width: 100%; height: 100%;
  background: var(--plate);
}
.deck__plate img {
  width: 100%; height: 100%;
  /* Cards behind the front are decorative slivers (aria-hidden) and fill their
     plate so the fan shows colour rather than letterbox bars. The card being
     viewed always uses contain, so the painting on show is never cropped. */
  object-fit: cover;
  transition: object-fit 0s;
}
.deck__card--front .deck__plate img { object-fit: contain; }
.deck:active .deck__card--front { transform: scale(.985); }

.deck-hint {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--s-3);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  transition: opacity .5s var(--ease);
}
.deck-hint svg { width: 17px; height: 17px; color: var(--gold); }
.deck-hint.is-faded { opacity: 0; }

.deck-side { display: grid; align-content: center; gap: 10px; }
.deck-count {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-size: 1rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.deck-count b { font-size: 2.4rem; font-weight: 400; color: var(--gold-ink); line-height: 1; }
.deck-count i { width: 22px; height: 1px; background: var(--line); }
/* the reserved heights below keep the controls from jumping as titles and
   descriptions of different lengths swap in */
.deck-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.08;
  min-height: 2.16em;
}
.deck-cat { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.deck-alt {
  color: var(--ink-2); max-width: 44ch; font-size: 15px; line-height: 1.6;
  min-height: 4.8em;
}

.deck-ctrl { display: flex; align-items: center; gap: 16px; margin-top: var(--s-2); }
.deck-btn {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft); color: var(--ink);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.deck-btn svg { width: 19px; height: 19px; }
.deck-btn:hover { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.deck-progress { flex: 1; height: 1px; background: var(--line-soft); position: relative; }
.deck-progress span {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--gold); transition: width .5s var(--ease);
}
.deck-actions { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 4px; }

/* ---------- grid toggle ---------- */
.grid-toggle { display: flex; justify-content: center; margin: var(--s-5) 0 var(--s-4); }
#grid-toggle-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 26px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--line-soft); border-radius: 999px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
#grid-toggle-btn:hover { color: var(--gold-ink); border-color: var(--gold); }
#grid-toggle-btn svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
#grid-toggle-btn .grid-toggle__off { display: none; }
#grid-toggle-btn[aria-expanded="true"] .grid-toggle__on { display: none; }
#grid-toggle-btn[aria-expanded="true"] .grid-toggle__off { display: inline; }
#grid-toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- masonry gallery (opt-in) ---------- */
.masonry { column-count: 1; column-gap: clamp(16px, 2.4vw, 32px); }

.art {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: clamp(16px, 2.4vw, 32px);
  position: relative; display: block; width: 100%; text-align: left;
  background-color: var(--paper);
  background-image: var(--grain); background-size: var(--grain-size);
  border: 1px solid var(--line-soft);
  padding: clamp(10px, 1vw, 16px);
  cursor: pointer;
  transition: border-color .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--gold-glow), transparent 62%);
  transition: opacity .4s var(--ease);
}
.art:hover, .art:focus-visible { border-color: var(--gold); box-shadow: var(--shadow-md); }
.art:hover::before { opacity: 1; }

.art__plate { display: block; position: relative; overflow: hidden; background: var(--plate); }
.art__plate img {
  width: 100%; height: auto; display: block;
  object-fit: contain;                    /* artwork is never cropped */
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: saturate(.96);
}
.art:hover .art__plate img { transform: scale(1.035); filter: saturate(1.05); }

.art__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 4px 6px;
}
.art__name { font-family: var(--serif); font-size: 1.28rem; font-weight: 400; line-height: 1.25; }
.art__cat { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.art__view {
  position: absolute; top: 22px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--veil); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--gold-ink);
  opacity: 0; transform: scale(.82); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.art__view svg { width: 17px; height: 17px; }
.art:hover .art__view, .art:focus-visible .art__view { opacity: 1; transform: none; }

.gallery__note { margin-top: var(--s-6); text-align: center; color: var(--ink-2); font-size: 15px; }
.gallery__note a { color: var(--gold-ink); border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.gallery__note a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- showcase rails: slow horizontal drift per theme ---------- */
.showcase { overflow: hidden; }
.rails { display: grid; gap: clamp(28px, 4vw, 52px); }
.rail { --rail-h: clamp(150px, 20vw, 250px); }
.rail__head {
  display: flex; align-items: center; gap: 16px;
  padding-inline: var(--gutter); margin-bottom: 14px;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-ink);
}
.rail__head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rail__head span { color: var(--ink-3); letter-spacing: .16em; }

.rail__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rail__track {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); width: max-content;
  animation: railDrift var(--rail-dur, 150s) linear infinite;
  will-change: transform;
}
.rail--reverse .rail__track { animation-direction: reverse; }
.rail:hover .rail__track, .rail:focus-within .rail__track { animation-play-state: paused; }
@keyframes railDrift { to { transform: translate3d(-50%, 0, 0); } }

.rail__item {
  position: relative; flex: none; height: var(--rail-h);
  background: var(--canvas-2); border: 1px solid var(--line-soft);
  padding: 8px; border-radius: 4px; cursor: pointer;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.rail__item img { height: 100%; width: auto; max-width: none; object-fit: contain; border-radius: 2px; }
.rail__item:hover, .rail__item:focus-visible { border-color: var(--gold); transform: translateY(-6px); }
.rail__item::after {
  content: attr(data-title);
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  padding: 10px 10px 8px;
  background: linear-gradient(to top, var(--veil), transparent);
  font-family: var(--serif); font-size: 1rem; color: var(--ink);
  opacity: 0; transition: opacity .35s var(--ease);
  border-radius: 0 0 2px 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail__item:hover::after, .rail__item:focus-visible::after { opacity: 1; }

/* ---------- process ---------- */
.process {
  background-color: var(--canvas-2); background-image: var(--grain); background-size: var(--grain-size);
  border-block: 1px solid var(--line-soft);
}
.timeline { position: relative; max-width: 780px; margin-inline: auto; padding-left: 56px; }
.timeline__rail {
  position: absolute; left: 15px; top: 10px; bottom: 10px; width: 1px;
  background: var(--line-soft);
}
.timeline__fill {
  position: absolute; inset: 0; background: var(--gold);
  transform: scaleY(0); transform-origin: top; will-change: transform;
}
.step { position: relative; padding-bottom: clamp(40px, 6vw, 72px); }
.step:last-child { padding-bottom: 0; }
.step__marker {
  position: absolute; left: -56px; top: 4px;
  width: 31px; height: 31px; border-radius: 50%;
  border: 1px solid var(--line-soft); background: var(--canvas-2);
  display: grid; place-items: center;
  transition: border-color .45s var(--ease), background-color .45s var(--ease);
}
.step__marker span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-soft);
  transition: background-color .45s var(--ease), transform .45s var(--ease);
}
.step.is-on .step__marker { border-color: var(--gold); background: var(--paper); }
.step.is-on .step__marker span { background: var(--gold); transform: scale(1.35); }
.step__num { font-size: 11px; letter-spacing: .28em; color: var(--gold-ink); }
.step__body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 6px 0 10px; }
.step__body p { color: var(--ink-2); max-width: 52ch; }

/* ---------- commission & pricing ---------- */
.options { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.option {
  position: relative; overflow: hidden;
  background-color: var(--canvas-2);
  background-image: var(--sheen), var(--grain);
  background-size: auto, var(--grain-size);
  border: 1px solid var(--line-soft);
  padding: clamp(24px, 3vw, 40px); display: grid; gap: 12px;
  transition: border-color .45s var(--ease);
  will-change: transform;
}
.option:hover { border-color: var(--gold); }
.option__icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: 8px; }
.option h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.option p { color: var(--ink-2); }

.spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--gold-glow), transparent 65%);
  transition: opacity .4s var(--ease);
}
.spotlight:hover::after { opacity: 1; }

.rate-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  padding: 22px clamp(20px, 3vw, 32px); margin-bottom: var(--s-4);
  background: linear-gradient(100deg, rgba(176, 135, 58, .13), rgba(176, 135, 58, .03));
  border: 1px solid var(--line);
}
.rate-bar > span:first-child { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.rate-bar strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.4rem); font-variant-numeric: tabular-nums; }
.rate-bar strong em { font-style: normal; font-size: .46em; color: var(--ink-2); letter-spacing: .04em; }
.rate-bar__note { font-size: 13.5px; color: var(--ink-3); margin-left: auto; }

/* price range — the headline figures only; anything larger is quoted */
.range { display: grid; gap: var(--s-3); margin-bottom: clamp(56px, 8vw, 96px); }
.range__panel {
  position: relative; overflow: hidden;
  display: grid; gap: 10px; align-content: start;
  background-color: var(--canvas-2);
  background-image: var(--sheen), var(--grain);
  background-size: auto, var(--grain-size);
  border: 1px solid var(--line-soft);
  padding: clamp(24px, 3vw, 38px);
  transition: border-color .45s var(--ease);
}
.range__panel:hover { border-color: var(--gold); }
.range__panel--quote {
  background-image: linear-gradient(160deg, rgba(176, 135, 58, .13), transparent 70%), var(--grain);
  background-size: auto, var(--grain-size);
  border-color: var(--line);
}
.range__label { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
.range__figure {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-family: var(--serif); font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.range__figure i { width: 34px; height: 1px; background: var(--gold); flex: none; }
.range__quote { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; color: var(--gold-ink); }
.range__note { color: var(--ink-2); font-size: 15px; max-width: 44ch; }
.range__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-2); }

/* ---------- stacking cards (commission details) ----------
   Each card sticks a little below the last, so scrolling settles them into a
   single deck instead of scrolling three tall boxes past the viewport. */
.stack { max-width: 1000px; margin-inline: auto; }
/* Each card carries .room-deep, so --paper, --ink and --line below already
   resolve to the dark set — the plate reads as a lit vitrine against the warm
   canvas without a single colour being restated here. */
.stack__card {
  position: sticky; top: 104px;
  display: grid; gap: 14px; align-content: start;
  background-color: var(--paper);
  background-image: var(--sheen), var(--grain);
  background-size: auto, var(--grain-size);
  border: 1px solid var(--line);
  padding: clamp(26px, 4vw, 52px);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-md);
  transform-origin: center top;
  will-change: transform, opacity;
  overflow: hidden;                  /* holds the tap ripple inside the plate */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .55s var(--ease);
}
/* GSAP owns `transform` on these cards (the scrub settles them back as the
   next one rises), so the press uses the separate `scale` property — the two
   compose instead of one clobbering the other. */
.stack__card:active { scale: .994; }

/* ---------- card accents ----------
   Re-pointing the three gold tokens is the whole colour change: the number,
   the list rules, the lead-card figures, the border and the spotlight glow all
   read through them already. */
.stack__card[data-accent="gold"] {
  --gold: #C9A24A; --gold-ink: #E6CB85;
  --gold-glow: rgba(230, 203, 133, .16); --line: rgba(201, 162, 74, .26);
}
.stack__card[data-accent="ember"] {
  --gold: #C4643C; --gold-ink: #F0A882;
  --gold-glow: rgba(240, 168, 130, .16); --line: rgba(196, 100, 60, .30);
}
.stack__card[data-accent="lapis"] {
  --gold: #4E7FB8; --gold-ink: #9CC2E8;
  --gold-glow: rgba(156, 194, 232, .16); --line: rgba(78, 127, 184, .32);
}
.stack__card[data-accent="verdigris"] {
  --gold: #3E9184; --gold-ink: #86D0C2;
  --gold-glow: rgba(134, 208, 194, .16); --line: rgba(62, 145, 132, .32);
}

/* the new accent washes across the plate from wherever it was touched */
.stack__card::before {
  content: "";
  position: absolute; left: var(--tx, 50%); top: var(--ty, 50%);
  width: 100%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1px solid var(--gold);
  background: radial-gradient(circle, var(--gold-glow), transparent 68%);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.stack__card.is-tinting::before { animation: tintRipple .8s var(--ease); }
@keyframes tintRipple {
  0%   { opacity: .95; transform: scale(.06); }
  65%  { opacity: .45; }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* the swatch: the visible, focusable handle on the accent */
.stack__tint {
  position: absolute; top: clamp(12px, 1.8vw, 20px); right: clamp(12px, 1.8vw, 20px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.stack__tint i {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow);
  transition: background-color .55s var(--ease), box-shadow .55s var(--ease),
              transform .35s var(--ease);
}
.stack__tint:hover { border-color: var(--gold); }
.stack__tint:hover i { transform: scale(1.2); }
.stack__card:active .stack__tint i { transform: scale(.82); }
.stack--info .stack__card { min-height: clamp(300px, 44vh, 420px); }
/* Scoped past `.stack__card > p` below, which otherwise out-specifies the
   plain .stack__num rule and mutes the number to body ink — it is the card's
   loudest piece of accent, so it has to read as one. */
.stack__card .stack__num {
  font-size: 11px; font-weight: 500; letter-spacing: .3em;
  color: var(--gold-ink); transition: color .55s var(--ease);
}
.stack__card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; }
.stack__card > p { color: var(--ink-2); max-width: 52ch; }
.stack__list { display: grid; margin-top: 4px; }
.stack__list li { display: flex; gap: 14px; padding: 11px 0; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
.stack__list li:last-child { border-bottom: 0; }
.stack__list li::before {
  content: ""; flex: none; width: 14px; height: 1px; background: var(--gold); margin-top: 15px;
  transition: background-color .55s var(--ease), width .45s var(--ease);
}
.stack__card:hover .stack__list li::before { width: 22px; }
.stack__note { margin-top: var(--s-2); font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-2); }

.lead-card { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.lead-card__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.lead-card__value {
  font-family: var(--serif); font-size: 1.5rem; color: var(--gold-ink); margin-top: 4px;
  transition: color .55s var(--ease);
}

/* ---------- about ---------- */
.about {
  background-color: var(--canvas-2); background-image: var(--grain); background-size: var(--grain-size);
  border-block: 1px solid var(--line-soft);
}
.about__grid { display: grid; gap: var(--s-6); }
.about__frame { position: relative; overflow: hidden; border: 1px solid var(--line); padding: 12px; background: var(--paper); box-shadow: var(--shadow-sm); will-change: transform; }
/* the portrait drifts inside this crop, so the frame keeps its 12px mat
   instead of being covered by the scaled-up image */
.about__crop { display: block; overflow: hidden; }
.about__frame img { width: 100%; height: auto; will-change: transform; }
.about__caption { margin-top: 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.about__body .section__title { margin-top: var(--s-2); }
.pull {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.35; color: var(--gold-ink);
  border-left: 1px solid var(--gold); padding-left: var(--s-3);
  margin: var(--s-4) 0 var(--s-4);
}
.about__prose { display: grid; gap: var(--s-2); color: var(--ink-2); max-width: 62ch; }
.about__prose em { color: var(--ink); font-style: italic; }
.about__facts {
  display: grid; gap: var(--s-3); margin-top: var(--s-5);
  padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
}
.about__facts dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
.about__facts dd { font-family: var(--serif); font-size: 1.2rem; margin-top: 4px; }

/* ---------- press ---------- */
.press__grid { display: grid; gap: var(--s-3); }
.press__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(26px, 3vw, 38px); min-height: 260px;
  background-color: var(--canvas-2);
  background-image: var(--sheen), var(--grain);
  background-size: auto, var(--grain-size);
  border: 1px solid var(--line-soft);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* a gold rule across the head of the card that draws itself out on hover */
.press__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(.2); transform-origin: left;
  transition: transform .6s var(--ease);
}
.press__card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.press__card:hover::before { transform: scaleX(1); }

/* the platform glyph, set large and ghosted like a watermark */
.press__mark {
  position: absolute; z-index: -1; right: -26px; bottom: -26px;
  width: 132px; height: 132px; color: var(--gold);
  opacity: .1; stroke-width: 1;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.press__card:hover .press__mark { opacity: .18; transform: translate(-6px, -6px) rotate(-4deg); }

.press__kind {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink);
}
.press__kind::before { content: ""; width: 16px; height: 1px; background: var(--gold); }
.press__card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.25; }
.press__go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.press__go svg { width: 15px; height: 15px; }
.press__card:hover .press__go { color: var(--gold-ink); }

/* ---------- request form ---------- */
.request {
  background-color: var(--canvas-2); background-image: var(--grain); background-size: var(--grain-size);
  border-block: 1px solid var(--line-soft);
}
.request__grid { display: grid; gap: var(--s-6); }
.request__assure { display: grid; gap: 12px; margin-top: var(--s-5); }
.request__assure li { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 15px; }
.request__assure svg { width: 17px; height: 17px; color: var(--gold); flex: none; }

.form {
  display: grid; gap: var(--s-3);
  background-color: var(--paper);
  background-image: var(--sheen), var(--grain);
  background-size: auto, var(--grain-size);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3.4vw, 44px);
}
.field { display: grid; gap: 8px; align-content: start; }
.field-row { display: grid; gap: var(--s-3); align-items: start; }
.field label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.req { color: var(--gold-ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--canvas); border: 1px solid var(--line-soft); border-radius: var(--radius);
  color: var(--ink); font-size: 16px; font-weight: 300;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A6820' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: var(--paper); }
.field__hint { font-size: 12.5px; color: var(--ink-3); }
.field__error { font-size: 12.5px; color: #A6392B; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #A6392B; }
.field.has-error .field__error { display: flex; align-items: center; gap: 6px; }
.form__foot { font-size: 13.5px; color: var(--ink-3); text-align: center; }
.form__foot a { color: var(--gold-ink); border-bottom: 1px solid var(--gold); }

.form-done {
  background-color: var(--paper);
  background-image: var(--sheen), var(--grain);
  background-size: auto, var(--grain-size);
  border: 1px solid var(--gold); box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3.4vw, 44px); display: grid; gap: var(--s-2);
}
.form-done__tick { width: 44px; height: 44px; color: var(--gold); }
.form-done h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; }
.form-done p { color: var(--ink-2); }
.form-done__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: var(--s-2);
}
.form-done__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.copy-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 38px; padding: 8px 16px;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); border: 1px solid var(--gold); border-radius: 999px;
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn:hover { color: var(--on-gold); background: var(--gold); }
.copy-btn.is-done { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.form-done textarea {
  width: 100%; padding: 16px; background: var(--canvas); color: var(--ink-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-size: 14px; line-height: 1.6; resize: vertical;
}
.form-done__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-2); }
.form-done__actions .btn { flex: 1 1 200px; }

/* ---------- contact (deep room) ---------- */
.contact { text-align: center; }
.contact__inner { display: grid; justify-items: center; gap: var(--s-3); }
.contact__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 6.5vw, 5rem); line-height: 1.03; letter-spacing: -.02em;
}
.contact__title em { font-style: italic; color: var(--gold-ink); }
.contact .btn { margin-top: var(--s-3); }
.contact__list {
  display: grid; gap: var(--s-3); margin-top: var(--s-6);
  width: 100%; max-width: 820px; text-align: left;
  border-top: 1px solid var(--line-soft); padding-top: var(--s-4);
}
.contact__list li { display: grid; gap: 4px; }
.contact__label { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.contact__list a, .contact__list span:not(.contact__label) { font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: var(--ink); word-break: break-word; }
.contact__list a { transition: color .3s var(--ease); }
.contact__list a:hover { color: var(--gold-ink); }

/* ---------- footer (deep room) ---------- */
.footer {
  background-color: var(--canvas-2); background-image: var(--grain); background-size: var(--grain-size);
  border-top: 1px solid var(--line); padding-top: var(--s-7);
}
.footer__grid { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); }
.footer__brand img { width: 72px; height: 72px; margin-bottom: var(--s-2); }
.footer__statement { color: var(--ink-2); max-width: 42ch; font-size: 15px; }
.footer h3 { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--s-2); font-weight: 500; }
.footer__nav, .footer__social { display: grid; gap: 4px; align-content: start; }
.footer__nav a, .footer__social a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  color: var(--ink-2); font-size: 14.5px; transition: color .3s var(--ease);
}
.footer__nav a:hover, .footer__social a:hover { color: var(--gold-ink); }
.footer__social svg { width: 17px; height: 17px; }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding-block: var(--s-3); border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-3);
}
.footer__tag { font-family: var(--serif); font-style: italic; font-size: 15px; }

/* ---------- floating messenger ---------- */
.fab {
  position: fixed; right: clamp(16px, 3vw, 32px);
  bottom: max(clamp(16px, 3vw, 32px), env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0 16px; border-radius: 999px;
  background: var(--gold); color: var(--on-gold);
  box-shadow: 0 14px 40px -12px rgba(138, 104, 32, .55);
  transition: gap .4s var(--ease), padding .4s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
  overflow: hidden;
}
.fab svg { width: 26px; height: 26px; fill: currentColor; stroke: none; flex: none; }
.fab .fab__bolt { fill: var(--gold); }
.fab__label {
  max-width: 0; opacity: 0; white-space: nowrap;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: max-width .45s var(--ease), opacity .3s var(--ease);
}
.fab:hover, .fab:focus-visible { gap: 10px; background: var(--gold-ink); color: var(--canvas); transform: translateY(-2px); }
.fab:hover .fab__bolt, .fab:focus-visible .fab__bolt { fill: var(--gold-ink); }
.fab:hover .fab__label, .fab:focus-visible .fab__label { max-width: 140px; opacity: 1; }

/* ---------- lightbox: a lit viewing room ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lb);
  background: rgba(250, 246, 239, .96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: grid; place-items: center;
  padding: clamp(56px, 8vw, 88px) clamp(16px, 5vw, 88px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__figure { display: grid; gap: var(--s-3); justify-items: center; max-height: 100%; }
.lightbox__figure img {
  max-width: 100%; max-height: 66svh; width: auto; height: auto;
  object-fit: contain; border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.lightbox__figure figcaption { text-align: center; display: grid; gap: 10px; justify-items: center; }
.lightbox__figure h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2rem); }
.lightbox__figure p { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.lightbox__close, .lightbox__nav {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  border: 1px solid var(--line-soft); background: var(--paper);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { color: var(--gold-ink); border-color: var(--gold); }
.lightbox__close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(8px, 2vw, 28px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 28px); }

/* ---------- text choreography ----------
   .ch spans are written by splitChars() so the headline can assemble letter by
   letter; .brush is a gold stroke that paints across a phrase and leaves the
   words behind it. Both are JS-built — with no JS the text just sits there. */
.ch { display: inline-block; will-change: transform, opacity; }
.ch--sp { width: .26em; }
.hero__title.is-split .line { overflow: visible; }

.brush { position: relative; display: inline-block; }
.brush__ink { display: inline-block; will-change: clip-path; }
.brush__sweep {
  position: absolute; left: -.05em; right: -.05em; top: .1em; bottom: .06em;
  background: linear-gradient(100deg, var(--gold-ink), var(--gold) 52%, var(--gold-ink));
  border-radius: 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  transform: scaleX(0);
  pointer-events: none;
  will-change: transform;
}

/* ---------- reveal defaults (JS enhances; CSS guarantees visibility) ---------- */
.js .reveal, .js .reveal-line > span { opacity: 0; }
.js .reveal { transform: translateY(24px); }
.js .reveal-line > span { transform: translateY(105%); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width: 639px) {
  /* the stat row cramps and collides with the floating Messenger button on
     small phones — the scroll cue carries the hero foot on its own */
  .hero__stats { display: none; }
}

@media (min-width: 560px) {
  .masonry { column-count: 2; }
  .about__facts { grid-template-columns: repeat(3, 1fr); }
  .field-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .options { grid-template-columns: 1fr 1fr; }
  .range { grid-template-columns: 1.05fr 1fr; gap: var(--s-4); }
  .press__grid { grid-template-columns: repeat(3, 1fr); }
  .contact__list { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (max-width: 767px) {
  /* the two commission options become a swipeable rail — the second card peeks
     in from the right so the gesture is obvious without a label */
  .options {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-bottom: 4px;
  }
  .options::-webkit-scrollbar { display: none; }
  .option { scroll-snap-align: center; }

  /* and the price panels alternate their entrance rather than sitting in a
     single flat column */
  .range { gap: 14px; }
}

@media (max-width: 899px) {
  /* The fan is drawn with transforms, which reserve no layout width, so the
     room it needs is booked through --fan-space on the stage. On a phone the
     stage is capped by the viewport instead, and the card kept its full 268px
     — the tail of the fan then hung past the right edge and the page gained a
     horizontal scroll. Here the card gives up the fan's room rather than the
     viewport absorbing it. */
  .deck-wrap { --fan-space: 72px; }
  .deck { width: min(var(--deck-w), calc(100% - var(--fan-space))); }

  /* the cards still stack on a phone — they just drop the reserved height and
     tighten up, so each one fits above the fold and can be scrolled under */
  .stack--info .stack__card { min-height: 0; }
  .stack__card { padding: 24px 22px; margin-bottom: var(--s-3); }
  .stack__card h3 { font-size: 1.6rem; }
  .stack__list li { padding: 9px 0; font-size: 15px; }
  .lead-card { padding: 12px 0; }
  .lead-card__value { font-size: 1.35rem; }
  .stack__note { font-size: 1rem; }
}

@media (min-width: 900px) {
  .deck-wrap {
    --deck-w: min(100%, 400px);
    --fan-space: 220px;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: var(--s-6);
    align-items: center;
  }
  .about__grid { grid-template-columns: .85fr 1.15fr; align-items: start; gap: var(--s-7); }
  .about__media { position: sticky; top: 110px; }
  .request__grid { grid-template-columns: .85fr 1.15fr; align-items: start; gap: var(--s-7); }
  .request__intro { position: sticky; top: 110px; }
  .form-done { grid-column: 2; }
}

@media (min-width: 1024px) {
  .masonry { column-count: 3; }
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .mobile-menu { display: none !important; }
}

@media (min-width: 1600px) {
  .masonry { column-count: 4; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .reveal-line > span { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .hero__media img { transform: none !important; }
  .stack__card { position: static; transform: none !important; opacity: 1 !important; }
  .stack--info .stack__card { min-height: 0; }
  .timeline__fill { transform: scaleY(1); }
  /* the rails stop drifting and become plain horizontal scrollers */
  .rail__track { animation: none !important; }
  .rail__view { overflow-x: auto; }
  .deck-hint { opacity: 1 !important; }
}

/* ---------- print ---------- */
@media print {
  .nav, .fab, .lightbox, #preloader, .mobile-menu, .filters, .hero__foot { display: none !important; }
  body { background: #fff; color: #000; }
  .art, .section { break-inside: avoid; }
}