/* ==========================================================================
   screen.css — CreationUnited Blog theme (built)
   Generated by the CSS builder (tools/build-css.py or build-css.js) from
   the source CSS in tools/src/css/. Do not edit by hand; re-run a builder.
   ========================================================================== */

/* ----- Ghost font settings (required by GScan) ---------------------- */
:root {
  --gh-font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --gh-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ----- ds/colors_and_type.css ------------------------------------------------ */
/* ==========================================================================
   CreationUnited Co. — colors_and_type.css
   THE design-system token sheet (v2 · "Rock-Reveal"). Single import for any
   deck, mock, prototype, or production-adjacent HTML built on the CU brand.

   Derived from the NewUI branch runtime (site/styles/tokens.css + components).
   Philosophy — HARD STRUCTURE, SOFT LIGHT:
     · Every edge is sharp. Radius is 0 on every surface (only true dots round).
     · All softness comes from light — bloom, gradient, ambient shadow.
     · The system is DARK-ONLY. There is no light theme. Tokens that only read
       on light surfaces (classic drop shadows) are replaced with dark-correct
       elevation built from surface-tint + top-highlight + ambient shadow.
     · MOLTEN (#FF4A17) is the brand's energy. Used as light, edge, and accent —
       never as the fill of a large surface.

   Three typefaces, each with one job:
     · Fraunces        — editorial display. Hero, section headlines, pull-quotes.
     · Inter           — UI, sub-heads, body, buttons, stats.
     · JetBrains Mono  — eyebrows, labels, meta, numerals, code. Tracked wide.
   ========================================================================== */

/* Self-hosted brand fonts (variable). url() resolves relative to THIS file,
   so any page importing colors_and_type.css gets them regardless of depth. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.woff2") format("woff2");
  font-weight: 300 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_opsz_wght.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 500; font-style: italic; font-display: swap;
}

:root {
  /* ======================================================================
     CANONICAL NAMED TOKENS — the rock-reveal palette.
     Reach for these first. The legacy --color-* names below alias them so
     older markup keeps working.
     ====================================================================== */

  /* ---- Structure (the dark substrate) --------------------------------- */
  --void:        #0E0E10;   /* page background */
  --void-deep:   #070708;   /* hero / scene background — the deepest black */
  --slate-2:     #131418;   /* lowest raised tone — break-from-fatigue band */
  --slate:       #1A1A1E;   /* default card / panel surface */
  --slate-3:     #212128;   /* highest raised tone — popover / menu / modal */
  --slate-line:  #2A2A30;   /* 1px hairline borders + dividers (solid) */
  --slate-line-2:#36363E;   /* stronger hairline for emphasis / focus rails */

  /* ---- Ink (text + marks) — primary text is BONE, never pure white ---- */
  --bone:        #EDEDEF;   /* primary text + headings */
  --bone-dim:    rgba(237, 237, 239, 0.72);  /* secondary body text */
  --ash:         #8A8A92;   /* tertiary text, captions, meta */
  --ash-dim:     #5C5C63;   /* disabled / faintest text */
  --ink:         #0E0E10;   /* text ON molten / ON light marks */

  /* ---- Molten (the one brand energy) ---------------------------------- */
  --molten:      #FF4A17;   /* accent — edges, lines, one word, CTAs */
  --molten-hot:  #FF6A3D;   /* hotter top of the emissive gradient / hover */
  --molten-deep: #D63A11;   /* pressed / shadow end */
  --molten-glow: linear-gradient(180deg, #FF6A3D, #FF4A17);
  --molten-wash: rgba(255, 74, 23, 0.10);  /* faint tint for hover washes */
  --molten-tint: rgba(255, 74, 23, 0.16);  /* chip / pill backgrounds */

  /* ---- Emissive spectrum — a curated secondary set ====================
     For category coding, data-viz, status, and rare dramatic accents.
     Treat these like molten: emit them as LIGHT (edges, glints, dots, small
     fills) — never paint a large surface with them. Molten always leads;
     these support. Each ships a solid + a soft glow tint. */
  --ion:     #38BDF8;  --ion-tint:     rgba(56, 189, 248, 0.16);   /* cyan   · Digital  */
  --flux:    #A78BFA;  --flux-tint:    rgba(167, 139, 250, 0.16);  /* violet · Research */
  --halo:    #F5B642;  --halo-tint:    rgba(245, 182, 66, 0.16);   /* amber  · highlight */
  --verdant: #3BCB7E;  --verdant-tint: rgba(59, 203, 126, 0.16);   /* green  · success  */
  --rose:    #F4607D;  --rose-tint:    rgba(244, 96, 125, 0.16);   /* rose   · Design   */
  /* Extension set — completes the wheel so molten→amber→lime→green→teal→cyan→
     indigo→violet→magenta→rose reads as one continuous emissive spectrum.
     Same lightness/chroma band as above; same rule — emit as light, never a
     large fill. Reach for these for richer category coding & data-viz series. */
  --lime:    #B8D94A;  --lime-tint:    rgba(184, 217, 74, 0.16);   /* lime    · growth / fresh   */
  --teal:    #2DD4BF;  --teal-tint:    rgba(45, 212, 191, 0.16);   /* teal    · stable / systems */
  --indigo:  #6E7BF2;  --indigo-tint:  rgba(110, 123, 242, 0.16);  /* indigo  · deep / focus     */
  --magenta: #E26FD0;  --magenta-tint: rgba(226, 111, 208, 0.16);  /* magenta · brand / signal   */
  --ember:   #FF8A4C;  --ember-tint:   rgba(255, 138, 76, 0.16);   /* ember   · warm sibling to molten */

  /* ---- Semantic state (forms / status only) --------------------------- */
  --state-success: #3BCB7E;
  --state-warning: #F5B642;
  --state-error:   #F4604D;
  --state-info:    #38BDF8;

  /* ======================================================================
     LEGACY ALIASES — keep older --color-* markup alive. Prefer named tokens.
     ====================================================================== */
  --color-bg-default:        var(--void);
  --color-bg-deep:           var(--void-deep);
  --color-bg-surface:        var(--slate);
  --color-bg-surface-2:      var(--slate-2);
  --color-bg-surface-raised: var(--slate-3);
  --color-bg-inverse:        var(--bone);

  --color-text-default: var(--bone);
  --color-text-muted:   var(--bone-dim);
  --color-text-subtle:  var(--ash);
  --color-text-inverse: var(--ink);
  --color-text-accent:  var(--molten);

  --color-accent-default: var(--molten);
  --color-accent-hover:   var(--molten-hot);
  --color-accent-muted:   var(--molten-tint);

  --color-border-default:  rgba(237, 237, 239, 0.08);
  --color-border-strong:   rgba(237, 237, 239, 0.16);
  --color-border-hairline: var(--slate-line);

  --color-state-success: var(--state-success);
  --color-state-warning: var(--state-warning);
  --color-state-error:   var(--state-error);
  --color-state-info:    var(--state-info);
  --color-focus-ring:    var(--molten);

  /* ======================================================================
     ELEVATION — dark-correct. On a near-black canvas a drop shadow is nearly
     invisible, so depth is built from THREE cues stacked: (1) a lighter
     surface tint, (2) a 1px top inner highlight (light catching the edge),
     (3) an ambient shadow for separation. Use the matched pairs below:
     set background to --surface-eN and box-shadow to --shadow-eN.
     ====================================================================== */
  --surface-e0: var(--void);      /* flat — page background, no card */
  --surface-e1: var(--slate-2);   /* resting card / list row */
  --surface-e2: var(--slate);     /* raised card / hovered tile */
  --surface-e3: var(--slate-3);   /* popover / dropdown / sticky bar */
  --surface-e4: #262630;          /* modal / dialog (highest) */

  --shadow-none: none;
  --shadow-e1: inset 0 1px 0 rgba(237,237,239,0.04),
               0 1px 2px rgba(0,0,0,0.40);
  --shadow-e2: inset 0 1px 0 rgba(237,237,239,0.05),
               0 6px 18px rgba(0,0,0,0.50);
  --shadow-e3: inset 0 1px 0 rgba(237,237,239,0.06),
               0 14px 38px rgba(0,0,0,0.58);
  --shadow-e4: inset 0 1px 0 rgba(237,237,239,0.07),
               0 28px 64px rgba(0,0,0,0.66);

  /* Bloom / glow — emissive emphasis for active, focus, and hero moments.
     Light leaving the element, not a shadow under it. */
  --glow-molten:      0 0 24px rgba(255, 74, 23, 0.35);
  --glow-molten-edge: 0 0 0 1px rgba(255,74,23,0.45), 0 0 28px rgba(255,74,23,0.32);
  --glow-soft:        0 0 48px rgba(255, 106, 61, 0.18);
  --glow-ion:         0 0 24px rgba(56, 189, 248, 0.32);
  --glow-flux:        0 0 24px rgba(167, 139, 250, 0.32);
  --glow-teal:        0 0 24px rgba(45, 212, 191, 0.32);
  --glow-indigo:      0 0 24px rgba(110, 123, 242, 0.32);
  --glow-magenta:     0 0 24px rgba(226, 111, 208, 0.32);
  --shadow-ring-focus: 0 0 0 3px rgba(255, 74, 23, 0.40);

  /* Legacy shadow aliases (map onto dark-correct elevation) ------------- */
  --shadow-sm: var(--shadow-e1);
  --shadow-md: var(--shadow-e2);
  --shadow-lg: var(--shadow-e3);
  --shadow-xl: var(--shadow-e4);

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", Times, "Source Serif Pro", serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* legacy aliases */
  --font-family-display: var(--font-display);
  --font-family-heading: var(--font-heading);
  --font-family-body:    var(--font-body);
  --font-family-mono:    var(--font-mono);

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-size-xs:      0.75rem;
  --font-size-sm:      0.875rem;
  --font-size-base:    1rem;
  --font-size-md:      1.125rem;
  --font-size-lg:      1.25rem;
  --font-size-xl:      1.5rem;
  --font-size-2xl:     2rem;
  --font-size-3xl:     2.5rem;
  --font-size-4xl:     3.25rem;
  --font-size-5xl:     4rem;
  --font-size-display: 5.5rem;

  --line-height-tight:  1.05;
  --line-height-snug:   1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.7;

  --letter-spacing-tight:   -0.02em;
  --letter-spacing-tighter: -0.04em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
  --letter-spacing-eyebrow: 0.2em;
  --letter-spacing-caps:    0.24em;

  /* ===== Spacing — 4px base ========================================== */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem;
  --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;
  --space-24:6rem; --space-32:8rem; --space-40:10rem; --space-48:12rem;

  /* ===== Radii — HARD STRUCTURE: 0 everywhere ========================
     The system is brutalist by design. Only genuinely circular marks (dots,
     avatars) use --radius-full. Do not soften corners. */
  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-pill: 0;
  --radius-full: 50%;

  /* ===== Motion ====================================================== */
  --motion-duration-instant: 80ms;
  --motion-duration-fast:    160ms;
  --motion-duration-base:    240ms;
  --motion-duration-slow:    400ms;
  --motion-duration-slower:  640ms;
  --motion-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --motion-easing-reveal:     cubic-bezier(0.16, 1, 0.3, 1);  /* word/mask reveals */

  /* ===== Layout ====================================================== */
  --container-max:       1360px;
  --container-gutter-sm: 1.25rem;
  --container-gutter-md: 2rem;
  --container-gutter-lg: 2.5rem;

  /* ===== Z-index — ONE layering scale so overlays never collide. Every
     stacking element pulls from here. The sticky header sits at 100 (matches
     the site runtime); anything that must cover it (modals, toasts) lives
     above. Toasts beat modals; tooltips beat everything. =============== */
  --z-base:     0;     /* default flow */
  --z-raised:   10;    /* raised cards, hover lifts, sticky table head */
  --z-header:   100;   /* sticky site header (runtime parity) */
  --z-drawer:   200;   /* slide-in sheets / mobile nav drawer */
  --z-backdrop: 1000;  /* scrim behind a modal */
  --z-modal:    1100;  /* dialog / modal surface */
  --z-toast:    1200;  /* transient notifications — above modals */
  --z-tooltip:  1300;  /* tooltips & popovers — always on top */
  --z-max:      9999;  /* escape hatch — use sparingly */

  /* ===== Breakpoints — the min-width gates the system is built on. CSS
     custom properties can't be evaluated inside @media, so these can't be
     referenced in a query directly; they are the canonical SOURCE values to
     hardcode (and the names to use when talking about them). =========== */
  --bp-sm:  640px;   /* large phone — 2-up grids begin */
  --bp-md:  768px;   /* tablet — footer columns, gutters step up */
  --bp-lg:  1024px;  /* laptop — desktop nav, full multi-column layouts */
  --bp-xl:  1280px;  /* desktop */
  --bp-2xl: 1536px;  /* wide desktop */

  /* ===== Semantic type roles =========================================
     Shorthand `font:` values. Use instead of stacking family/size/weight. */
  --text-display: var(--font-weight-regular)  var(--font-size-display) / var(--line-height-tight) var(--font-display);
  --text-hero:    var(--font-weight-bold)     clamp(3rem,9vw,8rem)     / 0.96 var(--font-heading);
  --text-h1:      var(--font-weight-regular)  var(--font-size-5xl)     / var(--line-height-tight) var(--font-display);
  --text-h2:      var(--font-weight-semibold) var(--font-size-4xl)     / var(--line-height-snug)  var(--font-heading);
  --text-h3:      var(--font-weight-semibold) var(--font-size-3xl)     / var(--line-height-snug)  var(--font-heading);
  --text-h4:      var(--font-weight-semibold) var(--font-size-2xl)     / var(--line-height-snug)  var(--font-heading);
  --text-h5:      var(--font-weight-semibold) var(--font-size-xl)      / var(--line-height-snug)  var(--font-heading);
  --text-h6:      var(--font-weight-semibold) var(--font-size-lg)      / var(--line-height-snug)  var(--font-heading);
  --text-body-lg: var(--font-weight-regular)  var(--font-size-md)      / var(--line-height-normal) var(--font-body);
  --text-body:    var(--font-weight-regular)  var(--font-size-base)    / var(--line-height-normal) var(--font-body);
  --text-small:   var(--font-weight-regular)  var(--font-size-sm)      / var(--line-height-normal) var(--font-body);
  --text-mono:    var(--font-weight-regular)  var(--font-size-sm)      / var(--line-height-normal) var(--font-mono);
  --text-stat:    var(--font-weight-medium)   clamp(2.5rem,5vw,4rem)   / 1 var(--font-mono);
}

/* ==========================================================================
   Element-level defaults — opt in with class="cu-themed" on <html> or <body>.
   ========================================================================== */
html.cu-themed,
.cu-themed {
  background-color: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 100%;
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings use :where() for the element selectors so the base rules carry
   near-zero specificity — any component class (.cu-footer__col-title,
   .cu-modal__title, .cu-article__title, …) overrides size/weight cleanly,
   the same way generic links are handled below. */
.cu-themed :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--bone);
  margin: 0;
}
.cu-themed :where(h1) { font-size: var(--font-size-5xl); }
.cu-themed :where(h2) { font-size: var(--font-size-4xl); }
.cu-themed :where(h3) { font-size: var(--font-size-3xl); }
.cu-themed :where(h4) { font-size: var(--font-size-2xl); }
.cu-themed :where(h5) { font-size: var(--font-size-xl); }
.cu-themed :where(h6) { font-size: var(--font-size-lg); }

.cu-themed p {
  color: var(--bone-dim);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* Generic link styling uses :where() so it carries near-zero specificity —
   any component class (.cu-btn, .cu-index__row, …) overrides it cleanly. */
.cu-themed :where(a) {
  color: var(--molten);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-themed :where(a:hover) { color: var(--molten-hot); }

.cu-themed ::selection { background-color: var(--molten); color: var(--ink); }

.cu-themed :focus-visible {
  outline: 2px solid var(--molten);
  outline-offset: 3px;
}

/* Editorial / display face — opt-in. Hero, manifesto, big quotes. */
.cu-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.015em;
}

/* Eyebrow — the system's signature label. Mono, uppercase, wide-tracked,
   with a short molten rule to its left. */
.cu-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--ash);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.cu-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--molten);
}

/* ==========================================================================
   CUSTOM SCROLLBAR — replaces the OS scrollbar across the themed system.
   Square (radius 0, on-brand), hairline track, ash thumb that warms to molten
   on hover. Applies to the page and every scroll container under .cu-themed.
   Use .cu-scroll--thin on compact inner panels (sidebars, menus).
   ========================================================================== */
html.cu-themed,
.cu-themed { scrollbar-width: thin; scrollbar-color: var(--slate-line-2) transparent; }

.cu-themed ::-webkit-scrollbar,
html.cu-themed::-webkit-scrollbar { width: 12px; height: 12px; }
.cu-themed ::-webkit-scrollbar-track,
html.cu-themed::-webkit-scrollbar-track { background: var(--void-deep); border-left: 1px solid var(--slate-line); }
.cu-themed ::-webkit-scrollbar-thumb,
html.cu-themed::-webkit-scrollbar-thumb {
  background: var(--slate-line-2);
  border: 3px solid var(--void-deep);   /* inset padding — keeps the thumb a slim bar */
  background-clip: padding-box;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-themed ::-webkit-scrollbar-thumb:hover,
html.cu-themed::-webkit-scrollbar-thumb:hover { background: var(--molten); background-clip: padding-box; }
.cu-themed ::-webkit-scrollbar-corner,
html.cu-themed::-webkit-scrollbar-corner { background: var(--void-deep); }

/* Thin variant for compact inner scroll areas */
.cu-scroll--thin { scrollbar-width: thin; }
.cu-scroll--thin::-webkit-scrollbar { width: 8px; height: 8px; }
.cu-scroll--thin::-webkit-scrollbar-thumb { border-width: 2px; }


/* ----- tokens.css ------------------------------------------------------------ */
/* ==========================================================================
   tokens.css — Runtime design tokens (rock-reveal system)
   Canonical tokens are the brief's named set (--void / --slate / --ash /
   --bone / --molten + the type stacks). The legacy --color-* / --font-family-*
   names are kept as ALIASES so interior pages keep working while the homepage
   moves onto the new system. See docs/redesign/ + ADR 0010.
   ========================================================================== */

:root {
  /* ===== Rock-reveal named tokens (canonical) ===========================
     Hard structure, soft light: every edge is sharp (radius 0); all softness
     comes from light/bloom/shadow. Molten is the ONLY saturated note. */
  --void: #0E0E10;        /* page background */
  --void-deep: #070708;   /* hero/scene background, deepest black */
  --slate: #1A1A1E;       /* raised surfaces, cards */
  --slate-2: #15161A;     /* in-between break-from-fatigue tone */
  --slate-line: #2A2A30;  /* 1px hairline borders / dividers */
  --ash: #8A8A92;         /* secondary text */
  --bone: #EDEDEF;        /* primary text — NEVER pure white */
  --molten: #FF4A17;      /* brand accent — ENERGY ONLY */
  --molten-hot: #FF6A3D;  /* hotter end of the emissive gradient */
  --molten-glow: linear-gradient(180deg, #FF6A3D, #FF4A17);

  /* ----- Color: background (aliases) ------------------------------------ */
  --color-bg-default: var(--void);
  --color-bg-surface: var(--slate);
  --color-bg-surface-2: var(--slate-2);
  --color-bg-surface-raised: #1C1D21;
  --color-bg-inverse: #FEFEFE;

  /* ----- Color: text — primary is --bone, not pure white ---------------- */
  --color-text-default: var(--bone);
  --color-text-muted: rgba(237, 237, 239, 0.72);
  --color-text-subtle: var(--ash);
  --color-text-inverse: #0E0E10;
  --color-text-accent: var(--molten);

  /* ----- Color: accent -------------------------------------------------- */
  --color-accent-default: var(--molten);
  --color-accent-hover: var(--molten-hot);
  --color-accent-muted: rgba(255, 74, 23, 0.16);

  /* ----- Color: border -------------------------------------------------- */
  --color-border-default: rgba(237, 237, 239, 0.08);
  --color-border-strong: rgba(237, 237, 239, 0.18);
  --color-border-hairline: var(--slate-line);

  /* ----- Color: state --------------------------------------------------- */
  --color-state-success: #3BCB7E;
  --color-state-warning: #F5B642;
  --color-state-error: #F4604D;
  --color-state-info: #5AA9FF;

  /* ----- Color: focus --------------------------------------------------- */
  --color-focus-ring: var(--molten);

  /* ----- Typography: family --------------------------------------------
     Two stacks, shared across the whole site (homepage + interior pages):
       --font-display  Fraunces — editorial display: hero, headings, pull-quotes.
       --font-heading  Inter — UI/section sub-heads, nav, captions.
       --font-body     Inter — body, labels, stats (tabular figures).
     The legacy --font-family-* names alias these. (Gued + Space Grotesk were
     dropped — the site is back on its original Fraunces + Inter pairing.) */
  --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --font-family-display: var(--font-display);  /* editorial display -> Fraunces */
  --font-family-heading: var(--font-heading);
  --font-family-body: var(--font-body);
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ----- Typography: weight --------------------------------------------- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ----- Typography: size ----------------------------------------------- */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.25rem;
  --font-size-5xl: 4rem;
  --font-size-display: 5.5rem;

  /* ----- Typography: line-height ---------------------------------------- */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;

  /* ----- Typography: letter-spacing ------------------------------------- */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* ----- Spacing (4 px base) -------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* ----- Radius — hard structure: 0 everywhere on the new system -------- */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-pill: 0;
  --radius-full: 50%;   /* reserved for genuinely circular marks (dots) */

  /* ----- Shadow --------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.48);
  --shadow-ring-focus: 0 0 0 3px rgba(255, 74, 23, 0.40);

  /* ----- Motion: duration ----------------------------------------------- */
  --motion-duration-instant: 80ms;
  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 400ms;
  --motion-duration-slower: 640ms;

  /* ----- Motion: easing ------------------------------------------------- */
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  /* ----- Layout --------------------------------------------------------- */
  --container-max: 1360px;
  --container-gutter-sm: 1.25rem;
  --container-gutter-md: 2rem;
  --container-gutter-lg: 2.5rem;
}

/* Breakpoints (for reference; can't be custom props in @media):
   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */


/* ----- reset.css ------------------------------------------------------------- */
/* ==========================================================================
   reset.css — Modern CSS reset
   Normalises browser defaults. Keep minimal; element-specific defaults
   belong in base.css.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: inherit;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  overflow-wrap: break-word;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ----- base.css -------------------------------------------------------------- */
/* ==========================================================================
   base.css — Element defaults
   Sets the typographic and color foundation for every page. Page-level styles
   layer on top via layout.css, utilities.css, and components/*.css.
   ========================================================================== */

html {
  background-color: var(--color-bg-default);
  color: var(--color-text-default);
  font-family: var(--font-family-body);
  font-size: 100%;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--font-size-base);
}

/* Surface utility ---------------------------------------------------------
   <section data-cu-surface="alt"> repaints the section in the secondary
   tone. <section data-cu-surface="raised"> raises it once more. Use
   sparingly — one alt section per page. */
[data-cu-surface="alt"] { background-color: var(--color-bg-surface); }
[data-cu-surface="raised"] { background-color: var(--color-bg-surface-raised); }

/* Headings ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text-default);
}

/* Display / editorial face — opt-in via class. Reach for this on hero,
   manifesto, about, pull-quotes. Avoid on dense UI. */
.cu-display {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

/* Body copy --------------------------------------------------------------- */
p {
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

/* Links ------------------------------------------------------------------- */
a {
  color: var(--color-text-accent);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

a:hover {
  color: var(--color-accent-hover);
}

/* Inline text ------------------------------------------------------------- */
strong, b { font-weight: var(--font-weight-semibold); }
em, i { font-style: italic; }
small { font-size: var(--font-size-sm); }
code, kbd, samp, pre {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

/* Selection --------------------------------------------------------------- */
::selection {
  background-color: var(--color-accent-default);
  color: var(--color-text-inverse);
}

/* Horizontal rule --------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--color-border-default);
}


/* ----- layout.css ------------------------------------------------------------ */
/* ==========================================================================
   layout.css — Container, grid, section primitives
   Reusable layout building blocks. Page-specific layouts compose these.
   ========================================================================== */

/* Container — clamps content width and applies responsive gutters --------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-sm);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--container-gutter-md); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--container-gutter-lg); }
}

/* Section — standard vertical rhythm between top-level page blocks -------- */
.section {
  padding-block: var(--space-16);
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-24); }
}

/* Stack — flow children in a column with consistent vertical spacing ------ */
.stack > * + * {
  margin-top: var(--space-4);
}

.stack--sm > * + * { margin-top: var(--space-2); }
.stack--lg > * + * { margin-top: var(--space-8); }
.stack--xl > * + * { margin-top: var(--space-16); }

/* Cluster — flow children inline, wrap, with consistent gap --------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Grid — basic responsive grid -------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }


/* ----- utilities.css --------------------------------------------------------- */
/* ==========================================================================
   utilities.css — Helper classes
   Single-purpose utilities. Keep the set small; promote a utility into
   layout.css or a component when it grows beyond one rule.
   ========================================================================== */

/* Visually hidden but available to screen readers ------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible on focus only --------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  transform: translateY(-150%);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
  z-index: 1000;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Text utilities ---------------------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-accent { color: var(--color-text-accent); }

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

/* Spacing utilities (limited set — most spacing belongs in layout) -------- */
.mt-0 { margin-top: 0; }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-auto { margin-bottom: auto; }

/* Hover-focus list highlight ----------------------------------------------
   On any container marked [data-cu-hover-list], hovering one direct child
   dims its siblings so the focused item stands out. Pointer-only (so it
   never sticks on touch), and reduced-motion-safe. Used on footer sitemap
   columns, the FAQ list, the standards list, and similar link/question sets. */
@media (hover: hover) and (pointer: fine) {
  [data-cu-hover-list] > * {
    transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
  }
  [data-cu-hover-list]:hover > * { opacity: 0.4; }
  [data-cu-hover-list] > *:hover,
  [data-cu-hover-list] > *:focus-within { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-cu-hover-list] > * { transition: none; }
}


/* ----- components/button.css ------------------------------------------------- */
/* ==========================================================================
   button.css
   Single button system used across the site. Three variants:
     .cu-btn--primary   solid orange, dark text   (action CTAs)
     .cu-btn--ghost     transparent, white text, white-fill on hover
     .cu-btn--outline   transparent, accent text + accent border (secondary)

   Every variant has an arrow-line that extends on hover for the "alive" feel.
   ========================================================================== */

.cu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  transition:
    background-color var(--motion-duration-base) var(--motion-easing-standard),
    color var(--motion-duration-base) var(--motion-easing-standard),
    border-color var(--motion-duration-base) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
  isolation: isolate;
}

.cu-btn:hover { transform: translateY(-1px); }
.cu-btn:focus-visible { outline: 2px solid var(--color-accent-default); outline-offset: 3px; }

/* Trailing line that extends on hover — a small "alive" detail ----------- */
.cu-btn__line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition:
    width var(--motion-duration-base) var(--motion-easing-standard),
    background var(--motion-duration-base) var(--motion-easing-standard);
  flex: none;
}
.cu-btn:hover .cu-btn__line { width: 32px; }

/* Primary: brand orange filled ------------------------------------------- */
.cu-btn--primary {
  background: var(--color-accent-default);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-default);
}
.cu-btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-hover);
}
.cu-btn--primary:active { transform: translateY(0); }

/* Ghost: transparent, fills white on hover ------------------------------- */
.cu-btn--ghost {
  background: transparent;
  color: var(--color-text-default);
  border-color: var(--color-border-strong);
}
.cu-btn--ghost:hover {
  background: var(--color-text-default);
  color: var(--color-text-inverse);
  border-color: var(--color-text-default);
}

/* Outline: brand-accent inline link / secondary CTA ---------------------- */
.cu-btn--outline {
  background: transparent;
  color: var(--color-accent-default);
  border-color: var(--color-accent-default);
}
.cu-btn--outline:hover {
  background: var(--color-accent-default);
  color: var(--color-text-inverse);
}

/* Block (full-width) modifier — used in mobile drawer, footer, etc. ------ */
.cu-btn--block {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* Compact modifier ------------------------------------------------------- */
.cu-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); }

@media (prefers-reduced-motion: reduce) {
  .cu-btn,
  .cu-btn__line { transition: none; }
  .cu-btn:hover { transform: none; }
}


/* ----- components/header.css ------------------------------------------------- */
/* ==========================================================================
   header.css
   Sticky, translucent, brutalist-edged header. Mega-menu on desktop,
   drawer on mobile.
   ========================================================================== */

.cu-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 14, 16, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--color-border-default);
}

.cu-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 72px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-sm);
}

@media (min-width: 768px) {
  .cu-header__inner { padding-inline: var(--container-gutter-md); }
}
@media (min-width: 1024px) {
  .cu-header__inner { padding-inline: var(--container-gutter-lg); }
}

/* Brand ------------------------------------------------------------------- */
.cu-header__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
/* Brand — the header now carries the logomark (LM) only; the full lockup
   lives in the footer. Class name kept for markup stability. */
.cu-header__wordmark {
  height: 28px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .cu-header__wordmark { height: 30px; }
}

/* Brand mark — a 28×28 square that hosts a Lottie animation when one is
   provided via data-cu-lottie-src. Until then the static CSS square below
   gives a recognisable brutalist mark with a subtle pulse so it doesn't
   feel inert. The Lottie player, when injected, sits inside the same box
   and overlays the static layer. */
.cu-brand-mark {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.cu-brand-mark::before,
.cu-brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-default);
  z-index: 1;
}
.cu-brand-mark::after {
  inset: 6px;
  background: var(--color-bg-default);
  z-index: 2;
  transition: inset var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-brand-mark:hover::after { inset: 9px; }

/* Lottie host overlays the static layers. Hidden by default; the lottie.js
   module unhides it once the animation is initialised. */
.cu-brand-mark__lottie {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
}
.cu-brand-mark[data-cu-lottie-ready="true"] .cu-brand-mark__lottie { display: block; }
.cu-brand-mark[data-cu-lottie-ready="true"]::before,
.cu-brand-mark[data-cu-lottie-ready="true"]::after { opacity: 0; }

/* Subtle "alive" pulse on the static square — barely perceptible, but the
   eye registers movement. Disabled when reduced-motion. */
@keyframes cu-brand-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 74, 23, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 74, 23, 0.06); }
}
.cu-brand-mark[data-pulse="true"] {
  animation: cu-brand-pulse 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cu-brand-mark[data-pulse="true"] { animation: none; }
}

.cu-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-8);
}
@media (min-width: 1024px) {
  .cu-header__nav { display: flex; }
}

.cu-header__nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  border-radius: 0; /* brutalist — sharp edges */
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-header__nav-link:hover { color: var(--color-text-default); }
.cu-header__nav-link[aria-current="page"] { color: var(--color-text-default); }
.cu-header__nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 1px;
  background: var(--color-accent-default);
}

.cu-header__spacer { flex: 1; }

/* Header actions — Sign in (quiet) + Subscribe (primary). Shown on desktop;
   on phones the menu toggle takes over and the drawer carries these CTAs. */
.cu-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.cu-header__signin {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-header__signin:hover { color: var(--color-text-default); }

/* Tablet + phone: nav collapses to the drawer below 1024px, so the inline
   actions move into the drawer too — the bar is just brand + menu toggle. */
@media (max-width: 1023px) {
  .cu-header__actions { display: none; }
}

/* Mobile toggle ----------------------------------------------------------- */
.cu-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-default);
}
@media (min-width: 1024px) { .cu-header__toggle { display: none; } }

.cu-header__toggle svg { width: 18px; height: 18px; }

/* Mobile drawer ----------------------------------------------------------- */
.cu-mobile-drawer {
  position: fixed;
  inset: 72px 0 0 0;
  z-index: 99;
  background: var(--color-bg-default);
  border-top: 1px solid var(--color-border-default);
  padding: var(--space-6);
  transform: translateY(-8px);
  opacity: 0;
  /* Closed: removed from the tab order and accessibility tree so keyboard and
     screen-reader users never land on invisible drawer links. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard),
              visibility 0s linear var(--motion-duration-fast);
}
.cu-mobile-drawer[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard),
              visibility 0s;
}
@media (min-width: 1024px) { .cu-mobile-drawer { display: none; } }

.cu-mobile-drawer__list { display: grid; gap: var(--space-1); }
.cu-mobile-drawer__link {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-default);
}
.cu-mobile-drawer__link:hover { color: var(--color-accent-default); }
.cu-mobile-drawer__cta { margin-top: var(--space-6); }
.cu-mobile-drawer__signin {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
}
.cu-mobile-drawer__signin:hover { color: var(--color-accent-default); }
.cu-mobile-drawer__signin + .cu-mobile-drawer__cta { margin-top: var(--space-3); }


/* ----- components/footer.css ------------------------------------------------- */
/* ==========================================================================
   footer.css
   Brutalist agency footer. Heavy structure, honest framing for compliance,
   offices on a card grid, social row, registrations on the bottom strip.
   ========================================================================== */

.cu-footer {
  margin-top: var(--space-32);
  background: var(--color-bg-default);
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
}

.cu-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-16) var(--container-gutter-sm) var(--space-8);
}
@media (min-width: 768px) {
  .cu-footer__inner { padding-inline: var(--container-gutter-md); }
}
@media (min-width: 1024px) {
  .cu-footer__inner { padding: var(--space-24) var(--container-gutter-lg) var(--space-10); }
}

/* Top row: studio block + columns ---------------------------------------- */
.cu-footer__top {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-16);
}
@media (min-width: 768px) {
  .cu-footer__top {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-10);
  }
}
@media (min-width: 1024px) {
  .cu-footer__top {
    grid-template-columns: 1.6fr repeat(4, 1fr);
  }
}

.cu-footer__studio {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.cu-footer__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
/* Footer brand — full logomark + wordmark lockup (LM+W). Class name kept
   for markup stability. Sized up so it reads as the anchor of the studio
   block rather than sitting small beside the tagline. */
.cu-footer__wordmark {
  height: 40px;
  width: auto;
  display: block;
}
@media (min-width: 1024px) {
  .cu-footer__wordmark { height: 44px; }
}

.cu-footer__tagline {
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: var(--font-size-2xl);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text-default);
}

.cu-footer__positioning {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 36ch;
  line-height: 1.5;
}

.cu-newsletter {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
}
.cu-newsletter__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-subtle);
}
.cu-newsletter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-default);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-newsletter__btn:hover {
  background: var(--color-accent-default);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-default);
}
.cu-newsletter__btn::after {
  content: "→";
  font-family: var(--font-family-mono);
  font-size: var(--font-size-md);
}

.cu-footer__col-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-5);
}

.cu-footer__col-list { display: grid; gap: var(--space-3); }

.cu-footer__col-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-footer__col-link:hover { color: var(--color-text-default); }
.cu-footer__col-link[data-external="true"]::after {
  content: "↗";
  font-family: var(--font-family-mono);
  color: var(--color-text-subtle);
}

/* Offices row ------------------------------------------------------------- */
.cu-footer__offices {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  padding-block: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}
@media (min-width: 640px) {
  .cu-footer__offices { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cu-footer__offices { grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-10); }
}

/* Sunrise scene — bounded within the offices block, anchored to the bottom
   and sitting behind the address cards. The scene's sky base is retuned to the
   page background in sunrise.json; here we mask the top/side edges so it reads
   as a glow rising from behind the locations rather than a boxed canvas. */
.cu-footer__offices-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
}
.cu-footer__offices-scene > div {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.cu-office { position: relative; z-index: 1; display: grid; gap: var(--space-3); }
.cu-office__label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-default);
}
.cu-office__address {
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--color-text-default);
  line-height: 1.6;
}
.cu-office__phone {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-office__phone:hover { color: var(--color-accent-default); }

/* Location type badge — distinguishes permanent offices from bookable
   meeting hubs within the single locations list. */
.cu-office__type {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 6px;
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border-default);
  vertical-align: middle;
}
.cu-office__type[data-type="hub"] {
  color: var(--color-accent-default);
  border-color: var(--color-accent-muted);
}

/* Social + compliance row ------------------------------------------------- */
.cu-footer__rows {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10);
}
@media (min-width: 1024px) {
  .cu-footer__rows {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-12);
  }
}

.cu-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cu-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard),
              background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-social__link:hover {
  color: var(--color-text-default);
  border-color: var(--color-accent-default);
  background-color: var(--color-accent-muted);
}
.cu-social__link svg { width: 18px; height: 18px; }

.cu-compliance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.cu-compliance__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border-default);
}
.cu-compliance__item[data-asterisk="true"]::after {
  content: "*";
  color: var(--color-accent-default);
  margin-left: 2px;
}

/* Bottom strip — registrations, copyright, legal -------------------------- */
.cu-footer__strip {
  border-top: 1px solid var(--color-border-default);
  padding-block: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .cu-footer__strip {
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--space-6) var(--space-8);
  }
}
.cu-footer__legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}
.cu-footer__legal-row a {
  color: var(--color-text-muted);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-footer__legal-row a:hover { color: var(--color-text-default); }
.cu-footer__regs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}
.cu-footer__copyright {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  letter-spacing: 0.04em;
}

/* Motion preference toggle -------------------------------------------------
   Sits as its own control at the end of the bottom strip (right-aligned on
   desktop). Reflects + persists the smooth-scroll/motion choice via scroll.js.
   Styled as a pill switch so it reads as an interactive control, not a link. */
.cu-motion-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
@media (min-width: 1024px) {
  .cu-motion-toggle { justify-self: end; }
}
.cu-motion-toggle:hover {
  color: var(--color-text-default);
  border-color: var(--color-text-muted);
}
.cu-motion-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.cu-motion-toggle__icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-default);
  box-shadow: 0 0 8px rgba(255, 74, 23, 0.7);
  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
              box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-motion-toggle[aria-pressed="true"] .cu-motion-toggle__icon {
  background: var(--color-text-subtle);
  box-shadow: none;
}
.cu-motion-toggle__label { color: inherit; }
.cu-motion-toggle__state { color: var(--color-accent-default); }
.cu-motion-toggle[aria-pressed="true"] .cu-motion-toggle__state { color: var(--color-text-subtle); }


/* ----- ds/cu-components.css -------------------------------------------------- */
/* ==========================================================================
   CreationUnited Co. — cu-components.css (v2 · Rock-Reveal)
   Canonical component styles. Import AFTER colors_and_type.css.
   Hard structure, soft light: radius 0, hairlines in --slate-line, molten
   used as light/edge. Every interactive element earns a small "alive" motion.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   One system. EVERY variant carries a trailing line that extends to the
   right on hover — the "read more →" gesture is now the house style, not a
   one-off. Primary "heats up" (molten → molten-hot + bloom) instead of
   fading to a washed peach.
   ========================================================================== */
.cu-btn {
  /* Finalized house behavior (promoted from preview/buttons.html):
     a human ease-in-out, NO lift on hover, and the primary variant extends
     to the RIGHT on hover via padding (no scale, left edge pinned). */
  --btn-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --pad-x: 1.4rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.95rem var(--pad-x);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;   /* block buttons (width:100%) must not overflow on pages without a global border-box reset */
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  transition:
    background-color var(--motion-duration-base) var(--btn-ease),
    color           var(--motion-duration-base) var(--btn-ease),
    border-color    var(--motion-duration-base) var(--btn-ease),
    box-shadow      var(--motion-duration-base) var(--btn-ease),
    padding         var(--motion-duration-base) var(--btn-ease);
  isolation: isolate;
}
.cu-btn:hover, .cu-btn:active { transform: none; }
.cu-btn:focus-visible { outline: 2px solid var(--molten); outline-offset: 3px; }

/* Trailing line — the shared gesture. 16px at rest, 34px on hover. */
.cu-btn__line {
  display: inline-block;
  width: 16px;
  height: 1px;
  flex: none;
  background: currentColor;
  transition: width var(--motion-duration-base) var(--btn-ease);
}
.cu-btn:hover .cu-btn__line,
.cu-btn:focus-visible .cu-btn__line { width: 34px; }

/* Primary — solid molten, ink text. Hover heats up + blooms. */
.cu-btn--primary {
  background: var(--molten);
  color: var(--ink);
  border-color: var(--molten);
}
.cu-btn--primary:hover {
  color: var(--bone);
  background: var(--molten-hot);
  border-color: var(--molten-hot);
  box-shadow: var(--glow-molten);
  padding-right: calc(var(--pad-x) + 12px);   /* extend right only — no lift, no scale */
}
.cu-btn--primary:active {
  background: var(--molten-deep);
  border-color: var(--molten-deep);
  box-shadow: none;
}

/* Ghost — quiet outline that warms to molten (stays dark; never inverts). */
.cu-btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--color-border-strong);
}
.cu-btn--ghost:hover {
  color: var(--bone);
  border-color: var(--molten);
  background: var(--molten-wash);
}
.cu-btn--ghost:hover .cu-btn__line { background: var(--molten); }

/* Outline — molten edge + text, fills with a wash + bloom on hover. */
.cu-btn--outline {
  background: transparent;
  color: var(--molten);
  border-color: var(--molten);
}
.cu-btn--outline:hover {
  background: var(--molten-wash);
  box-shadow: var(--glow-molten);
}

/* Quiet / link — text + molten trailing line. The original "read more →". */
.cu-btn--quiet {
  padding: 0.5rem 0;
  color: var(--bone);
  letter-spacing: 0.08em;
}
.cu-btn--quiet .cu-btn__line { background: var(--molten); }
.cu-btn--quiet:hover { color: var(--molten); transform: none; }

/* Modifiers */
.cu-btn--block { display: flex; width: 100%; justify-content: space-between; }
.cu-btn--lg { --pad-x: 1.75rem; padding: 1.15rem var(--pad-x); font-size: var(--font-size-base); }
.cu-btn--sm { --pad-x: 1rem; padding: 0.6rem var(--pad-x); font-size: var(--font-size-xs); }
/* Block buttons pin both edges; the right-extend gesture doesn't apply. */
.cu-btn--block:hover { padding-right: var(--pad-x); }

@media (prefers-reduced-motion: reduce) {
  .cu-btn, .cu-btn__line { transition: none; }
}

/* ==========================================================================
   CHIPS / TAGS  — square, hairline, mono. Optional emissive category color
   via data-accent="ion|flux|halo|verdant|rose|molten".
   ========================================================================== */
.cu-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--slate-line);
  background: transparent;
}
.cu-chip--solid { background: var(--molten-tint); color: var(--molten); border-color: transparent; }
.cu-chip[data-accent="ion"]     { color: var(--ion);     border-color: var(--ion-tint); }
.cu-chip[data-accent="flux"]    { color: var(--flux);    border-color: var(--flux-tint); }
.cu-chip[data-accent="halo"]    { color: var(--halo);    border-color: var(--halo-tint); }
.cu-chip[data-accent="verdant"] { color: var(--verdant); border-color: var(--verdant-tint); }
.cu-chip[data-accent="rose"]    { color: var(--rose);    border-color: var(--rose-tint); }
.cu-chip[data-accent="molten"]  { color: var(--molten);  border-color: var(--molten-tint); }

/* Status pill — pulsing dot + label */
.cu-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
}
.cu-status__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verdant);
  box-shadow: 0 0 0 0 rgba(59,203,126,0.5);
  animation: cu-pulse 1800ms var(--motion-easing-standard) infinite;
}
.cu-status[data-state="live"]  .cu-status__dot { background: var(--verdant); }
.cu-status[data-state="busy"]  .cu-status__dot { background: var(--halo); }
.cu-status[data-state="down"]  .cu-status__dot { background: var(--state-error); animation: none; }
@keyframes cu-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59,203,126,0.45); }
  70%,100% { box-shadow: 0 0 0 7px rgba(59,203,126,0); }
}
@media (prefers-reduced-motion: reduce){ .cu-status__dot{ animation:none; } }

/* ==========================================================================
   CARD — dark-correct elevation. Set the surface + matching shadow via the
   --elev modifier classes.
   ========================================================================== */
.cu-card {
  /* Positioned so a stretched ::after link (e.g. .post-card__link inside a
     topics-index card) is scoped to the card instead of escaping to the
     initial containing block and blanketing the page with that link. */
  position: relative;
  background: var(--surface-e1);
  border: 1px solid var(--slate-line);
  box-shadow: var(--shadow-e1);
  padding: var(--space-6);
  border-radius: 0;
}
.cu-card--e2 { background: var(--surface-e2); box-shadow: var(--shadow-e2); }
.cu-card--e3 { background: var(--surface-e3); box-shadow: var(--shadow-e3); }
.cu-card--e4 { background: var(--surface-e4); box-shadow: var(--shadow-e4); }
/* Active / emphasis — molten edge + bloom */
.cu-card--hot {
  border-color: rgba(255,74,23,0.5);
  box-shadow: var(--shadow-e2), var(--glow-soft);
}

/* ==========================================================================
   BRACKET FRAME — technical corner-ticks. Wrap content that should read as
   "instrument panel" (spec plates, hero callouts). Pure decoration.
   ========================================================================== */
.cu-bracket { position: relative; padding: var(--space-6); }
.cu-bracket::before, .cu-bracket::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.cu-bracket::before { top: 0; left: 0; border-top: 1px solid var(--molten); border-left: 1px solid var(--molten); }
.cu-bracket::after  { bottom: 0; right: 0; border-bottom: 1px solid var(--molten); border-right: 1px solid var(--molten); }

/* ==========================================================================
   INDEX ROW — numbered list with molten wash sweep + arrow on hover.
   Generalised from the site's pillar-link / service-row.
   ========================================================================== */
.cu-index { border-top: 1px solid var(--slate-line); }
.cu-index__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 var(--space-6);
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--slate-line);
  text-decoration: none;
  color: var(--bone);
  isolation: isolate;
  transition: padding-left var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-index__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--molten-wash), transparent 60%);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-duration-slow) var(--motion-easing-standard);
}
.cu-index__row:hover { padding-left: calc(var(--space-4) + 14px); }
.cu-index__row:hover::before { transform: scaleX(1); }
.cu-index__num {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.16em; color: var(--ash);
  transition: color var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-index__row:hover .cu-index__num { color: var(--molten); }
.cu-index__name {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.015em;
}
.cu-index__arrow { color: var(--molten); opacity: 0; transform: translateX(-10px);
  transition: opacity var(--motion-duration-base) var(--motion-easing-standard),
              transform var(--motion-duration-base) var(--motion-easing-standard); }
.cu-index__row:hover .cu-index__arrow { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   STAT — mono numeral + molten unit + mono label.
   ========================================================================== */
.cu-stat__value { font: var(--text-stat); color: var(--bone); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cu-stat__value sup { color: var(--molten); font-size: 0.5em; vertical-align: top; margin-left: 2px; }
.cu-stat__label {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
  margin-top: var(--space-3); max-width: 22ch;
}

/* ==========================================================================
   SPEC PLATE — instrument readout. Mono key/value rows on a raised surface.
   A new "technical" element that fits the rock/meteor language.
   ========================================================================== */
.cu-spec {
  background: var(--surface-e1); border: 1px solid var(--slate-line);
  font-family: var(--font-mono); font-size: var(--font-size-xs);
}
.cu-spec__row {
  display: flex; justify-content: space-between; gap: var(--space-6);
  padding: 0.7rem var(--space-4); border-bottom: 1px solid var(--slate-line);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cu-spec__row:last-child { border-bottom: 0; }
.cu-spec__row dt { color: var(--ash); }
.cu-spec__row dd { color: var(--bone); margin: 0; }
.cu-spec__row dd b { color: var(--molten); font-weight: 500; }

/* ==========================================================================
   QUOTE — Fraunces italic with a molten opening glyph.
   ========================================================================== */
.cu-quote {
  position: relative; border: 1px solid var(--slate-line);
  padding: var(--space-6);
}
.cu-quote__mark {
  display: block;
  font-family: var(--font-display); font-style: italic;
  font-size: 3.75rem; line-height: 0.8; color: var(--molten);
  margin-bottom: var(--space-1);
}
.cu-quote__body {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--font-size-lg); line-height: 1.35; color: var(--bone);
  margin: var(--space-3) 0 0;
}
.cu-quote__by {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
  margin-top: var(--space-5);
}

/* ==========================================================================
   FORM FIELDS — square, hairline, molten focus.
   ========================================================================== */
.cu-field { display: grid; gap: var(--space-2); }
.cu-field__label {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
}
.cu-input, .cu-textarea, .cu-select {
  width: 100%; padding: 0.85rem 1rem;
  background: var(--slate-2); border: 1px solid var(--slate-line);
  color: var(--bone); font-family: var(--font-body); font-size: var(--font-size-base);
  border-radius: 0; transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
                                box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-input::placeholder, .cu-textarea::placeholder { color: var(--ash-dim); }
.cu-input[data-invalid="true"], .cu-textarea[data-invalid="true"] { border-color: var(--state-error); }
.cu-field__error {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--state-error);
}
/* ==========================================================================
   FORM CONTROLS — custom checkbox, radio, switch, segmented, select. All
   square (radius 0), hairline, molten when active. None rely on native OS
   chrome. Pair with .cu-field / .cu-field__label above.
   ========================================================================== */

/* Focus ring — tight, never bleeds into neighbours (no large outer glow). */
.cu-input:focus, .cu-textarea:focus, .cu-cselect__btn:focus-visible,
.cu-search__input:focus {
  outline: none; border-color: var(--molten);
  box-shadow: inset 0 0 0 1px var(--molten);
}

/* Search field — leading icon inside a hairline frame */
.cu-search { position: relative; display: flex; align-items: center; }
.cu-search__icon { position: absolute; left: 0.9rem; color: var(--ash); display: inline-flex; pointer-events: none; }
.cu-search__input {
  width: 100%; padding: 0.85rem 1rem 0.85rem 2.4rem;
  background: var(--slate-2); border: 1px solid var(--slate-line); color: var(--bone);
  font-family: var(--font-body); font-size: var(--font-size-base); border-radius: 0;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-search__input::placeholder { color: var(--ash-dim); }

/* Custom checkbox */
.cu-check { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; font-size: var(--font-size-sm); color: var(--bone-dim); user-select: none; }
.cu-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cu-check__box {
  width: 18px; height: 18px; flex: none; border: 1px solid var(--slate-line-2);
  background: var(--slate-2); display: grid; place-items: center;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-check__box svg { width: 12px; height: 12px; stroke: var(--ink); stroke-width: 2.4; fill: none; opacity: 0; transform: scale(0.6); transition: opacity 120ms, transform 120ms var(--motion-easing-emphasized); }
.cu-check input:checked + .cu-check__box { background: var(--molten); border-color: var(--molten); }
.cu-check input:checked + .cu-check__box svg { opacity: 1; transform: scale(1); }
.cu-check input:focus-visible + .cu-check__box { box-shadow: var(--shadow-ring-focus); }

/* Custom radio */
.cu-radio { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; font-size: var(--font-size-sm); color: var(--bone-dim); user-select: none; }
.cu-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.cu-radio__dot {
  width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid var(--slate-line-2);
  background: var(--slate-2); display: grid; place-items: center;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-radio__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--molten); transform: scale(0); transition: transform 140ms var(--motion-easing-emphasized); }
.cu-radio input:checked + .cu-radio__dot { border-color: var(--molten); }
.cu-radio input:checked + .cu-radio__dot::after { transform: scale(1); }
.cu-radio input:focus-visible + .cu-radio__dot { box-shadow: var(--shadow-ring-focus); }

/* Switch — square track + sliding square knob (radius 0, on-brand) */
.cu-switch { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; font-size: var(--font-size-sm); color: var(--bone-dim); user-select: none; }
.cu-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cu-switch__track {
  width: 42px; height: 22px; flex: none; background: var(--slate-3);
  border: 1px solid var(--slate-line-2); position: relative;
  transition: background var(--motion-duration-base) var(--motion-easing-standard),
              border-color var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--ash); transition: transform var(--motion-duration-base) var(--motion-easing-emphasized), background var(--motion-duration-base);
}
.cu-switch input:checked + .cu-switch__track { background: var(--molten-tint); border-color: var(--molten); }
.cu-switch input:checked + .cu-switch__track::after { transform: translateX(20px); background: var(--molten); }
.cu-switch input:focus-visible + .cu-switch__track { box-shadow: var(--shadow-ring-focus); }

/* Segmented control */
.cu-seg { display: inline-flex; border: 1px solid var(--slate-line); }
.cu-seg__btn {
  appearance: none; background: transparent; border: 0; border-left: 1px solid var(--slate-line);
  padding: 0.6rem 1rem; font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard), background var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-seg__btn:first-child { border-left: 0; }
.cu-seg__btn:hover { color: var(--bone); }
.cu-seg__btn[aria-selected="true"] { background: var(--molten-wash); color: var(--molten); box-shadow: inset 0 2px 0 var(--molten); }

/* Custom select — replaces the native dropdown entirely */
.cu-cselect { position: relative; }
.cu-cselect__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; background: var(--slate-2); border: 1px solid var(--slate-line);
  color: var(--bone); font-family: var(--font-body); font-size: var(--font-size-base);
  text-align: left; cursor: pointer; border-radius: 0;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-cselect__chev { flex: none; color: var(--ash); transition: transform var(--motion-duration-base) var(--motion-easing-standard), color var(--motion-duration-base); }
.cu-cselect[data-open="true"] .cu-cselect__btn { border-color: var(--molten); }
.cu-cselect[data-open="true"] .cu-cselect__chev { transform: rotate(180deg); color: var(--molten); }
.cu-cselect__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  margin: 0; padding: 0; list-style: none;
  background: var(--surface-e3); border: 1px solid var(--slate-line); box-shadow: var(--shadow-e3);
  max-height: 240px; overflow: auto; display: none;
}
.cu-cselect[data-open="true"] .cu-cselect__menu { display: block; }
.cu-cselect__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1rem; font-size: var(--font-size-sm); color: var(--bone-dim); cursor: pointer;
  border-bottom: 1px solid var(--slate-line);
}
.cu-cselect__opt:last-child { border-bottom: 0; }
.cu-cselect__opt:hover { background: var(--molten-wash); color: var(--bone); }
.cu-cselect__opt[aria-selected="true"] { color: var(--molten); }
.cu-cselect__opt[aria-selected="true"]::after { content: "✓"; color: var(--molten); }

/* ==========================================================================
   DIVIDERS — hairline + molten "seam" with a centered node.
   ========================================================================== */
.cu-rule { height: 1px; background: var(--slate-line); border: 0; }
.cu-seam-rule {
  height: 1px; border: 0;
  background: linear-gradient(to right, transparent, var(--molten), transparent);
  opacity: 0.7;
}

/* ==========================================================================
   KINETIC TICKER — mono marquee strip. Decorative motion band.
   ========================================================================== */
.cu-ticker { overflow: hidden; border-block: 1px solid var(--slate-line); padding-block: var(--space-3); }
.cu-ticker__track {
  display: inline-flex; gap: var(--space-8); white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--font-size-sm);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
  animation: cu-ticker 30s linear infinite;
}
.cu-ticker__track b { color: var(--molten); font-weight: 500; }
@keyframes cu-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .cu-ticker__track{ animation:none; } }

/* ==========================================================================
   PROGRESS RAIL — hairline track, molten fill with bloom (the "acts" rail).
   ========================================================================== */
.cu-rail { position: relative; height: 1px; background: var(--slate-line); }
.cu-rail__fill { position: absolute; inset: 0 auto 0 0; background: var(--molten); box-shadow: 0 0 10px rgba(255,74,23,0.6); }

/* ==========================================================================
   DISABLED STATES — one consistent treatment across buttons, inputs, and
   controls. Disabled means: drained color (ash-dim), flattened surface, no
   molten energy, no hover/lift/extend, no glow. Cursor not-allowed. The
   trailing line on buttons goes inert too. Applies to [disabled],
   [aria-disabled="true"], and the .is-disabled hook.
   ========================================================================== */
.cu-btn:disabled,
.cu-btn[aria-disabled="true"],
.cu-btn.is-disabled {
  cursor: not-allowed;
  background: var(--slate-2);
  color: var(--ash-dim);
  border-color: var(--slate-line);
  box-shadow: none;
  pointer-events: none;   /* kill hover/extend/heat-up entirely */
}
.cu-btn:disabled .cu-btn__line,
.cu-btn[aria-disabled="true"] .cu-btn__line,
.cu-btn.is-disabled .cu-btn__line { background: var(--ash-dim); }
/* Ghost / outline disabled — keep their frame, just drain it to a hairline. */
.cu-btn--ghost:disabled, .cu-btn--ghost[aria-disabled="true"], .cu-btn--ghost.is-disabled,
.cu-btn--outline:disabled, .cu-btn--outline[aria-disabled="true"], .cu-btn--outline.is-disabled {
  background: transparent;
  color: var(--ash-dim);
  border-color: var(--slate-line);
}
/* Quiet / link disabled — borderless by design: no box, just drained text +
   inert trailing line. Must override the shared disabled rule's slate border. */
.cu-btn--quiet:disabled, .cu-btn--quiet[aria-disabled="true"], .cu-btn--quiet.is-disabled {
  background: transparent;
  color: var(--ash-dim);
  border-color: transparent;
}

/* Inputs / textarea / select trigger */
.cu-input:disabled, .cu-textarea:disabled,
.cu-input[aria-disabled="true"], .cu-cselect__btn[aria-disabled="true"],
.cu-cselect.is-disabled .cu-cselect__btn {
  cursor: not-allowed;
  background: var(--slate-2);
  color: var(--ash-dim);
  border-color: var(--slate-line);
  box-shadow: none;
}
.cu-input:disabled::placeholder,
.cu-textarea:disabled::placeholder { color: var(--ash-dim); }

/* Toggleable controls — checkbox, radio, switch, segmented */
.cu-check input:disabled ~ *, .cu-check.is-disabled,
.cu-radio input:disabled ~ *, .cu-radio.is-disabled,
.cu-switch input:disabled ~ *, .cu-switch.is-disabled {
  color: var(--ash-dim);
}
.cu-check input:disabled + .cu-check__box,
.cu-radio input:disabled + .cu-radio__dot,
.cu-switch input:disabled + .cu-switch__track {
  border-color: var(--slate-line);
  background: var(--slate-2);
  cursor: not-allowed;
}
.cu-check.is-disabled, .cu-radio.is-disabled, .cu-switch.is-disabled { cursor: not-allowed; }
.cu-seg__btn:disabled, .cu-seg__btn[aria-disabled="true"] {
  color: var(--ash-dim);
  cursor: not-allowed;
  box-shadow: none;
}

/* ==========================================================================
   ALERT — inline banner. Consumes the semantic palette. House pattern: an
   inset top accent line (echoing the segmented control), a leading square
   node in the semantic color, a faint tint, and a hairline frame. Variants
   via data-tone="info|success|warning|error" (default = molten/neutral).
   ========================================================================== */
.cu-alert {
  --tone: var(--molten);
  --tone-tint: var(--molten-wash);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) var(--space-5);
  background: var(--surface-e1);
  border: 1px solid var(--slate-line);
  box-shadow: inset 0 2px 0 var(--tone);   /* signature top accent */
}
.cu-alert::after { content: ""; position: absolute; inset: 0; background: var(--tone-tint); pointer-events: none; z-index: 0; }
.cu-alert > * { position: relative; z-index: 1; }
.cu-alert[data-tone="info"]    { --tone: var(--state-info);    --tone-tint: var(--ion-tint); }
.cu-alert[data-tone="success"] { --tone: var(--state-success); --tone-tint: var(--verdant-tint); }
.cu-alert[data-tone="warning"] { --tone: var(--state-warning); --tone-tint: var(--halo-tint); }
.cu-alert[data-tone="error"]   { --tone: var(--state-error);   --tone-tint: var(--rose-tint); }
.cu-alert__icon { width: 20px; height: 20px; flex: none; color: var(--tone); display: inline-flex; margin-top: 1px; }
.cu-alert__icon svg { width: 100%; height: 100%; }
.cu-alert__body { display: grid; gap: var(--space-1); min-width: 0; }
.cu-alert__title {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone);
}
.cu-alert__text { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); }
.cu-alert__text a { color: var(--tone); text-decoration: underline; text-underline-offset: 2px; }
.cu-alert__close {
  flex: none; appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--ash); width: 22px; height: 22px; display: inline-grid; place-items: center;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-alert__close:hover { color: var(--bone); }

/* --- Alert variants (promoted from preview/alerts.html, the finalized set) ---
   The base .cu-alert is the inline banner (baseline). These two are the
   high-signal members of the same tone family. Tone vars come from the
   shared data-tone rules above. */

/* SPOTLIGHT BLOOM — the studio default for a single high-signal moment.
   Emissive circular node + a soft tone bloom over the deepest black, with a
   Fraunces display headline. Show one at a time; don't stack. */
.cu-alert--spotlight {
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--void-deep); border: 1px solid var(--slate-line);
  box-shadow: none; overflow: hidden;
}
.cu-alert--spotlight::before {
  content: ""; position: absolute; left: -70px; top: 50%;
  width: 300px; height: 300px; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, var(--tone), transparent 68%);
  opacity: 0.22; filter: blur(14px); pointer-events: none; z-index: 0;
}
.cu-alert--spotlight::after { display: none; }     /* drop the flat banner tint */
.cu-alert__node {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: var(--tone); background: rgba(255,255,255,0.02);
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--tone) 45%, transparent),
              inset 0 0 18px color-mix(in srgb, var(--tone) 14%, transparent);
}
.cu-alert__node svg { width: 24px; height: 24px; }
.cu-alert--spotlight .cu-alert__title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--font-size-2xl);
  line-height: 1.1; letter-spacing: -0.015em; text-transform: none; color: var(--bone);
}
.cu-alert--spotlight .cu-alert__title em { font-style: italic; color: var(--tone); }
.cu-alert--spotlight .cu-alert__text { max-width: 52ch; }

/* TERMINAL LOG — process & system feedback. Bracketed status tag, timestamp
   gutter, mono line, blinking cursor. Safe to stack many. */
.cu-alert--terminal {
  grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: baseline;
  padding: var(--space-4) var(--space-5);
  background: var(--void-deep); border: 1px solid var(--slate-line);
  box-shadow: inset 2px 0 0 var(--tone);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
}
.cu-alert--terminal::after { display: none; }
.cu-alert__gutter { display: flex; gap: 14px; white-space: nowrap; flex: none; font-family: var(--font-mono); font-size: 13px; }
.cu-alert__time { color: var(--ash-dim); }
.cu-alert__tag  { color: var(--tone); font-weight: 500; }
.cu-alert--terminal .cu-alert__msg { color: var(--bone-dim); font-family: var(--font-mono); font-size: 13px; line-height: 1.55; min-width: 0; }
.cu-alert--terminal .cu-alert__msg b { color: var(--bone); font-weight: 500; }
.cu-alert--terminal .cu-alert__msg a { color: var(--tone); text-decoration: underline; text-underline-offset: 2px; }
.cu-alert__cursor { display: inline-block; width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -2px; background: var(--tone); animation: cu-blink 1.05s steps(1) infinite; }
@media (prefers-reduced-motion: reduce){ .cu-alert__cursor { animation: none; } }

/* ==========================================================================
   TOAST — transient notification. Same family as alert but ELEVATED
   (surface-e3 + shadow). Stack in a fixed region; slide + fade in. Drives
   the same data-tone variants. Position the region with .cu-toast-region.
   ========================================================================== */
.cu-toast-region {
  position: fixed; z-index: var(--z-toast);
  bottom: var(--space-6); right: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  width: min(380px, calc(100vw - 2 * var(--space-6)));
  pointer-events: none;
}
.cu-toast {
  --tone: var(--molten);
  pointer-events: auto;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: baseline;
  padding: var(--space-3) var(--space-4);
  background: var(--void-deep); border: 1px solid var(--slate-line);
  box-shadow: inset 2px 0 0 var(--tone), var(--shadow-e3);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5;
  animation: cu-toast-in var(--motion-duration-base) var(--motion-easing-emphasized);
}
.cu-toast[data-tone="info"]    { --tone: var(--state-info); }
.cu-toast[data-tone="success"] { --tone: var(--state-success); }
.cu-toast[data-tone="warning"] { --tone: var(--state-warning); }
.cu-toast[data-tone="error"]   { --tone: var(--state-error); }
.cu-toast.is-leaving { animation: cu-toast-out var(--motion-duration-base) var(--motion-easing-accelerate) forwards; }
/* Terminal-log layout — timestamp + bracketed status gutter, mono message,
   blinking cursor. The studio's tooling voice. */
.cu-toast__gutter { display: flex; gap: 10px; white-space: nowrap; flex: none; align-self: baseline; }
.cu-toast__time { color: var(--ash-dim); }
.cu-toast__tag  { color: var(--tone); font-weight: 500; }
.cu-toast__msg { color: var(--bone-dim); line-height: 1.5; min-width: 0; }
.cu-toast__msg b { color: var(--bone); font-weight: 500; }
.cu-toast__msg a { color: var(--tone); text-decoration: underline; text-underline-offset: 2px; }
.cu-toast__cursor { display: inline-block; width: 7px; height: 1.02em; margin-left: 2px; vertical-align: -2px; background: var(--tone); animation: cu-blink 1.05s steps(1) infinite; }
/* Legacy icon slot still styled for older markup, but terminal is the default. */
.cu-toast__icon { width: 18px; height: 18px; flex: none; color: var(--tone); display: inline-flex; align-self: center; }
.cu-toast__icon svg { width: 100%; height: 100%; }
.cu-toast__close { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--ash); width: 20px; height: 20px; display: inline-grid; place-items: center; align-self: center; }
.cu-toast__close:hover { color: var(--bone); }
@keyframes cu-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cu-toast-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes cu-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .cu-toast{ animation: none; } .cu-toast__cursor { animation: none; } }

/* ==========================================================================
   MODAL / DIALOG — scrim + centered dialog on the highest surface. Uses the
   z-index scale. Toggle with [data-open]. Bracket corners optional.
   ========================================================================== */
.cu-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.cu-modal[data-open="true"] { display: grid; place-items: center; padding: var(--space-6); overflow-y: auto; }
@media (max-width: 600px) { .cu-modal[data-open="true"] { padding: var(--space-3); } }
.cu-modal__scrim {
  position: absolute; inset: 0; z-index: 0;   /* scoped within .cu-modal — must sit BELOW the dialog (z:1), not at --z-backdrop */
  background: rgba(7,7,8,0.84);
  animation: cu-fade-in var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-modal__dialog {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: 100%;
  margin: 0; overflow: auto;
  background: var(--surface-e4); border: 1px solid var(--slate-line-2);
  box-shadow: var(--shadow-e4);
  animation: cu-modal-in var(--motion-duration-base) var(--motion-easing-emphasized);
}
.cu-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--slate-line);
}
.cu-modal__eyebrow {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--molten);
  display: block; margin-bottom: var(--space-2);
}
.cu-modal__title { font: var(--text-h4); color: var(--bone); }
.cu-modal__close { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--ash); width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none; transition: color var(--motion-duration-fast); }
.cu-modal__close:hover { color: var(--molten); }
.cu-modal__body { padding: var(--space-6); color: var(--bone-dim); font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.cu-modal__footer { display: flex; gap: var(--space-3); justify-content: flex-end; padding: var(--space-4) var(--space-6) var(--space-6); }
@keyframes cu-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cu-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){ .cu-modal__scrim, .cu-modal__dialog { animation: none; } }

/* ==========================================================================
   DRAWER / SHEET — slides in from an edge. Default: right. Mobile nav lives
   here too. Toggle with [data-open]; side via data-side="right|left".
   ========================================================================== */
.cu-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.cu-drawer[data-open="true"] { display: block; }
.cu-drawer__scrim { position: absolute; inset: 0; z-index: 0; background: rgba(7,7,8,0.78); animation: cu-fade-in var(--motion-duration-base) var(--motion-easing-standard); }
.cu-drawer__panel {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(420px, 88vw); max-width: 100%; background: var(--surface-e3);
  border-left: 1px solid var(--slate-line-2); box-shadow: var(--shadow-e4);
  display: flex; flex-direction: column;
  animation: cu-drawer-in-right var(--motion-duration-base) var(--motion-easing-decelerate);
}
.cu-drawer[data-side="left"] .cu-drawer__panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--slate-line-2); animation-name: cu-drawer-in-left; }
.cu-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--slate-line); }
.cu-drawer__title { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--ash); }
.cu-drawer__close { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--ash); width: 28px; height: 28px; display: inline-grid; place-items: center; transition: color var(--motion-duration-fast); }
.cu-drawer__close:hover { color: var(--molten); }
.cu-drawer__body { padding: var(--space-6); overflow: auto; flex: 1; }
@keyframes cu-drawer-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes cu-drawer-in-left  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce){ .cu-drawer__panel, .cu-drawer__scrim { animation: none; } }

/* ==========================================================================
   TOOLTIP / POPOVER — CSS-only. Wrap a trigger in .cu-tip and add a
   .cu-tip__bubble. Shows on hover/focus. data-place="top|bottom|left|right".
   ========================================================================== */
.cu-tip { position: relative; display: inline-flex; }
.cu-tip__bubble {
  position: absolute; z-index: var(--z-tooltip);
  left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
  min-width: max-content; max-width: 240px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-e3); border: 1px solid var(--slate-line-2); box-shadow: var(--shadow-e3);
  font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.04em;
  color: var(--bone); line-height: 1.4; text-transform: none;
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-tip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--slate-line-2);
}
.cu-tip:hover .cu-tip__bubble, .cu-tip:focus-within .cu-tip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
.cu-tip[data-place="bottom"] .cu-tip__bubble { bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(-4px); }
.cu-tip[data-place="bottom"] .cu-tip__bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--slate-line-2); }
.cu-tip[data-place="bottom"]:hover .cu-tip__bubble, .cu-tip[data-place="bottom"]:focus-within .cu-tip__bubble { transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   LOADING — spinner (rotating molten square edge, radius 0 stays on-brand),
   indeterminate beam, and skeleton shimmer blocks.
   ========================================================================== */
.cu-spinner {
  width: 22px; height: 22px; display: inline-block;
  border: 1.5px solid var(--slate-line-2); border-top-color: var(--molten);
  animation: cu-spin 760ms linear infinite;
}
.cu-spinner--lg { width: 34px; height: 34px; border-width: 2px; }
.cu-spinner--sm { width: 16px; height: 16px; border-width: 1.5px; }
@keyframes cu-spin { to { transform: rotate(360deg); } }

.cu-beam { position: relative; height: 2px; background: var(--slate-line); overflow: hidden; }
.cu-beam::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--molten), transparent);
  box-shadow: 0 0 10px rgba(255,74,23,0.6);
  animation: cu-beam-slide 1200ms var(--motion-easing-standard) infinite;
}
@keyframes cu-beam-slide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

.cu-skeleton {
  position: relative; overflow: hidden;
  background: var(--slate-2); border: 1px solid var(--slate-line);
}
.cu-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(237,237,239,0.06), transparent);
  transform: translateX(-100%); animation: cu-shimmer 1400ms ease-in-out infinite;
}
.cu-skeleton--text { height: 0.8rem; }
.cu-skeleton--line { height: 1rem; }
.cu-skeleton--title { height: 1.8rem; }
.cu-skeleton--block { height: 100%; }
.cu-skeleton--avatar { width: 44px; height: 44px; border-radius: var(--radius-full); }
@keyframes cu-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .cu-spinner, .cu-beam::before, .cu-skeleton::after { animation: none; } }

/* --- BRAND LOADER (.cu-atom) — promoted from preview/loading.html ----------
   The six marks of the CU monogram breathe in/out while a colour wave travels
   the ring. The brand-correct loader; the plain .cu-spinner remains for tight
   inline contexts. Requires the 6-path monogram SVG inside (each path =
   .cu-atom__el with --dx/--dy/--d custom props). Sizes via --atom-size. */
.cu-atom {
  --atom-size: 140px; --amp: 13px; --brd: 3s; --cyc: 2.5s;
  width: var(--atom-size); height: auto; display: block;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--molten) 28%, transparent));
}
.cu-atom svg { width: 100%; height: auto; display: block; overflow: visible; }
.cu-atom--inline { filter: none !important; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.cu-atom--inline svg { width: var(--atom-size, 32px); height: var(--atom-size, 32px); }
.cu-atom__el {
  fill: var(--molten);
  animation-name: cu-atom-breathe, cu-atom-hue;
  animation-duration: var(--brd), var(--cyc);
  animation-timing-function: cubic-bezier(0.45,0,0.2,1), linear;
  animation-iteration-count: infinite, infinite;
  animation-delay: 0s, var(--d, 0s);
  will-change: transform, fill;
}
.cu-atom[data-mode="molten"] .cu-atom__el { animation-name: cu-atom-breathe, cu-atom-chase; }
@keyframes cu-atom-breathe {
  0%   { transform: translate(0,0); }
  30%  { transform: translate(calc(var(--dx) * -1 * var(--amp)), calc(var(--dy) * -1 * var(--amp))); }
  70%  { transform: translate(calc(var(--dx) * var(--amp)), calc(var(--dy) * var(--amp))); }
  100% { transform: translate(0,0); }
}
@keyframes cu-atom-hue {
  0%, 100% { fill: var(--molten); } 17% { fill: var(--halo); } 34% { fill: var(--rose); }
  50% { fill: var(--flux); } 67% { fill: var(--ion); } 84% { fill: var(--verdant); }
}
@keyframes cu-atom-chase {
  0%, 62%, 100% { fill: color-mix(in srgb, var(--molten) 34%, var(--void)); }
  18% { fill: var(--molten-hot); } 28% { fill: #ffffff; }
}
@media (prefers-reduced-motion: reduce) { .cu-atom__el { animation: none; fill: var(--molten); } }

/* ==========================================================================
   EMPTY STATE — centered, instrument-panel framing. Eyebrow + heading +
   body + action. Pair with .cu-bracket for the corner ticks.
   ========================================================================== */
.cu-empty { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); max-width: 460px; margin-inline: auto; }
.cu-empty__mark { width: 48px; height: 48px; color: var(--ash); display: grid; place-items: center; }
.cu-empty__mark svg { width: 100%; height: 100%; }
.cu-empty__eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--molten); }
.cu-empty__title { font: var(--text-h4); color: var(--bone); }
.cu-empty__text { font-size: var(--font-size-base); color: var(--bone-dim); line-height: var(--line-height-normal); }
.cu-empty__actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   TABS — bottom-rule with a molten active indicator. Larger than the
   compact segmented control; for switching page regions.
   ========================================================================== */
.cu-tabs {
  display: flex; gap: var(--space-6); border-bottom: 1px solid var(--slate-line);
  max-width: 100%; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cu-tabs::-webkit-scrollbar { display: none; }
.cu-tab {
  position: relative; appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: var(--space-3) 0 var(--space-4); margin-bottom: -1px;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash);
  display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; white-space: nowrap;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--molten); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.cu-tab:hover { color: var(--bone); }
.cu-tab[aria-selected="true"] { color: var(--bone); }
.cu-tab[aria-selected="true"]::after { transform: scaleX(1); }
.cu-tab__count { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--ash); }
.cu-tab[aria-selected="true"] .cu-tab__count { color: var(--molten); }

/* ==========================================================================
   BREADCRUMBS — mono, slash separators (the house "/" mark). Current = bone.
   ========================================================================== */
.cu-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.cu-crumbs a { color: var(--ash); text-decoration: none; transition: color var(--motion-duration-fast); }
.cu-crumbs a:hover { color: var(--molten); }
.cu-crumbs__sep { color: var(--slate-line-2); user-select: none; }
.cu-crumbs__current { color: var(--bone); }

/* ==========================================================================
   PAGINATION — square hairline page cells; active = molten. Prev/next carry
   the trailing-line gesture.
   ========================================================================== */
.cu-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.cu-pager__item {
  min-width: 40px; height: 40px; padding: 0 var(--space-2);
  display: inline-grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--ash);
  border: 1px solid var(--slate-line); background: transparent; cursor: pointer;
  text-decoration: none; transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast), background var(--motion-duration-fast);
}
.cu-pager__item:hover { color: var(--bone); border-color: var(--slate-line-2); background: var(--molten-wash); }
.cu-pager__item[aria-current="page"] { color: var(--ink); background: var(--molten); border-color: var(--molten); }
.cu-pager__item:disabled, .cu-pager__item[aria-disabled="true"] { color: var(--ash-dim); cursor: not-allowed; pointer-events: none; }
.cu-pager__ellipsis { min-width: 28px; text-align: center; color: var(--ash-dim); font-family: var(--font-mono); }
.cu-pager__edge { gap: var(--space-2); padding: 0 var(--space-3); }

/* ==========================================================================
   BADGE / COUNT — small square count or dot. Semantic via data-tone.
   ========================================================================== */
.cu-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--molten); background: var(--molten-tint); border: 1px solid transparent;
}
.cu-badge--solid { color: var(--ink); background: var(--molten); }
.cu-badge--outline { background: transparent; border-color: var(--slate-line-2); color: var(--ash); }
.cu-badge[data-tone="info"]    { color: var(--state-info);    background: var(--ion-tint); }
.cu-badge[data-tone="success"] { color: var(--state-success); background: var(--verdant-tint); }
.cu-badge[data-tone="warning"] { color: var(--state-warning); background: var(--halo-tint); }
.cu-badge[data-tone="error"]   { color: var(--state-error);   background: var(--rose-tint); }
.cu-badge-dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--molten); }
.cu-badge-dot[data-tone="success"] { background: var(--state-success); }
.cu-badge-dot[data-tone="error"]   { background: var(--state-error); }
/* Anchor wrapper — position a badge on the corner of an icon/button */
.cu-badge-anchor { position: relative; display: inline-flex; }
.cu-badge-anchor > .cu-badge, .cu-badge-anchor > .cu-badge-dot { position: absolute; top: -6px; right: -6px; }

/* ==========================================================================
   ACCORDION / FAQ — hairline rows with a molten +/- toggle. Use <details>
   for zero-JS behavior; styles target [open].
   ========================================================================== */
.cu-accordion { border-top: 1px solid var(--slate-line); }
.cu-acc { border-bottom: 1px solid var(--slate-line); }
.cu-acc__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-5) var(--space-2);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-md); color: var(--bone);
  transition: color var(--motion-duration-fast);
}
.cu-acc__summary::-webkit-details-marker { display: none; }
.cu-acc__summary:hover { color: var(--molten); }
.cu-acc__icon { position: relative; width: 16px; height: 16px; flex: none; }
.cu-acc__icon::before, .cu-acc__icon::after { content: ""; position: absolute; background: var(--molten); transition: transform var(--motion-duration-base) var(--motion-easing-standard), opacity var(--motion-duration-base); }
.cu-acc__icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.cu-acc__icon::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
/* icon shows a minus when open — but reverts to a plus the moment a JS-driven
   close begins (.is-closing), so the +/- stays in lock-step with the body. */
.cu-acc[open]:not(.is-closing) .cu-acc__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.cu-acc__body { box-sizing: content-box; padding: 0 var(--space-2) var(--space-5); color: var(--bone-dim); font-size: var(--font-size-base); line-height: var(--line-height-normal); max-width: 68ch; overflow: hidden; }
/* Smooth open/close. JS (see accordion.html) animates the wrapper height with
   the house easing; this transition covers the inner fade + lift so the body
   eases in/out rather than snapping. Gated on reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .cu-acc[open]:not(.is-closing) .cu-acc__body { animation: cu-acc-reveal var(--motion-duration-base) var(--motion-easing-standard) both; }
}
@keyframes cu-acc-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   TABLE / DATA TABLE — hairline grid, mono uppercase head, tabular numerals,
   right-aligned numbers, molten wash on row hover.
   ========================================================================== */
.cu-table-wrap { overflow-x: auto; border: 1px solid var(--slate-line); }
.cu-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.cu-table thead th {
  position: sticky; top: 0; z-index: var(--z-raised);
  background: var(--surface-e2);
  font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash);
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-line-2); white-space: nowrap;
}
.cu-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--slate-line); color: var(--bone-dim); }
.cu-table tbody tr { transition: background var(--motion-duration-fast); }
.cu-table tbody tr:hover { background: var(--molten-wash); }
.cu-table tbody tr:last-child td { border-bottom: 0; }
.cu-table .cu-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--bone); }
.cu-table th.cu-num { text-align: right; }
.cu-table__lead { color: var(--bone); font-weight: 500; }

/* ==========================================================================
   ARTICLE CARD + AUTHOR BYLINE — grayscale photo that lifts to color on
   hover (the house photo treatment), eyebrow category, title, mono meta,
   author with round avatar.
   ========================================================================== */
.cu-article { display: flex; flex-direction: column; background: var(--surface-e1); border: 1px solid var(--slate-line); transition: border-color var(--motion-duration-base), box-shadow var(--motion-duration-base); }
.cu-article:hover { border-color: var(--slate-line-2); box-shadow: var(--shadow-e2); }
.cu-article__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--slate-3); }
.cu-article__media img, .cu-article__media .cu-ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05); transform: scale(1.01);
  transition: filter var(--motion-duration-slow) var(--motion-easing-standard), transform var(--motion-duration-slow) var(--motion-easing-standard);
}
.cu-article:hover .cu-article__media img, .cu-article:hover .cu-article__media .cu-ph { filter: grayscale(0) contrast(1); transform: scale(1.04); }
.cu-article__cat { position: absolute; top: var(--space-3); left: var(--space-3); }
.cu-article__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.cu-article__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-lg); line-height: var(--line-height-snug); letter-spacing: -0.015em; color: var(--bone); }
.cu-article:hover .cu-article__title { color: var(--molten); }
.cu-article__excerpt { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); flex: 1; }
.cu-article__meta { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.cu-article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ash-dim); }

.cu-byline { display: inline-flex; align-items: center; gap: var(--space-3); }
.cu-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; background: var(--slate-3); border: 1px solid var(--slate-line-2); display: inline-grid; place-items: center; flex: none; overflow: hidden; }
.cu-avatar--sm { width: 28px; height: 28px; }
.cu-avatar--lg { width: 48px; height: 48px; }
.cu-avatar__initials { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--bone); letter-spacing: 0.04em; }
.cu-byline__name { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); color: var(--bone); }
.cu-byline__role { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }

/* ==========================================================================
   HEADER — sticky, translucent, brutalist-edged. Desktop nav + mobile
   drawer. Ported from the NewUI runtime; z-index pulls the shared scale.
   ========================================================================== */
.cu-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(14, 14, 16, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--color-border-default);
}
.cu-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  height: 72px; max-width: var(--container-max);
  margin-inline: auto; padding-inline: var(--container-gutter-sm);
}
@media (min-width: 768px)  { .cu-header__inner { padding-inline: var(--container-gutter-md); } }
@media (min-width: 1024px) { .cu-header__inner { padding-inline: var(--container-gutter-lg); } }

.cu-header__brand { display: inline-flex; align-items: center; line-height: 0; }
.cu-header__wordmark { height: 28px; width: auto; display: block; }
@media (min-width: 768px) { .cu-header__wordmark { height: 30px; } }

.cu-header__nav { display: none; align-items: center; gap: var(--space-1); margin-left: var(--space-8); }
@media (min-width: 1024px) { .cu-header__nav { display: flex; } }
.cu-header__nav-link {
  position: relative; padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500;
  border-radius: 0; overflow: hidden; background-color: transparent;
  transition: color var(--motion-duration-base) cubic-bezier(0.4, 0, 0.2, 1),
              background-color var(--motion-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}
/* Highlight state eases symmetrically in AND out (ease-in-out curve). */
.cu-header__nav-link:hover { color: var(--color-text-default); background-color: rgba(237, 237, 239, 0.06); }
/* A single subtle light sweep glides across on hover-in — a professional
   glimmer, not a loop. Clipped by the link's overflow; reduced-motion safe. */
.cu-header__nav-link::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -65%; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cu-header__nav-link:hover::before { animation: cu-nav-shine 720ms var(--motion-easing-standard); }
}
@keyframes cu-nav-shine {
  0%   { left: -65%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.cu-header__nav-link[aria-current="page"] { color: var(--color-text-default); }
.cu-header__nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px;
  height: 1px; background: var(--color-accent-default);
}
.cu-header__spacer { flex: 1; }
@media (max-width: 767px) { .cu-header__inner > .cu-btn--primary { display: none; } }

.cu-header__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--color-border-default);
  background: transparent; color: var(--color-text-default);
  position: relative; z-index: 1;   /* stays above the full-screen menu so it can close it */
  cursor: pointer;
}
@media (min-width: 1024px) { .cu-header__toggle { display: none; } }
.cu-header__toggle svg { width: 18px; height: 18px; overflow: visible; }
/* hamburger morphs to an X while the menu is open */
.cu-header__toggle svg line {
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard),
              opacity var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-header__toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cu-header__toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.cu-header__toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .cu-header__toggle svg line { transition: none; } }

/* Mobile menu — a FULL-SCREEN translucent overlay (the header's blur extended
   over the whole viewport). Sits just below the sticky header (z 99 < z-header)
   so the bar and its toggle stay on top — tap the toggle (now an X) to close.
   The menu fills the screen and holds only the nav links + CTA. */
.cu-mobile-drawer {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: calc(72px + var(--space-8)) var(--container-gutter-md) var(--space-10);
  background: rgba(14, 14, 16, 0.80);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--motion-duration-base) var(--motion-easing-standard),
              visibility 0s linear var(--motion-duration-base);
}
.cu-mobile-drawer[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--motion-duration-base) var(--motion-easing-standard), visibility 0s;
}
@media (min-width: 1024px) { .cu-mobile-drawer { display: none; } }
.cu-mobile-drawer__list { display: grid; gap: var(--space-1); }
.cu-mobile-drawer__link {
  display: block; padding: var(--space-4) 0;
  font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: 600;
  letter-spacing: -0.02em; border-bottom: 1px solid var(--color-border-default); color: var(--color-text-default);
  opacity: 0; transform: translateY(10px);
}
.cu-mobile-drawer[data-open="true"] .cu-mobile-drawer__link {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--motion-duration-base) var(--motion-easing-standard),
              transform var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-mobile-drawer[data-open="true"] .cu-mobile-drawer__link:nth-child(2) { transition-delay: 40ms; }
.cu-mobile-drawer[data-open="true"] .cu-mobile-drawer__link:nth-child(3) { transition-delay: 80ms; }
.cu-mobile-drawer[data-open="true"] .cu-mobile-drawer__link:nth-child(4) { transition-delay: 120ms; }
.cu-mobile-drawer[data-open="true"] .cu-mobile-drawer__link:nth-child(5) { transition-delay: 160ms; }
.cu-mobile-drawer[data-open="true"] .cu-mobile-drawer__link:nth-child(6) { transition-delay: 200ms; }
.cu-mobile-drawer__link:hover { color: var(--color-accent-default); }
.cu-mobile-drawer__cta { margin-top: var(--space-8); }
@media (prefers-reduced-motion: reduce) {
  .cu-mobile-drawer__link,
  .cu-mobile-drawer[data-open="true"] .cu-mobile-drawer__link { transform: none; transition: opacity var(--motion-duration-fast); }
}

/* ==========================================================================
   FOOTER — brutalist agency footer. Studio block + link columns, locations
   grid, social + compliance row, bottom registration strip. Ported verbatim
   from the NewUI runtime (the decorative unicorn/sunrise scene is omitted —
   it depends on runtime JS that isn't part of the static system).
   ========================================================================== */
.cu-footer { margin-top: var(--space-32); background: var(--color-bg-default); border-top: 1px solid var(--color-border-default); color: var(--color-text-muted); }
.cu-footer__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-16) var(--container-gutter-sm) var(--space-8); }
@media (min-width: 768px)  { .cu-footer__inner { padding-inline: var(--container-gutter-md); } }
@media (min-width: 1024px) { .cu-footer__inner { padding: var(--space-24) var(--container-gutter-lg) var(--space-10); } }

.cu-footer__top { display: grid; gap: var(--space-12); grid-template-columns: 1fr; margin-bottom: var(--space-16); }
@media (min-width: 768px)  { .cu-footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-10); } }
@media (min-width: 1024px) { .cu-footer__top { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } }

.cu-footer { --logo-h: 58px; }
.cu-footer__studio { display: grid; gap: var(--space-5); align-content: start; }
.cu-footer__brand { display: inline-flex; align-items: center; line-height: 0; }
/* Wordmark uses the lockup (logomark + wordmark); the SVG carries ~20% transparent
   left margin, so pull it flush-left to align with the tagline below. */
.cu-footer__wordmark { height: var(--logo-h); width: auto; max-width: 100%; display: block; margin-left: calc(var(--logo-h) * -0.205); }
@media (max-width: 480px) { .cu-footer { --logo-h: 46px; } }
.cu-footer__tagline { font-family: var(--font-heading); font-weight: 600; font-size: var(--tagline-size, 1.125rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-text-default); }
.cu-footer__positioning { font-size: var(--font-size-sm); color: var(--color-text-muted); max-width: 36ch; line-height: 1.5; }

.cu-newsletter { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
.cu-newsletter__title { font-family: var(--font-heading); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-text-subtle); }
.cu-newsletter__btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; max-width: 320px; padding: var(--space-4) var(--space-5);
  background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-default);
  font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-newsletter__btn:hover { background: var(--color-accent-default); color: var(--color-text-inverse); border-color: var(--color-accent-default); }
.cu-newsletter__btn::after { content: "→"; font-family: var(--font-mono); font-size: var(--font-size-md); }

.cu-footer__col-title { font-family: var(--font-heading); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-text-subtle); margin-bottom: var(--space-5); }
.cu-footer__col-list { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.cu-footer__col-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); transition: color var(--motion-duration-fast) var(--motion-easing-standard); }
.cu-footer__col-link:hover { color: var(--color-text-default); }
.cu-footer__col-link[data-external="true"]::after { content: "↗"; font-family: var(--font-mono); color: var(--color-text-subtle); }

.cu-footer__offices { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--space-4); grid-template-columns: 1fr; padding-block: var(--space-12) var(--space-16); border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); }
@media (min-width: 640px)  { .cu-footer__offices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cu-footer__offices { grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-10); } }
.cu-office { position: relative; z-index: 1; display: grid; gap: var(--space-3); }
.cu-office__label { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent-default); }
.cu-office__address { font-style: normal; font-size: var(--font-size-sm); color: var(--color-text-default); line-height: 1.6; }
.cu-office__phone { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-muted); transition: color var(--motion-duration-fast) var(--motion-easing-standard); }
.cu-office__phone:hover { color: var(--color-accent-default); }
.cu-office__type { display: inline-block; margin-left: var(--space-2); padding: 2px 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); border: 1px solid var(--color-border-default); vertical-align: middle; }
.cu-office__type[data-type="hub"] { color: var(--color-accent-default); border-color: var(--color-accent-muted); }

.cu-footer__rows { display: grid; gap: var(--space-8); padding-block: var(--space-10); }
@media (min-width: 1024px) { .cu-footer__rows { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-12); } }
.cu-social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cu-social__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border-default); color: var(--color-text-muted); transition: color var(--motion-duration-fast) var(--motion-easing-standard), border-color var(--motion-duration-fast) var(--motion-easing-standard), background-color var(--motion-duration-fast) var(--motion-easing-standard); }
.cu-social__link:hover { color: var(--color-text-default); border-color: var(--color-accent-default); background-color: var(--color-accent-muted); }
.cu-social__link svg { width: 18px; height: 18px; }
.cu-compliance { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cu-compliance__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); border: 1px solid var(--color-border-default); }
.cu-compliance__item[data-asterisk="true"]::after { content: "*"; color: var(--color-accent-default); margin-left: 2px; }

.cu-footer__strip { border-top: 1px solid var(--color-border-default); padding-block: var(--space-6); display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .cu-footer__strip { grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--space-6) var(--space-8); } }
.cu-footer__legal-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-subtle); }
.cu-footer__legal-row a { color: var(--color-text-muted); transition: color var(--motion-duration-fast) var(--motion-easing-standard); }
.cu-footer__legal-row a:hover { color: var(--color-text-default); }
.cu-footer__regs { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-subtle); }
.cu-footer__copyright { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-subtle); letter-spacing: 0.04em; }
.cu-motion-toggle { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 1px solid var(--color-border-default); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; transition: color var(--motion-duration-fast) var(--motion-easing-standard), border-color var(--motion-duration-fast) var(--motion-easing-standard); }
@media (min-width: 1024px) { .cu-motion-toggle { justify-self: end; } }
.cu-motion-toggle:hover { color: var(--color-text-default); border-color: var(--color-text-muted); }
.cu-motion-toggle:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.cu-motion-toggle__icon { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-default); box-shadow: 0 0 8px rgba(255, 74, 23, 0.7); transition: background var(--motion-duration-fast) var(--motion-easing-standard), box-shadow var(--motion-duration-fast) var(--motion-easing-standard); }
.cu-motion-toggle[aria-pressed="true"] .cu-motion-toggle__icon { background: var(--color-text-subtle); box-shadow: none; }
.cu-motion-toggle__state { color: var(--color-accent-default); }
.cu-motion-toggle[aria-pressed="true"] .cu-motion-toggle__state { color: var(--color-text-subtle); }

/* ==========================================================================
   FOOTER — column hover-spotlight (promoted from preview/footer.html). Hovering
   a column dims its siblings and lights the link under the cursor with the
   house molten left-tick + rightward nudge. Opt in with data-hover="on" on
   .cu-footer. The base .cu-footer__col-link styles above still apply.
   ========================================================================== */
.cu-footer[data-hover="on"] .cu-footer__col-link {
  position: relative;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
              opacity var(--motion-duration-base) var(--motion-easing-standard),
              transform var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-footer[data-hover="on"] .cu-footer__col-link::before {
  content: ""; position: absolute; left: -13px; top: 50%;
  width: 7px; height: 1px; background: var(--molten);
  transform: translateY(-50%) scaleX(0); transform-origin: left center;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-footer[data-hover="on"] .cu-footer__col-list:hover .cu-footer__col-link { opacity: 0.32; }
.cu-footer[data-hover="on"] .cu-footer__col-list .cu-footer__col-link:hover { opacity: 1; color: var(--bone); transform: translateX(7px); }
.cu-footer[data-hover="on"] .cu-footer__col-list .cu-footer__col-link:hover::before { transform: translateY(-50%) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .cu-footer[data-hover="on"] .cu-footer__col-list .cu-footer__col-link:hover { transform: none; }
}

/* CSS SUNRISE SCENE — a warm sun rising from the horizon, masked to a soft
   bloom. The lightweight, dependency-free version of the footer's WebGL scene
   (the marketing site swaps in the Unicorn Studio scene where available).
   Place .cu-sunrise inside a position:relative parent (e.g. .cu-footer__offices). */
.cu-sunrise { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(150% 120% at var(--sun-x, 50%) 108%, #000 0%, #000 30%, rgba(0,0,0,0.5) 52%, transparent 74%);
          mask-image: radial-gradient(150% 120% at var(--sun-x, 50%) 108%, #000 0%, #000 30%, rgba(0,0,0,0.5) 52%, transparent 74%); }
.cu-sunrise__sky { position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,74,23,0.26) 0%, rgba(255,74,23,0.08) 38%, transparent 64%); }
.cu-sunrise__sun { position: absolute; left: var(--sun-x, 50%); bottom: -42%; width: 78%; aspect-ratio: 1/1; transform: translateX(-50%);
  background: radial-gradient(circle at center, #ff6a3d 0%, rgba(255,74,23,0.62) 16%, rgba(255,74,23,0.26) 34%, transparent 56%);
  filter: blur(22px); animation: cu-sunrise-rise 13s ease-in-out infinite alternate; }
.cu-sunrise__horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(to right, transparent, #ff7a4d var(--sun-x, 50%), transparent); opacity: 0.7; filter: blur(1px); }
@keyframes cu-sunrise-rise { from { transform: translate(-50%, 5%); } to { transform: translate(-50%, -5%); } }
@media (prefers-reduced-motion: reduce) { .cu-sunrise__sun { animation: none; } }

/* OFFICES SCENE wrapper — holds the optional WebGL "sunrise" scene (Unicorn
   Studio) over the .cu-sunrise CSS fallback. The WebGL canvas is masked to a
   soft bottom bloom and screen-blended so only its warm light contributes —
   no rectangular edge. When the scene reports ready (data-ready="true") the CSS
   fallback is hidden. Drop inside .cu-footer__offices (position:relative). */
.cu-footer__offices-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cu-footer__offices-scene .cu-stage {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(150% 120% at var(--sun-x, 50%) 108%, #000 0%, #000 30%, rgba(0,0,0,0.5) 52%, transparent 74%);
          mask-image: radial-gradient(150% 120% at var(--sun-x, 50%) 108%, #000 0%, #000 30%, rgba(0,0,0,0.5) 52%, transparent 74%);
}
.cu-footer__offices-scene .cu-stage canvas {
  display: block; width: 100% !important; height: 100% !important;
  mix-blend-mode: screen; filter: brightness(1.35) saturate(1.1);
}
.cu-footer__offices-scene[data-ready="true"] .cu-sunrise { display: none; }

/* ==========================================================================
   EMPTY-STATE FRAME (.cu-empty-frame) — promoted from preview/empty-state.html.
   A textured, softly-bloomed panel to hold a .cu-empty. Pair with .cu-bracket
   for the molten corner ticks. data-pattern swaps the texture; tune the bloom
   with --bloom-hue / --bloom-power / --bloom-x.
   ========================================================================== */
.cu-empty-frame {
  position: relative; overflow: hidden; border: 1px solid var(--slate-line);
  --pat-color: color-mix(in srgb, var(--slate-line) 62%, transparent);
  --bloom-hue: var(--molten); --bloom-power: 16%;
  --bloom-tint: color-mix(in srgb, var(--bloom-hue) var(--bloom-power), transparent);
  --bloom-x: 50%;
  --tex: repeating-linear-gradient(135deg, var(--pat-color) 0 1px, transparent 1px 12px);
  background:
    radial-gradient(78% 66% at 50% 58%, color-mix(in srgb, var(--void) 72%, transparent), transparent 78%),
    var(--tex),
    radial-gradient(135% 92% at var(--bloom-x) -14%, var(--bloom-tint), transparent 60%),
    var(--surface-e1);
}
.cu-empty-frame[data-pattern="crosshatch"] { --tex: repeating-linear-gradient(135deg, var(--pat-color) 0 1px, transparent 1px 12px), repeating-linear-gradient(45deg, var(--pat-color) 0 1px, transparent 1px 12px); }
.cu-empty-frame[data-pattern="grid"] { --tex: repeating-linear-gradient(0deg, var(--pat-color) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, var(--pat-color) 0 1px, transparent 1px 22px); }
.cu-empty-frame[data-pattern="none"] { --tex: linear-gradient(transparent, transparent); }

/* ==========================================================================
   PRICING — plan cards. Square, hairline, mono numerals, molten check ticks.
   Lay out in .cu-pricing; mark the recommended plan with --featured (molten
   edge + bloom + badge). An "enterprise" plan can drop the numeral for a
   .cu-price__value--text custom line. Excluded features carry data-off.
   ========================================================================== */
.cu-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
@media (max-width: 880px) { .cu-pricing { grid-template-columns: 1fr; } }
.cu-price {
  position: relative; display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-8); background: var(--surface-e1); border: 1px solid var(--slate-line);
  transition: border-color var(--motion-duration-base) var(--motion-easing-standard), box-shadow var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-price:hover { border-color: var(--slate-line-2); box-shadow: var(--shadow-e2); }
.cu-price > * { position: relative; z-index: 1; }
.cu-price__name { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--ash); }
.cu-price__amount { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.cu-price__currency { font-family: var(--font-mono); font-size: var(--font-size-lg); color: var(--bone-dim); align-self: flex-start; margin-top: 0.5em; }
.cu-price__value { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--bone); font-variant-numeric: tabular-nums; }
.cu-price__value--text { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.cu-price__period { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.cu-price__desc { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); }
.cu-price__rule { height: 1px; background: var(--slate-line); border: 0; margin: 0; }
.cu-price__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cu-price__features li { position: relative; padding-left: var(--space-6); font-size: var(--font-size-sm); color: var(--bone-dim); line-height: 1.5; }
.cu-price__features li::before { content: ""; position: absolute; left: 1px; top: 0.28em; width: 11px; height: 6px; border-left: 1.6px solid var(--molten); border-bottom: 1.6px solid var(--molten); transform: rotate(-45deg); }
.cu-price__features li[data-off="true"] { color: var(--ash-dim); }
.cu-price__features li[data-off="true"]::before { border-left: 0; border-bottom: 1.5px solid var(--ash-dim); width: 10px; height: 0; transform: none; top: 0.7em; }
.cu-price__cta { margin-top: auto; }
/* Featured / recommended */
.cu-price--featured { background: var(--surface-e2); border-color: rgba(255,74,23,0.5); box-shadow: var(--shadow-e2), var(--glow-soft); }
.cu-price--featured::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, var(--molten-wash), transparent 62%); }
.cu-price__badge { position: absolute; top: 0; right: 0; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: var(--molten); padding: 5px 10px; }

/* ==========================================================================
   STATS STRIP — three layouts over the .cu-stat primitive (promoted from
   preview/stats-strip.html). Divided strip, edge-accent tiles, editorial
   ledger. Each child is a .cu-stat block (value + label).
   ========================================================================== */
.cu-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cu-stats--divided > * { padding: var(--space-3) var(--space-5); border-left: 1px solid var(--slate-line); }
.cu-stats--divided > *:first-child { border-left: 0; padding-left: 0; }
.cu-stats--tiles { gap: var(--space-4); }
.cu-stats--tiles > * {
  background: var(--surface-e1); border: 1px solid var(--slate-line); border-left: 3px solid var(--molten);
  padding: var(--space-6);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard), background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-stats--tiles > *:hover { background: var(--surface-e2); border-color: var(--slate-line-2); border-left-color: var(--molten); }
.cu-stats--ledger { column-gap: var(--space-8); row-gap: var(--space-8); }
.cu-stats--ledger > * { display: flex; flex-direction: column; gap: var(--space-4); border-top: 2px solid var(--slate-line); padding-top: var(--space-5); position: relative; }
.cu-stats--ledger > *::before { content: ""; position: absolute; top: -2px; left: 0; width: 42px; height: 2px; background: var(--molten); }
.cu-stats--ledger .cu-stat__label { margin-top: 0; }
.cu-stats--ledger .cu-stat__value { font-size: clamp(2.5rem, 5vw, 3.6rem); }
@media (max-width: 760px) { .cu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); } .cu-stats--divided > *:nth-child(odd) { border-left: 0; padding-left: 0; } }
@media (max-width: 440px) { .cu-stats { grid-template-columns: 1fr; } .cu-stats--divided > * { border-left: 0; padding-left: 0; } }


/* ----- ds/cu-editorial.css --------------------------------------------------- */
/* ==========================================================================
   CreationUnited Co. — cu-editorial.css (v1 · Long-form / Ghost layer)
   Import AFTER colors_and_type.css and cu-components.css.

   This sheet completes the system for EDITORIAL / CMS surfaces — the kind of
   content a Ghost theme renders inside a post body. The marketing-UI layer
   (cu-components.css) covers buttons, forms, nav, overlays. This layer covers
   everything that appears INSIDE long-form content: prose, lists, highlights,
   code, quotes, callouts, bookmarks, figures, galleries, header cards,
   products, subscribe cards, audio, video, files, footnotes, content-gate
   CTAs, and a table of contents.

   Same laws as the rest of the system:
     · radius 0 on every surface (only true dots/avatars round)
     · hairlines in --slate-line; molten emitted as LIGHT / EDGE, never a fill
     · mono eyebrows + labels, tracked wide and uppercased
     · grayscale media that lifts to color on hover
     · all motion gated behind prefers-reduced-motion
   Each component maps 1:1 to a card in a Ghost style guide so a theme build
   has a CU-native equivalent for every editor block.
   ========================================================================== */

/* ==========================================================================
   PROSE — the long-form content wrapper. Drop raw CMS HTML inside
   <div class="cu-prose"> … </div> and headings, paragraphs, links, lists,
   <mark>, inline <code>, <hr>, <strong>/<em> all inherit house styling
   without per-element classes. Measure is capped for readability.
   ========================================================================== */
.cu-prose {
  max-width: 68ch;
  color: var(--bone-dim);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
}
.cu-prose > * + * { margin-top: var(--space-5); }
.cu-prose > h1, .cu-prose > h2, .cu-prose > h3,
.cu-prose > h4, .cu-prose > h5, .cu-prose > h6 { margin-top: var(--space-10); color: var(--bone); }
.cu-prose > h2 + *, .cu-prose > h3 + * { margin-top: var(--space-4); }
.cu-prose :where(strong, b) { color: var(--bone); font-weight: 600; }
.cu-prose :where(em, i) { font-style: italic; }
.cu-prose :where(a) {
  color: var(--bone);
  text-decoration: none;
  background-image: linear-gradient(var(--molten), var(--molten));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 1.18em;
  transition: background-size var(--motion-duration-base) var(--motion-easing-standard), color var(--motion-duration-fast);
}
.cu-prose :where(a):hover { color: var(--molten); }
.cu-prose :where(hr) { margin-block: var(--space-10); }

/* Lead / drop-cap helpers (opt-in) */
.cu-prose .cu-lead { font-family: var(--font-display); font-size: var(--font-size-xl); line-height: var(--line-height-snug); color: var(--bone); }

/* ==========================================================================
   LISTS — house bullets. Unordered uses a molten square tick; ordered uses
   mono numerals in molten. Nested lists step down in tone. Works inside
   .cu-prose or standalone via .cu-list.
   ========================================================================== */
.cu-prose :where(ul, ol), .cu-list { padding-left: 0; list-style: none; display: grid; gap: var(--space-3); }
.cu-prose :where(li), .cu-list > li { position: relative; padding-left: var(--space-8); color: var(--bone-dim); }
/* Unordered — molten square node */
.cu-prose ul > li::before, .cu-list--ul > li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 7px; height: 7px; background: var(--molten);
}
/* Ordered — mono numerals */
.cu-prose ol, .cu-list--ol { counter-reset: cu-ol; }
.cu-prose ol > li, .cu-list--ol > li { counter-increment: cu-ol; }
.cu-prose ol > li::before, .cu-list--ol > li::before {
  content: counter(cu-ol, decimal-leading-zero);
  position: absolute; left: 0; top: 0.05em;
  font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--molten);
  letter-spacing: 0.04em;
}
/* Nested lists — tighter, ash tone, indent step */
.cu-prose :where(li) :where(ul, ol), .cu-list :where(ul, ol) { margin-top: var(--space-3); padding-left: var(--space-6); }
.cu-prose :where(li li)::before, .cu-list li li::before { opacity: 0.55; }

/* ==========================================================================
   HIGHLIGHT — <mark> / .cu-mark. Molten ink on a faint molten wash, square.
   The brand's way of drawing the eye inside running text.
   ========================================================================== */
.cu-prose :where(mark), .cu-mark {
  background: var(--molten-tint);
  color: var(--molten-hot);
  padding: 0.05em 0.28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 500;
}

/* ==========================================================================
   INLINE CODE + CODE BLOCK — mono, hairline-framed. Code blocks carry an
   optional language tab (top-right) and a mono caption beneath. A minimal,
   token-driven faux-syntax palette is provided via <span class="tok-*">.
   ========================================================================== */
.cu-prose :where(code), .cu-code-inline {
  font-family: var(--font-mono); font-size: 0.88em;
  color: var(--molten-hot);
  background: var(--slate-2); border: 1px solid var(--slate-line);
  padding: 0.1em 0.4em;
}
.cu-codeblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-block: var(--space-6); }
.cu-codeblock__frame {
  position: relative; min-width: 0;
  background: var(--surface-e1); border: 1px solid var(--slate-line);
  box-shadow: var(--shadow-e1);
}
.cu-codeblock__lang {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
  padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--slate-line); border-bottom: 1px solid var(--slate-line);
}
.cu-codeblock pre {
  margin: 0; padding: var(--space-5) var(--space-5);
  overflow-x: auto; font-family: var(--font-mono);
  font-size: var(--font-size-sm); line-height: 1.7; color: var(--bone-dim);
}
.cu-codeblock pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.cu-codeblock__caption {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); font-style: normal;
}
/* faux-syntax tokens — used sparingly, on-palette */
.tok-key { color: var(--ion); }
.tok-fn  { color: var(--halo); }
.tok-str { color: var(--verdant); }
.tok-com { color: var(--ash-dim); font-style: italic; }
.tok-num { color: var(--flux); }

/* ==========================================================================
   BLOCKQUOTE (prose) — Ghost's two quote styles. Regular = left molten rule,
   bone italic display. Bold = large pull-quote, centered, no attribution rule.
   Distinct from cu-components' .cu-quote (which is a framed, carded quote).
   ========================================================================== */
.cu-blockquote {
  border-left: 2px solid var(--molten);
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  margin-block: var(--space-6);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--font-size-xl); line-height: 1.4; color: var(--bone);
}
.cu-blockquote cite, .cu-blockquote__by {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-mono); font-style: normal; font-size: var(--font-size-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
}
.cu-blockquote--bold {
  border-left: 0; padding: 0; text-align: left;
  font-weight: 400; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.18;
  letter-spacing: -0.01em; color: var(--bone); max-width: 22ch;
}
.cu-blockquote--bold .cu-blockquote__by, .cu-blockquote--bold cite { color: var(--ash); margin-top: var(--space-5); }

/* ==========================================================================
   CALLOUT — editorial note/alert inside prose. Icon (or emoji slot) on the
   left, hairline frame, faint tonal wash, molten left edge. Tones via
   data-tone="info|success|warning|error|molten". Distinct from cu-alert
   (which is a UI status banner with an inset top rule); the callout reads as
   a quiet inline aside in a reading column.
   ========================================================================== */
.cu-callout {
  --tone: var(--molten); --tone-tint: var(--molten-wash);
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  align-items: start; padding: var(--space-5);
  background: var(--surface-e1); border: 1px solid var(--slate-line);
  border-left: 2px solid var(--tone); margin-block: var(--space-6);
}
.cu-callout::after { content: ""; position: absolute; inset: 0; background: var(--tone-tint); pointer-events: none; z-index: 0; }
.cu-callout > * { position: relative; z-index: 1; }
.cu-callout[data-tone="info"]    { --tone: var(--state-info);    --tone-tint: var(--ion-tint); }
.cu-callout[data-tone="success"] { --tone: var(--state-success); --tone-tint: var(--verdant-tint); }
.cu-callout[data-tone="warning"] { --tone: var(--state-warning); --tone-tint: var(--halo-tint); }
.cu-callout[data-tone="error"]   { --tone: var(--state-error);   --tone-tint: var(--rose-tint); }
.cu-callout__mark {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--slate-line); color: var(--tone);
  font-size: 14px; line-height: 1;
}
.cu-callout__mark svg { width: 16px; height: 16px; }
.cu-callout__body { color: var(--bone-dim); font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.cu-callout__body strong { color: var(--bone); font-weight: 600; }
.cu-callout__body a { color: var(--tone); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   BOOKMARK — link preview card. Title + description on the left, square
   thumbnail on the right, mono favicon/host meta at the bottom. Hairline
   frame warms to molten edge on hover; thumbnail lifts grayscale → color.
   ========================================================================== */
.cu-bookmark {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch;
  border: 1px solid var(--slate-line); background: var(--surface-e1);
  text-decoration: none; color: inherit; margin-block: var(--space-6);
  transition: border-color var(--motion-duration-base) var(--motion-easing-standard), box-shadow var(--motion-duration-base);
  overflow: hidden;
}
.cu-bookmark:hover { border-color: rgba(255,74,23,0.5); box-shadow: var(--shadow-e2); }
.cu-bookmark__content { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cu-bookmark__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-md); color: var(--bone); letter-spacing: -0.01em; }
.cu-bookmark:hover .cu-bookmark__title { color: var(--molten); }
.cu-bookmark__desc { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cu-bookmark__meta { margin-top: auto; padding-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.cu-bookmark__favicon { width: 16px; height: 16px; flex: none; border: 1px solid var(--slate-line); display: grid; place-items: center; color: var(--molten); font-size: 9px; }
.cu-bookmark__thumb { width: 200px; flex: none; background: var(--slate-3); overflow: hidden; position: relative; border-left: 1px solid var(--slate-line); }
.cu-bookmark__thumb img, .cu-bookmark__thumb .cu-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--motion-duration-slow) var(--motion-easing-standard);
}
.cu-bookmark:hover .cu-bookmark__thumb img, .cu-bookmark:hover .cu-bookmark__thumb .cu-ph { filter: grayscale(0) contrast(1); }
@media (max-width: 620px) {
  .cu-bookmark { grid-template-columns: 1fr; }
  .cu-bookmark__thumb { width: auto; height: 160px; border-left: 0; border-top: 1px solid var(--slate-line); order: -1; }
}

/* ==========================================================================
   FIGURE — image + caption with width variants. Default sits in the prose
   measure; --wide breaks out; --full goes edge-to-edge. Grayscale → color on
   hover, hairline frame, mono caption with a leading molten tick.
   ========================================================================== */
.cu-figure { margin-block: var(--space-8); display: grid; gap: var(--space-3); }
.cu-figure__media { position: relative; overflow: hidden; border: 1px solid var(--slate-line); background: var(--slate-3); aspect-ratio: 16 / 9; }
.cu-figure__media img, .cu-figure__media .cu-ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.4) contrast(1.04);
  transition: filter var(--motion-duration-slow) var(--motion-easing-standard), transform var(--motion-duration-slow) var(--motion-easing-standard);
}
.cu-figure:hover .cu-figure__media img, .cu-figure:hover .cu-figure__media .cu-ph { filter: grayscale(0) contrast(1); }
.cu-figure__caption {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.08em; color: var(--ash); display: flex; align-items: center; gap: var(--space-2);
}
.cu-figure__caption::before { content: ""; width: 14px; height: 1px; background: var(--molten); flex: none; }
.cu-figure__caption a { color: var(--bone-dim); text-decoration: underline; text-underline-offset: 2px; }
.cu-figure--wide { width: min(112%, 100vw); margin-inline: calc(50% - min(56%, 50vw)); }
.cu-figure--full { width: 100vw; margin-inline: calc(50% - 50vw); }
.cu-figure--full .cu-figure__media { border-inline: 0; aspect-ratio: 21 / 9; }
.cu-figure--full .cu-figure__caption { padding-inline: var(--container-gutter-md); }

/* ==========================================================================
   GALLERY — a row of images that share a height and divide the row by their
   aspect ratios (the Ghost gallery model). Hairline gutters, grayscale lift.
   ========================================================================== */
.cu-gallery { margin-block: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--slate-line); border: 1px solid var(--slate-line); }
.cu-gallery__row { display: flex; gap: 1px; min-width: 0; height: clamp(150px, 24vw, 240px); background: var(--slate-line); }
.cu-gallery__cell { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; background: var(--slate-3); }
.cu-gallery__cell img, .cu-gallery__cell .cu-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--motion-duration-slow) var(--motion-easing-standard), transform var(--motion-duration-slow) var(--motion-easing-standard);
}
.cu-gallery__cell:hover img, .cu-gallery__cell:hover .cu-ph { filter: grayscale(0) contrast(1); transform: scale(1.03); }
@media (max-width: 620px){ .cu-gallery__row { flex-direction: column; height: auto; } .cu-gallery__cell { height: 180px; } }

/* ==========================================================================
   HEADER CARD — full-width section header inside content. Title + subheading
   + button over a dark media bed with the brand vignette. Use data-align to
   shift content. Reads like a chapter break.
   ========================================================================== */
.cu-headercard {
  position: relative; overflow: hidden; isolation: isolate;
  margin-block: var(--space-10); padding: clamp(48px, 8vw, 104px) clamp(28px, 5vw, 72px);
  background: var(--void-deep); border: 1px solid var(--slate-line);
  display: grid; gap: var(--space-4); justify-items: start;
}
.cu-headercard[data-align="center"] { justify-items: center; text-align: center; }
.cu-headercard__bed { position: absolute; inset: 0; z-index: -2; }
.cu-headercard__bed img, .cu-headercard__bed .cu-ph { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.05) brightness(0.55); }
.cu-headercard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 20% 0%, rgba(255,74,23,0.12), transparent 55%), linear-gradient(180deg, rgba(7,7,8,0.4), rgba(7,7,8,0.78)); pointer-events: none; }
.cu-headercard__eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--molten); }
.cu-headercard__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; color: var(--bone); letter-spacing: -0.02em; max-width: 18ch; }
.cu-headercard__sub { font-size: var(--font-size-md); color: var(--bone-dim); line-height: var(--line-height-normal); max-width: 52ch; }
.cu-headercard__actions { margin-top: var(--space-3); }

/* ==========================================================================
   PRODUCT CARD — editorial product promo. Square image, title, description,
   price button. Hairline frame, grayscale lift, molten price CTA.
   ========================================================================== */
.cu-product { border: 1px solid var(--slate-line); background: var(--surface-e1); display: grid; margin-block: var(--space-6); transition: border-color var(--motion-duration-base), box-shadow var(--motion-duration-base); }
.cu-product:hover { border-color: var(--slate-line-2); box-shadow: var(--shadow-e2); }
.cu-product__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--slate-3); border-bottom: 1px solid var(--slate-line); }
.cu-product__media img, .cu-product__media .cu-ph { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) contrast(1.04); transition: filter var(--motion-duration-slow) var(--motion-easing-standard); }
.cu-product:hover .cu-product__media img, .cu-product:hover .cu-product__media .cu-ph { filter: grayscale(0) contrast(1); }
.cu-product__body { padding: var(--space-6); display: grid; gap: var(--space-3); }
.cu-product__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-lg); color: var(--bone); letter-spacing: -0.01em; }
.cu-product__desc { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); }
.cu-product__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); }
.cu-product__price { font-family: var(--font-mono); font-size: var(--font-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.cu-product__price b { color: var(--bone); font-weight: 500; }

/* ==========================================================================
   SUBSCRIBE / SIGN-UP CARD — newsletter capture. Eyebrow, headline, copy,
   inline email field + button, fine print. Instrument-panel framing with a
   faint molten bloom in one corner.
   ========================================================================== */
.cu-subscribe {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--slate-line); background: var(--surface-e1);
  padding: clamp(28px, 5vw, 56px); margin-block: var(--space-8);
  display: grid; gap: var(--space-4); max-width: 620px;
}
.cu-subscribe::before { content: ""; position: absolute; top: -40%; right: -10%; width: 320px; height: 320px; z-index: -1; background: radial-gradient(circle, rgba(255,74,23,0.16), transparent 62%); pointer-events: none; }
.cu-subscribe__eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--molten); }
.cu-subscribe__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.1; color: var(--bone); letter-spacing: -0.015em; }
.cu-subscribe__text { font-size: var(--font-size-base); color: var(--bone-dim); line-height: var(--line-height-normal); max-width: 48ch; }
.cu-subscribe__form { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.cu-subscribe__input { flex: 1 1 220px; min-width: 0; padding: 0.85rem 1rem; background: var(--slate-2); border: 1px solid var(--slate-line); color: var(--bone); font-family: var(--font-body); font-size: var(--font-size-base); transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast); }
.cu-subscribe__input::placeholder { color: var(--ash-dim); }
.cu-subscribe__input:focus { outline: none; border-color: var(--molten); box-shadow: inset 0 0 0 1px var(--molten); }
.cu-subscribe__fine { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-dim); }

/* ==========================================================================
   AUDIO PLAYER — chrome only (no real audio engine). Square thumb, play
   button, mono timestamps, hairline scrubber with a molten fill + node, rate
   pill. Reads like the rest of the instrument language.
   ========================================================================== */
.cu-audio { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--slate-line); background: var(--surface-e1); margin-block: var(--space-6); }
.cu-audio__thumb { width: 56px; height: 56px; flex: none; background: var(--slate-3); border: 1px solid var(--slate-line); overflow: hidden; position: relative; }
.cu-audio__thumb img, .cu-audio__thumb .cu-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5); }
.cu-audio__main { display: grid; gap: var(--space-2); min-width: 0; }
.cu-audio__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-audio__controls { display: flex; align-items: center; gap: var(--space-3); }
.cu-audio__play { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--molten); background: var(--molten-wash); color: var(--molten); cursor: pointer; }
.cu-audio__play svg { width: 12px; height: 12px; }
.cu-audio__time { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--ash); font-variant-numeric: tabular-nums; flex: none; }
.cu-audio__scrub { position: relative; flex: 1; height: 3px; background: var(--slate-line); cursor: pointer; }
.cu-audio__scrub-fill { position: absolute; inset: 0 auto 0 0; background: var(--molten); box-shadow: 0 0 8px rgba(255,74,23,0.5); }
.cu-audio__scrub-fill::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; background: var(--molten); transform: translateY(-50%); }
.cu-audio__rate { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--ash); border: 1px solid var(--slate-line); padding: 2px 6px; flex: none; }

/* ==========================================================================
   VIDEO PLAYER — poster + centered play, mono timestamps, scrubber, rate.
   Chrome only. Grayscale poster lifts on hover; molten play node.
   ========================================================================== */
.cu-video { position: relative; overflow: hidden; border: 1px solid var(--slate-line); background: var(--void-deep); aspect-ratio: 16 / 9; margin-block: var(--space-8); }
.cu-video__poster { position: absolute; inset: 0; }
.cu-video__poster img, .cu-video__poster .cu-ph { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.05) brightness(0.7); transition: filter var(--motion-duration-slow) var(--motion-easing-standard); }
.cu-video:hover .cu-video__poster img, .cu-video:hover .cu-video__poster .cu-ph { filter: grayscale(0.15) contrast(1) brightness(0.82); }
.cu-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--molten); background: rgba(255,74,23,0.14); color: var(--molten); cursor: pointer; backdrop-filter: blur(2px); transition: box-shadow var(--motion-duration-base), background var(--motion-duration-base); }
.cu-video:hover .cu-video__play { background: rgba(255,74,23,0.22); box-shadow: var(--glow-molten); }
.cu-video__play svg { width: 22px; height: 22px; margin-left: 3px; }
.cu-video__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: linear-gradient(transparent, rgba(7,7,8,0.85)); }
.cu-video__time { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--bone); font-variant-numeric: tabular-nums; flex: none; }
.cu-video__scrub { position: relative; flex: 1; height: 3px; background: rgba(237,237,239,0.25); }
.cu-video__scrub-fill { position: absolute; inset: 0 auto 0 0; width: 18%; background: var(--molten); }
.cu-video__rate { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--bone); border: 1px solid rgba(237,237,239,0.3); padding: 2px 6px; flex: none; }

/* ==========================================================================
   FILE DOWNLOAD CARD — icon, name + size meta, download affordance. Hairline
   frame warms to molten on hover; the download glyph slides down 2px.
   ========================================================================== */
.cu-file { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border: 1px solid var(--slate-line); background: var(--surface-e1); text-decoration: none; color: inherit; margin-block: var(--space-6); transition: border-color var(--motion-duration-base); }
.cu-file:hover { border-color: rgba(255,74,23,0.5); }
.cu-file__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--slate-line); color: var(--molten); }
.cu-file__icon svg { width: 18px; height: 18px; }
.cu-file__meta { min-width: 0; display: grid; gap: 2px; }
.cu-file__name { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-file__size { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.cu-file__dl { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--slate-line); color: var(--ash); transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast), transform var(--motion-duration-fast); }
.cu-file:hover .cu-file__dl { color: var(--molten); border-color: var(--molten); }
.cu-file:hover .cu-file__dl svg { transform: translateY(2px); }
.cu-file__dl svg { width: 16px; height: 16px; transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }

/* ==========================================================================
   FOOTNOTES — superscript reference marks in molten + a hairline-separated
   footnote list with a return arrow. .cu-fnref inline; .cu-footnotes block.
   ========================================================================== */
.cu-fnref { font-family: var(--font-mono); font-size: 0.7em; vertical-align: super; line-height: 0; }
.cu-fnref a { color: var(--molten); text-decoration: none; padding: 0 1px; }
.cu-fnref a:hover { text-decoration: underline; }
.cu-footnotes { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--slate-line); }
.cu-footnotes__title { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--ash); margin-bottom: var(--space-4); }
.cu-footnotes ol { list-style: none; padding: 0; margin: 0; counter-reset: cu-fn; display: grid; gap: var(--space-4); }
.cu-footnotes li { counter-increment: cu-fn; position: relative; padding-left: var(--space-8); font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); }
.cu-footnotes li::before { content: counter(cu-fn); position: absolute; left: 0; top: 0.1em; font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--molten); }
.cu-footnotes li code { font-family: var(--font-mono); font-size: 0.88em; color: var(--molten-hot); background: var(--slate-2); border: 1px solid var(--slate-line); padding: 0.1em 0.4em; }
.cu-footnotes__back { color: var(--molten); text-decoration: none; margin-left: var(--space-1); }

/* ==========================================================================
   CONTENT-GATE CTA — the "Unlock full content" / membership upgrade block.
   A fade-out mask over the trailing prose, then a centered card with eyebrow,
   headline, copy, and a primary CTA. Use to gate members-only posts.
   ========================================================================== */
.cu-gate { position: relative; margin-top: calc(-1 * var(--space-32)); padding-top: var(--space-32); }
.cu-gate__veil { position: absolute; top: 0; left: 0; right: 0; height: var(--space-32); background: linear-gradient(180deg, transparent, var(--void) 82%); pointer-events: none; }
.cu-gate__card {
  position: relative; overflow: hidden; text-align: center; display: grid; justify-items: center; gap: var(--space-4);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px);
  border: 1px solid var(--slate-line-2); background: var(--void-deep);
  box-shadow: var(--shadow-e3); max-width: 560px; margin-inline: auto;
}
/* dramatic bed: molten bloom from the top + a faint structural grid */
.cu-gate__card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,74,23,0.20), transparent 58%),
    radial-gradient(80% 60% at 50% 120%, rgba(255,74,23,0.08), transparent 60%);
}
.cu-gate__card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, rgba(237,237,239,0.04) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(237,237,239,0.04) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
}
.cu-gate__card > * { position: relative; z-index: 1; }
/* lock node — square, molten edge + bloom */
.cu-gate__lock {
  width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: var(--space-1);
  border: 1px solid color-mix(in srgb, var(--molten) 55%, transparent); color: var(--molten);
  background: rgba(255,74,23,0.06);
  box-shadow: 0 0 34px rgba(255,74,23,0.30), inset 0 0 18px rgba(255,74,23,0.10);
}
.cu-gate__lock svg { width: 26px; height: 26px; }
.cu-gate__eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--molten); }
.cu-gate__title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.06; color: var(--bone); letter-spacing: -0.015em; }
.cu-gate__text { font-size: var(--font-size-base); color: var(--bone-dim); line-height: var(--line-height-normal); max-width: 42ch; }
.cu-gate__meta { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash-dim); margin-top: var(--space-2); }

/* Mobile fit — keep the gate card and subscribe card (and their CTAs) inside
   narrow viewports. The gate's long primary CTA is nowrap by default and was
   being clipped by the card's overflow:hidden on small phones; allow it to
   wrap and tighten the side padding so nothing is cut off. */
@media (max-width: 540px) {
  .cu-gate__card { padding-inline: var(--space-6); }
  .cu-gate__card .cu-btn { white-space: normal; text-align: center; }
  .cu-subscribe { padding-inline: var(--space-6); }
}

/* ==========================================================================
   TABLE OF CONTENTS — "On this page". Mono, hairline left rail, active item
   carries a molten edge + bone text. Pair with scroll-spy JS (set
   aria-current="true" on the active link).
   ========================================================================== */
.cu-toc { border-left: 1px solid var(--slate-line); }
.cu-toc__title { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--ash); padding: 0 0 var(--space-3) var(--space-5); }
.cu-toc__list { list-style: none; margin: 0; padding: 0; display: grid; }
.cu-toc__link {
  position: relative; display: block; padding: var(--space-2) var(--space-5);
  margin-left: -1px; border-left: 1px solid transparent;
  font-size: var(--font-size-sm); color: var(--ash); text-decoration: none;
  transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast);
}
.cu-toc__link:hover { color: var(--bone-dim); }
.cu-toc__link[data-depth="2"] { padding-left: var(--space-8); font-size: var(--font-size-xs); }
.cu-toc__link[aria-current="true"] { color: var(--bone); border-left-color: var(--molten); }


/* ----- ds/cu-koenig.css ------------------------------------------------------ */
/* ==========================================================================
   CreationUnited Co. — cu-koenig.css (Ghost editor / Koenig card layer)

   The editorial sheet (cu-editorial.css) styles the static reference's .cu-*
   classes. But when an author writes a post in the Ghost editor, Ghost emits
   its OWN class names (.kg-*) for every card — buttons, callouts, bookmarks,
   toggles, files, products, headers, galleries, embeds, signup, plus the
   members paywall CTA (.gh-post-upgrade-cta). None of those .kg-* classes were
   styled, so editor content fell back to Ghost defaults.

   This sheet re-skins every Koenig card in the CreationUnited design system so
   a post written in Ghost looks like the design system — same hairlines, same
   molten edges, radius 0, mono labels, grayscale→colour media.

   Reference: https://ghost.org/help/cards/
   Loaded AFTER cu-editorial.css and INSIDE the .cu-prose article body.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card rhythm + reset of the prose link underline on card-shaped anchors.
   .cu-prose draws a molten baseline under every <a>; on a button / bookmark /
   file / product / header anchor that underline became "a molten line going
   through the button". Strip it on card anchors — they carry their own
   affordance.
   -------------------------------------------------------------------------- */
.cu-prose :where(.kg-card) { margin-block: var(--space-8); }
.cu-prose :where(
  .kg-btn,
  .kg-bookmark-card,
  .kg-file-card a,
  .kg-product-card-button,
  .kg-header-card-button,
  .kg-nft-card,
  .kg-signup-card-button
) {
  background-image: none;
  text-decoration: none;
}

/* ==========================================================================
   IMAGE — figure + caption. Hairline frame, mono caption with a molten tick,
   grayscale lift on hover (matches .cu-figure).
   ========================================================================== */
.cu-prose .kg-image-card img,
.cu-prose .kg-image {
  display: block;
  width: 100%;
  border: 1px solid var(--slate-line);
  filter: grayscale(0.4) contrast(1.04);
  transition: filter var(--motion-duration-slow) var(--motion-easing-standard);
}
.cu-prose .kg-image-card:hover img { filter: grayscale(0) contrast(1); }
.cu-prose .kg-card figcaption,
.cu-prose .kg-card-figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  color: var(--ash);
  text-align: center;
}
.cu-prose .kg-card figcaption a { color: var(--bone-dim); text-decoration: underline; text-underline-offset: 2px; background-image: none; }

/* Width helpers — break the prose measure for wide / full images. */
.cu-prose .kg-width-wide { width: min(120%, 92vw); margin-inline: calc(50% - min(60%, 46vw)); max-width: none; }
.cu-prose .kg-width-full { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.cu-prose .kg-width-full img { border-inline: 0; }

/* ==========================================================================
   GALLERY — Ghost's flex-row gallery. Hairline gutters, grayscale lift.
   ========================================================================== */
.cu-prose .kg-gallery-container { display: flex; flex-direction: column; gap: 1px; background: var(--slate-line); border: 1px solid var(--slate-line); }
.cu-prose .kg-gallery-row { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 1px; background: var(--slate-line); }
.cu-prose .kg-gallery-image { background: var(--slate-3); overflow: hidden; }
.cu-prose .kg-gallery-image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--motion-duration-slow) var(--motion-easing-standard), transform var(--motion-duration-slow) var(--motion-easing-standard);
}
.cu-prose .kg-gallery-image:hover img { filter: grayscale(0) contrast(1); transform: scale(1.03); }

/* ==========================================================================
   BUTTON — re-skin Ghost's .kg-btn to the CreationUnited button. The accent
   button reads as .cu-btn--primary; the default reads as .cu-btn--ghost.
   ========================================================================== */
.cu-prose .kg-button-card { display: flex; }
.cu-prose .kg-button-card.kg-align-center { justify-content: center; }
.cu-prose .kg-button-card.kg-align-left { justify-content: flex-start; }
.cu-prose .kg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  min-height: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    background-color var(--motion-duration-base) var(--motion-easing-standard),
    color var(--motion-duration-base) var(--motion-easing-standard),
    border-color var(--motion-duration-base) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.cu-prose .kg-btn:hover { transform: translateY(-1px); }
.cu-prose .kg-btn-accent {
  background: var(--molten);
  color: var(--ink, #0E0E10);
  border-color: var(--molten);
}
.cu-prose .kg-btn-accent:hover { background: var(--molten-hot); border-color: var(--molten-hot); color: var(--ink, #0E0E10); }
.cu-prose .kg-btn:not(.kg-btn-accent) {
  background: transparent;
  color: var(--bone);
  border-color: var(--slate-line-2);
}
.cu-prose .kg-btn:not(.kg-btn-accent):hover { background: var(--bone); color: var(--void); border-color: var(--bone); }

/* ==========================================================================
   CALLOUT — Ghost callout card → .cu-callout aesthetic. Square, hairline,
   molten left edge, tonal wash keyed to Ghost's colour classes.
   ========================================================================== */
.cu-prose .kg-callout-card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-5);
  background: var(--surface-e1);
  border: 1px solid var(--slate-line);
  border-left: 2px solid var(--molten);
  border-radius: 0;
}
.cu-prose .kg-callout-emoji { font-size: 18px; line-height: 1.4; }
.cu-prose .kg-callout-text { color: var(--bone-dim); font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.cu-prose .kg-callout-text a { color: var(--molten); }
.cu-prose .kg-callout-card-accent { border-left-color: var(--molten); background: color-mix(in srgb, var(--molten) 8%, var(--surface-e1)); }
.cu-prose .kg-callout-card-grey,
.cu-prose .kg-callout-card-white { border-left-color: var(--ash); }
.cu-prose .kg-callout-card-blue   { border-left-color: var(--ion);     background: color-mix(in srgb, var(--ion) 7%, var(--surface-e1)); }
.cu-prose .kg-callout-card-green  { border-left-color: var(--verdant); background: color-mix(in srgb, var(--verdant) 7%, var(--surface-e1)); }
.cu-prose .kg-callout-card-yellow { border-left-color: var(--halo);    background: color-mix(in srgb, var(--halo) 7%, var(--surface-e1)); }
.cu-prose .kg-callout-card-red    { border-left-color: var(--rose);    background: color-mix(in srgb, var(--rose) 7%, var(--surface-e1)); }
.cu-prose .kg-callout-card-pink   { border-left-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 7%, var(--surface-e1)); }
.cu-prose .kg-callout-card-purple { border-left-color: var(--flux);    background: color-mix(in srgb, var(--flux) 7%, var(--surface-e1)); }

/* ==========================================================================
   BOOKMARK — link preview → .cu-bookmark aesthetic.
   ========================================================================== */
.cu-prose .kg-bookmark-card,
.cu-prose .kg-bookmark-container {
  display: flex; align-items: stretch;
  border: 1px solid var(--slate-line); background: var(--surface-e1);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color var(--motion-duration-base) var(--motion-easing-standard), box-shadow var(--motion-duration-base);
}
.cu-prose .kg-bookmark-card:hover .kg-bookmark-container { border-color: rgba(255,74,23,0.5); }
.cu-prose .kg-bookmark-content { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.cu-prose .kg-bookmark-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-md); color: var(--bone); letter-spacing: -0.01em; }
.cu-prose .kg-bookmark-card:hover .kg-bookmark-title { color: var(--molten); }
.cu-prose .kg-bookmark-description { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cu-prose .kg-bookmark-metadata { margin-top: auto; padding-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.cu-prose .kg-bookmark-icon { width: 16px; height: 16px; margin-right: var(--space-1); }
.cu-prose .kg-bookmark-author::after { content: "•"; margin: 0 var(--space-2); color: var(--slate-line-2); }
.cu-prose .kg-bookmark-thumbnail { width: 200px; flex: none; position: relative; border-left: 1px solid var(--slate-line); overflow: hidden; }
.cu-prose .kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter var(--motion-duration-slow) var(--motion-easing-standard); }
.cu-prose .kg-bookmark-card:hover .kg-bookmark-thumbnail img { filter: grayscale(0) contrast(1); }
@media (max-width: 620px) {
  .cu-prose .kg-bookmark-container { flex-direction: column-reverse; }
  .cu-prose .kg-bookmark-thumbnail { width: auto; height: 160px; border-left: 0; border-bottom: 1px solid var(--slate-line); }
}

/* ==========================================================================
   TOGGLE — accordion. Hairline frame, mono-free heading, molten chevron.
   ========================================================================== */
.cu-prose .kg-toggle-card {
  border: 1px solid var(--slate-line); background: var(--surface-e1);
  padding: var(--space-5) var(--space-6);
}
.cu-prose .kg-toggle-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; }
.cu-prose .kg-toggle-heading-text { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-md); color: var(--bone); margin: 0; }
.cu-prose .kg-toggle-card-icon,
.cu-prose .kg-toggle-arrow { width: 18px; height: 18px; flex: none; color: var(--molten); transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.cu-prose .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon,
.cu-prose .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-arrow { transform: rotate(180deg); }
.cu-prose .kg-toggle-content { color: var(--bone-dim); font-size: var(--font-size-base); line-height: var(--line-height-normal); margin-top: var(--space-4); }
.cu-prose .kg-toggle-content a { color: var(--molten); }

/* ==========================================================================
   FILE — download card → .cu-file aesthetic.
   ========================================================================== */
.cu-prose .kg-file-card a,
.cu-prose .kg-file-card-container {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--slate-line); background: var(--surface-e1);
  color: inherit; text-decoration: none;
  transition: border-color var(--motion-duration-base) var(--motion-easing-standard);
}
.cu-prose .kg-file-card a:hover { border-color: rgba(255,74,23,0.5); }
.cu-prose .kg-file-card-contents { min-width: 0; display: grid; gap: 2px; }
.cu-prose .kg-file-card-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); color: var(--bone); }
.cu-prose .kg-file-card-caption { font-size: var(--font-size-xs); color: var(--bone-dim); }
.cu-prose .kg-file-card-metadata { display: flex; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.cu-prose .kg-file-card-filename { color: var(--ash); }
.cu-prose .kg-file-card-icon { width: 24px; height: 24px; color: var(--molten); }

/* ==========================================================================
   PRODUCT — promo card → .cu-product aesthetic.
   ========================================================================== */
.cu-prose .kg-product-card-container {
  border: 1px solid var(--slate-line); background: var(--surface-e1);
  display: grid; gap: var(--space-4); padding: var(--space-6);
}
.cu-prose .kg-product-card-image { width: 100%; border: 1px solid var(--slate-line); filter: grayscale(0.4); transition: filter var(--motion-duration-slow); }
.cu-prose .kg-product-card-container:hover .kg-product-card-image { filter: grayscale(0); }
.cu-prose .kg-product-card-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-lg); color: var(--bone); letter-spacing: -0.01em; }
.cu-prose .kg-product-card-description { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); }
.cu-prose .kg-product-card-button {
  justify-self: start; padding: var(--space-3) var(--space-5);
  background: var(--molten); color: var(--ink, #0E0E10); border: 1px solid var(--molten);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm);
  letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0;
}
.cu-prose .kg-product-card-button:hover { background: var(--molten-hot); border-color: var(--molten-hot); }
.cu-prose .kg-product-card-rating { color: var(--halo); }

/* ==========================================================================
   HEADER — chapter-break banner → .cu-headercard aesthetic.
   ========================================================================== */
.cu-prose .kg-header-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(48px, 8vw, 104px) clamp(28px, 5vw, 72px);
  background: var(--void-deep); border: 1px solid var(--slate-line);
  display: grid; gap: var(--space-4); justify-items: start; text-align: left;
  background-size: cover; background-position: center;
}
.cu-prose .kg-header-card.kg-align-center { justify-items: center; text-align: center; }
.cu-prose .kg-header-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 140% at 20% 0%, rgba(255,74,23,0.12), transparent 55%), linear-gradient(180deg, rgba(7,7,8,0.4), rgba(7,7,8,0.78));
}
.cu-prose .kg-header-card-heading,
.cu-prose .kg-header-card-header { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; color: var(--bone); letter-spacing: -0.02em; }
.cu-prose .kg-header-card-subheading,
.cu-prose .kg-header-card-subheader { font-size: var(--font-size-md); color: var(--bone-dim); line-height: var(--line-height-normal); max-width: 52ch; }
/* Ghost's light/dark header-card style flags — keep text legible on our bed. */
.cu-prose .kg-header-card.kg-style-light .kg-header-card-heading,
.cu-prose .kg-header-card.kg-style-light .kg-header-card-header,
.cu-prose .kg-header-card.kg-style-dark .kg-header-card-heading,
.cu-prose .kg-header-card.kg-style-dark .kg-header-card-header { color: var(--bone); }
.cu-prose .kg-header-card-button {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-5);
  background: var(--molten); color: var(--ink, #0E0E10); border: 1px solid var(--molten);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm);
  letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0;
}
.cu-prose .kg-header-card-button:hover { background: var(--molten-hot); border-color: var(--molten-hot); }

/* ==========================================================================
   SIGNUP — in-content newsletter card → .cu-subscribe aesthetic.
   ========================================================================== */
.cu-prose .kg-signup-card {
  border: 1px solid var(--slate-line); background: var(--surface-e1);
  border-radius: 0;
}
.cu-prose .kg-signup-card-heading { font-family: var(--font-display); color: var(--bone); letter-spacing: -0.015em; }
.cu-prose .kg-signup-card-subheading { color: var(--bone-dim); }
.cu-prose .kg-signup-card-input {
  background: var(--slate-2); border: 1px solid var(--slate-line); color: var(--bone); border-radius: 0;
}
.cu-prose .kg-signup-card-button {
  background: var(--molten); color: var(--ink, #0E0E10); border-radius: 0;
  font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.cu-prose .kg-signup-card-success { color: var(--verdant); }

/* ==========================================================================
   EMBED — keep responsive; frame any iframe with a hairline.
   ========================================================================== */
.cu-prose .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.cu-prose .kg-embed-card iframe { max-width: 100%; border: 1px solid var(--slate-line); }

/* ==========================================================================
   CODE BLOCK — Ghost emits <pre><code class="language-x">. Frame it like
   .cu-codeblock (cu-editorial styles inline <code> only).
   ========================================================================== */
.cu-prose pre {
  margin-block: var(--space-6);
  padding: var(--space-5);
  overflow-x: auto;
  background: var(--surface-e1);
  border: 1px solid var(--slate-line);
  box-shadow: var(--shadow-e1);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--bone-dim);
}
.cu-prose pre code {
  background: none; border: 0; padding: 0;
  color: inherit; font-size: inherit;
}

/* ==========================================================================
   BLOCKQUOTE — Ghost emits a bare <blockquote> (and .kg-blockquote-alt for the
   big pull-quote). Map them to the editorial blockquote treatment.
   ========================================================================== */
.cu-prose blockquote:not(.kg-blockquote-alt) {
  border-left: 2px solid var(--molten);
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  margin-block: var(--space-6);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--font-size-xl); line-height: 1.4; color: var(--bone);
}
.cu-prose blockquote.kg-blockquote-alt {
  border: 0; padding: 0; margin-block: var(--space-8);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.18;
  letter-spacing: -0.01em; color: var(--bone); text-align: center;
}

/* ==========================================================================
   NATIVE MEMBERS PAYWALL — Ghost auto-injects .gh-post-upgrade-cta at the end
   of a gated post's teaser. By default it paints in Ghost's accent colour (the
   teal box in production). Re-skin it as the CreationUnited members gate:
   dark substrate, molten edge + bloom, square, on-brand type. This is the
   SINGLE paywall now (the duplicate custom .cu-gate card was removed).
   ========================================================================== */
.gh-post-upgrade-cta {
  position: relative; overflow: hidden; isolation: isolate;
  margin-block: var(--space-12);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px);
  background: var(--void-deep) !important;
  border: 1px solid var(--slate-line-2);
  border-radius: 0 !important;
  box-shadow: var(--shadow-e3);
  color: var(--bone);
}
.gh-post-upgrade-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,74,23,0.20), transparent 58%),
    radial-gradient(80% 60% at 50% 120%, rgba(255,74,23,0.08), transparent 60%);
}
.gh-post-upgrade-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, rgba(237,237,239,0.04) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(237,237,239,0.04) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
}
/* Kill the default accent (teal) fill + rounded corners on the inner content
   box and any nested wrapper Ghost paints with --ghost-accent-color, so only
   our dark gate shows through. */
.gh-post-upgrade-cta-content,
.gh-post-upgrade-cta > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.gh-post-upgrade-cta-content { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: var(--space-4); max-width: 560px; margin-inline: auto; padding: 0 !important; }
.gh-post-upgrade-cta h2,
.gh-post-upgrade-cta-content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--bone); margin: 0;
}
.gh-post-upgrade-cta p,
.gh-post-upgrade-cta-content p { font-size: var(--font-size-base); color: var(--bone-dim); line-height: var(--line-height-normal); max-width: 42ch; margin: 0; }
.gh-post-upgrade-cta .gh-btn,
.gh-post-upgrade-cta-button,
.gh-post-upgrade-cta a[href*="portal"]:not([href*="signin"]) {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--molten) !important; color: var(--ink, #0E0E10) !important;
  border: 1px solid var(--molten); border-radius: 0 !important;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm);
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  transition: background var(--motion-duration-base) var(--motion-easing-standard);
}
.gh-post-upgrade-cta .gh-btn:hover,
.gh-post-upgrade-cta-button:hover { background: var(--molten-hot) !important; }
.gh-post-upgrade-cta a { color: var(--molten); }

/* Reduced motion — media transforms off inside cards. */
@media (prefers-reduced-motion: reduce) {
  .cu-prose .kg-image-card img,
  .cu-prose .kg-gallery-image img,
  .cu-prose .kg-product-card-image,
  .cu-prose .kg-btn,
  .cu-prose .kg-toggle-card-icon,
  .cu-prose .kg-toggle-arrow { transition: none; }
  .cu-prose .kg-btn:hover { transform: none; }
  .cu-prose .kg-gallery-image:hover img { transform: none; }
}


/* ----- blog.css -------------------------------------------------------------- */
/* ==========================================================================
   CreationUnited Blog — blog.css
   Blog-specific layout layer. Imported LAST, on top of the design-system
   foundation + editorial sheet. Everything here obeys the house laws:
     · radius 0 on every surface (only true dots/avatars round)
     · hairlines in --slate-line; molten emitted as LIGHT / EDGE, never a fill
     · mono eyebrows + labels, tracked wide and uppercased
     · grayscale media that lifts to color on hover
     · all motion gated behind prefers-reduced-motion
   Reuses DS components wherever one exists (.cu-chip, .cu-card, .cu-prose,
   .cu-figure, .cu-toc, .cu-subscribe, .cu-stat, .cu-field, .cu-search …) and
   only adds what the blog uniquely needs: post cards + grids, article header,
   bylines, author surfaces, listing/category headers, pagination, page heroes.
   ========================================================================== */

/* ==========================================================================
   PAGE FRAME — every blog page is .cu-themed on <body>; main content sits in
   .blog-main. A shared container keeps gutters identical to the site chrome.
   ========================================================================== */
/* overflow-x: clip contains full-bleed children (.kg-width-full /
   .cu-figure--full use width:100vw, which is 1 scrollbar-width wider than the
   content area and would otherwise add a horizontal scrollbar). `clip` does
   not create a scroll container, so the sticky site header (a sibling outside
   <main>) is unaffected. */
.blog-main { display: block; overflow-x: clip; }

.blog-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-sm);
}
@media (min-width: 768px) { .blog-container { padding-inline: var(--container-gutter-md); } }
@media (min-width: 1024px){ .blog-container { padding-inline: var(--container-gutter-lg); } }

.blog-container--narrow { max-width: 820px; }

.blog-section { padding-block: clamp(var(--space-16), 7vw, var(--space-24)); }
.blog-section--tight { padding-block: clamp(var(--space-12), 5vw, var(--space-16)); }
.blog-section + .blog-section { border-top: 1px solid var(--slate-line); }
.blog-section--alt { background: var(--surface-e1); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-max);
  background: var(--molten); color: var(--ink);
  padding: var(--space-3) var(--space-5); font-family: var(--font-mono);
  font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ==========================================================================
   PLACEHOLDER MEDIA — the reference ships without photography, so every media
   slot uses an on-brand generated bed: a tonal gradient keyed to the post's
   category accent, a faint structural grid, and a mono tag. Reads as
   intentional art direction rather than a broken <img>. Set the accent with
   data-accent on the .cu-ph element (ion|flux|halo|verdant|rose|molten|…).
   ========================================================================== */
.cu-ph {
  --ph: var(--molten);
  position: relative; display: block; width: 100%; height: 100%;
  background:
    radial-gradient(120% 140% at 18% 12%, color-mix(in srgb, var(--ph) 26%, transparent), transparent 52%),
    radial-gradient(90% 80% at 88% 90%, color-mix(in srgb, var(--ph) 14%, transparent), transparent 60%),
    linear-gradient(135deg, var(--slate-3), var(--void-deep));
  overflow: hidden; isolation: isolate;
}
.cu-ph::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(237,237,239,0.045) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(237,237,239,0.045) 0 1px, transparent 1px 30px);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000, transparent 82%);
          mask-image: radial-gradient(80% 80% at 50% 45%, #000, transparent 82%);
}
.cu-ph::after {
  content: attr(data-label);
  position: absolute; left: var(--space-4); bottom: var(--space-3); z-index: 1;
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim);
}
.cu-ph[data-accent="ion"]     { --ph: var(--ion); }
.cu-ph[data-accent="flux"]    { --ph: var(--flux); }
.cu-ph[data-accent="halo"]    { --ph: var(--halo); }
.cu-ph[data-accent="verdant"] { --ph: var(--verdant); }
.cu-ph[data-accent="rose"]    { --ph: var(--rose); }
.cu-ph[data-accent="teal"]    { --ph: var(--teal); }
.cu-ph[data-accent="indigo"]  { --ph: var(--indigo); }
.cu-ph[data-accent="magenta"] { --ph: var(--magenta); }
.cu-ph[data-accent="molten"]  { --ph: var(--molten); }

/* ==========================================================================
   SECTION HEAD — eyebrow + title on the left, a "view all" index link on the
   right. The backbone of every magazine block.
   ========================================================================== */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  padding-bottom: var(--space-6); margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--slate-line);
}
.section-head__lede { display: grid; gap: var(--space-3); max-width: 60ch; }
.section-head__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--bone);
}
.section-head__more {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
  display: inline-flex; align-items: center; gap: var(--space-2);
  white-space: nowrap; transition: color var(--motion-duration-fast);
}
.section-head__more:hover { color: var(--molten); }
.section-head__more svg { width: 14px; height: 14px; }

/* ==========================================================================
   BYLINE — the mono meta line that rides under every title: author avatar +
   name · date · read-time. The atom of editorial trust.
   ========================================================================== */
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  overflow: hidden; background: var(--slate-3); border: 1px solid var(--slate-line);
  display: grid; place-items: center; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); }
.avatar__initials {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--bone-dim); text-transform: uppercase;
}
.avatar--lg { width: 56px; height: 56px; }
.avatar--xl { width: 96px; height: 96px; }
.avatar--xl .avatar__initials { font-size: 1.4rem; }

.byline {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.08em; color: var(--ash); flex-wrap: wrap;
}
.byline__who { color: var(--bone-dim); }
.byline__who a { color: var(--bone-dim); }
.byline__who a:hover { color: var(--molten); }
.byline__sep { color: var(--slate-line-2); }
.byline__meta { display: inline-flex; align-items: center; gap: var(--space-3); }
.byline--stacked { align-items: flex-start; }

/* ==========================================================================
   POST CARD — the workhorse. Media bed (grayscale→color), category chip,
   title that warms to molten on hover, excerpt, byline foot. Whole card is a
   link via the stretched ::after on .post-card__link.
   ========================================================================== */
.post-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-e1); border: 1px solid var(--slate-line);
  box-shadow: var(--shadow-e1); isolation: isolate;
  transition: border-color var(--motion-duration-base) var(--motion-easing-standard),
              box-shadow var(--motion-duration-base) var(--motion-easing-standard),
              transform var(--motion-duration-base) var(--motion-easing-standard);
}
.post-card:hover { border-color: var(--slate-line-2); box-shadow: var(--shadow-e2); transform: translateY(-2px); }
.post-card:focus-within { border-color: rgba(255,74,23,0.5); }

.post-card__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--slate-3); border-bottom: 1px solid var(--slate-line);
}
.post-card__media img, .post-card__media .cu-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.85) contrast(1.05);
  transition: filter var(--motion-duration-slow) var(--motion-easing-standard),
              transform var(--motion-duration-slow) var(--motion-easing-standard);
}
.post-card:hover .post-card__media img, .post-card:hover .post-card__media .cu-ph {
  filter: grayscale(0) contrast(1); transform: scale(1.03);
}
.post-card__tag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; }

.post-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
/* .post-card__kicker is defined once in _ghost-compat.css (it must add
   text-decoration:none / inline-block for the Ghost <a> variant). That rule
   is identical in every other property and uses --color-text-subtle (== --ash),
   so the former duplicate here was redundant and has been removed. */
.post-card__title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--font-size-xl); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--bone); transition: color var(--motion-duration-fast);
}
.post-card:hover .post-card__title { color: var(--molten); }
.post-card__excerpt {
  font-size: var(--font-size-sm); line-height: var(--line-height-normal);
  color: var(--bone-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__foot { margin-top: auto; padding-top: var(--space-4); }
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Feature variant — large, used at the top of grids */
.post-card--feature .post-card__media { aspect-ratio: 16 / 9; }
.post-card--feature .post-card__title { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.post-card--feature .post-card__excerpt { -webkit-line-clamp: 4; font-size: var(--font-size-base); }

/* Horizontal variant — media beside body (used in lists / related) */
.post-card--row { flex-direction: row; }
.post-card--row .post-card__media { width: 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--slate-line); }
@media (max-width: 640px) {
  .post-card--row { flex-direction: column; }
  .post-card--row .post-card__media { width: auto; aspect-ratio: 16/10; border-right: 0; border-bottom: 1px solid var(--slate-line); }
}

/* Minimal variant — no media, hairline rule, used in dense rails */
.post-card--bare { background: transparent; border: 0; box-shadow: none; padding-block: var(--space-5); border-bottom: 1px solid var(--slate-line); }
.post-card--bare:hover { transform: none; box-shadow: none; border-color: var(--slate-line); }
.post-card--bare .post-card__body { padding: 0; }

/* ==========================================================================
   POST GRID — responsive auto-fit grid of cards.
   ========================================================================== */
.post-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.post-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .post-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   MAGAZINE HERO — the homepage lead. A dominant feature on the left, two
   stacked secondary stories on the right. Collapses to a single column.
   ========================================================================== */
.mag-hero { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) { .mag-hero { grid-template-columns: 1.6fr 1fr; } }
.mag-hero__side { display: grid; gap: var(--space-6); align-content: start; }

/* Lead intro — eyebrow + oversized title for the blog landing */
.blog-lede { padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-10); }
.blog-lede__eyebrow { margin-bottom: var(--space-5); }
.blog-lede__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--bone); max-width: 16ch;
}
.blog-lede__title em { font-style: italic; color: var(--molten); }
.blog-lede__deck {
  margin-top: var(--space-6); max-width: 56ch;
  font-size: var(--font-size-lg); line-height: var(--line-height-normal); color: var(--bone-dim);
}

/* ==========================================================================
   TOPIC RAIL — horizontal scroll of category chips / pills under the hero.
   ========================================================================== */
.topic-rail {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
  padding-block: var(--space-6); border-block: 1px solid var(--slate-line);
}
.topic-rail__label {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash-dim);
  margin-right: var(--space-2);
}
.topic-chip {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash);
  border: 1px solid var(--slate-line); padding: 0.4rem 0.8rem;
  transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast), background var(--motion-duration-fast);
}
.topic-chip:hover { color: var(--molten); border-color: var(--molten-tint); background: var(--molten-wash); }
.topic-chip[aria-current="page"], .topic-chip--active { color: var(--molten); border-color: var(--molten); }

/* ==========================================================================
   PAGE HERO — generic interior header (about, contact, search, author, tag).
   Eyebrow + display title + deck, hairline rule beneath.
   ========================================================================== */
.page-hero { padding-block: clamp(var(--space-16), 8vw, var(--space-32)) clamp(var(--space-10), 5vw, var(--space-16)); border-bottom: 1px solid var(--slate-line); position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 120% at 12% -10%, rgba(255,74,23,0.10), transparent 55%);
}
.page-hero__eyebrow { margin-bottom: var(--space-5); }
.page-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--bone); max-width: 18ch;
}
.page-hero__title em { font-style: italic; color: var(--molten); }
.page-hero__deck { margin-top: var(--space-6); max-width: 60ch; font-size: var(--font-size-lg); line-height: var(--line-height-normal); color: var(--bone-dim); }

/* ==========================================================================
   ARTICLE — single post. Centered hero (eyebrow category, display title,
   deck, byline) over an optional media bed, then a two-column body+aside.
   ========================================================================== */
.article-hero { padding-block: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-10); position: relative; overflow: hidden; }
.article-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 50% -10%, rgba(255,74,23,0.10), transparent 60%);
}
.article-hero__inner { max-width: 820px; margin-inline: auto; display: grid; gap: var(--space-6); text-align: center; justify-items: center; }
.article-hero__cat { }
.article-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--bone); max-width: 22ch;
}
.article-hero__deck { font-size: var(--font-size-xl); line-height: var(--line-height-snug); color: var(--bone-dim); max-width: 54ch; font-family: var(--font-display); font-style: italic; }
.article-hero__byline { margin-top: var(--space-2); }

.article-cover { margin-block: var(--space-10); }
.article-cover .cu-figure__media { aspect-ratio: 21 / 9; }

/* CENTERED CONTENT CANVAS — the proven Ghost/Source pattern. Direct children
   sit in a centered reading measure; editor images tagged .kg-width-wide /
   .kg-width-full (and our .cu-figure--wide / --full) break out symmetrically
   to the wide / full grid tracks. Intrinsically responsive via min() + 1fr
   gutters, so content stays centered at every viewport with no negative-margin
   overflow that used to cut images off the left edge. */
.cu-canvas {
  max-width: none; /* never let .cu-prose's 68ch measure shrink the grid */
  --cu-content-width: 720px;
  --cu-container-width: var(--container-max);
  --gap: max(4vmin, var(--space-6));
  --main: min(var(--cu-content-width), 100% - var(--gap) * 2);
  --wide: minmax(0, calc((var(--cu-container-width) - var(--cu-content-width)) / 2));
  --full: minmax(var(--gap), 1fr);
  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [wide-start] var(--wide)
    [main-start] var(--main) [main-end]
    var(--wide) [wide-end]
    var(--full) [full-end];
}
.cu-canvas--narrow { --cu-content-width: 600px; }
.cu-canvas > * { grid-column: main-start / main-end; min-width: 0; }
.cu-canvas > .kg-width-wide,
.cu-canvas > .cu-figure--wide { grid-column: wide-start / wide-end; }
.cu-canvas > .kg-width-full,
.cu-canvas > .cu-figure--full { grid-column: full-start / full-end; }
/* Neutralise the legacy negative-margin / translateX breakout hacks when a
   figure sits inside the canvas — the grid now owns placement. */
.cu-canvas > .kg-width-wide,
.cu-canvas > .kg-width-full,
.cu-canvas > .cu-figure--wide,
.cu-canvas > .cu-figure--full {
  width: 100%; max-width: 100%; margin-inline: 0; left: auto; right: auto; transform: none;
}
.cu-canvas > .kg-width-full img { width: 100%; }

/* Article layout — a full-width relative container; the body IS the canvas
   (always centered), and the TOC floats in the left gutter on wide screens so
   it never pushes the reading column off-centre. */
.article-layout { position: relative; }
.article-body.cu-canvas { max-width: none; }
.article-aside { display: none; }
@media (min-width: 1300px) {
  .article-aside {
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    left: max(var(--space-6), calc(50% - (var(--cu-content-width, 720px) / 2) - 240px));
    width: 200px;
  }
  .article-aside .cu-toc { position: sticky; top: 96px; }
}

/* Article foot — tags + author bio + share */
.article-foot { max-width: 68ch; margin: var(--space-16) auto 0; padding-top: var(--space-10); border-top: 1px solid var(--slate-line); display: grid; gap: var(--space-10); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share-row { display: flex; align-items: center; gap: var(--space-3); }
.share-row__label { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.share-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--slate-line); color: var(--ash); transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast); }
.share-btn:hover { color: var(--molten); border-color: var(--molten); }
.share-btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   AUTHOR BIO — byline expansion at the foot of an article and on author cards.
   ========================================================================== */
.author-bio { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding: var(--space-6); border: 1px solid var(--slate-line); background: var(--surface-e1); }
.author-bio__name { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-lg); color: var(--bone); }
.author-bio__role { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--molten); margin-top: 2px; }
.author-bio__text { margin-top: var(--space-3); font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--bone-dim); }
.author-bio__links { margin-top: var(--space-4); display: flex; gap: var(--space-4); }
.author-bio__links a { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.author-bio__links a:hover { color: var(--molten); }
@media (max-width: 540px){ .author-bio { grid-template-columns: 1fr; } }

/* Author profile hero */
.author-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; padding-block: clamp(var(--space-16),7vw,var(--space-24)); }
.author-hero__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem,5vw,3.25rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--bone); }
.author-hero__role { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--molten); margin-top: var(--space-3); }
.author-hero__bio { margin-top: var(--space-5); max-width: 56ch; font-size: var(--font-size-md); line-height: var(--line-height-normal); color: var(--bone-dim); }
.author-hero__meta { margin-top: var(--space-6); display: flex; gap: var(--space-6); flex-wrap: wrap; }
@media (max-width: 640px){ .author-hero { grid-template-columns: 1fr; gap: var(--space-6); text-align: left; } }

/* Author directory card */
.author-card { display: grid; gap: var(--space-4); justify-items: center; text-align: center; padding: var(--space-8) var(--space-6); border: 1px solid var(--slate-line); background: var(--surface-e1); transition: border-color var(--motion-duration-base), box-shadow var(--motion-duration-base); }
.author-card:hover { border-color: var(--slate-line-2); box-shadow: var(--shadow-e2); }
.author-card__name { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-lg); color: var(--bone); }
.author-card__role { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--molten); }
.author-card__count { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }

/* ==========================================================================
   PAGINATION — mono numerals, hairline frame, molten active page.
   ========================================================================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-16); flex-wrap: wrap; }
.pagination__link, .pagination__current {
  min-width: 42px; height: 42px; padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--font-size-sm); letter-spacing: 0.05em;
  border: 1px solid var(--slate-line); color: var(--ash);
  transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast), background var(--motion-duration-fast);
}
.pagination__link:hover { color: var(--bone); border-color: var(--slate-line-2); }
.pagination__current { color: var(--molten); border-color: var(--molten); background: var(--molten-wash); }
.pagination__gap { color: var(--ash-dim); padding-inline: var(--space-1); }
.pagination__edge { gap: var(--space-2); }

/* ==========================================================================
   STAT / VALUE GRID — about page. Composes DS .cu-stat.
   ========================================================================== */
.stat-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px){ .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.value-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px){ .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { padding: var(--space-8) var(--space-6); border: 1px solid var(--slate-line); background: var(--surface-e1); display: grid; gap: var(--space-3); }
.value-card__num { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; color: var(--molten); }
.value-card__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-lg); color: var(--bone); }
.value-card__text { font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--bone-dim); }

/* ==========================================================================
   CONTACT — two-column: form + meta rail.
   ========================================================================== */
.contact-grid { display: grid; gap: var(--space-12); grid-template-columns: 1fr; }
@media (min-width: 900px){ .contact-grid { grid-template-columns: 1.4fr 1fr; } }
.contact-form { display: grid; gap: var(--space-5); }
.contact-form__row { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 600px){ .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-meta { display: grid; gap: var(--space-8); align-content: start; }
.contact-meta__block { display: grid; gap: var(--space-2); }
.contact-meta__label { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.contact-meta__value { font-size: var(--font-size-md); color: var(--bone); }
.contact-meta__value a:hover { color: var(--molten); }
.cu-textarea {
  width: 100%; min-height: 160px; resize: vertical; padding: 0.85rem 1rem;
  background: var(--slate-2); border: 1px solid var(--slate-line); color: var(--bone);
  font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-normal);
  transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast);
}
.cu-textarea::placeholder { color: var(--ash-dim); }
.cu-textarea:focus { outline: none; border-color: var(--molten); box-shadow: inset 0 0 0 1px var(--molten); }

/* ==========================================================================
   SEARCH — mocked results page. Big field + result rows.
   ========================================================================== */
.search-hero { padding-block: clamp(var(--space-16),7vw,var(--space-24)) var(--space-10); }
.search-bar { display: flex; gap: var(--space-2); max-width: 640px; margin-top: var(--space-6); }
.search-bar .cu-input { flex: 1; }
.search-meta { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); margin-top: var(--space-5); }
.search-meta b { color: var(--bone); font-weight: 500; }
.result-list { display: grid; gap: 0; border-top: 1px solid var(--slate-line); }
.result-row { position: relative; display: grid; gap: var(--space-2); padding: var(--space-6) 0; border-bottom: 1px solid var(--slate-line); }
.result-row__cat { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.result-row__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-xl); color: var(--bone); letter-spacing: -0.015em; transition: color var(--motion-duration-fast); }
.result-row:hover .result-row__title { color: var(--molten); }
.result-row__snippet { font-size: var(--font-size-sm); color: var(--bone-dim); line-height: var(--line-height-normal); max-width: 70ch; }
.result-row__snippet mark { background: var(--molten-tint); color: var(--molten-hot); padding: 0 0.2em; }
.result-row__link::after { content:""; position:absolute; inset:0; }

/* ==========================================================================
   404 — centered, oversized mono code + molten bloom.
   ========================================================================== */
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--space-24); position: relative; overflow: hidden; }
.error-page::after { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(60% 60% at 50% 30%, rgba(255,74,23,0.12), transparent 60%); }
.error-page__code { font-family: var(--font-mono); font-weight: 500; font-size: clamp(5rem, 18vw, 12rem); line-height: 1; color: var(--bone); letter-spacing: -0.04em; }
.error-page__code b { color: var(--molten); font-weight: 500; }
.error-page__title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.5rem); color: var(--bone); margin-top: var(--space-4); }
/* Scoped (.error-page descendant) so the auto side-margins out-specify the
   `.cu-themed p { margin: 0 }` reset and actually centre the deck. */
.error-page .error-page__text { margin-top: var(--space-4); color: var(--bone-dim); max-width: 46ch; margin-inline: auto; }
.error-page__actions { margin-top: var(--space-8); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   FEATURED STRIP — small "editor's pick" ribbon used on cards.
   ========================================================================== */
.ribbon { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--molten); }
.ribbon::before { content: ""; width: 18px; height: 1px; background: var(--molten); }

/* ==========================================================================
   PROSE TWEAKS — placement is now owned by the .cu-canvas grid (see above);
   no negative-margin breakout hacks here anymore.
   ========================================================================== */

/* Reduced motion — nuke card lifts + media scale */
@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card__media img, .post-card__media .cu-ph,
  .author-card { transition: none; }
  .post-card:hover { transform: none; }
  .post-card:hover .post-card__media img, .post-card:hover .post-card__media .cu-ph { transform: none; }
}

/* ==========================================================================
   SUBSCRIBE BLOCK — sits inside a .blog-section, which already provides the
   vertical rhythm. The DS .cu-subscribe carries its own margin-block for
   standalone use; inside a section that doubled the gap and pushed the card
   off-centre. Zero the card margin so the section padding alone governs the
   spacing, and centre the content for the newsletter call-out.
   ========================================================================== */
/* The card already carries its own internal padding + framing, so inside a
   section it must NOT also add the standalone margin-block (that produced the
   tall, off-centre gap). Section padding alone governs the rhythm. */
#subscribe.blog-section { padding-block: clamp(var(--space-12), 5vw, var(--space-16)); }
.blog-section .cu-subscribe { margin-block: 0; }
.cu-subscribe--center {
  max-width: 680px;
  margin-inline: auto;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.cu-subscribe--center .cu-subscribe__text { margin-inline: auto; }
.cu-subscribe--center .cu-subscribe__form { justify-content: center; width: 100%; max-width: 480px; }
/* Centre the molten bloom over the top of the card so a centred layout reads
   balanced (the default bloom sits in the top-right corner). */
.cu-subscribe--center::before { left: 50%; right: auto; top: -45%; transform: translateX(-50%); }

/* ==========================================================================
   POST → RELATED separation — the article body ends with the author bio box;
   without a clear gap the bio card read as "stuck" to the alt-toned
   "Keep reading" section that follows. Give the post article a generous
   bottom rhythm and a hairline rule into the next section.
   ========================================================================== */
.blog-main > article { padding-bottom: clamp(var(--space-12), 5vw, var(--space-16)); }
.blog-main > article + .blog-section { border-top: 1px solid var(--slate-line); }


/* ----- _ghost-compat.css ----------------------------------------------------- */
/* ==========================================================================
   _ghost-compat.css — Overrides for Ghost's helper output.

   The static reference ships its nav as a flat list of <a> tags. Ghost's
   {{navigation}} helper outputs <ul class="nav"><li class="nav-..."><a>.
   The rules below normalise the Ghost output so the visual layout stays
   identical without any extra markup.
   ========================================================================== */

/* Primary nav (desktop) */
.cu-header__nav ul.nav,
.cu-mobile-drawer__list ul.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cu-mobile-drawer__list ul.nav {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cu-header__nav ul.nav li,
.cu-mobile-drawer__list ul.nav li {
  list-style: none;
}
.cu-header__nav ul.nav a {
  position: relative;
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--motion-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}
.cu-header__nav ul.nav a:hover { color: var(--color-text-default); }
.cu-header__nav ul.nav li:nth-child(n+2) a { margin-left: 0; }
.cu-header__nav ul.nav a[aria-current="page"],
.cu-header__nav ul.nav a[aria-current="true"] {
  color: var(--color-text-default);
}
.cu-header__nav ul.nav a[aria-current="page"]::after,
.cu-header__nav ul.nav a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 1px;
  background: var(--color-accent-default);
}

/* Mobile drawer nav — match the big editorial treatment of the static
   fallback links (.cu-mobile-drawer__link) so a Ghost-configured nav reads
   the same as the out-of-the-box one. */
.cu-mobile-drawer__list ul.nav a {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-default);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-default);
}
.cu-mobile-drawer__list ul.nav a:hover { color: var(--color-accent-default); }
.cu-mobile-drawer__list ul.nav a[aria-current="page"],
.cu-mobile-drawer__list ul.nav a[aria-current="true"] {
  color: var(--color-accent-default);
}

/* Hide the static fallback links ONLY when a Ghost nav is present.
   {{navigation}} renders <ul class="nav"> with class-less <a> children; the
   fallback anchors carry their own classes (cu-header__nav-link--fallback /
   cu-mobile-drawer__link). We must NOT target `a:not([class])` here — that
   also matched the real Ghost nav links inside the drawer and hid the entire
   menu (the bug where the hamburger opened to an empty drawer). */
.cu-header__nav:has(ul.nav) .cu-header__nav-link--fallback,
.cu-mobile-drawer__list:has(ul.nav) > .cu-mobile-drawer__link { display: none; }

/* Footer nav — the static reference uses <ul><li> directly, so the .nav
   override isn't needed; the footer markup is hand-rolled. */

/* Koenig / content cards inside .cu-prose use .kg-* class names. The
   static .cu-editorial.css already styles the .kg-... cards identically
   to its .cu-... siblings, so no further overrides are required. */

/* Ghost's [data-members-form] wrapper — keep the static subscribe
   structure even when memberships are enabled. */
[data-members-form] .cu-subscribe__input {
  background: transparent;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-default);
}

/* Make sure the post-card .post-card__link styles still apply when the
   kicker is the primary_tag's name (instead of a static string). */
.post-card__kicker {
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
  text-decoration: none;
}
.post-card__kicker:hover { color: var(--color-text-default); }

/* ==========================================================================
   Avatar initials — show only the first letter of the author's name.
   Ghost 6 has no built-in `initials` helper, so we render the full name in
   a 1-character wide box and use ::first-letter to expose just the leading
   character. Falls back to readable text for browsers without ::first-letter
   support. */
.avatar__initials,
.cu-avatar__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-text-default);
  background: var(--color-bg-overlay);
  text-transform: uppercase;
  letter-spacing: 0;
  text-overflow: clip;
  overflow: hidden;
  line-height: 1;
}
.avatar__initials::first-letter,
.cu-avatar__initial::first-letter {
  font-size: 1.6em;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .avatar__initials,
  .cu-avatar__initial { transition: none; }
}

/* ==========================================================================
   Koenig editor — required width helpers.
   Ghost 6 / Koenig sets .kg-width-wide and .kg-width-full on <figure>
   elements for wide and full-bleed images. GScan flags these as required.
   They sit inside the .article-body container, so the math matches the
   static reference's max-width: 64rem content column. */
.kg-width-wide {
  position: relative;
  width: 100%;
  max-width: var(--layout-content-width, 64rem);
  margin-left: 50%;
  transform: translateX(-50%);
}
.kg-width-wide img { width: 100%; }
.kg-width-full {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.kg-width-full img { width: 100vw; max-width: 100vw; }

/* Page-narrow layout: tighter content column for long-form pages. */
.blog-container--narrow {
  max-width: var(--layout-content-width-narrow, 44rem);
}

/* Post cover — feature image style. Wide is the default. */
.cu-figure--wide {
  max-width: 100%;
}
.cu-figure--full {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.article-cover--full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}
.cu-figure--standard {
  max-width: var(--layout-content-width, 64rem);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Hide Ghost Portal's floating subscribe button (bottom-right). The Portal
   iframe stays loaded so nav/hamburger Subscribe & Sign in modals still work;
   we hide only the trigger frame, never the popup frame. */
#ghost-portal-root iframe.gh-portal-trigger-iframe,
#ghost-portal-root iframe[title="portal-trigger"],
[data-portal] ~ iframe[title="portal-trigger"] { display: none !important; }