/* Base — custom properties, reset, typography, shared utilities */

:root{
  /* ── SHOWROOM ─────────────────────────────────────────────────
     Warm bone paper, silver-face equipment, walnut cabinets. The gear
     was already built as 1970s silver-face hardware — what changed is
     the room it sits in. Nothing here is pure white or pure black: the
     paper is warm, the ink is a very dark warm grey, and the whole page
     is meant to read like a printed equipment catalogue.
     ------------------------------------------------------------- */
  --wax:#EFEDE7;              /* the paper */
  --wax-soft:#E7E4DB;         /* banded sections */
  --card:#F8F7F3;             /* printed inserts: the liner pages */

  /* --manila is the ink. It was cream-on-black once, which is why every
     rule on the site still asks for it by that name. Raised from 60% to
     74% opacity for secondary text — thin type on light paper was the
     single most common legibility complaint, and low-contrast grey is
     what caused it. */
  --manila:#1A1A17;
  --manila-dim:rgba(26,26,23,0.74);
  /* Captions and machine labels. 0.56 measured 3.7:1 on the paper,
     which fails at the 9.5px these are set in. */
  --manila-soft:rgba(26,26,23,0.66);
  --rule:rgba(26,26,23,0.16);
  --rule-soft:rgba(26,26,23,0.09);
  --rule-strong:rgba(26,26,23,0.26);

  /* Low-alpha fills. Every soft panel, chip and hover tint on the page
     draws from these four rather than hard-coding an ink alpha, which is
     the whole reason dark mode is a token swap instead of a rewrite:
     in dark mode they become paper-over-ink instead of ink-over-paper. */
  --fill-1:rgba(26,26,23,0.03);
  --fill-2:rgba(26,26,23,0.05);
  --fill-4:rgba(26,26,23,0.14);

  --card-2:#F1F0EA;           /* printed card, mid tone */
  --card-3:#E9EBE3;           /* printed card, shadow side */
  --paper-hi:rgba(255,255,255,0.34);   /* the veil over banded sections */
  --chrome-bg:rgba(237,238,234,0.88);  /* the sticky nav */
  --crease:rgba(26,26,23,0.20);        /* the fold shading on the gatefold */
  --card-shadow:rgba(22,25,26,0.55);   /* what a printed card drops */
  --band:rgba(231,228,219,0.88);       /* banded sections, sheer so the aura shows */

  /* Every accent that also has to work as type gets mixed toward this. It
     is the one token that MUST flip with the mode: mixing a lamp colour
     toward near-black is what makes it readable on paper and exactly what
     destroys it on a dark ground. */
  --ink-mix:#14171A;
  --badge-ink:#FCF6E9;                 /* type on a filled accent badge */
  --rule-hover:rgba(26,26,23,0.42);    /* a border under the pointer */

  /* A printed card catches the light along its top edge and carries a
     sheen down its face. Both are white on paper and have to become
     almost nothing on a dark ground, or they wash the card out. */
  --paper-sheen:rgba(255,255,255,0.55);
  --paper-edge:rgba(255,255,255,0.90);

  /* Brass used as a line or a tint rather than as type. --brass-ink
     already flips; these did not, so pill outlines and pulse rings were
     staying dark-mode-invisible. */
  --brass-line:rgba(138,99,20,0.38);
  --brass-tint:rgba(201,154,63,0.12);

  /* The oscilloscope trace. Read by 05-scope.js, which paints to canvas
     and so cannot use a CSS variable directly. */
  --scope-body:#2C6570;
  --scope-core:#1B3F4A;

  /* The aura field. Colour lives here so both modes can carry it at the
     weight each one needs — the same alpha that reads as a whisper on
     paper disappears entirely on a dark ground. */
  --orb-1:rgba(214,116,92,0.17);
  --orb-2:rgba(201,154,63,0.17);
  --orb-3:rgba(120,101,190,0.15);
  --orb-4:rgba(52,138,150,0.16);
  --orb-5:rgba(126,168,74,0.13);
  --orb-6:rgba(186,96,132,0.14);

  /* Light-on-dark ink, for the few surfaces that stay dark: the
     now-playing bar, the receiver glass, chrome sitting over photos. */
  --panel-ink:#F1EDE3;
  --panel-ink-dim:rgba(241,237,227,0.68);

  --oxblood:#7C2B31;
  --brass:#C99A3F;            /* lamps and meters — hardware only */
  --brass-ink:#7A5B22;        /* the same idea as type on paper */
  --teal:#2C6570;
  --phosphor:#5FE3A0;

  /* Section accents. Muted enough to live on bone paper without turning
     the page into a swatch book — they only ever appear as a rule under
     an eyebrow, a full stop, a nav pill and the rail dot. */
  --ink-gold:#7A5B22;
  --ink-teal:#1D5560;
  --ink-rose:#8E3A33;
  --ink-indigo:#413A6E;
  --ink-moss:#38591F;
  --now-sec:#7A5B22;

  --alu:#C6CACE;
  --alu-hi:#E8EBEE;
  --alu-lo:#8E9298;
  --engrave:#25272A;
  --engrave-dim:rgba(37,39,42,0.66);
  --walnut:#5C3A24;
  --walnut-lo:#2E1C10;
  --walnut-hi:#7A5133;

  --ease:cubic-bezier(.22,1,.36,1);
  --brushed:repeating-linear-gradient(90deg,
    rgba(255,255,255,.28) 0 1px, rgba(0,0,0,.05) 1px 2px,
    rgba(255,255,255,.12) 2px 3px, rgba(0,0,0,.03) 3px 4px);
  --grain:repeating-linear-gradient(88deg,
    rgba(0,0,0,.20) 0 2px, rgba(255,255,255,.05) 2px 4px,
    rgba(0,0,0,.10) 4px 7px, rgba(255,255,255,.03) 7px 9px);
}

/* =========================================================
   DARK MODE

   Set COLOR_MODE in assets/js/01-config.js. Nothing structural changes:
   the equipment keeps its brushed aluminium and walnut, every layout,
   animation and figure caption is identical, and the aura field is still
   there. Only the room's lighting changes — the paper becomes a dark warm
   ground, the ink inverts, and the accents lift to colours that hold on
   it. That is only a token swap because every soft fill on the page draws
   from --fill-1..4 and --rule* rather than hard-coding an ink alpha.
   ========================================================= */
html.mode-light{color-scheme:light;}
html.mode-dark{
  color-scheme:dark;

  --wax:#151412;
  --wax-soft:#1C1A18;
  --card:#26241F;
  --card-2:#211F1B;
  --card-3:#191714;

  --manila:#F1EFE8;
  --manila-dim:rgba(241,239,232,0.78);
  --manila-soft:rgba(241,239,232,0.60);

  --rule:rgba(241,239,232,0.16);
  --rule-soft:rgba(241,239,232,0.09);
  --rule-strong:rgba(241,239,232,0.30);

  --fill-1:rgba(241,239,232,0.04);
  --fill-2:rgba(241,239,232,0.06);
  --fill-4:rgba(241,239,232,0.15);

  --paper-hi:rgba(255,255,255,0.028);
  --chrome-bg:rgba(21,20,18,0.90);
  --band:rgba(28,26,24,0.90);
  --ink-mix:#F4F2EC;
  --badge-ink:#17150F;
  --rule-hover:rgba(241,239,232,0.44);
  --paper-sheen:rgba(241,239,232,0.05);
  --paper-edge:rgba(241,239,232,0.10);
  --brass-line:rgba(217,167,76,0.42);
  --brass-tint:rgba(217,167,76,0.14);
  --scope-body:#63B4C2;
  --scope-core:#9AD3DE;
  --crease:rgba(0,0,0,0.50);
  --card-shadow:rgba(0,0,0,0.78);

  /* Brass as type has to come up a long way to survive on a dark ground. */
  --brass-ink:#D9A74C;
  --ink-gold:#D9A74C;
  --ink-teal:#63B4C2;
  --ink-rose:#E68E80;
  --ink-indigo:#A197E8;
  --ink-moss:#9BCB6B;
  --now-sec:#D9A74C;

  /* The same aura, and it needs LESS than paper does, not more. Colour on
     near-black has nothing competing with it, so the first pass — which
     doubled the light-mode alphas on the theory that dark grounds swallow
     colour — came out far too strong. These are roughly 45% of that, and
     slightly desaturated, so the field reads as ambient light in a dark
     room rather than as coloured blobs. The light palette is untouched. */
  --orb-1:rgba(226,132,106,0.12);
  --orb-2:rgba(214,168,84,0.12);
  --orb-3:rgba(140,124,214,0.11);
  --orb-4:rgba(78,164,178,0.11);
  --orb-5:rgba(142,186,96,0.09);
  --orb-6:rgba(204,118,152,0.10);
}
/* The sleeve is a dark object. On a dark page it needs an edge or it
   dissolves into the ground. */
html.mode-dark .hero-sleeve{box-shadow:0 30px 70px -20px rgba(0,0,0,.9),inset 0 0 0 1px rgba(241,239,232,.16);}
html.mode-dark .art-frame{border-color:rgba(241,239,232,.18);}
/* Brand glyphs on the contact page. These sit on the page ground, not on
   the sleeve, so the near-black marks disappear once the ground is dark.
   (The sleeve tiles in 03-hero.css keep their true brand colours — the
   sleeve is dark in both modes.) */
html.mode-dark .soc-link[data-key="github"]  {--brand:#E9EDF0;}
html.mode-dark .soc-link[data-key="discogs"] {--brand:#E8E8E8;}
html.mode-dark .soc-link[data-key="resume"]  {--brand:#C9B183;}
html.mode-dark .soc-link[data-key="email"]   {--brand:#D9A74C;}
html.mode-dark .soc-link[data-key="linkedin"]{--brand:#4FA3F0;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--wax);}
body{
  background:transparent;color:var(--manila);
  font-family:'Karla',sans-serif;
  /* Up from 15px/1.55. Body copy on paper wants more size and more
     leading than the same copy reversed out of black did. */
  font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* Numbers line up in columns all over this page — meters, dial
     frequencies, spec rows, result figures. Proportional digits make
     those columns ripple. */
  font-variant-numeric:tabular-nums;
}
p{line-height:1.62;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1060px;margin:0 auto;padding:0 26px;}
.liner{font-family:'Courier Prime',monospace;}
/* Wider tracking and a quieter colour. The eyebrow is a label on a
   machine, not a headline — it should read as engraved, not shouted. */
.eyebrow{
  font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sec,var(--brass-ink));
  display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:'';width:24px;height:1px;background:currentColor;opacity:.85;flex:none;}

/* ── the catalogue caption ──────────────────────────────────────
   Every major object on the page gets one: a figure number, a leader
   rule, a spec line. It is the one device repeated across six very
   differently-shaped sections, and it is what makes them read as pages
   of the same catalogue rather than as unrelated set-pieces. */
.fig{display:flex;align-items:center;gap:12px;margin-top:18px;}
.fig::before{content:'';width:34px;height:1px;background:var(--rule);flex:none;}
.fig span{
  font-family:'Courier Prime',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--manila-soft);line-height:1.5;
}
.fig.center{justify-content:center;}
.eyebrow.center{justify-content:center;}

/* =========================================================
   FEATURE FLAG — SHOW_PROJECTS (assets/js/01-config.js)

   The inline script in <head> puts .no-projects on <html> when the flag
   is false. One rule then hides the tracklist section and everything
   that links to it, so no nav item or button is left pointing at a
   section that isn't on the page.

   display:none also takes these out of the tab order and the
   accessibility tree, so a hidden tracklist is genuinely gone rather
   than just invisible.
   ========================================================= */
.no-projects [data-needs-projects]{display:none !important;}