@charset "UTF-8";
/* =============================================================================
   SHREE JEE COLLECTION — STYLESHEET
   -----------------------------------------------------------------------------
   Everything you'd normally want to change lives in ONE place: the :root block
   directly below. Change a value there and it updates across the whole site.

   CONTENTS
   01  Design tokens
   02  Reset & base
   03  Typography primitives
   04  Layout primitives
   05  Motion primitives
   06  Buttons & links
   07  Intro — the crest reveal
   08  Header & navigation
   09  Hero
   10  Marquee
   11  Ledger (figures)
   12  The House (story)
   13  Collections
   14  The Edit (pinned horizontal)
   15  Craft (process rail)
   16  Quote banner
   17  Lookbook
   18  Terms of trade
   19  Line sheets
   20  Founder
   21  Contact & form
   22  Footer
   23  Chrome (cursor, progress, to-top)
   24  Responsive
   25  Reduced motion & print
============================================================================= */

/* == 01  DESIGN TOKENS ===================================================== */
:root {
  /* — Brand palette. The brass + ink comes straight off the SJC crest. — */
  --ink:        #0c0c0e;   /* deepest black — hero, footer, dark sections     */
  --ink-1:      #131317;   /* raised black — cards, alternating bands         */
  --ink-2:      #1c1c21;   /* highest black — hover states on dark            */
  --bone:       #f4f1ea;   /* warm paper — the main light background          */
  --bone-2:     #eae5db;   /* second paper — alternating light band           */
  --stone:      #d6d1c5;   /* muted card / placeholder                        */

  --brass:      #a88a54;   /* the crest gold — rules, accents, hairlines      */
  --brass-2:    #c9ad79;   /* lifted gold — accents ON DARK                   */
  --brass-3:    #e6d6b2;   /* highlight gold — specular sweeps                */
  --brass-ink:  #7a5f2c;   /* deep gold — accent TEXT ON LIGHT (contrast-safe)*/

  --on-dark:    #ede9e1;   /* body copy on ink                                */
  --on-dark-mu: #a9a69e;   /* muted copy on ink        (7.4:1 — passes AA)    */
  --on-light:   #16161a;   /* body copy on bone                               */
  --on-light-mu:#5c5a55;   /* muted copy on bone       (6.2:1 — passes AA)    */

  --line-dark:  rgba(230,214,178,.16);  /* hairline on ink                    */
  --line-light: rgba(22,22,26,.14);     /* hairline on bone                   */

  /* — Type — */
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.875rem, 1rem + 7.4vw, 7.5rem);
  --fs-d1:    clamp(2.375rem, 1.25rem + 4.9vw, 5.5rem);
  --fs-d2:    clamp(1.875rem, 1.15rem + 3.1vw, 3.75rem);
  --fs-d3:    clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
  --fs-h4:    clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  --fs-lead:  clamp(1.0625rem, 1rem + .42vw, 1.3125rem);
  --fs-body:  clamp(1rem, .965rem + .17vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-label: .75rem;

  --tracking-label: .26em;
  --tracking-wide:  .1em;

  /* — Space (spacious scale; luxury sites breathe) — */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;  --s5: 3rem;
  --s6: 4rem;   --s7: 6rem;   --s8: 8rem;   --s9: 11rem;
  --section-y: clamp(5rem, 3rem + 8.5vw, 11rem);

  /* — Layout — */
  --maxw:   1360px;
  --maxw-n: 1100px;                        /* narrow measure for editorial    */
  --gutter: clamp(1.25rem, 4.6vw, 5rem);
  --header-h: 76px;

  /* — Motion — */
  --e-out:  cubic-bezier(.16, 1, .3, 1);      /* expo.out — the house easing  */
  --e-io:   cubic-bezier(.76, 0, .24, 1);     /* expo.inOut — big moves       */
  --e-soft: cubic-bezier(.33, 1, .68, 1);
  --t-fast: .22s;
  --t-mid:  .45s;
  --t-slow: .9s;

  --z-drawer: 400; --z-header: 300; --z-chrome: 500; --z-intro: 900;
}

/* == 02  RESET & BASE ====================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
html.js-smooth { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--on-light);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brass); color: var(--ink); }

/* Focus — visible, on-brand, never removed. */
:focus-visible {
  outline: 2px solid var(--brass-2);
  outline-offset: 3px;
  border-radius: 1px;
}
.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 1000;
  background: var(--ink); color: var(--bone);
  padding: .875rem 1.5rem;
  font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--e-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* == 03  TYPOGRAPHY PRIMITIVES ============================================= */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.display-hero { font-size: var(--fs-hero); line-height: .94; letter-spacing: -.03em; }
.display-1    { font-size: var(--fs-d1);   line-height: .98; letter-spacing: -.022em; }
.display-2    { font-size: var(--fs-d2);   line-height: 1.02; letter-spacing: -.018em; }
.display-3    { font-size: var(--fs-d3);   line-height: 1.1;  letter-spacing: -.012em; }
.display em, .display-1 em, .display-2 em, .display-hero em, h2 em {
  font-style: italic; font-weight: 400;
}

/* Small tracked label — the workhorse of luxury typography. */
.label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brass-ink);
  line-height: 1;
}
.label--dark { color: var(--brass-2); }
.label--mark { display: flex; align-items: center; gap: .75rem; }
.label--mark::before {
  content: ""; width: 1.75rem; height: 1px; flex: none;
  background: currentColor; opacity: .55;
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--e-out) .15s;
}
.is-in .label--mark::before, .label--mark.is-in::before { transform: scaleX(1); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--on-light-mu);
  max-width: 46ch;
  font-weight: 300;
}
.lead--dark { color: var(--on-dark-mu); }
p { max-width: 68ch; }
.measure-tight { max-width: 40ch; }

.rule { height: 1px; background: var(--line-light); border: 0; }
.rule--dark { background: var(--line-dark); }

/* == 04  LAYOUT PRIMITIVES ================================================= */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: var(--maxw-n); }
.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark p, .section--dark .lead { color: var(--on-dark-mu); }
.section--paper { background: var(--bone); }
.section--paper-2 { background: var(--bone-2); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 44ch; }
.section-head .label { margin-bottom: var(--s3); }
.section-head h2 { margin-bottom: var(--s3); }
.section-head--wide { max-width: 62ch; }
.section-head--split {
  max-width: none; display: grid; gap: var(--s4) clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end;
}
.section-head--split .lead { margin-bottom: .35rem; }

/* Index number used beside section headings — quiet editorial detail. */
.section-index {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  color: var(--brass);
  opacity: .8;
}

/* == 05  MOTION PRIMITIVES ================================================= */
/* Everything below is gated on .anim-ready, not merely on JS being enabled.
   That class is armed in the page head and withdrawn unless main.js checks in,
   so content can only ever be hidden while the code that reveals it is
   confirmed to be running. No JS, blocked JS or a stale cached copy all end
   the same way: the full page, visible. */
.anim-ready [data-anim] { opacity: 0; will-change: opacity, transform; }
.anim-ready [data-anim].is-in { opacity: 1; }

.anim-ready [data-anim="up"]    { transform: translate3d(0, 2.25rem, 0); }
.anim-ready [data-anim="fade"]  { transform: none; }
.anim-ready [data-anim="right"] { transform: translate3d(-1.75rem, 0, 0); }
.anim-ready [data-anim="scale"] { transform: scale(.965); }
.anim-ready [data-anim].is-in { transform: none; }
.anim-ready [data-anim] {
  transition:
    opacity var(--t-slow) var(--e-out) var(--d, 0ms),
    transform var(--t-slow) var(--e-out) var(--d, 0ms);
}
.anim-ready [data-anim].is-in { will-change: auto; }

/* Stagger children: set --i on each child (done in markup or by JS). */
[data-stagger] > * { --d: calc(var(--i, 0) * 70ms); }

/* ── Photographs ───────────────────────────────────────────────────────────
   Images are NEVER hidden by anything a script has to undo.

   An earlier version clipped each frame to zero height and relied on a
   clip-path transition — driven by JavaScript — to open it. Any failure of
   that chain (a stale cached script, a throttled timeline, an interrupted
   transition) left the photograph invisible permanently. That is the wrong
   trade for a shop window.

   Now the entrance is a plain CSS animation on the image itself: it starts
   the moment the element renders, needs no class, no observer and no script,
   and `both` fill means it can only ever end in the visible state. */
.figure { position: relative; overflow: hidden; background: var(--stone); }

.figure > img, .figure > video {
  width: 100%; height: 100%; object-fit: cover;
  /* --py is written by the parallax loop; kept in the same transform so
     depth and settle share one composited layer. */
  transform: translate3d(0, var(--py, 0px), 0) scale(1);
  opacity: 1;                       /* never animated — see below */
  animation: photo-in 1.4s var(--e-out) both;
}
/* The entrance animates SCALE ONLY. Opacity is deliberately left out: an
   animation that starts from opacity 0 leaves the image invisible whenever it
   fails to run, and "both" fill holds that first keyframe indefinitely. With
   scale alone the worst case is a photograph sitting 6% larger than intended
   — still a photograph, still on screen. */
@keyframes photo-in {
  from { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); }
  to   { transform: translate3d(0, var(--py, 0px), 0) scale(1); }
}
/* Once the entrance is done, parallax should track the scrollbar directly. */
.figure.is-settled > img, .figure.is-settled > video { animation: none; opacity: 1; }

/* Word-mask reveal for headings (built by main.js).
   Words sit in their final position by default and are only pushed out of
   sight while the reveal is armed, so a heading can never be left blank. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.w > i {
  display: inline-block; font-style: inherit;
  transform: none;
  transition: transform 1s var(--e-out) calc(var(--wi, 0) * 55ms + var(--d, 0ms));
}
.anim-ready .split:not(.is-in) .w > i { transform: translate3d(0, 110%, 0); }

/* Parallax layers — JS writes --py; only transforms are touched. */
[data-parallax] { will-change: transform; }
[data-parallax] > * { transform: translate3d(0, var(--py, 0px), 0); }

/* Hover-lift used on cards. */
.lift { transition: transform var(--t-mid) var(--e-out); }
@media (hover: hover) { .lift:hover { transform: translateY(-6px); } }

/* == 06  BUTTONS & LINKS =================================================== */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: var(--brass-2);
  --btn-bd: var(--brass-2);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 52px;
  padding: 1rem 2.25rem;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
  white-space: nowrap;
}
/* Fill sweeps up from the base on hover — no layout properties animated. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  transform: scaleY(1); transform-origin: bottom;
  transition: transform var(--t-mid) var(--e-io);
}
.btn span { display: block; transform: translateZ(0); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--brass-2); }
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: scaleY(0); transform-origin: top; }

.btn--ghost { --btn-fg: var(--on-dark); --btn-bd: rgba(237,233,225,.34); --btn-bg: var(--bone); }
.btn--ghost::before { transform: scaleY(0); transform-origin: bottom; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--bone); }
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { transform: scaleY(1); }

.btn--outline { --btn-fg: var(--on-light); --btn-bd: rgba(22,22,26,.28); --btn-bg: var(--ink); }
.btn--outline::before { transform: scaleY(0); transform-origin: bottom; }
.btn--outline:hover, .btn--outline:focus-visible { color: var(--bone); border-color: var(--ink); }
.btn--outline:hover::before, .btn--outline:focus-visible::before { transform: scaleY(1); }

.btn--full { width: 100%; }

/* Underline link with a wipe-through rule.
   The vertical padding is what lifts the tap target to 44px+ on touch;
   the rule is offset to match so it still reads as an underline. */
.link {
  position: relative; display: inline-block;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding-block: .8125rem;
}
.link::after,
.link::before {
  content: ""; position: absolute; left: 0; bottom: .5rem; height: 1px; width: 100%;
}
.link::before { background: currentColor; opacity: .28; }
.link::after {
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-mid) var(--e-out);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link .arw { display: inline-block; transition: transform var(--t-mid) var(--e-out); }
.link:hover .arw { transform: translateX(.375rem); }

/* == 07  INTRO — THE CREST REVEAL ========================================== */
/*  Choreography (≈3.4s):
    1. a hairline of brass light draws across the void
    2. the crest is wiped open from that line, top and bottom at once
    3. a specular band sweeps the metal
    4. the wordmark's letters converge from a spread
    5. the veil parts and hands over to the hero                              */
.intro {
  position: fixed; inset: 0; z-index: var(--z-intro);
  background: var(--ink);
  display: grid; place-items: center;
  overflow: hidden;
}
.intro[hidden] { display: none; }
.intro__veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
}
.intro__veil::before, .intro__veil::after {
  content: ""; position: absolute; left: -1px; right: -1px; height: 50.5%;
  background: var(--ink);
  transition: transform 1.15s var(--e-io);
}
.intro__veil::before { top: 0;    transform: translate3d(0, -101%, 0); }
.intro__veil::after  { bottom: 0; transform: translate3d(0, 101%, 0); }
.intro.is-closing .intro__veil::before { transform: translate3d(0, 0, 0); }
.intro.is-closing .intro__veil::after  { transform: translate3d(0, 0, 0); }

.intro__grain {
  position: absolute; inset: -50%; z-index: 4; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.intro__stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding-inline: var(--gutter);
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 1.15s var(--e-io), opacity .8s var(--e-out);
}
.intro.is-closing .intro__stage { transform: scale(.94); opacity: 0; }

/* 1 — the light bar */
.intro__bar {
  position: relative;
  width: min(76vw, 30rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-3) 22%, var(--brass-3) 78%, transparent);
  transform: scaleX(0);
  animation: bar-draw 1.05s var(--e-out) .18s forwards;
}
.intro__bar::after {
  content: ""; position: absolute; inset: -2px 0;
  background: inherit; filter: blur(6px); opacity: .75;
}
@keyframes bar-draw { to { transform: scaleX(1); } }

/* 2 + 3 — the crest, wiped open from the bar, then polished */
.intro__crest {
  position: relative;
  width: clamp(7.5rem, 20vw, 11.5rem);
  margin-block: clamp(1.75rem, 4vw, 2.75rem);
  clip-path: inset(50% 0 50% 0);
  animation: crest-open 1.15s var(--e-io) .72s forwards;
}
.intro__crest img { width: 100%; filter: drop-shadow(0 1.5rem 3rem rgba(0,0,0,.6)); }
@keyframes crest-open { to { clip-path: inset(0 0 0 0); } }

.intro__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255,250,238,.06) 45%,
    rgba(255,250,238,.55) 50%, rgba(255,250,238,.06) 55%, transparent 62%);
  mix-blend-mode: screen;
  transform: translate3d(-140%, 0, 0);
  animation: sheen-sweep 1.25s var(--e-soft) 1.32s forwards;
}
@keyframes sheen-sweep { to { transform: translate3d(140%, 0, 0); } }

/* 4 — the wordmark: letters converge from a spread and settle.
   Set as two unbreakable units — "SHREE JEE" and "COLLECTION" — which sit on
   one line when there is room and stack cleanly when there is not. Nothing
   can ever break mid-word. */
.intro__word {
  --spread: .8rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 4.2vw, 1.875rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.35;
  max-width: 100%;
}
.intro__line {
  display: flex; flex-wrap: nowrap; white-space: nowrap;
  padding-left: .3em;        /* offsets the trailing letter-space, so each
                                line reads as optically centred */
}
.intro__word .ch {
  /* Each line converges around its own centre, set by --lmid in main.js. */
  --dx: calc((var(--cx, 0) - var(--lmid, 0)) * var(--spread));
  display: inline-block; white-space: pre;
  opacity: 0;
  transform: translate3d(var(--dx), 0, 0);
  animation: ch-settle .95s var(--e-out) calc(1.62s + var(--ci, 0) * 26ms) forwards;
}

/* Phones: always two lines. One line technically fits at 375px, but only
   just — stacked is the cleaner, more deliberate composition. */
@media (max-width: 600px) {
  .intro__word { flex-direction: column; align-items: center; --spread: .42rem; }
  .intro__line { justify-content: center; }
}
@keyframes ch-settle { to { opacity: 1; transform: translate3d(0, 0, 0); } }

.intro__sub {
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brass-2);
  opacity: 0;
  animation: fade-rise .9s var(--e-out) 2.42s forwards;
}
@keyframes fade-rise { from { opacity: 0; transform: translate3d(0, .625rem, 0); } to { opacity: 1; transform: none; } }

.intro__skip {
  position: absolute; z-index: 5;
  right: var(--gutter); bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-dark-mu);
  padding: .75rem 1rem; margin: -.75rem -1rem;
  min-height: 44px; display: inline-flex; align-items: center;
  opacity: 0;
  animation: fade-rise .6s var(--e-out) 1s forwards;
  transition: color var(--t-fast) var(--e-out);
}
.intro__skip:hover { color: var(--brass-2); }

/* == 08  HEADER & NAVIGATION =============================================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  transition: transform var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(12,12,14,.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transition: opacity var(--t-mid) var(--e-out);
}
.header.is-stuck::before { opacity: 1; }
.header.is-hidden { transform: translate3d(0, -100%, 0); }

.header__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.brand { display: flex; align-items: center; gap: .8125rem; padding-block: .5rem; }
.brand img { width: 34px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bone);
}
.brand__sub {
  font-size: .5625rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass-2);
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.nav a {
  position: relative;
  font-size: var(--fs-label); font-weight: 400;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(237,233,225,.82);
  padding-block: .5rem;
  transition: color var(--t-fast) var(--e-out);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .125rem; height: 1px;
  background: var(--brass-2);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-mid) var(--e-out);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="true"] { color: var(--bone); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="true"]::after {
  transform: scaleX(1); transform-origin: left;
}
.header__cta { display: none; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px; margin-right: -12px;
  place-items: center;
}
.nav-toggle__box { position: relative; width: 22px; height: 12px; }
.nav-toggle__box span {
  position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--bone);
  transition: transform var(--t-mid) var(--e-out), opacity var(--t-fast) linear;
}
.nav-toggle__box span:first-child { top: 0; }
.nav-toggle__box span:last-child  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:first-child { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:last-child  { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden;
}
.drawer[data-open="true"] { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(12,12,14,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--t-mid) var(--e-out);
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(88vw, 26rem);
  background: var(--ink);
  border-left: 1px solid var(--line-dark);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translate3d(100%, 0, 0);
  transition: transform .6s var(--e-io);
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--bone);
  padding-block: .8125rem;
  border-bottom: 1px solid var(--line-dark);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  opacity: 0; transform: translate3d(1.25rem, 0, 0);
  transition: opacity .5s var(--e-out) var(--d), transform .5s var(--e-out) var(--d), color var(--t-fast);
}
.drawer[data-open="true"] .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a { --d: calc(var(--i) * 45ms + 120ms); }
.drawer__nav a:hover { color: var(--brass-2); }
.drawer__nav a em {
  font-family: var(--font-sans); font-style: normal;
  font-size: var(--fs-label); letter-spacing: .18em; color: var(--brass);
}
.drawer__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 1.25rem; }
.drawer__foot .btn { width: 100%; }
.drawer__tel {
  font-family: var(--font-display); font-size: 1.375rem; color: var(--brass-2);
  display: inline-block; padding-block: .4rem;
}

/* == 09  HERO ============================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink); color: var(--on-dark);
  overflow: hidden;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) contrast(1.12) brightness(.62) sepia(.16);
  transform: scale(1.06);
}
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--e-out); }
.hero__media video.is-ready { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,12,14,.86) 0%, rgba(12,12,14,.42) 32%, rgba(12,12,14,.9) 88%),
    radial-gradient(120% 85% at 20% 60%, transparent 20%, rgba(12,12,14,.72) 100%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__body { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.hero__label { color: var(--brass-2); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.hero__title {
  color: var(--bone);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 15ch;
}
.hero__title em { color: var(--brass-2); }
.hero__row {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-dark);
}
.hero__sub { color: var(--on-dark); max-width: 42ch; font-size: var(--fs-lead); line-height: 1.55; }
.hero__actions { display: flex; gap: .875rem; flex-wrap: wrap; }

.hero__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
}
.hero__meta div { display: flex; flex-direction: column; gap: .375rem; }
.hero__meta dt {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brass-2);
}
.hero__meta dd { font-family: var(--font-display); font-size: 1.0625rem; color: var(--on-dark); }

/* Sits vertically in the left gutter rather than under the copy — it never
   fights the meta row for the bottom edge. */
.scroll-cue {
  position: absolute; z-index: 2;
  left: max(.75rem, calc(var(--gutter) - 2.5rem));
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .875rem;
  font-size: .625rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(237,233,225,.55);
  transition: opacity var(--t-mid) var(--e-out);
}
.scroll-cue span { writing-mode: vertical-rl; }
.scroll-cue i { display: block; width: 1px; height: 3.5rem; background: rgba(237,233,225,.22); overflow: hidden; position: relative; }
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brass-2);
  transform: translateY(-100%);
  animation: cue 2.4s var(--e-soft) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
.hero.is-scrolled .scroll-cue { opacity: 0; }

/* == 10  MARQUEE =========================================================== */
.marquee {
  background: var(--ink-1); color: var(--brass-2);
  border-block: 1px solid var(--line-dark);
  overflow: hidden; padding-block: 1.125rem;
  display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; flex: none; gap: 0;
  animation: marquee 52s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  flex: none;
  font-size: var(--fs-label); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  white-space: nowrap;
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
}
.marquee__track i { width: 3px; height: 3px; flex: none; background: var(--brass); transform: rotate(45deg); }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* == 11  LEDGER (FIGURES) ================================================== */
.ledger { background: var(--ink); color: var(--on-dark); padding-block: clamp(3.5rem, 7vw, 6rem); }
.ledger__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}
.ledger__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger__item {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: .625rem;
}
.ledger__item:last-child { border-right: 0; }
.ledger__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: .92;
  letter-spacing: -.03em; color: var(--brass-2);
  font-variant-numeric: lining-nums tabular-nums;
  display: flex; align-items: baseline;
}
/* Units sit with the numeral rather than being baked into its text, so the
   counter can animate the number without rewriting them. */
.ledger__unit { font-weight: 400; letter-spacing: 0; }
.ledger__unit--plus {
  font-size: 1.35em; font-weight: 500;
  color: var(--brass-3);
  margin-left: .06em;
  line-height: 1;
}
.ledger__label {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-dark-mu);
}

/* == 12  THE HOUSE (STORY) ================================================= */
.house__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
.house__figure { aspect-ratio: 4 / 5; }
.house__caption {
  margin-top: 1rem; font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--on-light-mu);
}
.house__copy p + p { margin-top: 1.125rem; }
.house__copy .lead { margin-bottom: 1.5rem; }
.house__sign {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem; border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
}
.house__sign div { display: flex; flex-direction: column; gap: .25rem; }
.house__sign dt { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brass-ink); }
.house__sign dd { font-family: var(--font-display); font-size: 1.125rem; }

/* == 13  COLLECTIONS ======================================================= */
.collections__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
}
.piece { display: flex; flex-direction: column; }
.piece__figure { aspect-ratio: 4 / 5; }
.piece__figure img { transition: transform 1.4s var(--e-out); }
@media (hover: hover) { .piece:hover .piece__figure img { transform: scale(1.05); } }
.piece__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.5rem; padding-bottom: .875rem;
  border-bottom: 1px solid var(--line-light);
}
.piece__num { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: .16em; color: var(--brass-ink); }
.piece__name { font-size: var(--fs-d3); }
.piece__body { margin-top: 1.125rem; color: var(--on-light-mu); max-width: 40ch; }
.piece__spec {
  margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem;
}
.piece__spec li {
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-light-mu);
  border: 1px solid var(--line-light);
  padding: .5rem .75rem;
}
.piece__link { margin-top: .875rem; align-self: flex-start; color: var(--on-light); }

/* == 14  THE EDIT (PINNED HORIZONTAL) ====================================== */
.edit { position: relative; background: var(--ink); color: var(--on-dark); }
.edit__pin {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
}
.edit__bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) 1.25rem;
}
.edit__bar .label { color: var(--brass-2); }
.edit__count { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: .18em; color: var(--on-dark-mu); }
.edit__count b { color: var(--brass-2); font-weight: 400; }

.edit__track {
  flex: 1; min-height: 0;
  display: flex; align-items: stretch;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
.edit__slide {
  flex: 0 0 clamp(17rem, 42vw, 34rem);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink-1);
}
.edit__slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--e-out);
}
.edit__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(12,12,14,.92) 0%, rgba(12,12,14,.15) 52%, transparent 78%);
}
@media (hover: hover) { .edit__slide:hover img { transform: scale(1.04); } }
.edit__cap {
  position: relative; z-index: 2;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column; gap: .625rem;
}
.edit__cap .num { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: .18em; color: var(--brass-2); }
.edit__cap h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); color: var(--bone); }
.edit__cap p { font-size: var(--fs-small); color: var(--on-dark-mu); max-width: 34ch; }

.edit__rail { position: relative; z-index: 3; height: 1px; margin-inline: var(--gutter); background: var(--line-dark); }
.edit__rail i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--brass-2); transform: scaleX(0); transform-origin: left; }
.edit__pin { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* == 15  CRAFT (PROCESS RAIL) ============================================== */
/* Purely typographic. The library holds one photograph of the floor, so six
   thumbnails of it would have read as filler — set numerals and hairlines
   carry more authority here than a repeated image.                          */
.craft__grid { display: block; }
.craft__steps {
  border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 6rem);
}
.craft__step {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line-dark);
  transition: background var(--t-mid) var(--e-out);
}
.craft__step .n {
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1; color: var(--brass-2);
  font-variant-numeric: lining-nums;
}
.craft__step h3 { font-size: var(--fs-h4); color: var(--bone); margin-bottom: .5rem; }
.craft__step p { font-size: var(--fs-small); color: var(--on-dark-mu); max-width: 52ch; }

/* == 16  QUOTE BANNER ====================================================== */
.quote { position: relative; overflow: hidden; isolation: isolate; }
.quote__media { position: absolute; inset: -12% 0; z-index: -2; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,12,14,.78), rgba(12,12,14,.66));
}
.quote__inner {
  padding-block: clamp(5rem, 12vw, 10rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.75rem;
}
.quote blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.22; letter-spacing: -.02em;
  color: var(--bone); max-width: 20ch;
}
.quote cite {
  font-style: normal; font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brass-2);
}

/* == 17  TERMS OF TRADE ==================================================== */
.trade { background: var(--ink-1); color: var(--on-dark); }
.trade__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
}
.trade__list { border-top: 1px solid var(--line-dark); }
.trade__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: .5rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.25rem, 2.6vw, 1.875rem);
  border-bottom: 1px solid var(--line-dark);
}
.trade__list dt, .trade__list strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h4); color: var(--bone);
}
.trade__list span { font-size: var(--fs-small); color: var(--on-dark-mu); }
.trade__cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* == 19  LINE SHEETS ======================================================= */
.sheets__list { border-top: 1px solid var(--line-light); }
.sheets__row {
  display: grid; align-items: center;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.375rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line-light);
  position: relative;
  transition: color var(--t-mid) var(--e-out);
}
.sheets__row::before {
  content: ""; position: absolute; inset: 0 -1.25rem;
  background: var(--bone-2); z-index: -1;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-mid) var(--e-out);
}
@media (hover: hover) {
  .sheets__row:hover::before, .sheets__row:focus-visible::before { transform: scaleY(1); transform-origin: top; }
}
.sheets__row .n { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: .16em; color: var(--brass-ink); }
.sheets__row .t { font-family: var(--font-display); font-size: var(--fs-d3); }
.sheets__row .d { font-size: var(--fs-small); color: var(--on-light-mu); }
.sheets__row .a {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--brass-ink);
  display: inline-flex; align-items: center; gap: .625rem;
}
.sheets__row .a .arw { transition: transform var(--t-mid) var(--e-out); }
.sheets__row:hover .a .arw { transform: translateX(.375rem); }
.sheets__note { margin-top: 1.75rem; font-size: var(--fs-small); color: var(--on-light-mu); }

/* == 20  FOUNDER =========================================================== */
.founder { position: relative; background: var(--ink); color: var(--on-dark); overflow: hidden; }
.founder__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.founder__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .06; filter: grayscale(1); }
.founder__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.5rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
}
.founder__figure { aspect-ratio: 4 / 5; }
/* The portrait is already framed 4:5, so it sits in the box uncropped; the
   grade is what pulls it into the same world as the rest of the photography.
   Centred object-position keeps a future replacement sensible whatever its
   aspect ratio. */
.founder__figure img { object-position: 50% 50%; filter: grayscale(.35) contrast(1.06) brightness(.94); }
.founder__quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem); line-height: 1.38; letter-spacing: -.01em;
  color: var(--bone); max-width: 26ch;
  margin-block: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--brass);
}
.founder__attrib { display: flex; flex-direction: column; gap: .25rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
/* The name carries the block, so it is set in the display face at full
   paper white; the role and the house sit under it as quiet labels. */
.founder__attrib strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.1; letter-spacing: -.012em;
  color: var(--bone);
  margin-bottom: .5rem;
}
.founder__attrib span { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-mu); }
.founder__attrib span:first-of-type { color: var(--brass-2); }
.founder__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.founder__tags li {
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-mu); border: 1px solid var(--line-dark); padding: .5rem .75rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.founder__tags li:hover { color: var(--brass-2); border-color: rgba(201,173,121,.5); }

/* == 21  CONTACT & FORM ==================================================== */
.contact { background: var(--ink); color: var(--on-dark); padding-bottom: 0; }
.contact__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  padding-bottom: var(--section-y);
}
.contact__lines { display: grid; gap: 1.75rem; margin-block: clamp(2rem, 4vw, 2.75rem); }
.contact__line { display: flex; flex-direction: column; gap: .5rem; }
.contact__line dt { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brass-2); }
.contact__line dd { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.5; color: var(--on-dark); }
a.contact__value { display: inline-block; padding-block: .5rem; transition: color var(--t-fast); }
a.contact__value:hover { color: var(--brass-2); }

.form { background: var(--bone); color: var(--on-light); padding: clamp(1.75rem, 4vw, 3rem); }
.form__title { font-size: var(--fs-d3); margin-bottom: .5rem; }
.form__note { font-size: var(--fs-small); color: var(--on-light-mu); margin-bottom: 2rem; }
.field { margin-bottom: 1.5rem; }
.field > label {
  display: block; margin-bottom: .5rem;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-light-mu);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(22,22,26,.24);
  padding: .75rem 0;
  min-height: 48px;
  font-size: 1rem; font-weight: 300;
  transition: border-color var(--t-fast) var(--e-out);
}
.field textarea { resize: vertical; min-height: 92px; }
.field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a5f2c' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center;
  padding-right: 1.75rem; cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass-ink); border-bottom-width: 1px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--brass-2); outline-offset: 4px;
}
.field__error {
  display: block; margin-top: .5rem;
  font-size: .75rem; letter-spacing: .06em; color: #9a2f22;
  min-height: 1em;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #9a2f22; }
.form__status {
  margin-top: 1rem; font-size: var(--fs-small); color: var(--brass-ink); min-height: 1.5em;
}

.map { height: clamp(280px, 38vw, 420px); border-top: 1px solid var(--line-dark); background: var(--ink-1); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }

/* == 22  FOOTER ============================================================ */
.footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-dark);
}
.footer__brand { display: flex; gap: 1rem; align-items: flex-start; }
.footer__brand img { width: 44px; flex: none; }
.footer__brand p { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.45; }
.footer__brand span { display: block; margin-top: .375rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-mu); }
.footer__col h2 { font-size: var(--fs-label); font-weight: 500; font-family: var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brass-2); margin-bottom: 1.25rem; }
.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__links a {
  font-size: var(--fs-small); color: var(--on-dark-mu);
  padding-block: .625rem;            /* keeps the tap target at 44px+ */
  transition: color var(--t-fast);
}
.footer__links a:hover { color: var(--bone); }
.footer__contact a {
  display: inline-block; font-family: var(--font-display); font-size: 1.25rem;
  color: var(--brass-2); margin-bottom: .375rem; padding-block: .4rem;
}
.footer__contact address { font-style: normal; font-size: var(--fs-small); color: var(--on-dark-mu); line-height: 1.7; }
.footer__bottom {
  padding-block: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
}
.footer__bottom p { font-size: .75rem; letter-spacing: .04em; color: #8d8a83; max-width: 62ch; }

/* == 23  CHROME ============================================================ */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-chrome);
  background: var(--brass-2);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}
.cursor {
  position: fixed; top: 0; left: 0; z-index: 600;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--brass-2); border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(.4);
  transition: opacity .3s var(--e-out), background .3s var(--e-out);
  will-change: transform;
}
.cursor.is-active { opacity: .75; }
.cursor.is-hot { background: rgba(201,173,121,.16); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.to-top {
  position: fixed; right: var(--gutter); bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: var(--z-chrome);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  background: rgba(12,12,14,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--brass-2);
  opacity: 0; visibility: hidden;
  transform: translate3d(0, .75rem, 0);
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--bone); border-color: rgba(201,173,121,.5); }
.to-top svg { width: 14px; height: 14px; }

/* == 24  RESPONSIVE ======================================================== */
@media (max-width: 1080px) {
  .section-head--split { grid-template-columns: 1fr; }
  .house__grid, .trade__grid, .founder__grid, .contact__grid { grid-template-columns: 1fr; }
  .sheets__row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .sheets__row .d { grid-column: 2 / -1; grid-row: 2; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .hero__row { grid-template-columns: 1fr; align-items: start; }
  .hero__actions { width: 100%; }
  .ledger__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger__item:nth-child(2n) { border-right: 0; }
  .ledger__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledger__grid--3 .ledger__item:nth-child(2n) { border-right: 1px solid var(--line-dark); }
  .ledger__grid--3 .ledger__item:last-child { border-right: 0; }
  .scroll-cue { display: none; }
  .collections__grid { gap: clamp(2rem, 6vw, 3rem); }
  .craft__steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }

  /* The pinned horizontal edit becomes a native, thumb-friendly carousel. */
  .edit { height: auto !important; }
  .edit__pin { position: static; height: auto; padding-bottom: 0; }
  .edit__bar { padding-top: 0; }
  .edit__track {
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    padding-bottom: 1.5rem;
    scrollbar-width: none;
  }
  .edit__track::-webkit-scrollbar { display: none; }
  .edit__slide { flex: 0 0 min(78vw, 22rem); aspect-ratio: 3 / 4; scroll-snap-align: center; }
  .edit__rail { display: none; }
}

@media (max-width: 640px) {
  :root { --tracking-label: .2em; }
  .collections__grid { grid-template-columns: 1fr; }
  /* Three figures in three columns get cramped on a phone — stack them so the
     numerals keep their scale. */
  .ledger__grid--3 { grid-template-columns: 1fr; }
  .ledger__grid--3 .ledger__item,
  .ledger__grid--3 .ledger__item:nth-child(2n) { border-right: 0; }
  .hero { padding-top: calc(var(--header-h) + 2rem); }
  .hero__meta { grid-template-columns: 1fr; gap: .875rem; }
  .hero__meta div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem;
                    border-bottom: 1px solid var(--line-dark); padding-bottom: .75rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .trade__list li { grid-template-columns: 1fr; }
  .sheets__row { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: .5rem; }
  .sheets__row .d { grid-column: 2; grid-row: 2; }
  .sheets__row .a { grid-column: 2; grid-row: 3; }
  .footer__links { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .quote blockquote { max-width: 16ch; }
  .to-top { display: none; }
}

/* Short phones (iPhone SE class). The hero is a single composition, so it
   tightens rather than spilling its footer facts below the fold. */
@media (max-width: 640px) and (max-height: 740px) {
  .hero { padding-top: calc(var(--header-h) + 1.25rem); padding-bottom: 1rem; }
  .hero__label { margin-bottom: .875rem; }
  .hero__title { font-size: clamp(2.25rem, 8.6vw, 2.75rem); margin-bottom: 1rem; }
  .hero__sub { font-size: 1rem; }
  .hero__row { padding-bottom: 1.125rem; gap: 1.125rem; }
  .hero__actions { gap: .625rem; }
  .hero__actions .btn { min-height: 48px; padding-block: .75rem; }
  .hero__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem; padding-top: 1rem;
  }
  .hero__meta div {
    flex-direction: column; align-items: flex-start; gap: .25rem;
    border-bottom: 0; padding-bottom: 0;
  }
  .hero__meta dd { font-size: .9375rem; line-height: 1.3; }
}

/* The smallest phones still in use (320x568). The hero description is a full
   paragraph here, so the meta row stands down — the same three facts open The
   House immediately below it. */
@media (max-width: 640px) and (max-height: 620px) {
  .hero__meta { display: none; }
  .hero__row { border-bottom: 0; padding-bottom: 0; }
}

/* Wide but short — iPad landscape, laptops with a lot of browser chrome.
   The hero is a full-height composition, so it has to answer to height too. */
@media (min-width: 901px) and (max-height: 840px) {
  .hero { padding-top: calc(var(--header-h) + 1.75rem); }
  .hero__title {
    font-size: clamp(2.5rem, 5.6vw, 4.5rem);
    max-width: 20ch;
    margin-bottom: 1.25rem;
  }
  .hero__label { margin-bottom: 1rem; }
  .hero__row { padding-bottom: 1.5rem; }
  .hero__meta { padding-top: 1.125rem; }
}

/* Very short landscape phones — stop the hero from overflowing. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 3rem; }
  .scroll-cue { display: none; }
  .edit__pin { height: auto; }
}

/* == 25  REDUCED MOTION & PRINT ============================================ */
@media (prefers-reduced-motion: reduce) {
  html.js-smooth { scroll-behavior: auto; }

  /* Content still arrives — it just arrives without travel. */
  .anim-ready [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .figure > img, .figure > video { animation: none !important; opacity: 1 !important; }
  .figure > img, .figure > video { transform: none !important; }
  .anim-ready .split .w > i { transform: none !important; transition: none !important; }

  .marquee__track { animation: none; transform: none; }
  .scroll-cue i::after { animation: none; opacity: .5; transform: none; }
  .cursor { display: none; }

  /* The intro collapses to a still card that dismisses itself. */
  .intro__bar { animation: none; transform: scaleX(1); }
  .intro__crest { animation: none; clip-path: none; }
  .intro__sheen { display: none; }
  .intro__word .ch { animation: none; opacity: 1; transform: none; }
  .intro__sub, .intro__skip { animation: none; opacity: 1; }
  .intro, .intro__stage, .intro__veil::before, .intro__veil::after { transition: opacity .2s linear; }
  .intro.is-closing { opacity: 0; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .header, .drawer, .intro, .cursor, .progress, .to-top, .marquee, .scroll-cue, .map { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero, .founder, .contact, .footer, .trade, .edit, .craft { background: #fff !important; color: #000 !important; }
  .anim-ready [data-anim] { opacity: 1 !important; transform: none !important; }
  .edit__track { flex-wrap: wrap; }
}