@font-face{font-family:'OyCond';src:url(../fonts/oy-cond-extrabold.woff) format('woff');font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:'OySerif';src:url(../fonts/oy-serif-italic.woff) format('woff');font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:'OyMono';src:url(../fonts/oy-mono-bold.woff) format('woff');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:'OyMonoR';src:url(../fonts/oy-mono-regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'OyBody';src:url(../fonts/oy-body-regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
/* oy · website · v2. Same brand as the app: the approved "oy." stamp, oxblood / paper / acid / persimmon / icy,
   Bricolage Condensed for shouting, Instrument Serif italic for feeling, Space Mono for facts, ticket mono for times.
   The hero IS Home: the stops count falls as you scroll and the band floods acid when it's time. */
:root{--paper:#F7EFDA;--ink:#540300;--acid:#E6FF2E;--tomato:#F86E4B;--icy:#93C2EA;--rule:rgba(84,3,0,.18);
  --shout:OyCond,'Arial Narrow',Impact,sans-serif;--feel:OySerif,Georgia,'Times New Roman',serif;--info:OyMono,ui-monospace,Menlo,monospace;--body:OyBody,-apple-system,system-ui,sans-serif;
  color-scheme:light only;font-synthesis:none;--snap:cubic-bezier(.2,0,0,1);--pin:cubic-bezier(.3,1.4,.5,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--body);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-bottom:env(safe-area-inset-bottom,0px)}
@supports (overflow:clip){html,body{overflow-x:clip}}
.sec,.get,footer,.top{overflow-x:hidden}
@supports (overflow:clip){.sec,.get,footer,.top{overflow-x:clip}}  /* clip keeps the sticky ticket working */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit}
.shout{font-family:var(--shout);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.86}
.feel{font-family:var(--feel);font-style:italic;font-weight:400;letter-spacing:-.02em;line-height:.98}
.info{font-family:var(--info);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;line-height:1.5}
.infor{font-family:OyMonoR,var(--info);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:12px;line-height:1.5}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:inherit}
:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.skip{position:absolute;left:12px;top:-80px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 14px;min-height:44px;display:flex;align-items:center;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* the stamp: on load it does the bolt once (wind-up, strike, the full stop pops) */
.mk{display:block;height:auto;overflow:visible}
.mk .lo,.mk .ly{transform-box:view-box}
.mk .lo{transform-origin:212px 213px} .mk .ly{transform-origin:300px 300px}
.mk .ld{transform-box:fill-box;transform-origin:center}
.bolt .lo{animation:bo .9s both} .bolt .ly{animation:by .9s both} .bolt .ld{animation:bd .9s both}
@keyframes bo{0%,6.7%{transform:none;animation-timing-function:cubic-bezier(.2,.9,.3,1)}22.2%{transform:translateX(-36px);animation-timing-function:cubic-bezier(.6,0,.9,.4)}35.6%{transform:translateX(6px) scaleX(.93);animation-timing-function:cubic-bezier(.2,.9,.3,1)}44.4%,100%{transform:none}}
@keyframes by{0%,35.6%{transform:none}44.4%{transform:rotate(6deg)}53.3%{transform:rotate(-2deg)}62.2%,100%{transform:none}}
@keyframes bd{0%,6.7%{transform:none;animation-timing-function:ease-in}17.8%,40%{transform:scale(0);animation-timing-function:cubic-bezier(.2,.9,.3,1)}53.3%{transform:scale(1.25)}66.7%,100%{transform:none}}

/* the signature link: underlined with the dented dash */
.dl{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding-block:12px;min-height:44px}
.dl::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:8px;background:var(--tomato);clip-path:polygon(0 0,46% 0,50% 70%,54% 0,100% 0,100% 100%,0 100%);transition:clip-path .3s var(--pin)}
.dl:hover::after{clip-path:polygon(0 0,76% 0,80% 70%,84% 0,100% 0,100% 100%,0 100%)}
.dl svg{transition:transform .3s var(--pin)}
.dl:hover svg{transform:translateX(5px)}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:14px}
.top .mk{width:78px}

/* hero = Home */
.hero{position:relative}
/* time to go: the acid bursts out of the count */
.hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--acid);clip-path:circle(0 at var(--fx,75%) var(--fy,40%));transition:clip-path .7s cubic-bezier(.7,0,.2,1);pointer-events:none}
.hero.now::before{clip-path:circle(150% at var(--fx,75%) var(--fy,40%))}
.hero>.wrap{position:relative;z-index:1}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;padding-block:8px 48px;align-items:end}
.eyebrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;grid-column:1 / -1}
.dash{display:inline-block;width:26px;height:10px;background:var(--tomato);clip-path:polygon(0 15%,38% 15%,50% 55%,62% 15%,100% 15%,100% 95%,0 95%)}
.pitch{align-self:start;padding-top:24px}
.oy{font-size:clamp(116px,15vw,210px);display:flex;align-items:flex-end;min-height:.86em;white-space:nowrap}
.oy .typed{display:inline-block}
.oy .caret{display:inline-block;width:.07em;height:.74em;margin-left:.04em;margin-bottom:.06em;background:var(--tomato);animation:blink .8s steps(1) infinite}
.oy.done .caret{display:none}
@keyframes blink{50%{opacity:0}}
.oy .bang{display:inline-block;transform-origin:50% 90%}
.oy.done .bang{animation:bang .7s var(--pin) .2s 1}
.oy.done:hover .bang{animation:bang .7s var(--pin) 1}
@keyframes bang{0%{transform:none}30%{transform:rotate(14deg) scale(1.06)}60%{transform:rotate(-8deg)}100%{transform:none}}
.tag{font-size:clamp(36px,4.4vw,58px);margin-top:16px;max-width:13ch}
.lede{max-width:40ch;margin-top:24px;font-size:19px}
.cta{display:flex;flex-direction:column;gap:12px;margin-top:30px}

.phone{position:relative;min-width:0}
.phone .lab{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;box-shadow:0 2px 0 var(--ink)}
.num{--nh:min(clamp(240px,32vw,420px),42vh);position:relative;height:var(--nh)}
.num span{position:absolute;left:0;bottom:.04em;font-size:calc(var(--nh) / .72 * .86);line-height:.72;letter-spacing:-.05em;transform-origin:30% 100%;transition:transform .42s cubic-bezier(.3,1.7,.45,1),opacity .14s linear}
.num span.out{transform:scale(1.08,.12);opacity:0;transition:transform .2s cubic-bezier(.6,0,.9,.4),opacity .18s linear .06s}
.num span.in{transform:translateY(-34%) scale(.94,1.12);opacity:0}
.unit{display:inline-block;position:relative;z-index:0;font-size:clamp(40px,4.6vw,60px);margin-top:16px}
.unit::before{content:"";position:absolute;left:-6px;right:-6px;bottom:3px;height:42%;background:var(--acid);z-index:-1;transition:background .4s}
.hero.now .unit::before{background:var(--paper)}
.talk{font-size:clamp(26px,2.9vw,38px);margin-top:20px;min-height:3.2em;max-width:22ch;display:flex;align-items:flex-end}
.head{font-size:clamp(34px,3.8vw,50px);margin-top:10px;min-height:1.9em}
.arr{margin-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.status{font-size:20px;margin-top:6px}
.track{position:relative;height:30px;margin-top:20px}
.rail-line{position:absolute;left:0;right:0;top:12px;height:6px;background:var(--ink);opacity:.18}
.ahead{position:absolute;left:0;right:0;top:12px;height:6px;background:var(--ink);transform-origin:right;transform:scaleX(1)}
.tdent,.mine{position:absolute;top:11px;width:16px;height:8px;margin-left:-8px;background:var(--paper);clip-path:polygon(0 0,40% 0,50% 60%,60% 0,100% 0,100% 100%,0 100%);transition:background .4s}
.hero.now .tdent{background:var(--acid)}
.tdent.gone{opacity:.25}
.mine{top:4px;width:22px;height:22px;margin-left:-26px;border-radius:50%;background:var(--ink);clip-path:none;box-shadow:0 0 0 4px var(--paper)}
.hero.now .mine{box-shadow:0 0 0 4px var(--acid)}
.ghost{position:absolute;top:3px;left:0;width:46px;height:24px;margin-left:-23px;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%);opacity:0;pointer-events:none}
.ghost.g1{background:var(--tomato)} .ghost.g2{background:var(--icy)}
.tram{position:absolute;top:3px;left:0;width:46px;height:24px;margin-left:-23px;background:var(--ink);color:var(--acid);clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%);display:flex;align-items:center;padding-left:8px;font-family:var(--info);font-weight:700;font-size:11px;letter-spacing:.06em}
.hero.here .tram{animation:jiggle .5s cubic-bezier(.2,1.8,.4,1) 2}
@keyframes jiggle{50%{transform:translateX(4px) rotate(-3deg)}}
.route{margin-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* store badges: placeholders until the official badges and links are in */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:flex;flex-direction:column;justify-content:center;min-height:60px;min-width:196px;padding:8px 18px;background:var(--ink);color:var(--paper);text-decoration:none;border-radius:12px;transition:background .2s,color .2s}
.store .s1{font-family:OyMonoR,var(--info);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.store .s2{font-family:var(--shout);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}
a.store:hover{background:var(--acid);color:var(--ink)}
.store.soon{cursor:default}
.note{max-width:36ch}
.soonline{font-size:13px;background:var(--ink);color:var(--acid);display:inline-block;padding:9px 12px 8px;transform:rotate(-1deg)}
.get .soonline{background:var(--ink);color:var(--acid)}

/* sections: separated by the ink rule, never boxed */
.sec{box-shadow:0 -3px 0 var(--ink)}
.sec>.wrap{padding-block:76px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.sec-head h2{font-size:clamp(60px,8.4vw,112px)}
.sec-head .feel{font-size:clamp(42px,5.8vw,76px)}

/* voices: the picker, as in the app (each voice dressed as itself) */





.v-mate{background:var(--paper);background-image:repeating-linear-gradient(transparent 0 11px,rgba(84,3,0,.14) 11px 12px);box-shadow:inset 0 2px 0 var(--ink),inset 0 -2px 0 var(--ink)}
.v-bogan{background:var(--ink);color:var(--paper)}
.v-boss{background:var(--acid);box-shadow:inset 0 -6px 0 var(--ink)}
.v-mil{background:var(--paper);box-shadow:inset 0 2px 0 var(--ink),inset 0 -2px 0 var(--ink)}
.v-therapist{background:var(--icy)}
.vnote{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px}

/* setup: the trip ticket from the app, and the four questions */
.setup{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;margin-top:44px;align-items:stretch}
.ticket{position:relative;background:var(--acid);padding:22px 64px 24px 26px;box-shadow:8px 8px 0 var(--ink);transform:perspective(1000px) translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotate(var(--rz,-1.4deg));transform-origin:50% 100%}
.ticket::before,.ticket::after{content:"";position:absolute;right:30px;width:30px;height:30px;margin-right:-15px;border-radius:50%;background:var(--paper)}
.ticket::before{top:-15px} .ticket::after{bottom:-15px}
.ticket .perf{position:absolute;right:29px;top:22px;bottom:22px;width:0;border-left:2.5px dashed var(--ink);opacity:.8}
.ticket .tno{position:absolute;right:6px;top:50%;transform:translateY(-50%) rotate(-90deg);white-space:nowrap}
.ticket .route1{font-size:clamp(34px,3.6vw,46px)}
.ticket .route2{margin-top:8px}
.ticket .trow{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;box-shadow:0 -2px 0 rgba(84,3,0,.28)}
.ticket .k{display:block;margin-bottom:6px}
.tm{display:inline-flex;align-items:flex-end;gap:5px;color:var(--ink)}
.tm svg{height:56px;width:auto;overflow:visible;display:block}
.tm .tmc{display:flex;flex-direction:column;gap:12px;padding-bottom:11px}
.tm .tmc i{display:block;width:7px;height:7px;background:currentColor}
.ampm{margin-left:8px;align-self:flex-end;padding-bottom:4px}
.days{display:flex;gap:5px;flex-wrap:nowrap}
.days span{display:grid;place-items:center;width:clamp(26px,8vw,34px);height:clamp(26px,8vw,34px);flex:none;border-radius:50%;background:var(--ink);color:var(--acid);font-family:var(--shout);font-weight:800;font-size:18px}
.days span.off{background:transparent;color:var(--ink);opacity:.45}
.sticker{position:absolute;left:24px;bottom:-22px;background:var(--tomato);color:var(--ink);padding:7px 12px 6px;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--ink)}
.how{display:flex;flex-direction:column}
.how .step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 14px;padding:20px 0;box-shadow:0 -2px 0 var(--ink)}
.how .step:last-child{box-shadow:0 -2px 0 var(--ink),0 2px 0 var(--ink)}
.how .n{font-family:var(--feel);font-style:italic;font-size:72px;line-height:.7;letter-spacing:-.05em;grid-row:span 2}
.how h3{font-size:clamp(28px,2.8vw,36px)}
.how h3 .feel{text-transform:none;font-size:1.05em}
.how p{max-width:38ch}
.then{margin-top:34px}
.then .shout{font-size:clamp(44px,5.4vw,68px);display:block}
.then .feel{font-size:clamp(34px,4.2vw,54px);display:block;margin-top:6px}

/* download */
.get{background:var(--acid);box-shadow:0 -3px 0 var(--ink)}
.get .wrap{padding-block:76px 68px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 56px;align-items:center}
.get .mk{width:min(300px,44vw)}
.get h2{font-size:clamp(84px,13vw,180px)}
.get .feel{font-size:clamp(32px,4vw,52px);margin-top:10px}
.get .stores{margin-top:28px}
.get .note{margin-top:12px}

/* redirect bar */
.go{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--ink);color:var(--paper);padding:14px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;justify-content:space-between;gap:12px}
.go[hidden]{display:none}
.go button{all:unset;cursor:pointer;font-family:var(--info);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--acid);text-underline-offset:4px;padding:12px 0}

footer{box-shadow:0 -3px 0 var(--ink)}
footer .wrap{padding-block:28px calc(48px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer .mk{width:52px}

/* scroll: the hero pins while the tram counts in */
.scrub.on{height:calc(var(--heroH,900px) + 150vh)}
.scrub.on .hero{position:sticky}
/* the journey rail: the page is the trip */
.journey{position:fixed;right:max(6px,env(safe-area-inset-right,0px));top:calc(110px + env(safe-area-inset-top,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px));width:24px;z-index:5;pointer-events:none}
.j-line{position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--ink);opacity:.35}
.j-stop{position:absolute;left:-10px;width:44px;height:44px;margin-top:-22px;pointer-events:auto;text-decoration:none}
.j-stop::before{content:"";position:absolute;left:16px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px var(--ink);transition:background .3s,transform .3s cubic-bezier(.3,1.8,.5,1)}
.j-stop.passed::before{background:var(--ink)}
.j-end::before{background:var(--acid)}
.j-stop:hover::before{transform:scale(1.4)}
.j-stop span{position:absolute;right:40px;top:50%;transform:translate(6px,-50%);white-space:nowrap;background:var(--ink);color:var(--acid);padding:3px 7px;opacity:0;transition:opacity .2s,transform .25s}
.j-stop:hover span,.j-stop:focus-visible span{opacity:1;transform:translate(0,-50%)}
.j-tram{position:absolute;left:5px;top:0;width:14px;height:26px;margin-top:-13px;background:var(--ink);clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);transition:top .15s linear}
.j-tram::after{content:"";position:absolute;left:4px;right:4px;top:5px;height:6px;background:var(--acid)}
.journey.arrived .j-tram{animation:jiggle .5s cubic-bezier(.2,1.8,.4,1) 2}
@media (max-height:520px){ .num{--nh:30vh} .talk{min-height:2.2em} .head{min-height:1em} }
@media (max-height:640px){ .status,.route{display:none} }
/* the rail only where there's a margin for it */
@media (max-width:1319px){ .journey{display:none} }
@media (max-width:340px){ .days{gap:2px} .days span{width:22px;height:22px;font-size:13px} .ticket{padding-left:18px} }
@media (max-width:640px){
  .journey{display:none}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .pitch{padding-top:8px}
  .setup{grid-template-columns:minmax(0,1fr);gap:64px}
  .get .wrap{grid-template-columns:minmax(0,1fr)}
  .tm svg{height:46px}
}
@media (max-width:420px){
  .store{min-width:0;flex:1 1 100%}
  .num{--nh:min(240px,38vh)}
  .ticket{padding-right:56px}
}

/* what if: the three worries, answered in oy's voice, then the few questions people ask */
.ifs{margin-top:40px}
.if{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10px 40px;padding:28px 0 30px;box-shadow:0 -2px 0 var(--ink);align-items:start}
.if:last-child{box-shadow:0 -2px 0 var(--ink),0 2px 0 var(--ink)}
.if .q{display:flex;align-items:center;gap:12px;padding-top:10px}
.if .a{font-size:clamp(40px,5vw,72px)}
.if .a .feel{font-size:1.04em;text-transform:none}
.if p{max-width:44ch;margin-top:12px}
.tag8{display:inline-grid;place-items:center;height:26px;padding:0 8px;background:var(--tomato);color:var(--ink);font-family:var(--shout);font-weight:800;font-size:17px;line-height:1;transform:rotate(-3deg)}
.ring{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px dashed var(--ink);flex:none}
.legs{display:inline-flex;align-items:center;gap:6px}
.legs b{display:inline-grid;place-items:center;height:24px;padding:0 7px;background:var(--ink);color:var(--acid);font-family:var(--shout);font-weight:800;font-size:16px;line-height:1}
.legs i{font-family:var(--feel);font-size:18px}
.faq{margin-top:56px}
.faq h3{font-size:clamp(34px,4vw,52px);margin-bottom:14px}
.faq details{box-shadow:0 -2px 0 var(--ink)}
.faq details:last-child{box-shadow:0 -2px 0 var(--ink),0 2px 0 var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;min-height:56px;font-family:var(--shout);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:.95}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(var(--ink),var(--ink)) center/100% 3px no-repeat,linear-gradient(var(--ink),var(--ink)) center/3px 100% no-repeat;transition:transform .3s var(--pin)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.faq details p{max-width:52ch;padding:0 0 22px}
@media (max-width:640px){ .if{grid-template-columns:minmax(0,1fr);gap:6px} .if .q{padding-top:0} }

/* same tram, five voices: one moment, said five ways, like posters on a tram stop pole */
.cmp{margin-top:36px}
.cmp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px}
.cmp-head h3{font-size:clamp(40px,5vw,68px)}
.cmp-head h3 .feel{text-transform:none;font-size:1.05em}
.posters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:28px;padding:22px 4px 18px}
:where(.poster){all:unset}
.poster{box-sizing:border-box;cursor:pointer;text-align:left;border:0;margin:0;position:relative;display:flex;flex-direction:column;gap:18px;transition:transform .35s var(--pin),box-shadow .35s var(--pin);min-height:clamp(300px,30vw,380px);padding:18px 16px 20px;transform:rotate(var(--r,0deg));box-shadow:5px 5px 0 var(--ink)}
.poster:nth-child(1){--r:-1.2deg}.poster:nth-child(2){--r:.9deg}.poster:nth-child(3){--r:-.5deg}.poster:nth-child(4){--r:1.3deg}.poster:nth-child(5){--r:-.9deg}
.poster .pn{display:block}
.poster .pw{margin-top:auto}
.poster .ph,.poster .pt{display:block}
.poster:hover{transform:rotate(var(--r,0deg)) translateY(-4px)}
.poster[aria-checked="true"]{transform:rotate(0deg) translateY(-10px);box-shadow:8px 12px 0 var(--ink)}
.poster.v-boss[aria-checked="true"]{box-shadow:inset 0 -6px 0 var(--ink),8px 12px 0 var(--ink)}
.poster:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.poster.v-bogan:focus-visible{outline-color:var(--acid);outline-offset:-8px}
.mine-tag{position:absolute;top:-12px;right:12px;background:var(--tomato);color:var(--ink);padding:5px 9px 4px;transform:rotate(4deg) scale(0);transition:transform .35s var(--pin);box-shadow:2px 2px 0 var(--ink)}
.poster[aria-checked="true"] .mine-tag{transform:rotate(4deg) scale(1)}
.lede2{max-width:46ch;font-size:18px}
.poster .ph{font-family:var(--shout);font-weight:800;text-transform:uppercase;font-size:clamp(30px,2.7vw,40px);line-height:.88}
.poster .pt{font-family:var(--feel);font-style:italic;font-size:clamp(20px,1.7vw,24px);line-height:1.08;margin-top:10px}
.poster.v-mate .pn{font-family:var(--info);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.poster.v-bogan .pn{font-family:var(--shout);font-weight:800;text-transform:uppercase;color:var(--acid);font-size:30px;line-height:.9}
.poster.v-bogan .ph{color:var(--acid)}
.poster.v-boss{box-shadow:inset 0 -6px 0 var(--ink),5px 5px 0 var(--ink)}
.poster.v-boss .pn{font-family:var(--shout);font-weight:800;text-transform:uppercase;font-size:30px;line-height:.9}
.poster.v-mil .pn{font-family:var(--feel);font-style:italic;font-size:30px;line-height:1;padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%23F86E4B' stroke-width='2.4'/%3E%3C/svg%3E") left bottom/24px 8px repeat-x;align-self:flex-start}
.poster.v-therapist .pn{font-family:var(--feel);font-style:italic;font-size:30px;line-height:1}
.poster .pw.swap{animation:pswap .42s cubic-bezier(.3,1.7,.45,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes pswap{0%{transform:translateY(-14%) scale(.96,1.08);opacity:0}100%{transform:none;opacity:1}}
.swipe{display:none;margin-top:4px}
@media (max-width:980px){
  .posters{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:calc(-1 * max(20px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(20px,env(safe-area-inset-right,0px)));padding:12px max(20px,env(safe-area-inset-left,0px)) 22px;scroll-padding-left:max(20px,env(safe-area-inset-left,0px))}
  .posters::-webkit-scrollbar{display:none}
  .poster{flex:0 0 min(72vw,300px);scroll-snap-align:start;min-height:320px}
  .swipe{display:block}
}

/* the moment line: tap a stop or drag the tram; the posters answer */
.mline{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(560px,100%);padding-top:34px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.mline.drag{cursor:grabbing}
.mtrack{position:absolute;left:12.5%;right:12.5%;top:44px;height:6px;background:rgba(84,3,0,.16)}
.mfill{position:absolute;left:0;top:0;bottom:0;width:var(--mp,66.6%);background:var(--ink);transition:width .55s cubic-bezier(.3,1.4,.45,1)}
.mtram,.mghost{position:absolute;top:35px;left:calc(12.5% + var(--mp,66.6%) * .75);width:48px;height:24px;margin-left:-40px;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%)}
.mtram{background:var(--ink);color:var(--acid);display:flex;align-items:center;padding-left:9px;font-family:var(--info);font-weight:700;font-size:11px;letter-spacing:.06em;z-index:2;transition:left .55s cubic-bezier(.3,1.4,.45,1)}
.mline.drag .mtram,.mline.drag .mfill{transition:none}
.mghost{opacity:0;pointer-events:none;z-index:1}
.mghost.g1{background:var(--tomato)} .mghost.g2{background:var(--icy)}
.mstop{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:58px;padding:22px 2px 0;text-align:center;font-family:var(--info);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.25}
.mstop::before{content:"";position:absolute;top:43px;left:50%;width:14px;height:8px;margin-left:-7px;background:var(--paper);clip-path:polygon(0 0,40% 0,50% 60%,60% 0,100% 0,100% 100%,0 100%)}
.mstop.you::before{top:38px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--ink);clip-path:none;box-shadow:0 0 0 4px var(--paper)}
.mstop span{opacity:.55;transition:opacity .2s}
.mstop[aria-checked="true"] span{opacity:1;background:var(--ink);color:var(--acid);padding:3px 6px 2px}
.mstop:hover span{opacity:1}
.mstop:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.mstop{margin-top:-34px;padding-top:64px}
/* posters get pasted up when you arrive, and peel a corner on hover */
.poster.wait{opacity:0;transform:translateY(-46px) rotate(calc(var(--r,0deg) + 9deg)) scale(1.05)!important}
.poster{transition:transform .55s cubic-bezier(.3,1.45,.45,1),box-shadow .35s var(--pin),opacity .18s linear}
.poster::after{content:"";position:absolute;top:0;right:0;width:0;height:0;background:linear-gradient(225deg,var(--paper) 0 50%,rgba(84,3,0,.32) 50% 100%);transition:width .3s var(--pin),height .3s var(--pin)}
@media (hover:hover){.poster:hover::after{width:30px;height:30px}}
.mine-tag{left:12px;right:auto}

/* the ticket starts blank, like the app's empty ticket, and fills in step by step */
.fld{position:relative;display:block}
.fld + .fld{margin-top:10px}
.fld .emp{position:absolute;left:0;top:0;opacity:0;transition:opacity .25s}
.fld .val{display:block;clip-path:inset(-24px -24px -24px -24px);transition:clip-path .65s cubic-bezier(.6,0,.2,1)}
.tk .fld:not(.on) .emp{opacity:.6}
.tk .fld:not(.on) .val{clip-path:inset(-24px 100% -24px 0)}
.vchip{display:inline-flex!important;align-items:baseline;gap:10px}
.vchip .k{display:inline;margin:0}
.vname{font-size:24px;background:var(--ink);color:var(--acid);padding:4px 8px 2px;display:inline-block;transform:rotate(-1.5deg)}
.vname.bump{animation:vbump .45s cubic-bezier(.3,1.7,.45,1)}
@keyframes vbump{0%{transform:rotate(-1.5deg) scale(.7)}100%{transform:rotate(-1.5deg)}}
.sticker{transition:opacity .15s,transform .45s cubic-bezier(.3,1.8,.45,1)}
.tk .ticket:not(.done) .sticker{opacity:0;transform:rotate(-24deg) scale(1.6)}
.how .step{transition:opacity .35s}
.how .n{transition:color .3s,transform .4s var(--pin)}
@media (min-width:900px) and (min-height:640px){
  .tk .how .step:not(.on){opacity:.42}
  .tk .how .step.cur .n{color:var(--tomato);transform:translateX(4px)}
  .tcol{position:sticky;top:max(96px,calc(50vh - 190px));align-self:start}
  .how .step{min-height:min(38vh,320px);align-content:start}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}