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

    /* ─── THEME VARIABLES ─── */
    :root {
      --bg:        #f9f9f8;
      --c0:        #0a0a0a;
      --c1:        #3a3a3a;
      --c2:        #6b6b6b;
      --c3:        #9a9a9a;
      --b1:        #d4d4d4;
      --b2:        #eeeeee;
      --b-strong:  #0a0a0a;

      --hdr-bg:      linear-gradient(175deg,rgba(255,255,255,.82) 0%,rgba(248,248,246,.70) 100%);
      --hdr-border:  rgba(255,255,255,.58);
      --hdr-sheen:   rgba(255,255,255,.95);
      --hdr-shadow:  0 10px 40px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);

      --dd-bg:      linear-gradient(160deg,rgba(255,255,255,.86) 0%,rgba(244,244,242,.80) 100%);
      --dd-border:  rgba(255,255,255,.68);
      --dd-hover:   linear-gradient(135deg,rgba(180,180,176,.48) 0%,rgba(210,210,206,.24) 100%);
      --dd-active:  linear-gradient(135deg,rgba(20,20,18,.08) 0%,rgba(20,20,18,.03) 100%);
      --dd-text:    #3a3a3a;

      --srch-bg:     linear-gradient(145deg,rgba(255,255,255,.80),rgba(245,245,243,.65));
      --srch-border: rgba(0,0,0,.08);
      --srch-focus:  rgba(0,0,0,.14);

      --tgl-bg:     linear-gradient(145deg,rgba(255,255,255,.78),rgba(240,240,238,.65));
      --tgl-border: rgba(0,0,0,.08);
      --tgl-knob:   #ffffff;
      --tgl-ks:     0 1px 6px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);
    }

    html.dark {
      --bg:        #0e0e0e;
      --c0:        #f0f0ee;
      --c1:        #c0c0bc;
      --c2:        #888884;
      --c3:        #505050;
      --b1:        #2a2a28;
      --b2:        #1e1e1c;
      --b-strong:  #f0f0ee;

      --hdr-bg:      linear-gradient(175deg,rgba(22,22,20,.90) 0%,rgba(14,14,12,.82) 100%);
      --hdr-border:  rgba(255,255,255,.07);
      --hdr-sheen:   rgba(255,255,255,.05);
      --hdr-shadow:  0 10px 40px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.25);

      --dd-bg:      linear-gradient(160deg,rgba(28,28,26,.93) 0%,rgba(20,20,18,.89) 100%);
      --dd-border:  rgba(255,255,255,.09);
      --dd-hover:   linear-gradient(135deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);
      --dd-active:  linear-gradient(135deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.05) 100%);
      --dd-text:    #c0c0bc;

      --srch-bg:     linear-gradient(145deg,rgba(24,24,22,.82),rgba(16,16,14,.72));
      --srch-border: rgba(255,255,255,.08);
      --srch-focus:  rgba(255,255,255,.15);

      --tgl-bg:     linear-gradient(145deg,rgba(34,34,32,.82),rgba(24,24,22,.72));
      --tgl-border: rgba(255,255,255,.09);
      --tgl-knob:   #2c2c2a;
      --tgl-ks:     0 1px 6px rgba(0,0,0,.55),0 0 0 .5px rgba(255,255,255,.07);
    }

    html { font-size: 16px; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--c0);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      transition: background .0s, color .0s;
    }
    a { color: inherit; text-decoration: none; }

    /* ─── THEME WAVE (View Transitions API) ───
       Scoped to html.theme-tx so cross-document navigation transitions
       keep their default crossfade. */
    html.theme-tx::view-transition-old(root),
    html.theme-tx::view-transition-new(root) {
      animation: none;
      mix-blend-mode: normal;
    }
    html.theme-tx::view-transition-old(root) { z-index: 1; }
    html.theme-tx::view-transition-new(root) { z-index: 2; }
    html.tx-retract::view-transition-old(root) { z-index: 2; }
    html.tx-retract::view-transition-new(root) { z-index: 1; }

    /* ─── CROSS-PAGE VIEW TRANSITIONS ─── */
    @view-transition { navigation: auto; }
    .article-headline { view-transition-name: story-hl; }
    ::view-transition-group(story-hl) {
      animation-duration: 300ms;
      animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }
    ::view-transition-old(story-hl),
    ::view-transition-new(story-hl) { animation-duration: 140ms; }
    @media (prefers-reduced-motion: reduce) {
      @view-transition { navigation: none; }
    }

    /* ─── GLASS HEADER ─── */
    .site-header {
      position: sticky; top: 0; z-index: 300; width: 100%;
      backdrop-filter: blur(36px) saturate(210%) brightness(1.04);
      -webkit-backdrop-filter: blur(36px) saturate(210%) brightness(1.04);
      background: var(--hdr-bg);
      border-bottom: 1px solid var(--hdr-border);
      box-shadow: 0 1px 0 var(--hdr-sheen) inset, var(--hdr-shadow);
    }
    .site-header::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background: linear-gradient(180deg,rgba(255,255,255,.4) 0%,transparent 60%);
    }
    html.dark .site-header::before { background: linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 60%); }

    .header-inner {
      width: 100%; padding: 0 22px;
      height: 62px;
      display: flex; align-items: center; gap: 10px;
      position: relative;
    }

    /* ─── WORDMARK / DROPDOWN ─── */
    .wordmark-wrap { position: relative; flex-shrink: 0; }
    .wordmark-btn {
      display: flex; align-items: center; gap: 6px;
      background: none; border: none; padding: 0;
      cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
    }
    .wordmark-text {
      font-family: 'Playfair Display', serif;
      font-size: 26px; font-weight: 700; letter-spacing: -.02em;
      color: var(--c0); line-height: 1; transition: opacity .15s;
    }
    .wordmark-btn:hover .wordmark-text { opacity: .72; }
    .wordmark-chevron {
      width: 11px; height: 7px; color: var(--c2); margin-top: 3px; flex-shrink: 0;
      transition: transform .3s cubic-bezier(.34,1.4,.64,1), color .15s;
    }
    .wordmark-wrap.open .wordmark-chevron { transform: rotate(180deg); color: var(--c1); }

    .picker-dropdown {
      position: absolute; top: calc(100% + 14px); left: 0;
      min-width: 190px; border-radius: 18px; padding: 6px; z-index: 400;
      backdrop-filter: blur(48px) saturate(200%) brightness(1.03);
      -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(1.03);
      background: var(--dd-bg); border: 1px solid var(--dd-border);
      box-shadow: 0 1px 0 var(--hdr-sheen) inset, 0 24px 64px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.08);
      opacity: 0; transform: scale(.82) translateY(-6px);
      transform-origin: top left; pointer-events: none; filter: blur(6px);
    }
    .wordmark-wrap.open .picker-dropdown {
      animation: glass-in .40s cubic-bezier(.34,1.46,.64,1) forwards; pointer-events: auto;
    }
    .wordmark-wrap.open .picker-item { animation: item-in .34s cubic-bezier(.34,1.55,.64,1) both; opacity: 0; }
    .wordmark-wrap.open .picker-item:nth-child(1) { animation-delay: .06s; }
    .wordmark-wrap.open .picker-item:nth-child(2) { animation-delay: .09s; }
    .wordmark-wrap.open .picker-item:nth-child(3) { animation-delay: .12s; }
    .wordmark-wrap.open .picker-item:nth-child(4) { animation-delay: .15s; }
    .wordmark-wrap.open .picker-item:nth-child(5) { animation-delay: .18s; }
    .wordmark-wrap.open .picker-item:nth-child(6) { animation-delay: .21s; }
    .wordmark-wrap.closing .picker-dropdown {
      animation: glass-out .19s cubic-bezier(.4,0,1,1) forwards; pointer-events: none;
    }
    @keyframes glass-in {
      0%   { opacity:0; transform:scale(.80) translateY(-8px); filter:blur(10px); }
      55%  { filter:blur(0); }
      100% { opacity:1; transform:scale(1) translateY(0);       filter:blur(0); }
    }
    @keyframes item-in {
      0%   { opacity:0; transform:translateY(9px) scale(.97); }
      100% { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes glass-out {
      0%   { opacity:1; transform:scale(1) translateY(0);       filter:blur(0); }
      100% { opacity:0; transform:scale(.90) translateY(-5px);  filter:blur(5px); }
    }
    .picker-item {
      display: block;
      padding: 11px 15px; border-radius: 12px;
      font-size: 14px; font-weight: 400; color: var(--dd-text);
      cursor: pointer; user-select: none;
      transition: background .12s, color .1s; white-space: nowrap;
    }
    .picker-item:hover { background: var(--dd-hover); color: var(--c0); }
    .picker-item.active { background: var(--dd-active); color: var(--c0); font-weight: 500; }

    /* ─── SEARCH ─── */
    .search-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }
    .search-icon {
      position: absolute; left: 11px; width: 14px; height: 14px;
      color: var(--c3); pointer-events: none; z-index: 1; transition: color .15s;
    }
    .search-input {
      padding: 8px 32px 8px 32px; border-radius: 999px;
      border: 1px solid var(--srch-border);
      background: var(--srch-bg);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.05);
      font-family: 'Inter', sans-serif; font-size: 13px; color: var(--c0);
      width: 168px; outline: none;
      transition: width .35s cubic-bezier(.34,1.2,.64,1), box-shadow .2s, border-color .2s;
    }
    .search-input::placeholder { color: var(--c3); }
    .search-input:focus {
      width: 240px; border-color: var(--srch-focus);
      box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 18px rgba(0,0,0,.09);
    }
    .search-wrap:focus-within .search-icon { color: var(--c1); }
    .search-clear {
      position: absolute; right: 10px;
      background: none; border: none; cursor: pointer; padding: 2px;
      color: var(--c3); display: none; line-height: 1; transition: color .12s;
    }
    .search-clear:hover { color: var(--c1); }
    .search-clear.visible { display: flex; align-items: center; }

    /* ─── THEME TOGGLE ─── */
    .header-spacer { flex: 1; }

    .theme-toggle {
      position: relative; width: 50px; height: 28px; border-radius: 999px;
      border: 1px solid var(--tgl-border); cursor: pointer; outline: none;
      background: var(--tgl-bg);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 10px rgba(0,0,0,.07);
      flex-shrink: 0;
      transition: border-color .3s, box-shadow .3s;
    }
    .toggle-knob {
      position: absolute; top: 3px; left: 3px;
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--tgl-knob);
      box-shadow: var(--tgl-ks);
      display: flex; align-items: center; justify-content: center;
      transition: transform .38s cubic-bezier(.34,1.5,.64,1), background .3s, box-shadow .3s;
      view-transition-name: theme-knob;
    }
    html.dark .toggle-knob { transform: translateX(22px); }
    ::view-transition-group(theme-knob) {
      animation-duration: 520ms;
      animation-timing-function: cubic-bezier(.34, 1.5, .64, 1);
      z-index: 10;
    }
    ::view-transition-old(theme-knob),
    ::view-transition-new(theme-knob) {
      animation-duration: 240ms;
    }
    html.tx-retract::view-transition-group(theme-knob) {
      animation-duration: 220ms;
      animation-delay: 640ms;
      animation-fill-mode: backwards;
      animation-timing-function: cubic-bezier(.34, 1.5, .64, 1);
    }
    html.tx-retract::view-transition-old(theme-knob),
    html.tx-retract::view-transition-new(theme-knob) {
      animation-duration: 220ms;
      animation-delay: 640ms;
      animation-fill-mode: backwards;
    }
    .toggle-icon { position: absolute; transition: opacity .2s, transform .25s; }
    .icon-sun  { opacity: 1; transform: scale(1) rotate(0deg); }
    .icon-moon { opacity: 0; transform: scale(.6) rotate(-30deg); }
    html.dark .icon-sun  { opacity: 0; transform: scale(.6) rotate(30deg); }
    html.dark .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); }

    .header-date {
      font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
      color: var(--c3); white-space: nowrap; flex-shrink: 0;
    }

    /* ─── Weather / location chip ─── */
    .weather-chip {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
      color: var(--c3); white-space: nowrap; flex-shrink: 0;
      padding-right: 12px; margin-right: 12px;
      border-right: 1px solid var(--b1);
    }
    .weather-chip[hidden] { display: none; }
    .weather-loc  { color: var(--c2); }
    .weather-temp { color: var(--c1); font-weight: 500; }
    .weather-icon {
      width: 16px; height: 16px;
      color: var(--c1);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .weather-icon svg { width: 100%; height: 100%; display: block; }

    /* ─── LAYOUT ─── */
    .container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

    .section-bar {
      display: flex; align-items: baseline; gap: 14px;
      padding: 36px 0 24px;
      border-bottom: 1.5px solid var(--b-strong);
      margin-bottom: 36px;
    }
    .section-bar-title {
      font-family: 'Playfair Display', serif;
      font-size: 12px; font-weight: 400; margin: 0;
      letter-spacing: .22em; text-transform: uppercase; color: var(--c0);
    }
    .section-bar-count { font-size: 11px; color: var(--c3); letter-spacing: .05em; }
    .hub-intro {
      font-family: 'Inter', sans-serif;
      font-size: 14px; line-height: 1.68; color: var(--c2); max-width: 640px;
      margin: 0 0 28px;
    }

    /* ─── HERO (home only) ─── */
    .hero {
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--b1); margin-bottom: 40px;
    }
    .hero-main { padding-right: 48px; border-right: 1px solid var(--b1); }
    .hero-aside { display: flex; flex-direction: column; justify-content: space-between; }

    .story-tag {
      display: block; font-size: 10px; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase; color: var(--c2); margin-bottom: 10px;
    }
    body.in-section .tag-section, body.in-section .tag-sep { display: none; }

    .read-time {
      font-size: 11px; color: var(--c3); letter-spacing: .03em;
    }
    .byline-row {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      font-size: 11px; color: var(--c3); letter-spacing: .04em;
    }
    .byline-dot { color: var(--b1); }

    .hero-headline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(26px, 2.7vw, 40px); font-weight: 700;
      line-height: 1.13; letter-spacing: -.015em;
      color: var(--c0); margin-bottom: 14px;
    }
    .hero-headline a:hover,
    .aside-hl a:hover,
    .card-hl a:hover { opacity: .65; }

    .hero-summary {
      font-size: 15px; line-height: 1.72; color: var(--c1); margin-bottom: 14px;
    }

    .aside-item {
      padding: 18px 0; border-top: 1px solid var(--b2); flex: 1;
      display: flex; flex-direction: column; justify-content: center;
    }
    .aside-item:first-child { border-top: none; padding-top: 0; }
    .aside-hl {
      font-family: 'Playfair Display', serif;
      font-size: 17px; font-weight: 600; line-height: 1.3;
      color: var(--c0); margin-bottom: 8px;
    }

    /* ─── STORY GRID ─── */
    .story-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

    .story-card { padding: 0 36px 36px 0; }
    @media (min-width: 961px) {
      .story-card:nth-child(3n)   { padding-right: 0; }
      .story-card:nth-child(3n+2) { padding-left: 36px; padding-right: 36px; border-left: 1px solid var(--b2); }
      .story-card:nth-child(3n)   { padding-left: 36px; border-left: 1px solid var(--b2); }
    }

    .card-hl {
      font-family: 'Playfair Display', serif;
      font-size: 18px; font-weight: 600; line-height: 1.32;
      color: var(--c0); margin-bottom: 9px;
    }
    .card-summary { font-size: 13px; line-height: 1.65; color: var(--c2); margin-bottom: 10px; }

    .no-results {
      display: none; grid-column: 1/-1;
      padding: 60px 0; text-align: center; font-size: 14px; color: var(--c3);
    }
    .no-results.visible { display: block; }
    [hidden] { display: none !important; }

    /* ─── ARTICLE ─── */
    .article-wrap { max-width: 720px; margin: 0 auto; padding: 56px 28px 0; }
    .article-back {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--c2); margin-bottom: 28px;
      transition: color .15s, gap .25s cubic-bezier(.34,1.4,.64,1);
    }
    .article-back svg { width: 10px; height: 10px; }
    .article-back:hover { color: var(--c0); gap: 10px; }
    .article-tag {
      display: block; font-size: 11px; font-weight: 600;
      letter-spacing: .18em; text-transform: uppercase; color: var(--c2); margin-bottom: 18px;
    }
    .article-headline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 700; line-height: 1.1; letter-spacing: -.018em;
      color: var(--c0); margin-bottom: 22px;
    }
    .article-byline {
      display: flex; gap: 10px; flex-wrap: wrap;
      font-size: 12px; letter-spacing: .04em; color: var(--c3);
      padding-bottom: 28px; border-bottom: 1px solid var(--b1);
      margin-bottom: 36px;
    }
    .article-byline .byline-dot { color: var(--b1); }
    .article-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 10px; border-radius: 4px; }
    .article-image-credit { font-size: 11px; color: var(--c3); margin-bottom: 32px; }
    .article-body p {
      font-family: 'Inter', sans-serif;
      font-size: 17px; line-height: 1.78; color: var(--c1);
      margin-bottom: 22px;
    }
    .article-body p:first-of-type::first-letter {
      font-family: 'Playfair Display', serif;
      font-size: 4.4em; line-height: .88; font-weight: 700;
      float: left; padding: 8px 12px 0 0; color: var(--c0);
    }
    .article-foot {
      margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--b1);
      font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c3);
    }
    .article-sources {
      margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--b1);
    }
    .article-sources h2 {
      font-family: 'Inter', sans-serif;
      font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--c3); margin: 0 0 14px;
    }
    .sources-list { list-style: none; margin: 0; padding: 0; }
    .sources-list li { margin-bottom: 9px; font-size: 14px; line-height: 1.5; }
    .sources-list a {
      color: var(--c1); text-decoration: none; border-bottom: 1px solid var(--b1);
    }
    .sources-list a:hover { color: var(--c0); border-bottom-color: var(--c3); }
    .source-pub { color: var(--c3); }

    /* ─── READ NEXT (related stories) ─── */
    .read-next {
      margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--b1);
    }
    .read-next-title {
      font-family: 'Inter', sans-serif;
      font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--c3); margin: 0 0 18px;
    }
    .read-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .read-next-card {
      display: flex; flex-direction: column; gap: 8px;
      padding: 18px 20px; color: inherit; text-decoration: none;
      border: 1px solid var(--b2); border-radius: 4px;
      transition: border-color .18s ease, transform .2s cubic-bezier(.34,1.4,.64,1);
    }
    .read-next-card:hover { border-color: var(--c3); transform: translateY(-2px); }
    .read-next-tag {
      font-size: 10px; font-weight: 600; letter-spacing: .14em;
      text-transform: uppercase; color: var(--c2);
    }
    .read-next-hl {
      font-family: 'Playfair Display', serif;
      font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--c0);
      transition: opacity .18s ease;
    }
    .read-next-card:hover .read-next-hl { opacity: .68; }
    .read-next-time {
      font-size: 11px; color: var(--c3); letter-spacing: .03em; margin-top: 2px;
    }
    @media (max-width: 640px) { .read-next-grid { grid-template-columns: 1fr; } }

    /* ─── LEGAL (privacy / terms) ─── */
    .legal-wrap { max-width: 720px; margin: 0 auto; padding: 56px 28px 0; }
    .legal-headline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(30px, 4vw, 44px);
      font-weight: 700; line-height: 1.08; letter-spacing: -.018em;
      color: var(--c0); margin-bottom: 14px;
    }
    .legal-meta {
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c3);
      padding-bottom: 22px; border-bottom: 1px solid var(--b1); margin-bottom: 28px;
    }
    .legal-intro {
      font-family: 'Inter', sans-serif;
      font-size: 16px; line-height: 1.74; color: var(--c1);
      margin-bottom: 28px;
    }
    .legal-toc {
      display: flex; flex-wrap: wrap; gap: 8px 12px;
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
      color: var(--c2); margin-bottom: 36px;
    }
    .legal-toc a {
      color: var(--c2); transition: color .15s;
      border-bottom: 1px solid transparent;
    }
    .legal-toc a:hover { color: var(--c0); border-bottom-color: var(--b1); }
    .legal-toc .byline-dot { color: var(--b1); }
    .legal-body p, .legal-body li {
      font-family: 'Inter', sans-serif;
      font-size: 15px; line-height: 1.74; color: var(--c1);
    }
    .legal-body p { margin-bottom: 16px; }
    .legal-body h2 {
      font-family: 'Playfair Display', serif;
      font-size: 22px; font-weight: 600; line-height: 1.2;
      color: var(--c0); margin-top: 40px; margin-bottom: 14px;
      scroll-margin-top: 80px;
    }
    .legal-body h2:first-child { margin-top: 0; }
    .legal-body ul {
      list-style: none; margin: 4px 0 18px 0; padding: 0;
    }
    .legal-body ul li {
      position: relative; padding-left: 22px; margin-bottom: 8px;
    }
    .legal-body ul li::before {
      content: ''; position: absolute; left: 4px; top: .82em;
      width: 8px; height: 1px; background: var(--c3);
    }
    .legal-body strong { color: var(--c0); font-weight: 600; }
    .legal-body a {
      color: var(--c0); border-bottom: 1px solid var(--b1);
      transition: border-color .15s, color .15s;
    }
    .legal-body a:hover { border-bottom-color: var(--c0); }
    .legal-body code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px; padding: 1px 5px; border-radius: 4px;
      background: var(--b2); color: var(--c0);
    }

    /* ─── 404 ─── */
    .nf-wrap {
      max-width: 720px; margin: 0 auto; padding: 96px 28px 80px;
      text-align: center;
    }
    .nf-code {
      font-family: 'Playfair Display', serif;
      font-size: clamp(72px, 14vw, 132px); font-weight: 700; line-height: .9;
      letter-spacing: -.04em; color: var(--c0);
      margin-bottom: 18px;
    }
    .nf-body {
      font-size: 16px; line-height: 1.7; color: var(--c1); margin-bottom: 28px;
    }
    .nf-back {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--c0);
      padding: 12px 22px; border: 1px solid var(--b-strong); border-radius: 999px;
      transition: background .2s, color .2s, gap .25s cubic-bezier(.34,1.4,.64,1);
    }
    .nf-back:hover { background: var(--c0); color: var(--bg); gap: 10px; }

    /* ─── FOOTER ─── */
    footer {
      margin-top: 64px; padding: 36px 28px;
      border-top: 1.5px solid var(--b-strong);
      display: flex; align-items: center; justify-content: space-between;
    }
    .footer-wordmark {
      font-family: 'Playfair Display', serif;
      font-size: 20px; font-weight: 700; color: var(--c0);
    }
    .footer-copy { font-size: 11px; color: var(--c3); letter-spacing: .04em; }
    .footer-right {
      display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    }
    .footer-links {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; letter-spacing: .04em; color: var(--c2);
    }
    .footer-links a { color: var(--c2); transition: color .15s; }
    .footer-links a:hover { color: var(--c0); }
    .footer-links .byline-dot { color: var(--b1); }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 960px) {
      .hero { grid-template-columns: 1fr; gap: 28px; }
      .hero-main { padding-right: 0; border-right: none; border-bottom: 1px solid var(--b1); padding-bottom: 28px; }
      .hero-aside { padding-top: 0; }
      .story-grid { grid-template-columns: 1fr 1fr; }
      .story-card                { padding: 0 22px 28px 0; border-left: none !important; }
      .story-card:nth-child(even){ padding-left: 22px; padding-right: 0; border-left: 1px solid var(--b2) !important; }
    }
    @media (max-width: 820px) {
      .weather-chip .weather-loc { display: none; }
    }
    @media (max-width: 700px) {
      .search-input { width: 120px; }
      .search-input:focus { width: 180px; }
      .header-date { display: none; }
      .weather-chip { border-right: none; padding-right: 0; margin-right: 6px; }
    }
    @media (max-width: 520px) {
      .weather-chip { display: none; }
    }
    @media (max-width: 600px) {
      .story-grid { grid-template-columns: 1fr; }
      .story-card, .story-card:nth-child(n) {
        padding: 0 0 24px 0; border-left: none !important;
      }
      footer { flex-direction: column; gap: 14px; text-align: center; }
      .footer-right { align-items: center; }
      .article-wrap, .legal-wrap { padding-top: 36px; }
    }

    /* ─── READING PROGRESS ─── */
    .read-progress {
      position: fixed; top: 0; left: 0; right: 0; height: 2.5px;
      background: var(--c0); transform: scaleX(0); transform-origin: 0 50%;
      z-index: 500; pointer-events: none;
    }

    /* ─── TAG LINKS (storyline / country) ─── */
    .tag-link {
      color: inherit; border-bottom: 1px solid transparent;
      transition: color .15s, border-color .15s;
    }
    .tag-link:hover { color: var(--c0); border-bottom-color: var(--c3); }

    /* ─── SINCE YOUR LAST VISIT ─── */
    .lastvisit {
      display: flex; align-items: center; gap: 12px; width: fit-content;
      margin: -14px 0 30px; padding: 9px 9px 9px 16px;
      border: 1px solid var(--b1); border-radius: 999px;
      background: var(--b2); color: var(--c1);
      font-size: 12px; letter-spacing: .04em;
      animation: lv-in .45s cubic-bezier(.34,1.3,.64,1) both;
    }
    @keyframes lv-in {
      0% { opacity: 0; transform: translateY(-7px) scale(.97); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .lastvisit-x {
      display: flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      background: none; border: none; cursor: pointer; color: var(--c3);
      transition: color .15s, background .15s;
    }
    .lastvisit-x:hover { color: var(--c0); background: var(--b1); }
    .is-new .story-tag::before {
      content: ''; display: inline-block; width: 6px; height: 6px;
      margin-right: 7px; border-radius: 50%; background: var(--c0);
      vertical-align: 1px; animation: nv-pulse 1.6s ease-in-out 2;
    }
    @keyframes nv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

    /* ─── MOST READ ─── */
    .most-read {
      padding: 0 0 30px; border-bottom: 1px solid var(--b1); margin-bottom: 38px;
    }
    .most-read-title {
      font-family: 'Inter', sans-serif; font-weight: 500;
      font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--c3); margin: 0 0 18px;
    }
    .most-read-list {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 30px;
    }
    .most-read-item { display: flex; gap: 12px; align-items: flex-start; }
    .mr-rank {
      font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700;
      line-height: 1; color: var(--c3); flex-shrink: 0; margin-top: 1px;
    }
    .mr-link { display: flex; flex-direction: column; gap: 6px; }
    .mr-hl {
      font-family: 'Playfair Display', serif; font-size: 14.5px; font-weight: 600;
      line-height: 1.35; color: var(--c0); transition: opacity .15s;
    }
    .mr-link:hover .mr-hl { opacity: .65; }
    .mr-meta { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c3); }
    @media (max-width: 960px) { .most-read-list { grid-template-columns: 1fr 1fr; gap: 18px 26px; } }
    @media (max-width: 600px) { .most-read-list { grid-template-columns: 1fr; gap: 14px; } }

    /* ─── ARTICLE VALUE BLOCKS ─── */
    .box-label {
      display: block; font-size: 10px; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase; color: var(--c2);
      margin-bottom: 10px;
    }
    .key-points {
      margin: -6px 0 32px; padding: 18px 22px;
      border: 1px solid var(--b1); border-left: 3px solid var(--b-strong);
      border-radius: 4px;
    }
    .key-points ul { list-style: none; margin: 0; padding: 0; }
    .key-points li {
      position: relative; padding-left: 18px; margin-bottom: 8px;
      font-size: 14.5px; line-height: 1.62; color: var(--c1);
    }
    .key-points li:last-child { margin-bottom: 0; }
    .key-points li::before {
      content: ''; position: absolute; left: 2px; top: .78em;
      width: 8px; height: 1px; background: var(--c3);
    }
    .why-matters {
      margin: 6px 0 28px; padding: 16px 22px 4px;
      border-left: 3px solid var(--b-strong); background: var(--b2);
      border-radius: 0 4px 4px 0;
    }
    .why-matters p { font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
    .story-chart {
      margin: 6px 0 30px; padding: 18px 20px 12px;
      border: 1px solid var(--b2); border-radius: 4px;
    }
    .story-chart figcaption {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: 12px; margin-bottom: 8px;
    }
    .chart-title { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--c0); }
    .chart-src { font-size: 10.5px; color: var(--c3); letter-spacing: .05em; white-space: nowrap; }
    .story-chart svg { width: 100%; height: auto; display: block; }
    .chart-line { stroke: var(--c0); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
    .chart-area { fill: var(--c0); opacity: .06; }
    .chart-dot { fill: var(--c0); }
    .chart-last { font: 600 13px 'Inter', sans-serif; fill: var(--c0); }
    .chart-axis { font: 10px 'Inter', sans-serif; fill: var(--c3); letter-spacing: .05em; }

    /* ─── STORYLINE BAND (article) ─── */
    .storyline-band {
      display: flex; align-items: center; gap: 12px;
      margin: -6px 0 30px; padding: 12px 16px;
      border: 1px solid var(--b1); border-radius: 4px;
      transition: border-color .18s ease, transform .2s cubic-bezier(.34,1.4,.64,1);
    }
    .storyline-band:hover { border-color: var(--c3); transform: translateY(-1px); }
    .sb-label {
      font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
      color: var(--c3); border: 1px solid var(--b1); padding: 3px 8px; border-radius: 999px;
      flex-shrink: 0;
    }
    .sb-name {
      font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 600;
      color: var(--c0); flex: 1; line-height: 1.3;
    }
    .sb-count {
      font-size: 10.5px; color: var(--c3); letter-spacing: .08em;
      text-transform: uppercase; white-space: nowrap;
    }
    .sb-arrow { color: var(--c2); flex-shrink: 0; }

    /* ─── RETRACTION BANNER ─── */
    .retraction-banner {
      display: block; margin: -6px 0 30px; padding: 16px 18px;
      border: 1px solid rgba(178,38,30,.35); border-left: 3px solid #b3261e;
      border-radius: 4px; background: rgba(178,38,30,.05);
      font-size: 14px; line-height: 1.55; color: var(--c1);
    }
    .retraction-banner strong { color: #b3261e; }
    .retraction-banner a { color: inherit; text-decoration: underline; }
    html.dark .retraction-banner { border-color: rgba(255,120,110,.35); border-left-color: #ff7a6e; background: rgba(255,120,110,.08); }
    html.dark .retraction-banner strong { color: #ff7a6e; }

    /* ─── STORYLINE PAGE ─── */
    .storyline-head { margin-bottom: 44px; max-width: 820px; }
    .storyline-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(30px, 4vw, 46px); font-weight: 700;
      line-height: 1.08; letter-spacing: -.018em; color: var(--c0);
      margin-bottom: 12px;
    }
    .storyline-dates { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--c3); }
    .timeline { position: relative; max-width: 780px; padding-bottom: 56px; }
    .timeline::before {
      content: ''; position: absolute; left: 5px; top: 8px; bottom: 14px;
      width: 1px; background: var(--b1);
    }
    .tl-item { position: relative; display: flex; gap: 26px; padding: 0 0 38px; }
    .tl-item:last-child { padding-bottom: 0; }
    .tl-marker { flex-shrink: 0; width: 11px; position: relative; }
    .tl-dot {
      position: absolute; top: 5px; left: 0; width: 11px; height: 11px;
      border-radius: 50%; background: var(--bg); border: 1.5px solid var(--c2);
    }
    .tl-latest .tl-dot { background: var(--c0); border-color: var(--c0); }
    .tl-meta {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
      color: var(--c3); margin-bottom: 8px;
    }
    .tl-pill {
      font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
      padding: 2.5px 8px; border-radius: 999px; background: var(--c0); color: var(--bg);
    }
    .tl-hl {
      font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 600;
      line-height: 1.3; color: var(--c0); margin-bottom: 8px;
    }
    .tl-hl a:hover { opacity: .65; }
    .tl-summary { font-size: 14px; line-height: 1.68; color: var(--c2); max-width: 640px; }

    /* ─── WORLD / COUNTRY ─── */
    .country-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 14px; padding-bottom: 56px;
    }
    .country-chip {
      display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
      border: 1px solid var(--b2); border-radius: 4px;
      transition: border-color .18s ease, transform .2s cubic-bezier(.34,1.4,.64,1);
    }
    .country-chip:hover { border-color: var(--c3); transform: translateY(-2px); }
    .cc-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; color: var(--c0); }
    .cc-count { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c3); }

    /* ─── ARCHIVE ─── */
    .arch-intro {
      font-size: 14px; line-height: 1.7; color: var(--c2);
      max-width: 640px; margin-bottom: 40px;
    }
    .arch-day { margin-bottom: 38px; }
    .arch-date {
      font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600;
      color: var(--c0); margin-bottom: 12px; padding-bottom: 8px;
      border-bottom: 1px solid var(--b2);
    }
    .arch-list { list-style: none; margin: 0; padding: 0; }
    .arch-list li {
      display: flex; align-items: baseline; gap: 12px;
      padding: 7px 0; font-size: 14.5px; line-height: 1.5;
    }
    .arch-sec {
      flex-shrink: 0; width: 100px; font-size: 10px; font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase; color: var(--c3);
    }
    .arch-list time { flex-shrink: 0; font-size: 11px; color: var(--c3); }
    .arch-list a { color: var(--c1); transition: color .15s; }
    .arch-list a:hover { color: var(--c0); }
    .arch-extra { margin: 10px 0 56px; max-width: 780px; }
    .arch-extra-title {
      font-family: 'Inter', sans-serif; font-weight: 500;
      font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--c3); margin: 0 0 14px;
    }
    @media (max-width: 600px) {
      .arch-list li { flex-wrap: wrap; gap: 4px 10px; }
      .arch-sec { width: auto; }
    }

    /* ─── SEARCH PAGE ─── */
    .search-page-form { display: flex; gap: 10px; margin-bottom: 40px; max-width: 560px; }
    .search-page-input {
      flex: 1; padding: 12px 18px; border-radius: 999px;
      border: 1px solid var(--b1); background: transparent;
      font-family: 'Inter', sans-serif; font-size: 15px; color: var(--c0);
      outline: none; transition: border-color .2s;
    }
    .search-page-input:focus { border-color: var(--c2); }
    .search-page-btn {
      padding: 12px 26px; border-radius: 999px;
      border: 1px solid var(--b-strong); background: var(--c0); color: var(--bg);
      font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
      transition: opacity .15s;
    }
    .search-page-btn:hover { opacity: .82; }

    /* ─── COMMAND PALETTE (Ctrl/Cmd+K) ─── */
    .palette-overlay {
      position: fixed; inset: 0; z-index: 600;
      display: none; align-items: flex-start; justify-content: center;
      padding: 14vh 20px 0;
      background: rgba(0,0,0,.32);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .palette-overlay.open { display: flex; animation: pal-fade .16s ease; }
    .palette {
      width: 100%; max-width: 580px; border-radius: 18px; overflow: hidden;
      background: var(--dd-bg); border: 1px solid var(--dd-border);
      backdrop-filter: blur(48px) saturate(200%); -webkit-backdrop-filter: blur(48px) saturate(200%);
      box-shadow: 0 32px 90px rgba(0,0,0,.32), 0 6px 22px rgba(0,0,0,.16);
      animation: pal-pop .24s cubic-bezier(.34,1.4,.64,1);
    }
    .palette-input {
      width: 100%; padding: 18px 22px; border: none; outline: none;
      background: transparent; font-family: 'Inter', sans-serif;
      font-size: 16px; color: var(--c0);
      border-bottom: 1px solid var(--b2);
    }
    .palette-input::placeholder { color: var(--c3); }
    .palette-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
    .palette-item { display: block; padding: 12px 14px; border-radius: 12px; cursor: pointer; }
    .palette-item.sel, .palette-item:hover { background: var(--dd-hover); }
    .pal-hl {
      display: block; font-family: 'Playfair Display', serif;
      font-size: 15px; font-weight: 600; line-height: 1.32; color: var(--c0);
      margin-bottom: 3px;
    }
    .pal-meta { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c3); }
    .palette-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--c3); }
    .palette-hint {
      padding: 10px 22px; font-size: 10px; letter-spacing: .08em;
      text-transform: uppercase; color: var(--c3); border-top: 1px solid var(--b2);
    }
    @keyframes pal-fade { from { opacity: 0; } }
    @keyframes pal-pop { from { opacity: 0; transform: scale(.96) translateY(-10px); } }

    /* ─── REDUCED MOTION ─── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
      }
    }