/* ============================================================================
   PIZZA PLACE — the measured system.
   THE PIZZA BOX IS THE PAGE: hard-ruled full-bleed panels of white, near-black
   and warning-sign yellow, stacked edge to edge with 1px rules, everything
   shouting in a 24-degree shear — and the deal is the loudest thing printed on it.

   Every number in this file comes from site/c/pizza/design-spec.md, which was
   measured off the assigned reference's frames + video (pixel probes, ink
   bounding boxes, column projections, frame-differencing, shear fitting).
   Nothing here is "a vibe":
     display shear 24.0deg   type ratio 22.8:1   body 16/21   accent budget 8%
     band heights 37/80/87.5vh/85/96/102vh/89/720/360/120   gutter 24 fixed
     ticker 54px/s linear    wipe 500ms/half easeInOutQuint  stagger 250ms
     hover = a hard ground inversion in 120ms. No shadow, no scale, no lift.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root{
  /* faces — Anton is sheared 24deg because the measured display has no true
     italic bowls, only slanted ellipses. Three weights ship, total. */
  --ff-display:"Anton","Arial Black","Helvetica Neue",sans-serif;
  --ff-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-cjk:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  /* six grounds, seven tokens, no eighth colour */
  --paper:#FFFFFF;
  --ink:#000000;
  --rule:#000000;
  --soot:#0D0D0D;
  --violet:#09000E;
  --yellow:#FFDB30;
  --plate:#F6F6F6;
  --ghost:#3A333E;
  --legal:#8A8590;
  --spot-copy:#E1E1E1;

  /* space ramp, 4px base */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px;  --s9:48px; --s10:64px; --s11:80px; --s12:120px;
  --gutter:24px;

  /* type scale — only TWO display sizes exist: monumental and band */
  --fs-mono:clamp(76px,25.3vw,380px);     /* hero / ghost wordmark  cap 265 */
  --fs-out:clamp(64px,21.3vw,307px);      /* outline word           cap 223 */
  --fs-band:clamp(30px,4.3vw,62px);       /* band display           cap 45  */
  --fs-title:24px;                         /* block title / row label / card */
  --fs-body:16px;
  --fs-ui:15px;
  --fs-micro:12px;
  --fs-legal:11px;
  --lh-body:1.3125;                        /* 16/21 measured */

  /* band heights */
  --h-ann:37px; --h-nav:80px; --h-hero:87.5vh; --h-val:85px; --h-tkr:96px;
  --h-spot:102vh; --h-head:89px; --h-info:360px; --h-row:120px;
  --h-row-sm:64px; --h-row-xs:48px; --h-split:720px; --h-page:52vh;

  /* measures — three caps, never one global 66ch */
  --m-row:470px;   /* offer-row copy   ~64ch */
  --m-addr:210px;  /* info-band address ~28ch */
  --m-foot:245px;  /* footer copy      ~30ch */

  /* easings */
  --ease-cut:cubic-bezier(.83,0,.17,1);   /* easeInOutQuint — block wipe, every inversion */
  --ease-sig:cubic-bezier(.16,1,.3,1);    /* easeOutExpo   — flood, draw, nudge */
  --ease-lin:linear;                      /* the tickers: measured constant velocity */

  /* durations */
  --dur-flip:120ms;
  --dur-nudge:200ms;
  --dur-wipe:500ms;
  --dur-fill:500ms;
  --dur-drain:340ms;
  --dur-draw:420ms;
  --dur-clear:300ms;
  --stag-row:250ms;
  --stag-card:120ms;
  --ticker-speed:54;                      /* px per second */

  /* block-wipe params (infi-motion:block-wipe-reveal) */
  --brv-dur:var(--dur-wipe);
  --brv-stagger:var(--stag-row);
  --brv-cover:0;
  --brv-ease:var(--ease-cut);
  --brv-color:var(--yellow);

  /* cells */
  --cell:411px;
  --plate-ratio:37/38;
}
html[data-lang="es"]{--lh-body:1.375}
html[data-lang="zh"]{--lh-body:1.625}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-weight:400;font-size:var(--fs-body);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
html[data-lang="zh"] body{font-family:var(--ff-cjk);letter-spacing:.01em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
  padding:14px 20px;font-size:var(--fs-ui)}
.skip:focus{left:0}

/* ------------------------------------------------------------ TYPE ATOMS -- */
/* every display string on the site — the shear is the identity */
.dsp{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  line-height:.86;letter-spacing:.005em;display:inline-block;
  transform:skewX(-23deg) scaleX(1.05);transform-origin:left bottom;
  white-space:nowrap;margin-right:.32em}      /* .32em = the shear's own overhang */
.dsp--word{text-transform:none;letter-spacing:-.02em}
.dsp--wrap{white-space:normal}
html[data-lang="zh"] .dsp{font-family:var(--ff-cjk);font-weight:900;
  transform:skewX(-8deg);letter-spacing:.02em;line-height:1.02;margin-right:.1em}
/* the wordmark is a proper noun — Latin script, full 24deg shear, every language */
html[data-lang="zh"] .nav__mark,html[data-lang="zh"] .hero__mark .dsp,html[data-lang="zh"] .ghost .dsp,
html[data-lang="zh"] .sheet__top .dsp{font-family:var(--ff-display);font-weight:400;
  transform:skewX(-23deg) scaleX(1.05);letter-spacing:-.02em;line-height:.86}

.t24{font-size:var(--fs-title);font-weight:700;line-height:1.15;letter-spacing:0}
.body{font-size:var(--fs-body);line-height:var(--lh-body)}
.ui{font-size:var(--fs-ui);line-height:1}
.micro{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;line-height:1}
.legal{font-size:var(--fs-legal);letter-spacing:.04em;line-height:1.4}
.measure{max-width:var(--m-row)}

/* the one decal: display type on a PAPER (or yellow) ground carries a 3px light
   rim up-left, so it reads as printed onto the box. Never on a dark ground. */
.hd__t,.railhead__t,.catband .dsp,.split__l .dsp,.okhead .dsp{
  text-shadow:-3px -3px 0 rgba(9,0,14,.22)}

/* inline text link — infi-motion:underline-draw-hover, 2px, entry-side origin */
.udl{position:relative;display:inline-block}
.udl::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:var(--o,left) center;
  transition:transform var(--dur-clear) var(--ease-sig)}
.udl:hover::after,.udl:focus-visible::after{transform:scaleX(1)}
.udl:hover::after{transition-duration:var(--dur-draw)}

/* ---------------------------------------------------------------- BANDS --- */
/* There is NO section padding in this system. It is a stack of fixed-height
   full-bleed bands separated by 1px rules. That is the structural identity. */
.band{position:relative;overflow:hidden;background:var(--paper);color:var(--ink)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);transform:scaleX(1);transform-origin:left center;
  transition:transform var(--dur-draw) var(--ease-cut)}
.band--norule::after{display:none}
/* the ONE reveal outside the offer rows: the band's own rule draws itself.
   Content never hides and never translates — travel is 0px sitewide. */
html.js .band[data-rise]:not(.is-in)::after{transform:scaleX(0)}
.band__in{position:relative;height:100%;padding:0 var(--gutter)}

.on-dark{color:var(--paper)}
.g-soot{background:var(--soot);color:var(--paper)}
.g-violet{background:var(--violet);color:var(--paper)}
.g-yellow{background:var(--yellow);color:var(--ink)}
.g-paper{background:var(--paper);color:var(--ink)}
.g-soot::after,.g-violet::after{background:var(--rule)}

/* ----------------------------------------------------------------- PILLS -- */
/* Radius: 999px on every interactive pill, 0 on everything else. Shadow: none.
   Hover is a hard ground inversion in 120ms. Nothing lifts, nothing scales. */
.pill{--pf:var(--ink);--pb:transparent;--pfh:var(--paper);--pbh:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:34px;padding:0 20px;border:1px solid var(--pf);border-radius:999px;
  background:var(--pb);color:var(--pf);font-size:var(--fs-ui);line-height:1;
  white-space:nowrap;cursor:pointer;
  transition:background var(--dur-flip) var(--ease-cut),
             color var(--dur-flip) var(--ease-cut),
             border-color var(--dur-flip) var(--ease-cut)}
.pill:hover,.pill:focus-visible,.pill.is-on{background:var(--pbh);color:var(--pfh);border-color:var(--pbh)}
.on-dark .pill,.g-soot .pill,.g-violet .pill{--pf:var(--paper);--pfh:var(--ink);--pbh:var(--paper)}
.pill--fill{--pf:var(--paper);--pb:var(--ink);--pfh:var(--ink);--pbh:var(--paper);border-color:var(--pb)}
.pill--fill:hover,.pill--fill:focus-visible{border-color:var(--ink)}
.on-dark .pill--fill,.g-soot .pill--fill,.g-violet .pill--fill{
  --pf:var(--ink);--pb:var(--paper);--pfh:var(--paper);--pbh:var(--ink);border-color:var(--paper)}
.on-dark .pill--fill:hover,.g-soot .pill--fill:hover,.g-violet .pill--fill:hover{border-color:var(--paper)}
.g-yellow .pill{--pf:var(--ink);--pfh:var(--yellow);--pbh:var(--ink)}
.pill--cta{height:44px;padding:0 24px}
.pill--act{height:40px;padding:0 16px}
.pill--circle{height:44px;width:44px;padding:0}
.pill--arrow{height:40px;width:70px;padding:0}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 12px;border-radius:999px;
  border:1px solid currentColor;font-size:var(--fs-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;line-height:1}
.badge--on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-soot .badge--on,.g-violet .badge--on{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* the arrow glyph nudges +6px on X — the only travel anywhere in the system */
.arw{display:block;width:26px;height:10px;overflow:visible;
  transition:transform var(--dur-nudge) var(--ease-sig)}
.arw path{stroke:currentColor;stroke-width:1.5;fill:none}
.arw--l{transform:rotate(180deg)}
.pill:hover .arw--l,.pill:focus-visible .arw--l{transform:rotate(180deg) translateX(6px)}
a:hover .arw,button:hover .arw,a:focus-visible .arw{transform:translateX(6px)}

/* ------------------------------------------------------------- ANNOUNCE --- */
.ann{height:var(--h-ann);display:flex;align-items:center;justify-content:center;
  background:var(--yellow);color:var(--ink);position:relative;overflow:hidden}
.ann::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--rule)}
.ann__in>span{display:inline-flex;align-items:center;gap:12px}
.ann__in{display:flex;align-items:center;gap:12px;font-size:var(--fs-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;line-height:1;white-space:nowrap}
.dia{display:inline-block;width:8px;height:8px;background:currentColor;transform:rotate(45deg);
  flex:0 0 auto}

/* ------------------------------------------------------------------ NAV --- */
.nav{height:var(--h-nav);display:flex;align-items:center;gap:var(--s6);
  padding:0 var(--gutter);position:relative;z-index:20;background:var(--paper)}
.nav::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--rule)}
.nav--over{position:absolute;top:0;left:0;right:0;background:transparent;color:var(--paper)}
.nav--over::after{display:none}
.nav__mark{font-size:26px;flex:0 0 auto;margin-right:var(--s2)}
.nav__links{display:flex;align-items:center;gap:11px}
.nav__end{margin-left:auto;display:flex;align-items:center;gap:11px}
.nav__lang{display:flex;gap:11px}
.nav__burger{display:none}

/* mobile sheet — the derived mobile nav (declared in notes) */
.sheet{display:none;position:fixed;left:0;right:0;top:0;bottom:0;z-index:60;
  background:var(--violet);color:var(--paper);padding:0;overflow:auto}
.sheet.is-open{display:block}
.sheet__top{height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);border-bottom:1px solid var(--paper)}
.sheet__row{display:flex;align-items:center;justify-content:space-between;
  height:68px;padding:0 var(--gutter);border-bottom:1px solid rgba(255,255,255,.28);
  font-size:20px;font-weight:700}
.sheet__langs{display:flex;gap:11px;padding:var(--s6) var(--gutter)}
.sheet__cta{padding:0 var(--gutter) 40px}
.sheet__cta .pill{width:100%;height:48px}

/* ----------------------------------------------------------------- HERO --- */
.hero{height:var(--h-hero);min-height:520px;background:var(--soot);color:var(--paper)}
.hero__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 56%;
  /* the photo is the GROUND, the 216px wordmark is the subject. We do not have
     the reference's commissioned dark-key photography, so the account's own
     crust shot is printed down to a dark key instead of scrimmed with a
     gradient the system does not own. No blur, no shadow, no overlay. */
  filter:brightness(.42) saturate(1.1) contrast(1.1)}
.hero__mark{position:absolute;left:var(--gutter);bottom:110px;right:var(--gutter);
  font-size:var(--fs-mono);color:var(--paper);line-height:.82}
.hero__w{display:inline-block}

/* ------------------------------------------------------------ VALUE BAR --- */
/* 92% empty by measurement: 3 column stops with ~280px and ~310px of bare paper */
.val{height:var(--h-val);display:grid;align-items:center;
  grid-template-columns:604px minmax(0,var(--m-row)) 1fr;gap:0}
.val__c{justify-self:end;display:flex;gap:15px}

/* --------------------------------------------------------------- TICKER --- */
/* infi-motion:marquee — the ONLY resident animation on the site.
   54px/s, linear, measured over two windows (54.4 and 54.1 px/s). */
.tkr{height:var(--h-tkr);display:flex;align-items:center;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.tkr__copy{display:flex;align-items:center;flex:0 0 auto}
.tkr__track{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap;
  animation:tkrL 40s var(--ease-lin) infinite;will-change:transform}
.tkr--rev .tkr__track{animation-name:tkrR}
@keyframes tkrL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tkrR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tkr.is-paused .tkr__track{animation-play-state:paused}
.tkr__i{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  font-size:var(--fs-band);line-height:.86;letter-spacing:.005em;
  display:inline-block;transform:skewX(-23deg) scaleX(1.05);padding:0 .18em;margin-right:.3em}
html[data-lang="zh"] .tkr__i{font-family:var(--ff-cjk);font-weight:900;transform:skewX(-8deg)}
.tkr__d{display:inline-block;width:10px;height:10px;transform:rotate(45deg);
  margin:0 26px;flex:0 0 auto}
.tkr--a{background:var(--violet);color:var(--yellow)}
.tkr--a .tkr__d{background:var(--yellow)}
.tkr--b{background:var(--paper);color:var(--ink)}
.tkr--b .tkr__d{background:var(--ink)}

/* ------------------------------------------------------------ SPOTLIGHT --- */
.spot{height:var(--h-spot);min-height:620px;background:var(--soot);color:var(--paper)}
.spot__word{position:absolute;left:var(--gutter);top:11%;
  font-size:var(--fs-out);color:transparent}
.spot__ph{position:absolute;left:50%;top:30%;width:min(430px,44vw);transform:translateX(-50%);
  z-index:2}
.spot__ph img{width:100%;height:auto}
.spot__copy{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  width:min(560px,86vw);text-align:center;z-index:3;display:grid;justify-items:center;gap:var(--s4)}
.spot__copy p{color:var(--spot-copy);max-width:var(--m-row)}
.spot__acts{display:flex;gap:15px;margin-top:var(--s1)}

/* the outline-type primitive — infi-motion:outline-fill-hover.
   3px yellow stroke, transparent fill, floods solid from the pointer-entry side. */
.ofh{position:relative;display:inline-block;color:transparent}
@supports (-webkit-text-stroke:3px black){
  .ofh{-webkit-text-fill-color:transparent;-webkit-text-stroke:var(--ofh-w,3px) var(--yellow)}
}
.ofh::before{content:attr(data-text);position:absolute;left:0;top:0;
  -webkit-text-stroke:0;-webkit-text-fill-color:var(--yellow);color:var(--yellow);
  pointer-events:none;white-space:inherit;
  clip-path:var(--clip-rest,inset(0 100% 0 0));
  transition:clip-path var(--dur-drain) var(--ease-sig)}
.ofh:hover::before,.ofh:focus-visible::before,.ofh:focus-within::before{
  clip-path:inset(0);transition-duration:var(--dur-fill)}
@media (hover:none){.ofh::before{clip-path:inset(0)}}

/* ------------------------------------------------------ CARD RAIL + CELL -- */
.railhead{height:var(--h-head);display:flex;align-items:center;gap:var(--s6)}
.railhead__t{font-size:var(--fs-band)}
.railhead__c{margin-left:auto;display:flex;align-items:center;gap:13px}
.rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.cell{flex:0 0 var(--cell);width:var(--cell);min-width:0;scroll-snap-align:start;
  border-right:1px solid var(--rule);padding:var(--s5);background:var(--paper)}
.plate{position:relative;width:100%;aspect-ratio:var(--plate-ratio);background:var(--plate);
  overflow:hidden;transition:background var(--dur-flip) var(--ease-cut)}
.plate img{width:100%;height:100%;object-fit:cover}
.cell__t{margin-top:var(--s8);min-height:2.3em}
.cell__buy{margin-top:var(--s8);width:100%;justify-content:space-between;gap:8px;overflow:hidden}
.cell__buy span{overflow:hidden;text-overflow:ellipsis}
.cell:hover .plate{background:var(--yellow)}
.cell:hover .cell__buy{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* the 5 deliberate no-photo items: the outline-type primitive scaled down.
   Never a gap, never a broken image — the strongest plate on the page. */
.plate--none{background:var(--soot);display:flex;align-items:center;justify-content:center;
  padding:var(--s6)}
.plate--none .ofh{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  line-height:.86;letter-spacing:.005em;white-space:normal;text-align:center;
  transform:skewX(-23deg) scaleX(1.05);--ofh-w:3px}
html[data-lang="zh"] .plate--none .ofh{font-family:var(--ff-cjk);font-weight:900;transform:skewX(-8deg)}
.plate--none .ofh{margin-right:0;padding-right:.3em;width:100%}
.plate--none .ofh::before{width:100%;padding-right:.3em}
.plate--none .nolab{position:absolute;left:var(--s5);bottom:var(--s4);color:var(--legal)}
.cell:hover .plate--none{background:var(--soot)}
.cell:hover .plate--none .ofh::before{clip-path:inset(0)}

/* ---------------------------------------------------------- SPLIT PANEL --- */
/* the system's ONLY 50/50, because it is two half-viewports, not a content split */
.split{display:grid;grid-template-columns:1fr 1fr;height:var(--h-split)}
.split__l{background:var(--yellow);color:var(--ink);padding:var(--s11);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s6);overflow:hidden}
.split__l .dsp{font-size:var(--fs-band)}
.split__l p{max-width:var(--m-row)}
.split__r{position:relative;overflow:hidden;background:var(--plate)}
.split__r img{width:100%;height:100%;object-fit:cover}
.split__price{font-size:var(--fs-title);font-weight:700}

/* ------------------------------------------------------------ INFO BAND --- */
.info{min-height:var(--h-info);display:grid;align-items:center;
  grid-template-columns:344px 500px 1fr;padding:var(--s8) var(--s8);gap:0}
.info__a{display:grid;gap:var(--s3);align-content:center}
.info__a p{max-width:var(--m-addr)}
.info__b{display:grid;gap:var(--s3);align-content:center}
.info__b p{max-width:var(--m-addr)}
.info__ph{justify-self:end;width:516px;height:311px;overflow:hidden;background:var(--plate)}
.info__ph img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------- HEADER BAND / HEAD -- */
.hd{height:var(--h-head);display:flex;align-items:center;gap:var(--s6)}
.hd__t{font-size:var(--fs-band)}
/* the one place solid yellow display type is allowed on a dark ground —
   the same treatment ticker A carries */
.hd--accent .hd__t{color:var(--yellow)}
.hd__c{margin-left:auto;display:flex;align-items:center;gap:13px}

/* ---------------------------------------------------------- PAGE HEAD ----- */
.phead{height:var(--h-page);min-height:360px;background:var(--soot);color:var(--paper)}
.phead__t{position:absolute;left:var(--gutter);bottom:72px;
  font-size:var(--fs-out)}
.phead__k{position:absolute;left:var(--gutter);top:40px;color:var(--legal)}

/* --------------------------------------------------------- THE OFFER ROW -- */
/* THE SHOWPIECE. 120px, 97% empty by measurement: 20.5% label, 32.6% copy,
   41.2% BARE, a 70px arrow pill. Nothing goes in the gap. */
.rows{position:relative}
/* min-height, not height: the copy in these rows is account text — a promo
   title that wraps, or a Spanish sentence 25% longer than the English —
   and the measured 120px must be a floor, not a guillotine. */
.row{position:relative;display:block;min-height:var(--h-row);overflow:hidden;
  background:var(--paper);color:var(--ink);isolation:isolate;
  transition:background var(--dur-flip) var(--ease-cut),color var(--dur-flip) var(--ease-cut)}
.row::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--rule);z-index:3}
.row__in{position:relative;z-index:1;min-height:var(--h-row);display:grid;align-items:center;
  grid-template-columns:296px minmax(0,var(--m-row)) 1fr 70px;
  padding:0 var(--gutter);gap:0}
.row__tag{position:absolute;left:var(--gutter);top:18px;z-index:2}
.row--tagged .row__label{padding-top:14px}
.row__label{font-size:var(--fs-title);font-weight:700;line-height:1.15;padding-right:var(--s6)}
.row__label--code{text-transform:uppercase;letter-spacing:.02em}
.row__copy{display:grid;gap:2px;align-content:center;max-width:var(--m-row);padding-right:var(--s6)}
.row__copy b{font-weight:700}
.row__copy span{font-weight:400}
.row__copy .micro{margin-top:6px;opacity:.72}
.row__gap{grid-column:3}
.row__arrow{grid-column:4;justify-self:end}
a.row:hover,a.row:focus-visible{background:var(--yellow)}
a.row:hover .pill--arrow,a.row:focus-visible .pill--arrow{
  background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.row--sm{height:var(--h-row-sm)}
.row--xs{height:var(--h-row-xs)}
.row--sm .row__in,.row--xs .row__in{grid-template-columns:296px 1fr auto;min-height:0;height:100%}
.row--sm .row__gap,.row--xs .row__gap{grid-column:2}
.row--sm .row__label,.row--xs .row__label{font-size:var(--fs-body);font-weight:700}
.row__val{grid-column:3;justify-self:end;font-size:var(--fs-body);font-weight:400;
  font-variant-numeric:tabular-nums}
.rows--dark .row{background:var(--violet);color:var(--paper)}
.rows--dark .row::after{background:rgba(255,255,255,.3)}

/* infi-motion:block-wipe-reveal — a solid yellow block draws across the row,
   the content is swapped in behind it at the covered midpoint, then the block
   keeps travelling and wipes off the right edge. 500ms/half, 250ms stagger. */
.brv{position:relative;overflow:hidden;isolation:isolate}
.brv__content{position:relative;z-index:1}
.brv__block{position:absolute;inset:0;z-index:2;background:var(--brv-color);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
html.js .rows[data-rise] .brv__content{opacity:0}
html.js .rows[data-rise].is-in .brv__block{
  animation:brv-x calc(var(--brv-dur) * 2) var(--ease-lin) calc(var(--i,0) * var(--brv-stagger)) both}
html.js .rows[data-rise].is-in .brv__content{
  animation:brv-show calc(var(--brv-dur) * 2) var(--ease-lin) calc(var(--i,0) * var(--brv-stagger)) both}
@keyframes brv-x{
  0%     {transform-origin:0 50%;  transform:scaleX(0);animation-timing-function:var(--brv-ease)}
  50%    {transform-origin:0 50%;  transform:scaleX(1)}
  50.01% {transform-origin:100% 50%;transform:scaleX(1);animation-timing-function:var(--brv-ease)}
  100%   {transform-origin:100% 50%;transform:scaleX(var(--brv-cover))}
}
@keyframes brv-show{0%,49.99%{opacity:0}50%,100%{opacity:1}}

/* ----------------------------------------------------------------- MENU --- */
.tabs{display:flex;align-items:center;gap:11px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.grid .cell{flex:none;width:auto;border-bottom:1px solid var(--rule)}
.grid .cell:nth-child(4n){border-right:0}
.cell--blank{background:var(--paper)}
.board .row__in{grid-template-columns:296px 1fr 96px}
.board .row__val{grid-column:3;font-weight:700}
.catband{height:var(--h-head);display:flex;align-items:center}
.catband .dsp{font-size:var(--fs-band)}
.catband .micro{margin-left:auto;color:var(--legal)}

/* ---------------------------------------------------------------- HOURS --- */
.htable{width:100%;border-collapse:collapse}
.htable th,.htable td{text-align:left;font-weight:400;font-size:var(--fs-body);
  height:var(--h-row-xs);border-bottom:1px solid var(--rule);padding:0 var(--gutter);vertical-align:middle}
.htable th{width:296px;font-weight:700}
.htable td{text-align:right;font-variant-numeric:tabular-nums}
.htable tr.is-today{background:var(--yellow)}

/* ------------------------------------------------------------------ MAP --- */
.mapband{background:var(--paper)}
.mapband svg{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- FORMS --- */
.formband{padding:var(--s9) 0 var(--s11)}
.formgrid{display:grid;grid-template-columns:296px minmax(0,720px) 1fr;padding:0 var(--gutter);gap:0}
.formgrid__k{padding-right:var(--s6)}
.formgrid__k p{max-width:var(--m-addr);margin-top:var(--s3)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.f{display:grid;gap:var(--s2)}
.f--wide{grid-column:1/-1}
.f label{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.f input,.f select{height:64px;border:1px solid var(--ink);border-radius:32px;
  background:var(--paper);padding:0 24px;font-size:var(--fs-ui);width:100%;
  transition:background var(--dur-flip) var(--ease-cut),color var(--dur-flip) var(--ease-cut)}
.f textarea{border:1px solid var(--ink);border-radius:32px;background:var(--paper);
  padding:22px 24px;font-size:var(--fs-ui);width:100%;min-height:150px;resize:vertical;
  font-family:inherit;line-height:var(--lh-body)}
.f select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 28px) 29px,calc(100% - 22px) 29px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--yellow);outline-offset:2px}
.f input[type=date],.f input[type=time]{padding-right:16px}
.formfoot{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s7)}
.reqnote{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--legal)}
.net-form.sent .fgrid,.net-form.sent .formfoot{display:none}
.okbox{grid-column:1/-1;margin-top:var(--s7);border:1px solid var(--rule)}
.okhead{height:var(--h-head);background:var(--yellow);color:var(--ink);display:flex;
  align-items:center;padding:0 var(--gutter);overflow:hidden}
.okhead .dsp{font-size:var(--fs-band)}
.echo{width:100%;border-collapse:collapse}
.echo caption{text-align:left;padding:var(--s5) var(--gutter) 0;font-size:var(--fs-micro);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--legal)}
.echo th,.echo td{height:var(--h-row-xs);border-bottom:1px solid var(--rule);
  padding:0 var(--gutter);text-align:left;font-size:var(--fs-body);vertical-align:middle}
.echo th{width:296px;font-weight:700}
.echo td{text-align:right}
.echo tr:last-child th,.echo tr:last-child td{border-bottom:0}

/* --------------------------------------------------------------- FOOTER --- */
.foot{position:relative;overflow:hidden;background:var(--violet);color:var(--paper);
  padding-top:100px}
.foot__grid{display:grid;grid-template-columns:864px 316px 1fr;padding:0 var(--gutter)}
.foot__c p{max-width:var(--m-foot);margin-top:var(--s3);color:var(--legal)}
.foot__note{margin-top:var(--s6)}
.foot__send{margin-top:var(--s6);height:64px;padding:0 33px 0 24px;border-radius:32px;
  border:1px solid var(--paper);display:inline-flex;align-items:center;gap:var(--s6);
  font-size:var(--fs-ui);
  transition:background var(--dur-flip) var(--ease-cut),color var(--dur-flip) var(--ease-cut)}
.foot__send:hover,.foot__send:focus-visible{background:var(--paper);color:var(--violet)}
.foot__links li{height:45px;display:flex;align-items:center}
.foot__links a{font-size:var(--fs-body)}
.ghost{margin-top:var(--s10);color:var(--ghost);overflow:hidden;white-space:nowrap}
.ghost .dsp{font-size:var(--fs-mono);margin-right:0}
.foot__legal{text-align:center;padding:var(--s6) var(--gutter) 120px;color:var(--legal)}
.foot__legal span{display:block}

/* ============================================================== MOBILE ==== */
/* A DIFFERENT DESIGN, NOT A REFLOW (derived — §9 of the spec). */
@media (max-width:900px){
  .info{grid-template-columns:1fr;padding:var(--s7) var(--gutter);gap:var(--s7)}
  .info__ph{justify-self:start;width:100%;height:240px}
  .val{grid-template-columns:1fr;height:auto;padding:var(--s6) 0;gap:var(--s4);align-content:center}
  .val__c{justify-self:start}
  .formgrid{grid-template-columns:1fr;gap:var(--s7)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .foot__c{grid-column:1/-1}
  .split{grid-template-columns:1fr;height:auto}
  .split__l{padding:var(--s6) var(--gutter) var(--s9);order:2}
  .split__r{order:1;height:56vh}
  .nav__links,.nav__lang{display:none}
  .nav__burger{display:inline-flex}
}
@media (max-width:640px){
  :root{
    --gutter:16px;
    --ticker-speed:38;
    --brv-dur:340ms;
    --brv-stagger:140ms;
    --h-nav:60px;
    --h-hero:68vh;
    --h-tkr:64px;
    --h-head:68px;
    --h-row:112px;
    --h-spot:88vh;
    --h-page:44vh;
    --fs-band:clamp(30px,11.3vw,44px);
    --fs-out:24.6vw;
    --fs-title:20px;
    --fs-body:15px;
    --lh-body:1.333;
    --fs-micro:11px;
    --cell:300px;
  }
  html[data-lang="zh"]{--lh-body:1.65}
  body{font-size:15px}
  .ann{height:34px}
  .ann__in{font-size:11px;gap:8px}
  .hero{min-height:420px}
  /* the hero recomposes: the wordmark STACKS to two lines at 31vw and the shear
     drops 24deg -> 18deg so two sheared lines do not collide */
  .hero__mark{bottom:56px;line-height:.82}
  .hero__w{white-space:normal;width:min-content;font-size:31vw;line-height:.82;
    transform:skewX(-18deg) scaleX(1.05)}
  .spot{min-height:520px}
  .spot__word{top:8%}
  .spot__ph{width:min(260px,62vw);top:26%}
  .spot__copy{bottom:36px;width:calc(100% - 2*var(--gutter))}
  .spot__acts{flex-direction:column;width:100%;gap:12px}
  .spot__acts .pill{width:100%;height:48px}
  .railhead__c .pill--circle{display:none}
  .rail .cell{padding:var(--s4)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid .cell:nth-child(4n){border-right:1px solid var(--rule)}
  .grid .cell:nth-child(2n){border-right:0}
  .cell--blank{display:none}
  /* offer rows go two-line; the 41% bare gap becomes a 28px bare strip ABOVE
     the label — the emptiness is preserved as vertical air, not deleted. */
  .row__in{grid-template-columns:1fr;align-content:center;padding:28px var(--gutter) 0;
    padding-right:72px;gap:2px}
  .row__label{font-size:20px;padding-right:0}
  .row__copy{max-width:100%;font-size:15px;line-height:20px}
  .row__gap{display:none}
  .row__arrow{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
    width:44px;height:44px}
  .row--tagged .row__in{padding-top:34px}
  .row--tagged .row__label{padding-top:0}
  .row--sm .row__in,.row--xs .row__in{grid-template-columns:1fr auto;align-items:center;
    padding:0 var(--gutter);padding-right:var(--gutter)}
  .row--sm .row__val,.row--xs .row__val{grid-column:2;position:static;transform:none}
  /* header bands that carry controls wrap to two rows instead of overflowing */
  .hd{height:auto;min-height:var(--h-head);flex-wrap:wrap;
    padding-top:14px;padding-bottom:14px;row-gap:12px}
  .hd__c{margin-left:0}
  .tabs{flex-wrap:wrap}
  /* same rule as .hd above: a band that carries controls wraps to a second
     row rather than pushing its pill off the right edge — the section count
     is a translated string and runs ~25% longer in Spanish. */
  .railhead{height:auto;min-height:var(--h-head);padding-top:12px;padding-bottom:12px;
    flex-wrap:wrap;row-gap:12px}
  .htable th,.htable td{padding:0 var(--gutter)}
  .htable th{width:auto}
  .fgrid{grid-template-columns:1fr}
  .f input,.f select{height:56px}
  .echo th{width:45%}
  .foot{padding-top:72px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .foot__legal{padding-bottom:132px}
  .ghost .dsp{white-space:normal;width:min-content}
  .pill{height:44px;padding:0 18px}
  .badge{height:22px}
  .pill--circle{width:44px}
}

/* ---------------------------------------------------- REDUCED MOTION ------ */
@media (prefers-reduced-motion:reduce){
  .tkr__track{animation:none!important;transform:none!important}
  .brv__block{display:none!important;animation:none!important}
  .brv__content{opacity:1!important;animation:none!important}
  .band::after,.row::after{transform:none!important}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}
/* coarse pointers: no hover layer, no rule-draw */
@media (hover:none){
  /* no pointer means the draw never happens — so the rule is simply there */
  .udl::after{transform:scaleX(1);transition:none}
  a.row:hover{background:var(--paper)}
}

/* ------------------------------------------------- SEO X-RAY, DEFENSIVE --- */
/* /shared/xray.css sets `html.xray-on [data-seo]{position:relative}` so it can
   hang the numbered badge off every annotated element. Both of this concept's
   headings are placed by the composition with position:absolute — the hero
   wordmark on its gutter line, the page title 72px off the band's bottom rule —
   so that one declaration drags them to the top of their band the moment the
   overlay is switched on. This re-asserts the composition; it changes nothing
   about how the page looks with the overlay off, and the outline still traces
   the real h1 instead of a stand-in wrapper. Root cause is in the shared
   engine and worth fixing there for all five concepts. */
html.xray-on .hero__mark,html.xray-on .phead__t{position:absolute}