/* =========================================================
   Susu — Colors & Type  (dark/modern direction)
   ---------------------------------------------------------
   Two voices in tension:
     COLD UI   — deep near-black, dim slate, electric rules.
                 The "interface" the rest of the industry sells.
     ERUPTION  — fluoro orange, electric lime, marker. Hand
                 lettering. The youth glitching through.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Caveat:wght@400;500;700&family=Permanent+Marker&family=Roboto+Slab:ital,wght@1,900&display=swap');

:root {
  /* =====================================================
     SURFACE — deep, screen-cold, never warm
     ===================================================== */
  --bg:           #000000;   /* primary background, true black — matches image plates */
  --bg-elev:      #111316;   /* card / inset */
  --bg-sunken:    #06070A;   /* deeper inset */
  --bg-hi:        #1A1D22;   /* hover/active surface */

  /* =====================================================
     FOREGROUND — cool whites, never paper
     ===================================================== */
  --fg:           #F2F4F7;   /* primary text */
  --fg-soft:      #B8BFC9;   /* secondary */
  --fg-mute:      #6E7682;   /* tertiary, captions */
  --fg-faint:     #3D444E;   /* placeholder, disabled */

  /* =====================================================
     RULES & BORDERS
     ===================================================== */
  --rule:         #1F242B;
  --rule-soft:    rgba(242,244,247,0.08);
  --rule-strong:  rgba(242,244,247,0.18);

  /* =====================================================
     ERUPTION — interruptions only, never decoration
     ===================================================== */
  --fluoro:       #FF3D00;   /* primary accent — riso fluorescent */
  --fluoro-deep:  #D62F00;
  --lime:         #C5FF00;   /* electric lime — terminal-cool */
  --lime-deep:    #9CCC00;
  --highlight:    #FFE600;   /* highlighter (rarely) */
  --marker:       #050505;   /* sharpie black — for redactions on light surfaces */

  /* =====================================================
     SEMANTIC
     ===================================================== */
  --accent:       var(--fluoro);
  --accent-fg:    var(--bg);

  --positive:     var(--lime);
  --negative:     var(--fluoro);
  --warning:      var(--highlight);

  --link:         var(--fluoro);
  --link-hover:   var(--lime);

  --border:       var(--rule);
  --border-soft:  var(--rule-soft);
  --border-strong:var(--rule-strong);

  /* =====================================================
     TYPE FAMILIES
     ===================================================== */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-hand:    'Caveat', cursive;
  --font-marker:  'Permanent Marker', 'Caveat', cursive;

  /* =====================================================
     TYPE SCALE — wide & modern, no narrow set
     ===================================================== */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   38px;
  --fs-3xl:   56px;
  --fs-4xl:   80px;
  --fs-5xl:   120px;
  --fs-6xl:   168px;

  --lh-tight:   0.92;
  --lh-snug:    1.05;
  --lh-normal:  1.4;
  --lh-loose:   1.6;

  --track-tight:  -0.035em;   /* display */
  --track-snug:   -0.015em;   /* H3/H4 */
  --track-normal:  0;
  --track-stamp:   0.18em;    /* eyebrow / label */

  /* =====================================================
     SPACING — 4px base
     ===================================================== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10:144px;

  /* =====================================================
     RADIUS — minimal. Square is default. Pills only on
     eruption-layer chips/stamps.
     ===================================================== */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* =====================================================
     SHADOW — no Material elevation. Hard fluoro offsets only.
     ===================================================== */
  --shadow-stamp:        4px 4px 0 var(--fluoro);
  --shadow-stamp-lime:   4px 4px 0 var(--lime);
  --shadow-stamp-fg:     4px 4px 0 var(--fg);
  --shadow-glow:         0 0 0 1px rgba(255,61,0,0.5), 0 0 24px -4px rgba(255,61,0,0.4);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease:        cubic-bezier(.2,.7,.2,1);
  --ease-stamp:  cubic-bezier(.85,0,.15,1);
  --dur-fast:    120ms;
  --dur-base:    240ms;
  --dur-slow:    520ms;
}

/* =========================================================
   BASE
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   TYPE — applied via class or default
   ========================================================= */

.display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 500;
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 500;
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  font-weight: 500;
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  font-weight: 500;
}

.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: var(--track-snug);
}

.eyebrow, .stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-mute);
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
  font-weight: 500;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  font-weight: 600;
}

small, .caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-mute);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

.hand {
  font-family: var(--font-hand);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--fluoro);
  transform: rotate(-3deg);
  display: inline-block;
}

.tag, .marker {
  font-family: var(--font-marker);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--fluoro);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.redact {
  background: var(--fg);
  color: var(--fg);
  padding: 0 0.2em;
  user-select: none;
}

.highlight-stroke {
  background: linear-gradient(180deg, transparent 60%, var(--lime) 60%, var(--lime) 92%, transparent 92%);
  color: var(--bg);
  padding: 0 0.05em;
}

.circled {
  position: relative;
  display: inline-block;
  padding: 0 0.4em;
}
.circled::before {
  content: "";
  position: absolute;
  inset: -0.2em -0.3em -0.15em -0.3em;
  border: 2.5px solid var(--fluoro);
  border-radius: 50%;
  transform: rotate(-2deg) scaleX(1.05);
  pointer-events: none;
}

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

.leader { display: flex; align-items: baseline; gap: var(--s-2); }
.leader > .dots { flex: 1; border-bottom: 1px dashed var(--rule-strong); transform: translateY(-4px); }