/* u31c.info — Skytrain wayfinding. Concrete ground, line-green signage, platform yellow, station-code plates.
   Bai Jamjuree (signage display) + IBM Plex Sans Thai Looped (reading) + IBM Plex Mono (codes, numbers). */
:root{
  color-scheme:light;
  --ground:#EDEFF1;--ground-2:#E1E5EA;--paper:#F8F9FB;--ink:#111B2E;--text:#1A2438;--muted:#4A5468;--rule:#C7CDD6;--rule-2:#DCE0E6;
  --deep:#14306B;--deep-2:#0B1D40;--lime:#6BC04B;--lime-2:#8BD86A;--link:#1D4E9E;--yellow:#F5C518;--yellow-2:#FFD746;--dots:#B38A00;--blue:#C2336F;--red:#C2412A;
  --font-head:"Bai Jamjuree","IBM Plex Sans Thai Looped",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Thai Looped","IBM Plex Sans",system-ui,sans-serif;
  --font-num:"IBM Plex Mono","IBM Plex Sans Thai Looped",ui-monospace,Menlo,Consolas,monospace;
  --hd:64px;--gut:16px;--max:1240px;--r:14px;
  /* tokens read by the game runtime */
  --surface:#111C36;--surface-2:#111C36;--border:rgba(139,216,106,.18);--heading:#EDF1F8;--primary:#86D95F;--primary-contrast:#0A1A0F;--accent:#F5C518
}
@media (min-width:768px){:root{--gut:24px}}
@media (min-width:1100px){:root{--gut:32px;--hd:72px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px);background:var(--deep-2)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ground);color:var(--text);font:400 1.0625rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body.lang-th{line-height:1.8}
img,svg,canvas{max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--deep)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.board :focus-visible,.platform :focus-visible,.ft :focus-visible,.tk :focus-visible{outline-color:var(--yellow)}
.tk :focus-visible{outline-color:var(--ink)}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);margin:0;text-wrap:balance}
.lang-th h1,.lang-th h2,.lang-th h3{line-height:1.45}
.lang-en h1,.lang-en h2,.lang-en h3{line-height:1.14;letter-spacing:-.012em}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--yellow);color:var(--ink);font-weight:600;padding:12px 18px;border-radius:999px;text-decoration:none}
.skip:focus{top:10px}

/* ---------- header: station-code plate + line map ---------- */
.hd{position:sticky;top:0;z-index:40;background:rgba(237,239,241,.94);border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(8px)){.hd{background:rgba(237,239,241,.82);backdrop-filter:saturate(1.3) blur(10px)}}
.nav-open .hd{backdrop-filter:none;background:var(--ground)}
.hd-in{display:flex;align-items:center;gap:14px;min-height:var(--hd)}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;flex:none}
.logo:hover{color:var(--ink)}
.plate{display:inline-grid;place-items:center;height:36px;padding:0 3px;border-radius:10px;background:var(--lime)}
.plate-c{display:block;padding:3px 9px;border-radius:7px;background:var(--deep);color:#fff;font:600 15px/1.45 var(--font-num);letter-spacing:.02em}
.logo-t{display:flex;flex-direction:column;line-height:1.15}
.logo-t b{font:600 17px/1.2 var(--font-head);letter-spacing:-.005em}
.logo-t small{font:500 12.5px/1.35 var(--font-body);color:var(--muted)}

.menu{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 15px/1 var(--font-body);cursor:pointer}
.menu:hover{background:var(--paper)}
.menu-i{position:relative;width:18px;height:12px}
.menu-i i{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:currentColor;transition:transform .2s,top .2s}
.menu-i i:first-child{top:1px}.menu-i i:last-child{top:8.5px}
.nav-open .menu{background:var(--ink);color:var(--ground)}
.nav-open .menu-i i:first-child{top:5px;transform:rotate(45deg)}
.nav-open .menu-i i:last-child{top:5px;transform:rotate(-45deg)}

.line{display:none;position:fixed;left:0;right:0;top:var(--hd);bottom:0;z-index:39;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;padding:24px var(--gut) 40px;border-top:1px solid var(--rule)}
.nav-open .line{display:block}
.line-ol{list-style:none;margin:0 0 28px;padding:0 0 0 4px;position:relative}
.line-ol::before{content:"";position:absolute;left:15px;top:28px;bottom:28px;width:6px;border-radius:3px;background:var(--lime)}
.line-ol a{position:relative;display:flex;align-items:center;gap:18px;min-height:58px;padding:6px 0;color:var(--ink);text-decoration:none;font:600 20px/1.35 var(--font-head)}
.line-ol a i{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;border:5px solid var(--deep);position:relative;z-index:1}
.line-ol a:hover i{background:var(--lime-2)}
.line-ol a[aria-current] i{background:var(--yellow);border-color:var(--ink);box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--ink)}
.line-ol a[aria-current] span{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:4px;text-underline-offset:6px}
.lsw{display:flex;gap:8px;flex-wrap:wrap}
.lsw a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:56px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font:600 15px/1 var(--font-body)}
.lsw a[aria-current]{background:var(--ink);color:var(--ground)}
.lsw a:hover:not([aria-current]){background:var(--ground-2)}
.hd-play{display:none}

@media (min-width:1100px){
  .menu{display:none}
  .line{display:flex!important;position:static;align-items:center;gap:18px;flex:1;min-width:0;padding:0;background:none;border:0;overflow:visible}
  .line-ol{display:flex;flex:1;justify-content:center;margin:0;padding:0}
  .line-ol::before{left:28px;right:28px;top:13px;bottom:auto;width:auto;height:4px;border-radius:2px}
  .line-ol a{flex-direction:column;gap:5px;min-height:58px;padding:6px 10px 4px;font:500 14.5px/1.3 var(--font-body);text-align:center}
  .line-ol a i{width:16px;height:16px;border-width:3.5px}
  .line-ol a[aria-current] i{box-shadow:0 0 0 3px var(--ground),0 0 0 5px var(--ink)}
  .line-ol a[aria-current] span{font-weight:600;text-decoration-thickness:3px;text-underline-offset:5px}
  .lsw{flex:none;gap:4px}
  .lsw a{min-width:48px;min-height:40px;padding:0 12px;font-size:14px}
}
@media (min-width:1320px){
  .hd-play{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--yellow);color:var(--ink);text-decoration:none;font:600 15px/1.2 var(--font-head);flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
  .hd-play:hover{background:var(--yellow-2);color:var(--ink)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:10px 22px;border-radius:999px;text-decoration:none;font:600 17px/1.3 var(--font-head);text-align:center;transition:background .15s,box-shadow .15s,transform .15s}
.btn-y{background:var(--yellow);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.btn-y:hover{background:var(--yellow-2);color:var(--ink)}
.btn-o{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn-o:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--lime-2);background:rgba(255,255,255,.06)}
.btn-k{background:var(--ink);color:#fff;width:100%}
.btn-k:hover{background:var(--deep);color:#fff}
.btn:active{transform:translateY(1px)}
.arr{flex:none;width:17px;height:12px;background:currentColor;clip-path:polygon(0 40%,60% 40%,60% 0,100% 50%,60% 100%,60% 60%,0 60%)}

/* ---------- station-name board (hero) ---------- */
.hero{padding:18px 0 26px;background:
  repeating-linear-gradient(90deg,rgba(17,27,46,.045) 0 1px,transparent 1px 160px),var(--ground)}
.hero-g{display:grid;gap:18px}
.board{position:relative;overflow:hidden;background:var(--deep);color:#E6ECF7;border-radius:var(--r);padding:0 20px 24px}
.board::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(139,216,106,.08);pointer-events:none}
.board-bar{display:flex;height:8px;margin:0 -20px 18px}
.board-bar i{flex:6;background:var(--lime)}.board-bar i:nth-child(2){flex:1;background:var(--yellow)}.board-bar i:nth-child(3){flex:2;background:var(--blue)}
.board-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0}
.roundel{display:inline-grid;place-items:center;height:40px;padding:0 14px;border-radius:999px;background:#fff;color:var(--deep);font:600 17px/1 var(--font-num);box-shadow:0 0 0 4px var(--lime)}
.badge{font:500 14px/1.5 var(--font-body);color:#C9DCBF}
.board h1{color:#fff;font-weight:700;font-size:clamp(1.8rem,1.3rem + 2.6vw,2.9rem);margin:18px 0 12px;position:relative;z-index:1}
.lead{position:relative;z-index:1}
.lead p{margin:0;font-size:1.0625rem;color:#D3DCEC;max-width:62ch}
.lead strong{color:#fff;font-weight:600}
.lead a{color:var(--lime-2)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:1}
.ticket{list-style:none;margin:22px 0 0;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:8px;border-top:1.5px dashed rgba(255,255,255,.22);position:relative;z-index:1}
.ticket li{position:relative;padding:6px 12px 6px 28px;border-radius:6px;background:rgba(255,255,255,.07);font:500 14px/1.5 var(--font-body);color:#E6ECF7}
.ticket li::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--lime-2)}

/* platform screen that holds the game */
.platform{position:relative;background:#0A1226;border-radius:var(--r);overflow:hidden;color:#EDF1F8;box-shadow:0 1px 0 rgba(255,255,255,.5),0 18px 40px -24px rgba(11,29,64,.55)}
.pf-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(139,216,106,.16);background:linear-gradient(#111C36,#0A1226)}
.pf-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--lime-2);box-shadow:0 0 0 3px rgba(139,216,106,.22)}
.pf-l{font:600 15px/1.4 var(--font-head);color:#fff}
.pf-code{margin-left:auto;font:600 12.5px/1 var(--font-num);color:#B8C3DA;padding:6px 8px;border:1px solid rgba(255,255,255,.2);border-radius:6px}
.screen{container:pf/inline-size}
.tactile{height:16px;background:radial-gradient(circle,var(--dots) 0 2.4px,transparent 3px) 3px 2px/12px 12px,var(--yellow)}
.platform .tactile{height:14px}

@media (min-width:1100px){
  .hero{padding:28px 0 40px}
  .hero-g{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
  .board{padding:0 32px 32px;min-height:100%}
  .board-bar{margin:0 -32px 26px}
  .board h1{margin:24px 0 16px}
  .lead p{font-size:1.125rem}
}

/* inner hero */
.hero-in{padding-bottom:22px}
.board-in{padding-bottom:26px}
.board-in h1{font-size:clamp(1.75rem,1.2rem + 2.5vw,3rem);max-width:30ch;margin-top:10px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.crumbs li{display:flex;align-items:center;font:500 14.5px/1.4 var(--font-body);color:#C9DCBF}
.crumbs li+li::before{content:"";width:24px;height:3px;margin:0 10px;border-radius:2px;background:var(--lime);box-shadow:0 0 0 0 transparent}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.crumbs a:hover{color:var(--lime-2)}
.crumbs span{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1100px){.board-in{padding:0 40px 36px}.board-in .board-bar{margin:0 -40px 18px}}

/* ---------- stops strip (on this page) ---------- */
.stops{background:var(--paper);border-block:1px solid var(--rule)}
.stops .wrap{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.stops-h{margin:0;font:600 13px/1.4 var(--font-body);color:var(--muted)}
.lang-en .stops-h{font-family:var(--font-num);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.stops-sc{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.stops ol{list-style:none;margin:0;padding:0 0 10px;display:flex;width:max-content;position:relative}
.stops ol::before{content:"";position:absolute;left:10px;right:24px;top:21px;height:4px;border-radius:2px;background:var(--lime)}
.stops li{flex:none;width:176px;scroll-snap-align:start}
.stops a{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;row-gap:4px;padding:12px 16px 6px 0;min-height:64px;color:var(--ink);text-decoration:none}
.stops a i{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;background:#fff;border:4.5px solid var(--deep);transition:background .2s,border-color .2s}
.stops a em{position:relative;z-index:1;justify-self:start;padding:3px 6px;border-radius:4px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule);font:600 12px/1 var(--font-num);font-style:normal;color:var(--muted)}
.stops a span{grid-column:1/-1;font:500 14px/1.5 var(--font-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lang-th .stops a span{line-height:1.6}
.stops a:hover i{background:var(--lime-2)}
.stops a.on i{background:var(--yellow);border-color:var(--ink)}
.stops a.on span{font-weight:600}
@media (min-width:1100px){.stops .wrap{flex-direction:row;align-items:flex-start;gap:24px;padding-top:0}.stops-h{padding-top:16px;flex:none;width:120px}.stops li{width:190px}}

/* ---------- article threaded on the rail ---------- */
.body{padding:30px 0 56px}
.body-g{display:grid;gap:32px}
.side{display:none}
@media (min-width:1100px){
  .body{padding:44px 0 72px}
  .body-g{grid-template-columns:minmax(0,1fr) 290px;gap:64px}
  .side{display:block}
  .side-in{position:sticky;top:calc(var(--hd) + 24px)}
}
.rail{position:relative;padding-left:30px;max-width:800px;counter-reset:st;min-width:0}
.rail::before,.rail::after{content:"";position:absolute;left:8px;top:8px;bottom:0;width:4px;border-radius:2px;background:var(--rule)}
.rail::after{background:var(--lime);transform-origin:top;transform:scaleY(0)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){.rail::after{animation:railfill linear both;animation-timeline:view();animation-range:entry 30% exit 60%}}
}
@supports not (animation-timeline:view()){.rail::after{display:none}}
@keyframes railfill{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.rail::after{display:none}}
@media (min-width:768px){.rail{padding-left:56px}.rail::before,.rail::after{left:14px}}
.rail>:first-child{margin-top:0}
.intro-x p:first-child{font-size:1.125rem;color:var(--ink)}
.st{counter-increment:st;margin-top:44px}
.st>h2{position:relative;display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem);margin:0 0 14px}
.st>h2{--lh:1.14}.lang-th .st>h2{--lh:1.45}
.st>h2::before{content:"";position:absolute;left:-30px;top:calc(29px + var(--lh) * .5em - 12px);width:24px;height:24px;margin-left:-2px;border-radius:50%;background:var(--paper);border:5px solid var(--deep);z-index:1}
.st>h2::after{content:counter(st,decimal-leading-zero);order:-1;align-self:flex-start;font:600 12.5px/1 var(--font-num);color:#fff;background:var(--deep);padding:5px 8px;border-radius:5px;letter-spacing:.06em}
@media (min-width:768px){.st>h2::before{left:-56px;margin-left:0;width:32px;height:32px;top:calc(29px + var(--lh) * .5em - 16px);border-width:6px}}
.st:hover>h2::before{background:var(--yellow)}
.rail h3{font-weight:600;font-size:1.2rem;margin:1.6em 0 .5em}
.rail p{margin:0 0 1em}
.rail ul,.rail ol{margin:0 0 1.2em;padding-left:1.3em}
.rail li{margin:.35em 0;padding-left:.2em}
.rail ul li::marker{color:var(--lime);font-size:1.15em}
.rail ol li::marker{font:600 .9em var(--font-num);color:var(--link)}
.rail strong{color:var(--ink);font-weight:600}
.rail code{font:500 .88em var(--font-num);background:var(--ground-2);padding:.12em .4em;border-radius:5px;overflow-wrap:anywhere}
.rail table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem;background:var(--paper);border-radius:10px}
.rail th,.rail td{padding:10px 14px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
.rail th{background:var(--deep);color:#fff;font:600 .95rem/1.4 var(--font-head)}
.intro-x,.st-x{overflow-wrap:break-word}

/* FAQ as departure rows */
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;cursor:pointer;font:600 1.1rem/1.45 var(--font-head);color:var(--ink)}
.lang-th .qa summary{line-height:1.6}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .q{color:var(--link)}
.q-i{flex:none;position:relative;width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);margin-top:1px;transition:background .2s,transform .25s}
.q-i::before,.q-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;background:var(--ink);border-radius:2px}
.q-i::after{transform:rotate(90deg);transition:transform .25s}
.qa details[open] .q-i{background:var(--yellow)}
.qa details[open] .q-i::after{transform:rotate(0)}
.qa .a{padding:0 48px 18px 0;color:var(--text)}
.qa .a p{margin:0}

/* platform-edge CTA */
.edge{margin-top:48px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.edge-in{display:flex;flex-direction:column;gap:16px;padding:20px}
.edge p{margin:0;font:600 1.15rem/1.5 var(--font-head);color:var(--ink)}
@media (min-width:768px){.edge-in{flex-direction:row;align-items:center;justify-content:space-between;padding:24px 28px}.edge .btn{flex:none}}

/* side ticket */
.tk{position:relative;background:var(--yellow);color:var(--ink);border-radius:12px;padding:18px 20px 20px;
  -webkit-mask:radial-gradient(circle 10px at 0 58px,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 58px,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 10px at 0 58px,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 58px,#0000 97%,#000) right/51% 100% no-repeat}
.tk::before{content:"";position:absolute;left:16px;right:16px;top:57px;border-top:2px dashed rgba(17,27,46,.35)}
.tk-code{display:inline-block;font:600 14px/1 var(--font-num);padding:8px 10px;border-radius:6px;background:var(--ink);color:var(--yellow)}
.tk strong{display:block;margin-top:28px;font:700 1.25rem/1.35 var(--font-head)}
.tk p{margin:8px 0 18px;font-size:.95rem;line-height:1.6}
.tk .btn{min-height:50px;font-size:16px;padding:10px 16px}

/* ---------- interchange cards ---------- */
.rel{background:var(--ground-2);padding:44px 0 52px;border-top:1px solid var(--rule)}
.rel-h{display:flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);margin:0 0 20px}
.rel-h::before{content:"";flex:none;width:44px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--lime) 0 60%,var(--yellow) 60% 72%,var(--blue) 72%)}
.rel-g{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.ic{display:flex;flex-direction:column;gap:8px;height:100%;padding:0 18px 18px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;overflow:hidden;color:var(--text);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.ic-bar{height:8px;margin:0 -18px 10px;background:var(--lime)}
.ic-1 .ic-bar{background:var(--deep)}.ic-2 .ic-bar{background:var(--blue)}.ic-3 .ic-bar{background:var(--yellow)}
.ic strong{font:600 1.15rem/1.4 var(--font-head);color:var(--ink)}
.ic-d{font-size:.95rem;line-height:1.6;color:var(--muted);flex:1}
.ic-go{align-self:flex-end;width:40px;height:40px;border-radius:50%;background:var(--ink);position:relative;transition:background .2s}
.ic-go::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:12px;background:#fff;clip-path:polygon(0 40%,60% 40%,60% 0,100% 50%,60% 100%,60% 60%,0 60%)}
.ic:hover{border-color:var(--ink);color:var(--text)}
.ic:hover .ic-go{background:var(--link)}
@media (prefers-reduced-motion:no-preference){.ic:hover{transform:translateY(-3px);box-shadow:0 14px 28px -20px rgba(11,29,64,.6)}}

/* ---------- footer: end of the line ---------- */
.ft{background:var(--deep-2);color:#D5DDEC}
.ft-in{display:grid;gap:30px;padding-top:40px;padding-bottom:28px}
@media (min-width:800px){.ft-in{grid-template-columns:1.4fr 1fr 1fr;gap:40px}}
.logo-ft{color:#fff}.logo-ft:hover{color:#fff}
.logo-ft .logo-t small{color:#AAB6CF}
.logo-ft .plate-c{background:#1F4390}
.ft-disc{margin:16px 0 0;font-size:.95rem;line-height:1.7;color:#BCC7DC;max-width:46ch}
.ft h2{font:600 1rem/1.4 var(--font-head);color:var(--lime-2);margin:0 0 10px}
.ft-map{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.ft-map::before{content:"";position:absolute;left:7px;top:22px;bottom:22px;width:4px;border-radius:2px;background:rgba(139,216,106,.45)}
.ft-map a{position:relative;display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-size:.98rem;line-height:1.4}
.ft-map a::before{content:"";position:absolute;left:-26px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--deep-2);border:4px solid var(--lime)}
.ft-map a:hover{color:var(--yellow)}
.ft-map a:hover::before{background:var(--yellow)}
.ft-base{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.92rem;color:#BCC7DC}
.age{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:3px solid var(--yellow);color:#fff;font:600 14px/1 var(--font-num)}
.ft-end{color:var(--lime-2)}
@media (min-width:600px){.ft-c{margin-left:auto}}

/* 404 */
.nf{padding:32px 0 64px}
.nf .board{max-width:760px}

@media (prefers-reduced-motion:no-preference){
  .pf-dot{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 7px rgba(139,216,106,0)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.hd,.stops,.side,.rel,.platform{display:none}body{background:#fff}}