/* Atlas — the chapters (static/js/explore/read.js): a chapter read whole,
   a place's shelf of them, the covers on the place home.

   A chapter is long-form reading in the cut-paper look: the question on a
   field of the chapter's colour (an era's, a theme's or the place's), then
   the text in a serif at a comfortable measure (about 66 characters), with
   generous leading and a drop cap cut from the same colour; sections open
   on a torn strip; moments of the history are tickets pinned into the text;
   notes stand in the margin on a wide screen and under their paragraph on a
   phone. Every colour comes from static/explore/tokens.css.

   --r-*: the chapter's own family (by-era / by-theme / by-place), so one
   set of rules colours every chapter, cover and "next" card. */

.rd, .rd-cover, .rd-next, .rd-mini {
  --r-fill: var(--place-fill); --r-on: var(--place-on); --r-ink: var(--place-ink);
  --r-mark: var(--place-mark); --r-soft: var(--place-soft); --r-wash: var(--place-wash);
}
:is(.rd, .rd-cover, .rd-next, .rd-mini).by-era {
  --r-fill: var(--era-fill); --r-on: var(--era-on); --r-ink: var(--era-ink);
  --r-mark: var(--era-mark); --r-soft: var(--era-soft); --r-wash: var(--era-wash);
}
:is(.rd, .rd-cover, .rd-next, .rd-mini).by-theme {
  --r-fill: var(--theme-fill); --r-on: var(--theme-on); --r-ink: var(--theme-ink);
  --r-mark: var(--theme-mark); --r-soft: var(--theme-soft); --r-wash: var(--theme-wash);
}

.rd-page {
  --rd-measure: 39rem; --rd-note-w: 226px; --rd-gap: 44px; --rd-top: 0px;
  display: flex; flex-direction: column; gap: 26px; padding-bottom: 56px; min-width: 0; color: var(--text);
}
.rd-page a:focus-visible, .rd-page button:focus-visible { outline: 2.5px solid var(--x-red); outline-offset: 2px; }

/* where you are */
.rd-crumbs ol { list-style: none; margin: 0 0 -10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13.5px; }
.rd-crumbs li { display: inline-flex; align-items: center; color: var(--x-ink-2); min-width: 0; }
.rd-crumbs li + li::before { content: "›"; margin: 0 9px; color: var(--x-ink-2); }
.rd-crumbs a { color: var(--x-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--place-mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rd-crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }

.rd-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: var(--x-paper-2); color: var(--x-red); box-shadow: inset 0 0 0 1.5px var(--x-red);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── the hero: the question on the chapter's colour, torn at the foot ── */
.rd-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 300px); gap: 30px; align-items: end;
  padding: 34px 34px 52px; border-radius: var(--x-radius) var(--x-radius) 0 0; overflow: hidden;
  background-color: var(--r-fill); background-image: var(--x-grain); color: var(--r-on);
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
}
.rd-hero-text { order: 1; display: grid; gap: 12px; justify-items: start; min-width: 0; }
.rd-hero-art {
  position: relative; order: 2; align-self: stretch; min-height: 190px; transform: rotate(1.6deg); box-shadow: var(--x-shadow-lift);
  -webkit-mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
}
.rd-hero-art .x-collage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the name in the language, a label pasted across the picture */
.rd-hero-native {
  position: absolute; left: 12px; bottom: 22px; max-width: calc(100% - 24px); padding: 6px 16px 7px; transform: rotate(-3deg);
  background: var(--x-paper-2) var(--x-grain); color: var(--x-navy);
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.1;
  box-shadow: 0 3px 8px -3px rgba(40, 25, 5, 0.35);
  -webkit-mask: var(--x-tear-l) left top / 8px 160px repeat-y, var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) center / calc(100% - 14px) 100% no-repeat;
  mask: var(--x-tear-l) left top / 8px 160px repeat-y, var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) center / calc(100% - 14px) 100% no-repeat;
}
.rd-kicker { margin: 0; }
.rd-title { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 21px); line-height: 1.3; opacity: 0.95; }
.rd-h1 {
  margin: 0; outline: none; color: inherit; font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 4.3vw, 50px); line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; max-width: 24ch;
}

/* ── under the hero: the answer, how long, the era and theme, the sections ── */
.rd-lead { display: grid; gap: 18px; max-width: calc(var(--rd-measure) + 60px); margin-top: -4px; }
.rd-stand {
  margin: 0; font-family: var(--serif); font-size: clamp(20px, 1.1rem + 0.55vw, 24px); line-height: 1.45;
  color: var(--x-navy); text-wrap: pretty;
}
.rd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 14px; color: var(--x-ink-2); }
.rd-meta-time { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--x-navy); }
.rd-chip { min-height: 34px; height: auto; max-width: 100%; flex-wrap: wrap; row-gap: 0; padding-block: 5px; font-size: 13px; line-height: 1.3; white-space: normal; text-align: left; }
.rd-chip-note { font-weight: 500; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rd-toc { padding: 14px 18px 16px; background: var(--x-paper-2) var(--x-grain); border-radius: var(--x-radius); box-shadow: var(--x-shadow); }
.rd-toc-h { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red); }
.rd-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; }
.rd-toc-a {
  display: flex; gap: 10px; align-items: baseline; min-height: 36px; padding: 6px 4px; border-radius: 4px;
  color: var(--x-navy); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3;
}
.rd-toc-a:hover { background: var(--r-wash); }
.rd-toc-a[aria-current] { color: var(--r-ink); }
.rd-toc-n { flex: none; font-size: 12px; font-weight: 800; color: var(--r-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ── the text ── */
.rd-body {
  position: relative; max-width: var(--rd-measure);
  font-family: var(--serif); font-size: clamp(18px, 1.02rem + 0.28vw, 20px); line-height: 1.72; color: var(--text);
  font-variant-numeric: oldstyle-nums proportional-nums; font-kerning: normal;
}
.rd-p { margin: 0 0 1.05em; text-wrap: pretty; hanging-punctuation: first; }
.rd-p a.xl { font-weight: inherit; }

/* the drop cap: the first letter on a square cut from the chapter's colour */
.rd-body > p.rd-p:first-of-type::first-letter {
  float: left; margin: 0.2em 0.16em 0 0; padding: 0.12em 0.16em 0.1em;
  font-size: 3.1em; line-height: 0.86; font-weight: 600; color: var(--r-on);
  background: var(--r-fill); border-radius: 1px 3px 2px 1px;
  box-shadow: 2px 3px 0 color-mix(in oklab, var(--r-soft) 60%, transparent);
}

/* a cite: a small raised number in the chapter's ink */
.xl-src { font-size: 0.66em; line-height: 0; vertical-align: super; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-variant-numeric: lining-nums; }
.xl-src-a {
  padding: 0 1px 0 2px; color: var(--r-ink, var(--x-red)); font-weight: 800; text-decoration: none;
}
.xl-src-a:hover { text-decoration: underline; }

/* a section opens on a torn strip: its own colour first, then the paper's */
.rd-h2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  margin: 1.9em 0 0.7em; outline: none; scroll-margin-top: calc(var(--rd-top) + 54px);
  font-family: var(--serif); font-weight: 600; font-size: clamp(25px, 1.25rem + 0.8vw, 31px); line-height: 1.15; color: var(--x-navy);
  text-wrap: balance;
}
.rd-h2-rule {
  grid-column: 1 / -1; display: block; height: 9px; margin: 0 0 16px;
  background: linear-gradient(to right, var(--r-mark) 0 88px, color-mix(in oklab, var(--r-soft) 55%, transparent) 88px);
  -webkit-mask: var(--x-tear-t) left top / 240px 5px repeat-x, var(--x-tear-b) left bottom / 240px 5px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 8px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 5px repeat-x, var(--x-tear-b) left bottom / 240px 5px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 8px) no-repeat;
}
.rd-h2-n {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; color: var(--r-ink); font-variant-numeric: lining-nums tabular-nums;
}

/* a moment of the history: a ticket pinned into the text */
.rd-moment {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); margin: 1.6em 0 1.8em; overflow: hidden;
  color: var(--text); text-decoration: none; border-radius: var(--x-radius);
  background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow); transform: rotate(-0.35deg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45;
  transition: transform 0.15s, box-shadow 0.15s;
}
.rd-moment:hover { transform: rotate(0deg) translateY(-2px); box-shadow: var(--x-shadow-lift); }
.rd-moment-date {
  display: flex; align-items: flex-end; padding: 16px 18px 16px 16px;
  background: var(--era-fill) var(--x-grain); color: var(--era-on);
  font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.12; font-variant-numeric: lining-nums;
  -webkit-mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left / calc(100% - 7px) 100% no-repeat;
  mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left / calc(100% - 7px) 100% no-repeat;
}
.rd-moment-body { display: flex; flex-direction: column; gap: 4px; padding: 15px 18px 15px 12px; min-width: 0; }
.rd-moment-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--era-ink); }
.rd-moment-title { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--x-navy); }
.rd-moment-native { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--era-ink); }
.rd-moment-blurb { font-size: 15px; color: var(--x-ink-2); }
.rd-moment-note { font-size: 14.5px; font-weight: 600; color: var(--x-navy); }
.rd-moment-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--era-ink); }
.rd-moment:hover .rd-moment-go span { text-decoration: underline; text-underline-offset: 3px; }

/* a pull quote, on a torn slip of the chapter's paper */
.rd-quote {
  position: relative; margin: 1.8em 0; padding: 30px 30px 26px 64px;
  background: color-mix(in oklab, var(--r-soft) 34%, var(--x-paper-2)) var(--x-grain); color: var(--x-navy);
  -webkit-mask: var(--x-tear-t) left top / 240px 10px repeat-x, var(--x-tear-b) left bottom / 240px 10px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 18px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 10px repeat-x, var(--x-tear-b) left bottom / 240px 10px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 18px) no-repeat;
}
.rd-quote-mark { position: absolute; left: 16px; top: 8px; font-family: var(--serif); font-size: 84px; line-height: 1; color: var(--x-red); }
.rd-quote-text { margin: 0; }
.rd-quote-text p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(21px, 1.15rem + 0.55vw, 25px); line-height: 1.42; text-wrap: balance; }
.rd-quote-native { margin: 8px 0 0; font-family: var(--serif); font-size: 17px; color: var(--r-ink); }
.rd-quote-who { margin-top: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--x-ink-2); }

/* notes: tinted boxes under their paragraph; beside the text on a wide screen */
.rd-note { --theme-h: 210; }
.rd-note.is-disputed { --theme-h: 6; }
.rd-note.is-estimate { --theme-h: 38; }
.rd-note.is-tip { --theme-h: 146; }
.rd-note {
  margin: 0.2em 0 1.4em; padding: 12px 16px 13px; border-radius: 2px 6px 6px 2px;
  background: var(--theme-wash); color: var(--text); box-shadow: inset 4px 0 0 var(--theme-mark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55;
}
.rd-note p { margin: 0; }
.rd-note-kind {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px !important;
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--theme-ink);
}
.rd-note.is-disputed { box-shadow: inset 4px 0 0 var(--theme-mark), inset 8px 0 0 var(--theme-wash), inset 10px 0 0 var(--theme-mark); padding-left: 22px; }
.rd-note.is-estimate .rd-note-kind::after { content: "≈"; margin-left: 2px; font-size: 15px; letter-spacing: 0; }
.rd-note.is-tip {
  box-shadow: none; background: var(--theme-wash) var(--x-grain); transform: rotate(-0.5deg);
  -webkit-mask: var(--x-tear-t) left top / 240px 8px repeat-x, linear-gradient(#000 0 0) left bottom / 100% calc(100% - 7px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 8px repeat-x, linear-gradient(#000 0 0) left bottom / 100% calc(100% - 7px) no-repeat;
  padding-top: 16px; border-top: 0;
}

/* a cut-paper figure and its caption */
.rd-fig { margin: 1.6em 0; padding: 18px 18px 14px; }
.rd-fig-art svg { display: block; width: 100%; height: auto; max-height: 360px; }
.rd-fig-cap { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--x-ink-2); font-style: italic; }

/* a widget in the text: the chapter's measure, a little more on a wide screen */
.rd-body > .xw { margin: 1.8em 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }

/* the flash when a cite or a contents line lands somewhere */
.is-flash { animation: rd-flash 1.8s ease-out; }
@keyframes rd-flash { 0%, 30% { background-color: var(--r-wash, var(--place-wash)); } 100% { background-color: transparent; } }

/* ── the margin notes, on a wide screen ── */
@media (min-width: 1100px) {
  .rd-body { max-width: min(var(--rd-measure), calc(100% - var(--rd-note-w) - var(--rd-gap))); }
  .rd-body > .rd-note {
    position: absolute; left: calc(100% + var(--rd-gap)); width: var(--rd-note-w); margin: 0;
    font-size: 14px; line-height: 1.5; padding: 11px 14px 12px;
  }
  .rd-body > .rd-note.is-disputed { padding-left: 20px; }
  .rd-body > .rd-note.is-tip { padding-top: 15px; }
  .rd-body > .rd-wide { width: calc(100% + var(--rd-gap) + var(--rd-note-w)); max-width: none; }
}

/* ── to take away ── */
.rd-take {
  display: grid; gap: 20px; padding: 30px 28px 34px; max-width: calc(var(--rd-measure) + var(--rd-gap) + var(--rd-note-w));
  background: color-mix(in oklab, var(--r-soft) 42%, var(--x-paper)) var(--x-grain);
  -webkit-mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
}
.rd-take-h { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 28px); font-weight: 600; color: var(--x-navy); }
.rd-take-sub { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red); }
.rd-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-word {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 15px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--x-paper-2); color: var(--x-navy); box-shadow: inset 0 0 0 1.5px var(--r-mark), var(--x-shadow); font: inherit;
}
.rd-word:hover { background: var(--r-fill); color: var(--r-on); }
.rd-word:hover .rd-word-gloss { color: inherit; }
.rd-word-term { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.rd-word-gloss { font-size: 13.5px; color: var(--x-ink-2); }
.rd-take .at-lines ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-take .at-line {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 4px;
  background: var(--x-paper-2); box-shadow: var(--x-shadow); border: 0;
}
.rd-take .at-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.rd-take .at-play-none { width: 40px; flex: none; }
.rd-take .at-line-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-take .at-line-text { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--x-navy); }
.rd-take .at-line-tr { margin: 0; font-size: 14px; color: var(--x-ink-2); line-height: 1.45; }
.rd-take .at-line-from { font-size: 13px; color: var(--r-ink); font-weight: 600; text-decoration-color: var(--r-mark); text-underline-offset: 3px; }

/* ── the sources, each with the day it was opened ── */
.rd-sources { max-width: calc(var(--rd-measure) + 60px); }
.rd-sources-h { margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red); }
.rd-sources ol { margin: 0; padding-left: 1.7em; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--x-ink-2); }
.rd-src { padding: 3px 6px; margin-left: -6px; border-radius: 4px; scroll-margin-top: calc(var(--rd-top) + 60px); outline: none; }
.rd-src::marker { color: var(--r-ink); font-weight: 800; }
.rd-src-for { display: block; margin-top: 1px; font-size: 13px; line-height: 1.45; color: var(--x-ink-2); opacity: 0.92; }
.rd-src-title { color: var(--x-navy); font-weight: 600; text-decoration-color: var(--r-mark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rd-src-back {
  float: right; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -2px 0 2px 10px;
  border: 0; border-radius: 50%; background: transparent; color: var(--x-ink-2); cursor: pointer; box-shadow: inset 0 0 0 1px var(--x-line);
}
.rd-src-back:hover { color: var(--x-navy); box-shadow: inset 0 0 0 1.5px var(--x-navy); }
.rd-cited { max-width: calc(var(--rd-measure) + 60px); }

/* ── the next chapter ── */
.rd-nexts { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.rd-next {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; text-decoration: none; border-radius: var(--x-radius);
  background: var(--x-paper-2) var(--x-grain); color: var(--x-navy); box-shadow: var(--x-shadow); transition: transform 0.15s, box-shadow 0.15s;
}
.rd-next:hover { transform: translateY(-2px); box-shadow: var(--x-shadow-lift); }
.rd-next.is-next {
  padding-bottom: 32px; border-radius: var(--x-radius) var(--x-radius) 0 0;
  background: var(--r-fill) var(--x-grain); color: var(--r-on);
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
}
.rd-next-dir { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.rd-next.is-prev .rd-next-dir { color: var(--x-red); }
.rd-next-kind { font-size: 12.5px; font-weight: 600; opacity: 0.9; }
.rd-next-title { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; line-height: 1.15; }
.rd-next.is-prev .rd-next-title { font-size: 19px; }
.rd-next-q { font-size: 15px; line-height: 1.45; opacity: 0.95; }
.rd-next-min { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; }
.rd-all { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--x-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--place-mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ── the reading bar: one segment a section, filling as it is read ── */
.rd-bar-hold { position: sticky; top: var(--rd-top); height: 0; z-index: 19; }
.rd-bar { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; }
.rd-bar.is-past { visibility: visible; opacity: 1; }
.rd-bar-segs { display: flex; gap: 3px; height: 5px; }
.rd-bar-seg { position: relative; flex: 1 1 0; min-width: 4px; overflow: hidden; border-radius: 0 0 2px 2px; background: color-mix(in oklab, var(--r-mark) 24%, var(--x-paper)); }
.rd-bar-fill { position: absolute; inset: 0; background: var(--r-mark); transform-origin: left center; transform: scaleX(0); }
.rd-bar-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 6px 14px 7px;
  background: var(--x-paper); box-shadow: 0 6px 12px -10px rgba(40, 25, 5, 0.5), 0 1px 0 var(--x-line);
  font-size: 12.5px; font-weight: 600; color: var(--x-navy);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s; visibility: hidden;
}
.rd-bar.is-past .rd-bar-inner { opacity: 1; transform: none; visibility: visible; }
.rd-nowrap { white-space: nowrap; }
.rd-bar-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-bar-left { flex: none; color: var(--r-ink); font-variant-numeric: tabular-nums; }

/* ── covers: a chapter on a shelf ── */
.rd-covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px; }
.rd-covers > li { display: flex; min-width: 0; }
.rd-covers > li.is-wide { grid-column: span 2; }
.rd-cover {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 236px; padding: 16px 16px 14px 20px; overflow: hidden;
  background: var(--r-fill) var(--x-grain); color: var(--r-on); text-decoration: none;
  border-radius: 3px 8px 8px 3px; box-shadow: var(--x-shadow), inset 7px 0 0 rgba(0, 0, 0, 0.16), inset 9px 0 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.15s, box-shadow 0.15s;
}
.rd-cover:hover { transform: translateY(-3px) rotate(-0.6deg); box-shadow: var(--x-shadow-lift), inset 7px 0 0 rgba(0, 0, 0, 0.16); }
.rd-cover > * { position: relative; z-index: 1; }
.rd-cover > .rd-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.rd-cover-art .c-soft { fill: var(--r-soft); opacity: 0.6; }
.rd-cover-art .c-dark { fill: #000; opacity: 0.14; }
.rd-cover-kind { align-self: flex-start; font-size: 10.5px; padding: 4px 13px 5px; }
.rd-cover-title { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
.rd-cover.is-wide .rd-cover-title { font-size: clamp(24px, 2.4vw, 30px); max-width: 20ch; }
.rd-cover-q { font-size: 15px; line-height: 1.45; opacity: 0.95; max-width: 40ch; }
.rd-cover-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; font-size: 12.5px; font-weight: 700; }
.rd-cover-foot .rd-badge { margin-left: 4px; }
.rd-cover-read { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--x-paper-2); color: var(--x-navy); }

/* ── the shelf page ── */
.rd-shead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 320px); gap: 28px; align-items: center; padding: 30px 32px 46px;
  border-radius: var(--x-radius) var(--x-radius) 0 0; background: var(--place-fill) var(--x-grain); color: var(--place-on);
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
}
.rd-shead-text { display: grid; gap: 10px; justify-items: start; }
.rd-shead-art { order: 2; align-self: stretch; min-height: 150px; position: relative; transform: rotate(1.4deg); box-shadow: var(--x-shadow-lift); }
.rd-shead-art .x-collage { position: absolute; inset: 0; width: 100%; height: 100%; }
.rd-shead-lede { margin: 0; max-width: 52ch; font-size: 16.5px; line-height: 1.55; }
.rd-group { display: grid; gap: 14px; }
.rd-group-h { display: grid; gap: 10px; margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 27px); font-weight: 600; color: var(--x-navy); }
.rd-empty { padding: 18px 20px; margin: 0; }
.rd-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-missing { padding: 30px 0; gap: 14px; align-items: flex-start; }
.rd-missing p { margin: 0; color: var(--x-ink-2); }
.rd-missing-go { display: flex; flex-wrap: wrap; gap: 10px; }

/* a walk, as a card */
.rd-walks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.rd-walk {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; height: 100%; box-sizing: border-box;
  color: var(--x-navy); text-decoration: none; border-radius: var(--x-radius); background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow);
}
.rd-walk:hover { box-shadow: var(--x-shadow-lift); }
.rd-walk-pin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--theme-fill); color: var(--theme-on); }
.rd-walk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rd-walk-kind { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-ink); }
.rd-walk-title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; }
.rd-walk-q { font-size: 14px; line-height: 1.4; color: var(--x-ink-2); }
.rd-walk-facts { font-size: 13px; font-weight: 600; color: var(--x-ink-2); }
.rd-walk-go { flex: none; color: var(--theme-ink); }

/* ── a chapter named elsewhere: the period panel, a topic page ── */
.rd-mini {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; margin: 14px 0; text-decoration: none;
  border-radius: var(--x-radius); background: var(--r-wash); color: var(--x-navy); box-shadow: inset 0 0 0 1.5px var(--r-mark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rd-mini:hover { background: var(--r-fill); color: var(--r-on); }
.rd-mini:hover :is(.rd-mini-kind, .rd-mini-q) { color: inherit; }
.rd-mini-book { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 52px; border-radius: 2px 5px 5px 2px; background: var(--r-fill); color: var(--r-on); box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.18); }
.rd-mini-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rd-mini-kind { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-ink); }
.rd-mini-title { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; }
.rd-mini-q { font-size: 13.5px; line-height: 1.4; color: var(--x-ink-2); }
.rd-list { display: grid; gap: 4px; }
.rd-list .rd-mini { margin: 0; }

/* ── a phone ── */
@media (max-width: 720px) {
  .rd-page { gap: 22px; }
  .rd-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 20px 40px; margin: 0 -4px; }
  .rd-hero-art { order: 0; min-height: 0; height: 104px; margin: 0 -20px; transform: none; box-shadow: none;
    -webkit-mask: var(--x-tear-b) left bottom / 240px 10px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 9px) no-repeat;
    mask: var(--x-tear-b) left bottom / 240px 10px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 9px) no-repeat; }
  .rd-hero-native { left: 20px; bottom: 16px; font-size: 20px; }
  .rd-h1 { font-size: clamp(28px, 7.6vw, 34px); }
  .rd-body { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 4; }
  .rd-crumbs li:last-child { display: none; }
  .rd-toc { padding: 12px 14px 12px; }
  .rd-moment { grid-template-columns: minmax(0, 1fr); transform: none; }
  .rd-moment-date { padding: 12px 16px 14px; font-size: 18px;
    -webkit-mask: var(--x-tear-b) left bottom / 240px 8px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 7px) no-repeat;
    mask: var(--x-tear-b) left bottom / 240px 8px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 7px) no-repeat; }
  .rd-moment-body { padding: 10px 16px 14px; }
  .rd-quote { padding: 26px 18px 22px 46px; }
  .rd-quote-mark { left: 8px; font-size: 64px; }
  .rd-take { padding: 26px 18px 30px; margin: 0 -4px; }
  .rd-nexts { grid-template-columns: minmax(0, 1fr); }
  .rd-shead { grid-template-columns: minmax(0, 1fr); padding: 0 20px 40px; }
  .rd-shead-art { order: 0; min-height: 0; height: 96px; margin: 0 -20px; transform: none; box-shadow: none; }
  /* the shelf on a place's page: covers in a row that slides */
  .rd-shelf .rd-covers { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .rd-shelf .rd-covers::-webkit-scrollbar { display: none; }
  .rd-shelf .rd-covers > li { flex: 0 0 60%; scroll-snap-align: start; }
  .rd-shelf .rd-covers > li.is-wide { flex-basis: 84%; }
  .rd-covers.is-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rd-covers.is-page > li.is-wide { grid-column: 1 / -1; }
  .rd-cover { min-height: 210px; padding: 14px 12px 12px 17px; }
  .rd-cover-title { font-size: 18.5px; }
  .rd-walks { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rd-moment, .rd-cover, .rd-next, .rd-hero-art, .rd-hero-native, .rd-note.is-tip, .rd-shead-art { transform: none !important; transition: none; }
  .rd-bar, .rd-bar-inner { transition: none; }
  .is-flash { animation: none; }
}

@media print {
  .rd-bar-hold, .rd-src-back, .rd-toc, .rd-nexts, .rd-crumbs { display: none !important; }
  .rd-body > .rd-note { position: static !important; width: auto !important; }
}