/* ===== VRMA Projects — Journal styles ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #0a0a0d; -webkit-text-size-adjust: 100%; }
:root {
  --bg: #0a0a0d;
  --fg: #ededed;
  --muted: rgba(237,237,237,0.66);
  --label: rgba(237,237,237,0.56);
  --faint: rgba(237,237,237,0.42);
  --hairline: rgba(237,237,237,0.10);
  --accent: #6f8bff;
  --label-track: 0.01em;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --spring: cubic-bezier(0.34,1.45,0.64,1);
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
  font-feature-settings: 'ss01','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}
/* Static, very soft ambient wash — never animated, keeps reading calm */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 0%, rgba(56,104,255,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(99,102,241,0.08), transparent 60%);
}
.wrap { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ---- one nav system, same as the homepage ---- */
.glassnav {
  position: fixed; top: 14px; left: 50%; z-index: 70;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  padding: 7px 8px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(255,255,255,0.035),
    0 18px 50px rgba(4,8,26,0.45);
}
.glassnav::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.glassnav .nbrand { display: flex; align-items: center; text-decoration: none; padding: 8px 12px 8px 14px; }
.glassnav .nbrand img { height: 13px; width: auto; display: block; opacity: 0.96; }
.glassnav .nlink {
  font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 8px 13px; border-radius: 999px;
  transition: color 300ms ease, background 300ms ease;
}
.glassnav .nlink:hover { color: var(--fg); background: rgba(255,255,255,0.08); }
.glassnav .nlink.cur { color: var(--fg); background: rgba(255,255,255,0.10); }
.glassnav .ncta {
  margin-left: 6px; font-size: 13px; font-weight: 600; color: #0a0a0d;
  text-decoration: none; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff, #d9e0f2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 18px rgba(160,180,255,0.25);
  transition: transform 420ms var(--spring), box-shadow 420ms var(--spring);
}
.glassnav .ncta:hover { transform: translateY(-1px); }
.glassnav .ncta:active { transform: scale(0.97); }
/* liquid nav thumb */
.nthumb {
  position: absolute; top: 7px; bottom: 7px; left: 0; width: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  opacity: 0; pointer-events: none;
  transition: left 520ms var(--spring), width 520ms var(--spring), opacity 240ms ease;
}
.glassnav.has-thumb .nlink:hover, .glassnav.has-thumb .nlink.cur { background: transparent; }
html[data-atheme="sepia"] .nthumb { background: rgba(38,31,23,0.10); box-shadow: none; }
html[data-atheme="sepia"] .glassnav .nbrand img { filter: brightness(0); opacity: 0.82; }
html[data-atheme="sepia"] .glassnav.has-thumb .nlink:hover,
html[data-atheme="sepia"] .glassnav.has-thumb .nlink.cur { background: transparent; }
@media (max-width: 700px) {
  .glassnav {
    top: auto; bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(560px, calc(100vw - 24px));
    justify-content: space-between; padding: 6px 10px; min-height: 52px;
  }
  .glassnav .nbrand, .glassnav .nlink, .glassnav .ncta {
    align-self: stretch; display: inline-flex; align-items: center;
  }
  .glassnav .nbrand, .glassnav .nlink { padding-top: 14px; padding-bottom: 14px; }
}
/* room for the bars */
body { padding-top: 64px; }
@media (max-width: 700px) { body { padding-top: 10px; padding-bottom: 92px; } }

/* ---- journal index ---- */
.j-head { padding: 72px 0 8px; }
.j-head h1 { font-size: clamp(34px,6vw,52px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.j-head p { margin-top: 16px; color: var(--muted); font-size: 17px; max-width: 540px; }

.post-list { padding: 40px 0 96px; }
.post-card {
  display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start;
  text-decoration: none; color: inherit;
  padding: 32px 0; border-top: 1px solid var(--hairline);
  transition: opacity 300ms var(--ease);
}
.post-list .post-card:last-child { border-bottom: 1px solid var(--hairline); }
.post-card:hover { opacity: 0.92; }
.post-card .thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  background: #14141a; border: 1px solid var(--hairline); display: block;
}
.post-card .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms var(--ease); will-change: transform;
}
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card .body-col { min-width: 0; }
@media (max-width: 640px) {
  .post-card { grid-template-columns: 1fr; gap: 14px; }
  .post-card .thumb { aspect-ratio: 16 / 9; }
}
.post-card .cat {
  font-size: 13px; font-weight: 590; letter-spacing: 0.01em; color: var(--accent);
}
.post-card h2 {
  margin-top: 12px; font-size: clamp(22px,3.4vw,28px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.18;
}
.post-card .excerpt { margin-top: 12px; color: var(--muted); font-size: 16px; }
.post-card .meta { margin-top: 16px; font-size: 13px; color: var(--label); }
.post-card .more {
  margin-top: 14px; font-size: 14px; font-weight: 560; color: var(--fg);
  display: inline-flex; align-items: center; gap: 8px;
}
.post-card .more .arrow { transition: transform 300ms var(--ease); display: inline-block; }
.post-card:hover .more .arrow { transform: translateX(4px); }

/* ---- article hero ---- */
.hero-wrap { max-width: 880px; margin: 24px auto 0; padding: 0 24px; position: relative; z-index: 1; }
.hero {
  position: relative; width: 100%; height: clamp(260px, 44vw, 440px);
  overflow: hidden; border-radius: 18px; border: 1px solid var(--hairline);
}
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,13,0.06) 0%, rgba(10,10,13,0) 45%, rgba(10,10,13,0.22) 100%);
}

/* ---- Apple iOS frosted-glass summary ---- */
.summary {
  position: relative; z-index: 2;
  width: min(720px, calc(100% - 32px)); margin: 22px auto 0; padding: 24px 26px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.022)), rgba(15,15,21,0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 24px 60px rgba(0,0,0,0.45);
}
.summary .eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--accent); display: flex; align-items: center; gap: 9px;
}
.summary .eyebrow::before {
  content: ''; width: 15px; height: 15px; border-radius: 5px;
  background: linear-gradient(135deg, #6f8bff, #b0c0e6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.summary ul { list-style: none; margin: 15px 0 0; display: flex; flex-direction: column; gap: 11px; }
.summary li {
  font-size: 15px; line-height: 1.5; color: rgba(237,237,237,0.93);
  padding-left: 22px; position: relative;
}
.summary li::before {
  content: ''; position: absolute; left: 3px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
@media (prefers-reduced-motion: reduce) { .post-card:hover .thumb img { transform: none; } }

/* ---- article ---- */
article { padding: 40px 0 40px; }
article .cat { font-size: 13px; font-weight: 590; letter-spacing: 0.01em; color: var(--accent); }
article h1 {
  margin-top: 16px; font-size: clamp(30px,5.4vw,46px); font-weight: 640; letter-spacing: -0.022em; line-height: 1.08;
  text-wrap: balance;
}
article .byline {
  margin-top: 26px; margin-bottom: 38px;
  font-size: 14.5px; color: var(--label); letter-spacing: 0.01em;
}
article .byline .aname { color: var(--fg); font-weight: 600; }
/* the lede card: liquid glass, never naked text */
.answer-box {
  position: relative;
  margin: 0 0 14px; padding: 20px 22px 21px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 14px 40px rgba(4,8,26,0.3);
}
.answer-label {
  display: block; margin-bottom: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--accent);
}
.answer-box p { font-size: calc(var(--abody, 18px) - 1px); line-height: var(--aline, 1.62); color: rgba(237,237,237,0.92); margin: 0; }
html[data-atheme="sepia"] .answer-box p { color: rgba(38,31,23,0.9); }
/* controlled reading measure (~66ch) and a calmer, higher-contrast rhythm */
article .body { margin: 44px auto 0; max-width: 64ch; }
article .body p {
  font-size: var(--abody, 18px); line-height: var(--aline, 1.72);
  color: rgba(237,237,237,0.92); margin-bottom: 1.45em;
}
article .body h2 {
  margin-top: 2.6em; margin-bottom: 0.55em;
  font-size: var(--ah2, 23px); font-weight: 620; letter-spacing: -0.014em; color: var(--fg);
  scroll-margin-top: 84px;
}
article .body p:last-child { color: var(--muted); }
::selection { background: rgba(111,139,255,0.32); }

.article-foot {
  border-top: 1px solid var(--hairline); margin-top: 24px; padding: 40px 0 96px;
  display: flex; flex-direction: column; gap: 24px;
}
.article-foot .cta { font-size: 15px; color: var(--muted); }
.article-foot a.email { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 2px; }
.article-foot a.email:hover { border-color: var(--fg); }
.article-foot a.back { font-size: 14px; color: var(--label); text-decoration: none; }
.article-foot a.back:hover { color: var(--fg); }

/* ---- shared footer ---- */
.site-foot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--hairline);
  padding: 28px 0; margin-top: 0;
  font-size: 13px; color: var(--label);
}
.site-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-foot a { color: var(--label); text-decoration: none; }
.site-foot a:hover { color: var(--fg); }

@media (max-width: 520px) {
  html:not([data-asize]) { --abody: 17px; }
  .site-foot .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============ Pro Max layer: local font, transitions, progress, next-up ============ */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


.rprog {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
}
.rprog span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #6f8bff, #b9c6ff);
  will-change: transform;
}

.nextup {
  display: grid; gap: 6px;
  margin: 44px auto 0; max-width: 720px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.nextup:hover {
  border-color: rgba(111,139,255,.45);
  background: rgba(111,139,255,.06);
  transform: translateY(-2px);
}
.nu-k { font-size: 13px; font-weight: 560; color: rgba(255,255,255,.45); }
.nu-t { font-size: 19px; font-weight: 600; color: #f2f2f4; line-height: 1.35; }
.nu-a { font-size: 13px; color: #8fa3ff; }
html[data-atheme="sepia"] .nu-a { color: var(--accent); }

/* ============ Related reads (the fused-text bug, fixed properly) ============ */
.related { margin: 48px auto 0; max-width: 720px; }
.rel-head { font-size: 20px; font-weight: 620; letter-spacing: -0.01em; }
.rel-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.rel-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 20px; border-radius: 18px; text-decoration: none;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 480ms var(--spring), border-color 300ms ease, background 300ms ease;
}
.rel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(140,160,255,0.35);
  background: rgba(255,255,255,0.055);
}
.rel-cat { font-size: 12px; font-weight: 590; color: var(--accent); }
.rel-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--fg); }
@media (max-width: 700px) { .rel-grid { grid-template-columns: 1fr; } }

/* ============ floating reader controls ============ */
.fabs {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 65; display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 700px) { .fabs { bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* while reading (scrolling down) the controls glide out of the way so text is
   never obscured; they return the instant you scroll up or pause */
.fabs.dim { opacity: 0; transform: translateX(16px); pointer-events: none; }
.fabs.dim:hover, .fabs.dim:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.fabs { right: max(14px, env(safe-area-inset-right)); }
.fab {
  width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--fg); font: 600 15px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)), rgba(14,14,19,0.82);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 30px rgba(4,8,26,0.45);
  transition: transform 420ms var(--spring), border-color 300ms ease, opacity 360ms ease;
}
.fab:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
.fab:active { transform: scale(0.94); }

/* ============ bottom sheets (iOS share-sheet pattern) ============ */
.sheetback {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4,5,10,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 360ms ease;
}
.sheetback.on { opacity: 1; }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 81;
  width: min(560px, 100vw); max-height: 82dvh; overflow: auto;
  transform: translateX(-50%) translateY(105%);
  border-radius: 26px 26px 0 0;
  padding: 10px 22px calc(26px + env(safe-area-inset-bottom));
  background: rgba(22,22,30,0.9);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 -24px 70px rgba(0,0,0,0.5);
  transition: transform 520ms var(--spring);
}
.sheet.on { transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheetback { transition: none; }
}
.grab {
  width: 38px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.22); margin: 6px auto 16px;
}
.sh-k { font-size: 13px; font-weight: 590; color: var(--label); margin: 16px 2px 9px; }
.seg {
  display: flex; gap: 6px; padding: 5px; border-radius: 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.seg button {
  flex: 1; border: 0; cursor: pointer; border-radius: 10px;
  padding: 14px 0; color: var(--muted); background: transparent;
  font: 590 15px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  transition: background 280ms ease, color 280ms ease, transform 420ms var(--spring);
}
.seg button:active { transform: scale(0.96); }
.seg button.cur { background: rgba(255,255,255,0.14); color: var(--fg); }
/* language picker: 5 named languages wrap onto two tidy rows */
.seg.seg-lang { flex-wrap: wrap; }
.seg.seg-lang button { flex: 1 1 28%; min-width: 0; padding: 12px 8px; font-size: 14px; white-space: nowrap; }
html[data-atheme="sepia"] .seg.seg-lang button.cur { background: rgba(38,31,23,0.12); }

/* live link preview card inside the share sheet */
.linkcard {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center;
  padding: 12px; border-radius: 18px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.linkcard img {
  width: 92px; height: 70px; object-fit: cover; border-radius: 12px; display: block;
}
.lc-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lc-t {
  font-size: 15px; font-weight: 620; line-height: 1.35; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-m { font-size: 12.5px; color: var(--label); }

.acts { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.act {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 15px; cursor: pointer; text-decoration: none;
  color: var(--fg); font: 590 14.5px/1.2 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  transition: background 260ms ease, transform 420ms var(--spring);
}
.act:hover { background: rgba(255,255,255,0.1); }
.act:active { transform: scale(0.97); }
.act .ic { display: grid; place-items: center; color: var(--accent); }
.act.ok { background: rgba(98,200,140,0.16); border-color: rgba(98,200,140,0.4); }
.act.ok .ic { color: #7ce0a8; }
.act.busy { opacity: 0.6; pointer-events: none; }
.sh-note { margin-top: 12px; font-size: 12.5px; color: var(--label); min-height: 1em; }

/* ============ table of contents ============ */
.toc {
  margin: 26px 0 0; padding: 16px 20px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
}
.toc-k { font-size: 13px; font-weight: 600; color: var(--label); }
.toc ol { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.toc a {
  display: block; padding: 9px 10px; margin-left: -10px; border-radius: 9px;
  font-size: 14.5px; color: var(--muted); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}
.toc a:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.toc a.cur { color: var(--fg); border-left-color: var(--accent); background: rgba(111,139,255,0.08); }

/* ============ selection quote popover ============ */
.selpop {
  position: fixed; z-index: 75; display: flex; gap: 2px;
  padding: 4px; border-radius: 12px;
  background: rgba(28,28,36,0.92);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 30px rgba(0,0,0,0.5);
}
.selpop button {
  border: 0; cursor: pointer; background: transparent; color: var(--fg);
  font: 590 13.5px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  padding: 13px 15px; border-radius: 9px;
  transition: background 200ms ease;
}
.selpop button:hover { background: rgba(255,255,255,0.1); }


/* ============ reader text sizes ============ */
/* reader font: New York-style serif for long reads */
html[data-afont="serif"] article .body p,
html[data-afont="serif"] article .body li,
html[data-afont="serif"] article .body blockquote,
html[data-afont="serif"] .answer-box p,
html[data-afont="serif"] .summary li {
  font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  letter-spacing: 0;
}
/* reader line spacing */
html[data-aline="tight"] { --aline: 1.52; }
html[data-aline="open"]  { --aline: 1.95; }
/* gray reading theme: a calmer dark, everything else inherits */
html[data-atheme="gray"] { background: #16161b; --bg: #16161b; }
html[data-asize="s"]  { --abody: 16.5px; --ah2: 21px; }
html[data-asize="m"]  { --abody: 18px;   --ah2: 23px; }
html[data-asize="l"]  { --abody: 19.5px; --ah2: 24.5px; }
html[data-asize="xl"] { --abody: 21px;   --ah2: 26px; }

/* ============ sepia reading theme ============ */
html[data-atheme="sepia"] {
  --bg: #f2ead9;
  --fg: #261f17;
  --muted: rgba(38,31,23,0.66);
  --label: rgba(38,31,23,0.5);
  --faint: rgba(38,31,23,0.3);
  --hairline: rgba(38,31,23,0.12);
  --accent: #4a5fd0;
}
html[data-atheme="sepia"], html[data-atheme="sepia"] body { background: var(--bg); color: var(--fg); }
html[data-atheme="sepia"] body::before {
  background:
    radial-gradient(ellipse 70% 55% at 18% 0%, rgba(74,95,208,0.07), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(190,120,60,0.08), transparent 60%);
}
html[data-atheme="sepia"] article .body p { color: rgba(38,31,23,0.9); }
html[data-atheme="sepia"] .summary {
  background: rgba(255,252,244,0.72);
  border-color: rgba(38,31,23,0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 50px rgba(96,72,40,0.18);
}
html[data-atheme="sepia"] .summary li { color: rgba(38,31,23,0.9); }
html[data-atheme="sepia"] .glassnav,
html[data-atheme="sepia"] .sheet,
html[data-atheme="sepia"] .fab,
html[data-atheme="sepia"] .selpop {
  background: rgba(252,248,238,0.8); color: var(--fg);
  border-color: rgba(38,31,23,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 14px 40px rgba(96,72,40,0.2);
}
html[data-atheme="sepia"] .glassnav .nlink { color: var(--muted); }
html[data-atheme="sepia"] .glassnav .nlink:hover,
html[data-atheme="sepia"] .glassnav .nlink.cur { color: var(--fg); background: rgba(38,31,23,0.08); }
html[data-atheme="sepia"] .glassnav .ncta { background: #261f17; color: #f6efe2; box-shadow: none; }
html[data-atheme="sepia"] .rel-card,
html[data-atheme="sepia"] .nextup,
html[data-atheme="sepia"] .toc,
html[data-atheme="sepia"] .linkcard,
html[data-atheme="sepia"] .act,
html[data-atheme="sepia"] .seg {
  background: rgba(38,31,23,0.05); border-color: rgba(38,31,23,0.12); box-shadow: none;
}
html[data-atheme="sepia"] .seg button.cur { background: rgba(38,31,23,0.12); color: var(--fg); }
html[data-atheme="sepia"] .seg button, html[data-atheme="sepia"] .act { color: var(--fg); }
html[data-atheme="sepia"] .nu-t, html[data-atheme="sepia"] .rel-title, html[data-atheme="sepia"] .lc-t { color: var(--fg); }
html[data-atheme="sepia"] .nu-k { color: var(--label); }
html[data-atheme="sepia"] .rprog span { background: linear-gradient(90deg, #4a5fd0, #8a7adf); }
html[data-atheme="sepia"] .sheetback { background: rgba(60,48,30,0.34); }
html[data-atheme="sepia"] .grab { background: rgba(38,31,23,0.25); }
html[data-atheme="sepia"] .answer-box { background: rgba(38,31,23,0.05); border-color: rgba(38,31,23,0.12); }
html[data-atheme="sepia"] ::selection { background: rgba(74,95,208,0.25); }

/* nextup radius joins the system */
.nextup { border-radius: 18px; transition: border-color .3s ease, background .3s ease, transform 480ms var(--spring); }

/* sepia: the gliding thumb replaces the static pills (must out-rank theme rules above) */
html[data-atheme="sepia"] .glassnav.has-thumb .nlink:hover,
html[data-atheme="sepia"] .glassnav.has-thumb .nlink.cur { background: transparent; }

/* ============ sections: filter pills on the index ============ */
.pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 26px 0 2px; padding: 5px;
  border-radius: 16px; width: fit-content;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
}
.pill {
  border: 0; cursor: pointer; background: transparent;
  color: var(--muted); border-radius: 11px;
  font: 590 13.5px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  padding: 10px 14px; white-space: nowrap;
  transition: background 260ms ease, color 260ms ease, transform 420ms var(--spring);
}
.pill:active { transform: scale(0.96); }
.pill.cur { background: rgba(255,255,255,0.13); color: var(--fg); }
.sechead { margin: 14px 2px 0; font-size: 14px; color: var(--label); }
.post-card.sechide { display: none; }
html[data-atheme="sepia"] .pills { background: rgba(38,31,23,0.05); border-color: rgba(38,31,23,0.12); }
html[data-atheme="sepia"] .pill { color: var(--muted); }
html[data-atheme="sepia"] .pill.cur { background: rgba(38,31,23,0.12); color: var(--fg); }

/* ============ news: image credit + sources ============ */
.imgcredit {
  max-width: 880px; margin: 10px auto 0; padding: 0 24px;
  font-size: 12.5px; color: var(--label); text-align: right;
}
.imgcredit a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--faint); }
/* Pages with a press credit: keep the credit readable, no card pull-up over it */
.imgcredit + .summary { margin-top: 18px; }
.imgcredit a:hover { color: var(--fg); }
.srcs { font-size: 13.5px; color: var(--label); }
.srcs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--faint); }
.srcs a:hover { color: var(--fg); }
.seclink { color: inherit; text-decoration: none; }
.seclink:hover { text-decoration: underline; }

/* ============ article body: lists, quotes, FAQ (never naked markup) ============ */
article .body ul, article .body ol {
  margin: 0 0 1.45em; padding-left: 1.4em;
  font-size: var(--abody, 18px); line-height: var(--aline, 1.7); color: rgba(237,237,237,0.92);
}
article .body li { margin-bottom: 0.5em; }
article .body li::marker { color: var(--accent); }
article .body blockquote {
  margin: 2em 0; padding: 18px 24px;
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: rgba(255,255,255,0.035);
  font-size: calc(var(--abody, 18px) + 1.5px);
  line-height: 1.6; font-weight: 560; color: #f2f2f4;
}
.faq-item {
  margin: 0 0 14px; padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
}
.faq-item h3 { font-size: calc(var(--abody, 18px) - 1.5px); font-weight: 620; margin-bottom: 8px; color: var(--fg); }
.faq-item p { font-size: calc(var(--abody, 18px) - 2.5px); line-height: var(--aline, 1.65); color: var(--muted); margin: 0; }

/* sepia coverage for the above + the hover states the audit flagged */
html[data-atheme="sepia"] article .body ul, html[data-atheme="sepia"] article .body ol { color: rgba(38,31,23,0.9); }
html[data-atheme="sepia"] article .body blockquote { background: rgba(38,31,23,0.05); color: #241f1a; }
html[data-atheme="sepia"] .faq-item { background: rgba(38,31,23,0.05); border-color: rgba(38,31,23,0.12); }
html[data-atheme="sepia"] .faq-item h3 { color: var(--fg); }
html[data-atheme="sepia"] .act:hover { background: rgba(38,31,23,0.08); }
html[data-atheme="sepia"] .selpop button:hover { background: rgba(38,31,23,0.08); }
html[data-atheme="sepia"] .toc a:hover { background: rgba(38,31,23,0.06); color: var(--fg); }
html[data-atheme="sepia"] .rel-card:hover { background: rgba(38,31,23,0.07); }
html[data-atheme="sepia"] .fab:hover { border-color: rgba(38,31,23,0.3); }

/* pill counts: present, never loud */
.pill .ct {
  margin-left: 7px; font-size: 11.5px; font-weight: 500;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.pill.cur .ct { color: var(--label); }

/* Aa sheet: the serif option previews itself */
#seg-font button[data-v="serif"] { font-family: ui-serif, 'New York', Georgia, serif; }

/* ---- time left: Kindle-quiet, appears only while you move ---- */
.timeleft {
  position: fixed; left: 18px; bottom: 18px; z-index: 60;
  padding: 7px 13px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.022)), rgba(12,12,16,0.72);
  border: 1px solid var(--hairline);
  font-size: 12px; font-weight: 560; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 360ms ease, transform 360ms var(--ease);
}
.timeleft.on { opacity: 1; transform: translateY(0); }
@media (max-width: 700px) { .timeleft { bottom: calc(96px + env(safe-area-inset-bottom)); } }
html[data-atheme="sepia"] .timeleft { background: rgba(243,236,223,0.9); color: rgba(38,31,23,0.72); border-color: rgba(38,31,23,0.14); }

/* ---- resume chip: continue where you left off ---- */
.resume {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 70;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 7px 6px 16px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)), rgba(14,14,19,0.86);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms ease, transform 420ms var(--ease);
}
.resume.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.resume .r-go {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--fg); padding: 12px 8px;
}
.resume .r-x {
  background: none; border: 0; cursor: pointer; color: var(--label);
  font-size: 15px; padding: 14px 16px; margin: -8px -6px -8px 0; line-height: 1;
}
.resume .r-x:hover { color: var(--fg); }
@media (max-width: 700px) { .resume { bottom: calc(104px + env(safe-area-inset-bottom)); } }
/* keep the resume chip clear of the FAB rail on the narrowest phones */
@media (max-width: 380px) { .resume { max-width: calc(100vw - 96px); } .resume .r-go { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
html[data-atheme="sepia"] .resume { background: rgba(243,236,223,0.95); border-color: rgba(38,31,23,0.16); box-shadow: 0 18px 50px rgba(60,45,20,0.22); }
html[data-atheme="sepia"] .resume .r-go { color: #1d1812; }

/* ---- bookmark fab: filled when saved ---- */
.fab.marked { color: #ffd479; }
html[data-atheme="sepia"] .fab.marked { color: #8a5a00; }

/* ---- Paper: a hyper-real warm sheet. Five layered scales (micro grain,
   raking-lit long fibers, macro pulp tint, vignette, top sheen) baked into
   static data-URIs on one fixed GPU layer, so the costly SVG runs once and
   never repaints on scroll. ---- */
html[data-apaper], html[data-apaper] body { background: #eeede7; }
html[data-apaper] body::before {
  transform: translateZ(0);
  background:
    /* 1 - fine tooth / grain (close-up speckle), neutral gray ink */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.20 0 0 0 0 0.19 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* 2 - long pulp fibers, lit at a low raking angle so they read as raised */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.012' numOctaves='3' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='1.4' diffuseConstant='1' lighting-color='%23ffffff' result='l'%3E%3CfeDistantLight azimuth='235' elevation='18'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.26 0.26 0.26 0 -0.26'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E"),
    /* 3 - macro pulp mottle (big soft uneven patches; the anti-flat layer) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.24 0 0 0 0 0.22 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23p)'/%3E%3C/svg%3E"),
    /* 4 - soft neutral vignette + 5 - top sheen (room light on the sheet) */
    radial-gradient(ellipse 120% 100% at 50% 36%, transparent 58%, rgba(40,40,38,0.055) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 340px),
    /* 6 - base off-white */
    #eeede7;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, 600px 600px, 800px 800px, cover, 100% 340px, cover;
  background-blend-mode: multiply, soft-light, multiply, normal, normal, normal;
  opacity: 1;
}
/* the reading column reads as a raised sheet sitting on the desk */
html[data-apaper] article .body {
  background: #faf9f4;
  border-radius: 3px;
  padding: 30px 26px 34px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 1px 2px rgba(40,38,30,0.10),
    0 22px 55px -16px rgba(40,38,30,0.20);
}
html[data-apaper] .summary,
html[data-apaper] .answer-box {
  background: rgba(255,255,255,0.6);
  border-color: rgba(38,34,26,0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 12px 34px rgba(50,46,36,0.10);
}
@media (prefers-contrast: more) {
  html[data-apaper] body::before { background: #f2f1ea; opacity: 1; }
}
/* No drop cap: every reading mode shares the exact same body formatting and
   rhythm, so a theme change never moves the type. (A floated initial letter on
   a short opening line collided with the first heading.) */

/* ============ reader v2: PWA safe-area, listen, highlight, sheet drag ============ */

/* Installed PWA: keep the progress bar and hero out from under the notch */
@media (display-mode: standalone) {
  body { padding-top: calc(10px + env(safe-area-inset-top)); }
  .rprog { top: env(safe-area-inset-top); }
}
@media (display-mode: standalone) and (min-width: 701px) {
  .glassnav { top: calc(18px + env(safe-area-inset-top)); }
}

/* Landscape phones: respect the side notch + home indicator */
.timeleft { left: max(18px, env(safe-area-inset-left)); }
@media (min-width: 701px) {
  .timeleft { bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* Listen mode: the paragraph being read gets a flat, still tint (no karaoke) */
.body p.speaking, .answer-box p.speaking {
  background: rgba(111,139,255,0.10);
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(111,139,255,0.10);
}
html[data-atheme="sepia"] .body p.speaking, html[data-apaper] .body p.speaking {
  background: rgba(120,90,40,0.12); box-shadow: 0 0 0 6px rgba(120,90,40,0.12);
}
.fab.playing { color: var(--accent); }

/* Local highlights: flat translucent ink, no glow */
mark.hl {
  background: rgba(111,139,255,0.22); color: inherit;
  border-radius: 3px; padding: 0.04em 0.06em; cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-atheme="sepia"] mark.hl, html[data-apaper] mark.hl { background: rgba(166,124,40,0.30); }
html[data-atheme="gray"] mark.hl { background: rgba(111,139,255,0.26); }

/* Sheets: contain scroll, support pull-to-dismiss drag */
.sheet { overscroll-behavior: contain; touch-action: pan-y; }
.sheetback { touch-action: none; }
.sheet.dragging { transition: none; }

/* selection popover: keep highlight action readable */
.selpop button.sp-on { color: var(--accent); }

/* ============ overnight QA pass: a11y + mobile ergonomics ============ */

/* Listen pill: its own slot, bottom-centre above the nav, clear of the FAB
   column (right) and the reading-progress pill (left) so it never overlaps. */
.lpill {
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) translateY(6px);
  bottom: calc(150px + env(safe-area-inset-bottom)) !important;
}
.lpill.on { transform: translateX(-50%) translateY(0); }
@media (min-width: 701px) { .lpill { bottom: calc(72px + env(safe-area-inset-bottom)) !important; } }

/* Touch targets: every primary control clears the 44px minimum */
.seg button, .seg.seg-lang button, .acts .act, .selpop button,
.resume .r-go, .resume .r-x, #secpills .pill, .toc a { min-height: 44px; }
.acts .act { display: flex; align-items: center; }
#secpills .pill { display: inline-flex; align-items: center; }
.toc a { display: flex; align-items: center; }

/* Visible keyboard focus on the glass controls (was missing) */
.fab:focus-visible, .act:focus-visible, .seg button:focus-visible,
.pill:focus-visible, .nlink:focus-visible, .ncta:focus-visible,
.selpop button:focus-visible, .resume button:focus-visible,
.r-go:focus-visible, .toc a:focus-visible, .nbrand:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px;
}
html[data-atheme="sepia"] .fab:focus-visible,
html[data-atheme="sepia"] .act:focus-visible,
html[data-atheme="sepia"] .seg button:focus-visible { outline-color: #4a5fd0; }

/* Reduced motion: hold the controls still */
@media (prefers-reduced-motion: reduce) {
  .fabs, .fabs.dim { transition: none; }
  main { animation: none !important; }
}

/* Phones + small tablets: the summary + answer cards sit at the top where the
   FAB rail is still visible (it fades once you scroll). The rail moves to the
   bottom-right at <=700px, so reserve a right gutter across that whole range so
   their text never tucks under a floating control. */
@media (max-width: 700px) {
  .summary { padding-right: 48px; }
  .answer-box { padding-right: 44px; }
}

/* ============ Language sheet + Google Translate (long-tail languages) ============ */
/* Suppress Google's injected banner/tooltip and the body offset it forces, so the
   glass nav and reader layout stay intact while a Google translation is active. */
.skiptranslate, .goog-te-banner-frame, .goog-te-gadget-icon,
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip { display: none !important; }
html.gt-active body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; color: inherit !important; }
#google_translate_element { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* The "more languages" dropdown, styled to match the glass sheet */
.gt-wrap { margin-top: 2px; }
.gt-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.06); color: var(--fg);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  padding: 13px 40px 13px 14px; font: inherit; font-size: 16px; min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.gt-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-atheme="sepia"] .gt-select { background-color: rgba(38,31,23,0.05); color: #1d1812; border-color: rgba(38,31,23,0.18); }