/* Graphite restyle of the existing videos, animations and interactive pieces (brief v2 §21, 2026-10-03).
   Behaviour, triggers and timing stay in their own sheets and scripts; this only changes colour and framing. */

/* Homepage tokens (home.css / signature.css / compact-phone.css) re-pointed to graphite */
.home {
  --fg-paper: #111315;
  --fg-paper-2: #15181b;
  --fg-sand: #242a2e;
  --fg-ink: #f4f4f1;
  --fg-ink-2: #d4d9dc;
  --fg-muted: #afb7bd;
  --fg-rule: #48525a;
  --fg-hair: #333b42;
  --fg-red: #9b1b1b;        /* fills, strokes */
  --fg-red-ink: #b32424;
  --fg-red-text: #f06b73;   /* small text on dark */
  --fg-on-dark: #f4f4f1;    /* text on footage and dark bands (the old sheets used --fg-paper for it) */
  --fg-mono: var(--sans);
  background: var(--fg-paper);
}
body:not(.home) { --fg-red-text: #f06b73; }
.home .site-header { background: rgba(17, 19, 21, 0.94); border-bottom: 1px solid var(--line); }
.home .fg-section:nth-of-type(even) { background: var(--fg-paper-2); }

/* Active states of the interactive controls (pills, tabs, ticks): deep red, light label, instead of a light block */
.home .sig-pill[aria-pressed="true"], .home .eco-tab[aria-pressed="true"], .home .idea-tab[aria-pressed="true"],
.home .shift-controls button[aria-pressed="true"], .home .shift-controls button[aria-pressed="true"]:hover,
.jt-tabs [role=tab][aria-selected=true], .fa-tabs [role=tab][aria-selected=true] {
  background: var(--red-fill); color: #fff; border-color: var(--red-fill);
}
.home .eco-tab[aria-pressed="true"] .eco-tab-n, .home .idea-tab[aria-pressed="true"] * { color: #fff; }
.home .sig-pill, .home .sig-tick, .home .sig-arrow, .home .eco-tab, .home .idea-tab, .home .shift-controls button { color: var(--fg-ink); border-color: var(--fg-rule); border-radius: 6px; }
.jt-tabs [role=tab] { color: var(--ink-2); }
.jt-bar { background: rgba(17, 19, 21, 0.96); border-block: 1px solid var(--line); }

/* The HyperFrames loops ("The rewrite", "Ninety marks", "What I had to unlearn") were rendered on cream paper.
   Invert + rotate hue recolours them to graphite in the page, keeping the red marks red. Motion untouched. */
.nd-motion img, .nd-motion video { filter: invert(0.94) hue-rotate(180deg) saturate(1.1); }
.nd-motion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0f1112; box-shadow: none; }

/* Secondary buttons on footage heroes: readable outline, not a light block */
.btn.btn-light, .jt-hero .btn-light, .jt-hero.has-footage .btn-light { background: rgba(17, 19, 21, 0.55); color: var(--ink); border: 1px solid var(--ink-2); }
.btn.btn-light:hover, .jt-hero .btn-light:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink); }
/* "Want less commitment?": one line of text, not three columns */
.nd-less { display: block !important; grid-template-columns: none !important; }
.nd-less > * { display: inline; }
.nd2-glance-links { margin-top: 14px; color: var(--ink-2); }
.nd-example { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; }

.spinner { border-top-color: #fff; }

/* "See how it grows" and "Next idea" (the stepper buttons): solid red, white label */
.home .sig-next, .home .shift-nav .sig-next { background: var(--red-fill); color: #fff; border: 1px solid var(--red-fill); border-radius: 8px; box-shadow: none; }
.home .sig-next:hover, .home .sig-next:focus-visible { background: var(--red-fill-hi); border-color: var(--red-fill-hi); color: #fff; }
.home .sig-next * { color: inherit; }