/*
Theme Name: Kaleido
Theme URI: https://kaleido.example
Author: Kaleido
Description: A night-city travel theme — midnight harbour blue under a skyline of neon, built for operators who sell the city after dark. Long-scroll destination showcase with a persistent GPU-rendered skyline-and-reflection background.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kaleido

Design language, in five rules:
1. Midnight is the ground, neon is the ink. The page is a harbour at night —
   deep indigo everywhere, and colour arrives only as light: signage, glass,
   reflections. Never a pastel wash, never a flat mid-grey.
2. Multi-hue on purpose, not by accident. Cyan / magenta / violet / gold are
   a set, used as a spectrum across a gradient or a row of cards, so the page
   reads "kaleidoscope" rather than "one brand colour plus noise."
3. Light sources glow, surfaces don't. Anything that emits (a CTA, an active
   chip, a stat) carries a coloured bloom; anything that merely holds content
   (a card, a panel) stays dark glass with a hairline edge.
4. Photography is the destination; the GPU layer is the air around it. The
   skyline canvas lives behind everything and stays low-contrast under text —
   it is atmosphere, never a competitor to a headline.
5. Contrast is checked, not assumed. Body copy sits on solid panels, never
   directly on the animated canvas, so legibility never depends on what the
   shader happens to render that frame.
*/

/* =====================================================================
   Reset
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
input,textarea,select{font:inherit;color:inherit}

/* =====================================================================
   Tokens — harbour at night
   ===================================================================== */
:root{
  /* ground: deep indigo, cool, never black — a night sky over water */
  --bg:#070B1B; --bg-2:#0B1226; --bg-3:#111A33;
  --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);

  --ink:#F2F5FF; --ink-2:rgba(228,235,255,.72); --ink-3:rgba(210,220,250,.48);

  /* the neon set — used as a spectrum, in this order */
  --c1:#22D3EE;  /* cyan     — harbour water, signage */
  --c2:#7C6BFF;  /* violet   — dusk sky */
  --c3:#FF4FA3;  /* magenta  — the loud one */
  --c4:#FFB443;  /* gold     — window light, lanterns */
  --c5:#3DE6B0;  /* jade     — accent for "available/ok" states */

  --accent:var(--c1);
  --grad-neon:linear-gradient(100deg,var(--c1) 0%,var(--c2) 34%,var(--c3) 68%,var(--c4) 100%);
  --grad-cool:linear-gradient(120deg,var(--c1),var(--c2));
  --grad-hot:linear-gradient(120deg,var(--c3),var(--c4));

  --glow-c1:0 0 32px rgba(34,211,238,.35);
  --glow-c3:0 0 32px rgba(255,79,163,.32);

  --ff-head:"Sora","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  --w:1280px; --ease:cubic-bezier(.22,.68,0,1);
  --r:14px; --r-sm:8px;
}

body{
  font-family:var(--ff-body); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.h1,.h2,.h3{font-family:var(--ff-head);font-weight:600;letter-spacing:-.02em;
  line-height:1.08;text-wrap:balance;color:var(--ink)}
::selection{background:var(--c3);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--c1);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 32px;position:relative;z-index:1}
@media (max-width:640px){.wrap{padding:0 20px}}
.sec{position:relative;padding:120px 0}
/* Everything below the hero carries its own ground. Legibility must not
   depend on the canvas having faded — on a tall screen the first section is
   already visible while the page is still at scroll zero, and copy set
   straight over a lit skyline is unreadable. The skyline still glows
   through; it just no longer competes with the words. */
.sec::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(7,11,27,.88);pointer-events:none}
.hero+.sec::before{background:linear-gradient(to bottom,rgba(7,11,27,.42) 0,rgba(7,11,27,.88) 180px)}
.sec--tight{padding:80px 0}
@media (max-width:860px){.sec{padding:76px 0}.sec--tight{padding:54px 0}}

.h1{font-size:clamp(38px,6.2vw,76px)}
.h2{font-size:clamp(28px,3.6vw,46px)}
.h3{font-size:clamp(19px,1.6vw,24px);line-height:1.28}
.lede{margin-top:20px;font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:var(--ink-2);max-width:60ch}

/* gradient text — the signature move, used on one phrase per section max */
.grad{background:var(--grad-neon);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c1)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad-cool)}

/* =====================================================================
   Persistent GPU skyline canvas
   ===================================================================== */
#kal-scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease)}
#kal-scene.ready{opacity:1}
/* Inside pages are photography-led: at full strength the skyline paints
   straight through the gallery and every photo reads as if it were pasted
   onto a lit LED wall. The hero is where this effect earns the frame — past
   it, it drops back to atmosphere. */
body:not(.home) #kal-scene.ready{opacity:.22}
body:not(.home) .kal-poster{opacity:.4}
/* Poster is what a visitor sees if WebGL never starts (old GPU, reduced
   motion, script blocked) — a static approximation of the same skyline
   glow, so the page is never a flat void waiting on JS. */
.kal-poster{position:fixed;inset:0;z-index:0;background:
  radial-gradient(75% 48% at 18% 88%,rgba(34,211,238,.24),transparent 62%),
  radial-gradient(65% 44% at 52% 92%,rgba(255,79,163,.20),transparent 60%),
  radial-gradient(70% 46% at 84% 86%,rgba(255,180,67,.18),transparent 62%),
  radial-gradient(90% 60% at 50% 8%,rgba(124,107,255,.16),transparent 70%),
  var(--bg)}
body>*:not(#kal-scene):not(.kal-poster){position:relative;z-index:1}

/* film grain — keeps large dark gradients from banding */
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* =====================================================================
   Nav
   ===================================================================== */
.nav{position:sticky;top:0;z-index:60;height:74px;
  background:rgba(7,11,27,.72);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.nv{max-width:var(--w);margin:0 auto;padding:0 32px;height:100%;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
@media (max-width:640px){.nv{padding:0 20px}}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--ff-head);
  font-size:19px;font-weight:700;letter-spacing:-.02em}
.logo i{width:28px;height:28px;flex:none;border-radius:9px;position:relative;
  background:var(--grad-neon);box-shadow:0 0 20px rgba(124,107,255,.55)}
.logo i::after{content:"";position:absolute;inset:6px;border-radius:4px;
  background:var(--bg);opacity:.85}
.links{display:flex;gap:30px;justify-self:center}
.links a{font-size:14.5px;color:var(--ink-2);position:relative;padding:6px 0;
  transition:color .18s var(--ease)}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--grad-cool);transition:right .24s var(--ease)}
.links a:hover,.links .current-menu-item>a{color:var(--ink)}
.links a:hover::after,.links .current-menu-item>a::after{right:0}
.navr{display:flex;gap:12px;align-items:center;justify-self:end}
.navtoggle{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  padding:13px 24px;border-radius:100px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn--n{color:#04070F;background:var(--grad-neon);box-shadow:0 8px 30px -8px rgba(124,107,255,.7)}
.btn--n:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(255,79,163,.75)}
.btn--g{color:var(--ink);border:1px solid var(--line-2);background:var(--panel)}
.btn--g:hover{border-color:var(--c1);color:#fff;box-shadow:var(--glow-c1)}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;
  padding:140px 0 90px;overflow:hidden}
/* Scrim guarantees the headline reads no matter what the shader draws that
   frame — the canvas is atmosphere, contrast is not left to chance. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,11,27,.92) 0%,rgba(7,11,27,.72) 42%,rgba(7,11,27,.10) 78%,transparent 100%)}
.hero .wrap{width:100%;position:relative;z-index:1}
.hero-in{max-width:64ch}
.hero h1{margin-top:24px}
.hero .lede{max-width:52ch}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-meta{display:flex;gap:30px;margin-top:52px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line)}
.hero-meta div{min-width:110px}
.hero-meta b{display:block;font-family:var(--ff-head);font-size:26px;font-weight:700;
  background:var(--grad-neon);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.hero-meta span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3);
  font-family:var(--ff-mono);letter-spacing:.06em}
.hero-scroll{position:absolute;right:34px;bottom:38px;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:10px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.hero-scroll i{width:1px;height:52px;background:linear-gradient(var(--c1),transparent);
  position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--c3);animation:kal-drip 2.4s ease-in-out infinite}
@keyframes kal-drip{0%{top:-100%}100%{top:100%}}
@media (max-width:860px){.hero{padding:110px 0 70px;min-height:auto}.hero-scroll{display:none}}

/* =====================================================================
   Marquee strip
   ===================================================================== */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  /* small mono type over a lit skyline needs a real ground, not a tint */
  padding:20px 0;overflow:hidden;background:rgba(9,14,32,.93)}
.strip-track{display:flex;gap:56px;width:max-content;animation:kal-marq 38s linear infinite}
.strip-track span{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.strip-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c1)}
.strip-track span:nth-child(3n)::before{background:var(--c3)}
.strip-track span:nth-child(3n+1)::before{background:var(--c4)}
@keyframes kal-marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}.hero-scroll i::after{animation:none}}

/* =====================================================================
   Destination cards
   ===================================================================== */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
@media (max-width:980px){.dest-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.dest-grid{grid-template-columns:1fr}}
.dest{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.dest:hover{transform:translateY(-6px);border-color:var(--line-2)}
.dest-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-3)}
.dest-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);opacity:.92}
.dest:hover .dest-media img{transform:scale(1.05);opacity:1}
.dest-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(7,11,27,.55) 68%,rgba(7,11,27,.95) 100%)}
/* each card in a row gets a different neon edge — the spectrum rule */
.dest::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:var(--grad-cool);opacity:.85}
.dest:nth-child(3n+2)::before{background:var(--grad-hot)}
.dest:nth-child(3n)::before{background:linear-gradient(90deg,var(--c5),var(--c1))}
.dest-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px}
.dest-region{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c1)}
.dest h3{margin-top:8px;font-size:21px}
.dest-facts{display:flex;gap:14px;margin-top:12px;font-size:12.5px;color:var(--ink-3);
  font-family:var(--ff-mono);flex-wrap:wrap}
.dest-price{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--ff-mono);
  font-size:12px;padding:6px 12px;border-radius:100px;color:var(--ink);
  background:rgba(7,11,27,.7);border:1px solid var(--line-2);backdrop-filter:blur(8px)}

/* filter chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.chip{font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;padding:9px 18px;
  border-radius:100px;border:1px solid var(--line);color:var(--ink-2);
  background:var(--panel);transition:all .2s var(--ease);cursor:pointer}
.chip:hover{border-color:var(--c1);color:var(--ink)}
.chip.on{background:var(--grad-cool);border-color:transparent;color:#04070F;font-weight:600}

/* =====================================================================
   Split feature
   ===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.split-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;
  border:1px solid var(--line)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-badge{position:absolute;left:20px;bottom:20px;padding:14px 20px;border-radius:12px;
  background:rgba(7,11,27,.82);backdrop-filter:blur(12px);border:1px solid var(--line-2)}
.split-badge b{display:block;font-family:var(--ff-head);font-size:24px;
  background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.split-badge span{font-size:12px;color:var(--ink-3);font-family:var(--ff-mono)}

/* =====================================================================
   Stats
   ===================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--bg-2);padding:34px 26px;text-align:center}
.stat b{display:block;font-family:var(--ff-head);font-size:clamp(30px,3.4vw,44px);font-weight:700}
.stat:nth-child(1) b{color:var(--c1)}
.stat:nth-child(2) b{color:var(--c3)}
.stat:nth-child(3) b{color:var(--c4)}
.stat:nth-child(4) b{color:var(--c5)}
.stat span{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3);
  font-family:var(--ff-mono);letter-spacing:.08em}

/* =====================================================================
   Itinerary timeline
   ===================================================================== */
.tl{margin-top:46px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tl-row{display:grid;grid-template-columns:88px 1fr;gap:24px;background:var(--bg-2);
  padding:26px 28px;transition:background .25s var(--ease)}
.tl-row:hover{background:var(--bg-3)}
@media (max-width:640px){.tl-row{grid-template-columns:1fr;gap:10px;padding:20px}}
.tl-day{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c4);padding-top:4px}
.tl-row h3{font-size:18px}
.tl-row p{margin-top:8px;color:var(--ink-2);font-size:15px;max-width:70ch}

/* =====================================================================
   Testimonials
   ===================================================================== */
.quotes{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{padding:30px;border-radius:var(--r);background:var(--panel);
  border:1px solid var(--line);position:relative}
.quote::before{content:"";position:absolute;top:0;left:26px;width:36px;height:2px;
  background:var(--grad-neon)}
.quote p{font-size:16px;line-height:1.7;color:var(--ink-2)}
.quote cite{display:block;margin-top:18px;font-style:normal;font-size:13px;color:var(--ink-3);
  font-family:var(--ff-mono)}

/* =====================================================================
   Journal
   ===================================================================== */
.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media (max-width:900px){.jr-grid{grid-template-columns:1fr}}
.jr{border-radius:var(--r);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.jr:hover{transform:translateY(-5px);border-color:var(--c2)}
.jr-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.jr-media img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .6s var(--ease)}
.jr:hover .jr-media img{transform:scale(1.05);opacity:1}
.jr-body{padding:24px}
.jr-date{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--c2)}
.jr h3{margin-top:10px;font-size:19px}
.jr p{margin-top:10px;font-size:14.5px;color:var(--ink-2)}

/* =====================================================================
   CTA band
   ===================================================================== */
.cta{position:relative;padding:110px 0;text-align:center;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 100% at 50% 100%,rgba(124,107,255,.30),transparent 70%),
             radial-gradient(46% 82% at 20% 100%,rgba(34,211,238,.24),transparent 72%),
             radial-gradient(46% 82% at 80% 100%,rgba(255,79,163,.24),transparent 72%)}
.cta .wrap{position:relative;z-index:1}
.cta .lede{margin-left:auto;margin-right:auto}
.cta-actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* =====================================================================
   Page hero / archive header
   ===================================================================== */
.pghero{position:relative;padding:140px 0 60px;overflow:hidden}
.pghero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,27,.86),rgba(7,11,27,.62))}
.pghero .wrap{position:relative;z-index:1}
.crumb{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);letter-spacing:.08em}
.crumb a:hover{color:var(--c1)}

.spec{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--line);gap:1px;margin-top:34px}
@media (max-width:760px){.spec{grid-template-columns:repeat(2,1fr)}}
.spec div{background:var(--bg-2);padding:20px 22px}
.spec label{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.spec b{display:block;margin-top:7px;font-size:16px;font-weight:600}

.gallery{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:20px}
@media (max-width:760px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.g-stack{display:grid;gap:18px}
/* two-photo variant — equal weight rather than a hero plus a stack */
.gallery--pair{grid-template-columns:1fr 1fr}
.gallery--pair figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* =====================================================================
   Prose
   ===================================================================== */
.prose{max-width:72ch;font-size:17px;line-height:1.8;color:var(--ink-2)}
.prose h2{font-family:var(--ff-head);font-size:28px;margin:1.7em 0 .5em;color:var(--ink)}
.prose h3{font-family:var(--ff-head);font-size:21px;margin:1.5em 0 .4em;color:var(--ink)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.25em}
.prose a{color:var(--c1);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.3em 1.3em;padding:0}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin-bottom:.55em}
.prose blockquote{margin:1.6em 0;padding:20px 26px;border-left:2px solid var(--c3);
  background:var(--panel);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--ff-head);font-size:19px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose img{border-radius:var(--r);margin:1.5em 0}

/* =====================================================================
   Footer
   ===================================================================== */
.foot{padding:76px 0 40px;border-top:1px solid var(--line);background:rgba(7,11,27,.8)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fcol h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px}
.fcol li{margin-bottom:10px}
.fcol a{font-size:14.5px;color:var(--ink-2)}
.fcol a:hover{color:var(--c1)}
.fbot{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:52px;padding-top:24px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.fdisc{margin-left:auto;max-width:60ch;text-align:right;line-height:1.65}
@media (max-width:900px){.fdisc{margin-left:0;text-align:left}}

/* =====================================================================
   Reveal animation
   ===================================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  #kal-scene{display:none}
}

/* =====================================================================
   Mobile nav
   ===================================================================== */
.mnav-cta{display:none}
@media (max-width:900px){
  .links{display:none}
  .navtoggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
    border:1px solid var(--line-2);border-radius:100px;padding:10px 16px}
  .navtoggle[aria-expanded="true"]{background:var(--grad-cool);color:#04070F;border-color:transparent}
  [data-mnav]{position:absolute;left:0;right:0;top:74px;display:none;
    background:rgba(9,14,32,.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line)}
  [data-mnav].open{display:block}
  [data-mnav] .links{display:flex;flex-direction:column;gap:0;padding:8px 32px 20px;width:100%}
  [data-mnav] .links li+li{border-top:1px solid var(--line)}
  [data-mnav] .links a{display:block;padding:16px 0;font-size:16px;color:var(--ink)}
  [data-mnav] .links a::after{display:none}
}
/* below ~470px the toggle and the header CTA can't share the row with the
   logo — surface the CTA inside the open menu instead of letting it overflow */
@media (max-width:470px){
  .navr .btn{display:none}
  .mnav-cta{display:block;margin:14px 32px 6px;padding:14px 18px;text-align:center;
    font-size:14.5px;font-weight:600;color:#04070F;background:var(--grad-neon);border-radius:100px}
}

/* =====================================================================
   Misc
   ===================================================================== */
.rule{height:1px;background:var(--line)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:999;padding:12px 18px;background:var(--c1);color:#04070F;
  border-radius:8px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.nav-links{display:flex;gap:10px;margin-top:40px;flex-wrap:wrap}
.nav-links .page-numbers{padding:10px 16px;border:1px solid var(--line);border-radius:8px;
  font-family:var(--ff-mono);font-size:13px;color:var(--ink-2)}
.nav-links .page-numbers.current{background:var(--grad-cool);color:#04070F;border-color:transparent}
.searchform{display:flex;gap:10px;margin-top:24px}
.searchform input[type=search]{flex:1;background:var(--panel);border:1px solid var(--line);
  border-radius:100px;padding:13px 20px;color:var(--ink);font-size:14.5px}
.searchform input[type=search]::placeholder{color:var(--ink-3)}