/* ==== 00-tokens.css ==== */
/* LodiStudios — THE TOKENS. The only place a colour, face or radius is named.

   BRAND: Option 1, "Emerald Luxe" (assets/emerald-luxe-board.jpg) — signature
   gold script wordmark on deep emerald. Modern, timeless, premium.
   Palette from the board: emerald #0E3D32, gold #D4AF7C, ivory #F8F6EF,
   onyx #1A1A1A, jade #2E7D6A. A rebrand is a swap of this ONE :root block, plus
   THEME in build.py (a <meta> cannot read a custom property) and GROUND in
   tools/process.py. No other file may contain a hex, rgb() or named colour —
   `tools/check-tokens.sh` enforces it.

   Roles:
     --gold        the brand metal: eyebrows, icons, hairlines, emphasis words
     --accent      the call-to-action fill (gold). Buttons only.
     --jade        the second colour: one quiet accent per section at most
     --ground/--ground-2/--ground-3/--line/--text/--text-2   the neutral system

   Contrast (WCAG 2.1, computed), every pair set as type:
     text   #F8F6EF on ground #04100F   17.9:1
     text-2 #BEB9AD on ground           9.9:1 (8.1 on ground-3)
     gold   #D4AF7C on ground            9.4:1 (7.7 on ground-3)
     jade-text #6FBFA9 on ground         8.9:1
     on-accent #10201C on gold           8.2:1
*/
/* Registered so the whole page can change light together: the colours themselves transition. */
@property --text{syntax:'<color>';inherits:true;initial-value:#F8F6EF}
@property --text-2{syntax:'<color>';inherits:true;initial-value:#BEB9AD}
@property --line{syntax:'<color>';inherits:true;initial-value:#1F3A34}
@property --line-gold{syntax:'<color>';inherits:true;initial-value:#5E4E36}
@property --gold{syntax:'<color>';inherits:true;initial-value:#D4AF7C}
:root{
  /* brand */
  --gold:#D4AF7C;
  --gold-hi:#F1DDB4;         /* the lit edge of the metal, gradients only */
  --gold-lo:#9C7A4A;         /* the shaded edge of the metal, gradients only */
  --jade:#2E7D6A;
  --jade-text:#6FBFA9;       /* jade lifted for type on the dark ground */
  --emerald:#0E3D32;
  --onyx:#1A1A1A;
  --ivory:#F8F6EF;
  --jade-wash:#3E7466;       /* the washed-jade throwback tee fabric */
  --mask:#000000;            /* opaque stop for CSS masks — never painted */
  --accent:#D4AF7C;
  --on-accent:#10201C;
  --metal:#D4AF7C;           /* gold in the nav and footer, which never change light */
  --night-text-2:#BEB9AD;    /* quieter type on the night ground */
  --night-line:#1F3A34;      /* hairline on the night ground */
  --night-line-gold:#5E4E36;
  --paper:#F8F6EF;           /* the ivory chapter's ground */
  --ink:#0E3D32;             /* type on paper: emerald, 11.2:1. Gold on paper is 1.9:1 and never allowed */
  --ink-2:#3F5A52;           /* quieter type on paper, 6.9:1 */
  --line-paper:#D8D4C6;      /* hairline on paper */
  --line-emerald:#2A5C4E;    /* hairline on the emerald surface */
  --text-on-emerald:#C9D8D1; /* quieter type on the emerald surface, 7.7:1 */
  --fold:#000000;            /* the shadow in cloth, gradients only */
  --sheen:#FFFFFF;           /* the light on cloth, gradients only */

  /* neutrals */
  --ground:#04100F;          /* the board's near-black emerald */
  --ground-2:#071A17;
  --ground-3:#0B2722;
  --line:#1F3A34;
  --line-gold:#5E4E36;       /* hairline in gold, for frames and dividers */
  --text:#F8F6EF;            /* ivory */
  --text-2:#BEB9AD;
  --shade:rgba(4,16,15,.72);
  --glow:rgba(46,125,106,.34);   /* the emerald light pooled behind the hero */
  --veil:rgba(4,16,15,.58);      /* film overlay that keeps gold type legible */
  --veil-deep:rgba(4,16,15,.92);
  --dust-shadow:rgba(0,0,0,.35);

  /* the Dream Machine's four moods: art directions for a visitor's sketch, not our brand */
  --dm-lux-bg:#F6F2E9; --dm-lux-ink:#1E1A14; --dm-lux-accent:#8C6D3F; --dm-lux-soft:#E6DFCF;
  --dm-bold-bg:#0E0E10; --dm-bold-ink:#F5F5F5; --dm-bold-accent:#FF5A36; --dm-bold-soft:#1F1F24;
  --dm-warm-bg:#F3E7D8; --dm-warm-ink:#3A2418; --dm-warm-accent:#B5532A; --dm-warm-soft:#E7D3BC;
  --dm-future-bg:#05070D; --dm-future-ink:#DDE6FF; --dm-future-accent:#6CF0C2; --dm-future-soft:#141B2E;

  /* a craft brewery: three colourways */
  --c6-tomato:#D6412A; --c6-cream:#F3E8D5; --c6-navy:#13233C; --c6-forest:#1C4636; --c6-amber:#E4A62E; --c6-metal:#C7CBD0; --c6-ink:#121212; --c6-white:#FFFFFF;
  /* a property manager: a tower at dusk, and what its windows mean */
  --c5-sky-a:#141B33; --c5-sky-b:#3B2F55; --c5-sky-c:#B5624F; --c5-sky-d:#E9A15F; --c5-face:#0D1220; --c5-face-2:#161C2E; --c5-line:#2A3148; --c5-text:#E8EAF2; --c5-text-2:#9AA1B8;
  --c5-paid:#F4C26B; --c5-late:#F0614C; --c5-work:#7EB6FF; --c5-empty:#20263A; --c5-panel:#F4F1EA; --c5-ink:#14182A; --c5-ink-2:#5A6078; --c5-rule:#DAD5C8;
  /* a med spa: an arch of sky that goes from midnight to morning */
  --c7-bone:#F2ECE2; --c7-ink:#2A241F; --c7-ink-2:#6F655B; --c7-clay:#B47C63; --c7-sage:#7D8A74; --c7-rule:#DDD3C4; --c7-paper:#FBF8F2; --c7-night-a:#1A1B3A; --c7-night-b:#3D3564; --c7-night-c:#8A5E7F; --c7-dawn:#F2B98F;
  /* a boxing club */
  --c8-black:#0B0B0B; --c8-orange:#FF4A1C; --c8-white:#F5F1EA; --c8-grey:#8A8680; --c8-line:#2B2A28;
  /* a pool builder: pale stone, bright water, and the same pool after dark */
  --cp-deck:#E9E1D2; --cp-deck-b:#D9CFBC; --cp-joint:#BDB19B; --cp-cope:#F7F2E8; --cp-shallow:#7FE3E0; --cp-deep:#128FB3; --cp-foam:#F4FFFD; --cp-shade:#3F3A30; --cp-night:#0C1826; --cp-night-b:#16263A; --cp-glow:#2BE4E0; --cp-ink:#17322F; --cp-ink-2:#4F5F58; --cp-paper:#F8F4EC; --cp-rule:#D8CFBE;
  /* a car detailer: black paint, and a white studio reflected in it */
  --cd-black:#050506; --cd-paint:#08090B; --cd-steel:#8D939B; --cd-white:#F3F5F7; --cd-line:#25272B; --cd-sig:#E5382B;
  /* a custom home builder: blueprint paper, and the same house at dusk */
  --ch-blue:#0F2C52; --ch-blue-b:#16396A; --ch-line:#D9E6F5; --ch-line-2:#7E9CC4; --ch-sky-a:#1B2342; --ch-sky-b:#6A4A6E; --ch-sky-c:#E08E5A; --ch-wall:#EFE8DA; --ch-wall-b:#D8CFBD; --ch-roof:#262A31; --ch-glass:#2A3346; --ch-lit:#F6C670; --ch-lawn:#2C4636; --ch-lawn-b:#233A2C; --ch-paper:#F4F1EA; --ch-ink:#14233B; --ch-ink-2:#5A6780; --ch-rule:#D5D0C4; --ch-lake:#B9CCE0;
  /* a fine jeweler: black velvet, three metals, four stones */
  --cj-black:#07070A; --cj-velvet:#1A161D; --cj-ivory:#F2EDE3; --cj-ivory-2:#A8A194; --cj-line:#2C2830; --cj-yellow:#C9A25A; --cj-yellow-hi:#FFEBBD; --cj-rose:#CB8F7B; --cj-rose-hi:#FFDFD2; --cj-plat:#A4AAB2; --cj-plat-hi:#F5F7F9; --cj-sapphire:#0F2C73; --cj-ruby:#560718; --cj-diamond:#C6CED4;
  --sr-bad:#E0654F;
  /* a lake charter: three skies, one lake */
  --cc-dawn-a:#26365C; --cc-dawn-b:#EE9A72; --cc-noon-a:#17689F; --cc-noon-b:#9FD3E4; --cc-dusk-a:#2B1F4C; --cc-dusk-b:#F2743F; --cc-sun:#FFF3CF; --cc-water:#0B3B4E; --cc-shore:#091C21; --cc-paper:#F6F1E6; --cc-ink:#10272E; --cc-ink-2:#566A70; --cc-rule:#D8D2C2; --cc-hull:#F7F5EF;
  /* a coffee roaster: the colours a bean goes through */
  --cf-green:#9AAB6A; --cf-yellow:#CDAA5A; --cf-cinn:#A9693A; --cf-med:#6E4026; --cf-dark:#3B2215; --cf-black:#1B100A; --cf-cream:#F5ECDD; --cf-ink:#1E120B; --cf-ink-2:#6E5E50; --cf-heat:#E4572E; --cf-rule:#DCCFB9;
  /* a florist */
  --cl-cream:#F7F1E7; --cl-ink:#2C2A26; --cl-ink-2:#77706A; --cl-blush:#F0B8B4; --cl-blush-2:#DE8E8E; --cl-coral:#E8775F; --cl-coral-2:#C95A45; --cl-sage:#8DA083; --cl-sage-2:#5F7559; --cl-blue:#6C83C4; --cl-white:#FDFBF6; --cl-dark:#3A2E3F; --cl-stem:#5E7355; --cl-glass:#C9D6D2; --cl-rule:#E2D9CA;
  /* a Finger Lakes winery */
  --cw-paper:#F3EDE1; --cw-ink:#2A1A1E; --cw-ink-2:#7A6A63; --cw-rule:#DAD0BE; --cw-red:#6B1A2C; --cw-straw:#E6D28A; --cw-hill-a:#B9C2A0; --cw-hill-b:#8C9C78; --cw-hill-c:#5F7555; --cw-hill-d:#3E5540; --cw-row:#2C3F2E; --cw-lake:#9FB6C4; --cw-sun:#EFC98B; --cw-glass:#BFC9C6; --cw-gold:#B8975A;
  /* a fragrance house */
  --cg-ground:#EFE9E1; --cg-ink:#1E1B1A; --cg-ink-2:#7B736B; --cg-rule:#D8D0C5; --cg-cap:#B99A5E; --cg-cap-hi:#F2DFB2; --cg-cap-lo:#6B5429;
  --cg-bergamot:#D6C552; --cg-neroli:#E8D69C; --cg-pepper:#D4806F; --cg-iris:#A398C6; --cg-rose:#C65B78; --cg-fig:#7C9A68; --cg-cedar:#8A5A32; --cg-amber:#C97F2A; --cg-oud:#3C2315;
  /* a ceramics studio */
  --cs-wall:#E9E1D3; --cs-wall-b:#D5CAB6; --cs-ink:#2B2520; --cs-ink-2:#786E62; --cs-rule:#CFC5B2; --cs-clay:#A9694A; --cs-clay-hi:#D39A78; --cs-celadon:#9DB9A6; --cs-tenmoku:#2E1E17; --cs-bone:#EDE6D8; --cs-wheel:#4A443C;
  /* a roofer, in storm season */
  --cr-storm:#10161D; --cr-storm-b:#26313D; --cr-storm-c:#3F4E5C; --cr-white:#EFF3F6; --cr-grey:#8F9BA6; --cr-bolt:#F5D547; --cr-line:#2D3843; --cr-house:#1B242D;
  /* the three concept studies on the work chapter: their own brands, not ours */
  --c1-ground:#F4EEE3; --c1-ink:#2B2118; --c1-accent:#A9542B;
  --c2-ground:#211A14; --c2-ink:#EFE6D8; --c2-accent:#B98B5E; --c2-wall:#E9E0D1; --c2-wall-ink:#2B221A; --c2-oak:#BE935F; --c2-walnut:#5E3D29; --c2-ash:#D8C29C; --c2-cloth:#39483E;
  --c3-ground:#0F1720; --c3-ink:#E6EDF3; --c3-accent:#F2A33A; --c3-line:#263341;

  /* type */
  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* shape and motion */
  --r-sm:2px;                /* the Couture System: edges are crisp, nothing is a pill */
  --r:2px;
  --r-lg:2px;
  --ease:cubic-bezier(.16,1,.3,1);   /* the one long ease, everywhere */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);   /* one shadow scale */
  --shadow-2:0 2px 6px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.4);
  --shadow-up:0 -24px 60px rgba(0,0,0,.45);
  --edge:clamp(20px,5vw,14vw);  /* the page margin; the layout has no maximum width, it grows with the screen */
  --gutter:var(--edge);
}

/* ==== 01-fonts.css ==== */
/* Self-hosted type (site/fonts, OFL). Variable files: one per family/style. */
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-italic.woff2) format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Pinyon Script';src:url(../fonts/pinyon.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ==== 10-base.css ==== */
/* Base: type, layout, nav, footer, buttons. Colours only via var(--…).
   The Couture System: type is the architecture, the layout grows with the screen,
   edges are crisp, and rhythm comes from changing the light, not from another row
   of cards. Everything is in rem, and the root grows with the viewport, so a 4K
   screen gets a 4K layout rather than a small column in a lot of black. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground);font-size:clamp(15px,.52vw + 9.6px,44px)}
@media (max-width:600px){html{font-size:16px}}
body{margin:0;color:var(--text);font:400 1rem/1.6 var(--body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
.defs{position:absolute;width:0;height:0;overflow:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);margin:0;font-weight:400;text-wrap:balance}
h1{font-size:max(3.4rem,7.4vw);line-height:.96;letter-spacing:-.018em}
h2{font-size:max(2.9rem,5.6vw);line-height:.98;letter-spacing:-.015em}
h3{font-size:clamp(1.7rem,2.1vw,4rem);line-height:1.1;font-weight:500;letter-spacing:-.005em}
p{margin:0 0 1em;text-wrap:pretty}
b,strong{font-weight:600}
.wrap{padding-inline:var(--edge)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--text);color:var(--ground);padding:8px 14px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ch-paper :focus-visible{outline-color:var(--ink)}

.lede{font-size:1.16rem;line-height:1.55;color:var(--text-2);max-width:54ch}
.eyebrow{font:500 max(11px,.72rem)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin:0 0 1.6rem;display:flex;align-items:center;gap:.8em}
.eyebrow svg{width:1.2rem;height:1.2rem;color:var(--text-2)}
.note{color:var(--text-2);font-size:.88rem;margin:1.6rem 0 0;max-width:62ch}
.tbd{font:500 max(11px,.72rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);border:1px dashed var(--line-gold);padding:.4em .7em}

/* the three lights. Sections carry their own ground and colours, so no-JS and reduced motion
   are complete. Under html.lights-on one fixed layer crossfades instead, and the page's colours
   change with it, so the chapter you're leaving stays readable on the light you're entering. */
.ch{position:relative;padding-block:clamp(6rem,11vw,24vw)}
.ch-night{background:var(--ground)}
.ch-emerald{background:var(--emerald)}
.ch-paper{background:var(--paper)}
html:not(.lights-on) .ch-emerald,html[data-light=emerald]{--text-2:var(--text-on-emerald);--line:var(--line-emerald);--line-gold:var(--line-emerald)}
html:not(.lights-on) .ch-paper,html[data-light=paper]{--text:var(--ink);--text-2:var(--ink-2);--line:var(--line-paper);--line-gold:var(--line-paper);--gold:var(--ink)}
.ch-night,.ch-emerald,.ch-paper,body{color:var(--text)}
.lights{display:none;position:fixed;inset:0;z-index:-1;background:var(--ground);transition:background-color .9s var(--ease)}
html.lights-on .lights{display:block}
html.lights-on :is(.ch-night,.ch-emerald,.ch-paper){background:none}
html[data-light=emerald] .lights{background:var(--emerald)}
html[data-light=paper] .lights{background:var(--paper)}
/* The root keeps the same colour, so a rubber-band scroll past the edge of the page never shows white. */
html[data-light=emerald]{background:var(--emerald)}
html[data-light=paper]{background:var(--paper)}
/* A pointer device gets the colours fading too. On a phone they flip at once: a whole-page colour
   transition means restyling everything on every frame, which is not worth a dropped scroll. */
@media (hover:hover) and (pointer:fine){
  html.lights-on{transition:--text .8s var(--ease),--text-2 .8s var(--ease),--line .8s var(--ease),--line-gold .8s var(--ease),--gold .8s var(--ease)}
}
/* the nav and footer are always on the night ground, whatever the page's light is doing */
.nav,.foot{--text:var(--ivory);--text-2:var(--night-text-2);--line:var(--night-line);--line-gold:var(--night-line-gold);--gold:var(--metal);color:var(--text)}

/* the promise line — the board's tagline, gold on the verbs */
.promise{font:500 clamp(.72rem,.95vw,1.4rem)/1.5 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--text);margin:0}
.promise b{color:var(--gold);font-weight:600}

/* One primary button: a foil-stamped plate, plain at rest; it catches the light when you reach for it.
   The accent fill lives here and nowhere else. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.9em;font:600 max(11px,.78rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--on-accent);padding:1.25em 1.9em;border:0;border-radius:var(--r-sm);cursor:pointer;
  background:linear-gradient(105deg,var(--accent) 40%,var(--gold-hi) 50%,var(--accent) 60%) 120% 0/300% 100%;
  transition:background-position .9s var(--ease),transform .35s var(--spring)}
.btn svg{width:1em;height:1em}
.btn:hover{background-position:-20% 0}
.btn:active{transform:scale(.97);transition-duration:.12s}
.ch-paper .btn{background:linear-gradient(105deg,var(--ink) 40%,var(--ink-2) 50%,var(--ink) 60%) 120% 0/300% 100%;color:var(--paper)}
.ch-paper .btn:hover{background-position:-20% 0}
/* Secondary actions are words with a drawn underline. */
.link,.more{display:inline-flex;align-items:center;gap:.7em;font:600 max(11px,.78rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--text);
  padding:.5em 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .25s var(--ease)}
.link:hover,.more:hover{background-size:0 1px;background-position:100% 100%}
.link svg,.more svg{width:1em;height:1em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.8rem;margin-top:2.6rem}

/* nav: solid, never see-through. Text passing behind a blurred bar is the "bad loading" look. */
.nav{--nav-h:clamp(56px,3.9rem,8rem);position:sticky;top:0;z-index:50;background:var(--ground);border-bottom:1px solid var(--line)}
.nav .brand{view-transition-name:brand;transition:opacity .5s var(--ease)}
html.at-hero .nav .brand{opacity:0;pointer-events:none}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);position:relative}
.nav-progress{display:none;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.brand{display:block}
.brand-mark{display:block;width:auto;height:calc(var(--nav-h) * .62);aspect-ratio:1600/691}
.nav-links{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2.6rem}
.nav-links a:not(.btn){text-decoration:none;font-weight:500;font-size:max(11px,.74rem);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);padding:.5em 0;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease),color .25s var(--ease)}
.nav-links a:not(.btn):hover,.nav-links a[aria-current]{color:var(--text);background-size:100% 1px}
.nav-cta .btn{padding:.95em 1.3em;font-size:max(11px,.7rem)}
.nav-sketch{white-space:nowrap}
.nav-sketch::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.6em;background:var(--gold);vertical-align:.08em}
.nav{transition:transform .5s var(--ease)}
html.nav-away .nav{transform:translateY(-101%)}
.nav-check,.nav-toggle,.nav-start{display:none}
@media (max-width:900px){
  .nav{--nav-h:56px}
  .nav-toggle{display:flex;flex-direction:column;gap:6px;padding:10px;pointer-events:none}
  .nav-start{display:inline-flex;margin-left:auto;margin-right:.5rem;padding:.8em 1em;font-size:max(11px,.66rem);position:relative;z-index:2}
  .nav-toggle span{width:24px;height:1px;background:var(--text)}
  .nav-check{display:block;position:absolute;right:var(--gutter);top:6px;width:44px;height:44px;margin:0;opacity:0;z-index:2;cursor:pointer}
  .nav-nav{display:block;position:fixed;left:0;right:0;top:var(--nav-h);height:calc(100dvh - var(--nav-h));overflow-y:auto;background:var(--ground);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease),visibility 0s .6s}
  .nav-check:checked ~ .nav-wrap .nav-nav{visibility:visible;clip-path:inset(0);transition:clip-path .6s var(--ease)}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;padding:.6rem var(--gutter) 2rem}
  .nav-links li a:not(.btn){display:block;padding:.9rem 0;font-family:var(--serif);font-size:clamp(2.6rem,12vw,4.4rem);line-height:1.02;font-weight:400;letter-spacing:-.015em;text-transform:none;color:var(--text);border-bottom:1px solid var(--line);background:none}
  .nav-links li a.nav-sketch{font-size:1.5rem}
  .nav-cta{margin-top:1.4rem}
  .nav-cta .btn{width:100%}
}

/* page openers */
.page-hero{padding-block:clamp(5rem,10vw,20vw) clamp(4rem,7vw,14vw)}
.page-hero h1{max-width:21ch}
.page-hero .lede{margin-top:2.2rem}

/* footer */
.foot{position:relative;background:var(--ground);border-top:1px solid var(--line);padding:clamp(3.5rem,5vw,10rem) 0 1.6rem;color:var(--text-2);font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:clamp(2rem,4vw,8rem)}
.foot-brand .brand-mark{height:clamp(64px,6vw,14rem)}
.foot-promise{margin:1.3rem 0 .4rem;color:var(--text);font:500 .9rem/1.4 var(--body)}
.foot-desc{font-size:max(11px,.68rem);letter-spacing:.14em;text-transform:uppercase;margin:0}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;align-content:start}
.foot-links a{text-decoration:none;font-family:var(--serif);font-size:1.4rem;line-height:1.1;color:var(--text);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.foot-links a:hover{background-size:100% 1px}
.foot-meta p{margin:0 0 .6rem}
.foot-meta a{color:var(--text)}
.foot-still{background:none;border:0;padding:.2em 0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
html:not(.js) .foot-still{display:none}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.3rem;border-top:1px solid var(--line);font-size:max(11px,.72rem)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
/* a section that follows its own light, with room only at its end */
.pad-end{padding-top:0;padding-bottom:clamp(5rem,9vw,18vw)}

/* ==== 20-components.css ==== */
/* Components. Gold stays rare: one gold moment per chapter. */

/* the vector wordmark: fills come from custom properties */
.wm-script{fill:var(--wm-a,url(#wm-gold))}
.wm-studios{fill:var(--wm-b,var(--ivory))}

/* ---- I. The hero: the mark on the dark, the way the board shows it ---- */
.hero{min-height:calc(100svh - clamp(56px,3.9rem,8rem));display:flex;flex-direction:column;justify-content:space-between;gap:clamp(2rem,4vw,6rem);
  padding-block:clamp(2.4rem,5vh,8vh) clamp(1.6rem,3vh,4vh);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-10% -10% 10%;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 52% at 50% 44%,var(--emerald),transparent 72%);opacity:.75}
.hero-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(1.4rem,2.6vh,3vh)}
.hero-mark{margin:0;width:min(66vw,118vh)}
.wm-metal{display:block;width:100%;height:auto;aspect-ratio:1600/691;filter:drop-shadow(0 .9vw 1.5vw var(--dust-shadow))}
.hero-line{font:400 clamp(1.3rem,2vw,4rem)/1.25 var(--serif);color:var(--text);max-width:40ch;margin:0}
.ask{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8rem clamp(1.6rem,3vw,6rem);border-top:1px solid var(--line);padding-top:clamp(1rem,2vh,2vh)}
.ask-q{font:400 clamp(1.5rem,2.4vw,5rem)/1.1 var(--serif);margin:0;color:var(--text)}
.ask-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem 2.2rem}
.ask-chips a{font:500 max(11px,.78rem)/1 var(--body);letter-spacing:.06em;text-decoration:none;color:var(--text-2);padding:.6em 0;display:inline-flex;gap:.6em;align-items:center;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .25s var(--ease)}
.ask-chips a:hover{color:var(--gold)}
.ask-chips svg{width:1em;height:1em}
@media (max-width:760px){
  .hero-mark{width:92vw}
  .ask{grid-template-columns:1fr}
  .ask-chips{justify-content:flex-start;flex-direction:column;gap:.2rem}
}

/* ---- II. Dream: a word that is a window onto the gold ---- */
.dream{padding-block:clamp(5rem,9vw,18vw) clamp(4rem,7vw,14vw);overflow:clip}
.dream-stage{position:relative}
.dream-stage > :not(.gl-stage){position:relative;z-index:1}
.dream-h{font-size:max(2.9rem,5.6vw);line-height:1}
.dream-h span{display:block}
.dream-h .window{display:block;width:max-content}
.window{font-size:39vw;line-height:1;letter-spacing:-.035em;margin:-.12em 0 -.12em -.05em;padding:.04em .08em .04em .05em;white-space:nowrap;
  color:var(--gold);background-position:50% 50%;background-size:cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dream-b{text-align:right}

/* ---- II. Build: the Dream Machine. Tap a business, a mood and a goal; a real miniature site builds itself ---- */
.bstage{position:relative;padding-block:clamp(5rem,8vw,16vw)}
.bstage-inner{min-height:min(84vh,62vw);display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,3.4vw,8rem);align-items:center}
.bstage h2{font-size:clamp(2.6rem,4.6vw,16vh);margin-bottom:1.4rem}
.dm{border:0;margin:0 0 .85rem;padding:0;min-width:0}
.dm legend{padding:0;font:500 max(11px,.66rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:.5rem}
.dm-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{font:500 max(11px,.76rem)/1 var(--body);color:var(--text);background:none;border:0;box-shadow:inset 0 0 0 1px var(--line-emerald);padding:.58em .78em;cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .35s var(--spring)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--text)}
.chip:active{transform:scale(.94)}
.chip[aria-pressed=true]{background:var(--ivory);color:var(--ink)}
/* while it plays by itself, the chips show what it's sketching without claiming you chose it */
.chip.demo{box-shadow:inset 0 0 0 1px var(--text)}
.beats{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.beat{font:400 clamp(1.05rem,1.3vw,3rem)/1.1 var(--serif);color:var(--text-2);opacity:.45;transition:opacity .5s var(--ease),color .5s var(--ease)}
.beat span{display:none}
.beat.on{opacity:1;color:var(--text)}
.dm-result{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;margin:1rem 0 0;font-size:.86rem;color:var(--text-2);min-height:1.4em}
.dm-result b{color:var(--text);font-weight:500}
.dm-doors{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.dm-share{background:none;border:0;padding:.5em 0;font:500 max(11px,.78rem)/1 var(--body);color:var(--text-2);cursor:pointer;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.dm-share:hover{color:var(--text)}
.bs-tag{display:inline-block;margin-top:.9rem}
.devices{position:relative;height:min(72vh,46vw)}
.laptop{position:absolute;left:0;right:12%;top:3%}
.lt-screen{aspect-ratio:16/10;border-radius:.5rem .5rem 0 0;border:.4rem solid var(--onyx);border-bottom-width:.6rem;background:var(--ground);overflow:hidden;box-shadow:var(--shadow-2);container-type:inline-size}
.lt-base{height:.7rem;margin:0 -6%;border-radius:0 0 .5rem .5rem;background:var(--onyx)}
.phone{position:absolute;right:0;bottom:0;width:25%;aspect-ratio:9/19}
.ph-screen{height:100%;border-radius:1.2rem;border:.3rem solid var(--onyx);background:var(--ground);overflow:hidden;box-shadow:var(--shadow-2);container-type:inline-size}
.bs-site{position:relative;height:100%;font-family:var(--body);overflow:hidden}
.bs-cursor{position:absolute;left:5cqi;top:9cqi;width:.6cqi;min-width:2px;height:7cqi;background:var(--gold-hi)}
.bs-wire,.bs-live{position:absolute;inset:5cqi}
.bs-wire{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:5% 36% 9% 1fr;gap:2.4cqi}
.bs-wire i{box-shadow:inset 0 0 0 1px var(--line-gold)}
.w-nav,.w-hero{grid-column:1/-1}
.w-cta{grid-column:1/2}
.bs-live{pointer-events:none}
.bs-book{position:absolute;font:600 1.9cqi/1 var(--body);padding:1.8cqi 2.6cqi;background:var(--ivory);color:var(--onyx);box-shadow:var(--shadow-2);white-space:nowrap}
.bs-chat{position:absolute;display:flex;align-items:center;gap:1.2cqi;font:600 1.9cqi/1 var(--body);padding:1.8cqi 2.6cqi;background:var(--onyx);color:var(--ivory);box-shadow:var(--shadow-2);white-space:nowrap}
.bs-chat i{width:1.4cqi;height:1.4cqi;border-radius:50%;background:var(--jade-text)}
/* the live moments sit in the gap between the headline and the tiles, clear of the phone's overlap */
.lt-screen .bs-live{inset:0}
.lt-screen .bs-book{right:18cqi;top:29.5cqi}
.lt-screen .bs-chat{right:18cqi;top:36cqi}
.ph-screen .bs-live{inset:0}
.ph-screen .bs-book,.ph-screen .bs-chat{font-size:4.2cqi;padding:3cqi 4cqi;right:7cqi}
.ph-screen .bs-book{top:58%}
.ph-screen .bs-chat{top:66%}
/* the sketch itself: everything scales with its own screen, in the visitor's chosen mood */
.mood-lux{--m-bg:var(--dm-lux-bg);--m-ink:var(--dm-lux-ink);--m-accent:var(--dm-lux-accent);--m-on:var(--dm-lux-bg);--m-soft:var(--dm-lux-soft);--m-font:var(--serif);--m-w:400;--m-t:-.015em;--m-case:none}
.mood-bold{--m-bg:var(--dm-bold-bg);--m-ink:var(--dm-bold-ink);--m-accent:var(--dm-bold-accent);--m-on:var(--dm-bold-ink);--m-soft:var(--dm-bold-soft);--m-font:var(--body);--m-w:800;--m-t:-.035em;--m-case:uppercase}
.mood-warm{--m-bg:var(--dm-warm-bg);--m-ink:var(--dm-warm-ink);--m-accent:var(--dm-warm-accent);--m-on:var(--dm-warm-bg);--m-soft:var(--dm-warm-soft);--m-font:var(--serif);--m-w:500;--m-t:-.01em;--m-case:none}
.mood-future{--m-bg:var(--dm-future-bg);--m-ink:var(--dm-future-ink);--m-accent:var(--dm-future-accent);--m-on:var(--dm-future-bg);--m-soft:var(--dm-future-soft);--m-font:var(--body);--m-w:300;--m-t:.005em;--m-case:none}
.bs-design{position:absolute;inset:0;background:var(--m-bg);color:var(--m-ink);padding:4cqi 5cqi;display:flex;flex-direction:column;gap:2.4cqi;transition:background-color .6s var(--ease),color .6s var(--ease)}
.m-nav{display:flex;align-items:center;gap:3cqi;font:500 1.7cqi/1 var(--body);margin:0}
.m-nav b{font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-right:auto}
.m-nav span{opacity:.7}
.m-h{margin:2.4cqi 0 0;font:var(--m-w) 7.6cqi/.98 var(--m-font);letter-spacing:var(--m-t);text-transform:var(--m-case);max-width:15ch}
.m-sub{margin:0;font:400 1.9cqi/1.4 var(--body);opacity:.78;max-width:42ch}
.m-btns{display:flex;gap:1.4cqi;margin:.4cqi 0 0}
.m-btn{font:600 1.7cqi/1 var(--body);padding:1.6cqi 2.4cqi;border:0;background:var(--m-accent);color:var(--m-on);cursor:pointer;transition:transform .3s var(--spring)}
.m-btn:active{transform:scale(.95)}
.m-mod{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi}
.m-tile{background:var(--m-soft);padding:1.8cqi;display:flex;flex-direction:column;gap:1cqi;font:500 1.7cqi/1.2 var(--body);min-height:13cqi;border:0;color:inherit;text-align:left;cursor:pointer;transition:transform .3s var(--spring)}
.m-tile:active{transform:scale(.97)}
.m-tile i{font:500 1.4cqi/1 var(--body);font-style:normal;color:var(--m-accent);margin-top:auto}
.m-tile.on{background:var(--m-accent);color:var(--m-on)}
.m-tile.on i{color:var(--m-on)}
.m-bars{display:flex;align-items:flex-end;gap:.6cqi;height:6cqi;margin-top:auto}
.m-bars b{flex:1;background:var(--m-accent);height:calc(var(--v) * 1%);transition:height .8s var(--ease)}
.ph-screen .bs-design{padding:6cqi 7cqi;gap:4cqi}
.ph-screen .m-nav{font-size:4cqi}
.ph-screen .m-nav span{display:none}
.ph-screen .m-h{font-size:14cqi;margin-top:5cqi}
@container (max-width:460px){.lt-screen .mood-bold .m-h{font-size:6.9cqi}}
.ph-screen .m-sub{font-size:4.6cqi}
.ph-screen .m-btn{font-size:4.2cqi;padding:3.6cqi 5cqi}
.ph-screen .m-mod{grid-template-columns:1fr;gap:3cqi}
.ph-screen .m-tile{font-size:4.4cqi;padding:4cqi;min-height:0;flex-direction:row;justify-content:space-between;align-items:center}
.ph-screen .m-tile i{font-size:3.6cqi;margin:0}
.ph-screen .m-bars{height:7cqi;width:30%;margin:0}
@media (max-width:900px){
  /* A tap should pay off where the finger is, so the sketch stays in view above the choices. Native sticky: the scroll is still the reader's. */
  .bstage-inner{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:1.8rem}
  .bstage-copy{display:contents}
  .bstage-head{order:1}
  .devices{order:2;position:sticky;top:clamp(56px,3.9rem,8rem);z-index:2;height:auto;margin-inline:calc(var(--gutter) * -1);padding:.6rem var(--gutter) .7rem;background:var(--emerald);box-shadow:0 .7rem .9rem -.7rem var(--shade);transition:top .5s var(--ease)}
  html.nav-away .devices{top:0}
  .dm-controls{order:3}
  .phone{display:none}
  .laptop{position:relative;left:auto;right:auto;top:auto;width:min(100%,calc(36vh * 1.6));margin-inline:auto}
  .lt-screen{border-width:.25rem .25rem .3rem;border-radius:.35rem .35rem 0 0;box-shadow:none}
  .lt-base{height:.35rem;margin-inline:-3%}
}
@media (pointer:coarse){.chip{padding-block:.82em}}
html:not(.js) .dm-controls{display:none}
html:not(.motion) .bs-cursor,html:not(.motion) .bs-wire{display:none}
html:not(.motion) .beat{opacity:1}

/* ---- III. Work: three studies, off the grid on purpose ---- */
.work-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(3rem,5vw,10rem)}
.work-head .lede{justify-self:end;margin:0}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.6rem,3vw,6rem) clamp(1rem,2vw,4rem);align-items:start}
.study{margin:0;min-width:0}
.study-1{grid-column:1/8}
.study-2{grid-column:9/13;margin-top:clamp(4rem,10vw,20vw)}
.study-3{grid-column:3/11}
.study figcaption{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:.86rem;color:var(--text-2)}
.study-t{font:400 clamp(1.5rem,2vw,4rem)/1.1 var(--serif);color:var(--text);display:block}
.tag{font:500 max(11px,.66rem)/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);max-width:100%;padding:.5em .7em;box-shadow:inset 0 0 0 1px var(--line);align-self:flex-start}
.poster{position:relative;display:block;overflow:hidden;container-type:inline-size;aspect-ratio:16/10}
.study-2 .poster{aspect-ratio:4/5}
.study-3 .poster{aspect-ratio:21/10}
.poster > img{display:block;width:100%;height:100%;object-fit:cover}
.study-2 .poster > img{object-position:66% 50%}
.study-3 .poster > img{object-position:50% 34%}
@media (max-width:760px){
  .work-head{grid-template-columns:1fr}.work-head .lede{justify-self:start}
  .work-grid{display:block}.study{margin:0 0 3rem}
  .study-2 .poster{aspect-ratio:4/5}
}
/* a private chef */
.p-chef{background:var(--c1-ground);color:var(--c1-ink)}
.p-chef-nav{position:absolute;left:5cqi;right:5cqi;top:4.4cqi;display:flex;justify-content:space-between;font:500 1.5cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.p-chef-h{position:absolute;left:5cqi;bottom:6cqi;font:400 16cqi/.86 var(--serif);letter-spacing:-.025em;margin:0}
.p-chef-h em{color:var(--c1-accent)}
.p-chef-plate{position:absolute;right:-7cqi;top:-3cqi;width:42cqi;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--c1-ground) 0 38%,var(--c1-accent) 38.4% 39%,var(--c1-ground) 39.4% 62%,var(--c1-ink) 62.3% 62.6%,var(--c1-ground) 63% 100%)}
.p-chef-book{position:absolute;right:5cqi;bottom:13cqi;font:600 1.5cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--c1-accent);color:var(--c1-ground);padding:1.6cqi 2.2cqi}
/* a furniture atelier */
.p-atelier{background:var(--c2-ground);color:var(--c2-ink)}
.p-atelier-h{position:absolute;left:6cqi;top:7cqi;font:400 16cqi/.9 var(--serif);letter-spacing:-.03em;margin:0}
.p-atelier-wall{position:absolute;right:0;top:0;bottom:0;width:48%;background:var(--c2-wall);display:flex;align-items:center;--wood:var(--c2-oak)}
.p-atelier-chair{display:block;width:100%;height:auto;padding:0 7%;box-sizing:border-box}
.p-atelier-chair .wd{fill:none;stroke:var(--wood);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.p-atelier-chair .cu{fill:var(--c2-cloth)}
.p-atelier-chair .sh{fill:var(--c2-wall-ink);opacity:.14}
.p-atelier-foot{position:absolute;left:7cqi;right:7cqi;bottom:6cqi;display:flex;justify-content:space-between;font:500 2.4cqi/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c2-accent)}
/* a regional freight company */
.p-freight{background:var(--c3-ground);color:var(--c3-ink);font-family:var(--body)}
.p-freight-side{position:absolute;left:0;top:0;bottom:0;width:17cqi;border-right:1px solid var(--c3-line);padding:3cqi;display:flex;flex-direction:column;gap:1.8cqi;font:500 1.15cqi/1 var(--body)}
.p-freight-side b{font-weight:600;font-size:1.5cqi;margin-bottom:1.4cqi}
.p-freight-side span:nth-of-type(1){color:var(--c3-accent)}
.p-freight-main{position:absolute;left:20cqi;right:3cqi;top:3cqi;bottom:3cqi;display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:auto 1fr;gap:2cqi}
.p-freight-h{grid-column:1/-1;font:500 2.6cqi/1 var(--body);margin:0;display:flex;justify-content:space-between;align-items:center}
.p-freight-h i{font:500 1.15cqi/1 var(--body);font-style:normal;color:var(--c3-accent)}
.p-freight-chart{border:1px solid var(--c3-line);padding:1.6cqi}
.p-freight-chart svg{width:100%;height:100%}
.p-freight-chart path{fill:none;stroke:var(--c3-accent);stroke-width:1.6;stroke-linejoin:round}
.p-freight-chart line{stroke:var(--c3-line);stroke-width:1}
.p-freight-rows{border:1px solid var(--c3-line);display:grid;grid-auto-rows:1fr;font:500 1.15cqi/1 var(--body)}
.p-freight-rows span{display:flex;justify-content:space-between;align-items:center;padding:0 1.4cqi;border-bottom:1px solid var(--c3-line)}
.p-freight-rows span:last-child{border:0}
.p-freight-rows i{font-style:normal;color:var(--c3-accent)}

/* Payback: drag what a customer is worth, and the three packages answer in the ledger's own columns */
.payback{margin-top:clamp(3rem,6vw,10rem);padding-top:clamp(1.8rem,3vw,5rem);border-top:1px solid var(--line)}
.pay-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 2rem;margin-bottom:1.4rem}
.pay-q{font:400 clamp(1.7rem,2.8vw,6rem)/1.1 var(--serif)}
.pay-v{font:400 clamp(2.4rem,4.4vw,9rem)/1 var(--serif);font-variant-numeric:lining-nums}
.pay-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:2.6rem;margin:0;background:none;cursor:ew-resize;touch-action:pan-y}
.pay-range::-webkit-slider-runnable-track{height:1px;background:var(--text)}
.pay-range::-moz-range-track{height:1px;background:var(--text)}
.pay-range::-webkit-slider-thumb{-webkit-appearance:none;width:1.5rem;height:2.4rem;margin-top:-1.2rem;background:var(--ink);border:0;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--ink)}
.pay-range::-moz-range-thumb{width:1.5rem;height:2.4rem;background:var(--ink);border:0;border-radius:var(--r-sm)}
.pay-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem clamp(1rem,2.6vw,5rem);margin-top:1.6rem}
.pay-col b{display:block;font:400 clamp(3.2rem,6.4vw,14rem)/1 var(--serif);font-variant-numeric:lining-nums;margin-bottom:.4rem}
.pay-col span{font-size:.9rem;color:var(--text-2)}
html:not(.js) .payback{display:none}
/* Reserve: the decision page. The paper is the page; the deposit is one emerald slip that stays in view */
.reserve{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,12rem);align-items:start}
.rsv-main h1{font-size:clamp(3.2rem,7vw,20vh);line-height:.98}
.rsv-main .ticks{margin-top:2rem;max-width:32rem}
.slip{position:sticky;top:clamp(84px,6rem,12rem);background:var(--emerald);color:var(--ivory);--text:var(--ivory);--text-2:var(--text-on-emerald);--line:var(--line-emerald);padding:clamp(1.6rem,3vw,5rem)}
.slip-k{font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0}
.slip-fig{font:400 clamp(3.4rem,6vw,13rem)/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.01em;margin:.8rem 0 1.6rem}
.slip-rows{list-style:none;margin:0 0 1.8rem;padding:0;border-top:1px solid var(--line)}
.slip-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--text-2)}
.slip-rows b{font-weight:500;color:var(--text);white-space:nowrap}
.slip-cta{display:flex;align-items:center;justify-content:center;gap:.8em;width:100%;box-sizing:border-box;text-align:center;font:600 max(11px,.78rem)/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:1.35em 1.2em;
  background:linear-gradient(105deg,var(--ivory) 40%,var(--sheen) 50%,var(--ivory) 60%) 120% 0/300% 100%;transition:background-position .9s var(--ease),transform .35s var(--spring)}
.slip-cta svg{width:1em;height:1em;flex:none}
.slip-cta:hover{background-position:-20% 0}
.slip-cta:active{transform:scale(.98);transition-duration:.12s}
.slip-sec{margin:.8rem 0 0;font-size:max(11px,.78rem);color:var(--text-2);text-align:center}
.slip-refund{font:italic 400 1.3rem/1.25 var(--serif);margin:1.6rem 0 .4rem}
.slip-after,.slip-cap{font-size:.82rem;color:var(--text-2);margin:0 0 1rem}
.slip-talk{display:inline-block;font-size:.84rem;color:var(--text);text-underline-offset:.3em;text-decoration-thickness:1px}
.rsv-sketch{margin-top:2.4rem}
.rsv-sketch:empty{display:none}
.rsv-sketch h2{font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0 0 .9rem}
.rsv-sketch > p{margin:.8rem 0 0;font-size:.9rem;color:var(--text-2)}
.rsv-sketch .lt-screen{max-width:30rem}
.rsv-sketch .lt-base{max-width:32rem;margin:0 0 0 -1rem;height:.5rem}
.rsv-steps{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem clamp(1rem,2.6vw,5rem)}
.rsv-step{border-top:1px solid var(--line);padding-top:1.1rem}
.rsv-step h3{font:400 clamp(1.5rem,2vw,4rem)/1.1 var(--serif);margin:.9rem 0 .6rem}
.rsv-step p{margin:0;font-size:.95rem;color:var(--text-2)}
.rsv-faq{margin-top:clamp(3rem,6vw,10rem);border-bottom:1px solid var(--line)}
@media (max-width:980px){.reserve{grid-template-columns:minmax(0,1fr)}.slip{position:relative;top:auto}.rsv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rsv-steps{grid-template-columns:minmax(0,1fr)}.pay-cols{gap:.8rem}.pay-col b{font-size:2.6rem}.pay-col span{font-size:max(11px,.76rem);display:block}}
/* Sign It */
.sign{margin:0 0 1.2rem}
.sign-pad{display:block;width:100%;height:clamp(5rem,7vw,11rem);background:linear-gradient(transparent calc(100% - 1.3rem),var(--line) calc(100% - 1.3rem),var(--line) calc(100% - 1.3rem + 1px),transparent calc(100% - 1.3rem + 1px));cursor:crosshair;touch-action:none}
.sign-note{display:flex;justify-content:space-between;gap:1rem;margin:.4rem 0 0;font-size:max(11px,.76rem);color:var(--text-2)}
.sign-note button{background:none;border:0;padding:0;font:inherit;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:.25em;white-space:nowrap}
html:not(.js) .sign{display:none}
.signed{margin:1.4rem auto 0;max-width:24rem}
.signed .sign-pad{background:none;cursor:auto;touch-action:auto;height:6rem}
.signed p{margin:0;font-size:.8rem;color:var(--text-2)}
/* The Route */
.rt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,10rem);align-items:center}
.rt-grid h2{margin-bottom:1rem}
.rt-map{margin:0;cursor:crosshair}
.rt-map svg{display:block;width:100%;height:auto;max-height:90vh;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 16%,var(--ink) 93%,transparent),linear-gradient(180deg,transparent,var(--ink) 9%,var(--ink) 92%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,var(--ink) 16%,var(--ink) 93%,transparent),linear-gradient(180deg,transparent,var(--ink) 9%,var(--ink) 92%,transparent);mask-composite:intersect}
.rt-g{fill:none;stroke:var(--night-line);stroke-width:.6}
.rt-tick{font:500 8.5px/1 var(--body);letter-spacing:.08em;fill:var(--night-text-2);opacity:.7}
.rt-land-base{fill:var(--ground-2)}
.rt-land{fill:url(#rt-engrave)}
.rt-hl{fill:none;stroke:var(--gold-lo);stroke-width:.55;opacity:.5}
.rt-lakes{fill:var(--ground)}
.rt-states{fill:none;stroke:var(--night-line-gold);stroke-width:.5;opacity:.75}
.rt-coast{fill:none;stroke:var(--metal);stroke-width:.7;stroke-linejoin:round}
.rt-lake-edge{fill:none;stroke:var(--metal);stroke-width:.55;opacity:.8;stroke-linejoin:round}
.rt-ghost{fill:none;stroke:var(--ivory);stroke-width:.8;stroke-dasharray:.5 5;stroke-linecap:round;opacity:.55}
.rt-line{fill:none;stroke:var(--gold-hi);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--rt-off,0)}
.rt-tap{fill:none;stroke:var(--ivory);stroke-width:1;stroke-dasharray:.5 5;stroke-linecap:round}
.rt-pin circle{fill:var(--gold-hi)}
.rt-pin .rt-ring{fill:none;stroke:var(--gold-hi);stroke-width:.8;opacity:.7}
.rt-pin text{font:400 19px/1 var(--serif);fill:var(--ivory);paint-order:stroke;stroke:var(--ground);stroke-width:4px;stroke-linejoin:round}
.rt-minor circle{fill:var(--ivory)}
.rt-minor text{font:500 9.5px/1 var(--body);letter-spacing:.06em;fill:var(--night-text-2);paint-order:stroke;stroke:var(--ground);stroke-width:2.5px;stroke-linejoin:round}
.rt-plane path{fill:var(--ivory);stroke:var(--ground);stroke-width:.8}
@media (max-width:860px){.rt-grid{grid-template-columns:minmax(0,1fr)}}
/* The Next Design */
.nd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,10rem);align-items:start}
.nd-q{border:0;margin:0 0 1rem;padding:0;min-width:0}
.nd-q legend{padding:0;font:500 max(11px,.66rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:.5rem}
.nd .chip{box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
.nd .chip:hover{box-shadow:inset 0 0 0 1px var(--text)}
.nd .chip[aria-pressed=true]{background:var(--ivory);color:var(--ink)}
.nd-side{position:sticky;top:clamp(84px,6rem,10rem)}
.nd-stage{position:relative;background:var(--ground-2);display:grid;place-items:center;padding:clamp(1rem,3vw,5rem);height:min(66vh,52rem);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.nd-stage .tag{position:absolute;left:.9rem;top:.9rem;z-index:1}
.nd-stage .garment{grid-area:1/1;display:none;height:100%;width:auto;max-width:100%;transform:perspective(1000px) rotateY(var(--turn,0deg));transition:transform .4s var(--ease)}
.nd-stage .garment.on{display:block}
.nd-stage.drag .garment{transition:none}
.nd-press{position:relative;display:flex;align-items:center;justify-content:center;gap:.8em;width:100%;margin-top:.8rem;padding:1.25em 1em;border:0;cursor:pointer;background:var(--ivory);color:var(--ink);font:600 max(11px,.78rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .3s var(--spring)}
.nd-press i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--metal);transform:scaleX(0);transform-origin:left}
.nd-press span{position:relative}
.nd-press.holding i{transform:scaleX(1);transition:transform .7s linear}
.nd-press.holding{transform:scale(.985)}
.nd-done{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin:1rem 0 0;font-size:.9rem}
.nd-said{font:italic 400 1.4rem/1 var(--serif)}
.nd-stage .art{opacity:.22;transition:opacity .2s var(--ease)}
.nd-stage.struck .art{opacity:1}
html.motion .nd-stage.strike .art{animation:nd-strike .55s var(--spring) both}
html.motion .nd-stage.strike{animation:nd-thud .34s var(--ease)}
@keyframes nd-strike{0%{transform:scale(1.7);opacity:0}42%{transform:scale(.95);opacity:1}70%{transform:scale(1.02)}100%{transform:none;opacity:1}}
@keyframes nd-thud{0%{transform:none}30%{transform:translateY(.35rem)}100%{transform:none}}
html:not(.js) .nd{display:none}
@media (max-width:860px){.nd-grid{grid-template-columns:minmax(0,1fr)}.nd-side{order:-1;position:relative;top:auto}.nd-stage{height:96vw}}
/* Open the hood: what's really on the screen, measured in your own browser */
.hood{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem 1.2rem;margin:.9rem 0 0;font-size:.8rem;color:var(--text-2);text-align:center}
.hood button{background:none;border:0;padding:.2em 0;font:500 max(11px,.78rem)/1 var(--body);color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
html:not(.js) .hood{display:none}
.hood button[hidden]{display:none}
.hood-note{flex-basis:100%;max-width:62ch;margin:0 auto}
.hood-note[hidden]{display:none}
html.hooded .hero-mark{cursor:crosshair}
/* The Site Read */
.sr-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;max-width:48rem}
.sr-wait{margin:1.6rem 0 0;font:italic 400 1.3rem/1.3 var(--serif);color:var(--text-2)}
.sr-list{list-style:none;margin:2rem 0 0;padding:0;max-width:60rem;border-top:1px solid var(--line)}
.sr-list:empty{display:none}
.sr-row{display:grid;grid-template-columns:1.1rem minmax(0,14rem) minmax(0,1fr);gap:.4rem 1rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line)}
.sr-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--jade-text)}
.sr-row.bad .sr-dot{background:var(--sr-bad)}
.sr-row.unknown .sr-dot{background:var(--text-2)}
.sr-row h3{margin:0;font:400 1.35rem/1.15 var(--serif)}
.sr-row p{margin:0;font-size:.95rem;color:var(--text-2)}
html.motion .sr-row{animation:sr-in .6s var(--ease) both;animation-delay:calc(var(--i) * 110ms)}
@keyframes sr-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
.sr-after{margin-top:2.2rem}
.sr-next{font:400 clamp(1.8rem,3vw,6rem)/1.1 var(--serif);margin:0}
@media (max-width:640px){.sr-form{grid-template-columns:minmax(0,1fr)}.sr-row{grid-template-columns:1.1rem minmax(0,1fr)}.sr-row p{grid-column:2}}
/* the end of the sale */
.reserved .hero-mark{width:min(44vw,34rem);margin-inline:auto}
.reserved-h{font-size:clamp(2.8rem,6vw,16vh);margin:1.4rem 0 .4rem}
.reserved-steps{list-style:none;margin:1.8rem auto 0;padding:0;max-width:38rem;text-align:left}
.reserved-steps li{display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;padding:.8rem 0;border-top:1px solid var(--line);font-size:.95rem}
.reserved-steps .step-n{font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.12em;color:var(--text-2)}
@media (max-width:760px){.reserved .hero-mark{width:72vw}}

/* ---- The wall: every concept, as a poster you can open ---- */
.wall-filter{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 clamp(1.6rem,3vw,5rem)}
.wall-filter .chip{box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
.wall-filter .chip:hover{box-shadow:inset 0 0 0 1px var(--text)}
.wall-filter .chip[aria-pressed=true]{background:var(--ivory);color:var(--ink)}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2rem,4vw,8rem) clamp(1rem,2vw,4rem)}
.card{margin:0;min-width:0;grid-column:span 6}
.card:nth-child(6n+1){grid-column:span 7}.card:nth-child(6n+2){grid-column:span 5}
.card:nth-child(6n+3),.card:nth-child(6n+4),.card:nth-child(6n+5){grid-column:span 4}
.card:nth-child(6n){grid-column:span 12}
.card:last-child:nth-child(6n+1){grid-column:span 12}
.card[hidden]{display:none}
.wall.filtered .card{grid-column:span 6}
.card-a{display:block;color:inherit;text-decoration:none}
.card-frame{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--ground-2)}
.card:nth-child(6n) .card-frame{aspect-ratio:21/9}
.card-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.card-frame .poster{height:100%;aspect-ratio:auto;transition:transform 1.2s var(--ease)}
.card-a:hover .card-frame img,.card-a:hover .card-frame .poster{transform:scale(1.025)}
.card-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-top:.9rem}
.card-t{display:block;font:400 clamp(1.5rem,2vw,4rem)/1.1 var(--serif);color:var(--text)}
.card-verb{display:block;font-size:.88rem;color:var(--text-2);margin-top:.3rem}
.card:nth-child(6n+3) .card-cap,.card:nth-child(6n+4) .card-cap,.card:nth-child(6n+5) .card-cap{flex-direction:column;gap:.6rem}
@media (max-width:760px){.wall{display:block}.card{margin-bottom:2.4rem}.card-cap{flex-direction:column;gap:.5rem}}
/* the study on the home page opens its place on the work page */
.study-link{display:block;text-decoration:none;transition:transform .9s var(--ease)}
.study-link:hover{transform:translateY(-.4rem)}

/* ---- Work: the problem, what we'd build, and a drag between the wireframe and the finished thing ---- */
.study-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,8rem);align-items:center}
.study-row:nth-of-type(even) .study-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.study-row:nth-of-type(even) .study-text{order:2}
.study-text h2{margin-bottom:1rem}
.study-text .tag{display:inline-block;margin:0 0 1.8rem}
.brief{margin:0}
.brief dt{font:500 max(11px,.66rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:1.1rem 0 .4rem}
.brief dd{margin:0;color:var(--text);max-width:44ch}
@media (max-width:860px){.study-grid,.study-row:nth-of-type(even) .study-grid{grid-template-columns:minmax(0,1fr)}.study-row:nth-of-type(even) .study-text{order:0}}
/* with no script the two sit side by side; the deck's illustration shoots them that way too */
.compare{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.compare input,.compare-line{display:none}
.cmp-tag{position:absolute;bottom:.8rem;z-index:2;font:500 max(11px,.62rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:.45em .6em;background:var(--ground);color:var(--ivory);pointer-events:none}
.cmp-a{left:.8rem}
.cmp-b{right:.8rem}
.new-body{position:relative}
.old-body{display:grid;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(6,1fr);gap:.4rem;aspect-ratio:16/10;padding:1rem;background:var(--ground-2);overflow:hidden}
.old-body i{box-shadow:inset 0 0 0 1px var(--night-line-gold)}
.old-body i.o{border-radius:50%}
.new-body .poster{aspect-ratio:16/10}
html.js .compare{display:block;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
html.js .compare .old-body{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
html.js .compare input{display:block;position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none}
html.js .compare-line{display:block;position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:var(--gold-hi);z-index:2;pointer-events:none}
html.js .compare-line::after{content:"";position:absolute;left:50%;top:50%;width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;border-radius:50%;background:var(--ivory);box-shadow:var(--shadow-1)}
html.js .compare:has(input:focus-visible) .compare-line::after{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ---- IV. The Stone: six disciplines, one object ---- */
.stone{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,4vw,8rem);align-items:start}
.stone h2{margin-bottom:clamp(2.4rem,4vw,8rem)}
.stone-fig{margin:0;position:sticky;top:12vh;background:radial-gradient(closest-side,var(--emerald),transparent)}
.stone-fig img{width:100%;height:auto;aspect-ratio:1;display:block}
.stone-fig.gl-on img{visibility:hidden}
.stone-fig.gl-on{cursor:grab;touch-action:pan-y}
.disciplines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.disciplines a{display:grid;grid-template-columns:3rem 1fr;gap:.2rem 1rem;align-items:baseline;padding:1.2rem 0 1.3rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.d-n{font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.12em;color:var(--text-2)}
.d-name{font:400 clamp(2.2rem,3.6vw,8rem)/1 var(--serif);letter-spacing:-.012em;transition:transform .6s var(--ease),color .3s var(--ease)}
.d-line{grid-column:2;font-size:.95rem;color:var(--text-2);max-width:44ch}
.disciplines a:hover .d-name{transform:translateX(.6rem);color:var(--gold)}
@media (max-width:860px){.stone{display:flex;flex-direction:column-reverse}.stone-fig{position:relative;top:auto;width:80%;margin-inline:auto}}

/* ---- V. The ivory chapter: a ledger, not a row of cards ---- */
.ledger-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(3rem,5vw,10rem)}
.ledger-head .lede{justify-self:end;margin:0}
.ledger{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.price{display:flex;flex-direction:column;padding:clamp(1.8rem,2.6vw,5rem) clamp(1.4rem,2.6vw,5rem) clamp(2rem,3vw,6rem);border-left:1px solid var(--line)}
.price:first-child{border-left:0;padding-left:0}
.price-name{font:400 clamp(1.8rem,2.4vw,5rem)/1.05 var(--serif);margin:0 0 .4rem}
.badge{font:500 max(11px,.66rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0 0 clamp(1.6rem,3vw,6rem)}
.amount{font:400 clamp(3.6rem,6vw,13rem)/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.02em;margin:0;color:var(--text)}
.amount-u{font:500 max(11px,.66rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:1rem 0 clamp(1.6rem,2.6vw,5rem)}
.price-who{color:var(--text-2);font-size:.95rem;margin-bottom:1.6rem;max-width:32ch}
.ticks{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;gap:.1rem;align-content:start;flex:1}
.ticks li{font-size:.95rem;padding:.5rem 0;border-top:1px solid var(--line)}
.ticks svg{display:none}
.price-feature{background:var(--emerald);color:var(--ivory);--text:var(--ivory);--text-2:var(--text-on-emerald);--line:var(--line-emerald);margin-top:-1px;border-left:0}
.price-feature:first-child{padding-left:clamp(1.4rem,2.6vw,5rem)}
.price-feature + .price{border-left:0}
.pkg-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:.7em;font:600 max(11px,.78rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--text);
  padding:.5em 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.pkg-cta svg{width:1em;height:1em}
.pkg-cta:hover{background-size:0 1px;background-position:100% 100%}
.price-feature .pkg-cta{padding:1.25em 1.9em;color:var(--ink);background:linear-gradient(105deg,var(--ivory) 40%,var(--sheen) 50%,var(--ivory) 60%) 120% 0/300% 100%;transition:background-position .9s var(--ease)}
.price-feature .pkg-cta:hover{background-position:-20% 0;background-size:300% 100%}
.pkg-doors{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.pkg-talk{margin:0;font-size:.82rem;color:var(--text-2);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
p.pkg-talk{text-decoration:none;max-width:30ch}
.pkg-talk:hover{color:var(--text)}
.price-why{font:italic 400 1.3rem/1.25 var(--serif);margin:0 0 1.2rem;color:var(--text)}
/* The Fitting: three taps above the ledger */
.fitting{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem clamp(1rem,2.6vw,5rem);margin-bottom:clamp(1.6rem,3vw,6rem)}
.fit-q{border:0;margin:0;padding:0;min-width:0}
.fit-q legend{padding:0;font:400 clamp(1.3rem,1.7vw,4rem)/1.15 var(--serif);margin-bottom:.8rem}
.fitting .chip{box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
.fitting .chip:hover{box-shadow:inset 0 0 0 1px var(--text)}
.fitting .chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.fit-foot{grid-column:1/-1;margin:0;min-height:1.6em}
.fit-all{background:none;border:0;padding:.3em 0;font:600 max(11px,.72rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text);cursor:pointer;border-bottom:1px solid currentColor}
html:not(.js) .fitting{display:none}
@media (max-width:860px){.fitting{grid-template-columns:1fr}}
.ledger-note{margin-top:1.8rem}
@media (max-width:960px){
  .ledger{grid-template-columns:1fr}
  .price-feature{order:-1}
  .price,.price:first-child{border-left:0;border-top:1px solid var(--line);padding-inline:0}
  .price-feature,.price-feature:first-child{padding-inline:var(--edge);margin-inline:calc(-1 * var(--edge));border-top:0}
  .ledger-head{grid-template-columns:1fr}.ledger-head .lede{justify-self:start}
}

/* ---- VI. Origin ---- */
.origin{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,8rem);align-items:center}
.origin-date{font:400 clamp(1.5rem,2vw,4rem)/1 var(--serif);color:var(--gold);margin:0 0 1.2rem;letter-spacing:.02em}
.origin h2{margin-bottom:2rem;max-width:12ch}
.origin-piece{max-width:min(100%,34rem);justify-self:center;width:100%}
.timeline{list-style:none;margin:clamp(3.5rem,6vw,12rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.tl{padding:1.4rem clamp(1rem,2.4vw,5rem) 0 0}
.tl + .tl{padding-left:clamp(1rem,2.4vw,5rem);border-left:1px solid var(--line)}
.tl-when{display:block;font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:.8rem}
.tl h3{margin-bottom:.4rem}
.tl p{color:var(--text-2);font-size:.95rem;margin:0}
.quote{margin:clamp(4rem,7vw,14rem) 0 0;text-align:center}
.quote p{font:italic 400 clamp(2.2rem,4.4vw,10rem)/1.08 var(--serif);letter-spacing:-.01em;max-width:22ch;margin:0 auto;color:var(--text)}
@media (max-width:860px){.origin{grid-template-columns:1fr}.timeline{grid-template-columns:1fr}.tl,.tl + .tl{padding:1.2rem 0;border-left:0;border-top:1px solid var(--line)}.timeline{border-top:0}}

/* ---- VII. The close: the route, the line, the film far back ---- */
.close{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding-block:clamp(7rem,14vw,28vw)}
.film{position:absolute;inset:0;z-index:-1;overflow:hidden}
.film-poster,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-video{opacity:0;transition:opacity 1.6s var(--ease)}
.film.film-on .film-video{opacity:1}
.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--ground) 0%,var(--veil) 34%,var(--veil) 66%,var(--ground) 100%)}
.close h2{max-width:18ch;margin:0 auto 2.2rem}
.close .promise{margin-bottom:2.8rem}
.close .route{justify-content:center;margin-top:clamp(3rem,5vw,10rem)}
.close-serve{color:var(--text-2);font-size:.9rem;margin:.9rem 0 0}
.film-toggle{position:absolute;right:var(--gutter);bottom:1.4rem;z-index:2;display:inline-flex;align-items:center;gap:.7em;padding:.5em 0;background:none;border:0;color:var(--text-2);
  font:500 max(11px,.66rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.film-toggle:hover{color:var(--text)}
.film-toggle[hidden]{display:none}
.ft-play{width:0;height:0;border-style:solid;border-width:.36em 0 .36em .6em;border-color:transparent transparent transparent currentColor}
.film-toggle.is-playing .ft-play{width:.6em;height:.72em;border:0;border-left:.18em solid currentColor;border-right:.18em solid currentColor}

/* the two home bases as a flight route */
.route{display:flex;align-items:center;gap:clamp(.6rem,1.2vw,2rem);margin:0;flex-wrap:nowrap}
.route-city{font:400 clamp(1.2rem,2vw,4rem)/1.2 var(--serif);color:var(--text);white-space:nowrap}
.route-line{position:relative;flex:0 1 clamp(4rem,14vw,28vw);min-width:3rem;height:1px;background:repeating-linear-gradient(90deg,var(--gold) 0 .4rem,transparent .4rem .8rem)}
.route-plane{position:absolute;top:50%;left:50%;width:1.7rem;height:1.7rem;margin:-.85rem 0 0 -.85rem;color:var(--gold)}
.route-plane svg{width:100%;height:100%;transform:rotate(45deg)}
.route-sm{gap:.5rem;margin-bottom:.8rem}
.route-sm .route-city{font:500 .84rem/1.3 var(--body);color:var(--text-2)}
.route-sm .route-line{flex:1 1 2.2rem;min-width:2rem}
.route-sm .route-plane{width:1.2rem;height:1.2rem;margin:-.6rem 0 0 -.6rem}

/* ---- Services: vertical chapters, with the numbers one click away ---- */
.svc-ch{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,8rem);align-items:end}
.svc-n{font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:.8em;margin:0 0 1.6rem}
.svc-n svg{width:1.2rem;height:1.2rem}
.svc-ch h2{font-size:max(2.6rem,5vw)}
.svc-ch .lede{margin-bottom:1.8rem}
@media (max-width:860px){.svc-ch{grid-template-columns:minmax(0,1fr)}}
.ranges{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ranges summary,.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ranges summary{font:600 max(11px,.78rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:1.2rem 0}
:is(.ranges,.qa) summary::-webkit-details-marker{display:none}
:is(.ranges,.qa) summary::after{content:"+";font:300 1.5rem/1 var(--body);color:var(--text-2);transition:transform .4s var(--ease)}
:is(.ranges,.qa)[open] summary::after{transform:rotate(45deg)}
.rates{list-style:none;margin:0;padding:0 0 .6rem}
.rates li{display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;padding:.8rem 0;border-top:1px solid var(--line);font-size:.92rem}
.rates b{font:400 1.2rem/1.1 var(--serif);font-variant-numeric:lining-nums;color:var(--text);text-align:right;white-space:nowrap}
@media (max-width:480px){.rates li{flex-direction:column;gap:.2rem}.rates b{text-align:left;white-space:normal}}
.ranges .note{margin:.8rem 0 1.2rem}
.rates-open .rates li:first-child{border-top:0}

/* ---- Approach ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pillar{padding:1.6rem clamp(1rem,2.4vw,5rem) 0 0}
.pillar + .pillar{padding-left:clamp(1rem,2.4vw,5rem);border-left:1px solid var(--line)}
.pillar-n{display:block;font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.14em;color:var(--text-2);margin-bottom:1.6rem}
.pillar h3{margin-bottom:.7rem}
.pillar p{color:var(--text-2);font-size:.95rem;margin:0}
@media (max-width:820px){.pillars{grid-template-columns:1fr;border-top:0}.pillar,.pillar + .pillar{padding:1.4rem 0;border-left:0;border-top:1px solid var(--line)}}
.sec-head{margin-bottom:clamp(2.6rem,4vw,8rem);max-width:62rem}
.sec-head .lede{margin-top:1.6rem}
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:minmax(4rem,18vw) 1fr;gap:1.4rem;padding:clamp(1.6rem,2.6vw,5rem) 0;border-top:1px solid var(--line);align-items:baseline}
.step-n{font:400 clamp(2.6rem,5vw,11rem)/.9 var(--serif);color:var(--text)}
.step h3{margin-bottom:.6rem}
.step p{color:var(--text-2);margin:0;max-width:54ch}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{font:400 clamp(1.4rem,1.9vw,4rem)/1.2 var(--serif);padding:1.3rem 0}
.qa p{color:var(--text-2);margin:0 0 1.5rem;max-width:58ch}
.measure{max-width:64rem}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2.4rem,5vw,10rem);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.field{display:block;margin:0 0 1.5rem}
.field span{display:block;font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:.5rem}
.field input,.field textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line-gold);border-radius:0;color:var(--text);font:400 1.25rem/1.4 var(--serif);padding:.5rem 0 .7rem}
.field textarea{min-height:7em;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--text)}
.hp{position:absolute;left:-9999px}
.form-note{color:var(--text-2);font-size:.82rem;margin:.9rem 0 0}
.inquiry{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1rem;margin:0 0 2rem;color:var(--text)}
.inquiry b{color:var(--gold);font-weight:500}
.contact-side h3{margin-bottom:.9rem}
.contact-side p{color:var(--text-2)}
.contact-side a{color:var(--text)}
.contact-block{padding-block:1.4rem;border-top:1px solid var(--line)}

/* ---- LodiTees ---- */
.tees-mark{font:400 clamp(4.6rem,14vw,34vw)/1 'Pinyon Script',var(--serif);color:var(--gold);margin:0 0 1.2rem;padding:.12em .3em .2em .08em;margin-left:-.08em;
  background:linear-gradient(100deg,var(--gold-lo),var(--gold-hi) 45%,var(--gold) 60%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rack{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3vw,6rem) clamp(1rem,2vw,4rem)}
.piece h3{margin:1.1rem 0 .3rem}
.piece p{color:var(--text-2);font-size:.92rem;margin:0 0 .6rem}
.piece-stage{position:relative;aspect-ratio:1/1.08;background:var(--ground-2);display:grid;place-items:center;padding:9%}
.piece-stage .tag{position:absolute;left:.9rem;top:.9rem}
.piece-client{max-width:30rem;justify-self:center;width:100%}
@media (max-width:900px){
  .rack{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 12px;scrollbar-width:none}
  .rack::-webkit-scrollbar{display:none}
  .piece{scroll-snap-align:center}
}
.split-c{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,8rem);align-items:center}
@media (max-width:860px){.split-c{grid-template-columns:1fr}}

/* ---- Garments: flat lays with cloth, folds and stitching. Drawn until the owner sends real pieces ---- */
.garment{position:relative;width:100%;aspect-ratio:300/340;filter:drop-shadow(0 1.2rem 1.4rem var(--dust-shadow))}
.garment svg{width:100%;height:100%;overflow:visible}
.g-cloth{fill:var(--fabric)}
.g-fold{fill:url(#g-fold)}
.g-sheen{fill:url(#g-sheen)}
.g-side{fill:url(#g-side)}
.g-in{fill:var(--fabric);filter:brightness(.62)}
.g-seam{fill:none;stroke:var(--seam);stroke-width:.9;stroke-linecap:round}
.g-stitch{fill:none;stroke:var(--seam);stroke-width:.7;stroke-dasharray:2.4 2;stroke-linecap:round}
.g-rib{fill:none;stroke:var(--seam);stroke-width:.6}
.g-str{fill:none;stroke:var(--seam);stroke-width:1.5;stroke-linecap:round}
.g-eye{fill:var(--seam)}
.g-handle{fill:none;stroke:var(--fabric);stroke-width:9;stroke-linecap:butt}
.g-handle-b{stroke:url(#g-side);stroke-width:9}
.fabric-onyx{--fabric:var(--onyx);--seam:var(--line)} .fabric-ivory{--fabric:var(--ivory);--seam:var(--line-paper)}
.fabric-emerald{--fabric:var(--emerald);--seam:var(--jade)} .fabric-jade{--fabric:var(--jade-wash);--seam:var(--jade)}
.ink-gold{--ink:var(--gold)} .ink-emerald{--ink:var(--emerald)} .ink-ivory{--ink:var(--ivory)} .ink-onyx{--ink:var(--onyx)}
.art{position:absolute;left:30%;right:30%;top:27%;height:26%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);text-align:center;gap:.25em;container-type:inline-size}
.g-hoodie .art{top:31%;left:36%;right:36%;height:18%}
.g-cap .art{top:30%;left:36%;right:36%;height:22%}
.g-tote .art{top:50%;left:30%;right:30%}
.art-mask{display:block;width:100%;aspect-ratio:1600/691;background:var(--ink);-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.art-type{font:600 11cqi/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase}
.art-script{font:400 62cqi/1 'Pinyon Script',var(--serif)}
.art-sm{font-size:28cqi}
.art-caps{font:500 7cqi/1 var(--body);letter-spacing:.28em;text-transform:uppercase}
.art-wide{font-size:9cqi;letter-spacing:.5em}
.art-logo{box-shadow:inset 0 0 0 1px var(--ink);padding:12% 10%;width:100%;font:600 8cqi/1 var(--body);letter-spacing:.2em;text-transform:uppercase}

/* line icons: one 1.5px line at every size */
svg[viewBox="0 0 24 24"]{stroke-width:calc(36 / var(--icon,24))}
.eyebrow svg,.svc-n svg{--icon:22} .btn svg,.link svg,.more svg,.ask-chips svg{--icon:14}

/* A finger is bigger than a line of text: on a touch screen the hit area grows past the words, and nothing moves. */
@media (pointer:coarse){
  :where(.ask-chips a,.link,.more,.mail,.pkg-talk,.pkg-cta,.slip-talk,.dm-share,.foot-still,.foot-links a,.foot-meta a,.st-nav a,.study-bar a,.fl-clear,.jw-turn,.hood button){position:relative}
  :is(.ask-chips a,.link,.more,.mail,a.pkg-talk,.pkg-cta,.slip-talk,.dm-share,.foot-still,.foot-links a,.foot-meta a,.st-nav a,.study-bar a,.film-toggle,.fl-clear,.jw-turn,.hood button)::after{content:"";position:absolute;inset:-.8rem -.35rem}
}

/* ==== 30-motion.css ==== */
/* Motion. Every selector starts at html.motion — added by the inline <head>
   script only when JS runs AND reduced motion is not requested. With no script
   or reduced motion, nothing below matches and the page is the server's HTML.

   Three verbs, one ease, one spring: Rise (display lines come up out of a slot),
   Strike (things land with weight), Pour (liquid-edged reveals). If motion teaches
   nothing, it stays still. Transform and opacity only. Nothing is ever blurred.
   Self-reveal floor: anything hidden here is hidden only under html.motion, and a
   bail animation shows it after a few seconds even if the observer never fires. */
@keyframes rv-bail{to{opacity:1;transform:none;stroke-dashoffset:0}}

html.motion .rv{opacity:0;transform:translateY(1.4rem);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  animation:rv-bail .01s linear 2.8s forwards}
html.motion .rv.in{opacity:1;transform:none}
html.motion :is(.ledger,.pillars,.rack,.timeline,.disciplines) > .rv:nth-child(2){transition-delay:.07s}
html.motion :is(.ledger,.pillars,.rack,.timeline,.disciplines) > .rv:nth-child(3){transition-delay:.14s}
html.motion :is(.ledger,.pillars,.rack,.timeline,.disciplines) > .rv:nth-child(4){transition-delay:.21s}
html.motion :is(.ledger,.pillars,.rack,.timeline,.disciplines) > .rv:nth-child(5){transition-delay:.28s}
html.motion :is(.ledger,.pillars,.rack,.timeline,.disciplines) > .rv:nth-child(6){transition-delay:.35s}

/* Rise. site.js wraps every word of a [data-focus] block as .w > .w-i and
   gives it --l, its line number. Headlines: each line slides up out of an
   invisible slot. Body copy: lines lift and fade in, quieter. */
@keyframes w-bail{to{transform:none;opacity:1}}
/* The slot is wider than the word: Cormorant's f hooks a long way past its box
   and its y dives below the line, and overflow:hidden must never cut them. */
html.motion [data-focus] .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.1em .2em .22em .08em;margin:-.1em -.2em -.22em -.08em}
html.motion [data-focus] .w-i{display:inline-block;transform:translateY(125%);
  transition:transform 1.15s var(--ease) calc(var(--l,0) * 90ms);animation:w-bail .01s linear 3.4s forwards}
html.motion [data-focus]:not(:is(h1,h2,.hero-line,.promise)) .w-i{transform:translateY(.55em);opacity:0;
  transition:transform 1s var(--ease) calc(var(--l,0) * 60ms + 80ms),opacity 1s var(--ease) calc(var(--l,0) * 60ms + 80ms)}
html.motion [data-focus].in .w-i{transform:none;opacity:1}

/* The promise: lines rise, then DREAM IT and BUILD IT catch one pass of light. */
@keyframes shimmer{to{background-position:-60% 0}}
html.motion .promise b .w-i{background:linear-gradient(100deg,var(--gold) 35%,var(--gold-hi) 50%,var(--gold) 65%) 160% 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:.02em .18em .14em .06em;margin:-.02em -.18em -.14em -.06em}
html.motion .promise.in b .w-i{animation:shimmer 1.6s var(--ease) 1.5s forwards}

/* Scroll-scrubbed quote: words fill with gold as it passes (site.js sets .lit). */
html.motion [data-scrub] .w{transition:color .6s var(--ease)}
html.motion [data-scrub] .w:not(.lit){color:var(--text-2)}
html.motion [data-scrub] .w.lit{color:var(--gold)}

/* The wordmark settles: a soft reveal along the pen, then it sits still. */
@property --wp{syntax:'<percentage>';inherits:false;initial-value:-20%}
@keyframes write{to{--wp:125%}}
html.motion .wm-metal{-webkit-mask:linear-gradient(100deg,var(--mask) var(--wp),transparent calc(var(--wp) + 16%));
  mask:linear-gradient(100deg,var(--mask) var(--wp),transparent calc(var(--wp) + 16%));
  animation:write 2.2s cubic-bezier(.5,.1,.3,1) .15s forwards}

/* ---- The live stages: one canvas, moved to whichever stage owns the screen (js/lazy/live.js) ---- */
.gl-stage{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-mark{position:relative}
/* While the shader may yet write the signature, the still lies under it as a faint impression; if the shader never comes the wipe above plays. */
@keyframes gl-bail{to{opacity:1}}
html.gl-wait .wm-metal,html.gl-writing .wm-metal{opacity:.1;-webkit-mask:none;mask:none;animation:none}
html.gl-wait .wm-metal{animation:gl-bail .01s linear 2.6s forwards}
/* Written: the still comes up underneath, which is what carries the shadow. */
html.gl-written .wm-metal{-webkit-mask:none;mask:none;animation:none;opacity:1;transition:opacity 1.2s var(--ease)}
.dream-stage.gl-on .window{background:none;-webkit-text-fill-color:transparent;color:transparent}
/* Desktop: the word holds still while the gold floods out of it, then the emerald arrives. */
html.gl-pin .dream{height:190vh;padding-block:0}
html.gl-pin .dream-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.gl-hud{position:fixed;left:8px;bottom:8px;z-index:90;font:500 11px/1.4 ui-monospace,monospace;color:var(--ivory);background:var(--ground);padding:6px 8px;white-space:pre}

/* Garments lean toward the pointer, like a piece held up to the light (fine pointers only). */
@media (hover:hover) and (pointer:fine){
  /* Flat on purpose: under preserve-3d a turning garment cuts through its stage's plane and half of it vanishes. */
  html.motion [data-tilt]{
    transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .7s var(--ease),opacity 1s var(--ease)}
  html.motion [data-tilt].tilting{transition:transform .12s linear,opacity 1s var(--ease)}
  html.motion .piece-stage .garment{transition:transform .7s var(--ease)}
}

/* The LodiTees signature writes in like ink, left to right. */
html.motion .tees-mark.rv{transform:none;opacity:1;
  -webkit-mask:linear-gradient(100deg,var(--mask) var(--wp),transparent calc(var(--wp) + 16%));
  mask:linear-gradient(100deg,var(--mask) var(--wp),transparent calc(var(--wp) + 16%))}
html.motion .tees-mark.rv.in{animation:write 2.2s cubic-bezier(.5,.1,.3,1) .1s forwards}

/* The plane flies its route when it comes into view. */
@keyframes fly{from{left:0;opacity:0}15%{opacity:1}to{left:50%}}
html.motion .rv.in .route-plane,html.motion .foot .route-plane{animation:fly 2.4s cubic-bezier(.3,.1,.2,1) .3s both}

/* The footer wordmark signs itself when it comes into view (bail: shown anyway after 6s). */
html.motion .foot-brand .brand-mark{-webkit-mask:linear-gradient(100deg,var(--mask) var(--wp),transparent calc(var(--wp) + 16%));
  mask:linear-gradient(100deg,var(--mask) var(--wp),transparent calc(var(--wp) + 16%));animation:write .01s linear 6s forwards}
html.motion .foot-brand.signed .brand-mark{animation:write 2s cubic-bezier(.5,.1,.3,1) forwards}

/* Page to page: a slow crossfade; the wordmark in the nav stays put. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.55s;animation-timing-function:var(--ease)}
}

/* Once the reveal observer is running (html.io), the self-reveal floor stands
   down: anything below the fold waits for the scroll that reveals it. */
html.motion.io .rv,html.motion.io [data-focus] .w-i,html.motion.io .foot-brand:not(.signed) .brand-mark{animation:none}

/* Lenis (fine pointers only) drives the scroll; the browser must not smooth it twice. */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
html.lenis.lenis-stopped{overflow:hidden}

/* ---- Build it: four beats (site.js toggles .b1 .b2 .b3 on .bstage): Concept, Structure, Design, Launch ---- */
@keyframes blink{50%{opacity:0}}
html.motion .bstage .bs-cursor{animation:blink 1.05s steps(1) infinite}
html.motion .bstage.b1 .bs-cursor{animation:none;opacity:0;transition:opacity .3s}
html.motion .bstage .bs-wire i{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease),opacity .6s var(--ease)}
html.motion .bstage.b1 .bs-wire i{transform:none}
html.motion .bstage.b1 .bs-wire i:nth-child(2){transition-delay:.08s} html.motion .bstage.b1 .bs-wire i:nth-child(3){transition-delay:.16s}
html.motion .bstage.b1 .bs-wire i:nth-child(4){transition-delay:.24s} html.motion .bstage.b1 .bs-wire i:nth-child(5){transition-delay:.3s}
html.motion .bstage.b1 .bs-wire i:nth-child(6){transition-delay:.36s}
html.motion .bstage.b2 .bs-wire i{opacity:0;transition-delay:0s}
html.motion .bstage .bs-design > *{opacity:0;transform:translateY(2.4cqi);transition:opacity .7s var(--ease),transform .9s var(--ease)}
html.motion .bstage .bs-design{background:transparent;transition:background-color .6s var(--ease)}
html.motion .bstage.b2 .bs-design{background:var(--m-bg)}
html.motion .bstage.b2 .bs-design > *{opacity:1;transform:none}
html.motion .bstage.b2 .bs-design > :nth-child(2){transition-delay:.06s}
html.motion .bstage.b2 .bs-design > :nth-child(3){transition-delay:.14s}
html.motion .bstage.b2 .bs-design > :nth-child(4){transition-delay:.22s}
html.motion .bstage.b2 .bs-design > :nth-child(5){transition-delay:.3s}
html.motion .bstage .bs-live span{opacity:0;transform:scale(.7) translateY(2cqi);transform-origin:100% 100%;
  transition:opacity .4s var(--ease),transform .7s var(--spring)}
html.motion .bstage.b3 .bs-live span{opacity:1;transform:none}
html.motion .bstage.b3 .bs-chat{transition-delay:.35s}

/* ---- LodiTees rack: garments turn as they pass (site.js sets --turn) ---- */
html.motion [data-rack] .garment{transform:perspective(900px) rotateY(var(--turn,0deg));transition:transform .25s linear}

/* ---- The nav's progress mark: where the Gold Thread went ---- */
html.motion .nav-progress{display:block}

/* Loops rest off screen (site.js sets .offstage). A state that must beat every animation shorthand above, hence !important. */
html.motion .offstage *,html.motion .offstage ::before{animation-play-state:paused!important}

/* ---- Between pages: the wordmark stays put, the page crossfades, and whatever you clicked grows into what it opens.
   Browsers without it just navigate. Same for anyone who's asked for less motion. ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav{view-transition-name:nav}
  ::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
}

/* ==== 35-concierge.css ==== */
/* The Concierge (working label): a sheet of ivory paper that slides over the page. Correspondence, not a
   widget. Emerald type on paper, never gold. Jade is the chat's accent. Hairlines and square edges, with no
   bubbles and no pills. Motion only under html.motion, so reduced motion gets the finished drawing at once. */
.cg-wrap{position:fixed;inset:0;z-index:90;display:none}
.cg-wrap.open{display:block}
html.cg-lock{overflow:hidden}
.cg-scrim{position:absolute;inset:0;background:var(--shade);opacity:0;touch-action:none}
.cg-wrap.in .cg-scrim{opacity:1}
.cg{--text:var(--ink);--text-2:var(--ink-2);--line:var(--line-paper);--line-gold:var(--line-paper);--gold:var(--ink);
  position:absolute;inset:clamp(10px,3vh,6vh) clamp(10px,3vw,10vw) 0;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-up);overscroll-behavior:contain}
html.motion .cg-scrim{transition:opacity .5s var(--ease)}
html.motion .cg{transform:translateY(103%);transition:transform .8s var(--ease)}
html.motion .cg-wrap.in .cg{transform:none}
.cg :focus-visible{outline-color:var(--jade)}
.cg [hidden]{display:none!important}
.cg-top{display:flex;align-items:center;gap:1.2rem;padding:.9rem clamp(1.1rem,2.4vw,3rem);border-bottom:1px solid var(--line-paper)}
.cg-label{font:500 max(11px,.72rem)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;margin:0}
.cg-demo{font:600 max(11px,.66rem)/1.2 var(--body);letter-spacing:.08em;color:var(--jade);border:1px solid var(--jade);padding:.5em .7em}
.cg-x{margin-left:auto;width:44px;height:44px;margin-block:-.6rem;margin-right:-.6rem;position:relative;background:none;border:0;color:var(--ink);cursor:pointer}
.cg-x::before,.cg-x::after{content:"";position:absolute;left:13px;right:13px;top:50%;height:1px;background:currentColor;transform:rotate(45deg)}
.cg-x::after{transform:rotate(-45deg)}
.cg-body{min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.cg-talk{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
.cg-body.solo{grid-template-columns:minmax(0,46rem);justify-content:center}
.cg-body.solo :is(.cg-foot,.cg-bp){display:none}
.cg-log{overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.4rem,3vw,4rem) clamp(1.1rem,2.4vw,3rem) 1.6rem;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:1.7rem}
.cg-m{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.cg-m.ai{font:400 clamp(1.42rem,1.62vw,3rem)/1.3 var(--serif);max-width:34em}
.cg-who{display:block;font:500 max(11px,.62rem)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.55rem}
.cg-m.you{font:400 .96rem/1.5 var(--body);color:var(--ink-2);margin-left:clamp(1rem,9%,6rem);padding-left:1rem;border-left:1px solid var(--jade)}
html.motion .cg-m.you,html.motion .cg-panel{animation:cg-rise .55s var(--ease) both}
@keyframes cg-rise{from{opacity:0;transform:translateY(.6rem)}}
.cg-status{min-height:1.2em;font:500 max(11px,.72rem)/1.2 var(--body);letter-spacing:.06em;color:var(--jade);margin:0}
.cg-foot{padding:.5rem clamp(1.1rem,2.4vw,3rem) max(.9rem,env(safe-area-inset-bottom));border-top:1px solid var(--line-paper)}
.cg-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.cg-chips:empty{display:none}
.cg-chip,.cg-slot{background:none;border:1px solid var(--jade);border-radius:var(--r-sm);color:var(--ink);cursor:pointer;min-height:44px;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .3s var(--spring)}
.cg-chip{font:500 max(11px,.78rem)/1.1 var(--body);letter-spacing:.04em;padding:.6em 1em}
@media (hover:hover){.cg-chip:hover,.cg-slot:hover{background:var(--jade);color:var(--paper)}}
.cg-chip:active,.cg-slot:active{transform:scale(.96);transition-duration:.08s}
.cg-compose{display:flex;align-items:flex-end;gap:1rem;margin:.4rem 0 .5rem}
.cg-in{flex:1;min-width:0;resize:none;background:none;border:0;border-bottom:1px solid var(--ink-2);border-radius:0;color:var(--ink);padding:.5rem 0;max-height:7.5em;
  font:400 max(16px,1.2rem)/1.35 var(--serif)}
.cg-in:focus{outline:none;border-bottom-color:var(--jade)}
.cg .btn{background:linear-gradient(105deg,var(--ink) 40%,var(--ink-2) 50%,var(--ink) 60%) 120% 0/300% 100%;color:var(--paper)}
.cg .btn:hover{background-position:-20% 0}
.cg .btn[disabled]{opacity:.45;cursor:default}
.cg-send{padding:1em 1.3em;flex:none}
.cg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.5rem}
.cg .link{border:0;background-color:transparent;background-position:0 calc(100% - .6rem);cursor:pointer;min-height:44px;font-size:max(11px,.7rem);padding:0;color:var(--ink)}
.cg .link:hover{background-position:100% calc(100% - .6rem)}
.cg-fine{font-size:max(11px,.74rem);line-height:1.4;color:var(--ink-2);margin:.2rem 0 0}
.cg-fine a{color:inherit}

/* the notice: nothing else on the sheet until it's been clicked past */
.cg-notice{grid-column:1/-1;align-self:center;justify-self:center;width:min(100%,44rem);padding:clamp(1.4rem,4vw,5rem) clamp(1.1rem,2.4vw,3rem);overflow-y:auto;max-height:100%}
.cg-notice h2{font-size:clamp(2.2rem,3.6vw,5rem);margin-bottom:1.2rem}
.cg-notice p{font:400 clamp(1.3rem,1.6vw,2.6rem)/1.32 var(--serif);margin:0 0 .9rem}
.cg-notice .actions{margin-top:2rem}

/* what appears in the conversation: open times, the review, the form */
.cg-panel{border-top:1px solid var(--jade);padding-top:1.1rem;max-width:40em}
.cg-panel h3{font-size:clamp(1.5rem,1.9vw,3rem);margin-bottom:.5rem}
.cg-panel h3:focus{outline:none}
.cg-panel>p{margin:0 0 .9rem;color:var(--ink-2);font-size:.92rem}
.cg-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem;margin-bottom:1rem}
.cg-slot{font:400 1.14rem/1.2 var(--serif);text-align:left;padding:.6em .8em}
.cg-panel form .btn+.link,.cg-panel form .link+.link{margin-left:1.4rem}
.cg-panel .field{margin-bottom:1rem}
.cg-panel .field input,.cg-panel .field textarea{font-size:max(16px,1.1rem);border-bottom-color:var(--ink-2)}
.cg-panel .field textarea{min-height:3.2em}
.cg-panel .field input:focus,.cg-panel .field textarea:focus{border-bottom-color:var(--jade)}
.cg-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0 1.4rem}
.cg-modes{border:0;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.cg-modes legend{padding:0;font:500 max(11px,.68rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem}
.cg-modes label{display:inline-flex;align-items:center;gap:.5em;min-height:44px;cursor:pointer;font:400 1.1rem/1 var(--serif)}
.cg-modes input{accent-color:var(--jade);width:1.1em;height:1.1em;margin:0}
.cg-exact{margin:0 0 1.1rem;border-top:1px solid var(--line-paper);border-bottom:1px solid var(--line-paper)}
.cg-exact summary{cursor:pointer;font:600 max(11px,.7rem)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:1rem 0}
.cg-exact pre{white-space:pre-wrap;overflow-wrap:anywhere;font:400 max(11px,.78rem)/1.5 var(--body);color:var(--ink-2);margin:0 0 1rem;max-height:18rem;overflow-y:auto}
.cg-err{color:var(--ink);font-weight:600;font-size:.88rem;margin:0 0 .8rem;padding-left:.7rem;border-left:2px solid var(--jade)}
.cg-err:empty{display:none}
.cg-panel .cg-done{font:400 clamp(1.42rem,1.62vw,3rem)/1.3 var(--serif);color:var(--ink);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the blueprint. Every line is real text with a real list behind it; the drawing is only how it arrives. */
.cg-bp{min-height:0;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--line-paper);padding:clamp(1.4rem,3vw,4rem) clamp(1.1rem,2.4vw,3rem);
  --grid:color-mix(in srgb,var(--line-paper) 42%,transparent);
  background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 2rem,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/2rem 100%}
.cg-bp h2{font:500 max(11px,.72rem)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .9rem}
.cg-bp>*+*{margin-top:2.2rem}
.cg-empty{font:400 1.3rem/1.3 var(--serif);color:var(--ink-2);max-width:20em;margin:0}
.cg-title{background:var(--paper);padding:.8rem 1rem;border:1px solid var(--ink);margin:0}
.cg-title b{display:block;font:400 clamp(1.5rem,1.9vw,3rem)/1.1 var(--serif)}
.cg-title span{display:block;font-size:.84rem;line-height:1.4;color:var(--ink-2);margin-top:.35rem}
.cg-title:empty{display:none}
.cg-flow,.cg-tree,.cg-notes{list-style:none;margin:0;padding:0}
.cg-flow{display:grid;gap:1.25rem}
.cg-node{position:relative;padding:.62rem .85rem;font:400 1.14rem/1.25 var(--serif);background-color:var(--paper);background-repeat:no-repeat;
  background-image:linear-gradient(var(--jade),var(--jade)),linear-gradient(var(--jade),var(--jade)),linear-gradient(var(--jade),var(--jade)),linear-gradient(var(--jade),var(--jade));
  background-size:100% 1px,1px 100%,100% 1px,1px 100%;background-position:0 0,100% 0,100% 100%,0 100%}
.cg-node.hand{background-image:repeating-linear-gradient(90deg,var(--jade) 0 5px,transparent 5px 10px),repeating-linear-gradient(0deg,var(--jade) 0 5px,transparent 5px 10px),
  repeating-linear-gradient(90deg,var(--jade) 0 5px,transparent 5px 10px),repeating-linear-gradient(0deg,var(--jade) 0 5px,transparent 5px 10px)}
.cg-node+.cg-node::before{content:"";position:absolute;left:1.4rem;top:-1.25rem;width:1px;height:1.25rem;background:var(--jade);transform-origin:50% 0}
.cg-tag{display:block;font:500 max(11px,.6rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin-top:.35rem}
html.motion .cg-node.draw{animation:cg-pen .85s var(--ease) both}
html.motion .cg-node.draw::before{animation:cg-drop .3s var(--ease) both}
html.motion .cg-node.draw>*,html.motion .cg-page.draw>*{animation:cg-rise .5s var(--ease) .35s both}
@keyframes cg-pen{0%{background-size:0 1px,1px 0,0 1px,1px 0}30%{background-size:100% 1px,1px 0,0 1px,1px 0}55%{background-size:100% 1px,1px 100%,0 1px,1px 0}80%{background-size:100% 1px,1px 100%,100% 1px,1px 0}100%{background-size:100% 1px,1px 100%,100% 1px,1px 100%}}
@keyframes cg-drop{from{transform:scaleY(0)}}
.cg-page{position:relative;padding:.34rem 0 .34rem calc(var(--d,0)*1.15rem + .9rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .7rem}
.cg-page::before{content:"";position:absolute;left:calc(var(--d,0)*1.15rem);top:50%;width:.65rem;height:1px;background:var(--jade);transform-origin:0 50%}
html.motion .cg-page.draw::before{animation:cg-wipe .35s var(--ease) both}
@keyframes cg-wipe{from{transform:scaleX(0)}}
.cg-page b{font:400 1.08rem/1.2 var(--serif)}
.cg-page code{font:400 max(11px,.72rem)/1.2 var(--body);color:var(--ink-2)}
.cg-page.missing b{color:var(--ink-2);font-style:italic}
.cg-page em{font:500 max(11px,.6rem)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--jade);font-style:normal}
.cg-notes li{font-size:.9rem;line-height:1.45;padding:.3rem 0;border-bottom:1px solid var(--grid)}
.cg-sub{font-size:.8rem;color:var(--ink-2);margin:.7rem 0 0}

@media (max-width:860px){
  .cg{inset:0}
  .cg-body{display:flex;flex-direction:column}
  .cg-talk{order:2;flex:1;min-height:0}
  .cg-bp{order:1;flex:none;max-height:27dvh;border-left:0;border-bottom:1px solid var(--line-paper);padding:.9rem 1.1rem}
  .cg-bp>*+*{margin-top:1.1rem}
  .cg-body.typing .cg-bp{display:none}
  .cg-body:has(.cg-panel form) :is(.cg-bp,.cg-compose,.cg-chips,.cg-fine){display:none}
  .cg-m.ai{font-size:1.36rem}
  .cg-send{padding:.95em 1em}
  .cg-slots{grid-template-columns:1fr}
}

/* the privacy page */
.privacy-part{border-top:1px solid var(--line);padding-block:1.7rem}
.privacy-h{font-size:clamp(1.7rem,2.3vw,3.6rem);line-height:1.1;margin-bottom:.8rem}
.privacy-part p{max-width:60ch;color:var(--text-2)}
.privacy-part a{color:var(--text)}
.cg-reserve{display:inline-block;align-self:flex-start;margin:.4rem 0;padding:1em 1.3em;background:var(--emerald);color:var(--ivory);font:600 max(11px,.78rem)/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}