/* ==========================================================================
   GATEWAY TIPS — "DEPARTURES"
   Site-locked to gatewaytips.com. Not a fleet template.

   THE DIRECTION
   Plain answers about flying, in the visual language every passenger on
   earth already reads: the airport. The departures pictogram on wayfinding
   yellow, a split-flap departures board, boarding passes with a tear-off
   stub, the grey security tray, two-letter airline codes, and the dotted
   routes of an in-flight route map.

     Board        the charcoal of the departures board: the top line, the
                  board itself, the code tiles, the footer
     Sign         wayfinding yellow: every section is signposted with a
                  yellow sign and a black arrow, as in a terminal
     Sky          the interactive colour: links, buttons, the pass header
     Cloud        the pale grey-blue of the terminal: band backgrounds

   Four voices of type:
     Source Sans 3          headlines — the humanist sans of airport signs
     Inter                  reading copy and the interface
     Barlow Semi Condensed  capitals for the board, the pass and the labels
     IBM Plex Mono          codes, counts and flight numbers
   ========================================================================== */
:root{
  --sky:   #2B6FD6;
  --board: #14181E;
  --sign:  #FFC629;
  --cloud: #F2F5F9;
  --ink:   #121820;
  --rule:  #DCE2EA;

  --white:       #FFFFFF;
  --sky-deep:    color-mix(in srgb, var(--sky) 76%, #000000);
  --sky-tint:    color-mix(in srgb, var(--sky) 8%, #FFFFFF);
  --sky-soft:    color-mix(in srgb, var(--sky) 22%, #FFFFFF);
  --sign-tint:   color-mix(in srgb, var(--sign) 18%, #FFFFFF);
  --sign-ink:    color-mix(in srgb, var(--sign) 30%, #4A3A00);
  --board-2:     color-mix(in srgb, var(--board) 84%, #3D4654);
  --cloud-deep:  color-mix(in srgb, var(--cloud) 80%, #8E9BAD);
  --ink-2:       color-mix(in srgb, var(--ink) 86%, #FFFFFF);
  --ink-3:       color-mix(in srgb, var(--ink) 66%, #FFFFFF);
  --ink-4:       color-mix(in srgb, var(--ink) 48%, #FFFFFF);
  --rule-2:      color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --rule-strong: color-mix(in srgb, var(--rule) 58%, #7D8796);
  --go:          #5BE08F;
  --late:        #FFB547;
  --foot-ink:    #DCE2E9;
  --foot-mute:   #9EA9B6;
  --foot-rule:   rgba(255,255,255,.13);

  --font-display: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     6px;
  --radius-lg:  14px;
  --base-size:  18px;
  --base-lh:    1.68;
  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;

  /* The wayfinding arrow: thick, square-ended, as on a terminal sign. */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 4l8 8-8 8-2.1-2.1 4.4-4.4H3v-3h12.3l-4.4-4.4z'/%3E%3C/svg%3E");
}

html, body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-size:var(--base-size); line-height:var(--base-lh);
  font-kerning:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; }
svg{ display:block; }
a{ color:var(--sky-deep); text-decoration:none; }
a:hover{ color:var(--sky); }
:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
::selection{ background:var(--sign); color:var(--ink); }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,4vw,48px); position:relative; }
.container .container{ max-width:none; padding-inline:0; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--board); color:var(--sign); padding:.7rem 1.1rem; font-weight:700; }
.skip-link:focus{ left:0; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[id]{ scroll-margin-top:96px; }

/* --- The label voice: condensed capitals, as on a boarding pass. --------- */
.label, .lk-desc, .finder-label, .finder-terms span, .tp-facts span, .band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link,
.toc-h, .breadcrumb, .post-card-meta, .result-meta, .results-count, .pl-eyebrow, .eyebrow, .post-cat, .card-tag, .pc-tag,
.post-links h2, .chip, .section-cap, .stat .l, .article-body thead th, .article-body .pro-tip::before,
.article-body .related-inline-link::before, .pagination, .src-org, .src-where, .board-cap, .pass-top, .pass-label, .stub-l,
.ps-more summary, .air-n, .bd-table th{
  font-family:var(--font-label); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.35;
}

/* --- The wayfinding sign: black arrow on yellow ------------------------------ */
.label.sign{
  display:inline-flex; align-items:center; gap:.45rem; margin:0 0 .9rem; padding:.34rem .75rem .32rem .45rem;
  border-radius:4px; background:var(--sign); color:var(--ink); font-weight:700; letter-spacing:.09em;
  box-shadow:0 1px 0 rgba(18,24,32,.18);
}
.label.sign::before{
  content:""; width:1.2em; height:1.2em; flex:none; background:currentColor;
  -webkit-mask:var(--arrow) center / contain no-repeat; mask:var(--arrow) center / contain no-repeat;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; margin:0; color:var(--ink); }
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--sky-deep); font-style:normal; }
.center{ text-align:center; }
.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.018em; }
.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.eyebrow{ display:inline-block; color:var(--sky-deep); margin-bottom:.6rem; }

/* --- The brand mark: the departures pictogram and the name --------------- */
.mark{ width:42px; height:42px; flex:none; }
.mark-lg{ width:52px; height:52px; }
.mk-tile{ fill:var(--sign); }
.mk-plane{ fill:var(--ink); }
.mk-runway{ fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:square; }
.lk-word{ display:flex; align-items:baseline; gap:.24em; font-family:var(--font-display); line-height:1; }
.lk-w1{ font-weight:800; font-size:1.55rem; letter-spacing:-.025em; text-transform:capitalize; color:var(--ink); }
.lk-w2{ font-weight:800; font-size:1.55rem; letter-spacing:-.025em; text-transform:capitalize; color:var(--sky); }
.mark-lg + .lk-word .lk-w1{ font-size:1.9rem; color:#FFFFFF; }
.mark-lg + .lk-word .lk-w2{ font-size:1.9rem; color:var(--sign); }
.lk-text{ display:flex; flex-direction:column; gap:.22rem; min-width:0; margin-left:.5rem; padding-left:.95rem; border-left:1px solid var(--rule); }
.lk-name{ font-family:var(--font-display); font-weight:700; font-size:1.38rem; line-height:1; color:var(--ink); white-space:nowrap; }
.lk-desc{ font-size:.66rem; letter-spacing:.08em; color:var(--ink-3); max-width:24ch; }
.lk-img{ height:42px; width:auto; }

/* --- The top line -------------------------------------------------------- */
.topline{ background:var(--board); color:#E9EDF2; }
.topline-in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:34px; }
.topline-what, .topline-asof{ font-family:var(--font-label); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.3; }
.topline-asof{ white-space:nowrap; color:var(--sign); }
.topline-asof time{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:50; background:var(--white); border-bottom:1px solid var(--rule); transition:box-shadow var(--t) var(--ease); }
.site-header.is-scrolled{ box-shadow:0 10px 24px -20px rgba(18,24,32,.5); }
.nav{ display:flex; align-items:center; gap:1.4rem; min-height:76px; }
.nav-brand{ display:flex; align-items:center; gap:.65rem; color:var(--ink); flex:none; }
.nav-brand:hover{ color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:1.5rem; margin-left:auto; }
.nav-link{ position:relative; padding:.4rem 0; color:var(--ink-2); font-weight:500; font-size:.95rem; white-space:nowrap; }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:2px; background:var(--sign); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease); }
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-tail{ display:flex; align-items:center; gap:.6rem; }
.nav-search{ display:flex; align-items:center; height:40px; background:var(--cloud); border:1.5px solid var(--rule); border-radius:999px; overflow:hidden; }
.nav-search input{ width:150px; border:0; outline:0; background:transparent; padding:0 .3rem 0 1rem; font:inherit; font-size:.92rem; color:var(--ink); }
.nav-search button{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:transparent; color:var(--ink); cursor:pointer; }
.nav-search button svg{ width:18px; height:18px; }
.nav-search:focus-within{ border-color:var(--sky); background:var(--white); }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid var(--rule-strong); border-radius:10px; background:var(--white); cursor:pointer; }
.nav-burger, .nav-burger::before, .nav-burger::after{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform var(--t) var(--ease); }
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }
.site-header.is-open .nav-burger{ background:transparent; }
.site-header.is-open .nav-burger::before{ transform:translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   TITLE PAGE — the terminal: routes overhead, the board below
   ========================================================================== */
.title-page{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--white) 0%, var(--cloud) 72%);
  padding:clamp(40px,5.4vw,76px) 0 clamp(30px,3.2vw,46px);
}
.tp-routes{ position:absolute; left:0; top:0; width:100%; height:min(100%,640px); pointer-events:none; }
.rt-arcs path{ fill:none; stroke:var(--sky); stroke-opacity:.26; stroke-width:1.7; stroke-dasharray:1.5 7; stroke-linecap:round; }
.rt-dots circle{ fill:var(--sky); fill-opacity:.32; }
.tp-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4.6vw,76px); align-items:end; }
.tp-kicker{ margin-bottom:1.2rem; }
.tp-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(3.2rem,7.2vw,6rem); line-height:.9; letter-spacing:-.04em; margin:0; color:var(--ink); text-wrap:balance; }
/* One line whatever font is on screen: the wider fallback used to wrap "Gateway Tips" onto two lines until Source Sans
   arrived, and the swap pulled the whole board up (CLS 0.19). */
@media (min-width:600px){ .tp-title{ white-space:nowrap; } }
.tp-wordmark .wm{ display:inline; }
.tp-wordmark .wm-first{ color:var(--ink); }
.tp-wordmark .wm-last{ color:var(--sky); margin-left:.06em; }
.tp-wordmark.is-spaced .wm-last{ margin-left:0; }
.tp-lead{ margin:1.4rem 0 0; font-size:1.18rem; line-height:1.6; color:var(--ink-2); max-width:52ch; }
.tp-side{ min-width:0; }
.finder{ max-width:600px; }
.finder-label{ display:block; color:var(--ink-3); margin-bottom:.55rem; }
.finder-row{ display:flex; align-items:stretch; background:var(--white); border:2px solid var(--ink); border-radius:14px; overflow:hidden; box-shadow:0 18px 34px -26px rgba(18,24,32,.6); }
.finder-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:1rem 1.1rem; font:inherit; font-size:1.04rem; color:var(--ink); }
.finder-go{ display:flex; align-items:center; gap:.6rem; padding:0 1.4rem; border:0; background:var(--sky); color:#FFFFFF; cursor:pointer;
  font-family:var(--font-label); font-weight:700; font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; transition:background var(--t) var(--ease); }
.finder-go svg{ width:22px; height:12px; }
.finder-go:hover{ background:var(--sky-deep); }
.finder-row:focus-within{ border-color:var(--sky); }
.finder-terms{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .5rem; margin:.95rem 0 0; }
.finder-terms span{ color:var(--ink-3); margin-right:.2rem; }
.finder-terms a{ padding:.28rem .75rem; border:1px solid var(--rule-strong); border-radius:999px; background:var(--white); font-size:.9rem; color:var(--ink-2); }
.finder-terms a:hover{ border-color:var(--sky); color:var(--sky-deep); }
.tp-facts{ display:flex; flex-wrap:wrap; margin:1.8rem 0 0; }
.tp-facts span{ color:var(--ink-3); padding-right:1.4rem; margin-right:1.4rem; border-right:1px solid var(--rule-strong); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{ display:block; margin-bottom:.1rem; font-family:var(--font-display); font-weight:800; font-size:2rem; letter-spacing:-.02em; text-transform:none; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }

/* --- The departures board ----------------------------------------------------- */
.board-fig{ position:relative; margin:clamp(34px,4.4vw,60px) 0 0; }
.board{
  --tile: clamp(10px, 1.42vw, 19px);
  --tile-fs: calc(var(--tile) * .8);
  position:relative; padding:clamp(12px,1.6vw,22px) clamp(12px,1.9vw,28px) clamp(10px,1.3vw,18px);
  border-radius:16px; background:linear-gradient(180deg,#1B2028 0%,#0F1217 100%); color:#F4F6F8;
  border:1px solid #090B0E; box-shadow:0 36px 60px -38px rgba(18,24,32,.85), inset 0 1px 0 rgba(255,255,255,.07);
}
.bd-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0 0 clamp(10px,1.2vw,16px); margin-bottom:clamp(6px,.9vw,12px); border-bottom:1px solid rgba(255,255,255,.1); }
.bd-title{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-label); font-weight:700; font-size:clamp(1.1rem,2vw,1.65rem); line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--sign); }
.bd-plane{ width:1.25em; height:1.25em; fill:currentColor; }
.bd-clock{ font-family:var(--font-mono); font-size:.86rem; color:#C3CBD5; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bd-table{ width:100%; border-collapse:separate; border-spacing:0 calc(var(--tile) * .34); }
.bd-table th{ text-align:left; color:#8C97A5; font-size:.68rem; letter-spacing:.16em; padding:0 calc(var(--tile) * .7) 0 0; white-space:nowrap; }
.bd-table td{ padding:0 calc(var(--tile) * .7) 0 0; vertical-align:middle; }
.bd-table th:last-child, .bd-table td:last-child{ padding-right:0; }
.bd-table .c-dest{ width:40%; }
.flaps{ display:inline-flex; flex-wrap:wrap; gap:3px calc(var(--tile) * .55); vertical-align:middle; }
.fw{ display:inline-flex; gap:2px; }
.fc{
  display:inline-flex; align-items:center; justify-content:center; width:var(--tile); height:calc(var(--tile) * 1.42);
  border-radius:2px; color:#F3F5F7; font-family:var(--font-label); font-weight:600; font-size:var(--tile-fs); line-height:1;
  background:linear-gradient(180deg,#2C323B 0%,#242931 48%,#07090C 48%,#07090C 53%,#1F242B 53%,#1A1E24 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.55);
}
.c-time .fc, .c-n .fc{ color:var(--sign); }
.c-flight .fc{ color:#C9D2DC; }
.c-rem.is-go .fc{ color:var(--go); }
.c-rem.is-late .fc{ color:var(--late); }
.c-dest a{ display:inline-block; border-radius:3px; color:inherit; }
.c-dest a:hover .fc{ color:var(--sign); background:linear-gradient(180deg,#39414C 0%,#2F3640 48%,#07090C 48%,#07090C 53%,#2A3038 53%,#242930 100%); }
.c-dest a:focus-visible{ outline:2px solid var(--sign); outline-offset:3px; }
.board-cap{ margin:.9rem 0 0; color:var(--ink-3); font-size:.74rem; }

/* ==========================================================================
   BANDS
   ========================================================================== */
.band{ padding:clamp(56px,7vw,100px) 0; }
.band-head{ margin-bottom:clamp(26px,3vw,40px); max-width:78ch; }
.band-title{ font-size:clamp(2rem,3.7vw,3rem); font-weight:800; line-height:1.04; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.band-note{ margin:1rem 0 0; color:var(--ink-3); font-size:1.03rem; line-height:1.6; max-width:66ch; }
.band-head-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.4rem 2rem; max-width:none; }
.band-head-row .label{ grid-column:1 / -1; justify-self:start; }
.band-more{ color:var(--sky-deep); padding-bottom:.5rem; white-space:nowrap; }
.band-more:hover{ color:var(--sky); }

/* --- Chapters: boarding passes ------------------------------------------------ */
.chapters{ background:var(--cloud); }
.pass-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px); }
.pass{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 132px; background:var(--white); border-radius:18px; overflow:hidden; box-shadow:0 0 0 1px var(--rule), 0 24px 40px -32px rgba(18,24,32,.55); }
.pass-main{ min-width:0; padding:0 clamp(18px,2vw,26px) clamp(16px,1.8vw,22px); }
.pass-top{ display:flex; align-items:center; gap:.55rem; height:2.7rem; margin:0 calc(-1 * clamp(18px,2vw,26px)) 1.1rem; padding:0 clamp(18px,2vw,26px); background:var(--sky); color:#FFFFFF; font-size:.76rem; letter-spacing:.16em; }
.pass-plane{ width:18px; height:18px; fill:currentColor; }
.pass-code{ margin-left:auto; font-family:var(--font-mono); font-weight:600; letter-spacing:.1em; }
.pass-label{ margin:0 0 .2rem; color:var(--ink-4); font-size:.68rem; }
.pass-name{ margin:0 0 .75rem; font-size:clamp(1.4rem,2.1vw,1.75rem); font-weight:800; line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
.ps-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.ps-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:.15rem .8rem; padding:.64rem 0; border-bottom:1px solid var(--rule-2); }
.ps-row:last-child{ border-bottom:0; }
.ps-main{ font-weight:600; font-size:1rem; line-height:1.35; color:var(--ink); }
.ps-main:hover{ color:var(--sky-deep); text-decoration:underline; text-underline-offset:3px; }
.ps-n{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.ps-parts{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; }
.ps-parts a{ min-width:1.9rem; padding:.08rem .4rem; border:1px solid var(--rule-strong); border-radius:6px; font-family:var(--font-mono); font-size:.74rem; text-align:center; color:var(--ink-3); }
.ps-parts a:hover{ border-color:var(--sky); color:var(--sky-deep); }
.ps-more{ margin-top:.6rem; border-top:1px dashed var(--rule-strong); }
.ps-more summary{ list-style:none; cursor:pointer; padding:.8rem 0 .3rem; color:var(--ink); display:flex; align-items:center; gap:.4rem; }
.ps-more summary::-webkit-details-marker{ display:none; }
.ps-more summary::before{ content:"+"; font-family:var(--font-display); font-size:1.15rem; line-height:1; color:var(--sky); }
.ps-more[open] summary::before{ content:"–"; }
.ps-more summary span{ color:var(--ink-4); }
/* The stub, torn along the dashes; the notches show the page behind. */
.pass-stub{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.95rem;
  padding:3.8rem 1rem 1.1rem 1.15rem; border-left:2px dashed var(--rule-strong);
  background:linear-gradient(180deg, var(--sky) 0 2.7rem, var(--white) 2.7rem);
}
.pass-stub::before, .pass-stub::after{ content:""; position:absolute; left:-12px; width:22px; height:22px; border-radius:50%; background:var(--cloud); }
.pass-stub::before{ top:-11px; }
.pass-stub::after{ bottom:-11px; }
.stub-cell{ display:flex; flex-direction:column; gap:.15rem; }
.stub-l{ color:var(--ink-4); font-size:.62rem; }
.stub-v{ font-family:var(--font-label); font-weight:700; font-size:1.55rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stub-code{ font-family:var(--font-mono); font-weight:600; font-size:1.05rem; letter-spacing:.14em; color:var(--sky-deep); }
.stub-bars{
  margin-top:auto; width:100%; height:46px; opacity:.85;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px);
}
.ps-other{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:1.4rem 0 0; }
.ps-other a{ color:var(--ink); font-weight:600; }
.ps-other a span{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-4); }

/* --- Can I bring it? The security tray ----------------------------------- */
.tray-band{ background:var(--white); }
.tray{
  padding:clamp(14px,2vw,26px); border-radius:30px;
  background:linear-gradient(180deg,#D4DBE3 0%,#C1CAD4 100%);
  box-shadow:inset 0 0 0 9px #CBD3DC, inset 0 16px 26px rgba(18,24,32,.2), 0 32px 46px -36px rgba(18,24,32,.6);
}
.tray-items{ list-style:none; margin:0; padding:clamp(8px,1vw,14px); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(8px,1vw,14px); }
.tray-items a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; height:100%;
  padding:1.15rem .5rem 1rem; border-radius:16px; background:var(--white); color:var(--ink); text-align:center;
  box-shadow:0 2px 0 rgba(18,24,32,.12), 0 12px 20px -16px rgba(18,24,32,.5); transition:transform var(--t) var(--ease), color var(--t) var(--ease);
}
.tray-items a:hover{ transform:translateY(-3px); color:var(--sky-deep); }
.ti-icon{ display:flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; background:var(--sky-tint); color:var(--sky); transition:background var(--t) var(--ease), color var(--t) var(--ease); }
.tray-items a:hover .ti-icon{ background:var(--sign); color:var(--ink); }
.ti-icon svg{ width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ti-name{ font-weight:600; font-size:.95rem; line-height:1.25; }

/* --- Airline by airline: the codes ---------------------------------------- */
.airlines{ background:var(--cloud); }
.air-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.air{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:.35rem .95rem; align-items:start; align-content:start; padding:1rem 1.1rem 1.1rem; background:var(--white); border:1px solid var(--rule); border-radius:14px; }
.air-code{ grid-row:1 / 3; display:flex; align-items:center; justify-content:center; gap:.1rem; width:64px; height:64px; border-radius:12px; background:var(--board); color:var(--sign); font-family:var(--font-mono); font-weight:600; font-size:1.42rem; line-height:1; letter-spacing:.04em; }
.air-code.is-pair{ flex-direction:column; font-size:1rem; gap:.25rem; }
.air-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; min-width:0; }
.air-name{ font-family:var(--font-display); font-weight:700; font-size:1.22rem; line-height:1.2; color:var(--ink); }
.air-n{ color:var(--ink-4); font-size:.68rem; white-space:nowrap; }
.air-subs{ display:flex; flex-wrap:wrap; gap:.32rem .35rem; }
.air-subs a{ padding:.16rem .6rem; border-radius:999px; background:var(--cloud); border:1px solid var(--rule); font-size:.84rem; color:var(--ink-2); }
.air-subs a:hover{ border-color:var(--sky); color:var(--sky-deep); }

/* --- Common questions ---------------------------------------------------- */
.questions{ background:var(--white); }
.diag-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(28px,4vw,72px); align-items:start; }
.symptoms{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.symptoms a{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; height:100%; padding:.95rem 1.05rem; border-radius:12px; background:var(--white); border:1px solid var(--rule); color:var(--ink); font-weight:600; font-size:1rem; line-height:1.38; transition:border-color var(--t) var(--ease), background var(--t) var(--ease); }
.symptoms a:hover{ border-color:var(--sky); background:var(--sky-tint); color:var(--sky-deep); }
.sy-go{ flex:none; display:flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; border-radius:4px; background:var(--sign); color:var(--ink); font-size:.9rem; transition:transform var(--t) var(--ease); }
.symptoms a:hover .sy-go{ transform:translateX(3px); }

/* --- Essential guides ------------------------------------------------------ */
.guides{ background:var(--cloud); }
.gd-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,3.4vw,56px); }
.gd-lead{ position:relative; padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(38px,3.6vw,50px); border-radius:var(--radius-lg); background:var(--board); color:#DDE3EA; overflow:hidden; }
/* A runway's centre line along the foot of the lead guide. */
.gd-lead::after{ content:""; position:absolute; left:clamp(22px,2.6vw,36px); right:clamp(22px,2.6vw,36px); bottom:16px; height:3px; background:repeating-linear-gradient(90deg, rgba(255,198,41,.55) 0 26px, transparent 26px 46px); }
.gd-tag{ color:var(--sign); margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800; line-height:1.06; letter-spacing:-.025em; }
.gd-lead-title a{ color:#FFFFFF; }
.gd-lead-title a:hover{ color:var(--sign); }
.gd-lead-ex{ position:relative; margin:1rem 0 0; color:#C2CBD5; font-size:1.04rem; line-height:1.62; }
.gd-go{ position:relative; display:inline-block; margin-top:1.2rem; color:var(--sign); }
.gd-go:hover{ color:#FFFFFF; }
.gd-side{ display:flex; flex-direction:column; }
.gd-med{ padding:0 0 1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--rule); }
.gd-med:last-child{ border-bottom:0; margin-bottom:0; }
.gd-med h3{ font-size:1.3rem; line-height:1.22; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--sky-deep); }
.gd-med p{ margin:.45rem 0 0; font-size:.96rem; line-height:1.55; color:var(--ink-3); }
.gd-list{ list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:2rem; border-top:2px solid var(--ink); }
.gd-list li{ border-bottom:1px solid var(--rule); }
.gd-list a{ display:block; padding:.8rem 0; color:var(--ink); font-weight:500; line-height:1.38; }
.gd-list a:hover{ color:var(--sky-deep); }

/* --- Latest -------------------------------------------------------------- */
.latest{ background:var(--white); }
.latest .section{ padding:0; }
.latest .section-head h2{ font-size:clamp(1.75rem,3vw,2.35rem); font-weight:800; color:var(--ink); }
.is-home .latest .post-grid > .post-card:nth-child(n+9){ display:none; }

/* --- How we write · official sources ------------------------------------------ */
.trust{ background:var(--cloud); }
.trust-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,4.4vw,72px); align-items:start; }
.pr-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.pr-list li{ display:flex; flex-direction:column; padding:1.3rem 1.4rem; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--rule); }
.pr-no{ align-self:flex-start; padding:.15rem .5rem; border-radius:4px; background:var(--board); color:var(--sign); font-family:var(--font-mono); font-weight:600; font-size:.84rem; }
.pr-h{ margin:.8rem 0 .4rem; font-size:1.22rem; line-height:1.22; color:var(--ink); }
.pr-p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }
.src{ padding:clamp(20px,2.4vw,30px); background:var(--white); color:var(--ink); border-radius:var(--radius-lg); border:1px solid var(--rule); border-top:5px solid var(--sign); }
.src-h{ font-size:1.6rem; font-weight:800; color:var(--ink); margin:0 0 .5rem; }
.src-lead{ margin:0 0 1rem; font-size:.96rem; line-height:1.55; color:var(--ink-3); }
.src-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.src-list li{ border-bottom:1px solid var(--rule-2); }
.src-list a{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem; padding:.75rem 0; color:var(--ink); }
.src-where{ grid-column:1; color:var(--sky-deep); font-size:.66rem; }
.src-name{ grid-column:1; font-weight:600; line-height:1.35; }
.src-org{ grid-column:1; color:var(--ink-3); font-size:.68rem; }
.src-go{ grid-row:1 / 4; grid-column:2; align-self:center; color:var(--sky); }
.src-list a:hover .src-name{ color:var(--sky-deep); text-decoration:underline; text-underline-offset:3px; }
.src-note{ margin:.9rem 0 0; font-size:.86rem; line-height:1.55; color:var(--ink-3); }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:clamp(18px,2vw,26px); }
.post-card{ display:flex; flex-direction:column; min-width:0; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.post-card:hover{ border-color:var(--sky-soft); box-shadow:0 14px 30px -24px rgba(18,24,32,.45); }
.post-card-media{ display:none; }
.post-card-body{ padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--sky-deep); }
.post-card-title{ font-size:1.2rem; line-height:1.26; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--sky-deep); }
.post-card-excerpt{ margin:0; font-size:.96rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.7rem; }
.card-grid, .pillar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:clamp(18px,2vw,26px); }
.card, .pillar-card{ display:block; padding:1.3rem 1.35rem 1.4rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); color:var(--ink); transition:border-color var(--t) var(--ease); }
.card:hover, .pillar-card:hover{ border-color:var(--sky); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--sky-deep); margin-bottom:.6rem; }
.card h3, .pillar-card h3{ font-size:1.2rem; line-height:1.28; margin:0; }
.pc-arrow{ display:inline-block; margin-top:.8rem; color:var(--ink-4); }
.card:hover .pc-arrow, .pillar-card:hover .pc-arrow{ color:var(--sky); }
.blk-more{ margin-top:1.8rem; }

/* ==========================================================================
   BUTTONS · CHIPS · PAGINATION
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem; font-family:var(--font-label); font-size:.92rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:1.5px solid transparent; border-radius:10px; cursor:pointer; transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.btn--accent{ background:var(--sky); color:#fff; }
.btn--accent:hover{ background:var(--sky-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--sky); color:var(--sky-deep); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{ display:inline-block; padding:.4rem .85rem; border-radius:999px; border:1px solid var(--rule-strong); background:var(--white); color:var(--ink-2); transition:border-color var(--t) var(--ease), color var(--t) var(--ease); }
.chip:hover{ color:var(--sky-deep); border-color:var(--sky); }
.pagination{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule); color:var(--ink-3); }
.pagination a{ padding:.65rem 1.15rem; border:1.5px solid var(--ink); border-radius:10px; color:var(--ink); }
.pagination a:hover{ border-color:var(--sky); color:var(--sky-deep); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */
.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); background:var(--white); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; margin-bottom:1.6rem; color:var(--ink-3); font-size:.74rem; }
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--sky-deep); }
.breadcrumb [aria-hidden="true"]{ color:var(--sky); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{ color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-shell h1.display{ font-size:clamp(2.2rem,4.4vw,3.4rem); font-weight:800; line-height:1.02; letter-spacing:-.03em; margin:0; color:var(--ink); text-wrap:balance; }
.page-shell h1.display::first-letter{ text-transform:uppercase; }
.page-shell .section{ padding:clamp(32px,4vw,52px) 0 0; }
.page-shell .section-head h2{ font-size:clamp(1.5rem,2.5vw,1.9rem); }
.results-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; padding-bottom:1.1rem; border-bottom:2px solid var(--ink); }
.results-head h1{ font-size:clamp(1.85rem,3.5vw,2.6rem); font-weight:800; margin:0; color:var(--ink); }
.results-count{ color:var(--ink-3); }
.results-list{ display:flex; flex-direction:column; }
.result{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.result h2{ font-size:1.32rem; line-height:1.26; margin:0; color:var(--ink); }
.result:hover h2{ color:var(--sky-deep); }
.result p{ margin:.45rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-3); max-width:76ch; }
.result-meta{ display:flex; gap:.9rem; margin-top:.6rem; color:var(--ink-4); font-size:.7rem; }
.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.topic-index-head p{ margin:.35rem 0 0; color:var(--ink-3); font-size:.95rem; }
.topic-index-list{ columns:2 320px; column-gap:2.5rem; }
.topic-index-list a{ display:block; break-inside:avoid; padding:.7rem 0; border-bottom:1px solid var(--rule-2); color:var(--ink-2); font-size:1rem; line-height:1.4; }
.topic-index-list a:hover{ color:var(--sky-deep); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article{ padding-bottom:1rem; }
.article-hero{ margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px); border-bottom:2px solid var(--ink); }
.article-hero-grid{ display:block; }
.article-hero-copy h1{ font-size:clamp(2.2rem,4.4vw,3.5rem); font-weight:800; line-height:1.02; letter-spacing:-.03em; margin:.2rem 0 0; max-width:24ch; color:var(--ink); text-wrap:balance; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.1rem; font-size:.98rem; color:var(--ink-3); }
.post-meta [aria-hidden="true"]{ color:var(--sky); }
.post-meta time{ font-variant-numeric:tabular-nums; }
.post-meta strong{ color:var(--ink); font-weight:600; }
.article-lead{ margin:1.2rem 0 0; font-size:1.2rem; line-height:1.56; color:var(--ink-2); max-width:60ch; }
.article-hero-media{ display:none; }
.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:240px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }
.toc{ position:sticky; top:100px; padding:1rem 1.1rem .5rem; border-radius:var(--radius-lg); background:var(--cloud); border:1px solid var(--rule); }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--ink); border-bottom:2px solid var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc li:last-child{ border-bottom:0; }
.toc a{ display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem; padding:.58rem 0; font-size:.93rem; line-height:1.4; color:var(--ink-2); }
.toc a::before{ content:counter(toc); font-family:var(--font-mono); font-weight:600; font-size:.82rem; line-height:1.7; color:var(--sky-deep); font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--sky-deep); }
.article-rail{ min-width:0; }
.article-body{ font-size:1rem; line-height:var(--base-lh); color:var(--ink-2); }
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.15rem; }
.article-body h2{ margin:2.7rem 0 1rem; padding-top:1.3rem; border-top:1px solid var(--rule); font-size:clamp(1.65rem,2.7vw,2.1rem); font-weight:800; line-height:1.12; letter-spacing:-.025em; color:var(--ink); }
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ margin:2rem 0 .6rem; font-size:1.34rem; line-height:1.24; }
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.04rem; letter-spacing:0; }
.article-body a{ color:var(--sky-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--sky) 45%, transparent); }
.article-body a:hover{ color:var(--sky); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }
.article-body ul, .article-body ol{ list-style:none; margin:0 0 1.35rem; padding:0; }
.article-body ul > li{ position:relative; padding-left:1.45rem; margin-bottom:.5rem; }
.article-body ul > li::before{ content:""; position:absolute; left:.1rem; top:.62em; width:.5em; height:.5em; background:var(--sky); border-radius:50%; }
.article-body ol{ counter-reset:step; }
.article-body ol > li{ counter-increment:step; position:relative; padding-left:2.3rem; margin-bottom:.65rem; }
.article-body ol > li::before{ content:counter(step); position:absolute; left:0; top:.2em; display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; border-radius:4px; background:var(--board); color:var(--sign); font-family:var(--font-mono); font-weight:600; font-size:.78rem; line-height:1; font-variant-numeric:tabular-nums; }
.article-body .pro-tip{ margin:1.7rem 0; padding:1rem 1.2rem 1.05rem; background:var(--sign-tint); border-left:4px solid var(--sign); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink); }
.article-body .pro-tip::before{ content:"Good to know"; display:block; margin-bottom:.35rem; color:var(--sign-ink); }
.article-body .related-inline-link{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; margin:1.5rem 0; padding:.8rem 1rem; font-size:0; background:var(--cloud); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body .related-inline-link::before{ content:"See also"; font-size:.72rem; color:var(--ink-3); }
.article-body .related-inline-link a{ font-size:1rem; font-weight:600; text-decoration:none; }
.article-body .related-inline-link a:hover{ text-decoration:underline; }
.article-body blockquote{ margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem; border-left:4px solid var(--sign); color:var(--ink); font-size:1.18rem; font-weight:500; line-height:1.55; }
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); border-radius:var(--radius); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{ font-family:var(--font-mono); font-size:.86em; padding:.12em .38em; border-radius:4px; background:var(--cloud); border:1px solid var(--rule); color:var(--ink); }
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--cloud); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body pre code{ padding:0; border:0; background:transparent; }
.table-wrap{ margin:1.8rem 0; overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); }
.article-body table{ width:100%; border-collapse:collapse; font-size:.96rem; font-variant-numeric:tabular-nums; }
.article-body th, .article-body td{ padding:.72rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); }
.article-body thead th{ background:var(--board); color:#FFFFFF; font-size:.74rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--cloud) 60%, #FFFFFF); }
.article-body tbody tr:last-child td{ border-bottom:0; }
.inline-cta{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin:2.2rem 0; padding:1.3rem 1.4rem; background:var(--cloud); border:1px solid var(--rule); border-left:4px solid var(--sky); border-radius:0 var(--radius) var(--radius) 0; }
.inline-cta-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.inline-cta-body strong{ font-family:var(--font-display); font-size:1.16rem; color:var(--ink); }
.inline-cta-body span{ font-size:.96rem; color:var(--ink-3); }
.faq{ margin-top:3rem; padding-top:1.3rem; border-top:2px solid var(--ink); }
.faq h2{ font-size:1.85rem; font-weight:800; margin:0 0 .8rem; color:var(--ink); }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{ list-style:none; cursor:pointer; position:relative; padding:1rem 2.6rem 1rem 0; font-weight:600; font-size:1.05rem; line-height:1.42; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:.25rem; top:.55rem; font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1; color:var(--sky); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--sky-deep); }
.faq-a{ padding:0 0 1.1rem; }
.faq-a p{ margin:0 0 .8rem; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.faq-a p:last-child{ margin-bottom:0; }
.post-links{ margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.post-links h2{ margin:0 0 1rem; color:var(--sky-deep); }
.pillar-link{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; background:var(--cloud); border:1px solid var(--rule); border-radius:var(--radius-lg); color:var(--ink); transition:background var(--t) var(--ease); }
.pillar-link:hover{ background:var(--sky-tint); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--sky-deep); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.24rem; line-height:1.28; color:var(--ink); }
.pl-arrow{ margin-left:auto; color:var(--sky); font-size:1.2rem; transition:transform var(--t) var(--ease); }
.pillar-link:hover .pl-arrow{ transform:translateX(4px); }

/* ==========================================================================
   BLOCKS — the Pages studio's own components
   ========================================================================== */
.blk{ padding:clamp(44px,6vw,80px) 0; }
.blk-space{ padding:0; }
.section{ padding:clamp(44px,6vw,80px) 0; }
.section-head{ margin-bottom:1.8rem; }
.section-cap{ color:var(--ink-3); }
.blk-hero .hero, .hero{ padding:clamp(40px,6vw,88px) 0; }
.hero-inner{ display:grid; gap:clamp(24px,3vw,48px); align-items:center; }
.hero h1{ font-size:clamp(2.3rem,5vw,3.9rem); font-weight:800; line-height:1.02; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); border-radius:var(--radius); }
.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.blk-prose h2, .blk-text h2{ font-size:1.85rem; font-weight:800; margin:2rem 0 .9rem; color:var(--ink); }
.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:center; }
.feat-copy h2{ font-size:clamp(1.65rem,3vw,2.25rem); margin-bottom:.9rem; }
.feat-media img{ border:1px solid var(--rule); border-radius:var(--radius); }
.blk-feat-title{ margin-bottom:.9rem; }
.cols{ display:grid; gap:clamp(20px,2.4vw,36px); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.col{ padding:1.4rem 1.45rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); min-width:0; }
.col h3{ font-size:1.2rem; margin-bottom:.5rem; }
.col p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:2px solid var(--ink); }
.stat{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .n{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.95rem,3.4vw,2.7rem); line-height:1; font-variant-numeric:tabular-nums lining-nums; color:var(--ink); }
.stat .l{ display:block; margin-top:.5rem; color:var(--ink-3); }
.sec-stat-band{ border-top:0; }
.blk-quote blockquote, .sec-quote blockquote{ margin:0; padding:0 0 0 1.4rem; border-left:4px solid var(--sign); font-family:var(--font-display); font-size:clamp(1.35rem,2.4vw,1.85rem); font-weight:600; line-height:1.34; color:var(--ink); max-width:36ch; }
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }
.cta, .cta-band, .sec-cta-band{ padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px); background:var(--cloud); border:1px solid var(--rule); border-radius:var(--radius-lg); text-align:center; }
.cta h2, .cta-band h2{ font-size:clamp(1.65rem,3vw,2.25rem); font-weight:800; margin-bottom:.8rem; color:var(--ink); }
.cta p, .cta-band p{ color:var(--ink-3); max-width:56ch; margin-inline:auto; }
.cta .btn-row, .cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }
.blk-divider hr, hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.blk-figure figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--ink-3); }
.blk-notfound .lead{ margin-inline:auto; }

/* ==========================================================================
   FOOTER — the board's charcoal, a yellow line above it
   ========================================================================== */
.site-footer{ background:var(--board); color:var(--foot-ink); padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px); border-top:5px solid var(--sign); }
.site-footer :focus-visible{ outline-color:var(--sign); }
.foot-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px); }
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.7rem; color:#FFFFFF; }
.foot-brand:hover{ color:#FFFFFF; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); font-weight:600; font-size:1.36rem; line-height:1.32; color:#FFFFFF; }
.foot-about{ margin:.8rem 0 0; font-size:.97rem; line-height:1.62; color:var(--foot-mute); max-width:46ch; }
.foot-cols{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,2.4vw,40px); min-width:0; }
.foot-col{ min-width:0; }
.foot-h{ margin:0 0 .9rem; padding-bottom:.6rem; color:var(--sign); border-bottom:1px solid var(--foot-rule); font-size:.76rem; letter-spacing:.14em; }
.foot-col ul, .foot-col ol{ list-style:none; margin:0; padding:0; }
.foot-col li{ break-inside:avoid; }
.foot-col li a{ display:block; padding:.3rem 0; font-size:.96rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a span{ font-family:var(--font-mono); font-size:.78rem; color:var(--sign); font-variant-numeric:tabular-nums; margin-left:.25rem; white-space:nowrap; }
.foot-col li a:hover{ color:#FFFFFF; text-decoration:underline; text-decoration-color:var(--sign); text-underline-offset:3px; }
.foot-disclosure{ margin:clamp(22px,2.4vw,32px) 0 0; padding:1rem 1.2rem; border-radius:var(--radius); border:1px solid var(--foot-rule); font-size:.9rem; line-height:1.6; color:var(--foot-ink); max-width:100ch; }
.foot-disclosure a{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.foot-base{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(22px,2.4vw,32px); padding-top:1.2rem; border-top:1px solid var(--foot-rule); }
.foot-copy{ margin:0; font-size:.92rem; color:var(--foot-mute); font-variant-numeric:tabular-nums; }
.foot-top-link{ color:var(--foot-ink); }
.foot-top-link:hover{ color:var(--sign); }
.foot-note{ margin:1.1rem 0 0; font-size:.85rem; line-height:1.6; color:var(--foot-mute); max-width:104ch; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .tp-routes{ display:none; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .lk-text{ display:none; }
  .trust-grid{ grid-template-columns:minmax(0,1fr); }
  .air-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tray-items{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1000px){
  .article-shell, .article-shell:has(.toc){ grid-template-columns:minmax(0,1fr); }
  .article-shell:not(:has(.toc)){ justify-items:stretch; }
  .article-main{ max-width:none; }
  .toc{ position:static; order:-1; margin-bottom:1.2rem; }
  .toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:1.6rem; }
  .article-rail{ order:-2; }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:920px){
  .nav{ min-height:66px; }
  .nav-toggle{ display:inline-flex; }
  .nav-search input{ display:none; }
  .nav-search{ background:transparent; border-color:transparent; }
  .nav-links{ position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:.4rem clamp(16px,4vw,48px) 1.1rem; background:var(--white); border-bottom:1px solid var(--rule); }
  .site-header.is-open .nav-links{ display:flex; }
  .nav-link{ padding:.9rem 0; border-bottom:1px solid var(--rule-2); font-size:1.05rem; }
  .nav-link::after{ display:none; }
  .nav-tail{ margin-left:auto; }
  .feat, .cols-3, .cols-4, .cols-2{ grid-template-columns:minmax(0,1fr); }
  .pass-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.6rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .gd-list{ grid-template-columns:minmax(0,1fr); }
  .air-grid{ grid-template-columns:minmax(0,1fr); }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .article-body table, .article-body thead, .article-body tbody, .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body thead{ display:none; }
  .article-body tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .article-body tr:last-child{ border-bottom:0; }
  .article-body tbody tr:nth-child(even) td{ background:transparent; }
  .article-body td{ border-bottom:0; padding:.4rem .95rem; }
  .article-body td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:.15rem; font-family:var(--font-label); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
}
@media (max-width:720px){
  .topline-asof{ display:none; }
  .topline-in{ min-height:30px; padding-block:.35rem; }
  .topline-what{ font-size:.66rem; letter-spacing:.08em; }
}
@media (max-width:640px){
  /* The board keeps the time, the destination and the count on a phone. */
  .board{ --tile:11px; --tile-fs:9.4px; padding:12px 12px 10px; border-radius:12px; }
  .bd-table .c-flight, .bd-table .c-gate, .bd-table .c-rem{ display:none; }
  .bd-table .c-dest{ width:auto; }
  .bd-clock{ font-size:.74rem; }
  /* The pass tears across instead of down. */
  .pass{ grid-template-columns:minmax(0,1fr); }
  .pass-stub{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; padding:1rem clamp(18px,2vw,26px) 1.1rem; border-left:0; border-top:2px dashed var(--rule-strong); background:var(--white); }
  .pass-stub::before, .pass-stub::after{ top:-12px; bottom:auto; }
  .pass-stub::before{ left:-11px; }
  .pass-stub::after{ left:auto; right:-11px; }
  .stub-bars{ margin:0 0 0 auto; width:96px; height:34px; }
  .tray{ border-radius:22px; }
  .tray-items{ grid-template-columns:repeat(3,minmax(0,1fr)); padding:6px; gap:8px; }
  .tray-items a{ padding:.9rem .3rem .8rem; border-radius:12px; }
  .ti-icon{ width:48px; height:48px; }
  .ti-icon svg{ width:28px; height:28px; }
  .ti-name{ font-size:.86rem; }
}
@media (max-width:600px){
  .mark{ width:36px; height:36px; }
  .lk-w1, .lk-w2{ font-size:1.32rem; }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.85rem 1rem; }
  .tp-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .9rem; }
  .tp-facts span{ display:flex; flex-direction:column; gap:.2rem; padding:0; margin:0; border-right:0; font-size:.68rem; }
  .tp-facts strong{ margin:0; font-size:1.55rem; }
  .post-grid, .card-grid, .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .inline-cta{ flex-direction:column; align-items:stretch; }
  .topic-index-list{ columns:1; }
  .is-home .latest .post-grid > .post-card:nth-child(n+7){ display:none; }
}