/* pickthetrain's home page bands (build/homebands.py, assets/home.js): Direct from your city, When does the train beat
   the plane?, Famous train journeys. The night trains section between them is styled in site.css. */
.hc h2,.hv h2,.hf h2{font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.035em;font-weight:800;margin:0 0 12px}
.anim .hm-rv{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.anim .hm-rv.in{opacity:1;transform:none}

/* ==================== 1. Direct from your city: the departures hall ==================== */
.hc{--hall0:#E5EEE8;--hall1:#F2F4F1;--grid:rgba(31,92,74,.075);--board:#0E221B;--flapA:#1A3A30;--flapB:#163329;--flapink:#F4F1E4;--mint:#7CC7AE;--sun:#F2C94C;
  position:relative;isolation:isolate;background:linear-gradient(180deg,var(--hall0),var(--hall1) 78%)}
.hc{margin-top:34px;padding-top:62px;padding-bottom:70px}
.hc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hc-rail{position:absolute;left:0;right:0;top:18px;height:22px;pointer-events:none;overflow:hidden}
.hc-rail .tr{position:absolute;left:0;right:0;top:11px;height:4px;background:repeating-linear-gradient(90deg,var(--line-2) 0 3px,transparent 3px 12px);opacity:.9}
.hc-rail .tr::before,.hc-rail .tr::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--line-2)}
.hc-rail .tr::before{top:-2px}.hc-rail .tr::after{bottom:-2px}
.hc-rail svg{position:absolute;top:0;left:-140px;height:22px;width:auto;color:var(--brand)}
.anim .hc.in .hc-rail svg{animation:hc-run 5.5s cubic-bezier(.55,.05,.3,1) .25s 1 both}
@keyframes hc-run{from{left:-140px}to{left:calc(100% + 20px)}}
.hc-top{display:grid;gap:22px;align-items:end;grid-template-columns:minmax(0,1fr)}
.hc-head p.sub{font-size:18px;color:var(--muted);margin:0;max-width:46ch}
.hc-arr{margin:12px 0 0;font:600 15.5px/1.35 var(--sans)}
.hc-arr a{color:var(--brand);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.hc-arr a:hover{border-bottom-color:var(--brand)}
.hc-arr a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.hc-board{background:radial-gradient(120% 140% at 100% 0%,#1D4F43 0%,rgba(29,79,67,0) 55%),var(--board);border-radius:18px;padding:14px 16px 12px;color:var(--flapink);
  box-shadow:0 26px 50px -30px rgba(14,34,27,.85),inset 0 0 0 1px rgba(255,255,255,.05);display:grid;gap:8px;position:relative;overflow:hidden}
.hc-board::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--sun)}
.hc-bh{display:flex;justify-content:space-between;align-items:center;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.hc-bh .clk{display:inline-flex;gap:2px}
.hc-row{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:center;gap:10px}
.hc-lab{font:600 10.5px/1.15 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.hc-flaps{display:flex;gap:3px;min-width:0}
.hc-f{position:relative;flex:0 0 auto;width:1.02em;height:1.42em;font:600 clamp(15px,2.35vw,27px)/1.42 var(--mono);text-align:center;color:var(--flapink);
  background:linear-gradient(180deg,var(--flapA) 0 50%,var(--flapB) 50% 100%);border-radius:4px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.35);transform-origin:50% 50%}
.hc-f::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.5)}
.hc-sun .hc-f{color:var(--sun)}
.hc-clk .hc-f{font-size:13px;width:.95em;height:1.4em;line-height:1.4em}
.hc-f.flip{animation:hc-flip .28s ease-in-out 1}
@keyframes hc-flip{0%{transform:rotateX(0)}50%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
.hc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:26px 0 18px}
.hc-find{position:relative;flex:1 1 300px;max-width:520px}
.hc-find svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.hc-find input{width:100%;height:56px;border-radius:16px;border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);font:600 17px var(--sans);padding:0 46px 0 46px;
  box-shadow:0 10px 30px -22px rgba(17,27,23,.35);-webkit-appearance:none;appearance:none}
.hc-find input::-webkit-search-cancel-button{-webkit-appearance:none}
.hc-find input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.hc-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;background:var(--card-2);color:var(--muted);cursor:pointer;font-size:18px}
.hc-n{font:500 14px var(--mono);color:var(--muted)}
.hc-n b{color:var(--brand);font-weight:600}
.hc-body{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:start}
.hc .countries{columns:1;column-gap:14px}
.hc .countries > div{break-inside:avoid;margin:0 0 12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 12px 7px;box-shadow:var(--shadow);transition:border-color .2s}
.hc .countries > div:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.hc .countries h3{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 16px/1.2 var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:0 0 10px}
.hc .countries h3[data-n]::after{content:attr(data-n);font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--muted);background:var(--card-2);border:1px solid var(--line);padding:4px 7px;border-radius:999px;white-space:nowrap}
.hc .countries a{display:inline-flex;align-items:center;gap:6px;margin:0 5px 5px 0;padding:4px 10px 4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card-2);
  font:600 13.5px/1.25 var(--sans);text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s,color .15s,transform .15s}
.hc .countries a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:calc(.3 + var(--k,.3) * .7);transform:scale(calc(.55 + var(--k,.3) * .95))}
.hc .countries a:hover,.hc .countries a:focus-visible,.hc .countries a.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.hc .countries a:hover::before,.hc .countries a:focus-visible::before,.hc .countries a.on::before{background:var(--brand-ink)}
.hc .countries a:active{transform:scale(.97)}
.hc.q .countries a:not(.hit){display:none}
.hc.q .countries > div:not(.has){display:none}
.hc .countries a.hit{border-color:var(--brand)}
.anim .hc .countries > div{opacity:0;transform:translateY(16px);transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.anim .hc.in .countries > div{opacity:1;transform:none}
.hc-map{display:none}
.hc-none{display:none;padding:16px;border:1px dashed var(--line-2);border-radius:14px;color:var(--muted)}
.hc-none a{color:var(--brand);font-weight:700}
.hc.q.zero .hc-none{display:block}
@media (max-width:420px){.hc-row{grid-template-columns:4.2em minmax(0,1fr);gap:6px}.hc-flaps{gap:2px}.hc-f{font-size:13px;width:1em}.hc-bx{display:none}}
@media (min-width:640px){.hc .countries{columns:2}}
@media (min-width:900px){
  .hc-top{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
  .hc-body{grid-template-columns:minmax(0,1fr) 360px}
  .hc-map{display:block;position:sticky;top:56px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:10px 10px 12px}
  .hc-map svg{display:block;width:100%;height:auto}
}
@media (min-width:1180px){.hc .countries{columns:3}}
.hc-land{fill:var(--land);stroke:var(--card);stroke-width:1}
.hc-land.on{fill:var(--land-2)}
.hc-dot{fill:var(--route);opacity:.55}
.hc-dot.to{fill:var(--brand);opacity:1}
.hc-dot.me{fill:var(--hs);opacity:1}
.hc-ln{fill:none;stroke:var(--brand);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.75;stroke-linecap:round}
.anim .hc-ln{stroke-dasharray:var(--s,100);stroke-dashoffset:var(--s,100);animation:hc-draw .7s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes hc-draw{to{stroke-dashoffset:0}}
.hc-ring{fill:none;stroke:var(--hs);stroke-width:2;vector-effect:non-scaling-stroke}
.anim .hc-ring{animation:hc-ring 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hc-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.hc-cap{font:600 13px/1.35 var(--sans);color:var(--ink);padding:8px 4px 0;min-height:2.7em}
.hc-cap small{display:block;font:500 12px var(--mono);color:var(--muted)}

/* ==================== 2. When does the train beat the plane: the race ==================== */
.hv{--hv0:#E2ECF5;--hv1:#F2F4F1;--tr:#1F5C4A;--tr2:#2F7C61;--tr3:#7DB89F;--pl:#5E6E7A;--pl2:#8796A1;--pl3:#BFCAD2;--gold:#B8901A;
  position:relative;isolation:isolate;background:linear-gradient(180deg,var(--hv0),var(--hv1) 85%)}
.hv{padding-top:66px;padding-bottom:70px}
.hv-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hv-sky i{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));opacity:.7}
.anim .hv-sky i{animation:hv-trail 14s linear infinite}
@keyframes hv-trail{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.hv-head p.sub{font-size:17px;color:var(--muted);margin:0;max-width:70ch}
.hv-score{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:30px 0 10px}
.hv-stat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow);display:grid;gap:6px;overflow:hidden}
.hv-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.hv-stat.w{--c:var(--tr)}.hv-stat.m{--c:var(--gold)}.hv-stat.l{--c:var(--pl)}
.hv-stat .k{font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.hv-stat b{font:600 clamp(30px,4vw,42px)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hv-stat b small{font-size:.5em;color:var(--muted);letter-spacing:0}
.hv-stat > span:not(.k){color:var(--muted);font-size:15px}
.hv-stat a{color:var(--nt);font-weight:700;text-decoration:none}
.hv-fine{font-size:13px;color:var(--muted);margin:0 0 26px}
.hv-race{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(16px,3vw,26px);display:grid;gap:16px}
.hv-rh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.hv-rh .t{font:800 clamp(22px,3vw,30px)/1.1 var(--sans);letter-spacing:-.02em}
.hv-rh .clk{font:600 clamp(24px,3.4vw,36px)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.hv-pick{display:flex;flex-wrap:wrap;gap:8px}
.hv-pick button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);font:600 14px var(--sans);cursor:pointer;transition:background .15s,border-color .15s}
.hv-pick button i{width:8px;height:8px;border-radius:50%;background:var(--tr)}
.hv-pick button.p i{background:var(--pl)}
.hv-pick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hv-lanes{display:grid;gap:12px}
.hv-lane{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:center}
.hv-who{display:inline-flex;align-items:center;gap:7px;font:700 13px var(--sans)}
.hv-who svg{flex:none}
.hv-track{position:relative;height:46px;border-radius:12px;background:var(--card-2);border:1px solid var(--line);overflow:hidden}
.hv-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 8px;font:600 11.5px/1.15 var(--mono);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:2px solid var(--card)}
.hv-seg.s0,.hv-seg.s3{background:var(--c3);color:var(--ink)}.hv-seg.s1{background:var(--c2)}.hv-seg.s2{background:var(--c1)}.hv-seg.s4{background:var(--c3);color:var(--ink)}
.hv-train{--c1:var(--tr);--c2:var(--tr2);--c3:var(--tr3)}
.hv-plane{--c1:var(--pl);--c2:var(--pl2);--c3:var(--pl3)}
.hv-veil{position:absolute;top:0;bottom:0;right:0;background:color-mix(in srgb,var(--card-2) 82%,transparent);transition:none}
.hv-mk{position:absolute;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--card);box-shadow:0 4px 14px -4px rgba(0,0,0,.4);display:grid;place-items:center;color:var(--c1);z-index:2}
.hv-done{position:absolute;top:50%;transform:translate(20px,-50%);font:700 12px var(--mono);color:var(--c1);white-space:nowrap;opacity:0;transition:opacity .3s}
.hv-lane.fin .hv-done{opacity:1}
.hv-done.l{transform:translate(calc(-100% - 20px),-50%);background:var(--card);padding:3px 6px;border-radius:6px;z-index:3}
.hv-axis{position:relative;height:18px;margin-left:88px;font:500 11px/1 var(--mono);color:var(--faint)}
.hv-axis span{position:absolute;top:4px;transform:translateX(-50%)}
.hv-verdict{margin:0;font:700 clamp(17px,2.2vw,21px)/1.35 var(--sans);min-height:1.4em}
.hv-verdict.tw{color:var(--win)}.hv-verdict.pw{color:var(--lose)}
.hv-go{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;font-size:14.5px}
.hv-go a{color:var(--brand);font-weight:700;text-decoration:none}
.hv-go a.pf{color:var(--pf)}
.hv-go a:hover{text-decoration:underline}
.hv-chart{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(14px,3vw,24px)}
.hv-ch{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline;margin-bottom:8px}
.hv-ch .t{font:800 18px/1.2 var(--sans)}
.hv-ch .lg{display:flex;flex-wrap:wrap;gap:8px;font:500 12px var(--mono);color:var(--muted)}
.hv-ch .lg > span{display:inline-flex;align-items:center;gap:6px}
.hv-ch .lg > span i{width:9px;height:9px;border-radius:50%}.hv-ch .lg > span i.w{background:var(--tr)}.hv-ch .lg > span i.l{background:var(--pl2)}
.hv-ax{font:600 11px var(--mono)}.hv-ax.w{fill:var(--tr)}.hv-ax.l{fill:var(--pl)}
.hv-bands{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.hv-bands span{font:600 12px/1 var(--mono);letter-spacing:.03em;padding:7px 10px;border-radius:999px}
.hv-bands .b0{color:var(--tr);background:color-mix(in srgb,var(--tr) 12%,transparent)}.hv-bands .b1{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}.hv-bands .b2{color:var(--pl);background:color-mix(in srgb,var(--pl) 12%,transparent)}
.hv-ch .lg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.hv-plot{position:relative}
.hv-plot svg{display:block;width:100%;height:auto;overflow:visible}
.hv-band{opacity:.55}
.hv-band.b0{fill:color-mix(in srgb,var(--tr) 16%,transparent)}.hv-band.b1{fill:color-mix(in srgb,var(--gold) 16%,transparent)}.hv-band.b2{fill:color-mix(in srgb,var(--pl) 12%,transparent)}
.hv-bl{font:600 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.hv-bl.b0{fill:var(--tr)}.hv-bl.b1{fill:var(--gold)}.hv-bl.b2{fill:var(--pl)}
.hv-zero{stroke:var(--ink);stroke-width:1;opacity:.35;stroke-dasharray:4 4}
.hv-grid line{stroke:var(--line)}.hv-grid text{font:500 11px var(--mono);fill:var(--faint)}
.hv-pt{stroke:var(--card);stroke-width:1.5;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.7,.5,1)}
.hv-pt.w{fill:var(--tr)}.hv-pt.l{fill:var(--pl2)}
.hv-pt:hover{stroke:var(--ink);stroke-width:2}
.anim .hv-pt{transform:scale(0)}
.anim .hv-pt.on{transform:scale(1)}
.hv-pt.spot{transform:scale(1.6)!important;stroke:var(--ink);stroke-width:2}
.hv-pt.cur{stroke:var(--ink);stroke-width:2.6}
.touring .hv-pt:not(.spot):not(.cur){opacity:.42}
.hide-w .hv-pt.w,.hide-l .hv-pt.l{opacity:.06!important;pointer-events:none}
.hv-ring{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:hv-ring 1.5s ease-out infinite}
.hv-ring.w{stroke:var(--tr)}.hv-ring.l{stroke:var(--pl)}
@keyframes hv-ring{0%{transform:scale(1);opacity:.95}100%{transform:scale(3.4);opacity:0}}
.hv-scan{transition:opacity .6s ease}
.hv-scan line{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.hv-stage{position:relative}
.hv-labs{position:absolute;inset:0;pointer-events:none;z-index:2}
.hv-scantag{position:absolute;top:4px;transform:translate(-50%,0);z-index:1;background:var(--ink);color:var(--paper);font:600 12px/1 var(--mono);padding:6px 8px;border-radius:7px;white-space:nowrap}
.hv-lab{--c:var(--tr);position:absolute;min-width:150px;max-width:240px;display:grid;gap:2px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:12px;
  padding:8px 11px 9px;box-shadow:0 18px 36px -16px rgba(17,27,23,.5);font:500 12.5px/1.3 var(--sans);color:var(--muted);opacity:0;
  transition:opacity .35s ease,translate .5s cubic-bezier(.2,.8,.2,1)}
.hv-lab.l{--c:var(--pl)}
.hv-lab.up{transform:translate(-50%,calc(-100% - 20px));translate:0 10px}
.hv-lab.dn{transform:translate(-50%,20px);translate:0 -10px}
.hv-lab.in{opacity:1;translate:0 0}
.hv-lab.out{opacity:0;transition-duration:.4s}
.hv-lab b{font:800 14.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.hv-lab .tt{font:500 12px/1.4 var(--mono);color:var(--ink);white-space:nowrap}
.hv-lab .tt i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.hv-lab .tt i.t{background:var(--tr)}.hv-lab .tt i.p{background:var(--pl2);margin-left:10px}
.hv-lab em{font:700 11.5px/1.3 var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--c)}
.hv-lab a{font:700 12.5px var(--sans);color:var(--brand);text-decoration:none;margin-top:4px}
.hv-lab.pin{pointer-events:auto}
.hv-lab::after{content:"";position:absolute;left:calc(50% + var(--px,0px));width:2px;height:20px;background:var(--c);margin-left:-1px}
.hv-lab.up::after{top:100%}.hv-lab.dn::after{bottom:100%}
.hv-bands span{transition:box-shadow .3s ease,transform .3s ease}
.hv-bands span.lit{box-shadow:inset 0 0 0 1.5px currentColor}
.hv-lt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 10px;font:600 12px var(--mono);cursor:pointer}
.hv-lt i{width:9px;height:9px;border-radius:50%}
.hv-lt.w i{background:var(--tr)}.hv-lt.l i{background:var(--pl2)}
.hv-lt b{font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
.hv-lt[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.hv-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font:600 12.5px/1.35 var(--sans);padding:7px 10px;border-radius:9px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));z-index:3}
.hv-tip small{display:block;font:500 11.5px var(--mono);opacity:.8}
.hv-cap{font-size:13px;color:var(--muted);margin:10px 0 0}
.hv-win{margin-top:22px}
.hv-win .t{font:800 18px/1.2 var(--sans);margin:0 0 10px}
.hv-wl{display:flex;flex-wrap:wrap;gap:8px}
.hv-wl a{display:inline-flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:14px;transition:border-color .15s,transform .15s}
.hv-wl a small{font:500 12px var(--mono);color:var(--win)}
.hv-wl a:hover{border-color:var(--tr);transform:translateY(-1px)}
.hv-night{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:18px;text-decoration:none;color:var(--nink);
  background:radial-gradient(120% 160% at 100% 0%,rgba(169,155,240,.25),transparent 55%),linear-gradient(120deg,var(--sky0),var(--sky2));box-shadow:0 20px 40px -26px rgba(5,8,26,.8)}
.hv-night .m{font-size:28px;color:var(--lamp);text-shadow:0 0 18px rgba(246,188,76,.6)}
.hv-night b{display:block;font:800 17px var(--sans)}
.hv-night span{color:var(--nmuted);font-size:14px}
.hv-night .go{margin-left:auto;font:700 14px var(--sans);color:var(--lamp);white-space:nowrap}
@media (min-width:760px){.hv-score{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hv{--hv0:#0E1820;--hv1:#0C1210;--tr:#6FC3A4;--tr2:#4C9F82;--tr3:#2B5E4E;--pl:#9AAAB6;--pl2:#7A8B99;--pl3:#45535F;--gold:#D8B34A}
  :root:not([data-theme="light"]) .hc{--hall0:#101B17;--hall1:#0C1210;--grid:rgba(111,195,164,.06)}
  :root:not([data-theme="light"]) .hv-sky i{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.18))}}
:root[data-theme="dark"] .hv{--hv0:#0E1820;--hv1:#0C1210;--tr:#6FC3A4;--tr2:#4C9F82;--tr3:#2B5E4E;--pl:#9AAAB6;--pl2:#7A8B99;--pl3:#45535F;--gold:#D8B34A}
:root[data-theme="dark"] .hc{--hall0:#101B17;--hall1:#0C1210;--grid:rgba(111,195,164,.06)}

/* ==================== 3. Famous train journeys: the special routes ==================== */
.hf{--fb:#0A110F;--fglow:#1D4F43;--fink:#EEF3F1;--fmut:#A9BDB6;--fline:rgba(124,199,174,.2);--sun:#F2C94C;--mint:#7CC7AE;
  --ok:#6FC3A4;--pause:#E9A94E;--check:#A7B4BE;--stop:#F28B7C;
  position:relative;isolation:isolate;overflow:hidden;color:var(--fink);
  background:radial-gradient(70% 90% at 90% -10%,var(--fglow) 0%,rgba(29,79,67,0) 60%),radial-gradient(60% 70% at -10% 110%,rgba(242,201,76,.10),transparent 60%),var(--fb)}
.hf{padding-top:64px;padding-bottom:70px}
.hf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--sun)}
.hf-kick{display:inline-flex;align-items:center;gap:9px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin:0 0 12px}
.hf-kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 rgba(242,201,76,.6)}
.anim .hf-kick::before{animation:hf-pulse 2.4s ease-out infinite}
@keyframes hf-pulse{0%{box-shadow:0 0 0 0 rgba(242,201,76,.55)}80%,100%{box-shadow:0 0 0 12px rgba(242,201,76,0)}}
.hf h2{color:#fff}
.hf-head p.sub{font-size:17px;color:var(--fmut);margin:0;max-width:62ch}
.hf-map{position:relative;margin:28px 0 22px;border-radius:20px;overflow:hidden;border:1px solid var(--fline);background:radial-gradient(100% 120% at 50% 0%,#11221D,#0B1412 70%)}
.hf-map svg{display:block;width:100%;height:auto}
.hf-land{fill:#15261F;stroke:rgba(124,199,174,.18);stroke-width:.6;vector-effect:non-scaling-stroke}
.hf-ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.85;transition:opacity .25s,stroke-width .25s}
.hf-ln.k-ok{stroke:var(--ok)}.hf-ln.k-pause{stroke:var(--pause)}.hf-ln.k-check{stroke:var(--check)}.hf-ln.k-stop{stroke:var(--stop)}
.hf-map.focus .hf-ln{opacity:.18}.hf-map.focus .hf-ln.on{opacity:1;stroke-width:4}
.anim .hf-ln{stroke-dasharray:var(--s,100);stroke-dashoffset:var(--s,100)}
.anim .hf.in .hf-ln{animation:hc-draw 1.8s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:var(--d,0s)}
.hf-end{fill:#fff;stroke:var(--fb);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hf-ml{position:absolute;left:14px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12px var(--mono);color:var(--fmut)}
.hf-ml i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:3px}
.hf-ml i.k-ok{background:var(--ok)}.hf-ml i.k-pause{background:var(--pause)}.hf-ml i.k-check{background:var(--check)}.hf-ml i.k-stop{background:var(--stop)}
.hf-cards{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.hf-card{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:18px;overflow:hidden;background:#0F1A17;border:1px solid var(--fline);text-decoration:none;color:var(--fink);
  transition:translate .2s ease,border-color .2s,box-shadow .25s}
.hf-card:hover,.hf-card:focus-visible{translate:0 -4px;border-color:rgba(242,201,76,.55);box-shadow:0 24px 44px -26px rgba(0,0,0,.9)}
.hf-art{position:relative;height:118px;background:var(--art,linear-gradient(135deg,#123B32,#0C1F1A))}
.hf-art svg{position:absolute;inset:0;width:100%;height:100%}
.hf-art .rt{fill:none;stroke:var(--sun);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.anim .hf-art .rt{stroke-dasharray:var(--s,100);stroke-dashoffset:var(--s,100)}
.anim .hf-card.in .hf-art .rt{animation:hc-draw 1.6s cubic-bezier(.3,.6,.2,1) .2s forwards}
.hf-art .st{fill:#fff}
.hf-rg{position:absolute;left:14px;top:12px;z-index:1;font:600 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(238,243,241,.78)}
.hf-body{display:grid;gap:7px;padding:14px 15px 15px;align-content:start}
.hf-name{font:800 19px/1.15 var(--sans);letter-spacing:-.01em}
.hf-ft{font:500 13px var(--mono);color:var(--mint)}
.hf-why{font-size:14px;color:var(--fmut);line-height:1.45}
.hf-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.hf-takes{font:500 12.5px var(--mono);color:var(--fink)}
.hf-stamp{display:inline-block;font:700 10.5px/1.15 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border:2px solid currentColor;border-radius:6px;transform:rotate(-3deg);white-space:nowrap}
.hf-stamp.k-ok{color:var(--ok)}.hf-stamp.k-pause{color:var(--pause)}.hf-stamp.k-check{color:var(--check)}.hf-stamp.k-stop{color:var(--stop)}
.anim .hf-card .hf-stamp{opacity:0;transform:rotate(-12deg) scale(1.6)}
.anim .hf-card.in .hf-stamp{opacity:1;transform:rotate(-3deg) scale(1);transition:opacity .2s ease .9s,transform .35s cubic-bezier(.3,1.7,.5,1) .9s}
.hf-allp{margin:24px 0 0}
.hf-all{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:var(--sun);color:#1A1407;font:800 16px var(--sans);text-decoration:none;box-shadow:0 12px 30px -14px rgba(242,201,76,.7)}
.hf-all:hover{translate:0 -1px}
.hf-more{margin-left:14px;color:var(--fmut);font-size:14px}
@media (min-width:640px){.hf-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.hf-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.hf-ml{position:static;padding:8px 12px 12px}}
@media (prefers-reduced-motion:reduce){.hc *,.hv *,.hf *{animation:none!important;transition:none!important}}
.anim .hf-card.hm-rv{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1),translate .2s ease,border-color .2s,box-shadow .25s}