/* ==========================================================================
   johnmtongoi — Dark Editorial Design System  (v2 "Nightdesk")
   --------------------------------------------------------------------------
   Single stylesheet for the public site. Bold dark-editorial direction:
   deep ink surfaces, luminous paper-white type, electric-blue signal,
   red urgency. Organized into @layers for 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, drawer
     comps    — hero, cards, sections, article, listings, pagination
     utils    — small one-off helpers used in templates
   ========================================================================== */

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

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* Night palette: layered ink surfaces */
    --paper:         #0b0d10;   /* page background            */
    --paper-2:       #10131a;   /* alt band background        */
    --surface:       #14181f;   /* card / panel surface       */
    --surface-tint:  #1a212b;   /* hover / tinted surface     */
    --body-bg:
      radial-gradient(1200px 500px at 70% -200px, rgba(77, 127, 255, 0.07), transparent 65%),
      var(--paper);
    --masthead-bg:   rgba(11, 13, 16, 0.86);
    --mobile-nav-bg: rgba(11, 13, 16, 0.92);
    --drawer-scrim:  rgba(5, 6, 8, 0.6);
    --brand-mark-bg: linear-gradient(145deg, #171c25, #0d1117);
    --brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --footer-bg:     #07090b;
    --code-bg:       #0a0c10;
    --explore-panel-bg: rgba(11, 13, 16, 0.55);

    /* Type colors: luminous, never pure white */
    --ink:           #f2f3ef;
    --ink-2:         #c7cdc7;
    --ink-3:         #929c95;
    --ink-mute:      #6f7973;

    /* Hairlines */
    --rule:          #262d36;
    --rule-soft:     #1b2129;
    --rule-strong:   #39424e;

    /* Brand: electric signal blue + urgency red */
    --brand:         #4d7fff;
    --brand-bright:  #7da0ff;
    --brand-ink:     #ffffff;
    --brand-soft:    rgba(77, 127, 255, 0.14);
    --brand-hover:   #6b93ff;
    --accent:        #ff5148;
    --accent-soft:   rgba(255, 81, 72, 0.14);

    /* Status */
    --ok:            #3ecf8e;
    --warn:          #f2b544;
    --err:           #ff6b62;

    /* Typography stacks */
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans:  "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-ui:    "IBM Plex Sans", system-ui, sans-serif;
    --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale — fluid at the top end */
    --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.3rem;
    --fs-h3:        1.65rem;
    --fs-h2:        clamp(1.7rem, 1.35rem + 1.4vw, 2.2rem);
    --fs-h1:        clamp(2.2rem, 1.7rem + 2.2vw, 3.2rem);
    --fs-display:   clamp(2.5rem, 1.8rem + 3.6vw, 4.4rem);

    /* 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, 1320px);
    --container-narrow: min(100% - 2rem, 1100px);
    --container-read:   min(100% - 2rem, 720px);

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

    /* Elevation (dark: glow + depth) */
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 8px 40px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --glow-brand: 0 0 0 1px rgba(77, 127, 255, 0.35), 0 4px 24px rgba(77, 127, 255, 0.18);

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

    color-scheme: dark;
  }

  html[data-theme="light"] {
    --paper:         #f6f8fb;
    --paper-2:       #edf2f8;
    --surface:       #ffffff;
    --surface-tint:  #e8eef6;

    --body-bg:       var(--paper);
    --masthead-bg:   rgba(255, 255, 255, 0.9);
    --mobile-nav-bg: rgba(255, 255, 255, 0.94);
    --drawer-scrim:  rgba(18, 24, 33, 0.36);
    --brand-mark-bg: linear-gradient(145deg, #ffffff, #e7edf5);
    --brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.12);
    --footer-bg:     #e8edf5;
    --code-bg:       #eef3f9;
    --explore-panel-bg: rgba(255, 255, 255, 0.72);

    --ink:           #161b22;
    --ink-2:         #39424e;
    --ink-3:         #657181;
    --ink-mute:      #8792a1;

    --rule:          #d4dbe6;
    --rule-soft:     #e5eaf2;
    --rule-strong:   #b9c4d3;

    --brand:         #2458ff;
    --brand-bright:  #1748de;
    --brand-ink:     #ffffff;
    --brand-soft:    rgba(36, 88, 255, 0.12);
    --brand-hover:   #1748de;
    --accent:        #d83a32;
    --accent-soft:   rgba(216, 58, 50, 0.12);

    --ok:            #108b61;
    --warn:          #a86c16;
    --err:           #c9332c;

    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-3: 0 18px 42px rgba(15, 23, 42, 0.22);
    --glow-brand: 0 0 0 1px rgba(36, 88, 255, 0.24), 0 8px 24px rgba(36, 88, 255, 0.14);

    color-scheme: light;
  }
}

/* ==========================================================================
   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 { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: none; padding: 0; cursor: pointer; }
  a { color: inherit; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink-2);
    background: var(--body-bg);
    min-height: 100dvh;
  }

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

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-weight: 700;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); font-weight: 800; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); }

  a {
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
  }
  p a, .prose a {
    color: var(--brand-bright);
    text-decoration: underline;
    text-decoration-color: rgba(125, 160, 255, 0.4);
    text-underline-offset: 3px;
  }
  p a:hover, .prose a:hover {
    color: var(--ink);
    text-decoration-color: var(--brand);
  }

  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-1);
  }

  .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    min-width: 1em;
    max-width: 1em;
    overflow: hidden;
    direction: ltr;
    font-family: "Material Symbols Outlined";
    font-size: 1.35rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    user-select: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }
  .icon-sm { font-size: 1.05rem !important; }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--brand);
    color: var(--brand-ink);
    padding: var(--s-3) var(--s-5);
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: 0 0 var(--r-3) 0;
  }
  .skip-link:focus { left: 0; }

  input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
}

/* ==========================================================================
   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 { padding-block: var(--s-7) var(--s-11); }

  main { min-height: 55vh; }

  .row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
  }

  .section { margin-block: var(--s-10); }
  .section:first-child { margin-top: var(--s-7); }
  .front-grid__main > .section:not(:first-child),
  .front-grid__rail .rail,
  .related,
  .explore-page .section,
  .grid-cards .card:nth-child(n+7) {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }

  /* Front page: main column + rail */
  .front-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-9);
    margin-top: var(--s-9);
  }
  @media (min-width: 1024px) {
    .front-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-10); }
    .front-grid__rail {
      border-left: 1px solid var(--rule-soft);
      padding-left: var(--s-7);
    }
  }
  .front-grid__main > .section:first-child { margin-top: 0; }

  .front-grid__rail .rail { margin-bottom: var(--s-9); }
  @media (min-width: 1024px) {
    .front-grid__rail { position: relative; }
    .front-grid__rail > :first-child { margin-top: 0; }
  }

  /* Card grids */
  .grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--s-7) var(--s-6);
  }
  .grid-cards--3 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  }
  @media (min-width: 1024px) {
    .grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

/* ==========================================================================
   CHROME — masthead, drawer, footer, mobile nav
   ========================================================================== */
@layer chrome {

  /* ------- Masthead ------- */
  .masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--masthead-bg);
    border-bottom: 1px solid var(--rule);
  }
  .masthead::after {
    /* signal line */
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 55%, var(--accent) 55%, var(--accent) 70%, transparent 70%);
    opacity: 0.9;
  }
  .masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    min-height: 4rem;
  }

  .masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
  }
  .masthead__brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--r-2);
    background: var(--brand-mark-bg);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    box-shadow: var(--brand-mark-shadow);
    position: relative;
    overflow: hidden;
  }
  .masthead__brand-mark::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand) 60%, var(--accent) 60%);
  }
  .masthead__brand-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
  }
  .masthead__brand-stack > span:first-child {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.32rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
  }
  .masthead__tagline {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 519px) {
    .masthead__tagline { display: none; }
  }

  .masthead__nav {
    display: none;
    align-items: center;
    gap: var(--s-2);
  }
  @media (min-width: 900px) {
    .masthead__nav { display: flex; }
  }
  .masthead__nav a {
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    padding: 0.45rem 0.7rem;
    border-radius: var(--r-2);
    position: relative;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .masthead__nav a:hover {
    color: var(--ink);
    background: var(--surface-tint);
  }
  .masthead__nav a[aria-current="page"] {
    color: var(--ink);
  }
  .masthead__nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.1rem;
    height: 2px;
    background: var(--brand);
    border-radius: var(--r-pill);
  }

  .masthead__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
  }

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

  /* Width-gated masthead actions (elements carry inline display:none) */
  .masthead [data-show-md],
  .masthead [data-show-lg] { display: none !important; }
  @media (min-width: 768px)  { .masthead [data-show-md] { display: inline-flex !important; } }
  @media (min-width: 1024px) { .masthead [data-show-lg] { display: inline-flex !important; } }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-2);
    color: var(--ink-2);
    border: 1px solid transparent;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .icon-btn:hover {
    color: var(--ink);
    background: var(--surface-tint);
    border-color: var(--rule);
  }
  .theme-toggle .material-symbols-outlined {
    transition: transform var(--t-base) var(--ease);
  }
  .theme-toggle:hover .material-symbols-outlined {
    transform: rotate(18deg);
  }

  /* ------- Buttons ------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    padding: 0.62rem 1.15rem;
    border-radius: var(--r-2);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), box-shadow 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);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
  }
  .btn--primary:hover {
    background: var(--brand-hover);
    box-shadow: var(--glow-brand);
  }
  .btn--ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--rule-strong);
  }
  .btn--ghost:hover {
    color: var(--ink);
    border-color: var(--brand);
    background: var(--brand-soft);
  }
  .btn--sm { padding: 0.42rem 0.85rem; font-size: 0.82rem; }

  /* ------- Mobile drawer ------- */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--drawer-scrim);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease);
  }
  .drawer.is-open { opacity: 1; }
  .drawer__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(84vw, 340px);
    background: var(--paper-2);
    border-right: 1px solid var(--rule);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform var(--t-slow) var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .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-serif);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
  }
  .drawer__brand > span[aria-hidden] {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: var(--r-2);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
  }
  .drawer__nav {
    display: flex;
    flex-direction: column;
    padding: var(--s-4) var(--s-3) var(--s-8);
  }
  .drawer__nav a,
  .drawer__theme {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: 0.7rem var(--s-3);
    border-radius: var(--r-2);
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink-2);
    text-align: left;
  }
  .drawer__nav a:hover,
  .drawer__theme:hover {
    background: var(--surface-tint);
    color: var(--ink);
  }
  .drawer__section-label {
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    padding: var(--s-6) var(--s-3) var(--s-2);
    border-top: 1px solid var(--rule-soft);
    margin-top: var(--s-4);
  }

  /* ------- Footer ------- */
  .footer {
    margin-top: var(--s-12);
    background: var(--footer-bg);
    border-top: 1px solid var(--rule);
    position: relative;
  }
  .footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 60%, var(--accent) 60%);
  }
  .footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
    padding-block: var(--s-10) var(--s-8);
  }
  @media (min-width: 640px) {
    .footer__top { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .footer__top { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: var(--s-9); }
  }
  .footer__brand {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.9rem;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .footer__about {
    margin-top: var(--s-4);
    max-width: 36ch;
    color: var(--ink-3);
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .footer__col-title {
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    margin-bottom: var(--s-4);
  }
  .footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .footer__list a {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--ink-3);
    padding-block: 2px;
  }
  .footer__list a:hover { color: var(--brand-bright); }
  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-block: var(--s-5);
    border-top: 1px solid var(--rule-soft);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--ink-mute);
  }

  /* ------- Mobile bottom nav ------- */
  .mob-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--mobile-nav-bg);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  @media (min-width: 900px) {
    .mob-nav { display: none; }
  }
  .mob-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.55rem 0 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
  }
  .mob-nav__item .material-symbols-outlined { font-size: 1.3rem; }
  .mob-nav__item.is-active { color: var(--brand-bright); }
  .mob-nav__item:hover { color: var(--ink); }
  @media (max-width: 899px) {
    body { padding-bottom: 4rem; }
  }
}

/* ==========================================================================
   COMPS
   ========================================================================== */
@layer comps {

  /* ------- Kicker / eyebrow / meta ------- */
  .kicker {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand-bright);
  }
  a.kicker:hover { color: var(--ink); }

  .eyebrow {
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: var(--s-1);
  }

  .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    font-family: var(--font-ui);
    font-size: var(--fs-meta);
    color: var(--ink-3);
  }
  .meta strong { color: var(--ink-2); font-weight: 600; }
  .meta--byline { font-size: 0.85rem; }
  .meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
  .meta > span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-mute);
    margin-right: var(--s-3);
  }
  .byline-author {
    gap: var(--s-2) !important;
  }
  .byline-avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
  }

  /* ------- Breaking bar ------- */
  .breaking {
    background: linear-gradient(90deg, rgba(255, 81, 72, 0.16), rgba(255, 81, 72, 0.05) 70%);
    border-bottom: 1px solid rgba(255, 81, 72, 0.3);
  }
  .breaking__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 2.6rem;
    padding-block: var(--s-2);
  }
  .breaking__label {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 0.22rem 0.6rem;
    border-radius: var(--r-1);
    animation: breaking-pulse 2.4s var(--ease) infinite;
  }
  @keyframes breaking-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 81, 72, 0.5); }
    55%      { box-shadow: 0 0 0 7px rgba(255, 81, 72, 0); }
  }
  .breaking__link {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .breaking__link:hover { color: var(--brand-bright); }
  .breaking__icon { margin-left: auto; color: var(--accent); flex-shrink: 0; }

  /* ------- Lead / hero ------- */
  .lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }
  @media (min-width: 1024px) {
    .lead { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  }

  .hero {
    position: relative;
    display: block;
    border-radius: var(--r-3);
    overflow: hidden;
    isolation: isolate;
    min-height: 420px;
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    background: var(--surface);
  }
  @media (min-width: 768px) { .hero { min-height: 520px; } }

  .hero__media,
  .hero__media img,
  .hero__media .img-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero__media img {
    object-fit: cover;
  }
  .hero:hover .hero__media img {
    transform: scale(1.035);
  }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(7, 9, 12, 0.96) 0%, rgba(7, 9, 12, 0.72) 34%, rgba(7, 9, 12, 0.18) 62%, rgba(7, 9, 12, 0.05) 100%);
    z-index: 1;
  }

  .hero__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-4);
    min-height: inherit;
    padding: clamp(1.25rem, 3vw, 2.5rem);
  }
  .hero__title {
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 22ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  }
  .hero__dek {
    font-family: var(--font-sans);
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: rgba(242, 243, 239, 0.85);
    max-width: 58ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero .meta { color: rgba(199, 205, 199, 0.9); }
  .hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    align-self: flex-start;
    margin-top: var(--s-2);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.6rem 1.1rem;
    border-radius: var(--r-2);
    background: var(--brand);
    transition: background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), gap var(--t-fast) var(--ease);
  }
  .hero:hover .hero__cta {
    background: var(--brand-hover);
    box-shadow: var(--glow-brand);
    gap: var(--s-3);
  }

  /* ------- Latest Notes stack (numbered) ------- */
  .stack {
    display: flex;
    flex-direction: column;
    counter-reset: stack;
  }
  .stack__item {
    counter-increment: stack;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--s-4);
    padding-block: var(--s-5);
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
  }
  .stack__item:last-child { border-bottom: none; }
  .stack__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
  }
  .stack__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
  }
  .stack__item:hover .stack__media img { transform: scale(1.06); }
  .stack__copy {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
  }
  .stack__copy::before {
    content: counter(stack, decimal-leading-zero);
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
  }
  .stack__title {
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 700;
  }
  .stack__title a { color: var(--ink); }
  .stack__title a:hover { color: var(--brand-bright); }
  .stack .kicker { font-size: 0.66rem; }

  /* ------- Section heads ------- */
  .sect-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-6);
    border-bottom: 2px solid var(--rule);
    position: relative;
  }
  .sect-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 2px;
    background: var(--brand);
  }
  .sect-head--compact {
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-2);
  }
  .sect-head__title {
    font-size: var(--fs-h3);
    letter-spacing: -0.015em;
  }
  .sect-head--compact .sect-head__title { font-size: 1.2rem; }
  .sect-head__link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 2px;
  }
  .sect-head__link:hover { color: var(--brand-bright); }
  .sect-head--split { align-items: flex-end; }
  .sect-head__note {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--ink-mute);
  }

  /* ------- Cards ------- */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-3);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
  }
  .card:hover {
    transform: translateY(-3px);
    border-color: var(--rule-strong);
    box-shadow: var(--shadow-2);
  }
  .card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-2);
  }
  .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
  }
  .card:hover .card__media img {
    transform: scale(1.05);
  }
  .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
    flex: 1;
  }
  .card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
  }
  .card__read {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .card__title {
    font-size: 1.18rem;
    line-height: 1.3;
    font-weight: 700;
  }
  .card__title a { color: var(--ink); }
  .card__title a:hover { color: var(--brand-bright); }
  .card__excerpt {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card__meta { margin-top: auto; padding-top: var(--s-3); }

  /* Image fallback */
  .img-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background:
      radial-gradient(400px 200px at 30% 20%, rgba(77, 127, 255, 0.12), transparent 70%),
      var(--paper-2);
    color: var(--ink-mute);
  }
  .img-fallback .material-symbols-outlined { font-size: 2.2rem; opacity: 0.6; }

  /* ------- Rail widgets ------- */
  .rail { margin-bottom: var(--s-9); }

  .trend-list {
    display: flex;
    flex-direction: column;
  }
  .trend-list a {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-1);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--font-ui);
    transition: background var(--t-fast) var(--ease);
  }
  .trend-list a:last-child { border-bottom: none; }
  .trend-list a:hover { background: var(--surface-tint); }
  .trend-list__rank {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--brand);
    min-width: 1.7rem;
  }
  .trend-list__topic {
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--ink-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .trend-list a:hover .trend-list__topic { color: var(--ink); }
  .trend-list__count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-mute);
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-pill);
    padding: 0.1rem 0.55rem;
  }

  .sect-list {
    display: flex;
    flex-direction: column;
  }
  .sect-list a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-1);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--ink-2);
  }
  .sect-list a:last-child { border-bottom: none; }
  .sect-list a:hover { color: var(--brand-bright); background: var(--surface-tint); }
  .sect-list .material-symbols-outlined {
    font-size: 1.15rem;
    color: var(--ink-mute);
  }
  .sect-list a:hover .material-symbols-outlined { color: var(--brand); }

  /* ------- Article page ------- */
  .article-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--brand), var(--brand-bright));
    pointer-events: none;
  }

  .article-hero {
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
    padding-block: var(--s-6) var(--s-8);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s-8);
  }
  .article-hero__copy { max-width: 60rem; }
  .article-hero__copy h1 {
    font-size: var(--fs-display);
    line-height: 1.06;
    margin-top: var(--s-3);
    max-width: 24ch;
  }
  .article-hero__dek {
    margin-top: var(--s-5);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 62ch;
  }
  .article-hero__meta { margin-top: var(--s-5); }

  .article-hero__media {
    border-radius: var(--r-3);
    overflow: hidden;
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
  }
  .article-hero__media img { width: 100%; }
  .article-hero__media figcaption {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--ink-mute);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-top: 1px solid var(--rule-soft);
  }

  .article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
  }
  .article-share--hero { margin-top: var(--s-6); }
  .article-share__label {
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    margin-right: var(--s-2);
  }
  .article-share a,
  .article-share button {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    padding: 0.32rem 0.85rem;
    background: transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .article-share a:hover,
  .article-share button:hover {
    color: var(--ink);
    border-color: var(--brand);
    background: var(--brand-soft);
  }

  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }
  @media (min-width: 1024px) {
    .article-layout {
      grid-template-columns: 230px minmax(0, 1fr);
      gap: var(--s-10);
      align-items: start;
    }
    .article-rail {
      position: sticky;
      top: 5.5rem;
    }
  }
  .article-rail {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    order: 2;
  }
  @media (min-width: 1024px) { .article-rail { order: 0; } }
  .article-rail__panel {
    padding: var(--s-4) 0 var(--s-5);
    border-top: 2px solid var(--rule);
  }
  .article-rail__title {
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    margin-bottom: var(--s-2);
  }
  .article-rail__panel > a {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--brand-bright);
  }
  .article-rail__panel > a:hover { color: var(--ink); }
  .article-share--rail { margin-top: var(--s-2); }

  .article-body { min-width: 0; max-width: 720px; }

  /* ------- Prose (article content) ------- */
  .prose {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    line-height: 1.84;
    color: var(--ink-2);
  }
  .prose > * + * { margin-top: 1.1em; }
  .prose > p + p { margin-top: 1.16em; }
  .prose > :where(h2, h3, h4) + :where(p, ul, ol, blockquote, figure) { margin-top: 0.82em; }
  .prose > :where(p, ul, ol, blockquote, figure) + :where(h2, h3, h4) { margin-top: 2.15em; }
  .prose > p:first-child::first-letter {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 3.4em;
    line-height: 0.82;
    float: left;
    padding: 0.08em 0.14em 0 0;
    color: var(--ink);
  }
  .prose h2, .prose h3, .prose h4 {
    margin-top: var(--s-8);
    color: var(--ink);
  }
  .prose h2 { font-size: 1.7rem; }
  .prose h3 { font-size: 1.35rem; }
  .prose strong { color: var(--ink); }
  .prose blockquote {
    margin-block: var(--s-7);
    padding: var(--s-5) var(--s-6);
    border-left: 3px solid var(--brand);
    background: var(--surface);
    border-radius: 0 var(--r-3) var(--r-3) 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--ink);
  }
  .prose blockquote p + p { margin-top: var(--s-3); }
  .prose img {
    border-radius: var(--r-3);
    border: 1px solid var(--rule);
    margin-block: var(--s-6);
  }
  .prose iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--r-3);
    background: var(--paper-2);
  }
  .prose figure { margin-block: var(--s-7); }
  .prose figcaption {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--ink-mute);
    margin-top: var(--s-2);
  }
  .prose ul, .prose ol {
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose li::marker { color: var(--brand); }
  .prose hr {
    border: none;
    height: 1px;
    background: var(--rule);
    margin-block: var(--s-8);
    position: relative;
  }
  .prose code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--surface-tint);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    padding: 0.1em 0.4em;
  }
  .prose pre {
    background: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-5);
    overflow-x: auto;
  }
  .prose pre code { background: none; border: none; padding: 0; }
  .prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 0.92rem;
  }
  .prose th, .prose td {
    text-align: left;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule);
  }
  .prose th { color: var(--ink); font-weight: 700; }

  /* ------- Related band ------- */
  .related {
    margin-top: var(--s-11);
    padding-block: var(--s-9) var(--s-10);
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
  }

  /* ------- Listing pages (category / search) ------- */
  .listing-head {
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    padding-bottom: var(--s-6);
    margin-bottom: var(--s-8);
    border-bottom: 2px solid var(--rule);
    position: relative;
  }
  .listing-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 88px;
    height: 2px;
    background: var(--accent);
  }
  .listing-head__icon {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    flex-shrink: 0;
    border-radius: var(--r-3);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    color: var(--brand-bright);
  }
  .listing-head__icon .material-symbols-outlined { font-size: 1.7rem; }
  .listing-head h1 { font-size: var(--fs-h1); }
  .listing-head__lede {
    margin-top: var(--s-3);
    font-size: var(--fs-lead);
    color: var(--ink-3);
    max-width: 60ch;
  }
  .listing-head__count {
    display: inline-block;
    margin-top: var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-pill);
    padding: 0.25rem 0.8rem;
  }

  /* ------- Search ------- */
  .search-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-3);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
    margin-bottom: var(--s-7);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .search-bar:focus-within {
    border-color: var(--brand);
    box-shadow: var(--glow-brand);
  }
  .search-bar .material-symbols-outlined { color: var(--ink-mute); }
  .search-bar input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font-size: 1rem;
    font-family: var(--font-ui);
    color: var(--ink);
    padding-block: var(--s-3);
  }
  .search-bar input::placeholder { color: var(--ink-mute); }
  .search-bar button {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--brand-ink);
    background: var(--brand);
    border-radius: var(--r-2);
    padding: 0.6rem 1.2rem;
    transition: background var(--t-fast) var(--ease);
  }
  .search-bar button:hover { background: var(--brand-hover); }

  .results {
    display: flex;
    flex-direction: column;
  }
  .result {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--rule-soft);
  }
  @media (min-width: 640px) {
    .result { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); }
  }
  .result__media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
  }
  .result__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
  }
  .result:hover .result__media img { transform: scale(1.05); }
  .result__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
  .result__title { font-size: 1.3rem; line-height: 1.3; }
  .result__title a { color: var(--ink); }
  .result__title a:hover { color: var(--brand-bright); }
  .result__excerpt {
    font-size: 0.95rem;
    color: var(--ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ------- Explore page ------- */
  .explore-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: var(--s-8);
    border-radius: var(--r-3);
    border: 1px solid var(--rule);
    background:
      radial-gradient(600px 300px at 85% 0%, rgba(77, 127, 255, 0.16), transparent 70%),
      radial-gradient(400px 240px at 8% 110%, rgba(255, 81, 72, 0.1), transparent 70%),
      var(--surface);
  }
  @media (min-width: 900px) {
    .explore-hero { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  }
  .explore-hero__copy h1 {
    font-size: var(--fs-h1);
    margin-block: var(--s-2) var(--s-4);
  }
  .explore-hero__copy p:last-child {
    color: var(--ink-3);
    max-width: 55ch;
  }
  .explore-hero__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    padding: var(--s-6);
    border-radius: var(--r-3);
    background: var(--explore-panel-bg);
    border: 1px solid var(--rule-strong);
  }
  .explore-hero__panel > span {
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand-bright);
  }
  .explore-hero__panel > strong {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
  }
  .explore-hero__panel > em {
    font-style: normal;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--ink-3);
  }

  .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: var(--s-4);
  }
  .cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-3);
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .cat-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
  }
  .cat-card__index {
    position: absolute;
    top: var(--s-3);
    right: var(--s-4);
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--rule-strong);
    transition: color var(--t-base) var(--ease);
  }
  .cat-card:hover .cat-card__index { color: var(--brand); }
  .cat-card__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--r-2);
    background: var(--brand-soft);
    color: var(--brand-bright);
    margin-bottom: var(--s-2);
  }
  .cat-card__name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
  }
  .cat-card__count {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--ink-mute);
  }

  .topic-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
  }
  .topic-cloud a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    padding: 0.45rem 1rem;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .topic-cloud a:hover {
    color: var(--ink);
    border-color: var(--brand);
    background: var(--brand-soft);
  }
  .topic-cloud em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand-bright);
  }

  .topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .topic-chips a {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    padding: 0.25rem 0.75rem;
  }
  .topic-chips a:hover {
    color: var(--ink);
    border-color: var(--brand);
    background: var(--brand-soft);
  }

  /* ------- Pagination ------- */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-9);
    font-family: var(--font-ui);
  }
  .pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    padding: 0.5rem 0.9rem;
  }
  .pagination__btn:hover {
    color: var(--ink);
    border-color: var(--brand);
    background: var(--brand-soft);
  }
  .pagination__btn--disabled {
    opacity: 0.35;
    pointer-events: none;
  }
  .pagination__page {
    display: inline-grid;
    place-items: center;
    min-width: 2.4rem;
    height: 2.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-2);
    border-radius: var(--r-2);
    padding-inline: var(--s-2);
  }
  .pagination__page:hover { background: var(--surface-tint); color: var(--ink); }
  .pagination__page--current {
    background: var(--brand);
    color: var(--brand-ink);
  }

  /* ------- Empty states ------- */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
    padding: var(--s-11) var(--s-5);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--r-3);
    background: var(--surface);
  }
  .empty__icon {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-bright);
    margin-bottom: var(--s-2);
  }
  .empty__icon .material-symbols-outlined { font-size: 1.8rem; }
  .empty h1, .empty h2 { font-size: 1.5rem; }
  .empty p { color: var(--ink-3); max-width: 44ch; }
  .empty .btn { margin-top: var(--s-3); }
  .empty--home { margin-block: var(--s-9); }

  /* ------- Page-scope helpers ------- */
  .listing-head--no-icon { gap: 0; }

  .explore-page .section { margin-block: var(--s-9); }
  .explore-search { margin-bottom: var(--s-4); }
  .desk-board, .trend-board, .latest-board { scroll-margin-top: 5rem; }
}

/* ==========================================================================
   UTILS
   ========================================================================== */
@layer utils {
  .text-center { text-align: center; }
  .text-mute { color: var(--ink-mute); }
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   PLATFORM POLISH
   ========================================================================== */
@layer platform {
  :where(a, button, input, select, textarea, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
  }

  :where(a, button, .btn, .icon-btn, .mob-nav__item, .drawer__theme) {
    touch-action: manipulation;
  }

  :where(.btn, .icon-btn, .drawer__nav a, .drawer__theme, .mob-nav__item, .search-bar button, .pagination__btn, .pagination__page, .topic-cloud a) {
    min-height: 44px;
  }

  :where(h1, h2, h3, .hero__title, .article-hero__copy h1, .listing-head h1, .sect-head__title, .card__title, .stack__title, .result__title) {
    letter-spacing: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  :where(.sect-head__title, .empty h2) {
    max-inline-size: 24ch;
  }

  .sect-head__title {
    line-height: 1.08;
  }

  .prose h2 {
    width: 100%;
    max-inline-size: 100%;
    font-size: clamp(1.55rem, 1.28rem + 0.9vw, 1.9rem);
    line-height: 1.18;
    margin-bottom: 0.08em;
    text-wrap: pretty;
  }

  .prose h3 {
    line-height: 1.22;
    text-wrap: balance;
  }

  .card__title,
  .stack__title,
  .result__title {
    text-wrap: balance;
    line-height: 1.28;
  }

  .listing-head h1,
  .explore-hero__copy h1,
  .article-hero__copy h1 {
    text-wrap: balance;
  }

  :where(.card, .card__body, .card__topline, .result, .stack__item, .trend-list a, .sect-list a, .article-body, .article-layout) {
    min-width: 0;
  }

  .masthead__brand { min-width: 0; }
  .masthead__actions { min-width: max-content; }

  .drawer__panel {
    width: min(88vw, 360px);
    max-width: calc(100vw - 1rem);
  }

  .drawer__nav a,
  .drawer__theme {
    min-height: 48px;
  }

  .mob-nav {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.25rem);
  }

  .mob-nav__item {
    min-width: 0;
    min-height: 3.8rem;
    overflow: hidden;
  }

  .mob-nav__item span:not(.material-symbols-outlined) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero__title,
  .article-hero__copy h1 {
    font-size: 3.4rem;
  }

  .article-body {
    width: 100%;
  }

  .prose :where(p, li, blockquote, h2, h3, h4, figcaption) {
    overflow-wrap: break-word;
  }

  .prose :where(img, iframe, video) {
    max-width: 100%;
  }

  .prose iframe[src*="facebook.com/plugins/post.php"] {
    aspect-ratio: auto;
    min-height: 32rem;
  }

  .prose iframe[src*="facebook.com/plugins/video.php"] {
    min-height: 19rem;
  }

  .prose .twitter-tweet {
    margin-inline: auto;
    max-width: 35rem;
  }

  .prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  @media (hover: none) {
    .hero:hover .hero__media img,
    .card:hover .card__media img,
    .stack__item:hover .stack__media img {
      transform: none;
    }

    .card:hover,
    .cat-card:hover {
      transform: none;
    }
  }

  @media (max-width: 899px) {
    :root {
      --container: min(100% - 1.5rem, 1320px);
      --container-narrow: min(100% - 1.5rem, 1100px);
      --container-read: min(100% - 1.5rem, 720px);
    }

    body {
      padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }

    .masthead__inner {
      gap: var(--s-2);
      min-height: 3.75rem;
    }

    .masthead__brand-stack > span:first-child {
      font-size: 1.14rem;
    }

    .icon-btn {
      width: 2.75rem;
      height: 2.75rem;
    }

    .section {
      margin-block: var(--s-8);
    }

    .front-grid {
      gap: var(--s-8);
      margin-top: var(--s-7);
    }

    .grid-cards {
      gap: var(--s-5);
    }
  }

  @media (max-width: 720px) {
    :root {
      --container: min(100% - 1.25rem, 1320px);
      --container-narrow: min(100% - 1.25rem, 1100px);
      --container-read: min(100% - 1.25rem, 720px);
    }

    .page {
      padding-block: var(--s-5) var(--s-8);
    }

    .lead {
      gap: var(--s-6);
    }

    .hero {
      min-height: 430px;
    }

    .hero__body {
      padding: var(--s-5);
    }

    .hero__title {
      max-width: 16ch;
      font-size: 2.45rem;
      line-height: 1.05;
    }

    .hero__dek {
      font-size: 1rem;
      -webkit-line-clamp: 2;
    }

    .hero__cta {
      width: 100%;
      justify-content: center;
    }

    .stack__item {
      grid-template-columns: 84px minmax(0, 1fr);
      gap: var(--s-3);
    }

    .sect-head,
    .sect-head--split {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--s-2);
    }

    .sect-head__title {
      max-inline-size: 18ch;
      font-size: clamp(1.38rem, 1.15rem + 0.9vw, 1.65rem);
      line-height: 1.1;
    }

    .sect-head__link {
      min-height: 40px;
      align-items: center;
    }

    .card__body {
      padding: var(--s-4);
    }

    .article-hero {
      gap: var(--s-5);
      padding-block: var(--s-5) var(--s-6);
      margin-bottom: var(--s-6);
    }

    .article-hero__copy h1 {
      max-width: none;
      font-size: 2.55rem;
      line-height: 1.05;
    }

    .article-hero__dek {
      margin-top: var(--s-4);
      font-size: 1.02rem;
    }

    .article-share {
      gap: var(--s-2);
    }

    .article-share__label {
      width: 100%;
    }

    .article-share a,
    .article-share button {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
    }

    .article-layout {
      gap: var(--s-6);
    }

    .article-rail {
      gap: var(--s-4);
    }

    .prose {
      font-size: 1.03rem;
      line-height: 1.75;
    }

    .prose h2 {
      max-inline-size: 100%;
      font-size: 1.46rem;
      line-height: 1.2;
    }

    .prose h3 {
      font-size: 1.24rem;
      line-height: 1.24;
    }

    .prose > p:first-child::first-letter {
      font-size: 2.75em;
    }

    .prose blockquote {
      padding: var(--s-4);
      font-size: 1.12rem;
    }

    .listing-head {
      flex-direction: column;
      gap: var(--s-3);
      margin-bottom: var(--s-6);
      padding-bottom: var(--s-5);
    }

    .listing-head__icon {
      width: 2.8rem;
      height: 2.8rem;
    }

    .listing-head h1 {
      font-size: 2.35rem;
      line-height: 1.08;
    }

    .listing-head__lede {
      font-size: 1rem;
    }

    .search-bar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--s-2);
      padding: var(--s-2);
    }

    .search-bar input {
      font-size: 16px;
    }

    .search-bar button {
      grid-column: 1 / -1;
      width: 100%;
    }

    .explore-hero {
      gap: var(--s-5);
      padding: var(--s-5);
    }

    .explore-hero__copy h1 {
      font-size: 2.45rem;
      line-height: 1.05;
    }

    .explore-hero__panel {
      grid-template-columns: 1fr;
      padding: var(--s-4);
    }

    .cat-grid {
      grid-template-columns: 1fr;
    }

    .topic-cloud {
      gap: var(--s-2);
    }

    .topic-cloud a {
      flex: 1 1 10rem;
      justify-content: space-between;
    }

    .pagination {
      justify-content: flex-start;
      overflow-x: auto;
      padding-bottom: var(--s-2);
    }
  }

  @media (max-width: 420px) {
    .masthead__brand-mark {
      width: 2.15rem;
      height: 2.15rem;
    }

    .masthead__brand-stack > span:first-child {
      font-size: 1.04rem;
    }

    .masthead__actions {
      gap: var(--s-1);
    }

    .hero {
      min-height: 400px;
    }

    .hero__title {
      font-size: 2.05rem;
    }

    .sect-head__title,
    .prose h2 {
      max-inline-size: 100%;
    }

    .sect-head__title {
      font-size: 1.32rem;
      line-height: 1.14;
    }

    .prose h2 {
      font-size: 1.34rem;
      line-height: 1.22;
    }

    .article-hero__copy h1,
    .explore-hero__copy h1,
    .listing-head h1 {
      font-size: 2.05rem;
    }

    .stack__item {
      grid-template-columns: 1fr;
    }

    .stack__media {
      aspect-ratio: 16 / 9;
    }

    .card__topline {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--s-2);
    }

    .topic-cloud a {
      flex-basis: 100%;
    }
  }
}