/* ============================================================================
   BAKERY — four menus, four rooms.
   Every number in this file was measured off a reference filmstrip and written
   into design-spec.md first. Nothing here is a default: no bare `ease`, no
   `0.3s`, no shadow, no radius (one 50px circle excepted), no bold weight,
   no second display face, no gradient, no chromatic accent.
   Hierarchy is size, case and position only — ONE INK PER GROUND.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens - */
:root{
  /* faces — measured by advance-width ÷ cap-height, not by feel */
  --ff-display:"Instrument Serif","Noto Serif SC","Times New Roman",serif;
  --ff-mono:"Roboto Mono","Noto Sans SC",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale — ratio 66 ÷ 14.5 = 4.55:1 (the reference's deliberate extreme) */
  --fs-hero:clamp(38px,4.58vw,66px);
  --fs-h1:clamp(32px,3.89vw,56px);
  --fs-h2:clamp(30px,3.54vw,51px);
  --fs-st:clamp(22px,2.50vw,36px);
  --fs-body:14.5px;
  --fs-s:13px;
  --fs-xs:12px;
  --lh-hero:1.07; --lh-h1:.95; --lh-h2:1.12; --lh-st:1.11;
  --lh-body:1.5; --lh-list:1.48; --lh-fnav:1.85;
  --tr-display:-.02em; --tr-italic:-.01em; --tr-mono:.02em; --tr-wide:.12em;

  /* grounds — byte-exact from the reference; inks deepened to reach AA */
  --paper:#F6F4F3;  --paper-ink:#0A0A0A;
  --crust:#9B7C6D;  --crust-ink:#231915;
  --glaze:#D8E1EB;  --glaze-ink:#4E6074;
  --sage:#C0CABA;   --sage-ink:#3C4F33;
  --invert:#0A0A0A; --invert-ink:#F6F4F3;
  --accent:#9B7C6D;                      /* point marks only, ~1.5% of surface */

  --ground:var(--paper);
  --ink:var(--paper-ink);
  --rule:color-mix(in srgb,var(--ink) 18%,transparent);
  --rule-strong:var(--ink);

  /* space ramp */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:40px; --s8:56px; --s9:64px; --s10:96px; --s11:124px; --s12:160px;

  /* measured constants promoted to tokens */
  --edge:64px;
  --container:1312px;
  --nav-edge:48px;
  --nav-h:76px;
  --pad-sec-top:124px;
  --pad-sec-bot:56px;
  --pad-sec-top-l:160px;
  --gap-head-img:56px;
  --gap-img-copy:48px;
  --gap-head-reel:64px;
  --gap-reel-arrows:32px;
  --pad-footer-top:96px;
  --ul-offset:10px;
  --stt-inset:16px;
  --stt-size:50px;

  /* the three vertical anchors, as viewport fractions */
  --track-label:20vw;
  --track-text:36.9vw;
  --track-right:55.6vw;

  --punct:230px;        /* the fixed unit of measure — 230px at every viewport */
  --card-w:400px; --card-h:500px; --card-gap:16px;
  --duo-lift:274px;
  --row-pitch:34px;

  /* motion — every transition routes through a named pair */
  --ease-sig:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.87,0,.13,1);
  --ease-draw:cubic-bezier(.2,1,.3,1);
  --dur-intro:900ms;
  --dur-reveal:1000ms;
  --dur-mask:900ms;
  --dur-rise:700ms;
  --dur-row:600ms;
  --dur-zoom:600ms;
  --dur-draw:420ms;
  --dur-clear:300ms;
  --dur-swap:160ms;
  --dur-micro:120ms;
  --dur-mark:240ms;
  --stagger:90ms;
  --stagger-rows:40ms;
  --rise-y:26px;
  --clip-scale:1.12;
  --mask-travel:112%;
}

/* ---------------------------------------------------------------- base --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--paper-ink);
  font-family:var(--ff-mono);font-size:var(--fs-body);font-weight:400;
  line-height:var(--lh-body);letter-spacing:var(--tr-mono);
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-synthesis:none;
}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,dd,blockquote,table{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:400}
ul,ol{list-style:none}
b,strong,th{font-weight:400}
img{display:block;max-width:100%;height:auto;border-radius:0}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;border-radius:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:var(--ground)}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--nav-edge);top:-100px;z-index:200;padding:10px 16px;
  background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-ink);
  font-size:var(--fs-s);letter-spacing:var(--tr-wide);
  transition:top var(--dur-clear) var(--ease-sig)}
.skip:focus{top:14px}

/* ------------------------------------------------------------ type roles - */
.d,.d-hero,.d-h1,.d-h2,.d-st{
  font-family:var(--ff-display);font-weight:400;letter-spacing:var(--tr-display);
  text-transform:uppercase;font-synthesis:none;
}
.d-hero{font-size:var(--fs-hero);line-height:var(--lh-hero)}
.d-h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.d-h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.d-st{font-size:var(--fs-st);line-height:var(--lh-st)}
.d-i{font-style:italic;letter-spacing:var(--tr-italic)}
.m{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-mono)}
.m-s{font-size:var(--fs-s);line-height:var(--lh-list);letter-spacing:var(--tr-mono)}
.m-xs{font-size:var(--fs-xs);line-height:1.4;letter-spacing:var(--tr-wide)}
.m-w{font-size:var(--fs-s);line-height:1;letter-spacing:var(--tr-wide)}
.num{font-variant-numeric:tabular-nums}

/* CJK: no mono in the stack, so the reading voice widens instead of tightening */
html[data-lang="zh"] body{letter-spacing:.04em;line-height:1.75}
html[data-lang="zh"] .m,html[data-lang="zh"] .m-s{line-height:1.75}
html[data-lang="zh"] .d,html[data-lang="zh"] .d-hero,html[data-lang="zh"] .d-h1,
html[data-lang="zh"] .d-h2,html[data-lang="zh"] .d-st{letter-spacing:0}

/* ----------------------------------------------------------- the rooms --- */
.room{background:var(--ground);color:var(--ink);position:relative}
[data-g="paper"]{--ground:var(--paper);--ink:var(--paper-ink)}
[data-g="crust"]{--ground:var(--crust);--ink:var(--crust-ink)}
[data-g="glaze"]{--ground:var(--glaze);--ink:var(--glaze-ink)}
[data-g="sage"] {--ground:var(--sage); --ink:var(--sage-ink)}
[data-g="invert"]{--ground:var(--invert);--ink:var(--invert-ink)}
/* GROUND-SWAP SEAM: a hard background-color boundary. No fade, no wipe, no
   scrub. This is the signature and the hardest thing in the system to leave
   alone — do not add a transition to .room's background. */

.band{padding-top:var(--pad-sec-top);padding-bottom:var(--pad-sec-bot)}
.band--long{padding-top:var(--pad-sec-top-l)}
.wrap{width:min(var(--container),100% - var(--edge)*2);margin-inline:auto}
.bleed{width:100%;padding-inline:var(--edge)}

/* -------------------------------------------------------------- links ---- */
.ul,.udl{position:relative;display:inline-block;padding-bottom:var(--ul-offset)}
.ul::after,.udl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(var(--s,0));transform-origin:var(--o,left);
  transition:transform var(--dur-clear) var(--ease-draw)}
.ul::after{--s:1}
.udl.is-draw::after{--s:1;transition-duration:var(--dur-draw)}
.udl:focus-visible::after{--s:1}
.ul.udl.is-draw::after{animation:redraw var(--dur-draw) var(--ease-draw)}
@keyframes redraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* outlined cell — the one hover the system allows: an invert, no lift */
.cell{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--rule-strong);background:transparent;color:inherit;
  transition:background-color var(--dur-clear) var(--ease-sig),color var(--dur-clear) var(--ease-sig)}
.cell:hover,.cell:focus-visible{background:var(--ink);color:var(--ground)}

.dot{display:inline-block;width:7px;height:7px;background:var(--accent);
  vertical-align:middle;margin-right:8px}
.dot--off{background:transparent;border:1px solid currentColor}

/* ------------------------------------------------------------ chrome ----- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;padding:0 54px 0 var(--nav-edge);
  color:var(--paper-ink);pointer-events:none}
.nav>*{pointer-events:auto}
.nav__a{font-size:var(--fs-s);letter-spacing:var(--tr-mono);line-height:1}
.nav__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:36px;line-height:1;letter-spacing:var(--tr-italic);text-transform:uppercase}
.nav__r{margin-left:auto;display:flex;align-items:center;gap:32px}
.nav__menu{font-size:var(--fs-s);letter-spacing:var(--tr-wide);line-height:1}
.nav__lang{display:flex;gap:18px}
.nav__lang button{font-size:var(--fs-s);letter-spacing:var(--tr-mono);line-height:1;
  position:relative;padding-bottom:var(--ul-offset)}
.nav__lang button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-clear) var(--ease-draw)}
.nav__lang button.is-on::after{transform:scaleX(1)}
@media (max-width:1100px){.nav__lang{display:none}}

/* MENU overlay — the reference's own paradigm, carrying our five pages */
.ovl{position:fixed;inset:0;z-index:80;background:var(--paper);color:var(--paper-ink);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path var(--dur-clear) var(--ease-io),visibility 0s linear var(--dur-clear)}
.ovl.is-open{clip-path:inset(0);visibility:visible;
  transition:clip-path var(--dur-draw) var(--ease-io),visibility 0s}
.ovl__in{height:100%;padding:var(--nav-h) var(--nav-edge) var(--s7);
  display:grid;grid-template-columns:1fr 264px 264px;align-content:center;gap:var(--s7)}
.ovl__x{position:absolute;top:0;right:54px;height:var(--nav-h);display:flex;align-items:center;
  font-size:var(--fs-s);letter-spacing:var(--tr-wide)}
.ovl__nav{display:flex;flex-direction:column;gap:2px}
.ovl__nav a{font-family:var(--ff-display);font-size:var(--fs-h2);line-height:1.12;
  letter-spacing:var(--tr-display);text-transform:uppercase;padding-bottom:6px}
.ovl__col{display:flex;flex-direction:column;gap:var(--s3);font-size:var(--fs-s);
  line-height:var(--lh-fnav)}
.ovl__k{letter-spacing:var(--tr-wide);margin-bottom:var(--s3)}
.ovl [data-lang-switch]{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.ovl [data-lang-switch] button{font-size:var(--fs-s);letter-spacing:var(--tr-mono)}
.ovl [data-lang-switch] button.is-on{position:relative;padding-bottom:var(--ul-offset)}
.ovl [data-lang-switch] button.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:currentColor}

/* scroll-to-top — the one 50px circle in the whole system. Bottom-RIGHT;
   bottom-left stays clear for the shell's concept switcher. */
.stt{position:fixed;right:var(--stt-inset);bottom:var(--stt-inset);z-index:55;
  width:var(--stt-size);height:var(--stt-size);border-radius:50%;
  border:1px solid var(--paper-ink);color:var(--paper-ink);background:transparent;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:background-color var(--dur-clear) var(--ease-sig),color var(--dur-clear) var(--ease-sig),
             opacity var(--dur-clear) var(--ease-sig)}
.stt.is-on{opacity:1;pointer-events:auto}
.stt:hover,.stt:focus-visible{background:var(--paper-ink);color:var(--paper)}
.stt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1}

/* ============================================================= motion ==== */
html.js [data-rise]:not(.rev):not(.mask){opacity:0;transform:translateY(var(--rise-y));
  transition:opacity var(--dur-rise) var(--ease-sig),transform var(--dur-rise) var(--ease-sig)}
html.js [data-rise].is-in:not(.rev):not(.mask){opacity:1;transform:none}

/* line mask reveal — the inner <i> travels, the mask box never clips the
   [data-rise] element itself (Chrome folds a self-clip into intersectionRatio) */
.mask .ln{display:block;overflow:hidden}
.mask .ln>i{display:block;font-style:inherit;transform:translateY(var(--mask-travel));
  transition:transform var(--dur-mask) var(--ease-sig)}
html.js .mask.is-in .ln>i{transform:none}
.mask .ln:nth-child(2)>i{transition-delay:var(--stagger)}
.mask .ln:nth-child(3)>i{transition-delay:calc(var(--stagger)*2)}
.mask .ln:nth-child(4)>i{transition-delay:calc(var(--stagger)*3)}
.mask .ln:nth-child(5)>i{transition-delay:calc(var(--stagger)*4)}

/* clip reveal — clip-path lives on the INNER wrapper, never on [data-rise] */
.rev>.clip{display:block;overflow:hidden;clip-path:inset(100% 0 0 0);
  transition:clip-path var(--dur-reveal) var(--ease-sig)}
.rev>.clip>img{transform:scale(var(--clip-scale));transform-origin:center;
  transition:transform var(--dur-reveal) var(--ease-sig)}
html.js .rev.is-in>.clip{clip-path:inset(0)}
html.js .rev.is-in>.clip>img{transform:none}

html:not(.js) .mask .ln>i,html:not(.js) .rev>.clip>img{transform:none}
html:not(.js) .rev>.clip{clip-path:none}

@media (prefers-reduced-motion:reduce){
  html.js [data-rise],html.js [data-rise].is-in{opacity:1!important;transform:none!important;transition:none!important}
  .mask .ln>i{transform:none!important;transition:none!important}
  .rev>.clip{clip-path:none!important;transition:none!important}
  .rev>.clip>img{transform:none!important;transition:none!important}
  .intro{display:none!important}
}

/* intro — measured beat by beat, index only, once per session */
.intro{position:fixed;inset:0;z-index:120;background:var(--paper);pointer-events:none}
.intro__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--ff-display);font-style:italic;font-size:88px;line-height:1;
  letter-spacing:var(--tr-italic);text-transform:uppercase;color:var(--paper-ink);
  transition:opacity var(--dur-mark) var(--ease-sig)}
html.intro-2 .intro__mark{opacity:0}
html.intro-done .intro{display:none}
html.intro-on .hero__clip{clip-path:inset(34.7% 33.8%)}
html.intro-on .hero__clip>img{transform:scale(1.18)}
.hero__clip{display:block;position:absolute;inset:0;overflow:hidden;clip-path:inset(0);
  transition:clip-path var(--dur-intro) var(--ease-sig)}
.hero__clip>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform var(--dur-intro) var(--ease-sig)}

/* ================================================================ HERO === */
.hero{min-height:100svh;min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;color:var(--paper-ink);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--paper)}
.hero__type{position:relative;z-index:1;width:min(1048px,100% - var(--edge)*2);
  margin-inline:auto;display:grid;grid-template-columns:248px minmax(0,470px) 248px;
  column-gap:41px;row-gap:0;align-items:center}
.hero__h{grid-column:2;grid-row:1;text-align:center;max-width:470px}
.hero__side{grid-row:1;font-size:var(--fs-s);line-height:var(--lh-list);align-self:center}
.hero__side--l{grid-column:1;text-align:left}
.hero__side--r{grid-column:3;text-align:right}
.hero__cta{grid-column:2;grid-row:2;justify-self:center;margin-top:52px;
  font-size:var(--fs-s);letter-spacing:var(--tr-mono)}

/* ================================================== B · statement room === */
.b{text-align:center}
.b__h{max-width:470px;margin-inline:auto}
.b__fig{width:var(--punct);margin:var(--gap-head-img) auto 0}
.b__fig .clip{aspect-ratio:230/320}
.b__fig img{width:100%;height:100%;object-fit:cover}
.b__copy{max-width:612px;margin:var(--gap-img-copy) auto 0}
.b__copy p+p{margin-top:var(--s6)}
.b--noimg .b__copy{margin-top:var(--gap-head-img)}

/* ================================================= C · two-track band ==== */
.tk{width:100%;padding-left:var(--track-label);padding-right:var(--edge)}
.c{display:grid;grid-template-columns:var(--track-label) 198px 45px minmax(0,460px) 1fr;
  align-items:start;width:100%;padding-right:var(--edge)}
.c__sub{grid-column:2;text-align:right}
.c__body{grid-column:4}
.c__cta{margin-top:var(--s7);font-size:var(--fs-s);letter-spacing:var(--tr-mono)}

/* ===================================================== D · offset duo ==== */
.d-duo{display:grid;grid-template-columns:minmax(0,41vw) 1fr;
  column-gap:calc(var(--track-right) - var(--edge) - 41vw);
  padding-top:var(--duo-lift);align-items:start}
.d-duo__l figure{width:100%}
.d-duo__l .clip{aspect-ratio:590/620}
.d-duo__r{transform:translateY(calc(var(--duo-lift) * -1));max-width:348px}
.d-duo__r .clip{aspect-ratio:348/492}
.d-duo img{width:100%;height:100%;object-fit:cover}
.d-duo__copy{margin-top:43px;max-width:52ch;font-size:var(--fs-s);line-height:var(--lh-list)}
.d-duo__cta{margin-top:44px;font-size:var(--fs-s);letter-spacing:var(--tr-mono)}
.d-duo__list{margin-top:var(--s7);font-size:var(--fs-s);line-height:var(--lh-list)}
.d-duo__list li{display:flex;justify-content:space-between;gap:var(--s4)}

/* ========================================================== E · reel ===== */
.reel__head{display:grid;width:100%;padding-right:var(--edge);align-items:baseline;
  grid-template-columns:var(--track-label) calc(var(--track-text) - var(--track-label)) 1fr}
.reel__k{grid-column:2;font-size:var(--fs-s);letter-spacing:var(--tr-wide);padding-right:var(--s5)}
.reel__h{grid-column:3}
.reel__track{margin-top:var(--gap-head-reel);display:flex;gap:var(--card-gap);
  padding-left:var(--track-label);scroll-padding-left:var(--track-label);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.reel__track::-webkit-scrollbar{display:none}
.card{flex:0 0 var(--card-w);scroll-snap-align:start}
.card .clip{aspect-ratio:400/500;display:block;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover}
/* the reveal owns transform until it has finished; the hover zoom must outrank it */
html.js .card.is-in:hover>.clip>img,
html.js .card.is-in:focus-visible>.clip>img{transform:scale(1.04);
  transition:transform var(--dur-zoom) var(--ease-sig)}
.card__cap{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s3);
  font-size:var(--fs-s);line-height:var(--lh-list)}
.reel__arrows{margin-top:var(--gap-reel-arrows);margin-left:var(--track-label);
  display:flex;gap:var(--s6)}
.reel__arrows button{font-size:20px;line-height:1;width:32px}
.reel__arrows button[disabled]{opacity:.35;cursor:default;transition:opacity var(--dur-micro) linear}

/* ====================================================== menu machinery === */
.idx{position:sticky;top:var(--nav-h);z-index:50;height:44px;scroll-padding-left:var(--edge);
  background:var(--ground);color:var(--ink);
  display:flex;align-items:center;gap:var(--s7);padding:0 var(--edge);
  overflow-x:auto;scrollbar-width:none}
.idx::-webkit-scrollbar{display:none}
.idx a,.idx button{font-size:var(--fs-s);letter-spacing:var(--tr-wide);line-height:1;
  white-space:nowrap;position:relative;padding-bottom:var(--ul-offset);flex:0 0 auto}
.idx a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-clear) var(--ease-draw)}
.idx a[aria-current="true"]::after{transform:scaleX(1)}
.idx a[aria-current="true"] .idx__n{color:var(--accent)}
.idx__view{margin-left:auto}

.room__head{display:grid;width:100%;padding-right:var(--edge);align-items:baseline;
  grid-template-columns:var(--track-label) calc(var(--track-text) - var(--track-label)) 1fr}
.room__k{grid-column:2;font-size:var(--fs-s);letter-spacing:var(--tr-wide);padding-right:var(--s5)}
.room__h{grid-column:3}
.catblk{margin-top:var(--gap-head-reel)}
.catblk+.catblk{margin-top:0}
.cat__rule{border:0;border-top:1px solid var(--rule);margin:var(--s5) var(--edge) var(--s5) var(--track-label)}
.cat__name{display:grid;width:100%;padding-right:var(--edge);
  grid-template-columns:var(--track-label) calc(var(--track-text) - var(--track-label)) 1fr auto;
  font-size:var(--fs-s);letter-spacing:var(--tr-wide);margin-bottom:var(--s5)}
.cat__name span:first-child{grid-column:3}
.cat__name span:last-child{grid-column:4;font-size:var(--fs-s);letter-spacing:var(--tr-mono)}

.mrow{display:grid;width:100%;padding-right:var(--edge);text-align:left;
  grid-template-columns:var(--track-label) calc(var(--track-text) - var(--track-label)) 1fr auto;
  align-items:baseline;min-height:var(--row-pitch);
  font-size:var(--fs-s);line-height:var(--lh-list)}
.mrow__i{grid-column:2;font-size:var(--fs-xs);letter-spacing:var(--tr-wide)}
.mrow__n{grid-column:3;display:inline-block;transition:transform var(--dur-draw) var(--ease-sig)}
.mrow__p{grid-column:4;font-variant-numeric:tabular-nums;letter-spacing:var(--tr-mono)}
.mrow:hover .mrow__n,.mrow:focus-visible .mrow__n{transform:translateX(6px)}

.punct{width:var(--punct);margin:var(--s6) 0 var(--s6) var(--track-text);position:relative}
.punct .clip{aspect-ratio:230/320;position:relative}
.punct img,.punct__b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center}
.punct__b{opacity:0;transition:opacity var(--dur-swap) linear}
.punct.is-swap .punct__b{opacity:1}
body[data-view="list"] .punct{display:none}
body[data-view="list"]{--row-pitch:26px}

/* ========================================================== offers ======= */
.promo{display:block;width:100%;margin-top:var(--s4)}
.promo--live{background:var(--invert);color:var(--invert-ink);min-height:88px;
  display:grid;grid-template-columns:var(--track-label) 1fr auto;align-items:center;
  column-gap:var(--s5);padding:var(--s5) var(--s6)}
.promo--live .promo__code{font-family:var(--ff-display);font-size:var(--fs-st);
  line-height:var(--lh-st);letter-spacing:var(--tr-display);text-transform:uppercase}
.promo--past{border:1px solid var(--rule-strong);min-height:88px;
  display:grid;grid-template-columns:var(--track-label) 1fr auto;align-items:center;
  column-gap:var(--s5);padding:var(--s5) var(--s6)}
.promo--past .promo__code{font-family:var(--ff-display);font-size:var(--fs-st);
  line-height:var(--lh-st);letter-spacing:var(--tr-display);text-transform:uppercase;
  position:relative;display:inline-block;justify-self:start}
.promo--past .promo__code::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;
  height:1px;background:currentColor}
.promo__terms{font-size:var(--fs-s);line-height:var(--lh-list)}
.promo__state{font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-align:right;white-space:nowrap}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s9)}
.svc h3{font-family:var(--ff-display);font-size:var(--fs-st);line-height:var(--lh-st);
  letter-spacing:var(--tr-display);text-transform:uppercase;margin-bottom:var(--s4)}
.svc p{font-size:var(--fs-s);line-height:var(--lh-list);max-width:38ch}

/* ========================================================== visit ======== */
.hours{font-size:var(--fs-s);line-height:var(--lh-list)}
.hours th{text-align:left;font-weight:400;padding:9px 0;border-bottom:1px solid var(--rule)}
.hours td{text-align:right;padding:9px 0;border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours tr[data-today] th,.hours tr[data-today] td{position:relative}
.hours tr[data-today] th::before{content:"";position:absolute;left:-16px;top:50%;
  width:7px;height:7px;margin-top:-3px;background:var(--accent)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s9);margin-top:var(--s10)}
.facts b{display:block;font-family:var(--ff-display);font-size:var(--fs-st);
  line-height:var(--lh-st);letter-spacing:var(--tr-display);margin-top:var(--s3)}
.facts span{font-size:var(--fs-s);letter-spacing:var(--tr-wide)}
.facts p{font-size:var(--fs-s);line-height:var(--lh-list);margin-top:var(--s2);max-width:26ch}
.plan{position:relative;border:1px solid var(--rule-strong);margin-top:var(--s8)}
.plan svg{display:block;width:100%;height:auto}
.sibs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s9);margin-top:var(--gap-head-reel)}
.sib{display:block}
.sib .clip{aspect-ratio:4/5;display:block;overflow:hidden}
.sib img{width:100%;height:100%;object-fit:cover}
html.js .sib.is-in:hover>.clip>img,
html.js .sib.is-in:focus-visible>.clip>img{transform:scale(1.04);
  transition:transform var(--dur-zoom) var(--ease-sig)}
.sib__cap{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s3);
  font-size:var(--fs-s)}

/* ========================================================== forms ======== */
.forms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s9)}
.fcol h2{font-family:var(--ff-display);font-size:var(--fs-st);line-height:var(--lh-st);
  letter-spacing:var(--tr-display);text-transform:uppercase}
.fcol>p{font-size:var(--fs-s);line-height:var(--lh-list);margin-top:var(--s3);max-width:34ch}
.net-form{margin-top:var(--s7)}
.fld{margin-bottom:var(--s5)}
.fld--two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:end}
.fld label{display:block;font-size:var(--fs-xs);letter-spacing:var(--tr-wide);margin-bottom:var(--s2)}
.fld input,.fld textarea{width:100%;padding:9px 0;border-bottom:1px solid var(--rule-strong);
  font-size:var(--fs-s);letter-spacing:var(--tr-mono);text-transform:uppercase;
  transition:border-color var(--dur-micro) linear}
.fld input::placeholder,.fld textarea::placeholder{color:currentColor;opacity:.55;text-transform:uppercase}
.fld textarea{resize:vertical;min-height:72px}
.fld input:focus,.fld textarea:focus{outline:0;border-bottom-width:1px}
.fld input:focus-visible,.fld textarea:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.submit{margin-top:var(--s5);height:44px;padding:0 var(--s6);
  font-size:var(--fs-s);letter-spacing:var(--tr-wide)}
/* a sent form inverts its button rather than dimming it — this system has
   no second tint, so 'done' is shown by filling, not by fading */
.net-form.sent .submit{background:var(--ink);color:var(--ground);cursor:default}
.echo{margin-top:var(--s5);font-size:var(--fs-s)}
.echo caption{text-align:left;font-size:var(--fs-xs);letter-spacing:var(--tr-wide);
  padding-bottom:var(--s3)}
.echo th{text-align:left;font-weight:400;padding:7px var(--s4) 7px 0;
  border-bottom:1px solid var(--rule);white-space:nowrap}
.echo td{text-align:right;padding:7px 0;border-bottom:1px solid var(--rule)}
[data-form-ok]{margin-top:var(--s7)}
[data-form-ok] p{font-size:var(--fs-s);letter-spacing:var(--tr-wide)}

/* ========================================================== footer ======= */
.foot{border-top:1px solid var(--rule-strong);padding-top:var(--pad-footer-top);
  padding-bottom:var(--s7);background:var(--paper);color:var(--paper-ink);position:relative}
.foot__row{position:relative;padding-left:var(--edge);min-height:189px}
.foot__blurb{max-width:52ch;font-size:var(--fs-s);line-height:var(--lh-list)}
/* a deliberate, measured break of the 1312 container: the three right-hand
   columns are flush to the VIEWPORT right edge */
.foot__cols{position:absolute;right:0;top:0;display:grid;grid-template-columns:repeat(3,264px)}
.foot__cols h2,.foot__k{font-size:var(--fs-s);letter-spacing:var(--tr-wide);margin-bottom:var(--s3)}
.foot__cols li,.foot__cols p,.foot__cols a{font-size:var(--fs-s);line-height:var(--lh-fnav)}
.foot__mark{padding-left:var(--edge);margin-top:var(--s7);
  font-family:var(--ff-display);font-style:italic;font-size:96px;line-height:1.1;
  letter-spacing:var(--tr-italic);text-transform:uppercase}
.legal{display:grid;grid-template-columns:repeat(4,1fr);margin:var(--s7) var(--edge) 0}
.legal .cell{height:29px;font-size:var(--fs-s);letter-spacing:var(--tr-wide);line-height:1;
  margin-left:-1px}
.legal .cell:first-child{margin-left:0}

/* ====================================================== page furniture === */
.phead{padding-top:calc(var(--nav-h) + var(--pad-sec-top-l));padding-bottom:var(--pad-sec-bot)}
.phead__s{margin-top:var(--s8);max-width:64ch;font-size:var(--fs-s);line-height:var(--lh-list)}
.lede{max-width:64ch}

/* ============================================================== 390px ==== */
/* A different design, not a reflow. */
@media (max-width:900px){
  .ovl__in{grid-template-columns:1fr;align-content:start;padding-top:calc(var(--nav-h) + 24px);gap:var(--s7)}
  .svc,.forms,.facts,.sibs{grid-template-columns:1fr}
  .foot__cols{position:static;grid-template-columns:repeat(2,1fr);margin-top:var(--s7)}
  .foot__row{min-height:0}
}
@media (max-width:760px){
  :root{
    --edge:20px;--nav-edge:16px;--nav-h:64px;
    --pad-sec-top:72px;--pad-sec-bot:40px;--pad-sec-top-l:88px;
    --gap-head-img:40px;--gap-img-copy:32px;--gap-head-reel:40px;--gap-reel-arrows:24px;
    --pad-footer-top:56px;--stt-inset:14px;--stt-size:44px;
    --fs-hero:38px;--fs-h1:32px;--fs-h2:30px;--fs-st:22px;--fs-body:14px;
    --lh-hero:1.05;--lh-h1:1.05;--lh-h2:1.05;--lh-st:1.05;
    --punct:62vw;--card-w:270px;--card-gap:12px;--row-pitch:48px;
    --track-label:0px;--duo-lift:0px;
    --rise-y:18px;--clip-scale:1.08;--mask-travel:105%;
    --dur-reveal:720ms;--dur-mask:720ms;--stagger:70ms;--stagger-rows:40ms;
  }

  .nav{padding-right:16px}
  .nav__a{display:none}
  .nav__mark{left:var(--nav-edge);transform:translateY(-50%);font-size:26px}
  .intro__mark{font-size:48px}

  /* hero — the type sits on paper, the photo becomes a band beneath it, and the
     paper/photo edge is one more hard seam. A 100vh portrait crop of a landscape
     product shot shows 26% of its width; this shows 47% and stays composed. */
  .hero{display:grid;grid-template-rows:1fr auto;align-items:start;
    background:var(--paper);color:var(--paper-ink)}
  .hero__media{position:relative;inset:auto;grid-row:2;width:100%;height:46svh;min-height:300px}
  /* the two side paragraphs MERGE into one 32ch block (merged, not dropped) */
  .hero__type{grid-row:1;width:calc(100% - var(--edge)*2);
    grid-template-columns:1fr;column-gap:0;align-items:start;
    padding-top:calc(var(--nav-h) + var(--s7));padding-bottom:var(--s7)}
  .hero__h{grid-column:1;grid-row:1;text-align:left;max-width:none}
  .hero__side{grid-column:1;text-align:left!important;max-width:32ch;font-size:var(--fs-s)}
  .hero__side--l{grid-row:2;margin-top:var(--s6)}
  .hero__side--r{grid-row:3;margin-top:0}
  .hero__cta{grid-column:1;grid-row:4;justify-self:start;margin-top:var(--s7)}

  .b__h,.b__copy{max-width:none}
  .b__copy{max-width:41ch;margin-inline:auto}

  /* C — the italic subject moves ABOVE the roman sentence, left at the edge */
  .c{grid-template-columns:1fr}
  .c__sub{grid-column:1;text-align:left;margin-bottom:16px}
  .c__body{grid-column:1}

  /* D — the vertical offset becomes a horizontal one */
  .d-duo{grid-template-columns:1fr;padding-top:0;row-gap:var(--s7)}
  .d-duo__l figure{width:min(350px,100%)}
  .d-duo__r{transform:none;max-width:240px;margin-left:auto;margin-top:0}
  .d-duo__copy,.d-duo__list{max-width:41ch}

  .reel__head{grid-template-columns:1fr;row-gap:var(--s3)}
  .reel__track{padding-left:var(--edge);scroll-padding-left:var(--edge)}
  .reel__arrows{margin-left:var(--edge)}

  .idx{gap:var(--s6);padding:0 var(--edge);scroll-snap-type:x mandatory}
  .idx a,.idx button{scroll-snap-align:start}
  .idx__view{margin-left:var(--s6)}
  .tk,.c,.room__head,.cat__name,.mrow,.reel__head,.vgrid{padding-left:var(--edge)}
  .room__head,.cat__name{grid-template-columns:1fr auto;row-gap:var(--s2)}
  .room__k,.room__h,.cat__name span:first-child{grid-column:1;padding-right:0}
  .cat__name span:last-child{grid-column:2}
  .mrow{grid-template-columns:1fr auto;column-gap:var(--s4);padding-top:11px;padding-bottom:11px}
  .mrow__i{display:none}
  .mrow__n{grid-column:1}
  .mrow__p{grid-column:2}
  .punct{margin-left:var(--edge);width:var(--punct)}
  .cat__rule{margin-inline:var(--edge)}
  .reel__h,.reel__k{grid-column:1}

  .promo--live,.promo--past{grid-template-columns:1fr;row-gap:var(--s3);padding:var(--s5)}
  .promo__state{text-align:left}
  .legal{grid-template-columns:repeat(2,1fr);margin-inline:var(--edge)}
  .legal .cell{height:40px;margin-left:-1px;margin-top:-1px}
  .legal .cell:nth-child(odd){margin-left:0}
  .foot__mark{font-size:52px;padding-left:var(--edge)}
  .foot__cols{grid-template-columns:1fr;gap:var(--s7);padding-right:var(--edge)}
  .fld--two{grid-template-columns:1fr}
}

/* ------------------------------------------------- composition utilities - */
.mt-head{margin-top:var(--gap-head-reel)}
.mt-copy{margin-top:var(--gap-img-copy)}
.ovl__k--gap{margin-top:var(--s5)}
.b__fig--host .b__fig{margin-top:var(--gap-head-img)}
.d-duo__k{margin-top:var(--s7);font-size:var(--fs-s);letter-spacing:var(--tr-wide)}
.d-duo__k+.d-duo__list{margin-top:var(--s4)}
.v__badge{margin-top:var(--s7)}
.v__links{margin-top:var(--s5);display:flex;gap:var(--s7);flex-wrap:wrap;
  font-size:var(--fs-s);letter-spacing:var(--tr-mono)}
.vgrid{display:grid;width:100%;padding-right:var(--edge);column-gap:var(--s9);
  margin-top:var(--gap-head-reel);
  grid-template-columns:var(--track-text) minmax(0,460px) minmax(0,348px)}
.vgrid>.hours{grid-column:2}
.vplan{grid-column:3}
.vplan__cap{margin-top:var(--s4);max-width:34ch}
.plan{border:1px solid var(--rule-strong);color:var(--ink)}
.plan svg{display:block;width:100%;height:auto}
.facts{margin-top:var(--pad-sec-top)}
@media (max-width:760px){
  .vgrid{grid-template-columns:1fr;row-gap:var(--s8)}
  .vgrid>.hours,.vplan{grid-column:1}
  .c__sub,.c__body{grid-column:1}
  .facts{margin-top:var(--s10)}
  .v__links{gap:var(--s6)}
}

/* =============================================== content-SEO additions === */
/* Three elements the content pass needed, each assembled out of parts that
   were already here: the category line sits on the row text track and uses the
   row's own size; the breadcrumb uses the kicker's micro type, in the kicker's
   column; the FAQ is the offers page's .svc grid with nothing changed but what
   is inside it. Nothing below restyles anything that was already on the page. */
.cat__intro{margin:0 0 var(--s5) var(--track-text);padding-right:var(--edge);
  max-width:52ch;font-size:var(--fs-s);line-height:var(--lh-list)}
.cat__intro .num{white-space:nowrap}

.crumb{grid-column:2/-1;margin-top:var(--s5);padding-right:var(--edge);
  font-size:var(--fs-xs);letter-spacing:var(--tr-wide);line-height:var(--lh-list)}
.crumb ol{display:block}
.crumb li{display:inline}
.crumb li+li::before{content:"/";margin:0 var(--s3)}
.crumb a{padding-bottom:3px}

/* a link inside a running answer stays inline — the drawn underline is an
   inline-block and would open up the line box it sits in */
.faq__i a{border-bottom:1px solid currentColor}
.faq__i a:hover,.faq__i a:focus-visible{background:var(--ink);color:var(--ground)}

/* the X-ray sets position:relative on everything it outlines; the sticky menu
   index is the one element on the site that cannot afford it */
html.xray-on .idx[data-seo]{position:sticky}

@media (max-width:760px){
  .cat__intro{margin-left:0;padding-left:var(--edge);max-width:none}
  .crumb{grid-column:1;padding-right:0;margin-top:var(--s4)}
}