/* ============================================================
   Cyber-Flora — shared cohesion chrome + light/dark theme system
   (S282). The single source of truth for the davidjknudson.com
   design system, lifted from the approved S277 hybrid-lightbody
   homepage so EVERY page shares one spine:

     • the light/dark theme token re-map (data-theme)
     • the dark Cyber-Flora hero "front door" (chamomile raster)
     • the wide-grid / narrow-reading-column layout system
     • the seam (dark hero → light paper hand-off)
     • the light reading body (About / Writing / Projects / …)
     • the sticky section nav (revealed on scroll)
     • the chamomile chip nav mark (replaces the ◈ glyph)
     • the chamfered theme-toggle button
     • theme-aware focus rings

   tokens.css carries the base palette + type scale; this file adds
   the extra tokens the hybrid needs (--hero-void, gradients) and
   the [data-theme="dark"] override block, then the full chrome.

   The case studies (/tsvetok, …) keep their immersive tsvetok.css
   surface; this file layers only the shared nav chrome over them
   (loaded AFTER tsvetok.css so the chip + sticky nav + toggle win).
   ============================================================ */

/* The shared tokens, the [data-theme="dark"] re-map, @view-transition, the
   theme-toggle, the sticky-nav, and the .nav-mark chip all live in
   cohesion-chrome.css (loaded site-wide, BEFORE this file). This file adds
   only the homepage-specific hero + reading-body system on top of them.

   The hybrid uses a richer warm gradient for the hero name + CTA than the
   tokens.css default; redefine here so the homepage matches the approved
   hybrid exactly. */
:root {
  --gold-warm-gradient:linear-gradient(135deg,#FFD86B 0%,#F2C24A 55%,#D9A93A 100%);
}

/* ============================================================
   ROOT (homepage + offer page) BODY SURFACE — light paper.
   Mirrors body.root but in the shared file so the hybrid spine
   is self-contained. Applied via body.root (kept for back-compat).
   ============================================================ */
body.root {
  background:var(--root-bg);
  color:var(--root-ink);
  font-family:var(--font-prose);
  font-size:17px; line-height:1.55;
  text-wrap:pretty;
}

/* ============================================================
   HERO — DARK Cyber-Flora "front door". Carried from the approved
   hybrid. The living element is the bespoke chamomile RASTER,
   composited with mix-blend-mode:screen over the near-#000 band.
   Scoped to .root so it only drives the homepage hero (the offer
   page keeps its own simpler hero in root.css).
   ============================================================ */
.root .hero-band {
  position:relative; overflow:hidden;
  background:var(--hero-void);
  background-image:
    radial-gradient(ellipse 60% 60% at 16% -8%, rgba(255,215,0,.10) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 30% 116%, rgba(0,240,255,.045) 0%, transparent 66%),
    radial-gradient(ellipse 40% 36% at 6% 70%, rgba(160,122,255,.04) 0%, transparent 70%);
  border-bottom:1px solid var(--cyber-border-hairline);
  color:var(--text-primary);
}
.root .hero-band::before, .root .hero-band::after {
  content:""; position:absolute; width:18px; height:18px; top:16px; z-index:6;
  border:1px solid var(--cyber-border); pointer-events:none;
}
.root .hero-band::before { left:var(--gutter);  border-right:0; border-bottom:0; }
.root .hero-band::after  { right:var(--gutter); border-left:0;  border-bottom:0; }

.root .hero-band .grid-veil {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,240,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,.045) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 18% 88%, #000 0%, transparent 66%);
          mask-image:radial-gradient(ellipse 70% 80% at 18% 88%, #000 0%, transparent 66%);
}

/* ---------- The bespoke chamomile raster ---------- */
.root .bloom-stage { position:absolute; inset:0; }
.root .bloom-backplate {
  position:absolute; inset:-14%; z-index:0; pointer-events:none;
  background:var(--hero-void);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, #000 60%, transparent 96%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0%, #000 60%, transparent 96%);
}
.root .bloom-raster {
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen; filter:none; will-change:transform, opacity;
}
.root .bloom-glitch {
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen; opacity:0;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 28%, transparent 44%);
          mask-image:linear-gradient(90deg, #000 0%, #000 28%, transparent 44%);
  filter:saturate(1.4) hue-rotate(-8deg); will-change:transform, opacity; pointer-events:none;
}

/* ---------- Hero inner / grid (wide container, narrow reading column) ---------- */
.root .hero-inner {
  position:relative; z-index:4;
  max-width:1440px; margin:0 auto;
  padding:clamp(24px,5vw,40px) var(--gutter) clamp(56px,8vw,92px);
}
.root .hero-grid {
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items:center;
  gap:clamp(32px,5vw,72px);
  min-height:min(78vh, 720px);
}
.root .hero-figure {
  position:relative; justify-self:end; align-self:center;
  width:100%; max-width:560px; aspect-ratio:1/1;
}

/* ---------- Hero topnav (dark) ---------- */
.root .topnav {
  position:relative; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:clamp(40px,7vw,72px);
}
.root .topnav .mark { color:var(--text-primary); letter-spacing:.1em; display:inline-flex; gap:9px; align-items:center; }
.root .topnav .mark a { color:inherit; display:inline-flex; align-items:center; gap:9px; }
.root .topnav .navlinks { display:flex; gap:24px; align-items:center; }
.root .topnav .navlinks a { color:var(--text-secondary); transition:color var(--dur-quick) var(--ease-snappy); position:relative; }
.root .topnav .navlinks a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px;
  background:var(--neon-gold-warm); transition:right var(--dur-base) var(--ease-out);
}
.root .topnav .navlinks a:hover, .root .topnav .navlinks a:focus-visible { color:var(--neon-gold-warm); }
.root .topnav .navlinks a:hover::after, .root .topnav .navlinks a:focus-visible::after { right:0; }

/* ---------- Hero content (dark) ---------- */
.root .hero.hero-content { position:relative; z-index:5; max-width:none; padding:0; border:0; margin:0; }
.root .hero.hero-content::before, .root .hero.hero-content::after { content:none; }

.root .hero .eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--neon-gold-warm); margin-bottom:18px;
  display:inline-flex; align-items:center; gap:10px;
}
.root .hero .eyebrow .tick { width:18px; height:1px; background:var(--neon-gold-warm); display:inline-block; }

.root .hero.hero-content h1 {
  font-family:var(--font-display);
  font-size:clamp(34px,6.2vw,62px);
  font-weight:600; letter-spacing:-.01em; line-height:1.02;
  margin-bottom:18px; max-width:none;
  background:var(--gold-warm-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  view-transition-name:hero-title;
}
.root .hero .one-liner {
  font-family:var(--font-mono); font-size:clamp(16px,2.4vw,22px);
  color:var(--text-secondary); line-height:1.45; max-width:46ch;
}
.root .hero .one-liner strong { color:var(--text-primary); font-weight:500; }

.root .hero-content .hero-rule {
  margin:26px 0 30px; height:2px; width:104px; border:0; border-radius:1px;
  background:linear-gradient(90deg,var(--neon-gold) 0%,var(--neon-gold-glow) 55%,transparent 100%);
  box-shadow:0 0 10px var(--neon-gold-glow);
  transform-origin:left;
}

/* ---------- Hero CTA cluster (dark) ---------- */
.root .hero-cta { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.root .hero-cta .cta {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:15px; letter-spacing:.03em;
  color:var(--deep-void); background:var(--gold-warm-gradient);
  background-size:160% 100%; background-position:0% 0%;
  padding:13px 24px; text-decoration:none;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 0 0 1px rgba(255,215,0,.4), 0 0 22px -6px var(--neon-gold-glow);
  transition:transform var(--dur-base) var(--ease-out),
             letter-spacing var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             background-position var(--dur-base) var(--ease-out);
}
.root .hero-cta .cta .arr { transition:transform var(--dur-base) var(--ease-out); }
.root .hero-cta .cta:hover, .root .hero-cta .cta:focus-visible {
  background-position:100% 0%; letter-spacing:.08em;
  box-shadow:0 0 0 1px var(--neon-gold), 0 8px 30px rgba(255,215,0,.22);
  transform:translateY(-2px);
}
.root .hero-cta .cta:hover .arr, .root .hero-cta .cta:focus-visible .arr { transform:translateX(4px); }
.root .hero-cta .cta:active { transform:translateY(0) scale(.98); }

.root .hero-cta .cta-ghost {
  font-family:var(--font-mono); font-size:14px; letter-spacing:.02em;
  color:var(--text-secondary);
  border-bottom:1px solid var(--cyber-border-hairline);
  padding-bottom:3px;
  transition:color var(--dur-quick) var(--ease-snappy), border-color var(--dur-quick) var(--ease-snappy);
}
.root .hero-cta .cta-ghost:hover, .root .hero-cta .cta-ghost:focus-visible { color:var(--neon-cyan); border-color:var(--neon-cyan); }

/* ---------- Hero proof line (third-party + production signals) ---------- */
.root .hero-proof {
  margin-top:26px; display:flex; flex-direction:column; gap:12px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:var(--text-muted); max-width:60ch; line-height:1.5;
}
.root .hero-proof .hp-credits { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.root .hero-proof .hp-badge {
  color:var(--neon-gold-warm); border:1px solid var(--cyber-border-hairline);
  padding:4px 10px; border-radius:2px; text-decoration:none; white-space:nowrap;
  transition:color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.root .hero-proof .hp-badge:hover, .root .hero-proof .hp-badge:focus-visible {
  color:var(--neon-gold); border-color:var(--neon-gold); text-decoration:none;
}
.root .hero-proof .hp-facts { color:var(--text-muted); }

/* ============================================================
   SEAM — the single full-width dark hero → light paper hand-off.
   ============================================================ */
.root .seam {
  height:clamp(48px,6vw,80px);
  margin-top:calc(-1 * clamp(48px,6vw,80px));
  position:relative; z-index:7; pointer-events:none;
  background:linear-gradient(180deg, rgba(2,3,4,0) 0%, rgba(20,23,26,.45) 44%, var(--root-bg) 100%);
}

/* ============================================================
   SHELL — light reading surface. The homepage uses the wider 820px
   shell; root.css keeps the 760px shell for the offer page, so this
   widening is scoped to the homepage via body.root.home.
   ============================================================ */
.root.home .shell {
  max-width:820px; margin:0 auto;
  padding:clamp(8px,3vw,28px) var(--gutter) 88px;
  position:relative; z-index:8;
}
.root.home :focus-visible { outline-color:var(--root-accent); }
.root.home section { padding:clamp(44px,6vw,68px) 0; border-top:1px solid var(--root-rule); }
.root.home section:first-of-type { border-top:0; padding-top:clamp(20px,3vw,32px); }
.root.home .section-head {
  display:flex; align-items:baseline; gap:16px; margin-bottom:30px;
  padding-bottom:12px; border-bottom:1px solid var(--root-rule);
}
@media (min-width:1100px){ .root.home .projects-grid { gap:20px; } }

/* ============================================================
   THE WORK — calm doorway (credibility-first, no priced billboard)
   ============================================================ */
.root .doorway-name {
  font-family:var(--font-display);
  font-size:clamp(24px,3.4vw,34px);
  font-weight:500; letter-spacing:.005em; line-height:1.1;
  color:var(--root-ink); margin-bottom:16px; text-wrap:balance;
}
.root .doorway-lede {
  font-family:var(--font-prose);
  font-size:clamp(17px,2.2vw,23px);
  line-height:1.5; color:var(--root-ink);
  max-width:58ch; margin-bottom:24px; text-wrap:pretty;
}
.root .doorway .cta-ghost {
  font-family:var(--font-mono); font-size:14px; letter-spacing:.02em;
  color:var(--root-ink-soft);
  border-bottom:1px solid var(--root-rule); padding-bottom:3px;
  transition:color var(--dur-quick) var(--ease-snappy), border-color var(--dur-quick) var(--ease-snappy);
}
.root .doorway .cta-ghost:hover, .root .doorway .cta-ghost:focus-visible {
  color:var(--root-accent); border-bottom-color:var(--root-accent);
}

/* ============================================================
   PROJECT CARDS — dark Cyber-Flora cards as insets on light paper.
   The homepage hybrid card treatment (chamfer + sheen) augments the
   root.css .pcard. Scoped to body.root.home.
   ============================================================ */
.root.home .pcard {
  background-image:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255,215,0,.045) 0%, transparent 60%);
  border-top:2px solid var(--neon-gold);
  padding:22px 22px 18px; min-height:156px; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  box-shadow:0 18px 40px -28px rgba(21,23,26,.4);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.root.home .pcard::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,215,0,.06) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform 600ms var(--ease-out);
}
.root.home a.pcard:hover, .root.home a.pcard:focus-visible {
  border-color:var(--cyber-border); border-top-color:var(--neon-gold);
  transform:translateY(-3px); box-shadow:0 22px 48px -24px rgba(21,23,26,.5);
}
.root.home a.pcard:hover::after, .root.home a.pcard:focus-visible::after { transform:translateX(120%); }
.root.home .pcard .pname { font-weight:600; }
.root.home .pcard .pgo { color:var(--neon-cyan); }

/* The theme-toggle, sticky-nav, and .nav-mark chip styles live in
   cohesion-chrome.css (site-wide). Nothing to redefine here. */

/* ============================================================
   RESPONSIVE — hero collapses to one column under 880px; the
   in-grid flower hides and a quiet top-right emblem takes its place.
   ============================================================ */
@media (max-width:880px) {
  .root .hero-grid { grid-template-columns:1fr; min-height:auto; }
  .root .hero-figure { display:none; }
  .root .hero-inner::after {
    content:""; position:absolute; top:clamp(40px,12vw,84px); right:-6%;
    width:62vw; aspect-ratio:1/1; z-index:0; opacity:.5; pointer-events:none;
    background:url(/hero-chamomile.png) center/contain no-repeat;
    mix-blend-mode:screen;
  }
}
@media (max-width:560px) {
  .root .topnav { flex-wrap:wrap; gap:12px; }
}

/* ============================================================
   KINETIC LAYER — no-motion-first. Hero entrance + glitch shimmer
   only (no breathing), behind prefers-reduced-motion: no-preference.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  @supports (transition-behavior: allow-discrete) or (top: 0) {
    .root .hero .eyebrow, .root .hero.hero-content h1, .root .hero .one-liner, .root .hero-content .hero-rule, .root .hero-cta, .root .hero-proof {
      --enter-delay:0ms;
      transition:opacity 620ms var(--ease-out) var(--enter-delay),
                 transform 620ms var(--ease-out) var(--enter-delay);
    }
    .root .hero.hero-content h1 { --enter-delay:90ms; }
    .root .hero-content .hero-rule { --enter-delay:240ms; transition:opacity 620ms var(--ease-out) var(--enter-delay), transform 620ms var(--ease-out) var(--enter-delay), width 700ms var(--ease-out) 360ms; }
    .root .hero .one-liner { --enter-delay:300ms; }
    .root .hero-cta { --enter-delay:440ms; }
    .root .hero-proof { --enter-delay:560ms; }

    @starting-style {
      .root .hero .eyebrow, .root .hero.hero-content h1, .root .hero .one-liner, .root .hero-cta, .root .hero-proof {
        opacity:0; transform:translateY(14px);
      }
      .root .hero-content .hero-rule { opacity:0; width:0; }
    }
  }

  /* (1) Entrance reveal — fade + slight scale-in. ONE-TIME. No breathing. */
  .root .bloom-raster { animation:raster-enter 820ms var(--ease-out) both; }
  @keyframes raster-enter {
    0%   { opacity:0; transform:scale(.965); }
    100% { opacity:1; transform:scale(1); }
  }

  /* (2) Subtle glitch-shimmer on the LEFT edge. */
  .root .bloom-glitch { animation:glitch-shimmer 6.5s steps(1,end) 1600ms infinite; }
  @keyframes glitch-shimmer {
    0%, 100%      { opacity:0;   transform:translateX(0); }
    6%            { opacity:.34; transform:translateX(-3px); }
    8%            { opacity:.12; transform:translateX(2px); }
    10%           { opacity:.30; transform:translateX(-2px); }
    12%           { opacity:0;   transform:translateX(0); }
    55%           { opacity:0;   transform:translateX(0); }
    59%           { opacity:.22; transform:translateX(-2px); }
    61%           { opacity:.08; transform:translateX(1px); }
    63%           { opacity:0;   transform:translateX(0); }
  }

  /* Scroll-driven section reveals. */
  @supports (animation-timeline: view()) {
    .reveal { opacity:0; transform:translateY(16px); animation:reveal-up linear both; animation-timeline:view(); animation-range:entry 0% entry 42%; }
    @keyframes reveal-up { to { opacity:1; transform:none; } }
  }

  /* View-transition choreography for the hero title morph. */
  ::view-transition-old(hero-title),
  ::view-transition-new(hero-title) { animation-duration:420ms; animation-timing-function:var(--ease-out); }
}

/* ---------- Reduced motion: static flower, no animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .root .bloom-raster { opacity:1; transform:scale(1); }
  .root .bloom-glitch { display:none; }
  .sticky-nav { transform:none; }
  .sticky-nav.is-visible { transform:none; }
}

/* ============================================================
   S284 — de-dupe the homepage hero corner brackets.
   root.css draws `.root .hero-inner::before/::after` corner brackets
   AND this file draws `.root .hero-band::before/::after` — two
   overlapping sets at the top of the homepage hero ("two sets of gold
   brackets"). Keep the hero-band set; null the hero-inner duplicate on
   the homepage. On phones, drop the decorative corner brackets entirely
   so they don't collide with the theme toggle.
   ============================================================ */
.root.home .hero-inner::before,
.root.home .hero-inner::after { content: none; }

/* S326 Fable P0.3: the de-dupe above (specificity 0,3,1) unconditionally
   out-specifies the ≤880px hero-emblem rule (.root .hero-inner::after, 0,2,1),
   so the signature chamomile vanished on every phone/tablet viewport (≤880px)
   on the homepage. Restore it at MATCHING specificity, placed AFTER the kill so
   source order wins, and scoped to ≤880px only — desktop keeps the de-dupe, so
   the duplicate corner bracket does NOT return >880px. */
@media (max-width: 880px) {
  .root.home .hero-inner::after {
    content: ""; position: absolute; top: clamp(40px, 12vw, 84px); right: -6%;
    /* explicit height (not aspect-ratio): rendered-pixel testing showed
       aspect-ratio:1/1 collapses this generated ::after to a ~14px sliver here,
       so the emblem stayed invisible even with `content` restored. height:62vw
       == width:62vw gives the square box the chamomile needs. (S326 adaptation
       of the audit's diff, which never rendered this ≤880px emblem.) */
    /* display:block also overrides root.css's `@media (max-width:560px)
       .root .hero-inner::after{display:none}` (0,2,1) — authored for the offer
       page but it leaks onto home, which is why the emblem stayed hidden ≤560px. */
    display: block; width: 62vw; height: 62vw; z-index: 0; opacity: .5; pointer-events: none;
    background: url(/hero-chamomile.png) center/contain no-repeat;
    mix-blend-mode: screen;
  }
}

@media (max-width: 560px) {
  .root .hero-band::before,
  .root .hero-band::after { display: none; }
}

/* ============================================================
   S284 — Writing list with Medium cover thumbnails. Scoped to
   the homepage writing list (.writing-list) so the Contact list
   rows keep their plain meta/title/ext layout.
   ============================================================ */
.root.home .writing-list .list-row {
  grid-template-columns: 104px 1fr auto;
  gap: 18px;
  align-items: center;
}
.root.home .writing-list .thumb { display: block; line-height: 0; align-self: center; }
.root.home .writing-list .thumb img {
  width: 104px; height: 64px; object-fit: cover; display: block;
  border: 1px solid var(--root-rule); border-radius: 3px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.root.home .writing-list .list-row:hover .thumb img,
.root.home .writing-list .thumb:focus-visible img { border-color: var(--neon-gold); }
.root.home .writing-list .rmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* Curated-venue endorsement badge — the one third-party pickup, styled as proof. */
.root.home .writing-list .venue {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--root-accent);
  border: 1px solid currentColor; border-radius: 2px; padding: 1px 7px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .root.home .writing-list .list-row { grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
  .root.home .writing-list .thumb img { width: 76px; height: 48px; }
  .root.home .writing-list .ext { display: none; }
}