/* Ashworth & Hale — v3 "The Dossier". British gentlemen's club × fashion editorial.
   Tokens in DESIGN.md: forest / ivory / brass; Barlow Condensed (cinematic) · Cormorant Garamond (editorial) · Manrope (interface);
   IBM Plex Mono only on the paper measurement ticket; Mrs Saint Delafield only for the cutter's signature. */

:root{
  --forest-950:#091914; --forest-900:#10241C; --forest-800:#1D362A; --forest-700:#2B4638; --sage:#6F7969;
  --ivory:#F6F3EB; --parchment:#E9E3D8; --stone:#CFC6BA; --charcoal:#171B19; --ink:#232725;
  --gold:#C6AA7A; --gold-deep:#8C704D; --gold-ink:#73593A; --burgundy:#5C1F2A;
  --on-dark:#F6F3EB; --on-dark-2:#C3C4B9; --on-light-2:#5C625C;
  --line-d:rgba(246,243,235,.15); --line-d2:rgba(246,243,235,.3); --line-l:rgba(35,39,37,.12); --line-l2:rgba(35,39,37,.24);
  --f-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --f-script:'Mrs Saint Delafield','Snell Roundhand',cursive;
  --gutter:clamp(20px,4.2vw,76px); --max:1440px; --section:clamp(88px,10vw,156px);
  --spine:76px; --nav-h:84px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  /* aliases kept for markup built by the scripts */
  --g-900:var(--forest-950); --g-800:var(--forest-900); --g-600:var(--forest-700); --chalk:var(--ivory); --paper:var(--parchment); --paper-2:var(--stone); --ink-2:var(--on-light-2); --brass:var(--gold); --brass-2:var(--gold);
}
@media (max-width:1100px){ :root{ --spine:0px; } }
@media (max-width:760px){ :root{ --nav-h:66px; } }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:var(--nav-h); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{ margin:0; padding-left:var(--spine); background:var(--forest-950); color:var(--on-dark); font:400 16px/1.7 var(--f-ui);
  font-synthesis:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
body.is-loading{ overflow:hidden; }
body.menu-open{ overflow:hidden; }
img,svg,canvas,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.light :focus-visible, .paper :focus-visible, .parch :focus-visible{ outline-color:var(--gold-deep); outline-width:2px; }
main:focus, section[tabindex="-1"]:focus, .form__ok:focus{ outline:none; }
::selection{ background:var(--gold); color:var(--forest-950); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:fixed; left:calc(var(--spine) + 16px); top:-80px; z-index:130; background:var(--ivory); color:var(--ink); padding:14px 20px; font:600 12px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; transition:top .3s var(--ease); }
.skip:focus{ top:16px; }

/* ---------- type ---------- */
.hero-t{ font:600 clamp(64px,8.4vw,152px)/.86 var(--f-display); letter-spacing:.012em; text-transform:uppercase; }
.hero-t em{ display:block; font:italic 500 clamp(46px,5.5vw,100px)/1 var(--f-serif); letter-spacing:-.025em; text-transform:none; color:var(--gold); margin-top:.16em; }
.cine{ font:600 clamp(46px,5.8vw,100px)/.88 var(--f-display); letter-spacing:.018em; text-transform:uppercase; }
.h1{ font:500 clamp(48px,5.8vw,100px)/.97 var(--f-serif); letter-spacing:-.026em; }
.h2{ font:500 clamp(42px,4.8vw,80px)/.99 var(--f-serif); letter-spacing:-.024em; }
.h3{ font:500 clamp(30px,2.7vw,44px)/1.04 var(--f-serif); letter-spacing:-.012em; }
.h1 em,.h2 em,.h3 em,.ital{ font-family:var(--f-serif); font-style:italic; font-weight:500; }
.h1 em,.h2 em,.h3 em{ color:var(--gold); }
.light .h1 em,.light .h2 em,.light .h3 em,.paper .h1 em,.paper .h2 em,.paper .h3 em,.parch .h2 em{ color:var(--gold-deep); }
.hero-t,.cine,.chapter-t,.h1,.h2,.h3{ text-wrap:balance; }
p,.lead,.figcap span,.card__cloth,.hanger__cap .ticket-t{ text-wrap:pretty; }
.display{ font-family:var(--f-serif); font-weight:500; letter-spacing:-.01em; line-height:1.05; }
.lead{ font:400 clamp(20px,1.65vw,25px)/1.42 var(--f-serif); letter-spacing:-.003em; }
.eyebrow{ display:inline-flex; align-items:center; gap:14px; font:600 11px/1.3 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.eyebrow::before{ content:""; flex:none; width:40px; height:1px; background:currentColor; }
.eyebrow--plain::before{ display:none; }
.light .eyebrow,.paper .eyebrow,.parch .eyebrow{ color:var(--gold-ink); }
.label,.ticket-t{ font:600 11px/1.45 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; }
.mono{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; }
.sub{ color:var(--on-light-2); }
.dark .sub,.deep .sub{ color:var(--on-dark-2); }
.muted{ opacity:.72; }
.measure{ max-width:60ch; }

/* ---------- surfaces & layout ---------- */
.deep{ background:var(--forest-950); color:var(--on-dark); position:relative; }
.dark,.room{ background:var(--forest-900); color:var(--on-dark); position:relative; }
.light,.paper{ background:var(--ivory); color:var(--ink); position:relative; }
.parch{ background:var(--parchment); color:var(--ink); position:relative; }
.light::before,.paper::before,.parch::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.light > *,.paper > *,.parch > *{ position:relative; }
.wrap{ width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; }
.section{ padding-block:var(--section); }
.hair{ border-top:1px solid var(--line-l); }
.grain{ position:fixed; inset:-20%; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)} 40%{transform:translate(1%,-2%)} 60%{transform:translate(-1%,2%)} 80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)} }

/* section head: chapter label + editorial headline on the left, a short paragraph and a link on the right */
.sec-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:28px clamp(32px,5vw,96px); align-items:end; margin-bottom:clamp(44px,5vw,80px); }
.sec-head__l{ display:grid; gap:24px; justify-items:start; }
.sec-head__r{ display:grid; gap:26px; justify-items:start; padding-bottom:10px; }
.sec-head__r p{ color:var(--on-light-2); max-width:46ch; }
.dark .sec-head__r p,.deep .sec-head__r p{ color:var(--on-dark-2); }
@media (max-width:900px){ .sec-head{ grid-template-columns:1fr; align-items:start; } .sec-head__r{ padding-bottom:0; } }

/* the stitched seam: the house's one ornament */
.seam{ position:relative; height:1px; background:repeating-linear-gradient(90deg, var(--line-d2) 0 9px, transparent 9px 15px); }
.light .seam,.paper .seam,.parch .seam{ background:repeating-linear-gradient(90deg, var(--line-l2) 0 9px, transparent 9px 15px); }
.seam span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:0 18px; background:var(--forest-950); font:600 14px/1 var(--f-serif); letter-spacing:.08em; color:var(--gold); }
.seam span i{ font-weight:500; }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:26px; min-height:52px; padding:0 26px; border:1px solid transparent; border-radius:1px;
  font:600 12px/1 var(--f-ui); letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn .arr,.tlink .arr,.room-card .arr{ display:inline-block; transition:transform .25s var(--ease); }
.btn:hover .arr,.tlink:hover .arr{ transform:translateX(4px); }
.tlink .arr--down{ transition:transform .25s var(--ease); }
.tlink:hover .arr--down{ transform:translateY(3px); }
.btn--light{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.btn--light:hover{ background:transparent; color:var(--ivory); }
.btn--dark{ background:var(--forest-950); color:var(--ivory); border-color:var(--forest-950); }
.btn--dark:hover{ background:var(--forest-800); border-color:var(--forest-800); }
.btn--gold{ border-color:var(--gold); color:var(--gold); }
.btn--gold:hover{ background:var(--gold); color:var(--forest-950); }
.btn--line{ border-color:var(--line-d2); color:var(--on-dark); }
.btn--line:hover{ border-color:var(--gold); }
.light .btn--line,.paper .btn--line,.parch .btn--line{ border-color:var(--line-l2); color:var(--ink); }
.light .btn--line:hover,.paper .btn--line:hover,.parch .btn--line:hover{ border-color:var(--ink); }
.btn--sm{ min-height:44px; padding:0 20px; gap:18px; font-size:11px; }
.btn[disabled]{ opacity:.5; cursor:default; }
.tlink{ display:inline-flex; align-items:center; gap:12px; padding:10px 0; white-space:nowrap; font:600 11px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat; transition:background-size .4s var(--ease); }
.tlink:hover{ background-size:0 1px; background-position:100% 100%; }
.link-u{ background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat; padding-bottom:2px; transition:background-size .4s var(--ease); }
.link-u:hover{ background-size:0 1px; background-position:100% 100%; }
/* segmented toggle: front / back, filters */
.seg{ display:inline-flex; border:1px solid var(--line-l2); }
.seg > button{ min-height:42px; padding:0 20px; font:600 11px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--on-light-2); transition:background .25s, color .25s; }
.seg > button + button{ border-left:1px solid var(--line-l2); }
.seg > button:hover:not(.is-on){ color:var(--ink); }
.seg > button.is-on{ background:var(--ink); color:var(--ivory); }
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:46px; padding:0 22px; border:1px solid var(--line-d2); color:var(--on-dark); font:600 11px/1 var(--f-ui); letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; transition:border-color .25s, background .25s, color .25s; }
.pill:hover{ border-color:var(--gold); }
.pill.is-on{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.light .pill,.paper .pill,.parch .pill{ border-color:var(--line-l2); color:var(--ink); }
.light .pill.is-on,.paper .pill.is-on,.parch .pill.is-on{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pill--sm{ min-height:40px; padding:0 18px; }
.round{ width:52px; height:52px; border:1px solid var(--line-l2); display:grid; place-items:center; color:var(--ink); background:rgba(246,243,235,.6); transition:border-color .25s, background .25s, color .25s; }
.round:hover{ border-color:var(--ink); background:var(--ink); color:var(--ivory); }
.round svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.2; }

/* ---------- loader ---------- */
.loader{ position:fixed; inset:0; z-index:110; background:var(--forest-950); display:grid; place-items:center; color:var(--on-dark); transition:transform 1s var(--ease-io); }
.loader.is-done{ transform:translateY(-100%); }
.loader.is-quick{ transition-duration:.55s; }
.loader.is-quick > div{ opacity:0; }
.loader__mono{ font:600 clamp(56px,9vw,112px)/1 var(--f-serif); letter-spacing:.06em; text-align:center; }
.loader__mono i{ font-weight:500; color:var(--gold); }
.loader__line{ width:min(60vw,360px); height:1px; background:var(--line-d2); margin:28px auto 18px; position:relative; overflow:hidden; }
.loader__line::after{ content:""; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; animation:draw 1.1s var(--ease-io) forwards; }
@keyframes draw{ to{ transform:scaleX(1); } }
.loader__no{ text-align:center; font:600 10px/1 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }

/* ---------- cursor ---------- */
.cursor{ display:none; }
@media (pointer:fine){
  .cursor{ display:grid; place-items:center; position:fixed; left:0; top:0; z-index:100; width:8px; height:8px; border-radius:50%; background:var(--gold); pointer-events:none;
    transform:translate(-50%,-50%); transition:width .22s var(--ease), height .22s var(--ease), background .22s, border-color .22s; mix-blend-mode:difference; }
  .cursor span{ font:600 9px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--ivory); opacity:0; transition:opacity .2s; white-space:nowrap; }
  .cursor.is-big{ width:68px; height:68px; background:rgba(9,25,20,.35); border:1px solid var(--gold); mix-blend-mode:normal; }
  .cursor.is-big span{ opacity:1; }
  .cursor.is-hidden{ opacity:0; }
  .cursor:not(.is-big){ opacity:0; }
}

/* ---------- the spine: a fixed dossier index down the left edge ---------- */
.spine{ position:fixed; left:0; top:0; bottom:0; width:var(--spine); z-index:85; background:var(--forest-950); border-right:1px solid var(--line-d);
  display:flex; flex-direction:column; align-items:center; padding:28px 0 26px; color:var(--on-dark); }
.spine__mark{ font:600 18px/1 var(--f-serif); letter-spacing:.03em; padding:6px; }
.spine__mark i{ font-weight:500; color:var(--gold); }
.spine__rule{ flex:1 1 0; width:1px; min-height:20px; background:linear-gradient(var(--line-d2), var(--line-d2)); margin:18px 0; }
.spine__rule--gold{ background:var(--gold); opacity:.6; flex:0 0 36px; }
.spine__v{ writing-mode:vertical-rl; transform:rotate(180deg); font:600 9.5px/1 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--on-dark-2); white-space:nowrap; }
.spine__v b{ color:var(--gold); font-weight:600; }
.spine__index{ display:grid; gap:2px; margin:6px 0; }
.spine__index a{ position:relative; display:grid; place-items:center; width:46px; height:30px; font:600 10px/1 var(--f-ui); letter-spacing:.12em; color:var(--on-dark-2); transition:color .3s; }
.spine__index a::before{ content:""; position:absolute; left:-14px; top:50%; width:12px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.spine__index a:hover,.spine__index a:focus-visible{ color:var(--on-dark); }
.spine__index a.is-on{ color:var(--gold); }
.spine__index a.is-on::before{ transform:scaleX(1); }
.spine__index .t{ position:absolute; left:calc(100% + 16px); top:50%; transform:translate(-6px,-50%); opacity:0; pointer-events:none; white-space:nowrap; background:var(--forest-950); border:1px solid var(--line-d2); padding:9px 12px; font:600 10px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark); transition:opacity .25s, transform .25s var(--ease); }
.spine__index a:hover .t,.spine__index a:focus-visible .t{ opacity:1; transform:translate(0,-50%); }
@media (max-height:820px){ .spine__v--low{ display:none; } }
@media (max-width:1100px){ .spine{ display:none; } }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:var(--spine); right:0; z-index:80; height:var(--nav-h); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px;
  padding-inline:var(--gutter); color:var(--on-dark); border-bottom:1px solid transparent; transition:transform .5s var(--ease), background .4s var(--ease), border-color .4s; }
.nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:calc(100% + 48px); z-index:-1; pointer-events:none; background:linear-gradient(rgba(9,25,20,.72), rgba(9,25,20,0)); transition:opacity .4s; }
.nav.is-solid{ background:var(--forest-950); border-bottom-color:var(--line-d); }
.nav.is-solid::before{ opacity:0; }
.nav.is-hidden{ transform:translateY(-101%); }
.nav:focus-within{ transform:none; }
.brand{ display:grid; gap:7px; justify-items:start; }
.brand__name{ font:600 20px/1 var(--f-serif); letter-spacing:.19em; text-transform:uppercase; white-space:nowrap; }
.brand__name i{ font-weight:500; letter-spacing:0; text-transform:none; color:var(--gold); margin:0 .06em 0 -.04em; }
.brand__sub{ font:600 8.5px/1 var(--f-ui); letter-spacing:.42em; text-transform:uppercase; color:var(--gold); padding-left:2px; }
.nav__links{ display:flex; justify-content:center; gap:clamp(18px,2.3vw,40px); }
.nav__links a{ position:relative; padding:10px 0; font:600 11px/1 var(--f-ui); letter-spacing:.17em; text-transform:uppercase; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:3px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__end{ display:flex; align-items:center; gap:16px; grid-column:3; justify-self:end; }
.nav__menu{ display:none; align-items:center; gap:12px; min-height:44px; padding:0 4px; font:600 11px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; }
.nav__menu i{ display:grid; gap:5px; width:22px; }
.nav__menu i::before,.nav__menu i::after{ content:""; height:1px; background:currentColor; }
@media (max-width:1240px){ .nav__links{ display:none; } .nav__menu{ display:inline-flex; } .nav{ grid-template-columns:auto 1fr auto; } }
@media (max-width:620px){ .nav .btn{ display:none; } .brand__name{ font-size:16px; letter-spacing:.15em; } .brand__sub{ font-size:7.5px; letter-spacing:.36em; } }

/* full-screen menu */
.menu{ position:fixed; inset:0; z-index:95; background:var(--forest-950); color:var(--on-dark); display:grid; grid-template-rows:auto 1fr auto; padding:0 var(--gutter) 32px;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s; overflow:auto; }
.menu.is-open{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion: no-preference){ .menu{ opacity:1; clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-io), visibility .6s; } .menu.is-open{ clip-path:inset(0 0 0 0); } }
.menu__top{ display:flex; justify-content:space-between; align-items:center; height:var(--nav-h); }
.menu__links{ display:grid; align-content:center; padding:32px 0; }
.menu__links a{ display:flex; align-items:baseline; gap:22px; padding:12px 0; border-bottom:1px solid var(--line-d); font:500 clamp(34px,7vw,64px)/1.08 var(--f-serif); letter-spacing:-.01em;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s; transition-delay:calc(var(--i,0) * 50ms + 80ms); }
.menu.is-open .menu__links a{ opacity:1; transform:none; }
.menu__links a:hover{ color:var(--gold); }
.menu__links a span{ font:600 10px/1 var(--f-ui); letter-spacing:.2em; color:var(--gold); min-width:2.4em; }
.menu .nav__menu{ display:inline-flex; }
@media (max-height:860px){ .menu__links{ padding:12px 0; } .menu__links a{ font-size:clamp(28px,5.6vh,48px); padding:8px 0; } }
.menu__foot{ display:grid; gap:18px; justify-items:start; }
.menu__foot p{ font:600 10px/1.8 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); }

/* ---------- 01 arrival (the dossier hero) ---------- */
.arrival{ position:relative; height:320vh; background:var(--forest-950); }
.arrival__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--forest-950); }
.shopfront{ position:absolute; inset:0; width:100%; height:100%; transform-origin:65.6% 55%; will-change:transform; }
.shopfront svg{ width:100%; height:100%; }
.arrival__glow{ position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 65.6% 55%, rgba(198,170,122,.55), rgba(198,170,122,.15) 30%, transparent 62%); }
.arrival__dark{ position:absolute; inset:0; background:var(--forest-950); opacity:0; pointer-events:none; }
.arrival__scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(9,25,20,.9) 0%, rgba(9,25,20,.6) 30%, rgba(9,25,20,.08) 60%, rgba(9,25,20,0) 75%), linear-gradient(0deg, rgba(9,25,20,.85) 0%, rgba(9,25,20,0) 32%); }
.arrival__topscrim{ position:absolute; left:0; right:0; top:0; height:48%; pointer-events:none; background:linear-gradient(180deg, rgba(9,25,20,.9) 0%, rgba(9,25,20,.72) 42%, rgba(9,25,20,0) 100%); }
.arrival__copy{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + clamp(28px,8vh,104px)); width:min(760px,56%); display:grid; gap:26px; justify-items:start; }
.arrival__copy.is-gone{ pointer-events:none; }
.arrival__copy .hero-t.lines .w > span{ transition-delay:calc(var(--i, 0) * 110ms); }
.arrival__copy.is-set .hero-t.lines .w > span{ transform:none; }
.arrival__copy > .eyebrow,.arrival__copy > .hero__desc,.arrival__copy > .hero__actions{ opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.arrival__copy.is-set > .eyebrow{ opacity:1; transform:none; transition-delay:.05s; }
.arrival__copy.is-set > .hero__desc{ opacity:1; transform:none; transition-delay:.45s; }
.arrival__copy.is-set > .hero__actions{ opacity:1; transform:none; transition-delay:.6s; }
.arrival__copy .hero-t,.arrival__chapter .chapter-t{ text-shadow:0 2px 40px rgba(9,25,20,.55); }
.hero__desc{ font:400 clamp(19px,1.5vw,23px)/1.45 var(--f-serif); color:var(--on-dark-2); max-width:29em; text-shadow:0 1px 18px rgba(9,25,20,.8); }
.hero__actions{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-top:8px; }
.arrival__chapter{ position:absolute; left:var(--gutter); bottom:clamp(116px,17vh,176px); width:min(560px,82%); display:grid; gap:16px; justify-items:start; pointer-events:none; }
.arrival__chapter > *{ opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .55s var(--ease); }
.arrival__chapter.is-on > *{ opacity:1; transform:none; }
.arrival__chapter.is-on > :nth-child(2){ transition-delay:.06s; } .arrival__chapter.is-on > :nth-child(3){ transition-delay:.12s; }
.chapter-t{ font:600 clamp(46px,5.4vw,94px)/.88 var(--f-display); letter-spacing:.016em; text-transform:uppercase; }
.arrival__chapter p:not(.chapter-t){ font:400 clamp(18px,1.4vw,21px)/1.5 var(--f-serif); color:var(--on-dark-2); max-width:27em; text-shadow:0 1px 18px rgba(9,25,20,.85); }
.dossier-bar{ position:absolute; left:var(--gutter); bottom:clamp(34px,5.5vh,60px); display:flex; align-items:center; gap:16px; font:600 10.5px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-2); }
.dossier-bar__line{ position:relative; width:clamp(70px,8vw,128px); height:1px; background:var(--line-d2); }
.dossier-bar__line i{ position:absolute; inset:0; background:var(--gold); transform-origin:left; transform:scaleX(var(--p,0)); }
.dossier-bar__n{ color:var(--on-dark-2); transition:color .3s; }
.dossier-bar__n.is-on{ color:var(--gold); }
.dossier-bar__t{ margin-left:10px; padding-left:16px; border-left:1px solid var(--line-d2); color:var(--gold); min-width:16ch; }
.arrival__plate{ position:absolute; right:var(--gutter); bottom:clamp(34px,5.5vh,60px); text-align:right; font:600 10px/2 var(--f-ui); letter-spacing:.26em; text-transform:uppercase; color:var(--on-dark-2); }
.arrival__plate b{ display:block; font:italic 500 22px/1.1 var(--f-serif); letter-spacing:0; text-transform:none; color:var(--gold); margin-bottom:6px; }
.arrival__film{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .8s var(--ease); }
.arrival__film.is-ready{ opacity:1; }
.arrival.has-film .shopfront{ opacity:0; transition:opacity .8s; }
.arrival.has-film .arrival__glow,.arrival.has-film .arrival__dark{ display:none; }
@media (max-width:900px){
  .arrival{ height:260vh; }
  .arrival__copy{ width:calc(100% - 2*var(--gutter)); top:calc(var(--nav-h) + 22px); gap:20px; }
  .hero-t{ font-size:clamp(50px,13.5vw,96px); }
  .hero-t em{ font-size:clamp(36px,9.4vw,64px); }
  .arrival__scrim{ background:linear-gradient(180deg, rgba(9,25,20,.85) 0%, rgba(9,25,20,.55) 42%, rgba(9,25,20,.2) 62%, rgba(9,25,20,.85) 100%); }
  .arrival__plate{ display:none; }
  .arrival__chapter{ bottom:104px; }
  .dossier-bar__t{ min-width:0; }
}
@media (max-width:420px){ .hero__actions{ gap:18px; } .hero__actions .btn{ width:100%; } }

/* ---------- 02 fitting room ---------- */
.fitting{ position:relative; height:480vh; background:var(--forest-900); }
.fitting__pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.fitting__canvas,.fitting__film{ position:absolute; inset:0; width:100%; height:100%; }
.fitting__vignette{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(9,25,20,.75) 100%); }
.fitting.is-photo .fitting__vignette{ background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(9,25,20,.5) 100%); }
.fitting__scrim{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s;
  background:linear-gradient(90deg, rgba(9,25,20,.9) 0%, rgba(9,25,20,.5) 27%, rgba(9,25,20,0) 50%), linear-gradient(0deg, rgba(9,25,20,.78), rgba(9,25,20,0) 38%), linear-gradient(180deg, rgba(9,25,20,.55), rgba(9,25,20,0) 26%); }
.fitting.is-photo .fitting__scrim{ opacity:1; }
.fitting__head{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + clamp(24px,5vh,56px)); display:grid; gap:18px; justify-items:start; max-width:min(600px,46%); }
.fitting__head .h2{ font-size:clamp(36px,3.3vw,58px); text-shadow:0 2px 24px rgba(9,25,20,.8); }
.fitting__head .h2 em{ display:block; }
.fitting__caption{ position:absolute; left:var(--gutter); bottom:clamp(44px,9vh,112px); width:min(36%,500px); min-height:240px; }
.stage{ position:absolute; inset:0; display:grid; align-content:end; gap:14px; opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none; }
.stage.is-on{ opacity:1; transform:none; pointer-events:auto; }
.stage__n{ display:flex; align-items:baseline; gap:14px; font:600 11px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.stage__n b{ font:600 46px/.8 var(--f-display); letter-spacing:.02em; color:var(--on-dark); }
.stage .h3{ text-shadow:0 2px 24px rgba(9,25,20,.85); }
.stage p{ font-size:15.5px; line-height:1.7; color:var(--on-dark-2); max-width:40ch; text-shadow:0 1px 14px rgba(9,25,20,.9); }
.ticket{ position:absolute; right:var(--gutter); bottom:clamp(44px,9vh,112px); width:232px; padding:22px 20px 18px 28px; background:var(--parchment); color:var(--ink); transform:rotate(-2deg); transform-origin:top left; box-shadow:0 22px 40px -24px rgba(0,0,0,.75); }
.ticket::before{ content:""; position:absolute; left:10px; top:10px; width:8px; height:8px; border-radius:50%; border:1px solid var(--gold-deep); background:var(--ivory); }
.ticket::after{ content:""; position:absolute; left:14px; top:-70px; height:70px; width:1px; background:linear-gradient(transparent, var(--gold)); }
.ticket__name{ font:500 21px/1.1 var(--f-serif); margin-bottom:10px; }
.ticket__rows{ display:grid; gap:5px; font:400 12px/1.4 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; }
.ticket__rows span{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--stone); padding-bottom:3px; }
.ticket__rows span em{ font-style:normal; color:var(--on-light-2); }
.fitting__marks{ position:absolute; right:var(--gutter); top:50%; transform:translateY(-58%); display:grid; border-left:1px solid var(--line-d2); }
.fitting__marks span{ position:relative; display:flex; align-items:baseline; gap:14px; padding:11px 0 11px 18px; font:600 10.5px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-2); transition:color .4s; }
.fitting__marks span b{ font:600 17px/1 var(--f-display); letter-spacing:.04em; color:var(--gold); min-width:2.2ch; }
.fitting__marks span em{ font-style:normal; }
.fitting__marks span::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:1px; background:var(--gold); transform:scaleY(0); transition:transform .45s var(--ease); }
.fitting__marks span.is-on{ color:var(--on-dark); }
.fitting__marks span.is-cur::before{ transform:scaleY(1); }
.fitting__hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); font:600 10px/1 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-2); opacity:.8; transition:opacity .4s; }
.fitting__turn{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .6s var(--ease); cursor:grab; }
.fitting__turn.is-on.is-live{ opacity:1; pointer-events:auto; }
.fitting__turn.is-dragging{ cursor:grabbing; }
.fitting__turn .tt__canvas{ position:absolute; inset:0; }
.fitting__turnhint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); white-space:nowrap; display:flex; align-items:center; gap:12px; font:600 10px/1 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark); opacity:0; transition:opacity .5s; pointer-events:none; }
.fitting__turnhint i{ display:block; width:28px; height:1px; background:var(--gold); }
.fitting__turnhint.is-on{ opacity:.85; }
@media (max-width:1000px){
  .fitting{ height:420vh; }
  .fitting__head{ max-width:calc(100% - 2*var(--gutter)); }
  .fitting__caption{ width:calc(100% - 2*var(--gutter)); bottom:96px; min-height:170px; }
  .ticket{ display:none; }
  .fitting__marks{ top:auto; bottom:34px; left:var(--gutter); right:auto; transform:none; grid-auto-flow:column; border-left:0; border-top:1px solid var(--line-d2); }
  .fitting__marks span{ padding:12px 16px 0 0; }
  .fitting__marks span em{ display:none; }
  .fitting__marks span::before{ left:0; right:16px; top:-1px; bottom:auto; width:auto; height:1px; transform:scaleX(0); transform-origin:left; }
  .fitting__marks span.is-cur::before{ transform:scaleX(1); }
  .fitting__hint{ display:none; }
  .fitting__turnhint{ bottom:76px; }
  .fitting__scrim{ background:linear-gradient(0deg, rgba(9,25,20,.92) 0%, rgba(9,25,20,.5) 36%, rgba(9,25,20,0) 58%), linear-gradient(180deg, rgba(9,25,20,.94) 0, rgba(9,25,20,.82) calc(var(--nav-h) + 140px), rgba(9,25,20,0) 48%); }
}

/* ---------- 03 the house (manifesto + facts) ---------- */
.manifesto__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,7vw,128px); align-items:center; }
.frame{ position:relative; }
.frame::before{ content:""; position:absolute; inset:-14px 14px 14px -14px; border:1px solid var(--line-l2); pointer-events:none; }
.frame img{ position:relative; width:100%; height:100%; object-fit:cover; }
.manifesto__fig{ display:grid; gap:14px; }
.manifesto__fig .frame{ aspect-ratio:4/5; }
.figcap{ display:flex; justify-content:space-between; gap:16px; font:600 10px/1.4 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-light-2); }
.dark .figcap,.deep .figcap{ color:var(--on-dark-2); }
.manifesto__body{ display:grid; gap:28px; justify-items:start; }
.manifesto__body .h2{ max-width:15ch; }
.manifesto__body > p:not(.lead){ color:var(--on-light-2); max-width:56ch; }
.facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(64px,8vw,128px); border-top:1px solid var(--line-l2); }
.facts > div{ display:grid; gap:12px; align-content:start; padding:30px 20px 0 0; }
.facts > div + div{ border-left:1px solid var(--line-l); padding-left:clamp(16px,2.6vw,40px); }
.facts b{ font:500 clamp(58px,6.4vw,112px)/.86 var(--f-serif); letter-spacing:-.02em; font-variant-numeric:oldstyle-nums proportional-nums; color:var(--ink); }
.facts b small{ font-size:.5em; font-style:italic; margin-left:.04em; color:var(--gold-deep); }
.facts span{ font:600 10.5px/1.5 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-light-2); }
@media (max-width:900px){ .manifesto__grid{ grid-template-columns:1fr; } .manifesto__fig{ max-width:520px; } .facts{ grid-template-columns:1fr 1fr; } .facts > div:nth-child(3){ border-left:0; padding-left:0; } .facts > div:nth-child(n+3){ border-top:1px solid var(--line-l); margin-top:28px; } }

/* ---------- 04 the rail ---------- */
.rail-section{ overflow:hidden; }
.rail{ position:relative; min-height:440px; }
/* a picture light washing the wall above the rail */
.rail::before{ content:""; position:absolute; left:0; right:0; top:-40px; height:600px; pointer-events:none; background:radial-gradient(ellipse 50% 45% at 50% 38%, rgba(255,251,240,.7), rgba(255,251,240,0) 72%); }
/* the brass rail: a polished tube on two wall rosettes, with domed end caps and a soft shadow on the wall.
   rail.js places it inside the hooks (--rod-top, --rod-h) and sizes it to the row (--track). */
.rail__rod{ position:absolute; left:0; top:var(--rod-top, 66px); width:var(--track, 100%); height:var(--rod-h, 9px); z-index:20; pointer-events:none; }
.rail__tube{ position:absolute; left:14px; right:14px; top:0; bottom:0; border-radius:99px;
  background:linear-gradient(180deg, #5C4325 0%, #B8935A 12%, #F3E4BF 27%, #E2C68D 38%, #C29E62 55%, #92703F 78%, #4F3A1F 100%);
  box-shadow:0 1px 0 rgba(255,248,228,.25) inset, 0 calc(var(--rod-h, 9px) * .9) calc(var(--rod-h, 9px) * 1.4) calc(var(--rod-h, 9px) * -.6) rgba(40,30,15,.42), 0 calc(var(--rod-h, 9px) * 2.6) calc(var(--rod-h, 9px) * 3) calc(var(--rod-h, 9px) * -1.6) rgba(40,30,15,.22); }
.rail__tube::before,.rail__tube::after{ content:""; position:absolute; top:50%; width:calc(var(--rod-h, 9px) * 1.1); height:calc(var(--rod-h, 9px) * 1.5); transform:translateY(-50%); border-radius:45%;
  background:radial-gradient(ellipse at 35% 30%, #FBF0D2 0%, #D9BA80 30%, #9F7C46 65%, #5A4223 100%); box-shadow:0 2px 4px rgba(40,30,15,.35); }
.rail__tube::before{ left:calc(var(--rod-h, 9px) * -.55); } .rail__tube::after{ right:calc(var(--rod-h, 9px) * -.55); }
.rail__bracket{ position:absolute; top:50%; width:calc(var(--rod-h, 9px) * 3.4); height:calc(var(--rod-h, 9px) * 3.4); transform:translateY(-50%); border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 38%, rgba(70,52,28,.55) 39% 41%, rgba(0,0,0,0) 42%), radial-gradient(circle at 36% 30%, #F7EACB 0%, #D5B57B 28%, #A5814A 62%, #644A27 100%);
  box-shadow:0 6px 12px -4px rgba(40,30,15,.45), 0 0 0 1px rgba(80,60,30,.25); }
.rail__bracket--l{ left:calc(14px + var(--rod-h, 9px) * 1.2); } .rail__bracket--r{ right:calc(14px + var(--rod-h, 9px) * 1.2); }
.rail__items{ position:relative; display:flex; justify-content:center; align-items:flex-start; padding-top:52px; --n:8; --ov:40px; }
.hanger{ position:relative; width:min(230px, calc((100% + (var(--n) - 1) * var(--ov)) / var(--n))); flex:0 0 auto; margin-inline:calc(var(--ov) / -2); transform-origin:50% var(--hook-y, 0px); display:grid; grid-template-columns:minmax(0,1fr); justify-items:center;
  transition:transform .45s var(--ease), filter .45s var(--ease), opacity .45s var(--ease); will-change:transform, filter; color:var(--ink); }
.hanger__hook{ width:100%; height:auto; }
.garment{ width:100%; transform-style:preserve-3d; transition:transform .56s var(--ease-io); }
.garment svg{ width:100%; height:auto; overflow:visible; }
.garment .back{ display:none; }
.garment.is-back .front{ display:none; }
.garment.is-back .back{ display:block; }
.hanger__cap{ margin-top:14px; display:grid; justify-items:center; gap:6px; text-align:center; opacity:0; transform:translateY(-6px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.hanger__cap .display{ font-size:22px !important; }
.hanger__cap .ticket-t{ font-size:10px; color:var(--on-light-2); }
.rail.is-hover .hanger:not(:hover):not(.is-active){ filter:blur(3px); opacity:.5; }
.rail:not(.is-focus) .hanger:hover{ transform:scale(1.06); z-index:5; }
.rail:not(.is-focus) .hanger:hover .hanger__cap{ opacity:1; transform:none; }
.rail.is-focus .hanger{ pointer-events:none; }
button, a, [role="button"], .hanger, [data-shoe-tt]{ -webkit-tap-highlight-color:transparent; } /* no grey/blue flash on tap; focus styles stay */
.rail.is-focus .hanger:not(.is-active){ filter:blur(9px); opacity:.22; }
.rail.is-focus .hanger.is-active{ z-index:10; pointer-events:auto; }
.rail.is-focus .hanger.is-active .hanger__cap{ opacity:0; }
.rail__sway .hanger{ animation:sway var(--sway-d, 6s) ease-in-out infinite; animation-delay:var(--sway-o, 0s); }
@keyframes sway{ 0%,100%{ rotate:-.6deg } 50%{ rotate:.6deg } }
.rail.is-focus .hanger,.rail.is-hover .hanger{ animation-play-state:paused; }
.focus{ position:absolute; left:0; right:0; bottom:0; display:grid; justify-items:center; gap:16px; text-align:center; opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.rail.is-focus .focus{ opacity:1; transform:none; pointer-events:auto; }
.focus .display{ font-size:clamp(34px,3.2vw,52px); }
.focus__meta{ display:flex; gap:10px 22px; justify-content:center; flex-wrap:wrap; color:var(--on-light-2); }
.focus__meta span + span::before{ content:"·"; margin-right:22px; color:var(--gold-deep); }
.focus__row{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.focus__row.seg{ display:inline-flex; gap:0; flex-wrap:nowrap; }
.focus__tags{ display:flex; gap:14px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.tag{ display:grid; justify-items:center; gap:0; position:relative; padding-top:22px; }
.tag::before{ content:""; position:absolute; top:0; left:50%; width:1px; height:22px; background:var(--stone); }
.tag i{ display:block; width:26px; height:36px; background:var(--parchment); border:1px solid var(--stone); clip-path:polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); position:relative; transition:transform .3s var(--ease), border-color .3s; }
.tag i::after{ content:""; position:absolute; left:4px; right:4px; top:12px; bottom:4px; background:var(--c); }
.tag:hover i,.tag.is-on i{ transform:translateY(-3px); border-color:var(--gold-deep); }
.tag.is-on::before{ background:var(--gold-deep); }
.tag span{ margin-top:6px; font:600 9.5px/1.3 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--on-light-2); }
.tags-note{ color:var(--on-light-2); padding-top:4px; }
.focus__hint{ display:flex; align-items:center; gap:12px; color:var(--on-light-2); }
.focus__hint i{ display:block; width:28px; height:1px; background:var(--gold-deep); }
.focus__hint[hidden]{ display:none; }
.focus__arrow{ position:absolute; top:220px; }
.focus__arrow--prev{ left:0; } .focus__arrow--next{ right:0; }
.focus__close{ position:absolute; right:0; top:-10px; }
.garment--tt{ position:relative; width:190%; margin:1.5% -45% -30%; aspect-ratio:1; cursor:grab; }
.garment--tt.is-dragging{ cursor:grabbing; }
.garment--tt .tt__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .4s; }
.garment--tt.is-live .tt__poster{ opacity:0; }
.garment--tt .tt__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hanger--tt .hanger__cap{ margin-top:22px; position:relative; z-index:2; }
.rail:not(.is-focus) .garment--tt{ pointer-events:none; }
.rail.is-focus .hanger--tt.is-active{ pointer-events:auto; }
.rail.is-focus .hanger--tt.is-active .garment--tt{ cursor:grab; }
@media (max-width:900px){
  .rail{ min-height:0; }
  .rail__items{ justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; gap:0; margin-inline:calc(-1 * var(--gutter)); padding:52px calc(50% - 110px + var(--gutter)) 24px; scrollbar-width:none; }
  .rail__items::-webkit-scrollbar{ display:none; }
  .hanger{ width:220px; margin-inline:-8px; scroll-snap-align:center; grid-template-columns:minmax(0,1fr); }
  .hanger .hanger__cap{ opacity:1; transform:none; max-width:100%; padding-inline:8px; }
  .hanger__cap .ticket-t{ white-space:normal; }
  .rail.is-hover .hanger:not(:hover):not(.is-active){ filter:none; opacity:1; }
  .rail.is-focus .hanger:not(.is-active){ filter:none; opacity:.9; }
  .rail.is-focus .rail__items{ overflow-x:hidden; } /* the row holds still while a piece is lifted: a sideways swipe turns the piece instead */
  .rail.is-focus .hanger.is-active, .rail.is-focus .hanger.is-active .garment--tt{ touch-action:pan-y; }
  .rail.is-focus .focus{ position:relative; } .focus{ margin-top:12px; }
  .focus__meta{ flex-direction:column; gap:4px; } .focus__meta span + span::before{ display:none; }
  .focus__arrow{ display:none; }
  .focus__close{ position:static; }
  .garment--tt{ width:140%; margin:-4% -20% 4%; }
}

/* the collection, by room: four category doors under the rail */
.rooms{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.5vw,22px); margin-top:clamp(64px,7vw,112px); }
.rooms__head{ grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--line-l2); }
.room-card{ display:grid; gap:16px; color:var(--ink); }
.room-card__img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ivory); border:1px solid var(--line-l); }
.room-card__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.1s var(--ease), filter .6s; }
.room-card:hover .room-card__img img{ transform:scale(1.1); }
.room-card__n{ position:absolute; left:14px; top:12px; font:600 10px/1 var(--f-ui); letter-spacing:.2em; color:var(--on-light-2); }
.room-card__meta{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; }
.room-card__t{ font:600 13px/1.2 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; }
.room-card__s{ grid-column:1; font:600 10px/1.4 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--on-light-2); }
.room-card .arr{ grid-row:1/3; grid-column:2; font-size:18px; }
.room-card:hover .arr{ transform:translateX(5px); }
@media (max-width:900px){ .rooms{ grid-template-columns:1fr 1fr; gap:28px 14px; } }
@media (max-width:420px){ .rooms__head{ gap:12px; } .rooms__head .eyebrow::before{ width:24px; } }

/* ---------- 05 the cloth room ---------- */
.cloth{ overflow:hidden; }
.cloth__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); gap:clamp(28px,4vw,72px); align-items:stretch; }
.cloth__intro{ display:grid; gap:26px; align-content:start; justify-items:start; }
.cloth__intro > p{ color:var(--on-dark-2); max-width:42ch; }
.swatches{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:min(100%,440px); margin-top:10px; }
.swatch{ position:relative; aspect-ratio:1; overflow:hidden; border:1px solid var(--line-d); background:var(--forest-950); transition:border-color .25s; }
.swatch img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .3s; filter:saturate(.92) brightness(.92); }
.swatch:hover img,.swatch:focus-visible img{ transform:scale(1.1); filter:none; }
.swatch::after{ content:""; position:absolute; inset:0; border:1px solid transparent; transition:inset .3s var(--ease), border-color .3s; pointer-events:none; }
.swatch[aria-checked="true"]{ border-color:var(--gold); }
.swatch[aria-checked="true"] img{ filter:none; }
.swatch[aria-checked="true"]::after{ inset:4px; border-color:rgba(246,243,235,.75); }
.swatch:focus-visible{ outline-offset:3px; }
.cloth__now{ font:600 10.5px/1.5 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); }
.cloth__now b{ color:var(--gold); font-weight:600; }
.cloth__stage{ position:relative; min-height:420px; aspect-ratio:4/5; overflow:hidden; background:var(--forest-950); border:1px solid var(--line-d); align-self:center; }
.cloth__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(0 0 0 0); transition:clip-path .75s var(--ease-io), filter .6s var(--ease), transform 1.6s var(--ease); }
.cloth__stage img.is-out{ clip-path:inset(0 100% 0 0); transform:scale(1.04); }
.cloth__stage img.is-under{ filter:brightness(.82); }
.cloth__stage figcaption{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:12px; padding:40px 16px 14px; background:linear-gradient(0deg, rgba(9,25,20,.8), rgba(9,25,20,0)); font:600 10px/1.4 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark); }
.cloth__card{ display:grid; align-content:start; gap:22px; padding-top:22px; border-top:1px solid var(--line-d2); transition:opacity .25s var(--ease); }
.cloth__card.is-swap{ opacity:0; }
.cloth__weight{ font:600 clamp(72px,6.6vw,120px)/.8 var(--f-display); letter-spacing:.005em; color:var(--gold); }
.cloth__weight small{ font-size:.34em; margin-left:.12em; letter-spacing:.08em; color:var(--on-dark-2); text-transform:uppercase; }
.cloth__name{ font:500 clamp(28px,2.5vw,40px)/1.04 var(--f-serif); letter-spacing:-.01em; }
.cloth__rows{ display:grid; border-top:1px solid var(--line-d); }
.cloth__rows div{ display:grid; grid-template-columns:86px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-d); font-size:14px; line-height:1.5; }
.cloth__rows dt{ font:600 10px/1.9 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-2); }
.cloth__note{ font:italic 400 20px/1.42 var(--f-serif); color:var(--on-dark-2); }
@media (max-width:1100px){ .cloth__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .cloth__intro{ grid-column:1/-1; } }
@media (max-width:700px){ .cloth__grid{ grid-template-columns:1fr; } .cloth__stage{ min-height:0; } .swatches{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---------- 06 the cut + the craft ---------- */
.cut__top{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.cut__frame{ position:relative; width:100%; aspect-ratio:16/8.2; min-height:420px; overflow:hidden; background:var(--forest-950); color:var(--on-dark); --x1:62%; --x2:46%; }
.cut__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cut__raw{ filter:saturate(.85) brightness(.9); }
.cut__done{ clip-path:polygon(var(--x1) 0, 100% 0, 100% 100%, var(--x2) 100%); }
.cut__shade{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, rgba(9,25,20,.55), rgba(9,25,20,.15) 60%), linear-gradient(0deg, rgba(9,25,20,.8), rgba(9,25,20,0) 40%); }
.cut__line{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.cut__line line{ vector-effect:non-scaling-stroke; }
.cut__title{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:90%; text-align:center; text-shadow:0 4px 50px rgba(9,25,20,.8); }
.cut__label{ position:absolute; bottom:clamp(20px,3vw,40px); display:grid; gap:8px; max-width:30ch; }
.cut__label--raw{ left:clamp(20px,3vw,40px); }
.cut__label--done{ right:clamp(20px,3vw,40px); text-align:right; justify-items:end; }
.cut__label b{ font:500 clamp(20px,1.8vw,28px)/1.2 var(--f-serif); }
.cut__label .eyebrow--plain{ color:var(--gold); }
.cut__label--raw .eyebrow--plain{ color:var(--ivory); }
@media (max-width:620px){ .cut__frame{ overflow:visible; margin-bottom:120px; } .cut__label{ top:calc(100% + 18px); bottom:auto; max-width:46%; color:var(--ink); } .cut__label b{ color:var(--ink); } .cut__label--raw .eyebrow--plain{ color:var(--gold-ink); } .cut__label .eyebrow--plain{ color:var(--gold-ink); } }
@media (max-width:760px){ .cut__top .label{ display:none; } .cut__frame{ aspect-ratio:4/5; min-height:0; } .cut__title{ top:38%; } .cut__label{ max-width:44%; } .cut__label b{ font-size:18px; } }

.craft__list{ display:grid; gap:24px; }
.step{ position:relative; display:grid; grid-template-columns:clamp(84px,9vw,140px) minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,64px); align-items:start; padding:36px 0 44px; border-top:1px solid var(--line-d2); background:var(--forest-900); }
.step__n{ font:600 clamp(60px,6vw,104px)/.78 var(--f-display); color:transparent; -webkit-text-stroke:1px var(--gold); letter-spacing:.01em; }
.step__name{ font:500 clamp(36px,3.6vw,60px)/1 var(--f-serif); letter-spacing:-.02em; }
.step__body{ display:grid; gap:18px; max-width:46ch; justify-items:start; }
.step__body p{ color:var(--on-dark-2); }
.step__ticket{ font:600 10px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line-d2); padding:10px 13px; }
.step__video,.step__draw{ width:100%; justify-self:end; }
.step__media{ position:relative; width:100%; justify-self:end; }
.step__video{ aspect-ratio:16/9; object-fit:cover; background:var(--forest-950); border:1px solid var(--line-d); }
.step__toggle{ position:absolute; right:10px; bottom:10px; min-height:32px; padding:0 12px; background:rgba(9,25,20,.72); border:1px solid var(--line-d2); color:var(--on-dark); font:600 9.5px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; }
.step__toggle:hover{ border-color:var(--gold); }
.step__draw{ max-width:360px; opacity:.8; }
.step__draw path,.step__draw line,.step__draw circle,.step__draw rect{ stroke:var(--ivory); fill:none; stroke-width:.9; vector-effect:non-scaling-stroke; }
.step__draw .brass{ stroke:var(--gold); }
@media (max-width:900px){ .step{ grid-template-columns:1fr; gap:18px; position:static; } .step__n{ font-size:64px; } .step__video,.step__draw{ justify-self:start; } }

/* ---------- the monogram ---------- */
.mono__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,6vw,112px); align-items:center; }
.mono__copy{ display:grid; gap:26px; justify-items:start; }
.mono__copy > p{ color:var(--on-light-2); max-width:46ch; }
.mono__form{ display:grid; gap:22px; width:100%; max-width:460px; padding-top:26px; border-top:1px solid var(--line-l2); }
.mono__form input{ font:600 24px/1 var(--f-serif); letter-spacing:.32em; text-transform:uppercase; }
.mono__help{ font-size:13px; color:var(--on-light-2); }
.mono__opt{ display:grid; gap:10px; justify-items:start; }
.mono__threads{ display:flex; flex-wrap:wrap; gap:10px; }
.mono__threads button{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px 0 12px; border:1px solid var(--line-l2); font:600 11px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--on-light-2); transition:border-color .25s, background .25s, color .25s; }
.mono__threads button i{ width:18px; height:18px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), inset 0 2px 3px rgba(255,255,255,.35); }
.mono__threads button:hover{ color:var(--ink); border-color:var(--on-light-2); }
.mono__threads button[aria-checked="true"]{ border-color:var(--ink); background:var(--ivory); color:var(--ink); }
.mono__foot{ display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap; }
.mono__sum{ font:600 10.5px/1.5 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-light-2); }
.mono__stage{ display:grid; gap:14px; }
.mono__frame{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#3a1418; }
.mono__frame img{ width:100%; height:100%; object-fit:cover; }
.mono__svg{ position:absolute; left:30.5%; top:21%; width:50%; height:auto; overflow:visible; pointer-events:none; }
.mono__svg text{ font-family:var(--f-serif); font-weight:600; font-size:78px; letter-spacing:.05em; }
.mono__svg[data-hand="script"] text{ font-family:var(--f-script); font-weight:400; font-size:118px; letter-spacing:0; }
.mono__svg{ transition:opacity .26s var(--ease); }
.mono__svg.is-swap{ opacity:0; }
.mono__svg rect{ transition:fill .45s var(--ease); }
.mono__outline{ fill:none; stroke-width:.7; stroke-linejoin:round; opacity:.8; transition:stroke .45s var(--ease); }
/* a new letter: the needle draws its outline, then the satin fills in */
.mono__outline tspan.is-new{ stroke-dasharray:320; stroke-dashoffset:320; animation:mono-sew .75s cubic-bezier(.45,0,.2,1) forwards; }
.mono__text tspan.is-new{ fill-opacity:0; animation:mono-fill 1.15s var(--ease) both; }
@keyframes mono-sew{ to{ stroke-dashoffset:0; } }
@keyframes mono-fill{ 0%,55%{ fill-opacity:0; } 100%{ fill-opacity:1; } }
@media (max-width:900px){ .mono__grid{ grid-template-columns:1fr; } .mono__stage{ order:-1; } }
@media (max-width:900px){ .monogram.is-typing .mono__stage{ position:sticky; top:0; z-index:3; background:var(--parchment); padding-bottom:10px; } .monogram.is-typing .mono__frame{ aspect-ratio:4/3; } .monogram.is-typing .mono__frame img{ object-position:50% 25%; } .monogram.is-typing .mono__svg{ top:18.3%; } }
@media (max-width:560px){ .mono__stage .figcap{ flex-direction:column; gap:4px; } .footer__word b{ font-size:clamp(30px,10vw,44px); letter-spacing:.1em; } }

/* ---------- the cutter's word ---------- */
.quote__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:stretch; }
.quote__img{ position:relative; min-height:clamp(380px,44vw,680px); overflow:hidden; }
.quote__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quote__panel{ background:var(--forest-900); color:var(--on-dark); display:grid; align-content:center; justify-items:center; text-align:center; gap:28px; padding:clamp(44px,6vw,104px) clamp(28px,6vw,104px); }
.quote__panel blockquote{ display:grid; gap:28px; justify-items:center; }
.quote__panel blockquote p{ font:400 clamp(30px,3.1vw,50px)/1.16 var(--f-serif); letter-spacing:-.012em; max-width:22ch; hanging-punctuation:first; text-wrap:balance; }
.quote__panel blockquote p em{ color:var(--gold); }
.quote__rule{ width:56px; height:1px; background:var(--gold); }
.quote__sig{ font:400 clamp(44px,4.4vw,68px)/1 var(--f-script); color:var(--gold); margin-bottom:-10px; }
.quote__who{ font:600 10.5px/1.7 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); }
@media (max-width:900px){ .quote__grid{ grid-template-columns:1fr; } .quote__img{ min-height:0; aspect-ratio:16/11; } }

/* ---------- 07 footwear ---------- */
.footwear{ overflow:hidden; }
.footwear .wrap{ display:grid; grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr); gap:clamp(32px,5vw,88px); align-items:center; }
.footwear__copy{ display:grid; gap:24px; justify-items:start; }
.footwear__copy p:not(.lead){ color:var(--on-dark-2); max-width:46ch; }
.inline-facts{ display:flex; flex-wrap:wrap; gap:10px 0; padding-top:18px; border-top:1px solid var(--line-d2); width:100%; }
.inline-facts span{ font:600 10px/1.5 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.inline-facts span + span::before{ content:""; display:inline-block; width:1px; height:12px; margin:0 18px; vertical-align:-2px; background:var(--line-d2); }
.viewer{ position:relative; aspect-ratio:1 / .85; cursor:grab; }
.viewer:active{ cursor:grabbing; }
.viewer:focus-visible{ outline:1px solid var(--gold); outline-offset:-1px; }
.viewer canvas{ width:100%; height:100%; }
.viewer__hint{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; font:600 9.5px/1 var(--f-ui); letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-2); opacity:.8; pointer-events:none; white-space:nowrap; }
.viewer__hint i{ display:block; width:28px; height:1px; background:var(--gold); }
.footwear__pair{ display:grid; gap:18px; }
.footwear__pair.is-pair{ grid-template-columns:1fr 1fr; }
.shoe{ display:grid; border:1px solid var(--line-d); background:linear-gradient(180deg, var(--forest-900), var(--forest-950)); }
.shoe .viewer{ aspect-ratio:1 / 1; }
.shoe__tt{ position:relative; aspect-ratio:1 / 1; overflow:hidden; cursor:grab; background:#0b1a14; touch-action:pan-y; }
.shoe__tt.is-dragging{ cursor:grabbing; }
.shoe__tt .tt__poster,.shoe__tt .tt__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.shoe__tt .tt__poster{ object-fit:cover; transition:opacity .4s; }
.shoe__tt.is-live .tt__poster{ opacity:0; }
.shoe__tt .viewer__hint{ z-index:2; bottom:14px; }
.shoe__tt::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .2s; }
.shoe__tt:focus-visible{ outline:none; }
.shoe__tt:focus-visible::after{ box-shadow:inset 0 0 0 1px var(--gold), inset 0 0 0 2px rgba(198,170,122,.25); } /* above the canvas: an outline would sit under it */
.shoe figcaption{ display:grid; gap:6px; padding:16px 18px 18px; border-top:1px solid var(--line-d); }
.shoe figcaption .display{ font-size:26px !important; }
.shoe figcaption .ticket-t{ font-size:10px; color:var(--gold); }
@media (max-width:900px){ .footwear .wrap{ grid-template-columns:1fr; } .viewer{ aspect-ratio:1/1; } }
@media (max-width:600px){ .footwear__pair.is-pair{ grid-template-columns:1fr; } .inline-facts{ flex-direction:column; gap:8px; } .inline-facts span + span::before{ display:none; } }

/* ---------- 08 private fitting ---------- */
.house .wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,6vw,112px); align-items:start; }
.house__side{ display:grid; gap:28px; position:sticky; top:calc(var(--nav-h) + 24px); }
.house__visual{ position:relative; aspect-ratio:4/5; overflow:hidden; color:var(--on-dark); background:var(--forest-950); }
.house__visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.house__visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,25,20,.92) 0%, rgba(9,25,20,.35) 48%, rgba(9,25,20,.1) 70%); }
.house__vcopy{ position:absolute; left:clamp(20px,2.6vw,36px); right:clamp(20px,2.6vw,36px); bottom:clamp(20px,2.6vw,36px); z-index:1; display:grid; gap:16px; }
.house__vcopy .h3 em{ color:var(--gold); }
.house__vcopy .eyebrow{ color:var(--gold); }
.house__rows{ display:grid; border-top:1px solid var(--line-l2); }
.house__rows > div{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line-l); font-size:15px; }
.house__rows > div > span:first-child{ font:600 10px/2 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-light-2); }
.house__side .house__rows > div{ grid-template-columns:110px 1fr; font-size:14.5px; padding:13px 0; }
.house__main{ display:grid; gap:30px; justify-items:start; }
.house__main > p{ color:var(--on-light-2); max-width:56ch; }
.form{ display:grid; gap:20px; align-content:start; width:100%; margin-top:8px; padding-top:30px; border-top:1px solid var(--line-l2); }
.field{ display:grid; gap:9px; }
.field label{ font:600 10.5px/1.2 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-light-2); }
.field input,.field select,.field textarea{ width:100%; min-height:54px; padding:14px 16px; border:1px solid rgba(35,39,37,.55); border-radius:1px; background:rgba(255,255,255,.45); color:var(--ink); font:400 16px/1.4 var(--f-ui); transition:border-color .25s, background .25s, box-shadow .25s; }
.field textarea{ min-height:112px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--on-light-2); }
.field .req{ color:var(--gold-ink); margin-left:4px; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--on-light-2); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold-deep); background:#fff; box-shadow:0 0 0 3px rgba(140,112,77,.18); }
.field input:user-invalid,.field textarea:user-invalid{ border-color:var(--burgundy); }
.field select{ appearance:none; padding-right:44px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23232725'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__foot{ display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; margin-top:8px; }
.form__note{ font:600 10px/1.6 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-light-2); text-wrap:balance; }
.form__err{ display:none; color:var(--burgundy); font-size:14px; }
.form.is-error .form__err{ display:block; }
.form__ok{ display:none; padding:24px 0; border-top:1px solid var(--gold-deep); }
.form.is-sent .form__ok{ display:block; }
.form.is-sent > :not(.form__ok){ display:none; }
.form.is-sent .form__ok{ border-top:0; padding:8px 0 0; }
.appt-card{ position:relative; max-width:440px; padding:30px 28px 26px 34px; background:var(--parchment); color:var(--ink); transform:rotate(-1.2deg); box-shadow:0 26px 40px -26px rgba(0,0,0,.55); animation:appt-in .8s var(--ease) both; }
.appt-card::before{ content:""; position:absolute; left:12px; top:12px; width:9px; height:9px; border-radius:50%; border:1px solid var(--gold-deep); background:var(--ivory); }
.appt-card__seal{ position:absolute; right:22px; top:20px; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:600 14px/1 var(--f-serif); white-space:nowrap; color:var(--burgundy); border:1.5px solid rgba(92,31,42,.55); transform:rotate(-12deg); }
.appt-card__seal i{ font-weight:500; }
.appt-card__to{ font:600 10px/1 var(--f-ui); letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); }
.appt-card__name{ font:500 30px/1.1 var(--f-serif); margin:10px 0 16px; padding-right:70px; }
.appt-card__rows{ display:grid; gap:6px; font:400 12px/1.4 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; }
.appt-card__rows span{ display:flex; justify-content:space-between; gap:16px; text-align:right; border-bottom:1px dashed var(--stone); padding-bottom:4px; }
.appt-card__rows em{ font-style:normal; color:var(--on-light-2); }
.appt-card__note{ margin-top:16px; font:italic 400 18px/1.45 var(--f-serif); color:var(--on-light-2); }
@keyframes appt-in{ from{ opacity:0; transform:translateY(24px) rotate(1deg); } }
/* product: the commission, dated */
.commission{ display:grid; gap:16px; padding-top:22px; border-top:1px solid var(--line-l2); }
.commission .eyebrow{ font-size:11px; }
.commission__steps{ display:grid; grid-template-columns:1fr 1fr; row-gap:16px; border-left:1px solid var(--line-l); }
.commission__steps li{ display:grid; gap:6px; align-content:start; padding:4px 14px 6px; border-right:1px solid var(--line-l); }
.commission__when{ font:400 11px/1.4 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--gold-ink); }
.commission__steps b{ font:500 20px/1.15 var(--f-serif); }
.commission__what{ font-size:13px; line-height:1.45; color:var(--on-light-2); }
.commission__incl{ font-size:14px; color:var(--on-light-2); }
.commission__incl b{ font:600 10px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin-right:10px; }

/* phones: a slim bar to book once the price block has scrolled away */
.buybar{ display:none; }
@media (max-width:900px){
  .buybar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background:var(--forest-950); color:var(--on-dark); border-top:1px solid var(--line-d2); transform:translateY(105%); transition:transform .45s var(--ease); }
  .buybar.is-on{ transform:none; }
  .buybar span{ font:600 10px/1.4 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-2); }
  .buybar b{ display:block; font:500 20px/1.1 var(--f-serif); letter-spacing:0; text-transform:none; color:var(--on-dark); }
}
@media (max-width:900px){ .house .wrap{ grid-template-columns:1fr; } .house__side{ position:static; } #appointments .house__main{ order:-1; } .house__visual{ aspect-ratio:4/3.6; } .form__row{ grid-template-columns:1fr; } }
@media (max-width:560px){ .house__rows > div{ grid-template-columns:1fr; gap:4px; } .house__rows a{ overflow-wrap:anywhere; } }

/* ---------- footer ---------- */
.footer{ background:var(--forest-950); color:var(--on-dark); padding:clamp(72px,8vw,128px) 0 34px; border-top:1px solid var(--line-d); }
.footer__top{ display:flex; justify-content:space-between; align-items:end; gap:28px 40px; flex-wrap:wrap; padding-bottom:44px; }
.footer__word{ display:grid; gap:12px; }
.footer__word b{ font:600 clamp(34px,5.2vw,82px)/.95 var(--f-serif); letter-spacing:.13em; text-transform:uppercase; }
.footer__word b i{ font-weight:500; letter-spacing:0; text-transform:none; color:var(--gold); }
.footer__word span{ font:600 10px/1.9 var(--f-ui); letter-spacing:.4em; text-transform:uppercase; color:var(--gold); text-wrap:balance; }
.footer__word b span{ display:inline-block; white-space:nowrap; font:inherit; letter-spacing:inherit; color:inherit; text-transform:inherit; }
.has-form .footer__top .btn{ display:none; }
.seam-top{ padding-bottom:clamp(56px,7vw,96px); margin-top:calc(var(--section) * -.4); }
.footer .seam{ margin-bottom:56px; }
.footer__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer__col{ display:grid; gap:12px; align-content:start; font-size:15px; }
.footer__col .label{ color:var(--gold); margin-bottom:6px; font-size:10.5px; }
.footer__col a,.footer__col p{ color:var(--on-dark-2); transition:color .2s; }
.footer__col p{ max-width:34ch; font:400 18px/1.5 var(--f-serif); }
.footer__col a:hover{ color:var(--on-dark); }
.footer__bottom{ margin-top:64px; padding-top:22px; border-top:1px solid var(--line-d); display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; font:600 9.5px/1.6 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); }
@media (max-width:900px){ .footer__cols{ grid-template-columns:1fr 1fr; } .footer__col a{ overflow-wrap:anywhere; } }
@media (max-width:560px){ .footer__cols{ grid-template-columns:1fr; gap:32px; } .footer__bottom{ flex-direction:column; } }

/* ---------- reveals ---------- */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-io); }
.reveal.is-in{ clip-path:inset(0 0 0 0); }
.reveal:not(.reveal--flat) > img,.reveal:not(.reveal--flat) > video,.reveal .step__video{ transform:scale(1.12); transition:transform 1.7s var(--ease); }
.reveal.is-in:not(.reveal--flat) > img,.reveal.is-in:not(.reveal--flat) > video,.reveal.is-in .step__video{ transform:none; }
.cut__frame.reveal > img{ transform:none; }
.frame.reveal{ clip-path:none; }
.frame.reveal > img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-io), transform 1.7s var(--ease); }
.frame.reveal.is-in > img{ clip-path:inset(0 0 0 0); }
@media (max-width:620px){ .cut__frame.reveal.is-in{ clip-path:inset(0 0 -170px 0); } }
.rv.is-in{ opacity:1; transform:none; }
.lines .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:.08em 0 .16em; margin:-.08em 0 -.16em; }
.lines em .w{ padding-inline:.2em; margin-inline:-.2em; }
.lines .w > span{ display:inline-block; transform:translateY(112%); transition:transform 1.05s var(--ease); transition-delay:calc(var(--i, 0) * 85ms); }
.lines.is-in .w > span{ transform:none; }

/* ---------- inner pages ---------- */
.page-head{ position:relative; overflow:hidden; background:var(--forest-950); color:var(--on-dark); padding:calc(var(--nav-h) + clamp(56px,8vw,128px)) 0 clamp(56px,7vw,104px); border-bottom:1px solid var(--line-d); }
.page-head .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:28px clamp(32px,5vw,96px); align-items:end; }
.page-head__t{ display:grid; gap:26px; justify-items:start; }
.page-head .lead,.page-head p{ color:var(--on-dark-2); max-width:46ch; }
.page-head__ghost{ position:absolute; right:calc(var(--gutter) - .04em); bottom:-.3em; font:600 clamp(130px,19vw,320px)/.8 var(--f-display); letter-spacing:.01em; color:transparent; -webkit-text-stroke:1px rgba(198,170,122,.16); pointer-events:none; user-select:none; }
.crumbs{ display:flex; flex-wrap:wrap; gap:10px; font:600 10px/1.4 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); }
.crumbs a:hover{ color:var(--gold); }
.light .crumbs,.paper .crumbs{ color:var(--on-light-2); }
.light .crumbs a:hover,.paper .crumbs a:hover{ color:var(--ink); }
@media (max-width:900px){ .page-head .wrap{ grid-template-columns:1fr; align-items:start; } }

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px); padding-bottom:18px; border-bottom:1px solid var(--line-l2); }
.toolbar .seg{ flex-wrap:wrap; }
.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(36px,4vw,64px) clamp(14px,1.6vw,24px); }
.card{ position:relative; display:grid; gap:16px; align-content:start; color:var(--ink); }
.card__tt,.card .garment-wrap{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--parchment); border:1px solid var(--line-l); transition:border-color .3s; }
.card .garment-wrap{ display:grid; place-items:center; padding:12%; }
.card__tt .tt__poster,.card__tt .tt__canvas{ position:absolute; inset:-6% -12%; width:124%; height:112%; }
.card__tt .tt__poster{ object-fit:contain; transition:opacity .3s; }
.card__tt.is-live .tt__poster{ opacity:0; }
.card:hover .card__tt,.card:hover .garment-wrap{ border-color:var(--gold-deep); }
.card__kind{ position:absolute; left:14px; top:12px; z-index:1; font:600 9.5px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-light-2); }
.card__meta{ display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:baseline; }
.card__name{ font:500 27px/1.05 var(--f-serif); letter-spacing:-.01em; }
.card__cloth{ grid-column:1/-1; font:600 9.5px/1.5 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--on-light-2); }
.card__price{ font:600 14px/1 var(--f-ui); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 14px; } .card__name{ font-size:22px; } .card__kind{ left:10px; top:10px; font-size:8.5px; letter-spacing:.12em; white-space:nowrap; } .card__meta{ grid-template-columns:1fr; } .card__price{ grid-row:3; } }

.cta-band{ background:var(--forest-900); color:var(--on-dark); }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:end; gap:28px 48px; flex-wrap:wrap; }
.cta-band .h2{ max-width:16ch; }
.cta-band p{ color:var(--on-dark-2); max-width:44ch; margin-top:18px; }

.product{ padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px)); padding-bottom:var(--section); }
.product .wrap{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,96px); align-items:start; }
.product__stage{ position:sticky; top:calc(var(--nav-h) + 16px); display:grid; justify-items:center; gap:18px; padding:clamp(16px,2vw,28px) clamp(16px,2vw,28px) 26px; background:var(--parchment); border:1px solid var(--line-l); }
.product__stage .hanger{ width:min(100%, 420px); margin:0; pointer-events:none; }
.product__stage .focus__row{ pointer-events:auto; }
.product__tt{ position:relative; width:min(100%, 620px); aspect-ratio:1; cursor:grab; }
.product__tt.is-dragging{ cursor:grabbing; }
.product__tt .tt__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .4s; }
.product__tt.is-live .tt__poster{ opacity:0; }
.product__tt .tt__canvas{ position:absolute; inset:0; }
.product__info{ display:grid; gap:26px; padding-top:8px; }
.product__info .h1{ font-size:clamp(48px,5vw,86px); }
.product__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 22px; padding:18px 0; border-top:1px solid var(--line-l2); border-bottom:1px solid var(--line-l2); }
.product__price small{ font:600 10.5px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-light-2); margin-right:-12px; }
.product__price b{ font:600 clamp(38px,3.4vw,52px)/.9 var(--f-display); letter-spacing:.01em; }
.product__quote{ flex-basis:100%; font:italic 400 17px/1.45 var(--f-serif); color:var(--on-light-2); }
.product__price span{ font:600 10.5px/1.5 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--on-light-2); }
.product__details{ display:grid; border-top:1px solid var(--line-l2); }
.product__details li{ padding:14px 0; border-bottom:1px solid var(--line-l); display:grid; grid-template-columns:130px 1fr; gap:16px; font-size:15px; }
.product__details li span:first-child{ font:600 10px/2.1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--on-light-2); }
.product__cta{ display:flex; gap:16px 28px; flex-wrap:wrap; align-items:center; }
.product .ticket{ position:relative; right:auto; bottom:auto; transform:rotate(-1.5deg); margin-top:8px; box-shadow:0 18px 30px -22px rgba(0,0,0,.5); }
.product .ticket::after{ display:none; }
.product__3d .wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:center; }
.product__3d .viewer{ aspect-ratio:1 / .9; }
.product__3d p{ max-width:40ch; color:var(--on-dark-2); }
.sample{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--gold); color:var(--gold); }
.related{ padding-block:var(--section); }
@media (max-width:900px){ .product .wrap{ grid-template-columns:1fr; gap:28px; } .product__stage{ position:static; } .product__3d .wrap{ grid-template-columns:1fr; } }
@media (max-width:560px){ .product__details li{ grid-template-columns:1fr; gap:2px; } }

.timeline{ display:grid; border-top:1px solid var(--line-l2); }
.timeline li{ display:grid; grid-template-columns:clamp(96px,11vw,170px) 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line-l); align-items:baseline; }
.timeline li b{ font:500 clamp(34px,3.2vw,50px)/.9 var(--f-serif); letter-spacing:-.01em; font-variant-numeric:oldstyle-nums; }
.timeline--mono li b{ font:400 15px/1.6 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--gold-ink); }
.timeline li p{ color:var(--on-light-2); max-width:60ch; }
.people{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,56px); }
.people li{ display:grid; gap:14px; align-content:start; padding-top:24px; border-top:1px solid var(--line-l2); }
.people li > b{ font:500 clamp(28px,2.4vw,38px)/1.05 var(--f-serif); letter-spacing:-.01em; }
.people li > span{ font:600 10px/1.6 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); }
.people li p{ color:var(--on-light-2); }
.people li > .people__n{ font:600 15px/1 var(--f-display); letter-spacing:.14em; color:var(--gold-ink); }
.people li > .frame{ margin:14px 0 8px 14px; }
.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,112px); align-items:start; }
.split__aside{ display:grid; gap:22px; justify-items:start; position:sticky; top:calc(var(--nav-h) + 32px); }
.split__aside p{ color:var(--on-light-2); max-width:36ch; }
@media (max-width:900px){ .people{ grid-template-columns:1fr; } .timeline li{ grid-template-columns:1fr; gap:10px; } .split{ grid-template-columns:1fr; } .split__aside{ position:static; } }

/* 404 */
.nf{ min-height:100vh; display:grid; place-items:center; text-align:center; padding:calc(var(--nav-h) + 40px) 24px 60px; }
.nf__in{ display:grid; gap:26px; justify-items:center; }
.nf__ghost{ font:600 clamp(140px,24vw,340px)/.8 var(--f-display); color:transparent; -webkit-text-stroke:1px rgba(198,170,122,.45); }
.nf p{ color:var(--on-dark-2); max-width:40ch; }
.nf__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- page transitions (cross-document view transitions, where supported) ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  .spine{ view-transition-name:spine; } .nav{ view-transition-name:nav; } .grain{ view-transition-name:grain; }
  .product__tt .tt__poster{ view-transition-name:garment; }
  ::view-transition-old(root){ animation:vt-out .45s var(--ease-io) both; }
  ::view-transition-new(root){ animation:vt-in .7s var(--ease) .12s both; }
  ::view-transition-group(garment){ animation-duration:.75s; animation-timing-function:var(--ease-io); }
}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-24px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(24px); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .grain{ animation:none; }
  .arrival{ height:auto; } .arrival__stage{ position:relative; }
  .arrival__chapter{ display:none; }
  .fitting{ height:auto; } .fitting__pin{ position:relative; }
  .rv,.lines .w > span{ opacity:1; transform:none; }
  .reveal,.reveal > img,.frame.reveal > img{ clip-path:none !important; transform:none !important; }
  .arrival__copy > .eyebrow,.arrival__copy > .hero__desc,.arrival__copy > .hero__actions{ opacity:1; transform:none; }
  .stage{ position:relative; opacity:1; transform:none; margin-bottom:24px; }
  .fitting__pin{ height:auto; overflow:visible; padding:calc(var(--nav-h) + 40px) var(--gutter) 64px; }
  .fitting__head,.fitting__caption{ position:static; width:auto; max-width:60ch; min-height:0; }
  .fitting__caption{ margin-top:40px; }
  .fitting__hint,.fitting__marks,.fitting__vignette,.fitting__scrim,.ticket{ display:none; }
  .arrival__topscrim{ display:none; }
  .menu__links a{ opacity:1; transform:none; }
  .cursor{ display:none !important; }
}