/* Science Folios: A Reader's Guide.

   A page read straight through, one paragraph per folio, so it is set as
   prose: a serif reading face at a comfortable measure, with the folio family's
   Latin Modern Sans for the small labels and the Ouviaj blue for titles and
   links. Each entry carries its folio's gallery thumbnail in the same paper
   frame the galleries use, so the words and the artwork stay visibly paired.
   Generated by scripts/build_readers_guide.py. */
.readers-guide-page {
  --rg-ink: #1b2533;
  --rg-body: #36404d;
  --rg-muted: #6b7482;
  --rg-faint: #8a929d;
  --rg-rule: #e2e6ed;
  --rg-accent: #0048A0;
  --rg-sans: "Latin Modern Sans", Arial, sans-serif;
  --rg-serif: Georgia, "Times New Roman", serif;
  color: var(--rg-body);
  background: #fff;
  font: 400 18px/1.7 var(--rg-serif);
  /* Lining figures where the face offers them; Georgia keeps its old-style ones. */
  font-variant-numeric: lining-nums;
}
.readers-guide-page main {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(92px, 12svh, 132px) 24px 48px;
}
.readers-guide-page a { color: var(--rg-accent); }

/* Heading. */
.rg-head { text-align: center; margin-bottom: clamp(30px, 5svh, 48px); }
.rg-eyebrow,
.rg-kicker {
  font: 700 12px/1.4 var(--rg-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.rg-eyebrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.rg-head h1 {
  margin: 14px 0 0;
  color: var(--rg-accent);
  font: 400 clamp(42px, 6vw, 72px)/1.02 var(--rg-serif);
  letter-spacing: -0.035em;
}
.rg-deck {
  max-width: 30em;
  margin: 18px auto 0;
  color: var(--rg-muted);
  font: italic clamp(18px, 1.9vw, 22px)/1.5 var(--rg-serif);
  text-wrap: balance;
}
/* The folio descriptions' face, colour and leading, one step larger, across
   the full column so it lines up with everything below. */
.rg-lead {
  margin: 0 0 18px;
  font-size: 1.1em;
}
/* A link inside the lead reads as part of the sentence: no colour, no rule. */
.rg-lead a { color: inherit; text-decoration: none; }

/* Contents: the subjects, numbered, with their counts. */
.rg-contents { margin: clamp(32px, 5svh, 48px) 0 0; }
.rg-contents ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0 36px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rg-rule);
  list-style: none;
}
.rg-contents li { border-bottom: 1px solid var(--rg-rule); }
.rg-contents a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 2px;
  color: var(--rg-ink);
  font: 400 16px/1.4 var(--rg-sans);
  text-decoration: none;
}
.rg-contents a:hover .rg-contents-label { color: var(--rg-accent); }
.rg-contents-label { flex: 1; }
.rg-num {
  color: var(--rg-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}
.rg-count { color: var(--rg-faint); font-size: 13.5px; white-space: nowrap; }

/* Subjects. */
.rg-group { margin-top: clamp(56px, 9svh, 92px); scroll-margin-top: 80px; }
.rg-kicker { margin: 0 0 12px; color: var(--rg-accent); opacity: 0.8; }
.rg-group h2 {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rg-accent);
  font: 400 clamp(30px, 3.6vw, 42px)/1.15 var(--rg-serif);
  letter-spacing: -0.02em;
}
.rg-group h2 a { color: var(--rg-ink); text-decoration: none; }
.rg-group h2 a:hover { color: var(--rg-accent); }
.rg-group-intro,
.rg-subgroup-intro {
  max-width: 42em;
  margin: 20px 0 8px;
  color: var(--rg-muted);
  font-style: italic;
  font-size: 18.5px;
}
.rg-subgroup {
  margin: 44px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rg-rule);
  color: var(--rg-muted);
  font: 700 13px/1.4 var(--rg-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  scroll-margin-top: 80px;
}
.rg-subgroup-intro { margin-top: 14px; font-size: 17px; }

/* One folio: thumbnail, then its words. */
.rg-folio {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 0 34px;
  padding: 34px 0 32px;
  border-bottom: 1px solid var(--rg-rule);
  scroll-margin-top: 80px;
}
.rg-thumb { display: block; padding-top: 6px; line-height: 0; }
.rg-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: contain;
  object-position: top;
  box-sizing: border-box;
  padding: 5px;
  border: 0.5px solid #c9c9c9;
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 8%), 0 8px 18px rgb(0 0 0 / 9%);
  transition: border-color .15s ease, transform .15s ease;
}
.rg-thumb:hover img { border-color: #777; transform: translateY(-2px); }
.rg-title {
  margin: 0;
  font: 400 clamp(23px, 2.4vw, 27px)/1.25 var(--rg-serif);
  letter-spacing: -0.01em;
}
.rg-title a { color: var(--rg-accent); text-decoration: none; }
.rg-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rg-subtitle {
  margin: 6px 0 14px;
  color: var(--rg-muted);
  font: 400 15.5px/1.5 var(--rg-sans);
}
.rg-text > p:not([class]) { margin: 0 0 14px; }
.rg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  margin: 4px 0 0;
  font: 400 13.5px/1.5 var(--rg-sans);
}
.rg-topics { flex: 1 1 22em; color: var(--rg-faint); }
.rg-open { font-weight: 700; text-decoration: none; white-space: nowrap; }
.rg-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.rg-folio:target { animation: rg-arrive 2.4s ease-out; }
@keyframes rg-arrive { from { background: #f4f7fb; } to { background: transparent; } }

.rg-back {
  margin: 56px 0 0;
  text-align: center;
  font: 700 16px/1.4 var(--rg-sans);
}
.rg-back a { text-decoration: none; }
.rg-back a:hover { text-decoration: underline; text-underline-offset: 4px; }

.readers-guide-page a:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 3px; border-radius: 2px; }

/* The publication footer spans the text column, as on the glossaries. Its
   16px gap is for the columns; between the credit line and the support links
   it would leave an empty line, so rows sit close, as on the atlas plates.
   The page's blue link colour stops at the footer, which keeps its grey. */
.readers-guide-page .site-footer--publication {
  width: min(100%, 940px);
  row-gap: 3px;
  padding: 4px 24px 16px;
}
.readers-guide-page .site-footer a { color: inherit; }

@media (max-width: 760px) {
  .readers-guide-page { font-size: 17px; }
  .readers-guide-page main { padding: 88px 16px 32px; }
  .readers-guide-page .site-footer--publication { padding-left: 16px; padding-right: 16px; }
  .rg-folio { grid-template-columns: 84px minmax(0, 1fr); gap: 0 18px; padding: 26px 0 24px; }
  .rg-thumb img { padding: 3px; }
  .rg-title { font-size: 21px; }
  .rg-subtitle { font-size: 14.5px; }
  .rg-group-intro { font-size: 17px; }
}
@media (max-width: 480px) {
  /* On a phone the paragraph takes the full width; the thumbnail sits beside
     the title and subtitle only. */
  .rg-folio { grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; }
  .rg-text { display: contents; }
  .rg-thumb { grid-row: 1 / span 2; }
  .rg-title, .rg-subtitle { grid-column: 2; }
  .rg-text > p:not(.rg-subtitle), .rg-meta { grid-column: 1 / -1; }
  .rg-subtitle { margin-bottom: 12px; }
  .rg-text > p:not([class]) { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-thumb img { transition: none; }
  .rg-folio:target { animation: none; }
}

@media print {
  .readers-guide-page main { max-width: none; padding: 0; }
  .rg-folio { break-inside: avoid; }
  .rg-thumb img { box-shadow: none; }
}