:root {
    --bg: #ffffff; --elevated: #ffffff; --raise: #f6f7f9; --raise2: #eef0f3;
    --ink: #0b0d12; --ink-2: #363b45; --muted: #6a7180; --faint: #9aa1ad;
    --line: #e9ebf0; --line-2: #f0f2f5;
    --brand: #4338ca; --brand-ink: #ffffff; --brand-soft: #eef0fe;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --read: "Iowan Old Style", "Charter", "Georgia", serif;
    --maxw: 1140px; --shadow: 0 1px 2px rgba(16,20,30,.04), 0 8px 24px -12px rgba(16,20,30,.12);
  }
  :root[data-theme="dark"] {
    --bg: #0a0c10; --elevated: #101319; --raise: #141821; --raise2: #1a1f29;
    --ink: #f2f4f8; --ink-2: #c5cbd6; --muted: #8b93a2; --faint: #5b6371;
    --line: #1e2430; --line-2: #171c26;
    --brand: #7c8cff; --brand-soft: #1a1f37; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0a0c10; --elevated: #101319; --raise: #141821; --raise2: #1a1f29;
      --ink: #f2f4f8; --ink-2: #c5cbd6; --muted: #8b93a2; --faint: #5b6371;
      --line: #1e2430; --line-2: #171c26;
      --brand: #7c8cff; --brand-soft: #1a1f37; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
    }
  }
  * { box-sizing: border-box; margin: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  /* Last-resort guard. `clip`, never `hidden`: hidden makes body a scroll
     container and breaks the sticky header on mobile browsers. */
  html, body { overflow-x: clip; max-width: 100%; }
  body { background: var(--bg); color: var(--ink); font-family: var(--sans);
         font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
         text-rendering: optimizeLegibility; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--brand); color: #fff; }

  /* header */
  header.site { position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line); }
  .bar { max-width: var(--maxw); margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; gap: 14px; }
  .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px;
    letter-spacing: -.02em; white-space: nowrap; flex: 0 0 auto; }
  /* The lockup mark is the bare hash, not the app tile, so "#TechNewsReel"
     reads as one continuous hashtag rather than a badge parked beside a name.
     The tile is still the app icon (favicon, PWA, offline splash) — it needs a
     container to survive a home screen; a lockup does not.
     Sized in em off .brand's font-size so it tracks the wordmark through every
     breakpoint instead of needing its own px override at each one. The viewBox
     is cropped to the glyph's true bounds — the skew pushes it off-centre in a
     0 0 64 64 box, which would otherwise leave dead space on the left and shove
     the whole lockup out of alignment with the content below. */
  .brand .mark { height: .95em; width: auto; display: block; flex: 0 0 auto;
    fill: var(--brand); }
  /* One flex item, not two. Left unwrapped, "TechNews" is a bare text node and
     <b>Reel</b> is an element, so flex treats them as separate items and the
     gap meant for mark-to-wordmark also opens up INSIDE the name — the header
     read "TechNews Reel" while the cards and the brand itself read
     "TechNewsReel". */
  .brand .wm { white-space: nowrap; }
  .brand b { color: var(--brand); font-weight: 800; }
  nav.beats { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
    overflow: visible; margin-left: 12px; }
  nav.beats button { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none;
    border: none; padding: 8px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: .15s; }
  nav.beats button:hover { color: var(--ink); background: var(--raise); }
  nav.beats button.on { color: var(--brand); background: var(--brand-soft); }
  /* prioritized nav: top beats as tabs, the rest in a "More" dropdown */
  .more-wrap { position: relative; }
  .more-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 220px;
    background: var(--elevated); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
    padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
  .more-menu[hidden] { display: none; }
  .more-menu button { justify-content: flex-start; text-align: left; width: 100%; }
  .actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
  .icon-btn { background: var(--raise); border: 1px solid var(--line); color: var(--muted); width: 38px; height: 38px;
    border-radius: 10px; cursor: pointer; display: grid; place-items: center; transition: .15s; flex: none; }
  .icon-btn:hover { color: var(--ink); border-color: var(--muted); }
  .icon-btn svg { width: 18px; height: 18px; }
  .menu-btn { display: none; }

  /* search panel (drops beneath the bar) */
  .searchbar { border-top: 1px solid var(--line-2); background: var(--bg); }
  .searchbar[hidden] { display: none; }
  .searchbar-in { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
  .searchbar-in svg { width: 19px; height: 19px; color: var(--muted); flex: none; }
  .searchbar input { flex: 1; font: inherit; font-size: 16px; background: none; border: none; outline: none; color: var(--ink); }
  .searchbar input::placeholder { color: var(--faint); }
  .searchbar kbd { font: inherit; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
  .results { max-width: var(--maxw); margin: 0 auto; padding: 0 14px 12px; max-height: 62vh; overflow-y: auto; }
  .results .r { display: flex; align-items: baseline; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
  .results .r:hover, .results .r.sel { background: var(--raise); }
  .results .r .rk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); white-space: nowrap; flex: none; width: 128px; overflow: hidden; text-overflow: ellipsis; }
  .results .r h4 { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; }
  .results .r time { font-size: 12px; color: var(--faint); white-space: nowrap; flex: none; }
  .results .empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 14px; }
  .results .hint { padding: 12px; color: var(--faint); font-size: 13px; }

  /* mobile drawer */
  .drawer { position: fixed; inset: 0; z-index: 60; }
  .drawer[hidden] { display: none; }
  .drawer .scrim { position: absolute; inset: 0; background: color-mix(in srgb,#05070c 55%,transparent); }
  .drawer .panel { position: absolute; top: 0; left: 0; height: 100%; width: min(82vw, 320px);
    background: var(--bg); border-right: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 6px;
    box-shadow: var(--shadow); }
  .drawer .dhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .drawer .dsec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 12px 12px 4px; }
  .drawer nav button { font: inherit; font-size: 15px; font-weight: 600; text-align: left; color: var(--ink-2); background: none; border: none;
    padding: 11px 12px; border-radius: 10px; cursor: pointer; }
  .drawer nav button:hover { background: var(--raise); }
  .drawer nav button.on { color: var(--brand); background: var(--brand-soft); }

  /* Touch targets are governed by INPUT TYPE, not screen width — a 1024px
     tablet is still a finger. WCAG 2.5.8 asks for 44px; the share/save chips
     measured 33px. Padding grows rather than font size, so nothing reflows. */
  @media (pointer: coarse) {
    .icon-btn { width: 44px; height: 44px; }
    .acct-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .save-btn, .share-btn, .follow-chip { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
    .c .acts button { min-height: 40px; padding: 8px 4px; }
    .drawer nav button, nav.beats button, .more-menu button { min-height: 46px; }
    .feedbar .seg button { min-height: 40px; }
    .share-grid a, .share-grid button { min-height: 76px; }
    .sheet .x { width: 44px; height: 44px; }
  }
  /* …but a small phone cannot afford 44px chrome in the header. */
  @media (pointer: coarse) and (max-width: 400px) {
    .icon-btn { width: 40px; height: 40px; }
    .acct-btn { min-height: 40px; }
  }

  /* ---- responsive ladder -------------------------------------------------
     <560   phone            1 card column, stacked hero, drawer nav
     560+   large phone      2 card columns
     768+   tablet           2-column hero
     1024+  desktop          beat tabs in the header, 3 card columns
     1600+  large desktop    wider shell so the page does not float in gutters
     Beat tabs need ~470px of their own; below 1024 they do not fit alongside
     the wordmark and actions, so the drawer carries navigation there. */

  @media (max-width: 1023px) {
    nav.beats { display: none; }
    .menu-btn { display: grid; }
  }
  @media (max-width: 820px) {
    .bar { gap: 10px; padding: 10px 16px; }
    /* A long display name must not widen the header. */
    #acctBtn { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
    /* Install moves to the drawer here — 70px the header does not have. */
    #installBtn { display: none !important; }
    main { padding: 24px 16px 80px; }
    .searchbar-in { padding: 12px 16px; }
    .results .r .rk { width: 84px; }
  }
  @media (max-width: 400px) {
    .bar { gap: 7px; padding: 10px 12px; }
    .brand { font-size: 16px; }
    .icon-btn { width: 34px; height: 34px; }
    .acct-btn { padding: 7px 10px; font-size: 12.5px; }
    /* Reclaims 41px so "TechNewsReel" renders in full; the toggle lives in the
       drawer under Appearance at this width. */
    #themeBtn { display: none; }
    main { padding: 20px 12px 80px; }
    .sheet { padding: 22px 16px 30px; }
  }
  /* Very small phones (320–360: SE, older Androids). The header still needed
     32px more than a 320px screen even with theme and install moved out, so the
     account control drops to an icon. The label is the last thing to go because
     "Sign in" converts better than a glyph — but a broken header converts worse
     than either. */
  @media (max-width: 360px) {
    /* No .mark override needed: it is sized in em and follows this font-size. */
    .brand { font-size: 15px; gap: 7px; }
    #acctBtn { font-size: 0; padding: 8px 10px; min-width: 34px; }
    #acctBtn::after { content: "\1F464"; font-size: 15px; line-height: 1; }
    .bar { gap: 6px; padding: 9px 10px; }
  }

  /* Large screens: 1140px in a 1920px window leaves 390px of dead gutter each
     side. Widen the shell rather than letting the page float. */
  @media (min-width: 1600px) {
    :root { --maxw: 1320px; }
  }

  main { max-width: var(--maxw); margin: 0 auto; padding: 30px 24px 90px; }
  .dateline { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted);
    padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
  .dateline .live { display: inline-flex; align-items: center; gap: 7px; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb,#22c55e 22%,transparent); }

  .state { text-align: center; padding: 100px 20px; color: var(--muted); }
  .state b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }

  .kicker { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }

  /* hero */
  .hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: stretch;
    padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
  @media (max-width: 767px) { .hero { grid-template-columns: 1fr; gap: 24px; } }
  @media (min-width: 768px) and (max-width: 1023px) { .hero { grid-template-columns: 1.4fr 1fr; gap: 26px; } }
  .lead { cursor: pointer; border: 1px solid var(--line); border-radius: 16px; background: var(--elevated);
    box-shadow: var(--shadow); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
  .lead h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 14px; }
  .lead .dek { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
  .lead:hover h2 { color: var(--brand); }
  .meta { font-size: 13px; color: var(--muted); margin-top: 16px; display: flex; gap: 8px; align-items: center; }
  /* "Latest" panel: stretches to the lead's height and distributes items to fill */
  .latest { border: 1px solid var(--line); border-radius: 16px; background: var(--elevated); box-shadow: var(--shadow);
    padding: 4px 22px; display: flex; flex-direction: column; }
  .latest .lh { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    padding: 16px 0 6px; }
  .latest .si { flex: 1; display: flex; flex-direction: column; justify-content: center; cursor: pointer;
    padding: 15px 0; border-top: 1px solid var(--line-2); }
  .latest h3 { font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; margin-top: 5px; }
  .latest .si:hover h3 { color: var(--brand); }

  /* section */
  .section-h { display: flex; align-items: center; gap: 14px; margin: 40px 0 20px; }
  .section-h h2 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
  .section-h .rule { flex: 1; height: 1px; background: var(--line); }
  .section-h a { font-size: 13px; font-weight: 600; color: var(--muted); }
  .section-h a:hover { color: var(--brand); }

  .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 560px)  { .grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
  @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
  @media (min-width: 1600px) { .grid { grid-template-columns: repeat(4, 1fr); } }
  .card { cursor: pointer; background: var(--elevated); border: 1px solid var(--line); border-radius: 14px;
    padding: 20px; display: flex; flex-direction: column; gap: 9px; transition: .18s; }
  .card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); }
  .card h3 { font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
  /* flex:1 and -webkit-line-clamp cannot coexist: flex-grow stretches the box
     past three lines so overflow:hidden stops clipping, while the clamp still
     injects its ellipsis at line 3. The result is an ellipsis mid-sentence with
     the rest of the text visible after it. The dek keeps its natural clamped
     height; .meta pushes itself to the bottom instead. */
  .card .dek { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; max-height: calc(1.5em * 3); }
  .card .meta { margin-top: auto; }
  /* Headlines clamp too, or a long one alone sets the card's height. */
  .card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .tag { font-size: 11.5px; color: var(--muted); background: var(--raise); padding: 3px 9px; border-radius: 999px; }

  /* reader */
  #reader { position: fixed; inset: 0; background: color-mix(in srgb, #05070c 62%, transparent);
    display: none; overflow-y: auto; z-index: 60; backdrop-filter: blur(2px); }
  #reader.open { display: block; }
  .sheet { background: var(--bg); max-width: 760px; margin: 5vh auto 8vh; border-radius: 20px;
    padding: clamp(26px, 4vw, 60px); position: relative; box-shadow: 0 40px 100px rgba(0,0,0,.45); }
  .sheet .x { position: absolute; top: 20px; right: 22px; background: var(--raise); border: 1px solid var(--line);
    color: var(--muted); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 20px; z-index: 2; }
  .sheet .x:hover { color: var(--ink); }
  .sheet h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin: 12px 0; }
  .sheet .dek { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin-bottom: 20px; }
  .sheet .byline { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 16px 0; margin-bottom: 30px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  /* Long unbroken tokens are the classic mobile-layout killer. Article text
     routinely contains full URLs and identifiers; at 360px one of them measured
     820px against a 308px column, pushing the whole page sideways and taking
     the sticky header and every fixed overlay with it. Break them instead. */
  .body, .ssr, .sheet, .card, .results, .c .body { overflow-wrap: break-word; }
  .body { font-family: var(--read); font-size: 19px; line-height: 1.8; color: var(--ink);
    overflow-wrap: break-word; }
  /* Links are usually the offender and are safe to break anywhere. */
  .body a, .sources a, .c .body a { overflow-wrap: anywhere; word-break: break-word; }
  /* Headlines can carry long product strings; break rather than overflow. */
  .sheet h1, .ssr h1, .body h2, .body h3, .card h3, .hero h2 { overflow-wrap: break-word; }
  /* Media and code blocks: contain them rather than let them set page width. */
  .body img, .ssr img, .body video { max-width: 100%; height: auto; }
  .body pre, .ssr pre { overflow-x: auto; max-width: 100%; }
  .body code { overflow-wrap: anywhere; }
  .body table, .ssr table { display: block; overflow-x: auto; max-width: 100%; }
  .body h2 { font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 32px 0 10px; line-height: 1.25; }
  .body p { margin: 20px 0; }
  .body ul { margin: 20px 0 20px 24px; } .body li { margin: 8px 0; }
  .body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .sources { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
  /* account: auth modal, feed toggle, follow chips, save button */
  .acct-btn { font: inherit; font-size: 13.5px; font-weight: 650; padding: 8px 14px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--raise); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
  .acct-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
  .acct-btn:hover { border-color: var(--muted); }
  /* Above the consent banner (9999): a dialog the reader opened themselves
     must never be covered by a passive notice. */
  .modal { position: fixed; inset: 0; z-index: 10040; display: none; place-items: center;
    background: color-mix(in srgb,#05070c 62%,transparent); padding: 20px; }
  .modal.open { display: grid; }
  .modal .box { width: min(420px, 100%); background: var(--elevated); border: 1px solid var(--line);
    border-radius: 16px; padding: 24px; box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto; }
  .modal h2 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 6px; }
  .modal .sub { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
  .modal label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); margin: 14px 0 6px; }
  .modal input, .modal select { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
  .modal input:focus, .modal select:focus { outline: none; border-color: var(--brand); }
  .modal .row { display: flex; gap: 10px; margin-top: 20px; }
  .modal .row .acct-btn { flex: 1; padding: 11px; font-size: 14.5px; }
  .modal .err { font-size: 13.5px; color: #d64545; margin-top: 12px; min-height: 18px; }
  :root[data-theme="dark"] .modal .err { color: #ff8a8a; }
  .modal .alt { margin-top: 16px; font-size: 13.5px; color: var(--muted); text-align: center; }
  .modal .alt a { color: var(--brand); font-weight: 650; cursor: pointer; }
  .feedbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
  .feedbar .seg { display: inline-flex; background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
  .feedbar .seg button { font: inherit; font-size: 13.5px; font-weight: 650; padding: 6px 14px; border: none;
    border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
  .feedbar .seg button.on { background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }
  .follow-chip { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--raise); color: var(--muted); }
  .follow-chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 650; }
  .save-btn { font: inherit; font-size: 13px; font-weight: 650; padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--raise); color: var(--muted); cursor: pointer; }
  .save-btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
  .sheet .save-row { margin-top: 20px; display: flex; gap: 10px; align-items: center; }

  /* share */
  .sharebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
  .share-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px;
    font-weight: 650; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--raise); color: var(--ink-2); }
  .share-btn:hover { border-color: var(--muted); color: var(--ink); }
  .share-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
  .share-btn svg { width: 15px; height: 15px; }
  .share-btn.done { border-color: var(--brand); color: var(--brand); }
  .sheet-share { position: fixed; inset: 0; z-index: 10050; display: none; align-items: flex-end;
    justify-content: center; background: color-mix(in srgb,#05070c 55%,transparent); }
  .sheet-share.open { display: flex; }
  .sheet-share .panel { width: min(460px, 100%); background: var(--elevated);
    border: 1px solid var(--line); border-radius: 18px 18px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow); max-height: 92vh;
    display: flex; flex-direction: column; min-height: 0; }
  @media (min-width: 560px) { .sheet-share { align-items: center; }
    .sheet-share .panel { border-radius: 18px; } }
  .sheet-share h3 { font-size: 16px; margin-bottom: 4px; }
  .sheet-share .sub { font-size: 13px; color: var(--muted); margin-bottom: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 4px; }
  @media (min-width: 460px) { .share-grid { grid-template-columns: repeat(5, 1fr); } }
  .share-grid a, .share-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px;
    font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-2); background: none;
    border: none; cursor: pointer; padding: 6px 2px; border-radius: 10px; text-decoration: none; }
  .share-grid a:hover, .share-grid button:hover { background: var(--raise); }
  .share-grid .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--raise); border: 1px solid var(--line); }
  .share-grid .ic svg { width: 20px; height: 20px; }
  .share-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
    flex: 0 0 auto; }
  .share-head > div { flex: 1; min-width: 0; }
  .share-close { font: inherit; font-size: 24px; line-height: 1; background: none; border: none;
    color: var(--muted); cursor: pointer; padding: 0 4px; }
  .share-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 14px;
    overscroll-behavior: contain; }
  .share-group h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--faint); margin: 4px 0 10px; }
  .share-group + .share-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
  .copyrow { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; background: var(--raise);
    border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 8px 14px; }
  .copyrow input { flex: 1; font: inherit; font-size: 13px; background: none; border: none;
    outline: none; color: var(--ink-2); min-width: 0; }

  /* comments */
  .cbox { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
  .cbox h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; }
  .cprompt { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 18px; }
  .cprompt p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.55; }
  .cform textarea { width: 100%; font: inherit; font-size: 15px; line-height: 1.6; padding: 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
    resize: vertical; min-height: 84px; }
  .cform textarea:focus { outline: none; border-color: var(--brand); }
  .cform .row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
  .cform .hint { font-size: 12.5px; color: var(--faint); flex: 1; }
  .c { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
  .c:last-child { border-bottom: none; }
  .c .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
  .c .who { font-size: 14px; font-weight: 650; color: var(--ink); }
  .c .when { font-size: 12.5px; color: var(--faint); }
  .c .pending { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #b45309; background: #fef3c7; border-radius: 999px; padding: 2px 8px; }
  :root[data-theme="dark"] .c .pending { color: #fcd34d; background: #422006; }
  .c .body { font-size: 15px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
  .c .acts { margin-top: 8px; display: flex; gap: 14px; }
  .c .acts button { font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: none;
    padding: 0; cursor: pointer; }
  .c .acts button:hover { color: var(--brand); }
  .c .replies { margin-top: 14px; margin-left: 18px; padding-left: 16px; border-left: 2px solid var(--line); }
  .cempty { font-size: 14.5px; color: var(--muted); padding: 6px 0 16px; }

  /* push opt-in bar */
  .pushbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 10030;
    display: none; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 24px));
    background: var(--elevated); border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 16px; box-shadow: var(--shadow); }
  .pushbar.show { display: flex; }
  .pushbar p { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0; flex: 1; }
  .pushbar .no { background: none; border: none; color: var(--muted); font: inherit; font-size: 13.5px;
    cursor: pointer; padding: 8px 6px; }
  @media (max-width: 560px) { .pushbar { flex-wrap: wrap; gap: 8px; } .pushbar p { flex-basis: 100%; } }

  /* brand hashtag footer — on the page as well as the posts, or the tag never
     becomes something readers recognise */
  .brandtag { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .brandtag .topic-tag { font-size: 13px; color: var(--muted); background: var(--raise);
    border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
  .brandtag .brand-hash { font-size: 13.5px; font-weight: 650; color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-radius: 999px; padding: 4px 12px; text-decoration: none; }
  .brandtag .brand-hash:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
  .brandtag-note { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
  .sources h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
  .sources a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 14px;
    background: var(--brand-soft); padding: 6px 11px; border-radius: 8px; margin: 0 8px 8px 0; }

  /* server-rendered (no-JS / crawler) content */
  /* "More in <beat>" — the reader-facing half of the internal-linking fix.
     Crawlers need these links to reach older stories at all; readers get a
     reason to open a second article, which is the same goal from the other
     side. Both surfaces render the same list from the same data. */
  .more { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
  .more h4, .more h2 { font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .more a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line);
    color: var(--ink); font-weight: 650; font-size: 15.5px; line-height: 1.4; text-decoration: none; }
  .more a:hover { color: var(--brand); }
  .more ul { list-style: none; }
  .more a.all, .more p a { border-bottom: none; color: var(--brand); font-size: 14px; padding-top: 14px; }
  .crumb { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
  .crumb a { color: var(--muted); text-decoration: none; }
  .crumb a:hover { color: var(--brand); text-decoration: underline; }
  /* The section keeps the kicker's emphasis now that it replaces it. */
  .crumb a.sec { color: var(--brand); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; font-size: 12px; }
  .pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
  .pager a, .pager span { padding: 7px 12px; border-radius: 8px; font-size: 14px;
    font-weight: 650; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line); }
  .pager a:hover { border-color: var(--brand); color: var(--brand); }
  .pager .on { background: var(--brand); border-color: var(--brand); color: #fff; }
  .ssr { max-width: 720px; margin: 0 auto; }
  .ssr h1 { font-size: clamp(28px,5vw,42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 10px 0 16px; }
  .ssr .dek { font-size: 19px; color: var(--ink-2); margin-bottom: 18px; }
  .ssr-list { list-style: none; }
  .ssr-list li { padding: 16px 0; border-top: 1px solid var(--line); }
  .ssr-list h2 { font-size: 20px; font-weight: 700; }
  .ssr-list p { color: var(--muted); font-size: 15px; margin-top: 4px; }
  footer { border-top: 1px solid var(--line); background: var(--raise); margin-top: 48px; }
  footer .fmain { max-width: var(--maxw); margin: 0 auto; padding: 46px 24px 34px;
    display: grid; grid-template-columns: 1.5fr 2fr 1fr; gap: 24px 40px; }
  footer .fbrand .brand { font-size: 17px; }
  footer .ftag { color: var(--muted); font-size: 13px; line-height: 1.65; margin-top: 13px; max-width: 40ch; }
  footer .fcol h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--faint); margin-bottom: 15px; }
  footer .flinks { display: flex; flex-direction: column; gap: 10px; }
  footer #footnav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
  footer .flinks a { color: var(--ink-2); font-size: 13.5px; width: fit-content; transition: color .15s; }
  footer .flinks a:hover { color: var(--brand); }
  footer .fbar { border-top: 1px solid var(--line); }
  footer .fbar-in { max-width: var(--maxw); margin: 0 auto; padding: 18px 24px; color: var(--faint); font-size: 12.5px;
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  @media (max-width: 1023px) {
    footer .fmain { grid-template-columns: 1.2fr 2fr; gap: 26px 32px; }
  }
  @media (max-width: 720px) {
    footer .fmain { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding: 34px 16px 26px; }
    footer .fbrand { grid-column: 1 / -1; }
    footer .fbar-in { padding: 16px; }
  }