/* =========================================================
   LIQUID GLASS — Gallivanting Gadabout
   A real refractive glass material, not glassmorphism.

   Fidelity ladder (each rung degrades cleanly to the one below):
     3. url(#lg-refract) displacement  → genuine refraction, straight
        lines behind the panel visibly bend. Added by glass.js only
        after a support probe, because an unsupported url() in
        backdrop-filter invalidates the whole declaration.
     2. backdrop-filter blur + saturate → classic glassmorphism.
     1. solid tinted panel              → prefers-reduced-transparency,
        low-end devices, and no-backdrop-filter browsers.

   Everything is a token, so the material can be retuned in one place.
   ========================================================= */

:root{
  /* material */
  --lg-blur: 14px;
  --lg-blur-refract: 2px;      /* displacement does the work; blur only smooths */
  --lg-sat: 1.6;
  --lg-bright: 1.06;
  --lg-sheen: linear-gradient(var(--lg-angle,150deg),
     rgba(255,255,255,.22) 0%, rgba(255,255,255,.03) 38%,
     rgba(255,255,255,.01) 60%, rgba(255,255,255,.14) 100%);
  --lg-radius: 22px;
  --lg-tint: rgba(255,255,255,.13);
  --lg-tint-strong: rgba(255,255,255,.19);
  --lg-rim-top: rgba(255,255,255,.62);
  --lg-rim-bottom: rgba(255,255,255,.10);
  --lg-inner: rgba(255,255,255,.07);
  --lg-lift: 0 18px 50px -18px rgba(0,0,0,.62);
  --lg-spec: rgba(255,255,255,.42);   /* specular hotspot */
  --lg-edge: rgba(255,255,255,.30);
  --lg-text: #ffffff;
  --lg-text-soft: rgba(255,255,255,.80);
  /* per-surface cursor position, updated by glass.js */
  --mx: 50%;
  --my: 30%;
}
[data-theme="light"]{
  --lg-tint: rgba(255,255,255,.46);
  --lg-tint-strong: rgba(255,255,255,.62);
  --lg-rim-top: rgba(255,255,255,.95);
  --lg-rim-bottom: rgba(0,0,0,.05);
  --lg-inner: rgba(255,255,255,.30);
  --lg-lift: 0 18px 46px -20px rgba(30,25,15,.30);
  --lg-spec: rgba(255,255,255,.75);
  --lg-edge: rgba(255,255,255,.75);
  --lg-text: #16202e;
  --lg-text-soft: rgba(22,32,46,.80);
  --lg-sheen: linear-gradient(var(--lg-angle,150deg),
     rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 38%,
     rgba(255,255,255,.10) 60%, rgba(255,255,255,.55) 100%);
}

/* ---------------------------------------------------------
   The material
   --------------------------------------------------------- */
.lg{
  position:relative;
  isolation:isolate;
  border-radius:var(--lg-radius);
  color:var(--lg-text);
  /* A perfectly clear pane over a background looks like nothing at all.
     Real glass is visible from its sheen, its thickness and its rim — so
     those are permanent, and the tracked specular adds on top. */
  background-color:var(--lg-tint);
  background-image:var(--lg-sheen);
  /* rung 1 — always safe */
  box-shadow:
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 -1px 0 var(--lg-rim-bottom),
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 10px 28px -16px rgba(255,255,255,.40),
    inset 0 -14px 34px -20px rgba(0,0,0,.55),
    var(--lg-lift);
}

/* rung 2 — glassmorphism */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lg{
    background-color:var(--lg-tint);
    -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
    backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  }
}

/* rung 3 — real refraction. class added by glass.js after probing. */
.lg.is-refracting{
  -webkit-backdrop-filter:url(#lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter:url(#lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}
.lg.is-refracting.lg-thick{
  -webkit-backdrop-filter:url(#lg-refract-thick) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter:url(#lg-refract-thick) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}

/* the bevel: a bright hairline that is brightest where the light is.
   ::before is the rim, ::after is the moving specular hotspot. */
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  padding:1px;
  background:linear-gradient(
     var(--lg-angle,150deg),
     var(--lg-edge) 0%,
     rgba(255,255,255,.05) 34%,
     rgba(255,255,255,0) 55%,
     rgba(255,255,255,.16) 82%,
     var(--lg-edge) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.lg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at var(--mx) var(--my),
     var(--lg-spec) 0%, rgba(255,255,255,.10) 26%, transparent 58%);
  opacity:.55;
  transition:opacity .4s ease;
  mix-blend-mode:screen;
}
[data-theme="light"] .lg::after{mix-blend-mode:overlay;opacity:.75}
.lg:hover::after{opacity:.85}

/* content sits above both pseudo layers */
.lg > *{position:relative;z-index:3}

/* variants */
.lg-thick{--lg-radius:28px;--lg-blur:20px;--lg-tint:var(--lg-tint-strong);--lg-bright:1.09}
/* Chrome surfaces — rails, bars, footers — carry text over whatever the
   page is doing behind them. The reference's own guidance is blunt about
   this: glass is for the layer above content, and legibility beats effect.
   So persistent chrome gets more tint and no saturation/brightness push. */
.lg-chrome{--lg-tint:rgba(10,14,24,.55);--lg-sat:1.05;--lg-bright:1;--lg-blur:22px;
  --lg-sheen:linear-gradient(var(--lg-angle,150deg),rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,.06) 100%)}
[data-theme="light"] .lg-chrome{--lg-tint:rgba(255,255,255,.80);
  --lg-sheen:linear-gradient(var(--lg-angle,150deg),rgba(255,255,255,.9) 0%,rgba(255,255,255,.45) 45%,rgba(255,255,255,.7) 100%)}
.lg-pill{--lg-radius:999px}
.lg-flush{--lg-radius:0}

/* rung 1 fallbacks: transparency off, or no backdrop-filter at all */
@media (prefers-reduced-transparency: reduce){
  .lg,.lg.is-refracting{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    background-image:none;background-color:var(--panel-solid,#0a0f19);
  }
  .lg::after{display:none}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lg{background-image:none;background-color:var(--panel-solid,#0a0f19)}
}
html.lg-lowpower .lg,html.lg-lowpower .lg.is-refracting{
  -webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;
}

/* ---------------------------------------------------------
   Page scaffolding shared by both samples
   --------------------------------------------------------- */
.lg-page{
  min-height:100vh;margin:0;color:var(--lg-text);
  font-family:var(--font-body);
  background:var(--lg-bg,#050912);
  overflow-x:hidden;
}
/* The scene behind the glass. Deliberately busy and full of STRAIGHT
   LINES — that is how you can tell real refraction from a blur:
   the lines bend as they pass under a panel edge. */
.lg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lg-scene .field{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%);
}
.lg-scene .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.85;will-change:transform}
.lg-scene .o1{width:42vw;height:42vw;left:14vw;top:-14vw;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.18),rgba(255,255,255,.05) 38%,transparent 70%)}
.lg-scene .o2{width:52vw;height:52vw;right:-10vw;top:14vh;
  background:radial-gradient(circle at 50% 50%,#3f7fd0,#1b3f7a 42%,rgba(27,63,122,0) 72%)}
.lg-scene .o3{width:40vw;height:40vw;left:22vw;bottom:-14vw;
  background:radial-gradient(circle at 50% 50%,#e0743c,#8c2f6b 45%,rgba(140,47,107,0) 72%)}
.lg-scene .horizon{position:absolute;left:-10%;right:-10%;top:58%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,226,170,.85),transparent);filter:blur(1px)}
.lg-scene .rule{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.13)}
[data-theme="light"] .lg-scene .field{
  background-image:
    linear-gradient(to right,rgba(20,30,50,.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(20,30,50,.13) 1px,transparent 1px);
}
[data-theme="light"] .lg-scene .rule{background:rgba(20,30,50,.14)}
[data-theme="light"] .lg-scene .orb{opacity:.55}

.lg-wrap{position:relative;z-index:1;width:min(1180px,100% - 2.5rem);margin-inline:auto}

/* type inside glass */
.lg h1,.lg h2,.lg h3,.lg-page h1,.lg-page h2,.lg-page h3{
  font-family:var(--font-display);font-weight:600;letter-spacing:.01em;line-height:1.06;margin:0 0 .5rem;
  text-wrap:balance;
}
.lg-page h1{font-size:clamp(2.4rem,1rem + 5vw,4.6rem)}
.lg-label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lg-text-soft);
}
.lg-num{font-family:var(--font-hud);letter-spacing:.03em}
.lg-soft{color:var(--lg-text-soft)}

/* controls */
.lg-btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.4rem;border:0;cursor:pointer;
  border-radius:999px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lg-text);background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.08),0 8px 22px -10px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s;
}
.lg-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 30px -12px rgba(0,0,0,.7)}
.lg-btn:active{transform:translateY(0) scale(.985)}
.lg-btn.solid{background:var(--amber);color:#1a1205;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -10px rgba(243,181,57,.7)}
.lg-btn.solid:hover{background:var(--amber-2)}
[data-theme="light"] .lg-btn{background:rgba(255,255,255,.55);color:var(--lg-text)}
[data-theme="light"] .lg-btn:hover{background:rgba(255,255,255,.78)}

.lg-toggle{
  position:fixed;right:1.25rem;top:1.25rem;z-index:40;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;display:grid;place-items:center;color:var(--lg-text);background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -8px rgba(0,0,0,.6);
}
.lg-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.lg-toggle .moon{display:none}
[data-theme="light"] .lg-toggle .moon{display:block}
[data-theme="light"] .lg-toggle .sun{display:none}
[data-theme="light"] .lg-toggle{background:rgba(255,255,255,.6)}

/* focus */
.lg-page :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

/* the refraction proof strip */
.lg-proof{display:flex;gap:.6rem;align-items:center;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lg-text-soft)}
.lg-proof b{color:var(--amber-2);font-weight:400}
[data-theme="light"] .lg-proof b{color:var(--amber)}

@media (prefers-reduced-motion: reduce){
  .lg-btn,.lg::after{transition:none}
  .lg-scene .orb{animation:none !important}
}

/* =========================================================
   MATERIAL CONTROL
   Apple shipped opacity controls in 26.1 after the legibility
   complaints; the reference explainer calls that out. So the
   material level is a first-class control here, not a hidden
   media query. "auto" honours the OS; the other three force.
   Forced modes deliberately beat the reduced-transparency block.
   ========================================================= */
html[data-lg-force="refract"] .lg{
  background-color:var(--lg-tint) !important;
  background-image:var(--lg-sheen) !important;
  -webkit-backdrop-filter:url(#lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
  backdrop-filter:url(#lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
}
html[data-lg-force="refract"] .lg.lg-thick{
  background-color:var(--lg-tint-strong) !important;
  background-image:var(--lg-sheen) !important;
  -webkit-backdrop-filter:url(#lg-refract-thick) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
  backdrop-filter:url(#lg-refract-thick) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
}
html[data-lg-force="blur"] .lg{
  background-color:var(--lg-tint) !important;
  background-image:var(--lg-sheen) !important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
}
html[data-lg-force="blur"] .lg.lg-thick{background-color:var(--lg-tint-strong) !important;background-image:var(--lg-sheen) !important}
html[data-lg-force="solid"] .lg{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  background-image:none !important;background-color:var(--panel-solid) !important;
}
html[data-lg-force="solid"] .lg::after{display:none}
html[data-lg-force="refract"] .lg::after,
html[data-lg-force="blur"] .lg::after{display:block}

/* the control itself */
.lg-mode{
  position:fixed;right:1.25rem;top:5rem;z-index:40;display:flex;flex-direction:column;gap:2px;
  padding:5px;border-radius:16px;background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -12px rgba(0,0,0,.65);
}
[data-theme="light"] .lg-mode{background:rgba(255,255,255,.6)}
.lg-mode button{
  border:0;cursor:pointer;background:none;color:var(--lg-text-soft);border-radius:11px;
  font-family:var(--font-mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.5rem .6rem;min-width:74px;transition:background .2s,color .2s;
}
.lg-mode button:hover{color:var(--lg-text)}
.lg-mode button[aria-pressed="true"]{background:var(--amber);color:#1a1205}
.lg-mode .hint{
  font-family:var(--font-mono);font-size:.46rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lg-text-soft);text-align:center;padding:.35rem .2rem 0;max-width:84px;line-height:1.5;
}
@media (max-width:820px){
  .lg-mode{top:auto;bottom:1rem;right:1rem;left:1rem;flex-direction:row;justify-content:center;border-radius:14px}
  .lg-mode .hint{display:none}
  .lg-mode button{min-width:0;flex:1}
}

/* =========================================================================
   SITE THEME — monochrome + neon green, glass everywhere
   Peg: liquidglassdesign.com "iOS Liquid Glass Effect — Smart Home UI".
   Read from the peg: near-black ground with soft organic depth, very
   translucent panels, WHITE rims, and green reserved strictly for live
   state — toggles, active items, the one CTA. Green as decoration is the
   thing that would cheapen it, so structure stays achromatic.
   Loaded after style.css, so these win at equal specificity.
   ========================================================================= */

/* ---- tokens: dark (the peg) ---- */
:root{
  --bg:#050505; --bg-2:#0d0d0d; --bg-3:#1b1b1b;
  --panel-solid:#0a0a0a; --panel:rgba(255,255,255,.055);
  --text:#f5f5f5; --muted:#a9a9a9; --dim:#898989;
  --amber:#f5e70a; --amber-2:#fff129;      /* the accent is neon yellow */
  --accent-fill:#f5e70a; --accent-ink:#141207;
  --ok:#f5e70a;
  --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.075);
  --amber-glow:rgba(245,231,10,.40);
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px;
  /* glass: more translucent than before, and achromatic */
  --lg-tint:rgba(255,255,255,.055);
  --lg-tint-strong:rgba(255,255,255,.085);
  --lg-blur:20px; --lg-blur-refract:2px; --lg-sat:1.04; --lg-bright:1.02;
  --lg-rim-top:rgba(255,255,255,.42);
  --lg-rim-bottom:rgba(255,255,255,.06);
  --lg-edge:rgba(255,255,255,.34);
  --lg-spec:rgba(255,255,255,.30);
  --lg-lift:0 26px 60px -26px rgba(0,0,0,.85);
  --lg-sheen:linear-gradient(var(--lg-angle,150deg),
     rgba(255,255,255,.13) 0%,rgba(255,255,255,.02) 42%,
     rgba(255,255,255,.005) 62%,rgba(255,255,255,.09) 100%);
  --lg-text:#f5f5f5; --lg-text-soft:rgba(255,255,255,.78);
}
@supports (color:oklch(0 0 0)){
  :root{
    --bg:oklch(.115 0 0); --bg-2:oklch(.16 0 0); --bg-3:oklch(.22 0 0);
    --panel-solid:oklch(.145 0 0);
    --text:oklch(.97 0 0); --muted:oklch(.735 0 0); --dim:oklch(.63 0 0);
    --amber:oklch(.91 .192 105); --amber-2:oklch(.94 .192 105);
    --accent-fill:oklch(.91 .192 105); --ok:oklch(.91 .192 105);
  }
}

/* ---- tokens: light (same material, inverted ground) ---- */
[data-theme="light"]{
  --bg:#f7f7f7; --bg-2:#ededed; --bg-3:#dedede;
  --panel-solid:#ffffff; --panel:rgba(255,255,255,.55);
  --text:#141414; --muted:#585858; --dim:#6c6c6c;
  /* neon green is unreadable as text on white, so text uses an ink green
     and the neon is kept for fills, where 3:1 is the bar and it clears it */
  --amber:#2a7000; --amber-2:#236a00;
  --accent-fill:#84e04f; --accent-ink:#0a0a0a;
  --ok:#2a7000;
  --line:rgba(0,0,0,.14); --line-soft:rgba(0,0,0,.065);
  --amber-glow:rgba(132,224,79,.45);
  --lg-tint:rgba(255,255,255,.44);
  --lg-tint-strong:rgba(255,255,255,.60);
  --lg-blur:22px; --lg-sat:1.02; --lg-bright:1;
  --lg-rim-top:rgba(255,255,255,.95);
  --lg-rim-bottom:rgba(0,0,0,.045);
  --lg-edge:rgba(255,255,255,.85);
  --lg-spec:rgba(255,255,255,.7);
  --lg-lift:0 24px 54px -28px rgba(0,0,0,.28);
  --lg-sheen:linear-gradient(var(--lg-angle,150deg),
     rgba(255,255,255,.75) 0%,rgba(255,255,255,.22) 42%,
     rgba(255,255,255,.14) 62%,rgba(255,255,255,.55) 100%);
  --lg-text:#141414; --lg-text-soft:rgba(20,20,20,.80);
}
@supports (color:oklch(0 0 0)){
  [data-theme="light"]{
    --bg:oklch(.975 0 0); --bg-2:oklch(.945 0 0); --bg-3:oklch(.90 0 0);
    --panel-solid:oklch(1 0 0);
    --text:oklch(.19 0 0); --muted:oklch(.46 0 0); --dim:oklch(.53 0 0);
    --amber:oklch(.48 .15 138); --amber-2:oklch(.46 .15 138);
    --accent-fill:oklch(.82 .20 136); --ok:oklch(.48 .15 138);
  }
}

/* ---- the ground: soft organic depth, no colour ---- */
body::before{background:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.05),transparent 60%)}
[data-theme="light"] body::before{background:radial-gradient(120% 80% at 50% -10%,rgba(0,0,0,.04),transparent 60%)}
.sky{
  background:
    radial-gradient(60% 45% at 62% 30%,rgba(255,255,255,.10),transparent 62%),
    radial-gradient(80% 60% at 28% 70%,rgba(255,255,255,.06),transparent 66%),
    radial-gradient(120% 90% at 50% 110%,#161616,transparent 70%),
    linear-gradient(180deg,#050505 0%,#0a0a0a 55%,#131313 100%);
}
[data-theme="light"] .sky{
  background:
    radial-gradient(60% 45% at 62% 30%,rgba(255,255,255,.9),transparent 62%),
    radial-gradient(80% 60% at 28% 70%,rgba(0,0,0,.05),transparent 66%),
    linear-gradient(180deg,#fbfbfb 0%,#f2f2f2 55%,#e9e9e9 100%);
}
.sky .sun{background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 35%,transparent 70%);filter:blur(18px)}
[data-theme="light"] .sky .sun{background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 40%,transparent 72%)}
.sky .cloud{background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.03) 60%,transparent 78%)}
[data-theme="light"] .sky .cloud{background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,.4) 60%,transparent 78%)}
.sky .stars{opacity:.28}
.sky .horizon{background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.sky .vignette{box-shadow:inset 0 0 200px 40px rgba(0,0,0,.7)}
[data-theme="light"] .sky .vignette{box-shadow:inset 0 0 180px 30px rgba(255,255,255,.8)}
.lg-scene .orb{background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,transparent 72%);opacity:1}
[data-theme="light"] .lg-scene .orb{background:radial-gradient(circle at 40% 40%,rgba(255,255,255,1),rgba(255,255,255,.45) 45%,transparent 72%)}
.lg-scene .horizon{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}

/* all imagery goes monochrome — this is a black and white site */
.scene{filter:grayscale(1) contrast(1.06) brightness(.92)}
[data-theme="light"] .scene{filter:grayscale(1) contrast(1.02) brightness(1.06)}
.card:hover .scene,.b-tile:hover .scene,.a-pane:hover .scene{filter:grayscale(.82) contrast(1.08) brightness(.98)}

/* ---- every surface becomes the material ---- */
.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,.readout,
.disclosure,.footer-status,.faq details,.rules,.a-pane,.a-strip{
  position:relative;isolation:isolate;
  background-color:var(--lg-tint);
  background-image:var(--lg-sheen);
  border:0;
  border-radius:var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 -1px 0 var(--lg-rim-bottom),
    inset 0 0 0 1px rgba(255,255,255,.07),
    var(--lg-lift);
  color:var(--text);
}
[data-theme="light"] .hud,[data-theme="light"] .card,[data-theme="light"] .hotel,
[data-theme="light"] .feature-post,[data-theme="light"] .boarding,[data-theme="light"] .leg,
[data-theme="light"] .telemetry,[data-theme="light"] .readout,[data-theme="light"] .disclosure,
[data-theme="light"] .footer-status,[data-theme="light"] .faq details,[data-theme="light"] .rules{
  box-shadow:
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 0 0 1px rgba(0,0,0,.055),
    var(--lg-lift);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,.readout,
  .disclosure,.footer-status,.faq details,.rules,.a-pane,.a-strip{
    -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
    backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  }
}
html[data-lg-force="solid"] .hud,html[data-lg-force="solid"] .card,html[data-lg-force="solid"] .hotel,
html[data-lg-force="solid"] .feature-post,html[data-lg-force="solid"] .boarding,html[data-lg-force="solid"] .leg,
html[data-lg-force="solid"] .telemetry,html[data-lg-force="solid"] .readout,html[data-lg-force="solid"] .disclosure,
html[data-lg-force="solid"] .footer-status,html[data-lg-force="solid"] .faq details,html[data-lg-force="solid"] .rules{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  background-image:none !important;background-color:var(--panel-solid) !important;
}

/* the peg has no corner brackets — rounded frosted panels only.
   Sharp sci-fi brackets read as dated next to this material. */
.hud::before,.hud::after,.hud .corner,.hud-tick,
.hero .ruler,.page-head .ruler,.hero .frame,.hero .coord{display:none !important}
.card,.feature-post{overflow:hidden}
.hotel{overflow:visible}
.card{overflow:visible}
.card .art,.feature-post .art{overflow:hidden}
.card{border-radius:var(--r-lg)}
.card .art{border-radius:var(--r-md);margin:10px 10px 0;overflow:hidden}
.card .art::after{background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.72))}
[data-theme="light"] .card .art::after{background:linear-gradient(180deg,transparent 52%,rgba(255,255,255,.55))}
.hotel .art{border-radius:var(--r-md)}
.feature-post .art::after{background:linear-gradient(90deg,transparent 42%,rgba(0,0,0,.55))}
[data-theme="light"] .feature-post .art::after{background:linear-gradient(90deg,transparent 46%,rgba(255,255,255,.7))}

/* ---- nav: a floating glass bar ---- */
.nav{
  background:none;border-bottom:0;padding:.7rem 0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.nav .nav-inner{
  border-radius:999px;padding:0 .6rem 0 1rem;height:60px;
  background-color:var(--lg-tint);background-image:var(--lg-sheen);
  box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(255,255,255,.07),var(--lg-lift);
  -webkit-backdrop-filter:blur(22px) saturate(var(--lg-sat));backdrop-filter:blur(22px) saturate(var(--lg-sat));
}
[data-theme="light"] .nav .nav-inner{box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(0,0,0,.05),var(--lg-lift)}
.nav.scrolled .nav-inner{height:52px}
.nav-links a.active::after{background:var(--accent-fill);box-shadow:0 0 10px var(--amber-glow)}
.brand .mark{border:0;border-radius:12px;background:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
[data-theme="light"] .brand .mark{background:rgba(0,0,0,.05)}
.brand .mark svg{stroke:var(--text)}
.brand .tag{color:var(--muted)}
@media (max-width:900px){
  .nav .nav-inner{border-radius:26px}
  .nav-links{top:74px;border-radius:22px;border:0;padding:.6rem 1rem 1rem;
    background-color:var(--panel-solid);box-shadow:var(--lg-lift)}
}

/* ---- controls ---- */
.btn,.chip,.lg-btn{border-radius:999px}
.btn{
  border:0;color:var(--text);
  background-color:var(--lg-tint-strong);background-image:var(--lg-sheen);
  box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-1px);background-color:rgba(255,255,255,.14);color:var(--text);box-shadow:inset 0 1px 0 var(--lg-rim-top),0 10px 24px -12px rgba(0,0,0,.8)}
[data-theme="light"] .btn{box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(0,0,0,.07)}
[data-theme="light"] .btn:hover{background-color:rgba(255,255,255,.85)}
.btn.primary,.lg-btn.solid{
  background-color:var(--accent-fill);background-image:none;color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 26px -10px var(--amber-glow);
}
.btn.primary:hover,.lg-btn.solid:hover{background-color:var(--accent-fill);filter:brightness(1.08);color:var(--accent-ink)}
.btn.primary svg{stroke:var(--accent-ink)}
.btn.ghost{color:var(--text)}
.chip{
  border:0;color:var(--muted);background-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
[data-theme="light"] .chip{background-color:rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.chip:hover{color:var(--text);border:0}
.chip.active,.filters .chip.active{background-color:var(--accent-fill);color:var(--accent-ink);border:0}
.field input,.field select,.field textarea{
  border:0;border-radius:var(--r-sm);background-color:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);color:var(--text);
}
[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .field textarea{
  background-color:rgba(0,0,0,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.field input:focus,.field select:focus,.field textarea:focus{
  background-color:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px var(--accent-fill),0 0 0 3px var(--amber-glow)
}
.theme-toggle,.nav-toggle{border:0;border-radius:50%;background-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);color:var(--text)}
[data-theme="light"] .theme-toggle,[data-theme="light"] .nav-toggle{background-color:rgba(0,0,0,.05)}
.theme-toggle:hover,.nav-toggle:hover{background-color:rgba(255,255,255,.16)}

/* ---- green only where something is live ---- */
.dot,.dot.ok{background:var(--accent-fill);box-shadow:0 0 10px var(--amber-glow)}
.label{color:var(--muted)}
.icon-box{border:0;border-radius:11px;background-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);color:var(--text)}
[data-theme="light"] .icon-box{background-color:rgba(0,0,0,.05)}
.card .price,.hotel .foot .price,.readout .v,.telemetry .v,.leg .row .t,.leg .leg-head b,.a-leg .t{color:var(--amber-2)}
.hotel .score i{background:var(--accent-fill);box-shadow:0 0 8px var(--amber-glow)}
.route-map .route{stroke:var(--accent-fill)}
.route-map .plane{fill:var(--accent-fill)}
.route-map .grid-dots{fill:rgba(255,255,255,.16)}
[data-theme="light"] .route-map .grid-dots{fill:rgba(0,0,0,.16)}
.route-map .pin text{stroke:none;paint-order:normal}
.radar::before{background:conic-gradient(from 0deg,var(--amber-glow),rgba(245,231,10,.10) 50deg,transparent 80deg)}
.radar::after{background:var(--accent-fill)}
.progress{background:var(--accent-fill);box-shadow:0 0 12px var(--amber-glow)}
.ticker{background:none;border-color:var(--line-soft)}
.ticker-track span::before{background:var(--muted)}
.ticker-track span b{color:var(--amber-2)}
.step .num{border:0;background-color:var(--lg-tint-strong);color:var(--amber-2);
  box-shadow:inset 0 1px 0 var(--lg-rim-top),0 0 0 6px var(--bg)}
.steps::before{background-image:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 14px)}
.avatar{border:0;background:rgba(255,255,255,.08);color:var(--amber-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.barcode{background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 4px,var(--text) 4px 5px,transparent 5px 9px,var(--text) 9px 12px,transparent 12px 14px);opacity:.5}
.boarding .notch{background:var(--bg);border:0;box-shadow:inset 0 0 0 1px var(--line-soft)}
.boarding::before{border-left:2px dashed var(--line)}
.boarding .r{background:rgba(255,255,255,.03)}
[data-theme="light"] .boarding .r{background:rgba(0,0,0,.02)}
.qr{border:0;box-shadow:inset 0 0 0 1px var(--line-soft)}
.post-body blockquote{border-left:1px solid var(--accent-fill);background:rgba(245,231,10,.07);border-radius:var(--r-sm)}
.callout{border:0;border-radius:var(--r-md);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-soft)}
[data-theme="light"] .callout{background:rgba(0,0,0,.03)}
.post-body h2 .num{border:0;border-radius:8px;background:rgba(255,255,255,.08);color:var(--amber-2)}
.post-body h2:hover .num{background:var(--accent-fill);color:var(--accent-ink)}
.toc a.active::before{background:var(--accent-fill);box-shadow:0 0 8px var(--amber-glow)}
.aff-note::before{border-color:var(--muted)}
.rules li b::before{border-color:var(--accent-fill)}
.timeline{border-left:1px dashed var(--line)}
.timeline .item::before{background:var(--bg);border-color:var(--accent-fill)}
.pagination a{border:0;border-radius:12px;background:rgba(255,255,255,.06);color:var(--muted)}
[data-theme="light"] .pagination a{background:rgba(0,0,0,.05)}
.pagination a.active,.pagination a:hover{background:var(--accent-fill);color:var(--accent-ink)}
.footer{border-top:1px solid var(--line-soft);background:none}
.disclosure,.footer-status{border-radius:var(--r-md)}
.faq details{border-radius:var(--r-md);padding:1rem 1.2rem}
.faq summary::after{background:linear-gradient(var(--accent-fill),var(--accent-fill)) center/12px 1px no-repeat,linear-gradient(var(--accent-fill),var(--accent-fill)) center/1px 12px no-repeat}
.faq details[open] summary::after{background:linear-gradient(var(--accent-fill),var(--accent-fill)) center/12px 1px no-repeat}
.rules{padding:0 1.4rem;border-top:0}
.rules li{border-bottom:1px solid var(--line-soft)}
.rules li:last-child{border-bottom:0}
.leg,.telemetry,.readout{border-radius:var(--r-md)}
.leg::before{display:none}
.wing{display:none}
.scene::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
::selection{background:var(--accent-fill);color:var(--accent-ink)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.35))}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.3))}
a{color:var(--amber-2)}
a:hover{color:var(--text)}


/* ---- route map, themed ---- */
.route-map svg{color:var(--text)}
.route-map .land{fill:url(#land);stroke:var(--line);stroke-width:1}
.route-map .mesh{fill:none;stroke:var(--line-soft)}
.route-map .pin-dot{fill:var(--accent-fill)}
.route-map .pin-dot.final{fill:var(--accent-fill);r:5}
.route-map .pin-halo{fill:none;stroke:var(--accent-fill);stroke-opacity:.45}
.route-map .pin-halo.final{stroke-opacity:.8}
.route-map .pin circle.ring{stroke:var(--accent-fill)}
.route-map .pin-label{fill:var(--text)}
.route-map .pin-sub{fill:var(--muted)}
.route-map .reticle{stroke:var(--accent-fill)}

/* ---- material control: discreet, out of the content's way ---- */
.lg-mode{
  top:auto;bottom:1.1rem;right:1.1rem;flex-direction:row;flex-wrap:wrap;
  width:auto;max-width:min(320px,calc(100vw - 2.2rem));gap:3px;padding:4px;border-radius:14px;
  background-color:var(--lg-tint-strong);background-image:var(--lg-sheen);
  box-shadow:inset 0 1px 0 var(--lg-rim-top),var(--lg-lift);
  opacity:.35;transition:opacity .25s;
}
.lg-mode:hover,.lg-mode:focus-within{opacity:1}
.lg-mode button{min-width:0;padding:.4rem .6rem;font-size:.5rem;border-radius:10px}
.lg-mode .hint{flex:1 1 100%;max-width:none;font-size:.44rem;padding:.3rem .2rem 0}
[data-theme="light"] .lg-mode{box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(0,0,0,.06),var(--lg-lift)}
@media (max-width:820px){.lg-mode{left:auto;right:.8rem;bottom:.8rem;opacity:.9}}
/* sample B keeps its controls in the rail */
.b-rail .lg-mode{position:static;opacity:1;max-width:none;background-image:none}


/* the one live action on the page carries the accent — same rule the peg
   uses for its active toggles: green means "this does something now" */
a[data-agoda],.hotel .foot .btn{
  background-color:var(--accent-fill) !important;background-image:none !important;
  color:var(--accent-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px -10px var(--amber-glow) !important;
}
a[data-agoda]:hover,.hotel .foot .btn:hover{filter:brightness(1.08)}
.hotel .foot .btn::before{border-color:var(--accent-fill)}

@media (max-width:820px){.lg-mode{opacity:.45;padding:3px}.lg-mode button{padding:.35rem .45rem;font-size:.46rem}.lg-mode .hint{display:none}}


/* =========================================================================
   PEG PASS — closer to the reference UI
   Two things drive this block:
   1. TYPE. The peg uses one clean geometric sans for everything, sentence
      case, tight tracking. The old stack was a squared DIN display + a
      terminal mono in wide uppercase, which reads as cockpit instrumentation,
      not as this material. Collapsed to a single variable family: Manrope.
   2. LIGHT THEME ACCENT is now neon blue, not green.
   ========================================================================= */

@font-face{
  font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-var.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Manrope Fallback";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");
  size-adjust:99%;ascent-override:98%;descent-override:26%;
}
:root{
  --font-display:"Manrope","Manrope Fallback","Segoe UI",system-ui,sans-serif;
  --font-body:"Manrope","Manrope Fallback","Segoe UI",system-ui,sans-serif;
  --font-mono:"Manrope","Manrope Fallback","Segoe UI",system-ui,sans-serif;
  --font-hud:"Manrope","Manrope Fallback","Segoe UI",system-ui,sans-serif;
  /* the peg is soft-cornered throughout */
  --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px;
}

/* ---- headings: geometric, tight, not condensed ---- */
h1,h2,h3,h4,.lg-page h1,.lg-page h2,.lg-page h3{
  font-weight:700;letter-spacing:-.022em;line-height:1.08;
}
h1{font-size:clamp(2.3rem,1rem + 4.4vw,4.1rem)}
h2{font-size:clamp(1.6rem,1rem + 2.1vw,2.4rem)}
h3{font-size:1.22rem;letter-spacing:-.014em}
body{font-size:15px;line-height:1.62;letter-spacing:-.005em}
.lead,.hero-copy .lead{font-weight:400;letter-spacing:-.008em}

/* ---- labels: sentence case, quiet. the wide-tracked mono caps were the
       single biggest thing making this look like a different site ---- */
.label,.nav-links a,.btn,.chip,.crumbs,.post-meta,.footer :is(h4,.fh),.footer-bottom,
.kv .k,.telemetry .k,.readout .k,.leg .row .k,.leg .leg-head small,.a-readout .k,
.card .art .tag,.card .art .code,.card .link,.hotel .info .loc,.hotel .foot .price small,
.card .price small,.aff-note,.footer-status,.statusbar,.b-count,.b-chip,.b-nav a,
.b-tile .code,.b-tile .who,.b-mini a,.lg-label,.lg-proof,.partner-chip,.console-head .ready,
.pagination a,.timeline .item .yr,.toc a i,.post-body h2 .num,.brand .tag,.nav-status{
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:.006em;
}
.label,.lg-label{font-size:.78rem;font-weight:600;color:var(--muted);opacity:1}
.nav-links a{font-size:.86rem;font-weight:500;letter-spacing:-.004em}
.brand .name{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;text-transform:none;font-size:1.06rem}
.brand .tag{font-size:.7rem;font-weight:500;letter-spacing:-.002em;color:var(--muted);opacity:1}
.btn,.lg-btn{font-size:.84rem;font-weight:600;letter-spacing:-.004em;padding:.78rem 1.35rem}
.btn.sm{font-size:.78rem;padding:.56rem 1rem}
.chip,.b-chip{font-size:.79rem;font-weight:500;padding:.5rem .95rem}
.crumbs,.post-meta,.footer-bottom,.aff-note,.footer-status{font-size:.8rem;font-weight:500}
.kv .k,.telemetry .k,.readout .k,.leg .row .k,.a-readout .k{font-size:.76rem;font-weight:500;color:var(--muted)}
.card .art .tag{font-size:.72rem;font-weight:600;border:0;border-radius:999px;padding:.32rem .7rem;
  background:rgba(0,0,0,.45);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.card .art .code{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.85)}
.card .link,.b-tile .who,.hotel .info .loc{font-size:.76rem;font-weight:500}
.card:hover .link{letter-spacing:.006em}
.footer :is(h4,.fh){font-size:.82rem;font-weight:700;color:var(--text)}
.footer ul a,.nav-status{font-size:.86rem}
.post-body{font-size:1.02rem}
.post-body h2 .num{font-size:.8rem;font-weight:700;padding:.22rem .5rem}
.timeline .item .yr{font-size:.8rem;font-weight:700;color:var(--amber-2)}
.faq summary{font-weight:700;letter-spacing:-.014em}
.pagination a{font-size:.86rem;font-weight:600}

/* numerals: one family, tabular, tight — the peg's big "22°" look */
.card .price,.hotel .foot .price,.readout .v,.telemetry .v,.leg .row .t,.leg .leg-head b,
.stats .big,.step .num,.a-leg .t,.a-port .big,.b-tile .rate,#utcClock,.hud-num{
  font-family:var(--font-hud);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.leg .leg-head b{font-size:1.3rem}
.leg .row .t{font-size:1.35rem}
.readout .v{font-size:1.9rem}
.step .num{font-size:1.4rem;font-weight:700}

/* ---- softer, rounder, more layered ---- */
.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,.readout,
.disclosure,.footer-status,.faq details,.rules,.a-pane,.a-strip{border-radius:var(--r-lg)}
.card .art,.hotel .art,.b-tile .view{border-radius:var(--r-md)}
.icon-box{border-radius:13px;width:36px;height:36px;flex-basis:36px}
.field input,.field select,.field textarea{border-radius:var(--r-sm);font-family:var(--font-body);
  font-size:.98rem;font-weight:500;letter-spacing:-.006em}
.field label{font-family:var(--font-body);text-transform:none;letter-spacing:.006em;font-size:.78rem;font-weight:500}

/* ---- LIGHT THEME: neon blue ---- */
[data-theme="light"]{
  --amber:#0064b6;            /* ink blue — text, 5.6:1 on the page ground */
  --amber-2:#0058a3;          /* deeper, for emphasis: 6.7:1 */
  --accent-fill:#0095ff;      /* neon blue — fills only */
  --accent-ink:#04121f;       /* dark ink on the neon fill: 6.3:1 */
  --ok:#0064b6;
  --amber-glow:rgba(0,149,255,.42);
}
@supports (color:oklch(0 0 0)){
  [data-theme="light"]{
    --amber:oklch(.50 .152 252);
    --amber-2:oklch(.46 .14 252);
    --accent-fill:oklch(.66 .188 250);
  }
}
[data-theme="light"] .post-body blockquote{border-left-color:var(--accent-fill);background:rgba(0,149,255,.07)}
[data-theme="light"] .radar::before{background:conic-gradient(from 0deg,var(--amber-glow),rgba(0,149,255,.10) 50deg,transparent 80deg)}
[data-theme="light"] .b-promo{background:rgba(0,149,255,.12)}

/* ---- peg detail: pill toggle, for anything boolean ---- */
.lg-switch{appearance:none;width:44px;height:26px;border-radius:999px;cursor:pointer;position:relative;
  background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:background .25s cubic-bezier(.2,.8,.2,1);border:0;flex:0 0 44px}
.lg-switch::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.lg-switch[aria-checked="true"]{background:var(--accent-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 18px -4px var(--amber-glow)}
.lg-switch[aria-checked="true"]::after{transform:translateX(18px)}
[data-theme="light"] .lg-switch{background:rgba(0,0,0,.10)}

/* material control picks up the new type too */
.lg-mode button{font-family:var(--font-body);text-transform:none;letter-spacing:.004em;font-size:.72rem;font-weight:600}
.lg-mode .hint{font-family:var(--font-body);text-transform:none;letter-spacing:.004em;font-size:.66rem}

/* remaining uppercase surfaces from the old cockpit styling */
.console-head .ttl h3,.mini-kv .v,.mini-kv .k,.a-port .eyebrow,.a-port .big,
.b-logo b,.b-logo span,.hotel .foot .price small,.readout .k,.telemetry .k,
.leg .row .k,.footer :is(h4,.fh),.step h3,.b-tile .code,.lg-proof,.a-readout .k,
.a-search .when,.a-nav a,.a-brand b,.b-search input,.b-nav a,.b-mini a{
  text-transform:none;letter-spacing:.004em;
}
.console-head .ttl h3{font-size:1.15rem;font-weight:700;letter-spacing:-.018em}
.mini-kv .v{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.014em}
.mini-kv .k{font-size:.74rem;font-weight:500;color:var(--muted)}
.a-brand b,.b-logo b{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.a-port .big{letter-spacing:-.02em}
.statusbar,.footer-bottom{letter-spacing:.004em;text-transform:none}


/* =========================================================================
   NATIONAL GEOGRAPHIC YELLOW + MAX DEPTH
   One accent across both themes: #FFCC00, oklch(.865 .177 90.4).
   It carries 13.5:1 on the black ground and takes black type at 12.4:1 —
   which is the NatGeo identity itself: a yellow block with black type.
   It cannot be text on white (1.4:1), so the light theme keeps the pure
   yellow for FILLS and uses a darker same-hue gold for TYPE.
   ========================================================================= */

:root{
  --amber:#ffcc00; --amber-2:#ffda73;
  --accent-fill:#ffcc00; --accent-ink:#141207;
  --ok:#ffcc00;
  --amber-glow:rgba(255,204,0,.42);
}
@supports (color:oklch(0 0 0)){
  :root{
    --amber:oklch(.865 .177 90.4); --amber-2:oklch(.90 .129 90.4);
    --accent-fill:oklch(.865 .177 90.4); --ok:oklch(.865 .177 90.4);
  }
}
[data-theme="light"]{
  --amber:#7a6000;            /* type: 5.6:1 on the page, 6.0:1 on a card */
  --amber-2:#604a00;          /* heavier emphasis: 7.9:1 */
  --accent-fill:#ffcc00;      /* the NatGeo block itself */
  --accent-ink:#141207;       /* black type on the block: 12.4:1 */
  --ok:#7a6000;
  --amber-glow:rgba(255,204,0,.45);
}
@supports (color:oklch(0 0 0)){
  [data-theme="light"]{
    --amber:oklch(.50 .105 90.4); --amber-2:oklch(.42 .09 90.4);
    --accent-fill:oklch(.865 .177 90.4);
  }
}
[data-theme="light"] .post-body blockquote{border-left-color:var(--accent-fill);background:rgba(255,204,0,.14)}
[data-theme="light"] .radar::before{background:conic-gradient(from 0deg,var(--amber-glow),rgba(255,204,0,.12) 50deg,transparent 80deg)}
[data-theme="light"] .b-promo{background:rgba(255,204,0,.20)}
.post-body blockquote{background:rgba(255,204,0,.08)}
.radar::before{background:conic-gradient(from 0deg,var(--amber-glow),rgba(255,204,0,.10) 50deg,transparent 80deg)}

/* the brand device: a yellow block behind the mark */
.brand .mark{background:var(--accent-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px -6px var(--amber-glow)}
.brand .mark svg{stroke:var(--accent-ink)}
[data-theme="light"] .brand .mark{background:var(--accent-fill)}

/* =========================================================================
   DEPTH SYSTEM
   Four elevation steps. Each is a stack: a tight contact shadow, a mid
   shadow that gives the object its weight, and a wide ambient one for the
   room it sits in. A single blurred shadow reads as a sticker; three
   layered ones read as an object above a surface.
   ========================================================================= */
:root{
  --e1:0 1px 2px rgba(0,0,0,.34), 0 3px 8px -2px rgba(0,0,0,.28);
  --e2:0 2px 4px rgba(0,0,0,.34), 0 10px 20px -6px rgba(0,0,0,.40), 0 22px 44px -16px rgba(0,0,0,.50);
  --e3:0 3px 6px rgba(0,0,0,.36), 0 16px 32px -8px rgba(0,0,0,.46), 0 40px 80px -24px rgba(0,0,0,.62);
  --e4:0 6px 12px rgba(0,0,0,.40), 0 28px 56px -12px rgba(0,0,0,.55), 0 70px 120px -34px rgba(0,0,0,.75);
  --rim:inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.08);
  --rim-lo:inset 0 -1px 0 rgba(0,0,0,.35);
}
[data-theme="light"]{
  --e1:0 1px 2px rgba(24,20,8,.10), 0 3px 8px -2px rgba(24,20,8,.09);
  --e2:0 2px 4px rgba(24,20,8,.10), 0 10px 20px -6px rgba(24,20,8,.13), 0 22px 44px -16px rgba(24,20,8,.16);
  --e3:0 3px 6px rgba(24,20,8,.12), 0 16px 32px -8px rgba(24,20,8,.15), 0 40px 80px -24px rgba(24,20,8,.20);
  --e4:0 6px 12px rgba(24,20,8,.14), 0 28px 56px -12px rgba(24,20,8,.20), 0 70px 120px -34px rgba(24,20,8,.26);
  --rim:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(24,20,8,.06);
  --rim-lo:inset 0 -1px 0 rgba(24,20,8,.06);
}

/* every surface now sits ABOVE the page rather than on it */
.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,.readout,
.disclosure,.faq details,.rules,.a-pane,.a-strip,.b-tile,.b-rail{
  box-shadow:var(--rim),var(--rim-lo),var(--e3);
}
.footer-status,.callout{box-shadow:var(--rim),var(--e1)}
.nav .nav-inner{box-shadow:var(--rim),var(--e2)}
.nav.scrolled .nav-inner{box-shadow:var(--rim),var(--e3)}

/* ---- the pop: real perspective, so hover pushes toward the viewer ---- */
.grid,.stats,.b-grid,.a-grid,.two-col,.contact-grid{perspective:1500px;perspective-origin:50% 40%}
.card,.hotel,.b-tile,.a-pane,.feature-post{
  transform-style:preserve-3d;
  transition:transform .48s cubic-bezier(.2,.8,.2,1),box-shadow .48s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.card:hover,.b-tile:hover,.a-pane:hover{
  transform:translate3d(0,-14px,64px);
  box-shadow:var(--rim),var(--rim-lo),var(--e4);
  z-index:5;
}
.hotel:hover{
  transform:translate3d(0,-8px,36px);
  box-shadow:var(--rim),var(--rim-lo),var(--e4);
  z-index:5;
}
.feature-post:hover{transform:translate3d(0,-8px,28px);box-shadow:var(--rim),var(--rim-lo),var(--e4)}

/* a contact shadow on the ground under each card — the thing that actually
   sells "floating" rather than "glowing" */
.card::after,.hotel::after,.b-tile::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:22px;z-index:-1;
  border-radius:50%;background:rgba(0,0,0,.55);filter:blur(14px);
  opacity:.5;transition:opacity .48s,transform .48s,filter .48s;pointer-events:none;
}
[data-theme="light"] .card::after,[data-theme="light"] .hotel::after,[data-theme="light"] .b-tile::after{
  background:rgba(24,20,8,.28)
}
.card:hover::after,.hotel:hover::after,.b-tile:hover::after{
  opacity:.85;transform:translateY(10px) scaleX(1.06);filter:blur(20px);
}

/* the media inside a card gets its own plane, so the card reads as layered
   rather than as one flat slab */
.card .art,.b-tile .view,.a-pane .view{
  box-shadow:0 2px 6px rgba(0,0,0,.35),0 10px 22px -8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.07);
  transform:translateZ(18px);
}
[data-theme="light"] .card .art,[data-theme="light"] .b-tile .view{
  box-shadow:0 2px 6px rgba(24,20,8,.12),0 10px 22px -8px rgba(24,20,8,.16),inset 0 0 0 1px rgba(24,20,8,.05);
}
.card .body,.b-tile .meta,.b-tile .who{transform:translateZ(8px)}
.card .art .tag{transform:translateZ(24px)}

/* buttons and pills lift too */
.btn,.lg-btn,.chip{box-shadow:var(--rim),var(--e1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background-color .3s}
.btn:hover,.lg-btn:hover{transform:translateY(-3px);box-shadow:var(--rim),var(--e2)}
.btn:active,.lg-btn:active{transform:translateY(-1px);box-shadow:var(--rim),var(--e1)}
.btn.primary,.lg-btn.solid{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--e2),0 10px 30px -12px var(--amber-glow);
}
.btn.primary:hover,.lg-btn.solid:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--e3),0 18px 44px -14px var(--amber-glow);
}
.icon-box,.step .num,.avatar{box-shadow:var(--rim),var(--e1)}

/* ---- sections read as distinct planes ---- */
.section{padding:7rem 0;position:relative}
.sec-head{margin-bottom:2.8rem}
.sec-head h2{position:relative;display:inline-block}
/* a NatGeo-style yellow rule under each section heading */
.sec-head h2::after{
  content:"";position:absolute;left:0;bottom:-.55rem;width:46px;height:4px;border-radius:2px;
  background:var(--accent-fill);box-shadow:0 2px 10px -2px var(--amber-glow);
}
/* alternating ground so consecutive sections separate without a hard border */
.section:nth-of-type(even)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 50%,rgba(255,255,255,.035),transparent 72%);
}
[data-theme="light"] .section:nth-of-type(even)::before{
  background:radial-gradient(90% 60% at 50% 50%,rgba(24,20,8,.035),transparent 72%);
}

@media (prefers-reduced-motion:reduce){
  .card,.hotel,.b-tile,.a-pane,.feature-post,.btn,.lg-btn{transition:none}
  .card:hover,.b-tile:hover,.a-pane:hover,.hotel:hover,.feature-post:hover{transform:none}
  .btn:hover,.lg-btn:hover{transform:none}
}
/* the depth stack is expensive on weak hardware — flatten it there */
html.lg-lowpower .card::after,html.lg-lowpower .hotel::after,html.lg-lowpower .b-tile::after{display:none}
html.lg-lowpower .card:hover,html.lg-lowpower .b-tile:hover{transform:translateY(-6px)}


/* =========================================================================
   NATIONAL GEOGRAPHIC PASS
   Four things carry that identity, and only one of them is the yellow:
     1. THE PORTAL. A yellow rectangle you look through. It is a frame, not
        a fill, and it is the single most recognisable device they own.
     2. PHOTOGRAPHY AS THE SUBSTRATE. The picture is the page; interface
        sits on top of it. This is also what liquid glass is FOR — a
        translucent panel over a flat gradient has nothing to refract, but
        over a photograph it comes alive. The two ideas want each other.
     3. EDITORIAL TYPE. A sturdy journalistic grotesque for headlines and a
        proper reading serif for prose. The soft geometric UI face stays,
        but only for chrome — buttons, labels, the glass furniture.
     4. THE FIELD RECORD. Captions with credits, coordinates, datelines.
        The site already had this instinct in its route and telemetry work.
   ========================================================================= */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/archivo-var.woff2") format("woff2-variations")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/newsreader-var.woff2") format("woff2-variations")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("../fonts/newsreader-italic-var.woff2") format("woff2-variations")}

:root{
  --font-display:"Archivo","Manrope","Segoe UI",system-ui,sans-serif;   /* headlines */
  --font-body:"Manrope","Segoe UI",system-ui,sans-serif;                /* chrome + UI */
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;            /* editorial prose */
  --font-hud:"Archivo","Manrope",system-ui,sans-serif;                  /* numerals */
  --ng-yellow:#ffcc00;
}

/* headlines: sturdier, tighter, more journalistic than the geometric face */
h1,h2,h3,h4,.lg-page h1,.lg-page h2,.lg-page h3{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.028em;line-height:1.04;
}
h1{font-size:clamp(2.5rem,1rem + 4.8vw,4.5rem);font-weight:800}
h2{font-size:clamp(1.75rem,1rem + 2.3vw,2.7rem)}
.post-hero h1,.page-head h1{font-weight:800;letter-spacing:-.03em}

/* ---- 1. THE PORTAL ---------------------------------------------------- */
/* A yellow rectangle you look through. Inset from the viewport edge, sitting
   above the photograph and below the glass. Never a fill. */
.ng-portal{
  position:absolute;z-index:3;pointer-events:none;
  inset:clamp(14px,2.2vw,34px);
  border:clamp(5px,.62vw,9px) solid var(--ng-yellow);
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 18px 50px -24px rgba(0,0,0,.7);
}
.hero .ng-portal{inset:clamp(16px,2.4vw,40px)}
@media (max-width:700px){.ng-portal{inset:10px;border-width:5px}}
/* the dateline that rides on the portal's top edge, magazine-style */
.ng-dateline{
  position:absolute;z-index:4;top:calc(clamp(16px,2.4vw,40px) - .78rem);left:clamp(52px,7vw,90px);
  background:var(--ng-yellow);color:#141207;
  font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.22rem .7rem;border-radius:2px;white-space:nowrap;
}
@media (max-width:700px){.ng-dateline{left:34px;font-size:.64rem}}

/* the same device, small, as a hover state on cards */
.card .art::before,.b-tile .view::before{
  content:"";position:absolute;inset:9px;z-index:3;pointer-events:none;
  border:3px solid var(--ng-yellow);border-radius:2px;
  opacity:0;transform:scale(1.04);transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1);
}
.card:hover .art::before,.b-tile:hover .view::before{opacity:1;transform:scale(1)}

/* ---- 2. PHOTOGRAPHY AS THE SUBSTRATE ---------------------------------- */
/* Until the real plates land (PROMPTS.md), the placeholder is built to read
   as a photograph rather than a gradient: haze bands, a light source, and
   layered ridge silhouettes with aerial perspective. */
.hero .sky::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* far ridge */
    linear-gradient(to top,transparent 26%,rgba(255,255,255,.055) 26.2%,transparent 27%),
    /* mid ridge */
    radial-gradient(140% 44% at 18% 74%,rgba(255,255,255,.07),transparent 60%),
    radial-gradient(120% 40% at 72% 78%,rgba(255,255,255,.05),transparent 62%),
    /* valley haze */
    linear-gradient(to top,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 14%,transparent 34%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 46%,transparent 78%);
  mask-image:linear-gradient(to top,#000 0%,#000 46%,transparent 78%);
}
[data-theme="light"] .hero .sky::after{
  background:
    linear-gradient(to top,transparent 26%,rgba(24,20,8,.07) 26.2%,transparent 27%),
    radial-gradient(140% 44% at 18% 74%,rgba(24,20,8,.09),transparent 60%),
    radial-gradient(120% 40% at 72% 78%,rgba(24,20,8,.06),transparent 62%),
    linear-gradient(to top,rgba(24,20,8,.10) 0%,rgba(24,20,8,.03) 14%,transparent 34%);
}
/* imagery gets more room and more contrast — the picture is the point */
.card .art{aspect-ratio:4/3.4}
.feature-post .art{min-height:420px}
.scene{filter:grayscale(1) contrast(1.16) brightness(.86)}
[data-theme="light"] .scene{filter:grayscale(1) contrast(1.10) brightness(1.02)}
.card:hover .scene,.b-tile:hover .scene,.a-pane:hover .scene{filter:grayscale(1) contrast(1.22) brightness(.96)}

/* ---- 3. EDITORIAL PROSE ------------------------------------------------ */
.post-body p,.post-body li,.post-body blockquote{font-family:var(--font-serif)}
.post-body{font-size:1.14rem;line-height:1.72;letter-spacing:.002em}
.post-body p{margin:0 0 1.35rem}
/* the opening paragraph is a deck, magazine-style */
.post-body > p:first-of-type{
  font-size:1.36rem;line-height:1.5;font-weight:400;color:var(--text);
  letter-spacing:-.012em;margin-bottom:1.7rem;
}
/* drop cap on the deck */
.post-body > p:first-of-type::first-letter{
  float:left;font-family:var(--font-display);font-weight:800;font-size:3.5em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--ng-yellow);
}
[data-theme="light"] .post-body > p:first-of-type::first-letter{color:var(--amber-2)}
.post-body blockquote{
  font-family:var(--font-serif);font-style:italic;font-size:1.5rem;line-height:1.38;font-weight:400;
  border-left:0;border-top:3px solid var(--ng-yellow);border-radius:0;
  background:none;padding:1.3rem 0 0;margin:2.4rem 0;
}
.post-body h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.028em}
.lead,.page-head p.lead,.post-hero .lead{font-family:var(--font-serif);font-size:1.24rem;line-height:1.5;letter-spacing:-.006em}
.hero-copy .lead{font-family:var(--font-serif);font-size:1.2rem;line-height:1.52}

/* ---- 4. THE FIELD RECORD ---------------------------------------------- */
/* captions carry a credit line, the way a magazine plate does */
.post-body figcaption,.ng-caption{
  font-family:var(--font-body);font-size:.82rem;font-weight:500;line-height:1.5;
  letter-spacing:.002em;text-transform:none;color:var(--muted);
  margin-top:.7rem;padding-left:.85rem;border-left:3px solid var(--ng-yellow);
}
.ng-credit{
  display:block;margin-top:.28rem;font-size:.72rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);
}
/* a coordinate stamp for any plate */
.ng-coord{
  position:absolute;left:.85rem;bottom:.7rem;z-index:4;
  font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
/* byline block */
.ng-byline{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  font-family:var(--font-body);font-size:.86rem;font-weight:500;color:var(--muted);
}
.ng-byline b{color:var(--text);font-weight:700}
.ng-byline .sep{width:3px;height:3px;border-radius:50%;background:var(--dim)}

/* section eyebrow as a yellow tab, the magazine department marker */
.sec-head .label,.page-head .label{
  display:inline-block;background:var(--ng-yellow);color:#141207;
  font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .6rem;border-radius:2px;margin-bottom:.9rem;
}
/* the heading rule is redundant once the tab exists */
.sec-head h2::after{display:none}

/* numerals keep the display face */
.card .price,.hotel .foot .price,.readout .v,.telemetry .v,.leg .row .t,.leg .leg-head b,
.step .num,.b-tile .rate,#utcClock{font-family:var(--font-hud);font-weight:700;letter-spacing:-.02em}

@media (max-width:700px){
  .post-body{font-size:1.06rem}
  .post-body > p:first-of-type{font-size:1.18rem}
  .post-body blockquote{font-size:1.25rem}
}

/* content must clear the portal: the frame is a window edge, not a decoration
   laid over the type */
.hero .hero-grid,
.page-head .content,
.post-hero .content{padding-inline:clamp(22px,3.4vw,52px)}
.hero .hero-grid{padding-block:clamp(56px,7vw,92px) clamp(40px,5vw,64px)}
.page-head{padding-top:clamp(70px,7vw,104px);padding-bottom:clamp(48px,5vw,72px)}
.post-hero .content{padding-block:clamp(56px,6vw,80px) clamp(36px,4vw,56px)}
/* the dateline sits on the frame's top edge, clear of the nav */
.hero .ng-dateline{top:calc(clamp(16px,2.4vw,40px) - .82rem)}
.page-head .ng-dateline,.post-hero .ng-dateline{top:calc(clamp(14px,2.2vw,34px) - .78rem)}

/* NatGeo puts the yellow in the FRAME and keeps the type white. With the
   portal carrying the accent, a yellow headline is one yellow too many. */
.hero-copy h1 em{color:var(--text);background:none;-webkit-text-fill-color:currentColor}
[data-theme="light"] .hero-copy h1 em{color:var(--text)}

/* Light theme: the pure yellow is a FILL colour. As a 1.5px line on a white
   ground it measures 1.4:1 and disappears, so map graphics — which carry
   meaning and need 3:1 — use the dark gold instead. */
[data-theme="light"] .route-map .route{stroke:var(--amber)}
[data-theme="light"] .route-map .plane{fill:var(--amber)}
[data-theme="light"] .route-map .pin-dot{fill:var(--amber)}
[data-theme="light"] .route-map .pin-halo{stroke:var(--amber);stroke-opacity:.55}
[data-theme="light"] .route-map .pin circle.ring{stroke:var(--amber)}
[data-theme="light"] .route-map .reticle{stroke:var(--amber)}
[data-theme="light"] .route-map .land{stroke:rgba(24,20,8,.22)}
[data-theme="light"] .route-map .pin-label{fill:var(--text)}
[data-theme="light"] .route-map .pin-sub{fill:var(--muted)}
[data-theme="light"] .progress{background:var(--amber)}
[data-theme="light"] .hotel .score i{background:var(--amber)}
[data-theme="light"] .dot,[data-theme="light"] .dot.ok{background:var(--amber);box-shadow:0 0 8px rgba(122,96,0,.45)}
[data-theme="light"] .nav-links a.active::after{background:var(--amber);box-shadow:none}
[data-theme="light"] .timeline .item::before,[data-theme="light"] .rules li b::before{border-color:var(--amber)}


/* =========================================================================
   PREMIUM PASS
   1. Brighter, more neon yellow.
   2. Darker greys, so the yellow is the only thing that glows.
   3. Nothing spans the viewport — the site is a 3/4-width column, and the
      heroes become framed plates floating on the ground.
   4. Real shadow physics: light falls off, so a shadow is not one blur but
      a stack of them doubling in size and each carrying the same low alpha.
      That is the difference between "has a drop shadow" and "is an object".
   ========================================================================= */

/* ---- 1 + 2. colour ------------------------------------------------------ */
:root{
  --bg:#010101; --bg-2:#050505; --bg-3:#0c0c0c;
  --panel-solid:#030303;
  --text:#f5f5f5; --muted:#a4a4a4; --dim:#808080;
  --amber:#fcdf00; --amber-2:#ffe86b;
  --accent-fill:#fcdf00; --accent-ink:#0f0d04;
  --ng-yellow:#fcdf00; --ok:#fcdf00;
  --amber-glow:rgba(252,223,0,.46);
  /* panels sit darker and less milky, so the yellow reads as the only light */
  --lg-tint:rgba(255,255,255,.038);
  --lg-tint-strong:rgba(255,255,255,.062);
  --lg-rim-top:rgba(255,255,255,.34);
  --lg-rim-bottom:rgba(255,255,255,.04);
  --lg-spec:rgba(255,255,255,.22);
  --lg-sheen:linear-gradient(var(--lg-angle,150deg),
     rgba(255,255,255,.09) 0%,rgba(255,255,255,.015) 40%,
     rgba(255,255,255,.004) 62%,rgba(255,255,255,.06) 100%);
}
@supports (color:oklch(0 0 0)){
  :root{
    --bg:oklch(.075 0 0); --bg-2:oklch(.115 0 0); --bg-3:oklch(.155 0 0);
    --panel-solid:oklch(.098 0 0);
    --text:oklch(.97 0 0); --muted:oklch(.72 0 0); --dim:oklch(.60 0 0);
    --amber:oklch(.90 .188 100); --amber-2:oklch(.93 .148 100);
    --accent-fill:oklch(.90 .188 100); --ok:oklch(.90 .188 100);
  }
}
[data-theme="light"]{
  --bg:#f0f0f0; --bg-2:#e3e3e3; --bg-3:#d2d2d2;
  --panel-solid:#ffffff;
  --text:#0d0d0d; --muted:#484848; --dim:#5b5b5b;
  --amber:#7a6100; --amber-2:#5e4b00;
  --accent-fill:#fcdf00; --accent-ink:#0f0d04;
  --ng-yellow:#fcdf00; --ok:#7a6100;
  --amber-glow:rgba(252,223,0,.48);
  --line:rgba(0,0,0,.16); --line-soft:rgba(0,0,0,.075);
}
@supports (color:oklch(0 0 0)){
  [data-theme="light"]{
    --bg:oklch(.955 0 0); --bg-2:oklch(.915 0 0); --bg-3:oklch(.865 0 0);
    --text:oklch(.16 0 0); --muted:oklch(.40 0 0); --dim:oklch(.47 0 0);
    --amber:oklch(.50 .105 100); --amber-2:oklch(.42 .09 100);
    --accent-fill:oklch(.90 .188 100);
  }
}
/* imagery goes deeper so the plates read as photographs at night */
.scene{filter:grayscale(1) contrast(1.22) brightness(.76)}
[data-theme="light"] .scene{filter:grayscale(1) contrast(1.14) brightness(.98)}
.card:hover .scene,.b-tile:hover .scene,.a-pane:hover .scene{filter:grayscale(1) contrast(1.28) brightness(.88)}
[data-theme="light"] .card:hover .scene{filter:grayscale(1) contrast(1.18) brightness(1.02)}

/* ---- 3. the 3/4 column -------------------------------------------------- */
:root{ --shell:min(75%,1180px); }
@media (max-width:1100px){ :root{ --shell:min(88%,1180px) } }
@media (max-width:700px){  :root{ --shell:min(92%,1180px) } }

.container,.lg-wrap{width:var(--shell);margin-inline:auto}

/* heroes become framed plates floating on the ground, not full-bleed bands */
.hero,.page-head,.post-hero{
  width:var(--shell);margin-inline:auto;
  border-radius:var(--r-xl);overflow:hidden;border-bottom:0;
  isolation:isolate;
}
.hero{margin-top:1.4rem;min-height:min(84vh,820px)}
.page-head,.post-hero{margin-top:1.4rem}
.hero .container,.page-head .container,.post-hero .container,
.hero .hero-grid,.page-head .content,.post-hero .content{width:100%}
.hero .hero-grid,.page-head .content,.post-hero .content{padding-inline:clamp(26px,3.6vw,58px)}
/* the portal now hugs the plate */
.ng-portal{inset:clamp(12px,1.5vw,22px);border-width:clamp(4px,.44vw,7px)}
.hero .ng-portal{inset:clamp(13px,1.7vw,26px)}
.ng-dateline{left:clamp(40px,5vw,64px);top:calc(clamp(13px,1.7vw,26px) - .78rem)}

/* the ticker and every band stop at the column too */
.ticker{width:var(--shell);margin-inline:auto;border-radius:var(--r-md);border:0;
  box-shadow:var(--rim),var(--e1);overflow:hidden}
.footer{width:var(--shell);margin-inline:auto;border-top:0;padding-top:3rem}

.section{padding:6rem 0}

/* ---- 4. shadow physics -------------------------------------------------- */
/* Each step doubles the previous blur at the same low alpha. Six overlapping
   layers integrate into a smooth falloff instead of one grey halo. The
   deepest layer carries a trace of the accent, which is what stops the
   shadow reading as dirty grey on a black ground. */
:root{
  --e1:
    0 1px 1px rgba(0,0,0,.16),
    0 2px 2px rgba(0,0,0,.15),
    0 4px 4px rgba(0,0,0,.13);
  --e2:
    0 1px 1px rgba(0,0,0,.17),
    0 2px 2px rgba(0,0,0,.16),
    0 4px 4px rgba(0,0,0,.15),
    0 8px 8px rgba(0,0,0,.14),
    0 16px 16px rgba(0,0,0,.12);
  --e3:
    0 1px 1px rgba(0,0,0,.18),
    0 2px 2px rgba(0,0,0,.17),
    0 4px 4px rgba(0,0,0,.16),
    0 8px 8px rgba(0,0,0,.15),
    0 16px 16px rgba(0,0,0,.14),
    0 32px 32px rgba(0,0,0,.13),
    0 48px 64px -24px rgba(0,0,0,.55);
  --e4:
    0 1px 1px rgba(0,0,0,.20),
    0 2px 2px rgba(0,0,0,.19),
    0 4px 4px rgba(0,0,0,.18),
    0 8px 8px rgba(0,0,0,.17),
    0 16px 16px rgba(0,0,0,.16),
    0 32px 32px rgba(0,0,0,.16),
    0 64px 64px rgba(0,0,0,.15),
    0 80px 110px -40px rgba(0,0,0,.7);
  --rim:
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 0 0 1px rgba(255,255,255,.055);
  --rim-lo:inset 0 -1px 0 rgba(0,0,0,.5);
}
[data-theme="light"]{
  --e1:
    0 1px 1px rgba(16,16,16,.045),
    0 2px 2px rgba(16,16,16,.045),
    0 4px 4px rgba(16,16,16,.04);
  --e2:
    0 1px 1px rgba(16,16,16,.05),
    0 2px 2px rgba(16,16,16,.05),
    0 4px 4px rgba(16,16,16,.045),
    0 8px 8px rgba(16,16,16,.04),
    0 16px 16px rgba(16,16,16,.035);
  --e3:
    0 1px 1px rgba(16,16,16,.055),
    0 2px 2px rgba(16,16,16,.05),
    0 4px 4px rgba(16,16,16,.05),
    0 8px 8px rgba(16,16,16,.045),
    0 16px 16px rgba(16,16,16,.04),
    0 32px 32px rgba(16,16,16,.04),
    0 48px 64px -24px rgba(16,16,16,.14);
  --e4:
    0 1px 1px rgba(16,16,16,.06),
    0 2px 2px rgba(16,16,16,.06),
    0 4px 4px rgba(16,16,16,.055),
    0 8px 8px rgba(16,16,16,.05),
    0 16px 16px rgba(16,16,16,.05),
    0 32px 32px rgba(16,16,16,.045),
    0 64px 64px rgba(16,16,16,.045),
    0 80px 110px -40px rgba(16,16,16,.18);
  --rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(16,16,16,.055);
  --rim-lo:inset 0 -1px 0 rgba(16,16,16,.05);
}

/* the plates themselves get the deepest step */
.hero,.page-head,.post-hero{box-shadow:var(--rim),var(--e3)}

/* contact shadow: tighter and darker at rest, so objects feel planted
   rather than hovering in fog */
.card::after,.hotel::after,.b-tile::after{
  left:12%;right:12%;bottom:-10px;height:18px;
  background:rgba(0,0,0,.7);filter:blur(11px);opacity:.55;
}
[data-theme="light"] .card::after,[data-theme="light"] .hotel::after,[data-theme="light"] .b-tile::after{
  background:rgba(16,16,16,.30);filter:blur(12px);opacity:.5;
}
.card:hover::after,.hotel:hover::after,.b-tile:hover::after{
  opacity:.9;transform:translateY(14px) scaleX(1.10);filter:blur(24px);
}
/* the lift goes further, and the easing is slower on the way out */
.card:hover,.b-tile:hover,.a-pane:hover{transform:translate3d(0,-18px,78px)}
.hotel:hover{transform:translate3d(0,-10px,44px)}
.card,.hotel,.b-tile,.a-pane,.feature-post{
  transition:transform .55s cubic-bezier(.16,.84,.28,1),box-shadow .55s cubic-bezier(.16,.84,.28,1);
}
/* the media plane pushes further forward, which is what sells the parallax */
.card .art,.b-tile .view,.a-pane .view{transform:translateZ(26px)}
.card .body{transform:translateZ(12px)}
.card .art .tag{transform:translateZ(34px)}

/* the yellow is the only light source in the room */
.btn.primary,.lg-btn.solid,a[data-agoda],.hotel .foot .btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--e2),0 12px 40px -14px var(--amber-glow) !important;
}
.btn.primary:hover,.lg-btn.solid:hover,a[data-agoda]:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--e3),0 22px 60px -16px var(--amber-glow) !important;
}
.ng-portal{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 60px -12px var(--amber-glow),var(--e2)}
.brand .mark{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 26px -8px var(--amber-glow)}

/* The column is 3/4 of the viewport now, so the display scale has to come
   down with it — type sized for a full-bleed page shreds inside a plate. */
h1{font-size:clamp(2.1rem,.9rem + 2.9vw,3.45rem)}
h2{font-size:clamp(1.5rem,.9rem + 1.5vw,2.15rem)}
.hero-copy h1{font-size:clamp(2.1rem,.8rem + 2.7vw,3.3rem);letter-spacing:-.032em}
.post-hero h1{font-size:clamp(2rem,.9rem + 2.6vw,3.2rem)}
.page-head h1{font-size:clamp(2rem,.9rem + 2.5vw,3.1rem)}
.hero-grid{grid-template-columns:1.12fr .88fr;gap:2.2rem}
.hero-copy .lead{font-size:1.08rem;max-width:44ch}
.lead,.page-head p.lead{font-size:1.12rem}
@media (max-width:1250px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .route-map{max-width:560px;margin-inline:auto}
}


/* =========================================================================
   FULL-BLEED BANDS + SECTION BREAKS
   The page is a 3/4 column. That constraint is what makes a full-bleed
   element mean something: anything that touches both edges reads as a
   deliberate interruption. So the moving band becomes the page's rhythm
   device, and the section break is built from three signals stacked —
   a rule that crosses the whole viewport, a chapter numeral out in the
   margin, and the yellow department tab. One signal is a divider; three
   are a chapter heading.
   ========================================================================= */

/* the escape hatch out of the column */
.full-bleed{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}

/* ---- moving bands span the viewport ---- */
.ticker{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-radius:0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  box-shadow:none;
  background:var(--bg-2);
  padding-block:.15rem;
  margin-block:4.5rem;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
[data-theme="light"] .ticker{background:var(--bg-2)}
.ticker-track{padding:.85rem 0;gap:3.4rem}
.ticker-track span{font-size:.84rem;font-weight:500;letter-spacing:.002em;color:var(--muted)}
.ticker-track span b{color:var(--amber-2);font-weight:700}
[data-theme="light"] .ticker-track span b{color:var(--amber)}
.ticker-track span::before{background:var(--accent-fill);width:9px;height:9px;margin-right:.7rem}

/* ---- the section break ---- */
body{counter-reset:sec}
.section{position:relative}

/* 1. a hairline that crosses the whole viewport — the page turning */
.section:has(.sec-head)::before{
  content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:1px;
  background:linear-gradient(90deg,
     transparent 0%,
     var(--line-soft) 8%,
     var(--line) 50%,
     var(--line-soft) 92%,
     transparent 100%);
}
/* 2. the chapter numeral, out in the margin where the column does not reach */
.section:has(.sec-head){counter-increment:sec}
.section:has(.sec-head)::after{
  content:counter(sec,decimal-leading-zero);
  position:absolute;top:3.6rem;
  left:calc(50% - min(75%,1180px)/2 - 3.6rem);
  font-family:var(--font-display);font-weight:800;font-size:1.4rem;
  letter-spacing:-.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px var(--line);
  pointer-events:none;user-select:none;
}
/* the numeral has nowhere to live once the column widens to the screen */
@media (max-width:1250px){
  .section:has(.sec-head)::after{display:none}
}
.section:has(.sec-head){padding-top:5.5rem}

/* 3. the department tab already carries the name — give it room to land */
.sec-head{padding-top:.4rem}
.sec-head .label{margin-bottom:1.05rem}

/* alternate sections sit on a fractionally different ground, so the banding
   is visible even with the rules scrolled past */
.section:nth-of-type(even)::before{opacity:1}
.section:nth-of-type(odd) > .container{position:relative}

/* the footer gets the same treatment rather than a bare border */
.footer{position:relative;padding-top:4rem}
.footer::before{
  content:"";display:block;position:absolute;top:0;left:calc(50% - 50vw);
  width:100vw;height:1px;margin:0;
  background:linear-gradient(90deg,transparent,var(--line) 50%,transparent);
}

@media (max-width:700px){
  .ticker{margin-block:3rem}
  .section:has(.sec-head){padding-top:4rem}
}

/* the margin marker earns its keep only if it is actually legible: a short
   yellow tick hanging off the rule, with the chapter numeral under it */
.section:has(.sec-head)::after{
  top:0;font-size:1.75rem;-webkit-text-stroke:1.5px var(--line);
  padding-top:3.1rem;
  background:linear-gradient(var(--accent-fill),var(--accent-fill)) left top/2px 2.1rem no-repeat;
}
[data-theme="light"] .section:has(.sec-head)::after{-webkit-text-stroke:1.5px rgba(0,0,0,.30)}
.section:has(.sec-head)::before{
  background:linear-gradient(90deg,transparent 0%,var(--line-soft) 6%,var(--line) 50%,var(--line-soft) 94%,transparent 100%);
}


/* =========================================================================
   HIGHLIGHTED TITLES + PHOTOGRAPHIC STRIPS
   ========================================================================= */

/* ---- the break: keep the tick, drop the numeral and the hairline ---- */
.section:has(.sec-head)::before{display:none}          /* hairline removed */
.section:has(.sec-head)::after{
  content:"";                                          /* numeral removed */
  top:0;left:calc(50% - min(75%,1180px)/2 - 1.9rem);
  width:2px;height:3.2rem;padding:0;
  background:var(--accent-fill);
  -webkit-text-stroke:0;
  border-radius:1px;
  box-shadow:0 0 18px -4px var(--amber-glow);
}
@media (max-width:1250px){
  .section:has(.sec-head)::after{
    display:block;left:calc(50% - min(88%,1180px)/2 - 1rem);height:2.4rem;
  }
}
@media (max-width:700px){
  .section:has(.sec-head)::after{left:calc(50% - min(92%,1180px)/2 - .55rem);height:2rem}
}

/* ---- highlighted section titles ------------------------------------------
   A marker stroke behind the words, not a block behind the line — so it
   hugs the text and wraps correctly. box-decoration-break:clone is what
   gives every wrapped line its own padding instead of one ragged slab.

   Type colour: black on the yellow, in BOTH themes. White on this yellow
   measures 1.4:1 and cannot be read; the attached reference is black on
   yellow, so that is what shipped. Flip --hl-ink if you want it anyway. */
:root{ --hl-ink:#0f0d04; }
.sec-head h2,
.page-head h1,
.a-head h2{
  display:inline;
  background:var(--accent-fill);
  color:var(--hl-ink);
  padding:.10em .38em .14em;
  margin-left:-.38em;              /* optical: keep the text edge aligned */
  border-radius:3px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  line-height:1.32;                /* room for the stroke to breathe */
  box-shadow:0 6px 22px -10px var(--amber-glow);
}
/* the heading is inline now, so the block below it needs its own spacing */
.sec-head > div > h2{margin-bottom:0}
.sec-head h2 + p,.a-head h2 + p{margin-top:1.1rem}
.page-head h1 + .lead{margin-top:1.35rem}
.sec-head{align-items:flex-start}
.sec-head > div{max-width:62ch}

/* the department tab and the highlight together are one yellow too many —
   the tab becomes an outline so the highlight is the loud element */
.sec-head .label,.page-head .label{
  background:none;color:var(--amber-2);
  box-shadow:inset 0 0 0 1.5px var(--accent-fill);
  padding:.2rem .58rem;
}
[data-theme="light"] .sec-head .label,[data-theme="light"] .page-head .label{color:var(--amber)}

/* ---- photographic strips between sections -------------------------------
   Full-bleed, so they read as the same kind of interruption the moving band
   does. Until real plates land these carry the gradient scenes; the markup
   is already <picture>-shaped so swapping in a file is one line. */
.ng-strip{
  position:relative;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  height:clamp(180px,22vw,300px);
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  isolation:isolate;
}
.ng-strip .scene{position:absolute;inset:-12% 0;filter:grayscale(1) contrast(1.24) brightness(.7)}
[data-theme="light"] .ng-strip .scene{filter:grayscale(1) contrast(1.12) brightness(1.0)}
.ng-strip::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,transparent 16%,transparent 84%,var(--bg) 100%),
             linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 62%,rgba(0,0,0,.45));
}
[data-theme="light"] .ng-strip::after{
  background:linear-gradient(90deg,var(--bg) 0%,transparent 16%,transparent 84%,var(--bg) 100%),
             linear-gradient(180deg,rgba(255,255,255,.30),transparent 32%,transparent 64%,rgba(255,255,255,.35));
}
/* the caption rides the strip like a plate credit */
.ng-strip-cap{
  position:absolute;z-index:2;left:calc(50% - min(75%,1180px)/2);bottom:1.1rem;
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.ng-strip-cap::before{content:"";width:22px;height:2px;background:var(--accent-fill);flex:0 0 22px}
[data-theme="light"] .ng-strip-cap{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85)}
@media (max-width:1250px){.ng-strip-cap{left:calc(50% - min(88%,1180px)/2)}}
@media (max-width:700px){
  .ng-strip{height:150px}
  .ng-strip-cap{left:calc(50% - min(92%,1180px)/2);font-size:.7rem}
}
/* a slow drift so the strip is alive without asking for attention */
@media (prefers-reduced-motion:no-preference){
  .ng-strip .scene{animation:strip-drift 26s ease-in-out infinite alternate}
}
@keyframes strip-drift{from{transform:scale(1.06) translateX(-1.5%)}to{transform:scale(1.06) translateX(1.5%)}}


/* =========================================================================
   INVERTED BOOKING CONSOLE + TICK ALIGNMENT
   ========================================================================= */

/* ---- the console runs against the theme ---------------------------------
   Dark site: the console is a white card. Light site: it is a black one.
   It is the only place on the page where money changes hands, so inverting
   it makes it the loudest object without adding another colour.
   The whole panel re-declares the theme tokens locally, so every child —
   labels, inputs, chips, the affiliate note — inherits correctly instead of
   needing its own override. */
.hud:has(#agodaSearch){
  /* dark site -> light console */
  --text:#0d0d0d; --muted:#484848; --dim:#5b5b5b;
  --line:rgba(0,0,0,.16); --line-soft:rgba(0,0,0,.075);
  --amber:#7a6100; --amber-2:#5e4b00;
  --lg-rim-top:rgba(255,255,255,.9);
  background-color:#f2f2f2 !important;
  background-image:linear-gradient(var(--lg-angle,150deg),rgba(255,255,255,.9),rgba(255,255,255,.35) 45%,rgba(255,255,255,.7)) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.1) !important;
  backdrop-filter:blur(26px) saturate(1.1) !important;
  color:var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(0,0,0,.07),
    var(--e3);
}
[data-theme="light"] .hud:has(#agodaSearch){
  /* light site -> dark console */
  --text:#f5f5f5; --muted:#a4a4a4; --dim:#808080;
  --line:rgba(255,255,255,.18); --line-soft:rgba(255,255,255,.09);
  --amber:#fcdf00; --amber-2:#ffe86b;
  --lg-rim-top:rgba(255,255,255,.30);
  background-color:#0a0a0a !important;
  background-image:linear-gradient(var(--lg-angle,150deg),rgba(255,255,255,.08),rgba(255,255,255,.015) 45%,rgba(255,255,255,.05)) !important;
  color:var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.07),
    var(--e3);
}
/* the fields invert with the panel */
.hud:has(#agodaSearch) .field input,
.hud:has(#agodaSearch) .field select,
.hud:has(#agodaSearch) .field textarea{
  background-color:rgba(0,0,0,.05);color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(0,0,0,.05);
}
[data-theme="light"] .hud:has(#agodaSearch) .field input,
[data-theme="light"] .hud:has(#agodaSearch) .field select,
[data-theme="light"] .hud:has(#agodaSearch) .field textarea{
  background-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.06);
}
.hud:has(#agodaSearch) .field select option{background:#f2f2f2;color:#0d0d0d}
[data-theme="light"] .hud:has(#agodaSearch) .field select option{background:#0a0a0a;color:#f5f5f5}
.hud:has(#agodaSearch) .chip{background-color:rgba(0,0,0,.06);color:var(--muted);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.hud:has(#agodaSearch) .chip:hover{color:var(--text);background-color:rgba(0,0,0,.10)}
[data-theme="light"] .hud:has(#agodaSearch) .chip{background-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
[data-theme="light"] .hud:has(#agodaSearch) .chip:hover{background-color:rgba(255,255,255,.16)}
.hud:has(#agodaSearch) .icon-box{background-color:rgba(0,0,0,.07);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
[data-theme="light"] .hud:has(#agodaSearch) .icon-box{background-color:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.hud:has(#agodaSearch) .partner-chip b{color:var(--text)}
/* the CTA stays yellow in both, because it is the action */
.hud:has(#agodaSearch) .btn.primary{
  background-color:var(--accent-fill) !important;color:var(--accent-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--e2),0 12px 34px -14px var(--amber-glow) !important;
}
.hud:has(#agodaSearch) .console-head .ready{color:var(--amber)}
.hud:has(#agodaSearch) .console-head .ready::before{background:var(--amber);box-shadow:none}
.hud:has(#agodaSearch) .dot{background:var(--amber);box-shadow:none}
.hud:has(#agodaSearch) .aff-note::before{border-color:var(--muted)}

/* ---- the margin tick sits on the title's row ---------------------------- */
/* It lives on .sec-head now instead of the section, so it is aligned to the
   heading by construction rather than by a magic offset. */
.section:has(.sec-head)::after{display:none}
.sec-head{position:relative}
.sec-head::after{
  content:"";position:absolute;left:-1.9rem;top:.12em;
  width:3px;height:1.5em;border-radius:2px;
  background:var(--accent-fill);
  box-shadow:0 0 18px -4px var(--amber-glow);
}
@media (max-width:1250px){.sec-head::after{left:-1rem;width:2px}}
@media (max-width:820px){.sec-head::after{display:none}}
/* the page-head and article headings get the same marker */
.a-head{position:relative}
.a-head::after{
  content:"";position:absolute;left:-1.9rem;top:.12em;
  width:3px;height:1.5em;border-radius:2px;background:var(--accent-fill);
}
@media (max-width:1250px){.a-head::after{display:none}}

/* =========================================================================
   REAL PLATES
   image-set() gives AVIF with a WebP fallback from one declaration. If a
   browser supports neither the declaration is invalid and the gradient
   rule earlier in this file survives — so the fallback costs nothing.
   ========================================================================= */

.scene.strip-1{background-image:image-set(url("../img/strip-1.avif") type("image/avif"),url("../img/strip-1.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.strip-2{background-image:image-set(url("../img/strip-2.avif") type("image/avif"),url("../img/strip-2.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.strip-3{background-image:image-set(url("../img/strip-3.avif") type("image/avif"),url("../img/strip-3.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.strip-4{background-image:image-set(url("../img/strip-4.avif") type("image/avif"),url("../img/strip-4.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.strip-5{background-image:image-set(url("../img/strip-5.avif") type("image/avif"),url("../img/strip-5.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.strip-6{background-image:image-set(url("../img/strip-6.avif") type("image/avif"),url("../img/strip-6.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-bali{background-image:image-set(url("../img/dest-bali.avif") type("image/avif"),url("../img/dest-bali.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-tokyo{background-image:image-set(url("../img/dest-tokyo.avif") type("image/avif"),url("../img/dest-tokyo.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-kyoto{background-image:image-set(url("../img/dest-kyoto.avif") type("image/avif"),url("../img/dest-kyoto.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-lisbon{background-image:image-set(url("../img/dest-lisbon.avif") type("image/avif"),url("../img/dest-lisbon.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-cebu{background-image:image-set(url("../img/dest-cebu.avif") type("image/avif"),url("../img/dest-cebu.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-himachal{background-image:image-set(url("../img/dest-himachal.avif") type("image/avif"),url("../img/dest-himachal.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-kerala{background-image:image-set(url("../img/dest-kerala.avif") type("image/avif"),url("../img/dest-kerala.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-hanoi{background-image:image-set(url("../img/dest-hanoi.avif") type("image/avif"),url("../img/dest-hanoi.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-marrakech{background-image:image-set(url("../img/dest-marrakech.avif") type("image/avif"),url("../img/dest-marrakech.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-cape{background-image:image-set(url("../img/dest-cape.avif") type("image/avif"),url("../img/dest-cape.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-santorini{background-image:image-set(url("../img/dest-santorini.avif") type("image/avif"),url("../img/dest-santorini.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-reykjavik{background-image:image-set(url("../img/dest-reykjavik.avif") type("image/avif"),url("../img/dest-reykjavik.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-dusk{background-image:image-set(url("../img/hero-clouds.avif") type("image/avif"),url("../img/hero-clouds.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}
.scene.s-kerala{background-image:image-set(url("../img/dest-kerala.avif") type("image/avif"),url("../img/dest-kerala.webp") type("image/webp"));background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0a}

/* the fake weather that stood in for photography is no longer needed */
.scene .waves,.scene .skyline,.scene .peaks,.scene .clouds{display:none}
.scene::after{display:none}

/* the hero window now holds a real plate */
.hero .sky{
  background-image:image-set(url("../img/hero-sunset.avif") type("image/avif"),url("../img/hero-sunset.webp") type("image/webp"));
  background-size:cover;background-position:center 42%;background-color:#050505;
}
.hero .sky::after{display:none}
.hero .sky .sun,.hero .sky .cloud,.hero .sky .stars,.hero .sky .horizon{display:none}
.hero .sky .vignette{box-shadow:inset 0 0 220px 40px rgba(0,0,0,.85)}
.hero .sky::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.12) 72%,transparent 100%);
}
[data-theme="light"] .hero .sky{background-color:#e9e9e9}
[data-theme="light"] .hero .sky::before{
  background:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.66) 42%,rgba(255,255,255,.22) 72%,transparent 100%);
}
[data-theme="light"] .hero .sky .vignette{box-shadow:inset 0 0 200px 30px rgba(255,255,255,.7)}
/* page heads get the same plate treatment, quieter */
.page-head .sky{
  background-image:image-set(url("../img/approach-terrain.avif") type("image/avif"),url("../img/approach-terrain.webp") type("image/webp"));
  background-size:cover;background-position:center 55%;background-color:#050505;
}
.page-head .sky .sun,.page-head .sky .cloud,.page-head .sky .stars{display:none}
.page-head .sky::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.62) 55%,rgba(0,0,0,.35))}
[data-theme="light"] .page-head .sky{background-color:#eee}
[data-theme="light"] .page-head .sky::before{background:linear-gradient(90deg,rgba(255,255,255,.93),rgba(255,255,255,.75) 55%,rgba(255,255,255,.55))}

/* photographs are the point now, so they carry less filtering */
.scene{filter:grayscale(1) contrast(1.08) brightness(.94)}
[data-theme="light"] .scene{filter:grayscale(1) contrast(1.04) brightness(1.02)}
.card:hover .scene,.b-tile:hover .scene,.a-pane:hover .scene{filter:grayscale(1) contrast(1.14) brightness(1)}
.ng-strip .scene{filter:grayscale(1) contrast(1.1) brightness(.86)}
[data-theme="light"] .ng-strip .scene{filter:grayscale(1) contrast(1.04) brightness(1.02)}

/* ---- the vertical tick beside titles is removed ---- */
.sec-head::after,.a-head::after,.section:has(.sec-head)::after{display:none}

/* the hero and page-head plates are photographs now, so they go monochrome
   with everything else */
.hero .sky,.page-head .sky{filter:grayscale(1) contrast(1.06) brightness(.9)}
[data-theme="light"] .hero .sky,[data-theme="light"] .page-head .sky{filter:grayscale(1) contrast(1.02) brightness(1.04)}

/* =========================================================================
   LIGHTER DARK GROUND
   The ground was #010101. A black shadow on a black page is invisible, so
   every card was floating on nothing — the depth work could not be seen.
   Lifting the ground to a charcoal gives the shadows something to fall on
   and puts real separation between a card and the page behind it.
   Recessed bands go the other way, darker than the ground, so a full-bleed
   band still reads as a hole rather than another panel.
   ========================================================================= */
:root{
  --bg:#030716; --bg-2:#01030e; --bg-3:#0c152a;
  --panel-solid:#020513;
  --dim:#8f8f8f;
  --lg-tint:rgba(255,255,255,.07);
  --lg-tint-strong:rgba(255,255,255,.105);
  --lg-rim-top:rgba(255,255,255,.40);
}
@supports (color:oklch(0 0 0)){
  :root{
    --bg:oklch(.135 .035 266); --bg-2:oklch(.105 .03 266); --bg-3:oklch(.20 .045 266);
    --panel-solid:oklch(.12 .035 266); --dim:oklch(.66 0 0);
  }
}
/* with a visible ground the shadows can carry more weight */
:root{
  --e3:
    0 1px 1px rgba(0,0,0,.30), 0 2px 2px rgba(0,0,0,.28), 0 4px 4px rgba(0,0,0,.26),
    0 8px 8px rgba(0,0,0,.24), 0 16px 16px rgba(0,0,0,.22), 0 32px 32px rgba(0,0,0,.20),
    0 48px 64px -24px rgba(0,0,0,.75);
  --e4:
    0 1px 1px rgba(0,0,0,.34), 0 2px 2px rgba(0,0,0,.32), 0 4px 4px rgba(0,0,0,.30),
    0 8px 8px rgba(0,0,0,.28), 0 16px 16px rgba(0,0,0,.26), 0 32px 32px rgba(0,0,0,.25),
    0 64px 64px rgba(0,0,0,.24), 0 80px 110px -40px rgba(0,0,0,.85);
}
.card::after,.hotel::after,.b-tile::after{background:rgba(0,0,0,.85);opacity:.6}
/* the recessed band reads as a hole in the page */
.ticker{background:var(--bg-2);box-shadow:inset 0 8px 18px -12px rgba(0,0,0,.9),inset 0 -8px 18px -12px rgba(0,0,0,.9)}
/* plate fallbacks follow the new ground */
.hero .sky,.page-head .sky{background-color:#0d0d0d}
.scene{background-color:#0d0d0d}


/* =========================================================================
   MORE GLASS + INVERTED LIGHT THEME
   Two problems solved together.

   1. Transparency and separation pull against each other. The answer is the
      one real glass uses: you see a pane by its EDGE and its SHADOW, not by
      its surface. So the fill drops, the rim and the shadow carry the object,
      and the page gets soft light pools underneath — because a transparent
      panel over a perfectly flat colour has nothing to be transparent about.

   2. Light theme flips: pale ground, dark panels. Each panel re-declares the
      theme tokens locally, so everything inside it inherits the right ink
      rather than needing a per-element override.
   ========================================================================= */

/* ---- light pools, so the glass has something to reveal ---- */
body::before{
  background:
    radial-gradient(58% 46% at 18% 12%,rgba(255,255,255,.055),transparent 62%),
    radial-gradient(48% 42% at 86% 30%,rgba(255,255,255,.04),transparent 64%),
    radial-gradient(64% 46% at 62% 78%,rgba(255,255,255,.032),transparent 66%),
    radial-gradient(40% 34% at 8% 62%,rgba(255,255,255,.028),transparent 66%);
}
[data-theme="light"] body::before{
  background:
    radial-gradient(58% 46% at 18% 12%,rgba(0,0,0,.045),transparent 62%),
    radial-gradient(48% 42% at 86% 30%,rgba(0,0,0,.035),transparent 64%),
    radial-gradient(64% 46% at 62% 78%,rgba(0,0,0,.03),transparent 66%),
    radial-gradient(40% 34% at 8% 62%,rgba(0,0,0,.025),transparent 66%);
}

/* ---- DARK: thinner glass, louder edges ---- */
:root{
  --lg-tint:rgba(255,255,255,.042);
  --lg-tint-strong:rgba(255,255,255,.068);
  --lg-blur:30px;
  --lg-sat:1.10;
  --lg-rim-top:rgba(255,255,255,.52);
  --lg-rim-bottom:rgba(255,255,255,.05);
  --rim:
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 0 0 1px rgba(255,255,255,.085),
    inset 0 -18px 40px -34px rgba(255,255,255,.16);
  --lg-sheen:linear-gradient(var(--lg-angle,150deg),
     rgba(255,255,255,.10) 0%,rgba(255,255,255,.012) 38%,
     rgba(255,255,255,.004) 62%,rgba(255,255,255,.075) 100%);
}
.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,.readout,
.disclosure,.footer-status,.faq details,.rules,.a-pane,.a-strip,.b-tile{
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
}

/* ---- LIGHT: pale ground restored, panels go dark ---- */
[data-theme="light"]{
  --bg:#f7f7f7; --bg-2:#ececec; --bg-3:#dedede;
  --panel-solid:#141414;
  --text:#101010; --muted:#484848; --dim:#5b5b5b;
}
@supports (color:oklch(0 0 0)){
  [data-theme="light"]{
    --bg:oklch(.975 0 0); --bg-2:oklch(.94 0 0); --bg-3:oklch(.89 0 0);
    --panel-solid:oklch(.19 0 0);
  }
}
/* every panel becomes a dark pane and re-declares its own ink */
[data-theme="light"] .hud,
[data-theme="light"] .card,
[data-theme="light"] .hotel,
[data-theme="light"] .feature-post,
[data-theme="light"] .boarding,
[data-theme="light"] .leg,
[data-theme="light"] .telemetry,
[data-theme="light"] .readout,
[data-theme="light"] .disclosure,
[data-theme="light"] .footer-status,
[data-theme="light"] .faq details,
[data-theme="light"] .rules,
[data-theme="light"] .a-pane,
[data-theme="light"] .a-strip,
[data-theme="light"] .b-tile{
  --text:#f5f5f5; --muted:#b0b0b0; --dim:#a2a2a2;
  --amber:#fcdf00; --amber-2:#ffe86b;
  --line:rgba(255,255,255,.18); --line-soft:rgba(255,255,255,.09);
  --lg-rim-top:rgba(255,255,255,.30);
  color:#f5f5f5;
  background-color:rgba(10,10,10,.80);
  background-image:linear-gradient(var(--lg-angle,150deg),
     rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 40%,
     rgba(255,255,255,.008) 62%,rgba(255,255,255,.07) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.15);
  backdrop-filter:blur(26px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.09),
    var(--e3);
}
/* things that live on the panel follow its ink */
[data-theme="light"] .card .body p,
[data-theme="light"] .hotel .info .perks span,
[data-theme="light"] .rules li p,
[data-theme="light"] .faq details p{color:var(--muted)}
[data-theme="light"] .card .price,
[data-theme="light"] .hotel .foot .price,
[data-theme="light"] .readout .v,
[data-theme="light"] .telemetry .v,
[data-theme="light"] .leg .row .t,
[data-theme="light"] .leg .leg-head b,
[data-theme="light"] .timeline .item .yr{color:#ffe86b}
[data-theme="light"] .hud .icon-box,[data-theme="light"] .card .icon-box,
[data-theme="light"] .leg .icon-box,[data-theme="light"] .callout .icon-box,
[data-theme="light"] .boarding .icon-box,[data-theme="light"] .hotel .icon-box{
  background-color:rgba(255,255,255,.10);color:#f5f5f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
[data-theme="light"] .hotel .foot,[data-theme="light"] .card .meta{border-top-color:rgba(255,255,255,.14)}
[data-theme="light"] .rules li{border-bottom-color:rgba(255,255,255,.12)}
[data-theme="light"] .boarding::before{border-left-color:rgba(255,255,255,.22)}
[data-theme="light"] .boarding .r{background:rgba(255,255,255,.05)}
[data-theme="light"] .boarding .notch{background:var(--bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
[data-theme="light"] .barcode{background:repeating-linear-gradient(90deg,#f5f5f5 0 2px,transparent 2px 4px,#f5f5f5 4px 5px,transparent 5px 9px,#f5f5f5 9px 12px,transparent 12px 14px)}
[data-theme="light"] .avatar{background:rgba(255,255,255,.10);color:#ffe86b}
[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .field textarea{
  background-color:rgba(255,255,255,.08);color:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07);
}
[data-theme="light"] .field select option{background:#141414;color:#f5f5f5}
[data-theme="light"] .chip{background-color:rgba(255,255,255,.09);color:#a8a8a8;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
[data-theme="light"] .chip:hover{color:#f5f5f5;background-color:rgba(255,255,255,.16)}
[data-theme="light"] .chip.active,[data-theme="light"] .filters .chip.active{background-color:var(--accent-fill);color:var(--accent-ink)}
/* buttons sitting on a dark panel */
[data-theme="light"] .btn{color:#f5f5f5;background-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),var(--e1)}
[data-theme="light"] .btn:hover{background-color:rgba(255,255,255,.18)}
/* …but buttons out on the pale ground keep dark ink */
[data-theme="light"] .sec-head .btn,[data-theme="light"] .hero-actions .btn.ghost{
  color:#101010;background-color:rgba(0,0,0,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--e1);
}
[data-theme="light"] .sec-head .btn:hover{background-color:rgba(0,0,0,.11)}
/* nav and footer are chrome on the pale ground, so they stay light */
[data-theme="light"] .nav .nav-inner{
  --text:#101010;--muted:#484848;
  color:#101010;background-color:rgba(255,255,255,.72);
  background-image:linear-gradient(var(--lg-angle,150deg),rgba(255,255,255,.9),rgba(255,255,255,.4) 45%,rgba(255,255,255,.75));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(0,0,0,.06),var(--e2);
}
[data-theme="light"] .nav .nav-inner .brand .mark{background:var(--accent-fill)}
[data-theme="light"] .nav .nav-inner .brand .mark svg{stroke:var(--accent-ink)}
[data-theme="light"] .theme-toggle,[data-theme="light"] .nav-toggle{background-color:rgba(0,0,0,.06);color:#101010}
/* the console keeps its own inversion and stays the most opaque object */
[data-theme="light"] .hud:has(#agodaSearch){background-color:#0a0a0a !important}
/* the ticker is a hole in the pale page */
[data-theme="light"] .ticker{background:#e4e4e4;box-shadow:inset 0 8px 18px -12px rgba(0,0,0,.22),inset 0 -8px 18px -12px rgba(0,0,0,.22)}
[data-theme="light"] .ticker-track span{color:#484848}
[data-theme="light"] .ticker-track span b{color:#7a6100}
/* plates on a pale ground */
[data-theme="light"] .hero .sky,[data-theme="light"] .page-head .sky{background-color:#dedede}
[data-theme="light"] .scene{background-color:#141414}

/* The nav is light chrome in the light theme, so buttons inside it need
   dark ink — the dark-panel button rule above would make them white on
   white. Same for anything else sitting on the pale ground. */
[data-theme="light"] .nav .btn,
[data-theme="light"] .pagination a,
[data-theme="light"] .lg-mode button{
  color:#101010;background-color:rgba(0,0,0,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--e1);
}
[data-theme="light"] .nav .btn:hover{background-color:rgba(0,0,0,.13);color:#101010}
[data-theme="light"] .nav .btn.primary{background-color:var(--accent-fill);color:var(--accent-ink)}
[data-theme="light"] .lg-mode button[aria-pressed="true"],
[data-theme="light"] .pagination a.active,
[data-theme="light"] .pagination a:hover{background-color:var(--accent-fill);color:var(--accent-ink)}
[data-theme="light"] .lg-mode{background-color:rgba(255,255,255,.8)}
/* the affiliate note and footer text live on the pale ground */
[data-theme="light"] .footer ul a,[data-theme="light"] .footer .about,
[data-theme="light"] .footer :is(h4,.fh),[data-theme="light"] .footer-bottom{color:#484848}
[data-theme="light"] .footer :is(h4,.fh){color:#101010}

/* icons out on the pale ground (the hero stack, section heads) keep dark ink */
[data-theme="light"] .icon-box{
  background-color:rgba(0,0,0,.07);color:#101010;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .radar{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}


/* =========================================================================
   PHOTOGRAPHY OFF (site-wide, reversible)
   The plates stay on disk and their rules stay in this file above — this
   block just switches them off. Delete this block to bring them back.
   ========================================================================= */
.scene,.hero .sky,.page-head .sky{background-image:none !important}
.hero .sky{background:linear-gradient(180deg,#0e0e0e 0%,#151515 52%,#1c1c1c 100%) !important}
[data-theme="light"] .hero .sky{background:linear-gradient(180deg,#fbfbfb 0%,#f4f4f4 52%,#ededed 100%) !important}
.page-head .sky{background:linear-gradient(180deg,#101010,#171717) !important}
[data-theme="light"] .page-head .sky{background:linear-gradient(180deg,#fafafa,#f0f0f0) !important}
.hero .sky::before,.page-head .sky::before{display:none}
.hero .sky,.page-head .sky{filter:none}

/* =========================================================================
   HOMEPAGE — refinement pass (scoped to body.refined)
   With no photography, the cards have to carry themselves on type, space
   and material. Every change below is one of four things: a bigger jump in
   the type hierarchy, more air, a finer rule, or a quieter accent.
   ========================================================================= */

/* ---- rhythm ---- */
body.refined .section{padding:7.5rem 0}
body.refined .section:has(.sec-head){padding-top:7.5rem}
body.refined .sec-head{margin-bottom:3.2rem;gap:2.5rem}
body.refined .sec-head > div{max-width:54ch}
body.refined .sec-head p{font-size:1.02rem;line-height:1.62;color:var(--muted);margin-top:1.15rem}
body.refined .grid{gap:1.4rem}

/* ---- the destination card, rebuilt around type ------------------------
   Structure top to bottom: a meta line, a hairline, the name, the note,
   a hairline, the price row. The old photo well becomes a tall field for
   the place name and a ghosted airport code — the code is the only
   decoration, and it is real information rather than an ornament. */
body.refined .card{
  --pad:1.55rem;
  border-radius:20px;
  padding:0;
  min-height:310px;
}
body.refined .card .art{
  position:relative;aspect-ratio:auto;min-height:132px;
  margin:0;border-radius:0;background:none;box-shadow:none;transform:none;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:var(--pad) var(--pad) 0;overflow:visible;
}
body.refined .card .art::after,
body.refined .card .art::before{display:none}
body.refined .card .art .scene{display:none}
/* the tag becomes a quiet label, not a floating pill on an image */
body.refined .card .art .tag{
  position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;border-radius:0;padding:0;
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--amber-2);transform:none;
}
[data-theme="light"] body.refined .card .art .tag{color:#ffe86b}
/* the airport code, set large and hollow, anchored to the card's corner */
body.refined .card .art .code{
  position:absolute;right:var(--pad);top:calc(var(--pad) - .34em);
  font-family:var(--font-display);font-weight:800;
  font-size:3.1rem;line-height:1;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1.2px var(--muted);
  opacity:1;transition:-webkit-text-stroke-color .45s;
}
body.refined .card:hover .art .code{-webkit-text-stroke-color:var(--accent-fill)}
body.refined .card .body{
  padding:0 var(--pad) var(--pad);gap:0;transform:none;
  display:flex;flex-direction:column;flex:1;
}
body.refined .card .body h3{
  font-size:1.62rem;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  margin:0 0 .5rem;max-width:11ch;
}
body.refined .card .body p{
  font-size:.94rem;line-height:1.58;color:var(--muted);margin:0 0 1.5rem;max-width:30ch;
}
body.refined .card .meta{
  margin-top:auto;padding-top:1.05rem;border-top:0;position:relative;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
/* the rule under the price row is a hairline that grows into the accent */
body.refined .card .meta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-soft);
}
body.refined .card .meta::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent-fill);
  transition:width .55s cubic-bezier(.16,.84,.28,1);
}
body.refined .card:hover .meta::after{width:100%}
body.refined .card .price{
  font-size:1.5rem;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
body.refined .card .price small{
  font-size:.76rem;font-weight:500;letter-spacing:.002em;color:var(--dim);margin-left:.42rem;
}
body.refined .card .link{font-size:.82rem;font-weight:700;color:var(--amber-2);gap:.4rem}
[data-theme="light"] body.refined .card .link{color:#ffe86b}
body.refined .card:hover .link{letter-spacing:.002em}
body.refined .card .link::after{width:13px;height:13px}

/* ---- the feature post, without its photo ---- */
body.refined .feature-post{
  grid-template-columns:1fr;border-radius:20px;min-height:0;margin-bottom:1.4rem;
}
body.refined .feature-post .art{display:none}
body.refined .feature-post .body{padding:2.6rem 2.8rem;gap:0;max-width:60ch}
body.refined .feature-post .post-meta{margin-bottom:1.4rem;gap:.85rem}
body.refined .feature-post h3{
  font-size:clamp(1.8rem,1rem + 1.9vw,2.55rem);font-weight:800;
  letter-spacing:-.032em;line-height:1.06;margin:0 0 1rem;
}
body.refined .feature-post p{font-size:1.06rem;line-height:1.6;color:var(--muted);margin:0 0 1.6rem}
body.refined .feature-post .link{font-size:.86rem;font-weight:700}

/* the three guide cards below it read as a set with the feature */
body.refined .grid-3 .card .art{min-height:104px}
body.refined .grid-3 .card .art .code{display:none}
body.refined .grid-3 .card .post-meta{
  margin:0;gap:.7rem;font-size:.78rem;font-weight:600;color:var(--muted);
}
body.refined .grid-3 .card .post-meta b{color:var(--amber-2);font-weight:700}
[data-theme="light"] body.refined .grid-3 .card .post-meta b{color:#ffe86b}
body.refined .grid-3 .card .body h3{font-size:1.3rem;max-width:20ch;margin-top:.75rem}
body.refined .grid-3 .card .body p{margin-bottom:0}

/* ---- hotel rows, tightened ---- */
body.refined .hotel{
  grid-template-columns:1fr;gap:0;padding:1.55rem 1.7rem;border-radius:18px;
}
body.refined .hotel .art{display:none}
body.refined .hotel .info{gap:0}
body.refined .hotel .info .loc{
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.4rem;
}
body.refined .hotel .info :is(h3,h4){font-size:1.3rem;font-weight:800;letter-spacing:-.026em;margin:0 0 .75rem}
body.refined .hotel .score{margin:0 0 .95rem;max-width:190px}
body.refined .hotel .perks{gap:.35rem;margin:0 0 1.15rem}
body.refined .hotel .perks span{
  font-size:.78rem;font-weight:500;color:var(--muted);
  border:0;background:var(--lg-tint-strong);padding:.3rem .6rem;border-radius:99px;
}
body.refined .hotel .foot{padding-top:1.05rem;border-top:1px solid var(--line-soft)}
body.refined .hotel .foot .price{font-size:1.62rem;font-weight:800;letter-spacing:-.03em;color:var(--text)}
body.refined .hotel .foot .price small{font-size:.74rem;font-weight:500;color:var(--dim);letter-spacing:.002em}
body.refined .hotel .foot .was{font-size:.86rem;color:var(--dim)}

/* ---- the figures readout, as a single instrument ---- */
body.refined .readout{border-radius:18px;margin-top:4rem}
body.refined .readout > div{padding:1.7rem 1.8rem;gap:.2rem}
body.refined .readout .v{font-size:2.5rem;font-weight:800;letter-spacing:-.038em;color:var(--text)}
body.refined .readout .k{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-2)}
[data-theme="light"] body.refined .readout .k{color:#ffe86b}
body.refined .readout .sub{font-size:.88rem;color:var(--muted);margin-top:.5rem;line-height:1.5}

/* ---- how it works ---- */
body.refined .steps{gap:2rem}
body.refined .step{padding:0 .5rem;text-align:left}
body.refined .step .num{
  margin:0 0 1.15rem;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--accent-ink);
  display:inline-block;padding:.26rem .6rem;border-radius:4px;background:var(--accent-fill);
}
body.refined .steps::before{display:none}
body.refined .step h3{font-size:1.24rem;font-weight:800;letter-spacing:-.026em;margin-bottom:.6rem}
body.refined .step p{font-size:.95rem;line-height:1.6}

/* ---- newsletter ---- */
body.refined .boarding{border-radius:20px}
body.refined .boarding .l{padding:2.8rem}
body.refined .boarding .r{padding:2.8rem}
body.refined .boarding h2{font-size:clamp(1.6rem,1rem + 1.5vw,2.1rem);font-weight:800;letter-spacing:-.03em;
  display:block;background:none;color:var(--text);padding:0;margin:.2rem 0 .8rem;box-shadow:none}
body.refined .boarding p{font-size:1rem;color:var(--muted);line-height:1.6}

/* ---- hero, without a photograph ---- */
body.refined .hero-copy .lead{font-size:1.12rem;line-height:1.6;max-width:42ch;color:var(--muted)}
body.refined .hero-stack{gap:1.15rem;margin-top:2.1rem}
body.refined .stat-row .val{font-size:1.32rem;font-weight:800;letter-spacing:-.028em}
body.refined .stat-row .sub{font-size:.88rem;color:var(--muted);margin-top:.18rem}
body.refined .hero-actions{margin-top:2.3rem}
body.refined .telemetry{margin-top:2.3rem;border-radius:14px}
body.refined .telemetry > div{padding:.75rem 1rem}
body.refined .telemetry .v{font-size:.95rem;font-weight:800;letter-spacing:-.02em}
body.refined .telemetry .k{font-size:.72rem;font-weight:600;color:var(--dim)}
/* the route map is the only picture left, so give it room */
body.refined .route-map{max-width:none}
body.refined .route-map .pin-label{font-size:12px;font-weight:700}
body.refined .route-map .pin-sub{font-size:9.5px}

/* ---- footer ---- */
body.refined .footer{padding-top:4.5rem}
body.refined .footer-grid{gap:3rem;margin-bottom:3rem}
body.refined .footer :is(h4,.fh){font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:1.1rem}
body.refined .footer ul{gap:.7rem}
body.refined .footer ul a{font-size:.95rem}
body.refined .footer .about{font-size:.95rem;line-height:1.62}
body.refined .disclosure{padding:1.35rem 1.6rem;font-size:.9rem;line-height:1.6;border-radius:14px}
body.refined .footer-status{padding:.85rem 1.3rem;border-radius:12px;gap:1.8rem}

@media (max-width:760px){
  body.refined .section{padding:5rem 0}
  body.refined .section:has(.sec-head){padding-top:5rem}
  body.refined .card{min-height:0}
  body.refined .card .art .code{font-size:2.3rem}
  body.refined .feature-post .body{padding:2rem}
  body.refined .step{padding:0}
}

/* the feature post gets its facts alongside, rather than dead space —
   every figure here already appears in the guide itself */
body.refined .feature-post{display:grid;grid-template-columns:1.35fr .65fr}
body.refined .feature-post .body{max-width:none;padding-right:2.2rem}
body.refined .feature-facts{
  align-self:stretch;display:grid;align-content:center;gap:0;
  padding:2.6rem 2.8rem 2.6rem 2.2rem;
  border-left:1px solid var(--line-soft);
}
body.refined .feature-facts > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-soft);
}
body.refined .feature-facts > div:last-child{border-bottom:0}
body.refined .feature-facts .k{font-size:.8rem;font-weight:600;color:var(--dim);white-space:nowrap}
body.refined .feature-facts .v{
  font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:right;
}
@media (max-width:900px){
  body.refined .feature-post{grid-template-columns:1fr}
  body.refined .feature-facts{border-left:0;border-top:1px solid var(--line-soft);padding:1.6rem 2rem 2rem}
  body.refined .feature-post .body{padding-right:2rem}
}


/* =========================================================================
   FUTURE PASS
   1. globe   2. serif dropped   3. ambient life   4. exposed structure
   5. kinetic numerals            6. data density
   ========================================================================= */

/* ---- 1. the globe ---- */
.route-map{perspective:1200px}
.gg-globe{
  width:100%;height:auto;overflow:visible;color:var(--text);
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.16,.84,.28,1);
  will-change:transform;
}
.gg-limb{stroke:var(--line);stroke-width:1.1;stroke-opacity:.9}
/* The graticule is the instrument's ruling: present enough to read as a
   measured object, faint enough that the coastline still leads. */
.gg-graticule{stroke:currentColor;stroke-opacity:.10;stroke-width:.55}
/* Coastlines carry the globe. At .10 fill they read as a smudge on a dark
   ground, so the fill lifts and the shoreline gets a real stroke — the
   continents have to be identifiable for the route to mean anything. */
.gg-land{fill:currentColor;fill-opacity:.17;stroke:currentColor;stroke-opacity:.58;stroke-width:.8;
  stroke-linejoin:round}
[data-theme="light"] .gg-land{fill-opacity:.15;stroke-opacity:.5}
[data-theme="light"] .gg-graticule{stroke-opacity:.13}
.gg-route{stroke:var(--accent-fill);stroke-width:1.9;stroke-linecap:round;
  stroke-dasharray:3 7;animation:gg-dash 22s linear infinite}
@keyframes gg-dash{to{stroke-dashoffset:-200}}
.gg-plane{fill:var(--accent-fill)}
.gg-dot{fill:var(--accent-fill)}
.gg-pin.is-final .gg-dot{fill:var(--accent-fill)}
.gg-ring{stroke:var(--accent-fill);stroke-opacity:.35;stroke-width:1}
.gg-pin.is-final .gg-ring{stroke-opacity:.7;animation:gg-ping 3.4s ease-out infinite}
@keyframes gg-ping{0%{r:7;stroke-opacity:.8}70%,100%{r:22;stroke-opacity:0}}
.gg-code{font-family:var(--font-display);font-size:12.5px;font-weight:800;
  letter-spacing:-.01em;fill:var(--text)}
.gg-sub{font-family:var(--font-body);font-size:8.5px;font-weight:600;
  letter-spacing:.14em;fill:var(--dim)}
/* the crawlable, readable version of the same thing */
.gg-legend{
  list-style:none;margin:1.1rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
}
.gg-legend li{display:flex;align-items:baseline;gap:.45rem;
  padding:.32rem .7rem;border-radius:99px;background:var(--lg-tint-strong);
  box-shadow:inset 0 1px 0 var(--lg-rim-top)}
.gg-legend b{font-family:var(--font-display);font-weight:800;font-size:.8rem;color:var(--amber-2)}
[data-theme="light"] .gg-legend b{color:#7a6100}
/* On the pale ground the neon yellow drops to about 1.2:1 and the route
   disappears. A darker gold holds the same hue at 4.4:1, which clears the
   3:1 floor for graphical objects. */
[data-theme="light"] .gg-route{stroke:#8a6d00}
[data-theme="light"] .gg-dot,
[data-theme="light"] .gg-plane{fill:#8a6d00}
[data-theme="light"] .gg-ring{stroke:#8a6d00}
[data-theme="light"] .gg-limb{stroke:rgba(0,0,0,.22)}
.gg-legend span{font-size:.78rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .gg-route,.gg-pin.is-final .gg-ring{animation:none}
  .gg-globe{transition:none}
}

/* ---- 2. the serif is gone ---------------------------------------------
   Newsreader was the most past-tense thing on the site. Prose moves to the
   body face at a longer measure and looser leading, which keeps it readable
   without the magazine accent. */
:root{--font-serif:var(--font-body)}
.post-body p,.post-body li,.post-body blockquote,
.lead,.page-head p.lead,.post-hero .lead,.hero-copy .lead{font-family:var(--font-body)}
.post-body{font-size:1.06rem;line-height:1.68;letter-spacing:-.004em}
.post-body > p:first-of-type{font-size:1.22rem;line-height:1.52;font-weight:500;letter-spacing:-.014em}
.post-body > p:first-of-type::first-letter{
  font-family:var(--font-display);font-weight:800;font-size:3.1em;line-height:.84;
}
.post-body blockquote{
  font-family:var(--font-display);font-style:normal;font-weight:700;
  font-size:1.42rem;line-height:1.26;letter-spacing:-.028em;
}
.lead,.hero-copy .lead{font-weight:400;letter-spacing:-.008em}
/* a dead reference left over from the minimalist pass */
.post-hero .content{animation:none}

/* ---- 3. ambient life ---------------------------------------------------
   Entry is an assembly, not a fade: pieces arrive slightly behind and
   slightly blurred, then settle. One easing across the whole site. */
/* The hidden state is gated on .has-rise, which the script adds only once it
   knows it can reveal again. Without JS, with a broken observer, or on an
   older engine, the content is simply visible — an entrance animation must
   never be the thing standing between a reader and the page. */
html.has-rise body.refined [data-rise]{
  opacity:0;transform:translate3d(0,26px,-40px);filter:blur(6px);
  transition:opacity .85s cubic-bezier(.16,.84,.28,1),
             transform .85s cubic-bezier(.16,.84,.28,1),
             filter .85s cubic-bezier(.16,.84,.28,1);
}
html.has-rise body.refined [data-rise].in{
  opacity:1;transform:none;filter:blur(0);
}
@media (prefers-reduced-motion:reduce){
  html.has-rise body.refined [data-rise]{opacity:1;transform:none;filter:none;transition:none}
}
/* the hero layers drift apart as you scroll away from them */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body.refined .hero-copy{animation:gg-lift linear both;animation-timeline:scroll();animation-range:0 70vh}
    body.refined .route-map{animation:gg-sink linear both;animation-timeline:scroll();animation-range:0 70vh}
    @keyframes gg-lift{to{transform:translateY(-26px);opacity:.72}}
    @keyframes gg-sink{to{transform:translateY(14px) scale(.985);opacity:.8}}
  }
}
/* every control acknowledges the pointer */
body.refined .card,body.refined .hotel{--lift:0}
body.refined .btn:active,body.refined .chip:active{transform:translateY(0) scale(.97)}

/* ---- 4. exposed structure ---------------------------------------------
   Instruments show their measurement. A tick rule on the leading edge of
   each panel, and a faint field behind the glass so the transparency has
   a structure to reveal rather than a smooth gradient. */
body.refined .section > .container{position:relative}
body.refined .hud,body.refined .card,body.refined .hotel,body.refined .feature-post,
body.refined .readout,body.refined .boarding,body.refined .telemetry{position:relative}
body.refined .card::before,
body.refined .feature-post::before,
body.refined .readout::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:3;
  pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(90deg,#000,#000 22%,transparent 46%);
  mask-image:linear-gradient(90deg,#000,#000 22%,transparent 46%);
}
[data-theme="light"] body.refined .card::before,
[data-theme="light"] body.refined .feature-post::before,
[data-theme="light"] body.refined .readout::before{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 1px,transparent 1px 13px);
}
/* a measurement field behind the glass */
body.refined .hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(110% 80% at 62% 46%,#000 12%,transparent 72%);
  mask-image:radial-gradient(110% 80% at 62% 46%,#000 12%,transparent 72%);
}
[data-theme="light"] body.refined .hero::after{
  background-image:
    linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px);
}
body.refined .hero .hero-grid,body.refined .hero .ng-portal,body.refined .hero .ng-dateline{z-index:4}

/* ---- 5. kinetic numerals ---------------------------------------------- */
.gg-roll{display:inline-flex;overflow:hidden;vertical-align:baseline;line-height:1}
.gg-roll .col{display:block;overflow:hidden;height:1em}
.gg-roll .col i{
  display:block;font-style:normal;
  transition:transform .95s cubic-bezier(.16,.84,.28,1);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.gg-roll .col i{transition:none}}

/* ---- 6. data density --------------------------------------------------- */
.nav-status{gap:.75rem;font-size:.76rem;font-weight:600;color:var(--muted)}
.nav-status .sep{width:1px;height:12px;background:var(--line-soft)}
.nav-status .live{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;
  color:var(--amber-2);font-variant-numeric:tabular-nums;
}
[data-theme="light"] .nav-status .live{color:#7a6100}
@media (max-width:1150px){.nav-status .wide{display:none}}
/* the hero telemetry gains a unit row and a state lamp */
body.refined .telemetry > div{position:relative}
body.refined .telemetry .k{display:flex;align-items:center;gap:.4rem}
body.refined .telemetry .k::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--accent-fill);
  opacity:.55;flex:0 0 4px;
}

/* each digit in a rolling column is exactly 1em tall, so translateY(-Ne m)
   lands precisely on digit N */
.gg-roll .col i s{display:block;height:1em;line-height:1;text-decoration:none}
.gg-roll .col{height:1em}

/* the globe is much larger than the placeholder map was, so the two floating
   readouts move to the corners instead of sitting over the sphere */
body.refined .route-map{min-height:0}
/* The exposed-structure pass gives every panel position:relative so its tick
   rule can anchor. These two float over the map and must stay absolute, so
   they win it back here; max-content stops them stretching the full column. */
body.refined .map-panels .hud{position:absolute;width:max-content;max-width:min(60%,17rem)}
body.refined .map-panels .hud::before{display:none}
body.refined .map-panels .hud:first-child{left:0;top:-.4rem;right:auto;bottom:auto}
body.refined .map-panels .hud:last-child{right:0;bottom:-.4rem;left:auto;top:auto}
@media (max-width:1250px){
  body.refined .map-panels{position:static;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
  body.refined .map-panels .hud{position:static;width:auto;max-width:none}
}
@media (max-width:700px){
  body.refined .gg-legend{gap:.4rem}
  body.refined .gg-legend li{padding:.28rem .55rem}
  body.refined .gg-legend span{font-size:.72rem}
}


/* =========================================================================
   RESTRAINT PASS
   Two corrections, both about weight rather than style.

   1. SPACING. The booking console is pulled up 3.25rem so it overlaps the
      hero plate. The plate's bottom padding was 4rem, so that overlap left
      only 12px of air under the telemetry strip while the strip had 37px
      above it — the small readouts read as crowded against the console.
      The padding now equals the overlap plus a real gap, which also makes
      the plate evenly padded top and bottom.

   2. SHADOWS. The stacks had grown to seven and eight layers ending in a
      110px blur, which on a large panel is not a shadow but a fog bank that
      bleeds across everything near it. These keep the near layers that make
      an edge crisp and cut the long-range ones that were doing the bleeding.
      ========================================================================= */

/* ---- 1. the hero plate gives the console room ---- */
body.refined .hero-grid{padding-bottom:calc(3.25rem + 2.5rem)}

/* the two floating readouts align to the plate's content edges, so the
   journey chip sits on the same baseline as the telemetry strip opposite it */
body.refined .map-panels .hud:first-child{top:0;left:0;right:auto;bottom:auto}
body.refined .map-panels .hud:last-child{bottom:0;right:0;left:auto;top:auto}

/* ---- 2. shadows, brought back to a believable falloff ---- */
:root{
  --e1:
    0 1px 2px rgba(0,0,0,.22),
    0 2px 4px -1px rgba(0,0,0,.18);
  --e2:
    0 1px 2px rgba(0,0,0,.24),
    0 3px 6px -1px rgba(0,0,0,.20),
    0 8px 14px -6px rgba(0,0,0,.24);
  --e3:
    0 1px 2px rgba(0,0,0,.26),
    0 4px 8px -2px rgba(0,0,0,.22),
    0 12px 20px -8px rgba(0,0,0,.26),
    0 24px 34px -20px rgba(0,0,0,.34);
  --e4:
    0 2px 4px rgba(0,0,0,.28),
    0 6px 12px -3px rgba(0,0,0,.24),
    0 18px 28px -10px rgba(0,0,0,.28),
    0 34px 48px -26px rgba(0,0,0,.40);
}
[data-theme="light"]{
  --e1:
    0 1px 2px rgba(16,16,16,.05),
    0 2px 4px -1px rgba(16,16,16,.04);
  --e2:
    0 1px 2px rgba(16,16,16,.055),
    0 3px 6px -1px rgba(16,16,16,.05),
    0 8px 14px -6px rgba(16,16,16,.06);
  --e3:
    0 1px 2px rgba(16,16,16,.06),
    0 4px 8px -2px rgba(16,16,16,.055),
    0 12px 20px -8px rgba(16,16,16,.065),
    0 24px 34px -20px rgba(16,16,16,.09);
  --e4:
    0 2px 4px rgba(16,16,16,.07),
    0 6px 12px -3px rgba(16,16,16,.06),
    0 18px 28px -10px rgba(16,16,16,.07),
    0 34px 48px -26px rgba(16,16,16,.11);
}

/* the ground-contact shadow is a contact patch, not a pool */
.card::after,.hotel::after,.b-tile::after{
  left:14%;right:14%;bottom:-8px;height:14px;
  background:rgba(0,0,0,.6);filter:blur(9px);opacity:.34;
}
[data-theme="light"] .card::after,
[data-theme="light"] .hotel::after,
[data-theme="light"] .b-tile::after{
  background:rgba(16,16,16,.22);filter:blur(10px);opacity:.30;
}
.card:hover::after,.hotel:hover::after,.b-tile:hover::after{
  opacity:.5;transform:translateY(10px) scaleX(1.06);filter:blur(16px);
}

/* the plate's own accent halo was reaching 60px past its edge */
.ng-portal{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 34px -20px var(--amber-glow),var(--e2)}
[data-theme="light"] .ng-portal{box-shadow:0 0 0 1px rgba(16,16,16,.10),0 0 30px -22px var(--amber-glow),var(--e2)}


/* =========================================================================
   COMPACT PASS (homepage)
   More content per screen, at the cost of air rather than of clarity.

   The rule followed throughout: cut the space BETWEEN things before cutting
   the space INSIDE them, and never cut leading. Padding around a section is
   dead space a reader scrolls past; padding inside a card is what stops the
   card feeling cheap, and line-height is what keeps it readable. So section
   padding takes the biggest cut (7.5rem -> 4.5rem), block padding takes a
   small one, and type metrics are left alone.
   ========================================================================= */

/* ---- the gaps between sections ---- */
body.refined .section{padding:4.5rem 0}
body.refined .section:has(.sec-head){padding-top:4.5rem}
body.refined .sec-head{margin-bottom:2.1rem;gap:2rem}
body.refined .sec-head p{margin-top:.85rem}
body.refined .grid{gap:1.15rem}

/* ---- destination cards ---- */
body.refined .card{--pad:1.3rem;min-height:0}
body.refined .card .art{min-height:104px}
body.refined .card .body h3{font-size:1.5rem;margin:0 0 .42rem}
body.refined .card .body p{margin:0 0 1.1rem}
body.refined .card .meta{padding-top:.85rem}
body.refined .card .art .code{font-size:2.7rem}

/* ---- the feature post and the guide cards under it ---- */
body.refined .feature-post{margin-bottom:1.15rem}
body.refined .feature-post .body{padding:2rem 2.2rem}
body.refined .feature-post .post-meta{margin-bottom:1rem}
body.refined .feature-post h3{margin:0 0 .8rem}
body.refined .feature-post p{margin:0 0 1.2rem}
body.refined .grid-3 .card .art{min-height:84px}
body.refined .grid-3 .card .body h3{margin-top:.55rem}

/* ---- hotel rows ---- */
body.refined .hotel{padding:1.25rem 1.4rem}
body.refined .hotel .info :is(h3,h4){margin:0 0 .55rem}
body.refined .hotel .score{margin:0 0 .7rem}
body.refined .hotel .perks{margin:0 0 .85rem}
body.refined .hotel .foot{padding-top:.85rem}

/* ---- figures readout ---- */
body.refined .readout{margin-top:2.25rem}
body.refined .readout > div{padding:1.35rem 1.45rem}
body.refined .readout .sub{margin-top:.38rem}

/* ---- how it works ---- */
body.refined .steps{gap:1.5rem}
body.refined .step .num{margin:0 0 .85rem}
body.refined .step h3{margin-bottom:.45rem}

/* ---- newsletter ---- */
body.refined .boarding .l,body.refined .boarding .r{padding:2.1rem}
body.refined .boarding h2{margin:.15rem 0 .6rem}

/* ---- hero: the top padding was the single largest block of dead space
   above the fold. The bottom padding is left alone because it is what
   holds the console off the telemetry strip. ---- */
body.refined .hero-grid{padding-top:4rem}
body.refined .hero-stack{gap:.9rem;margin-top:1.65rem}
body.refined .hero-actions{margin-top:1.8rem}
body.refined .telemetry{margin-top:1.8rem}

/* ---- footer ---- */
body.refined .footer{padding-top:3.25rem}
body.refined .footer-grid{gap:2.2rem;margin-bottom:2.2rem}
body.refined .footer :is(h4,.fh){margin-bottom:.8rem}
body.refined .footer ul{gap:.55rem}
body.refined .disclosure{padding:1.1rem 1.3rem}

@media (max-width:760px){
  body.refined .section{padding:3.25rem 0}
  body.refined .section:has(.sec-head){padding-top:3.25rem}
  body.refined .sec-head{margin-bottom:1.6rem}
  body.refined .feature-post .body{padding:1.6rem}
  body.refined .hero-grid{padding-top:2.5rem}
}


/* =========================================================================
   TWO CORRECTIONS

   1. The measurement ticks on the top edge of each card were drawn from
      left:0 with square ends, while the card is rounded by 20px and does
      not clip its overflow. So the first ticks were painted out over the
      corner curve, floating past the card's edge. Inset them by the corner
      radius and they sit on the straight part of the edge where they belong.

   2. The booking console lit its whole frame amber on focus, with a 50px
      outward glow that jumped from field to field as you tabbed. Removed.
      Focus indication is NOT removed — it moves onto the control itself as
      a crisp ring in the panel's own ink, which is both quieter and easier
      to locate than a glow around a panel the size of the console.
   ========================================================================= */

/* ---- 1. ticks stay inside the corner radius ---- */
body.refined .card::before{left:20px;right:20px}
body.refined .feature-post::before{left:20px;right:20px}
body.refined .readout::before{left:18px;right:18px}

/* ---- 2. the console stops glowing ---- */
.console .hud:focus-within{
  border-color:transparent;
  box-shadow:var(--rim),var(--e2);
}
/* the ring lands on the focused control, in the panel's own ink so it stays
   legible whichever way the console is inverted */
.console .field input:focus,
.console .field select:focus{
  border-color:currentColor;
  box-shadow:none;
}
.console .field input:focus-visible,
.console .field select:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}


/* =========================================================================
   LIQUID GLASS NAV  —  homepage only, for review before adoption
   Built to the peg's language rather than copied from it: a frosted bar with
   a bright glossy top rim, controls that sit in the glass as recessed wells,
   one filled accent segment marking position, and layered soft depth. The
   peg's neon green becomes our yellow.

   Scoped to body.refined so the other seven pages keep the current nav until
   this is signed off. Deleting this block restores them to identical.
   ========================================================================= */

/* ---- the bar ---- */
body.refined .nav{padding:.85rem 0}
body.refined .nav .nav-inner{
  position:relative;
  height:64px;
  padding:0 .55rem 0 .8rem;
  gap:.9rem;
  border-radius:999px;
  overflow:hidden;                 /* keeps the sheen inside the pill */
  background-color:rgba(255,255,255,.055);
  background-image:none;
  -webkit-backdrop-filter:blur(34px) saturate(1.5);
  backdrop-filter:blur(34px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),          /* the glossy top edge */
    inset 0 0 0 1px rgba(255,255,255,.085),
    inset 0 -20px 34px -30px rgba(255,255,255,.5),/* light pooling at the base */
    0 1px 2px rgba(0,0,0,.30),
    0 10px 24px -10px rgba(0,0,0,.42);
}
/* a single diagonal sheen, fixed rather than pointer-tracked — the surface
   should look lit, not animated */
body.refined .nav .nav-inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(148deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.02) 34%,
    rgba(255,255,255,0) 58%,
    rgba(255,255,255,.09) 100%);
}
body.refined .nav .nav-inner > *{position:relative;z-index:1}
body.refined .nav.scrolled .nav-inner{height:56px}

/* ---- links become segments ---- */
body.refined .nav-links{gap:.15rem}
body.refined .nav-links a{
  display:block;padding:.52rem .82rem;border-radius:999px;
  font-size:.84rem;font-weight:600;letter-spacing:-.006em;
  color:var(--muted);
  transition:color .25s,background-color .25s,box-shadow .25s;
}
body.refined .nav-links a::after{display:none !important}   /* the old underline */
body.refined .nav-links a:hover{
  color:var(--text);
  background-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
/* the one filled segment: this is where the accent earns its place */
body.refined .nav-links a.active,
body.refined .nav-links a[aria-current="page"]{
  color:var(--accent-ink);
  background-color:var(--accent-fill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 2px 6px -1px rgba(0,0,0,.28);
}

/* ---- the readout sits in a recessed well ---- */
body.refined .nav-status{
  padding:.34rem .68rem;border-radius:999px;
  background-color:rgba(0,0,0,.20);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ---- icon buttons as glass wells ---- */
body.refined .theme-toggle,
body.refined .nav-toggle{
  width:38px;height:38px;border-radius:50%;
  background-color:rgba(255,255,255,.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.26);
  transition:background-color .25s,box-shadow .25s;
}
body.refined .theme-toggle:hover,
body.refined .nav-toggle:hover{
  background-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.10),0 2px 6px rgba(0,0,0,.3);
}

/* ---- the call to action is the second accent object ---- */
body.refined .nav-cta .btn.sm{
  border-radius:999px;padding:.58rem 1.05rem;font-size:.84rem;font-weight:700;
  color:var(--accent-ink);background-color:var(--accent-fill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 2px 8px -2px rgba(0,0,0,.32) !important;
}
body.refined .nav-cta .btn.sm:hover{filter:brightness(1.06)}

/* ---- brand mark keeps the accent, in a well ---- */
body.refined .brand .mark{
  border-radius:13px;background:var(--accent-fill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 8px -3px rgba(0,0,0,.4);
}
body.refined .brand .mark svg{stroke:var(--accent-ink)}

/* =========================================================================
   LIGHT THEME
   The bar stays light chrome on the pale ground, so the glass reads as a
   frosted white pane rather than a dark one. The accent segment is unchanged
   because black ink on yellow is the one pairing that works in both themes.
   ========================================================================= */
[data-theme="light"] body.refined .nav .nav-inner{
  background-color:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(34px) saturate(1.35);
  backdrop-filter:blur(34px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(16,16,16,.06),
    0 1px 2px rgba(16,16,16,.05),
    0 10px 24px -12px rgba(16,16,16,.14);
}
[data-theme="light"] body.refined .nav .nav-inner::after{
  background:linear-gradient(148deg,
    rgba(255,255,255,.9) 0%,rgba(255,255,255,.35) 36%,
    rgba(255,255,255,.15) 58%,rgba(255,255,255,.75) 100%);
}
[data-theme="light"] body.refined .nav-links a{color:#4a4a4a}
[data-theme="light"] body.refined .nav-links a:hover{
  color:#101010;background-color:rgba(16,16,16,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] body.refined .nav-status{
  background-color:rgba(16,16,16,.05);
  box-shadow:inset 0 1px 2px rgba(16,16,16,.07),inset 0 0 0 1px rgba(16,16,16,.04);
}
[data-theme="light"] body.refined .theme-toggle,
[data-theme="light"] body.refined .nav-toggle{
  background-color:rgba(16,16,16,.05);color:#101010;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(16,16,16,.05);
}
[data-theme="light"] body.refined .theme-toggle:hover,
[data-theme="light"] body.refined .nav-toggle:hover{background-color:rgba(16,16,16,.10)}

/* ---- narrow widths: the dropdown inherits the same material ---- */
@media (max-width:900px){
  body.refined .nav .nav-inner{height:58px;border-radius:28px}
  body.refined .nav-links{gap:.2rem}
  body.refined .nav-links a{padding:.7rem .85rem}
}

/* the pill padding leaves less room than the old bare links, so nothing in
   the bar is allowed to wrap; the links tighten instead as space runs out */
body.refined .nav-links a,
body.refined .nav-cta .btn.sm,
body.refined .nav-status{white-space:nowrap}
body.refined .nav-links{flex-wrap:nowrap}
@media (max-width:1250px){
  body.refined .nav-links a{padding:.5rem .62rem;font-size:.81rem}
  body.refined .nav .nav-inner{gap:.6rem;padding:0 .5rem 0 .7rem}
}
@media (max-width:1050px){
  body.refined .nav-links a{padding:.48rem .5rem;font-size:.78rem}
  body.refined .brand .tag{display:none}
}

/* The bar clips to its pill, so nothing inside may be taller than it.
   "Gallivanting Gadabout" was wrapping to two lines and, with the tag line
   under it, overflowed 64px and lost its ascenders. One line each. */
body.refined .brand .name{white-space:nowrap}
body.refined .brand .tag{white-space:nowrap}
body.refined .brand{min-width:0;flex:0 0 auto}
@media (max-width:1180px){
  body.refined .brand .name{font-size:.92rem}
}

/* FIT.
   The pill padding the peg calls for costs about 90px more than the bare
   links did, which overflowed the 3/4 content column. Two moves: the bar
   gets its own slightly wider measure (it is chrome framing the page, not a
   content plate, and at 88% it is still nowhere near full-bleed), and the
   controls tighten. Both are needed — width alone would break again at the
   next breakpoint down. */
body.refined .nav .nav-inner{width:min(88%,1280px);max-width:none;gap:.65rem}
body.refined .nav-links a{padding:.5rem .62rem}
body.refined .brand .name{font-size:.95rem}
body.refined .nav-status{padding:.32rem .6rem;gap:.55rem}
body.refined .nav-status .sep{display:none}
body.refined .nav-cta .btn.sm{padding:.55rem .9rem}
@media (max-width:1400px){
  body.refined .nav-status .wide{display:none}
}

/* Between the mobile breakpoint (900px) and about 1150px the bar still has
   all six links plus the clock and the CTA, which is more than the measure
   holds. The clock is the least load-bearing thing in it, so it goes first. */
@media (max-width:1150px){
  body.refined .nav-status{display:none}
  body.refined .nav-links a{padding:.45rem .52rem;font-size:.79rem}
  body.refined .brand .name{font-size:.9rem}
  body.refined .brand .tag{display:none}
}

/* MOBILE DROPDOWN REPAIR.
   Two faults introduced by the glass bar above: overflow:hidden (added to
   keep the sheen inside the pill) clipped the dropdown, and the blanket
   position:relative on the bar's children overrode the absolute positioning
   the dropdown relies on under 900px. The sheen is clipped by border-radius
   instead, which needs no overflow, and the dropdown gets its position back
   at a specificity that holds. */
body.refined .nav .nav-inner{overflow:visible}
body.refined .nav .nav-inner::after{border-radius:inherit}
@media (max-width:900px){
  body.refined .nav .nav-inner > .nav-links{
    position:absolute;left:0;right:0;top:70px;
    flex-direction:column;flex-wrap:wrap;gap:0;
  }
  body.refined .nav .nav-inner > .nav-links a{
    display:block;width:100%;border-radius:12px;padding:.75rem .85rem;
  }
}

/* the featured-route chip was wrapping its city pair at mid widths */
body.refined .map-panels .hud{max-width:min(78%,19rem)}
body.refined .map-panels .hud .v{white-space:nowrap}


/* =========================================================================
   NAV, SECOND PASS
   Two notes from review: it still did not read like the peg, and text had
   gone missing from the bar.

   WHY IT DID NOT READ LIKE THE PEG. The material was close but the setting
   was wrong. Glass only looks like glass when there is something luminous
   behind it to bend — every panel in the peg sits over smoky, lit, coloured
   depth. Our bar floats over a nearly flat charcoal page, so a 34px blur of
   almost nothing returned almost nothing, and it read as a grey pill. The
   fix is in two halves: put light behind the bar, then make the bar thinner,
   brighter-edged and glossier so it actually reveals that light.
   ========================================================================= */

/* ---- 1. light behind the glass -----------------------------------------
   body::before is already a fixed, full-viewport light-pool layer sitting
   under everything at z-index 0. Restated here with a warm bloom across the
   top, which is the band the nav sits in. This is what the blur now finds. */
body.refined::before{
  background:
    radial-gradient(78% 34% at 50% -10%, rgba(252,223,0,.11), transparent 64%),
    radial-gradient(40% 22% at 14% -4%, rgba(255,255,255,.09), transparent 68%),
    radial-gradient(44% 24% at 88% -2%, rgba(255,255,255,.06), transparent 68%),
    radial-gradient(58% 46% at 18% 12%,rgba(255,255,255,.055),transparent 62%),
    radial-gradient(48% 42% at 86% 30%,rgba(255,255,255,.04),transparent 64%),
    radial-gradient(64% 46% at 62% 78%,rgba(255,255,255,.032),transparent 66%),
    radial-gradient(40% 34% at 8% 62%,rgba(255,255,255,.028),transparent 66%);
}
[data-theme="light"] body.refined::before{
  background:
    radial-gradient(78% 34% at 50% -10%, rgba(252,223,0,.16), transparent 64%),
    radial-gradient(40% 22% at 14% -4%, rgba(0,0,0,.05), transparent 68%),
    radial-gradient(58% 46% at 18% 12%,rgba(0,0,0,.045),transparent 62%),
    radial-gradient(48% 42% at 86% 30%,rgba(0,0,0,.035),transparent 64%),
    radial-gradient(64% 46% at 62% 78%,rgba(0,0,0,.03),transparent 66%),
    radial-gradient(40% 34% at 8% 62%,rgba(0,0,0,.025),transparent 66%);
}

/* ---- 2. thinner, brighter, glossier ------------------------------------
   Tint drops from 5.5% to 3% so more comes through; blur and saturation go
   up so what comes through is soft and vivid; the top edge becomes a real
   specular hairline rather than a faint one; a bloom pools along the base. */
body.refined .nav{padding:1rem 0}
body.refined .nav .nav-inner{
  width:min(93%,1360px);max-width:none;
  height:66px;padding:0 .5rem 0 .75rem;gap:.7rem;
  background-color:rgba(255,255,255,.030);
  -webkit-backdrop-filter:blur(44px) saturate(1.85) brightness(1.06);
  backdrop-filter:blur(44px) saturate(1.85) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),            /* the glossy edge */
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 -26px 44px -32px rgba(255,255,255,.62), /* bloom along the base */
    inset 0 24px 40px -34px rgba(255,255,255,.5),
    0 1px 2px rgba(0,0,0,.34),
    0 14px 34px -14px rgba(0,0,0,.5),
    0 0 44px -22px rgba(252,223,0,.30);             /* the accent's ambience */
}
body.refined .nav .nav-inner::after{
  background:linear-gradient(146deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.04) 30%,
    rgba(255,255,255,0) 54%,
    rgba(255,255,255,.05) 78%,
    rgba(255,255,255,.15) 100%);
}
body.refined .nav.scrolled .nav-inner{height:58px}

/* ---- 3. the accent glows, the way the peg's green does ---- */
body.refined .nav-links a.active,
body.refined .nav-links a[aria-current="page"]{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 6px -1px rgba(0,0,0,.30),
    0 0 20px -3px rgba(252,223,0,.55);
}
body.refined .nav-cta .btn.sm{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 8px -2px rgba(0,0,0,.34),
    0 0 22px -4px rgba(252,223,0,.5) !important;
}
body.refined .brand .mark{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 8px -3px rgba(0,0,0,.42),
             0 0 18px -4px rgba(252,223,0,.45);
}
/* wells read as pressed into the glass rather than sitting on it */
body.refined .theme-toggle,body.refined .nav-toggle{
  width:40px;height:40px;
  background-color:rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -6px 12px -10px rgba(255,255,255,.5),
    0 1px 2px rgba(0,0,0,.3);
}
body.refined .nav-status{
  padding:.36rem .72rem;gap:.55rem;
  background-color:rgba(0,0,0,.24);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.055);
}

/* ---- 4. every label is back, and the bar is balanced -------------------
   Nothing in the header is hidden by width any more. The links are what
   give way instead: below 1280px they fold into the menu, because six of
   them plus the readout plus the call to action genuinely do not fit, and
   a cramped bar was the reason things were being hidden in the first place. */
body.refined .brand .tag{display:block !important}
body.refined .nav-status{display:flex !important}
body.refined .nav-status .wide{display:inline-flex !important}
body.refined .nav-status .sep{
  display:inline-block !important;width:1px;height:11px;
  background:rgba(255,255,255,.18);flex:0 0 1px;
}
[data-theme="light"] body.refined .nav-status .sep{background:rgba(16,16,16,.16)}
body.refined .brand .name{font-size:.95rem;white-space:nowrap}
body.refined .nav-links a{padding:.5rem .6rem;font-size:.83rem}

@media (max-width:1279px){
  body.refined .nav .nav-inner > .nav-links{
    display:none;position:absolute;left:0;right:0;top:74px;
    flex-direction:column;flex-wrap:wrap;gap:.15rem;
    padding:.6rem;border-radius:22px;
    background-color:var(--panel-solid);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--e3);
  }
  body.refined .nav .nav-inner > .nav-links.open{display:flex}
  body.refined .nav .nav-inner > .nav-links a{
    display:block;width:100%;border-radius:12px;padding:.72rem .85rem;font-size:.88rem;
  }
  body.refined .nav-toggle{display:block}
}
@media (max-width:900px){
  /* the phone keeps the compact bar: brand, menu, theme */
  body.refined .nav-status{display:none !important}
  body.refined .nav .nav-inner{height:58px;border-radius:30px;width:94%}
}

/* ---- light theme ---- */
[data-theme="light"] body.refined .nav .nav-inner{
  background-color:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(44px) saturate(1.5) brightness(1.03);
  backdrop-filter:blur(44px) saturate(1.5) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(16,16,16,.055),
    inset 0 -26px 44px -32px rgba(255,255,255,.9),
    0 1px 2px rgba(16,16,16,.05),
    0 14px 34px -16px rgba(16,16,16,.16),
    0 0 44px -22px rgba(252,223,0,.35);
}
[data-theme="light"] body.refined .nav .nav-inner::after{
  background:linear-gradient(146deg,
    rgba(255,255,255,.95) 0%,rgba(255,255,255,.4) 32%,
    rgba(255,255,255,.12) 56%,rgba(255,255,255,.8) 100%);
}
[data-theme="light"] body.refined .nav-status{
  background-color:rgba(16,16,16,.045);
  box-shadow:inset 0 1px 3px rgba(16,16,16,.07),inset 0 0 0 1px rgba(16,16,16,.04);
}
[data-theme="light"] body.refined .theme-toggle,
[data-theme="light"] body.refined .nav-toggle{
  background-color:rgba(16,16,16,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(16,16,16,.05);
}

/* The links missed staying inline at 1200px by 9px, which is not a reason to
   send six links into a hamburger on a common laptop width. A slightly wider
   measure and a little less padding buys ~30px, so the bar keeps everything
   inline down to 1200 and only folds below that. */
body.refined .nav .nav-inner{width:min(94%,1360px);gap:.6rem}
body.refined .nav-links a{padding:.5rem .56rem}
body.refined .nav-status{gap:.5rem;padding:.36rem .66rem}
@media (max-width:1279px){
  body.refined .nav .nav-inner > .nav-links{
    display:flex;position:static;flex-direction:row;flex-wrap:nowrap;
    gap:.15rem;padding:0;border-radius:0;background:none;box-shadow:none;
  }
  body.refined .nav .nav-inner > .nav-links a{
    display:block;width:auto;border-radius:999px;padding:.5rem .56rem;font-size:.83rem;
  }
  body.refined .nav-toggle{display:none}
}
@media (max-width:1199px){
  body.refined .nav .nav-inner > .nav-links{
    display:none;position:absolute;left:0;right:0;top:74px;
    flex-direction:column;flex-wrap:wrap;gap:.15rem;
    padding:.6rem;border-radius:22px;
    background-color:var(--panel-solid);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--e3);
  }
  body.refined .nav .nav-inner > .nav-links.open{display:flex}
  body.refined .nav .nav-inner > .nav-links a{width:100%;border-radius:12px;padding:.72rem .85rem;font-size:.88rem}
  body.refined .nav-toggle{display:block}
}

/* =========================================================================
   REFRACT MODE — REPAIR
   The material control was only ever wired to .lg, and .lg exists only on
   the two sample pages (glass-a / glass-b). On the real site the panels are
   .hud/.card/.hotel/etc, so picking "refract" set the attribute, relabelled
   the control and changed nothing you could see. "solid" worked because it
   alone had been given the real selectors; "blur" looked like it worked
   because blur is the resting state anyway.

   Safe to use url() unguarded here: glass.js resolves the mode through
   effective(), which downgrades refract -> blur when the probe fails, and
   only ever writes the RESOLVED value into data-lg-force. So the attribute
   being "refract" is itself the proof the engine accepts url() in
   backdrop-filter — which matters, because an unsupported url() invalidates
   the whole declaration and would take the blur down with it.
   ========================================================================= */
html[data-lg-force="refract"] :is(
  .nav .nav-inner,.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,
  .readout,.disclosure,.footer-status,.faq details,.rules,.a-pane,.a-strip,.b-tile
){
  -webkit-backdrop-filter:url(#lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
  backdrop-filter:url(#lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
}
/* the bigger planes read as thicker glass, so they get the deeper displacement */
html[data-lg-force="refract"] :is(.nav .nav-inner,.boarding,.feature-post,.readout){
  -webkit-backdrop-filter:url(#lg-refract-thick) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
  backdrop-filter:url(#lg-refract-thick) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
}
/* "blur" has to be stated too, otherwise it cannot override the homepage
   nav's own 44px declaration and the two modes look identical there */
html[data-lg-force="blur"] :is(
  .nav .nav-inner,.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,
  .readout,.disclosure,.footer-status,.faq details,.rules,.a-pane,.a-strip,.b-tile
){
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
}
/* solid already had the site selectors; the nav was the one omission */
html[data-lg-force="solid"] .nav .nav-inner{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  background-color:var(--panel-solid) !important;
}

/* Refract mode paired displacement with only 2px of blur, on the theory that
   the displacement does the work. Over flat ground that is fine; over the
   hero headline the nav went effectively clear and the text behind it read
   straight through the bar. Apple's own material refracts AND frosts, so the
   blur comes up enough to keep panels legible while the warp stays visible. */
:root{--lg-blur-refract:9px}

/* =========================================================================
   NAV READOUT SPACING
   "FL" sat hard against its number and "kt" hard against its own, because
   each pair is a single flex child so the bar's gap never fell between them.
   Each pair becomes its own inline flex line with a small internal gap, and
   the gaps around the separators are evened up so the three groups read at
   the same rhythm. FL and its number keep a tighter gap than the unit does,
   since "FL 359" is one token in aviation and "514 kt" is a value and a unit.
   ========================================================================= */
body.refined .nav-status{gap:.6rem;padding:.36rem .72rem}
body.refined .nav-status .wide{
  display:inline-flex;align-items:baseline;gap:.3em;white-space:nowrap;
}
body.refined .nav-status .wide .live{margin:0}
body.refined .nav-status #utcClock{letter-spacing:.02em}
body.refined .nav-status .sep{margin:0 .05rem}

/* LOCK-IN CORRECTION.
   A defensive rule hid .code inside three-column cards, written when that
   grid only ever held the homepage's guide cards — which carry no code at
   all, so it was never doing anything. Site-wide it started hiding the real
   airport codes on the destinations grid. Removed, and cards that actually
   have a code get back the taller head the code needs. */
body.refined .grid-3 .card .art .code{display:block}
body.refined .grid-3 .card:has(.art .code) .art{min-height:104px}

/* The exposed-structure pass gives every .hud position:relative so its tick
   rule can anchor. On the about page the portrait caption is a .hud that
   must stay absolutely positioned over the image, so it wins that back —
   same fault, same fix, as the hero's floating map chips. */
body.refined .portrait .hud{position:absolute;left:1rem;right:1rem;bottom:1rem}
body.refined .portrait .hud::before{display:none}

/* The inverted-light-theme block turns accent text to neon yellow because
   those elements sit on dark panels. The timeline is the one member of that
   list that sits on the PALE ground, where #ffe86b measures 1.15:1 and the
   year is effectively invisible. On the open page it takes the same-hue dark
   gold the rest of the light theme uses for accent type. */
[data-theme="light"] body.refined .timeline .item .yr{color:#7a6100}

/* The skip link is a filled chip, so it needs the accent FILL, not the accent
   text colour. In light theme --amber is the dark gold used for accent type
   on a pale ground, which made this dark ink on dark gold at 3.1:1 — a
   contrast failure on the one control a keyboard user hits first. */
body.refined .skip{background:var(--accent-fill);color:var(--accent-ink)}
body.refined .skip:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Chips had the same fault as the timeline year: the inverted light theme
   styles them for a DARK panel (#a8a8a8 on a translucent white fill), but
   filter chips and tag chips sit on the PALE ground, where that measures
   2.2:1. Ground chips get dark ink; chips inside a dark panel keep the
   inverted treatment. */
[data-theme="light"] body.refined .chip{
  background-color:rgba(16,16,16,.05);
  color:#3f3f3f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(16,16,16,.06);
}
[data-theme="light"] body.refined .chip:hover{
  color:#101010;background-color:rgba(16,16,16,.10);
}
[data-theme="light"] body.refined :is(
  .card,.hotel,.hud,.feature-post,.boarding,.leg,.rules,.faq details,.readout,.a-pane,.b-tile
) .chip{
  background-color:rgba(255,255,255,.09);
  color:#a8a8a8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
[data-theme="light"] body.refined :is(
  .card,.hotel,.hud,.feature-post,.boarding,.leg,.rules,.faq details,.readout,.a-pane,.b-tile
) .chip:hover{color:#f5f5f5;background-color:rgba(255,255,255,.16)}
/* the selected chip is a filled accent in both settings */
[data-theme="light"] body.refined .chip.active{
  background-color:var(--accent-fill);color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

/* =========================================================================
   LIGHT-THEME GROUND/PANEL MISMATCHES (post page)
   All four are the same fault: a rule assumes a setting the element is not
   actually in. The inverted light theme puts dark panels on a pale ground,
   so every rule has to know which of the two its target sits on.
   ========================================================================= */

/* (a) .author is a dark panel but was never added to the list that
   re-declares ink, so its heading rendered near-black on near-black. */
[data-theme="light"] body.refined .author{
  --text:#f5f5f5; --muted:#a8a8a8; --dim:#a2a2a2;
  --amber:#fcdf00; --amber-2:#ffe86b;
  --line:rgba(255,255,255,.18); --line-soft:rgba(255,255,255,.09);
  color:#f5f5f5;
}
[data-theme="light"] body.refined .author :is(h2,h3,h4,b,strong){color:#f5f5f5}
[data-theme="light"] body.refined .author p{color:#a8a8a8}
[data-theme="light"] body.refined .author a{color:#ffe86b}

/* (b) the share row sits on the pale ground, not on a panel, so it keeps
   dark ink — it was inheriting the on-panel rule and going white on white. */
[data-theme="light"] body.refined .share .btn{
  color:#101010;background-color:rgba(16,16,16,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--e1);
}
[data-theme="light"] body.refined .share .btn:hover{background-color:rgba(16,16,16,.11)}

/* (c) the coordinate stamp is white because it normally sits on a dark
   plate; inside the article it sits on the pale ground. */
[data-theme="light"] body.refined .post-body .ng-coord{color:rgba(16,16,16,.60)}

/* The light theme gives section-head buttons dark ink because those normally
   sit on the pale ground. On destinations the section head is INSIDE a dark
   panel, so that rule put near-black text on a near-black fill. Two fixes:
   the primary call to action is always the yellow chip with dark ink, which
   is unambiguous in either setting; and secondary buttons inside a dark
   panel take the panel's light ink. */
[data-theme="light"] body.refined .btn.primary{
  color:var(--accent-ink) !important;
  background-color:var(--accent-fill) !important;
}
[data-theme="light"] body.refined :is(
  .hud,.card,.hotel,.feature-post,.boarding,.leg,.rules,.readout,.a-pane,.b-tile
) .sec-head .btn:not(.primary){
  color:#f5f5f5;background-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),var(--e1);
}

/* =========================================================================
   EMPTY SLOTS — deliberately ugly
   Placeholder facts were removed from this site on 16 Sep 2026. Anywhere a
   real number, name, price, date or figure is still needed, the slot is
   marked with .tbd. It is red, dashed and out of key ON PURPOSE: a plausible
   placeholder can ship unnoticed, an obvious hole cannot.
   Before launch: `grep -rn 'class="tbd"' *.html` must return nothing.
   ========================================================================= */
.tbd{
  display:inline-block;
  font:700 .66rem/1.25 var(--font-body);
  letter-spacing:.09em;text-transform:uppercase;
  color:#ff5d5d;
  background:rgba(255,93,93,.10);
  border:1px dashed #ff5d5d;
  border-radius:4px;
  padding:.16rem .42rem;
  white-space:nowrap;
  vertical-align:baseline;
}
[data-theme="light"] .tbd{color:#c62828;background:rgba(198,40,40,.08);border-color:#c62828}
/* a whole block still awaiting content */
.tbd-block{
  display:block;padding:1.1rem 1.25rem;border:1px dashed #ff5d5d;border-radius:12px;
  background:rgba(255,93,93,.06);color:#ff8a8a;
  font-size:.92rem;line-height:1.55;
}
[data-theme="light"] .tbd-block{color:#a01c1c;background:rgba(198,40,40,.05);border-color:#c62828}
.tbd-block b{display:block;color:#ff5d5d;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.4rem}
[data-theme="light"] .tbd-block b{color:#c62828}


/* =========================================================================
   QUICK-READ LAYER — TL;DR and takeaways
   Two jobs, not one.

   A reader who will not read 2,000 words still deserves the answer, and an
   answer engine lifts whatever sits at the top of the page. So the TL;DR is
   the first thing in the article, written as a direct 40-60 word answer to
   the question in the headline. It is NOT a teaser — a teaser withholds, and
   an extraction engine quoting a teaser makes the page look like it says
   nothing.

   The takeaways sit at the END, because they summarise conclusions the
   article has earned. Both are plain semantic HTML: a <p> and a <ul>. Nothing
   here is injected by script, because anything a crawler cannot see in the
   initial HTML does not exist to AI search.
   ========================================================================= */

/* ---- TL;DR ---- */
.tldr{
  position:relative;
  margin:0 0 2rem;
  padding:1.35rem 1.5rem 1.4rem;
  border-radius:16px;
  background-color:var(--lg-tint-strong);
  box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(255,255,255,.07),var(--e2);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.tldr > .label{
  display:inline-block;
  font:800 .68rem/1 var(--font-display);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-fill);
  padding:.3rem .5rem;border-radius:4px;
  margin-bottom:.85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.tldr p{
  margin:0;
  font-size:1.06rem;line-height:1.55;font-weight:500;
  letter-spacing:-.008em;
  color:var(--text);
  max-width:62ch;
}
/* the first paragraph of an article must not also be a drop-cap lead-in
   when a TL;DR precedes it — two "openings" in a row reads as a stutter */
.tldr + p::first-letter{font-size:inherit;font-family:inherit;float:none;line-height:inherit;margin:0}

/* ---- Takeaways ---- */
.takeaways{
  margin:2.6rem 0 0;
  padding:1.5rem 1.6rem 1.6rem;
  border-radius:16px;
  background-color:var(--lg-tint);
  box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(255,255,255,.06),var(--e1);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.takeaways h2{
  font-size:1.18rem;font-weight:800;letter-spacing:-.024em;
  margin:0 0 1rem;
}
.takeaways ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.takeaways li{
  position:relative;
  padding-left:1.7rem;
  font-size:.99rem;line-height:1.55;
  color:var(--text);
  max-width:64ch;
}
/* a small filled marker rather than a bullet glyph, so the list reads as
   findings rather than as an ingredients list */
.takeaways li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:9px;height:9px;border-radius:2px;
  background:var(--accent-fill);
  box-shadow:0 0 10px -2px var(--amber-glow);
}
[data-theme="light"] .takeaways li::before{box-shadow:none}
.takeaways li b,.takeaways li strong{color:var(--text);font-weight:700}

/* on the pale ground the light theme inverts these two panels like the rest */
[data-theme="light"] .tldr,
[data-theme="light"] .takeaways{
  --text:#f5f5f5;--muted:#a8a8a8;
  color:#f5f5f5;
  background-color:rgba(10,10,10,.80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.09),var(--e2);
}

@media (max-width:760px){
  .tldr{padding:1.1rem 1.15rem}
  .takeaways{padding:1.2rem 1.25rem 1.3rem}
  .tldr p{font-size:1rem}
}

/* =========================================================================
   RESEARCH APPARATUS — sources list and data tables
   A page built on other people's numbers has to show its working where the
   reader can reach it, not bury it in a file. The sources block is plain
   semantic HTML with real links, because a citation a crawler cannot follow
   is decoration.
   ========================================================================= */
.sources{
  margin:2.4rem 0 0;padding:1.4rem 1.5rem 1.5rem;border-radius:16px;
  background-color:var(--lg-tint);
  box-shadow:inset 0 1px 0 var(--lg-rim-top),inset 0 0 0 1px rgba(255,255,255,.055),var(--e1);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.sources h2{font-size:1.06rem;font-weight:800;letter-spacing:-.022em;margin:0 0 .5rem}
.sources ol{margin:1rem 0 0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.sources li{font-size:.9rem;line-height:1.55;color:var(--muted)}
.sources li i{font-style:italic;color:var(--text)}
.sources a{color:var(--amber-2);text-decoration:underline;text-underline-offset:2px}
[data-theme="light"] .sources a{color:#ffe86b}
.src-note{font-size:.86rem;line-height:1.55;color:var(--dim);margin:.2rem 0 0}
/* the superscript markers in the prose */
.post-body sup a{
  color:var(--amber-2);text-decoration:none;font-weight:700;
  padding:0 .12em;font-size:.72em;
}
[data-theme="light"] .post-body sup a{color:#ffe86b}
.post-body sup a:hover{text-decoration:underline}

/* ---- data tables: wide content scrolls inside itself, never the page ---- */
.table-wrap{overflow-x:auto;margin:1.4rem 0;border-radius:12px;-webkit-overflow-scrolling:touch}
table.data{
  width:100%;border-collapse:collapse;font-size:.94rem;
  font-variant-numeric:tabular-nums;min-width:26rem;
}
table.data th{
  text-align:left;font-family:var(--font-display);font-weight:800;
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber-2);
  padding:.65rem .8rem;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
[data-theme="light"] table.data th{color:#ffe86b}
table.data td{padding:.62rem .8rem;border-bottom:1px solid var(--line-soft);color:var(--text)}
table.data td:nth-child(2){font-weight:700;color:var(--amber-2);white-space:nowrap}
[data-theme="light"] table.data td:nth-child(2){color:#ffe86b}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:rgba(255,255,255,.035)}
[data-theme="light"] table.data tbody tr:hover td{background:rgba(255,255,255,.05)}

/* the sources and takeaways panels invert with everything else in light theme */
[data-theme="light"] .sources{
  --text:#f5f5f5;--muted:#a8a8a8;--dim:#9a9a9a;
  color:#f5f5f5;background-color:rgba(10,10,10,.80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.09),var(--e2);
}
@media (max-width:760px){
  .sources{padding:1.15rem 1.2rem 1.25rem}
  table.data{font-size:.88rem}
}

/* The drop cap assumes the article opens with prose. On a page that opens
   with a TL;DR and then a heading, it lands on the first paragraph AFTER the
   heading and reads as a stray letter. Suppress it wherever a TL;DR leads. */
.post-body:has(.tldr) > p:first-of-type::first-letter,
.post-body:has(.tldr) h2 + p::first-letter{
  font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;
  float:none;margin:0;padding:0;color:inherit;
}
.post-body:has(.tldr) > p:first-of-type{font-size:1.06rem;line-height:1.68;font-weight:400;letter-spacing:-.004em}

/* LIGHT-THEME GROUND FIXES for the research apparatus.
   The citation markers and the data table sit in the article body, which in
   light theme is on the PALE ground, not on a dark panel. They had been given
   the on-panel neon yellow, measuring 1.15:1. On the ground they take the
   same dark gold the rest of the light theme uses for accent type. */
[data-theme="light"] body.refined .post-body sup a{color:#7a6100}
[data-theme="light"] body.refined table.data th{color:#7a6100}
[data-theme="light"] body.refined table.data td:nth-child(2){color:#7a6100}
[data-theme="light"] body.refined table.data th{border-bottom-color:rgba(16,16,16,.18)}
[data-theme="light"] body.refined table.data td{border-bottom-color:rgba(16,16,16,.09);color:#101010}
[data-theme="light"] body.refined table.data tbody tr:hover td{background:rgba(16,16,16,.035)}
/* the empty-slot marker must still be readable at small sizes */
[data-theme="light"] .tbd{color:#8e1616;background:rgba(142,22,22,.07);border-color:#8e1616}

/* The empty-slot marker has to be readable wherever it lands — on the pale
   ground, on a dark panel, inside a table. A tinted outline cannot satisfy
   all three, so it becomes a solid chip: white on red, 7.4:1 everywhere,
   and even harder to mistake for finished design. */
.tbd,[data-theme="light"] .tbd{
  color:#fff;
  background:#c62828;
  border:1px solid #c62828;
  box-shadow:none;
}
/* The ticker recolours its own spans, which was overriding the marker inside
   it. This is a build-time guard that must never be invisible anywhere, so it
   wins outright — the one place !important is the right answer. */
.tbd{color:#fff !important;background:#c62828 !important;border-color:#c62828 !important}

/* The author is an anonymous persona, so the avatar carries the brand mark
   rather than a person's initials. */
.avatar.avatar-mark{display:grid;place-items:center;background:var(--accent-fill);color:var(--accent-ink)}
.avatar.avatar-mark svg{width:52%;height:52%;fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linejoin:round}

/* =========================================================================
   DATA CHARTS — off-season pages
   Built to the dataviz method: form first, colour last, validated.

   FORM. One series per country (share of a year's nights by month), and the
   story is the summer crush, so this is an EMPHASIS chart: the two busiest
   months in the accent, the other ten in a de-emphasis grey. Never a value
   ramp across months — that would double-encode height as hue.

   SURFACE. The chart card is the same dark surface (#161616) in BOTH themes.
   That is deliberate: the site already inverts panels to dark in the light
   theme, and one fixed surface means one validation covers both.

   VALIDATED (validate_palette.js, --mode dark --surface #161616):
     CVD separation      PASS  worst ΔE 39.9 (protan), target >= 8
     Normal-vision floor PASS  ΔE 41.6
     Contrast vs surface PASS  both >= 3:1
   The lightness-band and chroma-floor checks FAIL, and correctly so: they are
   categorical-palette checks (the validator states its scope), and an
   emphasis chart's grey is supposed to read as grey.

   MARKS. Columns <= 24px, 4px rounded data-end, square at the baseline, air
   between bars. Solid 1px gridlines. Text never wears the data colour.
   ========================================================================= */
.chart-card{
  position:relative;
  margin:1.4rem 0 1.8rem;
  padding:1.2rem 1.2rem 1rem;
  border-radius:16px;
  background:#040a21;
  color:#e8e8e8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),var(--e2);
}
.chart-card .chart-title{
  display:block;font:700 .95rem/1.3 var(--font-body);letter-spacing:-.01em;color:#f2f2f2;margin:0 0 .15rem;
}
.chart-card .chart-sub{display:block;font-size:.8rem;line-height:1.45;color:#a8a8a8;margin:0 0 .9rem}
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.bars{display:block;width:100%;min-width:30rem;height:auto;overflow:visible}
svg.bars .grid{stroke:#16213a;stroke-width:1;shape-rendering:crispEdges}
svg.bars .axis{stroke:#2e3c5d;stroke-width:1;shape-rendering:crispEdges}
svg.bars .bar{fill:#497ef7}
svg.bars .bar.peak{fill:#fcdf00}
svg.bars text{fill:#a8a8a8;font-family:var(--font-body);font-size:12px}
svg.bars .ylab{text-anchor:end;font-variant-numeric:tabular-nums}
svg.bars .xlab{text-anchor:middle}
svg.bars .val{fill:#f2f2f2;font-weight:700;font-size:12px;text-anchor:middle;font-variant-numeric:tabular-nums}
/* the hit area is the whole band, not the painted bar */
svg.bars .hit{fill:transparent;cursor:default;outline:none}
svg.bars .col:hover .bar,svg.bars .col:focus-within .bar{filter:brightness(1.25)}
svg.bars .hit:focus-visible{stroke:#f2f2f2;stroke-width:1.5}
.chart-key{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:.75rem 0 0;padding:0;list-style:none;font-size:.8rem;color:#a8a8a8}
.chart-key li{display:inline-flex;align-items:center;gap:.45rem}
.chart-key i{display:inline-block;width:12px;height:12px;border-radius:3px}
.chart-key .k-peak{background:#fcdf00}
.chart-key .k-rest{background:#497ef7}
.chart-tip{
  position:absolute;z-index:5;pointer-events:none;
  padding:.4rem .6rem;border-radius:8px;
  background:#01020b;color:#f2f2f2;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:.8rem;line-height:1.3;white-space:nowrap;transform:translate(-50%,-100%);
}
.chart-tip b{display:block;font-size:.95rem;font-variant-numeric:tabular-nums}
.chart-tip span{color:#a8a8a8}

/* ---- ranked index table, on the same dark surface ---- */
.rank-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:38rem}
.rank-table th{
  text-align:left;font:800 .7rem/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;
  color:#a8a8a8;padding:.55rem .6rem;border-bottom:1px solid #3a3a3a;white-space:nowrap;
}
.rank-table td{padding:.5rem .6rem;border-bottom:1px solid #262626;color:#e8e8e8;vertical-align:middle}
.rank-table tr:last-child td{border-bottom:0}
.rank-table td.num{font-variant-numeric:tabular-nums;color:#a8a8a8;width:2.2rem}
.rank-table a,.month-table a{color:#f2f2f2;text-decoration:underline;text-decoration-color:#5a5a5a;text-underline-offset:3px}
.rank-table a:hover,.month-table a:hover{text-decoration-color:#fcdf00}
.rank-table .barcell{display:flex;align-items:center;gap:.6rem;min-width:13rem}
.rank-table .barcell svg{flex:1 1 auto;height:12px;min-width:6rem}
.rank-table .barcell rect.track{fill:#262626}
.rank-table .barcell rect.fill{fill:#fcdf00}
.rank-table .barcell b{font-variant-numeric:tabular-nums;font-weight:700;color:#f2f2f2;min-width:3.2rem;text-align:right}
.rank-table tbody tr:hover td{background:rgba(255,255,255,.03)}

/* the plain monthly data table, also on the dark surface */
.month-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:22rem}
.month-table th{text-align:left;font:800 .7rem/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:#a8a8a8;padding:.5rem .6rem;border-bottom:1px solid #3a3a3a}
.month-table td{padding:.42rem .6rem;border-bottom:1px solid #262626;color:#e8e8e8;font-variant-numeric:tabular-nums}
.month-table td:first-child{font-variant-numeric:normal}
.month-table tr.is-peak td{color:#f2f2f2;font-weight:700}
/* identity comes from a swatch beside the text, never from colouring the text */
.month-table .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.5rem;vertical-align:baseline;background:transparent}
.month-table tr.is-peak .sw{background:#fcdf00}
.month-table tr:last-child td{border-bottom:0}
.method-note{font-size:.84rem;line-height:1.55;color:var(--dim);margin:.6rem 0 0}

@media (max-width:760px){
  .chart-card{padding:1rem .8rem .8rem;margin-left:-.25rem;margin-right:-.25rem}
}
@media (forced-colors:active){
  svg.bars .bar{fill:GrayText} svg.bars .bar.peak{fill:Highlight}
}

/* Visually hidden, still read by screen readers — used for table captions and
   the "(one of the two busiest months)" note that the colour swatch conveys
   visually. Without this rule those captions would render as visible text. */
.sr-only{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;
}
/* the site's figure-caption accent bar is yellow, and on a chart where yellow
   means "busiest months" it could be read as data — remove it inside charts */
.chart-card figcaption{border-left:0 !important;padding-left:0 !important;margin-left:0}

/* =========================================================================
   LIGHT-THEME INK INSIDE DARK PANELS — root-cause fix
   style.css line 536 hard-codes #2b3244 on every paragraph and list inside an
   article body in light theme. It predates the inverted panels and outranks
   their own colour tokens (0,2,1 vs 0,1,1), so it painted dark ink onto the
   dark TL;DR, sources and chart panels — 1.15:1, effectively invisible.
   Found by an audit that had been skipping any text over 90 characters, which
   is exactly why it survived: the affected paragraphs are all long.
   ========================================================================= */
[data-theme="light"] .post-body .tldr p{color:#f5f5f5}
[data-theme="light"] .post-body .sources p,
[data-theme="light"] .post-body .sources .src-note,
[data-theme="light"] .post-body .sources .method-note{color:#b8b8b8}
[data-theme="light"] .post-body .sources b,
[data-theme="light"] .post-body .sources i{color:#f5f5f5}
[data-theme="light"] .post-body .takeaways li{color:#f5f5f5}
/* the chart card is dark in BOTH themes, so its text never takes page ink */
.post-body .chart-card .chart-key,
.post-body .chart-card .chart-key li,
[data-theme="light"] .post-body .chart-card .chart-key,
[data-theme="light"] .post-body .chart-card .chart-key li{color:#a8a8a8}
[data-theme="light"] .post-body .chart-card p,
[data-theme="light"] .post-body .chart-card ul{color:#e8e8e8}
[data-theme="light"] body.refined .post-body .chart-card sup a{color:#fcdf00}
/* ranking table fits the article column on desktop: headers wrap instead of
   forcing width, and the bar column no longer claims 13rem. Narrow screens
   still scroll inside the card, never the page. */
.rank-table{min-width:34rem;font-size:.88rem}
.rank-table th{white-space:normal;line-height:1.25;vertical-align:bottom}
.rank-table .barcell{min-width:9.5rem}
.rank-table .barcell b{min-width:2.9rem}
.rank-table{min-width:30rem}
.rank-table th,.rank-table td{padding-left:.42rem;padding-right:.42rem}
.rank-table .barcell{min-width:6.5rem;gap:.45rem}
.rank-table .barcell svg{min-width:4rem}
/* the inline SVG reported its viewBox width (100px) to the table's auto layout
   as a floor, so min-width alone could not narrow the column. width:0 with a
   flex basis of 0 removes that intrinsic width; the bar still grows to fill. */
.rank-table .barcell svg{flex:1 1 0;width:0;min-width:3.5rem}


/* =========================================================================
   LIGHT MODE — YELLOW AND BLUE
   Owner's direction: light mode becomes a play between our yellow and a blue.
   Dark mode is untouched.

   These are the site's OWN blues — a deep navy and a cobalt, deliberately
   far from a bright travel-site sky blue — so the site stays visually
   distinct from any booking website. Booking controls stay yellow, so a blue
   never sits on a booking button.

   THE RULE, one sentence: yellow is for fills and highlights; blue is for
   surfaces, lines and text accents.

     navy   #02072b  panels and the chart surface (translucent on glass)
     cobalt #1a3ae6  text accents and links on the pale page   7.0:1 on #f7f7f7
     sky    #73c3ff  blue accents on navy                       10.3:1 on navy
     yellow #fcdf00  unchanged: buttons, marks, highlights, chart peaks

   Reversible: delete this block and light mode returns to black panels.
   ========================================================================= */

/* ---- 1. the secondary accent token becomes cobalt on the pale page -------
   --amber was the dark-gold text accent in light mode. Inside every panel
   it is re-declared as yellow, so panels keep yellow accents while the page
   between them turns blue. --accent-fill, the bright yellow, is untouched. */
[data-theme="light"]{
  --amber:#1a3ae6;
  --amber-2:#1125c3;
  --ok:#1a3ae6;
  --lm-navy:#02072b;
  --lm-cobalt:#1a3ae6;
  --lm-sky:#73c3ff;
}

/* ---- 2. dark panels become navy glass ---- */
[data-theme="light"] .hud,
[data-theme="light"] .card,
[data-theme="light"] .hotel,
[data-theme="light"] .feature-post,
[data-theme="light"] .boarding,
[data-theme="light"] .leg,
[data-theme="light"] .telemetry,
[data-theme="light"] .readout,
[data-theme="light"] .disclosure,
[data-theme="light"] .footer-status,
[data-theme="light"] .faq details,
[data-theme="light"] .rules,
[data-theme="light"] .a-pane,
[data-theme="light"] .a-strip,
[data-theme="light"] .b-tile,
[data-theme="light"] .tldr,
[data-theme="light"] .takeaways,
[data-theme="light"] .sources,
[data-theme="light"] body.refined .author{
  background-color:rgba(2,7,43,.92);
  background-image:linear-gradient(var(--lg-angle,150deg),
     rgba(115,195,255,.14) 0%,rgba(115,195,255,.03) 40%,
     rgba(115,195,255,.01) 62%,rgba(115,195,255,.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(170,215,255,.34),
    inset 0 0 0 1px rgba(115,195,255,.14),
    var(--e3);
}
/* the booking console is the most opaque object; its Agoda button stays yellow */
[data-theme="light"] .hud:has(#agodaSearch){background-color:#02072b !important}
[data-theme="light"] .hud:has(#agodaSearch) .field select option,
[data-theme="light"] .field select option{background:#02072b;color:#f5f5f5}
[data-theme="light"] .scene{background-color:#02072b}

/* ---- 3. hairlines inside navy panels take a blue cast ---- */
[data-theme="light"] .hud,[data-theme="light"] .card,[data-theme="light"] .hotel,
[data-theme="light"] .feature-post,[data-theme="light"] .boarding,[data-theme="light"] .leg,
[data-theme="light"] .telemetry,[data-theme="light"] .readout,[data-theme="light"] .rules,
[data-theme="light"] .tldr,[data-theme="light"] .takeaways,[data-theme="light"] .sources{
  --line:rgba(115,195,255,.24);
  --line-soft:rgba(115,195,255,.12);
}

/* ---- 4. text accents on the pale page: gold becomes cobalt ---- */
[data-theme="light"] .ticker-track span b{color:#fcdf00}
[data-theme="light"] .gg-legend b{color:#1a3ae6}
[data-theme="light"] .nav-status .live{color:#1a3ae6}
[data-theme="light"] body.refined .timeline .item .yr{color:#1a3ae6}
[data-theme="light"] body.refined .post-body sup a{color:#1a3ae6}
[data-theme="light"] body.refined table.data th{color:#1a3ae6}
[data-theme="light"] body.refined table.data td:nth-child(2){color:#1a3ae6}
/* inside the always-dark chart card the citation stays yellow */
[data-theme="light"] body.refined .post-body .chart-card sup a{color:#fcdf00}

/* ---- 5. the globe: a blue route between yellow pins ---- */
[data-theme="light"] .gg-route{stroke:#1a3ae6}
[data-theme="light"] .gg-plane{fill:#1a3ae6}
[data-theme="light"] .gg-ring{stroke:#1a3ae6}
[data-theme="light"] .gg-dot{fill:#c9a800}
[data-theme="light"] .gg-limb{stroke:rgba(26,58,230,.28)}

/* ---- 6. the ticker becomes a navy band carrying yellow ---- */
[data-theme="light"] .ticker{
  background:#02072b;
  box-shadow:inset 0 8px 18px -12px rgba(0,0,0,.5),inset 0 -8px 18px -12px rgba(0,0,0,.5);
}
[data-theme="light"] .ticker-track span{color:#c9d4f5}

/* ---- 7. atmosphere: yellow bloom above, cool blue pools below ---- */
[data-theme="light"] body::before,
[data-theme="light"] body.refined::before{
  background:
    radial-gradient(78% 34% at 50% -10%, rgba(252,223,0,.16), transparent 64%),
    radial-gradient(52% 44% at 12% 18%, rgba(26,58,230,.075), transparent 64%),
    radial-gradient(48% 42% at 88% 36%, rgba(26,58,230,.06), transparent 66%),
    radial-gradient(64% 46% at 60% 80%, rgba(26,58,230,.055), transparent 68%),
    radial-gradient(40% 34% at 6% 70%, rgba(252,223,0,.05), transparent 66%);
}

/* ---- 8. the nav stays white chrome, hover leans blue ---- */
[data-theme="light"] body.refined .nav-links a:hover{color:#1a3ae6;background-color:rgba(26,58,230,.08)}
[data-theme="light"] .theme-toggle:hover,[data-theme="light"] .nav-toggle:hover{color:#1a3ae6}

/* ---- 9. focus is blue on the pale page, yellow inside navy ---- */
[data-theme="light"] :focus-visible{outline-color:#1a3ae6}
[data-theme="light"] :is(.hud,.card,.hotel,.tldr,.takeaways,.sources,.chart-card) :focus-visible{outline-color:#fcdf00}

/* ---- 10. charts on navy -------------------------------------------------
   Re-validated for the new surface (validate_palette.js --mode dark
   --surface #02072b): yellow #fcdf00 + blue-grey #4b83ff.
     CVD separation      PASS  worst ΔE 42.0 (protan), target >= 8
     Normal-vision floor PASS  ΔE 46.0
     Contrast vs surface PASS  both >= 3:1
   Lightness-band and chroma-floor FAIL as expected: categorical-only checks,
   and an emphasis chart's de-emphasis tone is meant to recede. */
[data-theme="light"] .chart-card{
  background:#02072b;
  box-shadow:inset 0 1px 0 rgba(170,215,255,.24),inset 0 0 0 1px rgba(115,195,255,.14),var(--e2);
}
[data-theme="light"] svg.bars .bar{fill:#4b83ff}
[data-theme="light"] svg.bars .grid{stroke:#142555}
[data-theme="light"] svg.bars .axis{stroke:#243971}
[data-theme="light"] .chart-key .k-rest{background:#4b83ff}
[data-theme="light"] .rank-table th{border-bottom-color:#192c60}
[data-theme="light"] .rank-table td,[data-theme="light"] .month-table td{border-bottom-color:#0a1844}
[data-theme="light"] .month-table th{border-bottom-color:#192c60}
[data-theme="light"] .rank-table .barcell rect.track{fill:#0a1844}
[data-theme="light"] .rank-table tbody tr:hover td{background:rgba(115,195,255,.06)}
[data-theme="light"] .chart-tip{background:#00021a;box-shadow:0 6px 20px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(115,195,255,.2)}

/* Removing the invented telemetry strip made the hero copy shorter, which
   shortened the map column, so the absolutely positioned journey chip slid up
   over the legend's second row (22px overlap, covering "Kathmandu, Nepal").
   Reserve the chip's height at the foot of the map so the legend always ends
   above it. Wide screens only: below 1251px the chips already stack in flow. */
@media (min-width:1251px){
  body.refined .route-map{padding-bottom:5rem}
}

/* NAVY IS LIGHTER THAN BLACK. The panel greys were tuned for near-black
   panels; on navy the dim grey (#808080 / #909090) fell to 4.25:1. Every navy
   panel in light mode now re-declares its greys as blue-tinted steps, which
   also sit better on the blue than neutral grey does.
     --muted #b9c1dc  9.4:1 on composited navy
     --dim   #a3acc8  7.5:1 on composited navy */
[data-theme="light"] :is(.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,.readout,
  .disclosure,.footer-status,.faq details,.rules,.a-pane,.a-strip,.b-tile,.tldr,.takeaways,.sources,.author),
[data-theme="light"] .hud:has(#agodaSearch){
  --muted:#b9c1dc;
  --dim:#a3acc8;
}
[data-theme="light"] .hud:has(#agodaSearch) .aff-note{color:#a3acc8}

/* The glass-material control rested at 35% opacity, fading its labels to about
   2.3:1 until hovered. It is an active control, so it must meet contrast at
   rest. It still recedes, just not below legibility. Both themes. */
.lg-mode{opacity:.78}
.lg-mode:hover,.lg-mode:focus-within{opacity:1}

/* BUG FIX. "[data-theme=light] svg.bars .bar" (0,3,1) tied with
   "svg.bars .bar.peak" (0,3,1) and, coming later, turned the peak months
   blue-grey too — the chart lost its emphasis while its key still promised
   yellow. Not a contrast failure, so no contrast audit could catch it; found
   by looking at the render. The peak colour now wins explicitly. */
[data-theme="light"] svg.bars .bar.peak{fill:#fcdf00}

/* Small phones (320px): brand + theme toggle + menu button overflowed the header by 6px,
   giving every page a sideways scroll. Tighten the brand only below 360px. */
@media (max-width:360px){header.nav .brand{gap:.5rem}header.nav .brand .name{font-size:.9rem}header.nav .brand .tag{font-size:.64rem}}

/* ---- Page photo (apply_photos.py): sits under the TL;DR, credit in the caption ---- */
.post-photo{margin:0 0 2rem;border-radius:16px;overflow:hidden;border:1px solid var(--line-soft,rgba(255,255,255,.14))}
.post-photo img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.post-photo figcaption{padding:.6rem .9rem .7rem;font-size:.84rem;line-height:1.45;color:var(--muted)}
.post-photo figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* =========================================================================
   DEEPER PALETTE (owner, 24 Sep 2026: "make the colors deeper except for the yellow")
   Light mode: navy #0e1a44 -> #050c38, cobalt #2442c7 -> #1f2fbc, chart blue-grey
   #7584ad -> #647dc2, navy hairlines/rows deepened to match. Dark mode: flat
   greys -> deep navy-charcoal ground oklch(.165 .028 268) and chart surface #0a1020
   with blue-grey bars #63739e. Yellow #fcdf00 and its gold variants untouched.
   Every text pair got MORE contrast (links 7.3 -> 9.0:1, panel text 12.5 -> 14.5:1,
   dark muted 7.4 -> 7.7:1). Charts re-validated (validate_palette.js):
     light, surface #050c38: CVD worst ΔE 39.1, normal 42.0, contrast >= 3:1 PASS
     dark,  surface #0a1020: CVD worst ΔE 40.0, normal 42.6, contrast >= 3:1 PASS
   Previous file: _archive/2026-09-24/glass.before-deeper.css (restore to undo).
   ========================================================================= */

/* BUG FIX (found by the 24 Sep contrast audit, present before the deeper palette):
   links inside the navy TL;DR and takeaways panels inherited the page link colour
   (cobalt) and sat at about 1.3:1 on navy. They now take the panel yellow, as links
   in every other navy panel do. #ffe86b on composited navy: 13.9:1. */
[data-theme="light"] :is(.tldr,.takeaways) a{color:#ffe86b}

/* =========================================================================
   NEON STEP (owner, 24 Sep 2026: "darker and more neon except for yellow")
   Light: navy #02072b, links electric blue #1a3ae6 (7.0:1 on the page), neon sky
   #73c3ff for accents and hairlines on navy (10.3:1), bars #4b83ff. Dark: ground
   oklch(.135 .035 266) / #030716, chart surface #040a21, bars #497ef7.
   Charts re-validated: light CVD 42.0 / normal 46.0, dark 43.0 / 46.6, contrast >= 3:1.
   A neon-blue rim and glow sit on the navy panels (light) and glass panels (dark).
   Previous file: _archive/2026-09-24/glass.before-neon.css.
   ========================================================================= */
:root{--neon:#458aff;--neon-sky:#73c3ff;--neon-glow:rgba(69,138,255,.55)}
[data-theme="light"] :is(.hud,.card,.hotel,.feature-post,.boarding,.leg,.telemetry,.readout,.tldr,.takeaways,.sources,.chart-card){
  box-shadow:inset 0 1px 0 rgba(170,215,255,.38),inset 0 0 0 1px rgba(115,195,255,.22),0 0 0 1px rgba(69,138,255,.10),0 18px 46px -22px var(--neon-glow),var(--e3);
}
:root:not([data-theme="light"]) :is(.hud,.tldr,.takeaways,.sources,.chart-card){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(115,195,255,.16),0 0 0 1px rgba(69,138,255,.08),0 20px 50px -24px rgba(69,138,255,.45);
}
[data-theme="light"] .post-body h2 .num{color:#1a3ae6}

/* =========================================================================
   EXPLORE, HUBS AND COMPARE (24 Sep 2026)
   explore.html: live search -> results -> place / topic hubs (a feed of cards).
   compare.html: up to three places side by side. Cards reuse .hud, so they
   take the navy panel treatment and panel ink in light mode automatically.
   ========================================================================= */
.app-head{padding-bottom:2.2rem}
.app-wrap{padding:2rem 0 4rem}
.ex-search{position:relative;display:flex;gap:.6rem;align-items:center;max-width:52rem;margin:0 0 1rem;
  padding:.45rem .45rem .45rem 3rem;border-radius:999px;background:var(--lg-tint-strong,rgba(255,255,255,.1));
  box-shadow:inset 0 1px 0 var(--lg-rim-top,rgba(255,255,255,.3)),inset 0 0 0 1px var(--line),0 0 0 1px rgba(69,138,255,.12),0 16px 40px -22px var(--neon-glow)}
.ex-search:focus-within{box-shadow:inset 0 1px 0 var(--lg-rim-top,rgba(255,255,255,.3)),inset 0 0 0 2px var(--neon),0 0 26px -6px var(--neon-glow)}
.ex-search-ico{position:absolute;left:1.1rem;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.ex-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:600 1.1rem/1.3 var(--font-body);padding:.7rem 0;outline:none}
.ex-search input::placeholder{color:var(--muted);opacity:1}
.ex-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem}
.ex-chip{display:inline-flex;align-items:center;min-height:36px;padding:.35rem .85rem;border-radius:999px;font-size:.86rem;font-weight:600;
  color:var(--text);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);background:var(--lg-tint,rgba(255,255,255,.06))}
.ex-chip:hover,.ex-chip:focus-visible{box-shadow:inset 0 0 0 1px var(--neon);color:var(--text)}
.ex-status{min-height:1.4em;margin:0 0 1rem;color:var(--muted);font-size:.92rem}
.ex-group{margin:0 0 1.6rem}
.ex-group-h,.ex-feed-h{font:800 .78rem/1.2 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.ex-feed-h{margin:2.2rem 0 1rem;font-size:.82rem}
.ex-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ex-item{display:grid;grid-template-columns:80px 1fr auto;gap:.85rem;align-items:center;padding:.55rem .8rem .55rem .55rem;border-radius:14px;
  text-decoration:none;color:var(--text);background:var(--lg-tint,rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px var(--line-soft)}
.ex-item:hover,.ex-item:focus-visible{box-shadow:inset 0 0 0 1px var(--neon),0 10px 30px -18px var(--neon-glow);color:var(--text)}
.ex-thumb{width:80px;height:42px;border-radius:8px;object-fit:cover;display:block}
.ex-thumb-none{background:linear-gradient(135deg,rgba(69,138,255,.35),rgba(115,195,255,.12))}
.ex-item-text{display:grid;gap:.1rem;min-width:0}
.ex-item-name{font-weight:700;font-size:1rem;line-height:1.3}
.ex-item-sub{color:var(--muted);font-size:.85rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ex-badge{font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.2rem .55rem;border-radius:999px;color:var(--accent-ink);background:var(--accent-fill)}
.ex-back{display:inline-block;margin:0 0 1rem;font-weight:700;font-size:.9rem}
.ex-hero{position:relative;border-radius:22px;overflow:hidden;min-height:340px;display:grid;align-items:end;background:#02072b;
  box-shadow:0 0 0 1px rgba(115,195,255,.22),0 24px 60px -28px var(--neon-glow)}
.ex-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ex-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,43,.05) 20%,rgba(2,7,43,.72) 62%,rgba(2,7,43,.94))}
.ex-hero-plain::after{background:linear-gradient(135deg,rgba(69,138,255,.28),rgba(2,7,43,.9))}
.ex-hero-c{position:relative;z-index:1;padding:1.6rem 1.6rem 1.5rem;color:#f5f5f5}
.ex-hero-group{display:inline-block;font:800 .7rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#0f0d04;background:#fcdf00;padding:.32rem .55rem;border-radius:5px}
.ex-hero-h{font:800 clamp(2rem,1.2rem + 3vw,3.4rem)/1.02 var(--font-display);letter-spacing:-.02em;margin:.6rem 0 1rem;color:#fff;outline:none}
.ex-topic-head .ex-hero-h{color:var(--text)}
.ex-facts{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ex-facts li{display:grid;gap:.1rem;padding:.5rem .8rem;border-radius:12px;background:rgba(2,7,43,.72);box-shadow:inset 0 0 0 1px rgba(115,195,255,.28)}
.ex-facts span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#c6d7f5}
.ex-facts b{font-size:1rem;color:#fff}
.ex-acts{display:flex;flex-wrap:wrap;gap:.5rem}
.ex-hero .btn:not(.primary){color:#f5f5f5;background-color:rgba(2,7,43,.6);box-shadow:inset 0 0 0 1px rgba(115,195,255,.35)}
.ex-credit{margin:.6rem 0 0;font-size:.82rem;color:var(--muted)}
.ex-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ex-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1rem;align-items:start}
.ex-card{padding:1.1rem 1.2rem 1rem;border-radius:18px;display:grid;gap:.5rem}
.ex-card-kind{font:800 .68rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#73c3ff}
.ex-card-h{font:800 1.08rem/1.25 var(--font-display);margin:0;color:var(--text)}
.ex-card-t{margin:0;font-size:.93rem;line-height:1.55;color:var(--text)}
.ex-bars{width:100%;height:auto;display:block;margin:.2rem 0 0}
.ex-bars .b{fill:#497ef7}
[data-theme="light"] .ex-bars .b{fill:#4b83ff}
.ex-bars .b.peak{fill:#fcdf00}
.ex-bars .m{fill:var(--muted);font-size:9px;text-anchor:middle;font-family:var(--font-body)}
.ex-next{margin:0;font-size:.88rem;color:var(--text)}
.ex-card-foot{margin:.2rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:baseline;font-size:.86rem}
.ex-card-foot a{font-weight:700}
[data-theme="light"] .ex-card a{color:#ffe86b}
.ex-src{color:var(--muted);font-size:.78rem}
.ex-topic-head{margin:0 0 1.2rem}
.ex-topic-intro{color:var(--muted);max-width:60ch}
.ex-directory{margin-top:2.6rem}
.ex-directory h2{font:800 1.4rem/1.2 var(--font-display);margin:0 0 .4rem}
.ex-dir-note{color:var(--muted);margin:0 0 1.2rem;max-width:62ch}
.ex-dir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.5rem}
.ex-dir-grid h3{font:800 .8rem/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .5rem}
.ex-dir-grid h3 span{color:var(--text);margin-left:.3rem}
.ex-dir-list{list-style:none;margin:0;padding:0;columns:2;column-gap:1rem}
.ex-dir-list li{break-inside:avoid;margin:0 0 .3rem}
.ex-dir-list a{display:inline-block;padding:.15rem 0;font-size:.95rem}
.ex-dir-months{columns:3}
/* compare */
.cmp-form{display:grid;gap:1rem;margin:0 0 1rem}
.cmp-pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.8rem}
.cmp-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.cmp-note{padding:.8rem 1rem;border-radius:12px;box-shadow:inset 0 0 0 1px var(--neon);color:var(--text);max-width:70ch}
.cmp-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin:1rem 0}
.cmp-col{padding:0 0 1.1rem;border-radius:20px;overflow:hidden;display:grid;align-content:start}
.cmp-img{width:100%;height:auto;aspect-ratio:800/420;object-fit:cover;display:block}
.cmp-h{font:800 1.5rem/1.1 var(--font-display);margin:1rem 1.1rem .2rem}
.cmp-h a{color:var(--text);text-decoration:none}
.cmp-h a:hover{text-decoration:underline}
.cmp-sub{margin:0 1.1rem .6rem;color:var(--muted);font-size:.84rem}
.cmp-chart{margin:.2rem 1rem .8rem !important;padding:.8rem .8rem .4rem !important}
svg.bars.cmp-bars{min-width:0}
.cmp-dl{margin:0 1.1rem;display:grid;gap:.15rem}
.cmp-dl dt{font:800 .7rem/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
.cmp-dl dd{margin:0;font-size:.93rem;line-height:1.5;color:var(--text)}
[data-theme="light"] .cmp-col a:not(.btn){color:#ffe86b}
[data-theme="light"] .cmp-h a{color:#f5f5f5}
.cmp-go{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 1.1rem 0}
.cmp-numbers{margin:1rem 0}
.cmp-numbers summary{cursor:pointer;font-weight:700}
.cmp-src,.cmp-about p{color:var(--muted);font-size:.88rem;max-width:72ch}
.cmp-about{margin-top:2.4rem}
.cmp-about h2{font:800 1.3rem/1.2 var(--font-display)}
/* nav: search button */
.nav-search{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.nav-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-search:hover,.nav-search:focus-visible{box-shadow:inset 0 0 0 1px var(--neon),0 0 18px -4px var(--neon-glow);color:var(--text)}
@media (max-width:640px){
  .ex-search{padding-left:2.7rem}
  .ex-search .ex-go{display:none}
  .ex-item{grid-template-columns:56px 1fr;gap:.6rem}
  .ex-item .ex-badge{display:none}
  .ex-thumb{width:56px;height:30px}
  .ex-hero{min-height:300px}
  .ex-dir-list{columns:1}
  .ex-dir-months{columns:2}
}
[data-theme="light"] .cmp-actions .btn:not(.primary){color:#101010;background-color:rgba(2,7,43,.05);background-image:none;box-shadow:inset 0 0 0 1px rgba(2,7,43,.28)}
[data-theme="light"] .cmp-actions .btn:not(.primary):hover{color:#101010;background-color:rgba(26,58,230,.10);box-shadow:inset 0 0 0 1px #1a3ae6}
/* small phones: the search is the first item in the menu, so the header icon steps aside to keep the header inside 320px */
@media (max-width:520px){.nav-search{display:none}}
/* BUG FIX (found 24 Sep): at 1024px the four-card grid overflowed by 80px (1fr columns cannot shrink below their content).
   Columns may now shrink, and four columns wait until there is room for them. */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
/* 320px: the menu button sat 8px past the header edge. Tighten name, gaps and round buttons on the smallest phones. */
@media (max-width:360px){header.nav .brand .name{font-size:.8rem;letter-spacing:-.01em}header.nav .nav-cta{gap:.3rem}header.nav .theme-toggle,header.nav .nav-toggle{width:36px;height:36px}}
/* New guides (24 Sep 2026): group rows in date tables, the calendar's month jump list, guide lists */
.month-table tr.grp th{padding:.9rem .6rem .35rem;color:#fcdf00;border-bottom:1px solid #3a3a3a;text-transform:none;letter-spacing:.02em;font-size:.82rem}
.month-table tr.grp:first-child th{padding-top:.4rem}
.cal-jump{line-height:2;font-size:.92rem}
.cal-jump a{white-space:nowrap}
.guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.6rem;list-style:none;padding:0;margin:1rem 0}
.guide-list a{display:block;padding:.7rem .85rem;border-radius:12px;border:1px solid rgba(115,195,255,.28);text-decoration:none;font-weight:600}
.guide-list a:hover{border-color:#fcdf00}
.guide-list small{display:block;font-weight:400;color:var(--muted);margin-top:.15rem}
/* Light theme (found 24 Sep): source numbers inside the navy TL;DR and takeaways panels were cobalt on navy (2.2:1), and checker
   results sat as dark text on the navy .hud panel (1.3:1). Same fix as the TL;DR links: light text, yellow links. */
[data-theme="light"] body.refined .post-body :is(.tldr,.takeaways) sup a{color:#ffe86b}
[data-theme="light"] body.refined .post-body .tool-out,[data-theme="light"] body.refined .post-body .tool-out li{color:#eef1ff}
[data-theme="light"] body.refined .post-body .tool-out a{color:#ffe86b}
.tool-out ul{margin:0;padding-left:1.1rem}
.tool-out li+li{margin-top:.4rem}
/* 320px (found 24 Sep): long URLs shown as link text in source lists could not wrap and widened the page */
.post-body .sources,.post-body .sources *{overflow-wrap:anywhere}
/* visual guides (visuals.html, 25 Sep 2026): charts sit on the navy chart card in both themes */
svg.viz-svg{display:block;width:100%;height:auto;min-width:34rem;overflow:visible}
svg.viz-heat,svg.viz-rank{min-width:36rem}
svg.viz-svg .grid{stroke:#16213a;stroke-width:1;shape-rendering:crispEdges}
svg.viz-svg .axis{stroke:#2e3c5d;stroke-width:1;shape-rendering:crispEdges}
svg.viz-svg text{fill:#a8a8a8;font-family:var(--font-body);font-size:12px}
svg.viz-svg .xlab{text-anchor:middle}
svg.viz-svg .ylab{text-anchor:end;font-variant-numeric:tabular-nums}
svg.viz-svg .rlab{text-anchor:end;fill:#dfe5f2}
svg.viz-svg a:hover .rlab,svg.viz-svg a:focus .rlab{fill:#fcdf00;text-decoration:underline}
svg.viz-svg .cv{font-size:10.5px;text-anchor:middle;font-variant-numeric:tabular-nums;pointer-events:none}
svg.viz-svg .val{fill:#f2f2f2;font-weight:700;text-anchor:middle;font-variant-numeric:tabular-nums}
svg.viz-svg .val.vr{text-anchor:start;font-weight:600}
svg.viz-svg .bar{fill:#497ef7}
svg.viz-svg .bar.peak{fill:#fcdf00}
svg.viz-svg .bar.b-rain{fill:#20a67c}
svg.viz-svg .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg.viz-svg .dot{stroke:#040a21;stroke-width:2}
svg.viz-svg .lk{stroke-width:2}
svg.viz-svg .dl{fill:#dfe5f2}
svg.viz-svg .hit{fill:transparent}
svg.viz-svg .col:hover .bar{filter:brightness(1.2)}
.viz-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 .6rem}
.viz-tabs .btn[aria-pressed="true"]{background:#fcdf00;color:#0b1020;border-color:#fcdf00}
.viz-key{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.4rem 0 .8rem;padding:0;font-size:.82rem}
.viz-key li{display:flex;align-items:center;gap:.4rem;margin:0}
.viz-key i{display:inline-block;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
figure.viz{position:relative}
figure.viz .viz-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.7rem}
figure.viz .viz-tools .btn{color:#f2f2f2;background:transparent;box-shadow:inset 0 0 0 1px rgba(223,229,242,.45)}
figure.viz .viz-tools .btn:hover,figure.viz .viz-tools .btn:focus-visible{background:#fcdf00;color:#0b1020}
figure.viz .viz-msg{font-size:.85rem;color:#dfe5f2;overflow-wrap:anywhere}
figure.viz .viz-name{margin:.2rem 0 .4rem;font-weight:700;color:#f2f2f2}
figure.viz .viz-name a{color:#fcdf00}
figure.viz .viz-panel{margin:.8rem 0 .2rem;font-size:.85rem;font-weight:600;color:#dfe5f2}
.viz-pick{margin:.4rem 0 .8rem}
details.viz-table{margin:.2rem 0 1.2rem}
details.viz-table summary{cursor:pointer;font-size:.9rem;margin-bottom:.4rem}
/* light theme: the Europe/Japan tabs sit on the pale page, not on the chart card (found by the contrast audit, 25 Sep) */
[data-theme="light"] .viz-tabs .btn[aria-pressed="false"]{color:#02072b;background:transparent;box-shadow:inset 0 0 0 1px rgba(2,7,43,.4)}
[data-theme="light"] .viz-tabs .btn[aria-pressed="false"]:hover,[data-theme="light"] .viz-tabs .btn[aria-pressed="false"]:focus-visible{background:#02072b;color:#f2f2f2}
/* visual guides, second set (25 Sep 2026): half-way line, blossom and leaves timeline, finder */
svg.viz-svg .half{stroke:#8a96b3;stroke-width:1;stroke-dasharray:4 3}
svg.viz-svg .span{stroke-width:3;stroke-linecap:round}
svg.viz-svg .hollow{fill:#040a21;stroke-width:2}
svg.viz-timeline{min-width:36rem}
.viz-result{margin:.2rem 0 .6rem}
/* Light theme: form fields on the page background need dark text (29 Sep 2026; the rule above is for fields on dark panels,
   and picker values on visuals, compare, best-month-finder, light-calendar and how-places-stack-up were near-white on white). */
[data-theme="light"] main .field :is(input,select,textarea){color:#02072b;background-color:rgba(2,7,43,.04);box-shadow:inset 0 0 0 1px rgba(2,7,43,.55)}
[data-theme="light"] main :is(.hud,.console,.lg-scene) .field :is(input,select,textarea){color:#f5f5f5;background-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07)}
.viz-pick .field[hidden]{display:none}