/* Ray Richards Design System — bundled CSS (verbatim from design handoff) */

/* ===== tokens/fonts.css ===== */
/* ===========================================================================
   Ray Richards — Webfonts
   Loaded from Google Fonts. See readme.md "Type" for the rationale.
   - Space Grotesk : distinctive engineered display for headlines + wordmark
   - IBM Plex Sans  : clean, tech-credible body + UI
   - IBM Plex Mono  : eyebrows, metadata, timestamps, code — the "tech" signal
   NOTE: served via Google Fonts CDN. To self-host, drop the woff2 files in
   assets/fonts/ and replace this @import with local @font-face rules.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ===== tokens/colors.css ===== */
/* ===========================================================================
   Ray Richards — Color tokens
   A cool, modern-tech palette: slate-navy ink, clean cool-gray surfaces,
   a confident teal-blue accent. Light-primary with deep-slate dark sections.
   Base ramps first, then semantic aliases (use the aliases in components).
   =========================================================================== */

:root {
  /* --- Surfaces (cool light → deep slate) ------------------------------- */
  --surface-0:  #f6f8fa;  /* page background (cool off-white)              */
  --surface-1:  #ffffff;  /* cards, raised surfaces                        */
  --surface-2:  #eef2f6;  /* wells, code blocks, inset areas               */
  --surface-3:  #e2e9ef;  /* tags, subtle fills, hover wells              */
  --slate-deep: #0f1a24;  /* darkest section bg (hero/footer)             */
  --slate-900:  #14202b;  /* dark section bg                              */
  --slate-800:  #1c2c39;  /* raised on dark                              */

  /* --- Ink (cool slate grays) ------------------------------------------ */
  --ink-900: #14202b;  /* primary text, headlines                         */
  --ink-800: #1f2f3d;  /* strong text                                     */
  --ink-700: #35485a;  /* secondary text                                  */
  --ink-500: #5e7282;  /* muted text, captions                            */
  --ink-400: #8597a5;  /* faint text, disabled                            */
  --ink-300: #b2c0cb;  /* placeholders                                    */
  --ink-on-dark:    #eef3f7;  /* primary text on slate                    */
  --ink-on-dark-mut:#9fb2c0;  /* muted text on slate                      */

  /* --- Hairlines / borders --------------------------------------------- */
  --line-strong: rgba(20, 32, 43, 0.20);
  --line:        rgba(20, 32, 43, 0.12);
  --line-faint:  rgba(20, 32, 43, 0.06);
  --line-on-dark: rgba(238, 243, 247, 0.16);
  --line-on-dark-faint: rgba(238, 243, 247, 0.08);

  /* --- Accent — teal-blue ---------------------------------------------- */
  --teal-800: #1a4e66;  /* deep / active                                  */
  --teal-700: #215a73;  /* pressed                                        */
  --teal-600: #2a647f;  /* hover (darker)                                 */
  --teal-500: #2f6f8f;  /* base accent                                    */
  --teal-400: #3f8aa8;  /* hover (lighter, on dark)                       */
  --teal-300: #79b2c8;  /* soft borders, accents on dark                  */
  --teal-100: #dbe9ef;  /* wash                                           */
  --teal-50:  #eef5f8;  /* faint wash / selection                         */

  /* --- Signal — electric cyan (data, waveforms, "live") — sparingly ---- */
  --cyan-500: #1ba3bd;
  --cyan-400: #34bcd4;
  --cyan-100: #d4f0f4;

  /* --- Semantic status (cool-tuned) ------------------------------------ */
  --green-600: #2e9468;
  --green-100: #d7ece1;
  --amber-600: #bf8312;
  --amber-100: #f6e9c8;
  --red-600:   #d2493f;
  --red-100:   #f6dcd9;

  /* ====================================================================== */
  /* SEMANTIC ALIASES — reach for these in components                       */
  /* ====================================================================== */

  --bg:              var(--surface-0);
  --surface:         var(--surface-1);
  --surface-sunken:  var(--surface-2);
  --surface-tint:    var(--surface-3);
  --surface-invert:  var(--slate-900);
  --surface-invert-deep: var(--slate-deep);
  --surface-invert-raised: var(--slate-800);

  --text:            var(--ink-900);
  --text-secondary:  var(--ink-700);
  --text-muted:      var(--ink-500);
  --text-faint:      var(--ink-400);
  --text-placeholder:var(--ink-300);
  --text-on-accent:  #ffffff;
  --text-on-invert:  var(--ink-on-dark);
  --text-on-invert-muted: var(--ink-on-dark-mut);

  --border:          var(--line);
  --border-strong:   var(--line-strong);
  --border-faint:    var(--line-faint);
  --border-on-invert: var(--line-on-dark);

  --accent:          var(--teal-500);
  --accent-hover:    var(--teal-600);
  --accent-press:    var(--teal-700);
  --accent-on-dark:  var(--teal-400);
  --accent-soft:     var(--teal-100);
  --accent-soft-border: var(--teal-300);

  --link:            var(--teal-600);
  --link-underline:  var(--teal-300);
  --selection:       var(--teal-100);

  --focus-ring:      var(--teal-500);

  --success:         var(--green-600);
  --success-soft:    var(--green-100);
  --warning:         var(--amber-600);
  --warning-soft:    var(--amber-100);
  --danger:          var(--red-600);
  --danger-soft:     var(--red-100);
  --live:            var(--cyan-500);
}

::selection {
  background: var(--selection);
  color: var(--ink-900);
}

/* ===== tokens/typography.css ===== */
/* ===========================================================================
   Ray Richards — Typography tokens
   Sans-serif, modern-tech. Space Grotesk for display/headlines (distinctive,
   engineered), IBM Plex Sans for body + UI (clean, tech-credible), and
   IBM Plex Mono for eyebrows / metadata / timestamps / code — the mono is
   what signals "tech".
   =========================================================================== */

:root {
  /* --- Families --------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* --- Type scale (rem, 16px base) ------------------------------------- */
  --text-2xs:  0.6875rem;  /* 11 — mono micro-labels        */
  --text-xs:   0.75rem;    /* 12 — fine print               */
  --text-sm:   0.875rem;   /* 14 — captions, UI small       */
  --text-base: 1rem;       /* 16 — UI / body default        */
  --text-md:   1.125rem;   /* 18 — article body             */
  --text-lg:   1.375rem;   /* 22 — lead / large UI          */
  --text-xl:   1.75rem;    /* 28 — card titles, H3          */
  --text-2xl:  2.25rem;    /* 36 — H2                       */
  --text-3xl:  2.875rem;   /* 46 — H1 / article title       */
  --text-4xl:  3.75rem;    /* 60 — hero                     */
  --text-5xl:  5rem;       /* 80 — display                  */

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

  /* --- Line heights ----------------------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.05;   /* big display headlines         */
  --leading-snug:    1.18;   /* headings                      */
  --leading-normal:  1.5;    /* UI                            */
  --leading-relaxed: 1.65;   /* article reading               */

  /* --- Letter spacing --------------------------------------------------- */
  --tracking-tighter: -0.035em; /* big display (Space Grotesk) */
  --tracking-tight:   -0.02em;  /* headings                    */
  --tracking-snug:    -0.01em;  /* large UI                    */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-mono:    0.14em;   /* uppercase mono eyebrows     */

  /* --- Reading measure -------------------------------------------------- */
  --measure: 66ch;          /* ideal article line length      */
  --measure-narrow: 52ch;
}

/* ===== tokens/spacing.css ===== */
/* ===========================================================================
   Ray Richards — Spacing & layout tokens
   4px base rhythm. Editorial, generous.
   =========================================================================== */

:root {
  /* --- Spacing scale (4px base) ---------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4   */
  --space-2:   0.5rem;    /* 8   */
  --space-3:   0.75rem;   /* 12  */
  --space-4:   1rem;      /* 16  */
  --space-5:   1.5rem;    /* 24  */
  --space-6:   2rem;      /* 32  */
  --space-7:   2.5rem;    /* 40  */
  --space-8:   3rem;      /* 48  */
  --space-9:   4rem;      /* 64  */
  --space-10:  5rem;      /* 80  */
  --space-11:  6.5rem;    /* 104 */
  --space-12:  8rem;      /* 128 */

  /* --- Layout widths ---------------------------------------------------- */
  --container:       1200px;  /* full site container          */
  --container-wide:  1360px;
  --content:         720px;   /* reading column               */
  --content-narrow:  560px;
  --gutter:          var(--space-6);

  /* --- Header heights --------------------------------------------------- */
  --header-h: 72px;
}

/* ===== tokens/effects.css ===== */
/* ===========================================================================
   Ray Richards — Radius, shadow, border & motion tokens
   Editorial = restrained radii, soft warm shadows, hairline borders.
   =========================================================================== */

:root {
  /* --- Corner radii ----------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   6px;    /* inputs, tags, small controls     */
  --radius-md:   10px;   /* cards, buttons                   */
  --radius-lg:   16px;   /* large cards, media               */
  --radius-xl:   24px;   /* feature panels                   */
  --radius-pill: 999px;  /* chips, avatars, pills            */

  /* --- Border widths ---------------------------------------------------- */
  --border-w:       1px;
  --border-w-thick: 2px;
  --rule-w:         2px;   /* editorial section rules          */

  /* --- Shadows (warm, low, soft) --------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(28, 26, 22, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 26, 22, 0.06), 0 1px 1px rgba(28, 26, 22, 0.04);
  --shadow-md: 0 6px 18px -6px rgba(28, 26, 22, 0.12), 0 2px 5px rgba(28, 26, 22, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(28, 26, 22, 0.18), 0 4px 10px rgba(28, 26, 22, 0.06);
  --shadow-xl: 0 32px 64px -16px rgba(28, 26, 22, 0.24);

  /* inner well for sunken surfaces */
  --shadow-inset: inset 0 1px 2px rgba(28, 26, 22, 0.07);

  /* focus ring */
  --ring: 0 0 0 3px rgba(200, 85, 31, 0.28);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ===========================================================================
   Ray Richards — Base element styling
   Light, opinionated defaults so specimen cards and consumers inherit the
   brand without extra work. Keep this thin; components own their own styles.
   =========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display sans (Space Grotesk) */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; }

/* Links */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); }

/* Eyebrow / kicker utility — uppercase mono */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
}

/* Reading column */
.prose {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--measure);
}
.prose p { margin: 0 0 1.1em; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

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

hr {
  border: 0;
  border-top: var(--rule-w) solid var(--ink-900);
  margin: var(--space-7) 0;
}

.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }

img { max-width: 100%; display: block; }

/* ===== site.css ===== */
/* ===========================================================================
   Ray Richards — Shared site chrome
   Header, status bar, nav, buttons, footer, section headers, cards, utilities.
   Pages link styles.css (tokens) THEN this file, then add page-specific CSS.
   =========================================================================== */

body { background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 40px; }
a { text-decoration: none; color: inherit; }

/* ---- status bar ---- */
.statusbar { background: var(--slate-deep); color: var(--ink-on-dark-mut); }
.statusbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 36px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; }
.statusbar .status-live { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-on-dark); }
.statusbar .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--cyan-400); box-shadow: 0 0 0 3px rgba(52,188,212,0.2); }

/* ---- header ---- */
header.site { border-bottom: 1px solid var(--line-on-dark-faint); background: var(--slate-900);
  position: sticky; top: 0; z-index: 40; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight); color: #fff; }
.brand .slash { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--ink-on-dark-mut); }
nav.main { display: flex; align-items: center; gap: 28px; }
nav.main a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-on-dark-mut);
  transition: color var(--dur-fast) var(--ease-out); }
nav.main a:hover, nav.main a.active { color: #fff; }
nav.main a.active { position: relative; }
nav.main a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 2px; background: var(--accent-on-dark); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600;
  font-size: var(--text-sm); border-radius: var(--radius-md); padding: 10px 18px; cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
  border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface-1); color: var(--ink-900); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost-dark { background: transparent; color: var(--ink-on-dark); border-color: var(--line-on-dark); }
.btn-ghost-dark:hover { background: rgba(238,243,247,0.08); border-color: var(--ink-on-dark-mut); }
.btn-lg { font-size: var(--text-base); padding: 13px 24px; }
.btn-sm { font-size: var(--text-xs); padding: 8px 13px; }

/* ---- section header ---- */
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 30px; }
.sec-head h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; margin: 0;
  letter-spacing: var(--tracking-tight); color: var(--ink-900); }
.sec-head .tag { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--ink-400); }
.sec-head .rule { flex: 1; height: 1px; background: var(--line); }
.sec-head .all { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }

/* ---- eyebrow / chip / meta ---- */
.eyebrow-mono { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--accent); }
.chip { display: inline-block; white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  padding: 3px 9px; border-radius: var(--radius-pill); }
.meta-mono { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-400); letter-spacing: 0.05em; }

/* ---- page intro band (dark) ---- */
.page-intro { background:
    radial-gradient(90% 120% at 85% -20%, rgba(47,111,143,0.26), transparent 60%), var(--slate-900);
  color: var(--ink-on-dark); border-bottom: 1px solid var(--slate-800); position: relative; }
.page-intro::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--accent-on-dark), var(--cyan-400)); }
.page-intro .wrap { padding-top: 56px; padding-bottom: 56px; }
.page-intro h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600;
  letter-spacing: var(--tracking-tight); color: #fff; margin: 18px 0 0; }
.page-intro .lede { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink-on-dark);
  max-width: 54ch; margin: 16px 0 0; }
.page-intro .eyebrow-mono { color: var(--accent-on-dark); display: inline-flex; align-items: center; gap: 10px; }
.page-intro .eyebrow-mono::before { content: ""; width: 24px; height: 1px; background: var(--accent-on-dark); }

/* ---- article/post cards ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.post-card .thumb { aspect-ratio: 16 / 9; background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-faint);
  background-image: repeating-linear-gradient(135deg, rgba(20,32,43,0.025) 0 1px, transparent 1px 11px); }
.post-card .thumb .meta-mono { color: var(--ink-400); }
.post-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card .chip { align-self: flex-start; margin-bottom: 13px; }
.post-card h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.2;
  margin: 0 0 9px; color: var(--ink-900); letter-spacing: var(--tracking-snug); transition: color var(--dur-fast) var(--ease-out); }
.post-card:hover h3 { color: var(--accent); }
.post-card p { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-500); margin: 0 0 16px; }
.post-card .meta { margin-top: auto; }

/* ---- footer ---- */
footer.site { background: var(--slate-deep); color: var(--ink-on-dark-mut); padding: 56px 0 40px; }
footer.site .frow { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
footer.site .mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: #fff; letter-spacing: var(--tracking-tight); }
footer.site .tagline { font-size: var(--text-sm); margin-top: 10px; max-width: 26em; line-height: 1.5; }
footer.site nav { display: flex; gap: 48px; }
footer.site nav .col { display: flex; flex-direction: column; gap: 11px; }
footer.site nav .col .h { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--ink-on-dark); margin-bottom: 3px; }
footer.site nav a { font-size: var(--text-sm); color: var(--ink-on-dark-mut); transition: color var(--dur-fast) var(--ease-out); }
footer.site nav a:hover { color: #fff; }
footer.site .copyright { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-on-dark-faint); display: flex;
  justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; color: var(--ink-on-dark-mut); }

@media (max-width: 900px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  nav.main { gap: 16px; }
  footer.site .frow { flex-direction: column; }
}

/* ===== homepage inline chrome (extracted from Home.html) ===== */
  body { background: var(--bg); color: var(--text); font-family: var(--font-sans); }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
  a { text-decoration: none; color: inherit; }

  /* ---- status bar ---- */
  .statusbar { background: var(--slate-deep); color: var(--ink-on-dark-mut); }
  .statusbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 36px;
    font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; }
  .status-live { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-on-dark); }
  .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--cyan-400); box-shadow: 0 0 0 3px rgba(52,188,212,0.2); }

  /* ---- header ---- */
  header.site { border-bottom: 1px solid var(--line-on-dark-faint); background: var(--slate-900);
    position: sticky; top: 0; z-index: 20; }
  header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .brand { display: flex; align-items: baseline; gap: 10px; }
  .brand .mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight); color: #fff; }
  .brand .slash { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
    text-transform: uppercase; color: var(--ink-on-dark-mut); }
  nav.main { display: flex; align-items: center; gap: 28px; }
  nav.main a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-on-dark-mut); transition: color var(--dur-fast) var(--ease-out); }
  nav.main a:hover { color: #fff; }
  .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600;
    font-size: var(--text-sm); border-radius: var(--radius-md); padding: 10px 18px; cursor: pointer; border: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
  .btn-primary { background: var(--accent); color: var(--text-on-accent); }
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-ghost-dark { background: transparent; color: var(--ink-on-dark); border-color: var(--line-on-dark); }
  .btn-ghost-dark:hover { background: rgba(238,243,247,0.08); border-color: var(--ink-on-dark-mut); }
  .btn-lg { font-size: var(--text-base); padding: 13px 24px; }

  /* ---- hero (image AS hero) ---- */
  .hero { position: relative; min-height: 640px; display: flex; align-items: flex-end;
    background: var(--slate-900); color: var(--ink-on-dark); border-bottom: 1px solid var(--slate-800); overflow: hidden; }
  .hero-media { position: absolute; inset: 0; z-index: 0; }
  .hero-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
  .hero-fallback { position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(90% 90% at 78% 12%, rgba(47,111,143,0.32), transparent 62%),
      linear-gradient(160deg, var(--slate-800), var(--slate-deep));
    background-image:
      radial-gradient(90% 90% at 78% 12%, rgba(47,111,143,0.30), transparent 62%),
      repeating-linear-gradient(135deg, rgba(238,243,247,0.028) 0 1px, transparent 1px 13px),
      linear-gradient(160deg, var(--slate-800), var(--slate-deep));
    display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
    padding: 30px; gap: 12px; color: var(--ink-on-dark-mut); }
  .hero-fallback .hint { display: inline-flex; align-items: center; gap: 10px;
    background: rgba(15,26,36,0.42); border: 1px dashed var(--line-on-dark); border-radius: var(--radius-pill);
    padding: 9px 15px; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
  .hero-fallback .hint svg { width: 16px; height: 16px; color: var(--accent-on-dark); }
  .hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(15,26,36,0.94) 0%, rgba(15,26,36,0.74) 34%, rgba(15,26,36,0.30) 68%, rgba(15,26,36,0.10) 100%),
                linear-gradient(to top, rgba(15,26,36,0.86), transparent 58%); }
  .hero-seam { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 3;
    background: linear-gradient(var(--accent-on-dark), var(--cyan-400)); }
  .hero-inner { position: relative; z-index: 4; width: 100%; }
  .hero-inner .wrap { padding-top: 84px; padding-bottom: 54px; }
  .eyebrow-d { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
    text-transform: uppercase; color: var(--accent-on-dark); display: inline-flex; align-items: center; gap: 10px; }
  .eyebrow-d::before { content: ""; width: 26px; height: 1px; background: var(--accent-on-dark); }
  .hero h1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter); font-weight: 600; color: #fff; margin: 22px 0 0; max-width: 17ch; }
  .hero h1 em { font-style: normal; color: var(--accent-on-dark); }
  .hero .lede { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink-on-dark);
    max-width: 44ch; margin: 22px 0 32px; }
  .hero .cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

  /* hero two-column layout: text left, buttons right */
  .hero-body { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
  .hero-text { flex: 1; min-width: 0; }
  /* remove bottom margin from lede when inside hero-body since buttons are beside it */
  .hero-body .hero-text .lede { margin-bottom: 0; }
  .cta-col { display: flex; flex-direction: row; gap: 14px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }

  .stats { display: flex; gap: 0; margin-top: 44px; border-top: 1px solid var(--line-on-dark); flex-wrap: wrap; }
  .stat { padding: 18px 30px 0 0; margin-right: 30px; border-right: 1px solid var(--line-on-dark-faint); }
  .stat:last-child { border-right: 0; margin-right: 0; }
  .stat .n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: #fff; letter-spacing: var(--tracking-tight); }
  .stat .l { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-on-dark-mut); margin-top: 4px; }

  /* ---- section header ---- */
  section.band { padding: 64px 0; }
  .sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 30px; }
  .sec-head h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; margin: 0;
    letter-spacing: var(--tracking-tight); color: var(--ink-900); }
  .sec-head .tag { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
    text-transform: uppercase; color: var(--ink-400); }
  .sec-head .rule { flex: 1; height: 1px; background: var(--line); }
  .sec-head .all { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
    text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }

  /* ---- article grid ---- */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
  .card .thumb { aspect-ratio: 16 / 9; background: var(--surface-2); display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--line-faint);
    background-image: repeating-linear-gradient(135deg, rgba(20,32,43,0.025) 0 1px, transparent 1px 11px); }
  .card .thumb span { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
    text-transform: uppercase; color: var(--ink-400); }
  .card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
  .chip { align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
    padding: 3px 9px; border-radius: var(--radius-pill); margin-bottom: 13px; }
  .card h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.2;
    margin: 0 0 9px; color: var(--ink-900); letter-spacing: var(--tracking-snug);
    transition: color var(--dur-fast) var(--ease-out); }
  .card:hover h3 { color: var(--accent); }
  .card p { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-500); margin: 0 0 16px; }
  .card .meta { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-400); letter-spacing: 0.05em; }

  /* ---- explore tiles ---- */
  .explore { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .tile { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px;
    display: flex; flex-direction: column; gap: 12px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .tile .ic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--accent-soft);
    color: var(--accent); display: flex; align-items: center; justify-content: center; }
  .tile .ic svg { width: 21px; height: 21px; }
  .tile h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin: 4px 0 0; color: var(--ink-900); }
  .tile p { font-size: var(--text-sm); color: var(--ink-500); margin: 0; line-height: 1.5; }
  .tile .go { margin-top: 4px; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
    text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }

  /* ---- footer ---- */
  footer.site { background: var(--slate-deep); color: var(--ink-on-dark-mut); padding: 56px 0 40px; }
  footer.site .fwrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
  footer.site .frow { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
  footer.site .mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: #fff; letter-spacing: var(--tracking-tight); }
  footer.site .tagline { font-size: var(--text-sm); margin-top: 10px; max-width: 24em; line-height: 1.5; }
  footer.site nav { display: flex; gap: 48px; }
  footer.site nav .col { display: flex; flex-direction: column; gap: 11px; }
  footer.site nav .col .h { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
    text-transform: uppercase; color: var(--ink-on-dark); margin-bottom: 3px; }
  footer.site nav a { font-size: var(--text-sm); color: var(--ink-on-dark-mut); transition: color var(--dur-fast) var(--ease-out); }
  footer.site nav a:hover { color: #fff; }
  .copyright { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-on-dark-faint); display: flex;
    justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; color: var(--ink-on-dark-mut); }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-right { min-height: 320px; }
    .grid-3, .tiles { grid-template-columns: 1fr; }
    /* stack hero text and buttons vertically on mobile */
    .hero-body { flex-direction: column; align-items: flex-start; gap: 28px; }
    .cta-col { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  }