/* ═══ BOLD BLACK & YELLOW — homepage only (body.theme-bold) ══════════════════
   Crisp white ground, true-black grotesque type, the yellow ink and yellow
   blocks as a deliberate second colour. Maximum contrast (black on white), so
   nothing washes out. Loaded only on index.html; scoped to .theme-bold. */

body.theme-bold {
  --bg:         #FBFAF7;   /* crisp near-white, not cream */
  --ink:        #0E0E0C;   /* near-black */
  --ink-mid:    #47463F;   /* dark grey — secondary text stays readable */
  --surface:    #FFFFFF;
  --divider:    #E3E1D8;
  --gold:       #F2B01E;   /* punchy yellow for fills / accents */
  --gold-dark:  #8A6300;   /* darker amber where colour meets white as text */
  --gold-mid:   #F0E2BC;   /* light yellow border / spine */
  --gold-warm:  #FBF3DE;   /* light yellow surface tint */
  --gold-pale:  #FCF7EA;   /* lightest yellow band */
  --ff-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* Grotesque display wants tighter tracking than the serif did */
.theme-bold .hero-h1,
.theme-bold .display-heading,
.theme-bold .display-lg,
.theme-bold .display-md { letter-spacing: -0.02em; line-height: 1.04; }
.theme-bold .h1-gold { color: var(--gold-dark); font-style: normal; }  /* italic grotesque reads odd; use colour only */

/* Two-colour buttons: black-on-yellow primary that inverts on hover; squared */
.theme-bold .btn { border-radius: 2px; font-weight: 600; }
.theme-bold .btn-gold,
.theme-bold .btn-gold-dark {
  background: var(--gold); color: #0E0E0C; border: 1.5px solid var(--gold);
}
.theme-bold .btn-gold:hover,
.theme-bold .btn-gold-dark:hover {
  background: #0E0E0C; color: var(--gold); border-color: #0E0E0C;
}
.theme-bold .btn-outline,
.theme-bold .btn-outline-dark {
  border: 1.5px solid #0E0E0C; color: #0E0E0C; background: transparent;
}
.theme-bold .btn-outline:hover,
.theme-bold .btn-outline-dark:hover { background: #0E0E0C; color: #FBFAF7; }

/* Keep the ink vivid and push it a touch more yellow (multiply over white) */
.theme-bold .hero-ink-vid {
  filter: sepia(0.5) saturate(2.3) hue-rotate(-20deg) brightness(1.05) contrast(1.08);
  mix-blend-mode: multiply;
}

/* Recommendation band as a soft yellow tint = the second colour, quietly */
.theme-bold .rec-section { background: var(--gold-pale); }

/* ── Custom circle+dot cursor (recovered from the ln-experiment) ───────────── */
@media (hover: hover) and (pointer: fine) {
  .theme-bold, .theme-bold a, .theme-bold button, .theme-bold [role="button"], .theme-bold .btn { cursor: none; }
}
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  background: var(--gold); border-radius: 50%;
  pointer-events: none; z-index: 10000; will-change: transform;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 40px; height: 40px;
  border: 1.5px solid rgba(14, 14, 12, 0.55); border-radius: 50%;
  pointer-events: none; z-index: 9999; will-change: transform;
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cursor-ring.is-hover {
  width: 56px; height: 56px;
  background: rgba(242, 176, 30, 0.12); border-color: rgba(242, 176, 30, 0.55);
}
.cursor-ring.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .theme-bold { cursor: auto !important; }
}

/* ── Tweaks ──────────────────────────────────────────────────
   1) More breathing room under the hero value line before the H1.
   2) Problem->Idea->Result body reads as body copy, not bold display.
      (The <strong> highlights in the result line stay bold + gold.) */
.theme-bold .hero-class { margin-bottom: 1.75rem; }
.theme-bold .tl-v {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
}

/* ═══ Panel items 1–4: finish the bold theme (not just recolour it) ═══════════ */

/* (1) Square + flatten: drop the soft radii, warm shadows and gold surface tints
       inherited from the base editorial system. */
body.theme-bold {
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-pill: 4px;
  --shadow-card: none; --shadow-hover: none; --shadow-float: none;
  --divider: #D6D3C8;                       /* crisper hairline for cards + rules */
}
.theme-bold .case-mini-img { background: #ECEBE5; }   /* neutral letterbox, not gold */

/* (2) Hero emphasis: black words on a yellow highlighter slab (kills the muddy amber) */
.theme-bold .hero-h1 { color: #0E0E0C; mix-blend-mode: normal; }
.theme-bold .h1-gold {
  color: #0E0E0C; font-style: normal;
  background-image: linear-gradient(transparent 60%, rgba(242, 176, 30, 0.92) 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.04em;
}
/* The slab wipes in left-to-right once the headline has settled (GSAP animates
   background-size; this only pre-stages it for JS-capable, motion-OK browsers). */
@media (prefers-reduced-motion: no-preference) {
  .js .theme-bold .h1-gold { background-size: 0% 100%; }
}

/* (3) Discipline the yellow: eyebrows go black. Vivid yellow is now reserved for
       the hero ink, the primary CTA, the stat operators, the By-the-numbers band
       and the hero highlight. */
.theme-bold .section-label,
.theme-bold .bestfit-label,
.theme-bold .tl-k,
.theme-bold .cs-eyebrow,
.theme-bold .persp-tag { color: var(--ink); }

/* (4) Sharper, bolder type: larger + tighter H1, balanced wrapping, tighter eyebrows */
.theme-bold .hero-h1 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.theme-bold .display-heading,
.theme-bold .display-lg,
.theme-bold .display-md { letter-spacing: -0.025em; text-wrap: balance; }
.theme-bold .section-label,
.theme-bold .bestfit-label,
.theme-bold .tl-k,
.theme-bold .cs-eyebrow { letter-spacing: 0.1em; }

/* Residual discipline: skill-teaser index numbers + "see the full range" links
   were pale/dark amber; make them black so yellow stays reserved. */
.theme-bold .skill-teaser-num { color: var(--ink); }
.theme-bold .skill-teaser-link { color: var(--ink); }

/* ═══ Discipline the yellow SITE-WIDE ════════════════════════════════════════
   Text accents -> black; spines/rules/borders -> neutral hairline. Vivid yellow
   is kept ONLY for: the primary CTA, stat operators (+/%), the By-the-numbers
   band, the hero ink + highlight, and the availability dot. Link hovers still
   flash yellow (a deliberate, transient second-colour moment). */
body.theme-bold {
  --gold-dark: #0E0E0C;   /* eyebrows, kickers, dates, links, cite, tags -> ink */
  --gold-mid:  #D6D3C8;   /* spines, connecting rules, card borders -> hairline */
}
/* Bright-gold text labels that bypass --gold-dark -> ink (stat operators stay yellow) */
.theme-bold .case-tag,
.theme-bold .persp-tag,
.theme-bold .timeline-date,
.theme-bold .skill-col-num,
.theme-bold .skills-statement,
.theme-bold .cred-qual { color: var(--ink); }
/* Case tag: neutral outlined chip, not a yellow pill */
.theme-bold .case-tag { background: transparent; border: 1px solid var(--divider); }


/* ═══ Audit polish ═══════════════════════════════════════════════════════════ */
/* hero-ink fallback: soft yellow presence so the right side is never stark-empty
   if the deferred ink video has not loaded yet or fails. */
.theme-bold .hero-ink { background: radial-gradient(62% 78% at 70% 45%, rgba(242, 176, 30, 0.20), rgba(242, 176, 30, 0.05) 55%, transparent 72%); }
/* Whisper of grain to lift the flat surfaces (sits under the cursor, ignores pointer). */
body.theme-bold::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body.theme-bold::after { opacity: 0.03; } }