/* ============================================================
   Mr Fly Away — "Departure Board"
   Light page, midnight punctuation bands, Solari amber accent.
   ============================================================ */

:root{
  --night:#070d15;
  --night-2:#0e1826;
  --night-3:#16233a;
  --amber:#ffb020;
  --amber-deep:#b87400;
  --amber-wash:#fff4e0;
  --verify:#1f9d64;
  --verify-wash:#e6f5ee;
  --alert:#d1462a;
  --alert-wash:#fdeee9;

  --paper:#ffffff;
  --paper-2:#f3f5f7;
  --ink:#0b131f;
  --ink-2:#3f4c5c;
  --muted:#69788a;
  --line:#dde3ea;
  --line-soft:#eaeef2;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1140px;
  --r:14px;
  --shadow:0 1px 2px rgba(11,19,31,.05),0 18px 40px -28px rgba(11,19,31,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0a111b;
    --paper-2:#111b29;
    --ink:#eef3f8;
    --ink-2:#c0cddb;
    --muted:#8698ab;
    --line:#22303f;
    --line-soft:#18242f;
    --amber-wash:#2a1d06;
    --verify-wash:#0f2419;
    --alert-wash:#2b120c;
    --shadow:0 1px 2px rgba(0,0,0,.6),0 18px 40px -28px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --paper:#0a111b;--paper-2:#111b29;--ink:#eef3f8;--ink-2:#c0cddb;--muted:#8698ab;
  --line:#22303f;--line-soft:#18242f;--amber-wash:#2a1d06;--verify-wash:#0f2419;
  --alert-wash:#2b120c;--shadow:0 1px 2px rgba(0,0,0,.6),0 18px 40px -28px rgba(0,0,0,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
h1,h2,h3,h4,.disp{
  font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0;text-wrap:balance;
}
p{margin:0 0 15px;}
a{color:var(--amber-deep);}
img{max-width:100%;display:block;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* Language visibility.
   Only the INACTIVE language is touched, so an active element keeps whatever
   display its own component rule gives it (block, flex, grid...). Setting
   display on the active one instead caused component rules to win the
   specificity tie and show both languages at once. */
html[lang="sw"] [data-t="en"],
html[lang="en"] [data-t="sw"]{display:none !important;}

/* ---------------- header ---------------- */
header.site{
  position:sticky;top:0;z-index:70;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;gap:14px;height:64px;}
.brand{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:700;font-size:17.5px;
  letter-spacing:-.03em;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:9px;white-space:nowrap;flex:none;
}
.brand .mark{
  width:27px;height:27px;border-radius:8px;background:var(--night);
  display:grid;place-items:center;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.35);
}
.brand .mark svg{width:14px;height:14px;fill:var(--amber);}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px;}
nav.main a{
  color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:8px 12px;border-radius:8px;
}
nav.main a:hover{background:var(--paper-2);color:var(--ink);}
nav.main a[aria-current="page"]{color:var(--ink);font-weight:600;}
.langtoggle{
  display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  margin-left:8px;flex:none;background:var(--paper);
}
.langtoggle button,nav.main .langtoggle a{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:600 12px/1 var(--mono);padding:9px 10px;letter-spacing:.06em;
  text-decoration:none;border-radius:0;
}
.langtoggle button[aria-pressed="true"],
nav.main .langtoggle a[aria-current="true"]{background:var(--night);color:var(--amber);}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15.5px/1 "Public Sans",system-ui,sans-serif;text-decoration:none;
  padding:15px 24px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease, filter .16s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-amber{background:var(--amber);color:#1a1102;box-shadow:0 6px 18px -8px rgba(255,176,32,.85);}
.btn-amber:hover{filter:brightness(1.06);}
.btn-dark{background:var(--night);color:#fff;}
.btn-dark:hover{filter:brightness(1.35);}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent;}
.btn-line:hover{border-color:var(--ink);}
.btn-onnight{border:1.5px solid rgba(255,255,255,.22);color:#fff;background:transparent;}
.btn-onnight:hover{border-color:var(--amber);color:var(--amber);}
.btn-wa{background:#1faa54;color:#fff;}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--night);color:#e9eff7;overflow:hidden;}
.hero .arcs{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;}
.hero .wrap{position:relative;z-index:2;padding:74px 22px 66px;}
.hero .route{
  display:inline-flex;align-items:center;gap:11px;font:600 11.5px/1 var(--mono);
  letter-spacing:.18em;color:var(--amber);border:1px solid rgba(255,176,32,.3);
  padding:8px 13px;border-radius:999px;margin-bottom:26px;
}
.hero .route .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{font-size:clamp(34px,7vw,66px);color:#fff;max-width:15ch;line-height:1.02;}

/* split-flap */
.flap{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:baseline;margin-top:6px;}
.flap span{
  display:inline-grid;place-items:center;min-width:.72em;
  background:#151f30;border-radius:4px;padding:.04em .1em;
  color:var(--amber);font-family:"Familjen Grotesk",system-ui,sans-serif;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
}
.hero p.lede{font-size:19px;color:#9fb2c8;margin:24px 0 0;max-width:50ch;line-height:1.55;}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.hero .sig{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:8px 26px;font:500 13px/1.4 var(--mono);color:#7e93ab;
}
.hero .sig b{color:#cfdcea;font-weight:600;}

/* ---------------- board strip ---------------- */
.board{background:var(--night-2);border-top:1px solid rgba(255,255,255,.07);}
.board .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;padding:0 22px;}
.board .cell{padding:22px 0;border-right:1px solid rgba(255,255,255,.07);}
.board .cell:last-child{border-right:0;}
.board .k{font:600 10.5px/1 var(--mono);letter-spacing:.16em;color:#6f849c;text-transform:uppercase;}
.board .v{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:700;
  font-size:27px;color:var(--amber);margin-top:8px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.board .v small{font-size:14px;color:#9fb2c8;font-weight:500;letter-spacing:0;}

/* ---------------- sections ---------------- */
section.band{padding:78px 0;}
section.band.tint{background:var(--paper-2);}
section.band.night{background:var(--night);color:#e9eff7;}
section.band.night h2,section.band.night h3{color:#fff;}
section.band.night p{color:#a4b6cb;}
.kicker{
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-deep);margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.kicker:before{content:"";width:22px;height:1.5px;background:var(--amber);}
section.band.night .kicker{color:var(--amber);}
.sec{font-size:clamp(27px,4.4vw,42px);max-width:19ch;}
p.sub{color:var(--ink-2);font-size:18px;max-width:56ch;margin-top:16px;}
section.band.night p.sub{color:#9fb2c8;}

/* ---------------- route cards ---------------- */
.routes{display:grid;gap:1px;margin-top:44px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
@media(min-width:760px){.routes{grid-template-columns:repeat(3,1fr);}}
.route-card{background:var(--paper);padding:32px 28px 34px;}
.route-card .code{
  font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-bottom:20px;
}
.route-card .code b{color:var(--ink);font-weight:700;}
.route-card .code .arw{color:var(--amber-deep);}
.route-card h3{font-size:23px;margin-bottom:10px;}
.route-card p{color:var(--ink-2);font-size:16px;margin:0;}
.route-card .status{
  margin-top:18px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  display:inline-block;padding:5px 9px;border-radius:5px;
}
.status.on{background:var(--verify-wash);color:var(--verify);}
.status.soon{background:var(--amber-wash);color:var(--amber-deep);}

/* ---------------- boarding pass ---------------- */
.passes{display:grid;gap:22px;margin-top:44px;}
@media(min-width:860px){.passes{grid-template-columns:1.45fr 1fr;}}
.pass{
  display:flex;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pass:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,19,31,.05),0 26px 50px -30px rgba(11,19,31,.6);}
.pass .stub{
  flex:none;width:62px;background:var(--night);color:var(--amber);
  display:grid;place-items:center;position:relative;
  border-right:2px dashed rgba(255,255,255,.22);
}
.pass .stub span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 12px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
}
.pass .body{padding:28px 26px 24px;}
.pass .tag{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);}
.pass h3{font-size:25px;margin:13px 0 10px;}
.pass p{color:var(--ink-2);font-size:16px;margin:0 0 18px;}
.pass .meta{
  display:flex;flex-wrap:wrap;gap:7px 14px;align-items:center;
  border-top:1px dashed var(--line);padding-top:14px;font:500 12.5px/1 var(--mono);color:var(--muted);
}
.chip{background:var(--verify-wash);color:var(--verify);border-radius:5px;padding:4px 8px;font-weight:600;}
.chip.lang{background:var(--amber-wash);color:var(--amber-deep);}

.sidebox{
  background:var(--night-2);color:#dbe6f2;border-radius:var(--r);padding:30px 28px;
  display:flex;flex-direction:column;
}
.sidebox h3{font-size:21px;color:#fff;margin-bottom:11px;}
.sidebox p{color:#9fb2c8;font-size:15.5px;}
.sidebox ul{margin:6px 0 0;padding-left:18px;color:#9fb2c8;font-size:15px;}
.sidebox li{margin-bottom:8px;}
.sidebox li b{color:#fff;}
.sidebox .btn{margin-top:auto;align-self:flex-start;}

/* ---------------- promise (night band) ---------------- */
.promise{display:grid;gap:1px;margin-top:46px;background:rgba(255,255,255,.09);border-radius:var(--r);overflow:hidden;}
@media(min-width:780px){.promise{grid-template-columns:repeat(3,1fr);}}
.promise > div{background:var(--night);padding:30px 26px 32px;}
.promise .no{
  font:700 12px/1 var(--mono);color:var(--alert);letter-spacing:.14em;
  display:block;margin-bottom:16px;
}
.promise h3{font-size:20px;margin-bottom:10px;}
.promise p{font-size:15.5px;margin:0;}

/* ---------------- notice ---------------- */
.notice{
  border:1px solid var(--line);border-left:3px solid var(--amber);
  background:var(--amber-wash);padding:20px 22px;border-radius:0 10px 10px 0;margin:24px 0;
}
.notice p{margin:0;font-size:16px;color:var(--ink-2);}
.notice strong{color:var(--ink);}
.notice.ok{border-left-color:var(--verify);background:var(--verify-wash);}
.notice.hot{border-left-color:var(--alert);background:var(--alert-wash);}
section.band.night .notice{background:rgba(255,176,32,.08);border-color:rgba(255,255,255,.12);}
section.band.night .notice p{color:#cbd9e8;}
section.band.night .notice strong{color:#fff;}

/* ---------------- article ---------------- */
.article{max-width:730px;margin:0 auto;padding:52px 22px 80px;}
.article h2{font-size:30px;margin:52px 0 6px;padding-top:22px;border-top:1px solid var(--line);}
.article h2:first-of-type{margin-top:34px;}
.article h3{font-size:19.5px;margin:32px 0 6px;}
.article p{font-size:17.5px;color:var(--ink-2);margin:0 0 16px;}
.article ul,.article ol{color:var(--ink-2);font-size:17px;padding-left:24px;margin:0 0 18px;}
.article li{margin-bottom:9px;}
.article strong{color:var(--ink);font-weight:600;}
.gloss{color:var(--muted);font-style:italic;font-size:15px;display:block;margin:-10px 0 16px;}
.article table{width:100%;border-collapse:collapse;font-size:16px;margin:20px 0 24px;}
.article th{
  background:var(--night);color:var(--amber);text-align:left;padding:12px 14px;
  font:600 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
}
.article td{padding:13px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-2);}
.article td:first-child{color:var(--ink);font-weight:600;}
.tblwrap{overflow-x:auto;border-radius:10px;border:1px solid var(--line);}
.tblwrap table{margin:0;}
.verified{
  display:flex;flex-wrap:wrap;gap:9px 20px;align-items:center;
  background:var(--night);color:#9fb2c8;border-radius:10px;
  padding:15px 18px;font:500 13px/1.4 var(--mono);margin:22px 0 10px;
}
.verified b{color:var(--amber);font-weight:600;}

/* ---------------- reveal ----------------
   Hidden ONLY when JS has confirmed it is running (html.js). Without that
   guard, a slow or blocked script leaves the whole page invisible. */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
html.js .rv.in{opacity:1;transform:none;}

/* ---------------- whatsapp ---------------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:80;background:#1faa54;color:#fff;
  border-radius:999px;padding:14px 20px;text-decoration:none;
  font:600 15px/1 "Public Sans",system-ui,sans-serif;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.6);display:flex;align-items:center;gap:9px;
  transition:transform .18s ease;
}
.wa-float:hover{transform:translateY(-2px);}
.wa-float svg{width:17px;height:17px;fill:currentColor;}

/* ---------------- footer ---------------- */
footer.site{background:var(--night);color:#8ea2b8;padding:60px 0 100px;font-size:15px;}
footer.site .cols{display:flex;flex-wrap:wrap;gap:34px 68px;margin-bottom:36px;}
footer.site h4{font-size:13px;margin-bottom:12px;color:#fff;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
footer.site a{color:#a8bacd;text-decoration:none;display:block;margin-bottom:8px;}
footer.site a:hover{color:var(--amber);}
footer.site .fine{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;line-height:1.6;max-width:74ch;font-size:13.5px;color:#7b8fa5;}
footer.site .fine strong{color:#cfdcea;}

@media (max-width:660px){
  .hero .wrap{padding:52px 22px 48px;}
  nav.main a{padding:8px 9px;font-size:13.5px;}
  section.band{padding:56px 0;}
  .board .cell{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:18px 0;}
  .pass .stub{width:44px;}
  .pass .body{padding:22px 20px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
  html.js .rv{opacity:1;transform:none;}
}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:5px;}

/* ============================================================
   BRAND LAYER — added in v3.
   The site is Mr Fly Away; guides are instances of it.
   ============================================================ */

/* ---------- departures ticker ---------- */
.dep{background:var(--night-2);border-top:1px solid rgba(255,255,255,.07);padding:0 0 6px;}
.dep .head{
  display:flex;align-items:center;gap:14px;padding:18px 0 12px;
  font:600 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#6f849c;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.dep .head .lit{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 2.4s ease-in-out infinite;}
.dep .head .now{margin-left:auto;color:#8ea2b8;letter-spacing:.1em;}
.dep .row{
  display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.055);
}
.dep .row:last-child{border-bottom:0;}
.dep .from{font:600 12px/1 var(--mono);color:#6f849c;letter-spacing:.12em;}
.dep .to{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:700;font-size:20px;
  color:#fff;letter-spacing:-.01em;
}
.dep .to em{font-style:normal;color:#7e93ab;font-weight:500;font-size:14px;margin-left:9px;}
.dep .st{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:5px;white-space:nowrap;}
.st-live{background:rgba(31,157,100,.18);color:#5fd39c;}
.st-writing{background:rgba(255,176,32,.16);color:var(--amber);}
.st-planned{background:rgba(255,255,255,.07);color:#8ea2b8;}

/* ---------- who / person ---------- */
.who{display:grid;gap:34px;align-items:start;margin-top:42px;}
@media(min-width:820px){.who{grid-template-columns:300px 1fr;gap:52px;}}
.portrait{
  margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--night-2);border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--shadow);
}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;}
.portrait figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 12px;
  background:linear-gradient(to top,rgba(7,13,21,.92),rgba(7,13,21,0));
  font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;color:#cfdcea;
}
.portrait .ph{
  text-align:center;padding:24px;color:#6f849c;font:500 13px/1.5 var(--mono);
}
.portrait .ph b{display:block;color:var(--amber);font-size:11px;letter-spacing:.16em;margin-bottom:10px;}
.who .said p{font-size:19px;color:var(--ink-2);line-height:1.62;}
.who .said p:first-child{font-size:22px;color:var(--ink);}
.sign{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
}
.sign .nm{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:700;font-size:19px;}
.sign .rl{font:500 13px/1 var(--mono);color:var(--muted);letter-spacing:.06em;}

/* ---------- principles (numbered spine) ---------- */
.principles{display:grid;gap:1px;margin-top:42px;background:rgba(255,255,255,.09);border-radius:var(--r);overflow:hidden;}
@media(min-width:780px){.principles{grid-template-columns:repeat(3,1fr);}}
.principles > div{background:var(--night);padding:32px 28px 34px;}
.principles .n{
  font:700 11.5px/1 var(--mono);color:var(--alert);letter-spacing:.16em;
  display:flex;align-items:center;gap:9px;margin-bottom:18px;
}
.principles .n:before{content:"";width:16px;height:1.5px;background:var(--alert);}
.principles h3{font-size:20px;margin-bottom:11px;}
.principles p{font-size:15.5px;margin:0;}

/* ---------- catalogue ---------- */
.cat{margin-top:42px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);}
.cat .item{
  display:grid;grid-template-columns:78px 1fr auto;gap:18px;align-items:center;
  padding:20px 22px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;
}
.cat .item:last-child{border-bottom:0;}
.cat a.item:hover{background:var(--paper-2);}
.cat .rt{font:600 11.5px/1.4 var(--mono);color:var(--muted);letter-spacing:.08em;}
.cat .rt b{display:block;color:var(--ink);font-size:12.5px;}
.cat h3{font-size:19px;margin-bottom:4px;}
.cat .sm{font-size:15px;color:var(--ink-2);margin:0;}
.cat .badge{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:6px;white-space:nowrap;}
.bg-live{background:var(--verify-wash);color:var(--verify);}
.bg-writing{background:var(--amber-wash);color:var(--amber-deep);}
.bg-planned{background:var(--paper-2);color:var(--muted);border:1px solid var(--line);}
@media(max-width:640px){
  .cat .item{grid-template-columns:1fr auto;gap:10px 14px;}
  .cat .rt{grid-column:1/-1;}
}

/* ============================================================
   MOTION — v4
   Everything here is transform/opacity only so it stays on the
   compositor, and everything is disabled under reduced-motion.
   ============================================================ */

/* flight paths: the dashes flow along the arcs like a trail */
.hero .arcs g{
  stroke-dashoffset:0;
  animation:dashflow 26s linear infinite;
}
@keyframes dashflow{to{stroke-dashoffset:-400;}}
.hero .arcs{will-change:transform;}
.hero .wrap{will-change:transform,opacity;}

/* header condenses once you leave the hero */
header.site{transition:box-shadow .3s ease, background-color .3s ease;}
header.site .wrap{transition:height .28s cubic-bezier(.4,0,.2,1);}
header.site.condensed{box-shadow:0 6px 26px -18px rgba(0,0,0,.7);}
header.site.condensed .wrap{height:54px;}
header.site .brand .mark{transition:transform .28s cubic-bezier(.4,0,.2,1);}
header.site.condensed .brand .mark{transform:scale(.88);}

/* departures rows land one after another, like a board updating */
html.js .dep .row{opacity:0;transform:translate3d(-16px,0,0);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);}
html.js .dep .row.in{opacity:1;transform:none;}

/* status pills pop very slightly as their row lands */
html.js .dep .row .st{transform:scale(.94);opacity:0;transition:transform .4s cubic-bezier(.2,1.4,.4,1) .18s,opacity .4s ease .18s;}
html.js .dep .row.in .st{transform:none;opacity:1;}

/* portrait parallax: the image drifts inside a fixed frame */
figure.portrait{overflow:hidden;}
figure.portrait img{will-change:transform;transform:scale(1.14);}

/* catalogue rows nudge on hover, and the live one shows a chevron */
.cat a.item{transition:background-color .2s ease;position:relative;}
.cat a.item h3{transition:transform .22s cubic-bezier(.3,.8,.3,1);}
.cat a.item:hover h3{transform:translateX(5px);}

/* boarding-pass style lift already exists; make the stub text drift up a touch */
.pass .stub span{transition:transform .3s cubic-bezier(.3,.8,.3,1);}
.pass:hover .stub span{transform:translateY(-5px);}

/* the counter needs stable width while it ticks */
.board .v{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  .hero .arcs g{animation:none;}
  html.js .dep .row,
  html.js .dep .row .st{opacity:1;transform:none;}
  figure.portrait img{transform:none;}
  .hero .arcs,.hero .wrap,figure.portrait img{will-change:auto;}
}

/* ---------------- small-screen header ----------------
   Brand + three links + the language toggle do not fit on one row at 390px
   (they measured 503px). Wrap to two rows rather than hiding navigation or
   letting the page scroll sideways. */
@media (max-width:620px){
  header.site .wrap{flex-wrap:wrap;height:auto;padding-top:9px;padding-bottom:9px;row-gap:2px;}
  header.site.condensed .wrap{height:auto;}
  .langtoggle{margin-left:auto;}
  nav.main{
    order:3;width:100%;margin-left:0;
    justify-content:flex-start;gap:0;
    border-top:1px solid var(--line-soft);padding-top:4px;margin-top:4px;
  }
  nav.main a{padding:7px 10px;font-size:14px;}
  nav.main a:first-child{padding-left:0;}
}