/* ============================================================
   The Weekly Blend — site stylesheet
   Generated from "The Weekly Blend Design System" on 22 May 2026.
   Combines design tokens (colours, type, fonts, semantic vars)
   with Monocle-style editorial layout components.
   ============================================================ */

/* ============================================================
   The Weekly Blend — Base Foundations
   Editorial city-guide weekly published from Taipei.
   Source: digital-garden/docs/design/the-weekly-blend-tokens.css
   ============================================================ */

/* --- Webfonts ---------------------------------------------------
   @import MUST be the first rule (CSS spec), so Google Fonts comes
   first; @font-face declarations for the local files follow.

   Brand families:

   English  → Google Fonts:
     Playfair Display  (display serif — hero / headings)
     DM Sans           (body sans — paragraphs, UI, eyebrows)

   Chinese  → Google Fonts:
     Noto Sans TC      (思源黑體 / Source Han Sans TC — the brand's
                        Chinese face. Use for BOTH 中文大標 (700)
                        and 中文內文 (400). Pairs with DM Sans
                        through the body cascade.)
     Noto Serif TC     (思源宋體 — deep fallback for quoted /
                        editorial serif lockups when explicitly
                        opted-in through --font-display-zh-thin.)

   Optional local files (loaded but not used by default):
     jf-openhuninn 2.1 (粉圓體 — swap-in option in fonts/.)
     ChenYuluoyan      (辰宇落雁體 Thin Monospaced — reached via
                        --font-display-zh-thin token.)
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,800;1,400;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Noto+Serif+TC:wght@400;500;700;900&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap");

@font-face {
  font-family: "jf-openhuninn";
  src: url("/fonts/jf-openhuninn-2.1.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+2E00-2E7F,
                 U+3000-303F, U+3040-309F, U+30A0-30FF,
                 U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF,
                 U+FE30-FE4F, U+FF00-FFEF;
}

@font-face {
  font-family: "ChenYuluoyan";
  src: url("/fonts/ChenYuluoyan-Thin-Monospaced.ttf") format("truetype");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}

:root {
  /* ------- Surfaces & ink (warm paper, editorial neutrals) ----- */
  --paper:           #F7F3EC;   /* default page background          */
  --paper-muted:     #EDE8DF;   /* secondary surface, alt rows      */
  --white:           #FFFFFF;   /* cards, hero panels               */
  --ink:             #1A1917;   /* primary text, hard rules         */
  --ink-mid:         #3D3B37;   /* body copy in lead/long-form      */
  --ink-soft:        #6B6760;   /* metadata, captions, eyebrows     */
  --rule:            #D6D0C7;   /* hairline rules, card borders     */

  /* ------- Four department colors ----------------------------- */
  --coffee:          #7B5E3A;   /* coffee desk accent               */
  --coffee-soft:     #F2EBE1;
  --pharma:          #2A9D8F;   /* pharma desk accent               */
  --pharma-soft:     #E6F5F3;
  --energy:          #4A7C59;   /* energy desk accent               */
  --energy-soft:     #EAF2EC;
  --scent:           #B8872A;   /* scent / fragrance desk accent    */
  --scent-soft:      #F5EDDC;

  /* Per-section accent. Templates set --accent / --soft on a
     container, then children read from these. */
  --accent:          var(--ink);
  --soft:            var(--paper-muted);

  /* ------- Type families --------------------------------------
     ALL Chinese (display + body) uses Noto Sans TC (思源黑體 /
     Source Han Sans TC). Pairs with DM Sans through the body
     cascade. ChenYuluoyan is available through the explicit
     --font-display-zh-thin token for hand-cut quoted lockups. */
  --font-display-en: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-display-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-display-zh-thin: "ChenYuluoyan", "Noto Serif TC", serif;
  --font-display:    var(--font-display-en), var(--font-display-zh);
  --font-body:       "DM Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body-zh:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ------- Type scale (editorial, mostly fluid) --------------- */
  --type-hero:           clamp(48px, 6.5vw, 92px);
  --type-page-title:     clamp(40px, 5vw, 64px);
  --type-feature-title:  48px;
  --type-section-title:  32px;
  --type-card-title:     21px;
  --type-body-lg:        19px;
  --type-body:           16px;
  --type-small:          13px;
  --type-meta:           11px;   /* all-caps eyebrow/meta */
  --type-micro:          9px;

  --leading-hero:   1.02;
  --leading-title:  1.12;
  --leading-body:   1.65;
  --leading-reader: 1.75;       /* reader.body uses serif at 20px */
  --tracking-meta:  0.14em;     /* all-caps meta tracking         */
  --tracking-button:0.13em;
  --tracking-tight: 0;

  /* ------- Layout --------------------------------------------- */
  --container-home:     1240px;
  --container-reader:   1180px;
  --container-narrow:   760px;  /* article body width */
  --space-page-x:       32px;
  --space-page-x-mobile:20px;
  --space-section-y:    96px;
  --space-section-y-sm: 72px;
  --space-hero-gap:     80px;
  --space-card:         32px;
  --space-card-sm:      24px;

  /* ------- Lines, corners, motion ----------------------------- */
  --border-rule:    1px solid var(--rule);
  --border-strong:  1px solid var(--ink);
  --border-heavy:   2px solid var(--ink);
  --radius:         0px;        /* editorial: square corners      */
  --radius-input:   0px;
  --shadow-hover:   0 16px 48px rgba(26, 25, 23, 0.10);

  --motion-fast:    160ms ease;
  --motion-medium:  260ms ease;
  --motion-hover-y: -3px;

  /* ------- Semantic role aliases ------------------------------ */
  --bg:             var(--paper);
  --bg-alt:         var(--paper-muted);
  --fg:             var(--ink);
  --fg-muted:       var(--ink-mid);
  --fg-soft:        var(--ink-soft);
  --border:         var(--rule);
  --border-hard:    var(--ink);
}

/* ============================================================
   Base elements
   ============================================================ */

html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial headings — always serif, always tight leading. */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  line-height: var(--leading-hero);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 24px;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-section-title);
  line-height: var(--leading-title);
  font-weight: 700;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--type-card-title);
  line-height: 1.18;
  font-weight: 700;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  font-weight: 700;
  margin: 0;
}

p { margin: 0 0 16px; color: var(--ink-mid); }
p.lead { font-family: var(--font-display); font-size: 25px; line-height: 1.45; color: var(--ink); }

/* Eyebrow / meta — the signature all-caps micro label that runs
   above every heading in The Weekly Blend. */
.eyebrow, .meta {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

/* Long-form reader body uses serif for paragraph copy. */
.reader-body {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: var(--leading-reader);
  color: var(--ink);
  max-width: var(--container-narrow);
}

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

hr, .rule { border: 0; border-top: var(--border-rule); margin: 32px 0; }
.rule-strong { border-top: var(--border-strong); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* Chinese display override: when the [data-lang="zh"] attribute
   is set, big headings use the Chinese serif stack so 中文大標
   doesn't fall to a fallback. */
[data-lang="zh"] h1,
[data-lang="zh"] .h1,
[data-lang="zh"] h2,
[data-lang="zh"] .h2,
[data-lang="zh"] h3,
[data-lang="zh"] .h3,
[data-lang="zh"] .reader-body,
.zh-display {
  font-family: var(--font-display-zh);
  letter-spacing: 0;
}

/* ============================================================
   LAYOUT — Monocle-style editorial components
   ============================================================ */

.site {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

/* --- Top strip ---------------------------------------------- */
.top-strip {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 9px 16px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.top-strip .sep { display: inline-block; margin: 0 14px; opacity: 0.5; }

/* --- Masthead (wordmark + issue strip) ---------------------- */
.masthead-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 32px 0;
  text-align: center;
}
.wordmark {
  font-family: var(--font-display-en);
  font-size: clamp(52px, 9.2vw, 132px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 18px;
  cursor: pointer;
}
.wordmark a {
  display: inline-block;
  padding-bottom: 0.08em;
}
.wordmark .the {
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0;
  vertical-align: baseline;
  margin-right: 0.12em;
  color: var(--ink);
}
.issue-strip {
  margin-top: 0;
  padding: 12px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.issue-strip .muted { color: var(--ink-soft); }

/* --- Sticky top nav ----------------------------------------- */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(247, 243, 236, 0.96);
  backdrop-filter: saturate(1.1);
  border-bottom: 1px solid var(--ink);
}
.top-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.top-nav nav { display: flex; flex: 1; gap: 22px; flex-wrap: wrap; }
.top-nav nav a {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease;
}
.top-nav nav a:hover  { color: var(--ink-soft); }
.top-nav nav a.active { color: var(--ink-soft); border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.top-nav nav a.account-edge-nav { margin-left: auto; }
.top-nav nav a.desk-coffee,
.top-nav nav a.desk-pharma,
.top-nav nav a.desk-energy,
.top-nav nav a.desk-scent {
  color: var(--accent);
}
.top-nav nav a.desk-coffee:hover,
.top-nav nav a.desk-pharma:hover,
.top-nav nav a.desk-energy:hover,
.top-nav nav a.desk-scent:hover,
.top-nav nav a.desk-coffee.active,
.top-nav nav a.desk-pharma.active,
.top-nav nav a.desk-energy.active,
.top-nav nav a.desk-scent.active {
  color: var(--accent);
}
.top-nav .radio-nav {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.top-nav .radio-nav:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.radio-nav-mark {
  width: 18px;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}
.radio-nav-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.radio-nav-copy {
  display: grid;
  gap: 2px;
}
.radio-nav-copy small {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.top-nav .radio-nav:hover .radio-nav-copy small {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

/* --- Main shell --------------------------------------------- */
main { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* --- Reusable typographic atoms ----------------------------- */
.eyebrow {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.eyebrow.accent { color: var(--accent); }
.eyebrow-link {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  cursor: pointer;
}
.eyebrow-link:hover { color: var(--ink-soft); }

.desk-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
  margin-top: -2px;
  background: var(--accent, var(--ink));
}

/* Section header: [meta]  [H2]  [meta] */
.rule-block-h {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--ink);
  padding: 22px 0 6px;
}
.rule-block-h h2 {
  font-family: var(--font-display-en);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.005em;
  text-align: center;
}
.rule-block-h .meta {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Desk color scoping shortcuts */
.desk-coffee { --accent: var(--coffee); --soft: var(--coffee-soft); }
.desk-pharma { --accent: var(--pharma); --soft: var(--pharma-soft); }
.desk-energy { --accent: var(--energy); --soft: var(--energy-soft); }
.desk-scent  { --accent: var(--scent);  --soft: var(--scent-soft);  }

/* --- LEAD STORY (homepage hero) ----------------------------- */
.lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  padding: 56px 0 72px;
  border-bottom: 1px solid var(--ink);
}
.lead-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--soft);
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
}
.lead-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: saturate(.94) contrast(.98);
  transform: translateX(22px) scale(1.015);
  transition:
    opacity 880ms ease,
    transform 1080ms cubic-bezier(.18, .72, .18, 1),
    filter 880ms ease;
}
.lead-cover img.is-active {
  opacity: 1;
  filter: saturate(1) contrast(1);
  transform: translateX(0) scale(1);
  z-index: 1;
}
.lead-cover.is-turning {
  animation: lead-card-turn 920ms cubic-bezier(.2, .7, .2, 1) both;
}
.lead-cover .label {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lead-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.lead-meta .accent { color: var(--accent); }
.lead-issue-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -2px 0 22px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lead-issue-strip strong {
  color: var(--ink);
  font-weight: 800;
}
.desk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  color: var(--accent);
  background: var(--paper);
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.desk-pill:hover,
.desk-pill.active {
  border-color: var(--accent);
  background: var(--soft);
}
.lead-headline-en {
  font-family: var(--font-display-en);
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.04;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.lead-headline-zh {
  font-family: var(--font-display-zh);
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.12;
  font-weight: 700;
  margin: 4px 0 24px;
}
.lead-deck {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-mid);
  margin: 0 0 28px;
  max-width: 540px;
}
.lead-byline {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.lead-byline strong { color: var(--ink); }
.lead-copy { transform: translateZ(0); }
.lead-copy > * {
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2, .7, .2, 1);
}
.lead-copy.is-changing > * {
  opacity: 0;
  transform: translateY(10px);
}
.lead-copy.is-entering > * {
  animation: lead-copy-in 720ms cubic-bezier(.16, .72, .2, 1) both;
}
.lead-copy.is-entering .lead-issue-strip { animation-delay: 45ms; }
.lead-copy.is-entering .lead-headline-en { animation-delay: 90ms; }
.lead-copy.is-entering .lead-headline-zh { animation-delay: 135ms; }
.lead-copy.is-entering .lead-deck { animation-delay: 180ms; }
.lead-copy.is-entering .lead-byline { animation-delay: 225ms; }
.lead-copy.is-entering .eyebrow-link { animation-delay: 270ms; }
@keyframes lead-card-turn {
  0% {
    transform: perspective(1200px) rotateY(0deg) translateY(0) scale(1);
    box-shadow: none;
  }
  42% {
    transform: perspective(1200px) rotateY(-7deg) translateY(-2px) scale(.992);
    box-shadow: 0 20px 44px rgba(20, 18, 14, .14);
  }
  100% {
    transform: perspective(1200px) rotateY(0deg) translateY(0) scale(1);
    box-shadow: none;
  }
}
@keyframes lead-copy-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- TWB RADIO / PODCAST ------------------------------------ */
.podcast-radio {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.35fr);
  border-bottom: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, var(--paper-muted));
}
.radio-live {
  padding: 32px;
  border-right: 1px solid var(--ink);
  background: var(--soft);
}
.radio-disc-stage {
  display: flex;
  justify-content: center;
  margin: 18px 0 26px;
}
.radio-disc {
  position: relative;
  width: min(72vw, 292px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--ink);
  background:
    radial-gradient(circle at center, var(--paper) 0 11%, transparent 11.5%),
    radial-gradient(circle at center, transparent 0 20%, rgba(255,255,255,0.72) 20.5% 22%, transparent 22.5% 100%),
    conic-gradient(from 20deg, rgba(255,255,255,0.92), rgba(208,196,174,0.56), rgba(255,255,255,0.82), rgba(171,151,113,0.34), rgba(255,255,255,0.92));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14);
  animation: radio-disc-spin 18s linear infinite;
}
.radio-disc::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(31, 29, 25, 0.22);
  box-shadow:
    inset 0 0 0 36px rgba(255,255,255,0.08),
    inset 0 0 0 72px rgba(31,29,25,0.04);
  pointer-events: none;
  z-index: 2;
}
.radio-disc::after {
  content: "";
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 10px rgba(255,255,255,0.72);
  z-index: 3;
}
.radio-cover {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.9;
  mix-blend-mode: multiply;
}
@keyframes radio-disc-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .radio-disc { animation: none; }
}
.radio-live h2 {
  font-family: var(--font-display-en);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  margin: 8px 0 16px;
}
.radio-status {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.radio-deck {
  max-width: 420px;
  margin: 0 0 24px;
  color: var(--ink-mid);
  font-size: 15px;
  line-height: 1.65;
}
.radio-platforms {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.radio-listen {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--ink);
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.radio-listen:hover {
  background: var(--ink);
  color: var(--paper);
}
.radio-playlist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.radio-playlist li + li { border-top: 1px solid var(--rule); }
.radio-playlist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 104px;
  padding-right: 24px;
}
.radio-playlist li:hover { background: var(--soft); }
.radio-playlist .episode-link {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 104px;
  padding: 20px 24px;
}
.episode-no {
  font-family: var(--font-display-en);
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
}
.episode-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.episode-body strong {
  font-family: var(--font-display-en);
  font-size: 20px;
  line-height: 1.12;
}
.episode-body em {
  font-style: normal;
  font-family: var(--font-display-zh);
  color: var(--ink-mid);
  font-size: 15px;
  line-height: 1.35;
}
.episode-meta {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.episode-platforms {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.episode-platforms a {
  border: 1px solid var(--rule);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font: 800 9px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.episode-platforms a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper);
}

/* --- THE BRIEFING (4 numbered) ------------------------------ */
.briefing { padding: 56px 0 64px; border-bottom: 1px solid var(--ink); }
.briefing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.brief-item { display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: transform 240ms ease; }
.brief-item:hover { transform: translateY(-3px); }
.brief-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--soft);
}
.brief-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.brief-number {
  font-family: var(--font-display-en);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
.brief-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.brief-meta .desk { color: var(--accent); }
.brief-title {
  font-family: var(--font-display-en);
  font-size: 18px;
  line-height: 1.18;
  font-weight: 700;
  margin: 0;
  min-height: 42px;
}
.brief-title-zh {
  font-family: var(--font-display-zh);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  margin: 4px 0 0;
  min-height: 53px;
}
.brief-deck { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--ink-mid); margin: 4px 0 0; min-height: 61px; }

/* --- FROM THE DESKS / DESK CARDS ---------------------------- */
.desks { padding: 56px 0 72px; border-bottom: 1px solid var(--ink); }
.desks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 64px;
  margin-top: 36px;
}
.desk-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
}
.desk-card .cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--soft);
  cursor: pointer;
}
.desk-card .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.desk-card .body { display: flex; flex-direction: column; gap: 8px; }
.desk-card .body .eyebrow { margin-bottom: 4px; }
.desk-card h3 {
  font-family: var(--font-display-en);
  font-size: 22px;
  line-height: 1.06;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
}
.desk-card h4 {
  font-family: var(--font-display-zh);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--ink-mid);
}
.desk-card .deck { font-size: 13px; color: var(--ink-mid); line-height: 1.55; margin: 6px 0 12px; }
.desk-card ol {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  counter-reset: dl;
  border-top: 1px solid var(--rule);
}
.desk-card li {
  counter-increment: dl;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.4;
  cursor: pointer;
  transition: color 160ms ease;
}
.desk-card li:hover { color: var(--ink); }
.desk-card li:hover strong { color: var(--accent); }
.desk-card li::before {
  content: counter(dl, decimal-leading-zero);
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--accent);
}
.desk-card li strong { color: var(--ink); font-weight: 500; transition: color 160ms ease; }
.desk-card li .min {
  font: 800 9px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- PULL QUOTE --------------------------------------------- */
.pull-quote { padding: 88px 0 96px; border-bottom: 1px solid var(--ink); text-align: center; }
.pull-quote blockquote {
  font-family: var(--font-display-en);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.005em;
  max-width: 980px;
  margin: 0 auto 18px;
  color: var(--ink);
}
.pull-quote blockquote::before { content: "“"; margin-right: 0.05em; }
.pull-quote blockquote::after  { content: "”"; margin-left: 0.05em; }
.pull-quote .zh {
  font-family: var(--font-display-zh);
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink-mid);
  max-width: 760px;
  margin: 16px auto 24px;
}
.pull-quote cite {
  font-style: normal;
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pull-quote .source-note {
  margin: 28px auto 0;
  max-width: 760px;
  font: 800 12px/1.4 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.source-ticker {
  margin: 26px 0 0;
  width: 100%;
  max-width: none;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.source-ticker-track {
  display: flex;
  width: max-content;
  animation: source-ticker-scroll 44s linear infinite;
}
.source-ticker span {
  display: inline-grid;
  place-items: center;
  gap: 5px;
  align-items: center;
  min-height: 64px;
  padding: 0 30px;
  color: var(--accent);
  font-family: var(--font-body);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}
.source-ticker span::before {
  content: "";
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
}
.source-ticker strong {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
}
.source-ticker small {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}
@keyframes source-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- THE WIRES ---------------------------------------------- */
.wires { padding: 56px 0 72px; border-bottom: 1px solid var(--ink); }
.wires-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 36px;
}
.wire-col h3 {
  font-family: var(--font-display-en);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--ink);
}
.wire {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
}
.wire:last-child { border-bottom: 0; }
.wire .stamp {
  font: 800 9px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.wire p { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--ink-mid); margin: 2px 0 0; }
.wire p:not(.stamp) {
  min-height: calc(13px * 1.55 * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wire p strong { color: var(--ink); font-weight: 500; }

/* --- SUBSCRIBE CTA ------------------------------------------ */
.subscribe { padding: 80px 0 96px; border-bottom: 1px solid var(--ink); text-align: center; }
.subscribe .eyebrow { margin-bottom: 18px; }
.subscribe h2 {
  font-family: var(--font-display-en);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.subscribe .zh {
  font-family: var(--font-display-zh);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 28px;
  color: var(--ink-mid);
}
.subscribe-form {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  border: 1px solid var(--ink);
}
.subscribe-form input {
  flex: 1; border: 0;
  background: var(--white);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: 0;
}
.subscribe-form button {
  border: 0;
  border-left: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 22px;
  cursor: pointer;
}
.subscribe .small { margin-top: 18px; font-size: 12px; color: var(--ink-soft); }
.subscribe > .small { display: none; }
.subscribe-panel {
  max-width: 720px;
  margin: 26px auto 0;
  padding: 28px 30px;
  border: 1px solid var(--ink);
  background: var(--white);
  text-align: left;
}
.subscribe-panel p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 16px;
  line-height: 1.55;
}
.subscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.subscribe-actions .button,
.magazine-hero .button,
.magazine-gate .center-card .button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0;
  text-transform: uppercase;
}
.subscribe-actions .button.dark,
.magazine-hero .button.dark {
  background: var(--ink);
  color: var(--paper);
}

/* --- MAGAZINE ------------------------------------------------ */
.magazine-gate { padding: 44px 0 88px; }
.magazine-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--ink);
}
.magazine-hero h2 {
  font-family: var(--font-display-en);
  font-size: 56px;
  line-height: 1;
  margin: 0 0 10px;
}
.magazine-hero p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 15px;
}
.magazine-shelves {
  display: grid;
  gap: 58px;
  padding-top: 42px;
}
.magazine-shelf > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 18px;
}
.magazine-shelf h2 {
  font-family: var(--font-display-en);
  font-size: 38px;
  line-height: 1;
  margin: 0;
}
.magazine-shelf header span {
  color: var(--ink-soft);
  font-size: 13px;
}
.magazine-books {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.magazine-book {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  min-height: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.magazine-book img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--ink);
}
.magazine-book span {
  color: var(--accent);
  font: 800 11px/1.2 var(--font-body);
  text-transform: uppercase;
}
.magazine-book strong {
  font-family: var(--font-display-zh);
  font-size: 22px;
  line-height: 1.15;
}
.magazine-book small {
  color: var(--ink-soft);
  font-size: 12px;
}

/* --- TOOLS --------------------------------------------------- */
.tools-gate { padding: 44px 0 88px; }
.tools-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.tools-board article {
  min-height: 260px;
  padding: 34px 28px;
  border-left: 1px solid var(--ink);
}
.tools-board article:first-child { border-left: 0; }
.tools-board h2 {
  font-family: var(--font-display-en);
  font-size: 34px;
  line-height: 1.05;
  margin: 0 0 18px;
}
.tools-board p:last-child {
  color: var(--ink-mid);
  line-height: 1.55;
  margin: 0;
}

/* --- ISSUE HEADER (used on topic / reader / archive pages) -- */
.issue-header {
  padding: 56px 0 24px;
  border-bottom: 1px solid var(--ink);
}
.issue-header .crumb {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.issue-header .crumb .accent { color: var(--accent); }
.issue-header h1 {
  font-family: var(--font-display-en);
  font-size: clamp(48px, 7.2vw, 116px);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 4px;
}
.issue-header h1.zh {
  font-family: var(--font-display-zh);
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.08;
  font-weight: 700;
  margin: 6px 0 24px;
}
.issue-header .deck {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-mid);
  margin: 0 0 28px;
  max-width: 720px;
}
.issue-header .stats {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 18px;
}
.issue-header .stat .num {
  font-family: var(--font-display-en);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.issue-header .stat .lbl {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
  display: block;
}

/* --- ARTICLES INDEX (numbered list) ------------------------- */
.index-list { padding: 48px 0 72px; }
.index-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: il;
  border-top: 1px solid var(--ink);
}

/* When inside a volume group, the ol's counter resets per-group so each
   issue's report/briefing pair is numbered 01–02 independently. */
.vol-group { margin-bottom: 36px; }
.vol-group:last-child { margin-bottom: 0; }
.vol-group ol { border-top: 0; counter-reset: il; }
.vol-group-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
.vol-group-head .vol-num {
  font-family: var(--font-display-en);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.vol-group-head .vol-rule {
  height: 1px;
  background: var(--rule);
}
.vol-group-head .vol-date {
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.index-list li {
  counter-increment: il;
  display: grid;
  grid-template-columns: 64px 88px 1fr 110px 100px;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: padding 200ms ease, background 200ms ease;
}
.index-list li:hover { padding-left: 8px; background: linear-gradient(to right, var(--soft, transparent) 0%, transparent 60%); }
.index-list li::before {
  content: counter(il, decimal-leading-zero);
  font-family: var(--font-display-en);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent, var(--ink-soft));
}
.index-list li .thumb {
  width: 88px; aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: var(--soft);
  object-fit: cover;
}
.index-list li .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.index-list li .body .row1 {
  display: flex; gap: 10px;
  font: 800 9px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.index-list li .body .row1 .desk { color: var(--accent); }
.index-list li .body h3 {
  font-family: var(--font-display-en);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
}
.index-list li .body h4 {
  font-family: var(--font-display-zh);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin: 2px 0 0;
}
.index-list li time,
.index-list li .read {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}

/* --- FILTER BAR (Articles) ---------------------------------- */
.filter-group {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.filter-group:first-of-type { border-top: 1px solid var(--rule); }
.filter-label {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-bar a {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all var(--motion-fast);
}
.filter-bar a:hover { color: var(--ink); border-color: var(--ink); }
.filter-bar a.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* --- READER (single article) -------------------------------- */
.reader-hero { padding: 56px 0 32px; border-bottom: 1px solid var(--ink); }
.reader-hero .crumb {
  display: flex; gap: 14px; flex-wrap: wrap;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.reader-hero .crumb .accent { color: var(--accent); }
.reader-hero h1 {
  font-family: var(--font-display-en);
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  max-width: 960px;
}
.reader-hero h2 {
  font-family: var(--font-display-zh);
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.1;
  font-weight: 700;
  margin: 6px 0 24px;
  max-width: 960px;
}
.reader-hero .deck {
  font-size: 19px; line-height: 1.7;
  color: var(--ink-mid);
  max-width: 760px;
  margin: 0 0 28px;
}
.reader-hero .byline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.reader-hero .byline-row strong { color: var(--ink); display: inline-block; margin-left: 6px; }

.reader-cover {
  margin: 32px 0 48px;
  border: 1px solid var(--rule);
  background: var(--soft);
  overflow: hidden;
}
.reader-cover img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.reader-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ink);
}
.reader-aside {
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  position: sticky;
  top: 70px;
  align-self: start;
  font: 800 10px/1.5 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.reader-aside .label {
  display: block;
  margin-top: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.16em;
}
.reader-aside .val {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}
.reader-aside ol { list-style: none; padding: 0; margin: 8px 0 0; }
.reader-aside ol li {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font: 500 12px/1.45 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
.reader-aside ol li:hover { color: var(--accent); }
.reader-aside ol li .n { color: var(--accent); margin-right: 6px; font-weight: 700; }

.reader-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
  max-width: 720px;
}
.reader-body .lead-para {
  font-family: var(--font-display-en);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 24px;
  font-weight: 400;
}
.reader-body section {
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.reader-body .reader-notice {
  padding: 18px 20px;
  margin: 0 0 18px;
  border: 1px solid var(--ink);
  background: var(--soft);
}
.reader-body .reader-notice p:last-child { margin-bottom: 0; }
.reader-body section:last-child { border-bottom: 0; }
.reader-body h2 {
  font-family: var(--font-display-en);
  font-size: 28px;
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.reader-body h2 .num {
  display: inline-block;
  margin-right: 14px;
  color: var(--accent);
}
.reader-body h3.zh {
  font-family: var(--font-display-zh);
  font-size: 26px;
  line-height: 1.18;
  font-weight: 700;
  margin: 4px 0 18px;
}
.reader-body p { margin: 0 0 16px; }
.reader-body a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.reader-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.reader-body li {
  margin: 0 0 10px;
  color: var(--ink-mid);
}
.reader-body strong { color: var(--ink); font-weight: 800; }
.reader-body code {
  padding: 1px 5px;
  background: var(--paper-muted);
  border: 1px solid var(--rule);
  font-size: 0.88em;
}
.reader-media,
.reader-body .article-motion-figure {
  margin: 24px 0 28px;
}
.reader-media img,
.reader-body .article-motion,
.reader-body .article-motion-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--soft);
}
.reader-media figcaption,
.reader-body .article-motion-figure figcaption {
  margin-top: 8px;
  font: 800 10px/1.4 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.reader-body .pull {
  margin: 28px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--accent, var(--ink));
  font-family: var(--font-display-en);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}
.reader-body .pull .zh {
  font-family: var(--font-display-zh);
  font-style: normal;
  font-size: 19px;
  line-height: 1.6;
  display: block;
  margin-top: 8px;
  color: var(--ink-mid);
}
.reader-body .source {
  display: block;
  margin-top: 8px;
  font: 800 9px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- ISSUE ARCHIVE (magazine grid) -------------------------- */
.issues-feature {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: 42px;
  align-items: stretch;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--ink);
}
.issues-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--rule);
  padding-right: 34px;
}
.issues-feature-copy h2 {
  font-family: var(--font-display-en);
  font-size: clamp(56px, 8vw, 118px);
  line-height: .9;
  margin: 0 0 6px;
}
.issues-feature-copy h3 {
  font-family: var(--font-display-zh);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.12;
  margin: 0 0 18px;
}
.issues-feature-copy p:not(.eyebrow) {
  color: var(--ink-mid);
  font-size: 15px;
  line-height: 1.7;
  max-width: 460px;
}
.issues-feature-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: 24px;
  padding-top: 16px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.issues-feature-stats strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display-en);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 6px;
}
.issues-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.issues-feature-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 100%;
  border: 1px solid var(--rule);
  background: var(--white);
  padding: 14px;
  color: var(--ink);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.issues-feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.issues-feature-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--soft);
  border: 1px solid var(--rule);
}
.issues-feature-card span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.issues-feature-card strong {
  font-family: var(--font-display-zh);
  font-size: 19px;
  line-height: 1.25;
}
.issue-filters { padding-top: 18px; }
.issue-filters .filter-bar a.desk-coffee.active,
.issue-filters .filter-bar a.desk-pharma.active,
.issue-filters .filter-bar a.desk-energy.active,
.issue-filters .filter-bar a.desk-scent.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  color: var(--accent);
}
.issue-volume-list {
  display: grid;
  gap: 48px;
  padding: 42px 0 72px;
}
.issue-volume-block {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}
.issue-volume-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.issue-volume-head h2 {
  font-family: var(--font-display-en);
  font-size: clamp(42px, 5.5vw, 84px);
  line-height: .92;
  margin: 0;
}
.issue-volume-head > p {
  margin: 0 0 8px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.issue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 0;
}
.issue-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--rule);
  background: var(--white);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.issue-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.issue-card-media { display: block; }
.issue-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--soft);
  border: 1px solid var(--rule);
}
.issue-card .body { display: flex; flex-direction: column; gap: 8px; }
.issue-card h3 {
  font-family: var(--font-display-en);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.issue-card h4 {
  font-family: var(--font-display-zh);
  font-size: 25px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 4px;
}
.issue-card .deck {
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.issue-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.issue-card-actions a {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.issue-card-actions a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.issue-card-date {
  margin-top: 4px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.issue-card ol { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: il2; }
.issue-card ol li {
  counter-increment: il2;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-mid);
  line-height: 1.35;
}
.issue-card ol li:last-child { border-bottom: 1px solid var(--rule); }
.issue-card ol li::before {
  content: counter(il2, decimal-leading-zero);
  font: 800 9px/1 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* --- PLANS (Subscribe page) --------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 48px 0 72px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.plan {
  padding: 48px 40px;
  border-left: 1px solid var(--ink);
}
.plan:first-child { border-left: 0; }
.plan .eyebrow { margin-bottom: 14px; }
.plan h3 {
  font-family: var(--font-display-en);
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 4px;
}
.plan h4 {
  font-family: var(--font-display-zh);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
}
.plan .price {
  display: block;
  font-family: var(--font-display-en);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  margin: 16px 0;
}
.plan .price small {
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: 6px;
}
.plan ul { list-style: none; padding: 0; margin: 24px 0 32px; }
.plan ul li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-mid);
  line-height: 1.45;
}
.plan ul li::before { content: "→"; color: var(--ink); font-weight: 700; }
.plan .button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 160ms ease;
}
.plan .button.dark { background: var(--ink); color: var(--paper); }
.plan .button:hover { background: var(--ink); color: var(--paper); }
.plan.dark { background: var(--ink); color: var(--paper); }
.plan.dark h3, .plan.dark h4 { color: var(--paper); }
.plan.dark .price { color: var(--paper); }
.plan.dark .eyebrow { color: rgba(247,243,236,.6); }
.plan.dark ul li { color: rgba(247,243,236,.78); border-color: rgba(247,243,236,.18); }
.plan.dark ul li::before { color: var(--paper); }
.plan.dark .button { border-color: var(--paper); color: var(--paper); }
.plan.dark .button.dark:hover { background: var(--paper); color: var(--ink); }

/* --- ACCOUNT DASHBOARD -------------------------------------- */
.account-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 0;
  padding: 44px 0 72px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.account-panel {
  min-height: 460px;
  padding: 44px 38px;
  border-left: 1px solid var(--ink);
}
.account-panel:first-child { border-left: 0; }
.account-summary h2,
.account-upgrade h2 {
  font-family: var(--font-display-en);
  font-size: 46px;
  line-height: 1;
  font-weight: 700;
  margin: 0;
}
.account-summary h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.account-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 34px;
}
.account-badges span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--ink);
  font: 800 13px/1 var(--font-body);
  letter-spacing: 0;
  text-transform: capitalize;
}
.account-fields {
  display: grid;
  gap: 0;
  margin: 0 0 30px;
}
.account-fields div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.account-fields div:last-child { border-bottom: 1px solid var(--rule); }
.account-fields dt {
  color: var(--ink-soft);
  font: 800 13px/1.2 var(--font-body);
  text-transform: uppercase;
}
.account-fields dd {
  margin: 0;
  color: var(--ink);
  font: 700 18px/1.35 var(--font-body);
  overflow-wrap: anywhere;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}
.account-actions .button,
.account-upgrade .button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 800 13px/1 var(--font-body);
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}
.account-actions .button:hover {
  background: var(--ink);
  color: var(--paper);
}
.account-note {
  font-size: 14px;
  color: var(--ink-mid);
}
.account-upgrade {
  background: var(--ink);
  color: var(--paper);
}
.account-upgrade .eyebrow { color: rgba(247,243,236,.62); }
.account-upgrade h2 { color: var(--paper); }
.account-price {
  margin: 14px 0 28px;
  color: var(--paper);
  font: 800 34px/1 var(--font-body);
}
.account-price span {
  font-size: 18px;
  font-weight: 700;
  color: rgba(247,243,236,.78);
}
.account-upgrade ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
.account-upgrade li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(247,243,236,.18);
  color: rgba(247,243,236,.82);
  font-size: 15px;
  line-height: 1.45;
}
.account-upgrade li:last-child { border-bottom: 1px solid rgba(247,243,236,.18); }
.account-upgrade li::before {
  content: ">";
  color: var(--paper);
  font-weight: 800;
}
.account-upgrade .button {
  border-color: var(--paper);
  color: var(--paper);
}
.account-upgrade .button.dark:hover {
  background: var(--paper);
  color: var(--ink);
}
.account-upgrade .small { color: rgba(247,243,236,.58); }

/* --- LOGIN / ABOUT simple page ------------------------------ */
.center-card {
  max-width: 460px;
  margin: 56px auto 96px;
  padding: 36px 40px;
  border: 1px solid var(--ink);
  background: var(--white);
}
.center-card .eyebrow { margin-bottom: 8px; }
.center-card h2 {
  font-family: var(--font-display-en);
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 18px;
}
.center-card label {
  display: grid;
  gap: 8px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.center-card .form-grid {
  display: grid;
  gap: 14px;
}
.center-card .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.center-card input {
  min-height: 46px;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 10px 12px;
  font: 400 15px/1 var(--font-body);
  color: var(--ink);
  border-radius: 0;
}
.center-card .button {
  display: inline-flex;
  min-height: 46px;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 6px;
}
.center-card .small { color: var(--ink-soft); font-size: 12px; margin-top: 14px; }
.button:disabled,
.center-card .button:disabled,
.plan .button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.about-page { padding: 56px 0 96px; }
.about-page .about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.about-page h2 {
  font-family: var(--font-display-en);
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1.02;
  font-weight: 700;
  margin: 8px 0 6px;
  letter-spacing: -0.005em;
}
.about-page h3 {
  font-family: var(--font-display-zh);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  margin: 0 0 24px;
}
.about-page p { font-size: 17px; line-height: 1.7; color: var(--ink-mid); margin: 0 0 16px; }
.about-page .principles { margin-top: 28px; border-top: 1px solid var(--rule); }
.about-page .principles div {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.about-page .principles strong {
  display: block;
  font-family: var(--font-display-en);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* --- FOOTER ------------------------------------------------- */
.footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 32px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer .col h4 {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.footer .col a {
  display: block;
  font: 800 11px/1.4 var(--font-body);
  color: var(--ink);
  margin: 0 0 8px;
  cursor: pointer;
}
.footer .col a:hover { color: var(--ink-soft); }
.footer .brand strong {
  font-family: var(--font-display-en);
  font-size: 28px;
  font-weight: 700;
  display: block;
}
.footer .brand .zh {
  font-family: var(--font-display-zh);
  font-size: 18px;
  font-weight: 700;
  display: block;
  margin: 6px 0 14px;
}
.footer .brand p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0; max-width: 320px; }
.legal {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px 42px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   INTERACTIONS — hover, focus, scroll affordances
   ============================================================ */

/* Scroll progress bar at the very top of the page. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--ink);
  z-index: 100;
  width: var(--progress, 0%);
  transition: width 80ms linear;
  pointer-events: none;
}

/* Lead-cover image lifts subtly + cover image scales on hover. */
.lead-cover { transition: transform 280ms ease, box-shadow 280ms ease; }
.lead-cover:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.lead-cover img {
  transition:
    opacity 880ms ease,
    transform 1080ms cubic-bezier(.18, .72, .18, 1),
    filter 880ms ease;
}
.lead-cover:hover img.is-active { transform: translateX(0) scale(1.012); }

/* Briefing card hover — already lifts; add cover-image zoom + accent rule on top. */
.brief-item {
  position: relative;
  transition: transform 240ms ease;
}
.brief-item::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--ink));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}
.brief-item:hover::before { transform: scaleX(1); }
.brief-cover img { transition: transform 600ms ease; }
.brief-item:hover .brief-cover img { transform: none; }
.brief-item:hover .brief-title { color: var(--accent); }
.brief-title { transition: color 200ms ease; }

/* Desk card list items — slide right on hover, arrow appears. */
.desk-card li {
  position: relative;
  padding-right: 24px;
  transition: padding 240ms ease, color 200ms ease;
}
.desk-card li::after {
  content: "→";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  transition: opacity 200ms ease, transform 200ms ease;
}
.desk-card li:hover { padding-left: 6px; padding-right: 30px; }
.desk-card li:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Desk-card cover image: zoom on hover */
.desk-card .cover img { transition: transform 600ms ease; }
.desk-card .cover:hover img { transform: none; }

/* Wires — left accent rule slides in on hover. */
.wire { position: relative; padding-left: 0; transition: padding 240ms ease; }
.wire::before {
  content: "";
  position: absolute;
  left: -16px; top: 50%; bottom: 0;
  width: 2px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 240ms ease;
}
.wire:hover { padding-left: 12px; }
.wire:hover::before { transform: scaleY(0.6); top: 20%; bottom: 20%; }
.wire:hover p strong { color: var(--accent); }
.wire p strong { transition: color 200ms ease; }

/* Index list rows — accent number on hover. */
.index-list li::before { transition: color 200ms ease, transform 200ms ease; display: inline-block; }
.index-list li:hover::before { transform: translateY(-1px); }
.index-list li:hover .body h3 { color: var(--accent); }
.index-list li .body h3 { transition: color 200ms ease; }

/* Issue cards — image gets a thin paper-coloured inner border on hover. */
.issue-card img { transition: transform 600ms ease; }
.issue-card:hover img { transform: scale(1.02); }

/* Reader chapter aside — current section highlighted. */
.reader-aside ol li {
  position: relative;
  padding-left: 12px;
  transition: padding-left 200ms ease, color 200ms ease;
}
.reader-aside ol li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: transparent;
  transform: translateY(-50%);
  transition: background 200ms ease, width 200ms ease;
}
.reader-aside ol li.is-active {
  color: var(--accent);
  padding-left: 18px;
}
.reader-aside ol li.is-active::before {
  background: var(--accent);
  width: 8px;
}
.reader-aside ol li.is-active .n { color: var(--accent); }

/* Reader body sections — entry fade on initial paint. */
.reader-body section {
  opacity: 0;
  transform: translateY(8px);
  animation: section-in 520ms cubic-bezier(.2, .7, .2, 1) forwards;
}
.reader-body section:nth-of-type(1) { animation-delay: 40ms; }
.reader-body section:nth-of-type(2) { animation-delay: 100ms; }
.reader-body section:nth-of-type(3) { animation-delay: 160ms; }
.reader-body section:nth-of-type(4) { animation-delay: 220ms; }
.reader-body section:nth-of-type(5) { animation-delay: 280ms; }

@keyframes section-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Buttons — subtle weight shift on hover, mirrors the editorial tone. */
.button, .eyebrow-link, .plan .button, .center-card .button {
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.button:active, .plan .button:active, .center-card .button:active { transform: translateY(1px); }

/* Top-nav links — pen-underline animation. */
.top-nav nav a {
  position: relative;
  padding-bottom: 4px;
}
.top-nav nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
}
.top-nav nav a:hover::after,
.top-nav nav a.active::after { transform: scaleX(1); }
.top-nav nav a.active { border-bottom: 0; } /* replaces the static underline with the animated one */

/* Reduce-motion users: kill non-essential animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   MOBILE — refined breakpoints + hamburger drawer
   ============================================================ */

/* Hamburger button — desktop hidden. */
.nav-toggle {
  display: none;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 9px 14px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--ink); color: var(--paper); }

/* Mobile drawer — full-height overlay nav. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--paper);
  display: none;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  padding: 24px 24px 40px;
  overflow: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(.2, .7, .2, 1);
}
.nav-drawer.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.nav-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}
.nav-drawer-head .wordmark-sm {
  font-family: var(--font-display-en);
  font-size: 22px;
  font-weight: 700;
}
.nav-drawer-head .close {
  border: 1px solid var(--ink);
  background: transparent;
  padding: 8px 12px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
}
.nav-drawer ul {
  flex: 1;
  min-height: 0;
  list-style: none;
  padding: 0 0 24px;
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer ul li {
  border-bottom: 1px solid var(--rule);
}
.nav-drawer ul li a {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  color: var(--ink);
}
.nav-drawer ul li a .num {
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.nav-drawer ul li a .lbl {
  display: block;
  font-family: var(--font-display-en);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
}
.nav-drawer ul li a .lbl-zh {
  display: block;
  font-family: var(--font-display-zh);
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--ink-mid);
}
.nav-drawer ul li a .arrow {
  font-size: 18px;
  color: var(--ink-soft);
}
.nav-drawer ul li.section-label {
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--ink);
}
.nav-drawer .drawer-foot {
  flex: 0 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font: 800 10px/1.4 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* Body when drawer is open — lock scroll. */
body.drawer-open { overflow: hidden; }

/* Refined breakpoints --------------------------------------- */
@media (max-width: 1100px) {
  .briefing-grid { gap: 24px; }
  .desks-grid { gap: 48px 40px; }
}

@media (max-width: 980px) {
  main { padding: 0 24px; }
  .masthead-shell { padding: 28px 24px 0; }
  .footer, .legal { padding-left: 24px; padding-right: 24px; }
  .top-nav-inner { padding: 12px 24px; flex-direction: row; }

  /* Hide inline nav, show hamburger */
  .top-nav nav { display: none; }
  .top-nav .radio-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Hero/lead stacks */
  .wordmark { font-size: clamp(44px, 12vw, 86px); }
  .issue-strip { gap: 14px; font-size: 9px; letter-spacing: 0.14em; }
  .lead { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 56px; }
  .lead > * { min-width: 0; }
  .lead-cover { width: 100%; }
  .lead-headline-en { font-size: clamp(28px, 6vw, 38px); }
  .lead-headline-zh { font-size: clamp(34px, 8vw, 52px); }

  .podcast-radio { grid-template-columns: 1fr; }
  .radio-live {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
    padding: 28px 24px;
  }
  .radio-playlist li {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .radio-playlist .episode-link {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
  }
  .episode-meta {
    grid-column: 2;
    white-space: normal;
  }
  .episode-platforms {
    justify-content: flex-start;
    padding: 0 18px 18px 62px;
  }

  .briefing-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .briefing { padding: 40px 0 48px; }
  .brief-title { font-size: 17px; }
  .brief-title-zh { font-size: 19px; }

  .desks-grid { grid-template-columns: 1fr; gap: 56px; }
  .desk-card { grid-template-columns: 1fr; gap: 18px; }
  .desk-card h3 { font-size: 24px; }
  .desks { padding: 40px 0 56px; }

  .pull-quote { padding: 56px 0 64px; }

  .wires-grid { grid-template-columns: 1fr; gap: 24px; }
  .wires { padding: 40px 0 56px; }

  .subscribe { padding: 56px 0 72px; }

  .footer { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 36px; }
  .legal { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Reader */
  .reader-hero { padding: 32px 0 24px; }
  .reader-hero h1 { font-size: clamp(32px, 7vw, 44px); }
  .reader-hero h2 { font-size: clamp(36px, 9vw, 60px); }
  .reader-hero .byline-row { gap: 14px 28px; font-size: 9px; }
  .reader-cover { margin: 24px 0 32px; }
  .reader-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; }
  .reader-aside {
    position: static;
    border-top: 1px solid var(--ink);
    padding-top: 14px;
    margin-bottom: 16px;
  }
  .reader-aside ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

  /* Index list — compact mobile rows */
  .index-list li { grid-template-columns: 32px minmax(0, 76px) minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  .index-list li::before { font-size: 16px; }
  .index-list li .thumb {
    width: 100%;
    min-width: 0;
    align-self: start;
    object-fit: contain;
  }
  .index-list li .body {
    min-width: 0;
    gap: 6px;
  }
  .index-list li .body .row1 {
    flex-wrap: wrap;
    gap: 6px 10px;
    line-height: 1.25;
  }
  .index-list li time, .index-list li .read { display: none; }
  .index-list li .body h3,
  .index-list li .body h4 {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .index-list li .body h3 { font-size: 16px; line-height: 1.22; }
  .index-list li .body h4 { font-size: 17px; line-height: 1.32; }

  /* Issue cards — single column */
  .issues-feature { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 32px; }
  .issues-feature-copy { border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 24px; }
  .issues-feature-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .issue-volume-list { gap: 38px; padding: 32px 0 56px; }
  .issue-volume-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .issue-grid { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .issue-card { grid-template-columns: 160px 1fr; gap: 18px; padding: 18px; }
  .issue-card img { aspect-ratio: 16 / 9; }
  .issue-card h3 { font-size: 19px; }
  .issue-card h4 { font-size: 21px; }
  .issue-card ol li { font-size: 11px; }
  .subscribe-form { flex-direction: column; }
  .subscribe-form button { min-height: 46px; border-left: 0; border-top: 1px solid var(--ink); }
  .subscribe-panel { padding: 22px 20px; }
  .subscribe-actions .button, .magazine-hero .button { width: 100%; }
  .magazine-hero { align-items: flex-start; flex-direction: column; }
  .magazine-hero h2 { font-size: 38px; }
  .magazine-shelf > header { align-items: flex-start; flex-direction: column; }
  .magazine-books { grid-template-columns: 1fr 1fr; }
  .magazine-book strong { font-size: 19px; }
  .tools-board { grid-template-columns: 1fr; }
  .tools-board article { min-height: auto; border-left: 0; border-top: 1px solid var(--ink); padding: 28px 22px; }
  .tools-board article:first-child { border-top: 0; }

  /* Plans stack */
  .plans { grid-template-columns: 1fr; }
  .plan { border-left: 0; border-top: 1px solid var(--ink); padding: 32px 24px; }
  .plan:first-child { border-top: 0; }
  .plan .price { font-size: 44px; }
  .account-dashboard { grid-template-columns: 1fr; padding: 34px 0 58px; }
  .account-panel { min-height: auto; border-left: 0; border-top: 1px solid var(--ink); padding: 30px 22px; }
  .account-panel:first-child { border-top: 0; }
  .account-summary h2, .account-upgrade h2 { font-size: 34px; }
  .account-fields div { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .account-actions .button, .account-upgrade .button { width: 100%; }
  .center-card .form-grid.two { grid-template-columns: 1fr; }

  /* Issue header — smaller hero */
  .issue-header { padding: 32px 0 18px; }
  .issue-header h1 { font-size: clamp(36px, 11vw, 64px); }
  .issue-header h1.zh { font-size: clamp(28px, 9vw, 48px); }
  .issue-header .stats { gap: 32px; }
  .issue-header .stat .num { font-size: 30px; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Section section-rule-block-h: stack meta */
  .rule-block-h { grid-template-columns: 1fr; gap: 8px; padding: 18px 0 4px; }
  .rule-block-h h2 { text-align: left; font-size: 22px; }
  .rule-block-h .meta { text-align: left; }
  .rule-block-h .meta:last-child { display: none; }
}

@media (max-width: 560px) {
  main { padding: 0 18px; }
  .masthead-shell { padding: 22px 18px 0; }
  .top-nav-inner { padding: 10px 18px; }
  .footer, .legal { padding-left: 18px; padding-right: 18px; }

  .wordmark { font-size: clamp(34px, 12vw, 54px); }
  .issue-strip { gap: 8px; padding: 8px 12px; font-size: 8px; letter-spacing: 0.12em; }
  .issues-feature-grid { grid-template-columns: 1fr; }
  .issue-card { grid-template-columns: 1fr; }
  .issue-card h4 { font-size: 24px; }

  .top-strip { font-size: 8px; padding: 8px 12px; letter-spacing: 0.12em; }
  .top-strip .sep { margin: 0 8px; }

  .radio-live { padding: 24px 18px; }
  .radio-playlist .episode-link { padding: 18px; }
  .episode-platforms { padding: 0 18px 18px; }
  .episode-body strong { font-size: 18px; }
  .episode-body em { font-size: 14px; }

  .briefing-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { grid-template-columns: 1fr; gap: 24px; }
  .footer .brand p { max-width: 100%; }

  .lead-byline { font-size: 9px; letter-spacing: 0.12em; }
  .lead-meta { font-size: 9px; gap: 10px; }

  .index-list li {
    grid-template-columns: 28px minmax(0, 68px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
  .index-list li .body h3 { font-size: 15px; }
  .index-list li .body h4 { font-size: 16px; }

  .filter-group { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .filter-bar a { padding: 7px 10px; font-size: 9px; }

  /* Reader aside ol becomes 1-col */
  .reader-aside ol { grid-template-columns: 1fr; }
  .reader-body { font-size: 15px; }
  .reader-body .lead-para { font-size: 18px; }
  .reader-body h2 { font-size: 22px; }
  .reader-body h3.zh { font-size: 22px; }
}