/* ============================================================
   THEME - the single swap point for the design direction.

   Every page loads fonts.css, then THIS file, then base.css.
   base.css decides nothing chromatic and names no font family, so
   changing direction means editing this file only. No page markup
   changes, no rebuild, no find-and-replace across seven files.

   Three directions were built for review on 29-08-2026 (drafts/1.html,
   drafts/2.html, drafts/3.html). Their palettes and type stacks are
   preserved below verbatim. Exactly ONE :root block may be active.

     A / MONO      pure black and white, no colour at all, Archivo +
                   Jost. The most severe. Reads as a record office.
     B / AMBER     near-black with a darkroom amber, Anybody + Chivo.
                   The archive-under-safelight reading.
     C / COBALT    bone grey with cobalt, Anybody + Chivo. The only
                   light direction, and the only one that prints and
                   screenshots well into a client deck.

   ACTIVE: C / COBALT, as a working default so the pages could be built
   and reviewed. This is NOT a decision - it is the one that made the
   report screenshots legible while drafting. Switching is two edits:
   comment the active block, uncomment another.

   The background artefact layer (.bg) belongs to the direction too and
   sits under each block.
   ============================================================ */


/* ---------------------------------------------------------------
   A / MONO - pure black and white, registration-mark grid
   ---------------------------------------------------------------
:root {
  --bg:#000000; --fg:#FFFFFF; --soft:#9A9A9A; --dim:#5E5E5E;
  --line:#1F1F1F; --rail-bg:#000000; --nav-bg:#000000;
  --card:#0A0A0A; --card-line:#232323; --card-line-hi:#4A4A4A;
  --shade:#0E0E0E; --hatch:rgba(255,255,255,.05); --bloom:rgba(255,255,255,.07);
  --tick:#2A2A2A; --mark-line:#FFFFFF;
  --signal:#FFFFFF; --on-signal:#000000;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --thin:"Jost",system-ui,sans-serif;
  --gutter:clamp(1rem,2.4vw,1.9rem);
  --grid-ink:rgba(255,255,255,.16);
  --grid-ink-soft:rgba(255,255,255,.055);
  --wash:rgba(255,255,255,.05);
}
--------------------------------------------------------------- */


/* ---------------------------------------------------------------
   B / AMBER - near-black with a darkroom amber accent
   ---------------------------------------------------------------
:root {
  --bg:#0A0B0C; --fg:#E8EAEC; --soft:#A7AEB5; --dim:#6B737A;
  --line:#1C2023; --rail-bg:#0E1012; --nav-bg:#0A0B0C;
  --card:#101315; --card-line:#22272B; --card-line-hi:#3A4249;
  --shade:#15181B; --hatch:rgba(255,255,255,.045); --bloom:rgba(255,160,43,.20);
  --tick:#2A3035; --mark-line:#3A4249;
  --signal:#FFA02B; --on-signal:#0A0B0C;
  --display:"Anybody",system-ui,sans-serif;
  --body:"Chivo",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --thin:"Chivo",system-ui,sans-serif;
  --gutter:clamp(1rem,2.4vw,1.9rem);
  --grid-ink:rgba(255,255,255,.14);
  --grid-ink-soft:rgba(255,255,255,.05);
  --wash:rgba(255,160,43,.06);
}
--------------------------------------------------------------- */


/* ---------------------------------------------------------------
   C / COBALT - bone grey with cobalt.  ACTIVE.
   --------------------------------------------------------------- */
:root {
  --bg:#E9EAEC; --fg:#0B0C0E; --soft:#43494F; --dim:#7C838A;
  --line:#CBD0D4; --rail-bg:#DFE1E4; --nav-bg:#E9EAEC;
  --card:#F4F5F6; --card-line:#C4C9CE; --card-line-hi:#8A9197;
  --shade:#DCDEE1; --hatch:rgba(11,12,14,.06); --bloom:rgba(27,59,255,.10);
  --tick:#C4C9CE; --mark-line:#0B0C0E;
  --signal:#1B3BFF; --on-signal:#FFFFFF;
  --frame:#FFFFFF;

  /* The accent as raw channels, so rgba() can be built at any alpha. Keep it
     in step with --signal by hand: CSS cannot derive one from the other
     without colour-mix, which is newer than the browsers worth supporting. */
  --signal-rgb: 27, 59, 255;

  --display:"Anybody",system-ui,sans-serif;
  --body:"Chivo",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --thin:"Chivo",system-ui,sans-serif;
  --gutter:clamp(1rem,2.4vw,1.9rem);

  /* The width axis the wordmark is set on. 100 is the face's normal width and
     is what the original drafts actually rendered, because the old Google
     Fonts URL asked for weights only and shipped a file with no width axis at
     all, so `wdth 125` silently did nothing. Now that the axis is really
     present, 125 visibly widens the letterforms; Andy preferred the narrower
     original, so the base was 100 until 21-09-2026, when Andy asked for the
     boot wordmark to match victic.eu (Anybody 300 at wdth 125). site.js reads
     this rather than hardcoding a number, and the /test page sweeps it. */
  --wordmark-wdth: 125;

  /* derived, so the artefact layer below needs no per-direction edit */
  --grid-ink:rgba(11,12,14,.16);
  --grid-ink-soft:rgba(11,12,14,.055);
  --wash:rgba(27,59,255,.055);
  --bloom-a: .055;
}

/* Light directions want cards read as outlines rather than fills. */
.scard, .post, .slot, .fact { box-shadow: 0 1px 0 rgba(11,12,14,.04); }


/* ---------------------------------------------------------------
   Background artefacts - scattered registration marks, a ghosted
   card, rule clusters. Purely decorative, aria-hidden in the markup,
   and written against the --grid-ink tokens above so it follows the
   active direction without edits.
   --------------------------------------------------------------- */

.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg i { position: absolute; display: block; }
.bg .card-ghost, .bg .plus { opacity: .5; }

/* The grid runs the height of the page rather than sitting in the top-right
   corner. `.bg` is position:fixed, so this layer is a window onto a grid that
   stays put while the page scrolls past: extending the mask down means the
   grid is present at every scroll position instead of only at the top.

   Three mask stops rather than one, so it fades in and out across the height
   instead of ending on a hard edge, and it is weighted to the right so it
   never sits under the body text on the left. */
.bg .marks {
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image:
    radial-gradient(ellipse 52% 46% at 82% 12%, #000 0%, transparent 76%),
    radial-gradient(ellipse 44% 38% at 96% 54%, #000 0%, transparent 78%),
    radial-gradient(ellipse 58% 34% at 74% 92%, #000 0%, transparent 80%);
          mask-image:
    radial-gradient(ellipse 52% 46% at 82% 12%, #000 0%, transparent 76%),
    radial-gradient(ellipse 44% 38% at 96% 54%, #000 0%, transparent 78%),
    radial-gradient(ellipse 58% 34% at 74% 92%, #000 0%, transparent 80%);
  opacity: .85;
}
.bg .card-ghost {
  width: 190px; height: 250px; left: -4%; top: 58%;
  border: 1px solid var(--grid-ink-soft);
  transform: rotate(-6deg);
}
.bg .card-ghost::after {
  content: ""; position: absolute; inset: 12px 12px 46px;
  background: repeating-linear-gradient(122deg, transparent 0 11px, var(--grid-ink-soft) 11px 12px);
}
/* .bg .rules was a cluster of horizontal hairlines pinned bottom-right. It is
   GONE, not merely hidden: because .bg is fixed, it sat at a constant screen
   position and every scroll dragged it through whatever paragraph happened to
   be on the right-hand side, so it read as ruled lines struck through the
   copy. Any decoration in this layer has to survive being placed over text at
   an arbitrary scroll position, and a run of horizontal lines cannot.
   The markup that used it has been removed too; do not reintroduce either. */

.bg .ring { left: 88%; top: 78%; width: 128px; height: 128px; border: 1px solid var(--grid-ink-soft); border-radius: 50%; }

/* ---------------------------------------------------------------
   Scattered accent bloom.

   The cards carry a faint coloured glow and the page behind them did not,
   which is what made the background read as flat. These are the same glow at
   a fraction of the strength, dropped at a few points so the eye finds
   variation without being able to name a shape.

   --bloom-a is the knob: every stop is expressed as a multiple of it, so one
   value tunes the whole effect and the /test page can sweep it.
   --------------------------------------------------------------- */
.bg .motes {
  inset: -10% -5%;
  background:
    radial-gradient(circle 30vw at 12% 18%, rgba(var(--signal-rgb), calc(var(--bloom-a) * 1.00)), transparent 62%),
    radial-gradient(circle 22vw at 88% 32%, rgba(var(--signal-rgb), calc(var(--bloom-a) * 0.75)), transparent 60%),
    radial-gradient(circle 26vw at 68% 72%, rgba(var(--signal-rgb), calc(var(--bloom-a) * 0.85)), transparent 64%),
    radial-gradient(circle 18vw at 22% 88%, rgba(var(--signal-rgb), calc(var(--bloom-a) * 0.60)), transparent 58%);
}
.bg .plus { left: 92%; top: 14%; width: 34px; height: 34px; }
.bg .plus::before, .bg .plus::after { content: ""; position: absolute; background: var(--grid-ink); }
.bg .plus::before { inset: 50% 0 auto; height: 1px; }
.bg .plus::after { inset: 0 50% auto; width: 1px; height: 100%; }
.bg .wash { inset: 0; background: radial-gradient(ellipse 66% 52% at 50% 0%, var(--wash), transparent 68%); }