/* =====================================================================
   THE FUTURE CONCERN — Ghost theme stylesheet (screen.css)
   Assembled from the Future Concern design system.
   ===================================================================== */

/* 1. TOKENS + TYPE */
/* ============================================================================
   FUTURE CONCERN — INDEX FUTURI VISUAL SYSTEM
   colors_and_type.css — foundational tokens (color, type, space, radius,
   elevation, motion, texture).

   Identity: a classified research bureau from a future that never arrived.
   Archival, cinematic, forensic, institutional. Black/near-black, CRT
   phosphor green, archival paper, graphite. Red = redaction/alert,
   amber = annotation/caution.

   Greens sampled from the official badge (logo body #33A852, eye-glow
   #5AFF65). Dark surfaces + radius scale (3/6/9px) carried over from the
   Index Futuri app (FutureShifts repo). Type extends the app's Space
   Grotesk with an editorial serif (Spectral) and a typewriter mono
   (Space Mono) to satisfy the brand's "editorial + technical + mono" mix.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ----------------------------------------------------------------------
     1. RAW PALETTE
     ---------------------------------------------------------------------- */

  /* Phosphor green — the signal color. The bureau's living data-construct. */
  --phosphor:        #33A852;  /* brand green (logo body) — primary accent   */
  --green-signal:    #46D15F;  /* brighter CRT text / interactive            */
  --green-glow:      #5AFF6B;  /* eye-glow, focus rings, terminal highlight  */
  --green-deep:      #1C7A37;  /* pressed / darker fill                      */
  --green-dim:       #21492E;  /* dim phosphor — quiet borders, de-emphasis  */
  --green-haze:      rgba(90,255,107,0.14); /* glow wash                     */

  /* Graphite — cool neutral scale with a faint green undertone.            */
  --void:            #0A0C0A;  /* deepest page background ("the void")       */
  --ink:             #101311;  /* base surface                               */
  --graphite-900:    #16191A;
  --graphite-850:    #1C2022;  /* card                                       */
  --graphite-800:    #242829;  /* elevated surface / popover                 */
  --graphite-700:    #313638;  /* strong border                              */
  --graphite-600:    #434A4B;
  --graphite-500:    #5C6463;  /* hairline / muted line                      */
  --graphite-400:    #828B89;  /* muted foreground / metadata                */
  --graphite-300:    #A9B0AD;  /* secondary foreground                       */
  --graphite-200:    #CDD2CD;
  --graphite-100:    #E8EBE6;  /* primary foreground (off-white)             */

  /* Archival paper — light surfaces for print dossiers & case files.       */
  --paper:           #ECE6D6;  /* aged paper                                 */
  --paper-2:         #E2DBC7;  /* paper, dimmer                              */
  --paper-line:      #C7BEA4;  /* ruled lines / hairlines on paper           */
  --paper-ink:       #1A1A16;  /* text on paper                              */
  --paper-faded:     #6F6A57;  /* faded stamp / secondary on paper           */

  /* Alert red — redaction, classified, destructive, "the threat".          */
  --red:             #E5484D;
  --red-deep:        #A8282D;
  --red-haze:        rgba(229,72,77,0.16);

  /* Amber — annotation, caution, highlighter, marginalia.                  */
  --amber:           #E6A012;
  --amber-bright:    #F5B82E;
  --amber-haze:      rgba(230,160,18,0.14);

  /* ----------------------------------------------------------------------
     1b. ARCHIVAL / PRINT PALETTE  (from the HQ board + dossier samples)
     Warmer, aged, desaturated. For printed dossiers, case files, the
     virtual HQ set, and any "analog" surface. On these surfaces phosphor
     green appears as EMITTED LIGHT (lamps, CRT, signage) — not as fill.
     ---------------------------------------------------------------------- */
  --kraft:           #D8CBAF;  /* kraft folder / aged card                  */
  --cream:           #EBE2CE;  /* dossier paper base                        */
  --cream-hi:        #F3ECDC;  /* lighter paper patch                       */
  --sepia-ink:       #241F16;  /* typewriter ink on paper                   */
  --sepia-soft:      #5A4F3C;  /* faded type                                */
  --hand-ink:        #26344E;  /* handwriting navy                          */
  --stamp-red:       #9E342A;  /* rubber-stamp red (faded)                  */
  --stamp-blue:      #2D4A6B;  /* rubber-stamp blue                         */
  --forest:          #2F6B3D;  /* muted "noir" forest green (environmental) */
  --forest-deep:     #12331C;  /* deepest set-dressing green                */

  /* ----------------------------------------------------------------------
     2. EPOCH / DATA-VIZ PALETTE  (carried from shared/epochs.ts)
     Used for timeline bands, chart series, category coding.
     ---------------------------------------------------------------------- */
  --epoch-mythic:        #CA8A04;  /* Mythological Roots        */
  --epoch-proto:         #EAB308;  /* Proto-Science Fiction     */
  --epoch-romance:       #F97316;  /* Scientific Romance        */
  --epoch-pulp:          #EF4444;  /* Pulp Era                  */
  --epoch-golden:        #3B82F6;  /* Golden Age                */
  --epoch-postwar:       #14B8A6;  /* Post-War Expansion        */
  --epoch-newwave:       #A855F7;  /* New Wave                  */
  --epoch-cyberpunk:     #06B6D4;  /* Cyberpunk Revolution      */
  --epoch-contemporary:  #EC4899;  /* Contemporary SF           */

  --chart-1: var(--phosphor);
  --chart-2: var(--epoch-cyberpunk);
  --chart-3: var(--epoch-newwave);
  --chart-4: var(--amber);
  --chart-5: var(--red);

  /* ----------------------------------------------------------------------
     3. SEMANTIC COLOR TOKENS  (dark UI — the default mode)
     ---------------------------------------------------------------------- */
  --bg:              var(--void);          /* page                          */
  --surface:         var(--ink);           /* panels                        */
  --surface-card:    var(--graphite-850);  /* cards                         */
  --surface-raised:  var(--graphite-800);  /* popovers, menus, modals       */
  --surface-sunken:  #0D0F0D;              /* wells, inputs, terminal        */

  --fg:              var(--graphite-100);  /* primary text                  */
  --fg-2:            var(--graphite-300);  /* secondary text                */
  --fg-muted:        var(--graphite-400);  /* metadata, captions, labels    */
  --fg-faint:        var(--graphite-500);  /* disabled, watermark           */

  --border:          var(--graphite-700);  /* default border                */
  --border-strong:   var(--graphite-600);  /* emphasized divider            */
  --hairline:        rgba(255,255,255,0.06); /* faint rule                  */
  --hairline-green:  rgba(90,255,107,0.18);  /* phosphor hairline           */

  --accent:          var(--phosphor);      /* primary accent                */
  --accent-fg:       #04140A;              /* text on accent fills          */
  --ring:            var(--green-glow);    /* focus ring                    */

  --danger:          var(--red);
  --danger-fg:       #1A0708;
  --caution:         var(--amber);
  --caution-fg:      #1A1304;

  /* Interaction overlays (the app's "elevate" system, generalized).        */
  --elevate-1:       rgba(255,255,255,0.04);  /* hover                      */
  --elevate-2:       rgba(255,255,255,0.09);  /* active / pressed           */
  --elevate-green:   rgba(90,255,107,0.10);   /* phosphor hover             */

  /* ----------------------------------------------------------------------
     4. TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;   /* editorial */
  --font-sans:    'Space Grotesk', ui-sans-serif, system-ui, sans-serif; /* technical */
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* typewriter */

  /* Dossier / print "found" faces — NOT core UI type. Loaded only by the
     dossier kit. Real typewriter + handwriting for printed case files.
     'Special Elite' (worn typewriter) · 'Cutive Mono' (clean type) ·
     'Caveat' (handwriting). Screen UI keeps Space Mono. */
  --font-typewriter: 'Special Elite', 'Courier New', monospace;
  --font-hand:       'Caveat', cursive;

  /* Fluid display sizes */
  --text-display:  clamp(2.75rem, 6vw, 5rem);     /* hero editorial headline */
  --text-h1:       clamp(2rem, 4vw, 3.25rem);
  --text-h2:       clamp(1.5rem, 2.6vw, 2.25rem);
  --text-h3:       clamp(1.25rem, 1.8vw, 1.625rem);
  --text-title:    1.125rem;
  --text-body:     1rem;
  --text-sm:       0.875rem;
  --text-xs:       0.75rem;
  --text-2xs:      0.6875rem;   /* file IDs, stamps, micro-labels            */

  --leading-tight:   1.08;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.66;      /* dossier body copy                         */

  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;  /* mono labels                               */
  --tracking-widest:   0.22em;  /* stamps, classification bars               */

  /* ----------------------------------------------------------------------
     5. SPACE / RADIUS / ELEVATION / MOTION
     ---------------------------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;

  /* Tight, institutional radii (3 / 6 / 9px from the app).                 */
  --radius-sm: 3px;   --radius-md: 6px;   --radius-lg: 9px;
  --radius-xl: 14px;  --radius-pill: 999px;  --radius-none: 0px;

  /* Elevation — flat & forensic. Depth from borders + faint shadow, not
     soft drop-shadows. Plus phosphor glows for "powered" elements.         */
  --shadow-sm:   0 1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 1px 0 rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg:   0 1px 0 rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.55);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.03), inset 0 0 0 1px rgba(0,0,0,0.4);
  --glow-green:  0 0 0 1px rgba(90,255,107,0.35), 0 0 16px rgba(90,255,107,0.25);
  --glow-green-sm: 0 0 8px rgba(90,255,107,0.30);
  --glow-amber:  0 0 0 1px rgba(230,160,18,0.35), 0 0 14px rgba(230,160,18,0.22);
  --glow-red:    0 0 0 1px rgba(229,72,77,0.40), 0 0 14px rgba(229,72,77,0.25);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur:        220ms;
  --dur-slow:   360ms;
}

/* ============================================================================
   SEMANTIC TYPE CLASSES — apply directly or copy the rules.
   ========================================================================== */
.fc-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.fc-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.fc-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2);
  line-height: var(--leading-snug); color: var(--fg); }
.fc-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-h3);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg); }
.fc-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-title);
  line-height: var(--leading-snug); color: var(--fg); }

/* Body — technical sans for UI, editorial serif for long-form dossiers. */
.fc-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-body);
  line-height: var(--leading-normal); color: var(--fg-2); }
.fc-body-serif { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem;
  line-height: var(--leading-relaxed); color: var(--fg-2); }
.fc-sm { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--fg-2); }

/* Label — mono, uppercase, tracked. Field names, section tags, nav. */
.fc-label { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-muted); }

/* Meta — mono metadata: dates, counts, coordinates. */
.fc-meta { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); color: var(--fg-muted); }

/* File ID — the IF-<TYPE>-###### stamp. Phosphor mono. */
.fc-fileid { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider); color: var(--phosphor); text-transform: uppercase; }

/* Terminal — CRT phosphor body text. */
.fc-terminal { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-sm);
  line-height: var(--leading-snug); color: var(--green-signal); }

/* Classification bar — widest tracking, stamp energy. */
.fc-stamp { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-widest); }

/* ============================================================================
   TEXTURE UTILITIES — the analog-digital grain. Layer over backgrounds.
   ========================================================================== */

/* CRT scanlines — subtle horizontal phosphor lines. */
.fc-scanlines::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: repeating-linear-gradient(
    0deg, transparent 0, transparent 2px,
    rgba(90,255,107,0.05) 2px, rgba(90,255,107,0.05) 3px,
    transparent 3px, transparent 4px);
  background-size: 100% 4px;
}

/* Dot grid — engineering / control-room graph paper. */
.fc-grid-bg {
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Blueprint grid — fine technical-diagram ruling. */
.fc-blueprint-bg {
  background-image:
    linear-gradient(rgba(90,255,107,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,255,107,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Film/halftone grain — drop over imagery for the archival vibe. */
.fc-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}


/* 2. SITE / HOME */
/* The Future Concern — redesigned studio site (Ghost-oriented).
   Consumes ../colors_and_type.css. Hub-first, not blog-first. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--fg);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---- Continuous page backdrop (fixed behind everything) ---- */
.site-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--void)}
.site-backdrop .matrix-rain{position:fixed;inset:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px);mask-image:linear-gradient(180deg,transparent 0,#000 220px)}
.bg-grid{position:fixed;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(90,255,107,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(90,255,107,.04) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(140% 120% at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(140% 120% at 50% 0%,#000,transparent 80%)}
.bg-vail{position:fixed;inset:0;background:
  radial-gradient(120% 70% at 50% -10%,rgba(20,40,28,.3),transparent 50%),
  linear-gradient(180deg,rgba(7,9,8,.02) 0,rgba(7,9,8,.1) 40%,rgba(7,9,8,.34) 78%,rgba(7,9,8,.42))}
/* Dramatic Custodian figure — dark silhouette with glowing eyes, anchored in the
   hero, pulses & glitches in and out of the black. Rendered as <img>. */
.hero-figure{position:absolute;left:50%;top:70.5%;transform:translate(-50%,-50%);
  height:min(720px,90vh);width:auto;z-index:1;pointer-events:none;
  opacity:.1;will-change:opacity,transform;
  filter:drop-shadow(0 0 55px rgba(90,255,107,.32));
  animation:figPulse 10s ease-in-out infinite,figGlitch 6.5s steps(1) infinite}
@keyframes figPulse{0%,100%{opacity:.12}50%{opacity:.6}}
@keyframes figGlitch{0%,95%,100%{transform:translate(-50%,-50%);filter:drop-shadow(0 0 55px rgba(90,255,107,.32))}95.6%{transform:translate(calc(-50% - 2px),-50%);filter:brightness(1.3) drop-shadow(0 0 64px rgba(90,255,107,.55))}96.4%{transform:translate(calc(-50% + 2px),-50%)}97.2%{transform:translate(-50%,calc(-50% - 1px))}}
@media (prefers-reduced-motion:reduce){.hero-figure{animation:none;opacity:.18}}
.page{position:relative;z-index:1}

/* base matrix canvas (article hero uses absolute; site backdrop overrides to fixed) */
.matrix-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
a{color:inherit;text-decoration:none}
.ic{display:inline-flex;align-items:center;justify-content:center}
.ic svg{width:100%;height:100%;stroke-width:1.75}
.wrap{max-width:1200px;margin:0 auto;padding:0 36px}
.stamp{font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.label{font-family:var(--font-mono);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted)}
.eyebrow-row{display:flex;align-items:center;gap:12px}
.eyebrow-row .ln{height:1px;flex:1;background:var(--border)}

/* ---- Classification strip (top of page) ---- */
.classbar{position:relative;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:30px;padding:0 36px;background:#070908;border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint);overflow:hidden;white-space:nowrap}
.classbar .seg{display:flex;align-items:center;gap:9px}
.classbar .seg b{color:var(--phosphor);font-weight:700}
.classbar .blip{width:6px;height:6px;border-radius:50%;background:var(--green-glow);box-shadow:0 0 6px var(--green-glow);animation:tk 1.6s ease-in-out infinite}
.classbar .mid{color:var(--fg-muted);letter-spacing:.28em}
@media(max-width:780px){.classbar .mid,.classbar .seg.r{display:none}}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:40;background:rgba(10,12,10,.84);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:30px;height:70px;max-width:1200px;margin:0 auto;padding:0 36px}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand img{width:40px;height:40px;filter:drop-shadow(0 0 7px rgba(90,255,107,.32))}
.nav-brand .wm{display:flex;flex-direction:column;justify-content:center;line-height:1}
.nav-brand .wm b{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.05;display:block;white-space:nowrap;color:var(--fg);text-transform:none}
.nav-brand .wm span{font-family:var(--font-mono);font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--phosphor);display:block;margin-top:3px}
.nav-links{display:flex;gap:28px;margin-left:18px}
.nav-links a{position:relative;white-space:nowrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);transition:color var(--dur);padding:4px 0}
.nav-links a:hover{color:var(--green-signal)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--phosphor);transition:right var(--dur) var(--ease-out)}
.nav-links a:hover::after{right:0}
.nav-signin{margin-left:auto;white-space:nowrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);transition:color var(--dur)}
.nav-signin:hover{color:var(--green-signal)}
.nav-cta{margin-left:18px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-fg);background:var(--phosphor);
  padding:11px 18px;border-radius:var(--radius-pill);box-shadow:var(--glow-green-sm);transition:background var(--dur),transform var(--dur)}
.nav-cta:hover{background:var(--green-signal)}
.nav-cta:active{transform:scale(.97)}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:transparent}
.hero .vig{position:absolute;left:50%;top:-160px;width:820px;height:560px;transform:translateX(-50%);
  background:radial-gradient(58% 58% at 50% 50%,rgba(51,168,82,.18),transparent 70%);z-index:0;pointer-events:none}
.hero-in{position:relative;z-index:3;max-width:1100px;margin:0 auto;padding:110px 36px 88px;text-align:center}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--phosphor);margin-bottom:28px;
  border:1px solid var(--green-dim);border-radius:var(--radius-pill);padding:7px 15px;background:rgba(51,168,82,.05)}
.hero .eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--green-glow);box-shadow:0 0 6px var(--green-glow)}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:1.04;
  letter-spacing:-.022em;margin:0 auto;max-width:22ch}
.hero h1 em{font-style:italic;color:var(--green-signal)}
/* glitch keyword */
.glitch{position:relative;display:inline-block;color:var(--green-signal);font-style:normal}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.glitch::before{color:#06B6D4;z-index:-1;animation:gl1 4.2s steps(1) infinite}
.glitch::after{color:#E5484D;z-index:-1;animation:gl2 4.2s steps(1) infinite}
@keyframes gl1{0%,92%,100%{clip-path:inset(0 0 100% 0);transform:none}93%{clip-path:inset(8% 0 60% 0);transform:translate(-2px,0)}96%{clip-path:inset(40% 0 28% 0);transform:translate(2px,0)}}
@keyframes gl2{0%,92%,100%{clip-path:inset(100% 0 0 0);transform:none}94%{clip-path:inset(62% 0 12% 0);transform:translate(2px,0)}97%{clip-path:inset(20% 0 50% 0);transform:translate(-2px,0)}}
@media (prefers-reduced-motion:reduce){.glitch::before,.glitch::after{display:none}}
.hero .sub{font-family:var(--font-display);font-size:clamp(1.08rem,1.7vw,1.4rem);line-height:1.58;color:var(--fg-2);
  max-width:58ch;margin:32px auto 0}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-weight:700;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;padding:14px 22px;border-radius:var(--radius-md);
  border:1px solid transparent;transition:all var(--dur) var(--ease-out);cursor:pointer}
.btn-primary{background:var(--phosphor);color:var(--accent-fg);box-shadow:var(--glow-green-sm)}
.btn-primary:hover{background:var(--green-signal)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{border-color:var(--border-strong);color:var(--fg-2);background:transparent}
.btn-ghost:hover{border-color:var(--green-dim);color:var(--green-signal)}
.ticker{margin-top:50px;display:inline-flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.06em;color:var(--fg-muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:9px 19px;background:var(--surface-sunken)}
.ticker .dot{width:7px;height:7px;border-radius:50%;background:var(--green-glow);box-shadow:0 0 7px var(--green-glow);animation:tk 1.6s ease-in-out infinite}
@keyframes tk{50%{opacity:.35}}
.ticker b{color:var(--green-signal);font-weight:700}

/* ---- Section frame ---- */
section{padding:84px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:42px;
  border-bottom:1px solid var(--border);padding-bottom:18px}
.sec-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.7rem);letter-spacing:-.015em;margin:9px 0 0;line-height:1.04}
.sec-head .more{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-signal);white-space:nowrap;display:flex;align-items:center;gap:7px;transition:gap var(--dur)}
.sec-head .more:hover{gap:11px}

/* ---- ACCESS HUB (the centerpiece) ---- */
.hub{border-top:1px solid var(--border);background:linear-gradient(180deg,#0c0f0d,var(--void))}
.hub-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface-card);overflow:hidden;transition:border-color var(--dur),transform var(--dur) var(--ease-out);min-height:228px}
.card::after{content:"";position:absolute;inset:0;background:var(--elevate-1);opacity:0;transition:opacity var(--dur);pointer-events:none}
.card:hover{border-color:var(--green-dim);transform:translateY(-3px)}
.card:hover::after{opacity:1}
.card .cbody{position:relative;z-index:2;padding:24px 24px 22px;display:flex;flex-direction:column;height:100%}
.card .ctop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:auto}
.card .code{font-family:var(--font-mono);font-weight:700;font-size:9.5px;letter-spacing:.14em;color:var(--phosphor);text-transform:uppercase}
.card .cicon{width:34px;height:34px;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--fg-2);background:var(--surface-sunken);transition:color var(--dur),border-color var(--dur)}
.card:hover .cicon{color:var(--green-signal);border-color:var(--green-dim)}
.card h3{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.1;letter-spacing:-.01em;margin:26px 0 0}
.card p{font-size:13px;line-height:1.55;color:var(--fg-muted);margin:10px 0 0;max-width:42ch}
.card .clink{display:flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);transition:color var(--dur),gap var(--dur)}
.card:hover .clink{color:var(--green-signal);gap:11px}
.card .tag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 8px}

/* spans */
.card.flagship{grid-column:span 4;min-height:300px}
.card.span3{grid-column:span 3}
.card.span2{grid-column:span 2}

/* flagship card — phosphor energy + viz */
.card.flagship{background:radial-gradient(120% 130% at 88% 0%,#11241a,var(--surface-card) 58%);border-color:var(--green-dim)}
.card.flagship .cbody{padding:32px}
.card.flagship h3{font-size:32px;margin-top:20px}
.card.flagship p{font-size:15px;max-width:48ch}
.flag-stats{display:flex;gap:30px;margin:22px 0 0}
.flag-stats .n{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--green-signal);line-height:1}
.flag-stats .l{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-muted);margin-top:5px}
.card.flagship .clink{margin-top:24px;color:var(--green-signal)}
.flag-badge{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:118px;height:118px;opacity:.9;
  filter:drop-shadow(0 0 22px rgba(90,255,107,.3));z-index:1}
@media(max-width:760px){.flag-badge{display:none}}

/* ---- Index Futuri band ---- */
.index-band{background:var(--ink);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.index-band .grid{position:absolute;inset:0;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(90,255,107,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(90,255,107,.04) 1px,transparent 1px);background-size:46px 46px}
.ib-grid{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
.ib-copy h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;letter-spacing:-.015em;margin:14px 0 0}
.ib-copy p{font-family:var(--font-display);font-size:17px;line-height:1.62;color:var(--fg-2);margin:18px 0 0;max-width:46ch}
.ib-stats{display:flex;gap:34px;margin:28px 0 30px}
.ib-stats .st .n{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--green-signal)}
.ib-stats .st .l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-top:4px}

/* ---- The window into the index ---- */
.idx-frame{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(180deg,#0c130e,#070a08);box-shadow:0 0 0 1px rgba(90,255,107,.05),0 24px 60px -28px rgba(0,0,0,.9),inset 0 0 60px rgba(0,0,0,.5)}
.idx-frame .bezel{display:flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-bottom:1px solid var(--border);background:var(--surface-sunken);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
.idx-frame .bezel .led{width:8px;height:8px;border-radius:50%;background:var(--green-glow);box-shadow:0 0 7px var(--green-glow);animation:tk 1.4s ease-in-out infinite}
.idx-frame .bezel .rt{margin-left:auto;color:var(--phosphor);font-weight:700}
.idx-frame .open{position:absolute;right:12px;bottom:12px;z-index:8;display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-fg);
  background:var(--phosphor);padding:9px 14px;border-radius:var(--radius-pill);box-shadow:var(--glow-green-sm);transition:background var(--dur),gap var(--dur)}
.idx-frame .open:hover{background:var(--green-signal);gap:11px}
.idx-win{position:relative;width:100%;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#0e1611,#070a08)}
.idx-bands{position:absolute;inset:0;z-index:1}
.idx-band{position:absolute;top:0;bottom:0}
.idx-band span{position:absolute;top:8px;left:7px;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;white-space:nowrap}
.idx-links{position:absolute;inset:0;z-index:4;pointer-events:none}
.idx-node{position:absolute;border-radius:50%;transform:translate(-50%,-50%);z-index:5;cursor:pointer;transition:transform .15s}
.idx-node:hover{transform:translate(-50%,-50%) scale(1.5)}
.idx-nlabel{position:absolute;transform:translateX(-50%);z-index:6;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.02em;color:var(--fg-2);white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px #000}
.idx-axis{position:absolute;left:0;right:0;bottom:0;height:24px;border-top:1px solid var(--hairline);z-index:3}
.idx-axis span{position:absolute;bottom:6px;transform:translateX(-50%);font-family:var(--font-mono);font-size:8.5px;color:var(--fg-faint)}
.idx-scan{position:absolute;inset:0;z-index:7;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px);opacity:.5}
.idx-sweep{position:absolute;top:0;bottom:0;width:140px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(90,255,107,.07),transparent);animation:sweep 5.5s linear infinite}
@keyframes sweep{0%{left:-160px}100%{left:100%}}
.idx-chrome{position:absolute;left:12px;top:10px;z-index:8;display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--phosphor);pointer-events:none}
.idx-chrome .idx-dot{width:6px;height:6px;border-radius:50%;background:var(--green-glow);box-shadow:0 0 6px var(--green-glow);animation:tk 1.4s ease-in-out infinite}
.idx-chrome .idx-coord{color:var(--fg-faint);letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.idx-sweep{display:none}}

/* compact node strip (flagship card) */
.node-strip{position:relative;height:84px;margin-top:20px;border:1px solid var(--border);border-radius:var(--radius-sm);
  overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#0e1611,#070a08)}
.ns-band{position:absolute;top:0;bottom:0}
.ns-dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.ib-viz{position:relative;height:320px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#0f1712,#070a08)}
.ib-axis{position:absolute;left:0;right:0;bottom:0;height:28px;border-top:1px solid var(--border)}
.ib-axis span{position:absolute;bottom:6px;transform:translateX(-50%);font-family:var(--font-mono);font-size:9px;color:var(--fg-faint)}
.ib-viz .vlabel{position:absolute;left:14px;top:12px;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);z-index:3}

/* ---- Dispatches teaser ---- */
.dispatch{display:grid;grid-template-columns:118px 1fr auto;gap:26px;align-items:start;padding:24px 0;
  border-bottom:1px solid var(--hairline);cursor:pointer;transition:background var(--dur),padding-left var(--dur)}
.dispatch:hover{background:var(--elevate-1);padding-left:10px}
.dispatch:hover .dt{color:var(--green-signal)}
.dispatch .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-muted);line-height:1.7}
.dispatch .no{color:var(--phosphor);font-weight:700}
.dispatch .dt{font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.18;letter-spacing:-.01em;margin:0;transition:color var(--dur)}
.dispatch .ex{font-size:14px;color:var(--fg-muted);line-height:1.55;margin:9px 0 0;max-width:62ch}
.dispatch .read{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap;text-align:right;line-height:1.7}

/* ---- Featured Journey (curated Story Mode tour) ---- */
.journey{border-top:1px solid var(--border);background:linear-gradient(180deg,#0a1014,var(--void));position:relative;overflow:hidden}
.journey::before{content:"";position:absolute;left:50%;top:-140px;width:760px;height:420px;transform:translateX(-50%);
  background:radial-gradient(60% 60% at 50% 50%,rgba(6,182,212,.10),transparent 70%);pointer-events:none}
.journey .wrap{position:relative;z-index:2}
.jrail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin:8px 0 0;padding:34px 0 10px}
.jline{position:absolute;left:6%;right:6%;top:calc(34px + 28px);height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.5) 12%,rgba(34,211,238,.5) 88%,transparent);z-index:0}
.jnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px;cursor:pointer}
.jstep{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--fg-faint);margin-bottom:14px;transition:color var(--dur)}
.jdot{width:16px;height:16px;border-radius:50%;transition:transform var(--dur) var(--ease-out)}
.jnode:hover .jdot{transform:scale(1.35)}
.jnode:hover .jstep{color:#22D3EE}
.jy{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:#22D3EE;margin-top:16px}
.jt{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.2;color:var(--fg-2);margin-top:7px;max-width:14ch;transition:color var(--dur)}
.jnode:hover .jt{color:var(--fg)}
.jdesc{font-family:var(--font-display);font-size:16px;line-height:1.64;color:var(--fg-muted);max-width:74ch;margin:30px auto 0;text-align:center;text-wrap:pretty}
@media(max-width:760px){.jrail{grid-auto-flow:row;grid-auto-columns:auto;gap:18px;justify-items:start;padding-left:14px}
  .jline{left:20px;right:auto;top:34px;bottom:14px;width:1px;height:auto}
  .jnode{flex-direction:row;align-items:center;gap:14px;text-align:left}.jstep{margin:0}.jy{margin:0 0 0 4px}.jt{margin:0;max-width:none}}

/* ---- Featured case file ---- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card)}
.feature .fimg{position:relative;min-height:360px;background:linear-gradient(150deg,#1a3340,#0b1014)}
.feature .fimg .cap{position:absolute;left:16px;bottom:14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-200);z-index:3}
.feature .fimg .fid{position:absolute;left:16px;top:16px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--phosphor);z-index:3}
.feature .fbody{padding:44px;display:flex;flex-direction:column;justify-content:center}
.feature .fbody h3{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.015em;margin:14px 0 0}
.feature .fbody p{font-family:var(--font-display);font-size:16px;line-height:1.64;color:var(--fg-2);margin:18px 0 0}

/* ---- Signup ---- */
.signup{background:radial-gradient(120% 130% at 50% 0%,#10231a,var(--void) 60%);border-top:1px solid var(--border);text-align:center}
.signup h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.015em;margin:18px 0 0}
.signup p{font-family:var(--font-display);font-size:17px;color:var(--fg-2);max-width:48ch;margin:16px auto 0;line-height:1.6}
.signup form{display:flex;gap:10px;justify-content:center;margin:34px auto 0;max-width:480px}
.signup input{flex:1;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:14px 16px;color:var(--fg);font-family:var(--font-sans);font-size:14px;outline:0;box-shadow:var(--shadow-inset)}
.signup input:focus{border-color:var(--green-dim);box-shadow:var(--glow-green-sm)}
.signup .ok{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--green-signal);margin-top:22px}
.signup .fine{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:18px}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--border);background:var(--ink);padding:60px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.foot-brand img{width:46px;height:46px;filter:drop-shadow(0 0 7px rgba(90,255,107,.25))}
.foot-brand p{font-size:13px;color:var(--fg-muted);line-height:1.6;margin:16px 0 0;max-width:34ch}
.foot-col h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin:6px 0 16px}
.foot-col a{display:block;font-size:13px;color:var(--fg-2);padding:5px 0;transition:color var(--dur)}
.foot-col a:hover{color:var(--green-signal)}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:48px;padding-top:22px;
  border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.foot-bar .lookup{color:var(--phosphor)}

@media (max-width:1080px){.nav-signin{display:none}}
@media (max-width:960px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .card.flagship,.card.span3,.card.span2{grid-column:span 2}
}
@media (max-width:880px){
  .nav-links{display:none}
  .ib-grid,.feature,.foot-grid{grid-template-columns:1fr}
  .ib-viz{height:240px}
}
/* socials */
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--fg-muted);transition:color var(--dur),border-color var(--dur),background var(--dur)}
.socials a:hover{color:var(--accent-fg);background:var(--phosphor);border-color:var(--phosphor)}
.follow{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px}
.follow span{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
.follow .socials{margin-top:0}

/* ============================================================
   REDESIGN v2 — continuous flowing narrative (acts)
   ============================================================ */
.act{position:relative;padding:104px 0;background:transparent}
.act > .wrap{position:relative}

/* numbered section spine */
.sec-head .sh-left{display:flex;align-items:flex-start;gap:20px}
.sh-num{flex:none;font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.1em;
  color:var(--phosphor);border:1px solid var(--green-dim);border-radius:var(--radius-sm);
  padding:6px 9px;line-height:1;background:rgba(51,168,82,.06)}
.act-lede{font-family:var(--font-display);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.55;
  color:var(--fg-2);max-width:64ch;margin:0 0 38px;text-wrap:pretty}

/* hero scroll cue */
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:54px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted)}
.scroll-cue .ic{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* §01 — The Index (enlarged single moment) */
.idx-frame-lg{margin-top:6px}
.idx-frame-lg .idx-win{height:460px}
.idx-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px;flex-wrap:wrap}
.idx-stats{display:flex;gap:40px}
.idx-stats .st .n{font-family:var(--font-display);font-weight:700;font-size:32px;color:var(--green-signal);line-height:1}
.idx-stats .st .l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-top:5px}

/* §02 — Dispatch. feature is an <a> now */
a.feature{text-decoration:none;cursor:pointer}
a.feature:hover .fbody h3{color:var(--green-signal)}
.feature .fbody h3{transition:color var(--dur)}
.dispatch-list{margin-top:14px}

/* §03 — Archive: deep rows + story block */
.deep-row{display:grid;grid-template-columns:64px 1fr auto;gap:26px;align-items:center;
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-card);
  padding:26px 30px;transition:border-color var(--dur),transform var(--dur)}
.deep-row:hover{border-color:var(--green-dim);transform:translateY(-2px)}
.dossier-promo{box-shadow:inset 3px 0 0 var(--kraft)}
.dp-icon{width:54px;height:54px;border:1px solid rgba(216,203,175,.3);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color:var(--kraft);background:rgba(216,203,175,.06)}
.dp-code{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft)}
.deep-row h3,.db-head h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.12;letter-spacing:-.01em;margin:8px 0 0;color:var(--fg)}
.deep-row p,.db-head p{font-size:14px;line-height:1.56;color:var(--fg-muted);margin:8px 0 0;max-width:62ch}
.dp-go{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap;transition:color var(--dur),gap var(--dur)}
.deep-row:hover .dp-go{color:var(--green-signal);gap:12px}

.deep-block.story{margin-top:20px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:radial-gradient(120% 140% at 100% 0%,rgba(6,182,212,.08),var(--surface-card) 55%);padding:30px 32px}
.db-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:6px}
.db-head .dp-code{color:#22D3EE}

/* §04 — Custodian terminal */
.term-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.term-copy p{font-family:var(--font-display);font-size:17px;line-height:1.62;color:var(--fg-2);margin:0 0 26px;max-width:42ch}
.terminal{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-sunken);box-shadow:0 0 0 1px rgba(90,255,107,.05),inset 0 0 50px rgba(0,0,0,.5)}
.term-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid var(--border);
  background:#0b0f0a;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--fg-muted)}
.term-bar .td{width:9px;height:9px;border-radius:50%;display:inline-block}
.term-bar .td.r{background:#E5484D}.term-bar .td.a{background:#E6A012}.term-bar .td.g{background:#46D15F}
.term-body{padding:22px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.8}
.term-body .tl{margin:0}
.term-body .pr{color:var(--green-glow);margin-right:8px}
.term-body .in{color:var(--fg)}
.term-body .out{color:var(--green-signal)}
.term-body .out b{color:var(--fg);font-weight:700}
.term-body .out .ok{color:var(--phosphor);margin-right:8px}
.term-body .muted{color:var(--fg-faint);font-size:11px;letter-spacing:.04em;margin:2px 0 16px}
.term-body .cursor{color:var(--green-glow);animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* §  signup over backdrop */
.act-signup{text-align:center;background:transparent;border-top:1px solid var(--hairline)}
.act-signup h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.015em;margin:18px 0 0}
.act-signup p{font-family:var(--font-display);font-size:17px;color:var(--fg-2);max-width:48ch;margin:16px auto 0;line-height:1.6}
.act-signup form{display:flex;gap:10px;justify-content:center;margin:34px auto 0;max-width:480px}
.act-signup input{flex:1;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:14px 16px;color:var(--fg);font-family:var(--font-sans);font-size:14px;outline:0;box-shadow:var(--shadow-inset)}
.act-signup input:focus{border-color:var(--green-dim);box-shadow:var(--glow-green-sm)}
.act-signup .ok{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--green-signal);margin-top:22px}
.act-signup .fine{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:18px}

/* footer slightly translucent over the backdrop */
.footer{background:rgba(16,19,17,.72);backdrop-filter:blur(3px)}

@media(max-width:860px){
  .term-grid{grid-template-columns:1fr;gap:28px}
  .deep-row{grid-template-columns:1fr;gap:14px}
  .deep-row .dp-go{justify-self:start}
  .db-head{flex-direction:column;gap:14px}
  .idx-foot{flex-direction:column;align-items:flex-start}
  .idx-stats{gap:28px}
}
@media(max-width:560px){
  .dispatch{grid-template-columns:1fr;gap:8px}
  .dispatch .read{text-align:left}
  .sec-head .sh-left{gap:12px}
}



/* 3. ARTICLE / POST */
/* Article / reading page — editorial dossier reading experience. */
.art-hero{position:relative;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0b120d,var(--void) 70%);overflow:hidden}
.art-hero .art-grid{position:absolute;inset:0;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(90,255,107,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(90,255,107,.04) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 75%)}
.art-hero .art-scan{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.14) 2px 4px);opacity:.5;mix-blend-mode:multiply}
.art-hero .matrix-rain{z-index:0}
.art-hero-in{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:64px 36px 52px}
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:26px}
.crumb a:hover{color:var(--green-signal)}
.crumb .s{color:var(--fg-faint)}
.art-kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
.art-kicker .no{color:var(--phosphor);font-weight:700}
.art-kicker .code{color:var(--phosphor);font-weight:700;border:1px solid var(--green-dim);border-radius:var(--radius-sm);padding:3px 8px}
.art-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.07;letter-spacing:-.02em;margin:20px 0 0;max-width:20ch}
.art-hero .standfirst{font-family:var(--font-display);font-size:clamp(1.08rem,1.6vw,1.32rem);font-style:italic;line-height:1.56;color:var(--fg-2);margin:22px 0 0;max-width:54ch}
.art-byline{display:flex;align-items:center;gap:13px;margin-top:30px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--fg-muted)}
.art-byline .av{width:36px;height:36px;border-radius:50%;border:1px solid var(--green-dim);background:var(--surface-sunken);overflow:hidden;flex:none}
.art-byline .av img{width:100%;height:100%;object-fit:cover;filter:saturate(.45) brightness(.92)}
.art-byline b{color:var(--fg);font-weight:700}
.art-byline .sep{width:4px;height:4px;border-radius:50%;background:var(--fg-faint)}

.art-figure{max-width:1040px;margin:0 auto;padding:0 36px}
.art-figure .frame{position:relative;height:clamp(300px,40vw,440px);border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;margin-top:-26px;
  background:linear-gradient(150deg,#1a3340,#0b1014);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 14px,transparent 14px 28px),linear-gradient(150deg,#1a3340,#0b1014)}
.art-figure .fid{position:absolute;left:18px;top:16px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--phosphor);z-index:3}
.art-figure .cap{position:absolute;left:18px;bottom:14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-200);z-index:3}

.art-body{max-width:1040px;margin:0 auto;padding:58px 36px 80px;display:grid;grid-template-columns:200px 1fr;gap:56px;align-items:start}
.art-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px}
.rail-block h4{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 10px;border-bottom:1px solid var(--hairline);padding-bottom:8px}
.rail-block .row{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:10.5px;color:var(--fg-2);padding:3px 0}
.rail-block .row span{color:var(--fg-muted)}
.rail-toc a{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--fg-muted);padding:5px 0 5px 12px;border-left:1px solid var(--border);transition:color var(--dur),border-color var(--dur)}
.rail-toc a:hover{color:var(--green-signal);border-color:var(--green-dim)}
.rail-share{display:flex;gap:8px}
.rail-share a{width:34px;height:34px;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--fg-muted);transition:color var(--dur),border-color var(--dur)}
.rail-share a:hover{color:var(--green-signal);border-color:var(--green-dim)}

.prose{max-width:64ch}
.prose>p{font-family:var(--font-display);font-size:1.16rem;line-height:1.74;color:var(--graphite-200);margin:0 0 26px}
.prose>p:first-of-type::first-letter{font-family:var(--font-display);font-weight:700;float:left;font-size:4.2rem;line-height:.82;padding:7px 14px 0 0;color:var(--green-signal)}
.prose h2{font-family:var(--font-display);font-weight:700;font-size:1.8rem;letter-spacing:-.01em;line-height:1.14;color:var(--fg);margin:46px 0 14px;scroll-margin-top:96px}
.prose h2 .hn{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.18em;color:var(--phosphor);display:block;margin-bottom:7px}
.prose a.x{color:var(--green-signal);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--green-dim)}
.prose blockquote{margin:34px 0;padding:4px 0 4px 26px;border-left:2px solid var(--phosphor);font-family:var(--font-display);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--fg)}
.prose blockquote cite{display:block;margin-top:13px;font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-muted)}

.evidence{margin:38px 0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden}
.evidence .ehead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid var(--hairline);background:var(--surface-sunken)}
.evidence .ehead .t{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.evidence .ehead .c{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--phosphor)}
.evidence .ebody{display:grid;grid-template-columns:118px 1fr;gap:18px;padding:18px 16px;align-items:center}
.evidence .thumb{height:96px;border:1px solid var(--border);border-radius:var(--radius-sm);background:linear-gradient(150deg,#22303a,#0d1114)}
.evidence .ebody p{font-size:13.5px;line-height:1.56;color:var(--fg-2);margin:0}
.evidence .ebody p b{color:var(--fg)}

.xref{border-top:1px solid var(--border);background:var(--ink);padding:60px 0}
.xref .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:20px}
.xref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.xref-card{display:block;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-card);padding:20px;transition:border-color var(--dur),transform var(--dur)}
.xref-card:hover{border-color:var(--green-dim);transform:translateY(-2px)}
.xref-card .c{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--phosphor)}
.xref-card h4{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.18;margin:12px 0 0;color:var(--fg)}
.xref-card p{font-size:12.5px;line-height:1.5;color:var(--fg-muted);margin:8px 0 0}
@media(max-width:880px){.art-body{grid-template-columns:1fr;gap:36px}.art-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:30px}.xref-grid{grid-template-columns:1fr}}


/* 4. OFFERINGS */
/* Offerings overview page. */
.off-hero{position:relative;border-bottom:1px solid var(--border);background:radial-gradient(120% 90% at 50% -10%,#10231a,var(--void) 60%);overflow:hidden}
.off-hero-in{max-width:1200px;margin:0 auto;padding:72px 36px 60px}
.off-hero .label{color:var(--phosphor)}
.off-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;letter-spacing:-.02em;margin:14px 0 0;max-width:18ch}
.off-hero p{font-family:var(--font-display);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:var(--fg-2);max-width:56ch;margin:22px 0 0}

.off-sec{padding:64px 0}
.off-sec:not(:last-child){border-bottom:1px solid var(--border)}
.off-row{display:grid;grid-template-columns:1fr;gap:18px}

/* big offering rows */
.orow{display:grid;grid-template-columns:64px 1fr auto;gap:26px;align-items:center;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--surface-card);padding:26px 30px;transition:border-color var(--dur),transform var(--dur),background var(--dur)}
.orow:hover{border-color:var(--green-dim);transform:translateY(-2px)}
.orow .oicon{width:54px;height:54px;border:1px solid var(--border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--fg-2);background:var(--surface-sunken);transition:color var(--dur),border-color var(--dur)}
.orow:hover .oicon{color:var(--green-signal);border-color:var(--green-dim)}
.orow .ocode{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--phosphor)}
.orow h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.12;letter-spacing:-.01em;margin:8px 0 0}
.orow p{font-size:14px;line-height:1.56;color:var(--fg-muted);margin:8px 0 0;max-width:64ch}
.orow .otags{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.orow .otag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 10px}
.orow .ogo{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap;transition:color var(--dur),gap var(--dur)}
.orow:hover .ogo{color:var(--green-signal);gap:12px}
.orow.flag{background:radial-gradient(120% 160% at 92% 0%,#11241a,var(--surface-card) 60%);border-color:var(--green-dim)}
.orow.flag h3{font-size:30px}

/* pricing / membership */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tiers.tiers-2{grid-template-columns:repeat(2,1fr);max-width:760px}
.tier{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-card);padding:30px 28px}
.tier.feat{border-color:var(--green-dim);background:radial-gradient(140% 120% at 50% 0%,#11241a,var(--surface-card) 62%);position:relative}
.tier.feat .pin{position:absolute;top:-10px;left:28px;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-fg);background:var(--phosphor);border-radius:var(--radius-pill);padding:4px 11px}
.tier .tname{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
.tier .price{font-family:var(--font-display);font-weight:800;font-size:42px;letter-spacing:-.02em;margin:16px 0 0;line-height:1}
.tier .price small{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--fg-muted);margin-left:4px}
.tier .tdesc{font-size:13.5px;line-height:1.55;color:var(--fg-muted);margin:12px 0 0}
.tier ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px}
.tier li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--fg-2)}
.tier li .ck{color:var(--green-signal);margin-top:1px;flex:none}
.tier .btn{margin-top:26px;justify-content:center}
@media(max-width:880px){.orow{grid-template-columns:1fr;gap:14px;text-align:left}.orow .ogo{justify-self:start}.tiers{grid-template-columns:1fr}}


/* 5. RICH BLOCKS + GHOST CARDS */
/* Rich-media block kit styles. Custom Future Concern elements + Ghost kg-* cards.
   Loaded after article.css on the article/post page. */

/* ---------- Inline IF-code chip ---------- */
.if-chip{display:inline-flex;align-items:center;gap:6px;vertical-align:baseline;
  font-family:var(--font-mono);font-size:.8em;font-weight:700;letter-spacing:.04em;
  color:var(--green-signal);border:1px solid var(--green-dim);border-radius:var(--radius-sm);
  padding:1px 7px;background:rgba(51,168,82,.07);transition:background var(--dur),border-color var(--dur)}
.if-chip:hover{background:rgba(51,168,82,.16);border-color:var(--phosphor)}
.if-chip .ic-name{color:var(--fg);font-weight:600}
.if-chip .ic-code{color:var(--phosphor);letter-spacing:.08em}
.if-chip .ic{opacity:.7}

/* ---------- Index lookup card ---------- */
.ix-lookup{display:flex;gap:0;margin:34px 0;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-card);overflow:hidden;transition:border-color var(--dur),transform var(--dur)}
.ix-lookup:hover{border-color:var(--green-dim);transform:translateY(-2px)}
.ix-spine{width:4px;flex:none}
.ix-main{padding:18px 20px;flex:1}
.ix-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ix-code{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--phosphor)}
.ix-open{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:center;gap:6px}
.ix-lookup:hover .ix-open{color:var(--green-signal)}
.ix-title{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--fg);margin:10px 0 0}
.ix-year{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--fg-muted);margin-left:6px}
.ix-desc{font-size:13.5px;line-height:1.55;color:var(--fg-2);margin:8px 0 0}
.ix-meta{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)}
.ix-dot{width:8px;height:8px;border-radius:50%}

/* ---------- Clip / video / gif ---------- */
.clip-card,.map-card,.gallery{margin:36px 0}
.clip-card figcaption,.map-card figcaption{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg-muted);margin-top:11px;text-align:center}
.clip-frame{position:relative;height:340px;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,#16242b,#0b1014);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 14px,transparent 14px 28px),linear-gradient(150deg,#16242b,#0b1014)}
.clip-tag{position:absolute;left:14px;top:13px;z-index:4;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:#fff}
.clip-rec{width:7px;height:7px;border-radius:50%;animation:tk 1.3s ease-in-out infinite}
.clip-code{position:absolute;right:14px;top:13px;z-index:4;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--phosphor)}
.clip-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(7,9,8,.5);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);cursor:pointer;transition:background var(--dur),transform var(--dur)}
.clip-frame:hover .clip-play{background:var(--phosphor);color:var(--accent-fg);border-color:var(--phosphor)}
.clip-frame.playing .clip-play{opacity:0}
.clip-scan{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);opacity:.5}

/* ---------- Tape / audio player ---------- */
.tape{display:flex;align-items:center;gap:16px;margin:34px 0;padding:16px 18px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:linear-gradient(180deg,#11160f,#0b0f0a)}
.tape-btn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--green-dim);background:var(--surface-sunken);
  color:var(--green-signal);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur),color var(--dur)}
.tape-btn:hover{background:var(--phosphor);color:var(--accent-fg);border-color:var(--phosphor)}
.tape-body{flex:1;min-width:0}
.tape-head{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.tape-code{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--phosphor);flex:none}
.tape-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tape-wave{position:relative;display:flex;align-items:center;gap:2px;height:34px}
.tape-wave>span{flex:1;background:var(--green-signal);border-radius:1px;min-width:1px;transition:opacity .2s}
.tape.playing .tape-wave>span{animation:eq .9s ease-in-out infinite alternate}
@keyframes eq{from{transform:scaleY(.5)}to{transform:scaleY(1)}}
.tape-progress{position:absolute;top:-3px;bottom:-3px;width:1.5px;background:var(--green-glow);box-shadow:0 0 8px var(--green-glow)}
.tape-time{flex:none;font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.tape.playing .tape-wave>span{animation:none}}

/* ---------- Dossier embed ---------- */
.dossier-embed{position:relative;display:flex;align-items:center;gap:16px;margin:36px 0;padding:20px 20px 20px 22px;
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  background:linear-gradient(180deg,#1a1813,#12110d);box-shadow:inset 3px 0 0 var(--kraft,#D8CBAF)}
.de-tab{position:absolute;top:-1px;right:18px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.18em;
  color:#0b0f0a;background:var(--kraft,#D8CBAF);padding:3px 9px;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.de-icon{flex:none;width:48px;height:48px;border:1px solid rgba(216,203,175,.3);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;color:var(--kraft,#D8CBAF);background:rgba(216,203,175,.06)}
.de-main{flex:1;min-width:0}
.de-code{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--kraft,#D8CBAF)}
.de-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--fg);margin:5px 0 0}
.de-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-muted);margin:6px 0 0}
.de-actions{display:flex;gap:8px;flex:none}
.de-btn{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 13px;transition:all var(--dur)}
.de-btn:hover{border-color:var(--green-dim);color:var(--green-signal)}
.de-btn.primary{background:var(--phosphor);color:var(--accent-fg);border-color:var(--phosphor)}
.de-btn.primary:hover{background:var(--green-signal);color:var(--accent-fg)}

/* ---------- Map ---------- */
.map-frame{position:relative;height:280px;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#0e1611,#070a08)}
.map-tag{position:absolute;left:14px;top:13px;z-index:4;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--phosphor)}
.map-routes{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.map-pin{position:absolute;z-index:3;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--fg-2);white-space:nowrap;display:flex;align-items:center;gap:6px}
.map-pin b{width:9px;height:9px;border-radius:50%;background:var(--green-glow);box-shadow:0 0 8px var(--green-glow);display:block}

/* ---------- Gallery ---------- */
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gal-cell{position:relative;height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.gal-cap{position:absolute;left:12px;bottom:10px;z-index:3;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-200)}

/* ---------- Redaction ---------- */
.redact{background:#0b0f0a;color:transparent;border-radius:2px;padding:0 4px;cursor:help;transition:color var(--dur),background var(--dur);
  box-shadow:inset 0 0 0 1px rgba(90,255,107,.2)}
.redact:hover{background:rgba(90,255,107,.1);color:var(--green-signal)}

/* ---------- Callout ---------- */
.callout{display:flex;gap:14px;margin:32px 0;padding:18px 20px;border:1px solid var(--border);border-left-width:2px;
  border-radius:var(--radius-md);background:var(--surface-card)}
.callout.tone-phosphor{border-left-color:var(--phosphor)}
.callout.tone-amber{border-left-color:#E0A458}
.callout.tone-red{border-left-color:#E5484D}
.co-icon{flex:none;color:var(--green-signal);margin-top:1px}
.callout.tone-amber .co-icon{color:#E0A458}
.callout.tone-red .co-icon{color:#E5484D}
.co-title{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:6px}
.co-body p{font-size:14.5px;line-height:1.6;color:var(--fg-2);margin:0}

/* ---------- Bookmark ---------- */
.bookmark{display:flex;margin:34px 0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card);transition:border-color var(--dur),transform var(--dur)}
.bookmark:hover{border-color:var(--green-dim);transform:translateY(-2px)}
.bm-main{flex:1;padding:18px 20px}
.bm-title{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--fg)}
.bm-desc{font-size:13px;line-height:1.5;color:var(--fg-muted);margin:7px 0 0}
.bm-site{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--green-signal)}
.bm-thumb{flex:none;width:120px;display:flex;align-items:center;justify-content:center;color:var(--fg-faint);background:linear-gradient(150deg,#16242b,#0b1014);border-left:1px solid var(--border)}

@media(max-width:680px){.gal-grid{grid-template-columns:1fr}.bm-thumb{width:84px}.dossier-embed{flex-wrap:wrap}.de-actions{width:100%}}

/* ============================================================
   GHOST NATIVE CARDS (kg-*) — themed to the same system, so real
   editor content matches the custom blocks above.
   ============================================================ */
.prose .kg-card{margin:36px 0}
.prose figure{margin:36px 0}
.prose img,.kg-image-card img{border:1px solid var(--border);border-radius:var(--radius-md);width:100%;display:block}
.kg-image-card figcaption,.kg-embed-card figcaption,figure figcaption{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--fg-muted);text-align:center;margin-top:11px}
.kg-width-wide{width:min(112%,100vw);margin-left:50%;transform:translateX(-50%);max-width:1080px}
.kg-width-full{width:96vw;margin-left:50%;transform:translateX(-50%)}
.kg-gallery-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px}
.kg-callout-card{display:flex;gap:14px;padding:18px 20px;border:1px solid var(--border);border-left:2px solid var(--phosphor);border-radius:var(--radius-md);background:var(--surface-card);font-size:14.5px;line-height:1.6;color:var(--fg-2)}
.kg-callout-emoji{font-size:18px}
.kg-bookmark-card .kg-bookmark-container{display:flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card);text-decoration:none}
.kg-bookmark-content{flex:1;padding:18px 20px}
.kg-bookmark-title{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--fg)}
.kg-bookmark-description{font-size:13px;color:var(--fg-muted);margin-top:7px}
.kg-bookmark-thumbnail img{border-radius:0;border:0;border-left:1px solid var(--border)}
.kg-audio-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(180deg,#11160f,#0b0f0a)}
.kg-audio-thumbnail{border-radius:var(--radius-sm)}
.kg-audio-title{font-family:var(--font-display);font-weight:700;color:var(--fg)}
.kg-toggle-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-card);padding:4px 18px}
.kg-toggle-heading-text{font-family:var(--font-display);font-weight:700;color:var(--fg)}
.kg-button-card a{display:inline-flex;align-items:center;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--phosphor);color:var(--accent-fg);padding:13px 22px;border-radius:var(--radius-pill)}
.kg-blockquote-alt,.prose blockquote.kg-blockquote-alt{border:0;font-style:normal}
.kg-header-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:48px 36px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,#10231a,var(--surface-card))}


/* 6. THEME GLUE (Ghost-specific) */
.nav-account{margin-left:18px;display:flex;align-items:center;gap:8px}
.nav-account .av{width:34px;height:34px;border-radius:50%;border:1px solid var(--green-dim);background:var(--surface-sunken);overflow:hidden}
.nav-account .av img{width:100%;height:100%;object-fit:cover}
.idx-embed{position:relative;width:100%;height:460px;border:0;display:block;background:transparent}
.archive{position:relative;padding:104px 0}
.archive-head{margin-bottom:40px;border-bottom:1px solid var(--border);padding-bottom:20px}
.archive-head .label{margin-bottom:10px}
.archive-head h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.015em;margin:0}
.archive-head p{color:var(--fg-muted);font-size:15px;line-height:1.6;margin:14px 0 0;max-width:60ch}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card);transition:border-color var(--dur),transform var(--dur)}
.pcard:hover{border-color:var(--green-dim);transform:translateY(-3px)}
.pcard .pimg{position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,#16242b,#0b1014);overflow:hidden}
.pcard .pimg img{width:100%;height:100%;object-fit:cover}
.pcard .pimg .ptag{position:absolute;left:12px;top:12px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--phosphor);background:rgba(7,9,8,.7);padding:4px 8px;border-radius:var(--radius-sm)}
.pcard .pbody{padding:20px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.16;letter-spacing:-.01em;margin:0;color:var(--fg)}
.pcard .pex{font-size:13.5px;line-height:1.55;color:var(--fg-muted);margin:10px 0 0}
.pcard .pmeta{margin-top:auto;padding-top:16px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-faint)}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.pagination{display:flex;align-items:center;justify-content:center;gap:22px;margin:54px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.pagination a{color:var(--green-signal)}
[data-members-error]{color:var(--red);font-family:var(--font-mono);font-size:11px;margin-top:12px;min-height:1em}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--fg-2);width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}
@media(max-width:880px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 0;display:none;z-index:50}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 36px}
  .nav-signin,.nav-cta{display:none}
}
.art-figure .frame.has-img{background:none}
.art-figure .frame.has-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
@media print{.matrix-rain,.idx-sweep,.clip-scan,.art-scan,.hero .scan,.hero-figure{display:none!important}}