/* =====================================================
   iamjonathan.net — Field Edition vF.1 (experimental)
   ===================================================== */

:root {
  /* Backgrounds */
  --bg:   #0c1409;
  --bg2:  #111a0d;
  --bg3:  #162012;
  /* Text */
  --leaf:   #c9d4c0;
  --leaf2:  #9aaa90;
  --dim:    rgba(201,212,192,.55);
  --dimmer: rgba(201,212,192,.5);
  /* Accent */
  --amber:  #d4a838;
  --amber2: #e8bf55;
  --amber-rgb: 212,168,56;
  /* Structure */
  --rule:   rgba(201,212,192,.08);
  --moss:   #2d4a28;
  /* Type */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --cond:  "Barlow Condensed", "Helvetica Neue", sans-serif;
  /* Layout */
  --pad-x: 52px;
  --pad-y: 100px;
  --max:   1140px;
  --rail-x: 52px;
}

/* Light mode (tweakable) */
:root[data-theme="light"] {
  --bg:   #efece3;
  --bg2:  #e6e1d4;
  --bg3:  #ddd6c4;
  --leaf:   #1a2614;
  --leaf2:  #3b4a32;
  --dim:    rgba(26,38,20,.55);
  --dimmer: rgba(26,38,20,.32);
  --amber:  #9a6a14;
  --amber2: #b58422;
  --amber-rgb: 154,106,20;
  --rule:   rgba(26,38,20,.12);
  --moss:   #6a8a55;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--leaf);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body { cursor: none; }
@media (max-width: 880px){ body{ cursor: auto; } }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--amber); color: var(--bg); }

/* =====================================================
   Loader
   ===================================================== */
#loader{
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .8s ease, visibility .8s;
}
#loader.gone{ opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner{ display: grid; place-items: center; gap: 28px; position: relative; }
.signal-rings{ position: relative; width: 120px; height: 120px; }
.signal-rings span{
  position: absolute; inset: 50%; width: 0; height: 0;
  border: 1.5px solid var(--amber);
  border-radius: 50%; opacity: 0;
  animation: expand 1.8s cubic-bezier(.2,.6,.2,1) infinite;
}
.signal-rings span:nth-child(2){ animation-delay: .5s; }
.signal-rings span:nth-child(3){ animation-delay: 1s; }
.signal-rings::before{
  content: ""; position: absolute; inset: 50%;
  width: 8px; height: 8px; transform: translate(-50%,-50%);
  background: var(--amber); border-radius: 50%;
  box-shadow: 0 0 24px rgba(var(--amber-rgb),.6);
}
@keyframes expand{
  0%   { width: 0; height: 0; opacity: .9; margin: 0; }
  100% { width: 120px; height: 120px; opacity: 0; margin: -60px 0 0 -60px; }
}
.loader-name{ font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--leaf); }
.loader-label{ font-family: var(--cond); font-size: 9px; letter-spacing: .32em; color: var(--dimmer); text-transform: uppercase; }

/* =====================================================
   Custom cursor
   ===================================================== */
#cur, #cur-ring{
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%;
  transition: width .25s, height .25s, opacity .25s, background .2s;
}
#cur{
  width: 6px; height: 6px; background: var(--amber);
  mix-blend-mode: screen;
  transform: translate(-50%,-50%);
}
#cur-ring{
  width: 34px; height: 34px;
  border: 1px solid rgba(var(--amber-rgb), .35);
  transform: translate(-50%,-50%);
}
body.hover-int #cur{ width: 16px; height: 16px; }
body.hover-int #cur-ring{ opacity: 0; }
@media (max-width: 880px){ #cur,#cur-ring{ display:none; } }

/* =====================================================
   Ghost numbers (Roni Levi influence)
   ===================================================== */
.ghost{
  position: fixed; pointer-events: none; z-index: 0;
  font-family: var(--serif); font-style: italic;
  color: rgba(var(--amber-rgb), .035);
  line-height: .8;
  user-select: none;
}
.ghost.g1{ font-size: 260px; top: 5%; left: 52%; }
.ghost.g2{ font-size: 180px; top: 38%; right: 8%; }
.ghost.g3{ font-size: 140px; bottom: 20%; left: 58%; }
.ghost.g4{ font-size: 100px; top: 65%; left: 72%; }
.ghost.g5{ font-size: 80px;  top: 22%; left: 35%; }

/* =====================================================
   Radar / transmission motif (push the design further)
   ===================================================== */
.radar{
  position: fixed; pointer-events: none; z-index: 0;
  width: 720px; height: 720px; top: -180px; right: -180px;
  opacity: .35;
  mix-blend-mode: screen;
}
:root[data-theme="light"] .radar{ mix-blend-mode: multiply; opacity: .25; }
.radar svg{ width: 100%; height: 100%; }
.radar .ring{ fill: none; stroke: rgba(var(--amber-rgb), .22); stroke-width: 1; }
.radar .sweep{
  transform-origin: 50% 50%;
  animation: sweep 6s linear infinite;
}
@keyframes sweep{ to { transform: rotate(360deg); } }
.radar .grid-line{ stroke: rgba(var(--amber-rgb), .08); stroke-width: 1; }
.radar .ping{
  fill: var(--amber);
  animation: ping 4s ease-out infinite;
}
@keyframes ping{
  0%, 80% { r: 2; opacity: 1; }
  100%    { r: 14; opacity: 0; }
}

/* =====================================================
   Nav
   ===================================================== */
nav.top{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 52px;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
nav.top.scrolled{
  background: rgba(12,20,9,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(var(--amber-rgb), .15);
}
:root[data-theme="light"] nav.top.scrolled{ background: rgba(239,236,227,.92); }
nav .logo{ font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--leaf); }
nav .meta{ display: flex; gap: 24px; align-items: center; }
nav .freq{
  font-family: var(--cond); font-size: 9px; letter-spacing: .28em;
  color: var(--dimmer); text-transform: uppercase;
  display: flex; gap: 10px; align-items: center;
}
nav .freq::before{
  content:""; width: 6px; height: 6px; border-radius:50%;
  background: var(--amber);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; box-shadow: 0 0 8px rgba(var(--amber-rgb),.6);} 50%{ opacity:.3; box-shadow:none;} }
.btn-ghost{
  font-family: var(--cond); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid rgba(var(--amber-rgb), .6);
  color: var(--amber); transition: all .25s;
}
.btn-ghost:hover{ background: rgba(var(--amber-rgb), .12); border-color: var(--amber); color: var(--amber2); }
@media (max-width: 880px){
  nav.top{ padding: 16px 24px; }
  nav .freq{ display: none; }
}

/* =====================================================
   Section primitives
   ===================================================== */
section{
  position: relative; z-index: 1;
  padding: var(--pad-y) var(--pad-x);
}
.inner{ max-width: var(--max); margin: 0 auto; }

.sec-lbl{
  font-family: var(--cond); font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--amber);
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 48px;
}
.sec-lbl::before{
  content: attr(data-n); color: var(--dimmer); font-family: var(--cond);
  letter-spacing: .14em;
}
.sec-lbl::after{
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--amber-rgb),.4), transparent);
}

.sec-h{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 1.0; color: var(--leaf);
  margin-bottom: 56px;
  text-wrap: balance;
}
.sec-h em{ font-style: italic; color: var(--amber); }
.sec-h .out{
  -webkit-text-stroke: 1.5px rgba(201,212,192,.65);
  color: transparent;
}
:root[data-theme="light"] .sec-h .out{ -webkit-text-stroke-color: rgba(26,38,20,.55); }

/* Reveals */
.rv  { opacity: 0; transform: translateY(22px);  transition: opacity .9s ease, transform .9s ease; }
.rv-l{ opacity: 0; transform: translateX(-22px); transition: opacity .9s ease, transform .9s ease; }
.rv.in, .rv-l.in{ opacity: 1; transform: none; }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  padding: 120px 52px 60px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero .photo{
  position: absolute; inset: 0;
  background: var(--bg);
  overflow: hidden;
}
.hero .photo-img{
  position: absolute; inset: 0;
  background-image: url('jonathan.jpg');
  background-size: auto 115%;
  background-position: center 18%;
  background-repeat: no-repeat;
  filter: brightness(.82) contrast(1.05) saturate(.55) sepia(.12);
  -webkit-mask-image:
    radial-gradient(ellipse 42% 60% at 50% 40%, #000 0%, rgba(0,0,0,.92) 25%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.18) 75%, transparent 92%);
          mask-image:
    radial-gradient(ellipse 42% 60% at 50% 40%, #000 0%, rgba(0,0,0,.92) 25%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.18) 75%, transparent 92%);
  opacity: 0;
  transition: opacity 1s ease;
  mix-blend-mode: luminosity;
}
.hero.loaded .photo-img{
  opacity: 1;
  animation: tvTune 2.6s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes tvTune{
  0%   { filter: brightness(.3) contrast(2.4) saturate(0) blur(8px); transform: translateY(2%) scaleY(.05); opacity: 0; }
  6%   { transform: translateY(0) scaleY(.02); opacity: .9; filter: brightness(2.5) contrast(3) saturate(0) blur(0); }
  10%  { transform: scaleY(1) translateY(0); filter: brightness(.4) contrast(2) saturate(0) blur(6px); }
  18%  { filter: brightness(.7) contrast(1.6) saturate(.3) blur(4px) hue-rotate(-12deg); transform: translateX(-1.5%); }
  28%  { filter: brightness(.6) contrast(1.4) saturate(.4) blur(3px) hue-rotate(8deg); transform: translateX(1%); }
  40%  { filter: brightness(.75) contrast(1.3) saturate(.45) blur(2.5px); transform: translateX(-.5%); }
  55%  { filter: brightness(.78) contrast(1.2) saturate(.5) blur(1.4px); transform: translateX(.2%); }
  72%  { filter: brightness(.8) contrast(1.1) saturate(.52) blur(.6px); transform: none; }
  100% { filter: brightness(.82) contrast(1.05) saturate(.55) sepia(.12) blur(0); transform: none; }
}

/* CRT scanlines + rolling bar overlay during tune */
.hero .photo-scanlines{
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 0%, rgba(var(--amber-rgb),.12) 50%, transparent 100%);
  background-size: 100% 100%, 100% 30%;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-image:
    radial-gradient(ellipse 42% 60% at 50% 40%, #000 0%, rgba(0,0,0,.6) 55%, transparent 92%);
          mask-image:
    radial-gradient(ellipse 42% 60% at 50% 40%, #000 0%, rgba(0,0,0,.6) 55%, transparent 92%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero.loaded .photo-scanlines{
  animation: scanRoll 2.6s linear forwards;
}
@keyframes scanRoll{
  0%   { opacity: .9; background-position: 0 0, 0 -120%; }
  20%  { background-position: 0 6px, 0 -40%; opacity: .8; }
  50%  { background-position: 0 0, 0 30%; opacity: .55; }
  80%  { background-position: 0 4px, 0 120%; opacity: .25; }
  100% { opacity: 0; background-position: 0 0, 0 200%; }
}

/* Static noise overlay during tune */
.hero .photo-noise{
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/></svg>");
  background-size: 240px 240px;
  -webkit-mask-image:
    radial-gradient(ellipse 42% 60% at 50% 40%, #000 0%, rgba(0,0,0,.55) 55%, transparent 92%);
          mask-image:
    radial-gradient(ellipse 42% 60% at 50% 40%, #000 0%, rgba(0,0,0,.55) 55%, transparent 92%);
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0;
}
.hero.loaded .photo-noise{ animation: noise 2.6s steps(8) forwards; }
@keyframes noise{
  0%   { opacity: .9; background-position: 0 0; }
  20%  { opacity: .8; background-position: 40px 60px; }
  40%  { opacity: .55; background-position: -30px 30px; }
  60%  { opacity: .35; background-position: 20px -40px; }
  80%  { opacity: .15; background-position: 0 0; }
  100% { opacity: 0; }
}
.hero .photo-halo{
  position: absolute; inset: 0;
  background-image: url('jonathan.jpg');
  background-size: auto 115%;
  background-position: center 18%;
  background-repeat: no-repeat;
  filter: blur(22px) brightness(.55) saturate(.5);
  -webkit-mask-image:
    radial-gradient(ellipse 62% 82% at 50% 40%, rgba(0,0,0,.5) 25%, transparent 82%);
          mask-image:
    radial-gradient(ellipse 62% 82% at 50% 40%, rgba(0,0,0,.5) 25%, transparent 82%);
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.hero.loaded .photo-halo{ opacity: .6; }
.hero .photo-slot{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 40%, rgba(var(--amber-rgb),.06) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, transparent 50%, var(--bg) 95%),
    linear-gradient(180deg, rgba(12,20,9,.45) 0%, transparent 25%, transparent 70%, rgba(12,20,9,.7) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(12,20,9,.5) 12%, transparent 28%, transparent 72%, rgba(12,20,9,.5) 88%, var(--bg) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero.loaded .photo-img,
.hero.loaded .photo-slot{ opacity: 1; }
.hero .photo-tint{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 35%, rgba(var(--amber-rgb),.08), transparent 70%);
  mix-blend-mode: color;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero.loaded .photo-tint{ opacity: 1; }

/* Hero variant: video — ambient looping motion */
.hero[data-hero="video"] .photo-slot{
  background:
    linear-gradient(180deg, transparent 0%, var(--bg) 78%),
    linear-gradient(270deg, transparent 45%, rgba(12,20,9,.55) 100%),
    radial-gradient(ellipse at 60% 40%, rgba(var(--amber-rgb),.18), transparent 60%),
    linear-gradient(135deg, #1f2a18 0%, #2d4a28 60%, #1a2310 100%);
  animation: ambient 14s ease-in-out infinite alternate;
}
.hero[data-hero="video"] .photo-slot::after{ content: "[ AMBIENT — LOOPING ]"; }
@keyframes ambient{
  0%   { filter: brightness(.62) contrast(1.06) saturate(.72) hue-rotate(0deg); transform: scale(1.0) translate(0,0); }
  50%  { filter: brightness(.7)  contrast(1.1)  saturate(.85) hue-rotate(-6deg); transform: scale(1.04) translate(-1%,-1%); }
  100% { filter: brightness(.6)  contrast(1.04) saturate(.7)  hue-rotate(4deg);  transform: scale(1.02) translate(1%,1%); }
}

/* Hero variant: type-only — hide photo */
.hero[data-hero="type"] .photo-slot{ display: none; }
.hero[data-hero="type"] .photo{
  background:
    radial-gradient(ellipse at 30% 30%, rgba(var(--amber-rgb),.06), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(var(--amber-rgb),.04), transparent 50%),
    var(--bg);
}

.scan-line{
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--amber) 70%, transparent);
  transform: scaleX(0); transform-origin: left center;
  z-index: 5;
}
.hero.loaded .scan-line{ animation: scan-in .8s .4s cubic-bezier(.2,.7,.2,1) forwards, scan-pulse 6s 2s ease-in-out infinite; }
@keyframes scan-in{ to { transform: scaleX(1); } }
@keyframes scan-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.hero-content{
  position: relative; z-index: 4;
  width: 100%; max-width: var(--max);
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end;
}

.dispatch-label{
  font-family: var(--cond); font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--amber);
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 24px;
  opacity: 0;
}
.hero.loaded .dispatch-label{ animation: fade-in .8s .5s ease forwards; }
.dispatch-label::before{ content: "▸"; color: var(--amber); }
.dispatch-label .coord{ color: var(--dimmer); margin-left: 8px; }

.hero h1{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 10vw, 148px);
  line-height: .88;
  letter-spacing: -.02em;
  color: var(--leaf);
}
.hero h1{ padding-left: .2em; margin-left: -.2em; padding-bottom: .2em; }
.hero h1 .row{ display: block; clip-path: inset(0 -.5em -.25em 0); padding-left: .12em; margin-left: -.12em; }
.hero h1 .row.r2{ padding-left: .35em; }
.hero h1 .row .word{
  display: inline-block; transform: translateY(110%);
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.hero.loaded h1 .row.r1 .word{ transition-delay: .4s; transform: translateY(0); }
.hero.loaded h1 .row.r2 .word{ transition-delay: .56s; transform: translateY(0); }
.hero h1 em{ font-style: italic; color: var(--amber); }

.tagline{
  margin-top: 36px; max-width: 540px;
  font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.65;
  color: var(--dim);
  border-left: 2px solid var(--amber);
  padding-left: 18px;
  opacity: 0;
}
.hero.loaded .tagline{ animation: fade-in 1s 1s ease forwards; }
.tagline em{ font-style: normal; font-weight: 400; color: var(--leaf); }

.hero-cta{
  margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0;
}
.hero.loaded .hero-cta{ animation: fade-in 1s 1.1s ease forwards; }
.btn{
  font-family: var(--cond); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  padding: 14px 22px; transition: all .25s;
  display: inline-flex; gap: 10px; align-items: center;
}
.btn.primary{ background: var(--amber); color: #0c1409; }
.btn.primary:hover{ background: var(--amber2); }
.btn.ghost{ border: 1px solid rgba(var(--amber-rgb),.55); color: var(--amber); }
.btn.ghost:hover{ background: rgba(var(--amber-rgb),.1); border-color: var(--amber); }

.floats{
  display: flex; flex-direction: column; gap: 22px;
  border-right: 1px solid var(--amber);
  padding-right: 28px;
  text-align: right;
  opacity: 0;
}
.hero.loaded .floats{ animation: fade-in 1s 1.15s ease forwards, floatTune 1.4s 1.4s cubic-bezier(.2,.6,.3,1) both; }
@keyframes floatTune{
  0%   { filter: blur(6px) brightness(2) contrast(2) saturate(0); transform: scaleY(.05) translateX(2px); }
  8%   { filter: blur(0) brightness(2.8) contrast(3) saturate(0); transform: scaleY(.02); }
  14%  { filter: blur(5px) brightness(.5) contrast(1.8) saturate(0); transform: scaleY(1) translateX(-3px); }
  30%  { filter: blur(3px) brightness(.8) contrast(1.4) saturate(.5) hue-rotate(-8deg); transform: translateX(2px); }
  55%  { filter: blur(1.6px) brightness(.95) contrast(1.15) saturate(.8); transform: translateX(-1px); }
  80%  { filter: blur(.5px) brightness(1) contrast(1.05) saturate(.95); transform: none; }
  100% { filter: none; transform: none; }
}
.floats{ position: relative; }
.floats::after{
  content: "";
  position: absolute; inset: -8px -12px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 0%, rgba(var(--amber-rgb),.18) 50%, transparent 100%);
  background-size: 100% 100%, 100% 40%;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0;
}
.hero.loaded .floats::after{ animation: floatScan 1.4s 1.4s linear forwards; }
@keyframes floatScan{
  0%   { opacity: .9; background-position: 0 0, 0 -120%; }
  40%  { opacity: .55; background-position: 0 4px, 0 30%; }
  100% { opacity: 0;   background-position: 0 0, 0 160%; }
}
.floats .f{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Split-flap flight board — digit reel */
.floats .num{
  font-family: var(--serif); font-style: italic; font-size: 38px; line-height: 1;
  color: var(--leaf); font-variant-numeric: tabular-nums;
  display: inline-flex; gap: 3px; align-items: center;
}
.flap{
  position: relative;
  display: inline-block;
  width: .58em; height: 1em;
  overflow: hidden;
  background: #1a2410;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb),.22), 0 1px 0 rgba(0,0,0,.4);
  vertical-align: top;
}
.flap.no-card{
  background: transparent;
  box-shadow: none;
  width: auto; min-width: .25em;
  padding: 0 .04em;
  overflow: visible;
}
.flap::before{
  /* split line through center */
  content:"";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0,0,0,.55);
  z-index: 3; pointer-events: none;
}
.flap.no-card::before{ display: none; }
.flap .reel{
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .42s cubic-bezier(.45,.05,.3,1);
}
.flap .reel > span{
  height: 1em; line-height: 1; display: flex; align-items: center; justify-content: center;
  width: 100%;
  font: inherit;
  color: var(--leaf);
}
.flap.no-card .reel{ position: static; }

/* =====================================================
   Plane routine — ambient background animation
   ===================================================== */
.plane-canvas{
  position: fixed; inset: 0; z-index: 50;
  width: 100vw; height: 100vh;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
}
.plane-trail{
  fill: none;
  stroke: rgba(var(--amber-rgb), .65);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plane-pin circle.pin-dot{
  fill: var(--amber);
  filter: drop-shadow(0 0 6px rgba(var(--amber-rgb),.7));
}
.plane-pin circle.pin-pulse{
  fill: none;
  stroke: rgba(var(--amber-rgb), .65);
  stroke-width: 1;
  transform-origin: center;
  animation: pinPulse 1.8s ease-out infinite;
}
.plane-pin text{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  fill: var(--amber);
}
.plane-pin .pin-line{
  stroke: rgba(var(--amber-rgb), .55);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  fill: none;
}
@keyframes pinPulse{
  0%   { r: 4; opacity: .9; }
  100% { r: 18; opacity: 0; }
}
.plane-icon{
  fill: var(--amber);
  filter: drop-shadow(0 0 4px rgba(var(--amber-rgb),.6));
}

@media (max-width: 880px){
  .plane-canvas{ display: none; }
}
.floats .lbl{ font-family: var(--cond); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(201,212,192,.75); }

@keyframes fade-in{ to { opacity: 1; } }

@media (max-width: 880px){
  .hero{ padding: 100px 24px 40px; }
  .hero-content{ grid-template-columns: 1fr; gap: 30px; }
  .floats{ display: none; }
}

/* =====================================================
   Stat bar
   ===================================================== */
.statbar{
  background: var(--bg2);
  padding: 28px 52px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative; z-index: 2;
}
.statbar .grid{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.stat{
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 0;
  cursor: none;
}
.stat .num{
  font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1;
  color: var(--leaf); transition: color .25s;
}
.stat .lbl{
  font-family: var(--cond); font-size: 8px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--dimmer);
}
.stat:hover .num{ color: var(--amber); }
.stat .tip{
  position: absolute; bottom: calc(100% + 12px); left: 0;
  background: var(--bg3); border: 1px solid rgba(var(--amber-rgb),.5);
  padding: 10px 14px; font-family: var(--sans); font-size: 12px; color: var(--leaf);
  white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: all .25s;
  font-style: italic; font-family: var(--serif);
}
.stat:hover .tip{ opacity: 1; transform: translateY(0); }

@media (max-width: 880px){
  .statbar .grid{ grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4), .stat:nth-child(5){ display: none; }
}

/* =====================================================
   Marquee
   ===================================================== */
.marquee{
  padding: 32px 0;
  overflow: hidden;
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--rule);
}
.marquee::before, .marquee::after{
  content:""; position: absolute; top:0; bottom:0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before{ left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after{ right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.mtrack{
  display: flex; gap: 48px; width: max-content;
  animation: marquee 32s linear infinite;
}
.mtrack span{
  font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--dimmer);
  display: flex; gap: 48px; align-items: center;
}
.mtrack span::after{ content: "·"; color: var(--amber); font-size: 32px; }
.mtrack .pulse{ display: inline-flex; gap: 8px; align-items: center; font-family: var(--cond); font-style: normal; font-size: 9px; letter-spacing: .32em; color: var(--amber); text-transform: uppercase; }
.mtrack .pulse::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber);
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes marquee{ to { transform: translateX(-50%); } }

/* =====================================================
   Belief / statement
   ===================================================== */
.belief{ padding: var(--pad-y) var(--pad-x); }
.stmt-q{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4.5vw, 64px); line-height: 1.05;
  max-width: 880px; color: var(--leaf);
  margin-bottom: 64px;
  text-wrap: balance;
}
.stmt-q em{ font-style: italic; color: var(--amber); }
.stmt-q .out{
  -webkit-text-stroke: 1.5px rgba(201,212,192,.65); color: transparent;
}
:root[data-theme="light"] .stmt-q .out{ -webkit-text-stroke-color: rgba(26,38,20,.55); }

.belief-body{
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
}
.belief-body p{
  font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.82;
  color: var(--dim); max-width: 540px;
}
.belief-body p + p{ margin-top: 18px; }
.belief-body em{ font-style: normal; font-weight: 400; color: var(--leaf); }

.asides{ display: flex; flex-direction: column; gap: 0; }
.aside{
  display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.aside:last-child{ border-bottom: none; }
.aside .anum{ font-family: var(--cond); font-size: 10px; letter-spacing: .22em; color: var(--dimmer); }
.aside .aval{ font-family: var(--serif); font-style: italic; font-size: 40px; color: var(--leaf); line-height: 1; }
.aside .albl{ font-family: var(--cond); font-size: 9px; letter-spacing: .28em; color: var(--dimmer); text-transform: uppercase; margin-top: 6px; display: block; }

@media (max-width: 880px){ .belief-body{ grid-template-columns: 1fr; gap: 40px; } }

/* =====================================================
   Four rules
   ===================================================== */
.rules{ background: var(--bg2); }
.rules-list{ display: flex; flex-direction: column; }
.rule-row{
  display: grid; grid-template-columns: 80px 1.2fr 2fr; gap: 32px; align-items: start;
  padding: 32px 0; border-top: 1px solid var(--rule);
  transition: background .3s;
}
.rule-row:last-child{ border-bottom: 1px solid var(--rule); }
.rule-row .n{
  font-family: var(--serif); font-style: italic; font-size: 48px; line-height: 1;
  color: var(--rule); transition: color .3s;
}
.rule-row .name{
  font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); color: var(--leaf);
}
.rule-row .desc{
  font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.82; color: var(--dim);
  max-width: 520px;
}
.rule-row:hover .n{ color: var(--amber); }
.rule-row:hover .name{ color: var(--amber); }

@media (max-width: 880px){
  .rule-row{ grid-template-columns: 50px 1fr; }
  .rule-row .desc{ grid-column: 2; }
}

/* =====================================================
   Timeline
   ===================================================== */
.timeline-section{ padding-bottom: 140px; }
.timeline-wrap{ position: relative; padding-left: 140px; }
.rail{
  position: absolute; left: var(--rail-x); top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--amber) 0%, rgba(var(--amber-rgb), .1) 100%);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.rail.drawn{ transform: scaleY(1); }

.chapter{
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--rule);
  margin-bottom: 16px;
  transition: all .3s;
  overflow: hidden;
}
.chapter::before{
  content: attr(data-n);
  position: absolute; top: 12px; right: 24px;
  font-family: var(--serif); font-style: italic; font-size: 160px; line-height: 1;
  color: rgba(var(--amber-rgb), .04);
  pointer-events: none;
  transition: color .3s;
  z-index: 0;
}
.chapter:hover{ border-color: rgba(var(--amber-rgb), .25); }
.chapter.open{ border-color: rgba(var(--amber-rgb), .5); background: var(--bg3); }
.chapter.open::before{ color: rgba(var(--amber-rgb), .07); }

.chapter .year{
  position: absolute; left: -200px; top: 28px; width: 110px;
  text-align: right;
  font-family: var(--cond); font-size: 11px; letter-spacing: .22em; color: var(--dimmer);
  transition: color .3s;
}
.chapter.open .year{ color: var(--amber); }

.chapter .dot{
  position: absolute; left: -94px; top: 36px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg2);
  border: 1px solid rgba(var(--amber-rgb), .35);
  transition: all .3s;
  z-index: 2;
}
.chapter:hover .dot{ border-color: var(--amber); background: rgba(var(--amber-rgb), .1); }
.chapter.open .dot{
  background: var(--amber); border-color: var(--amber);
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(var(--amber-rgb), .5);
}

.chapter-head{
  position: relative; z-index: 1;
  padding: 24px 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  cursor: none;
}
.chapter .co{ font-family: var(--cond); font-size: 8px; letter-spacing: .32em; color: var(--amber); text-transform: uppercase; margin-bottom: 8px; display: block; }
.chapter .title{ font-family: var(--serif); font-size: clamp(17px, 2vw, 26px); color: var(--leaf); line-height: 1.1; }
.chapter .hook{ font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--dim); margin-top: 8px; }

.chapter .toggle{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(var(--amber-rgb), .55);
  display: grid; place-items: center;
  color: var(--amber); font-size: 14px;
  transition: all .3s;
  flex-shrink: 0;
}
.chapter:hover .toggle{ border-color: var(--amber); background: rgba(var(--amber-rgb), .08); }
.chapter .toggle .plus{ transition: transform .3s; display: inline-block; }
.chapter.open .toggle .plus{ transform: rotate(45deg); }

.chapter .panel{
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,0,.2,1);
}
.chapter .panel-inner{
  padding: 8px 28px 28px;
  display: grid; grid-template-columns: 1fr 220px; gap: 40px;
}
.chapter .lede{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5;
  color: var(--leaf);
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.chapter .story{
  font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.9; color: var(--dim);
}
.chapter .story em{ font-style: normal; font-weight: 400; color: var(--leaf); }
.chapter .story p + p{ margin-top: 14px; }
.chapter .meta{
  border-left: 1px solid var(--rule); padding-left: 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.chapter .meta .row{ display: flex; flex-direction: column; gap: 4px; }
.chapter .meta .row .lbl{ font-family: var(--cond); font-size: 8px; letter-spacing: .28em; text-transform: uppercase; color: var(--dimmer); }
.chapter .meta .row .val{ font-family: var(--serif); font-size: 18px; color: var(--leaf); }
.chapter .meta .row .val.big{ font-style: italic; font-size: 32px; color: var(--amber); }

@media (max-width: 880px){
  .timeline-wrap{ padding-left: 0; }
  .rail, .chapter .dot{ display: none; }
  .chapter .year{ position: relative; left: 0; top: 0; width: auto; text-align: left; padding: 0 28px; padding-top: 18px; }
  .chapter .panel-inner{ grid-template-columns: 1fr; gap: 24px; }
  .chapter .meta{ border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 18px; }
}

/* =====================================================
   Field notes
   ===================================================== */
.notes{ background: var(--bg2); }
.note{
  display: block; position: relative;
  border-top: 1px solid var(--rule); padding: 28px 0;
  cursor: none; transition: background .3s;
}
.note:last-of-type{ border-bottom: 1px solid var(--rule); }
.note::before{
  content:""; position: absolute; left: -16px; top: 0; bottom: 0; width: 2px;
  background: var(--amber);
  transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.note.open{ background: rgba(var(--amber-rgb), .03); }
.note.open::before{ transform: scaleY(1); }
.note-head{
  display: grid; grid-template-columns: 140px 1fr 50px; gap: 32px; align-items: center;
}
.note .date{ font-family: var(--cond); font-size: 9px; letter-spacing: .28em; color: var(--dimmer); text-transform: uppercase; }
.note .tag{ font-family: var(--cond); font-size: 9px; letter-spacing: .28em; color: var(--amber); text-transform: uppercase; display: inline-block; margin-right: 14px; }
.note h3{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px); color: var(--leaf); display: inline;
}
.note .x{
  width: 32px; height: 32px; position: relative; justify-self: end;
  transition: transform .3s;
}
.note .x::before, .note .x::after{
  content:""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1px;
  background: var(--dimmer); transition: background .3s, transform .3s;
}
.note .x::before{ transform: translate(-50%,-50%); }
.note .x::after { transform: translate(-50%,-50%) rotate(90deg); }
.note.open .x::before{ background: var(--amber); transform: translate(-50%,-50%) rotate(45deg); }
.note.open .x::after { background: var(--amber); transform: translate(-50%,-50%) rotate(-45deg); }

.note-body{
  max-height: 0; overflow: hidden; transition: max-height .48s cubic-bezier(.4,0,.2,1);
}
.note-body-inner{
  padding: 20px 0 4px;
  display: grid; grid-template-columns: 172px 1fr; gap: 32px;
  opacity: 0; transform: translateY(10px); transition: all .38s .1s;
}
.note.open .note-body-inner{ opacity: 1; transform: none; }
.note-body p{
  font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.88; color: var(--dim);
  border-left: 1px solid var(--rule); padding-left: 28px;
  max-width: 640px;
}
.note-body p + p{ margin-top: 14px; }
.note-body em{ font-style: normal; font-weight: 400; color: var(--leaf); }

@media (max-width: 880px){
  .note-head{ grid-template-columns: 1fr 40px; gap: 12px; }
  .note .date{ grid-column: 1; }
  .note-body-inner{ grid-template-columns: 1fr; }
  .note-body p{ padding-left: 0; border-left: none; border-top: 1px solid var(--rule); padding-top: 16px; }
}

/* =====================================================
   Connect bar
   ===================================================== */
.connect{
  background: var(--amber); color: #0c1409;
  padding: 80px 52px;
  position: relative; z-index: 2;
}
.connect-inner{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.connect h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 5vw, 64px); line-height: 1.0;
  color: #0c1409;
  max-width: 720px;
  text-wrap: balance;
}
.connect h2 em{ font-style: italic; }
.connect .btn-dark{
  font-family: var(--cond); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  padding: 16px 24px; border: 1px solid #0c1409; color: #0c1409;
  display: inline-flex; gap: 12px; align-items: center;
  transition: all .25s;
}
.connect .btn-dark:hover{ background: #0c1409; color: var(--amber); }

@media (max-width: 880px){
  .connect{ padding: 60px 24px; }
  .connect-inner{ grid-template-columns: 1fr; gap: 24px; }
}

/* =====================================================
   Footer-ish dispatch terminator
   ===================================================== */
.term{
  padding: 60px 52px;
  border-top: 1px solid var(--rule);
  position: relative; z-index: 2;
}
.term-inner{
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--cond); font-size: 10px; letter-spacing: .28em; color: var(--dimmer); text-transform: uppercase;
}
.term .end{ color: var(--amber); display: flex; gap: 10px; align-items: center; }
.term .end::before{ content:""; width: 6px; height: 6px; background: var(--amber); display: inline-block; animation: blink 1.4s ease-in-out infinite; }

/* =====================================================
   Tweaks panel
   ===================================================== */
#tweaks{
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 280px;
  background: rgba(22,32,18,.96);
  border: 1px solid rgba(var(--amber-rgb), .35);
  backdrop-filter: blur(12px);
  padding: 16px; display: none;
  font-family: var(--cond);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
:root[data-theme="light"] #tweaks{ background: rgba(221,214,196,.96); }
#tweaks.on{ display: block; }
#tweaks .tw-head{
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 14px;
}
#tweaks .tw-title{ font-size: 10px; letter-spacing: .32em; color: var(--amber); text-transform: uppercase; }
#tweaks .tw-x{
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--dimmer); cursor: none; transition: color .2s;
}
#tweaks .tw-x:hover{ color: var(--amber); }
#tweaks .tw-section{ margin-bottom: 14px; }
#tweaks .tw-lbl{ font-size: 8px; letter-spacing: .28em; color: var(--dimmer); text-transform: uppercase; margin-bottom: 8px; }
#tweaks .tw-opts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#tweaks .tw-opts.two{ grid-template-columns: repeat(2, 1fr); }
#tweaks .tw-opt{
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 6px; border: 1px solid var(--rule); color: var(--dim);
  cursor: none; transition: all .2s; text-align: center;
}
#tweaks .tw-opt:hover{ border-color: rgba(var(--amber-rgb),.4); color: var(--leaf); }
#tweaks .tw-opt.active{ border-color: var(--amber); color: var(--amber); background: rgba(var(--amber-rgb), .08); }
#tweaks .tw-foot{ font-size: 8px; letter-spacing: .28em; color: var(--dimmer); text-transform: uppercase; padding-top: 10px; border-top: 1px solid var(--rule); }