/* ==========================================================================
   Elimu News — Editorial Design System
   --------------------------------------------------------------------------
   Single stylesheet for the public site. Organized into @layers so each
   section has predictable specificity:
     tokens   — CSS custom properties
     reset    — element resets and normalization
     base     — typography defaults, links, forms, media
     layout   — page shells, containers, grid scaffolding
     chrome   — masthead, footer, mobile nav
     comps    — cards, hero, sections, pagination, etc.
     utils    — small one-off helpers used in templates
   ========================================================================== */

@layer tokens, reset, base, layout, chrome, comps, utils;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* Education palette: deep green, study blue, scholarship gold, clean paper */
    --ink:           #14201a;
    --ink-2:         #24352b;
    --ink-3:         #5f6f66;
    --ink-mute:      #8a978f;
    --rule:          #d7e5dc;
    --rule-soft:     #e9f1ec;
    --paper:         #f7fbf8;
    --paper-2:       #edf6f0;
    --surface:       #ffffff;
    --surface-tint:  #f2f9f4;

    /* Brand */
    --brand:         #14532d;
    --brand-ink:     #ffffff;
    --brand-soft:    #dff3e7;
    --brand-hover:   #0d3f24;
    --accent:        #d19a00;
    --accent-soft:   #fff5d7;
    --learning:      #1f6feb;
    --learning-soft: #e8f1ff;
    --notice:        #b3261e;

    /* Status */
    --ok:            #1f7a4a;
    --warn:          #a55a07;
    --err:           #b3261e;

    /* Typography stacks */
    --font-serif: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --font-sans:  "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-ui:    "Work Sans", "Inter", system-ui, sans-serif;
    --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale */
    --fs-eyebrow:   0.72rem;
    --fs-meta:      0.8rem;
    --fs-body:      1.0625rem;
    --fs-lead:      1.1875rem;
    --fs-h6:        1rem;
    --fs-h5:        1.125rem;
    --fs-h4:        1.25rem;
    --fs-h3:        1.55rem;
    --fs-h2:        2rem;
    --fs-h1:        2.75rem;
    --fs-display:   3.35rem;

    /* Spacing — 4px base */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-7: 2rem;
    --s-8: 2.5rem;
    --s-9: 3rem;
    --s-10: 4rem;
    --s-11: 5rem;
    --s-12: 6rem;

    /* Layout */
    --container:        min(100% - 2rem, 1280px);
    --container-narrow: min(100% - 2rem, 1100px);
    --container-read:   min(100% - 2rem, 720px);

    /* Radii — editorial restraint */
    --r-1: 2px;
    --r-2: 4px;
    --r-3: 6px;
    --r-pill: 999px;

    /* Elevation */
    --shadow-1: 0 1px 0 rgba(20, 32, 26, 0.04), 0 1px 2px rgba(20, 32, 26, 0.04);
    --shadow-2: 0 1px 0 rgba(20, 32, 26, 0.04), 0 7px 20px rgba(20, 32, 26, 0.06);
    --shadow-3: 0 14px 34px rgba(20, 32, 26, 0.10), 0 3px 10px rgba(20, 32, 26, 0.05);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;

    color-scheme: light;
  }

  @media (max-width: 600px) {
    :root {
      --fs-h2: 1.7rem;
      --fs-h1: 2.15rem;
      --fs-display: 2.45rem;
    }
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }
  body { margin: 0; }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, svg, video, picture { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; }
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-2);
  }
}

/* ==========================================================================
   BASE — typography, links, forms, media
   ========================================================================== */
@layer base {
  body {
    background:
      linear-gradient(180deg, #f8fcf9 0, #ffffff 20rem, #ffffff 52rem, var(--paper) 100%);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    font-feature-settings: "kern", "liga", "calt";
  }

  ::selection { background: var(--brand-soft); color: var(--brand); }

  /* Material Symbols normalization */
  .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
  }
  .icon-sm { font-size: 1.1rem; }
  .icon-md { font-size: 1.35rem; }
  .icon-lg { font-size: 1.75rem; }

  /* Skip link for keyboard users */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--brand);
    color: var(--brand-ink);
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-ui);
    font-weight: 600;
  }
  .skip-link:focus { left: var(--s-3); top: var(--s-3); }

  /* Forms */
  input, textarea, select {
    width: 100%;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    padding: 0.625rem 0.75rem;
    line-height: 1.3;
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
  }
  input:hover, textarea:hover, select:hover { border-color: var(--ink-mute); }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.14);
  }
  input[type="checkbox"], input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    accent-color: var(--brand);
    cursor: pointer;
  }
  textarea { resize: vertical; min-height: 5rem; }

  /* Prose — article body styles, also used inside admin editor */
  .prose { color: var(--ink); font-size: var(--fs-body); line-height: 1.78; }
  .prose > * + * { margin-top: 1.1em; }
  .prose p { margin: 0; }
  .prose h2, .prose h3, .prose h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
  }
  .prose h2 { font-size: var(--fs-h3); margin-top: 1.8em; }
  .prose h3 { font-size: var(--fs-h4); margin-top: 1.6em; }
  .prose h4 { font-size: var(--fs-h5); margin-top: 1.4em; }
  .prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .prose a:hover { color: var(--accent); }
  .prose strong { font-weight: 700; }
  .prose blockquote {
    border-left: 3px solid var(--brand);
    padding: 0.4em 0 0.4em 1.25em;
    color: var(--ink-2);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.18em;
    line-height: 1.4;
  }
  .prose img { border-radius: var(--r-2); margin: 1.4em auto; }
  .prose figure { margin: 1.6em 0; }
  .prose figcaption {
    margin-top: var(--s-2);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    color: var(--ink-3);
    text-align: center;
  }
  .prose ul, .prose ol { padding-left: 1.4em; }
  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose li + li { margin-top: 0.45em; }
  .prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
  .prose code {
    background: var(--paper-2);
    padding: 0.1em 0.35em;
    border-radius: var(--r-1);
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  .prose iframe,
  .prose video {
    width: 100%;
    border: 0;
    border-radius: var(--r-2);
    background: var(--paper-2);
  }
  .prose iframe {
    aspect-ratio: 16 / 9;
    min-height: 18rem;
  }
  .prose video {
    max-height: min(760px, 78vh);
  }
  .prose audio {
    width: 100%;
  }
  .prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    font-size: 0.94em;
  }
  .prose th,
  .prose td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
  }
  .prose th {
    background: var(--surface-tint);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .prose tr:last-child td { border-bottom: 0; }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container { width: var(--container); margin-inline: auto; }
  .container--narrow { width: var(--container-narrow); margin-inline: auto; }
  .container--read   { width: var(--container-read);   margin-inline: auto; }

  /* Page shells */
  main {
    display: block;
    min-height: 50vh;
    overflow-x: clip;
  }
  .page { padding-block: var(--s-7) var(--s-10); }
  .page--tight { padding-block: var(--s-5) var(--s-8); }

  /* Section spacing */
  .section + .section { margin-top: var(--s-10); }
}

/* ==========================================================================
   CHROME — masthead, footer, mobile nav
   ========================================================================== */
@layer chrome {
  /* Priority education notice strip */
  .breaking {
    background: linear-gradient(90deg, var(--brand), var(--learning));
    color: #fff;
    border-bottom: 1px solid rgba(20, 32, 26, 0.12);
  }
  .breaking__inner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 2.75rem;
    padding-block: var(--s-2);
  }
  .breaking__label {
    background: var(--accent-soft);
    color: var(--brand);
    border-radius: var(--r-pill);
    padding: 0.15rem 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .breaking__link {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .breaking__link:hover { text-decoration: underline; }
  .breaking__icon { flex: 0 0 auto; opacity: 0.9; }
  .breaking__glyph {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
  }
  @media (max-width: 600px) {
    .breaking__inner {
      align-items: flex-start;
    }
    .breaking__link {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
  }

  /* Masthead */
  .masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 1px 0 rgba(20, 32, 26, 0.02);
  }
  .masthead__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-5);
    min-height: 4.2rem;
    padding-block: var(--s-3);
  }
  .masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-ui);
    font-weight: 800;
    font-style: normal;
    font-size: 1.48rem;
    color: var(--ink);
    letter-spacing: 0;
  }
  .masthead__brand::before {
    content: "EN";
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-2);
    background:
      linear-gradient(135deg, rgba(250, 204, 21, 0.92) 0 43%, #fff 43% 100%),
      var(--brand);
    box-shadow: inset 0 0 0 2px var(--brand);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
  }
  .masthead__brand-dot {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--accent);
    align-self: center;
    margin-left: 0.15rem;
  }
  .masthead__date {
    display: none;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  @media (min-width: 900px) {
    .masthead__date { display: inline-block; }
  }
  .masthead__nav {
    display: none;
    justify-content: center;
    align-items: center;
    gap: clamp(var(--s-3), 2vw, var(--s-6));
  }
  @media (min-width: 768px) {
    .masthead__nav { display: flex; }
  }
  .masthead__nav a {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-2);
    position: relative;
    padding: var(--s-2) 0;
    transition: color var(--t-base) var(--ease);
    white-space: nowrap;
  }
  .masthead__nav a:hover { color: var(--brand); }
  .masthead__nav a[aria-current="page"] { color: var(--brand); }
  .masthead__nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
  }
  .masthead__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    justify-self: end;
  }

  .icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-2);
    color: var(--ink-2);
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  }
  .icon-btn:hover { background: var(--paper-2); color: var(--ink); }

  .masthead__hamburger { }
  @media (min-width: 768px) {
    .masthead__hamburger { display: none; }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: 2.5rem;
    padding: 0 var(--s-4);
    border-radius: var(--r-2);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background var(--t-base) var(--ease),
                color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease),
                transform var(--t-fast) var(--ease);
  }
  .btn:active { transform: translateY(1px); }
  .btn--primary   { background: var(--brand); color: var(--brand-ink); }
  .btn--primary:hover { background: var(--brand-hover); }
  .btn--ghost     { color: var(--brand); border-color: var(--rule); background: var(--surface); }
  .btn--ghost:hover { background: var(--paper-2); border-color: var(--ink-mute); }
  .btn--accent    { background: var(--accent); color: var(--ink); }
  .btn--accent:hover { filter: brightness(0.92); }
  .btn--text      { color: var(--brand); padding: 0; height: auto; }
  .btn--text:hover { color: var(--accent); }
  .btn--sm        { height: 2.1rem; padding: 0 var(--s-3); font-size: 0.82rem; }

  /* Mobile drawer */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(20, 32, 26, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
  }
  .drawer.is-open { opacity: 1; pointer-events: auto; }
  .drawer__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .drawer.is-open .drawer__panel { transform: translateX(0); }
  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--rule);
  }
  .drawer__brand {
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 800;
    font-size: 1.3rem;
  }
  .drawer__nav {
    padding: var(--s-3);
    display: grid;
    gap: var(--s-1);
  }
  .drawer__nav a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--ink-2);
  }
  .drawer__nav a:hover { background: var(--paper-2); color: var(--ink); }
  .drawer__section-label {
    margin: var(--s-4) var(--s-4) var(--s-2);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }

  /* Mobile bottom nav */
  .mob-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: var(--s-1) var(--s-2) max(var(--s-1), env(safe-area-inset-bottom));
  }
  @media (min-width: 768px) { .mob-nav { display: none; } }
  body:has(.mob-nav) main { padding-bottom: 5.5rem; }
  .mob-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--s-2) 0;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink-mute);
  }
  .mob-nav__item.is-active { color: var(--brand); }
  .mob-nav__item.is-active .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  }

  /* Footer */
  .footer {
    margin-top: var(--s-10);
    background: #0f2f20;
    color: #dbe7de;
  }
  .footer__top {
    padding: var(--s-10) 0 var(--s-7);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
  }
  @media (max-width: 800px) {
    .footer__top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .footer__top { grid-template-columns: 1fr; }
  }
  .footer__brand {
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 800;
    font-size: 1.65rem;
    color: #fff;
  }
  .footer__about {
    margin-top: var(--s-3);
    color: rgba(255, 255, 255, 0.7);
    max-width: 28ch;
    line-height: 1.55;
  }
  .footer__col-title {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--s-3);
  }
  .footer__list { display: grid; gap: var(--s-2); }
  .footer__list a {
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--t-base) var(--ease);
  }
  .footer__list a:hover { color: #fff; }
  .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--s-5) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
  }
}

/* ==========================================================================
   COMPONENTS — eyebrow, kicker, cards, hero, sections, pagination, search
   ========================================================================== */
@layer comps {
  /* Eyebrow / kicker / meta — typographic primitives */
  .eyebrow {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .kicker {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
  }
  a.kicker:hover { text-decoration: underline; }
  .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.7rem;
    font-family: var(--font-ui);
    font-size: var(--fs-meta);
    color: var(--ink-3);
  }
  .meta > span + span::before {
    content: "·";
    margin-right: 0.55rem;
    color: var(--ink-mute);
  }
  .meta--byline strong { color: var(--ink-2); font-weight: 600; }

  /* Section heading — newspaper-style rule line */
  .sect-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    border-bottom: 2px solid var(--brand);
  }
  @media (max-width: 600px) {
    .sect-head {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--s-2);
    }
  }
  .sect-head__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: 0;
  }
  .sect-head__link {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .sect-head__link:hover { color: var(--accent); }
  .sect-head--compact {
    align-items: center;
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule);
  }
  .sect-head--compact .sect-head__title { font-size: var(--fs-h5); }

  /* Front-page lead package: hero + side stack */
  .lead {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(20rem, 1fr);
    gap: var(--s-6);
    margin-bottom: var(--s-9);
  }
  @media (max-width: 1024px) {
    .lead { grid-template-columns: 1fr; }
  }

  .hero {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    transition: box-shadow var(--t-base) var(--ease),
                transform var(--t-base) var(--ease);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent), var(--learning));
    z-index: 1;
  }
  .hero:hover { box-shadow: var(--shadow-3); }
  .hero__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--paper-2);
    overflow: hidden;
  }
  .hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
  }
  .hero:hover .hero__media img { transform: scale(1.03); }
  .hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
  }
  @media (max-width: 600px) {
    .hero__body { padding: var(--s-4); }
  }
  .hero__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: 0;
    color: var(--ink);
  }
  .hero:hover .hero__title { color: var(--brand); }
  .hero__dek {
    color: var(--ink-3);
    font-size: var(--fs-lead);
    line-height: 1.5;
    max-width: 50ch;
  }

  /* Lead-side stack: top stories list */
  .stack {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--accent);
    border-radius: var(--r-2);
    padding: var(--s-5);
  }
  .stack__item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--rule);
  }
  .stack__item:first-of-type { border-top: 0; padding-top: 0; }
  .stack__item:last-of-type { padding-bottom: 0; }
  .stack__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--paper-2);
  }
  .stack__media img { width: 100%; height: 100%; object-fit: cover; }
  .stack__title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--ink);
    margin-top: 0.15rem;
  }
  .stack__title a:hover { color: var(--brand); }
  .stack__copy { display: flex; flex-direction: column; gap: 0.4rem; }

  /* Front layout: main column + rail */
  .front-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--s-8);
    align-items: start;
  }
  @media (max-width: 1024px) {
    .front-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  }
  .front-grid__main { min-width: 0; }
  .front-grid__rail {
    position: sticky;
    top: 5.25rem;
    display: grid;
    gap: var(--s-5);
  }
  @media (max-width: 1024px) {
    .front-grid__rail {
      position: static;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .front-grid__rail { grid-template-columns: 1fr; }
  }

  /* Rail panels */
  .rail {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    padding: var(--s-5);
  }
  .trend-list { display: grid; }
  .trend-list a {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
  }
  .trend-list a:last-child { border-bottom: 0; }
  .trend-list a:hover { color: var(--brand); }
  .trend-list__rank {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--learning);
    line-height: 1;
  }
  .trend-list__topic {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .trend-list__count {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--ink-mute);
  }

  .sect-list { display: grid; }
  .sect-list a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-weight: 600;
    transition: color var(--t-base) var(--ease);
  }
  .sect-list a:last-child { border-bottom: 0; }
  .sect-list a:hover { color: var(--brand); }
  .sect-list .material-symbols-outlined {
    color: var(--brand);
    font-size: 1.15rem;
  }

  /* Story grids */
  .grid-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }
  .grid-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 1024px) {
    .grid-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 600px) {
    .grid-cards,
    .grid-cards--3,
    .grid-cards--4 { grid-template-columns: 1fr; gap: var(--s-5); }
  }

  /* Story card */
  .card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--brand-soft);
    border-radius: var(--r-2);
    overflow: hidden;
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform var(--t-base) var(--ease);
  }
  .card:hover {
    border-color: var(--brand-soft);
    border-top-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
  .card__media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    background: var(--paper-2);
    overflow: hidden;
  }
  .card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
  }
  .card:hover .card__media img { transform: scale(1.04); }
  .card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-5);
  }
  .card__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h5);
    line-height: 1.22;
    color: var(--ink);
  }
  .card__title a { display: block; }
  .card:hover .card__title a { color: var(--brand); }
  .card__excerpt {
    color: var(--ink-3);
    font-size: 0.96rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card__meta {
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
  }

  /* Image fallback */
  .img-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background:
      linear-gradient(135deg, rgba(20, 83, 45, 0.08), rgba(31, 111, 235, 0.08), rgba(209, 154, 0, 0.12)),
      var(--paper-2);
    color: var(--ink-mute);
    overflow: hidden;
  }
  .img-fallback .material-symbols-outlined { font-size: 2rem; }

  /* Article page hero */
  .article-hero {
    margin-bottom: var(--s-7);
  }
  .article-hero__copy {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
  }
  .article-hero__copy > * + * { margin-top: var(--s-3); }
  .article-hero h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-display);
    line-height: 1.03;
    letter-spacing: 0;
    color: var(--ink);
  }
  .article-hero__dek {
    max-width: 48rem;
    margin-inline: auto;
    color: var(--ink-3);
    font-size: var(--fs-lead);
    line-height: 1.5;
    font-family: var(--font-serif);
    font-style: italic;
  }
  .article-hero__meta {
    justify-content: center;
    margin-top: var(--s-4);
  }
  .article-hero__media {
    margin-top: var(--s-7);
  }
  .article-hero__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-2);
    background: var(--paper-2);
  }
  .article-hero__media figcaption {
    margin-top: var(--s-2);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--ink-3);
    text-align: center;
  }

  /* Article body layout */
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 44rem) minmax(0, 13rem);
    column-gap: var(--s-7);
    justify-content: center;
    align-items: start;
  }
  @media (max-width: 1100px) {
    .article-layout {
      grid-template-columns: minmax(0, 44rem);
      justify-content: center;
    }
    .article-rail { display: none; }
  }
  .article-rail {
    position: sticky;
    top: 5.25rem;
    display: grid;
    gap: var(--s-4);
  }
  .article-rail__panel {
    padding-top: var(--s-3);
    border-top: 2px solid var(--brand);
  }
  .article-rail__title {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: var(--s-3);
  }
  .article-rail__panel a {
    display: block;
    padding: var(--s-2) 0;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--brand);
  }
  .article-rail__panel a:hover { color: var(--accent); }

  .article-body {
    grid-column: 2;
  }
  @media (max-width: 1100px) {
    .article-body { grid-column: 1; }
  }
  /* Drop cap on first paragraph */
  .article-body > p:first-of-type::first-letter {
    float: left;
    margin: 0.05em 0.08em 0 0;
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 4.6em;
    line-height: 0.85;
    color: var(--brand);
  }

  /* Topic chips */
  .topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .topic-chips a {
    display: inline-flex;
    align-items: center;
    height: 1.95rem;
    padding: 0 var(--s-3);
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
    transition: all var(--t-base) var(--ease);
  }
  .topic-chips a:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
  }

  /* Related stories band */
  .related {
    margin-top: var(--s-12);
    padding: var(--s-10) 0;
    background: var(--surface-tint);
    border-top: 1px solid var(--rule);
  }

  .search-summary {
    margin-bottom: var(--s-5);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.94rem;
  }
  .search-summary strong {
    color: var(--ink);
    font-weight: 800;
  }

  /* Listing header (category, search) */
  .listing-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
    padding-block: var(--s-3) var(--s-6);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s-7);
  }
  .listing-head--no-icon { grid-template-columns: 1fr; }
  .listing-head__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--r-2);
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
  }
  .listing-head__icon .material-symbols-outlined { font-size: 1.6rem; }
  .listing-head h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: 0;
    color: var(--ink);
    margin-top: var(--s-1);
  }
  .listing-head__lede {
    color: var(--ink-3);
    font-size: var(--fs-lead);
    line-height: 1.5;
    max-width: 52ch;
    margin-top: var(--s-3);
  }
  .listing-head__count {
    margin-top: var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .listing-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-4);
  }

  /* Pagination */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-8);
  }
  .pagination__btn,
  .pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    transition: all var(--t-base) var(--ease);
  }
  .pagination__btn:hover,
  .pagination__page:hover {
    border-color: var(--ink-mute);
    color: var(--ink);
  }
  .pagination__page--current {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .pagination__btn--disabled {
    opacity: 0.45;
    pointer-events: none;
  }

  /* Empty state */
  .empty {
    max-width: 36rem;
    margin: var(--s-9) auto;
    padding: var(--s-9) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    text-align: center;
  }
  .empty__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--s-3);
    border-radius: var(--r-pill);
    background: var(--paper-2);
    color: var(--ink-mute);
    display: grid;
    place-items: center;
  }
  .empty__icon .material-symbols-outlined { font-size: 1.85rem; }
  .empty h2 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h4);
    margin-bottom: var(--s-2);
  }
  .empty p {
    color: var(--ink-3);
    margin-bottom: var(--s-4);
  }

  /* Search panel */
  .search-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--s-6);
  }
  .search-bar:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.14);
  }
  .search-bar > .material-symbols-outlined {
    color: var(--ink-mute);
    padding-left: var(--s-3);
  }
  .search-bar input {
    border: 0;
    background: transparent;
    box-shadow: none !important;
    padding: var(--s-2) 0;
    font-size: 1rem;
  }
  .search-bar input:focus { box-shadow: none !important; }
  .search-bar button {
    height: 2.5rem;
    padding: 0 var(--s-5);
    border: 0;
    border-radius: var(--r-2);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.88rem;
  }
  .search-bar button:hover { background: var(--brand); }

  /* Search result list */
  .results {
    display: grid;
    gap: var(--s-4);
  }
  .result {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--s-5);
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
  }
  .result__body,
  .result__title {
    min-width: 0;
  }
  .result:hover {
    border-color: var(--ink-mute);
    box-shadow: var(--shadow-2);
  }
  @media (max-width: 640px) {
    .result { grid-template-columns: 1fr; }
  }
  .result__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--paper-2);
  }
  .result__media img { width: 100%; height: 100%; object-fit: cover; }
  .result__body { display: flex; flex-direction: column; gap: var(--s-2); }
  .result__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: 1.2;
  }
  .result__title a:hover { color: var(--brand); }
  .result__excerpt {
    color: var(--ink-3);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Category grid (explore) */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
  }
  @media (max-width: 1024px) {
    .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 400px) {
    .cat-grid { grid-template-columns: 1fr; }
  }
  .cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-height: 10.5rem;
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    transition: all var(--t-base) var(--ease);
  }
  .cat-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
  .cat-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-2);
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
  }
  .cat-card:hover .cat-card__icon { background: var(--brand); color: #fff; }
  .cat-card__name {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.18rem;
    color: var(--ink);
    margin-top: auto;
  }
  .cat-card__count {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-mute);
  }

  /* Topic cloud (explore) */
  .topic-cloud { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .topic-cloud a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 2.25rem;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--ink-2);
    transition: all var(--t-base) var(--ease);
  }
  .topic-cloud a:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }
  .topic-cloud em {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--ink-mute);
  }
  .topic-cloud a:hover em { color: rgba(255, 255, 255, 0.7); }

  .trending-card {
    text-decoration: none;
  }
  .meta__icon {
    color: var(--ink-mute);
    margin-right: 0.15rem;
    transform: translateY(2px);
  }
  .meta__icon--accent {
    color: var(--accent);
  }
}

/* ==========================================================================
   BORROWED EDITORIAL LAYOUTS — Elimu public polish from upstream
   ========================================================================== */
@layer chrome {
  .masthead__edition {
    display: none;
    border-bottom: 1px solid var(--rule-soft);
    background: color-mix(in srgb, var(--paper) 78%, #fff);
  }
  .masthead__edition-inner {
    min-height: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .masthead__edition-inner a { color: var(--brand); }

  @media (min-width: 768px) {
    .masthead__edition { display: block; }
  }
}

@layer comps {
  .home-edition {
    padding-top: var(--s-6);
  }

  .edition-cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-5);
    align-items: end;
    margin-bottom: var(--s-6);
    padding: var(--s-6) 0;
    background: transparent;
    border: 1px solid var(--rule);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .edition-cover__intro h1 {
    margin-top: var(--s-1);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
  }
  .edition-cover__intro p:last-child {
    max-width: 44rem;
    margin-top: var(--s-3);
    color: var(--ink-3);
    font-size: var(--fs-lead);
  }
  .edition-cover__meta {
    display: grid;
    min-width: 15rem;
    gap: var(--s-2);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
  }

  .lead-board {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(22rem, 0.85fr);
    gap: var(--s-6);
    align-items: stretch;
    margin-bottom: var(--s-7);
  }
  .cover-story,
  .news-desk,
  .quick-briefs,
  .section-package {
    border-radius: var(--r-3);
  }
  .cover-story {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
  }
  .cover-story > *,
  .cover-story__body,
  .section-feature,
  .section-package__list,
  .quick-briefs__items a {
    min-width: 0;
  }
  .cover-story__media {
    min-height: 29rem;
    border-radius: 0;
  }
  .cover-story__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-4);
    padding: var(--s-7);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 252, 249, 1)),
      var(--surface);
  }
  .cover-story__body h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
  }
  .cover-story__body h2 a:hover,
  .desk-card h3 a:hover,
  .section-feature h3 a:hover,
  .section-package__list h3 a:hover {
    color: var(--brand);
  }
  .cover-story__body p {
    color: var(--ink-3);
    font-size: var(--fs-lead);
    line-height: 1.55;
  }

  .media-frame {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--paper-2);
    border-radius: var(--r-2);
  }
  .media-frame img,
  .media-frame video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  .media-frame--lead img { object-position: center; }

  .img-fallback {
    align-content: center;
    gap: var(--s-2);
    padding: var(--s-3);
    text-align: center;
  }
  .img-fallback__mark {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.56);
    color: var(--brand);
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
  }
  .img-fallback__label {
    max-width: 100%;
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .news-desk {
    display: flex;
    flex-direction: column;
    padding: var(--s-5);
    background:
      linear-gradient(180deg, #113a28, #0d291d),
      #0f2f20;
    border: 1px solid rgba(15, 47, 32, 0.8);
    color: #fff;
  }
  .desk-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .desk-head h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    line-height: 1;
  }
  .desk-head a {
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
  }
  .desk-list {
    display: grid;
    flex: 1;
  }
  .desk-card {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .desk-card:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .desk-card__media { aspect-ratio: 4 / 3; }
  .desk-card__media .img-fallback {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(209, 154, 0, 0.12)),
      #123a27;
    color: #fff;
  }
  .desk-card__media .img-fallback__mark {
    width: 2.35rem;
    height: 2.35rem;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.82rem;
  }
  .desk-card__media .img-fallback__label {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.58rem;
  }
  .desk-card h3 {
    margin-top: var(--s-1);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.18;
  }
  .desk-card .meta,
  .desk-card .kicker,
  .news-desk .eyebrow {
    color: rgba(255, 255, 255, 0.72);
  }

  .quick-briefs {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    margin-bottom: var(--s-9);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--rule);
  }
  .quick-briefs__label {
    display: grid;
    place-items: center;
    padding: var(--s-4) var(--s-5);
    background: var(--brand);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .quick-briefs__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .quick-briefs__items a {
    display: grid;
    gap: var(--s-1);
    min-width: 0;
    padding: var(--s-4);
    min-height: 6.25rem;
    border-left: 1px solid var(--rule);
  }
  .quick-briefs__items a:hover { background: var(--surface-tint); }
  .quick-briefs__items span {
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .quick-briefs__items strong {
    display: -webkit-box;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 0.98rem;
    line-height: 1.2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .front-grid--deep {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
  .grid-cards--editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cards--editorial .card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  }
  .grid-cards--editorial .card:first-child .card__media {
    aspect-ratio: auto;
    min-height: 22rem;
  }
  .grid-cards--editorial .card:first-child .card__title {
    font-size: var(--fs-h3);
  }

  .section-package {
    padding: var(--s-5);
    background: color-mix(in srgb, var(--surface) 84%, var(--paper));
    border: 1px solid var(--rule);
  }
  .section-package__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
    gap: var(--s-5);
  }
  .section-feature {
    display: grid;
    gap: var(--s-4);
  }
  .section-feature__media { aspect-ratio: 16 / 9; }
  .section-feature h3 {
    margin-top: var(--s-2);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    line-height: 1.08;
  }
  .section-feature p {
    display: -webkit-box;
    margin-top: var(--s-2);
    color: var(--ink-3);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .section-package__list {
    display: grid;
    align-content: start;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
  }
  .section-package__list article {
    padding: var(--s-4);
    border-bottom: 1px solid var(--rule);
  }
  .section-package__list article:last-child { border-bottom: 0; }
  .section-package__list h3 {
    margin-top: var(--s-1);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .rail--editor-note {
    background:
      linear-gradient(135deg, rgba(20, 83, 45, 0.94), rgba(16, 43, 66, 0.96)),
      var(--ink);
    color: #fff;
  }
  .rail--editor-note h2 {
    margin-top: var(--s-2);
    font-family: var(--font-serif);
    font-size: var(--fs-h4);
    line-height: 1.1;
  }
  .rail--editor-note p:last-child {
    margin-top: var(--s-3);
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.55;
  }

  .article-page-shell {
    padding: var(--s-7) 0 0;
  }
  .article-split {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: var(--s-7);
    align-items: center;
    padding-bottom: var(--s-8);
    border-bottom: 1px solid var(--rule);
  }
  .article-split__copy {
    display: grid;
    gap: var(--s-4);
  }
  .article-split h1 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
  }
  .article-split__dek {
    color: var(--ink-3);
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    font-style: italic;
    line-height: 1.45;
  }
  .article-split__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
  }
  .article-split__media figcaption {
    position: absolute;
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    background: rgba(15, 32, 24, 0.72);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-ui);
    font-size: 0.78rem;
  }
  .article-reading {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 46rem);
    gap: var(--s-7);
    align-items: start;
    justify-content: center;
    padding-top: var(--s-8);
  }
  .article-tools {
    position: sticky;
    top: 7.25rem;
    display: grid;
    gap: var(--s-4);
  }
  .article-tools__panel {
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
  }
  .article-tools__title {
    margin-bottom: var(--s-2);
    color: var(--ink-mute);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .article-tools__panel > a {
    color: var(--brand);
    font-family: var(--font-ui);
    font-weight: 800;
  }
  .article-reading .article-body {
    grid-column: auto;
    padding-bottom: var(--s-10);
  }
  .article-body.prose img {
    width: auto;
    max-width: 100%;
    max-height: min(760px, 78vh);
    object-fit: contain;
  }
  .related--deep { margin-top: 0; }

  .share-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
  }
  .share-strip a,
  .share-strip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0 var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--brand);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
  }
  .share-strip a:hover,
  .share-strip button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
  }
  .share-strip button { appearance: none; }

  @media (max-width: 1120px) {
    .edition-cover,
    .lead-board,
    .cover-story,
    .section-package__grid,
    .article-split,
    .article-reading {
      grid-template-columns: 1fr;
    }
    .edition-cover__meta {
      min-width: 0;
      text-align: left;
    }
    .cover-story__media {
      min-height: 18rem;
      aspect-ratio: 16 / 9;
    }
    .front-grid--deep,
    .front-grid {
      grid-template-columns: 1fr;
    }
    .article-tools {
      position: static;
    }
  }

  @media (max-width: 820px) {
    .quick-briefs {
      grid-template-columns: 1fr;
    }
    .quick-briefs__items {
      grid-template-columns: 1fr 1fr;
    }
    .grid-cards--editorial {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-cards--editorial .card:first-child {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 600px) {
    .home-edition {
      padding-top: var(--s-4);
    }
    .edition-cover {
      padding: var(--s-4);
    }
    .quick-briefs__items,
    .grid-cards--editorial {
      grid-template-columns: 1fr;
    }
    .desk-card {
      grid-template-columns: 6rem minmax(0, 1fr);
    }
    .cover-story__body {
      padding: var(--s-5);
    }
    .grid-cards--editorial .card:first-child .card__media {
      min-height: 0;
      aspect-ratio: 16 / 10;
    }
    .article-page-shell {
      padding-top: var(--s-4);
    }
    .article-split {
      gap: var(--s-5);
      padding-bottom: var(--s-5);
    }
    .article-reading {
      padding-top: var(--s-5);
    }
  }

  .deadline-list {
    display: grid;
    gap: var(--s-4);
  }
  .deadline-filter-strip {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.2fr) auto;
    gap: var(--s-4);
    align-items: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--s-5);
    padding: var(--s-4);
  }
  .deadline-filter-strip h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.32rem;
    line-height: 1.08;
    letter-spacing: 0;
    margin-top: var(--s-1);
  }
  .deadline-filter-strip p:not(.eyebrow) {
    color: var(--ink-3);
    font-size: 0.9rem;
    line-height: 1.45;
    margin-top: var(--s-2);
  }
  .deadline-filter-strip__chips,
  .deadline-filter-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .deadline-filter-strip__chips span {
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 0.45rem 0.65rem;
  }
  .deadline-filter-strip__actions {
    justify-content: flex-end;
  }
  .deadline-alert-signup {
    display: grid;
    grid-template-columns: minmax(16rem, 0.38fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
    padding: var(--s-5);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--s-6);
  }
  .deadline-alert-signup__copy h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: 0;
    margin-top: var(--s-1);
  }
  .deadline-alert-signup__copy p:not(.eyebrow) {
    color: var(--ink-3);
    line-height: 1.55;
    margin-top: var(--s-3);
  }
  .deadline-alert-form {
    display: grid;
    gap: var(--s-4);
  }
  .deadline-alert-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .deadline-alert-form label,
  .deadline-alert-form__topics label {
    display: grid;
    gap: var(--s-2);
    min-width: 0;
  }
  .deadline-alert-form input[type="text"],
  .deadline-alert-form select {
    width: 100%;
    min-width: 0;
    height: 2.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.94rem;
    padding: 0 var(--s-3);
  }
  .deadline-alert-form input:focus,
  .deadline-alert-form select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.14);
    outline: 0;
  }
  .deadline-alert-form__topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
  }
  .deadline-alert-form__topics legend {
    width: 100%;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .deadline-alert-form__topics label,
  .deadline-alert-form__consent {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
  }
  .deadline-alert-form__topics label {
    padding: 0.42rem 0.62rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--paper);
  }
  .deadline-alert-form__topics input,
  .deadline-alert-form__consent input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: var(--brand);
  }
  .deadline-alert-form__consent {
    align-items: flex-start;
    line-height: 1.45;
  }
  .deadline-card {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding: var(--s-5);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  .deadline-card__date {
    display: grid;
    gap: var(--s-1);
    justify-items: center;
    padding: var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--paper-2);
    color: var(--brand);
    text-align: center;
  }
  .deadline-card__date span {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
  }
  .deadline-card__date strong {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.45rem;
    line-height: 1;
  }
  .deadline-card__body {
    min-width: 0;
    display: grid;
    gap: var(--s-2);
  }
  .deadline-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .deadline-card__meta span {
    padding: 0.14rem 0.52rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .deadline-card h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.45rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .deadline-card p {
    max-width: 60rem;
    margin: 0;
    color: var(--ink-3);
    line-height: 1.55;
  }
  .deadline-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
  }
  .deadline-card__source {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 800;
  }
  .deadline-card__source:hover {
    color: var(--accent);
  }
  @media (max-width: 640px) {
    .deadline-alert-signup,
    .deadline-filter-strip,
    .deadline-card {
      grid-template-columns: 1fr;
    }
    .deadline-alert-form__grid {
      grid-template-columns: 1fr;
    }
    .deadline-alert-form .btn {
      width: 100%;
    }
    .deadline-card__date {
      justify-items: start;
      text-align: left;
    }
    .deadline-filter-strip__actions {
      justify-content: flex-start;
    }
  }

  .data-head {
    border-bottom: 1px solid var(--rule);
  }
  .field-label {
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .data-search {
    display: grid;
    grid-template-columns: minmax(16rem, 1.4fr) minmax(9rem, 0.75fr) minmax(9rem, 0.75fr) minmax(12rem, 1fr) auto;
    gap: var(--s-3);
    align-items: end;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    margin: 0 0 var(--s-4);
    padding: var(--s-4);
  }
  .data-search label {
    display: grid;
    gap: var(--s-2);
    min-width: 0;
  }
  .data-search input,
  .data-search select {
    width: 100%;
    min-width: 0;
    height: 2.55rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    padding: 0 var(--s-3);
  }
  .data-search input:focus,
  .data-search select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.12);
    outline: 0;
  }
  .data-search__input {
    position: relative;
    display: block;
  }
  .data-search__input .material-symbols-outlined {
    position: absolute;
    left: var(--s-3);
    top: 50%;
    color: var(--ink-mute);
    transform: translateY(-50%);
  }
  .data-search__input input {
    padding-left: 2.5rem;
  }
  .data-search__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    justify-content: flex-end;
  }
  .course-pathway-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: calc(-1 * var(--s-1)) 0 var(--s-5);
  }
  .course-pathway-shortcuts span {
    color: var(--ink-mute);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .course-pathway-shortcuts a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
  }
  .course-pathway-shortcuts a:hover {
    border-color: var(--brand);
    background: var(--surface-tint);
    color: var(--brand);
  }
  .data-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-6);
  }
  .data-filter a {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.84rem;
    font-weight: 800;
    padding: 0.4rem 0.75rem;
    box-shadow: var(--shadow-1);
  }
  .data-filter a:hover,
  .data-filter a.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--brand-ink);
  }
  .data-filter em {
    min-width: 1.35rem;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.2);
    font-style: normal;
    font-size: 0.72rem;
    text-align: center;
    padding: 0.05rem 0.35rem;
  }
  .data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .data-card {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface);
    padding: var(--s-5);
    box-shadow: var(--shadow-1);
  }
  .data-card__kicker,
  .data-card__meta,
  .data-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
  }
  .data-card__kicker span {
    border-radius: var(--r-pill);
    background: var(--learning-soft);
    color: #174a9c;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.16rem 0.5rem;
    text-transform: uppercase;
  }
  .data-card h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .data-card h2 a {
    color: inherit;
  }
  .data-card h2 a:hover {
    color: var(--brand);
  }
  .data-card p,
  .data-facts dd {
    color: var(--ink-3);
  }
  .data-card__meta span {
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.84rem;
    font-weight: 700;
  }
  .data-facts {
    display: grid;
    gap: var(--s-2);
  }
  .data-facts div {
    display: grid;
    gap: var(--s-1);
    border-top: 1px solid var(--rule-soft);
    padding-top: var(--s-2);
  }
  .data-facts dt {
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .data-card__foot {
    justify-content: space-between;
    border-top: 1px solid var(--rule);
    margin-top: var(--s-2);
    padding-top: var(--s-3);
  }
  .data-card__foot div {
    display: grid;
    gap: 0.05rem;
  }
  .data-card__foot span,
  .data-card__foot small {
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
  }
  .data-card__foot small {
    color: var(--ink-mute);
    font-family: var(--font-mono);
  }
  .data-card__foot a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.84rem;
    font-weight: 800;
  }
  .data-empty {
    margin-top: var(--s-6);
  }
  .crumb-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 800;
  }
  .data-detail {
    display: grid;
    gap: var(--s-5);
  }
  .data-detail__head {
    display: grid;
    gap: var(--s-3);
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s-5);
  }
  .data-detail__head h1 {
    max-width: 52rem;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 0.98;
    letter-spacing: 0;
  }
  .data-detail__head p {
    max-width: 48rem;
    color: var(--ink-3);
    font-size: 1.08rem;
    line-height: 1.65;
  }
  .data-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
    gap: var(--s-5);
    align-items: start;
  }
  .data-detail__panel {
    display: grid;
    gap: var(--s-4);
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
  }
  .data-detail__panel h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.45rem;
    letter-spacing: 0;
  }
  .data-facts--detail {
    gap: var(--s-3);
  }
  .data-facts--detail div {
    padding-top: var(--s-3);
  }
  .data-provenance {
    display: grid;
    gap: var(--s-3);
  }
  .data-provenance div {
    display: grid;
    gap: var(--s-1);
  }
  .data-provenance dt {
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .data-provenance dd {
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-weight: 700;
  }
  .data-provenance code {
    display: inline-flex;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--paper-2);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.15rem 0.45rem;
  }
  .data-detail__actions {
    display: grid;
    gap: var(--s-2);
  }
  .course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .course-card,
  .course-mini {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
  }
  .course-card h2,
  .course-mini h3 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.42rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .course-mini h3 {
    font-size: 1.1rem;
  }
  .course-card h2 a,
  .course-mini h3 a {
    color: inherit;
  }
  .course-card h2 a:hover,
  .course-mini h3 a:hover {
    color: var(--brand);
  }
  .course-card__institution {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 800;
  }
  .course-card__institution .material-symbols-outlined {
    color: var(--brand);
  }
  .course-pathways {
    display: grid;
    gap: var(--s-2);
    align-self: start;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--surface-tint);
    padding: var(--s-3);
  }
  .course-pathways__label {
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .course-pathways__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .course-pathways__chips span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.1;
    padding: 0.34rem 0.62rem;
  }
  .course-pathways--hero {
    max-width: 48rem;
    background: linear-gradient(135deg, var(--surface-tint), var(--learning-soft));
  }
  .course-facts div {
    background: var(--paper);
  }
  .course-profile {
    display: grid;
    gap: var(--s-5);
  }
  .course-profile__head {
    gap: var(--s-4);
  }
  .course-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .course-mini p {
    color: var(--ink-3);
    font-size: 0.95rem;
  }
  .fee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .fee-card {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
  }
  .fee-card h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.42rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .fee-card h2 a {
    color: inherit;
  }
  .fee-card h2 a:hover {
    color: var(--brand);
  }
  .fee-facts div {
    background: var(--paper);
  }
  .fee-watch,
  .course-watch,
  .funding-watch {
    display: grid;
    gap: var(--s-4);
    margin: 0 0 var(--s-6);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
  }
  .fee-watch__head,
  .course-watch__head,
  .funding-watch__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-3);
  }
  .fee-watch__head h2,
  .course-watch__head h2,
  .funding-watch__head h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.55rem;
    letter-spacing: 0;
  }
  .fee-watch__head a,
  .course-watch__head a,
  .funding-watch__head a {
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 900;
  }
  .fee-watch__grid,
  .course-watch__grid,
  .funding-watch__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .fee-watch-card,
  .course-watch-card,
  .funding-watch-card {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--paper);
    padding: var(--s-4);
  }
  .fee-watch-card h3,
  .course-watch-card h3,
  .funding-watch-card h3 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.12;
    letter-spacing: 0;
  }
  .fee-watch-card h3 a,
  .course-watch-card h3 a,
  .funding-watch-card h3 a {
    color: inherit;
  }
  .fee-watch-card h3 a:hover,
  .course-watch-card h3 a:hover,
  .funding-watch-card h3 a:hover {
    color: var(--brand);
  }
  .fee-watch-card p,
  .course-watch-card p,
  .funding-watch-card p {
    color: var(--ink-3);
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .fee-watch-card__institution,
  .course-watch-card__institution,
  .funding-watch-card__institution {
    color: var(--ink-2) !important;
    font-family: var(--font-ui);
    font-weight: 800;
  }
  .fee-watch-card__movement {
    display: grid;
    gap: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--rule-soft));
    border-radius: var(--r-1);
    background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface));
    padding: 0.55rem 0.65rem;
  }
  .fee-watch-card__movement span {
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .fee-watch-card__movement strong {
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 900;
  }
  .course-watch-card__code {
    align-self: start;
    width: fit-content;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-1);
    background: var(--surface);
    color: var(--ink-2) !important;
    font-family: var(--font-ui);
    font-size: 0.78rem !important;
    font-weight: 900;
    line-height: 1.1 !important;
    padding: 0.35rem 0.55rem;
  }
  .fee-watch-card__meta,
  .course-watch-card__meta,
  .funding-watch-card__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
  }
  .fee-watch-card__meta div,
  .course-watch-card__meta div,
  .funding-watch-card__meta div {
    display: grid;
    gap: 0.1rem;
    border-top: 1px solid var(--rule-soft);
    padding-top: var(--s-2);
  }
  .fee-watch-card__meta dt,
  .course-watch-card__meta dt,
  .funding-watch-card__meta dt {
    color: var(--ink-mute);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .fee-watch-card__meta dd,
  .course-watch-card__meta dd,
  .funding-watch-card__meta dd {
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 900;
  }
  .fee-profile {
    display: grid;
    gap: var(--s-5);
  }
  .fee-profile__head {
    gap: var(--s-4);
  }
  .fee-change-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--rule));
    border-radius: var(--r-2);
    background: color-mix(in srgb, var(--brand-soft) 50%, var(--surface));
    color: var(--ink-2);
    padding: var(--s-4);
  }
  .fee-change-alert .material-symbols-outlined {
    color: var(--brand);
    font-size: 1.65rem;
  }
  .fee-change-alert strong {
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 900;
  }
  .fee-change-alert p {
    margin-top: var(--s-1);
    color: var(--ink-3);
  }
  .fee-history {
    display: grid;
    gap: var(--s-3);
  }
  .fee-history__item {
    display: grid;
    gap: var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--paper);
    padding: var(--s-4);
  }
  .fee-history__item > div:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-2);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 800;
  }
  .fee-history__item strong {
    color: var(--ink);
  }
  .fee-history__item p {
    color: var(--ink-3);
  }
  .fee-history__raw {
    border-left: 3px solid var(--brand);
    padding-left: var(--s-3);
  }
  .scholarship-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .scholarship-card {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
  }
  .scholarship-card h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.42rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .scholarship-card h2 a {
    color: inherit;
  }
  .scholarship-card h2 a:hover {
    color: var(--brand);
  }
  .scholarship-facts div {
    background: var(--paper);
  }
  .funding-deadline-panel {
    display: grid;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
  }
  .funding-deadline-list .deadline-card {
    box-shadow: none;
  }
  .scholarship-profile {
    display: grid;
    gap: var(--s-5);
  }
  .scholarship-profile__head {
    gap: var(--s-4);
  }
  .funding-change-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--rule));
    border-radius: var(--r-2);
    background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
    color: var(--ink-2);
    padding: var(--s-4);
  }
  .funding-change-alert .material-symbols-outlined {
    color: var(--accent);
    font-size: 1.65rem;
  }
  .funding-change-alert strong {
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 900;
  }
  .funding-change-alert p {
    margin-top: var(--s-1);
    color: var(--ink-3);
  }
  .funding-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .funding-checklist div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-2);
    align-items: start;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink-3);
    padding: var(--s-3);
  }
  .funding-checklist .material-symbols-outlined {
    color: var(--accent);
  }
  .county-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .county-card,
  .county-mini {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
  }
  .county-card h2,
  .county-mini h3,
  .county-list h3 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.36rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .county-mini h3,
  .county-list h3 {
    font-size: 1.08rem;
  }
  .county-card h2 a,
  .county-mini h3 a,
  .county-list h3 a {
    color: inherit;
  }
  .county-card h2 a:hover,
  .county-mini h3 a:hover,
  .county-list h3 a:hover {
    color: var(--brand);
  }
  .county-stats,
  .county-profile__summary {
    display: grid;
    gap: var(--s-2);
  }
  .county-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .county-profile__summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .county-stats span,
  .county-stat {
    display: grid;
    gap: 0.12rem;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    padding: var(--s-3);
  }
  .county-stats strong,
  .county-stat strong {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.42rem;
    line-height: 1;
  }
  .county-stat .material-symbols-outlined {
    color: var(--brand);
  }
  .county-profile {
    display: grid;
    gap: var(--s-5);
  }
  .county-profile__head {
    gap: var(--s-4);
  }
  .county-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    padding: var(--s-3);
  }
  .county-action-bar a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 900;
    padding: 0.55rem 0.75rem;
  }
  .county-action-bar a:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--rule));
    color: var(--brand);
  }
  .county-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
  }
  .county-section-head h2 {
    margin: 0;
  }
  .county-section-head a {
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 900;
  }
  .county-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .county-mini p,
  .county-list p {
    color: var(--ink-3);
    font-size: 0.95rem;
  }
  .county-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .county-list {
    display: grid;
    gap: var(--s-3);
  }
  .county-list article {
    display: grid;
    gap: var(--s-1);
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: var(--s-3);
  }
  .county-list article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .deadline-list--compact {
    gap: var(--s-3);
  }
  .school-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .school-card,
  .school-record {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
  }
  .school-card h2,
  .school-record h3 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.42rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .school-record h3 {
    font-size: 1.22rem;
  }
  .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
  }
  .school-card h2 a,
  .school-record h3 a {
    color: inherit;
  }
  .school-card h2 a:hover,
  .school-record h3 a:hover {
    color: var(--brand);
  }
  .school-stats,
  .school-profile__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
  }
  .school-stats span,
  .school-stat {
    display: grid;
    gap: 0.12rem;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    padding: var(--s-3);
  }
  .school-stats strong,
  .school-stat strong {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.45rem;
    line-height: 1;
  }
  .school-stat .material-symbols-outlined {
    color: var(--brand);
  }
  .school-profile {
    display: grid;
    gap: var(--s-5);
  }
  .school-record-list {
    display: grid;
    gap: var(--s-4);
  }
  .claim-page {
    display: grid;
    gap: var(--s-5);
  }
  .claim-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.36fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
  }
  .claim-form {
    display: grid;
    gap: var(--s-4);
  }
  .claim-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .claim-form__grid label {
    display: grid;
    gap: var(--s-2);
  }
  .claim-form__span {
    grid-column: 1 / -1;
  }
  .claim-form__notice,
  .public-flash {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    padding: var(--s-4);
  }
  .claim-form__notice .material-symbols-outlined,
  .public-flash .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--brand);
    font-size: 1.3rem;
    margin-top: 0.08rem;
  }
  .public-flash {
    margin: 0;
  }
  .public-flash strong {
    display: block;
    color: var(--ink);
    font-weight: 800;
    margin-bottom: 0.1rem;
  }
  .public-flash--ok {
    border-color: rgba(31, 122, 74, 0.3);
    background: rgba(31, 122, 74, 0.08);
  }
  .public-flash--err {
    border-color: rgba(179, 38, 30, 0.3);
    background: rgba(179, 38, 30, 0.06);
  }
  .public-flash--err .material-symbols-outlined {
    color: var(--err);
  }
  .teacher-search {
    grid-template-columns: minmax(16rem, 1fr) auto;
    margin-bottom: var(--s-5);
  }
  .teacher-focus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-8);
  }
  .teacher-focus-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    min-width: 0;
    min-height: 8.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
    padding: var(--s-4);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  }
  .teacher-focus-card:hover {
    border-color: rgba(20, 83, 45, 0.32);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
  }
  .teacher-focus-card__icon {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-2);
    background: var(--accent-soft);
    color: var(--brand);
  }
  .teacher-focus-card strong,
  .teacher-focus-card small {
    display: block;
  }
  .teacher-focus-card strong {
    font-family: var(--font-ui);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.15;
  }
  .teacher-focus-card small {
    color: var(--ink-3);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.45;
    margin-top: var(--s-2);
  }
  .teacher-section {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-8);
  }
  .teacher-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-4);
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s-3);
  }
  .teacher-section__head h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: 0;
    margin-top: var(--s-1);
  }
  .teacher-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
  }
  .teacher-section__link:hover {
    color: var(--accent);
  }
  .teacher-deadline-list .deadline-card {
    box-shadow: none;
  }
  .teacher-empty {
    margin-top: 0;
  }
  .cbc-search {
    grid-template-columns: minmax(16rem, 1.25fr) minmax(9rem, 0.65fr) minmax(12rem, 0.9fr) auto;
    margin-bottom: var(--s-5);
  }
  .cbc-focus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-8);
  }
  .cbc-focus-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    min-width: 0;
    min-height: 8.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
    padding: var(--s-4);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  }
  .cbc-focus-card:hover {
    border-color: rgba(31, 111, 235, 0.32);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
  }
  .cbc-focus-card__icon {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-2);
    background: var(--learning-soft);
    color: var(--brand);
  }
  .cbc-focus-card strong,
  .cbc-focus-card small {
    display: block;
  }
  .cbc-focus-card strong {
    font-family: var(--font-ui);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.15;
  }
  .cbc-focus-card small {
    color: var(--ink-3);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.45;
    margin-top: var(--s-2);
  }
  .cbc-section {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-8);
  }
  .cbc-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-4);
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s-3);
  }
  .cbc-section__head h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: 0;
    margin-top: var(--s-1);
  }
  .cbc-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
  }
  .cbc-section__link:hover {
    color: var(--accent);
  }
  .cbc-deadline-list .deadline-card {
    box-shadow: none;
  }
  .cbc-empty {
    margin-top: 0;
  }
  .hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  @media (max-width: 820px) {
    .data-search {
      grid-template-columns: 1fr;
    }
    .data-search__actions,
    .data-search__actions .btn {
      width: 100%;
    }
    .course-search {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .course-search .data-search__query,
    .course-search .data-search__actions {
      grid-column: 1 / -1;
    }
    .fee-search {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .fee-search .data-search__query,
    .fee-search .data-search__actions {
      grid-column: 1 / -1;
    }
    .scholarship-search {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .scholarship-search .data-search__query,
    .scholarship-search .data-search__actions {
      grid-column: 1 / -1;
    }
    .county-search {
      grid-template-columns: 1fr;
    }
    .teacher-search {
      grid-template-columns: 1fr;
    }
    .teacher-focus-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cbc-search {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cbc-search .data-search__query,
    .cbc-search .data-search__actions {
      grid-column: 1 / -1;
    }
    .cbc-focus-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .data-grid {
      grid-template-columns: 1fr;
    }
    .course-grid,
    .course-mini-grid,
    .fee-grid,
    .fee-watch__grid,
    .course-watch__grid,
    .funding-watch__grid,
    .scholarship-grid,
    .funding-checklist,
    .county-grid,
    .county-mini-grid,
    .county-two-col,
    .school-grid,
    .school-profile__summary {
      grid-template-columns: 1fr;
    }
    .county-profile__summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .data-detail__layout {
      grid-template-columns: 1fr;
    }
    .claim-layout,
    .claim-form__grid {
      grid-template-columns: 1fr;
    }
    .teacher-section__head {
      align-items: start;
      flex-direction: column;
    }
    .cbc-section__head {
      align-items: start;
      flex-direction: column;
    }
  }
  @media (max-width: 560px) {
    .course-search {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-bottom: calc(var(--s-5) + 6.75rem);
    }
    .course-search .data-search__query,
    .course-search .data-search__actions {
      grid-column: 1 / -1;
    }
    .fee-search {
      grid-template-columns: 1fr;
    }
    .fee-search .data-search__query,
    .fee-search .data-search__actions {
      grid-column: auto;
    }
    .fee-watch-card__meta,
    .course-watch-card__meta,
    .funding-watch-card__meta {
      grid-template-columns: 1fr;
    }
    .teacher-focus-grid {
      grid-template-columns: 1fr;
    }
    .teacher-focus-card {
      min-height: 0;
    }
    .cbc-search,
    .cbc-focus-grid {
      grid-template-columns: 1fr;
    }
    .cbc-focus-card {
      min-height: 0;
    }
  }
}

/* ==========================================================================
   UTILITIES — small one-off helpers
   ========================================================================== */
@layer utils {
  [data-show-md],
  [data-show-lg] {
    display: none !important;
  }
  @media (min-width: 768px)  {
    [data-show-md] { display: inline-flex !important; }
  }
  @media (min-width: 1024px) {
    [data-show-lg] { display: inline-flex !important; }
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .stack-v { display: flex; flex-direction: column; }
  .stack-v > * + * { margin-top: var(--gap, var(--s-3)); }
  .row { display: flex; align-items: center; gap: var(--s-3); }
  .row--between { justify-content: space-between; }
  .text-center { text-align: center; }
  .text-mute { color: var(--ink-3); }
  .empty-note { padding: 2rem 0; }
  .u-mt-2 { margin-top: var(--s-2); }
  .u-mt-3 { margin-top: var(--s-3); }
  .u-mt-4 { margin-top: var(--s-4); }
  .u-mt-5 { margin-top: var(--s-5); }
  .u-mt-6 { margin-top: var(--s-6); }
  .u-mb-5 { margin-bottom: var(--s-5); }
  .nowrap { white-space: nowrap; }
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .masthead, .footer, .mob-nav, .breaking, .article-rail, .article-tools, .related { display: none !important; }
  body { background: #fff; color: #000; }
  .article-body { font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
}

/* Reduced motion */
@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;
  }
}