/* article.css (magazine) — the sheet of the ARTICLE package (design package S2:
   docs/design-kickoff/S2_BAUVORLAGE.md): the article page — its head, the banner picture, the text
   with the rail of its contents, the notice at the paywall, "cite" — and what the list of all
   articles and the page of an author need beyond the shared teasers.

   Load order in the magazine's layout: tailwind.css → the platform's components.css and shell.css →
   the magazine's components.css (the blocks its pages share) → THIS file, issue.css, shows.css →
   app.css. The admin has its own layout and loads none of them.

   ⚠️ Loaded on EVERY page of the magazine, like the two sheets beside it. So:
   - every block is named `mag-…` (a colour version of the platform's pill `pill-…`), and a name
     belongs to ONE sheet: none that components.css or another package uses;
   - a block of components.css is restyled only under a class of this package
     (`.mag-read .mag-meta { … }`), never by its bare name — that would change it on every page;
   - colours only as var(--mn-…): a colour without a name gets one in tailwind.base.js.

   How LARGE the blocks are built stands in ONE place: the block "The scale" right below, in the
   form of components.css — the phone's and the tablet's values on the root, what differs from 1024
   in one media query, in whole pixels, each under a name `--mag-…` that no other sheet defines. A
   rule further down says `var(--mag-…)` where it sets a size; it may read a name of components.css
   as well. Never `--atom-…` or `--mn-size-…` (mineralica/tests/test_scale.py).

   Held by magazine/tests/test_article_sheet.py (its table SIZES says what stands here) through
   magazine/tests/sheet_rules.py, and with the other sheets by test_package_sheets.py. */

/* ---------- The scale ---------- */
/* The sizes of this package's blocks, named in ONE place. Built is "Stufe C" — about three quarters
   of what the frames draw; every line says what the frame draws.

   Named is what the scale decides: a type size with its line, an icon, a width, a distance above 12.
   Not named, because a change of scale leaves it alone: hairlines, radii, the room that makes a tap
   target (a padding taken back by a margin) and a gap of up to 12 between two small things.
   Type that is a step of the text scale stands as a class in the markup and has no name here; the
   text of an ARTICLE has sizes of its own (decision S2-N1) — 17/26 is no step of the text scale
   and 22/28 no headline step. Since the pages of running text read them too (S7), they and the
   block `mag-prose` stand in components.css; this sheet keeps the reading column's width, which
   its grid is built from, and reads the text's line where it keeps a line's distance. */
:root {
  /* The head of the article page. */
  --mag-read-top: 32px;                                      /* header · the line over the title — drawn 72 */
  --mag-read-kicker: 6px;                                    /* the line over the title · the title — drawn 12 */
  --mag-read-lead: 20px;                                     /* standfirst · head picture; contents · text below 1024 — drawn 40 */
  --mag-read-glyph: 18px;                                    /* the icon of "share" and "cite" — drawn 24 */
  --mag-read-apart: 16px;                                    /* between the two actions; meta row · actions — drawn 28 */

  /* The column of the text (its sizes: components.css, "Running text"). */
  --mag-prose-column: 666px;                                 /* the reading column — drawn 666, built as drawn */

  /* The table of contents. */
  --mag-toc: 199px;                                          /* the rail left of the text, from 1024 — drawn 199, built as drawn */
  --mag-toc-gap: 28px;                                       /* rail · reading column — drawn 28: 199 + 28 is half of 1120 − 666 */
  --mag-toc-row: 40px;                                       /* the least height of a line of the first level — drawn 56 */
  --mag-toc-row-sub: 32px;                                   /* … of the second — drawn 44 */
  --mag-toc-sub: 20px;                                       /* how far the second level stands in behind the line — drawn 19 */
  --mag-toc-head: 44px;                                      /* the head of the box below 1024 — not drawn */

  /* The notice at the paywall. */
  --mag-paywall-gap: 12px;                                   /* between its parts — drawn 20 */
  --mag-paywall-pad: 12px;                                   /* above and below the row "what still follows" — drawn 18 */
  --mag-paywall-apart: 20px;                                 /* between photos and numbers — drawn 40 */
  --mag-paywall-photo: 64px;                                 /* a small photo, a square — drawn 96 */
  --mag-paywall-cta: 180px;                                  /* the least width of the button, from 768 — drawn 240 */

  /* "Cite". */
  --mag-cite: 400px;                                         /* the field's width, from 768 — drawn 520 */
  --mag-cite-pad: 16px;                                      /* inside the field — drawn 24 */
  --mag-cite-gap: 12px;                                      /* between its groups — drawn 20 */

  /* The head of a list page: all articles, an author. */
  --mag-list-top: 8px;                                       /* above the title; <main> adds its own 24 — not drawn */
  --mag-list-photo: 72px;                                    /* an author's photo — not drawn (was built 128) */
}
@media (min-width: 1024px) {
  :root {
    --mag-read-top: 52px;
    --mag-read-kicker: 8px;
    --mag-read-lead: 28px;
    --mag-read-apart: 20px;
    --mag-paywall-gap: 16px;
    --mag-paywall-pad: 14px;
    --mag-paywall-apart: 28px;
    --mag-paywall-photo: 72px;
    --mag-cite-pad: 20px;
    --mag-cite-gap: 16px;
    --mag-list-top: 28px;
    --mag-list-photo: 96px;
  }
}

/* ---------- Article head ---------- */
/* The head of the article page (_article_head.html; Figma 5359:2177, 5359:1725): the line over the
   title, the title, the meta row with "share" and "cite" at its right, the standfirst — all over
   the page's full width. The page has bands, so <main> brings no padding above: the head keeps the
   distance to the header itself.
   Type comes from the markup (the title a headline step, the standfirst 18/28, the actions 14/21,
   the line over the title 12/18); the meta row is the shared block `mag-meta`, unchanged below 768. */
.mag-read__head { padding-top: var(--mag-read-top); }
/* The line over the title, as on a teaser (S2-5): in capitals by CSS — the markup keeps the words as
   they are written — and the calendar's violet. For an article of an issue it is a link to the
   issue, underlined only under a pointer. */
.mag-read__kicker {
  margin-bottom: var(--mag-read-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--mn-show-week); overflow-wrap: break-word;
}
/* A link among the head's small words — the issue over the title, an author, the pages: a target
   of 36 for a finger at the element itself, by a padding that takes no room (the link is inline,
   and an inline box's padding does not make its line higher). The frame of the keyboard stands
   around the WORDS, which is why they have a <span> of their own in the markup: around the link
   it would be as high as the target, over the title above and — from 768 — cut off by the row. */
.mag-read__tap { padding: 10px 0; }
.mag-read__kicker .mag-read__tap { padding: 11px 0; }
.mag-read__tap:focus-visible { outline: none; }
.mag-read__tap:focus-visible > span { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* The row under the title: the facts at the left, the two actions at the right. Below 768 the
   actions stand under the facts, at the left; from 768 they share a line, and where that line is
   too short the actions move under the facts as a whole.
   ⚠️ `position: relative` is the anchor of the field "cite" (see there), not styling. */
.mag-read__bar {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px var(--mag-read-apart); margin-top: var(--mag-section-head);
}
.mag-read__meta { min-width: 0; }
.mag-read__actions { display: flex; align-items: center; gap: var(--mag-read-apart); }
/* "Share" (a button) and "cite" (the <summary> of its field) look alike: icon 18, 6, the word in
   14/21 semibold. A target of 37 at the element itself — the padding is taken back by a margin, so
   the row stays as high as its line.
   ⚠️ `flex`, not `inline-flex`: the <summary> stands in its <details>, and as an inline box it
   would sit on the baseline of a line of the page's text there — 3 px above the button beside it. */
.mag-read__action {
  display: flex; align-items: center; gap: 6px; padding: 8px 0; margin: -8px 0;
  color: var(--mn-gray-900); cursor: pointer; list-style: none;
}
.mag-read__action::-webkit-details-marker { display: none; }
.mag-read__action .icon { width: var(--mag-read-glyph); height: var(--mag-read-glyph); }
.mag-read__action:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
.mag-read__lead { margin-top: var(--mag-section-head); color: var(--mn-gray-900); }
@media (min-width: 768px) {
  .mag-read__bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  /* A hairline between two facts, as drawn — and never at the start of a line the row wrapped
     into: every fact carries the line at its LEFT and stands that far to the left, and the row cuts
     off what leaves it. So the first fact of each line loses its hairline, whichever fact that is.
     The gap between two facts becomes: the fact's distance, the hairline, the distance again.
     ⚠️ A row that clips would clip the focus frame of the links in it as well (author, pages):
     it gets 4 of padding all round, taken back by a margin — less than the hairline's distance,
     so the hidden one stays hidden. */
  .mag-read__meta {
    overflow: hidden; column-gap: calc(2 * var(--mag-meta-apart) + 1px); padding: 4px; margin: -4px;
  }
  .mag-read__meta > .mag-meta__item {
    margin-left: calc(-1px - var(--mag-meta-apart)); padding-left: var(--mag-meta-apart);
    border-left: 1px solid var(--mn-gray-300);
  }
}
@media (hover: hover) {
  .mag-read__kicker .mag-read__tap:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mag-read__action:hover { color: var(--mn-green-700); }
}

/* ---------- Head picture ---------- */
/* The cover under the head (_article_banner.html; Figma 5470:9106, decision S2-4): a box of 25 : 12
   on the page's grid, with the ground of a photo on black. A picture that fills — a cut of its own,
   or a format that fits by itself — covers the box; any other stands whole in its middle
   (`--whole`; which of the two is said by the page, `article_head.head_picture`).
   Below 768 a picture that stands whole gets a box of 4 : 3: in 25 : 12 an upright picture would be
   133 wide on a phone.
   The picture is laid into the box rather than sizing it (its width and height are utilities in
   the markup): one that came back in another shape is fitted, it does not bend the box. */
.mag-banner { margin-top: var(--mag-read-lead); }
.mag-banner__frame {
  position: relative; aspect-ratio: 25 / 12; overflow: hidden;
  border-radius: var(--rounded-box); background: var(--mn-picture-ground);
}
.mag-banner__frame img { position: absolute; inset: 0; object-fit: cover; }
.mag-banner__frame--whole { aspect-ratio: 4 / 3; }
.mag-banner__frame--whole img { object-fit: contain; }
/* Caption and credit in one paragraph, 14/20 (a class in the markup). Drawn in gray 700. */
.mag-banner__caption { margin-top: 8px; color: var(--mn-gray-700); overflow-wrap: break-word; }
.mag-banner__caption a { text-decoration: underline; }
@media (min-width: 768px) {
  .mag-banner__frame--whole { aspect-ratio: 25 / 12; }
}

/* ---------- The text and its rail ---------- */
/* The box around the TEXT of an article, and only the text (article.html): the table of contents
   and the reading column. A grid at every width:
   - below 1024 ONE column, the reading column's 666 at the most, in the middle — the contents are
     a box above the text;
   - from 1024 the rail (199) and the reading column (666), 28 apart, at the LEFT of the page's
     grid: 893 fit into the 928 a window of 1024 has, and from a window of 1216 on — the grid's
     full 1120 — the reading column stands exactly in the middle of the page, as drawn.
   The reading column is ALWAYS the second column, also for an article without contents: the text
   then begins at the same place from article to article.
   A page of running text (text_page.html, S7: the terms, the privacy policy …) stands in the SAME
   box, with the same contents beside a long text — what changes here changes there.
   ⚠️ `align-items: start`: the rail sticks inside its cell, and a cell stretched to the text's
   height is what it sticks in — but the <nav> itself must not be stretched, or there is no room
   left for it to move. ⚠️ The box ends with the text: the flipbook below is not in it, so the rail
   lets go where the text ends. */
.mag-read__text {
  display: grid; grid-template-columns: minmax(0, var(--mag-prose-column)); justify-content: center;
  row-gap: var(--mag-read-lead); padding-top: var(--mag-section); padding-bottom: var(--mag-section);
}
.mag-read__column { min-width: 0; }
@media (min-width: 1024px) {
  .mag-read__text {
    grid-template-columns: var(--mag-toc) minmax(0, var(--mag-prose-column)); column-gap: var(--mag-toc-gap);
    justify-content: start; align-items: start;
  }
  .mag-read__column { grid-column: 2; }
}

/* ---------- Article text ---------- */
/* The text itself — the block `mag-prose` with its headings, lists and links — is a block of
   components.css ("Running text") since the pages of running text use it too (S7). What only an
   ARTICLE has in its text stands below, each under a class of this sheet.
   ⚠️ Every selector of this sheet is written out, one per comma — no list inside brackets
   (`:is(h2, h3)`): the sheet's tests part a rule's selectors at its commas. */

/* ---------- Notes and sources ---------- */
/* What an author typed into the text as a note or a source (decision S2-11; the markup comes from
   `richtext.signs_html` and _article_notes.html): a sign in the sentence, in the link's green and
   without an underline, and the two lists at the end of the text — 14/21, gray 800, numbered by
   their own words ("1." and "[1]", so the list carries no signs of its own).
   A sign and the entry it leads to keep a line of the text above them when they are jumped to,
   and the entry is tinted while it is the target. */
.mag-prose .mag-note-ref a {
  padding: 0 1px; font-weight: 600; text-decoration: none; scroll-margin-top: var(--mag-prose-line);
}
.mag-notes { row-gap: var(--mag-section-head); margin-top: var(--mag-prose-line); }
.mag-notes + .mag-notes { margin-top: var(--mag-section-head); }
.mag-notes__list { color: var(--mn-gray-800); }
.mag-notes__list li { scroll-margin-top: var(--mag-prose-line); overflow-wrap: anywhere; }
.mag-notes__list li:target { background: var(--mn-green-50); }

/* ---------- Table of contents ---------- */
/* The headings of an article's second and third level (_article_toc.html; Figma 5359:2236,
   decisions S2-7 and G4). ONE markup, a <details> closed in the source:

   Below 1024 a box over the text — a head of 44 with a chevron, opened by the reader; inside it
   the lines of the FIRST level only, 40 high (the second level would make it longer than the
   screen it sits on).
   From 1024 the rail left of the text: article.js opens the <details>, and its head is then for a
   screen reader only (clipped, not removed: it names the navigation). Every line carries a piece
   of the vertical line at its left, 4 wide — the lines stand without a gap, so the pieces are one
   line — and its words 12 from the rail's edge, the second level 24. The line being read
   (`aria-current`, set by article.js) is green, semibold and underlined, and so is its piece.
   That the rail sticks, how high it may be and that it scrolls by itself then are utilities at the
   <nav> (a length of the window is not written in this sheet).

   A line is a flex row so that its words stand in the middle of its least height; a long one wraps
   and grows (the longest has 102 characters — five lines in the rail). A chapter behind the paywall
   line is text with a small lock (S2-7), in the colour of every other line.
   Drawn is gray 500 for a line; built is gray 700 — 500 has 2.5 : 1 on white. */
.mag-toc { min-width: 0; }
.mag-toc__fold { border: 1px solid var(--mn-gray-300); border-radius: var(--rounded-box); }
.mag-toc__title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--mag-toc-head); padding: 0 12px; color: var(--mn-gray-900); cursor: pointer; list-style: none;
}
.mag-toc__title::-webkit-details-marker { display: none; }
.mag-toc__title:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: -2px; border-radius: var(--rounded-box); }
.mag-toc__fold[open] > .mag-toc__title .icon { transform: rotate(180deg); }
.mag-toc__list { padding: 0 12px 6px; }
.mag-toc__line {
  display: flex; align-items: center; min-height: var(--mag-toc-row); padding-top: 5px; padding-bottom: 5px;
  font-weight: 500; color: var(--mn-gray-700); overflow-wrap: anywhere;
}
/* The lock stands IN the line of its chapter's name, right behind the last word — also where the
   name wraps; a no-break space in the markup is the distance between the two. (Where the name
   fills its last line to the end, the lock stands alone on the next one: Chromium breaks in front
   of an inline box whatever precedes it, and a last word that may not wrap would widen the rail.)
   ⚠️ So the lock says its own `display`: an <svg> is a block by the build's base rules, and
   the platform's rule for an icon does not reach the page (its comment ends early, before the
   rule). Everywhere else in this sheet an icon is an item of a flex row, where that does not show. */
.mag-toc__lock { display: inline-block; vertical-align: -1px; }
/* The frame of the keyboard stands INSIDE a line: the rail scrolls by itself, and what leaves it
   is cut off. */
a.mag-toc__line:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: -2px; }
.mag-toc__sub { display: none; }
@media (min-width: 1024px) {
  .mag-toc__fold { border: 0; border-radius: 0; }
  /* Open, the head is heard and not seen. ⚠️ A <summary> stays in the order of the Tab key even
     so: article.js takes it out while it holds the rail open, and gives it back below 1024. */
  .mag-toc__fold[open] > .mag-toc__title {
    position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .mag-toc__list { padding: 0; }
  .mag-toc__line { padding-left: 8px; border-left: 4px solid var(--mn-gray-300); }
  .mag-toc__list > li:first-child > .mag-toc__line { border-top-left-radius: 2px; }
  .mag-toc__sub { display: block; }
  .mag-toc__sub .mag-toc__line { min-height: var(--mag-toc-row-sub); padding-left: var(--mag-toc-sub); }
  .mag-toc__line[aria-current] {
    font-weight: 600; color: var(--mn-green-500); border-left-color: var(--mn-green-500);
    text-decoration: underline; text-underline-offset: 2px;
  }
}
@media (hover: hover) {
  a.mag-toc__line:hover { color: var(--mn-gray-900); }
}

/* ---------- Fade ---------- */
/* The beginning of the text behind the paywall line (article.html; Figma 5364:1773, decision S2-1):
   about sixty words, cut on the SERVER (`paywall_view.fade`) — the page holds no more of the text
   than stands here — under a veil that runs from nothing at the top to the page's ground at 82 %
   of the box. No fixed height (drawn 150): the box is as high as its words, four to five lines in
   the reading column and eight to nine on a phone.
   The veil is decoration and takes no pointer. The plain gradient first, for a browser that drops
   `color-mix`. */
.mag-fade { position: relative; }
.mag-fade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--mn-surface) 82%);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--mn-surface) 0%, transparent), var(--mn-surface) 82%);
}

/* ---------- Notice at the paywall ---------- */
/* Where the free part ends (_article_paywall.html; Figma 5365:1775, decision S2-2): heading,
   sentence, the row "what still follows" between two hairlines — up to three small photos, the
   numbers of pictures and chapters, and under them the photos' credits in one line —, the first
   chapters by name, the button and, for a guest, the way to the login.
   It stands in the reading column, a line of the text below the last block — and 12 below the
   fade, where there is one. The button is the platform's atom, unchanged (44 high): below 768 as
   wide as the column, the line of the login under it; from 768 at least 180 wide, the line beside
   it. Type comes from the markup. */
.mag-paywall {
  display: flex; flex-direction: column; gap: var(--mag-paywall-gap); margin-top: var(--mag-prose-line);
  color: var(--mn-gray-900);
}
.mag-prose:has(> .mag-fade) + .mag-paywall { margin-top: 12px; }
.mag-paywall__more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--mag-paywall-apart);
  padding: var(--mag-paywall-pad) 0;
  border-top: 1px solid var(--mn-gray-200); border-bottom: 1px solid var(--mn-gray-200);
}
/* The photos: squares out of the middle of each picture, asked at twice this size. Decoration —
   no link, none larger. Three stay in one row on the narrowest phone (3 × 64 + 2 × 6 = 204). */
.mag-paywall__photos { display: flex; gap: 6px; }
.mag-paywall__photos img {
  width: var(--mag-paywall-photo); height: var(--mag-paywall-photo); object-fit: cover;
  border-radius: 6px; background: var(--mn-gray-200);
}
/* A number in the serif (a headline step in the markup) over its word in the meta row's type. */
.mag-paywall__count { display: flex; flex-direction: column; gap: 2px; }
.mag-paywall__word { font-size: var(--mag-meta-size); line-height: var(--mag-meta-line); font-weight: 500; color: var(--mn-gray-700); }
.mag-paywall__credits { color: var(--mn-gray-700); overflow-wrap: break-word; }
/* "Still to come", in spaced capitals by CSS, over the chapters: a list in one line that wraps,
   a dot on the middle between two of them. */
.mag-paywall__label { margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--mn-gray-700); }
.mag-paywall__names { display: flex; flex-wrap: wrap; color: var(--mn-gray-800); }
.mag-paywall__names li { overflow-wrap: break-word; min-width: 0; }
.mag-paywall__names li:not(:last-child)::after { content: "\00B7"; margin: 0 8px; }
.mag-paywall__actions { display: flex; flex-direction: column; gap: var(--mag-paywall-gap); }
.mag-paywall__signin { color: var(--mn-gray-700); }
/* Its link is the platform's link atom (the class in the markup), one line of 21 — enlarged to 37
   for a finger at the element itself, a padding taken back by a margin. */
.mag-paywall__link { padding: 8px 0; margin: -8px 0; }
.mag-paywall__link:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (min-width: 768px) {
  .mag-paywall__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mag-paywall__cta { min-width: var(--mag-paywall-cta); }
}

/* ---------- Cite ---------- */
/* The field of "cite" (_article_cite.html; Figma 5362:1774, decision D17): the short link and the
   two citations, each in a tinted field with "copy" above its right edge.
   It lies OVER the page and moves nothing: positioned against the row of the meta line
   (`.mag-read__bar`), below 768 over the page's full width, from 768 400 wide at the row's right
   edge. ⚠️ Its `top` stays unset on purpose: an absolutely positioned box without one keeps the
   place it would have in the flow — right under "cite", 8 lower by its margin — and that needs no
   length of its anchor. Neither the <details> nor the row of the actions may carry a `position`,
   or the field would be as narrow as they are.
   The surface of the teasers with a hairline around it and a deeper shadow below: it lies on text. */
.mag-cite__panel {
  position: absolute; z-index: 5; left: 0; right: 0; display: flex; flex-direction: column;
  gap: var(--mag-cite-gap); margin-top: 8px; padding: var(--mag-cite-pad);
  border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box); background: var(--mn-surface);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--mn-gray-900) 12%, transparent);
  color: var(--mn-gray-900); cursor: auto;
}
/* A group: its name at the left and "copy" at the right in one line, the field under both. */
.mag-cite__group { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.mag-cite__label { font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--mn-gray-700); }
/* "Copy": a target of 37 at the element itself, the padding taken back by a margin. */
.mag-cite__copy { padding: 8px 0; margin: -8px 0; color: var(--mn-green-600); }
.mag-cite__copy:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* The text to copy: it wraps anywhere (an address has no blank), and one click marks all of it. */
.mag-cite__field {
  grid-column: 1 / -1; padding: 10px 12px; border-radius: 8px; background: var(--mn-gray-100);
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
@media (min-width: 768px) {
  .mag-cite__panel { left: auto; width: var(--mag-cite); }
}
@media (hover: hover) {
  .mag-cite__copy:hover { color: var(--mn-green-700); }
}

/* ---------- The issue of an article ---------- */
/* The block under the text of an article that appeared in an issue (article.html; Figma 5359:2255,
   decision S2-3): "In Mineralica 2026-3", a sentence, the flipbook. A band of the page; heading and
   sentence stand on the page's grid (`shell-content` in the markup), the viewer is the flipbook
   package's and is not touched here. Its heading is where the pages in the head jump to, and keeps
   a line of the text above it then. */
.mag-read-issue { padding-top: var(--mag-section); padding-bottom: var(--mag-section); }
.mag-read-issue__head { padding-bottom: var(--mag-section-head); }
.mag-read-issue__head h2 { scroll-margin-top: var(--mag-prose-line); }
.mag-read-issue__head p { margin-top: 6px; color: var(--mn-gray-800); }

/* ---------- List head ---------- */
/* The plain head of a page that is a list — all articles, an author (articles.html, author.html;
   decisions S2-12, S2-13; no frame draws it): the title, and at its right what the page counts.
   On an author's page a photo above the name and a text below it, where they are stored; each
   takes a line of its own (a utility in the markup). Below 768 everything one below the other. */
.mag-list__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px var(--mag-gap);
  padding-top: var(--mag-list-top); padding-bottom: var(--mag-section-head);
}
.mag-list__count { color: var(--mn-gray-700); white-space: nowrap; }
.mag-list__photo {
  width: var(--mag-list-photo); height: var(--mag-list-photo); margin-bottom: 8px;
  border-radius: 9999px; object-fit: cover; background: var(--mn-gray-200);
}
/* ⚠️ The cap of the text's width stands on its paragraphs: on the box itself it would let the box
   share the title's line (a box that takes a whole line is one that is as wide as the line). */
.mag-list__bio { margin-top: 8px; color: var(--mn-gray-900); }
.mag-list__bio p { max-width: var(--mag-prose-column); }
@media (min-width: 768px) {
  .mag-list__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
}

/* ---------- Hidden stays hidden ---------- */
/* This sheet loads after tailwind.css: a `display` set above beats the build's hiding class and the
   attribute of the same name (same weight, later file). Said again for every block that sets one.
   ⚠️ Only these two spellings: a block of this list is never hidden at ONE width through a class
   with a variant in front — it is hidden through an element around it
   (magazine/tests/test_components_sheet.py reads every template for it).
   "Share" and the three "copy" buttons rely on this: they stand hidden in the markup until
   article.js shows them. */
.mag-read__bar[hidden], .mag-read__bar.hidden, .mag-read__actions[hidden], .mag-read__actions.hidden,
.mag-read__action[hidden], .mag-read__action.hidden, .mag-read__text[hidden], .mag-read__text.hidden,
.mag-toc__title[hidden], .mag-toc__title.hidden, .mag-toc__line[hidden], .mag-toc__line.hidden,
.mag-toc__sub[hidden], .mag-toc__sub.hidden, .mag-toc__lock[hidden], .mag-toc__lock.hidden,
.mag-paywall[hidden], .mag-paywall.hidden, .mag-paywall__more[hidden], .mag-paywall__more.hidden,
.mag-paywall__photos[hidden], .mag-paywall__photos.hidden, .mag-paywall__count[hidden], .mag-paywall__count.hidden,
.mag-paywall__names[hidden], .mag-paywall__names.hidden, .mag-paywall__actions[hidden], .mag-paywall__actions.hidden,
.mag-cite__panel[hidden], .mag-cite__panel.hidden, .mag-cite__group[hidden], .mag-cite__group.hidden,
.mag-list__head[hidden], .mag-list__head.hidden { display: none; }