/* ─────────────────────────────────────────────────────────────────────────
   LAYOUT PRIMITIVES — based on EVERY LAYOUT  (https://every-layout.dev)
   by Heydon Pickering & Andy Bell. Every Layout is a PAID product.
   Only the publicly-free primitives keep their real names (Stack, Sidebar,
   Switcher). The others are deliberately renamed here. To use or extend the
   FULL set of primitives you must BUY Every Layout — please support the
   authors:  https://every-layout.dev
   The `.flow` utility is Andy Bell's publicly-shared pattern, used with credit:
   https://piccalil.li/blog/flow-utility/
   ───────────────────────────────────────────────────────────────────────── */
/* Very minimal reset based on Andy Bell/Set Studio/Piccalilli */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  margin:0;
  padding:0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
/* a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
} */

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* allowing for older browsers that dont support "hidden" attribute */

[hidden] {
  display: none;
}



/* Root variables */

:root {


  /* Color themes */


    /* --primary: oklch(0.663 0.1274 69); */
    --primary: oklch(0.663 0.2 69);
     /* version of brand colour with higher croma */
    /* --primary: oklch(48.98% 0.18874 316.098); */

    /* PRIMARY */
        
    --primary-100: oklch(from var(--primary) 90% 0.25 h);
    --primary-200: oklch(from var(--primary) 80% 0.25 h);
     --primary-300: oklch(0.663 0.2 69);
     --primary-400: oklch(from var(--primary) 50% 0.2 h);
     --primary-500: oklch(from var(--primary) 40% 0.2 h);
     --primary-600: oklch(from var(--primary) 30% 0.2 h);
     --primary-700: oklch(from var(--primary) 20% 0.2 h);
     --primary-800: oklch(from var(--primary) 10% 0.2 h);

    /* GRAYS */

      --gray-100: oklch(from var(--primary) 90% 0.05 h);
    --gray-200: oklch(from var(--primary) 80% 0.05 h);
    --gray-300: oklch(from var(--primary) 70% 0.05 h);
    --gray-400: oklch(from var(--primary) 60% 0.05 h);
    --gray-500: oklch(from var(--primary) 50% 0.05 h);
    --gray-600: oklch(from var(--primary) 40% 0.05 h);
    --gray-700: oklch(from var(--primary) 30% 0.05 h);
    --gray-800: oklch(from var(--primary) 20% 0.05 h);

    /* COMPLEMENTARY */

      --comp-100: oklch(from var(--primary) 140% c calc(h + 180));
      --comp-200: oklch(from var(--primary) 130% c calc(h + 180));
      --comp-300: oklch(from var(--primary) 120% c calc(h + 180));
      --comp-400: oklch(from var(--primary) 110% c calc(h + 180));
        --comp-500: oklch(from var(--primary) 80% c calc(h + 180));
      --comp-600: oklch(from var(--primary) l c calc(h + 180));    
      --comp-700: oklch(from var(--primary) 50% c calc(h + 180));
      --comp-800: oklch(from var(--primary) 30% c calc(h + 180));

   /* ANALAGOUS ONE */

        --ag-1-400: oklch(from var(--primary) 110% c calc(h + 30));
        --ag-1-500: oklch(from var(--primary) 80% c calc(h + 30));
       --ag-1-600: oklch(from var(--primary) l c calc(h + 30));    
       --ag-1-700: oklch(from var(--primary) 50% c calc(h + 30));
        --ag-1-800: oklch(from var(--primary) 30% c calc(h + 30));


  /* ANALAGOUS TWO */ 

      --ag-2-100: oklch(from var(--primary) 140% calc(c + 0.1) calc(h + 330));
      --ag-2-200: oklch(from var(--primary) 130% calc(c + 0.05) calc(h + 330));
      --ag-2-300: oklch(from var(--primary) 120% c calc(h + 330));
      --ag-2-400: oklch(from var(--primary) 110% c calc(h + 330));
       --ag-2-500: oklch(from var(--primary) 80% c calc(h + 330));
     --ag-2-600: oklch(from var(--primary) l c calc(h + 330));     
      --ag-2-700: oklch(from var(--primary) 50% c calc(h + 330));
      --ag-2-800: oklch(from var(--primary) 30% c calc(h + 330));

  /* SEMANTIC TOKEN ALIASES — names referenced across this file that were
     undefined. Wired to the palette/scale above (2026-06-29). Retune freely. */
  --color-light: #fff;
  --color-dark: #000;
  --color-secondary: var(--comp-500);
  --accent-one: var(--ag-1-500);
  --accent-two: var(--ag-2-500);
  --primary-dark: var(--primary-700);
  --radius: 0.5rem;
  --s1: var(--space-m);   /* Every-Layout-style spacing handle → Utopia space */

}



/* ═════════ MAL RAE — SETTINGS (theme tokens · knobs · shadow) ═════════ */
/* ─────────────────────────────────────────────────────────────────────────
   MAL RAE — THEME LAYER  (load AFTER global.css)
   Dark-first, amber-glow-on-dark, with a light/dark toggle and a set of
   PARAMETRIC KNOBS so darkness, glow, vignette, grain and fades are all
   tunable by changing ONE number (no re-coding). Built on the house OKLCH
   tokens + Utopia scale already in global.css.  Album: The Neon Light Foundry.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark light;

  /* ── Brand axis ─────────────────────────────────────────────── */
  --brand-h: 69;        /* amber/orange hue (matches house --primary) */
  --brand-c: 0.16;      /* accent chroma */
  --neon-h: 235;        /* optional cool "neon" secondary (sci-fi) */

  /* ── PARAMETRIC KNOBS — tune live on design-system.html ──────── */
  --glow-strength: 0.55;                 /* 0–1  glow intensity        */
  --glow-radius: 1.4rem;                 /*      glow blur radius       */
  --vignette: 0.62;                      /* 0–1  edge darkness          */
  --grain: 0.05;                         /* 0–1  film-grain opacity     */
  --fade-duration: 600ms;                /*      theme / view fades     */
  --fade-ease: cubic-bezier(.22,.61,.36,1);

  /* ── Type ROLES (map to the faces @font-face'd in global.css) ── */
  --font-display: "nauman-cond", "mango", system-ui, sans-serif; /* condensed hero */
  --font-mega:    "mango", "moret-display", system-ui, sans-serif;/* huge display   */
  --font-body:    "brokman", Georgia, serif;                      /* reading text   */
  --font-script:  "eldwin-script", cursive;                       /* flourish (rare)*/

  /* ── DARK theme (default) — tinted near-blacks, never #000 ───── */
  --bg:         oklch(0.155 0.012 var(--brand-h));
  --bg-2:       oklch(0.195 0.014 var(--brand-h));
  --surface:    oklch(0.225 0.016 var(--brand-h));
  --surface-2:  oklch(0.265 0.018 var(--brand-h));
  --line:       oklch(0.34  0.02  var(--brand-h));
  --text:       oklch(0.93  0.015 var(--brand-h));   /* warm off-white */
  --text-dim:   oklch(0.74  0.02  var(--brand-h));
  --text-faint: oklch(0.55  0.018 var(--brand-h));
  --accent:     oklch(0.80  var(--brand-c) var(--brand-h));
  --accent-2:   oklch(0.63  calc(var(--brand-c) - 0.02) var(--brand-h));
  --on-accent:  oklch(0.18  0.02 var(--brand-h));
  --glow-color: var(--accent);
  --vignette-ink: oklch(0.08 0.01 var(--brand-h));

  /* Shadow system — after Josh Comeau "Designing beautiful shadows in CSS"
     (joshwcomeau.com/css/designing-shadows): consistent top-down light, LAYERED,
     and COLOUR-MATCHED to the brand hue (never flat black). Elevation tiers. */
  --shadow-color: oklch(0.10 0.03 var(--brand-h));
  --shadow-low:
    0 0.5px 0.6px oklch(from var(--shadow-color) l c h / 0.32),
    0 1.1px 1.4px -1.2px oklch(from var(--shadow-color) l c h / 0.32),
    0 2.7px 3.4px -2.5px oklch(from var(--shadow-color) l c h / 0.32);
  --shadow-medium:
    0 0.5px 0.6px oklch(from var(--shadow-color) l c h / 0.33),
    0 1.7px 2.1px -0.6px oklch(from var(--shadow-color) l c h / 0.33),
    0 3.6px 4.5px -1.2px oklch(from var(--shadow-color) l c h / 0.33),
    0 7.8px 9.8px -1.9px oklch(from var(--shadow-color) l c h / 0.33),
    0 16px 20px -2.5px oklch(from var(--shadow-color) l c h / 0.33);
  --shadow-high:
    0 0.7px 0.8px oklch(from var(--shadow-color) l c h / 0.30),
    0 3px 3.8px -0.4px oklch(from var(--shadow-color) l c h / 0.30),
    0 5.6px 7px -0.8px oklch(from var(--shadow-color) l c h / 0.30),
    0 9.4px 11.8px -1.2px oklch(from var(--shadow-color) l c h / 0.30),
    0 15.5px 19px -1.5px oklch(from var(--shadow-color) l c h / 0.30),
    0 25px 31px -1.9px oklch(from var(--shadow-color) l c h / 0.30),
    0 40px 50px -2.3px oklch(from var(--shadow-color) l c h / 0.30);
}

/* ── LIGHT theme (explicit toggle) ───────────────────────────── */
[data-theme="light"] {
  --bg:         oklch(0.96 0.008 var(--brand-h));
  --bg-2:       oklch(0.93 0.012 var(--brand-h));
  --surface:    oklch(0.99 0.006 var(--brand-h));
  --surface-2:  oklch(0.91 0.014 var(--brand-h));
  --line:       oklch(0.82 0.02  var(--brand-h));
  --text:       oklch(0.24 0.02  var(--brand-h));
  --text-dim:   oklch(0.43 0.02  var(--brand-h));
  --text-faint: oklch(0.58 0.018 var(--brand-h));
  --accent:     oklch(0.58 0.16  var(--brand-h));
  --accent-2:   oklch(0.50 0.14  var(--brand-h));
  --on-accent:  oklch(0.98 0.01  var(--brand-h));
  --vignette: 0.16;
  --glow-strength: 0.30;
  --vignette-ink: oklch(0.55 0.03 var(--brand-h));
  --shadow-color: oklch(0.52 0.05 var(--brand-h));
}

/* honour OS preference until the user flips the toggle */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: oklch(0.96 0.008 var(--brand-h)); --bg-2: oklch(0.93 0.012 var(--brand-h));
    --surface: oklch(0.99 0.006 var(--brand-h)); --surface-2: oklch(0.91 0.014 var(--brand-h));
    --line: oklch(0.82 0.02 var(--brand-h)); --text: oklch(0.24 0.02 var(--brand-h));
    --text-dim: oklch(0.43 0.02 var(--brand-h)); --text-faint: oklch(0.58 0.018 var(--brand-h));
    --accent: oklch(0.58 0.16 var(--brand-h)); --accent-2: oklch(0.50 0.14 var(--brand-h));
    --on-accent: oklch(0.98 0.01 var(--brand-h)); --vignette: 0.16; --glow-strength: 0.30;
    --vignette-ink: oklch(0.55 0.03 var(--brand-h));
  }
}

/* VIEW TRANSITIONS */

/* remember prefers reduced motion, put view transition inside this media query if needed */

 @view-transition {
  navigation: auto;
} 

::view-transition-group(*) {
  animation-duration: 0.4s; /* was "1Rs" (invalid unit). Tune to taste. */
}

::view-transition-old(root){
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-in {
  from { 
    opacity: 0;
  }
}

@keyframes fade-out {
  to { 
    opacity: 0;
  }
}


header {
  view-transition-name: header;
}


 
      /* CUBE CSS, see https://cube.fyi/ */

/* Global CSS */

/* Fonts, Type and Space Scale, Colours */   

/* Add fallback font stack, to minimise CLS */

/* Remove all unused @font-face after design phase */

/* consider adding scrollbar-gutter and scrollbar-width */

/* Add in content-visibility: auto to page sections to increase perf */

/* use FONT-WEIGHT BOLD FOR BOLD FONTS */

@font-face {
  font-family: nuordertestbold;
  src: url(fonts/nuordertestbold.woff2);
  font-display: swap;
}

@font-face {
  font-family: mangobold;
  src: url(fonts/mangobold.woff2);
  font-display: swap;
}

@font-face {
  font-family: cagneytestbook;
  src: url(fonts/cagneytestbook.woff2);
  font-display: swap;
}

@font-face {
  font-family: blomtestblack;
  src: url(fonts/blomtestblack.woff2);
  font-display: swap;
}

@font-face {
  font-family: ordaxtestbold;
  src: url(/fonts/ordaxtestbold.woff2);
  font-display: swap;
}

@font-face {
  font-family: tengutest;
  src: url(fonts/tengutest.woff2);
  font-display: swap;
}

@font-face {
  font-family: tondutest;
  src: url(fonts/tondutest.woff2);
  font-display: swap;
}

@font-face {
  font-family: moret_extrabold_test;
  src: url(fonts/moret_extrabold_test.woff2);
  font-display: swap;
}

@font-face {
  font-family: charter_regular;
  src: url(fonts/charter_regular.woff2);
  font-display: swap;
}


/* ============================================================
   DEMO FACES — real Northern Block / Mango faces, latin-subset
   WOFF2 (via web-fonts skill). Bold/extra-bold display per house
   preference. Sourced from references/fonts/, subset into design/fonts/.
   Lineage: graphics-workflows.md. Curated for the type-specimen demo.
   ============================================================ */
@font-face { font-family:"moret-display";   src:url(fonts/moret-extrabold.woff2) format("woff2");     font-weight:800; font-display:swap; }
@font-face { font-family:"nauman-cond";     src:url(fonts/nauman-cond-heavy.woff2) format("woff2");   font-weight:900; font-display:swap; }
@font-face { font-family:"heltar";          src:url(fonts/heltar-extrabold.woff2) format("woff2");    font-weight:800; font-display:swap; }
@font-face { font-family:"mynor";           src:url(fonts/mynor-black.woff2) format("woff2");         font-weight:900; font-display:swap; }
@font-face { font-family:"scharf";          src:url(fonts/scharf-heavy.woff2) format("woff2");        font-weight:900; font-display:swap; }
@font-face { font-family:"eldwin-script";   src:url(fonts/eldwin-script-heavy.woff2) format("woff2"); font-weight:800; font-display:swap; }
@font-face { font-family:"mango";           src:url(fonts/mango-grotesque-black.woff2) format("woff2"); font-weight:900; font-display:swap; }
@font-face { font-family:"brokman";         src:url(fonts/brokman-book.woff2) format("woff2");        font-weight:400; font-display:swap; }
@font-face { font-family:"brokman";         src:url(fonts/brokman-bold.woff2) format("woff2");        font-weight:700; font-display:swap; }


/* ============================================================
   UTOPIA TYPE SCALE  — canonical --step-*, generated, NOT hand-typed.
   REGENERATE on the fly with (utopia skill, python = no deps):
     python3 .claude/skills/utopia/scripts/utopia.py type \
       --min-width 320 --max-width 1280 --min-size 18 --max-size 21 \
       --min-ratio 1.7 --max-ratio 2.0 --positive 5 --negative 2
   Punched up 2026-06-30: base 18→21px, vw 320→1280, ratios 1.7 / 2.0
   (a musical OCTAVE at the top end — bigger, more dramatic display).
   Was: 18→20px, 1.667 / 1.875. Change a number, re-run, paste — the
   whole site reflows because everything consumes the tokens.
   --type-* kept as ALIASES so existing consumers keep working AND the
   every-layout/utopia convention (--step-*) now resolves too.
   TODO (web-fonts skill): metric-matched fallbacks (size-adjust/
   ascent-override) per face → zero CLS on swap, scale-independent.
   ============================================================ */
:root {
  --step--2: clamp(0.7813rem, 0.8565rem - 0.3762vi, 0.5556rem);
  --step--1: clamp(0.9375rem, 0.9722rem - 0.1736vi, 0.8333rem);
  --step-0:  clamp(1.125rem, 1.0833rem + 0.2083vi, 1.25rem);
  --step-1:  clamp(1.35rem, 1.175rem + 0.875vi, 1.875rem);
  --step-2:  clamp(1.62rem, 1.2225rem + 1.9875vi, 2.8125rem);
  --step-3:  clamp(1.944rem, 1.1857rem + 3.7913vi, 4.2188rem);
  --step-4:  clamp(2.3328rem, 1.001rem + 6.6589vi, 6.3281rem);
  --step-5:  clamp(2.7994rem, 0.5684rem + 11.1547vi, 9.4922rem);

  /* in-between display rung — the scale's 1.5x jumps leave a gap between
     step-4 (page-filling) and step-3; this fills it for big-but-contained heroes */
  --step-display: clamp(2.45rem, 1.233rem + 6.083vi, 6.1rem);

  /* back-compat aliases — old consumers reference --type-* */
  --type--2: var(--step--2);
  --type--1: var(--step--1);
  --type-0:  var(--step-0);
  --type-1:  var(--step-1);
  --type-2:  var(--step-2);
  --type-3:  var(--step-3);
  --type-4:  var(--step-4);
  --type-5:  var(--step-5);
}


/* Utopia Space Scale */

:root {
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
--space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

/* One-up pairs */
--space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
--space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
--space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
--space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

/* Custom pairs */
--space-s-3xl: clamp(1.125rem, -1.0924rem + 11.087vw, 7.5rem);
--space-m-3xl: clamp(1.6875rem, -0.3342rem + 10.1087vw, 7.5rem);
}


/* Global measure */

/* consider shorter widths for larger elements
like headings, as per "some simple ways to make 
content look good by Andy Bell */


:root {
  --measure: 45ch;
  }
  
  * {
  max-inline-size: var(--measure);
  }
  
  html,
  body,
  div,
  header,
  nav,
  main,
  section,
  article,
  footer {
    max-inline-size: none;
  }

  /* try other max-widths for headings e.g */

  h1 {
    max-width: 20ch;
  }

  h2 {
    max-width: 28ch;
  }
  
 
/* Typography */

/* nice big line height for body, and hence everything else (except e.g headings), as inherited by everything else. Let browser do the work */

body {
font-family: "modumtestreg";
font-size: var(--type-0);
overflow-x: hidden;
padding: 2rem;
line-height: 1.7; 
}

a {
font-family: "nuordertestbold";
font-size: var(--type-0);
}

:focus {
outline: 2px dotted;
outline-offset: 0.25rem;
color: var(--color-secondary);
}

/* li {
  color: #F5E8D8;
}
 */

   
/* only use em units for immediate context, e.g a span inside a h2, or for inline elements like
icons. As general rule rem units better for block elements and em units better for inline */

/* reduce line height as type gets large, e.g 1.1 for H1 */
 

h1 {
font-size: var(--type-4);
--flow-space: var(--space-s);
/* font-family: "ordaxtestbold", sans-serif; */
line-height: 1.1; 
max-width: 20ch;
}

h2 {
font-size: var(--type-3);
--flow-space: var(--space-s);
/* font-family: "ordaxtestbold"; */
max-width: 28ch;
line-height: 1.2;

}

h3 {
  font-size: var(--type-2);
--flow-space: var(--space-s);
line-height: 1.2;
max-width: 28ch;
/* font-family: "ordaxtestbold"; */
}

/* HUGE / DISPLAY TYPE — kept fully alive (the scale still runs up to --type-5
   ~29rem). Element defaults now DESCEND (h1 type-4 / h2 type-3 / h3 type-2) so a
   stray <h3> in prose isn't 15rem; reach for the big sizes DELIBERATELY via these
   display utilities or the .heading__text__* classes below. */
.text-mega    { font-size: var(--type-5); line-height: 0.9; text-wrap: balance; }
.text-display { font-size: var(--type-4); line-height: 1;   text-wrap: balance; }
 
p {
max-width: 45ch;
font-family: charter_regular;
font-size: var(--type-0);
}



.heading__text__large {
  font-size: var(--type-4);
  font-family: ordaxtestbold;
  }
  
  .heading__text__medium {
  font-size: var(--type-4);
  font-family: ordaxtestbold, sans-serif;
  text-wrap: balance;
  }

  
  .heading__text__small {
  font-size: var(--type-2);
  --flow-space: var(--type-0);
  font-family: ordaxtestbold, sans-serif;
   }






a {
  color: currentColor;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 0.3ex;
  text-underline-offset: 0.3ex;
}





/* COMPOSITION LAYOUT  */

/* Used with viewport-fit=cover (in the metaname=viewport html tag) to deal with devices with notches and that overlay the display */ 

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* also, the above safe-areas are flush to the notch, so allow some padding when using */

main {
  padding-right: calc(env(safe-area-inset-right) + 1rem);
  padding-left: calc(env(safe-area-inset-left) + 1rem);
}



:root {
--cover-space: 0.5rem; 

}



.panel {
padding: var(--s1);
border: black solid;
outline: 0.125rem solid transparent;
outline-offset: -0.125rem;
--color-light: #fff;
--color-dark: #000;
color: var(--color-dark);
background-color: var(--color-light);
}
    
.panel * {
color: inherit;
}

.panel.invert {
color: var(--color-light);
background-color: var(--color-dark);
}





.center {
box-sizing: content-box;
max-inline-size: 60ch;
margin-inline: auto;
padding-inline-start: var(--space-l);
padding-inline-end: var(--space-l);
}

.center-intrinsic {
box-sizing: content-box;
max-inline-size: 60ch;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
}


.huddle-right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s, 1rem);
  justify-content: flex-end;
  align-items: center;
}

/* try justify-content: space-between, and align-items: center, for a page header and logo -which can include a nested row with justify-content: flex-start for the nav links */

.huddle-left {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m, 1rem);
  justify-content: var(--cluster-horizontal-alignment, space-between);
  align-items: var(--cluster-vertical-alignment, center);
}
  
.auto-grid {
  display: grid;
  grid-gap: var(--space-s);
  grid-template-columns: repeat(var(--grid-placement,auto-fit), minmax(var(--grid-min-item-size, 16rem), 1fr));
}


/* :root {
  --cover-space: 20rem;
} */
.stage {
  --space: var(--space-l);
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  padding: var(--space);
}

.stage > * {
  margin-block: var(--space);
}

.stage > :first-child:not(h1) {
  margin-block-start: 0;
}

.stage > :last-child:not(h1) {
  margin-block-end: 0;
}

.stage > .stage-center {
  margin-block: auto;
}

/* .stage-bottom {
  margin-top: auto;
  padding: 2rem; 
}

.stage-top {
  margin-block: 0;  
  padding: 4rem;
} */


.switcher {
  display: flex;
  flex-wrap: wrap;
  /* consider using your modular scale for default gap*/
  gap: var(--gutter, var(--s1));
  /* The width at which the layout "breaks" */
  --threshold: 30rem;
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

/* UTILITIES*/

/* wrapper */
.wrapper {
  margin-inline: auto;
  padding-inline: var(--space-s);
  max-width: 60rem;
  position: relative; 
}
    
/* flow utility, Andy Bell*/
         
    
:root {
--flow-space: var(--space-xl);
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* different versions of flow using
the utopia space scale  */

.u-flow > * + * {
  margin-top: var(--space-s);
}

.u-flow--l > * + * {
  margin-top: var(--space-l); 
}

.u-flow--s-m > * + * {
  margin-top: var(--space-s-m); 
}         


/* Stack and splitting the stack */ 

/* .stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.stack > * + * {
margin-block-start: var(--space, 1.5rem);
}
.stack > :nth-child(2) {
margin-block-end: auto;
} */



/* add more space above headings and quotes and less below */ 
:is(h1, h2, h3, blockquote) {
  --flow-space: 1.5em;
}

.prose :is(h2 + *, h3 + *, h4 + *) {
  --flow-space: var(--space-s);
}



.prose {
  --flow-space: var(--space-m-l);
}



/* radius */

.radius {
  border-radius: 0.5rem;
}


/* hides for all inc screen readers. Check*/ 
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
} 
  
.hyphens-none {
  hyphens: none;
}

.hyphens-auto {
  hyphens: auto;
}

/* BLOCKS  */

/* see components -heydon inclusive and buttons */

/* Can use composition/layouts within blocks as well */






/* (was debug red/green/blue link styling — replaced with house defaults.
   Focus is handled by the global :focus rule above.) */
a:hover {
  text-decoration-thickness: 0.4ex;
  text-decoration-color: currentColor;
}

a:active {
  opacity: 0.85;
}





.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  }

.skip-link:focus {
position: static;
width: auto;
height: auto;
}



.card {
  --flow-space: var(--space-s);
  padding: var(--space-s);
  border: 1px var(--primary-dark);
  border-radius: var(--radius);
  background: var(--color-light);
  font-size: var(--type-1);
}

.button {

  /* Configuration */
  --button-padding: 0.7em 1.2em;
  --button-gap: 0.5em;
  --button-bg: var(--color-dark);
  --button-color: var(--color-light);
  --button-hover-bg: #4b4b4a;
  --button-hover-color: #ffffff;
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-border-color: var(--button-bg);
  --button-radius: 4em;

/* Layout and spacing */
display: inline-flex;
align-items: center;
gap: var(--button-gap);
padding: 0.44rem;

/* Colours */
background: var(--button-bg);
color: var(--button-color);

/* Stroke and radius */
border-width: var(--button-border-width);
border-style: var(--button-border-style);
border-color: var(--button-border-color);
border-radius: var(--button-radius);

/* Typography */
text-decoration: none;
font-weight: var(--button-font-weight, 700);
font-size: var(--type--1);
letter-spacing: 0.05ch;
font-family: sans-serif;
line-height: 1.1;

/* Interactive */
cursor: pointer;
}

/* fallback for custom properties/variables */

/* 
padding: var(--button-padding, 0.7em 1.2em); */

.button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
}

/* Right now, all we need to apply the already existing custom properties from earlier. Job done. */


.button:focus {
  outline-width: var(--button-outline-width, var(--button-border-width));
  outline-style: var(--button-outline-style, var(--button-border-style));
  outline-color: var(--button-outline-color, var(--button-border-color));
  outline-offset: var(
    --button-outline-offset,
    calc(var(--button-border-width) * 2)
  );
}

.button:active {
  transform: scale(99%);
}

/* This is for lede/intro paragraph-to make it bigger and italic. Also reduces line width (because it's larger) and adds more --flow-space to elements that follow it. */

.lede {
  font-size: var(--type-1);
  font-style: italic;
  max-width: 50ch;
}

.lede + * {
  --flow-space: 2em;
}

.text-block p:first-child::first-line {
 color: var(--accent-one);
}

.switch-1 {
  padding: 2rem;
}

.switch-2 {
  padding-block-start: 5rem;
}

.switcher > :nth-child(1) {
  flex-grow: 2;
}




/* ═════════ MAL RAE — THEME BASE · COMPONENTS · EXCEPTIONS ═════════ */
/* ── Page ground: tinted bg + soft top-down vignette (framing) ── */
body {
  background:
    radial-gradient(125% 100% at 50% -10%,
      transparent 52%,
      oklch(from var(--vignette-ink) l c h / var(--vignette)) 100%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  transition: background-color var(--fade-duration) var(--fade-ease),
              color var(--fade-duration) var(--fade-ease);
}

/* film grain — one cheap fixed overlay, theme-independent, non-interactive */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Type roles ──────────────────────────────────────────────── */
h1, h2, h3, .text-display, .text-mega { font-family: var(--font-display); }
.text-mega { font-family: var(--font-mega); }
.u-display { font-family: var(--font-display); }
.u-mega    { font-family: var(--font-mega); }
/* Journal — article headings + post-link headings: accent, no underline (all token-driven) */
.prose h1 { color: var(--accent); }
.prose h2 a { color: var(--accent); text-decoration: none; }
.prose h2 a:hover { opacity: .75; }
.u-dim     { color: var(--text-dim); }
.u-faint   { color: var(--text-faint); }
.u-accent  { color: var(--accent); }

/* ── Glow + lit surfaces (the signature) ─────────────────────── */
.glow-text {
  color: var(--accent);
  text-shadow:
    0 0 calc(var(--glow-radius) * 0.5) oklch(from var(--glow-color) l c h / var(--glow-strength)),
    0 0 calc(var(--glow-radius) * 1.5) oklch(from var(--glow-color) l c h / calc(var(--glow-strength) * 0.5));
}
.lit {                                  /* a glowing element / halo */
  box-shadow:
    0 0 var(--glow-radius) oklch(from var(--glow-color) l c h / calc(var(--glow-strength) * 0.7)),
    0 0 calc(var(--glow-radius) * 2.4) oklch(from var(--glow-color) l c h / calc(var(--glow-strength) * 0.35));
}

/* ── Surfaces / cards / lines (re-skin house base to theme) ──── */
.surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 0.5rem);
  box-shadow: var(--shadow-medium);
}
.elev-low { box-shadow: var(--shadow-low); }
.elev-medium { box-shadow: var(--shadow-medium); }
.elev-high { box-shadow: var(--shadow-high); }
.card  { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.panel { background: var(--surface); color: var(--text); border-color: var(--line); }
.panel.invert { background: var(--bg); color: var(--text); }
hr, .hairline { border: none; height: 1px; background: var(--line); }

/* ── Buttons → amber-on-dark + ghost ─────────────────────────── */
.button {
  --button-bg: var(--accent);
  --button-color: var(--on-accent);
  --button-hover-bg: var(--accent-2);
  --button-hover-color: var(--on-accent);
  --button-border-color: transparent;
  padding: 0.7em 1.25em;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  transition: background-color 200ms var(--fade-ease),
              box-shadow 200ms var(--fade-ease), transform 120ms var(--fade-ease);
}
.button[data-button-variant="ghost"] {
  --button-bg: transparent;
  --button-color: var(--text);
  --button-border-color: var(--line);
  --button-hover-bg: var(--surface-2);
  --button-hover-color: var(--text);
}
.button.lit:hover { box-shadow:
  0 0 var(--glow-radius) oklch(from var(--accent) l c h / calc(var(--glow-strength) * 0.9)); }

/* ── Focus visible on theme ──────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.2rem; }

/* ── Motion safety: knobs still apply, transitions calm down ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* --- components + page styles (merged from page <style> blocks) --- */
  /* ── page-local: hero, header, overlay menu, player slot ───────────────── */
  body { padding: 0; overflow-x: hidden; }
  .shell { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

  /* header */
  .site-head { position: sticky; top: 0; z-index: 40; display:flex; align-items:center;
    justify-content:space-between; gap:1rem; padding-block: 0.8rem;
    background: oklch(from var(--bg) l c h / 0.08); backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border-bottom: 1px solid oklch(from var(--line) l c h / 0.12); }
  .brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); }
  .brand svg { width: 30px; height: 27px; }
  .brand b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing:.06em;
    text-transform: uppercase; }
  /* light mode: wordmark is a warm dark grey with a hint of accent, not near-black */
  [data-theme="light"] .brand b { color: oklch(0.42 0.06 var(--brand-h)); }
  .head-actions { display:flex; align-items:center; gap:.5rem; }
  .nav-journal { color: var(--accent); text-decoration:none; font-family: var(--font-display);
    text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; align-self:center; white-space:nowrap; }
  .nav-journal:hover { opacity:.7; }
  .icon-btn { background:none; border:1px solid var(--line); color:var(--text); cursor:pointer;
    border-radius: 0.5rem; padding:.5rem .7rem; font-family:var(--font-display); letter-spacing:.05em;
    text-transform:uppercase; font-size:.78rem; }
  .icon-btn:hover { background: var(--surface); }

  /* overlay menu — full-screen invert (kept from preview direction) */
  /* fades up and down like a stage light coming on, not a slide/wipe */
  .overlay { position: fixed; inset: 0; z-index: 60; background: var(--accent); color: var(--on-accent);
    display:flex; flex-direction:column; justify-content:center; padding: clamp(2rem,6vw,5rem);
    opacity:0; visibility:hidden; transform:scale(1.015);
    transition: opacity var(--fade-duration) var(--fade-ease),
                transform var(--fade-duration) var(--fade-ease),
                visibility 0s linear var(--fade-duration); }
  .overlay[data-open="true"] { opacity:1; visibility:visible; transform:scale(1);
    transition: opacity var(--fade-duration) var(--fade-ease),
                transform var(--fade-duration) var(--fade-ease); }
  .overlay nav { display:flex; flex-direction:column; gap:.2rem; }
  .overlay a { color: var(--on-accent); text-decoration:none; font-family:var(--font-mega);
    font-size: clamp(2.75rem, 8vw, 6.5rem); line-height:1.05; letter-spacing:-.01em; width:max-content; }
  .overlay a:hover { opacity:.7; }
  .overlay .sub { margin-top: 1.6rem; display:flex; gap:1.2rem; flex-wrap:wrap;
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; }
  .overlay .sub a { font-size:1.5rem; opacity:.9; }
  .overlay .close { position:absolute; top:1.2rem; right:1.4rem; background:none; border:none;
    color:var(--on-accent); font-size:2rem; cursor:pointer; line-height:1; }

  /* hero */
  /* Full-viewport section recipe — one section = one viewport (house cover pattern) */
  main > .stage { position: relative; isolation: isolate; }
  .stage .stage-center { width: 100%; }
  .cover-in { max-width: 64rem; display: flex; flex-direction: column; }
  /* alignment rhythm: hero (+ .cover-center) centred; sections default LEFT;
     add .cover-right to a stage to push it right — alternate down the page */
  .stage .cover-in             { margin-inline: 0 auto; align-items: flex-start; text-align: left; }
  .stage.cover-right .cover-in { margin-inline: auto 0; align-items: flex-end;   text-align: right; }
  .hero .cover-in,
  .stage.cover-center .cover-in { margin-inline: auto; align-items: center; text-align: center; }
  .scroll-hint { align-self: center; margin-block-start: auto; color: var(--accent);
    text-decoration: none; font-size: 1.1rem; padding-block: var(--space-s); }
  .stage .lede { font-style: normal; color: var(--text-dim); max-width: 46ch; }
  .hero { position: relative; }
  /* order: hero first, then the album player directly below the fold */
  .home #main { display:flex; flex-direction:column; }
  .home #top{order:0} .home #listen{order:1} .home #about{order:2} .home #album{order:3} .home #production{order:4}
  .hero .stage-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero .cta { justify-content: center; }
  .hero .lede { margin-inline: auto; }
  .hero .eyebrow { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.28em;
    font-size:.85rem; color:var(--accent-2); margin:0 0 .8rem; }
  .hero h1 { font-family:var(--font-mega); font-size: clamp(5.5rem, 27vw, 22rem); line-height:.8;
    margin:0; letter-spacing:-.02em; text-wrap:balance; max-width:none; }
  .hero .tagline { font-size: var(--type-1); color:var(--text-dim); max-width: 30ch;
    margin: 1.2rem 0 2rem; }
  .hero .cta { display:flex; gap:.8rem; flex-wrap:wrap; }

  /* hub cards */
  .hub { display:grid; gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-block: var(--space-2xl); }
  .hub .surface { display:flex; flex-direction:column; gap:.6rem; padding: var(--space-s); }
  .hub h2 { font-size: var(--type-1); margin:0; }
  .hub p { margin:0; color:var(--text-dim); font-size:.98rem; max-width:none; }
  .hub a.button { margin-top:auto; align-self:flex-start; }

  /* music + player slot */
  .music { margin-block: var(--space-2xl); }
  .player { border:1px solid var(--line); border-radius: 1rem; background: var(--surface);
    padding: var(--space-s); display:grid; gap:1rem; grid-template-columns: minmax(0,1fr); }
  .player .now { display:flex; align-items:center; gap:1rem; }
  .player .play { width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
    background: var(--accent); color:var(--on-accent); font-size:1.3rem; }
  .player .scrub { height:5px; border-radius:3px; background: var(--bg-2); position:relative; }
  .player .scrub i { position:absolute; inset-block:0; left:0; width:32%; border-radius:3px;
    background: var(--accent); }
  .tracklist { list-style:none; margin:0; padding:0; columns: 2; column-gap: var(--space-l); }
  .tracklist li { padding:.35rem 0; border-bottom:1px solid oklch(from var(--line) l c h / .5);
    display:flex; gap:.6rem; color:var(--text-dim); break-inside:avoid; }
  .tracklist li b { color:var(--text); font-variant-numeric:tabular-nums; width:1.6rem; }
  .tracklist li { cursor:pointer; transition: color .2s; }
  .tracklist li:hover { color:var(--text); }
  .tracklist li[aria-current="true"], .tracklist li[aria-current="true"] b { color:var(--accent); }
  .player .scrub i { transition: width .15s linear; }
  .slot-note { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em;
    font-size:.72rem; color:var(--accent-2); }

  /* ── player skins (switchable in-context A/B over the same working engine) ── */
  .skin-switch { display:inline-flex; gap:.3rem; margin-bottom:.7rem; flex-wrap:wrap; }
  .skin-switch button { background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
    padding:.32rem .8rem; border-radius:2em; font-size:.76rem; cursor:pointer;
    font-family:var(--font-display); letter-spacing:.05em; text-transform:uppercase; }
  .skin-switch button.is-on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
  .player .art { display:none; }

  /* GLASS — glassmorphism + sodium glow + album-art (ecemgo vibe, our build) */
  .player.skin-glass { grid-template-columns: 128px 1fr; align-items:start;
    background: oklch(from var(--surface) l c h / 0.45);
    backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
    border: 1px solid oklch(from var(--text) l c h / 0.14);
    box-shadow: 0 0 var(--glow-radius) oklch(from var(--accent) l c h / calc(var(--glow-strength)*0.5)),
                inset 0 1px 0 oklch(from var(--text) l c h / 0.14); }
  .player.skin-glass .art { display:grid; place-items:center; width:128px; aspect-ratio:1;
    border-radius:12px; grid-row:1 / 3; overflow:hidden; border:1px solid oklch(from var(--text) l c h /.16);
    background: radial-gradient(120% 90% at 30% 18%, oklch(from var(--accent) l c h / .95), transparent 58%),
                linear-gradient(160deg, var(--surface-2), var(--bg)); }
  .player.skin-glass .art span { font-family:var(--font-display); font-size:.62rem; line-height:1.15;
    letter-spacing:.16em; text-align:center; color:var(--on-accent);
    text-shadow:0 0 10px oklch(from var(--accent) l c h /.7); }
  .player.skin-glass .now { grid-column:2; }
  .player.skin-glass .slot-note, .player.skin-glass .tracklist { grid-column:1 / -1; }

  /* MINIMAL — strip the chrome (markhillard vibe) */
  .player.skin-min { background:transparent; border:none; box-shadow:none; padding:0; gap:.7rem; }
  .player.skin-min .slot-note { display:none; }
  .player.skin-min .play { width:44px; height:44px; }
  .player.skin-min .tracklist { columns:1; font-size:.92rem; }

  /* PLAYER A — transparent visualiser + clickable list (Awwwards ref) */
  .player2 { background:transparent; border:none; padding:0; display:block; }
  /* MUSIC — album artwork as a big BACKGROUND; audio player on a GLASS layer ABOVE it. No card, no outlines. */
  .album-bg-stage { position:relative; isolation:isolate; width:100%; min-height:min(80vh,760px);
    border-radius:14px; overflow:hidden; display:grid; place-items:center; padding:clamp(1rem,4vw,2.5rem); }
  .album-bg-stage .art-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  .album-bg-stage::after { content:""; position:absolute; inset:0; z-index:-1;
    background:oklch(0.10 0.015 var(--brand-h) / .38); }
  .album-overlay { width:min(94%,34rem); padding:clamp(1rem,3vw,1.6rem); border-radius:14px; text-align:center;
    background:oklch(from var(--bg) l c h / .32); backdrop-filter:blur(5px) saturate(1.1); -webkit-backdrop-filter:blur(5px) saturate(1.1); }
  .album-overlay .np { justify-content:center; }
  /* contained: no inner scroll — all 13 tracks fit inside the glass panel */
  .album-overlay .tracklist2 { max-height:none; overflow:visible; text-align:left; }
  /* reclaim the space above: shorter visualiser + tighter now-playing */
  .album-overlay .player2 .viz { height:58px; }
  .album-overlay .player2 .np { margin:.15rem 0 .5rem; }
  .album-overlay .player2 .np .play { width:38px; height:38px; font-size:.95rem; }
  .album-overlay .player2 .np-title { font-size:.92rem; }
  /* compact rows so the full tracklist stays in one view */
  .album-overlay .tracklist2 li { padding:.28rem 0; gap:.7rem; }
  .album-overlay .tracklist2 li b { width:1.5rem; }
  .album-overlay .tracklist2 li .t { font-size:.9rem; }
  .player2 .viz { width:100%; height:120px; display:block; opacity:.9; }
  .player2 .np { display:flex; align-items:center; gap:.8rem; margin:.4rem 0 1.2rem; }
  .player2 .np .play { width:46px; height:46px; border-radius:50%; border:1px solid var(--accent);
    background:transparent; color:var(--accent); cursor:pointer; font-size:1.05rem; }
  .player2 .np .play:hover { background:oklch(from var(--accent) l c h / .12); }
  .player2 .np-title { font-family:var(--font-display); letter-spacing:.04em; }
  .tracklist2 { list-style:none; margin:0; padding:0; }
  .tracklist2 li { display:flex; gap:.9rem; align-items:baseline; padding:.55rem 0; cursor:pointer;
    border-bottom:1px solid oklch(from var(--line) l c h / .4); color:var(--text-dim);
    transition:color .2s, padding-left .2s; }
  .tracklist2 li:hover { color:var(--text); padding-left:.4rem; }
  .tracklist2 li[aria-current="true"] { color:var(--accent); }
  .tracklist2 li b { font-variant-numeric:tabular-nums; opacity:.55; width:1.7rem; color:inherit; font-weight:400; }
  .tracklist2 li .t { font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em; }

  /* PLAYER B — analogue VU needle + scrub + volume (21-hrs-on-the-moon ref) */
  .playerb { background:transparent; border:none; padding:0; }
  .playerb .vu { max-width:300px; margin:0 auto .6rem; }
  .playerb .vu-face { width:100%; height:auto; display:block;
    filter:drop-shadow(0 0 .5rem oklch(from var(--accent) l c h / calc(var(--glow-strength)*.5))); }
  .playerb .np { display:flex; align-items:center; justify-content:center; gap:.8rem; margin:0 0 1rem; }
  .playerb .np .play { width:46px;height:46px;border-radius:50%;border:1px solid var(--accent);
    background:transparent;color:var(--accent);cursor:pointer;font-size:1.05rem; }
  .playerb .np .play:hover { background:oklch(from var(--accent) l c h / .12); }
  .playerb .np-title { font-family:var(--font-display); letter-spacing:.04em; }
  .playerb .controls { display:flex; align-items:center; gap:.7rem; margin:0 0 1.3rem; }
  .playerb .time { font-variant-numeric:tabular-nums; font-size:.78rem; color:var(--text-faint); min-width:2.6rem; }
  .playerb .scrub-range { flex:1; }
  .playerb .vol-wrap { display:flex; align-items:center; gap:.35rem; color:var(--text-faint); font-size:.85rem; }
  .playerb .vol-range { width:72px; }
  .playerb input[type="range"] { -webkit-appearance:none; appearance:none; height:4px; border-radius:3px;
    background:var(--bg-2); cursor:pointer; }
  .playerb input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
    width:14px; height:14px; border-radius:50%; background:var(--accent); border:none; }
  .playerb input[type="range"]::-moz-range-thumb { width:14px; height:14px; border:none; border-radius:50%; background:var(--accent); }

  /* footer */
  .site-foot { border-top:1px solid var(--line); margin-top: var(--space-2xl);
    padding-block: var(--space-xl);
    position: relative; z-index: 35;
    background: transparent;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }  /* fully transparent; blur alone softens the fixed viewfinder behind it */
  .socials { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
  .socials a { display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
    color:var(--accent); border:1px solid oklch(from var(--accent) l c h / .35); border-radius:2em;
    padding:.4rem .85rem; font-size:.85rem; font-family:var(--font-display); letter-spacing:.04em; }
  .socials a:hover { color:var(--accent); border-color:var(--accent);
    box-shadow:0 0 .8rem oklch(from var(--accent) l c h / calc(var(--glow-strength) * .55)); }
  .socials svg { width:18px; height:18px; fill:currentColor; }
  .eyebrow { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.22em;
    font-size:.8rem; color:var(--accent-2); }

/* About page */
.hero-about .stage-center { display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-about h1 { font-family:var(--font-mega); font-size:clamp(3rem,11vw,8rem); line-height:.9; margin:0; letter-spacing:-.02em; }
.read { padding-block: var(--space-2xl); }
.prose { max-width:62ch; margin-inline:auto; }
.prose p { margin:0 0 1.1em; max-width:62ch; }

/* EXCEPTIONS */


.button[data-button-variant="primary"] {
--button-bg: #f3de8a;
--button-color: #342a21;
--button-border-color: currentColor;
--button-hover-bg: #f1d979;
--button-hover-color: #342a21;
}

.button[data-button-variant="positive"] {
--button-bg: #2d936c;
--button-border-color: #107350;
--button-hover-bg: #359d75;
}

.button[data-button-variant="negative"] {
--button-bg: #b33c48;
--button-border-color: #a62f3d;
--button-hover-bg: #c24a56;
}
            
.button[data-ghost-button] {
--button-bg: transparent;
--button-border-color: var(--color-dark);
--button-color: var(--color-light);
padding: var(--space-s);
}

.footer {
  color: var(--color-light);
}

/* TEST CSS */

.test-outline {
  outline: 1px dashed red; 
}
/* outline all elements */
/* * {
  outline: 1px solid red;
} */

/* For example... */
/* button {  
  color: white;
  background-color: #000;
  border-radius: 0.5rem;
  padding: 1em 2em;
} */


/* CHECK aria-pressed stuff again with Heydon */

/* [aria-pressed="true"] {
  box-shadow: inset 0 0 0 0.15rem var(--color-dark);
              inset 0.25em 0.25em 0 var(--color-light);
} */



/* Remove the default outline and 
add the outset shadow */  
[aria-pressed]:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--accent-two);
}

/* Make sure both the inset and 
outset shadow are present */  
[aria-pressed="true"]:focus {
  box-shadow: 0 0 0 0.25rem yellow,
              inset 0 0 0 0.15rem #000, 
              inset 0.25em 0.25em 0 #fff;  
}




/* ════════════════════════════════════════════════════════════════════════
   SITE UNIFIER LAYERS — atmosphere · soundwave · viewfinder framing
   Fixed, non-interactive, parametric. One markup block per page (after skip-link).
   ════════════════════════════════════════════════════════════════════════ */
.atmos, .soundwave, .viewfinder { position: fixed; inset: 0; pointer-events: none; }

/* 1 · ATMOSPHERE — warm top glow + edge vignette + film grain */
.atmos { z-index: -3; }
.atmos::before {                                   /* glow + vignette */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 55% at 50% -8%,
      oklch(from var(--accent) l c h / calc(var(--glow-strength) * .22)), transparent 70%),
    radial-gradient(140% 120% at 50% 40%,
      transparent 48%, oklch(from var(--vignette-ink) l c h / var(--vignette)) 100%);
}
.atmos::after {                                    /* film grain */
  content: ""; position: absolute; inset: 0; opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* 2 · SOUNDWAVE — canvas: smooth traveling wave, diagonal, peaks grow toward
   the near corner ("coming toward the camera"). Driven by unifiers.js. */
.soundwave { z-index: -2; display: block; width: 100%; height: 100%;
  transform-origin: 50% 58%;
  transform: translateX(-8%) perspective(1300px) rotateX(58deg); }  /* "lean back into floor" + nudged left to sit with the annotation (both % so they track together across sizes) */

/* 3 · VIEWFINDER — corner brackets + edge hairlines + microtext (the static anchor) */
.viewfinder { z-index: 30; color: var(--accent); }
.vf-corner { position: absolute; width: 26px; height: 26px; opacity: .5;
  border: 1.5px solid currentColor; }
.vf-corner.tl { top: 74px;  left: 20px;  border-right: 0; border-bottom: 0; }
.vf-corner.tr { top: 74px;  right: 20px; border-left: 0;  border-bottom: 0; }
.vf-corner.bl { bottom: 20px; left: 20px;  border-right: 0; border-top: 0; }
.vf-corner.br { bottom: 20px; right: 20px; border-left: 0;  border-top: 0; }
.vf-edge { position: absolute; top: 96px; bottom: 64px; width: 1px;
  background: linear-gradient(transparent, oklch(from var(--accent) l c h / .22), transparent); }
.vf-edge.left { left: 26px; } .vf-edge.right { right: 26px; }
.vf-tag, .vf-rec { position: absolute; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .22em; font-size: .62rem; color: var(--accent-2); opacity: .72; }
.vf-tag { left: 34px; bottom: 24px; }
.vf-rec { right: 34px; bottom: 24px; display: flex; align-items: center; gap: .45rem; }
.vf-wave-anno { position: absolute; left: max(1.25rem, 8%); top: 64%; max-width: 15rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em;
  font-size: .62rem; color: var(--accent); opacity: .6; text-shadow: 0 1px 4px oklch(from var(--bg) l c h / .85);
  display: flex; align-items: center; gap: .35rem; }
.vf-wave-anno i { font-style: normal; color: var(--accent); font-size: 1rem; line-height: 1; }
.vf-rec::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 .5rem var(--accent); animation: vf-blink 2.4s steps(1) infinite; }
@keyframes vf-blink { 50% { opacity: .2; } }

/* ── Global audio: floating mini-player + injected transport (scrub/time), all token-driven ── */
.mr-mini { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: .6rem; max-width: min(92vw, 30rem); width: max-content;
  padding: .45rem .7rem; border-radius: 999px; color: var(--text);
  background: oklch(from var(--bg) l c h / 0.62); backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid oklch(from var(--accent) l c h / 0.22); box-shadow: var(--shadow-medium); }
.mr-mini[hidden] { display: none; }
.mr-play { flex: none; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; font-size: .8rem; line-height: 1;
  border: 1px solid oklch(from var(--accent) l c h / .5); background: oklch(from var(--accent) l c h / .16); color: var(--accent); }
.mr-play:hover { background: oklch(from var(--accent) l c h / .28); }
.mr-mini .mr-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; color: var(--accent); white-space: nowrap; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.mr-t { font-size: .62rem; color: var(--text-dim); font-variant-numeric: tabular-nums; flex: none; }
.mr-scrub { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 999px; flex: 1 1 6rem; min-width: 4rem;
  background: oklch(from var(--accent) l c h / .25); cursor: pointer; }
.mr-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: none; }
.mr-scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: none; }
.mr-transport { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .2rem; }
.mr-transport .mr-scrub { flex: 1 1 auto; }

/* footer credit links (label + studio) — subtle, accent on hover */
.site-foot a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; }
.site-foot a:hover { color: var(--accent); }
.site-foot .u-faint a { text-decoration: none; }   /* credit links (Last Line Music · Own Your Pixels): accent, no underline */

/* blended photo background for a section — image vignettes into the page (compositing) */
.sect-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sect-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 45%; opacity: .55;
  -webkit-mask-image: radial-gradient(120% 95% at 42% 46%, #000 26%, transparent 72%);
          mask-image: radial-gradient(120% 95% at 42% 46%, #000 26%, transparent 72%); }
.sect-photo::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 42% 46%, transparent 42%, oklch(from var(--vignette-ink) l c h / .62) 100%),
    linear-gradient(to bottom, oklch(from var(--bg) l c h / .38),
      oklch(from var(--bg) l c h / .12) 42%, oklch(from var(--bg) l c h / .5)); }