/* Home: THROUGH THE DOORWAY. Uses tokens from system.css. */

/* ---------- 1 hero ---------- */
.hero{position:relative;height:260vh;background:var(--ink)}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.hero__front,.hero__hall{position:absolute;inset:0;overflow:hidden}
.hero__front img{max-width:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform-origin:0 0;will-change:transform}
.hero__hall{opacity:0;clip-path:inset(50% 50% 50% 50%);will-change:clip-path,opacity}
.hero__hall img{width:100%;height:100%;object-fit:cover;object-position:57% 40%;transform:scale(calc(1.28 - .28 * var(--e,0)));transform-origin:57% 40%}
.hero__draw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hero__draw .brk{stroke:var(--sign)}
.hero__draw .rails path{stroke:var(--sign);stroke-width:2.5}
.hero__draw .rails g line{stroke:var(--sign);stroke-width:1.5;opacity:.55}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(13,15,20,.92) 0%,rgba(13,15,20,.55) 34%,rgba(13,15,20,0) 62%),linear-gradient(to bottom,rgba(13,15,20,.82) 0,rgba(13,15,20,.5) calc(var(--hdr) + 10px),rgba(13,15,20,0) calc(var(--hdr) + 18vh))}
.hero__copy{position:absolute;z-index:3;left:var(--edge);right:var(--edge);bottom:clamp(28px,7vh,72px);will-change:transform,opacity}
.hero__kick{color:var(--sign);margin:0 0 14px}
.hero__h1{font-size:clamp(3.3rem,13.2vw,15.5rem);line-height:.8;letter-spacing:-.025em;margin:0 0 clamp(18px,3vh,32px)}
.hero__h1 .ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.hero__h1 .ln > span{display:inline-block}
/* h1 is the LCP text: painted on first frame, no reveal. The kicker and meta drive in instead. */
.js:not(.rm) .hero__kick,.js:not(.rm) .hero__meta{animation:h1in-up 1.1s var(--ease-ramp) .15s both}
@keyframes h1in-up{from{opacity:0;transform:translateY(24px)}}
.hero__h1 .ln:nth-child(3) > span{color:var(--sign)}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.hero__meta p{margin:0;color:var(--brick)}
.hero__neil{position:absolute;z-index:3;left:var(--edge);right:var(--edge);bottom:clamp(36px,9vh,96px);margin:0;max-width:min(100%,1180px);opacity:0;will-change:transform,opacity}
.hero__neil .quote{font-size:clamp(2.6rem,7vw,8.8rem);line-height:.94;text-wrap:balance}
.hero__neil figcaption{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:899px){.hero{height:200vh}.hero__h1{font-size:clamp(3.1rem,18.5vw,7rem)}.hero__neil{max-width:none}}
@media (max-height:520px) and (orientation:landscape){.hero__h1{font-size:clamp(2.6rem,9vw,5rem)}}

/* static fallback (no JS / reduced motion) */
.hero-static{display:none}
.no-js .hero,.rm .hero{height:auto}
.no-js .hero__stage,.rm .hero__stage{position:relative;height:100vh;height:100svh}
.no-js .hero__hall,.rm .hero__hall,.no-js .hero__neil,.rm .hero__neil,.no-js .hero__draw,.rm .hero__draw{display:none}
.no-js .hero-static,.rm .hero-static{display:grid;gap:var(--gutter);padding:var(--sp-scene) var(--edge) 0;max-width:var(--max);margin:0 auto;align-items:end}
@media (min-width:900px){.no-js .hero-static,.rm .hero-static{grid-template-columns:5fr 7fr}}
.hero-static__ph{aspect-ratio:3/4}

/* ---------- 2 notice ---------- */
.notice__head{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:clamp(28px,5vh,56px)}
.notice__more{display:inline-flex;align-items:center;min-height:44px;color:var(--fascia);text-decoration:none}
.notice__text{font-size:clamp(2.1rem,7.6vw,9.4rem);line-height:.88;letter-spacing:-.02em;margin:0;color:var(--ink)}
.notice__text > span{display:block}
.notice__text em{font-style:normal;color:var(--fascia)}
.notice__text .no{color:transparent;-webkit-text-stroke:2px var(--oxide);text-decoration:line-through;text-decoration-color:var(--oxide);text-decoration-thickness:.06em}
@media (max-width:600px){.notice__text .no{-webkit-text-stroke-width:1.4px}}
.lane{position:relative;margin-top:clamp(56px,10vh,120px);display:grid;gap:28px 4vw;--p:0}
@media (min-width:900px){.lane{grid-template-columns:3fr 2fr;align-items:end}}
.lane ul{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:clamp(12px,2.6vw,40px);flex-wrap:wrap}
.veh{flex:1 1 0;min-width:96px;display:grid;gap:10px;
  transform:translateX(calc((1 - min(1, var(--p) * 2.4 - var(--i) * .12)) * -38vw));opacity:calc(var(--p) * 3 - var(--i) * .2)}
.rm .veh,.no-js .veh{transform:none;opacity:1}
.veh svg{width:100%;height:auto;overflow:visible}
.veh .b{fill:var(--ink)} .veh .w{fill:none;stroke:var(--brick);stroke-width:2.4} .veh .t{fill:var(--ink);stroke:var(--brick);stroke-width:3}
.veh .h{fill:var(--sign)}
.veh .label{color:var(--fascia);font-size:.875rem}
.veh--no .b{fill:none;stroke:var(--oxide);stroke-width:2.4;stroke-dasharray:6 5}
.veh--no .w{stroke:var(--oxide);stroke-width:1.6}
.veh--no .t{fill:none;stroke:var(--oxide);stroke-width:2.4}
.veh--no .x{stroke:var(--oxide);stroke-width:3}
.veh--no .label{color:var(--oxide)}
.lane__ground{grid-column:1/-1;color:var(--ink)}

/* ---------- 3 sign ---------- */
.sign{position:relative;overflow:hidden;padding-bottom:clamp(64px,10vh,120px)}
.sign__photo{position:relative;height:clamp(180px,34vw,520px);overflow:hidden;border-bottom:10px solid var(--brick-2)}
.sign__photo img{position:absolute;left:0;width:100%;height:auto;top:50%;transform:translateY(-36%) scale(calc(1.18 - .12 * var(--p,0)));transform-origin:50% 36%}
@media (max-width:700px){.sign__photo img{width:180%;left:-36%}}
.sign__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:clamp(28px,5vh,56px) clamp(20px,4vh,40px)}
.sign__head .label{color:var(--sign)}
.sign__rows{display:grid;gap:.06em}
.sign__row{display:flex;align-items:center;gap:.4em;white-space:nowrap;margin:0;font-size:clamp(2.6rem,8.6vw,10rem);line-height:.95;color:var(--brick);
  transform:translateX(calc(var(--dir,1) * (var(--p,.5) - .5) * -40vw + var(--off,0vw)))}
.sign__row[data-dir="-1"]{--dir:-1;--off:-30vw}
.sign__row i{flex:none;width:.12em;height:.8em;background:var(--sign)}
.sign__row--o span{color:transparent;-webkit-text-stroke:2px var(--brick)}
.rm .sign__row{transform:none;flex-wrap:wrap;white-space:normal;padding-inline:var(--edge)}
.sign__rail{margin:clamp(40px,7vh,80px) var(--edge) 0}

/* ---------- 4 run (pinned horizontal) ---------- */
.run{position:relative;height:420vh;background:var(--ink)}
.run__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,5vh,56px);padding-top:var(--hdr)}
.run__head h2{font-size:clamp(1.9rem,4.8vw,5.4rem);line-height:.92;max-width:20ch}
.run__head h2 .label{display:block;margin-bottom:12px;font-size:.8125rem}
.run__track{display:flex;align-items:center;gap:clamp(28px,5vw,96px);padding-inline:var(--edge);width:max-content;will-change:transform}
.run__q{margin:0;width:min(78vw,620px);flex:none}
.run__q .quote{font-size:clamp(1.6rem,3.2vw,3.2rem)}
.run__q figcaption{color:var(--sign)}
.run__ph{flex:none;width:clamp(200px,24vw,400px)}
.run__ph--lo{transform:translateY(12%)}
.run__end{flex:none;display:grid;gap:12px;place-content:center;width:min(70vw,420px);aspect-ratio:.62;border-inline:6px solid var(--oxide);border-top:10px solid var(--brick-2);text-decoration:none;color:var(--brick);padding:24px;text-align:center;background:var(--fascia)}
.run__end:hover{color:var(--sign)}
.run__rail{position:relative;margin-inline:var(--edge)}
.run__rail .rail{display:block}
.run__rail i{position:absolute;top:-6px;left:0;width:28px;height:28px;background:var(--sign);clip-path:polygon(0 0,100% 50%,0 100%);transform:translateX(calc(var(--p,0) * (100vw - 2 * var(--edge) - 28px)))}
@media (max-width:899px){.run{height:360vh}.run__ph{width:58vw}.run__q{width:80vw}}
.rm .run,.no-js .run{height:auto}
.rm .run__stage,.no-js .run__stage{position:relative;height:auto;padding-block:var(--sp-scene)}
.rm .run__track,.no-js .run__track{width:auto;flex-wrap:wrap;transform:none!important}
.rm .run__rail,.no-js .run__rail{display:none}

/* ---------- 5 clock ---------- */
.clock__grid{display:grid;gap:clamp(40px,7vw,120px);align-items:center}
@media (min-width:900px){.clock__grid{grid-template-columns:5fr 7fr}}
.clock__dial{position:relative;max-width:520px;width:100%;margin-inline:auto}
.clock__dial svg{width:100%;height:auto;overflow:visible}
.clock .rim{fill:var(--ink);stroke:var(--ink);stroke-width:6}
.clock .ticks line{stroke:var(--brick);stroke-width:1.4}
.clock .ticks line.hr{stroke-width:4;stroke:var(--brick)}
.clock .arc{fill:none;stroke:var(--sign);stroke-width:10;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--sweep,0) * 100)}
.clock .hand{stroke-linecap:square}
.clock .hand--h{stroke:var(--brick);stroke-width:9}
.clock .hand--m{stroke:var(--sign);stroke-width:5}
.clock .pin{fill:var(--sign)}
.clock__t{position:absolute;left:50%;top:64%;transform:translateX(-50%);margin:0;color:var(--brick);font-size:clamp(.9rem,1.6vw,1.1rem);text-align:center;white-space:nowrap}
.clock__t b{display:block;font-stretch:125%;font-weight:800;font-size:1.5em;color:var(--sign)}
.clock__words{margin:0}
.clock__words .quote{font-size:clamp(1.6rem,3.3vw,3.4rem)}
.clock__words figcaption{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- 6 free ---------- */
.free__grid{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:900px){.free__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .free__ph{grid-column:1/span 4;grid-row:1/span 2;position:sticky;top:calc(var(--hdr) + 24px)}
  .free__a{grid-column:6/span 7}.free__b{grid-column:6/span 6}}
.free__ph{aspect-ratio:.56}
.free__a h2{font-size:clamp(2.6rem,6.6vw,7.6rem);line-height:.86;margin-bottom:clamp(28px,5vh,56px)}
.free__story{margin:0;max-width:62ch}
.free__story .quote-body{font-size:clamp(1.125rem,1.45vw,1.375rem);color:var(--brick)}
.free__story mark{color:var(--brick);background:linear-gradient(var(--sign),var(--sign)) 0 92%/100% .18em no-repeat}
.free__story figcaption,.free__b figcaption{color:var(--sign)}
.free__b{margin:0;padding-top:clamp(28px,5vh,56px);border-top:1px solid var(--line-d)}
.free__b .quote{font-size:clamp(1.5rem,2.8vw,2.8rem)}

/* ---------- 7 tape ---------- */
.tape__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.tape__head h2{display:flex;align-items:flex-end;gap:.12em;font-size:clamp(5rem,22vw,22rem);line-height:.78;color:var(--ink)}
.tape__u{font-size:.2em;line-height:1;padding-bottom:.18em;color:var(--fascia)}
.tape__sum{max-width:32ch;margin:0;padding-bottom:10px}
.tape__body{position:relative;display:flex;align-items:center;margin-top:clamp(32px,6vh,64px);height:clamp(92px,11vw,150px)}
.tape__case{position:relative;z-index:2;flex:none;width:clamp(92px,11vw,150px);aspect-ratio:1;background:var(--ink);color:var(--sign);display:grid;place-items:center;
  border-radius:18% 18% 18% 4%;box-shadow:inset 0 0 0 6px var(--ink-2)}
.tape__case svg{width:52%}
.tape__blade{position:relative;flex:1;height:44%;background:var(--sign);transform-origin:left center;
  transform:scaleX(calc(.04 + .96 * min(1, var(--p,0) * 2.2)));border-top:2px solid #c9a822;border-bottom:2px solid #c9a822}
.rm .tape__blade,.no-js .tape__blade{transform:none}
.tape__ticks{position:absolute;inset:0;display:flex;justify-content:space-between;padding:0 6px}
.tape__ticks i{position:relative;width:2px;height:42%;background:var(--ink)}
.tape__ticks i.k-s{height:24%}
.tape__ticks i.s1{background:var(--oxide);width:4px;height:70%}
.tape__ticks i.s3{background:var(--fascia);width:4px;height:56%}
.tape__ticks i[data-n]::after{content:attr(data-n);position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);font:650 12px/1 var(--f-sans);font-stretch:75%;color:var(--ink)}
@media (max-width:600px){.tape__ticks{padding:0 2px}.tape__ticks i{width:1.5px}.tape__ticks i.s1,.tape__ticks i.s3{width:3px}.tape__ticks i[data-n]:not([data-n="1"]):not([data-n="32"]):not([data-n="64"])::after{content:none}}
.tape__picks{list-style:none;margin:clamp(64px,10vh,120px) 0 0;padding:0;display:grid;gap:clamp(36px,6vh,72px)}
.tape__picks li{display:grid;gap:12px;border-top:2px solid var(--ink);padding-top:22px}
@media (min-width:900px){.tape__picks{grid-template-columns:repeat(12,minmax(0,1fr))}
  .tape__picks li:nth-child(1){grid-column:1/span 7}.tape__picks li:nth-child(2){grid-column:5/span 5}.tape__picks li:nth-child(3){grid-column:7/span 6}}
.tape__picks .quote{font-size:clamp(1.7rem,3.6vw,3.8rem);color:var(--ink)}
.tape__picks p{margin:0;color:var(--fascia)}
.tape__cta{margin-top:clamp(48px,8vh,88px)}

/* ---------- 8 bay ---------- */
.bay{overflow:hidden}
.bay__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(40px,7vh,80px)}
.bay__head h2{font-size:clamp(3rem,10vw,11rem)}
.bay__set{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start}
.bay__p{transform:translate3d(0,calc((var(--p,.5) - .5) * var(--z) * -24vh),0)}
.rm .bay__p{transform:none}
.bay__p--1{grid-column:1/span 7}
.bay__p--2{grid-column:5/span 8;margin-top:-18%}
.bay__p--3{grid-column:1/span 5;margin-top:-6%}
.bay__p--4{grid-column:6/span 6;margin-top:12%}
@media (min-width:900px){
  .bay__p--1{grid-column:1/span 4}
  .bay__p--2{grid-column:5/span 5;margin-top:14vh}
  .bay__p--3{grid-column:10/span 3;margin-top:-4vh}
  .bay__p--4{grid-column:8/span 4;margin-top:-20vh}
}

/* ---------- 9 visit ---------- */
.visit__grid{display:grid;gap:clamp(48px,8vw,120px)}
@media (min-width:1000px){.visit__grid{grid-template-columns:7fr 5fr}}
.visit__a h2{font-size:clamp(3rem,10vw,10rem);margin-bottom:clamp(28px,5vh,48px)}
.hours{display:grid;gap:10px}
.hours__axis{position:relative;height:18px;margin-left:64px;color:#5d616a}
.hours__axis span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);font:650 12px/1 var(--f-sans);font-stretch:75%}
.hours__row{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}
.hours__track{position:relative;height:clamp(40px,5vw,56px);background:repeating-linear-gradient(90deg,var(--brick-2) 0 1px,transparent 1px calc(100% / 9));border-block:1px solid var(--brick-2)}
.hours__track i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--ink);transform-origin:left;
  transform:scaleX(var(--grow,1));transition:transform 1.2s var(--ease-ramp)}
.js .hours:not(.is-in) .hours__track i{--grow:0}
.rm .hours .hours__track i{--grow:1}
.hours__track b{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.8125rem;color:var(--brick);mix-blend-mode:difference}
.hours__row[data-day="0"] .hours__track b{left:8px;right:auto;color:#5d616a;mix-blend-mode:normal}
.hours__row.is-today .label[role=rowheader]{color:var(--fascia)}
.hours__row.is-today .hours__track i{background:var(--fascia)}
.hours__row.is-today .hours__track{box-shadow:inset 4px 0 0 var(--sign)}
.visit__src{margin-top:16px}
.visit__b{display:grid;gap:24px;align-content:start}
.visit__door{aspect-ratio:1.06}
.visit__addr{font-style:normal}
.visit__addr .t3{line-height:1}
.visit__acts{display:flex;flex-wrap:wrap;gap:12px}
.visit__acc{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:#5d616a}
.visit__acc li::before{content:"";display:inline-block;width:10px;height:10px;background:var(--fascia);margin-right:10px;vertical-align:1px}
.visit__links{display:flex;gap:24px;margin:0}
.visit__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--fascia)}
.rm .sign__row .dup,.no-js .sign__row .dup{display:none}

/* Webster's tread drawing (fx.js), behind the hero copy, on the right; it leaves with the copy */
.hero__art{position:absolute;z-index:2;right:0;bottom:0;width:min(46vw,760px);height:min(46vh,420px);pointer-events:none;will-change:opacity}
.hero__art canvas{--fx-ink:rgba(236,233,225,.55)}
@media (max-width:899px){.hero__art{display:none}}
.no-js .hero__art,.rm .hero__art{display:none}