/* ============================================================
   PAPER DIGEST — stylesheet (2026 redesign: scannable digest)
   Font: Inter only. Compact scale. Reader-app feel, not broadsheet.
   ============================================================ */

:root {
  /* Fonts — Inter everywhere (--font-serif kept as an alias for compatibility) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Compact fluid type scale (Minor Third ~1.2), nothing oversized */
  --step--1: clamp(0.75rem,   0.73rem + 0.10vw, 0.8125rem);
  --step-0:  clamp(0.875rem,  0.85rem + 0.13vw, 0.9375rem);
  --step-1:  clamp(1rem,      0.97rem + 0.16vw, 1.0625rem);
  --step-2:  clamp(1.125rem,  1.08rem + 0.23vw, 1.25rem);
  --step-3:  clamp(1.25rem,   1.18rem + 0.35vw, 1.4375rem);
  --step-4:  clamp(1.4375rem, 1.33rem + 0.55vw, 1.6875rem);
  --step-5:  clamp(1.625rem,  1.48rem + 0.73vw, 1.9375rem);
  --measure: 64ch;

  --lh-tight: 1.12; --lh-snug: 1.25; --lh-normal: 1.4; --lh-body: 1.6;
  --tracking-caps: 0.06em; --tracking-head: -0.005em; --tracking-wide: 0.02em;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2.5rem; --space-7: 4rem; --space-8: 6rem;

  /* Layout */
  --container: 60rem; --radius: 8px; --rule-weight: 1px;
  --dur: 150ms; --ease: cubic-bezier(0.2,0,0,1);
  color-scheme: light dark;

  /* Color — light (warm paper & ink) */
  --bg: #FBFAF7; --ink: #1A1A18; --ink-muted: #6A675F; --rule: #E7E4DC; --surface: #F3F1EC;
  --accent-medicine: #9B2C2C; --accent-ai: #3F3D8A; --accent-physics: #1E4C7A; --accent-psychology: #7A580F;
  --grade-solid: #2A5C45; --grade-solid-bg: #EAF1EC;
  --grade-promising: #2E4F72; --grade-promising-bg: #E8EEF5;
  --grade-early: #6B5012; --grade-early-bg: #F4ECD9;
  --grade-thin: #7A3A2C; --grade-thin-bg: #F3E7E3;
  --link: #1E4C7A; --link-hover: #163A5E; --focus-ring: #3A5A78;
  --brand: #4F46E5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131311; --ink: #ECE9E2; --ink-muted: #9C988E; --rule: #2C2A26; --surface: #1D1C19;
    --accent-medicine: #E39A9A; --accent-ai: #A9A6E6; --accent-physics: #8FB6DC; --accent-psychology: #D9BE7C;
    --grade-solid: #8FC7AE; --grade-solid-bg: #1C2A23;
    --grade-promising: #93B6D6; --grade-promising-bg: #1A2530;
    --grade-early: #D6BE7E; --grade-early-bg: #292415;
    --grade-thin: #D9A08C; --grade-thin-bg: #2B1F1A;
    --link: #8FB6DC; --link-hover: #AECBE7; --focus-ring: #93B6D6;
    --brand: #8987F5;
  }
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { min-height: 100svh; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--lh-body);
  font-weight: var(--fw-regular); font-optical-sizing: auto; }
h1,h2,h3,h4 { font-family: var(--font-sans); text-wrap: balance; font-optical-sizing: auto; }
p,li { text-wrap: pretty; overflow-wrap: break-word; }
a { color: var(--link); text-underline-offset: 0.12em; transition: color var(--dur) var(--ease); }
input,button,textarea,select { font: inherit; color: inherit; }

/* ---- Layout container ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
main.container { padding-block: var(--space-4) var(--space-8); }

/* ---- Compact sticky header ---- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: var(--rule-weight) solid var(--rule);
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--space-3); min-height: 52px; padding-block: var(--space-2); }
.site-header__wordmark { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-sans);
  font-weight: var(--fw-bold); font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo-mark { flex: none; display: block; }
.site-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-1); flex-wrap: wrap; }
.site-nav a { font-family: var(--font-sans); font-size: 0.72rem; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-muted); text-decoration: none;
  padding: 0.4em 0.7em; border-radius: 999px; min-height: 32px; display: inline-flex; align-items: center;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); }
.reading-now { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.reading-now[hidden] { display: none; }
.reading-now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grade-solid);
  animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }

@media (max-width: 47.99rem) {
  .site-header__inner { grid-template-columns: 1fr auto; grid-template-areas: "wm meta" "nav nav"; }
  .site-header__wordmark { grid-area: wm; }
  .site-header__reading { grid-area: meta; justify-self: end; }
  .site-nav { grid-area: nav; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; }
}

/* ---- Digest header (date line) ---- */
.digest-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); padding-block: var(--space-4) var(--space-3); }
.digest-head__title { font-size: var(--step--1); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-muted); }
.digest-head__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); }

/* ---- Section filter pills ---- */
.digest-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-4);
  border-bottom: var(--rule-weight) solid var(--rule); margin-bottom: var(--space-2); }
.filter-btn { appearance: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: var(--fw-medium); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-muted); background: transparent; border: var(--rule-weight) solid var(--rule);
  border-radius: 999px; padding: 0.4em 0.85em; min-height: 32px; line-height: 1;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.filter-btn:hover:not(.is-active) { color: var(--ink); border-color: var(--ink-muted); }
.filter-btn.is-active { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ---- Section groups (subtle separation between sections) ---- */
.digest-group { margin-top: var(--space-6); }
.digest-group:first-of-type { margin-top: var(--space-2); }
.digest-group[hidden] { display: none; }
.digest-group__label { padding-bottom: var(--space-2); border-bottom: 2px solid var(--section-accent, var(--rule)); }
.digest-group__label .section-tag { font-size: var(--step-0); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.digest-group__label .section-tag::before { width: 0.6em; height: 0.6em; }

/* ---- Digest list (the scannable feed) ---- */
.digest-list { list-style: none; padding: 0; }
.digest-row { border-bottom: var(--rule-weight) solid var(--rule); --section-accent: var(--rule); }
.digest-row[hidden] { display: none; }
.digest-row__link { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
  text-decoration: none; color: inherit; position: relative; border-radius: var(--radius);
  transition: background var(--dur) var(--ease); }
.digest-row__link::before { content: ""; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4);
  width: 3px; border-radius: 999px; background: var(--section-accent); opacity: 0.7; transition: opacity var(--dur) var(--ease); }
.digest-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.digest-row__headline { font-size: var(--step-2); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head); color: var(--ink); transition: color var(--dur) var(--ease); }
.digest-row__gist { font-size: var(--step-0); color: var(--ink-muted); line-height: var(--lh-normal); max-width: var(--measure); }
@media (hover: hover) {
  .digest-row__link:hover { background: color-mix(in srgb, var(--section-accent) 7%, var(--bg)); }
  .digest-row__link:hover .digest-row__headline { color: var(--section-accent); }
  .digest-row__link:hover::before { opacity: 1; }
}

/* ---- Section tag ---- */
.section-tag { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono);
  font-size: var(--step--1); font-weight: var(--fw-medium); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--section-accent, var(--ink-muted)); }
.section-tag::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 2px; background: var(--section-accent, var(--ink-muted)); flex: none; }
[data-section="medicine"]   { --section-accent: var(--accent-medicine); }
[data-section="ai"]         { --section-accent: var(--accent-ai); }
[data-section="physics"]    { --section-accent: var(--accent-physics); }
[data-section="psychology"] { --section-accent: var(--accent-psychology); }

/* ---- Grade chip (crisp, small, colorblind-safe glyph) ---- */
.grade-chip { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: var(--fw-medium); letter-spacing: 0.02em; text-transform: uppercase;
  line-height: 1; padding: 0.28em 0.6em; border-radius: 5px; white-space: nowrap;
  color: var(--grade, var(--ink)); background: var(--grade-bg, var(--surface)); }
.grade-chip::before { display: inline-block; width: 0.85em; text-align: center; font-weight: var(--fw-bold); }
.grade-chip[data-grade="solid"]     { --grade: var(--grade-solid);     --grade-bg: var(--grade-solid-bg); }
.grade-chip[data-grade="promising"] { --grade: var(--grade-promising); --grade-bg: var(--grade-promising-bg); }
.grade-chip[data-grade="early"]     { --grade: var(--grade-early);     --grade-bg: var(--grade-early-bg); }
.grade-chip[data-grade="thin"]      { --grade: var(--grade-thin);      --grade-bg: var(--grade-thin-bg); }
.grade-chip[data-grade="solid"]::before     { content: "\25C6"; }
.grade-chip[data-grade="promising"]::before { content: "\25D1"; }
.grade-chip[data-grade="early"]::before      { content: "\25CB"; }
.grade-chip[data-grade="thin"]::before       { content: "\00D7"; }

/* ---- Abstract-only tag (quiet inline qualifier) ---- */
.tag--caution, .tag--abstract { display: inline-flex; align-items: center; gap: 0.25em; font-family: var(--font-sans);
  font-size: 0.6875rem; font-weight: var(--fw-regular); color: var(--ink-muted); white-space: nowrap; opacity: 0.85; }
.tag--caution::before, .tag--abstract::before { content: "\24D8"; opacity: 0.7; }

/* ---- On the fence (compact aside) ---- */
.fence { margin-top: var(--space-7); padding: var(--space-4) var(--space-5); background: var(--surface);
  border-radius: var(--radius); display: grid; gap: var(--space-3); }
.fence__title { font-size: var(--step--1); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-muted); }
.fence__intro { font-size: var(--step--1); color: var(--ink-muted); max-width: var(--measure); }
.fence__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.fence__item { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--rule-weight) solid var(--rule); }
.fence__item:first-child { border-top: 0; padding-top: 0; }
.fence__doubt { font-size: var(--step--1); color: var(--ink-muted); line-height: var(--lh-normal); }
.fence__item a { font-size: var(--step--1); color: var(--link); text-decoration: none; }
.quiet-note { font-size: var(--step-0); font-style: italic; color: var(--ink-muted); padding-block: var(--space-5); }

/* ---- Story page (single calm column) ---- */
.story { max-width: var(--measure); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5); --section-accent: var(--rule); }
.story__crumb { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--step--1); color: var(--ink-muted); }
.story__crumb a { color: var(--ink-muted); text-decoration: none; }
.story__crumb a:hover { color: var(--link); }
.story__crumb--bottom { border-top: var(--rule-weight) solid var(--rule); padding-top: var(--space-4); }
.story__header { display: flex; flex-direction: column; gap: var(--space-3); }
.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); }
.story__meta .dot { opacity: 0.4; }
.story__headline { font-size: var(--step-4); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  letter-spacing: -0.01em; color: var(--ink); }
.story__gist { font-size: var(--step-1); line-height: var(--lh-normal); color: var(--ink);
  padding-left: var(--space-4); border-left: 3px solid var(--section-accent); }
.story__why { display: flex; flex-direction: column; gap: var(--space-2); }
.story__subhead { font-size: var(--step--1); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-muted); }
.story__why p { font-size: var(--step-0); line-height: var(--lh-body); color: var(--ink); }
.story__credit { font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted);
  border-top: var(--rule-weight) solid var(--rule); padding-top: var(--space-3); }
.story__credit strong { color: var(--ink); font-weight: var(--fw-semibold); }
.story__attribution { font-size: var(--step--1); color: var(--ink-muted); }
.story__attribution a { color: var(--ink-muted); }
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans);
  font-size: var(--step-0); font-weight: var(--fw-semibold); line-height: 1; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius); background: var(--ink); color: var(--bg); text-decoration: none; }
@media (hover: hover) { .btn:hover { background: var(--link); } }
.btn__hint { font-weight: var(--fw-regular); font-size: 0.82em; opacity: 0.7; }

/* ---- Credibility strip (compact, left-rule) ---- */
.cred-strip { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface);
  border-radius: var(--radius); border-left: 3px solid var(--grade, var(--rule)); }
.cred-strip[data-grade="solid"]     { --grade: var(--grade-solid); }
.cred-strip[data-grade="promising"] { --grade: var(--grade-promising); }
.cred-strip[data-grade="early"]     { --grade: var(--grade-early); }
.cred-strip[data-grade="thin"]      { --grade: var(--grade-thin); }
.cred-strip__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.cred-strip__reason { font-size: var(--step--1); line-height: var(--lh-body); color: var(--ink-muted); flex: 1 1 20ch; min-width: 0; }
.cred-strip__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  font-size: var(--step--1); color: var(--ink-muted); border-top: var(--rule-weight) solid var(--rule); padding-top: var(--space-2); }
.cred-strip__facts li + li::before { content: "\00B7"; padding-inline: var(--space-2); opacity: 0.5; }

/* ---- Section page (reuse digest rows) ---- */
.section-page__title { font-size: var(--step-4); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--ink); }
.section-intro { font-size: var(--step-0); color: var(--ink-muted); max-width: var(--measure); margin-block: var(--space-2) var(--space-5); }

/* ---- Archive ---- */
.archive { max-width: var(--measure); margin-inline: auto; }
.archive__title { font-size: var(--step-4); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--space-1); }
.archive__intro { font-size: var(--step--1); color: var(--ink-muted); }
.archive__list { list-style: none; padding: 0; }
.edition-row { border-bottom: var(--rule-weight) solid var(--rule); }
.edition-row__link { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-4);
  padding-block: var(--space-4); text-decoration: none; color: inherit; }
.edition-row__date { font-size: var(--step-1); font-weight: var(--fw-medium); color: var(--ink); }
.edition-row__no { font-size: var(--step--1); color: var(--ink-muted); }
.edition-row__count { font-size: var(--step--1); color: var(--ink-muted); text-align: right; }

/* ---- Static pages (About, How we grade) ---- */
.page { max-width: var(--measure); margin-inline: auto; }
.page__title { font-size: var(--step-4); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--ink); margin-bottom: var(--space-5); }
.page h2 { font-size: var(--step-2); font-weight: var(--fw-semibold); color: var(--ink); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.page p, .page li { font-size: var(--step-0); line-height: var(--lh-body); color: var(--ink); margin-bottom: var(--space-4); }
.page ul { padding-left: var(--space-5); }
.page a { color: var(--link); }

/* ---- Footer ---- */
.site-footer { border-top: var(--rule-weight) solid var(--rule); padding-block: var(--space-6); margin-top: var(--space-8); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--step--1); color: var(--ink-muted); }
.site-footer__note { max-width: var(--measure); }
.site-footer__disclaimer { max-width: var(--measure); }
.site-footer__disclaimer a, .site-footer__nav a { color: var(--link); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__nav a { text-decoration: none; }

/* ---- A11y ---- */
.skip-link { position: absolute; left: var(--space-2); top: -100%; z-index: 100; padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: var(--space-2); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius); }
:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Print ---- */
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer__nav, .story__crumb, .digest-filter { display: none; }
  .story a[href^="http"]::after, .btn[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #333; }
  .cred-strip { border: 1px solid #999 !important; background: transparent !important; }
}