/* components.css (magazine) — the building blocks the magazine's pages share: its marks, its meta
   row, its grids, the distances of a section, the guard of a long title (docs/DESIGN_PLATFORM_PLAN.md
   §7a.8, built before the home page so that the page packages — home, article, issues, shows — all
   build against the same names); and, since the home page's package (S1,
   docs/design-kickoff/S1_BAUVORLAGE.md §2): the teasers of an article and of an issue, the jump
   list and the groups along a line — and what its two pages are put together from: the head of a
   page as a band (tinted and dark), the block of the current issue, the list of the issues, the
   search row. Since the pages of text (S7, docs/design-kickoff/S7.md) also the running text of an
   article, which they share, and what such a page needs on paper.

   Load order in the magazine's layout: tailwind.css → the platform's components.css (the atoms) →
   the platform's shell.css → THIS file → the sheets of the page packages (article.css, issue.css,
   shows.css) → app.css. After the atoms, so a mark here can colour the platform's pill; before
   app.css, which keeps the few rules that are no building block. The admin has its own layout and
   does not load this file.

   ⚠️ Every building block of this file is named `mag-…`. DaisyUI defines `.hero`, `.card`, `.stat`,
   `.stack`, `.steps`, `.badge`, `.timeline` and more, and the magazine's build carries several of
   them: a block of the same name would inherit their rules — a grid that centres its content, a
   padding from nowhere — without an error anywhere. The one exception is a colour version of the
   platform's pill, which follows the pill's own pattern (`pill-…`). And no name begins with the word
   the pages find their standfirst by (magazine/tests/test_components_sheet.py holds all of it).

   Colours only as var(--mn-…) (D2): 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. A rule
   further down says `var(--mag-…)` where it sets a size. A page package has a sheet of its own
   with a block of the same form at ITS head, under the same prefix: it may read a name defined here
   and never defines one again (magazine/tests/sheet_rules.py). Never `--atom-…` or `--mn-size-…`:
   those are the platform's, and a sheet loaded after it that set one would resize every button or
   headline of the app (mineralica/tests/test_scale.py). */

/* ---------- The scale ---------- */
/* The sizes of the magazine's blocks, named in ONE place: the next change of scale is this block.
   Built is "Stufe C" — about three quarters of what the frames draw (§7a.7 Punkt 18; the table of
   the remaining sizes, decision G-2); every line says what the frame draws. The values here are the
   phone's and the tablet's, what differs from 1024 stands in the second block — the width the
   headline steps and the shell switch at.

   Named is what the scale decides: a type size with its line, an icon, and the distances of a page.
   Not named, because a change of scale leaves it alone: hairlines, radii, and a gap of a pixel or two.
   ⚠️ An icon's size is set by this sheet (`--mag-…-glyph`). The number a macro hands to `icon(…)` is
   the same one, for the moment before the sheet is there. */
:root {
  /* A section of a page. */
  --mag-section: 28px;                                       /* above and below a section — drawn 56 */
  --mag-section-head: 12px;                                  /* a section's head · its content — drawn 24 */
  --mag-gap: 12px;                                           /* between two cards of a grid — drawn 16 */
  --mag-section-end: 4px;                                    /* below the LAST section of a page; <main> adds its
                                                                own 24 — drawn 56 down to the foot */

  /* The meta row: small facts in a line, each with an icon or without. */
  --mag-meta-glyph: 14px;                                    /* — drawn 16 to 18 */
  --mag-meta-size: 13px;    --mag-meta-line: 18px;           /* — drawn 12 to 14 */
  --mag-meta-gap: 6px;                                       /* icon · words — drawn 6 to 8 */
  --mag-meta-apart: 12px;                                    /* between two facts — drawn 14 to 20 */

  /* The teasers: an article as a tile and as a row, an issue. */
  --mag-card-pad: 12px;                                      /* inside a teaser — drawn 16 (a tile 20 above and below) */
  --mag-card-kicker: 6px;                                    /* the line over the title · the title — drawn 8 */
  --mag-card-text: 10px;                                     /* title · text, and the least room above a tile's byline — drawn 14 */
  --mag-card-by: 8px;                                        /* title · byline in a row — drawn 10 */
  --mag-card-mark: 10px;                                     /* a mark from the top and the left of a tile's picture,
                                                                "Draft" over an issue's cover — drawn 12 */
  --mag-row-picture: 96px;                                   /* the picture of a row — drawn 176 */
  --mag-row-gap: 12px;                                       /* picture · words of a row — drawn 20 */
  --mag-row-mark: 6px;                                       /* a mark in the picture of a row — drawn 8 */
  --mag-issue-cover-col: 204px;                              /* the column an issue's cover stands in — drawn 273 */
  --mag-issue-cover: 176px;                                  /* how HIGH the cover stands — drawn 276: the issue
                                                                itself, in a box of 321 with see-through edges */
  --mag-issue-gap: 12px;                                     /* between title, facts, line, text and link — drawn 24 */
  --mag-issue-least: 264px;                                  /* an issue's least height, from 1024 only — drawn 349 */

  /* The jump list: a row of pills that lead to the groups of a page. */
  --mag-jump-size: 13px;    --mag-jump-line: 18px;           /* — drawn 14/21; with it a pill is 32 high (drawn 39) */

  /* Groups along a line, each with a dot and a mark (the years of the issue overview). */
  --mag-years-rail: 18px;                                    /* the room of line and dots, left of the groups — drawn 24 */
  --mag-years-dot: 12px;                                     /* — drawn 16 */
  --mag-years-apart: 32px;                                   /* between two groups — drawn 64 */
  --mag-years-top: 20px;                                     /* above the first group — drawn 32 */
  --mag-years-end: 20px;                                     /* below the last one; <main> adds its own 24 — drawn 72 */

  /* The head of a page, from edge to edge of the window: tinted (issue overview) or dark (home). */
  --mag-head-pad: 28px;                                      /* above and below, in both heads — drawn 48 */
  --mag-head-text: 480px;                                    /* how wide the words run — drawn 560 and 596 */
  --mag-head-cta: 20px;                                      /* text · buttons; words · picture — drawn 40 */
  --mag-head-least: 320px;                                   /* the tinted head's least height, from 1024 only — drawn 415 */
  --mag-hero-least: 400px;                                   /* the dark head's, from 1024 only — drawn 520 */
  --mag-hero-photo: 200px;                                   /* the header photo as a strip under the buttons, below 768 — not drawn */
  --mag-hero-motif: 220px;                                   /* the open issue in the dark head, from 768 — not drawn */
  /* The three newest covers in the tinted head: how HIGH each stands (drawn 268, 243, 218 — the
     issue itself, in boxes of 312, 282, 254 with see-through edges) and how far one covers the next. */
  --mag-covers-1: 160px;
  --mag-covers-2: 146px;
  --mag-covers-3: 132px;
  --mag-covers-lap: 24px;                                    /* — drawn 42 and 40 */

  /* The pages of the package: home, issue overview. */
  --mag-home-current-end: 8px;                               /* below the block of the current issue — drawn 16 */
  --mag-search: 320px;                                       /* the search field of the overview, from 768 — drawn 440 */
  --mag-search-glyph: 18px;                                  /* its magnifier — drawn 24 */

  /* The running text: an article's, and a page of text (decision S2-N1; S7). */
  --mag-prose-size: 17px;   --mag-prose-line: 26px;          /* the running text, at every width — drawn 16/27 */
  --mag-prose-h2-size: 22px;   --mag-prose-h2-line: 28px;    /* a heading of the second level — drawn 32/41 */
  --mag-prose-h3-size: 20px;   --mag-prose-h3-line: 26px;    /* … of the third, at every width — not drawn */
  --mag-prose-indent: 20px;                                  /* how far a list stands in — not drawn */
  --mag-prose-table-size: 14px;   --mag-prose-table-line: 20px;   /* a table in the text — not drawn */
  --mag-prose-code-size: 15px;                               /* a name set in the fixed-width face, in a sentence — not drawn */
}
@media (min-width: 1024px) {
  :root {
    --mag-section: 40px;
    --mag-section-head: 16px;
    --mag-gap: 16px;
    --mag-section-end: 16px;
    --mag-meta-apart: 14px;
    --mag-card-pad: 16px;
    --mag-row-picture: 132px;
    --mag-row-gap: 16px;
    --mag-issue-cover: 208px;
    --mag-issue-gap: 16px;
    --mag-years-apart: 48px;
    --mag-years-top: 24px;
    --mag-years-end: 32px;
    --mag-head-pad: 36px;
    --mag-head-cta: 28px;
    --mag-hero-motif: 300px;
    --mag-covers-1: 200px;
    --mag-covers-2: 182px;
    --mag-covers-3: 164px;
    --mag-covers-lap: 30px;
    --mag-home-current-end: 12px;
    --mag-prose-h2-size: 24px;
    --mag-prose-h2-line: 32px;
  }
}

/* ---------- Marks ---------- */
/* A mark is the platform's tag pill (24 high, 12/16, icon 14 — its geometry is the atoms') in a
   colour of the magazine: `pill("Free", variant="free")` from ui/_pill.html. "FREE" stands wherever a
   reader gets the whole text without a subscription, "Show week" at the weeks of Tucson, Denver,
   Munich and Sainte-Marie. Both in the calendar's violet on its tint; they are two names, because
   they say two things and one of them may change its colour alone. The marks of the show pages
   (major show, past, canceled) come with their pages. */
.pill-free, .pill-show-week { background: var(--mn-show-week-surface); color: var(--mn-show-week); }
/* "Draft" over an issue the public does not see yet — only ever in the admin's preview — in the
   colours of a warning; and the mark of a year, the heading of a group on the issue overview
   (`.mag-years`), in the green of the line it stands at. Rules of their own, not names in the list
   above: a test holds exactly those two together. */
.pill-draft { background: var(--mn-warning-surface); color: var(--mn-warning-strong); }
.pill-year { background: var(--mn-green-100); color: var(--mn-green-700); }
/* The mark over the line of a page's head ("ALL ISSUES", with an icon): today the two values of
   "FREE" — and a rule of its own for the same reason, it says something else and may change alone. */
.pill-head { background: var(--mn-show-week-surface); color: var(--mn-show-week); }

/* ---------- Meta row ---------- */
/* Small facts in one line — "Sep 2026 · 68 pages", a show's place and hours — each with an icon of
   14 or without (ui/_meta_row.html). Smaller than the platform's `.meta-item` (icon 18, value 14 over
   a label), which is the marketplace's attribute row. The row wraps; a fact does not break apart
   from its icon. A fact longer than the row — a show's website, an address of one word — takes
   lines of its own, and a single word wider than the column breaks where the line ends: the words
   are an item of the fact beside its icon, and without a least width of nothing they would stay as
   wide as their longest word (measured: 64 px out of a column of 210). */
.mag-meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--mag-meta-apart); row-gap: 2px;
  font-size: var(--mag-meta-size); line-height: var(--mag-meta-line); font-weight: 500; color: var(--mn-gray-700);
}
.mag-meta__item { display: inline-flex; align-items: center; gap: var(--mag-meta-gap); min-width: 0; }
.mag-meta__item > span { min-width: 0; overflow-wrap: break-word; }
.mag-meta__item .icon, .mag-meta__item svg { flex: none; width: var(--mag-meta-glyph); height: var(--mag-meta-glyph); }

/* ---------- Grids ---------- */
/* The grids of cards, by NAME: one column below 768, two up to 1023, from 1024 the number the class
   says. Classes and not a row of utilities, because a macro cannot put a utility together from a
   number (the build only carries what it finds written out), and the gap then stands in one place.
   Every column is `minmax(0, 1fr)`: a plain `1fr` is at least as wide as its longest word, and one
   long German title would push its column wider than its neighbours. */
.mag-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-gap); }
@media (min-width: 768px) {
  .mag-grid--2, .mag-grid--3, .mag-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mag-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mag-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Section ---------- */
/* A section of a page keeps its distance above and below as PADDING: a section may be a band with a
   ground of its own, and on a page with bands (shell.css, `.shell-page--bands`) margins between two
   sections add up instead of collapsing. Its head (ui/_section_head.html has no margin of its own)
   takes the distance to what follows. */
.mag-section { padding-top: var(--mag-section); padding-bottom: var(--mag-section); }
.mag-section__head { margin-bottom: var(--mag-section-head); }
/* Two versions of what stands BELOW a section — both after the rule above, which they outweigh by
   coming later, not by weight.
   `--end`: the last section of a page. <main> keeps its own 24 at the bottom, and with a whole
   section's distance on top of that the foot stood 52 · 64 away; so 28 · 40, drawn 56.
   `--open`: a section whose content brings the distance below itself (the groups by year of the
   issue overview stand IN the section "All issues" and end with their own). */
.mag-section--end { padding-bottom: var(--mag-section-end); }
.mag-section--open { padding-bottom: 0; }

/* ---------- Teasers ---------- */
/* An article as a tile and as a row beside its picture (ui/_article_card.html), and an issue
   (ui/_issue_card.html). The three share their surface: white, the radius of a box, no border, and
   a soft shadow that reaches UP more than down (drawn 0 / −8, blur 44, black 8 %).

   ONE link over the teaser and never a link inside a link: the root is an <article> and no <a>.
   The link is the title; its `::after` is laid over the whole teaser, so a click anywhere — on the
   picture, on the text — is a click on the title. ⚠️ What that needs:
   - the root is `position: relative`, and NOTHING between it and the link carries a `position`
     (text column, heading) — the `::after` would be laid over that element instead;
   - any other link of a teaser (an issue's "read the issue" and "order this issue in print") is
     lifted above it (`position: relative; z-index: 1`), and nothing else is;
   - the teaser does not clip (`overflow` stays visible), or the focus ring around it was cut; the
     tile's picture rounds its own upper corners instead.
   Hover and focus are not drawn anywhere; built: a deeper shadow and the title underlined — no
   lift, no zoom — and a ring of 2 around the whole teaser. Hover only where there is a pointer
   that hovers, and through `:has()`: a teaser without a link (no page in this language) does not
   pretend to be one, and pointing at the second link does not light up the first.
   ⚠️ The shadow is ALL that parts a white teaser from a white page. A browser without `color-mix`
   drops that declaration, so a hairline in a solid tone stands before it (as in shell.css). */
.mag-article, .mag-issue {
  position: relative; background: var(--mn-surface); border-radius: var(--rounded-box);
  box-shadow: 0 0 0 1px var(--mn-gray-200);
  box-shadow: 0 -6px 32px color-mix(in srgb, var(--mn-gray-900) 8%, transparent);
}
.mag-article__link::after, .mag-issue__link::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--rounded-box);
}
.mag-article__link:focus-visible, .mag-issue__link:focus-visible { outline: none; }
.mag-article__link:focus-visible::after, .mag-issue__link:focus-visible::after {
  outline: 2px solid var(--mn-green-600); outline-offset: 2px;
}
@media (hover: hover) {
  .mag-article:has(.mag-article__link:hover), .mag-issue:has(.mag-issue__link:hover) {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--mn-gray-900) 12%, transparent);
  }
  .mag-article__link:hover, .mag-issue__link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mag-issue__buy:hover { color: var(--mn-gray-900); }
}

/* --- an article: the tile (Figma 5350:1392), and the row beside its picture (5350:1436) --- */
/* The tile fills the column its grid gives it; the grid makes the tiles of a row equally high, and
   the byline is pushed to the bottom of each. Type comes from the text scale as a class in the
   markup (text 14/21, the line over the title 12/18, the title a headline step): no rule here
   writes a type size.
   The picture is a square — the article's own (`cover_image`, design decision G-6); without a
   cover the square stays, tinted, so the tiles of a row keep their lines. */
.mag-article { display: flex; flex-direction: column; }
.mag-article__picture {
  position: relative; flex: none; overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--mn-gray-200); border-radius: var(--rounded-box) var(--rounded-box) 0 0;
}
/* Laid into the square rather than sized by it: a picture that came back in another shape is cut
   to the square instead of bending it (width and height are utilities in the markup). */
.mag-article__picture img { position: absolute; inset: 0; object-fit: cover; }
.mag-article__mark { position: absolute; top: var(--mag-card-mark); left: var(--mag-card-mark); }
/* A second mark on the same picture (a draft that is free as well, in the admin's preview) stands
   in the corner BELOW the first: two marks never lie on each other. ⚠️ Not beside it — a row's
   picture is 96 wide on a phone, and "Entwurf" and "Frei" side by side are wider than that. */
.mag-article__mark--end { top: auto; bottom: var(--mag-card-mark); }
/* ⚠️ `min-width: 0` on the WHOLE text column, not on the title alone: it is an item of a row beside
   the picture, and by itself at least as wide as its longest word — the issue's title in capitals,
   a name without a blank (docs/DESIGN_BUILD_GUIDE.md §6). */
.mag-article__body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; padding: var(--mag-card-pad); }
/* The line over the title: where the article appeared, left, and when, right — in capitals by CSS
   (the markup keeps the words as they are written). In a narrow column it wraps, the date under
   the issue; and either half breaks inside a word if it must: "Sonderheft Mineralienfotografie" in
   spaced capitals is wider than the 196 px a row has on a phone. The date is drawn in gray 600 —
   4.3 : 1 at 12 px, so it is built one step darker. */
.mag-article__kicker {
  display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px;
  margin-bottom: var(--mag-card-kicker); text-transform: uppercase; letter-spacing: 1.2px;
}
.mag-article__kicker > * { min-width: 0; overflow-wrap: break-word; }
.mag-article__issue { font-weight: 600; color: var(--mn-show-week); }
.mag-article__date { display: inline-flex; align-items: center; gap: var(--mag-meta-gap); font-weight: 500; color: var(--mn-gray-700); }
.mag-article__date .icon, .mag-article__date svg { flex: none; width: var(--mag-meta-glyph); height: var(--mag-meta-glyph); }
/* Three lines of the teaser, then an ellipsis (the build has no utility for it). */
.mag-article__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin-top: var(--mag-card-text); color: var(--mn-gray-900);
}
.mag-article__by { margin-top: auto; padding-top: var(--mag-card-text); color: var(--mn-gray-900); }

/* The row: picture left, words right, both at the top — also where a grid makes the row higher
   than its content (the block of the current issue on the home page). No text: the frame has none. */
.mag-article--row { flex-direction: row; align-items: flex-start; gap: var(--mag-row-gap); padding: var(--mag-card-pad); }
.mag-article--row .mag-article__picture { width: var(--mag-row-picture); border-radius: var(--rounded-box); }
.mag-article--row .mag-article__mark { top: var(--mag-row-mark); left: var(--mag-row-mark); }
.mag-article--row .mag-article__mark--end { top: auto; bottom: var(--mag-row-mark); }
.mag-article--row .mag-article__body { padding: 0; }
.mag-article--row .mag-article__by { margin-top: var(--mag-card-by); padding-top: 0; }

/* --- an issue (Figma 5355:1582) --- */
/* Cover and words side by side, or the cover above the words — by the teaser's OWN width, not the
   window's: two of them share a row on a tablet (354 wide each: stacked), one alone has the row
   (702: side by side). So the root is a container, and its one child, the frame, is what the
   query rearranges (an element cannot ask about itself). 440 is the width from which a column of
   words beside the cover still reads.
   ⚠️ `container-type: inline-size` takes the teaser's own width away: in a box that is sized by
   its content (a flex item without a width, a column `auto`) it collapses to nothing. It always
   stands in a column `minmax(0, 1fr)` or a box with a width.
   A browser without container queries keeps the stacked form at every width.
   Root AND frame are grids: the frame then fills the height a page's grid gives the teaser
   (equally high teasers per row), and the words can stand at the top or — `--centered`, the block
   of the current issue — in the middle of it. That is for the two side by side. Stacked, cover and
   words keep to the top (`align-content`): spread over a teaser that its row made higher, the
   cover of a short one stood lower than its neighbour's (seen at 768, two in a row). */
.mag-issue { display: grid; container-type: inline-size; }
.mag-issue__frame { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.mag-issue__cover {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: var(--mag-card-pad) var(--mag-card-pad) 0;
}
/* "Draft", laid over the cover's column — it moves nothing. ⚠️ It lies over the cover only because
   the macro prints it AFTER the picture: the cut-out's `filter` makes the picture a layer of its
   own, painted with the positioned boxes in the order of the markup, and a `z-index` here is not
   the way out (only the second link is lifted, see above). */
.mag-issue__mark { position: absolute; top: var(--mag-card-mark); left: var(--mag-card-mark); }
/* The cut-out: the standing cover without a ground, sized by its HEIGHT (the address asks for one
   axis as well). ⚠️ No box around it — no ground, no radius, no box shadow: they follow the
   picture's rectangle, and the cover's own corners are see-through. Its shadow is `.mag-cutout`. */
.mag-issue__cutout { height: var(--mag-issue-cover); width: auto; object-fit: contain; }
/* The fallback, an issue without a cut-out: its photo on white, a square with its own ground. */
.mag-issue__photo { max-width: var(--mag-issue-cover-col); border-radius: var(--rounded-box); }
/* No picture at all: a tinted place in the cover's shape rather than a hole — and no title in it,
   the title stands beside it. */
.mag-issue__blank { display: block; height: var(--mag-issue-cover); aspect-ratio: 7 / 10; background: var(--mn-gray-200); border-radius: 2px; }
.mag-issue__body {
  display: flex; flex-direction: column; gap: var(--mag-issue-gap); align-self: start; min-width: 0;
  padding: var(--mag-card-pad);
}
.mag-issue--centered .mag-issue__body { align-self: center; }
.mag-issue__rule { margin: 0; border: 0; border-top: 1px solid var(--mn-gray-200); }
.mag-issue__text { color: var(--mn-gray-900); }
/* "Read the issue →" and, where the shop sells it, "Order this issue in print": two real links
   beside the teaser's own, its title. The first jumps to the book on the issue's page (S3-N1) —
   another place than the title's, so it is a link of its own: the platform's link atom (its class
   in the markup; this sheet names no class of the atoms), lifted above the title's layer, or a
   click on it would be a click on the title. The second is quiet, in the meta row's type. Each
   has a target of 36 that does not make the line higher. */
.mag-issue__links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--mag-card-pad); row-gap: 6px; }
.mag-issue__read { position: relative; z-index: 1; padding: 8px 0; margin: -8px 0; }
.mag-issue__buy {
  position: relative; z-index: 1; padding: 9px 0; margin: -9px 0;
  font-size: var(--mag-meta-size); line-height: var(--mag-meta-line); font-weight: 500;
  color: var(--mn-gray-700); text-decoration: underline;
}
/* Reached by keyboard it shows the ring of the teaser and of a jump pill — left to the browser it
   was a thin blue one of another kind, right beside the teaser's green. */
.mag-issue__buy:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* Side by side, the cover's column is the drawn 204 of 552 — 37 % of a narrower teaser.
   ⚠️ Not a larger share, tempting as it is: at 456 (two in a row in a window of 1024) the cover
   stands only 11 px from the teaser's edge. But the words then have 259 px, and the facts under
   the title — "DE/EN · Sept. 2026 · 68 Seiten" — need up to 255 to stay on one line (measured for
   every month in both languages). With 40 % the cover had 18 px and the facts wrapped in most
   teasers of such a page, each a line higher than its neighbour. What a tight teaser lacks is not
   to be taken from the words. */
@container (min-width: 440px) {
  .mag-issue__frame {
    grid-template-columns: minmax(0, min(37%, var(--mag-issue-cover-col))) minmax(0, 1fr); align-content: stretch;
  }
  .mag-issue__cover { padding: var(--mag-card-pad) 0; }
  .mag-issue__body { padding-left: 12px; }
}
@media (min-width: 1024px) {
  .mag-issue { min-height: var(--mag-issue-least); }
}

/* The shadow of a cut-out on a light ground: a `filter`, which follows the cover's own outline
   (estimated from the frame's fill: about a quarter below, less at the sides). Used by the issue's
   teaser and by the covers in the head of the issue overview. */
.mag-cutout { filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--mn-gray-900) 35%, transparent)); }

/* ---------- Jump list ---------- */
/* A row of anchors to the groups of a page (ui/_year_groups.html, `jump_list`; Figma 5370:1874):
   a word, then a pill per group. Plain links — no script, nothing sticks, nothing follows the
   scrolling. Many pills wrap; the row never scrolls sideways.
   A pill is 32 high (its line of 18, 6 above and below, the border); the LINK around it is 36,
   2 above and below at the element itself — a target enlarged by a pseudo-element is not what a
   finger or the measuring tool sees. */
.mag-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  font-size: var(--mag-jump-size); line-height: var(--mag-jump-line);
}
.mag-jump__label { color: var(--mn-gray-700); }
.mag-jump__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.mag-jump__link { display: inline-flex; padding: 2px 0; }
.mag-jump__pill {
  padding: 6px 12px; border: 1px solid var(--mn-gray-300); border-radius: 9999px;
  background: var(--mn-surface); font-weight: 500; color: var(--mn-green-700); white-space: nowrap;
}
.mag-jump__link:focus-visible { outline: none; }
.mag-jump__link:focus-visible .mag-jump__pill { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (hover: hover) {
  .mag-jump__link:hover .mag-jump__pill { border-color: var(--mn-green-500); }
}

/* ---------- Groups along a line ---------- */
/* Groups one below the other at a vertical line, each with a dot on the line and a mark beside it
   (ui/_year_groups.html, `year_groups` / `year_group`; Figma 5370:1886): the years of the issue
   overview. The mark is the platform's pill in the colours of `.pill-year`, as the CONTENT of the
   group's heading — the element orders the outline, its look is the mark.

   The rail (line and dots) stands left of the groups: from 1024 in the page's margin, where the
   shell keeps at least 48 free; below, INSIDE the grid — mark and content move in by the rail.
   The line begins in the first group's dot, runs through the distance between two groups and ends
   with the last content. It is three pieces, so that no rule has to know how high a mark is: the
   head's `::after` (in the first group only its lower half — the gradient), the body's `::before`
   (with the body's paddings, which is why the distances of a group are paddings of its body), and
   the dot as an item of the head's row, centred by the row.
   The line's middle is 12 left of the content, the dot ends 6 before the mark. */
.mag-years { padding: var(--mag-years-top) 0 var(--mag-years-end) var(--mag-years-rail); }
.mag-years__group { scroll-margin-top: var(--mag-years-top); }
.mag-years__head { position: relative; display: flex; align-items: center; }
.mag-years__head::before {
  content: ""; flex: none; width: var(--mag-years-dot); height: var(--mag-years-dot);
  margin-left: calc(-1 * var(--mag-years-rail)); margin-right: 6px;
  border-radius: 9999px; background: var(--mn-green-500);
}
.mag-years__head::after, .mag-years__body::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  left: calc(var(--mag-years-dot) / 2 - var(--mag-years-rail) - 1px); background: var(--mn-green-500);
}
.mag-years__group:first-child .mag-years__head::after {
  background: linear-gradient(to bottom, transparent 50%, var(--mn-green-500) 50%);
}
/* The heading holds the pill and nothing else; as a row it is exactly as high as the pill (as a
   line of text it would add the room under a baseline). No step and no serif: it is a mark. */
.mag-years__mark { display: flex; }
.mag-years__body { position: relative; padding-top: var(--mag-section-head); }
.mag-years__group:not(:last-child) .mag-years__body { padding-bottom: var(--mag-years-apart); }
@media (min-width: 1024px) {
  .mag-years { padding-left: 0; }
}

/* ---------- Page head ---------- */
/* The head of a page as a band from edge to edge of the window (shell.css, `.shell-band`), its
   content back on the page's grid (`.shell-content`): tinted for the issue overview (Figma
   5370:1835) — later the shows, the search — and dark for the home page (5343:849). A contract of
   markup rather than a macro, because what stands in a head differs per page; the two that exist
   are _home_head.html and _issues_head.html.

     <div class="shell-band mag-head mag-head--tint">            (or mag-head--dark)
       <div class="shell-content mag-head__inner">
         <div class="mag-head__text"> mark · line · lead · actions · the line below them </div>
         <div class="mag-head__aside"> the page's picture </div>
       </div>
     </div>

   Below 768 one column, the buttons one below the other and as wide as the words; from 768 the
   words at the left and the picture at the right, both in the middle of the band's height, the
   buttons side by side. The SIZES switch at 1024 only, like everything in this sheet. From 1024 a
   head is at least as high as three quarters of the drawn one; below that as high as its content.
   ⚠️ The band itself stays a plain block. Its inner `.shell-content` centres itself with auto
   margins — as an item of a flex or grid band it would shrink to its content instead of filling
   the grid. So the least height stands on the INNER row, less the band's two paddings.
   ⚠️ No length in per cent in a size or a distance of this sheet (its test reads them): what has
   to fill something does so through a utility in the markup. In a gradient and a mask they are fine.
   ⚠️ The buttons are the platform's atom, unchanged (44 high): no height class on them. */
.mag-head { padding-top: var(--mag-head-pad); padding-bottom: var(--mag-head-pad); }
.mag-head--tint { background: var(--mn-gray-75); }
/* Dark: a soft glow on gray 900, a little right of and below the middle (drawn tilted by 11°,
   built upright). The solid tone first, for a browser that drops the gradient. The band is a
   stacking context of its own (`isolation`): the header photo is laid BEHIND the words inside it,
   and blends with the band's ground and nothing beyond it. */
.mag-head--dark {
  position: relative; isolation: isolate; color: var(--mn-white);
  background: var(--mn-gray-900);
  background: radial-gradient(ellipse 47% 47% at 56% 63%, var(--mn-head-glow), var(--mn-gray-900));
}
.mag-head__inner { display: flex; flex-direction: column; }
/* ⚠️ `min-width: 0`: an item of the row from 768 — without it the lead would hold the words as
   wide as its longest line and push the picture out of the grid. */
.mag-head__text { min-width: 0; max-width: var(--mag-head-text); }
/* The mark's line is exactly as high as the pill (as a line of text it would add the room under a
   baseline — the same reason as at a year's mark). */
.mag-head__mark { display: flex; margin-bottom: 12px; }
.mag-head__line { text-wrap: balance; overflow-wrap: break-word; }
.mag-head__lead { margin-top: 12px; }
.mag-head__actions { display: flex; flex-direction: column; gap: 12px; margin-top: var(--mag-head-cta); }
/* The line under the buttons: a question with a link (a guest on the overview), or a link alone
   (a subscriber). Where there is no button above it — a subscriber, and no issue is published —
   it keeps the buttons' distance to the text. */
.mag-head__more { margin-top: 10px; color: var(--mn-gray-700); }
.mag-head__lead + .mag-head__more { margin-top: var(--mag-head-cta); }
/* 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, as the atom does it for
   "View all". */
.mag-head__link { padding: 8px 0; margin: -8px 0; }
.mag-head__link:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* On the dark band: the link quiet and light, and every focus frame light — the green of the
   atoms does not stand out from gray 900. */
.mag-head--dark .mag-head__link { color: var(--mn-gray-50); font-weight: 500; }
.mag-head--dark .mag-head__button:focus-visible, .mag-head--dark .mag-head__link:focus-visible {
  outline: 2px solid var(--mn-gray-50); outline-offset: 2px;
}
/* The second button on the dark band: a light edge and light words, no surface (drawn so). A class
   beside the atom's, which keeps its height, type and padding. */
.mag-head__ghost { background-color: transparent; border-color: var(--mn-gray-50); color: var(--mn-gray-50); }
/* The picture's side. In the tinted head it comes FIRST below 768 — the covers above the mark —
   while the words stay first in the markup. */
.mag-head__aside--first { order: -1; margin-bottom: var(--mag-head-cta); }

/* --- the dark head's pictures: the header photo of an issue, else the open issue --- */
/* The photo is an opaque picture (the uploader stores no transparency), usually a specimen on
   black: `lighten` lets the black go under in the band, a mask lets the picture fade in instead
   of beginning at an edge. Below 768 a strip under the buttons, fading in from above; from 768 it
   covers the band's right half up to the WINDOW's edge (a child of the band, not of the grid — its
   width is a utility in the markup), fading in from the left.
   ⚠️ It follows the content in the markup (on a phone it follows the buttons) and is laid behind
   it by a layer below the band's own — the one `z-index` of this sheet besides the second link of
   an issue's teaser. Not proven on a real photo yet: no issue has one. */
.mag-head__photo {
  height: var(--mag-hero-photo); margin-top: var(--mag-head-cta); overflow: hidden; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--mn-gray-900) 28%);
  mask-image: linear-gradient(to bottom, transparent, var(--mn-gray-900) 28%);
}
.mag-head__photo img { object-fit: cover; }
/* A strip nothing follows — no credit — reaches the band's lower edge, instead of ending in a hard
   line above a dark stripe of padding. */
.mag-head__photo:last-child { margin-bottom: calc(-1 * var(--mag-head-pad)); }
/* Who took it — on the grid (the element carries `shell-content` as well), at the left: at the
   right it lay on the picture. A line of its own in the flow of the band, 12 above the band's
   lower edge: under the strip below 768, under the words from there (the photo is out of the flow
   then). ⚠️ In the flow on purpose. Laid over the band's lower padding instead, it touched the
   buttons wherever the words fill the band — 768 to 1023 always, and from 1024 with a headline of
   three lines (seen in the kitchen sink). The margin below takes the band's padding back to 12. */
.mag-head__credit { margin-top: 12px; margin-bottom: calc(12px - var(--mag-head-pad)); color: var(--mn-gray-500); }
/* Without a photo: the current issue lying open, cut out, with the shadow it was rendered with —
   sized by its HEIGHT, no box around it. From 768 only: on a phone the issue's cover follows
   right below the head. */
.mag-head__motif { display: none; height: var(--mag-hero-motif); width: auto; max-width: none; }

/* --- the tinted head's picture: the newest covers, staggered (Figma 5370:1857) --- */
/* Up to three cut-outs on one axis, the newest in front at the left, each older one behind it to
   the right and a step smaller. ⚠️ They are printed OLDEST first and laid out from the right: what
   comes later in the markup is painted over what comes earlier (each cover is a layer of its own,
   through the filter of its shadow), so the newest lies in front without any layer being named.
   Size and overlap hang on the place counted from the END — two covers are the front and the
   middle one, a single cover is the front one. Each has its own shadow (`.mag-cutout`). */
.mag-covers { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
.mag-covers__cover { flex: none; height: var(--mag-covers-3); width: auto; max-width: none; object-fit: contain; }
.mag-covers__cover:nth-last-child(2) { height: var(--mag-covers-2); }
.mag-covers__cover:nth-last-child(1) { height: var(--mag-covers-1); }
.mag-covers__cover + .mag-covers__cover { margin-right: calc(-1 * var(--mag-covers-lap)); }

@media (min-width: 768px) {
  .mag-head__inner { flex-direction: row; align-items: center; justify-content: space-between; column-gap: var(--mag-head-cta); }
  .mag-head__aside { flex: none; }
  .mag-head__aside--first { order: 0; margin-bottom: 0; }
  .mag-head__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mag-head__photo {
    position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; height: auto; margin-top: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--mn-gray-900) 28%);
    mask-image: linear-gradient(to right, transparent, var(--mn-gray-900) 28%);
  }
  /* ⚠️ Taken back here: on a box laid out between top and bottom a negative margin would make it
     reach out of the band. */
  .mag-head__photo:last-child { margin-bottom: 0; }
  .mag-head__motif { display: block; }
}
@media (min-width: 1024px) {
  .mag-head--tint .mag-head__inner { min-height: calc(var(--mag-head-least) - 2 * var(--mag-head-pad)); }
  .mag-head--dark .mag-head__inner { min-height: calc(var(--mag-hero-least) - 2 * var(--mag-head-pad)); }
}
@media (hover: hover) {
  /* A light surface of about an eighth. The plain value first: without `color-mix` the button
     would otherwise take the atom's light hover surface under its light words. */
  .mag-head__ghost:hover {
    background-color: transparent;
    background-color: color-mix(in srgb, var(--mn-gray-50) 12%, transparent);
    border-color: var(--mn-gray-50); color: var(--mn-gray-50);
  }
  .mag-head--dark .mag-head__link:hover { color: var(--mn-white); }
}

/* ---------- Home: the current issue ---------- */
/* The block under the home page's head (Figma 5343:862, version A): the teaser of the current
   issue and its articles as rows, in reading order. A section of its own name, not `.mag-section`:
   the same distance above, a smaller one below — the block and "Previous issues" belong together
   (drawn 16 + 56 between them, where two sections have 56 + 56).

   The grid by width:
   - below 768 one column: the issue, then the rows;
   - 768 to 1023 two columns: the issue over both (its own width then lays it out side by side),
     the rows in pairs below it — a last one without a partner takes both columns;
   - from 1024 the issue stands in the first column over as many rows as the page says
     (`--rows-N`, `front_page.issue_rows`): two beside an even number of articles — the first two
     at its right, the others in pairs below — three beside an odd number from three, one beside a
     single article. The rows fill the cells it leaves free by themselves.
   A row is stretched to its cell and keeps its content at the top; the issue's words stand in the
   middle of its height (`centered` at the macro). The teasers' shadows are not cut off. */
.mag-home-current { padding-top: var(--mag-section); padding-bottom: var(--mag-home-current-end); }
.mag-home-issue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-gap); }
@media (min-width: 768px) {
  .mag-home-issue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The issue is the first child, so the last row of an ODD number of rows is an even child. */
  .mag-home-issue > .mag-issue, .mag-home-issue > .mag-article:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .mag-home-issue > .mag-issue { grid-column: 1; grid-row: 1 / span 2; }
  .mag-home-issue--rows-1 > .mag-issue { grid-row: 1; }
  .mag-home-issue--rows-3 > .mag-issue { grid-row: 1 / span 3; }
  .mag-home-issue > .mag-article:last-child:nth-child(even) { grid-column: auto; }
}

/* ---------- Issue list ---------- */
/* The issues of a year on the overview (Figma 5370:1886): one column up to 1023 — a teaser alone
   in a row is wide enough to stand side by side from 440 of its own width, so on a tablet the cover
   is at the left — and two from 1024. Its own grid, because `.mag-grid--2` has two columns from 768
   already (354 each: stacked teasers in pairs). A single teaser stands in the left column. */
.mag-issue-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-gap); }
@media (min-width: 1024px) {
  .mag-issue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The notice over the head of the admin's preview: the platform's banner, on the grid. */
.mag-preview-note { padding: 12px 0; }

/* ---------- Search row ---------- */
/* Under the heading of the overview (Figma 5370:1861): the search over all issues at the left, the
   pills that jump to a year at the right; below 768 one under the other, the search first.
   The field is the platform's field atom on a HULL (a <div> with the atom's classes around a bare
   <input> and the magnifier, which is the button that sends the form): the atom gives height (48),
   border, radius and the green edge while the field or the button inside has the focus; this sheet
   only arranges what is in it. In the markup the field comes first and the button second — the
   order of the Tab key —, `order` puts the magnifier at the left. The button is a target of 36 at
   the element itself (the magnifier and a padding of 9 around it). The field's type stays 16:
   below that Safari on a phone zooms into it on focus.
   ⚠️ The room at the right is the FIELD's padding, not the hull's: a click there has to land in
   the <input> — on the hull it put the cursor nowhere, and the visible field had a dead edge. */
.mag-filter { display: flex; flex-direction: column; gap: 12px; }
.mag-search { min-width: 0; }
.mag-search__field { gap: 4px; padding-left: 6px; padding-right: 0; }
.mag-search__input { flex: 1; align-self: stretch; min-width: 0; padding-right: 12px; }
.mag-search__submit { order: -1; flex: none; padding: 9px; border-radius: 9999px; color: var(--mn-gray-600); }
.mag-search__submit .icon, .mag-search__submit svg { width: var(--mag-search-glyph); height: var(--mag-search-glyph); }
.mag-search__submit:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (min-width: 768px) {
  .mag-filter { flex-direction: row; align-items: center; justify-content: space-between; }
  .mag-search { flex: 0 1 var(--mag-search); }
}
@media (hover: hover) {
  .mag-search__submit:hover { color: var(--mn-gray-900); }
}

/* ---------- Running text ---------- */
/* The text of an article and of a page of text (the terms, the privacy policy …; design package S7)
   in sizes of its own (decision S2-N1): 17/26 for paragraphs, lists and the old CMS's markup, at
   every width, in gray 900. ONE class around the blocks sets it; a caption under a picture keeps
   its 14/20, a heading of the fourth level its 16/24 (classes in the markup).
   The distances between the blocks are what they were built with (24 between two, 36 above a
   heading of the second level, 30 above one of the third) and stay utilities in the markup — the
   article's blocks write them in their template, a text rendered from Markdown gets them from
   `legal_texts.page`.
   Superscripts and subscripts — formulas, the signs of notes — do not push a line apart: the
   build's base rules give both a line height of nothing, and no rule here sets one.
   The column the text stands in, and the contents beside it, are the article package's
   (article.css: `mag-read__text`, `mag-toc`); a page of text stands in the same box. */
.mag-prose {
  font-size: var(--mag-prose-size); line-height: var(--mag-prose-line); color: var(--mn-gray-900);
  overflow-wrap: break-word;
}
/* The headings in the text: 24/32 from 1024 and 22/28 below, 20/26 at every width. Classes of
   their own in the markup, because neither is a headline step at both widths. A long one breaks
   where the line ends (they are not hyphenated: the text is published as it is). */
.mag-prose__h2 { font-size: var(--mag-prose-h2-size); line-height: var(--mag-prose-h2-line); overflow-wrap: break-word; }
.mag-prose__h3 { font-size: var(--mag-prose-h3-size); line-height: var(--mag-prose-h3-line); overflow-wrap: break-word; }
/* The words under a picture of the text (the macro of _figure.html, untouched): caption and credit
   in the drawn gray 700, solid. They were the text's colour made lighter twice over — the credit
   came out at 2.9 : 1 on white. */
.mag-prose figcaption, .mag-prose figcaption span { color: var(--mn-gray-700); opacity: 1; }
/* A heading as the FIRST block has nothing above it to keep a distance from. */
.mag-prose > h2:first-child, .mag-prose > h3:first-child, .mag-prose > h4:first-child { padding-top: 0; }
/* Lists and links in the text had no look at all (the build's base rules take a list's signs and
   indent away): a list stands in and carries its signs, a link is underlined in the link's green. */
.mag-prose ul, .mag-prose ol { padding-left: var(--mag-prose-indent); }
.mag-prose ul { list-style: disc; }
.mag-prose ol { list-style: decimal; }
.mag-prose li + li { margin-top: 6px; }
.mag-prose p a, .mag-prose li a { color: var(--mn-green-600); text-decoration: underline; text-underline-offset: 2px; }
.mag-prose p a:focus-visible, .mag-prose li a:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (hover: hover) {
  .mag-prose p a:hover, .mag-prose li a:hover { color: var(--mn-green-700); }
}
/* What only a page of text carries so far (S7; the privacy policy, the withdrawal policy):
   - a hairline between two texts on one page, and above the links of a page. The blocks around it
     keep their 24, so a heading right below it needs no distance of its own on top;
   - a name in the fixed-width face ("vid", a cookie) a little smaller than the sentence around it,
     and in a table as large as the table's words;
   - a table. It stands in a box of its own, `mag-prose__table` — a <div> the server sets around
     it (magazine/domain/legal_texts.py) — and the BOX scrolls sideways where a phone is narrower
     than the table; the page never does. ⚠️ Never a `display` on the table itself to that end:
     this sheet sets one on a single class only (see "Hidden stays hidden"), and a table that is a
     block is no table to a screen reader. Hairlines around every cell, the head on a ground, words
     at the top left of their cell, 14/20. */
.mag-prose hr { border-color: var(--mn-gray-300); }
.mag-prose > hr + h2, .mag-prose > hr + h3, .mag-prose > hr + h4 { padding-top: 0; }
.mag-prose code { font-size: var(--mag-prose-code-size); }
.mag-prose__table { overflow-x: auto; }
.mag-prose__table table {
  border-collapse: collapse; font-size: var(--mag-prose-table-size); line-height: var(--mag-prose-table-line);
}
.mag-prose__table th, .mag-prose__table td {
  border: 1px solid var(--mn-gray-300); padding: 8px 12px; text-align: left; vertical-align: top;
}
.mag-prose__table th { background: var(--mn-gray-100); font-weight: 600; }
.mag-prose__table code { font-size: inherit; }

/* ---------- Text page ---------- */
/* A page of running text (text_page.html; decision S7-2): the tinted head with the title alone —
   the band `mag-head mag-head--tint` without its inner row, so it is as high as the title and its
   padding — and below it the text in the article's box. `mag-text` marks that box and sets nothing
   on a screen. On PAPER the page is the title and the text: the site's header and foot and the
   table of contents stay away. Written with the elements, not with the shell's or the article
   package's class names: a name belongs to one sheet (magazine/tests/test_package_sheets.py). */
@media print {
  body:has(.mag-text) > header, body:has(.mag-text) > footer, .mag-text > nav { display: none; }
}

/* ---------- Title ---------- */
/* The guard of every title that may carry a long word: an article's, an issue's, a show's.
   Hyphenation is the SERVER's (the filter `soft_hyphens`, magazine/domain/hyphenation.py: soft
   hyphens only in words from 14 letters) — Safari knows no limit for automatic hyphenation and
   would break every word. `hyphens: manual` says so, should an ancestor ever switch the automatic
   one on. What is left over — a word no dictionary breaks — breaks where the line ends:
   `break-word`, not `anywhere`, which would let the title's own least width shrink to one letter
   wherever a box is sized by its content. `min-width: 0`, because in a flex row beside a picture a
   word may otherwise still hold the row wider than its box (measured: 10 px on a phone). */
.mag-title { hyphens: manual; overflow-wrap: break-word; min-width: 0; }

/* ---------- Hidden stays hidden ---------- */
/* This sheet loads after tailwind.css: a `display` set above beats Tailwind's `.hidden` and the
   `hidden` attribute (same weight, later file). Said again for every block that sets one.
   ⚠️ Only these two spellings. A block that is to be hidden at ONE width or in print (the class
   with a variant in front) keeps its `display` and stays visible — it is hidden through an element
   around it, never at the block itself: not in its class attribute, and not through the `cls` of
   the macro that draws it (`article_card`, `issue_card`, `jump_list`, `meta_row`, `meta`). A test
   reads the templates for both ways, magazine/tests/test_components_sheet.py.
   (The open issue in the dark head is hidden below 768 by its own rule above, which is why it is
   in this list: from 768 it sets a `display`.) */
.mag-grid[hidden], .mag-grid.hidden, .mag-meta[hidden], .mag-meta.hidden,
.mag-meta__item[hidden], .mag-meta__item.hidden,
.mag-article[hidden], .mag-article.hidden, .mag-article__body[hidden], .mag-article__body.hidden,
.mag-article__kicker[hidden], .mag-article__kicker.hidden, .mag-article__date[hidden], .mag-article__date.hidden,
.mag-article__text[hidden], .mag-article__text.hidden,
.mag-issue[hidden], .mag-issue.hidden, .mag-issue__frame[hidden], .mag-issue__frame.hidden,
.mag-issue__cover[hidden], .mag-issue__cover.hidden, .mag-issue__blank[hidden], .mag-issue__blank.hidden,
.mag-issue__body[hidden], .mag-issue__body.hidden, .mag-issue__links[hidden], .mag-issue__links.hidden,
.mag-jump[hidden], .mag-jump.hidden, .mag-jump__list[hidden], .mag-jump__list.hidden,
.mag-jump__link[hidden], .mag-jump__link.hidden,
.mag-years__head[hidden], .mag-years__head.hidden, .mag-years__mark[hidden], .mag-years__mark.hidden,
.mag-head__inner[hidden], .mag-head__inner.hidden, .mag-head__mark[hidden], .mag-head__mark.hidden,
.mag-head__actions[hidden], .mag-head__actions.hidden, .mag-head__motif[hidden], .mag-head__motif.hidden,
.mag-covers[hidden], .mag-covers.hidden, .mag-home-issue[hidden], .mag-home-issue.hidden,
.mag-issue-list[hidden], .mag-issue-list.hidden, .mag-filter[hidden], .mag-filter.hidden { display: none; }