/* ============================================================
   FONTS: Popular theme
   The live site uses Inter as its single workhorse typeface
   (Hinode/Bootstrap theme). Quantico is an OPTIONAL geometric
   display accent that echoes the squared "VANCOUVER" lettering
   in the logo wordmark: use sparingly for hero/section accents.
   Swap or extend these via the brand config or your own fonts.css.

   Both families are served by the site itself from ../fonts/
   (static/fonts/ in Hugo, src/styles/fonts/ in Astro), not from
   fonts.googleapis.com. Serving them from Google hands every
   visitor's IP address to a third party the community never
   chose, which is a GDPR problem in the EU, and the partitioned
   browser cache means it is no faster. See fonts/README.md.

   The url() paths are relative, which is what makes them work
   under a subpath install: they resolve against the stylesheet
   that Hugo concatenates or Vite emits, not against the host
   root. Do not rewrite them as /fonts/... .

   unicode-range keeps the non-latin subsets free: a browser
   downloads only the ones a page actually needs.
   ============================================================ */
/* Inter italic 400 600, cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-italic-400-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter italic 400 600, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-italic-400-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter italic 400 600, greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-italic-400-600-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Inter italic 400 600, greek */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-italic-400-600-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Inter italic 400 600, vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-italic-400-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter italic 400 600, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-italic-400-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter italic 400 600, latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-italic-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter normal 200 800, cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-normal-200-800-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter normal 200 800, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-normal-200-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter normal 200 800, greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-normal-200-800-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Inter normal 200 800, greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-normal-200-800-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Inter normal 200 800, vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-normal-200-800-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter normal 200 800, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-normal-200-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 200 800, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-normal-200-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Quantico italic 400, latin */
@font-face {
  font-family: 'Quantico';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/quantico-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Quantico italic 700, latin */
@font-face {
  font-family: 'Quantico';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/quantico-italic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Quantico normal 400, latin */
@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/quantico-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Quantico normal 700, latin */
@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/quantico-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   COLORS: Popular theme
   The default identity is Popular's own: marquee gold, sunglass
   black, and periwinkle (the Pop!ular music-video palette).
   Base palette ramps first, then semantic aliases.
   ============================================================ */
:root {
    /* --- Marquee gold (primary) --- */
    --gold-50:  #fdf7e7;  /* champagne, soft tint */
    --gold-100: #f9edc9;  /* champagne, hero wash */
    --gold-200: #f3dfa4;
    --gold-300: #d9ba7b;
    --gold-400: #c3963d;
    --gold-500: #a16207;  /* theme primary, marquee gold */
    --gold-600: #8a5303;
    --gold-700: #713f12;  /* deep gold, links & active states */
    --gold-800: #5c3610;
    --gold-900: #3d2408;

    /* --- Ink neutrals (theme dark = sunglass black #141417) --- */
    --ink-900: #0a0a0d;
    --ink-800: #141417;  /* theme dark, primary text on light */
    --ink-700: #243a47;
    --ink-600: #41535e;
    --ink-500: #61727c;
    --ink-400: #8a98a1;
    --ink-300: #b8c2c9;
    --ink-200: #dce2e6;
    --ink-100: #eef1f3;
    --ink-50:  #f8f9fa;  /* theme light */
    --white:   #ffffff;

    /* --- Periwinkle accent (a certain music-video blazer) --- */
    --indigo-500: #7d8ff2;
    --indigo-400: #93a2f5;
    --indigo-300: #b3bdf8;

    /* --- Bootstrap semantic hues carried by the theme --- */
    --green-500:  #198754;  /* success */
    --cyan-500:   #0dcaf0;  /* info */
    --amber-500:  #ffc107;  /* warning */
    --red-500:    #dc3545;  /* danger */

    /* ----------------------------------------------------------
       SEMANTIC ALIASES: reference these in components
       ---------------------------------------------------------- */
    --color-primary:        var(--gold-500);
    --color-primary-hover:  var(--gold-600);
    --color-primary-active: var(--gold-700);
    --color-secondary:      var(--ink-800);        /* sunglass black */
    --color-accent:         var(--indigo-500);
    --color-accent-hover:   color-mix(in srgb, var(--indigo-500) 85%, #000);

    --color-primary-subtle: var(--gold-50);        /* tinted fills, 10% vibe */
    --color-accent-subtle:  #eef0fd;

    /* Text */
    --text-strong:   var(--ink-800);
    --text-body:     var(--ink-700);
    --text-muted:    var(--ink-500);
    --text-on-brand: var(--white);
    --text-link:     var(--gold-700);
    --text-link-hover: var(--gold-500);

    /* Surfaces */
    --surface-page:      var(--white);
    --surface-wash:      var(--gold-100);   /* hero / section wash */
    --surface-wash-soft: var(--gold-50);
    --surface-card:      var(--white);
    --surface-tertiary:  var(--ink-50);     /* "body-tertiary" bands */
    --surface-code:      var(--ink-100);    /* inline code chip */
    --surface-code-block: var(--ink-900);   /* fenced code blocks */
    --surface-ink:       var(--ink-800);    /* footer / dark sections */

    /* Borders */
    --border-subtle:  var(--ink-200);
    --border-default: var(--ink-300);
    --border-strong:  var(--ink-800);

    /* Focus ring */
    --focus-ring: color-mix(in srgb, var(--gold-500) 45%, transparent);
}
/* ============================================================
   TYPOGRAPHY: Popular theme
   Inter is the workhorse for everything (matches live theme).
   Quantico is an optional squared display accent echoing the
   "VANCOUVER" wordmark: uppercase, tracked-out, used sparingly.
   ============================================================ */
:root {
    /* Families */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Quantico", "Inter", system-ui, sans-serif; /* squared accent */
    --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

    /* Weights */
    --weight-extralight: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Type scale (1.250 major-third-ish, tuned for web) */
    --text-xs:   0.75rem;   /* 12px: captions, eyebrow */
    --text-sm:   0.875rem;  /* 14px: meta, labels */
    --text-base: 1rem;      /* 16px: body */
    --text-md:   1.125rem;  /* 18px: lead body */
    --text-lg:   1.375rem;  /* 22px: card titles */
    --text-xl:   1.75rem;   /* 28px: h3 */
    --text-2xl:  2.25rem;   /* 36px: h2 */
    --text-3xl:  3rem;      /* 48px: h1 */
    --text-4xl:  4rem;      /* 64px: hero display */

    /* Line heights */
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.12em;  /* Quantico eyebrows / VANCOUVER vibe */
}
/* ============================================================
   SPACING & RADIUS: Popular theme
   Bootstrap-rooted 0.25rem spacer scale (the theme is Bootstrap 5),
   plus radii echoing the theme's rounded cards & pill buttons.
   ============================================================ */
:root {
    /* Spacing: Bootstrap spacer scale (4px base) */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 1rem;      /* 16 */
    --space-4: 1.5rem;    /* 24 */
    --space-5: 3rem;      /* 48 */
    --space-6: 4.5rem;    /* 72 */
    --space-7: 6rem;      /* 96 */

    /* Section rhythm */
    --section-pad-y: 4.5rem;
    --container-max: 1140px;  /* Bootstrap xl container */
    --gutter: 1.5rem;

    /* Radius: theme uses Bootstrap defaults + pills */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;   /* Bootstrap default */
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;       /* image / hero corners */
    --radius-pill: 50rem;    /* buttons, badges */
    --radius-circle: 50%;

    /* Control sizing */
    --control-height-sm: 2rem;
    --control-height-md: 2.625rem;
    --control-height-lg: 3.25rem;
    --tap-target-min: 44px;

    /* Border widths */
    --border-width: 1px;
    --border-width-thick: 2px;
}
/* ============================================================
   ELEVATION & MOTION: Popular theme
   Soft Bootstrap-style shadows. Cards lift on hover ("card-zoom"
   in the theme). Motion is gentle: short ease-out fades + lifts,
   no bounces.
   ============================================================ */
:root {
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(20, 42, 54, 0.06);
    --shadow-sm: 0 2px 8px rgba(20, 42, 54, 0.08);
    --shadow-md: 0 6px 20px rgba(20, 42, 54, 0.10);
    --shadow-lg: 0 16px 40px rgba(20, 42, 54, 0.14);
    --shadow-brand: 0 10px 28px rgba(161, 98, 7, 0.25); /* marquee-gold glow */

    /* Focus ring shadow */
    --shadow-focus: 0 0 0 0.25rem var(--focus-ring);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);   /* @kind other */
    --duration-fast: 120ms;   /* @kind other */
    --duration-base: 200ms;   /* @kind other */
    --duration-slow: 320ms;   /* @kind other */

    /* Card hover lift */
    --hover-lift: translateY(-4px);   /* @kind other */
}
/* ============================================================
   POPULAR: base.css
   Resets, document defaults, and layout utilities.
   Everything references the design tokens (tokens/*.css) so a
   site can re-theme purely by overriding CSS custom properties.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

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

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

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

h1, h2, h3, h4 {
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 0.6em;
}
h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }

p { margin: 0 0 1rem; }

/* Inline code: Python-docs style, mono font on a soft grey chip.
   Code inside pre blocks keeps the highlighter's own background. */
pre, code, kbd { font-family: var(--font-mono); }
code {
  font-size: 0.875em;
  background: var(--surface-code);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
pre code { font-size: inherit; background: none; padding: 0; border-radius: 0; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* --- Layout utilities --- */
.g-container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
.g-narrow { max-width: 52rem; margin: 0 auto; padding-inline: var(--gutter); } /* legacy self-centering column */
/* Reading-measure column. Use inside .g-container so the text's left edge
   lines up with the page hero and every other page type. */
.g-article { max-width: 52rem; }
.g-section { padding-block: var(--section-pad-y); }
.g-section--sm { padding-block: var(--space-5); }

/* Surface bands */
.g-bg-white { background: var(--surface-page); }
.g-bg-wash { background: var(--surface-wash); }
.g-bg-wash-soft { background: var(--surface-wash-soft); }
.g-bg-tertiary { background: var(--surface-tertiary); }
.g-bg-ink { background: var(--surface-ink); color: var(--ink-200); }

/* Eyebrow (Quantico display accent) */
.g-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Section heading block */
.g-section-head { display: flex; flex-direction: column; gap: 0.6rem; max-width: 46rem; }
.g-section-head--center { align-items: center; text-align: center; margin-inline: auto; }
.g-section-head h2 { margin: 0; }
.g-section-head .g-lead { margin: 0; font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-normal); }

.g-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.g-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.g-stack { display: flex; flex-direction: column; gap: 1.2rem; }
.g-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

.g-prose { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); }
/* Underline prose links so color is never the only distinguisher (WCAG 1.4.1);
   matters for adopters whose brand link color is close to the body text.
   Only bare markdown links: components inside prose (buttons, tags) carry a
   class and are already visually distinct. */
.g-prose a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
.g-prose > * + * { margin-top: 1.1rem; }
.g-prose ul, .g-prose ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.g-prose h2 { margin-top: 1.8rem; }
.g-prose img { border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
/* One background for every fenced block, whatever the highlighter did.
   !important beats the inline background-color that Chroma (Hugo) and
   Shiki (Astro) emit, and unhighlighted languages get the same canvas. */
.g-prose pre { overflow-x: auto; padding: 1rem 1.2rem; border-radius: var(--radius-lg); background: var(--surface-code-block) !important; color: var(--ink-100); }

/* Skip link for a11y */
.g-skip { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-md); z-index: 100; }
.g-skip:focus { left: 0.5rem; top: 0.5rem; color: #fff; }

@media (max-width: 920px) {
  :root { --text-4xl: 2.75rem; --text-3xl: 2.25rem; --text-2xl: 1.9rem; --section-pad-y: 3rem; }
  .g-grid-3, .g-grid-2 { grid-template-columns: 1fr; }
}
/* ============================================================
   POPULAR: components.css
   Class-based ports of the theme's components. Pair with a
   FontAwesome 6 stylesheet for icons (loaded in head).
   ============================================================ */

/* ---------- Buttons ---------- */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: var(--control-height-md);
  padding: 0.6rem 1.4rem;
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold);
  line-height: 1.1; letter-spacing: 0.01em;
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.g-btn:hover { transform: translateY(-1px); }
.g-btn--sm { min-height: var(--control-height-sm); padding: 0.4rem 0.95rem; font-size: var(--text-sm); }
.g-btn--lg { min-height: var(--control-height-lg); padding: 0.85rem 1.9rem; font-size: var(--text-md); }
.g-btn--block { display: flex; width: 100%; }

.g-btn--primary { background: var(--color-primary); color: var(--text-on-brand); }
.g-btn--primary:hover { background: var(--color-primary-hover); color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.g-btn--secondary { background: var(--color-secondary); color: var(--text-on-brand); }
.g-btn--secondary:hover { background: color-mix(in srgb, var(--color-secondary) 80%, #000); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
.g-btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.g-btn--outline:hover { background: var(--color-primary); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
.g-btn--ghost { background: transparent; color: var(--text-link); }
.g-btn--ghost:hover { background: var(--color-primary-subtle); color: var(--text-link); }
.g-btn--accent { background: var(--color-accent); color: var(--text-on-brand); }
.g-btn--accent:hover { background: var(--color-accent-hover); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
.g-btn--dark { background: var(--ink-800); color: var(--text-on-brand); }
.g-btn--dark:hover { background: var(--ink-900); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }

/* ---------- Badges & tags ---------- */
.g-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28em 0.7em; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1.2; letter-spacing: 0.01em; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--color-primary); color: #fff;
}
.g-badge--soft { background: var(--gold-50); color: var(--gold-700); }
.g-badge--secondary { background: var(--color-secondary); }
.g-badge--secondary.g-badge--soft { background: var(--gold-50); color: var(--gold-700); }
.g-badge--success { background: var(--green-500); }
.g-badge--success.g-badge--soft { background: #e6f3ec; color: #0f6e44; }
.g-badge--warning { background: var(--amber-500); color: #142a36; }
.g-badge--warning.g-badge--soft { background: #fff7e0; color: #946a00; }
.g-badge--danger { background: #c8102e; color: #fff; }
.g-badge--danger.g-badge--soft { background: #fde7ea; color: #a01023; }
.g-badge--ink { background: var(--ink-800); }

.g-tag {
  display: inline-flex; align-items: center;
  padding: 0.2em 0.65em; font-size: var(--text-xs); font-weight: var(--weight-medium);
  border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-subtle);
  color: var(--text-muted); background: var(--surface-card);
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.g-tag::before { content: "#"; opacity: 0.55; margin-right: 0.05em; }
a.g-tag:hover { background: var(--gold-50); border-color: var(--color-primary); color: var(--gold-700); }

/* Blog filter buttons */
.g-filter { font-family: var(--font-sans); padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium); border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); color: var(--text-body); cursor: pointer; }
.g-filter:hover { border-color: var(--color-primary); color: var(--gold-700); }
.g-filter.is-active { background: var(--gold-50); border-color: var(--color-primary); color: var(--gold-700); }

/* Pager (list pagination) */
.g-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; margin-top: var(--space-5); }
.g-pager__num, .g-pager__nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-width: 2.2rem; min-height: 2.2rem; padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); color: var(--text-body);
}
a.g-pager__num:hover, .g-pager__nav:hover { border-color: var(--color-primary); color: var(--gold-700); }
.g-pager__num.is-active { background: var(--gold-50); border-color: var(--color-primary); color: var(--gold-700); }

/* ---------- Testimonials ---------- */
.g-quote {
  display: flex; flex-direction: column; gap: 1rem; height: 100%; margin: 0;
  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.g-quote blockquote { margin: 0; line-height: var(--leading-relaxed); color: var(--text-body); }
.g-quote blockquote::before {
  content: "\201C";
  display: block; font-family: var(--font-display); font-size: 2.5rem; line-height: 1;
  color: var(--color-primary);
}
.g-quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.g-quote figcaption img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.g-quote__name { display: block; font-weight: var(--weight-semibold); color: var(--text-strong); }
.g-quote__role { display: block; font-size: var(--text-sm); color: var(--text-muted); }

/* Year heading for date-grouped lists (events) */
.g-year { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.g-year:first-child { margin-top: 0; }

/* ---------- Cards ---------- */
.g-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}
.g-card:hover { transform: var(--hover-lift); box-shadow: var(--shadow-lg); }
.g-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gold-100); }
.g-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.g-card:hover .g-card__media img { transform: scale(1.04); }
.g-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-4); flex: 1; }
.g-card__eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary); }
.g-card__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-strong); }
.g-card__title a { color: inherit; }
.g-card__title a:hover { color: var(--color-primary); }
.g-card__text { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); }
.g-card__footer { margin-top: auto; padding-top: 0.6rem; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Icon medallion used in feature cards */
.g-medallion {
  display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
  border-radius: var(--radius-circle); background: var(--gold-50); color: var(--color-primary); font-size: 1.3rem;
}
.g-medallion--lg { width: 68px; height: 68px; font-size: 1.7rem; background: var(--surface-wash); }

/* ---------- Persona (organizer / speaker bio) ---------- */
.g-persona {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
  border-left: 4px solid var(--color-secondary); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.g-persona--primary { border-left-color: var(--color-primary); }
.g-persona__img { flex: 0 0 auto; width: 76px; height: 76px; border-radius: var(--radius-circle); object-fit: cover; border: 3px solid var(--color-secondary); }
.g-persona--primary .g-persona__img { border-color: var(--color-primary); }
.g-persona__name { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); line-height: 1.2; }
.g-persona__role { font-size: var(--text-sm); color: var(--color-secondary); font-weight: var(--weight-medium); }
.g-persona__bio { margin: 0.35rem 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }
.g-persona__socials { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.g-persona__socials a { color: var(--ink-400); font-size: 1rem; }
.g-persona__socials a:hover { color: var(--color-primary); }

/* Organizer grid card (photo on top) */
.g-org { text-align: left; }
.g-org__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.g-org__name { margin: 0.9rem 0 0.1rem; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); }
.g-org__role { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-medium); }
.g-org__bio { margin: 0.5rem 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }

/* ---------- FAQ (native <details>, zero JS) ---------- */
.g-faq { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.2rem 0; }
.g-faq__item { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); overflow: hidden; }
.g-faq__q { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: var(--weight-semibold); color: var(--text-strong); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.g-faq__q::-webkit-details-marker { display: none; }
.g-faq__q::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.75em; color: var(--text-muted); transition: transform 0.2s; }
.g-faq__item[open] .g-faq__q::after { transform: rotate(180deg); }
.g-faq__a { padding: 0 var(--space-4) var(--space-3); }
.g-faq__a > :first-child { margin-top: 0; }

/* ---------- Post navigation (older/newer neighbors on blog singles) ---------- */
.g-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.g-postnav__card { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-3); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.g-postnav__card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.g-postnav__card--next { text-align: right; align-items: flex-end; grid-column: 2; }
.g-postnav__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.g-postnav__title { font-weight: var(--weight-semibold); color: var(--text-strong); }
@media (max-width: 640px) { .g-postnav { grid-template-columns: 1fr; } .g-postnav__card--next { grid-column: 1; text-align: left; align-items: flex-start; } }

/* ---------- Header / nav ---------- */
.g-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface-page) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: var(--border-width) solid var(--border-subtle); }
.g-nav { display: flex; align-items: center; gap: var(--space-4); padding-block: 0.75rem; }
.g-brand { display: flex; align-items: center; gap: 0.6rem; }
.g-brand img { height: 44px; width: 44px; border-radius: var(--radius-md); }
.g-brand__text { display: flex; flex-direction: column; line-height: 1; }
.g-brand__name { font-weight: var(--weight-bold); color: var(--color-primary); font-size: var(--text-md); }
.g-brand__sub { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 0.7rem; color: var(--ink-800); }
.g-navlinks { display: flex; gap: 0.4rem; list-style: none; margin: 0 0 0 auto; padding: 0; align-items: center; }
.g-navlinks a { display: inline-block; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-body); }
.g-navlinks a:hover { color: var(--color-primary); }
.g-navlinks a.is-active { color: var(--color-primary); background: var(--gold-50); }
.g-navlinks li { position: relative; }
.g-navlinks__caret { font-size: 0.6em; margin-left: 0.35rem; }
.g-navlinks__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 11rem; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.g-navlinks li.has-sub:hover > .g-navlinks__sub, .g-navlinks li.has-sub:focus-within > .g-navlinks__sub { display: flex; }
.g-navlinks__sub a { display: block; border-radius: var(--radius-md); }
.g-nav__cta { margin-left: 0.4rem; }
.g-nav__toggle { display: none; margin-left: auto; background: none; border: none; font-size: 1.4rem; color: var(--ink-800); cursor: pointer; padding: 0.4rem; }

/* ---------- Code copy button ---------- */
pre { position: relative; }
.g-copy { position: absolute; top: 0.45rem; right: 0.45rem; padding: 0.35rem 0.55rem; border: none; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.12); color: #f8f8f2; font-size: var(--text-sm); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
pre:hover .g-copy, .g-copy:focus-visible { opacity: 1; }
.g-copy:hover { background: rgba(255, 255, 255, 0.24); }
.g-copy.is-copied { color: #6ee7b7; }

/* ---------- Hero ---------- */
.g-hero { background: var(--surface-wash); }
.g-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: center; padding-block: var(--space-6); }
.g-hero__content { display: flex; flex-direction: column; gap: 1.4rem; }
.g-hero h1 { margin: 0; font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--ink-800); }
.g-hero__lead { margin: 0; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-700); max-width: 34rem; }
.g-hero__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid var(--surface-card); }
.g-hero__media img { width: 100%; aspect-ratio: 16/12; object-fit: cover; }

/* Interior page hero band */
.g-pagehero { background: var(--surface-wash); }
.g-pagehero .g-container { padding-block: var(--space-6) var(--space-5); }
.g-pagehero h1 { margin: 0.6rem 0 0; color: var(--ink-800); max-width: 50rem; }
.g-pagehero__lead { margin: 1rem 0 0; font-size: var(--text-md); color: var(--ink-700); max-width: 46rem; line-height: var(--leading-normal); }

/* ---------- Stats strip ---------- */
.g-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-block: var(--space-5); }
.g-stat { text-align: center; }
.g-stat__n { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--gold-300); }
.g-stat__l { font-size: var(--text-sm); color: var(--ink-300); margin-top: 0.2rem; }

/* ---------- Feature (image + text) ---------- */
.g-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-5); align-items: center; padding-block: var(--section-pad-y); }
.g-feature__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 4px solid var(--surface-card); }
.g-feature__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.g-feature__body { display: flex; flex-direction: column; gap: 1rem; }
.g-meta-line { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--text-base); color: var(--text-body); }
.g-meta-line i { color: var(--color-primary); width: 22px; }

/* ---------- Event row ---------- */
.g-event { display: grid; grid-template-columns: 160px 1fr auto; gap: var(--space-4); align-items: stretch; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.g-event__date { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--surface-wash); border-radius: var(--radius-lg); padding: var(--space-3); }
.g-event__dow { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-xs); color: var(--color-primary); }
.g-event__day { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--ink-800); line-height: 1.1; margin-top: 0.2rem; }
.g-event__time { font-size: var(--text-xs); color: var(--text-muted); margin-top: 0.2rem; }
.g-event__body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.g-event__body h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.g-event__body p { margin: 0; font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }
.g-event__meta { font-size: var(--text-sm); color: var(--text-body); }
.g-event__meta i { color: var(--color-primary); width: 20px; }
.g-event__aside { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 0.5rem; }

/* ---------- Get-involved block ---------- */
.g-involve { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5); align-items: center; padding-block: var(--section-pad-y); border-bottom: var(--border-width) solid var(--border-subtle); }
.g-involve__body { display: flex; flex-direction: column; gap: 0.6rem; max-width: 42rem; }
.g-involve__cta { display: flex; flex-direction: column; gap: 0.6rem; min-width: 190px; }

/* ---------- Docs (handbook / runbooks) ---------- */
.g-doc { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; padding-block: var(--space-5) var(--space-6); }
/* The sidebar outgrows the viewport on a long page (every h2/h3 of the
   current page nests under its entry). A sticky element taller than the
   viewport cannot be scrolled to its end, so the entries below the fold,
   including the links to the other docs pages, were unreachable without
   scrolling through the whole article first. Cap it to the space under
   the header and give it its own scrollbar. */
.g-doc-toc { position: sticky; top: 92px; max-height: calc(100vh - 92px - var(--space-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 0.15rem; }
.g-doc-toc__label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; }
.g-doc-toc a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.3; color: var(--text-body); border-left: 3px solid transparent; }
.g-doc-toc a:hover { color: var(--color-primary); }
.g-doc-toc a.is-active { color: var(--gold-700); background: var(--gold-50); border-left-color: var(--color-primary); font-weight: var(--weight-semibold); }
.g-doc__content { min-width: 0; }
.g-doc__content h2 { margin-top: 2.5rem; }
.g-doc__content h2, .g-doc__content h3, .g-doc__content h4 { scroll-margin-top: 108px; }
.g-doc__content h2:first-child { margin-top: 0; }

/* ---------- Callout ---------- */
.g-callout { display: flex; gap: 0.9rem; padding: var(--space-4); border-radius: var(--radius-lg); border: var(--border-width) solid var(--gold-300); background: var(--surface-wash-soft); margin: 1.2rem 0; }
.g-callout > i { font-size: 1.1rem; margin-top: 0.15rem; color: var(--gold-700); }
.g-callout__title { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-base); margin-bottom: 0.3rem; }
.g-callout__body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
.g-callout__body p:last-child { margin-bottom: 0; }
.g-callout--tip { background: #e6f3ec; border-color: #a7d7bd; } .g-callout--tip > i { color: #0f6e44; }
.g-callout--warn { background: #fff7e0; border-color: #f2d488; } .g-callout--warn > i { color: #946a00; }
/* Tip/warn tints are fixed light colors, so their text stays fixed dark
   even under dark brand palettes (title/body tokens go light there). */
.g-callout--tip .g-callout__title, .g-callout--warn .g-callout__title { color: #142a36; }
.g-callout--tip .g-callout__body, .g-callout--warn .g-callout__body { color: #243a47; }

/* ---------- Checklist ---------- */
.g-checklist { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin: 1.2rem 0; }
.g-checklist__head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem var(--space-4); background: var(--surface-tertiary); border-bottom: var(--border-width) solid var(--border-subtle); }
.g-checklist__head span:first-child { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.g-checklist__count { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); }
.g-checklist__count.is-complete { color: #0f6e44; }
.g-checklist ul { list-style: none; margin: 0; padding: 0; }
.g-checklist li { border-bottom: var(--border-width) solid var(--border-subtle); }
.g-checklist li:last-child { border-bottom: none; }
.g-check { width: 100%; display: flex; gap: 0.8rem; align-items: flex-start; text-align: left; background: none; border: none; padding: 0.8rem var(--space-4); cursor: pointer; font-family: var(--font-sans); }
.g-check__box { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 0.1rem; border-radius: 6px; border: 2px solid var(--border-default); background: var(--surface-card); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; transition: all var(--duration-fast) var(--ease-out); }
.g-check__label { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
.g-check.is-done .g-check__box { border-color: var(--color-primary); background: var(--color-primary); }
.g-check.is-done .g-check__label { color: var(--text-muted); text-decoration: line-through; }

/* ---------- Footer ---------- */
.g-footer { background: var(--surface-ink); color: var(--ink-200); }
.g-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-block: var(--space-5) var(--space-4); }
.g-footer__brand { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 240px; max-width: 26rem; }
.g-footer__brand img { height: 56px; width: 56px; border-radius: var(--radius-md); }
.g-footer__ack { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-300); }
.g-footer__col { flex: 1 0 140px; }
.g-footer__col-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--white); }
.g-footer__col ul { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.g-footer__col a { color: var(--ink-300); font-size: var(--text-sm); }
.g-footer__col a:hover { color: var(--white); }
.g-footer__bottom { border-top: var(--border-width) solid rgba(255,255,255,0.1); }
.g-footer__bottom .g-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-block: 1.1rem; font-size: var(--text-xs); color: var(--ink-400); }
.g-social { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: var(--radius-circle); background: rgba(255,255,255,0.08); color: var(--ink-200); font-size: 1rem; }
.g-social:hover { background: var(--white); color: #142a36; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .g-hero__grid, .g-feature, .g-doc, .g-event, .g-involve { grid-template-columns: 1fr; }
  .g-stats { grid-template-columns: repeat(2, 1fr); }
  /* Narrow screens: the sidebar becomes a pill row of sibling doc pages.
     The column labels and per-heading anchors only make sense in a sticky
     sidebar; the headings they point to sit directly below anyway. */
  .g-doc-toc { position: static; max-height: none; overflow: visible; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 0.8rem; margin-bottom: 1rem; }
  .g-doc-toc__label { display: none; }
  .g-doc-toc a[href^="#"] { display: none; }
  .g-doc-toc a { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; }
  .g-doc-toc a.is-active { border-color: var(--color-primary); }
  .g-involve__cta { min-width: 0; }
  .g-event__aside { align-items: flex-start; }
  .g-navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; margin: 0; padding: 0.5rem var(--gutter) 1rem; background: var(--surface-page); border-bottom: var(--border-width) solid var(--border-subtle); box-shadow: var(--shadow-md); }
  .g-navlinks.is-open { display: flex; }
  .g-navlinks li.has-sub > .g-navlinks__sub, .g-navlinks li.has-sub:hover > .g-navlinks__sub { display: flex; position: static; min-width: 0; padding: 0 0 0 1rem; background: none; border: none; box-shadow: none; }
  .g-navlinks__caret { display: none; }
  .g-nav__toggle { display: block; }
  .g-nav__cta { display: none; }
}

/* Notice banner (§5): site-wide static announcement above the header. */
.g-notice { background: var(--surface-wash); border-bottom: var(--border-width) solid var(--border-subtle); color: var(--text-body); font-size: var(--text-sm); }
.g-notice__inner { display: flex; gap: 0.4rem 0.7rem; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0.6rem var(--space-4); text-align: center; }
.g-notice__inner > i { color: var(--text-link); }
.g-notice a { color: var(--text-link); font-weight: var(--weight-medium); text-decoration: underline; }

/* Designed empty state (§5): zero upcoming events on home + events list. */
.g-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-5) 0; }
.g-empty .g-lead { margin: 0; max-width: 32rem; }

/* Talk archive (§3): a talk entry on the event page and the /talks/ index. */
.g-talk { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-3); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.g-talk__title { font-weight: var(--weight-medium); }
.g-talk__by { font-size: var(--text-sm); color: var(--text-muted); }
.g-talk__by a { color: var(--text-link); }
.g-talk__event { font-size: var(--text-sm); color: var(--text-muted); }
.g-talk__event a { color: var(--text-link); }

/* Photo gallery + pullquote (§6). No JS, no lightbox: each photo links to its
   full-size image (native <a>, the deliberate non-feature). */
.g-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.g-gallery__item { margin: 0; }
.g-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.g-gallery__item figcaption { font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.35rem; }
.g-pullquote { margin: var(--space-4) 0; padding-left: var(--space-4); border-left: 3px solid var(--text-link); }
.g-pullquote blockquote { margin: 0; font-size: var(--text-lg); font-style: italic; }
.g-pullquote figcaption { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--text-muted); font-style: normal; }
.g-pullquote figcaption::before { content: "\2014 \00a0"; }