:root{
  --paper:#f6efe2; --paper-2:#efe5d2; --ink:#1b1a2e; --ink-2:#4a4760; --line:#d8ccb4;
  /* original "kitchen" palette */
  --paprika:#c4452d; --denim:#2e4a7d; --saffron:#f2b33d; --sage:#4f7f52;
  --apricot:#e08a4f; --plum:#7a3f63; --olive:#8a8a3b; --teal:#1f7a80;
  --board:#14130f; --amber:#ffb627;
  --radius:18px; --shadow:0 1px 0 rgba(27,26,46,.06), 0 10px 30px -12px rgba(27,26,46,.25);
  --f-ui:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-display:"Fraunces",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f-ui);
  background-image:radial-gradient(rgba(27,26,46,.045) 1px,transparent 1px);background-size:18px 18px}
a{color:var(--denim);text-underline-offset:3px}
a:hover{color:var(--paprika)}
:focus-visible{outline:3px solid var(--denim);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.muted{color:var(--ink-2)} .small{font-size:.88rem} .mono{font-family:var(--f-mono);font-size:.78rem;line-height:1.7}
code{font-family:var(--f-mono);font-size:.85em;background:var(--paper-2);padding:.1em .35em;border-radius:5px}
h1,h2,h3{line-height:1.1;margin:0}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 40px}
.hero__lines{position:absolute;inset:auto -10% 0 -10%;height:60px;display:grid;gap:5px;transform:rotate(-3deg);opacity:.9;pointer-events:none}
.hero__lines span{display:block;height:5px;background:var(--c);border-radius:4px}
.hero__inner{position:relative;display:grid;gap:18px;justify-items:start;padding-bottom:44px}
.mark{display:flex;align-items:center;gap:14px;animation:pop .7s cubic-bezier(.2,1.4,.4,1) both}
.mark svg{width:84px;height:84px;flex:none}
.mark__word{font:800 1.6rem/0.95 var(--f-display);font-style:italic;letter-spacing:-.01em}
.mark__word span{display:block;font:700 .7rem var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--paprika);margin-top:6px}
@keyframes pop{from{transform:scale(.6) rotate(-12deg);opacity:0}}
h1{font:600 clamp(2rem,6.2vw,4.1rem)/1.02 var(--f-display);letter-spacing:-.02em;max-width:17ch;font-variation-settings:"opsz" 144}
h1 em{font-style:italic;font-weight:800;color:var(--paprika);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.12em;background:var(--saffron);z-index:-1;border-radius:3px}
.lede{font-size:clamp(1.05rem,2.3vw,1.3rem);max-width:46ch;margin:0;color:var(--ink-2)}
.lede strong{color:var(--ink)}
.badge{margin:0;display:inline-flex;align-items:center;gap:8px;font:500 .8rem var(--f-mono);background:var(--ink);color:#fff;padding:7px 12px 7px 10px;border-radius:999px}
.badge .dot{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* ---------- calculator ---------- */
.calc{display:grid;gap:22px;grid-template-columns:1fr;align-items:start;margin-top:-8px}
@media (min-width:900px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.board{position:sticky;top:18px}}
.card{background:#fffaf0;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px 18px;border:1.5px solid var(--line)}
.card__head{margin-bottom:6px}
.card__head h2{font:800 1.35rem var(--f-ui);letter-spacing:-.01em}
.field{border:0;margin:0;padding:14px 0 8px 0;border-top:1.5px dashed var(--line)}
.field:first-of-type{border-top:0}
legend{font:700 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);padding:0;margin-bottom:10px}
.freq{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stepper{display:flex;align-items:stretch;background:var(--paper);border:2px solid var(--ink);border-radius:14px;overflow:hidden}
.stepper input{width:3.6ch;min-width:84px;border:0;background:transparent;text-align:center;font:600 2rem/1 var(--f-display);color:var(--ink);padding:6px 0;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper__btn{width:48px;border:0;background:var(--ink);color:#fff;font:700 1.5rem/1 var(--f-ui);cursor:pointer}
.stepper__btn:hover{background:var(--paprika)}
.seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:4px;gap:2px}
.seg label{position:relative}
.seg input,.chip input,.switch input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;padding:9px 16px;border-radius:999px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span,.chip input:focus-visible+span,.switch input:focus-visible+.switch__ui{outline:3px solid var(--denim);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips--extra{margin-top:10px}
.chip span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:2px solid var(--ink);font-weight:600;font-size:.95rem;cursor:pointer;background:#fff;transition:transform .15s,background .2s}
.chip span:hover{transform:translateY(-1px)}
.chip input:checked+span{background:var(--saffron)}
.chip--toggle span{border-style:dashed;border-color:var(--ink-2)}
.chip--toggle input:checked+span{background:var(--ink);color:#fff;border-style:solid;border-color:var(--ink)}
.chip small{font:500 .72rem var(--f-mono);opacity:.75}
.switch{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:6px 0}
.switch small{color:var(--ink-2)}
.switch__ui{flex:none;width:50px;height:30px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;margin-top:2px}
.switch__ui::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.switch input:checked+.switch__ui{background:var(--sage)}
.switch input:checked+.switch__ui::after{transform:translateX(20px)}
.sub{margin:4px 0 10px 62px;display:grid;gap:6px;font-size:.92rem}
.sub output{font:700 .9rem var(--f-mono)}
input[type=range]{width:100%;accent-color:var(--paprika)}
.hint{margin:2px 0 0;font-size:.8rem;color:var(--ink-2)}
.linkish{background:none;border:0;padding:0;color:var(--denim);text-decoration:underline;cursor:pointer;font:inherit}
.field--age input{width:120px;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;font:600 1.1rem var(--f-ui);background:var(--paper)}
/* ---------- result panel ---------- */
.board{background:var(--board);color:var(--amber);border-radius:var(--radius);padding:20px 22px 24px;box-shadow:var(--shadow),inset 0 0 0 6px #2a2822;
  font-family:var(--f-mono);position:relative;overflow:hidden;min-height:320px}
.board::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.board__top{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px dashed rgba(255,182,39,.35);padding-bottom:10px}
.board__places{white-space:nowrap;opacity:.85}
.board__big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 6px}
.board__num{font:800 clamp(4.2rem,15vw,8.5rem)/.9 var(--f-display);font-style:italic;color:#ffcf5c;text-shadow:.06em .06em 0 #c4452d;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.board__unit{font:700 clamp(1.2rem,3.5vw,1.8rem) var(--f-mono);text-transform:uppercase}
.board__sub{margin:0;font-size:.95rem;color:#ffe2a3}
.board__quip{margin:16px 0 0;font:500 italic 1.1rem/1.4 var(--f-display);color:#fff4dc}
.board.is-inf .board__num{color:#ff6b5e;text-shadow:.06em .06em 0 #2e4a7d}
.board.is-inf{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin-top:22px}
.fact{background:#fffaf0;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px 16px;border-top:7px solid var(--c);box-shadow:var(--shadow);display:grid;gap:4px}
.fact__k{font:700 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.fact__v{font:600 1.6rem/1.15 var(--f-display)}
.fact__v--sm{font:500 1.02rem/1.4 var(--f-ui)}

/* ---------- section titles ---------- */
.sec-title{font:800 clamp(1.5rem,3.6vw,2.2rem)/1.15 var(--f-ui);letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:64px 0 18px}
.pill{font:700 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--c);color:#fff;padding:6px 12px;border-radius:999px}

/* ---------- route line ---------- */
.route{--stop:40px;--line:12px;--pt:10px;list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
.route::before{content:"";position:absolute;left:calc(var(--stop) / 2 - var(--line) / 2);top:calc(var(--pt) + var(--stop) / 2);bottom:calc(var(--pt) + var(--stop) / 2);width:var(--line);background:var(--paprika);border-radius:calc(var(--line) / 2)}
.route li{position:relative;display:grid;grid-template-columns:var(--stop) 1fr;gap:14px;align-items:center;padding:var(--pt) 0;opacity:0;transform:translateY(8px);animation:rise .45s forwards}
.route li:nth-child(2){animation-delay:.06s}.route li:nth-child(3){animation-delay:.12s}.route li:nth-child(4){animation-delay:.18s}.route li:nth-child(5){animation-delay:.24s}.route li:nth-child(6){animation-delay:.3s}.route li:nth-child(7){animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
.stop{box-sizing:border-box;width:var(--stop);height:var(--stop);border-radius:50%;background:#fff;border:7px solid var(--ink);z-index:1;position:relative}
/* halfway: same box, highlighted with a paprika centre (inset shadows never affect layout) */
.route li.is-int .stop{box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 20px var(--paprika)}
.route li.is-end .stop{background:var(--saffron)}
.st__name{font:800 1.1rem/1.2 var(--f-ui)}
.st__meta{font:500 .82rem var(--f-mono);color:var(--ink-2)}
.st__when{display:inline-block;margin-left:6px;background:var(--ink);color:#fff;font:700 .78rem var(--f-mono);padding:3px 8px;border-radius:6px;vertical-align:2px}
.route li.is-never .st__when{background:var(--paprika)}
@media (min-width:900px){
  .route{grid-auto-flow:column;grid-auto-columns:1fr;padding:0}
  /* line runs from the centre of the first column to the centre of the last (6 equal columns) */
  .route::before{left:calc(100% / 12);right:calc(100% / 12);top:calc(var(--pt) + var(--stop) / 2 - var(--line) / 2);bottom:auto;height:var(--line);width:auto}
  .route li{grid-template-columns:1fr;justify-items:center;text-align:center;align-items:start;padding:var(--pt) 6px}
  .route li:nth-child(even) .st{margin-top:0}
}

/* ---------- borough chart ---------- */
.bchart{display:grid;gap:5px;margin-top:10px}
.brow{display:grid;grid-template-columns:minmax(110px,180px) 1fr;gap:10px;align-items:center;background:none;border:0;padding:3px 4px;border-radius:8px;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.brow:hover,.brow[aria-pressed=true]{background:rgba(27,26,46,.06)}
.brow__name{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow__bar{position:relative;height:20px}
.brow__fill{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:10px;min-width:4px;transform-origin:left;animation:grow .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.brow__val{position:absolute;top:50%;transform:translateY(-50%);font:700 .74rem var(--f-mono);white-space:nowrap}
.bpick{min-height:1.6em;font:500 1.05rem var(--f-display);font-style:italic;margin:14px 0 0}
@media (max-width:520px){.brow{grid-template-columns:100px 1fr}.brow__name{font-size:.78rem}}

/* ---------- share ---------- */
.share__grid{display:grid;gap:20px;align-items:center}
@media (min-width:760px){.share__grid{grid-template-columns:minmax(0,400px) 1fr}}
#shareCard{width:100%;max-width:400px;height:auto;aspect-ratio:4/5;border-radius:16px;box-shadow:var(--shadow);background:var(--paper);justify-self:center}
.share__actions{display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.share__actions .muted{flex-basis:100%;margin:0 0 4px}
.btn{font:700 1rem var(--f-ui);border:2px solid var(--ink);background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px);background:var(--paprika);border-color:var(--paprika)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{color:#fff}
.share__actions .hint{flex-basis:100%}

/* ---------- how ---------- */
.how__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.how__card{background:#fffaf0;border:1.5px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.how__card h3{font:800 1.15rem var(--f-ui);margin-bottom:8px}
.how__card p{margin:0 0 10px}
.how__card ul{padding-left:1.1em;margin:0 0 10px}
.how__card--formula{background:#fff;border-color:var(--denim)}
.nums{list-style:none;padding:0!important;margin:8px 0 10px;font-size:.92rem}
.nums li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.nums b{font-family:var(--f-mono);white-space:nowrap}
.nums__tot{font-weight:800}
.nums__tot b{background:var(--saffron);padding:0 6px;border-radius:5px}
.formula{font:600 1.2rem var(--f-display);text-align:center;background:var(--paper);border-radius:12px;padding:14px 10px;margin:8px 0 10px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.formula--sm{font:600 1.02rem var(--f-mono)}
.frac{display:inline-grid;text-align:center}
.frac span:first-child{border-bottom:2px solid var(--ink);padding:0 6px 2px}
.frac span:last-child{padding-top:2px;font-size:.92em}
details summary{cursor:pointer;font-weight:600;font-size:.9rem}

/* ---------- footer ---------- */
.foot{margin-top:72px;background:var(--ink);color:#e9e4f5;padding:0 0 30px}
.foot__lines{display:grid;gap:4px;padding-top:0}
.foot__lines span{height:5px;background:var(--c)}
.foot__inner{padding-top:26px;display:grid;gap:8px;text-align:center}
.foot .muted{color:#b7b2c9}
.export-support{margin:0;font-size:1.1rem}
.export-support a{color:#fff;background:var(--paprika);padding:6px 14px;border-radius:999px;text-decoration:none;display:inline-block;margin-left:4px;transition:transform .15s}
.export-support a:hover{transform:translateY(-2px) rotate(-1deg);color:#fff;background:var(--apricot)}
[hidden]{display:none!important}

/* hero arrivals panel */
.toplist{width:100%;max-width:420px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;transform:rotate(1.2deg)}
.toplist__head{display:flex;justify-content:space-between;background:var(--denim);color:#fff;font:700 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;padding:10px 14px}
.tl{list-style:none;margin:0;padding:6px 14px}
.tl li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.tl li:last-child{border-bottom:0}
.pl{height:8px;border-radius:4px;background:var(--c)}
.tl__n{font-weight:700}
.tl__v{font:700 .95rem var(--f-mono)}
.toplist__more{display:block;text-align:right;padding:0 14px 12px;font:600 .85rem var(--f-ui)}
@media (min-width:900px){
  .hero__inner{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:40px}
  .hero__inner>*:not(.toplist){grid-column:1}
  .toplist{grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:end}
}
@media (max-width:899px){.toplist{display:none}}
.badge{flex-wrap:wrap}
.board.is-inf .board__num{font-style:normal;font-family:var(--f-ui);font-weight:800;font-size:clamp(6rem,20vw,10rem);line-height:.8}
.st__name{display:block}
.st__when{margin:4px 0 2px}
@media (max-width:899px){.st__name{display:inline}.st__when{margin:0 0 0 6px}}
.formula--sm{font-size:.88rem;white-space:nowrap;overflow-x:auto;justify-content:flex-start}
@media (min-width:420px){.formula--sm{justify-content:center}}

/* friend banner (from shared ?y= links) */
.friend{margin:0;background:var(--saffron);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:14px;padding:10px 16px;font:600 1.05rem/1.35 var(--f-ui);max-width:40ch;transform:rotate(-1deg)}
.friend b{font-family:var(--f-display);font-style:italic;font-size:1.25em}
/* X share button */
.btn--x{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#000;border-color:#000;color:#fff;font-size:1.08rem;padding:13px 22px}
.btn--x:hover{background:var(--paprika);border-color:var(--paprika);color:#fff}
.btn--primary{background:var(--paprika);border-color:var(--paprika);font-size:1.08rem;padding:13px 22px}
.btn--primary:hover{background:var(--ink);border-color:var(--ink)}
#shareHint{font-size:.88rem}
.share__actions .btn--x{font-size:1.15rem;padding:15px 28px}
#copyBtn{flex-basis:100%;text-align:left;font-size:.88rem}
.toast{flex-basis:100%;margin:4px 0 0;background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px;font-size:.92rem;line-height:1.45;box-shadow:var(--shadow)}
.toast a{color:var(--saffron)}
.data-updated{font-family:var(--f-mono);font-size:.75rem;opacity:.8}
/* vertical milestones (below 900px): one segment per row, from this circle's centre to the next one's,
   so the line starts and ends exactly at the first/last circle whatever the row heights */
@media (max-width:899px){
  .route::before{display:none}
  .route li{align-items:start}
  .route li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--stop) / 2 - var(--line) / 2);top:calc(var(--pt) + var(--stop) / 2);height:100%;width:var(--line);background:var(--paprika)}
  .route .st{padding-top:6px}
}

/* mobile tap feedback: no rectangular browser highlight, press effect follows the pill shape */
html{-webkit-tap-highlight-color:transparent}
a,button,label,input,.chip,.seg label{-webkit-tap-highlight-color:transparent}
.chip,.seg label{border-radius:999px}
.chip span,.seg span{-webkit-user-select:none;user-select:none;touch-action:manipulation}
.chip input:active+span,.chip span:active{transform:scale(.96)}
.seg input:active+span,.seg span:active{transform:scale(.96);transition:transform .1s}