/*
 * Parrotly web reader.
 *
 * Two typefaces, as a newspaper uses them: a serif for anything editorial —
 * the masthead and its sections, headlines, standfirsts, article body,
 * glossary — and a sans for the furniture around it: tags, buttons, the level
 * switcher, exercises. Keeping that line clean is what separates "a page of
 * text" from "a paper".
 *
 * No images by design. Colour appears in exactly two places: the category tag,
 * which takes its colour from the API, and right/wrong marks on an answer.
 * Everything else is ink on paper.
 *
 * System fonts only — no webfont request to block the first paint or leak a
 * reader's address to a font CDN.
 */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --ink: #16150f;
  --ink-muted: #5d5a4e;
  --paper: #fbfaf7;
  --rule: #e0ddd2;
  --rule-strong: #16150f;
  --error: #a8321c;
  --correct: #2e7d32;
  --correct-wash: #edf4ee;
  --wrong-wash: #f9ece9;
  /* Saved vocabulary. Ochre rather than a highlighter yellow: it has to sit
     under running text without pulling the eye off the sentence. */
  --saved: #c2a23f;

  /* Type scale. */
  --size-xs: 0.75rem;
  --size-sm: 0.8125rem;
  --size-ui: 0.9375rem;
  --size-base: 1.0625rem;
  --size-lg: 1.1875rem;
  --size-xl: 1.375rem;
  --size-2xl: 1.75rem;
  /* Feed headlines: the loudest thing on the page after an article's own. */
  --size-headline: 1.9375rem;
  --size-3xl: 2.375rem;

  /* Spacing scale — everything vertical is a multiple of these. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* ~66 characters at the body size: the comfortable reading measure. Prose
     is held to this even where the page around it is wider. */
  --measure: 34rem;
  /* The page itself. Wider than the measure, because the masthead's sections
     sit at one edge and the reader's locale at the other, and a feed of
     headlines is scanned rather than read. */
  --shell: 64rem;
  /* Feed headlines want more room than prose and less than the shell. */
  --feed: 46rem;
  --gutter: 1.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--size-base);
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keyboard users get a visible target; mouse users are not shouted at. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- Masthead --- */

/* The rule runs the full width of the window while everything on it stays on
   the column — the line under a masthead is the page edge, not a box. */
.masthead {
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: var(--space-8);
}

.masthead__inner {
  margin: 0 auto;
  max-width: var(--shell);
  padding: var(--space-6) var(--gutter) 0;
}

.masthead__title {
  color: inherit;
  display: inline-block;
  font-size: var(--size-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  text-decoration: none;
}

/* --- Masthead nav --- */

/* Sections at one end, who you are reading as at the other. Serif, because
   these name the paper's parts rather than operate on them. */
.nav {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  margin-top: var(--space-4);
}

.nav__tabs {
  display: flex;
  gap: var(--space-6);
}

.nav__tab {
  /* The transparent border reserves the current-tab rule's space, so choosing
     a section doesn't shift the row it sits in. */
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  font-size: var(--size-ui);
  padding-bottom: var(--space-2);
  text-decoration: none;
}

.nav__tab:hover {
  color: var(--ink);
}

.nav__tab--on {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.nav__aside {
  align-items: baseline;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}

/* A label that happens to be clickable: the reader who wants to change level
   goes looking for where their level is written. */
.nav__locale {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  padding: 0;
  text-transform: uppercase;
}

.nav__locale:hover {
  color: var(--ink-muted);
}

.app {
  margin: 0 auto;
  max-width: var(--shell);
  padding: 0 var(--gutter) var(--space-12);
}

/* Prose inside the wider page. The article and the saved-word list are read
   rather than scanned, so they keep the measure the shell no longer imposes. */
.column {
  max-width: var(--measure);
}

/* --- Notices and simple screens --- */

.notice {
  color: var(--ink-muted);
}

.notice--error {
  color: var(--error);
}

/* Sign-in, onboarding and the empty states: prose, so they hold the measure
   rather than stretching across the shell. */
.screen {
  max-width: var(--measure);
}

.screen__title {
  font-size: var(--size-2xl);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.screen__subtitle {
  font-size: var(--size-xl);
  margin: var(--space-8) 0 var(--space-3);
}

.lede {
  color: var(--ink-muted);
  font-size: var(--size-lg);
  margin: 0 0 var(--space-8);
}

/* --- Controls (sans: furniture, not prose) --- */

.signin {
  display: flex;
  min-height: 2.75rem;
}

.button {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--size-ui);
  padding: var(--space-2) var(--space-4);
}

.button:hover:not(:disabled) {
  background: var(--ink-muted);
  border-color: var(--ink-muted);
}

.button:disabled {
  cursor: default;
  opacity: 0.35;
}

.button--quiet {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink-muted);
  margin-right: var(--space-2);
}

.button--quiet:hover:not(:disabled) {
  background: transparent;
  border-color: var(--ink-muted);
  color: var(--ink);
}

.linkish {
  background: none;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--size-sm);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.linkish:hover {
  color: var(--ink);
}

/* The back link sits above the article; give it room so it reads as
   navigation rather than as part of the headline block. */
.backlink {
  display: inline-block;
  margin-bottom: var(--space-6);
}

/* --- Onboarding choosers --- */

.chooser {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  align-items: baseline;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-family: var(--sans);
  font-size: var(--size-ui);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.chip:hover:not(:disabled) {
  border-color: var(--ink-muted);
}

.chip--on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.chip:disabled {
  color: var(--ink-muted);
  cursor: default;
  opacity: 0.45;
}

.chip__code {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.chip__name {
  font-size: var(--size-sm);
}

.chooser + .notice,
.chooser + .button {
  margin-top: var(--space-8);
}

/* --- Feed --- */

/* The dateline. Set in the editorial serif at regular weight — it names the
   day rather than competing with the headlines under it. */
.feedhead {
  margin-bottom: var(--space-6);
}

.feedhead__title {
  font-size: var(--size-2xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
}

.feed {
  list-style: none;
  margin: 0;
  max-width: var(--feed);
  padding: 0;
}

.feed li + li {
  border-top: 1px solid var(--rule);
}

.card {
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-8) 0;
  text-decoration: none;
}

/* The first card sits under the date line, which already spaces it — the full
   padding is there to separate cards from each other. */
.feed li:first-child .card {
  padding-top: var(--space-4);
}

.card:hover .card__headline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The one place colour comes from the data: the category's own hex. */
.card__tag {
  align-self: flex-start;
  border: 1px solid;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  padding: 0.125rem var(--space-2);
  text-transform: uppercase;
}

.card__headline {
  font-size: var(--size-headline);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* A story a visitor can see but not open. Set in the muted ink rather than
   dimmed with opacity: these headlines still have to be readable enough to be
   wanted, which is the entire job they do. */
.card--locked .card__headline {
  color: var(--ink-muted);
  font-size: var(--size-lg);
}

.card__standfirst {
  color: var(--ink-muted);
  font-size: var(--size-lg);
}

.card__meta {
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: var(--size-sm);
  margin-top: var(--space-1);
}

/* --- Article --- */

.article__header {
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
}

.article__icon {
  display: block;
  font-size: 1.75rem;
  margin-bottom: var(--space-3);
}

.article__headline {
  font-size: var(--size-3xl);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: var(--space-3) 0;
}

.article__standfirst {
  color: var(--ink-muted);
  font-size: var(--size-lg);
  margin: 0 0 var(--space-4);
}

.article__meta {
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: var(--size-xs);
  letter-spacing: 0.09em;
  margin: 0;
  text-transform: uppercase;
}

.article p {
  margin: 0 0 var(--space-6);
}

/* The opening paragraph carries a little more weight, as a deck does — but only
   where there is a deck to carry on from. A news header holds a standfirst at
   this size, so the first body paragraph reads as the last step down from it.
   A Library chapter has no standfirst, and the same rule made the author's
   opening paragraph arbitrarily larger than the rest of their prose: a
   journalistic convention a novel has no use for, and at tier C in the book's
   own language that paragraph is the author's text verbatim.

   Keyed on the standfirst rather than a "this is news" class, because that is
   the condition the style actually depends on. article--selectable would be
   the wrong hook — Library gets word selection when L11 lands. */
.article__header:has(.article__standfirst) + p {
  font-size: var(--size-lg);
}

.article__heading {
  font-size: var(--size-xl);
  margin: var(--space-8) 0 var(--space-3);
}

.article__quote {
  border-left: 2px solid var(--rule-strong);
  font-style: italic;
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
}

.article__quote p {
  margin-bottom: var(--space-3);
}

.article__attribution {
  color: var(--ink-muted);
  display: block;
  font-family: var(--sans);
  font-size: var(--size-sm);
  font-style: normal;
}

.article__attribution::before {
  content: "— ";
}

/* --- Level switcher --- */

/* --- Listen --- */

/* Furniture, so sans — it sits under the article rather than in it. */
.listen {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
}

.listen__button {
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--size-ui);
  padding: var(--space-2) var(--space-4);
}

.listen__button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.listen__button:disabled {
  border-color: var(--rule);
  color: var(--ink-muted);
  cursor: default;
}

.listen__audio {
  display: block;
  margin-top: var(--space-2);
  width: 100%;
}

.listen__status {
  color: var(--ink-muted);
  display: block;
  font-family: var(--sans);
  font-size: var(--size-sm);
  margin-top: var(--space-2);
}

.levels {
  border-top: 1px solid var(--rule);
  margin: var(--space-8) 0;
  padding-top: var(--space-4);
}

.levels__label {
  color: var(--ink-muted);
  display: block;
  font-family: var(--sans);
  font-size: var(--size-sm);
  margin-bottom: var(--space-2);
}

.levels__options {
  display: flex;
  gap: var(--space-1);
}

.levelchip {
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: var(--size-sm);
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
}

.levelchip:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

.levelchip--on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- Sections --- */

.section__title {
  border-top: 1px solid var(--rule);
  font-size: var(--size-xl);
  margin: var(--space-12) 0 var(--space-4);
  padding-top: var(--space-6);
}

/* --- Glossary --- */

.glossary dl {
  margin: 0;
}

.glossary dt {
  font-weight: 700;
  margin-top: var(--space-4);
}

.glossary dd {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
}

.glossary__example {
  color: var(--ink-muted);
  font-style: italic;
}

/* --- Exercises --- */

.exercises__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exercise {
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-bottom: var(--space-4);
  padding: var(--space-6);
}

.exercise__number {
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: var(--size-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.exercise__question {
  margin: var(--space-2) 0 var(--space-4);
}

.blank {
  border-bottom: 1px solid var(--ink);
  display: inline-block;
  min-width: 5rem;
  white-space: pre;
}

.blank--filled {
  border-bottom-color: var(--correct);
  color: var(--correct);
  font-weight: 700;
  min-width: 0;
  padding: 0 var(--space-1);
  white-space: normal;
}

/* Options are sentences as often as they are single words, so they stack
   rather than wrapping into a ragged grid. */
.exercise__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.option {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--size-ui);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.option:hover:not(:disabled) {
  border-color: var(--ink);
}

.option:disabled {
  cursor: default;
}

.option--correct {
  background: var(--correct-wash);
  border-color: var(--correct);
  color: var(--correct);
  font-weight: 600;
}

.option--wrong {
  background: var(--wrong-wash);
  border-color: var(--error);
  color: var(--error);
  text-decoration: line-through;
}

.exercise__explanation {
  color: var(--ink-muted);
  font-size: var(--size-ui);
  margin: 0;
}

.exercise__explanation--shown {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}

/* --- Vocabulary --- */

/* Selectable prose. The cursor is the only affordance: an underline or a
   colour on every word would turn an article into a wall of links. */
.article--selectable [data-block-index] {
  cursor: pointer;
}

/* A saved word. Underlined rather than filled, so a paragraph with several
   saved words still reads as prose — and unscoped, because the same mark is
   used in the article and in the sentence shown on the My words screen. The
   browser default for <mark> is a solid yellow fill, which has to be undone. */
mark.saved {
  background: none;
  border-bottom: 2px solid var(--saved);
  color: inherit;
  padding-bottom: 1px;
}

/* The card anchored under a selection. Sans, because it is furniture, not
   editorial — and it is the container the definition grows into later. */
.wordcard {
  align-items: center;
  background: var(--ink);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgb(22 21 15 / 25%);
  color: var(--paper);
  display: flex;
  font-family: var(--sans);
  gap: var(--space-3);
  max-width: min(20rem, calc(100vw - 1rem));
  padding: var(--space-2) var(--space-3);
  position: absolute;
  z-index: 20;
}

.wordcard__word {
  font-size: var(--size-ui);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wordcard__action {
  background: var(--paper);
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  font-size: var(--size-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
}

.wordcard__action--remove {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(251 250 247 / 45%);
  color: var(--paper);
}

/* Transient status, pinned out of the way of what is being read. */
.flash {
  background: var(--ink);
  border-radius: 6px;
  bottom: var(--space-4);
  box-shadow: 0 6px 20px rgb(22 21 15 / 25%);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--size-sm);
  left: 50%;
  margin: 0;
  max-width: calc(100vw - 2rem);
  padding: var(--space-3) var(--space-4);
  position: fixed;
  transform: translateX(-50%);
  z-index: 30;
}

/* --- My words --- */

/* Width comes from the .column wrapper, as it does for an article. */
.words {
  list-style: none;
  margin: 0;
  padding: 0;
}

.word {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-4) 0;
}

.word__head {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
}

.word__term {
  font-family: var(--serif);
  font-size: var(--size-lg);
}

.word__meta {
  color: var(--ink-muted);
  flex: 1;
  font-family: var(--sans);
  font-size: var(--size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.word__remove {
  flex-shrink: 0;
}

/* The sentence it was met in — the reason occurrences are stored at all. */
.word__context {
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: var(--size-ui);
  margin: var(--space-2) 0 0;
}

/* --- Library --- */

/* The catalogue is the one screen that uses the full shell rather than the
   measure: covers are scanned in a grid, not read in a column. It is rendered
   straight into .app for that width, so nothing here sets a max. */

.libhead {
  border-bottom: 2px solid var(--rule-strong);
  padding-bottom: var(--space-4);
}

.libhead__title {
  font-size: var(--size-2xl);
  letter-spacing: -0.015em;
  margin: 0;
}

/* Blank on purpose: there is no artwork yet, and a striped placeholder is
   honest where a stock image or a generated cover would not be. */
/* Standing in for artwork without looking like a gap: title at the top, author
   at the foot, and a coloured rule along the head from the book's genre. Flat
   rather than the striped placeholder it replaces — stripes under text read as
   "image failed to load", which is the one thing this must not look like. */
.cover {
  aspect-ratio: 2 / 3;
  background-color: #f2efe6;
  border: 1px solid var(--rule);
  /* Overridden inline with the genre's own colour when it has one. */
  border-top: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

/* One size for every cover rather than text fitted to its box. Fitting means
   measuring, and the cheap version is a size that seats most titles in two or
   three lines and lets the longest run to four. The hero's cover is only a
   rem wider than the shelf's, so one size covers both. */
.cover__title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--size-ui);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* At the foot, where a cover puts it, not directly under the title. */
.cover__author {
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: var(--size-xs);
  font-style: italic;
  margin-top: auto;
  padding-top: var(--space-2);
}

.book:hover .cover,
.book:focus-visible .cover {
  border-color: var(--ink);
}

/* --- The book you are reading --- */

.hero {
  align-items: start;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 13rem 1fr;
  padding: var(--space-8) 0;
  text-decoration: none;
}

.hero__body {
  max-width: var(--measure);
}

.hero__line {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.badge {
  border: 1px solid var(--correct);
  color: var(--correct);
  font-family: var(--sans);
  font-size: var(--size-xs);
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-2);
  text-transform: uppercase;
}

.hero__kicker {
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: var(--size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Colour set explicitly: the heading is inside an <a>, so without it the
   browser's visited-link purple wins. */
.hero__title {
  color: var(--ink);
  font-size: var(--size-2xl);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: var(--space-3) 0 var(--space-2);
}

.hero:hover .hero__title,
.hero:focus-visible .hero__title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hero__facts {
  color: var(--ink-muted);
  font-size: var(--size-lg);
  margin: 0;
}

.progress {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.progress__track {
  background: var(--rule);
  display: block;
  flex: 1;
  height: 3px;
  max-width: 20rem;
}

.progress__fill {
  background: var(--ink);
  display: block;
  height: 100%;
}

.progress__pct {
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: var(--size-xs);
}

/* --- The shelf --- */

.shelf {
  display: grid;
  gap: var(--space-8) var(--space-6);
  /* 12rem, not 11: a serif title at 600 weight fills a narrower column edge to
     edge, and two full columns of it read as one run-on phrase rather than as
     two books. The wider gutter is doing the same job. */
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  padding-top: var(--space-8);
}

/* Only when something sits above it. A shelf that opens the screen needs no
   rule between itself and the masthead. */
.shelf--divided {
  border-top: 1px solid var(--rule);
}

.shelf__empty {
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-style: italic;
  margin: 0;
  padding-top: var(--space-8);
}

/* Only the cover now: the title and author are set inside it, so a card is
   a single object and the alignment the caption used to need is gone with
   it. */
.book {
  display: block;
  text-decoration: none;
}

/* --- The chapter reader --- */

/* Prose comes from the shared .article styles; only moving between chapters is
   Library's own. */

.chapternav {
  border-top: 1px solid var(--rule);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
}

/* One link alone must sit at the right, where "next" belongs — otherwise the
   first chapter's Next jumps to the left edge where Previous would have been. */
.chapternav > :only-child {
  margin-left: auto;
}

/* --- Small screens --- */

@media (max-width: 32rem) {
  :root {
    --gutter: 1.125rem;
    --size-3xl: 1.875rem;
    --size-2xl: 1.5rem;
    --size-headline: 1.5rem;
  }

  /* The sections keep the left edge; the locale and the way out drop below
     them rather than squeezing onto the same line. */
  .nav {
    justify-content: flex-start;
  }

  .nav__tabs {
    gap: var(--space-4);
    width: 100%;
  }

  .nav__aside {
    padding-bottom: var(--space-3);
  }

  .card {
    padding: var(--space-6) 0;
  }

  .levels__options {
    flex-wrap: wrap;
  }

  /* The cover drops out entirely rather than shrinking to a stamp: at this
     width the title and where you are in the book are what matter. */
  .hero {
    grid-template-columns: 1fr;
  }

  .hero > .cover {
    display: none;
  }

  .shelf {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }
}