/* ============================================================
   Accent gradient — site-wide
   ------------------------------------------------------------
   The brand accent is now the peach→red gradient first used on
   "we're all gonna make it" in the home intro. One token,
   linked LAST on every page so it wins the cascade.

   Where it applies (gradient):
     · text accents  — active nav links, section numerals,
                       highlighted words, hover states
     · fills         — logo hover fill, eyebrow/divider lines,
                       active dots, nav underline
     · borders       — Framer accent borders (via --accent-bi,
                       set next to each accent --border-color)
     · SVG icons     — fill/stroke="url(#accent-grad)", defined
                       once per page in a hidden <svg> after <body>
   Kept SOLID on purpose (var(--accent)):
     · focus outlines (must stay crisp/high-contrast)
     · 25%-alpha tints (#e8503a40) — a gradient is invisible there
     · footer particle canvas (single-colour dots)
   ============================================================ */
:root {
  --accent: #E8503A;
  --accent-from: #F5C19E;
  --accent-to: #FA1616;
  --accent-grad: linear-gradient(90deg, var(--accent-from), var(--accent-to));
}

/* ---- Gradient text ---- */
.framer-text[style*="--framer-text-color:rgb(232, 80, 58)"],
[style*="--extracted-r6o4lv:rgb(232, 80, 58)"] .framer-text[style*="var(--extracted-r6o4lv"],
[data-framer-name="Links"] p.framer-text a[data-framer-page-link-current="true"],
.snav-link[aria-current="page"],
.mnav-link[aria-current="page"] {
  background-image: var(--accent-grad) !important;
  background-origin: content-box !important;   /* span the words, not the pill padding */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---- Framer accent borders → gradient (see --accent-bi markers) ---- */
[data-border="true"] { --accent-bi: none; }
[data-border="true"]::after {
  border-image-source: var(--accent-bi);
  border-image-slice: 1;
}

/* ---- Hidden SVG that holds the shared gradient ---- */
.accent-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ============================================================
   Overrides of accent rules that live in other stylesheets.
   Kept here (not in each source file) so the whole gradient
   change is in one place.
   ============================================================ */

/* Nav logo hover fill (interactions.css "glass filling with water") */
/* vertical: deep red at the bottom where the fill starts, peach at the top */
.framer-UYKSu .framer-1e96t86 { background-image: linear-gradient(0deg, var(--accent-to), var(--accent-from)) !important; }

/* Gradient text: "new" badges, hover states, active tabs, years */
nav.framer-WLHpg a[href="./ai-labs"]::after,
nav.framer-WLHpg .al-nav-current::after,
.snav .snav-link[href="./ai-labs"]::after,
.mnav-link[href="./ai-labs"]::after,
a.framer-4mtpym:hover [data-framer-name="8 min"] .framer-text,
.framer-9804h1-container a:hover [data-framer-name="Read all on Substack"] .framer-text,
.pfr-year,
.al-tab.is-active .al-tab-label,
.al-exp-chip--accent {
  background-image: var(--accent-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hover arrows next to "8 min" and "Read all on Substack" (home.css) */
a.framer-4mtpym:hover .framer-zpwmfz,
.framer-9804h1-container a:hover .framer-1vzltmd {
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22><defs><linearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%223.5%22 y1=%220%22 x2=%228.5%22 y2=%220%22><stop stop-color=%22%23F5C19E%22/><stop offset=%221%22 stop-color=%22%23FA1616%22/></linearGradient></defs><path d=%22M 3.5 3.5 L 8.5 3.5 L 8.5 8.5%22 fill=%22transparent%22 stroke=%22url(%23g)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path><path d=%22M 3.5 8.5 L 8.5 3.5%22 fill=%22transparent%22 stroke=%22url(%23g)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path></svg>") !important;
}

/* Fills */
.pfr-eyebrow-line,
.tcx-dot.is-active { background: var(--accent-grad) !important; }

/* Case-study bento borders (work.css) */
.nst-bento,
.nst-exp { border-image: var(--accent-grad) 1; }
.al-tab.is-active .al-tab-label { color: transparent; }

/* Nav logo: the S mark turns white while the gradient fills the box.
   The mark's paths use currentColor (logo symbol #svg-369961702_1779),
   so this only swaps the colour. On hover it waits a beat so the fill
   reaches the mark first; on leave it goes back to black immediately,
   before the draining fill uncovers it. */
.framer-UYKSu .framer-xv8nse { transition: color .15s ease; }
.framer-UYKSu:hover .framer-xv8nse {
  color: #fff !important;
  transition: color .2s ease .08s;
}

/* ============================================================
   Solid accent — reverted from the gradient (2026-10-09)
   Small, functional text reads better as one flat colour: the
   active nav link, the "new" nav badge, the work-card years and
   the writing list (numbers, hover read time, arrows). --accent-solid (#DE3B26) is a deeper take on the
   gradient's red end: warmer than the old #E8503A and with more
   contrast on white (4.4:1 vs 3.7:1).
   ============================================================ */
:root { --accent-solid: #DE3B26; }

[data-framer-name="Links"] p.framer-text a[data-framer-page-link-current="true"],
nav.framer-WLHpg p.framer-text[style*="--framer-text-color:rgb(232, 80, 58)"],
nav.framer-WLHpg [style*="--extracted-r6o4lv:rgb(232, 80, 58)"] .framer-text,
nav.framer-WLHpg .al-nav-current,
.snav-link[aria-current="page"],
.mnav-link[aria-current="page"],
.pfr-year,
nav.framer-WLHpg a[href="./ai-labs"]::after,
nav.framer-WLHpg .al-nav-current::after,
.snav .snav-link[href="./ai-labs"]::after,
.mnav-link[href="./ai-labs"]::after,
a.framer-4mtpym:hover [data-framer-name="8 min"] .framer-text,
.framer-9804h1-container a:hover [data-framer-name="Read all on Substack"] .framer-text,
#substack .framer-text[style*="--framer-text-color:rgb(232, 80, 58)"],
#substack [style*="--extracted-r6o4lv:rgb(232, 80, 58)"] .framer-text {
  background-image: none !important;
  -webkit-text-fill-color: var(--accent-solid) !important;
  color: var(--accent-solid) !important;
}

/* drafts-on-the-table hover arrows (read time + "Read all on Substack") — solid */
a.framer-4mtpym:hover .framer-zpwmfz,
.framer-9804h1-container a:hover .framer-1vzltmd {
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22><path d=%22M 3.5 3.5 L 8.5 3.5 L 8.5 8.5%22 fill=%22transparent%22 stroke=%22%23DE3B26%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path><path d=%22M 3.5 8.5 L 8.5 3.5%22 fill=%22transparent%22 stroke=%22%23DE3B26%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path></svg>") !important;
}