/* EOI Insights — Articles reading desk.
   Ported from prototypes/articles-reading-desk (styles.css + reading-desk.css).
   Loaded after guides.css and articles.css. Dark mode is scoped to this
   section via html[data-theme]; other libraries do not load this file. */

:root {
  --font-editorial: -apple-system-ui-serif, ui-serif, "New York", Georgia, "Songti SC", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  --font-brand: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--font-editorial);
  font-optical-sizing: auto;
  font-synthesis: none;
  color: var(--text-primary);
  background: var(--surface);
  color-scheme: light;
  --text-primary: #1d1d1f;
  --text-secondary: #515158;
  --text-tertiary: #6e6e73;
  --accent: #086b64;
  --surface: #ffffff;
  --surface-feature: #edf5f1;
  --surface-hover: #f7f8f8;
  --separator: #e1e5e3;
  --separator-date: #bcc5c1;
  --separator-editorial: #353d39;
  --surface-reader: #ffffff;
  --surface-desk: #f3f4f3;
  --surface-selected: #ffffff;
  --surface-control: #eef1ef;
  --separator-desk: #d9dedb;
  --reader-border: #ffffffb3;
  --reader-backdrop: #1325218f;
  --reader-grabber: #bec8c2;
  --on-accent: #ffffff;
  --accent-hover: #07574f;
  /* Filled control (HIG borderedProminent): dark tint, white label. */
  --dash-fill: #086b64;
  --dash-fill-hover: #07574f;
  --dash-label: #ffffff;
  --font-page: 2.75rem;
  --font-lead: 1.75rem;
  --font-headline: 1.25rem;
  --font-body: 1.0625rem;
  --font-label: .9375rem;
  --font-meta: .8125rem;
  --font-reader-title: clamp(2.125rem, 4vw, 3.25rem);
  --font-reader-deck: 1.125rem;
  --font-reader-body: 1.25rem;
  --font-reader-subheading: 1.375rem;
  --date-width: 6rem;
  --column-gap: 2rem;
  --story-inset: 1.75rem;
  --header-height: 4.75rem;
  --motion-fast: 140ms;
  --motion-enter: 340ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --desk-duration: 440ms;
  --a-progress-color: #8b9390;
  --a-wide: 58rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #171b1b;
  --surface-hover: #222827;
  --surface-feature: #263330;
  --text-primary: #f4f2eb;
  --text-secondary: #e4e9e6;
  --text-tertiary: #c9d1cc;
  --accent: #8bd5bd;
  --separator: #56615c;
  --separator-date: #7d8a82;
  --separator-editorial: #edece4;
  --surface-reader: #202626;
  --surface-desk: #121616;
  --surface-selected: #29322e;
  --surface-control: #313a37;
  --separator-desk: #47544c;
  --reader-border: #48564f;
  --reader-backdrop: #030706b8;
  --reader-grabber: #75827b;
  --on-accent: #142720;
  --accent-hover: #a6e3cd;
  /* Dark Mode lightens the tint; the label flips for contrast. */
  --dash-fill: #8bd5bd;
  --dash-fill-hover: #a6e3cd;
  --dash-label: #142720;
  --a-progress-color: #aab5af;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-height) + 1rem); }
body.a-body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-editorial);
}
html.script-cjk body.a-body {
  --font-editorial: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.site-header, .date-meta, .archive-controls, .footer, .eyebrow, .reader-toolbar, .reader-meta, .reader-end {
  font-family: var(--font-ui);
}
a { color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(8,107,100,.12); }
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button, a { scroll-margin-block: 1rem; }
.measure { width: min(100% - 6rem, 72rem); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--separator);
}
.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { width: 2rem; height: 2rem; }
.brand-wordmark { display: grid; align-items: center; height: 2.5rem; }
.brand-name {
  grid-area: 1 / 1;
  font-family: var(--font-brand);
  font-size: 1.25rem;
  letter-spacing: -.01em;
  font-weight: 600;
  line-height: 1.15;
  transition: transform 200ms var(--ease-out);
}
.brand-section {
  grid-area: 1 / 1;
  align-self: end;
  color: var(--text-secondary);
  font-family: var(--font-brand);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 200ms var(--ease-out);
}
.has-section-label .brand-name { transform: translateY(-8px); }
.has-section-label .brand-section { opacity: 1; transform: none; }

.main-nav { display: flex; gap: 1.5rem; align-items: center; margin-inline: auto; }
.main-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .625rem .25rem;
  text-decoration: none;
  font-size: var(--font-label);
  color: var(--text-secondary);
}
.main-nav a.active { color: var(--accent); font-weight: 600; }
.main-nav a:hover { color: var(--accent); }
.main-nav .mobile-dashboard { display: none; }

.header-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.language-button, .theme-button, .menu-button, .close-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  font-size: var(--font-label);
}
.language-button, .theme-button, .menu-button {
  background: var(--surface-hover);
  border: 1px solid transparent;
  padding: .5rem .625rem;
  border-radius: .625rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
}
.language-button { padding-inline: .75rem; }
.language-button:hover, .theme-button:hover, .menu-button:hover, .close-button:hover {
  background: var(--surface-feature);
}
.a-dash {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .5rem .95rem;
  border-radius: .625rem;
  border: 1px solid transparent;
  background: var(--dash-fill);
  color: var(--dash-label);
  font-size: var(--font-label);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .2) inset,
    0 1px 2px rgba(8, 107, 100, .22);
}
:root[data-theme="dark"] .a-dash {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 1px 2px rgba(0, 0, 0, .45);
}
.a-dash:visited { color: var(--dash-label); }
.a-dash:hover {
  background: var(--dash-fill-hover);
  color: var(--dash-label);
}
.a-dash-icon { flex-shrink: 0; display: block; }
.main-nav a.a-dash,
.main-nav a.a-dash:visited {
  color: var(--dash-label);
}
.main-nav a.a-dash:hover {
  color: var(--dash-label);
  background: var(--dash-fill-hover);
}
.menu-button { display: none; }
.menu-button .icon-close { display: none; }
.menu-button.is-open .icon-menu { display: none; }
.menu-button.is-open .icon-close { display: flex; }
.theme-icon { display: flex; }
:root[data-theme="dark"] .theme-icon--light { display: none; }
:root:not([data-theme="dark"]) .theme-icon--dark { display: none; }

.page-intro { padding: 3.25rem 0 2.5rem; border-bottom: 5px solid var(--text-primary); }
h1, h2, p { margin: 0; }
.page-intro h1 { font-size: var(--font-page); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.phone-page-title, .edition-month, .story-chevron { display: none; }

.date-group {
  position: relative;
  display: grid;
  grid-template-columns: var(--date-width) minmax(0, 1fr);
  gap: var(--column-gap);
}
.date-group + .date-group { margin-top: .75rem; padding-top: .875rem; border-top: 0; }
.date-group + .date-group::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  border-top: 2px solid var(--separator-editorial);
  border-bottom: 1px solid var(--text-tertiary);
}
.date-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
  border-right: 1px solid var(--separator);
  color: var(--text-tertiary);
  text-align: center;
}
.date-gutter time { display: block; width: 100%; text-align: center; }
.date-number {
  display: block;
  font-size: 2.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.date-meta { display: block; font-size: var(--font-meta); line-height: 1.4; font-weight: 500; margin-top: .1875rem; }
.is-today .date-number, .is-today .date-meta { color: var(--accent); }
.today-pill {
  display: inline-block;
  margin-top: .5rem;
  padding: .125rem .375rem;
  border: 1px solid transparent;
  border-radius: 99px;
  background: var(--surface-feature);
  color: var(--accent);
  font: 600 .75rem/1.4 var(--font-ui);
  white-space: nowrap;
}
.group-stories { min-width: 0; }
.story + .story::before {
  content: "";
  display: block;
  margin-inline: var(--story-inset);
  border-top: 1px solid var(--separator);
}
.story-link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.75rem var(--story-inset);
  min-height: 44px;
  border-radius: .875rem;
  text-decoration: none;
}
.story-copy { min-width: 0; }
.story h2 {
  font-size: var(--font-headline);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text-primary);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  transition: color var(--motion-fast) ease;
}
.story-description {
  max-width: 42rem;
  font-size: var(--font-body);
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: .5rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.story-arrow { flex: 0 0 auto; color: var(--accent); transition: transform 160ms ease; }
.featured h2 { font-size: var(--font-lead); line-height: 1.25; letter-spacing: -.02em; max-width: 39rem; }
.featured .story-link { padding-block: 2rem; }
@media (hover: hover) {
  .story-link:hover .story-arrow { transform: translateX(3px); }
  .story-link:hover h2 { color: var(--accent); }
}

.footer {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--separator);
  padding-top: 1rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  color: var(--text-tertiary);
  font-size: var(--font-meta);
  line-height: 1.4;
}
.footer .a-foot__in {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
}
.footer nav { display: flex; gap: .75rem; }
.footer nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem .25rem;
  text-decoration: none;
}
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer .a-foot__note { margin: 0; max-width: 42rem; }

.empty-state { padding: 2.5rem 0 4rem; }
.empty-state h2 { font-size: var(--font-headline); line-height: 1.3; letter-spacing: -.02em; }
.empty-state a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .75rem;
  margin-top: 1rem;
  color: var(--accent);
  font-size: var(--font-body);
}

.reader-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--reader-backdrop);
  backdrop-filter: blur(8px);
  opacity: 1;
}
.reader-backdrop.is-on { display: block; }
.reader-backdrop.is-entering { animation: backdrop-enter 240ms ease-out both; }
.reader-backdrop.is-closing { animation: backdrop-exit 180ms ease-in both; }

.reader {
  --reader-rise: 24px;
  --reader-scale: .975;
  color: var(--text-primary);
  background: var(--surface-reader);
  border: 1px solid var(--reader-border);
  border-radius: 1.75rem;
  padding: 0;
  width: min(62rem, calc(100% - 5rem));
  height: min(54rem, calc(100dvh - 4rem));
  max-width: none;
  max-height: none;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 32px 100px #09181666, 0 4px 20px #09181633;
  transform: none;
  transition: transform 240ms var(--ease-out);
}
.reader[open]:not(.is-docked) {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: auto;
}
.reader.is-entering[open] { animation: reader-enter var(--motion-enter) var(--ease-out) both; }
.reader.is-closing { animation: reader-exit 180ms ease-in both; pointer-events: none; }
.reader.is-dragging { transform: translateY(var(--sheet-offset, 0px)); transition: none; }
.reader-shell { height: 100%; display: flex; flex-direction: column; }
.reader-chrome { position: relative; flex-shrink: 0; }
.reader-grabber { display: none; }
.reader-toolbar {
  position: relative;
  flex-shrink: 0;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  padding: .75rem 1.5rem;
  border-bottom: 1px solid var(--separator);
  background: var(--surface-reader);
}
.reader-toolbar-label { position: relative; flex: 1; min-width: 0; height: 2rem; overflow: hidden; }
.reader-brand, .reader-compact-title { position: absolute; inset: 0; pointer-events: none; white-space: nowrap; }
.reader-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-secondary);
  font-family: var(--font-brand);
  font-size: var(--font-label);
  font-weight: 600;
  letter-spacing: -.01em;
  opacity: var(--reader-brand-opacity, 1);
  transform: translateY(calc(var(--reader-collapse, 0) * -100%));
}
.reader-brand img { flex-shrink: 0; width: 24px; height: 24px; }
.reader-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.reader-compact-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-editorial);
  font-size: 1rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  opacity: var(--reader-compact-opacity, 0);
  transform: translateY(calc((1 - var(--reader-collapse, 0)) * 100%));
}
.close-button { border: 0; background: var(--surface-control); padding: .625rem; flex-shrink: 0; border-radius: 50%; }
.reader-scroll {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.reader-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.reader-measure { width: min(100% - 5rem, 40rem); margin-inline: auto; }
.reader-hero { background: var(--surface-reader); border-bottom: 1px solid var(--separator); padding-block: 2.75rem 2rem; }
.eyebrow { font-size: var(--font-meta); line-height: 1.4; font-weight: 600; }
.category { color: var(--accent); margin-bottom: 1rem; }
.reader h1 { font-size: var(--font-reader-title); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; text-wrap: pretty; overflow-wrap: anywhere; }
.reader h1:focus { outline: none; }
.reader-deck {
  color: var(--text-secondary);
  font-size: var(--font-reader-deck);
  line-height: 1.5;
  margin-top: 1.25rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .reader-deck,
:root[data-theme="dark"] .story-description {
  color: var(--text-primary);
}
.reader-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .625rem;
  font-size: var(--font-meta);
  line-height: 1.6;
  color: var(--text-tertiary);
  margin-top: 1.5rem;
}
.reader-content { padding-block: 1rem 3rem; }
.reader-body { font-size: var(--font-reader-body); line-height: 1.7; color: var(--text-primary); overflow-wrap: anywhere; }
.reader-body p { margin-block: 1.5rem; }
.reader-body h2, .reader-body h3 {
  font-size: var(--font-reader-subheading);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin-top: 2.5rem;
  color: var(--text-primary);
}
:root[data-theme="dark"] .reader-body h2,
:root[data-theme="dark"] .reader-body h3,
:root[data-theme="dark"] .a-text h2,
:root[data-theme="dark"] .a-text h3,
:root[data-theme="dark"] .reader h2,
:root[data-theme="dark"] .reader h3 {
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
}

/* Grey hairline in the reader banner, tied to the title’s scrollport. */
.reader-toolbar .a-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--a-progress, 0));
  transform-origin: 0 50%;
  background: var(--a-progress-color);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.reader.is-reading .a-progress { opacity: 1; }

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  min-height: 44px;
  padding: .75rem 1rem;
  background: var(--surface);
  z-index: 100;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

html:lang(zh-CN) {
  --font-editorial: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-ui: var(--font-editorial);
  --font-page: 2.25rem;
  --font-lead: 1.5rem;
  --font-headline: 1.125rem;
  --font-body: 1rem;
  --font-reader-title: 2.25rem;
  --font-reader-deck: 1rem;
  --font-reader-body: 1.0625rem;
  --font-reader-subheading: 1.25rem;
}
html:lang(zh-CN) h1, html:lang(zh-CN) h2 { line-height: 1.4; letter-spacing: 0; font-weight: 600; }
html:lang(zh-CN) .story-description, html:lang(zh-CN) .reader-deck { line-height: 1.65; }
html:lang(zh-CN) .reader-body { line-height: 1.8; }
html:lang(zh-CN) .reader-compact-title { font-size: .9375rem; }

@media (max-width: 58rem) {
  :root { --font-page: 2.125rem; --font-lead: 1.5rem; --font-headline: 1.25rem; --date-width: 4.5rem; --column-gap: 1.5rem; --story-inset: 1.25rem; }
  .measure { width: calc(100% - 3rem); }
  .header-inner { gap: 1rem; }
  .main-nav { gap: .75rem; }
  .page-intro { padding-block: 2.5rem 2rem; }
}

@media (max-width: 46rem) {
  :root {
    --header-height: 4rem;
    --date-width: max(60px, 3.75rem);
    --column-gap: 14px;
    --story-inset: 0px;
    --font-reader-title: 2.125rem;
    --font-reader-deck: 1.0625rem;
    --font-reader-body: 1.125rem;
    --font-reader-subheading: 1.25rem;
  }
  html:lang(zh-CN) {
    --font-page: 1.75rem;
    --font-reader-title: 1.625rem;
    --font-reader-deck: .9375rem;
    --font-reader-body: 1rem;
    --font-reader-subheading: 1.125rem;
  }
  .measure {
    width: auto;
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }
  .header-inner { position: relative; flex-wrap: nowrap; gap: 0; }
  .brand { gap: .5rem; }
  .brand img { width: 1.75rem; height: 1.75rem; }
  .brand-name { font-size: 1.125rem; }
  .header-actions { margin-left: auto; gap: .25rem; }
  .header-actions .a-dash { display: none; }
  .menu-button { display: inline-flex; }
  .site-header { border-bottom: 0; }
  .main-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    margin: 0;
    padding: .5rem;
    max-height: calc(100dvh - var(--header-height) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--separator);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 12px 32px #00000018;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 220ms var(--ease-out), visibility 0s 220ms;
    z-index: 21;
  }
  .main-nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  :root[data-theme="dark"] .main-nav { box-shadow: 0 12px 32px #00000080; }
  .main-nav a { padding: .75rem; font-size: var(--font-body); border-radius: .5rem; }
  .main-nav a.active { background: var(--surface-feature); }
  .main-nav .mobile-dashboard { display: flex; }
  .page-intro { padding-block: .5rem 1.125rem; border-bottom: 5px solid var(--text-primary); }
  .page-intro h1 { max-width: none; font-size: 3.5rem; line-height: 1.05; letter-spacing: -.025em; }
  .desktop-page-title { display: none; }
  .phone-page-title { display: inline; }
  .edition-month {
    display: block;
    margin-top: .25rem;
    color: var(--text-primary);
    font: 500 .8125rem/1.5 var(--font-ui);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .briefing { padding-top: .375rem; }
  .date-group + .date-group { margin-top: .5rem; padding-top: .875rem; }
  .date-number { font-size: 2rem; line-height: 1.1; }
  .today-pill { border-color: var(--accent); background: transparent; font-size: .6875rem; margin-top: .375rem; }
  .story-link, .featured .story-link { min-height: 4rem; padding: .4375rem 0; gap: .625rem; border-radius: 0; }
  .story h2, .featured h2 { font-size: 1.15625rem; line-height: 1.28; font-weight: 600; }
  .story-description {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    line-height: 1.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .story-chevron { display: block; flex: 0 0 18px; width: 18px; height: 22px; color: var(--text-primary); }
  .story-arrow { display: none; }
  .story-link:active { transform: none; background: var(--surface-hover); }
  .reader-mode-button { display: none !important; }
  .reader {
    --reader-rise: 100%;
    --reader-exit-y: calc(100% + 24px);
    --reader-scale: 1;
    width: 100vw;
    height: calc(100dvh - max(20px, env(safe-area-inset-top)));
    border: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    margin: auto 0 0;
    box-shadow: 0 -12px 48px #09181640;
  }
  .reader[open] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 50;
    margin: 0;
  }
  .reader-chrome { touch-action: none; user-select: none; cursor: grab; }
  .reader.is-dragging .reader-chrome { cursor: grabbing; }
  .reader-grabber {
    display: block;
    position: absolute;
    width: 36px;
    height: 5px;
    border-radius: 99px;
    top: 9px;
    left: calc(50% - 18px);
    background: var(--reader-grabber);
    pointer-events: none;
  }
  .reader-toolbar {
    min-height: 4.75rem;
    padding: 1.25rem max(16px, env(safe-area-inset-right)) .5rem max(16px, env(safe-area-inset-left));
  }
  .reader-measure { width: auto; margin-left: max(20px, env(safe-area-inset-left)); margin-right: max(20px, env(safe-area-inset-right)); }
  .reader-hero { padding-block: 1.75rem 1.5rem; background: var(--surface); }
  .footer { margin-top: 1.5rem; gap: .25rem; }
  html:lang(zh-CN) .page-intro h1 { font-size: 2.5rem; line-height: 1.2; }
  html:lang(zh-CN) .story h2 { font-size: 1.125rem; line-height: 1.45; letter-spacing: 0; }
}

@media (max-width: 24rem) {
  .header-inner.measure { margin-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .header-inner .brand { gap: .375rem; }
  .header-inner .brand-name { font-size: 1rem; }
  .header-actions { gap: 0; }
}

@media (width > 46rem) {
  .reader {
    --reader-viewport-gap: clamp(16px, 4dvh, 64px);
    width: min(84rem, 88vw, calc(100vw - 48px), calc(100dvh * 1.65));
    height: min(76rem, calc(100dvh - var(--reader-viewport-gap) * 2));
    border-radius: clamp(1.25rem, 2vw, 2rem);
  }
  .reader-measure { width: min(calc(100% - clamp(3rem, 7vw, 8rem)), 44rem); }
  .reader-hero { padding-block: clamp(1.5rem, 4dvh, 3.5rem) clamp(1.25rem, 3dvh, 2.5rem); }
}

@media (width > 46rem) and (height < 40rem) {
  .reader-toolbar { min-height: 4rem; padding-block: .5rem; }
  .reader-hero { padding-block: 1.25rem 1rem; }
}

.page-intro { animation: reveal-up 420ms var(--ease-out) both; }
.date-group { animation: reveal-up 420ms var(--ease-out) var(--reveal-delay, 0ms) both; }
.story-link { transition: transform 220ms var(--ease-out), background-color 180ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.story h2, .main-nav a, .footer a { transition: color var(--motion-fast) ease; }
.language-button, .theme-button, .menu-button, .close-button, .a-dash, .reader-mode-button {
  transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.story-link:active { transform: scale(.988); }
.language-button:active, .theme-button:active, .menu-button:active, .close-button:active, .a-dash:active, .archive-button:active, .reader-mode-button:active {
  transform: scale(.96);
}

@keyframes reveal-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes reader-enter { from { opacity: 0; transform: translateY(var(--reader-rise)) scale(var(--reader-scale)); } to { opacity: 1; transform: none; } }
@keyframes reader-exit { from { opacity: var(--reader-exit-opacity, 1); transform: var(--reader-exit-transform, none); } to { opacity: 0; transform: translateY(var(--reader-exit-y, 12px)) scale(var(--reader-scale)); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-exit { from { opacity: var(--backdrop-exit-opacity, 1); } to { opacity: 0; } }

/* ——— Reading desk (desktop split) ——— */
.phone-page-title, .edition-month { display: none; }
.story-chevron { display: none; }
.archive-pane, .reader-slot { min-width: 0; }
.reader.reader { --surface: var(--surface-reader); color: var(--text-primary); background: var(--surface); }
.reader-toolbar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.reader-mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 44px;
  min-height: 44px;
  padding: .625rem;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--text-secondary);
  font: 500 .875rem var(--font-ui);
}
.reader-mode-button:hover { color: var(--text-primary); background: var(--surface-hover); }

@property --archive-progress { syntax: "<number>"; inherits: true; initial-value: 0; }

@media (width > 46rem) {
  .reading-workspace {
    --archive-progress: 0;
    --archive-full-gutter: 3rem;
    --archive-desk-gutter: clamp(16px, 2vw, 32px);
    --archive-full-date: 6rem;
    --archive-desk-date: 3rem;
    --archive-full-gap: 2rem;
    --archive-desk-gap: .625rem;
    --archive-full-inset: 1.75rem;
    --archive-desk-inset: 1rem;
    --archive-full-intro-top: 3.25rem;
    --archive-full-intro-bottom: 2.5rem;
    --archive-full-title: 3.5rem;
    --archive-desk-title: clamp(1.75rem, 2.9vw, 2.75rem);
    --archive-title-line: 1.05;
    --archive-desk-title-line: 1.12;
    --archive-desk-headline: 1.0625rem;
    --archive-desk-summary: .9375rem;
    --archive-story-line: 1.3;
    --archive-featured-line: 1.25;
    --archive-summary-line: 1.45;
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(15rem, 100fr) minmax(0, 0fr);
    position: fixed;
    top: calc(var(--header-height) + 1px);
    inset-inline: 0;
    bottom: 0;
    overflow: clip;
  }
  .reading-workspace .reader-slot { min-height: 0; overflow: clip; }
  .reading-workspace.has-workspace-motion {
    transition: grid-template-columns var(--desk-duration, 440ms) cubic-bezier(.22, .8, .25, 1),
                --archive-progress var(--desk-duration, 440ms) cubic-bezier(.22, .8, .25, 1);
  }
  .reading-workspace.is-desk { --archive-progress: 1; grid-template-columns: minmax(15rem, 30fr) minmax(0, 70fr); }
  .reading-workspace.is-desk.is-desk-closing { --archive-progress: 0; grid-template-columns: minmax(15rem, 100fr) minmax(0, 0fr); }
  .reading-workspace.is-desk-closing .reader.is-docked[open] { animation: none; }
  .reading-workspace .archive-pane {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    overflow-anchor: none;
    background-color: color-mix(in srgb, var(--surface-desk) calc(100% * var(--archive-progress)), var(--surface));
  }
  .reading-workspace .archive-pane::after { content: ""; display: block; height: var(--archive-scroll-room, 0px); }
  .reading-workspace .archive-pane .measure {
    width: calc(min(100% - 2 * var(--archive-full-gutter), 72rem) * (1 - var(--archive-progress)) + (100% - 2 * var(--archive-desk-gutter)) * var(--archive-progress));
    margin-inline: auto;
  }
  .reading-workspace .archive-pane .page-intro {
    padding-block: calc(var(--archive-full-intro-top) * (1 - var(--archive-progress)) + 2rem * var(--archive-progress))
                   calc(var(--archive-full-intro-bottom) * (1 - var(--archive-progress)) + 1.25rem * var(--archive-progress));
  }
  .reading-workspace .archive-pane .page-intro h1 {
    font-size: calc(var(--archive-full-title) * (1 - var(--archive-progress)) + var(--archive-desk-title) * var(--archive-progress));
    line-height: calc(var(--archive-title-line) * (1 - var(--archive-progress)) + var(--archive-desk-title-line) * var(--archive-progress));
  }
  .reading-workspace .archive-pane .briefing {
    --date-width: calc(var(--archive-full-date) * (1 - var(--archive-progress)) + var(--archive-desk-date) * var(--archive-progress));
    --column-gap: calc(var(--archive-full-gap) * (1 - var(--archive-progress)) + var(--archive-desk-gap) * var(--archive-progress));
    --story-inset: calc(var(--archive-full-inset) * (1 - var(--archive-progress)) + var(--archive-desk-inset) * var(--archive-progress));
  }
  .reading-workspace .archive-pane .date-group + .date-group { margin-top: calc(.75rem - .125rem * var(--archive-progress)); }
  .reading-workspace .archive-pane .date-gutter { padding-block: .5rem; border-right-color: color-mix(in srgb, var(--separator) calc(100% * (1 - var(--archive-progress))), transparent); }
  .reading-workspace .archive-pane .date-number { font-size: calc(2.125rem - .375rem * var(--archive-progress)); }
  .reading-workspace .archive-pane .date-meta { font-size: calc(.8125rem - .0625rem * var(--archive-progress)); }
  .reading-workspace .archive-pane .today-pill { font-size: calc(.75rem - .0625rem * var(--archive-progress)); padding-inline: calc(.375rem - .125rem * var(--archive-progress)); }
  .reading-workspace .archive-pane .story-link {
    position: relative;
    align-items: center;
    gap: calc(1.5rem * (1 - var(--archive-progress)));
    border-radius: calc(.875rem * (1 - var(--archive-progress)));
    padding-block: calc(1.75rem - .625rem * var(--archive-progress));
    padding-left: calc(var(--story-inset) + 1px * var(--archive-progress));
  }
  .reading-workspace .archive-pane .featured .story-link { padding-block: calc(2rem - .875rem * var(--archive-progress)); }
  .reading-workspace .archive-pane .story-link::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: var(--separator-desk);
    opacity: var(--archive-progress);
    transition: width var(--motion-fast) ease, background-color var(--motion-fast) ease;
  }
  @media (hover: hover) {
    .reading-workspace.is-desk .archive-pane .story:not(.is-selected) .story-link:hover::before {
      width: 2px;
      background: var(--accent);
      opacity: 1;
    }
  }
  .reading-workspace .archive-pane .story h2 {
    font-size: calc(var(--font-headline) * (1 - var(--archive-progress)) + var(--archive-desk-headline) * var(--archive-progress));
    line-height: var(--archive-story-line);
  }
  .reading-workspace .archive-pane .featured h2 {
    font-size: calc(var(--font-lead) * (1 - var(--archive-progress)) + var(--archive-desk-headline) * var(--archive-progress));
    line-height: calc(var(--archive-featured-line) * (1 - var(--archive-progress)) + var(--archive-story-line) * var(--archive-progress));
  }
  .reading-workspace .archive-pane .story-description {
    font-size: calc(var(--font-body) * (1 - var(--archive-progress)) + var(--archive-desk-summary) * var(--archive-progress));
    line-height: var(--archive-summary-line);
  }
  .reading-workspace .archive-pane .story-arrow {
    display: block;
    width: calc(24px * (1 - var(--archive-progress)));
    flex-basis: calc(24px * (1 - var(--archive-progress)));
    opacity: calc(1 - var(--archive-progress));
    overflow: hidden;
  }
  .reading-workspace .archive-pane .story.is-selected .story-link {
    background-color: color-mix(in srgb, var(--surface-selected) calc(100% * var(--archive-progress)), transparent);
  }
  .reading-workspace .archive-pane .story.is-selected .story-link::before { width: 3px; background: var(--text-primary); }
  .reading-workspace .archive-pane .story.is-selected h2 { color: var(--text-primary); }
  .reading-workspace .archive-pane .story-link:active { transform: none; }
  .reading-workspace .archive-pane .footer {
    gap: calc(1rem - .75rem * var(--archive-progress));
    font-size: calc(var(--font-meta) * (1 - var(--archive-progress)) + .75rem * var(--archive-progress));
  }
  html:lang(zh-CN) .reading-workspace {
    --archive-full-title: 2.5rem;
    --archive-desk-title: clamp(1.5rem, 2.4vw, 2rem);
    --archive-title-line: 1.2;
    --archive-desk-title-line: 1.4;
    --archive-desk-headline: 1rem;
    --archive-desk-summary: .875rem;
    --archive-story-line: 1.5;
    --archive-featured-line: 1.4;
    --archive-summary-line: 1.65;
  }
  .reading-workspace.is-desk .reader-slot { height: 100%; min-height: 0; overflow: clip; background: var(--surface-reader); }
  .reading-workspace.is-desk .reader.is-docked[open] {
    position: relative;
    inset: auto;
    width: min(70cqw, calc(100cqw - 15rem));
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    animation: none;
    z-index: auto;
  }
  .reading-workspace.is-desk .reader.is-docked .reader-toolbar { padding-inline: clamp(20px, 2.4vw, 40px); min-height: 4.5rem; }
  .reading-workspace.is-desk .reader.is-docked .reader-measure { width: min(calc(100% - clamp(3rem, 8vw, 9rem)), 44rem); }
  .reading-workspace.is-desk .reader.is-docked .reader-hero { background: var(--surface-reader); border: 0; padding-block: clamp(2rem, 5dvh, 4rem) 0; }
  .reading-workspace.is-desk .reader.is-docked .reader-hero .reader-measure { padding-bottom: 2rem; border-bottom: 1px solid var(--separator); }
  .reading-workspace.is-desk .reader.is-docked .category { display: none; }
  .reading-workspace.is-desk .reader.is-docked h1 { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
  .reading-workspace.is-desk .reader.is-docked .reader-content { padding-top: .5rem; }
  html:lang(zh-CN) .reading-workspace.is-desk .reader.is-docked h1 { font-size: clamp(1.875rem, 3vw, 2.25rem); }
}

@media (46rem < width < 64rem) {
  .reading-workspace { --archive-desk-gutter: 12px; --archive-desk-date: 2.75rem; --archive-desk-gap: .375rem; --archive-desk-inset: .75rem; --archive-desk-summary: .875rem; }
  .reading-workspace.is-desk .reader.is-docked .reader-measure { width: calc(100% - 3rem); }
  .reader-mode-button span { display: none; }
}
@media (46rem < width <= 58rem) {
  .reading-workspace { --archive-full-gutter: 1.5rem; --archive-full-date: 4.5rem; --archive-full-gap: 1.5rem; --archive-full-inset: 1.25rem; --archive-full-intro-top: 2.5rem; --archive-full-intro-bottom: 2rem; }
}

@media (max-width: 46rem) {
  .phone-page-title { display: inline; }
  .edition-month { display: block; }
  .story-chevron { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-workspace.has-workspace-motion { transition: none; }
  .reading-workspace.is-desk .reader.is-docked[open] { animation: none; }
  .reader-mode-button, .reader-mode-button:active { transform: none; }
  *, *::before, *::after, .reader-backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .story-link, .language-button, .theme-button, .menu-button, .close-button, .header-actions .a-dash { transform: none !important; }
  .reader-backdrop { backdrop-filter: none; }
  .reader-brand { transform: none; opacity: calc(1 - var(--reader-compact-visible, 0)); }
  .reader-compact-title { transform: none; opacity: var(--reader-compact-visible, 0); }
  .js-reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --text-secondary: #38383d; --text-tertiary: #515158; --separator: #959d99; --separator-date: #59635e; }
  :root[data-theme="dark"] { --text-secondary: #e6ebe7; --text-tertiary: #cbd5ce; --separator: #aab5af; --separator-date: #cbd5ce; --separator-editorial: #fff; --separator-desk: #aab5af; }
}
@media (forced-colors: active) {
  .today-pill { border: 1px solid CanvasText; }
  .date-group + .date-group::before { border-color: CanvasText; }
}