@font-face{font-family:'Broadbay';src:url(/story-v34/fonts/broadbay.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'London Presley';src:url(/story-v34/fonts/london-presley.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'CF Paris';src:url(/story-v34/fonts/cf-paris.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Crow Breaking';src:url(/story-v34/fonts/crow-breaking.woff2) format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Handy Quomte';src:url(/story-v34/fonts/handy-quomte.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Crow Audiowide';src:url(/story-v34/fonts/crow-audiowide.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
/* Layout concept: one pinned stage. The tourist world fills the screen in black and white;
   the iPhone is Crow's lens and stays in frame while the world changes around it. */
:root{
  color-scheme:dark;
  --ground:#0A0B0E; --bg:#0E0F13; --panel:#111318; --panel2:#191B23; --well:#16181E;
  --ink:#F4F6F9; --ink2:#C7CBD2; --muted:#9197A1; --faint:#737985; --ghost:#5C616C;
  --rule:#1F2128; --rule2:#2C2F38; --pink:#FF3D81; --live:#1CF2A6;
  --paper:#F4F6F9; --paper-ink:#0E0F13; --paper-2:#E4E7ED;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --wide:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --mark:'Crow Audiowide','Audiowide','Saira Extra Condensed','Arial Narrow',sans-serif;
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','Public Sans',system-ui,sans-serif;
  --gutter-l:max(16px,env(safe-area-inset-left,0px)); --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono)}
.wrap{padding-left:max(24px,var(--gutter-l));padding-right:max(24px,var(--gutter-r))}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:18px;padding-left:max(28px,var(--gutter-l));padding-right:max(28px,var(--gutter-r));
  transition:transform .5s var(--ease),background .4s}
.nav.hide{transform:translateY(-110%)}
.nav.solid{background:linear-gradient(to bottom,rgba(10,11,14,.82),rgba(10,11,14,0))}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--mark);font-weight:400;font-size:23px;line-height:1;letter-spacing:.01em;text-transform:none}
.brand img{width:26px;height:26px;max-width:none}
.nav-links{display:flex;gap:30px;font-size:15px;font-weight:500;transition:opacity .3s}
body.touring .nav-links{opacity:0;pointer-events:none}
.nav-links a{text-decoration:none;color:var(--ink2);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.get{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 6px 0 20px;border-radius:999px;text-decoration:none;
  background:linear-gradient(var(--paper),var(--paper-2));color:var(--paper-ink);font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.get i{width:34px;height:34px;border-radius:50%;background:var(--paper-ink);display:grid;place-items:center;transition:transform .45s var(--ease)}
.get i svg{width:15px;height:15px}
.get:hover{transform:translateY(-2px)}
.get:hover i{transform:rotate(-45deg)}

/* ---------- stage ---------- */
.stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ground)}
.bg{position:absolute;inset:0;overflow:hidden;opacity:0}
.bg.on{opacity:1}
.bg:not(.on){display:none}   /* draft backdrops that never show: don't load or paint them */
#phonePos{display:none!important}   /* the first-draft phone (PHONE=false): never shown, so never load its screens */
.cover{position:absolute;background-size:100% 100%;background-repeat:no-repeat;will-change:transform}
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim.base{background:linear-gradient(180deg,rgba(10,11,14,.5) 0%,rgba(10,11,14,.05) 22%,rgba(10,11,14,.05) 62%,rgba(10,11,14,.6) 100%)}
.scrim.side{opacity:0}
.grain{position:absolute;inset:-60%;pointer-events:none;opacity:.10;mix-blend-mode:overlay;z-index:40;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(3%,-4%)}50%{transform:translate(-4%,2%)}75%{transform:translate(2%,4%)}}

.cover.col{clip-path:circle(0px at 50% 50%);will-change:clip-path}
/* Crow's pick, pinned on the colour world */
.pin{position:absolute;z-index:5;left:0;top:0;opacity:0;display:flex;align-items:flex-start;gap:12px;pointer-events:none}
.pin i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--pink);border:3px solid var(--ink);position:relative;transform:translate(-9px,-9px);box-shadow:0 4px 16px rgba(0,0,0,.45)}
.pin i::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--pink);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.7);opacity:0}}
.pin span{transform:translateY(-14px);font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.45;max-width:240px;text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
.pin span b{display:block;color:var(--pink);font-weight:600}
.pin.flip{flex-direction:row-reverse}
.pin.flip i{transform:translate(9px,-9px)}
.pin.flip span{text-align:right}
/* hero */
.hero-text{position:absolute;z-index:8;display:flex;flex-direction:column;gap:22px}
.h-eyebrow{margin:0;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);display:flex;gap:12px;align-items:center}
.h-eyebrow span{font-family:var(--mark);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);padding-right:12px;border-right:1px solid rgba(244,246,249,.3)}
.brandname{position:absolute;inset:0;margin:0;z-index:6;pointer-events:none;font-weight:400}
.bw{position:absolute;font-family:var(--wide);font-stretch:112%;font-weight:900;text-transform:uppercase;line-height:.76;letter-spacing:-.04em;color:var(--ink);white-space:nowrap;will-change:transform}
.lensnote{position:absolute;z-index:8;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.5;padding:9px 14px 9px 14px;background:rgba(10,11,14,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;border:1px solid rgba(255,61,129,.5)}
.lensnote b{display:block;color:var(--pink);font-weight:600}

.bworld{position:absolute;inset:0;z-index:9;overflow:hidden;background:var(--pink)}
.bworld .sky{position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 10%,#ff6aa0 0%,var(--pink) 45%,#f2306f 100%)}
.ly{position:absolute;max-width:none;display:block;will-change:transform;pointer-events:none}
#bigline{z-index:1}
.ly>.lyi{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.lylight{opacity:0;visibility:hidden}
/* the field guide on its shelf: the painted OPEN THE GUIDE button is a real link */
.fg-hit{position:absolute;left:19.6%;top:58.3%;width:20.6%;height:12.4%;border-radius:999px;pointer-events:auto;cursor:pointer;transition:background .2s}
.fg-hit:hover{background:rgba(255,255,255,.12)}
.fg-hit:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #FF3D81}
/* the painted words on the map are the section links: PLAN, ROUTES, TRUTHS, SPOTS jump to their city */
.fg-p{position:absolute;border-radius:6px;pointer-events:auto;cursor:pointer}
.fg-p:focus-visible{outline:2px solid #0E0F13;outline-offset:3px}
body.compact .fg-p{transform:scale(1.6)}   /* the painted words are small on phones: a bigger, invisible tap target */
.fg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
#brand #heroPass{display:none}
#brand #vjp{display:none}
body.compact .fg-hit{left:12%;top:4%;width:34%;height:82%;border-radius:10px}   /* on phones the whole cover panel is the tap target */   /* the street's houses now run to the left edge */
.bigline{text-shadow:0 6px 40px rgba(200,20,90,.35);position:absolute;left:0;top:0;margin:0;display:flex;gap:.18em;white-space:nowrap;font-family:'Reggae One',var(--wide);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;color:#fff}
.bigline .bl{display:block}
.bigline .ch{display:inline-block;will-change:transform}
.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.route path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 10}
.stop{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-ink);pointer-events:none}
.stop i{width:16px;height:16px;border-radius:50%;background:var(--paper-ink);border:3px solid #fff;flex:none;transform:translate(-8px,0)}
.stop small{display:block;font-weight:500;letter-spacing:.08em;opacity:.7;font-size:11.5px}
.flyer{position:absolute;left:0;top:0;max-width:none;will-change:transform;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(80,0,30,.35))}
.sun{position:absolute;border-radius:50%;background:#fff;overflow:hidden;will-change:transform;box-shadow:0 0 60px rgba(255,255,255,.35)}
.rays{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.rspin{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -5.6deg,rgba(255,255,255,.34) 0deg 11.25deg,rgba(255,255,255,0) 11.25deg 22.5deg);-webkit-mask-image:radial-gradient(circle,#000 18%,rgba(0,0,0,.85) 40%,transparent 70%);mask-image:radial-gradient(circle,#000 18%,rgba(0,0,0,.85) 40%,transparent 70%);animation:rayspin 120s linear infinite}
@media (prefers-reduced-motion:reduce){.rspin{animation:none}}
@keyframes rayspin{to{transform:rotate(360deg)}}
.sun i{position:absolute;left:0;right:0;height:5%;background:var(--pink)}
.sun i:nth-child(1){top:24%;height:3%}.sun i:nth-child(2){top:32%;height:4%}.sun i:nth-child(3){top:41%;height:5.5%}.sun i:nth-child(4){top:51.5%;height:7.5%}
.scrawl{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.scrawl .sc{fill:none;stroke:var(--paper-ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.mnote{position:absolute;z-index:4;margin:0;font-family:'Permanent Marker','Marker Felt',cursive;font-size:clamp(17px,1.45vw,24px);line-height:1.05;color:var(--paper-ink);transform:rotate(-5deg);transform-origin:left center;pointer-events:none;white-space:nowrap}
.mnote small{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-ink);opacity:.75}
.cnote-unused{position:absolute;z-index:4;display:flex;align-items:flex-start;gap:0;pointer-events:none}
.cnote i{position:relative;flex:none;width:var(--lead,64px);height:1px;background:var(--paper-ink);margin-top:11px}
.cnote i::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--paper-ink);box-shadow:0 0 0 3px #fff}
.cnote div{background:var(--paper-ink);color:var(--ink);font-size:13px;line-height:1.4;padding:8px 12px 9px;border-radius:10px;max-width:220px}
.cnote b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);font-weight:600;margin-bottom:2px}
.cnote.left{flex-direction:row-reverse}
.cnote.left i::before{left:auto;right:-5px}
@keyframes spin{to{transform:rotate(360deg)}}
#brand.leaving :is(#heroPass,.mnote,#scrawl,#vjp,.petals){opacity:0!important;transition:opacity .3s}
#brand :is(#heroPass,.mnote,#scrawl,#vjp,.petals){transition:opacity .3s}
.lworld{position:absolute;inset:0;z-index:6;overflow:hidden;background:#fff;opacity:0;visibility:hidden}
.lworld::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:radial-gradient(#0E0F13 .6px,transparent .7px);background-size:5px 5px}
.lline{position:absolute;left:0;top:0;margin:0;display:flex;white-space:nowrap;font-family:'Reggae One',var(--wide);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;color:var(--paper-ink)}
.lline .ch{display:inline-block;will-change:transform}
.lline .bl{display:block;overflow:hidden;padding:.06em .03em .16em;margin:-.06em -.03em -.16em}
.lroute{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lroute path{fill:none;stroke:var(--pink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.ltram{position:absolute;left:0;top:0;max-width:none;pointer-events:none;will-change:transform;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.ltag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;pointer-events:none}
.ltag i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--pink);border:4px solid var(--paper-ink);transform:translateX(-10px)}
.ltag span{background:#fff;border:2px solid var(--paper-ink);border-radius:10px;padding:7px 11px 8px;font-family:'Permanent Marker','Marker Felt',cursive;font-size:15px;line-height:1.15;color:var(--paper-ink);max-width:230px;box-shadow:4px 4px 0 var(--paper-ink)}
.ltag b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--pink);font-weight:600;margin-bottom:2px}
.lnote{z-index:9;opacity:0;background:#fff;border:2px solid var(--paper-ink);border-radius:10px;padding:8px 12px 9px;box-shadow:4px 4px 0 var(--paper-ink);transform:rotate(-3deg)}
.lworld .ltag{opacity:0}
.lworld{--dim:0}
.lworld::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 36%,rgba(255,255,255,0) 52%);opacity:var(--dim)}
.lpass{position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none;visibility:hidden}
.flybg{position:absolute;inset:0;z-index:5;background:#fff;visibility:hidden}
.cl{position:absolute;left:0;top:0;will-change:transform}
.cl .blk{background:#fff}
.cl img{position:absolute;left:0;display:block;width:100%;max-width:none;transform:scaleY(-1)}
.cl img.m{transform:scale(-1,-1)}
#cl0{opacity:.96}
#cl0,#cl1,#cl2,#flyLine{display:none}
#cl2{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%);mask-image:linear-gradient(180deg,transparent 0,#000 40%)}
#flyPath{fill:none;stroke:var(--pink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
#lnRoute path{display:none}
.cloudwrap{position:absolute;left:0;top:0;will-change:transform}
.cloudwrap img{position:absolute;left:0;display:block;max-width:none;width:100%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 99%);mask-image:linear-gradient(180deg,#000 70%,transparent 99%)}
.cloudwrap .cback{position:absolute;left:0;right:0;background:#fff}
.cloudwrap img.m{transform:scaleX(-1)}
.cloudwrap img.flip{transform:scaleY(-1)}
.cloudwrap img.flip.m{transform:scale(-1,-1)}
.lplane{position:absolute;left:0;top:0;max-width:none;transform-origin:30% 60%;will-change:transform;filter:drop-shadow(0 18px 22px rgba(0,0,0,.16))}
/* each city speaks in its own type: Kyoto Reggae One, Lisbon a fat poster serif, London a punk blackletter */
/* Lisbon: the words are pink laundry, pegged on two washing lines across the street */
.lhang{position:absolute;inset:0;margin:0;pointer-events:none;font-family:'Abril Fatface',Georgia,serif;font-weight:400;line-height:1;text-transform:uppercase}
.lwire{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lwire path{fill:none;stroke:var(--paper-ink);stroke-width:2.5;stroke-linecap:round}
.lw{position:absolute;left:0;top:0;transform-origin:50% 0;will-change:transform}
.lw i{display:inline-block;font-style:normal;color:var(--pink);-webkit-text-stroke:.05em var(--paper-ink);paint-order:stroke fill;transform-origin:50% 0;animation:sway var(--sd,3.4s) ease-in-out var(--dl,0s) infinite alternate}
.lw b{position:absolute;left:50%;top:var(--pt,0);width:.075em;height:.3em;margin-left:-.0375em;border-radius:.02em;background:linear-gradient(90deg,var(--paper-ink) 38%,#fff 38% 56%,var(--paper-ink) 56%);z-index:2}
@keyframes sway{from{transform:rotate(-2.6deg)}to{transform:rotate(2.6deg)}}
@media (prefers-reduced-motion:reduce){.lw i{animation:none}}
/* London: the plane writes the words across the sky */
#lnLine{--wr:0px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--wr) - 70px),transparent calc(100% - var(--wr)));mask-image:linear-gradient(90deg,#000 calc(100% - var(--wr) - 70px),transparent calc(100% - var(--wr)))}
.lsmoke{position:absolute;inset:0;pointer-events:none}
.lsmoke{width:100%;height:100%;overflow:visible}
.lsmoke path{fill:#fff;stroke:var(--paper-ink);stroke-width:1.6;stroke-linejoin:round}
#lnLine{font-family:'London Presley','New Rocker',serif;text-transform:none;letter-spacing:0;color:var(--pink);-webkit-text-stroke:.05em var(--paper-ink);paint-order:stroke fill}
#lnLine .ch{-webkit-text-stroke:.045em var(--paper-ink);paint-order:stroke fill}
#lnLine.seg .bl{display:contents}
#lnLine.seg .ch{position:absolute}
#lnPlane2,#lnSmoke{z-index:4}
#lFar,#lNear{display:none}
#lPink{--lv:100%;clip-path:inset(var(--lv) 0 0 0)}
#lRoutePath{stroke:none}
.ltram{transform-origin:45% 88%}
/* Paris: the truth, in the rain */
#paLine{font-family:'CF Paris','Bodoni Moda',Didot,serif;font-style:normal;font-weight:400;text-transform:none;letter-spacing:.01em}
#paLine,#paLine .ch{color:var(--pink);-webkit-text-stroke:.012em var(--paper-ink);paint-order:stroke fill}
#paLine .bl{display:block}
#paPink{overflow:visible}
.rainfx{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none}
/* ---- the journey between cities: a route line, engraved clouds, ink and rain reveals ---- */
/* the four cities sit above the Japanese hero so each can be revealed over it; the live chapter bar and notes stay above them */
.lworld.twc{z-index:10}
.routefx{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;overflow:visible;visibility:hidden}
/* the route: a neon thread, pink dashes with a light core over a soft glow; city stops are open rings; a pin where it lands */
.routefx .rtg{fill:none;stroke:#FF3D81;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.28;vector-effect:non-scaling-stroke}
.routefx .rt{fill:none;stroke:#FF3D81;stroke-width:5;stroke-dasharray:14 10;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.routefx .rtc{fill:none;stroke:#FFE3EE;stroke-width:1.6;stroke-dasharray:14 10;stroke-linecap:round;vector-effect:non-scaling-stroke}
.routefx .rtstop{fill:#fff;stroke:#FF3D81;stroke-width:4;vector-effect:non-scaling-stroke}
.routefx .rtarrow{fill:none;stroke:#FF3D81;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,61,129,.9))}
body.compact .routefx .rtg{stroke-width:9}
body.compact .routefx .rt{stroke-width:3.6;stroke-dasharray:10 8}
body.compact .routefx .rtc{stroke-width:1.2;stroke-dasharray:10 8}
.ly .lyblur{opacity:0}
/* the journey runs right: the cities stand side by side and the camera moves along them. Where a city meets the last one
   its left edge is shaped: Marrakech tears in ragged over Japan (--tx holds the tear at the edge, then moves it off),
   London and New York have a soft edge, Paris the rain's slant (--ef: 1 while they meet, 0 once the city has arrived) */
.mk-tear{-webkit-mask-image:url(/story-v34/img/ink-tear.png);mask-image:url(/story-v34/img/ink-tear.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--fw,100vw)*3) var(--fh,100vh);mask-size:calc(var(--fw,100vw)*3) var(--fh,100vh);-webkit-mask-position:var(--tx,-200vw) 0;mask-position:var(--tx,-200vw) 0}
/* panned in: the drawing arrives whole with the camera; its colour comes up after */
.lworld.twc.mk-fade{--cp:0}   /* every city starts as ink; inkFrame washes its colour in once it has landed */
.lworld.twc.mk-fade .twmood{opacity:var(--cp,1)!important}
#twNyc.mk-fade .twmood{opacity:1!important;-webkit-mask-image:radial-gradient(circle at calc(var(--lx,80vw) - var(--ox,0px)) calc(var(--ly,60vh) - var(--oy,0px)),#000 calc(var(--cp,1)*230vmax - 18vmax),transparent calc(var(--cp,1)*230vmax));mask-image:radial-gradient(circle at calc(var(--lx,80vw) - var(--ox,0px)) calc(var(--ly,60vh) - var(--oy,0px)),#000 calc(var(--cp,1)*230vmax - 18vmax),transparent calc(var(--cp,1)*230vmax))}
/* rain to light: New York comes in from the right, across the street, as the rain turns to neon */
.mk-edge{-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--ef,0)*3%),#000 calc(var(--ef,0)*15%));mask-image:linear-gradient(90deg,transparent calc(var(--ef,0)*3%),#000 calc(var(--ef,0)*15%))}
.mk-slant{-webkit-mask-image:linear-gradient(74deg,transparent calc(var(--ef,0)*6%),#000 calc(var(--ef,0)*20%));mask-image:linear-gradient(74deg,transparent calc(var(--ef,0)*6%),#000 calc(var(--ef,0)*20%))}
.cloudfx{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden;visibility:hidden}
/* between two cities: the city we're leaving darkens and drifts back while the route crosses it, then the next city opens
   as a circle from the phone the route lands on. One city never shows through the other; the circle's edge is clean */
.handdim{position:absolute;inset:0;z-index:9;pointer-events:none;background:#060608;opacity:0;visibility:hidden}
.irisring{position:absolute;left:0;top:0;z-index:11;pointer-events:none;border-radius:50%;border:2px solid #FF3D81;box-shadow:0 0 22px rgba(255,61,129,.55),inset 0 0 22px rgba(255,61,129,.35);visibility:hidden;will-change:transform,width,height}
.cloudfx img{position:absolute;left:0;top:0;max-width:none;height:auto;will-change:transform}
/* the colour of each city is drawn in by scroll (its mask), not by a timed fade */
.lworld.twc .twmood{opacity:1!important;transition:none!important}
/* ink reveal: an ink-edged blot grows from an anchor (--mx,--my); --wp opens the drawing, --cp its colour a little behind */
/* rain reveal: a soft edge running at the rain's slant, left to right */
/* reflection reveal: up from the wet street into the skyline */
/* a gradient mask on a layer larger than the screen is drawn in screen space: sized to the frame, placed at the frame's corner */
@media (prefers-reduced-motion:reduce){.routefx,.cloudfx,.irisring,.handdim{display:none}}
/* if the ink mask can't load, every city still shows: the reveals fall back to plain cuts */
body.nomask .mk-tear{-webkit-mask-image:none!important;mask-image:none!important}
.rainveil{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;visibility:hidden;background:repeating-linear-gradient(104deg,rgba(14,15,19,.5) 0 2px,rgba(14,15,19,0) 2px 7px,rgba(14,15,19,.28) 7px 8px,rgba(14,15,19,0) 8px 15px),#d9dbe0}
/* New York: the lights come on and the sign flickers to life */
#nyc{background:#0b0b0e}
#nyc::after{opacity:.05;background-image:radial-gradient(#fff .6px,transparent .7px)}
#nyLine{font-family:'Broadbay','Tilt Neon',sans-serif;text-transform:none;letter-spacing:.01em}
#nyLine.seg .bl{display:contents}
#nyLine.seg .ch{position:absolute}
#nyLine .ch{color:#3b2b33;transition:none}
#nyLine .bl{overflow:visible}   /* the neon glow must not be clipped to each line (it showed as boxes on iPhone) */
#nyLine .ch.lit{color:#ffe9f1;text-shadow:0 0 .02em #fff,0 0 .07em #ff3d81,0 0 .18em #ff3d81,0 0 .42em rgba(255,61,129,.75),0 0 .9em rgba(255,61,129,.35)}
#nyc .ltag span{box-shadow:4px 4px 0 var(--pink)}
/* transitions: the Eurostar tunnel, the umbrella, the window */
.tunfx{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;display:block;visibility:hidden}
.umbfx{position:absolute;left:0;top:0;z-index:11;pointer-events:none;overflow:visible;visibility:hidden;opacity:0;will-change:transform}
.umbfx .can{fill:var(--pink);stroke:#0E0F13;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.umbfx .ribs line{stroke:#0E0F13;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.pinkwin{position:absolute;left:0;top:0;width:100%;height:100%;z-index:7;pointer-events:none;visibility:hidden;opacity:0;box-sizing:border-box;
  /* a real lit window: dark frame, a cross of glazing bars, pink light brightest in the middle, curtains darkening the edges */
  border:.1em solid #0b0b0e;background:linear-gradient(90deg,rgba(150,10,62,.55),rgba(150,10,62,0) 22%,rgba(150,10,62,0) 78%,rgba(150,10,62,.55)),radial-gradient(ellipse 70% 60% at 50% 42%,#ffe0ea 0%,#ff9cc0 28%,#FF3D81 64%,#e8306f 100%);
  box-shadow:0 0 18px rgba(255,61,129,.55)}
@media (max-width:759px),(max-aspect-ratio:21/20){
  .grain{display:none}                       /* full-screen blend-mode noise: a second copy of the whole page on the GPU */
  .rspin{animation:none} .rays{will-change:auto}
  .petals.front{filter:none}
  .cover,.ly{will-change:auto}               /* only promote layers while they actually move */
  #nyc .nyl[src*="ny-lights1"],#nyc .nyl[src*="ny-lights3"],#nyc .nyl[data-src*="ny-lights1"],#nyc .nyl[data-src*="ny-lights3"]{display:none!important}  /* 3 light stages, not 5 */
}
.winwall{position:absolute;inset:-2px;z-index:7;pointer-events:none;background:#0b0b0e;opacity:0}
.pinkwin::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:.08em;margin-left:-.04em;background:#0b0b0e}
.pinkwin::after{content:"";position:absolute;left:0;right:0;top:47%;height:.08em;background:#0b0b0e;box-shadow:0 .03em 0 rgba(255,255,255,.12)}
.nightveil{position:absolute;inset:0;z-index:10;pointer-events:none;background:#0b0b0e;opacity:0;visibility:hidden}
#lnFront{display:none}
/* London, up close: a pink phone box on the corner and a black cab pulling away */
.lnfg{position:absolute;inset:0;pointer-events:none;z-index:4}
.lnfg img{position:absolute;max-width:none;height:auto}
.lnfg .pbox{left:-1vw;bottom:0;height:min(42vh,40vw);width:auto;filter:drop-shadow(10px 0 0 rgba(14,15,19,.08))}
.lnfg .cab{right:-4vw;bottom:-7vh;width:min(28vw,440px)}
body.compact .lnfg .pbox{height:23vh;left:-8vw;bottom:7vh}
body.compact .lnfg .cab{display:none}
/* the sky: drifting ink clouds over London, a low rain ceiling over Paris, a moon and stars over New York */
.skyp{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#lnSky img{position:absolute;max-width:none;height:auto;animation:cloudsway var(--cd,80s) ease-in-out var(--cdl,0s) infinite alternate}
@keyframes cloudsway{from{transform:translateX(-3vw)}to{transform:translateX(4vw)}}
#paSky img{position:absolute;left:-4%;top:calc(-1 * var(--pcut,19.5vw));width:108%;height:auto;max-width:none;opacity:.8;animation:rainsky 60s ease-in-out infinite alternate}
body.compact #paSky img{--pcut:0px;opacity:1}
@keyframes rainsky{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
@media (prefers-reduced-motion:reduce){#lnSky img,#paSky img{animation:none}}
.nyframe{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.nyframe path{fill:none;stroke:#F4F6F9;stroke-linecap:square;stroke-linejoin:miter}
.nyframe .nf-r{stroke-width:3;opacity:.85}.nyframe .nf-s{stroke-width:2;opacity:.6}.nyframe .nf-b{stroke-width:1.2;opacity:.45}
.nymoon{position:absolute;pointer-events:none;width:clamp(96px,12vw,200px);right:8vw;top:12vh;max-width:none;filter:drop-shadow(0 0 30px rgba(244,246,249,.25))}
@media (prefers-reduced-motion:reduce){.skyc{animation:none}}
/* ambient life */
.ambfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
#lnWake .wf{stroke:#fff;opacity:.9}
#lnWake .wi{stroke:#0E0F13;opacity:.55}
.lw i{rotate:calc(var(--g,0)*1deg)}
/* Lisbon: the washing in the street flaps on its lines */
#lCloth .lcl{position:absolute;max-width:none;display:block;transform-origin:50% 0;rotate:calc(var(--g,0)*.45deg);animation:flap var(--sd,2.6s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes flap{from{transform:skewX(calc(var(--fa,3deg)*-1)) scaleY(1)}to{transform:skewX(var(--fa,3deg)) scaleY(.975)}}
@media (prefers-reduced-motion:reduce){#lCloth .lcl{animation:none}}
/* a little depth under the pointer: nearer layers drift further */
.lworld{--px:0;--py:0}
#lline{translate:calc(var(--px)*18px) calc(var(--py)*8px)!important}
#lMid,#lPink,#lCloth,#lTramWrap,#lTag1,#lTag2{translate:calc(var(--px)*10px) calc(var(--py)*5px)!important}
#lnLine,#lnNot{translate:calc(var(--px)*4px) calc(var(--py)*2px)!important}
#lnPaper,#lnRiver,#lnEye,#lnCity,#lnBoatS,#lnTag1,#lnTag2{translate:calc(var(--px)*12px) calc(var(--py)*6px)!important}
#lnNear{translate:calc(var(--px)*28px) calc(var(--py)*12px)!important}
#lnFg{translate:calc(var(--px)*44px) calc(var(--py)*16px)!important}
#paLine{translate:calc(var(--px)*4px) calc(var(--py)*2px)!important}
#paCity,#paPink,#paFx,#paTag1,#paTag2{translate:calc(var(--px)*12px) calc(var(--py)*6px)!important}
#nyLine,#nyFrame{translate:calc(var(--px)*4px) calc(var(--py)*2px)!important}
#nyCity,#nyc .nyl,#nyFx,#pinkWin,#nyTag1,#nyTag2{translate:calc(var(--px)*12px) calc(var(--py)*6px)!important}
#lnEyeC{position:absolute;left:43%;top:16.734%;width:6.769%;height:20.161%;display:block}
#lnLine{width:100%;height:100%}
.lnot{position:absolute;left:0;top:0;z-index:4;pointer-events:none;transform-origin:50% 50%}
.lnot svg{display:block;width:100%;height:100%;overflow:visible}

/* Crow's notes in London, Paris and New York: written straight onto the scene in marker, like the hero */
/* Crow's notes: a dark card with white marker writing, pointed at the spot by an arrow drawn on the scene */
.lworld .ltag{align-items:flex-start;gap:0}
.lworld .ltag i{width:14px;height:14px;border:3px solid var(--paper-ink);margin-top:-2px;transform:none}
.lworld .ltag span{position:relative;background:var(--paper-ink);color:#F4F6F9;border:0;box-shadow:5px 5px 0 var(--pink);
  padding:10px 15px 11px;margin:24px 0 0 36px;max-width:280px;font-family:'Permanent Marker','Marker Felt',cursive;
  font-size:clamp(16px,1.25vw,20px);line-height:1.12;transform:rotate(-2.5deg);transform-origin:0 0;
  border-radius:4px 14px 6px 12px/12px 6px 14px 4px}
.lworld .ltag span::before{content:"";position:absolute;left:-42px;top:-31px;width:42px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M44 6 C30 2 14 6 6 22 M6 22 L5 11 M6 22 L16 19' fill='none' stroke='%230E0F13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.lworld .ltag b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--pink);font-weight:600;margin-bottom:4px}
/* New York is black, so its notes are pink */
#nyc .ltag span{background:var(--pink);color:#fff;box-shadow:5px 5px 0 #F4F6F9}
#nyc .ltag b{color:var(--paper-ink)}
#nyc .ltag span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M44 6 C30 2 14 6 6 22 M6 22 L5 11 M6 22 L16 19' fill='none' stroke='%23F4F6F9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#nyc .ltag i{border-color:#F4F6F9}
/* a note that sits to the left of what it points at */
.lworld .ltag.pl{flex-direction:row-reverse}
.lworld .ltag.pl span{margin:24px 36px 0 0;transform:rotate(2deg);transform-origin:100% 0}
.lworld .ltag.pl span::before{left:auto;right:-42px;transform:scaleX(-1)}
#lTag2 span,#paTag2 span{max-width:220px}
/* phone: the card sits right beside its dot, no arrow */
body.compact .lworld .ltag.side span{margin:-34px 0 0 14px;transform:rotate(-1.5deg)}
body.compact .lworld .ltag.side span::before{display:none}

/* ---- Crow, live: the real Trip Mode screen rises from the bottom edge; its real cards pop out over it.
   Everything inside is built at iPhone points (393 wide) from the app's own tokens, then scaled. ---- */
.lworld .ltag,#lnDot{display:none!important}
.tip{position:absolute;inset:0;z-index:12;pointer-events:none;visibility:hidden;font-family:var(--body)}
.tp-phone{position:absolute;will-change:transform}
.tp-phone .dv-root{display:block}
.tp-phone::before{content:"";position:absolute;left:-60%;right:-60%;top:-14%;bottom:-10%;background:radial-gradient(closest-side,rgba(14,15,19,.42),rgba(14,15,19,.18) 55%,transparent);pointer-events:none}
.tp-isl{visibility:hidden}
.tp-scr{position:relative;width:100%;height:100%;border-radius:43px;overflow:hidden;background:#0E0F13}
.tp-n{position:absolute;left:0;top:0;width:393px;transform-origin:0 0}
.tp-ghost{z-index:5;pointer-events:none;opacity:0;visibility:hidden}
/* OnTripBackground: the city, soft, under the app's dark gradient */
.tp-bg{position:absolute;left:0;top:0;width:393px;height:560px;background-size:cover;background-position:50% 40%;filter:blur(1.5px) saturate(1.1);transform:scale(1.03)}
.tp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,15,.5) 0%,rgba(10,11,15,.4) 14%,rgba(12,13,17,.45) 50%,rgba(14,15,19,.62) 56%,rgba(14,15,19,.9) 66%,#0E0F13 72%)}
.tp-sb{position:relative;display:flex;align-items:center;justify-content:space-between;height:54px;padding:6px 34px 0 46px;font:600 17px/1 var(--sf);color:#fff}
.tp-isl{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.tp-ic{display:flex;gap:6px;align-items:center}
.tp-ic i{display:block;background:#fff;border-radius:2px}
.tp-hd{position:relative;display:flex;align-items:flex-start;padding:14px 20px 0}
.tp-city{font:700 44px/1 var(--display);text-transform:uppercase;color:#F4F6F9;text-shadow:0 3px 10px rgba(0,0,0,.5);letter-spacing:0}
.tp-date{display:inline-flex;align-items:center;gap:2px;margin-top:8px;height:28px;padding:0 2px;border-radius:14px;background:rgba(0,0,0,.56);font:600 12px/1 var(--mono);letter-spacing:.95px;color:#F4F6F9;text-transform:uppercase}
.tp-date i{width:28px;text-align:center;font-style:normal;color:#F4F6F9;font-size:13px}
.tp-date i.off{color:#5C616C}
.tp-w{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.tp-dots{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);display:grid;place-items:center;color:#F4F6F9;font:700 15px/1 var(--sf);letter-spacing:1px}
.tp-temp{font:600 34px/1 var(--mono);color:#F4F6F9;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.tp-cond{font:600 11px/1 var(--mono);letter-spacing:.55px;color:#C7CBD2;text-transform:uppercase;margin-top:2px}
.tp-line{position:relative;display:flex;gap:12px;padding:22px 16px 6px 16px}
.tp-rail{position:relative;width:22px;flex:none}
.tp-rail::before{content:"";position:absolute;left:10px;top:0;bottom:-400px;width:2px;background:#2C2F38}
.tp-node{position:relative;margin:3px auto 0;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--pink);background:#0E0F13;box-sizing:border-box;display:grid;place-items:center}
.tp-node::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:tpPulse 3s ease-in-out infinite}
@keyframes tpPulse{50%{opacity:.55}}
.tp-now{flex:1;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(38,40,49,.86),rgba(24,26,32,.94));box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 22px rgba(0,0,0,.5)}
.tp-media{height:150px;background-size:cover;background-position:50% 40%}
.tp-nb{padding:14px 16px 16px}
.tp-eb{font:600 10px/1 var(--mono);letter-spacing:1.4px;color:var(--pink);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.tp-eb .lv{width:6px;height:6px;border-radius:50%;background:#00C16A}
.tp-later{position:relative;display:flex;gap:12px;padding:0 16px}
.tp-later .tp-rail .lt{margin:22px auto 0;width:12px;height:12px;border-radius:50%;border:1.5px solid #3A3E47;background:#0E0F13;box-sizing:border-box;position:relative}
.tp-lr{flex:1;display:flex;align-items:center;gap:12px;padding:6px 0 16px}
.tp-lr em{font:500 13.5px/1 var(--mono);font-style:normal;color:#9197A1;width:44px}
.tp-lr i{width:52px;height:52px;border-radius:10px;background-size:cover;background-position:50% 50%;flex:none}
.tp-lr b{font:700 25px/1 var(--display);text-transform:uppercase;color:#C7CBD2;font-weight:700}
.tp-ttl{font:700 24px/1.02 var(--display);text-transform:uppercase;color:#F4F6F9;letter-spacing:.2px;margin-top:8px}
/* the flight screen: FlightStatusView — satellite map, the flown track in pink, the rest dashed, the summary panel */
.tp-fl{position:absolute;left:0;top:0;width:393px;height:852px;display:none;background:#0A0B0E}
.tip[data-k="flight"] .tp-fl{display:block}
.tip[data-k="flight"] .tp-td{display:none}
.tp-map{position:absolute;inset:0;background-color:#0B1736;background-size:768px 432px;background-position:-188.6px 6px;background-repeat:no-repeat}
.tp-map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 14%)}
.tp-fsvg{position:absolute;left:0;top:0;width:393px;height:852px;overflow:visible}
.tp-ap{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-100%)}
.tp-ap b{font:600 13px/1 var(--mono);color:#F4F6F9;background:#111318;border-radius:6px;padding:6px 9px}
.tp-ap i{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px #fff;margin-bottom:-4.5px}
.tp-ac{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(17,19,24,.8);filter:drop-shadow(0 1px 2px #000);display:grid;place-items:center}
.tp-ac img{width:26px;height:26px;display:block}
.fl-ctl{position:absolute;right:16px;top:113px;width:48px;height:195px;border-radius:24px;background:rgba(30,32,38,.5);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(244,246,249,.16);display:flex;flex-direction:column;align-items:center;justify-content:space-around;color:#F4F6F9}
.fl-ctl span{width:48px;height:47px;display:grid;place-items:center;position:relative}
.fl-ctl span+span::before{content:"";position:absolute;top:0;left:10px;width:28px;height:1px;background:rgba(244,246,249,.12)}
.fl-ctl svg{width:19px;height:19px}.fl-ctl img{width:21px;height:21px}
.fl-bk{position:absolute;left:16px;top:56px;width:44px;height:44px;border-radius:50%;background:rgba(40,42,50,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2);display:grid;place-items:center;color:#F4F6F9}
.fl-bk svg{width:18px;height:18px}
.tp-ro{position:absolute;top:113px;left:16px;right:80px;display:flex;justify-content:center}
.tp-ro div{padding:9px 12px;border-radius:24px;background:rgba(40,42,50,.55);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);text-align:center;color:#F4F6F9;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.tp-ro span{display:inline-flex;align-items:center;gap:5px;margin:0 6px}
.tp-ro svg{width:13px;height:13px}
.tp-ro small{display:block;margin-top:5px;font:400 13px/1 var(--mono);color:#C7CBD2}
.tp-pn{position:absolute;left:0;right:0;top:434px;bottom:0;background:#111318;border-radius:32px 32px 0 0;box-shadow:inset 0 1px 0 rgba(244,246,249,.08)}
.tp-grab{width:34px;height:4px;border-radius:2px;background:rgba(145,151,161,.65);margin:10px auto 12px}
.tp-ph{display:flex;align-items:center;gap:12px;padding:0 20px 16px}
.tp-ph .lg{width:32px;height:32px;border-radius:8px;background:#fff;display:grid;place-items:center;font:700 11px/1 var(--sf);color:#0E0F13;flex:none}
.tp-ph .tx{flex:1}
.tp-ph .tx small{display:block;font:400 13px/1 var(--mono);color:#9197A1}
.tp-ph .tx b{display:block;margin-top:5px;font:600 19px/1.1 var(--body);color:#F4F6F9}
.tp-ph .el{width:44px;height:44px;border-radius:50%;background:#191B23;display:grid;place-items:center;color:#F4F6F9;font:700 16px/1 var(--sf);letter-spacing:1px}
.tp-ph .ch{width:32px;text-align:center;color:#F4F6F9;font:600 15px/1 var(--sf)}
.tp-band{margin:0 20px;padding:14px;border-radius:6px;background:rgba(0,193,106,.1);color:#00C16A;font:600 17px/1 var(--body);display:flex;align-items:center;gap:8px}
.tp-band svg{width:17px;height:17px}
.tp-dep{display:flex;justify-content:space-between;margin:10px 20px 0}
.tp-dl{display:flex;align-items:center;gap:7px;margin:22px 20px 0;font:600 17px/1 var(--body);color:#F4F6F9}.tp-dl svg{width:18px;height:18px}
.tp-dep .t{font:700 36px/1 var(--display);color:#00C16A}
.tp-dep small{display:block;margin-top:6px;font:400 13px/1 var(--mono);color:#9197A1}
.tp-dep small.g{color:#00C16A}
.tp-dep .g{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.tp-dep .g b{background:#FFD60A;color:#0E0F13;border-radius:6px;padding:7px 11px;font:700 18px/1 var(--body)}
.tp-dep .g span{font:400 13px/1 var(--mono);color:#9197A1}
/* the on-trip tab bar (iOS 26 Liquid Glass): Today · Near me · Ask · Translate, pink when selected */
/* Today (TripTodayView, iPhone): 240pt photo strip, header on it, the line with a pulsing NOW node, the white paper NOW card,
   later stops (pink ring on the next), day dots above the floating tab bar */
.tp-td{position:absolute;left:0;top:0;width:393px;height:852px;background:#0A0B0E;overflow:hidden;text-transform:none;color:#F4F6F9}
.td-hero{position:absolute;left:0;top:0;width:393px;height:240px;background:#24262D 50% 45%/cover}
.td-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.85) 0%,rgba(10,11,14,.28) 55%,rgba(10,11,14,.8) 88%,#0A0B0E 100%)}
.td-hd{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;padding:13px 18px 10px}
.td-city{font:700 44px/1 var(--display);text-transform:uppercase;text-shadow:0 3px 10px rgba(0,0,0,.5)}
.td-pg{display:flex;align-items:center;gap:2px;margin-top:6px;min-height:28px;font:600 14.6px/1 var(--mono);letter-spacing:.95px}
.td-pg i{width:28px;height:28px;display:grid;place-items:center;color:#F4F6F9}
.td-pg i:first-child{opacity:.35}
.td-pg i svg{width:13px;height:13px}
.td-w{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.td-menu{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#F4F6F9;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.28)}
.td-menu svg{width:17px;height:17px}
.td-w b{margin-top:2px;font:600 38.3px/1 var(--mono);text-shadow:0 2px 8px rgba(0,0,0,.85)}
.td-w small{font:600 13.5px/1 var(--mono);letter-spacing:.55px;color:#C7CBD2;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.td-tl{position:relative;z-index:1;padding:8px 18px 0}
.td-lr{display:flex;gap:12px}
.td-rl{position:relative;width:22px;flex:none}
.td-rl i{position:absolute;left:10px;width:2px}
.td-rl .a{top:0;height:15px;background:rgba(255,61,129,.55)}
.td-rl .b{top:15px;bottom:0;background:#2C2F38}
.td-rl .nd{position:absolute;left:2px;top:6px;width:18px;height:18px;border-radius:50%;box-sizing:border-box;border:2.5px solid var(--pink);background:#0E0F13;display:grid;place-items:center}
.td-rl .nd u{width:7px;height:7px;border-radius:50%;background:#fff;animation:tdPulse 1.1s ease-in-out infinite alternate}
@keyframes tdPulse{to{opacity:.55}}
.td-nc{flex:1;min-width:0;padding-bottom:14px}
.td-nt{display:flex;align-items:baseline;gap:12px;padding-bottom:14px}
.td-nt em{font:600 13px/1 var(--mono);font-style:normal}
.td-nt b{flex:1;font:700 24px/1.05 var(--display);text-transform:uppercase}
.td-nt span{font:600 13px/1 var(--mono);color:var(--pink)}
.td-card{border-radius:22px;overflow:hidden;background:#F4F6F9}
.td-ph{height:190px;background:#24262D 50% 45%/cover}
.td-cb{padding:15px;display:flex;flex-direction:column;gap:9px}
.td-k{display:flex;justify-content:space-between;font:600 13px/1 var(--mono);letter-spacing:1px;color:#5C616C}
.td-k span+span{font-weight:500;letter-spacing:0}
.td-cb p{margin:0;font:400 17px/1.35 var(--body);color:#0E0F13}
.td-bt{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.td-bt+.td-bt{margin-top:-1px}
.td-bt span{height:34px;padding:0 14px;border-radius:17px;box-shadow:inset 0 0 0 1px #B8BDC7;display:grid;place-items:center;font:600 13px/1 var(--mono);color:#0E0F13}
.td-bt span.f{background:#0E0F13;color:#F4F6F9;box-shadow:none}
.td-lt{display:flex;gap:12px}
.td-lt .td-rl .b{top:0;background:#2C2F38}
.td-lt .td-rl .ring{position:absolute;left:5px;top:3px;width:12px;height:12px;border-radius:50%;box-sizing:border-box;border:1.5px solid #3A3E47;background:#0E0F13}
.td-lt.nx .td-rl .ring{left:4px;top:6px;width:14px;height:14px;border-color:var(--pink)}
.td-lr2{flex:1;display:flex;align-items:center;gap:12px;padding:4px 0 22px}
.td-lr2 em{font:500 16.2px/1 var(--mono);font-style:normal;color:#9197A1}
.td-lr2 i{width:52px;height:52px;flex:none;border-radius:10px;background:#24262D center/cover}
.td-lr2 b{font:700 25px/1.05 var(--display);text-transform:uppercase;color:#C7CBD2}
.td-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:104px;display:flex;gap:0;padding:0 8px;border-radius:999px;background:rgba(0,0,0,.28)}
.td-dots i{width:22px;height:22px;display:grid;place-items:center}
.td-dots i::before{content:"";width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
.td-dots i.on::before{width:18px;background:var(--pink)}
.tp-tabs{position:absolute;left:21px;right:21px;top:766px;height:62px;border-radius:31px;background:rgba(36,37,43,.66);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;padding:0 5px}
.tp-tabs span{position:relative;flex:1;height:52px;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#F4F6F9;font:500 10px/1 var(--sf);transition:color .2s}
.tp-tabs span svg,.tp-tabs span img{width:22px;height:22px;display:block}
.tp-tabs span.sel{color:var(--pink);background:rgba(255,255,255,.12)}
.tp-tabs span img{filter:brightness(0) invert(1)}
.tp-tabs span.sel img{filter:none}
.tp-tap{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(255,255,255,.7);opacity:0;pointer-events:none;z-index:5}
.tp-cx{position:absolute;right:16px;top:65px;width:36px;height:36px;z-index:4;border-radius:50%;background:rgba(60,60,64,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);display:grid;place-items:center;color:#fff}
.tp-cx svg{width:13px;height:13px}
/* walking directions (DirectionsView): muted dark map, dotted pink route, you-dot and the place pin, glass capsules */
.tp-wk{position:absolute;left:0;top:0;width:393px;height:852px;display:none;text-transform:none;background:#1F2023;overflow:hidden}
.tip[data-k="walk"] .tp-wk{display:block}
.tip[data-k="walk"] .tp-td,.tip[data-k="walk"] .tp-fl,.tip[data-k="walk"] .tp-cam{display:none}
.tp-wk svg{position:absolute;left:0;top:0;width:393px;height:852px}
.tp-wcap{position:absolute;left:16px;right:16px;display:flex;align-items:center;gap:8px;background:rgba(40,41,46,.62);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),0 6px 20px rgba(0,0,0,.25);color:#F4F6F9}
.tp-wcap.h{top:62px;min-height:56px;border-radius:28px;padding:8px 14px 8px 14px}
.tp-wcap.h svg{position:static;width:17px;height:17px;margin:0 6px 0 -0px;flex:none}
.tp-wcap.h .bk{width:44px;height:44px;display:grid;place-items:center;flex:none;margin-left:-6px}
.tp-wcap.h b{display:block;font:700 22px/1.02 var(--display);letter-spacing:.3px}
.tp-wcap.h small{display:block;margin-top:3px;font:500 13px/1 var(--mono);letter-spacing:.8px;color:rgba(255,255,255,.55)}
.tp-wcap.i{top:128px;border-radius:18px;padding:12px 14px;gap:12px}
.tp-wcap.i svg{position:static;width:21px;height:21px;color:var(--pink);flex:none}
.tp-wcap.i b{display:block;font:600 17.3px/1.2 var(--body)}
.tp-wcap.i small{display:block;margin-top:3px;font:500 13px/1 var(--mono);letter-spacing:.6px;color:rgba(255,255,255,.55)}
.wk-card{position:absolute;left:0;right:0;bottom:0;padding:20px 16px 48px;background:linear-gradient(180deg,rgba(10,11,14,0),#0A0B0E 34%,#0A0B0E)}
.wk-modes{display:flex;gap:8px;margin-bottom:14px}
.wk-modes span{padding:10px 16px;border-radius:20px;background:#0A0B0E;box-shadow:inset 0 0 0 1px #2C2F38;font:600 13px/1 var(--mono);color:#C7CBD2}
.wk-modes span.on{background:#F4F6F9;color:#0E0F13}
.wk-row{display:flex;gap:10px;align-items:center}
.wk-go{flex:1;height:64px;border-radius:32px;background:#F4F6F9;display:flex;align-items:center;padding:0 8px 0 24px;font:700 24px/1 var(--display);color:#0E0F13}
.wk-go i{margin-left:auto;width:44px;height:44px;border-radius:50%;background:#0E0F13;color:#fff;display:grid;place-items:center}
.tp-wk .wk-go i svg{position:static;width:19px;height:19px}
.wk-x{width:48px;height:48px;border-radius:50%;background:#16181E;box-shadow:inset 0 0 0 1px #23252C;display:grid;place-items:center;color:#C7CBD2;flex:none}
.tp-wk .wk-x svg{position:static;width:15px;height:15px}
.tp-wpin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,calc(-100% + 8px))}
.tp-wpin b{white-space:nowrap;font:600 13px/1 var(--mono);letter-spacing:.6px;color:#F4F6F9;background:rgba(14,15,19,.75);border-radius:6px;padding:4px 7px}
.tp-wpin i{width:15px;height:15px;border-radius:50%;background:var(--pink);box-sizing:border-box;border:3.5px solid #fff;margin:0 0 0}
.tp-wyou{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,255,255,.35);display:grid;place-items:center}
.tp-wyou::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
#tpWRoute,#tpWGlow{transition:none}
/* camera translate (TranslateHubView photo surface + LiveTranslateScanner): the live camera on a menu,
   frosted chips with the English laid over each line, the language pill and shutter at the bottom */
.tp-cam{position:absolute;left:0;top:0;width:393px;height:852px;display:none;background:#000;overflow:hidden}
.tip[data-k="camera"] .tp-cam{display:block}
.tip[data-k="camera"] .tp-td,.tip[data-k="camera"] .tp-fl{display:none}
.mn{position:absolute;left:0;top:0;width:1280px;height:720px;background:url(/story-v34/img/ph-lis-menu.webp) 0 0/1280px 720px no-repeat;transform-origin:0 0}
.mn-p{position:absolute;left:0;top:0;width:410px;height:612px;transform-origin:0 0;transform:matrix(1,-0.151,0.121,0.993,358,82)}
.mn-h{position:absolute;left:0;right:0;top:34px;text-align:center;font:italic 600 30px/1 'Bodoni Moda',Didot,Georgia,serif;color:#2A2622;letter-spacing:.5px}
.mn-r{position:absolute;left:40px;right:40px;display:flex;justify-content:space-between;align-items:baseline;font:400 21px/1.1 Georgia,'Times New Roman',serif;color:#2B2724}
.mn-r i{font-style:normal;font-size:19px}
.nm{position:relative;display:inline-block}
.mn-c{position:absolute;left:-7px;top:50%;margin-top:-17px;min-width:calc(100% + 14px);box-sizing:border-box;height:34px;padding:0 7px;font-weight:400;border-radius:6px;background:rgba(250,250,252,.82);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);display:flex;align-items:center;font:400 17px/1.05 var(--sf);color:#000;white-space:nowrap;opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s}
.mn-c.on{opacity:1;transform:none}
.tp-cpill{position:absolute;left:50%;top:612px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:22px;background:rgba(60,60,64,.42);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font:600 17px/1 var(--body);white-space:nowrap}
.tp-cpill svg{width:12px;height:12px}
.tp-camimg{position:absolute;inset:0;background:url(/story-v34/img/ph-lis-menu.webp) 62% 50%/cover no-repeat}
.tp-camimg::before{content:"";position:absolute;inset:-30px;background:inherit;filter:blur(16px) brightness(.82)}
.tp-camimg .mn{-webkit-mask:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.tp-mcard .mn{transform:translate(-190px,-30px) scale(.62)}
.tp-mcard{position:relative;width:100%;aspect-ratio:430/236;border-radius:20px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 0 2px rgba(255,61,129,.75),0 0 30px 4px rgba(255,61,129,.55),0 0 70px rgba(255,61,129,.28),0 20px 40px rgba(0,0,0,.4)}
.tp-mcard::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 18px rgba(255,61,129,.55);pointer-events:none}
/* ---- the ending: back to Kyoto, where it started. Next time, it already knows. ---- */
/* ---- the close: a departures board on black. The board itself is the site's React TextFlippingBoard, mounted into
   #kBoard (StoryCta); it flips its line in when the story reaches the end and blanks again on the way back ---- */
.kend{position:absolute;inset:0;z-index:14;overflow:hidden;background:#0A0A0B;visibility:hidden;opacity:0;color:#F4F1EA}
.kend::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:radial-gradient(#fff .6px,transparent .7px);background-size:3px 3px}
.kwrap{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,30px);padding:calc(64px + 2vh) 16px 4vh;box-sizing:border-box}
.kboard{width:min(66vw,94vh,960px)}
.kfly{margin:0;font:italic 800 min(10.8vw,15.5vh)/.86 'Barlow Condensed',var(--display),sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#F4F1EA;text-align:center;white-space:nowrap}
.ksr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kstore-w{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px)}
.kstore{display:inline-flex;align-items:center;gap:clamp(10px,1.1vw,16px);height:min(10.5vh,6.2vw);min-height:58px;padding:0 clamp(18px,2.4vw,34px) 0 clamp(16px,2vw,28px);box-sizing:border-box;border:2px solid #F4F1EA;border-radius:clamp(12px,1.2vw,18px);background:#000;color:#F4F1EA;text-decoration:none;font-family:-apple-system,'SF Pro Display','Helvetica Neue',Arial,sans-serif;transition:background .2s,transform .2s}
.kstore:hover{background:#17181C;transform:translateY(-2px)}
.kstore:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #FF3D81}
.kstore svg{height:62%;width:auto}
.kstore span{display:flex;flex-direction:column;font-weight:600;font-size:min(4.6vh,2.7vw);line-height:1;letter-spacing:-.01em}
.kstore span small{font-weight:500;font-size:.5em;letter-spacing:0;margin-bottom:.12em}
.kfree{margin:0;font:600 clamp(11px,1.15vw,18px)/1 'Public Sans',var(--body),sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#F4F1EA;padding-left:.32em}
.kroute{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:15}
.kroute path{fill:none;stroke:#FF3D81;stroke-width:3.5;stroke-dasharray:2 8;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(255,61,129,.8))}
.kroute circle{fill:#FF3D81}
body.compact .kboard{width:min(94vw,560px)}
body.compact .kfly{font-size:min(15vw,9vh)}
body.compact .kstore{height:60px}
body.compact .kstore span{font-size:24px}
body.compact .kfree{font-size:12px}
body.compact .kroute path{stroke-width:2.4}
body.compact .kroute circle{r:5px}
/* the board's own App Store button takes over from the floating pill at the end */
body.atend .mcta{opacity:0!important;pointer-events:none}
/* the phone on Ask: Crow already knows what you liked */
.tp-ask{position:absolute;left:0;top:0;width:393px;height:852px;display:none;background:#0E0F13;overflow:hidden;text-transform:none}
.tip[data-k="ask"] .tp-ask,.tip[data-k="review"] .tp-ask{display:block}
.tip[data-k="review"] .tp-td,.tip[data-k="review"] .tp-fl,.tip[data-k="review"] .tp-cam,.tip[data-k="review"] .tp-wk,.tip[data-k="review"] .tp-it{display:none}
.ak-dim{position:absolute;inset:0;z-index:4;background:#000;opacity:0;pointer-events:none;transition:opacity .4s}
.tip[data-k="review"] .ak-dim{opacity:.45;transition-delay:.35s}
.ak-sh{position:absolute;left:0;right:0;top:60px;bottom:0;z-index:5;border-radius:38px 38px 0 0;overflow:hidden;background:#0E0F13;box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -10px 40px rgba(0,0,0,.5);transform:translateY(105%);transition:transform .45s cubic-bezier(.4,0,.6,1)}
.tip[data-k="review"] .ak-sh{transform:none;transition:transform .6s cubic-bezier(.2,.85,.25,1) .35s}
.ak-sh .ak-bg{border-radius:inherit}
.ak-shn{position:absolute;left:0;right:0;top:0;height:64px;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:6px 16px 0}
.ak-shn b{font:600 17px/1 var(--sf);color:#F4F6F9}
.ak-shn>span{width:44px;height:44px}
.ak-shs{position:absolute;left:0;right:0;top:64px;bottom:0;overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent 0,#000 14px);mask:linear-gradient(180deg,transparent 0,#000 14px)}
.rv{padding:18px 22px 40px;color:#F4F6F9;will-change:transform}
.rv-k{font:600 14.5px/1 var(--mono);color:var(--pink)}
.rv-d{margin-top:8px;font:700 40.5px/1 var(--display)}
.rv-n{margin-top:8px;font:600 21px/1.2 var(--body)}
.rv-dl{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.rv-dl small{display:block;font:600 13.5px/1 var(--mono);color:var(--pink)}
.rv-dl p{margin:4px 0 0;font:400 20px/1.3 var(--body)}
.rv-hr{height:1px;background:#33373F;margin:24px 0}
.rv-h{font:600 24.3px/1.15 var(--body)}
.rv-c{margin-top:20px}
.rv-c b{display:block;font:600 20px/1.25 var(--body)}
.rv-c p{margin:6px 0 0;font:400 20px/1.42 var(--body)}
.rv-nb{margin-top:24px;text-align:center;font:400 17.8px/1 var(--body)}
.rv-go{margin-top:12px;height:64px;border-radius:32px;background:linear-gradient(180deg,#fff,#E4E7ED);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px rgba(0,0,0,.6);display:flex;align-items:center;gap:8px;padding:0 8px 0 24px;font:700 24px/1 var(--display);color:#0E0F13}
.rv-go svg{width:18px;height:18px}
.rv-go i{margin-left:auto;width:44px;height:44px;border-radius:50%;background:#0E0F13;color:#fff;display:grid;place-items:center}
.rv-kt{margin-top:12px;height:64px;border-radius:32px;background:#111318;box-shadow:inset 0 0 0 1px #2C2F38;display:flex;align-items:center;justify-content:center;gap:8px;font:700 24px/1 var(--display);color:#F4F6F9}
.rv-kt svg{width:18px;height:18px}
.ak-rv.tap{animation:akTap .5s}
@keyframes akTap{0%{opacity:1}30%{opacity:.45}100%{opacity:1}}
/* Ask Crow (ChatView, iPhone, full-screen cover): CrowScreenBackground, ASK CROW + glass controls, Crow cards beside a pink
   dot, white user bubbles with the iMessage tail, thinking row, white follow-up chips, Liquid Glass composer */
.tp-ask{background:#0E0F13}
.ak-bg{position:absolute;inset:0;background:radial-gradient(circle 491px at 22% 4%,#242733 0%,#16181F 55%,#0E0F13 100%)}
.ak-bg::before{content:"";position:absolute;left:0;right:0;top:0;height:420px;background-image:radial-gradient(rgba(196,203,216,.11) 1.1px,transparent 1.3px);background-size:13px 13px;background-position:0 0;-webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}
.ak-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,19,.2) 0%,rgba(14,15,19,0) 30%,rgba(14,15,19,.9) 88%,#0E0F13 100%)}
.ak-hd{position:absolute;left:20px;right:20px;top:93px}
.ak-row{display:flex;align-items:center;gap:12px}
.ak-t{font:700 32px/1.15 var(--display);color:#F4F6F9;white-space:nowrap}
.ak-t em{font-style:normal;color:var(--pink)}
.ak-ctl{margin-left:auto;display:flex;gap:8px}
.ak-ctl span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#F4F6F9;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.3)}
.ak-ctl svg{width:19px;height:19px}
.ak-ctl span:last-child svg{width:13px;height:13px}
.ak-ct{margin-top:5px;font:400 17px/1.25 var(--body);color:#9197A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ak-body{position:absolute;left:0;right:0;top:180px;bottom:44px;display:flex;flex-direction:column}
.ak-tr{flex:1;min-height:0;padding:8px 16px 12px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.ak-cr{display:flex;align-items:flex-end;gap:10px;padding-right:24px}
.ak-dot{width:30px;height:30px;border-radius:50%;background:var(--pink);flex:none;margin-bottom:4px;display:grid;place-items:center}
.ak-dot img{width:17px;height:17px;filter:brightness(0) invert(1)}
.ak-card{max-width:315px;padding:17px 16px;border-radius:20px;background:#111318;box-shadow:inset 0 0 0 1px #33373F;color:#F4F6F9}
.ak-card h4{margin:0;font:700 30.8px/1.05 var(--display);letter-spacing:.1px;text-transform:uppercase}
.ak-card p{margin:12px 0 0;font:400 17.3px/1.43 var(--body)}
.ak-card h4+p{margin-top:12px}
.ak-card p:first-child{margin-top:0}
.ak-rv{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font:600 18.9px/1 var(--body);color:var(--pink)}
.ak-rv svg{width:19px;height:19px}
.ak-me{align-self:flex-end;position:relative;max-width:310px;margin-right:4px;padding:10px 15px;border-radius:18px;background:#F4F6F9;color:#0E0F13;font:400 17.8px/1.35 var(--body)}
.ak-me::before{content:"";position:absolute;right:-5px;bottom:0;width:16px;height:18px;background:#F4F6F9;border-bottom-left-radius:14px 12px}
.ak-me::after{content:"";position:absolute;right:-11px;bottom:0;width:11px;height:20px;background:#0f1115;border-bottom-left-radius:10px}
.ak-gap{height:18px;flex:none}
.ak-ty{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:#111318;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 13.5px/1 var(--mono);letter-spacing:.6px;color:#C7CBD2}
.ak-ty i{display:flex;gap:4px}
.ak-ty i b{width:6px;height:6px;border-radius:50%;background:var(--pink);opacity:.3;animation:akDots .9s steps(1) infinite}
.ak-ty i b:nth-child(2){animation-delay:.3s}.ak-ty i b:nth-child(3){animation-delay:.6s}
@keyframes akDots{0%{opacity:1}33.3%{opacity:.3}}
.ak-in{flex:none;padding:0 16px;display:flex;flex-direction:column;gap:11px}
.ak-chips{display:flex;align-items:center;gap:6px;padding:3px 4px;overflow:hidden;white-space:nowrap}
.ak-chips span{flex:none}
.ak-chips span.mo{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 13px}
.ak-chips span.mo svg{width:11px;height:11px}
.ak-chips span{padding:9px 14px;border-radius:999px;background:linear-gradient(180deg,#FFFFFF,#E4E7ED);color:#0E0F13;font:600 17px/1.2 var(--body);white-space:nowrap}
.ak-cmp{display:flex;align-items:flex-end;gap:8px;padding:4px 4px 4px 16px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ak-cmp span{flex:1;padding:12px 0;font:400 17.8px/1.2 var(--body);color:#848A96}
.ak-cmp i{width:44px;height:44px;display:grid;place-items:center;flex:none}
.ak-cmp i b{width:36px;height:36px;border-radius:50%;background:#5C616C;color:#fff;display:grid;place-items:center}
.ak-cmp svg{width:17px;height:17px}
.tip[data-k="ask"] .tp-td,.tip[data-k="ask"] .tp-fl,.tip[data-k="ask"] .tp-cam,.tip[data-k="ask"] .tp-wk,.tip[data-k="ask"] .tp-it{display:none}
/* flight options (ChatFlightOptionsSheet): every London airport checked, Crow's pick first */
.tp-fr{position:absolute;left:0;top:0;width:393px;height:852px;display:none;background:#0E0F13;overflow:hidden;text-transform:none;color:#F4F6F9}
.tp-fr::before{content:"";position:absolute;inset:0 0 auto 0;height:380px;background-image:radial-gradient(rgba(196,203,216,.22) 1px,transparent 1.2px);background-size:13px 13px;-webkit-mask:linear-gradient(180deg,#000 0,#000 18%,transparent 48%);mask:linear-gradient(180deg,#000 0,#000 18%,transparent 48%)}
.tip[data-k="fares"] .tp-fr{display:block}
.tip[data-k="fares"] .tp-td,.tip[data-k="fares"] .tp-fl,.tip[data-k="fares"] .tp-cam,.tip[data-k="fares"] .tp-wk,.tip[data-k="fares"] .tp-ask,.tip[data-k="fares"] .tp-it{display:none}
.tp-frn{position:absolute;left:0;right:0;top:54px;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px}
.tp-frn b{font:600 17px/1 var(--sf);color:#F4F6F9}
.tp-frn>span{width:44px;height:44px}
.fo-x{border-radius:50%;background:rgba(60,60,64,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);display:grid;place-items:center;color:#F4F6F9}
.fo-x svg{width:17px;height:17px}
.tp-frb{position:absolute;left:0;right:0;top:106px;padding:6px 22px 0}
.tp-frb>p{margin:0 0 24px;font:400 17px/1.36 var(--body)}
.tp-frb>small{display:block;font:400 13px/1.5 var(--mono);color:#C7CBD2}
.tp-frb>small .k{color:#F4F6F9;font-weight:500}
.tp-frc{margin-top:24px;padding-top:18px;border-top:1px solid #1F2128;opacity:0;transform:translateY(12px)}
.tp-frc.on{opacity:1;transform:none;transition:opacity .4s,transform .4s}
.fo-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tp-frc h5{margin:0;font:700 28px/1 var(--display);text-transform:uppercase}
.tp-frc .lg{margin-top:6px;font:400 13px/1 var(--mono);color:#C7CBD2}
.tp-frc .pr{margin-top:6px;font:700 32px/1 var(--display)}
.tp-frc .ps{margin-top:6px;font:400 13px/1 var(--mono);color:#C7CBD2}
.fo-ar{width:44px;height:44px;display:grid;place-items:center;color:#F4F6F9;flex:none}
.fo-ar svg{width:20px;height:20px}
.tp-frc p{margin:12px 0 0;font:400 17px/1.36 var(--body);color:#C7CBD2}
.fo-use{margin-top:12px;height:64px;border-radius:32px;background:#111318;box-shadow:inset 0 0 0 1px #2C2F38;display:flex;align-items:center;justify-content:center;gap:8px;font:700 24px/1 var(--display);color:#F4F6F9}
.fo-use svg{width:18px;height:18px}
/* the trip itself (ItineraryView, iPhone): photo hero, the city, section tabs, day chips, the day's timeline */
.tp-it{position:absolute;left:0;top:0;width:393px;height:852px;display:none;background:#0A0B0E;overflow:hidden;text-transform:none;color:#F4F6F9}
.tip[data-k="itin"] .tp-it{display:block}
.tip[data-k="itin"] .tp-td,.tip[data-k="itin"] .tp-fl,.tip[data-k="itin"] .tp-cam,.tip[data-k="itin"] .tp-wk,.tip[data-k="itin"] .tp-ask,.tip[data-k="itin"] .tp-fr{display:none}
.tp-ithero{position:absolute;left:0;top:0;width:393px;height:440px;background:url(/story-v34/img/ph-mrk-hero.webp) 50% 40%/cover}
.tp-ithero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.12) 0%,rgba(10,11,14,.28) 55%,rgba(10,11,14,.8) 88%,#0A0B0E 100%)}
.tp-itctl{position:absolute;left:16px;right:16px;top:62px;display:flex;justify-content:space-between;z-index:3}
.tp-itctl span{width:34px;height:34px;border-radius:50%;background:rgba(40,41,46,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);display:grid;place-items:center;color:#F4F6F9}
.tp-itctl svg{width:15px;height:15px}
.tp-itctl div{display:flex;gap:10px}
.tp-itsc{position:absolute;left:0;right:0;top:64px;bottom:0;overflow:hidden}
.tp-itc{position:relative;padding:0 20px;will-change:transform}
.tp-itc h3{margin:153px 0 0;font:700 68px/1 var(--display);text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.tp-ittabs{display:flex;gap:6px;margin-top:18px}
.tp-ittabs span{flex:1;height:44px;border-radius:22px;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;font:600 13px/1 var(--mono);letter-spacing:.02em;color:#C7CBD2}
.tp-ittabs span.l{font-size:9.2px}
.tp-ittabs span.on{background:#fff;color:#0E0F13;box-shadow:none}
/* ---- the extra app screens the journey needs (Tripwires, Real Cost, Tracked fares, Weekend, Crow's Notes) ----
   only the top ~560pt of a screen shows above the page fold, so each one front-loads what matters */
.tp-xs{position:absolute;left:0;top:0;width:393px;height:852px;display:none;z-index:6;background:#0A0B0E;overflow:hidden;text-transform:none;color:#F4F6F9}
.tip[data-k="changed"] #tpChg,.tip[data-k="wires"] #tpWires,.tip[data-k="cost"] #tpCost,.tip[data-k="watch"] #tpWatch,.tip[data-k="weekend"] #tpWknd,.tip[data-k="notes"] #tpNotes{display:block}
.tp-xs .xr{opacity:0;transform:translateY(12px)}
.tp-xs .xr.on{opacity:1;transform:none;transition:opacity .45s,transform .45s}
.xs-tabs{display:flex;gap:5px;padding:8px 20px 0}
.xs-tabs span{flex:1;height:34px;border-radius:17px;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;font:600 9.5px/1 var(--mono);color:#C7CBD2}
.xs-tabs span.on{background:#fff;color:#0E0F13;box-shadow:none}
.xs-h{margin:0;padding:0 20px;font:700 56px/1 var(--display);text-transform:uppercase;letter-spacing:.1px}
.xs-h em{font-style:normal;color:var(--pink)}
.xs-sub{padding:8px 20px 0;font:600 12px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#9197A1}
.xs-sub em{font-style:normal;color:var(--pink)}
.xs-num{font:700 30px/1 var(--display);color:transparent;-webkit-text-stroke:1px #9197A1;width:38px;flex:none}
.xs-num.f{color:var(--pink);-webkit-text-stroke:0}
/* trip hub screens (TripHubSectionHeader + TripwiresScreen / RealCostView / CrowNotesSheet, iPhone):
   200pt photo, pinned header (back + city 32 + five 44pt tab pills), then the scrolling section */
.hub-hero{position:absolute;left:0;top:0;width:393px;height:200px;background:#111318 50% 45%/cover}
.hub-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.28) 0%,rgba(10,11,14,.28) 55%,rgba(10,11,14,.8) 88%,#0A0B0E 100%)}
.hub-hd{position:absolute;left:0;right:0;top:61px;padding:0 20px;z-index:2}
.hub-row{display:flex;align-items:center;gap:10px;height:48px;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.hub-bk{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;flex:none}
.hub-bk svg{width:14px;height:14px}
.hub-city{font:700 32px/1 var(--display);text-transform:uppercase}
.hub-tabs{display:flex;gap:6px;margin-top:12px}
.hub-tabs span{flex:1;min-width:0;height:44px;border-radius:22px;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;font:600 13px/1 var(--mono);color:#C7CBD2;white-space:nowrap}
.hub-tabs span.l{font-size:9.2px}
.hub-tabs span.on{background:#fff;color:#0E0F13;box-shadow:none}
.hub-sc{position:absolute;left:0;right:0;top:165px;bottom:0;overflow:hidden}
.hub-c{padding:0 20px;will-change:transform}
.hub-t{margin:18px 0 0;font:700 56px/1 var(--display);text-transform:uppercase}
.hub-t em{font-style:normal;color:var(--pink)}
.hub-s{margin-top:8px;font:600 13px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#9197A1}
.hub-s em{font-style:normal;color:var(--pink)}
.hub-n{width:30px;flex:none;font:700 30px/1 var(--display);color:transparent;-webkit-text-stroke:1px #9197A1}
.hr{display:flex;gap:14px;padding:16px 0;border-top:1px solid #1F2128}
.hub-l{margin-top:13px}
.hr small{display:block;font:600 13px/1.2 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:#9197A1}
.hr b{display:block;margin-top:7px;font:700 28px/1 var(--display);letter-spacing:.1px;text-transform:uppercase}
.hr p{margin:7px 0 0;font:400 17px/1.38 var(--body);color:#9197A1}
.hr p.fx{margin-top:12px;color:#C7CBD2}
.hr p.fx em{font:600 13px/1 var(--mono);font-style:normal;letter-spacing:1.1px;color:var(--pink);margin-right:8px}
.hr.nt{padding:14px 0}
.hr.nt p{margin-top:5px}
.hr.nt p.z{color:var(--pink)}
.ck{margin-top:28px;font:600 13px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#9197A1}
.ck-r{margin-top:12px;font:700 82px/.88 var(--display)}
.ck-r em{font-style:normal;color:var(--pink)}
.ck-tg{display:inline-flex;margin-top:20px;padding:3px;border-radius:26px;background:linear-gradient(180deg,#191B23,#111318);box-shadow:inset 0 0 0 1.5px #2C2F38}
.ck-tg span{width:64px;height:44px;border-radius:22px;display:grid;place-items:center;font:600 13px/1 var(--mono);letter-spacing:1px;color:#8A909B}
.ck-tg span.on{background:#F4F6F9;color:#0E0F13}
.ck-n{margin-top:12px;font:400 17px/1.38 var(--body);color:#C7CBD2}
.ck-lk{margin-top:32px;padding-bottom:5px;font:600 13px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--pink)}
.ck-row{display:flex;gap:12px;align-items:flex-start;padding:12.5px 0;border-top:1px solid #1F2128}
.ck-row .hub-n{font-size:28px}
.ck-row div{flex:1}
.ck-row b{display:block;font:700 28px/1 var(--display);text-transform:uppercase}
.ck-row p{margin:2px 0 0;font:400 17px/1.34 var(--body);color:#8A909B}
.ck-row i{font:700 28px/1 var(--display);font-style:normal;white-space:nowrap}
.ck-t{margin-top:12px;padding-top:12px;border-top:1.5px dashed rgba(255,61,129,.7);display:flex;align-items:baseline;gap:8px;font:600 13px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--pink)}
.ck-t span{flex:1;border-bottom:2px dotted rgba(255,61,129,.5);transform:translateY(-3px)}
.ck-t b{font:600 24px/1 var(--mono);letter-spacing:0}
/* Tripwires (TripwiresScreen) */
#tpWires .xs-h{margin-top:20px}
.xwr{display:flex;gap:12px;margin:0 20px;padding:16px 0 14px;border-top:1px solid #1F2128}
#tpWiL .xwr:first-child{margin-top:16px}
.xwr small{display:block;font:600 11.5px/1.2 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:#9197A1}
.xwr b{display:block;margin-top:7px;font:700 28px/1 var(--display);text-transform:uppercase}
.xwr p{margin:7px 0 0;font:400 15px/1.4 var(--body);color:#9197A1}
.xwr p.fx{color:#C7CBD2;margin-top:9px}
.xwr p.fx em{font:600 11.5px/1 var(--mono);font-style:normal;letter-spacing:1.1px;color:var(--pink);margin-right:7px}
/* What Changed (OnGroundProposalReviewView over Today: DiffSheetHeader, WhyCallout, DiffRow, Accept / Keep mine) */
.chg-under{position:absolute;left:0;top:0;width:393px;height:240px;background:#111318 50% 45%/cover;filter:brightness(.35)}
.chg-sheet{position:absolute;left:0;right:0;top:58px;bottom:0;border-radius:32px 32px 0 0;overflow:hidden;
  background:radial-gradient(120% 60% at 85% 0%,rgba(255,61,129,.10),rgba(255,61,129,0) 60%),radial-gradient(#1A1C23 1px,transparent 1.2px) 0 0/14px 14px,linear-gradient(180deg,#16181F,#0F1015)}
.chg-grab{display:block;width:36px;height:4px;border-radius:2px;background:#5C616C;margin:12px auto 18px}
.chg-c{padding:0 22px}
.chg-hd{display:flex;align-items:flex-start;gap:12px}
.chg-hd>div{flex:1}
.chg-hd small{display:block;font:600 10.5px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--pink)}
.chg-hd h3{margin:4px 0 0;font:700 47px/.84 var(--display);text-transform:uppercase}
.chg-hd h3 span{display:block;color:transparent;-webkit-text-stroke:2.2px #F4F6F9}
.chg-hd h3 em{display:block;font-style:normal;color:var(--pink)}
.chg-x{width:44px;height:44px;border-radius:50%;background:#191B23;display:grid;place-items:center;color:#C7CBD2;flex:none}
.chg-x svg{width:16px;height:16px}
.chg-st{margin:24px 0 0;font:400 15px/1.4 var(--body);color:#C7CBD2}
.chg-why{margin-top:24px;padding:2px 0 2px 16px;border-left:3px solid var(--pink)}
.chg-why small{display:flex;align-items:center;gap:7px;font:600 10.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--pink)}
.chg-why small svg{width:14px;height:14px}
.chg-why p{margin:10px 0 0;font:400 16px/1.45 var(--body);color:#C7CBD2}
.chg-why p b{color:#F4F6F9;font-weight:700}
.chg-l{margin-top:12px}
.dfr{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid #1F2128}
.dfi{width:40px;height:40px;border-radius:50%;background:#191B23;color:#9197A1;display:grid;place-items:center;flex:none}
.dfi svg{width:16px;height:16px}
.dfr.k .dfi{background:var(--pink);color:#fff}
.dfr small{display:block;font:600 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#9197A1}
.dfr.k small{color:var(--pink)}
.dfr b{display:block;margin-top:4px;font:700 18px/1.2 var(--body);color:#F4F6F9}
.dfr p{margin:5px 0 0;font:400 11.5px/1.35 var(--mono);color:#9197A1}
.dfr p em{font-style:normal;color:var(--pink)}
.chg-ft{position:absolute;left:0;right:0;bottom:0;padding:12px 20px 30px;background:#0F1015;display:grid;gap:10px}
.chg-acc{display:flex;align-items:center;height:64px;padding:0 8px 0 24px;border-radius:32px;background:linear-gradient(180deg,#fff,#E4E7ED);font:700 24px/1 var(--display);text-transform:uppercase;color:#0E0F13;box-shadow:0 14px 18px rgba(0,0,0,.6)}
.chg-acc i{margin-left:auto;width:44px;height:44px;border-radius:50%;background:#0E0F13;color:#fff;display:grid;place-items:center}
.chg-acc i svg{width:18px;height:18px}
.chg-keep{display:grid;place-items:center;height:64px;border-radius:32px;background:#111318;box-shadow:inset 0 0 0 1px #2C2F38;font:700 24px/1 var(--display);text-transform:uppercase;color:#F4F6F9}
/* The real cost (RealCostView) */
.xc-hero{position:absolute;left:0;top:0;width:393px;height:260px;background:url(/story-v34/img/ph-lis-hero.webp) 50% 45%/cover}
.xc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.35) 0%,rgba(10,11,14,.55) 50%,#0A0B0E 100%)}
.xc{position:relative;padding:22px 20px 0}
.xc>small{display:block;font:600 12px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#C7CBD2}
.xc .xc-big{margin-top:8px;font:700 64px/.95 var(--display);letter-spacing:-.5px}
.xc .xc-big em{font-style:normal;color:var(--pink)}
.xc .xc-cur{display:flex;gap:16px;margin-top:10px;font:600 11px/1 var(--mono);letter-spacing:1px;color:#5C616C}
.xc .xc-cur span.on{color:#F4F6F9;border-bottom:1.5px solid #F4F6F9;padding-bottom:3px}
.xc>p{margin:12px 0 0;font:400 15px/1.4 var(--body);color:#C7CBD2}
.xc .xc-lk{margin-top:18px;font:600 12px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--pink)}
.xc-r{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid #1F2128}
.xc .xc-lk+.xc-r{margin-top:6px}
.xc-r .xs-num{font-size:26px;width:34px}
.xc-r div{flex:1}
.xc-r b{display:block;font:700 23px/1 var(--display);text-transform:uppercase}
.xc-r p{margin:4px 0 0;font:400 13.5px/1.35 var(--body);color:#9197A1}
.xc-r i{font:700 23px/1 var(--display);font-style:normal;white-space:nowrap}
.xc-t{display:flex;align-items:baseline;gap:8px;margin-top:10px;padding-top:10px;border-top:1.5px dashed rgba(255,61,129,.7);font:600 13px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--pink)}
.xc-t span{flex:1;border-bottom:2px dotted rgba(255,61,129,.5);transform:translateY(-3px)}
.xc-t b{font:600 22px/1 var(--mono);letter-spacing:0}
/* Tracked fares (WatchesView) */
#tpWatch .xs-h{margin-top:14px;font-size:50px}
.w-hd{position:absolute;left:18px;right:18px;top:64px;z-index:2;display:flex;align-items:center;gap:12px}
.w-bk{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:grid;place-items:center;color:#C7CBD2;flex:none}
.w-bk svg{width:15px;height:15px}
.w-hd small{display:block;font:600 13px/1 var(--mono);letter-spacing:1.68px;color:var(--pink)}
.w-hd h3{margin:5px 0 0;font:700 34px/1 var(--display);letter-spacing:.6px;color:#fff}
.w-l{position:absolute;left:18px;right:18px;top:142px;display:flex;flex-direction:column;gap:12px}
.xw{position:relative;padding:16px;border-radius:16px;background:#1C1E24;box-shadow:inset 0 0 0 1px #2C2F38}
.xw.hl{box-shadow:inset 0 0 0 1.5px var(--pink)}
.xw.off{opacity:.55}.xw.off.xr.on{opacity:.55}
.w-r1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.w-r1 b{font:700 25.4px/1 var(--display);color:#F4F6F9}
.w-r1 span{font:600 13.5px/1 var(--mono);letter-spacing:.6px;color:var(--pink)}
.w-sub{margin-top:10px;font:500 13px/1 var(--mono);letter-spacing:.6px;color:#8A909B}
.w-r3{margin-top:10px;display:flex;align-items:center;gap:10px}
.w-now{flex:1;font:600 14px/1 var(--mono);color:#9197A1}
.w-now em{font-style:normal;color:#C7CBD2;display:inline-block}.w-now em.g{color:#00C16A}
.w-tog{width:63px;height:28px;border-radius:14px;background:#3A3A3E;position:relative;flex:none}
.w-tog u{position:absolute;left:2px;top:2px;width:37px;height:24px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.w-tog.on{background:var(--pink)}.w-tog.on u{left:24px}
.w-tr{width:34px;height:34px;display:grid;place-items:center;color:#737985}
.w-tr svg{width:17px;height:17px}
/* What's on (WeekendResultView) */
.wk-nav{display:flex;align-items:center;gap:10px;padding:4px 20px 0}
.wk-nav span{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;color:#F4F6F9;flex:none}
.wk-nav svg{width:16px;height:16px}
.wk-nav small{flex:1;font:600 12px/1 var(--mono);letter-spacing:1.5px;color:#9197A1}
.wk-date{padding:6px 20px 0;font:700 112px/.86 var(--display);color:var(--pink);text-transform:uppercase}
.wk-in{margin:12px 20px 0;font:400 16px/1.35 var(--body);color:#C7CBD2}
.wk-in em{font-style:normal;color:#F4F6F9;box-shadow:inset 0 -2px 0 var(--pink)}
.wk-ch{display:flex;gap:7px;padding:14px 20px 0}
.wk-ch span{height:30px;padding:0 13px;border-radius:15px;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;font:600 12px/1 var(--body);color:#C7CBD2}
.wk-ch span.on{background:#fff;color:#0E0F13;box-shadow:none}
.wk-pk{padding:16px 20px 0;font:600 12px/1 var(--mono);color:#9197A1;letter-spacing:.6px}
.xk{display:flex;gap:12px;margin:10px 20px 0;padding:13px 0 4px;border-top:1px solid #1F2128}
.xk .xs-num{font-size:26px;width:34px}
.xk b{display:block;font:700 24px/1 var(--display);text-transform:uppercase}
.xk small{display:block;margin-top:5px;font:600 11px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--pink)}
.xk p{margin:6px 0 0;font:400 13.5px/1.35 var(--body);color:#9197A1}
/* What's on (WeekendResultView, iPhone): nav, gig-poster date over the sunglasses crow, intro with a white highlight pill, mono chips, numbered listings */
.wkn{position:absolute;left:0;right:0;top:59px;height:48px;padding:0 20px;display:flex;align-items:center;gap:12px;z-index:2}
#tpWknd .hub-sc{clip-path:inset(107px 0 0 0)}   /* scrolled, the list passes under the bar, not over the clock */
.wkn span{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px #33373F;display:grid;place-items:center;color:#C7CBD2;flex:none}
.wkn svg{width:13px;height:13px}
.wkn small{flex:1;font:600 13px/1 var(--mono);letter-spacing:1.5px;color:#C7CBD2}
.wkp{position:relative;padding-top:16px}
.wkm{position:absolute;left:160px;top:-29px;width:297px;height:auto;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000 0,#000 65%,transparent 100%);mask:linear-gradient(180deg,#000 0,#000 65%,transparent 100%)}
.wkd{position:relative;min-height:202px}
.wkd .mo{display:block;font:700 112px/1.2 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px #F4F6F9}
.wkd .dy{display:block;margin-top:-30px;font:700 110px/1.2 var(--display);color:var(--pink)}
.wki{position:relative;max-width:280px;margin-top:14px;font:italic 400 18px/1.45 var(--body);color:#C7CBD2}
.wki em{font:600 18px/1 var(--body);font-style:normal;color:#0E0F13;background:#F4F6F9;border-radius:13px;padding:1px 9px;white-space:nowrap;box-shadow:0 0 0 14px #0A0B0E00}
.wki::before{content:"";position:absolute;inset:-24px;background:#0A0B0E;filter:blur(8px);z-index:-1;opacity:.92}
.wkc{position:relative;display:flex;gap:8px;margin-top:22px}
.wkc span{height:44px;padding:0 16px;border-radius:22px;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;font:600 13px/1 var(--mono);color:#C7CBD2}
.wkc span.on{background:#fff;color:#0E0F13;box-shadow:none}
.wkl{position:relative;margin-top:10px}
.wkr2{display:flex;padding:16px 0}
.wkr2+.wkr2{border-top:1px solid #23252C}
.wkr2 .n{width:38px;flex:none;padding-top:3px;font:700 28px/1 var(--display);color:transparent;-webkit-text-stroke:1px #8A909B}
.wkr2>div{flex:1}
.wkr2 .h{display:flex;justify-content:space-between;gap:6px}
.wkr2 b{font:700 32px/1 var(--display);text-transform:uppercase;color:#F4F6F9}
.wkr2 .h svg{width:12px;height:12px;color:#848A96;margin-top:4px;flex:none}
.wkr2 .mt{margin-top:6px;font:400 13px/1.3 var(--mono);letter-spacing:.8px;color:#848A96}
.wkr2 .mt em{font-style:normal;font-weight:500;color:#8A909B}
.wkr2 .mt i{font-style:normal;color:#5C616C;margin:0 .55em}
.wkr2 p{margin:7px 0 0;font:400 17px/1.36 var(--body);color:#C7CBD2}
/* Near me (NearMeView, iPhone): location line, NEAR ME, intent chips, the closest good places, numbered */
.tip[data-k="near"] #tpNear{display:block}
.nm{position:relative;padding:67px 18px 0}
.nm-hero{position:absolute;left:0;right:0;top:0;height:220px;background:#111318 url(/story-v34/img/ph-nyc-hero.webp) 50% 40%/cover}
.nm-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.8) 0,rgba(10,11,14,.28) 55%,rgba(10,11,14,.8) 88%,#0A0B0E 100%)}
.nm-k{display:flex;align-items:center;gap:7px;font:600 13px/1 var(--mono);letter-spacing:1.4px;color:#9197A1}
.nm-k i{width:6px;height:6px;border-radius:50%;background:var(--pink)}
.nm h3{margin:6px 0 0;font:700 44px/1 var(--display);text-transform:uppercase}
.nm h3 em{font-style:normal;color:var(--pink)}
.nm-ch{display:flex;gap:8px;margin:16px -18px 0 0;overflow:hidden;white-space:nowrap}
.nm-ch span{flex:none;padding:7px 14px;border-radius:22px;box-shadow:inset 0 0 0 1px #2C2F38;font:700 22px/1.1 var(--display);letter-spacing:.6px;text-transform:uppercase;color:#9197A1}
.nm-ch span.on{background:#F4F6F9;color:#0E0F13;box-shadow:none}
.nm-l{margin-top:16px}
.nmr{display:flex;gap:12px;align-items:flex-start;padding:20px 0;border-top:1px solid #1F2128}
.nmr .n{width:30px;flex:none;font:700 28px/1 var(--display);color:transparent;-webkit-text-stroke:1px #8A909B}
.nmr>div{flex:1}
.nmr b{display:block;font:700 26px/1 var(--display);text-transform:uppercase}
.nmr small{display:block;margin-top:8px;font:600 13px/1.25 var(--mono);color:#9197A1}
.nmr p{margin:8px 0 0;font:400 17px/1.36 var(--body);color:#C7CBD2}
.nmr .ar{width:15px;height:15px;color:#5C616C;flex:none;margin-top:4px}
#tpNear .tp-tabs{position:absolute;left:0;right:0;bottom:0}
/* Crow's Notes (CrowNotesSheet) */
#tpNotes .xs-ey{padding-top:18px;color:var(--pink)}
#tpNotes .xs-h{margin-top:8px}
.xn{display:flex;gap:12px;margin:0 20px;padding:15px 0 12px;border-top:1px solid #1F2128}
.xn.xn-1{margin-top:18px}
.xn b{display:block;font:700 26px/1 var(--display);text-transform:uppercase}
.xn p{margin:6px 0 0;font:400 14.5px/1.4 var(--body);color:#9197A1}
.xn p.z{margin-top:5px;color:var(--pink)}
.tp-stp{display:block;margin:0 0 7px;font:600 10.5px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#9197A1}
.tp-stp b{color:var(--pink);font-weight:600;margin-right:6px}
.tp-itfl{display:flex;align-items:center;gap:8px;padding:14px 0;font:500 17px/1 var(--body)}
.tp-itfl svg{width:17px;height:17px}.tp-itfl i{margin-left:auto;font-style:normal;color:#C7CBD2}
.tp-itdays{display:flex;gap:6px;margin-top:14px}
.tp-itdays span{width:40px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px #2C2F38;display:grid;place-items:center;font:700 22px/1 var(--display);color:#C7CBD2}
.tp-itdays span.on{background:#F4F6F9;color:#0E0F13;box-shadow:none}
.tp-ithd{display:flex;align-items:baseline;gap:12px;margin-top:18px}
.tp-ithd em{font:700 22px/1 var(--display);font-style:normal;color:transparent;-webkit-text-stroke:1px #8A909B;width:54px}
.tp-ithd b{font:700 24px/1.05 var(--display);text-transform:uppercase;letter-spacing:.4px}
.tp-itwhy{margin-top:10px;font:400 17px/1.38 var(--body);color:#9197A1}
.tp-itact{display:flex;gap:20px;margin-top:16px;font:600 13px/1 var(--mono);letter-spacing:.8px;color:var(--pink);text-transform:uppercase}
.tp-itact span{display:inline-flex;align-items:center;gap:6px}.tp-itact svg{width:12px;height:12px}
.tp-itl{margin-top:14px}
.tp-itr{display:flex;gap:12px;padding:18px 0;border-top:1px solid #1F2128}
.tp-itr>em{font:600 13px/1 var(--mono);font-style:normal;letter-spacing:.3px;color:#C7CBD2;width:46px;flex:none;padding-top:2px}
.tp-itr>div{flex:1}
.tp-itr b{display:block;font:700 26px/1.02 var(--display);text-transform:uppercase}
.tp-itr p{margin:6px 0 0;font:400 17px/1.36 var(--body);color:#9197A1}
.tp-itr .chips{display:flex;gap:7px;margin-top:7px}
.tp-itr .chips span{height:22px;padding:0 10px;border-radius:11px;display:grid;place-items:center;font:600 13px/1 var(--mono);letter-spacing:.7px;text-transform:uppercase;box-shadow:inset 0 0 0 1px #2C2F38;color:#9197A1}
.tp-itr .chips span.f{background:#F4F6F9;color:#0E0F13;box-shadow:none}
.tp-itr>i{font-style:normal;color:#5C616C;font-size:12px;padding-top:6px}
/* the cards that pop out: the app's own NEXT card, Crow nudge, and the flight Live Activity */
.tp-card{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
.tp-cn{position:relative;width:430px}
.tp-ban{position:relative;padding:15px 20px 17px;border-radius:20px;background:transparent;color:#fff;font-family:var(--sf);box-shadow:0 0 34px 2px rgba(255,61,129,.32),0 0 80px rgba(255,61,129,.18),0 20px 40px rgba(0,0,0,.4)}
body.nofb .tp-ban{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 16px rgba(255,61,129,.5),0 0 0 2px rgba(255,61,129,.7),0 0 26px 4px rgba(255,61,129,.55),0 0 70px rgba(255,61,129,.3),0 20px 40px rgba(0,0,0,.4)}
.tp-ban .r{display:flex;align-items:center;gap:8px}
.tp-ban .r img{width:21px;height:21px;flex:none}
.tp-ban .r b{font:600 20px/1.15 var(--sf);color:var(--pink);letter-spacing:-.2px}
.tp-ban p{margin:6px 0 0;font:400 16.5px/1.3 var(--sf);color:#F4F6F9;letter-spacing:-.1px}
.tp-fb{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#050608;z-index:0;isolation:isolate;transform:translateZ(0)}
.tp-fb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tp-fb.liftfb{inset:-6px;border-radius:18px;background:transparent;overflow:visible;z-index:0;pointer-events:none}
.tp-body{position:relative;z-index:1}
.tp-cn canvas.tp-fx{position:absolute;left:0;top:-90px;width:100%;height:calc(100% + 90px);pointer-events:none;z-index:2}
.tp-surf{position:relative;border-radius:20px;background:linear-gradient(180deg,#1B1D24,#121318);box-shadow:0 0 0 1px #2C2F38,inset 0 1px 0 rgba(255,255,255,.05),0 12px 20px rgba(0,0,0,.5),0 26px 60px rgba(14,15,19,.45),0 0 0 1.5px rgba(255,61,129,.0);padding:16px;color:#F4F6F9}
.tp-surf.glow{box-shadow:0 0 0 1px #2C2F38,0 0 0 1.5px rgba(255,61,129,.75),0 0 34px rgba(255,61,129,.45),0 26px 60px rgba(14,15,19,.5)}
.tp-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tp-lab{font:600 10px/1 var(--mono);letter-spacing:1px;color:#8A909B;text-transform:uppercase}
.tp-walk{font:500 11px/1 var(--mono);color:var(--pink);text-transform:uppercase}
.tp-name{font:700 21px/1.05 var(--display);letter-spacing:.2px;text-transform:uppercase;color:#F4F6F9;margin-top:12px}
.tp-desc{font:400 12.5px/1.45 var(--body);color:#9197A1;margin-top:10px}
.tp-btn{display:flex;align-items:center;height:52px;margin-top:14px;padding:0 6px 0 22px;border-radius:26px;background:linear-gradient(180deg,#fff,#E4E7ED);box-shadow:0 14px 18px rgba(0,0,0,.6);color:#0E0F13;font:700 22px/1 var(--display);text-transform:uppercase;gap:10px}
.tp-btn svg{width:17px;height:17px}
.tp-btn b{margin-left:auto;width:40px;height:40px;border-radius:50%;background:#0E0F13;display:grid;place-items:center;color:#fff}
.tp-btn2{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:22px;background:#111318;box-shadow:inset 0 0 0 1px #2C2F38;color:#F4F6F9;font:700 20px/1 var(--display);text-transform:uppercase}
.tp-nt{font:700 24px/1.02 var(--display);text-transform:uppercase;color:#F4F6F9;letter-spacing:.2px;margin-top:12px}
.tp-msg{font:400 13.5px/1.5 var(--body);color:#C7CBD2;margin-top:12px}
.tp-msg strong{color:#F4F6F9;font-weight:600}
.tp-tr{border-radius:20px;background:#24262D;box-shadow:0 0 0 1px #33373F,0 26px 60px rgba(14,15,19,.5);padding:17px 16px;color:#F4F6F9}
.tp-tr.glow,.tp-pk.glow{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 0 18px rgba(255,61,129,.35),0 0 0 2px rgba(255,61,129,.7),0 0 30px 3px rgba(255,61,129,.5),0 0 70px rgba(255,61,129,.25),0 26px 60px rgba(14,15,19,.5)}
.tp-tr .tp-eb{font-size:9.5px;letter-spacing:1.5px}
.tp-tr .ph{height:110px;border-radius:12px;background-size:cover;background-position:50% 50%;margin-top:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tp-tl{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid #33373F}
.tp-tl:first-of-type{border-top:0}
.tp-tl div{flex:1}
.tp-tl p{margin:0;font:400 15px/1.3 var(--body);color:#F4F6F9}
.tp-tl small{display:block;margin-top:2px;font:400 11px/1.3 var(--mono);color:#8A909B}
.tp-tl b{width:34px;height:34px;border-radius:50%;background:rgba(255,61,129,.14);color:var(--pink);display:grid;place-items:center;flex:none}
.tp-tl b svg{width:15px;height:15px}
.tp-tls{margin-top:6px}
.tp-pk{border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#1B1D24,#121318);box-shadow:0 0 0 1px #2C2F38,0 26px 60px rgba(14,15,19,.5);color:#F4F6F9}
.tp-pk .ph{height:110px;background-size:cover;background-position:50% 55%}
.tp-pk .bd{padding:14px 16px 16px}
.tp-meta{font:500 10.5px/1 var(--mono);color:#8A909B;margin-top:10px;text-transform:uppercase}
.tp-surf .ph{height:110px;margin:-16px -16px 14px;border-radius:20px 20px 0 0;background-size:cover;background-position:50% 50%}
.tp-unch{font:500 9.5px/1 var(--mono);letter-spacing:.9px;color:#5C616C;margin-top:14px}
/* the flight Live Activity, as it sits on the lock screen */
.tp-la{border-radius:24px;background:rgba(4,6,6,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:10px 16px 12px;color:#fff;font-family:var(--sf);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(28,242,166,.55),0 0 0 1px rgba(28,242,166,.35),0 0 30px rgba(28,242,166,.35),0 0 70px rgba(28,242,166,.15),0 26px 60px rgba(14,15,19,.5)}
.tp-la::before{content:"";position:absolute;inset:0;background:radial-gradient(75% 90% at 55% 78%,rgba(28,242,166,.42),rgba(28,242,166,.12) 45%,transparent 75%);pointer-events:none}
.tp-la>*{position:relative}
.tp-lah{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--sf)}
.tp-lah .al{width:22px;height:22px;border-radius:6px;background:#1C1E24;display:grid;place-items:center;font:700 9px/1 ui-monospace,monospace}
.tp-lah .cw{margin-left:auto;font:400 11px/1 var(--mark);color:rgba(235,235,245,.6)}
.tp-lar{display:flex;align-items:flex-start;margin-top:8px}
.tp-lar .ap{display:flex;flex-direction:column;gap:3px}
.tp-lar .ap.r{align-items:flex-end;margin-left:auto}
.tp-lar .ap div{font:700 22px/1 var(--sf);display:flex;gap:5px;align-items:baseline}
.tp-lar .ap div span{font-weight:600;color:#1CF2A6;font-variant-numeric:tabular-nums}
.tp-lar .ap small{font:400 12px/1 var(--sf);color:#1CF2A6}
.tp-lar .pl{margin:6px auto 0;color:rgba(235,235,245,.6);font-size:15px}
.tp-lap{height:18px;margin:8px 0 4px}
.tp-lac{text-align:center;font:600 21px/1 var(--sf);color:#1CF2A6;font-variant-numeric:tabular-nums}
.tp-lac small{display:block;margin-top:3px;font:500 10px/1 var(--sf);color:rgba(235,235,245,.6)}
body.compact .lworld .ltag span{font-size:14px;max-width:210px;padding:8px 12px 9px}


#lnDot{fill:var(--pink);stroke:var(--paper-ink);stroke-width:5;opacity:0}
#lnRiver{--rr:0px;-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--lx,56.5%) - var(--rr)),#000 calc(var(--lx,56.5%) - var(--rr) + 26px),#000 calc(var(--lx,56.5%) + var(--rr) - 26px),transparent calc(var(--lx,56.5%) + var(--rr)));mask-image:linear-gradient(90deg,transparent calc(var(--lx,56.5%) - var(--rr)),#000 calc(var(--lx,56.5%) - var(--rr) + 26px),#000 calc(var(--lx,56.5%) + var(--rr) - 26px),transparent calc(var(--lx,56.5%) + var(--rr)))}
.scr[data-s="2"] .why mark{background:none;color:var(--pink);padding:0;font-weight:600}
#ch-crooked .ctitle{text-shadow:none}
#ch-crooked .ctitle .o{color:var(--paper-ink)}
#ch-crooked .eyebrow em{color:#5C616C}
#ch-crooked .eyebrow{text-shadow:none}
body.compact #ch-crooked .ctitle .o{color:var(--paper-ink)}
#ch-plan .ctitle{text-shadow:none}
#ch-plan .ctitle .o{color:var(--paper-ink)}
#ch-plan .eyebrow em{color:#5C616C}
body.compact #ch-plan .ctitle .o{color:var(--paper-ink)}
body.compact .lworld::before{background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 40%,rgba(255,255,255,.97) 47%,rgba(255,255,255,.97) 100%)}
.lscrawl{z-index:9}
#ch-plan .eyebrow{text-shadow:none}
.petals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.petals.front{filter:blur(2.5px);z-index:4}
.vjp{position:absolute;z-index:3;font-family:'Noto Sans JP',var(--wide),sans-serif;font-weight:700;font-size:15px;line-height:1;color:#fff;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.3em;pointer-events:none;padding-top:34px;border-top:0}
.vjp::before{content:"";position:absolute;top:0;left:50%;width:1px;height:24px;background:rgba(255,255,255,.75)}
.hel{position:absolute;z-index:5;background:rgba(14,15,19,.78);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.08);border-radius:16px;color:var(--ink)}
.hcopy{width:300px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px}
.hcopy .hk{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);font-weight:600}
.hcopy p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.hrow{display:flex;align-items:center;gap:14px;margin-top:2px}
.mini-store{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 12px;border-radius:999px;background:var(--ink);color:var(--paper-ink);font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;text-decoration:none;transition:transform .35s var(--ease)}
.mini-store svg{width:16px;height:16px}
.mini-store:hover{transform:translateY(-2px)}
.mini-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none}
.mini-link i{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:transform .4s var(--ease)}
.mini-link i svg{width:12px;height:12px}
.mini-link:hover i{transform:translateY(3px)}
.hpick-unused{display:flex;gap:12px;align-items:center;padding:8px 14px 8px 8px;width:270px}
.hpick .th{flex:none;width:56px;height:56px;border-radius:10px;background-size:auto 100%;background-position:56% center}
.hpick b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);font-weight:600;margin-bottom:3px}
.hpick span{font-size:13.5px;line-height:1.35;color:var(--ink)}
.h-sub{margin:0;font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(24px,2.6vw,44px);line-height:1.05;color:var(--ink);text-shadow:0 1px 18px rgba(0,0,0,.7)}
.h-sub .pk{color:var(--pink)}
.h1{margin:0;font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.02em;font-size:clamp(34px,4.3vw,78px);color:var(--ink)}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.h1 .ln>span{display:block}
.h1 .pk{color:var(--pink)}
.h-body{margin:0;font-size:19px;line-height:1.5;color:var(--ink);max-width:40ch;font-weight:500}
.tag{position:absolute;z-index:8;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);line-height:1.5;padding:10px 14px 10px 16px;border-left:2px solid var(--ink2);background:rgba(10,11,14,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:0 10px 10px 0}
.tag b{display:block;color:var(--ink);font-weight:600}
.peek{opacity:0;visibility:hidden}
.peek b{color:var(--pink)}
.peek span{display:block}
#tagCrow{border-color:var(--pink)}
#tagCrow b{color:var(--pink)}
.cpanel{background:rgba(10,11,14,.8);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(244,246,249,.08);border-radius:22px;padding:24px 26px 26px}
.cpanel .cbody{color:var(--ink);text-shadow:none}
/* Crow's window: the phone screen that grows into the world */
.win{position:absolute;inset:0;z-index:7;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;will-change:clip-path}
.win .wi{position:absolute;background-size:100% 100%;background-repeat:no-repeat}
/* (retired) magnifier */
.mag{position:absolute;border-radius:50%;overflow:hidden;border:3px solid var(--pink);box-shadow:0 0 0 6px rgba(10,11,14,.35),0 24px 60px rgba(0,0,0,.5);
  background-repeat:no-repeat;transform:scale(0);z-index:3}
.mag-note{position:absolute;z-index:4;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  max-width:220px;line-height:1.45;opacity:0;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.mag-note b{display:block;color:var(--pink);font-weight:600;margin-bottom:4px}
.mag-note b{position:relative}

/* hero words */
.headline{position:absolute;inset:0;z-index:6;pointer-events:none;margin:0;font-weight:400}
.word{position:absolute;font-family:var(--wide);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.8;white-space:nowrap;letter-spacing:-.01em;text-shadow:0 10px 60px rgba(0,0,0,.35)}
.word .ch{display:inline-block;will-change:transform}
.w-fly{color:var(--ink)}
.w-crooked{color:var(--pink)}
.hero-copy{position:absolute;z-index:8;display:flex;flex-direction:column;gap:22px;max-width:380px}
.hero-copy p{margin:0;font-size:19px;line-height:1.45;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
.hero-copy p span{color:var(--ink2)}
.store{display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 8px 0 24px;border-radius:999px;align-self:flex-start;text-decoration:none;
  background:linear-gradient(var(--paper),var(--paper-2));color:var(--paper-ink);box-shadow:0 14px 30px rgba(0,0,0,.45);transition:transform .35s var(--ease)}
.store .t{display:flex;flex-direction:column;line-height:1}
.store small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#474B55;margin-bottom:5px}
.store strong{font-family:var(--display);font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.store i{width:48px;height:48px;border-radius:50%;background:var(--paper-ink);display:grid;place-items:center;transition:transform .45s var(--ease)}
.store i svg{width:22px;height:22px}
.store:hover{transform:translateY(-3px)}
.store:hover i{transform:scale(1.06)}
.mascot{position:absolute;z-index:7;pointer-events:none;will-change:transform}
.mascot img{width:100%;height:auto;max-width:none}
#mascot img{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 99%),linear-gradient(180deg,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 78%,transparent 99%),linear-gradient(180deg,#000 80%,transparent 100%);mask-composite:intersect}
.lens{position:absolute;z-index:9;overflow:hidden;border-radius:50%;border:3px solid var(--pink);opacity:0;pointer-events:none;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.lens .li{position:absolute;background-size:100% 100%;max-width:none}
.scrollcue{position:absolute;z-index:10;color:var(--paper-ink);bottom:26px;right:max(32px,3vw);font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue .cue-in span{width:1px;height:34px;background:linear-gradient(var(--pink),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* chapter copy */
.chap{position:absolute;z-index:8;opacity:0;visibility:hidden;max-width:520px}
.eyebrow{text-shadow:0 1px 10px rgba(0,0,0,.8);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);display:flex;gap:14px;align-items:center;margin:0 0 18px}
.eyebrow em{font-style:normal;color:var(--ink2)}
.ctitle{text-shadow:0 2px 30px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4);font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.98;letter-spacing:-.02em;margin:0 0 22px;font-size:clamp(30px,3.15vw,58px);text-wrap:balance}
.ctitle .o{display:block;color:var(--ink)}
.ctitle .p{display:block;color:var(--pink)}
.ctitle .ln{display:block;overflow:hidden;padding-bottom:.04em}
.ctitle .ln>span{display:block}
.cbody{font-size:17px;line-height:1.55;color:var(--ink);margin:0;max-width:44ch}
.cbody b{color:var(--ink);font-weight:600}
.clist{list-style:none;margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(244,246,249,.12);padding:0;display:grid;gap:12px;max-width:46ch}
.clist li{display:grid;grid-template-columns:30px 1fr;gap:6px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.clist li::before{content:attr(data-n);font-family:var(--mono);font-weight:600;font-size:13px;line-height:1.9;color:var(--pink)}
.slices{list-style:none;margin:6px 0 22px;padding:0;display:grid;gap:0;max-width:46ch}
.slices li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-top:1px solid rgba(244,246,249,.14);font-size:16px;line-height:1.4;color:var(--ink2)}
.slices li span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;white-space:nowrap;padding-top:3px}
.slices li s{text-decoration-color:var(--pink);text-decoration-thickness:2px}


/* ---------- phone ---------- */
.phone-pos{position:absolute;left:0;top:0;width:417px;height:876px;z-index:7;will-change:transform;transform-origin:50% 50%}
.phone{position:absolute;inset:0;border-radius:68px;background:linear-gradient(145deg,#d8d4cc 0%,#8f8b84 22%,#c9c5bd 48%,#77746e 74%,#bdb9b1 100%);padding:12px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 6px #0b0c0f,0 40px 90px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.4)}
.phone .btn-side{position:absolute;width:4px;border-radius:2px;background:#9a968f}
.screen{position:relative;width:393px;height:852px;border-radius:56px;overflow:hidden;background:var(--bg);isolation:isolate;
  font-family:var(--body);color:var(--ink);font-size:17px;line-height:1.3}
.island{position:absolute;z-index:30;left:50%;top:11px;width:124px;height:36px;border-radius:20px;background:#000;transform:translateX(-50%)}
.status{position:absolute;z-index:29;left:0;right:0;top:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:6px 32px 0 44px;font-family:var(--sf);font-weight:600;font-size:17px;color:#fff}
.status .icons{display:flex;gap:6px;align-items:center}
.status svg{height:12px;width:auto}
.scr{position:absolute;inset:0;overflow:hidden}
.dots{background-color:var(--bg);background-image:radial-gradient(circle at 22% 4%,#242733 0,#16181F 40%,transparent 75%),radial-gradient(rgba(196,203,216,.11) 1.1px,transparent 1.3px);background-size:100% 100%,13px 13px}
.dots::after{content:"";position:absolute;inset:420px 0 0;background:var(--bg)}
.dots>*{position:relative;z-index:1}
.photo-fade{position:absolute;left:0;right:0;top:0;pointer-events:none}
.a-eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.a-bar{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.92}
.pk{color:var(--pink)}
.glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.circ{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.circ svg{width:18px;height:18px}
.tabbar{position:absolute;z-index:20;left:16px;right:16px;bottom:22px;height:64px;border-radius:32px;display:flex;justify-content:space-around;align-items:center;background:rgba(28,30,36,.72);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.tabbar div{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--sf);font-size:10px;font-weight:500;color:#6A6F7A;width:70px}
.tabbar div.on{color:var(--pink)}
.tabbar svg{width:24px;height:24px}
.prim{height:56px;border-radius:999px;background:linear-gradient(#fff,#E4E7ED);color:var(--paper-ink);display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 22px;font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;box-shadow:0 14px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9)}
.prim i{width:44px;height:44px;border-radius:50%;background:var(--paper-ink);display:grid;place-items:center}
.prim i svg{width:18px;height:18px}
.prim i img{width:24px;height:24px;max-width:none}
.sec{height:56px;border-radius:999px;background:var(--panel);border:1px solid var(--rule2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;color:var(--ink)}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule2);color:var(--ink2);white-space:nowrap}
.chip.sel{background:var(--ink);color:var(--paper-ink);border-color:var(--ink)}
.hub{display:flex;gap:5px;padding:0 14px}
.hub .chip{flex:1;justify-content:center;padding:0 4px;font-size:11.5px;letter-spacing:.03em;height:32px}
.onum{font-family:var(--display);font-weight:700;color:transparent;-webkit-text-stroke:1px var(--muted);line-height:1}
.hair{border-top:1px solid var(--rule)}

/* S0 + S4: today line */
.today-head{position:absolute;left:18px;right:18px;top:62px;display:flex;justify-content:space-between;align-items:flex-start}
.city{font-family:var(--display);font-weight:700;font-size:44px;line-height:.9;text-transform:uppercase;text-shadow:0 3px 10px rgba(0,0,0,.5)}
.datepill{margin-top:10px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px;border-radius:999px;background:rgba(0,0,0,.56);font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.06em}
.datepill b{width:22px;text-align:center;font-weight:500;color:var(--ink2)}
.wx{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wx .t{font-family:var(--mono);font-weight:600;font-size:38px;line-height:1;margin-top:6px}
.wx .c{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.05em;color:var(--ink2)}
.wx .alert{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--pink)}
.line{position:absolute;left:18px;right:18px}
.row{display:grid;grid-template-columns:22px 1fr;column-gap:12px;position:relative}
.row .node{position:relative;display:flex;justify-content:center}
.row .node::before{content:"";position:absolute;top:0;bottom:0;width:2px;left:10px;background:var(--rule2)}
.row.trav .node::before{background:rgba(255,61,129,.55)}
.row .dot{position:relative;margin-top:2px;width:16px;height:16px;border-radius:50%;border:2px solid #3A3E47;background:var(--bg);display:grid;place-items:center}
.row .dot svg{width:8px;height:8px}
.row .dot.now{width:18px;height:18px;border:2.5px solid var(--pink)}
.row .dot.now::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
.row .dot.next{width:14px;height:14px;border:1.5px solid var(--pink);margin-left:1px}
.row .dot.later{width:12px;height:12px;border:1.5px solid #3A3E47;margin-top:4px}
.row .dot.crow{width:22px;height:22px;border:0;background:var(--pink);margin-top:0}
.row .dot.crow img{width:13px;height:13px;max-width:none}
.done{display:flex;align-items:baseline;gap:12px;padding-bottom:18px;color:var(--ink2)}
.done .tm{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--muted)}
.done .nm{font-weight:600;font-size:18px;flex:1}
.done .st{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.nowlbl{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.nowlbl .tm{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.nowlbl .nm{font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase;flex:1;line-height:1}
.nowlbl .st{font-family:var(--mono);font-size:13px;color:var(--pink);font-weight:600}
.paper{background:var(--paper);color:var(--paper-ink);border-radius:22px;overflow:hidden;margin-bottom:18px}
.paper .ph{height:132px;background-size:cover;background-position:center 42%}
.paper .bd{padding:13px 15px 15px;display:grid;gap:8px}
.paper .eb{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--ghost)}
.paper p{margin:0;font-size:16px;line-height:1.35}
.acts{display:flex;gap:8px;margin-top:2px}
.acts span{height:34px;padding:0 15px;border-radius:999px;display:inline-flex;align-items:center;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;border:1px solid #B8BDC7}
.acts span.f{background:var(--paper-ink);color:#fff;border-color:var(--paper-ink)}
.later{display:grid;grid-template-columns:44px 46px 1fr auto;gap:10px;align-items:center;padding-bottom:16px}
.later .tm{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--muted)}
.later .th{width:46px;height:46px;border-radius:10px;background-size:cover;background-position:center}
.later .nm{font-family:var(--display);font-weight:700;font-size:23px;text-transform:uppercase;color:var(--ink2);line-height:.95}
.later .tr{font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.pick{position:absolute;left:16px;right:16px;bottom:100px}
.pick .nowlbl{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pick .paper{margin:0}
.flag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--pink);border:1px solid rgba(255,61,129,.45);border-radius:6px;padding:3px 7px}
.nudge{border-radius:18px;padding:15px;background:linear-gradient(#21232B,#141519);border:1px solid var(--rule2);box-shadow:0 12px 26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);margin-bottom:16px}
.nudge .a-eyebrow{color:var(--pink);font-size:12.5px;letter-spacing:.12em}
.nudge h4{margin:8px 0 6px;font-family:var(--display);font-weight:700;font-size:27px;text-transform:uppercase;line-height:.92}
.nudge p{margin:0 0 12px;font-size:16px;line-height:1.38;color:var(--ink2)}
.nudge p b{color:var(--ink);font-weight:600}
.nudge .btns{display:grid;grid-template-columns:1.35fr 1fr;gap:8px}
.nudge .prim,.nudge .sec{height:48px;font-size:19px}
.nudge .prim i{width:36px;height:36px}
.nudge .foot{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ghost)}
.dim{opacity:.5}

/* S1 trip shape */
.topbar{position:absolute;left:0;right:0;top:54px;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-family:var(--mono);font-size:13px;letter-spacing:.1em}
.topbar .c{color:var(--ink2);font-weight:600}
.shape-head{position:absolute;left:20px;right:20px;top:116px}
.shape-head h3{margin:8px 0 6px;font-family:var(--display);font-weight:700;font-size:55px;line-height:.9;letter-spacing:-.01em}
.shape-head p{margin:0 0 8px;color:var(--ink2);font-size:16.5px}
.it-top{position:absolute;left:16px;right:16px;top:62px;display:flex;justify-content:space-between}
.it-top svg{width:14px;height:14px}
.it-city{position:absolute;left:18px;top:112px;font-family:var(--display);font-weight:700;font-size:64px;line-height:.9}
.it-hub{position:absolute;left:0;right:0;top:184px}
.it-days{position:absolute;left:18px;top:232px;display:flex;gap:6px}
.it-days b{width:40px;height:40px;border-radius:12px;border:1px solid var(--rule2);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink2)}
.it-days b.on{background:var(--ink);color:var(--paper-ink);border-color:var(--ink)}
.it-dh{position:absolute;left:18px;right:18px;top:290px;display:flex;align-items:baseline;gap:12px}
.it-dh .onum{font-size:22px;-webkit-text-stroke:1px #8A909B}
.it-dh b{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.02em}
.it-why{position:absolute;left:18px;right:18px;top:326px;margin:0;font-size:15.5px;line-height:1.4;color:var(--muted)}
.it-act{position:absolute;left:18px;top:384px;display:flex;gap:18px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.07em;color:var(--pink)}
.it-rows{position:absolute;left:18px;right:18px;top:414px}
.it-row{display:grid;grid-template-columns:46px 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--rule)}
.it-row .tm{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--ink2);padding-top:3px}
.it-row b{display:block;font-family:var(--display);font-weight:700;font-size:21px;text-transform:uppercase;line-height:1}
.it-row p{margin:4px 0 6px;font-size:14px;line-height:1.35;color:var(--muted)}
.tchip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--rule2);font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}
.tchip.w{background:var(--ink);color:var(--paper-ink);border-color:var(--ink);font-weight:600}
.notif{position:absolute;z-index:25;left:10px;right:10px;top:56px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:22px;background:rgba(40,42,48,.82);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.1);font-family:var(--sf);color:#fff;opacity:0;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.notif img{width:38px;height:38px;border-radius:9px;background:var(--pink);padding:7px;max-width:none;flex:none}
.notif b{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.notif b span{font-weight:400;font-size:13px;color:#b9bcc4}
.notif p{margin:2px 0 0;font-size:14.5px;line-height:1.3}
.notif div{flex:1}
.pass{position:absolute;left:18px;right:18px;top:300px;border-radius:26px;background:linear-gradient(#fff,#F4F6F9 60%,#E8EBF0);color:var(--paper-ink);overflow:hidden;box-shadow:0 24px 24px rgba(0,0,0,.6)}
.pass .wm{position:absolute;right:-40px;bottom:-40px;width:190px;opacity:.09;max-width:none}
.pass .hd{display:flex;align-items:center;gap:8px;padding:16px 22px 10px}
.pass .hd img{width:20px;height:20px;max-width:none}
.pass .hd b{font-family:var(--mark);font-weight:400;font-size:19px}
.pass .hd span{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--pink)}
.pass .rl{margin:0 22px;height:2px;background:linear-gradient(90deg,var(--pink) 84px,#E1E4EA 84px)}
.pass .stub{padding:12px 22px 14px}
.pass .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ghost)}
.pass .lab .pk{font-weight:600}
.pass .rt{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:700;font-size:40px;line-height:1;margin-top:4px}
.pass .rt svg{width:24px;height:24px;color:var(--pink)}
.perf{position:relative;height:0;border-top:2px dashed rgba(255,61,129,.55);margin:0 22px}
.perf::before,.perf::after{content:"";position:absolute;top:-16px;width:30px;height:30px;border-radius:50%;background:var(--bg)}
.perf::before{left:-38px}.perf::after{right:-38px}
.assume{position:absolute;left:18px;right:18px;top:556px;background:var(--well);border:1px solid #33373F;border-radius:16px;padding:14px 16px 14px 19px;overflow:hidden}
.assume::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pink)}
.assume h5{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase}
.assume ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:15.5px;color:var(--ink2)}
.assume li::before{content:"·";color:var(--pink);font-weight:700;margin-right:8px}
.assume .ch{margin-top:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--pink);font-weight:600}
.legs{position:absolute;left:18px;right:18px;top:722px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:6px}
.leg{background:linear-gradient(#1B1D24,#121318);border:1px solid var(--rule2);border-radius:14px;padding:10px 10px 10px 13px;position:relative}
.leg::before{content:"";position:absolute;left:0;top:12px;width:3px;height:30px;background:var(--pink)}
.leg b{display:block;font-family:var(--display);font-weight:700;font-size:21px;line-height:1}
.leg span{font-family:var(--mono);font-size:11px;color:#8A909B;letter-spacing:.06em}
.legs .x{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;line-height:1.2}
.foot-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(14,15,19,0),rgba(14,15,19,.95) 50%);z-index:5}

/* S2 fares */
.fare-head{position:absolute;left:20px;right:20px;top:66px}
.fare-head h3{margin:0;font-family:var(--display);font-weight:700;font-size:30px}
.fare-head p{margin:4px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.fmap{position:absolute;left:0;right:0;top:128px;height:150px}
.big{position:absolute;left:20px;right:20px;top:286px}
.big .l1{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;color:var(--muted);display:flex;gap:12px;align-items:baseline}
.big .l1 s{text-decoration-thickness:2px}
.big .l2{font-family:var(--display);font-weight:700;font-size:66px;line-height:.92;display:flex;gap:12px;align-items:baseline}
.big .l2 span{font-size:44px;color:var(--ink)}
.why{position:absolute;left:20px;right:20px;top:398px;font-size:16px;line-height:1.42;color:var(--ink2)}
.why mark{background:var(--ink);color:var(--paper-ink);border-radius:999px;padding:1px 8px;font-weight:600}
.ticket{position:absolute;left:18px;right:18px;top:480px;background:var(--paper);color:var(--paper-ink);border-radius:22px;overflow:hidden}
.ticket .lg{padding:12px 18px;display:grid;grid-template-columns:1fr auto;align-items:end}
.ticket .lg small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ghost)}
.ticket .lg b{font-family:var(--display);font-size:28px;font-weight:700;line-height:1}
.ticket .lg .pr{font-family:var(--mono);font-weight:600;font-size:18px}
.ticket .lg+.lg{border-top:1px solid #E1E4EA}
.ticket .bot{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.barcode{display:flex;gap:2px;height:40px;align-items:stretch}
.barcode i{background:var(--paper-ink);display:block}
.track{height:36px;padding:0 14px;border-radius:999px;background:var(--paper-ink);color:#fff;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.05em}
.drop{position:absolute;left:20px;right:20px;top:720px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.drop b{color:var(--pink);font-weight:600}
.bookbtn{position:absolute;left:18px;right:18px;bottom:28px}

/* S3 hub screens */
.hub-photo{position:absolute;left:0;right:0;top:0;height:210px;background-size:cover;background-position:center}
.hub-top{position:absolute;left:14px;right:14px;top:60px;display:flex;align-items:center;gap:12px}
.hub-top .circ{width:34px;height:34px;border:1px solid var(--rule2);background:rgba(10,11,14,.4)}
.hub-top .circ svg{width:13px;height:13px}
.hub-top b{font-family:var(--display);font-weight:700;font-size:32px;line-height:1;text-shadow:0 1px 7px rgba(0,0,0,.55)}
.hubrow{position:absolute;left:0;right:0;top:112px}
.tw{position:absolute;left:18px;right:18px;top:166px}
.tw h3{margin:0;font-family:var(--display);font-weight:700;font-size:56px;line-height:.9}
.tw .sub{margin:6px 0 10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;color:var(--muted)}
.wire{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:13px 0;border-top:1px solid var(--rule)}
.wire .onum{font-size:30px}
.wire .onum.f{color:var(--pink);-webkit-text-stroke:0}
.wire .dt{font-family:var(--mono);font-size:12px;letter-spacing:.09em;color:var(--muted)}
.wire h6{margin:3px 0 4px;font-family:var(--display);font-weight:700;font-size:26px;line-height:.95;text-transform:uppercase}
.wire p{margin:0;font-size:15.5px;line-height:1.36;color:var(--muted)}
.wire p+p{margin-top:5px;color:var(--ink2)}
.wire p strong{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--pink);font-weight:600;margin-right:6px}
.rc{position:absolute;left:18px;right:18px;top:166px}
.rc .eb{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:var(--muted)}
.rc .amt{font-family:var(--display);font-weight:700;font-size:62px;line-height:.95;margin:6px 0 10px;white-space:nowrap}
.toggle{display:flex;align-items:center;gap:12px}
.toggle .tg{display:flex;padding:3px;border-radius:999px;border:1.5px solid var(--rule2);background:linear-gradient(#191B23,#111318)}
.toggle .tg span{width:64px;height:30px;border-radius:999px;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink2)}
.toggle .tg span.on{background:var(--ink);color:var(--paper-ink)}
.toggle small{font-family:var(--mono);font-size:12.5px;color:#9BA1AC}
.leak-h{margin:18px 0 4px;font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;color:var(--pink);font-weight:600}
.leak{display:grid;grid-template-columns:36px 1fr auto;gap:8px;padding:11px 0;border-top:1px solid var(--rule);align-items:start}
.leak .onum{font-size:26px}
.leak b{display:block;font-family:var(--display);font-weight:700;font-size:24px;line-height:.95;text-transform:uppercase}
.leak span{font-size:15px;color:#9BA1AC}
.leak .v{text-align:right;font-family:var(--display);font-weight:700;font-size:24px;line-height:1}
.leak .v small{display:block;font-family:var(--mono);font-weight:400;font-size:12px;color:#9BA1AC}
.total{display:flex;align-items:baseline;gap:8px;padding-top:12px;border-top:1px dashed var(--pink);font-family:var(--mono);color:var(--pink)}
.total .ld{flex:1;border-bottom:2px dotted rgba(255,61,129,.5);transform:translateY(-4px)}
.total b{font-size:24px;font-weight:600}

/* S4b lock screen */
.lock{background:#07080a}
.lock .wall{position:absolute;inset:0;background-size:cover;background-position:58% center;filter:brightness(.5) contrast(1.05)}
.lock .lt{position:absolute;left:0;right:0;top:92px;text-align:center;font-family:var(--sf);color:#fff}
.lock .lt small{display:block;font-size:20px;font-weight:600;opacity:.9}
.lock .lt b{display:block;font-size:96px;font-weight:600;line-height:1;letter-spacing:-.02em;margin-top:2px}
.la{position:absolute;left:12px;right:12px;bottom:150px;border-radius:26px;background:rgba(0,0,0,.72);padding:14px 16px 16px;font-family:var(--sf);color:#fff;overflow:hidden}
.la::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 78%,rgba(28,242,166,.42),rgba(28,242,166,.12) 35%,transparent 70%);pointer-events:none}
.la>*{position:relative}
.la .r1{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600}
.la .r1 em{font-style:normal;font-family:var(--mark);font-weight:400;font-size:14px;color:#9a9ea6}
.la .r2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:8px}
.la .r2 b{font-size:22px;font-weight:700}
.la .r2 .tm{font-size:22px;font-weight:600;color:var(--live);font-variant-numeric:tabular-nums}
.la .r2 small{display:block;font-size:12px;color:#c9ccd2;margin-top:1px}
.la .r2 .rt{text-align:right}
.la svg.hump{display:block;width:100%;height:20px;margin:8px 0 6px}
.la .cd{font-size:21px;font-weight:600;color:var(--live);font-variant-numeric:tabular-nums}
.la .cd small{display:block;font-size:10px;font-weight:500;color:#9a9ea6;letter-spacing:.04em}
.lock .bt{position:absolute;bottom:36px;left:46px;right:46px;display:flex;justify-content:space-between}
.lock .bt span{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lock .hb{position:absolute;bottom:9px;left:50%;width:140px;height:5px;border-radius:3px;background:#fff;transform:translateX(-50%)}

/* S5 memory */
.mem{position:absolute;left:20px;right:20px;top:110px}
.poster{font-family:var(--display);font-weight:700;font-size:50px;line-height:.84;text-transform:uppercase;margin:6px 0 12px}
.poster .o{display:block;color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.poster .p{display:block;color:var(--pink)}
.mem .st{font-size:16px;color:var(--ink2);margin:0 0 10px}
.mrow{display:grid;grid-template-columns:34px 1fr auto;gap:8px;padding:12px 0;border-top:1px solid var(--rule);align-items:start}
.mrow .onum{font-size:26px}
.mrow b{font-family:var(--display);font-weight:700;font-size:23px;text-transform:uppercase;line-height:1}
.mrow p{margin:3px 0 0;font-size:15.5px;line-height:1.35;color:var(--muted)}
.mrow .e{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ghost);padding-top:4px}
.mrow .nx{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--pink);font-weight:600}
.nexttrip{position:absolute;left:18px;right:18px;bottom:30px;border-radius:18px;padding:14px 16px 14px 19px;background:var(--well);border:1px solid #33373F;overflow:hidden}
.nexttrip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pink)}
.nexttrip .a-eyebrow{color:var(--pink);font-size:12px}
.nexttrip p{margin:6px 0 0;font-size:15.5px;line-height:1.38;color:var(--ink2)}
.nexttrip p b{color:var(--ink);font-weight:600}

/* ---------- why crow (paper) ---------- */
.why-sec{background:var(--paper);color:var(--paper-ink);padding-block:120px 110px;position:relative;overflow:hidden}
.why-sec .inner{max-width:1320px;margin:0 auto}
.why-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.why-head h2{margin:0;font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.02em;font-size:clamp(40px,5.4vw,96px)}
.why-head h2 .o{display:block;color:var(--paper-ink)}
.why-head h2 .p{display:block;color:var(--pink)}
.why-head p{margin:0;font-size:19px;line-height:1.55;color:#3b3f48;max-width:46ch}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{position:relative;border-radius:26px;background:#fff;border:1px solid #DDE1E7;min-height:430px;display:flex;flex-direction:column;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(14,15,19,.14)}
.card .art{position:relative;height:270px;background:radial-gradient(rgba(14,15,19,.09) 1.1px,transparent 1.3px) 0 0/13px 13px;overflow:hidden}
.card .art img{position:absolute;left:50%;bottom:-6px;height:300px;width:auto;max-width:none;transform:translateX(-50%) translateY(10px);transition:transform .7s var(--ease)}
.card:hover .art img{transform:translateX(-50%) translateY(-6px) rotate(-2deg)}
.card .perf2{position:relative;border-top:2px dashed rgba(255,61,129,.5);margin:0 22px}
.card .perf2::before,.card .perf2::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--paper);border:1px solid #DDE1E7}
.card .perf2::before{left:-37px;clip-path:inset(0 0 0 50%)}
.card .perf2::after{right:-37px;clip-path:inset(0 50% 0 0)}
.card .tx{padding:20px 24px 26px;display:grid;gap:8px}
.card .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#6b707b}
.card h3{margin:0;font-family:var(--wide);font-stretch:115%;font-weight:800;font-size:24px;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.card h3 em{font-style:normal;color:var(--pink)}
.card p{margin:0;font-size:16px;line-height:1.5;color:#3b3f48}

/* ---------- get crow (pink) ---------- */
.get-sec{position:relative;background:var(--pink);color:var(--paper-ink);overflow:hidden;padding-block:110px 0}
.get-sec .inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:end;position:relative}
.get-sec h2{margin:0 0 26px;font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(60px,10vw,180px);letter-spacing:-.03em}
.get-sec h2 .o{display:block;color:var(--paper-ink)}
.who{font-size:20px;line-height:1.5;max-width:40ch;margin:0 0 34px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--paper-ink);max-width:640px;margin-bottom:34px}
.plans div{padding:18px 20px 4px 0}
.plans div+div{padding-left:20px;border-left:2px solid var(--paper-ink)}
.plans b{display:block;font-family:var(--wide);font-stretch:115%;font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.plans .price{font-family:var(--mono);font-size:14px;letter-spacing:.04em;margin:8px 0 8px;display:block}
.plans p{margin:0;font-size:15px;line-height:1.5}
.get-sec .store{background:var(--paper-ink);color:var(--ink);box-shadow:0 18px 40px rgba(14,15,19,.35)}
.get-sec .store small{color:#9197A1}
.get-sec .store i{background:var(--pink)}
.get-sec .store i svg{color:var(--paper-ink)}
.fine{font-family:var(--mono);font-size:12px;letter-spacing:.05em;margin:18px 0 110px;opacity:.75}
.shades{align-self:end;justify-self:end;width:min(520px,100%);margin-bottom:-6px}
.shades img{width:100%;height:auto;max-width:none}
footer{background:var(--ground);color:var(--muted);font-size:14px}
footer .inner{max-width:1320px;margin:0 auto;padding-block:40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .brand{color:var(--ink);font-size:20px}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* mobile sticky CTA */
.mcta{display:none}

@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{display:none}
}
@media (max-width:760px){
  .nav{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;padding-left:max(18px,var(--gutter-l));padding-right:max(18px,var(--gutter-r))}
  .nav .get{display:none}
  .hero-copy{display:none}
  .rail{display:none}
  .scrollcue{display:none}
  .ctitle{font-size:clamp(38px,11.5vw,58px);margin-bottom:14px}
  .eyebrow{margin-bottom:10px;font-size:12px}
  .cbody{font-size:15.5px;line-height:1.5}
  .clist,.slices{display:none}
  .mag-note{font-size:11px;max-width:150px}
  .why-sec{padding-block:80px 70px}
  .why-head{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:calc(-1*max(24px,var(--gutter-l)));margin-right:calc(-1*max(24px,var(--gutter-r)));padding:0 max(24px,var(--gutter-r)) 10px max(24px,var(--gutter-l));scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 78%;scroll-snap-align:start;min-height:400px}
  .get-sec{padding-top:70px}
  .get-sec .inner{grid-template-columns:1fr}
  .who{font-size:17px}
  .plans{grid-template-columns:1fr}
  .plans div+div{padding-left:0;border-left:0;border-top:2px solid var(--paper-ink);margin-top:14px}
  .fine{margin-bottom:30px}
  .shades{justify-self:center;width:78%}
}
body.compact .hero-copy,body.compact .rail,body.compact .scrollcue{display:none}
body.compact .h-body,body.compact .hero-text .store{display:none}
body.compact .hcopy{display:none}
body.compact .vjp{display:none}
body.compact .mnote,body.compact .scrawl{display:none}
body.compact .stop small{display:none}
body.compact .stop span{transform:translateY(-16px)}
body.compact .stop{font-size:11px}
body.compact .lensnote{font-size:10.5px;padding:6px 10px}
body.compact .h-sub{font-size:clamp(22px,7vw,34px);background:rgba(10,11,14,.82);padding:10px 14px;border-radius:12px;align-self:flex-start}
body.compact .hero-text{gap:14px}
body.compact .cpanel{padding:16px 18px 18px}
body.compact .ctitle{font-size:clamp(22px,6vw,36px);margin-bottom:12px}
body.compact .chap .eyebrow{display:none}
body.compact .cbody{font-size:14.5px}
body.compact .mcta{display:flex;position:fixed;z-index:70;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);transition:transform .5s var(--ease),opacity .3s}
body.compact .mcta .store{height:48px;gap:10px;padding:0 5px 0 18px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
body.compact .mcta .store small{font-size:9px;margin-bottom:3px}
body.compact .mcta .store strong{font-size:18px}
body.compact .mcta .store i{width:38px;height:38px}
body.compact .mcta .store i svg{width:17px;height:17px}
body.compact .mcta.away{transform:translate(-50%,160%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .grain,.scrollcue span,.row .dot.now::after{animation:none}
}

/* before the script has measured the frame, nothing is placed yet: show the sky and a quiet crow, never raw layers */
#stage:not(.live){background:radial-gradient(120% 90% at 50% 38%,#ff6aa0 0%,var(--pink) 60%)}
#stage:not(.live)>*{visibility:hidden!important}
#stage>.bg{display:none!important}
#stage:not(.live)::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;background:url(/story-v34/img/crow-mark.png) center/contain no-repeat;opacity:.85;animation:stWait 1.6s ease-in-out infinite}
@keyframes stWait{50%{opacity:.35;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#stage:not(.live)::after{animation:none}}

/* Device (React Bits Pro): the studio-lit 3D phone the app screens live in */
.dv-root{position:relative;display:inline-block;flex-shrink:0;vertical-align:middle;user-select:none;-webkit-user-select:none;container-type:size;-webkit-tap-highlight-color:transparent}
.dv-root *{box-sizing:border-box}
.dv-shadow{pointer-events:none;position:absolute;left:50%;top:50%;margin-left:-50cqmin;margin-top:-104.6cqmin;height:209.2cqmin;width:100cqmin;border-radius:17.9cqmin;background-color:var(--device-shadow);will-change:transform}
.dv-soft{filter:blur(6.5cqmin)}
.dv-root[data-device-page=light] .dv-soft{filter:blur(9cqmin)}
.dv-tight{filter:blur(1.6cqmin)}
.dv-root[data-device-page=light] .dv-tight{filter:blur(2.2cqmin)}
.dv-stage{position:absolute;inset:0;perspective:520cqmin}
.dv-body{position:absolute;left:50%;top:50%;margin-left:-50cqmin;margin-top:-104.6cqmin;height:209.2cqmin;width:100cqmin;transform-style:preserve-3d;will-change:transform}
.dv-back{position:absolute;inset:0;border-radius:17.9cqmin;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(-5.75cqmin) rotateY(180deg)}
.dv-facet{position:absolute;left:0;top:0;background-color:var(--device-metal);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dv-band::after{pointer-events:none;position:absolute;inset:0;content:"";background-image:var(--device-b,none);-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.dv-key{border-radius:1.2cqmin}
.dv-control{border-radius:1.8cqmin}
.dv-keyfront{position:absolute;background-color:var(--device-metal);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dv-front{position:absolute;inset:0;border-radius:17.9cqmin;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(5.75cqmin)}
.dv-frame{position:absolute;inset:0;will-change:transform}
.dv-ring{position:absolute;background-color:var(--device-metal);background-repeat:no-repeat}
.dv-glass{position:absolute;inset:2.2cqmin;overflow:hidden;border-radius:15.7cqmin;background-color:#000;isolation:isolate}
.dv-screen{position:absolute;overflow:hidden;background-color:var(--device-screen)}
.dv-content{position:absolute}
.dv-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.dv-scroll::-webkit-scrollbar{display:none}
.dv-picture{display:block;height:100%;width:100%}
.dv-picture-tall{height:auto;min-height:100%}
.dv-image{display:block;height:100%;width:100%;object-fit:cover;-webkit-user-drag:none}
.dv-image-tall{height:auto;min-height:100%}
.dv-edge{pointer-events:none;position:absolute;inset:0;border-radius:inherit}
.dv-wake{pointer-events:none;position:absolute;inset:0;background-color:#000}
.dv-island{pointer-events:none;position:absolute;left:50%;margin-left:-16cqmin;height:9cqmin;width:32cqmin;border-radius:9999px;background-color:#000}
.dv-lens{position:absolute;right:2.9cqmin;top:50%;margin-top:-1.6cqmin;width:3.2cqmin;height:3.2cqmin;border-radius:9999px}
.dv-glare{pointer-events:none;position:absolute;left:50%;top:50%;margin-left:-170cqmin;margin-top:-170cqmin;width:340cqmin;height:340cqmin;will-change:transform}

/* ---------- the tour: one still phone, the city changes behind it ---------- */
@font-face{font-family:'Rakkas';src:url(/story-v34/fonts/rakkas.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
.lworld.twc{background:#FF3D81}
.lworld.twc::before{display:none}
.twbg,.twfront,.twsky{position:absolute;left:0;top:0;width:100%;max-width:none;pointer-events:none;user-select:none}
.twsky{z-index:0}
#twNyc .twbg{z-index:1}
/* New York: the wet avenue to Times Square, the Village block in front of it, a cab heading uptown; each in ink with its colour twin on top */
#twNyc .nyR{z-index:1}#twNyc .nyRc{z-index:2}#twNyc .nyS{z-index:3}#twNyc .nySc{z-index:4}#twNyc .nyT{z-index:5}#twNyc .nyTc{z-index:5}
/* the cab drives away from us, so it belongs in the right-hand lanes: the same drawing of it, cut from the people layer and moved
   up the avenue into the right lane (the people layer shows everything but the cab where it was drawn) */
#twNyc .nyT,#twNyc .nyTc{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,63.5% 57.8%,72.1% 57.8%,72.1% 69.4%,63.5% 69.4%,63.5% 57.8%)}
#twNyc .nyCab,#twNyc .nyCabc{z-index:5;clip-path:inset(57.8% 27.9% 30.6% 63.5%);transform-origin:67.8% 69.4%;transform:translate(var(--cbx,11.7%),var(--cby,-3.4%)) scale(var(--cbs,.63))}
body.compact #twNyc .twbg.twlight{display:block}
#twNyc .twfade{z-index:5}
#twNyc .nyscrim{position:absolute;left:0;right:0;top:0;height:46%;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(9,10,14,.82) 0%,rgba(9,10,14,.6) 30%,rgba(9,10,14,.25) 62%,rgba(9,10,14,0) 100%)}   /* night over the rooftops so the neon beat and the note read */
.twfront{z-index:4}
/* New York: the headline runs on the big screen over Times Square, the ticker crawls under it */
.lworld.twc.night{background:#0b0a0d}
.tsvid{object-fit:fill;background:#0b0a0d}
.tscrow{position:absolute;z-index:3;max-width:none;pointer-events:none;translate:calc(var(--px)*5px) calc(var(--py)*3px + (var(--sy) - .5)*-10px);filter:drop-shadow(0 0 .5em rgba(255,61,129,.9));animation:crowpulse 3.2s ease-in-out infinite}
@keyframes crowpulse{0%,100%{opacity:.9}50%{opacity:1;filter:drop-shadow(0 0 1.1em rgba(255,61,129,1))}}
.tsboard{position:absolute;z-index:3;translate:calc(var(--px)*5px) calc(var(--py)*3px + (var(--sy) - .5)*-10px);display:grid;place-items:center;text-align:center;overflow:visible;background:transparent}
.tsboard::after{display:none}
.tsline{margin:0;font-family:'Broadbay','Tilt Neon',sans-serif;font-weight:400;color:#ffe9f1;line-height:.92;letter-spacing:.01em;display:grid;gap:.02em;opacity:0;
  text-shadow:0 0 .02em #fff,0 0 .08em #ff3d81,0 0 .22em #ff3d81,0 0 .5em rgba(255,61,129,.7)}
.tsline span{display:block;white-space:nowrap}
.tsline.on{opacity:1;animation:tsflick 7s steps(1,end) infinite}
.tsline.ignite{animation:tsignite 1.7s steps(1,end) both,tsflick 7s steps(1,end) 1.7s infinite}
@keyframes tsflick{0%,93%,95%,100%{opacity:1}94%{opacity:.55}}
@keyframes tsignite{0%{opacity:0}6%{opacity:.5}9%{opacity:0}17%{opacity:.7}21%{opacity:0}26%{opacity:.25}31%{opacity:0}38%{opacity:1}43%{opacity:.35}48%{opacity:1}56%{opacity:.15}61%{opacity:1}69%{opacity:.6}73%{opacity:1}100%{opacity:1}}
.tsticker{position:absolute;z-index:3;translate:calc(var(--px)*5px) calc(var(--py)*3px + (var(--sy) - .5)*-10px);overflow:visible;background:transparent}
.tsticker svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.tsticker text{font-family:var(--mono);font-weight:700;font-size:66px;letter-spacing:.06em;text-transform:uppercase;fill:#FF3D81;filter:drop-shadow(0 0 .35em rgba(255,61,129,.9))}

@media (prefers-reduced-motion:reduce){.tsline.on{animation:none}.tsline.ignite{animation:none;opacity:1}.tsticker .tk{animation:none;padding-left:.5em}}
/* London: a few clouds drift slowly across the sky behind the headline and the tower, each at its own pace */
.twcloud{position:absolute;max-width:none;pointer-events:none;user-select:none;z-index:2;top:0;left:0;translate:calc(var(--px)*8px) calc(var(--py)*4px);animation:cldrift var(--cd,200s) linear infinite;animation-delay:var(--dl,0s)}
.twcloud.c1{width:17%;--cd:260s;--cy:5vh;--dl:-90s}
.twcloud.c2{width:12%;--cd:210s;--cy:14vh;--dl:-30s}
.twcloud.c3{width:8%;--cd:300s;--cy:9vh;--dl:-180s}
#twLon .twcloud{animation:clsway var(--cd) ease-in-out infinite alternate;--cd:16s;transform:none}
#twLon .twcloud.c2{--cd:21s;animation-delay:-7s}
.twside .x{white-space:pre-line}
@keyframes clsway{from{transform:translateX(-1.2vw)}to{transform:translateX(1.2vw)}}
@keyframes cldrift{from{transform:translate(105vw,var(--cy))}to{transform:translate(-25vw,var(--cy))}}
body.compact .twcloud{display:none}
@media (prefers-reduced-motion:reduce){.twcloud{animation:none;transform:translate(30vw,var(--cy))}#twLon .twcloud{animation:none;transform:none}}
/* depth: the far city, the headline, the landmark, the air, then the frame you are standing in. nearer layers move further */
.lworld.twc{--px:0;--py:0;--sy:0}
.twnear{position:absolute;left:0;top:0;max-width:none;pointer-events:none;user-select:none;z-index:4;will-change:transform}
.twfx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
.twc .twbg{translate:calc(var(--px)*5px) calc(var(--py)*3px + (var(--sy) - .5)*-10px)}
.twc .twfront{translate:calc(var(--px)*7px) calc(var(--py)*4px + (var(--sy) - .5)*-14px)}
.twc .twsky{translate:calc(var(--px)*2px) calc(var(--py)*1px + (var(--sy) - .5)*-4px)}
.twc .tsnear{z-index:5;translate:calc(var(--px)*18px) calc(var(--py)*9px + (var(--sy) - .5)*-26px)}
.twc .twnear{translate:calc(var(--px)*30px + (var(--sy) - .5)*-26px) calc(var(--py)*14px + (var(--sy) - .5)*-34px);scale:var(--nz,1)}
@media (prefers-reduced-motion:reduce){.twc .twbg,.twc .twfront,.twc .twnear,.twc .twsky{translate:none}}
body.compact .twfront{display:none}
body.compact #twNyc .twnear{display:block}
body.compact #twNyc .tsnear{display:block}
.twline.one span{display:inline}
.tweb{position:absolute;z-index:6;margin:0;font:600 16px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#0E0F13;opacity:0}
.twc.night .tweb{color:#F4F6F9}
.twfade{position:absolute;left:0;right:0;bottom:0;height:21.4%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(9,10,14,0),rgba(9,10,14,.82))}
.twline.fig.oneline span{display:inline}
.twline.fig.oneline span+span{margin-left:.24em}
.twline.one span+span{margin-left:.24em}
.twline.fig:not(.oneline) span:first-child{display:block;line-height:1}
.twline{position:absolute;z-index:6;margin:0;color:#fff;font-weight:400;line-height:.95;letter-spacing:0;text-transform:none;white-space:nowrap;-webkit-text-stroke:.03em #0E0F13;paint-order:stroke fill;text-shadow:.04em .05em 0 #0E0F13;pointer-events:none}
.twline span{display:block}
@font-face{font-family:'Rahila';src:url(/story-v34/fonts/rahila.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
/* ---- shield from the site-wide resets (the departures board is a Tailwind component: it keeps the site styles) ---- */
:where(#crow-story *:not(svg, svg *, #kBoard, #kBoard *)){all:revert}

#twMrk .twline{font-family:'Rahila','Rakkas',Georgia,serif}
.twmood{opacity:0;transition:opacity 4s cubic-bezier(.4,0,.3,1)}
#twMrk .twmood,#twMrk .twline{transition:none}
#twMrk.warm .twmood{opacity:1}
.lworld.twc.warm .twmood{opacity:1}
.lworld.twc .twmood{transition:opacity 6s cubic-bezier(.4,0,.3,1)}
#twLon.warm .twlight,#twPar.warm .twlight{transition-delay:1.5s}
/* Marrakech, in order: the lantern, then the sky and the upper town, then the foreground lights and the haze */
#twMrk .twnear.twmood,#twMrk .mrksky,#twMrk .twbg.twlight,#twMrk .twfront.twlight,#twMrk .mrkhaze{opacity:0;transition:opacity 5s cubic-bezier(.4,0,.3,1)}
#twMrk.warm .twnear.twmood{opacity:1;transition-duration:3.5s}
#twMrk.warm .mrksky,#twMrk.warm .twbg.twlight{opacity:1;transition-delay:1.8s}
#twMrk.warm .twfront.twlight{opacity:1;transition-delay:3.6s}
#twMrk.warm .mrkhaze{opacity:.1;transition-delay:3.6s}
#twMrk .twline{transition:color 5s cubic-bezier(.4,0,.3,1) 1.8s}
#twMrk.warm .twline{color:#E8C078}
#twLon .twfront.twlight,#twPar .twfront.twlight{z-index:4}
#twNyc .twfront.twlight{z-index:2}
body.compact #twNyc .twfront.twlight{display:block}
#twNyc.warm .twlight{transition-delay:1.2s}
.hlsky{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(var(--gr,500px) calc(var(--gr,500px)*.55) at var(--gx,75%) var(--gy,55%),rgba(255,61,129,.55),rgba(255,61,129,.18) 45%,rgba(255,61,129,0) 75%),
  linear-gradient(180deg,#05040c 0%,#0c0a1e 45%,#1d1236 78%,#2b1640 100%)}
.hlsky i{position:absolute;inset:0;background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%);mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%)}
.hlsky .st1{background-image:url(/story-v34/img/hl-stars1.svg)}
.hlsky .st2{background-image:url(/story-v34/img/hl-stars2.svg);animation:hltw 5.5s ease-in-out infinite alternate}
@keyframes hltw{0%{opacity:1}35%{opacity:.35}60%{opacity:.9}100%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.hlsky .st2{animation:none}}
#twNyc .twline{font-family:'Broadbay','Tilt Neon',sans-serif;color:#ffe9f1;-webkit-text-stroke:0;letter-spacing:.01em;
  text-shadow:0 0 .02em #fff,0 0 .08em #ff3d81,0 0 .22em #ff3d81,0 0 .5em rgba(255,61,129,.7)}
.mrksky{z-index:1}
/* Marrakech's night sky: deepening to violet at the horizon, stars in the upper half */
.mksky{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0d0820 0%,#1f1240 40%,#3a1a5c 66%,#57246d 82%,#6a2a6e 100%)}
.mksky i{position:absolute;inset:0;background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 60%);mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 60%)}
.mksky .st1{background-image:url(/story-v34/img/hl-stars1.svg)}
.mksky .st2{background-image:url(/story-v34/img/hl-stars2.svg);animation:hltw 5.5s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.mksky .st2{animation:none}}
#twMrk .twlight{z-index:1}
#twMrk .mkM{z-index:1}#twMrk .mkMc{z-index:2}#twMrk .mkC{z-index:3}#twMrk .mkCc{z-index:3}#twMrk .twfade{z-index:3}#twMrk .twnear{z-index:5}
/* the phone sits Marrakech out: the scene and its headings carry the chapter */
body.nophone :is(#tpPhone,#tpCard,#tpBack,#tpPop){opacity:0!important;pointer-events:none}
body:not(.nophone) :is(#tpPhone,#tpCard,#tpBack,#tpPop){transition:opacity .6s}
#twMrk .twfront.twlight{z-index:4}
.mrkmoon{position:absolute;z-index:1;pointer-events:none}
.mrkmoon i{position:absolute;border-radius:50%;display:block}
.mrkmoon .halo{left:0;top:0;width:100%;height:100%;background:#E7D9F2;opacity:.1;filter:blur(24px)}
.mrkmoon .disc{left:24.3%;top:24.3%;width:51.4%;height:51.4%;background:linear-gradient(180deg,#F4ECDD,#D7CBD1);opacity:.88;filter:blur(.7px)}
.mrkmoon .tone{left:35.7%;top:32.9%;width:20%;height:20%;background:#fff;opacity:.09;filter:blur(7px)}
.mrkhaze{position:absolute;z-index:1;border-radius:50%;background:#A33B85;opacity:0;filter:blur(65px);pointer-events:none}

#twMrk .twline{transition:color 4s cubic-bezier(.4,0,.3,1)}

#twMrk.warm ~ #twSide .x, body.mrkwarm #twSide .x{color:#fff;text-shadow:0 0 1px #0E0F13,0 0 6px rgba(14,15,19,.6)}
@media (prefers-reduced-motion:reduce){.twmood{transition:none}}
body.compact #twMrk .twline{line-height:1.22}
/* London: a small NOT between two pink rules, over a much larger HEATHROW, in the distressed condensed italic.
   The face has no full stop, so the stop is set in Barlow Condensed's heaviest italic to sit with it */
#twLon .twline{font-family:'Crow Breaking','Barlow Condensed',Impact,sans-serif;font-style:italic;text-transform:uppercase;line-height:.86;letter-spacing:.005em;-webkit-text-stroke:0;text-shadow:0 .02em .14em rgba(0,0,0,.6)}
#twLon .twline>span{display:block}
#twLon .twline>span:first-child{display:flex;align-items:center;gap:.4em;font-size:.34em;line-height:1;margin-bottom:.12em}
#twLon .twline>span:first-child::before,#twLon .twline>span:first-child::after{content:"";flex:1 1 0;height:max(2px,.05em);background:#FF3D81;box-shadow:none}
#twLon .twline span.pd{display:inline!important;position:static!important;margin:0!important;font-size:1em!important;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-style:italic}
/* London: the Thames at night from a café table; the city, then the table in front of the heading's row */
#twLon .lnC{z-index:1}#twLon .lnCc{z-index:2}#twLon .lnF,#twLon .lnFc{z-index:5}
.lnsky{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#07081a 0%,#10122e 45%,#1c1d44 75%,#2a2550 100%)}
.lnsky i{position:absolute;inset:0;background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 50%);mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 50%)}
.lnsky .st1{background-image:url(/story-v34/img/hl-stars1.svg);opacity:.7}
.lnsky .st2{background-image:url(/story-v34/img/hl-stars2.svg);opacity:.7;animation:hltw 5.5s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.lnsky .st2{animation:none}}
body.lonnote:has(#twLon.warm) #twSide .x{color:#fff;text-shadow:0 0 1px #0E0F13,0 0 6px rgba(14,15,19,.6);transition:color 3s 1.5s}
.twroute{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.twroute .rt{fill:none;stroke:#0E0F13;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18 13}
.twroute .rta{stroke-dasharray:none}
body.compact .twroute{display:none}
/* Paris: a wet boulevard to the Eiffel Tower, under a café awning; the city, then the café in front of the heading's row */
#twPar .paC{z-index:1}#twPar .paCc{z-index:2}#twPar .paF,#twPar .paFc{z-index:5}
.pasky{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(40% 45% at var(--ex,22%) var(--ey,50%),rgba(255,61,129,.35),rgba(255,61,129,0) 70%),linear-gradient(180deg,#07070c 0%,#0e0d16 50%,#1a1520 100%)}
body.parnote:has(#twPar.warm) #twSide .x{color:#fff;text-shadow:0 0 1px #0E0F13,0 0 6px rgba(14,15,19,.6);transition:color 3s 1.5s}
/* Paris: Handy Quomte, as it comes (its alternates are swashes, so they stay off), two lines, white */
#twPar .twline{font-family:'Handy Quomte','Bodoni Moda',Didot,serif;font-style:normal;font-weight:400;letter-spacing:0;line-height:1;font-feature-settings:normal;-webkit-text-stroke:0;text-shadow:0 .02em .16em rgba(0,0,0,.65)}
#twPar .twline>span{display:block}
.twnote{position:absolute;left:0;top:0;z-index:4;display:grid;gap:8px;color:#0E0F13;pointer-events:none;opacity:0;visibility:hidden}
.twnote::before{content:"";position:absolute;inset:-30px -40px;z-index:-1;background:radial-gradient(closest-side,rgba(255,61,129,.94),rgba(255,61,129,.8) 55%,rgba(255,61,129,0))}
.twnote .k{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.twnote .k b{color:#0E0F13;font-weight:600;margin-right:9px}
.twnote .t{font:800 30px/1.05 var(--body);letter-spacing:-.015em;text-wrap:balance}
.twnote .x{font:400 16px/1.45 var(--body);max-width:32ch}
.twnote.night{color:#F4F6F9}
.twnote.night .k{color:#A3A6AF}
.twnote.night .k b{color:#FF3D81}
.twnote.night::before{background:radial-gradient(closest-side,rgba(9,10,14,.92),rgba(9,10,14,.75) 55%,rgba(9,10,14,0))}
.twink{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.twink path{fill:none;stroke:#0E0F13;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.twink.night path{stroke:#F4F6F9}
.twlift{z-index:30;border-radius:14px;box-shadow:0 0 0 2400px rgba(6,7,10,.55)!important;transition:box-shadow .4s ease}
/* the screens play in the scenes' own phones now, with no side note to explain a spotlight: nothing on the screen is dimmed */
body.nophone .twlift{box-shadow:none!important}
.tp-pop{position:absolute;z-index:40;pointer-events:none;will-change:transform;filter:drop-shadow(0 22px 40px rgba(0,0,0,.55))}
.tp-popbox{position:absolute;inset:0;overflow:hidden;background:#0E0F13}
.tp-nclone{position:absolute;width:393px;transform-origin:0 0}
.twrel{position:relative}
.nypanel{position:absolute;z-index:4;box-sizing:border-box;padding:24px;border-radius:24px;background:#111318;border:1px solid #1E2028;opacity:0;visibility:hidden;pointer-events:none}
.nypanel .k{margin:0 0 20px;font:600 14px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FF3D81}
.nypanel .row{height:48px;line-height:48px;padding:0 18px;border-radius:24px;background:#1A1C22;font:500 18px var(--body);color:#F4F6F9;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nypanel .row.on{background:rgba(255,61,129,.13)}
.nypanel .sub{margin:20px 0 0;font:400 18px/1.45 var(--body);color:#9DA0A8}
body.daynote #twSide .x{color:#0E0F13;text-shadow:none}
body.nycnote #twSide .x{text-shadow:0 0 2px #0E0F13,0 0 6px #0E0F13,0 0 14px rgba(14,15,19,.95),0 0 26px rgba(14,15,19,.85)}
/* the beats are off for now: each city is its heading and its scene */
#twSide{display:none!important}
.twside{position:absolute;left:0;top:0;z-index:4;display:grid;gap:10px;pointer-events:none;opacity:0;visibility:hidden;color:#0E0F13}
.twside .k,.twside .t{display:none}
.twside .k{font:600 clamp(12px,.95vw,14px)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.twside .k b{font-weight:600;color:#0E0F13;margin-right:10px}
.twside .t{font:800 clamp(26px,3.5vw,58px)/1.02 var(--body);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 0 rgba(14,15,19,.85);text-wrap:balance}
.twside .x{font:400 clamp(17px,1.4vw,25px)/1.2 'Permanent Marker','Marker Felt',cursive;color:#F4F6F9;max-width:34ch;transform:rotate(2deg);transform-origin:left center;text-shadow:0 1px 0 rgba(14,15,19,.6),0 0 8px rgba(14,15,19,.35)}
.twside.night .x{text-shadow:0 0 1px rgba(11,10,13,.9),0 0 6px rgba(11,10,13,.7)}
.twside .x b{font-weight:400;color:#FF3D81}
.twside.night .k{color:#A3A6AF}
.twside.night .k b{color:#FF3D81}
.twside.night .x{color:#E9EBF0}
.twside.night .t{text-shadow:none}
body.compact .twside{gap:6px}
body.compact .twside .t{font-size:clamp(22px,6.4vw,28px)}
body.compact .twside .x{font-size:15px}
.twline.sink span{display:block;width:max-content}
.twline.sink span:first-child{font-size:.36em;line-height:1;margin:0 0 .02em .04em}
body.compact .twside .t{font-size:21px}
body.compact .twside .x{font-size:14.5px;max-width:none}
.twfoot{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:11;pointer-events:none;background:linear-gradient(0deg,rgba(9,10,14,.82),rgba(9,10,14,.5) 45%,rgba(9,10,14,0));opacity:0;visibility:hidden}
body.compact .twfoot{height:90px}
.twbar{position:absolute;z-index:13;left:0;top:auto;bottom:calc(1.6vh + 4px);display:flex;justify-content:center;gap:28px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:0;visibility:hidden}
.twbar button{all:unset;cursor:pointer;color:rgba(255,255,255,.72);padding:10px 0;display:flex;gap:9px;align-items:baseline;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6);transition:color .2s}
.twbar button b{font-weight:600;color:inherit;opacity:.65}
.twbar button:hover{color:#fff}
.twbar button{position:relative}
.twbar button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:#FF3D81;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.twbar button.on{color:#fff;font-weight:700}
.twbar button.on b{color:#FF3D81;opacity:1}
.twbar button.on::after{transform:scaleX(1)}
.twbar button:focus-visible{outline:2px solid #fff;outline-offset:4px}
body.compact .twbar{top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:14px;font-size:9.5px;letter-spacing:.07em}
body.compact .twbar button{padding:8px 0;gap:5px;color:rgba(244,246,249,.62)}
body.compact .twbar button.on{color:#fff}
body.compact .twbar.night button.on{color:#FF3D81}
body.compact .twnote .t{font-size:20px}
body.compact .twnote .x{font-size:14px;max-width:none}
body.compact .twnote{gap:5px}
body.compact .twnote .k{font-size:10px}

/* the app's own animated screen (#tpN) lives in the current city's phone; the drawn resting screen shows in the others */
.scph .tip.scn{position:absolute;left:0;top:0;width:100%;height:100%;inset:auto;visibility:visible;z-index:2;pointer-events:none;overflow:hidden}
.scph .ss{transition:opacity .45s ease}
.scph.live .ss{opacity:0}

/* lock screens: each phone waits locked, a Crow notification on it, until its city arrives and the app opens */
.ss.lock{background:#000;color:#fff}
.ss.lock .lk-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.82)}
.ss.lock .lk-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.05) 30%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.6) 100%)}
.ss.lock .sb{position:relative;z-index:2}
.ss.lock .lk-d{position:relative;z-index:2;margin-top:40px;text-align:center;font-size:21px;font-weight:600;opacity:.92}
.ss.lock .lk-t{position:relative;z-index:2;text-align:center;font-size:104px;font-weight:700;line-height:1;letter-spacing:-.03em;margin-top:2px}
.ss.lock .lk-n{position:absolute;z-index:2;left:12px;right:12px;top:404px;display:flex;gap:11px;align-items:flex-start;padding:13px 15px 14px 12px;border-radius:26px;background:rgba(34,34,38,.62);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ss.lock .lk-ap{width:38px;height:38px;border-radius:9px;overflow:hidden;flex:none;margin-top:1px}
.ss.lock .lk-ap img{width:100%;height:100%;display:block}
.ss.lock .lk-tx{flex:1;min-width:0}
.ss.lock .lk-h{display:flex;align-items:baseline;gap:8px}
.ss.lock .lk-h b{flex:1;font-size:15px;font-weight:600;line-height:1.3}
.ss.lock .lk-h span{font-size:13px;color:rgba(255,255,255,.55)}
.ss.lock .lk-tx p{margin-top:1px;font-size:15px;line-height:1.3;color:rgba(255,255,255,.92)}
/* the flight Live Activity (CrowFlightActivity · FlightActivityCard): black 72% tint, airline mark + flight number, Crow in Audiowide,
   airport + time either side of the plane, the progress curve, the countdown */
.ss.lock .lk-la{position:absolute;z-index:2;left:12px;right:12px;top:398px;padding:10px 14px;border-radius:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden}
.ss.lock .lk-la::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 78%,rgba(28,242,166,.42) 0,rgba(28,242,166,.12) 38%,transparent 75%);pointer-events:none}
.ss.lock .lk-la>*{position:relative}
.ss.lock .la-r1{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.ss.lock .la-al{width:22px;height:22px;display:grid;place-items:center;font:700 10px/1 ui-monospace,Menlo,monospace}
.ss.lock .la-r1 b{flex:1}
.ss.lock .la-r1 i{font:400 11px/1 'Crow Audiowide','Audiowide',sans-serif;color:rgba(235,235,245,.6)}
.ss.lock .la-r2{display:flex;align-items:flex-start;gap:8px;margin-top:6px}
.ss.lock .la-ap{flex:none;display:flex;flex-direction:column;gap:3px}
.ss.lock .la-ap.r{align-items:flex-end}
.ss.lock .la-ap p{display:flex;align-items:baseline;gap:4px;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.ss.lock .la-ap p b{font-weight:700}
.ss.lock .la-ap p em{font-style:normal;font-weight:600;color:#1CF2A6}
.ss.lock .la-ap small{font-size:12px;color:#1CF2A6}
.ss.lock .la-pl{flex:1;display:flex;justify-content:center;padding-top:6px;color:rgba(235,235,245,.6)}
.ss.lock .la-pl svg{width:17px;height:17px;fill:currentColor}
.ss.lock .la-pg{display:block;width:100%;height:18px;margin-top:6px;overflow:visible}
.ss.lock .la-cd{margin-top:6px;text-align:center}
.ss.lock .la-cd b{display:block;font-size:21px;font-weight:600;line-height:1.1;color:#1CF2A6;font-variant-numeric:tabular-nums}
.ss.lock .la-cd small{display:block;margin-top:1px;font-size:10px;font-weight:500;color:rgba(235,235,245,.6)}
.ss.lock .lk-ft{position:absolute;z-index:2;left:44px;right:44px;bottom:52px;display:flex;justify-content:space-between}
.ss.lock .lk-ft span{width:52px;height:52px;border-radius:50%;background:rgba(40,40,46,.55);backdrop-filter:blur(10px);display:grid;place-items:center}
.ss.lock .lk-ft svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.ss.lock .lk-hb{position:absolute;z-index:2;left:50%;bottom:9px;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:#fff}
.ss .ssa{position:absolute;width:1px;height:1px;pointer-events:none}
/* the phone a city has left keeps a still of its last screen, so nothing swaps while it is still on its way out */
.scph.live .ss,.scph.snapped .ss{opacity:0}
.scph .tip.scn{transition:opacity .45s ease}
.scph.locked .ss{opacity:1!important}
.scph.locked .tip.scn{opacity:0}
.scph .tip.scn .snap{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.scph.live .tip.scn .snap{display:none}
/* the part of a screen that starts the next move glows pink */
#tpN .hot,.snap .hot{box-shadow:0 0 0 3px #FF3D81,0 0 30px 4px rgba(255,61,129,.6)!important;border-radius:16px;position:relative;z-index:3;transition:box-shadow .35s ease}
/* New York: no stand; the phone stands on the wet street and the street reflects it */
.scph.refl{-webkit-box-reflect:below -2px linear-gradient(transparent 66%,rgba(255,255,255,.2))}
.scph.refl::after{left:-8%;right:-8%;bottom:-1.2%;height:3.6%;background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.5) 50%,transparent);z-index:3}
/* the main result on each screen, lifted out of the phone at a size you can read */
.rcard{position:absolute;z-index:12;width:300px;padding:0;border-radius:0;background:none;border:0;box-shadow:none;color:#fff;font-family:var(--sf);text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform-origin:50% 50%}
.rcard>*:not(.tp-fb){position:relative;z-index:1}
/* the result, set in the open: one line that matters and one that explains it. No panel; a soft shadow with no edge keeps it readable */
.rcard::before{content:"";position:absolute;inset:-34px -46px;z-index:0;background:radial-gradient(closest-side,rgba(6,6,8,.66),rgba(6,6,8,.4) 55%,rgba(6,6,8,0));pointer-events:none}
.rcard .rk::before{content:"";display:inline-block;width:26px;height:2px;margin-right:10px;vertical-align:middle;background:#FF3D81}
.rcard h4,.rcard p{text-shadow:0 2px 12px rgba(0,0,0,.7)}
body:not(.compact) .rcard h4{white-space:nowrap}

.rcard .rk{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#FF3D81;margin-bottom:8px}
.rclink{display:none}   /* the cards lift out of the phone on their own: no leader line or dot */
.rclink path{fill:none;stroke:#FF3D81;stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(255,61,129,.8))}
.rclink circle{fill:#FF3D81;filter:drop-shadow(0 0 6px rgba(255,61,129,.9))}
.rcard h4{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(28px,2.5vw,38px);line-height:.98;letter-spacing:.005em;text-transform:uppercase;color:#fff}
.rcard p{margin:8px 0 0;font-size:15px;line-height:1.4;color:rgba(255,255,255,.9)}
.rcard .rr{display:flex;gap:9px;align-items:baseline;margin-top:7px;font-size:14px;line-height:1.35;color:rgba(255,255,255,.88)}
.rcard .rr em{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6);min-width:46px}
.rcard .rr.nx{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.12);color:#fff;font-weight:600}
.rcard .rr.nx em{color:#FF3D81}
body.compact .rcard{width:auto;padding:0}
body.compact .rcard h4{font-size:24px}
body.compact .rcard p,body.compact .rcard .rr{font-size:13px}
/* New York's close: the scene darkens as the camera pulls back to the board */
.nydark{position:absolute;inset:0;z-index:13;background:#0A0A0B;opacity:0;pointer-events:none}
/* one navigation at a time: inside the story the chapter bar is the navigation */
body.touring .nav{transform:translateY(-110%)!important;pointer-events:none}
.reflfx{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;mix-blend-mode:screen;visibility:hidden}

/* the gong in the street is the scroll cue: it rings every few seconds, Crow's note says to hit it, and hitting it
   (or scrolling) starts the story. On a phone the street's gong is out of frame, so a small gong rings in the corner. */
.gongcue{all:unset;position:absolute;z-index:6;border-radius:50%;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.gongcue i{position:absolute;inset:0;border-radius:50%;border:3px solid #FF3D81;box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 0 22px rgba(255,61,129,.8),inset 0 0 16px rgba(255,61,129,.4);opacity:0;pointer-events:none}
.gongcue.on i{animation:gongRing 3s cubic-bezier(.2,.6,.3,1) infinite}
.gongcue.on i:nth-of-type(2){animation-delay:.22s}.gongcue.on i:nth-of-type(3){animation-delay:.44s}
.gongcue .gimg{display:none}
.gongcue:hover i,.gongcue:focus-visible i{animation-duration:1.4s}
.gongcue:focus-visible{outline:3px solid #fff;outline-offset:6px}
.gongcue.hit i{animation:gongRing 1.1s cubic-bezier(.2,.6,.3,1) 1}
.gnote{color:#FF3D81;font-size:clamp(19px,1.65vw,27px);text-shadow:0 0 1px #0E0F13,0 0 2px #0E0F13,1px 1px 0 #0E0F13,-1px -1px 0 #0E0F13,1px -1px 0 #0E0F13,-1px 1px 0 #0E0F13,0 3px 12px rgba(0,0,0,.55)}
#scGongArrow{stroke:#fff;filter:drop-shadow(0 0 1.5px #0E0F13) drop-shadow(0 0 1px #0E0F13)}
@keyframes gongRing{0%{transform:scale(.9);opacity:0}8%{opacity:.95}60%{transform:scale(2.3);opacity:0}100%{transform:scale(2.3);opacity:0}}
#brand.leaving .gongcue{opacity:0!important;visibility:hidden!important}
#brand.leaving #noteGong,#brand.leaving #scGongArrow{opacity:0!important;transition:opacity .3s}
body.compact .gongcue{width:64px!important;height:64px!important;left:auto!important;top:auto!important;right:16px;bottom:96px;border-radius:12px}
body.compact .gongcue .gimg{display:block;position:absolute;inset:0;filter:drop-shadow(0 8px 14px rgba(40,0,15,.45))}
body.compact .gongcue .gimg img{width:100%;height:100%;display:block}
body.compact .gongcue i{inset:12px 12px 10px;border-radius:50%}
body.compact .gongcue.hit .gimg{animation:gongHit .8s ease-out}
@keyframes gongHit{0%{transform:rotate(0)}12%{transform:rotate(-4deg)}32%{transform:rotate(3deg)}52%{transform:rotate(-1.5deg)}72%{transform:rotate(.7deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.gongcue.on i{animation:none;opacity:.8;transform:scale(1.15)}}
/* ---- the phones, back in the scenes: each one stands on its table (on a stand in New York) and travels with its city ---- */
.scw{position:absolute;pointer-events:none;z-index:9!important;scale:none}
.scw.free{left:0!important;top:0!important;width:100%!important;height:100%!important;translate:none!important}
.scph{position:absolute;left:0;top:0}
.scph .dv-root{display:block}
.scph::after{content:"";position:absolute;left:-14%;right:-14%;bottom:-2.6%;height:7%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.25) 60%,transparent);z-index:-1}
.scph.base::before{content:"";position:absolute;z-index:2;left:12%;right:12%;bottom:-5.4%;height:5.8%;border-radius:4px 4px 8px 8px;background:linear-gradient(180deg,#8d8a93 0,#4a4850 9%,#26252b 40%,#111014 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 18px rgba(0,0,0,.6)}
.ss{position:absolute;left:0;top:0;width:393px;height:858px;transform-origin:0 0;overflow:hidden;font-family:var(--sf);color:#fff;letter-spacing:normal;text-transform:none;background:#0E0F13;-webkit-font-smoothing:antialiased;text-align:left}
.ss *{box-sizing:border-box;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.ss svg{display:block}
.ss .sb{height:56px;display:flex;justify-content:space-between;align-items:center;padding:16px 30px 0 44px;font-size:17px;font-weight:600}
.ss .sb i{display:flex;gap:6px;align-items:center;font-style:normal}
.ss .sb svg{fill:currentColor}
/* Marrakech: Ask Crow */
.ss.mrk{background:#121217}
.ss.mrk .hd{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 0 24px}
.ss.mrk .hd b{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:.01em;text-transform:uppercase}
.ss.mrk .hd b em{font-style:normal;color:#FF3D81}
.ss.mrk .hd i{display:flex;gap:8px}
.ss.mrk .hd i span{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center}
.ss.mrk .hd svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}
.ss.mrk .u{margin:30px 20px 0 auto;width:fit-content;max-width:300px;background:#fff;color:#111;font-size:17px;font-weight:500;line-height:1.3;padding:13px 16px;border-radius:20px 20px 6px 20px}
.ss.mrk .cd{margin:18px 20px 0;padding:22px 20px 20px;border-radius:20px;background:#1E1E25;border:1px solid rgba(255,255,255,.08)}
.ss.mrk .cd h4{font-family:var(--display);font-weight:800;font-size:29px;line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
.ss.mrk .cd p{margin-top:12px;font-size:17px;line-height:1.38;color:rgba(255,255,255,.82)}
.ss.mrk .cd a{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:#FF3D81}
.ss.mrk .cd a span{width:28px;height:28px;border-radius:50%;background:#FF3D81;display:grid;place-items:center}
.ss.mrk .cd a svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.6}
.ss.mrk .u.s{margin-top:16px;font-size:16px;padding:11px 16px}
.ss.mrk .u.s+.u.s{margin-top:10px}
.ss.mrk .in{position:absolute;left:16px;right:16px;bottom:44px;height:56px;border-radius:28px;background:#22222A;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 22px;font-size:17px;color:rgba(255,255,255,.5)}
.ss.mrk .in span{width:38px;height:38px;border-radius:50%;background:#3A3A44;display:grid;place-items:center}
.ss.mrk .in svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2}
/* London: the fares */
.ss.lon{background:#0F1014}
.ss.lon .nv{display:flex;align-items:center;gap:8px;padding:20px 22px 0;font-size:18px;font-weight:600;color:rgba(255,255,255,.9)}
.ss.lon .nv svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2}
.ss.lon .gw{margin:40px 26px 0;font-family:var(--display);font-weight:800;font-size:66px;line-height:.9;letter-spacing:.005em;text-transform:uppercase}
.ss.lon .rt{margin:12px 26px 0;font-family:var(--mono);font-size:19px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.ss.lon .pr{margin:30px 26px 0;font-family:var(--display);font-weight:800;font-size:78px;line-height:.9}
.ss.lon .pl{margin:8px 26px 0;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.ss.lon .x{margin:26px 26px 0;font-size:19px;line-height:1.42;color:rgba(255,255,255,.88)}
.ss.lon .bt{margin:30px 22px 0;height:60px;border-radius:30px;background:#FF3D81;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:.04em;text-transform:uppercase}
.ss.lon .bt svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.8}
.ss.lon .al{margin:30px 26px 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.03em;color:rgba(255,255,255,.55);text-transform:uppercase}
.ss.lon .al s{text-decoration:line-through;text-decoration-thickness:2px}
.ss.lon .ck{margin:14px 26px 0;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.42);text-transform:uppercase}
/* Paris: the plan, fixed */
.ss.par{background:#111116}
.ss.par .k{margin:28px 24px 0;font-family:var(--mono);font-size:15px;letter-spacing:.12em;color:#FF3D81;text-transform:uppercase}
.ss.par h3{margin:12px 24px 0;font-size:37px;font-weight:700;line-height:1.08;letter-spacing:-.01em}
.ss.par .fl{margin:18px 24px 0;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:#FF3D81;text-transform:uppercase}
.ss.par .fl svg{width:22px;height:22px;stroke:#FF3D81;fill:none;stroke-width:1.8}
.ss.par .rw{margin:0 24px;padding:19px 0;display:grid;grid-template-columns:40px 1fr;gap:4px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.ss.par .rw:first-of-type{margin-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.ss.par .rw svg{grid-row:span 2;width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.5;margin-top:2px}
.ss.par .rw b{font-size:19px;font-weight:700;border-left:2px solid #FF3D81;padding-left:12px}
.ss.par .rw b em{font-style:normal;margin-right:8px}
.ss.par .rw small{font-size:15px;color:rgba(255,255,255,.62);padding-left:14px}
.ss.par .bt{position:absolute;left:22px;right:22px;bottom:118px;height:60px;border-radius:30px;background:#FF3D81;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.04em;text-transform:uppercase}
.ss.par .kp{position:absolute;left:0;right:0;bottom:66px;text-align:center;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* New York: Near Me */
.ss.nyc{background:#FBF6EF;color:#141414}
.ss.nyc .hd{display:flex;align-items:center;justify-content:space-between;padding:26px 26px 0 24px}
.ss.nyc .hd b{display:flex;align-items:center;gap:8px;font-size:30px;font-weight:700;letter-spacing:-.01em}
.ss.nyc .hd b img{width:40px;height:40px;object-fit:contain}
.ss.nyc .hd svg{width:28px;height:28px;stroke:#141414;fill:none;stroke-width:2}
.ss.nyc h3{margin:64px 26px 0;font-size:62px;font-weight:800;line-height:1;letter-spacing:-.035em}
.ss.nyc .sub{margin:14px 26px 0;font-size:20px;color:#333}
.ss.nyc .cd{margin:44px 22px 0;padding:26px 20px;border:2px solid rgba(255,61,129,.55);border-radius:24px;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;background:#fff}
.ss.nyc .cd svg{width:110px;height:110px;stroke:#141414;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ss.nyc .cd b{display:block;font-size:31px;font-weight:700;line-height:1.08;letter-spacing:-.015em}
.ss.nyc .cd small{display:block;margin-top:12px;font-size:16px;color:#444}
.ss.nyc .bt{margin:34px 22px 0;height:68px;border-radius:34px;background:#FF3D81;color:#fff;display:grid;place-items:center;font-size:26px;font-weight:700}
.ss.nyc .ft{position:absolute;left:0;right:0;bottom:50px;text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:#8a8580;text-transform:uppercase}

/* ---- living inside the flycrooked.com layout: undo the site-wide body defaults on this page ---- */
html body{margin:0;padding:0;font-size:16px;line-height:normal;background:var(--ground);color:var(--ink);font-family:var(--body);overflow-x:hidden}
#crow-story img{max-width:none}
/* the cookie choice comes first: keep the App Store pill out from under the banner until it's answered */
body:has(.cc-banner) #mcta{opacity:0;pointer-events:none}

.sfoot{position:relative;z-index:5;background:var(--bg);color:var(--ink2);border-top:1px solid var(--rule);padding:56px var(--gutter-r) 120px var(--gutter-l)}
.sf-in{max-width:1180px;margin:0 auto;display:grid;gap:22px}
.sf-brand{display:inline-flex;align-items:center;gap:10px;font:400 30px/1 var(--mark);color:var(--ink);text-decoration:none}
.sf-brand img{width:30px;height:30px}
.sf-tag{margin:0;font:700 22px/1.1 var(--display);text-transform:uppercase;color:var(--pink)}
.sf-nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.sf-nav a,.sf-nav button{font:500 15px/1.4 var(--body);color:var(--ink2);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.sf-nav a:hover,.sf-nav button:hover,.sf-aw:hover{color:var(--ink)}
.sf-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding-top:22px;border-top:1px solid var(--rule)}
.sf-aw{display:inline-flex;gap:8px;align-items:baseline;font:600 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-decoration:none}
.sf-aw strong{color:var(--pink)}
.sf-c{margin-left:auto;font:400 13px/1 var(--mono);color:var(--faint)}
@media (max-width:700px){.sf-c{margin-left:0}.sfoot{padding-bottom:140px}}