/* notis, the monthly: direction C, Colour Field (Karl, 13 Oct 2026). 0.65.0, Status t-215, decision 0045.
   The type is the design system's own (Alegreya Sans and Alegreya, self-hosted). The colours are the approved canvas's
   (notis-magazine-canvas/project/C-*.dc.html): ink, bone, the page, mint and the deep section fields, each at 7:1 or
   better for the text set on it.

   Layout: one page holds every spread of the issue.
   - Desktop (1024 px and wider, with a fine pointer): one spread at a time, the one this address names. That needs no
     script: the others are display:none, and Previous and Next are plain links. magazine.js turns it into paging.
   - Phone and narrower screens: the vertical stack, one colour block after another, as tall as its content.
   Motion is magazine.js's (GSAP), and runs only under prefers-reduced-motion: no-preference. Nothing here animates
   but the hover and focus states and the reading band closing, and those only under the same query.

   0.66.0 (decision 0046, the parity audit of 4 Nov 2026): the magazine's own faces with font-display: swap (10.1); the
   contents as C-Paged's 4 x 3 board of cards (2.1 to 2.9) and the phone's grouped rows (12.2); the feature opener for a
   photograph, an illustration and neither (3.1 to 3.3); nothing a spread must show is cut off (1.2, 5.1, 9.1);
   illustrations drawn whole on bone (5.2); the reading page's band, column and compact band (4.2 to 4.6), which the
   issue's own reading view uses too (4.1). */

/* 0.66.0 (10.1): the files the design system ships, under the magazine's own family names and with swap, so a face that
   misses the first paint replaces the fallback when it lands. _head.html preloads the five the first screen draws. */
@font-face { font-family: "MG Alegreya"; src: url("/static/bn/fonts/Alegreya-400.woff2") format("woff2");
             font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "MG Alegreya"; src: url("/static/bn/fonts/Alegreya-400i.woff2") format("woff2");
             font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "MG Alegreya Sans"; src: url("/static/bn/fonts/AlegreyaSans-400.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MG Alegreya Sans"; src: url("/static/bn/fonts/AlegreyaSans-400i.woff2") format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "MG Alegreya Sans"; src: url("/static/bn/fonts/AlegreyaSans-500.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "MG Alegreya Sans"; src: url("/static/bn/fonts/AlegreyaSans-700.woff2") format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MG Alegreya Sans"; src: url("/static/bn/fonts/AlegreyaSans-800.woff2") format("woff2");
             font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --mg-ink: #0E1626;
  --mg-ink-2: #3E475A;
  --mg-bone: #F6F2EA;
  --mg-paper: #FFFDF9;
  --mg-page: #F3EEE4;
  --mg-rule: #DED6C6;
  --mg-mint: #4CCB97;
  --mg-green: #17734F;
  --mg-soft: #D4DCEA;
  --mg-sans: "MG Alegreya Sans", "Alegreya Sans", ui-sans-serif, system-ui, sans-serif;
  --mg-serif: "MG Alegreya", "Alegreya", Georgia, serif;
  --mg-top: 64px;
  --mg-strip: 52px;
  --mg-gutter: clamp(20px, 7.8vw, 112px);
  --mg-bar: 0px;
  --mg-band: 160px;          /* the reading band at rest; it closes to half on scroll */
  --mg-ill: #EFEADD;         /* 0.66.4: the ground our illustrations are drawn on */
  --mg-spread-h: calc(100vh - var(--mg-top) - var(--mg-strip) - var(--mg-bar));
}
html { background: var(--mg-page); }
body.mg { margin: 0; background: var(--mg-page); color: var(--mg-ink); font-family: var(--mg-sans); font-size: 17px;
          line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.mg.has-preview { --mg-bar: 44px; }
.mg *, .mg *::before, .mg *::after { box-sizing: border-box; }
.mg a { color: inherit; }
.mg a.mg-btn { color: var(--mg-bone); }
.mg [tabindex="-1"]:focus { outline: none; }
.mg a.mg-btn.light, .mg a.mg-btn.mint { color: var(--mg-ink); }
.mg a.mg-link { color: var(--mg-green); }
.on-dark a.mg-link, .mg-spread.dark a.mg-link { color: var(--mg-mint); }
.mg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.mg :focus-visible { outline: 3px solid var(--mg-ink); outline-offset: 3px; }
.mg .on-dark :focus-visible, .mg .on-dark:focus-visible, .mg-spread.dark :focus-visible { outline-color: var(--mg-bone); }
.mg-kick { margin: 0; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-kick-row { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mg-serif { font-family: var(--mg-serif); }
.mg-nums { font-variant-numeric: lining-nums tabular-nums; }

/* ---------------------------------------------------------------- the preview bar (admin only) */
.mg-preview { position: sticky; top: 0; z-index: 60; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center;
              gap: 6px 18px; padding: 8px 24px; background: #8A1F1F; color: #FFF; font-size: 15px; line-height: 1.3; }
.mg-preview strong { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; }
.mg-preview a { color: #FFF; font-weight: 700; text-underline-offset: 3px; }
.mg-preview .mg-pv-state { padding: 2px 8px; border: 1px solid rgba(255,255,255,0.6); font-weight: 700; font-size: 13px; }
.mg-preview .mg-pv-warn { color: #FFE2A8; font-weight: 700; }
@media (max-width: 1023px), (pointer: coarse) {
  .mg-preview { position: static; }
  body.mg.has-preview { --mg-bar: 0px; }
}

/* ---------------------------------------------------------------- the top bar and the strip */
.mg-top { position: sticky; top: var(--mg-bar); z-index: 40; height: var(--mg-top); display: flex; align-items: center;
          justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 2.2vw, 32px); background: var(--mg-bone);
          border-bottom: 1px solid var(--mg-rule); }
.mg-top-l { display: inline-flex; align-items: center; gap: 14px; color: var(--mg-ink); }
.mg-logo { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; color: var(--mg-ink); }
.mg-mark { display: inline-flex; align-items: baseline; gap: 5px; line-height: 1; }
.mg-mark .ai { font-weight: 800; font-size: 19px; color: var(--mg-green); }
.mg-mark .bar { display: inline-block; width: 6px; height: 22px; background: var(--mg-green); }
.mg-mark .notis { font-family: var(--mg-serif); font-weight: 700; font-size: 28px; }
.on-dark .mg-mark .ai { color: var(--mg-mint); }
.on-dark .mg-mark .bar { background: var(--mg-mint); }
.mg-issue-name { font-size: 15px; font-weight: 500; }
@media (max-width: 599px) { .mg-issue-name { display: none; } }          /* 0.66.0 (12.1) */
.mg-top-r { display: flex; align-items: center; gap: 20px; }
.mg-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0;
          background: var(--mg-ink); color: var(--mg-bone); font-family: var(--mg-sans); font-weight: 700; font-size: 16px;
          text-decoration: none; cursor: pointer; transition: box-shadow 180ms ease-out; }
.mg-btn:hover, .mg-btn:focus-visible { box-shadow: 0 10px 22px rgba(14,22,38,0.34); }
.mg-btn.light { background: var(--mg-bone); color: var(--mg-ink); }
.mg-btn.mint { background: var(--mg-mint); color: var(--mg-ink); }
.mg-btn.ghost { background: transparent; color: var(--mg-bone); border: 2px solid var(--mg-bone); }
.mg-btn.big { min-height: 52px; font-size: 17px; padding: 0 24px; }
.mg-link { font-weight: 700; color: var(--mg-green); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mg-note { margin: 6px 0 0; font-size: 14px; line-height: 1.4; }
.mg-read { display: block; }
.mg-bar .val { white-space: nowrap; }

.mg-strip { display: none; }
.mg-edge { display: none; }

/* ---------------------------------------------------------------- a spread, on every screen */
.mg-spread { position: relative; z-index: 0; overflow: hidden; color: var(--mg-ink); scroll-margin-top: calc(var(--mg-top) + var(--mg-bar)); }
.mg-field { position: absolute; inset: 0; z-index: -1; }
.mg-spread.dark { color: var(--mg-bone); }
.mg-pad { padding: 40px var(--mg-gutter) 36px; }
.mg-h1 { margin: 0; font-family: var(--mg-serif); font-weight: 700; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.01em; }
.mg-h2 { margin: 0; font-family: var(--mg-serif); font-weight: 700; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.06; }
.mg-h2-52 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; }                       /* 0.66.0 (2.9) */
.mg-h2-big { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.03; letter-spacing: -0.01em; }
.mg-stand { margin: 12px 0 0; font-family: var(--mg-serif); font-style: italic; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; }
.mg-lede { margin: 12px 0 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }
.mg-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.mg-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mg-split { display: grid; grid-template-columns: minmax(0, 1fr); }
.mg-photo { margin: 0; background: var(--mg-ink); color: var(--mg-soft); }
.mg-photo .frame { overflow: hidden; background: var(--mg-ink); }
.mg-photo .zoom { width: 100%; height: 100%; }
.mg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 24px; padding: 10px var(--mg-gutter) 12px;
                       font-size: 14px; line-height: 1.4; }
/* 0.66.0 (5.2): an illustration is drawn whole, on a bone panel; only a photograph is cropped to its frame */
.mg-photo.is-ill, .mg-photo.is-ill .frame { background: var(--mg-ill); color: var(--mg-ink-2); }
.mg-photo.is-ill img { object-fit: contain; }
.mg-photo.is-ill .frame { padding: 16px; }

/* the cover */
.mg-cover-no { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
.mg-cover-no .no { font-family: var(--mg-serif); font-weight: 800; font-size: clamp(40px, 4.2vw, 60px); line-height: 1; padding-top: 16px; }
.mg-cover-no .big { font-family: var(--mg-serif); font-weight: 800; font-size: clamp(120px, 15vw, 220px); line-height: 0.78; letter-spacing: -0.02em; }
.mg-cover-no .when { align-self: flex-end; margin-left: 16px; padding-bottom: 4px; font-family: var(--mg-serif); font-weight: 700;
                     font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; }
.mg-cover-no .when span { display: block; }
.mg-cover-line { margin-top: 26px; }
.mg-cover-go { margin: 20px 0 0; }
.mg-oncover { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mg-oncover li { border-top: 2px solid currentColor; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mg-oncover .row { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; }
.mg-oncover .n { font-family: var(--mg-serif); font-weight: 800; font-size: 24px; }
.mg-oncover .t { font-family: var(--mg-serif); font-weight: 700; font-size: 24px; line-height: 1.18; }   /* 0.66.5: never cut */
.mg-oncover a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }

/* contents: C-Paged's spread 2 (0.66.0) */
.mg-ct-head { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; align-items: end; }
.mg-sum { position: relative; background: var(--mg-paper); border: 1px solid var(--mg-ink); color: var(--mg-ink); }
.mg-sum summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
                  padding: 14px 20px; cursor: pointer; }
.mg-sum summary::-webkit-details-marker { display: none; }
.mg-sum .txt { display: flex; flex-direction: column; gap: 6px; }
.mg-sum .k { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mg-green); }
.mg-sum .ex { font-size: 16px; line-height: 1.4; }
.mg-sum .go { font-weight: 700; font-size: 16px; color: var(--mg-green); white-space: nowrap; }
.mg-sum[open] .ex { display: none; }
.mg-sum[open] .go { visibility: hidden; }
.mg-sum-full { padding: 0 20px 18px; font-size: 16px; line-height: 1.45; }
.mg-sum-list { margin: 0; padding: 0 0 0 18px; }
.mg-sum-list li { margin: 0 0 8px; break-inside: avoid; }
.mg-cards { display: none; }
.mg-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; padding: 14px 18px;
           text-decoration: none; transition: box-shadow 220ms ease-out; }
.mg-card.light { border: 1px solid var(--mg-ink); }
.mg-card:hover, .mg-card:focus-visible { box-shadow: 0 14px 30px rgba(14,22,38,0.24); }
.mg-card .k { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-card .k > span:first-child { min-width: 0; }      /* 0.66.5 (AUDIT-3, C1): a kicker wraps, never cut */
.mg-card .k > span:last-child { white-space: nowrap; }
.mg-card .t { flex: none; font-family: var(--mg-serif); font-weight: 700; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.13; }
.mg-card .t.t-s { font-size: clamp(16px, 1.2vw, 17.5px); }
/* the line takes the card's whole width; the minutes float at the end of its last line, and the hint takes their place
   on hover, laid over the line's end on the card's own colour */
.mg-card .m { margin-top: auto; display: block; font-size: 14px; font-weight: 700; line-height: 1.3; background: inherit; }
.mg-card .m .r { float: right; position: relative; margin-left: 12px; white-space: nowrap; background: inherit; }
.mg-card .mins { display: inline-block; }
.mg-card .go { position: absolute; right: 0; bottom: 0; padding-left: 10px; white-space: nowrap; background: inherit; opacity: 0; pointer-events: none; }
.mg-card:hover .go, .mg-card:focus-visible .go { opacity: 1; }
.mg-card:hover .mins, .mg-card:focus-visible .mins { opacity: 0; }
/* the phone's contents (C-Phone): compact rows, grouped, minutes on each */
.mg-rows-h { margin: 22px 0 8px; padding-top: 8px; border-top: 2px solid var(--mg-ink); font-size: 12px; }
.mg-rows-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mg-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 72px;
          padding: 12px 16px; text-decoration: none; }
.mg-row.light { border: 1px solid var(--mg-ink); }
.mg-row .n { line-height: 1; }
.mg-row .n span { display: block; font-size: 12px; font-weight: 700; }
.mg-row .n .big { font-family: var(--mg-serif); font-weight: 800; font-size: 26px; }
.mg-row .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mg-row .tt { font-family: var(--mg-serif); font-weight: 700; font-size: 19px; line-height: 1.2; }
.mg-row .tl { font-size: 14px; line-height: 1.35; }     /* 0.66.5 (AUDIT-3, C2): never cut on the phone */
.mg-rows-cards { display: none; margin: 0; }
.mg-row .mins { font-weight: 700; font-size: 15px; white-space: nowrap; }

/* the feature opener (0.66.0, 3.1 to 3.4) */
.mg-open-foot { align-items: end; }
.mg-one { padding-top: 0; }
.mg-one.has-num { border-top: 2px solid currentColor; padding-top: 10px; }
.mg-bignum { margin: 4px 0 0; font-family: var(--mg-serif); font-weight: 800; font-size: clamp(56px, 5.8vw, 84px); line-height: 0.95; letter-spacing: -0.02em; }
.mg-bignum.long { font-size: clamp(40px, 4vw, 60px); }
.mg-opener.plain .mg-pad { padding-top: 40px; }
.mg-open-top { padding-bottom: 0; }
.mg-open-top .mg-cover-no { margin-top: 0; }
.mg-ill-panel { margin: 0 0 24px; background: var(--mg-ill); aspect-ratio: 16 / 9; }
.mg-ill-panel img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* the big numbers and How we counted */
.mg-num { position: relative; display: inline-block; cursor: help; }
.mg-num-note { position: absolute; left: 0; top: calc(100% + 6px); z-index: 6; width: 300px; padding: 8px 11px 9px; background: var(--mg-ink);
               color: var(--mg-bone); border-top: 3px solid var(--mg-mint); font-family: var(--mg-sans); font-weight: 500; font-size: 14px;
               line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; opacity: 0; visibility: hidden;
               pointer-events: none; box-shadow: 0 10px 24px rgba(14,22,38,0.3); }
.mg-num-note .k { display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mg-mint); }
.mg-num-note code { display: block; margin-top: 6px; font: 400 11px/1.35 ui-monospace, Consolas, monospace; color: #C9D2E2; white-space: pre-wrap; word-break: break-word; }
.mg-num:hover .mg-num-note, .mg-num:focus-visible .mg-num-note, .mg-num:focus-within .mg-num-note { opacity: 1; visibility: visible; }

/* the exhibit */
.mg-exhibit-fig { margin: 0; background: var(--mg-paper); padding: 22px 28px 18px; color: var(--mg-ink); }
.mg-chart { margin-top: 22px; display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 18px 20px; align-items: center; }
.mg-bar { position: relative; }
.mg-bar .track { position: relative; height: 56px; display: flex; align-items: center; }
.mg-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: 0 50%; }
.mg-bar .val { position: relative; margin-left: 14px; font-family: var(--mg-serif); font-weight: 800; font-size: 28px; }
.mg-bar .val.in { color: var(--mg-bone); }
.mg-axis { grid-column: 2; display: block; width: 100%; height: 2px; overflow: visible; }
.mg-tip { position: absolute; z-index: 6; top: calc(100% + 8px); left: 0; width: min(360px, 90vw); padding: 10px 12px 11px; background: var(--mg-ink);
          color: var(--mg-bone); border-top: 3px solid var(--mg-mint); font-size: 14px; line-height: 1.4; opacity: 0; visibility: hidden; pointer-events: none; }
.mg-bar:hover .mg-tip, .mg-bar:focus-visible .mg-tip { opacity: 1; visibility: visible; }
.mg-chart:has(.mg-bar:hover) .mg-bar:not(:hover) { opacity: 0.45; }

/* voice and explainer: the text column keeps its foot ("Read it") in view (0.66.0, 5.1) */
.mg-col-text { display: flex; flex-direction: column; gap: 20px; color: var(--mg-bone); }
.mg-col-body { display: flex; flex-direction: column; gap: 20px; }
.mg-col-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mg-foot-meta { font-size: 15px; font-weight: 700; padding-bottom: 26px; }
.mg-points { margin: 0; padding-left: 20px; font-size: 18px; line-height: 1.5; }
.mg-points li + li { margin-top: 6px; }
.mg-quotes { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; border: 1px solid var(--mg-mint); }
.mg-quotes blockquote { margin: 0; }
.mg-quotes p { margin: 0; font-family: var(--mg-serif); font-size: 18px; line-height: 1.4; }   /* 0.66.5: a quote is never cut */
.mg-quotes footer { margin-top: 4px; font-size: 14px; color: var(--mg-soft); }

/* numbers */
.mg-num-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.mg-num-intro { max-width: 440px; font-size: 17px; line-height: 1.45; }
.mg-how { position: relative; z-index: 7; margin-top: 4px; }
.mg-how summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none; }
.mg-how summary::-webkit-details-marker { display: none; }
.mg-spread.mg-k-numbers .mg-how summary.mg-link { color: var(--mg-ink); text-decoration: underline; }
.mg-how-full { margin-top: 8px; padding: 12px 14px; background: var(--mg-ink); color: var(--mg-bone); border-top: 3px solid var(--mg-mint);
               font-size: 14px; line-height: 1.45; }
.mg-how-full p { margin: 0 0 6px; }
.mg-tiles { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mg-tile { display: flex; flex-direction: column; padding: 16px 18px 18px; border: 2px solid var(--mg-ink); }
.mg-tile.dark { background: var(--mg-ink); color: var(--mg-bone); border-color: var(--mg-ink); }
.mg-tile.bone { background: var(--mg-bone); border-color: var(--mg-bone); }
.mg-tile .v { display: block; font-family: var(--mg-serif); font-weight: 800; font-size: clamp(48px, 5.4vw, 84px); line-height: 1; }
.mg-tile.dark .v { color: var(--mg-mint); }
.mg-tile .l { display: block; margin-top: 8px; font-size: 17px; line-height: 1.35; }
.mg-tile .s { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; }
.mg .mg-tile-go { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 700; color: var(--mg-green); }
.mg-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mg-sec { position: relative; display: flex; flex-direction: column; min-height: 140px; padding: 14px 16px 16px; color: var(--mg-bone); }
.mg-sec .v { font-family: var(--mg-serif); font-weight: 800; font-size: 52px; line-height: 1; }
.mg-sec .l { margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.mg-sec .g { margin-top: auto; display: block; height: 6px; background: var(--mg-bone); transform-origin: 0 50%; }

/* stories, back page, letter */
.mg-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.mg-list li { border-top: 1px solid var(--mg-rule); padding: 12px 0; }
.mg-list .dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: 1px; }
.mg-list a { font-family: var(--mg-serif); font-weight: 700; font-size: 20px; line-height: 1.25; text-decoration: none; }
.mg-list a:hover { text-decoration: underline; }
.mg-back-main { color: var(--mg-bone); }
.mg-back-l { display: flex; flex-direction: column; }
.mg-back-h { margin: 14px 0 0; font-weight: 700; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; }
.mg-back-l .mg-corr { margin-top: 14px; padding: 12px 16px 14px; }
.mg-back-l .mg-corr p { font-size: 15px !important; line-height: 1.4; }
.mg-corr { margin-top: 18px; padding: 16px 20px 18px; background: var(--mg-bone); color: var(--mg-ink); }
.mg-colophon { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--mg-mint); padding-top: 24px; }
.mg-tools { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.mg-next { background: var(--mg-mint); color: var(--mg-ink); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
           gap: 16px; padding: 20px var(--mg-gutter); }
.mg-next .t { font-family: var(--mg-serif); font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; }
.mg-letter-body p { margin: 0 0 1em; font-family: var(--mg-serif); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; max-width: 68ch; }

/* ---------------------------------------------------------------- the phone and narrow screens: the vertical stack */
@media (max-width: 1023px), (pointer: coarse) {
  .mg-full-photo .frame, .mg-opener .mg-photo .frame { aspect-ratio: 4 / 3; }
  /* 0.66.5 (AUDIT-3, C3; C-Phone): kicker, headline and standfirst first, then the one number and Read, then the picture */
  .mg-opener.has-photo { display: flex; flex-direction: column; }
  .mg-opener.has-photo > .mg-photo { order: 2; }
  .mg-panel-top { display: flex; flex-direction: column; padding-top: 0; }
  .mg-panel-top .mg-one { order: -1; margin-bottom: 24px; }

  .mg-ct-head .mg-sum { margin-top: 4px; }
}
@media (min-width: 720px) {
  .mg-oncover { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  :root { --mg-gutter: 20px; --mg-band: 128px; }                                  /* 0.66.0 (12.4): one gutter */
  .mg-cover-no .big { font-size: 120px; }
}

/* ---------------------------------------------------------------- desktop: one spread at a time */
@media (min-width: 1024px) and (pointer: fine) {
  body.mg:not(.mg-reading):not(.mg-list-page) { overflow: hidden; }
  .mg-book { position: relative; height: calc(100vh - var(--mg-top) - var(--mg-strip) - var(--mg-bar)); overflow: hidden; }
  .mg-spread { height: 100%; }
  .mg-spread:not(.is-current) { display: none; }
  /* 0.71.2 (Karl, 5 Nov 2026, "it just swaps"): the spread being left stays drawn under the new one while it drifts out
     (magazine.js, leave); only with motion, and only into the cover or the contents */
  .mg-spread.is-leaving { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .mg-book.is-turning > .mg-spread.is-current { z-index: 1; }
  /* a last resort only: what a spread holds is made to fit (magazine.js, fit), and no scrollbar is ever drawn */
  .mg-spread .mg-scroll { height: 100%; overflow-y: auto; scrollbar-width: thin; }
  .mg-list li { padding: 9px 0; }
  .mg-cols { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 48px; align-items: end; }
  .mg-cols.one { grid-template-columns: minmax(0, 1fr); }
  .mg-cols.ill { grid-template-columns: minmax(0, 1fr) min(600px, 42vw); }
  /* the cover with a drawing beside it: its number and line step down so the list under them stays in the spread */
  .mg-cover:has(.mg-cols.ill) .mg-cover-no .big { font-size: clamp(100px, min(13vw, 19vh), 200px); }
  .mg-cover:has(.mg-cols.ill) .mg-cover-line { font-size: clamp(34px, min(3.8vw, 6vh), 56px); }
  .mg-cover:has(.mg-cols.ill) .mg-lede { font-size: 17px; }
  .mg-cover:has(.mg-cols.ill) .mg-oncover .t { font-size: 21px; }
  .mg-cover-pic.is-ill .frame { padding: 0; }
  .mg-split { grid-template-columns: 5fr 7fr; height: 100%; }
  .mg-split.even { grid-template-columns: 1fr 1fr; }
  .mg-split > * { min-height: 0; overflow: hidden; }
  .mg-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mg-sections { grid-template-columns: repeat(7, minmax(0, 1fr)); }

  /* the cover: sized to the height it has, and never cut off (1.2) */
  .mg-cover { height: 100%; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
  .mg-cover .mg-oncover { margin-top: auto; padding-top: clamp(14px, 3vh, 32px); }
  .mg-cover-no .big { font-size: clamp(110px, min(15vw, 23vh), 220px); }
  .mg-cover-no .no { font-size: clamp(40px, min(4.2vw, 6.4vh), 60px); }
  .mg-cover-line { margin-top: clamp(12px, 2.6vh, 26px); font-size: clamp(38px, min(4.4vw, 7.2vh), 64px); }

  /* contents: every card in view, four across (2.6) */
  .mg-contents { display: flex; flex-direction: column; padding-top: 34px; padding-bottom: 28px; }
  .mg-ct-head.has-sum { grid-template-columns: minmax(0, 1fr) 470px; }
  /* open, the summary lies over the cards across the whole contents width, one finding a line in two columns */
  .mg-ct-head .mg-sum { position: static; }
  .mg-sum-full { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: calc(var(--mg-spread-h) - 230px);
                 overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 24px 8px;
                 background: var(--mg-paper); border: 1px solid var(--mg-ink); box-shadow: 0 18px 34px rgba(14,22,38,0.22); }
  .mg-sum-list { columns: 2; column-gap: 40px; }
  .mg-cards { flex: 1 1 auto; min-height: 0; margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              grid-auto-rows: minmax(min-content, 1fr); gap: 14px; }   /* 0.66.5: a card grows; the spread scrolls */
  .mg-rows { display: none; }
  /* 0.66.5 (AUDIT-3, B8): "all N pieces as a list" shows the same rows the phone has, in two columns */
  /* :target is the no-script path only; with script the class decides, so "Back to the cards" always works (0.66.6) */
  .mg-contents.show-list .mg-cards, :root:not(.mg-js) .mg-contents:has(#mg-pieces:target) .mg-cards { display: none; }
  .mg-contents.show-list .mg-rows, :root:not(.mg-js) #mg-pieces:target { display: block; margin-top: 8px; }
  .mg-rows-cards { display: block; }
  .mg-rows .mg-rows-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }

  /* the feature opener */
  .mg-opener { height: 100%; }
  .mg-opener.has-photo { display: flex; flex-direction: column; }
  .mg-opener.has-photo .mg-photo { flex: 0 0 auto; }
  .mg-opener.has-photo .mg-photo .frame { height: calc((100vh - var(--mg-top) - var(--mg-strip) - var(--mg-bar)) * 0.46); }
  .mg-opener.has-photo .mg-photo figcaption { padding-left: var(--mg-gutter); padding-right: var(--mg-gutter); }
  /* 0.66.5: on a short spread the headline and standfirst stay reachable: a thin scroll, anchored safely at the foot */
  .mg-opener.has-photo .mg-open-foot { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-top: 20px; padding-bottom: 28px; align-content: safe end; }
  .mg-opener.plain { display: flex; flex-direction: column; }
  .mg-opener.plain .mg-open-top { flex: none; }
  .mg-opener.plain .mg-open-top .big { font-size: clamp(96px, min(12vw, 19vh), 180px); }
  .mg-opener.plain .mg-open-foot { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; align-content: safe end; padding-top: 16px; padding-bottom: 44px; }
  /* 0.66.4 (AUDIT-2, B4): the drawing at the width a 16:9 drawing needs (about 640 px at 740 to 784 px of spread, so
     its labels read), the one number beside it, the text across the foot */
  .mg-opener.mg-panel { display: flex; flex-direction: column; }
  .mg-panel .mg-panel-top { order: 1; }
  .mg-panel .mg-open-foot { order: 2; }
  .mg-panel-top { flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; padding-top: 32px; padding-bottom: 0; }
  .mg-panel-top .mg-ill-panel { flex: none; margin: 0; height: calc(var(--mg-spread-h) * 0.48); width: auto; }
  .mg-panel-top .mg-one { flex: 0 1 400px; min-width: 260px; }
  .mg-panel .mg-open-foot { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; justify-content: safe flex-end;
                            padding-top: 20px; padding-bottom: 32px; }

  /* voice and explainer: the picture fills its half; the text column scrolls inside itself before its foot ever leaves */
  .mg-full-photo { display: flex; flex-direction: column; height: 100%; }
  .mg-full-photo .frame { flex: 1 1 auto; min-height: 0; }
  .mg-split.even > .mg-col-text:first-child { padding: 56px 56px 40px var(--mg-gutter); }
  .mg-split.even > .mg-col-text:last-child { padding: 64px var(--mg-gutter) 40px 56px; }
  /* never a scrollbar: magazine.js (fit) lets the last item marked data-fit-drop go, then steps the type down */
  .mg-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .mg-split.even > .mg-full-photo.is-ill:last-child .frame { padding: 32px 104px 32px 32px; }   /* B5: the arrow's gutter */
  .mg-split.even > .mg-full-photo.is-ill:first-child .frame { padding: 32px 32px 32px 104px; }
  .mg-col-foot { flex: none; }

  /* the back page: the band and the buttons stay in view (9.1) */
  .mg-back { display: flex; flex-direction: column; height: 100%; }
  .mg-back-main { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; }
  .mg-back-l { min-height: 0; }
  /* 0.66.5 (the Gatekeeper on 0.66.4): on a laptop's short spread (about 540 px) a correction's "Now:" and "and N more"
     must stay reachable, so the column keeps a thin scroll as a last resort after the fit */
  .mg-back-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .mg-back-l .mg-col-foot { flex: none; }
  /* with no script, a screen up to 960 px tall shows one quote and one key point; the script fits them exactly */
  .mg-tight .mg-h2 { font-size: clamp(28px, 3vw, 44px); }
  .mg-tight .mg-stand, .mg-tight .mg-lede { font-size: 18px; }
  .mg-tight .mg-points, .mg-tight .mg-quotes p { font-size: 16px; }
  .mg-colophon { border-top: 0; padding-top: 0; border-left: 1px solid var(--mg-mint); padding-left: 40px; }
  .mg-next { flex: none; }

  .mg-strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--mg-strip); display: grid;
              grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 0 32px;
              background: var(--mg-bone); border-top: 1px solid var(--mg-rule); }
  .mg-strip .fill { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--mg-green); transform-origin: 0 50%; }
  .mg-strip .where { margin: 0; display: flex; align-items: baseline; gap: 14px; white-space: nowrap; overflow: hidden; }
  .mg-strip .pg { font-family: var(--mg-serif); font-weight: 800; font-size: 22px; }
  .mg-strip .sec { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .mg-strip .dots { display: flex; align-items: center; }
  .mg-dot { position: relative; width: 36px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .mg-dot .seg { display: block; width: 26px; height: 10px; background: #5F6E89; transform: scaleY(0.6); }
  .mg-dot[aria-current="page"] .seg { background: var(--mg-ink); transform: none; }
  .mg-dot .tipn { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 5px 9px 6px; background: var(--mg-ink);
                  color: var(--mg-bone); font-weight: 700; font-size: 13px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
  .mg-dot:hover .tipn, .mg-dot:focus-visible .tipn { opacity: 1; visibility: visible; }
  .mg-strip .nxt { margin: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 700; color: var(--mg-ink-2); }
  .mg-edge { position: fixed; z-index: 45; top: calc(var(--mg-bar) + var(--mg-top) + (100vh - var(--mg-bar) - var(--mg-top) - var(--mg-strip)) / 2 - 28px);
             width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--mg-bone);
             color: var(--mg-ink); border: 2px solid var(--mg-ink); text-decoration: none; }
  .mg-edge.prev { left: 24px; }
  .mg-edge.next { right: 24px; }
  .mg-edge[hidden] { display: none; }
}

/* ---------------------------------------------------------------- the reading page, and the issue's own reading view
   (0.66.0; C-Paged's reading view). The band is sticky under the top bar: 160 px at rest, holding "Back to the issue",
   a small kicker and the title; past 40 px of scroll its field closes to half and the band shows "N of M · K min" and
   the title in one line, with the progress line along its top. In the issue's reading view (.mg-overlay) the same band
   sticks to the top of the view's own scroller. */
body.mg-reading { overflow-x: clip; }
.mg-reader { position: relative; --mg-rgut: 20px; }
.mg-r-head { position: sticky; top: calc(var(--mg-bar) + var(--mg-top)); z-index: 20; height: var(--mg-band); color: var(--mg-bone);
             pointer-events: none; }
.mg-r-field { position: absolute; left: 0; right: 0; top: 0; height: var(--mg-band); background: var(--fld, var(--mg-ink)); transform-origin: 50% 0; }
.mg-r-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 4px; background: var(--mg-mint); transform-origin: 0 50%; transform: scaleX(0); }
.mg .mg-r-back { position: absolute; top: 18px; left: clamp(16px, 2.2vw, 32px); z-index: 3; min-height: 44px; padding: 0 18px; font-size: 16px; pointer-events: auto; }
.mg-r-full { position: absolute; left: var(--mg-gutter); right: var(--mg-gutter); bottom: 20px; }
.mg-r-full .k { margin: 0; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-r-full .t { margin: 6px 0 0; font-family: var(--mg-serif); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-r-mini { position: absolute; top: 18px; left: 260px; right: 260px; height: 44px; display: flex; align-items: center; justify-content: center;
             gap: 14px; text-align: center; opacity: 0; }
.mg-r-mini .k { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; }
.mg-r-mini .t { font-family: var(--mg-serif); font-weight: 700; font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-reader.is-compact .mg-r-field { transform: scaleY(0.5); }
.mg-reader.is-compact .mg-r-full { opacity: 0; }
.mg-reader.is-compact .mg-r-mini { opacity: 1; }

.mg-article { width: min(680px, 100% - 2 * var(--mg-rgut)); margin: 0 auto; padding: 44px 0 56px; }
.mg-h1r { margin: 12px 0 0; font-family: var(--mg-serif); font-weight: 700; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.01em; }   /* 10.2 */
.mg-r-stand { margin-top: 16px; font-size: clamp(20px, 1.7vw, 24px); }
.mg-r-meta { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--mg-ink); display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; }
.mg-r-meta p { margin: 0; color: var(--mg-ink-2); }
.mg-r-meta .m1 { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--mg-ink); }
.mg-r-fig { margin-top: 28px; }
.mg-r-fig .frame { aspect-ratio: 16 / 9; }
.mg-r-fig figcaption { padding: 10px 0 0; color: var(--mg-ink-2); background: var(--mg-page); }
.mg-photo.mg-r-fig, .mg-photo.mg-r-fig.is-ill { background: transparent; }
/* 0.68.1: in the reading view and on the reading page, magazine art shows whole at its own 3:2 (the frame takes the
   picture's ratio from the page): no edge fill and no crop; those are the full-bleed opener's and the cover's alone */
.mg-r-fig.is-art .frame { background: transparent; }
.mg-r-fig.is-art img { object-fit: contain; object-position: 50% 50%; }
.mg-short ul { margin: 10px 0 0; padding-left: 20px; font-size: 18px; line-height: 1.55; }
.mg-short li + li { margin-top: 6px; }
.mg-article .body { margin-top: 36px; font-family: var(--mg-sans); font-size: 20px; line-height: 1.6; }
.mg-article .body p { margin: 0 0 1em; }
.mg-sub { margin: 1.6em 0 0.5em; font-family: var(--mg-serif); font-weight: 700; font-size: 30px; line-height: 1.15; }
.mg-view { margin-top: 40px; background: var(--mg-ink); color: var(--mg-bone); padding: 26px 28px 28px; }
.mg-view .mg-kick { color: var(--mg-mint); }
.mg-view p:not(.mg-kick) { margin: 10px 0 0; font-family: var(--mg-serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; }
.mg-srcw { position: relative; display: inline-block; vertical-align: super; line-height: 0; margin-left: 2px; }
/* 0.71.2 (Karl, 5 Nov 2026: "Can you also make the source numbers smaller? It is distracting to look at the page how it is
   now"): a small raised number in a muted colour, no box, line-height 0 so the line never opens up; the tap area is a
   pseudo-element, not a bigger number. The ledger's own back-links keep the box. "Sources off" (the band's toggle,
   magazine.js) hides them; the ledger stays. */
.mg-src { position: relative; display: inline-block; padding: 0 2px; border-radius: 2px; color: var(--mg-ink-2); font-weight: 600;
          font-size: 0.6em; line-height: 0; text-decoration: none; font-variant-numeric: tabular-nums; }
.mg-src::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); }
.mg-src:hover, .mg-src:focus-visible { color: var(--mg-green); background: #E3F3EB; }
.mg-ledger .mg-src { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
                     border: 1px solid var(--mg-green); border-radius: 0; background: var(--mg-paper); color: var(--mg-green);
                     font-weight: 700; font-size: 12px; line-height: 1; }
.mg-ledger .mg-src::after { content: none; }
.mg-src-off .mg-srcw { display: none; }
.mg-srctip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 8; width: min(280px, calc(100vw - 40px));
             padding: 8px 10px; background: var(--mg-ink); color: var(--mg-bone); border-top: 3px solid var(--mg-mint); font-size: 13px; line-height: 1.4;
             display: none; }
.mg-srctip-k { display: block; font-weight: 700; color: var(--mg-mint); }
.mg-srcw:hover .mg-srctip, .mg-src:focus-visible + .mg-srctip { display: block; }
.mg-box { margin-top: 28px; background: var(--mg-paper); border-top: 6px solid var(--fld, var(--mg-ink)); padding: 20px 24px 22px; }
.mg-checked { margin-top: 36px; background: var(--mg-paper); border-top: 4px solid var(--mg-ink); }
.mg-checked summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px;
                      padding: 14px 20px; cursor: pointer; }
.mg-checked summary::-webkit-details-marker { display: none; }
.mg-checked summary:hover { background: var(--mg-bone); }
.mg-checked .s1 { display: flex; flex-direction: column; gap: 2px; }
.mg-checked .h { font-weight: 700; font-size: 17px; }
.mg-checked .d { font-size: 15px; color: var(--mg-ink-2); }
.mg-checked .i { font-size: 26px; line-height: 1; font-weight: 500; }
.mg-checked[open] .i { transform: rotate(45deg); }
.mg-checked-in { padding: 4px 20px 22px; }
.mg-ledger { list-style: none; margin: 16px 0 0; padding: 0; }
.mg-ledger > li { border-top: 1px solid var(--mg-rule); padding: 14px 0; }
.mg-ledger .src-head { margin: 0 0 8px; font-size: 16px; overflow-wrap: anywhere; }
.mg-ledger ol { list-style: none; margin: 0; padding: 0 0 0 16px; }
.mg-ledger ol li { border-left: 2px solid var(--mg-rule); padding: 6px 0 6px 12px; font-size: 16px; }
.mg-ledger .tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--mg-ink); font-weight: 700; font-size: 11px;
                  letter-spacing: 0.06em; text-transform: uppercase; }
.mg-ledger .tag.carried { background: #FFF1D6; }
.mg-ledger q { color: var(--mg-ink-2); }
.mg-r-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; padding: 40px var(--mg-gutter) 40px; }
.mg-r-next .a, .mg-r-next .b { display: flex; flex-direction: column; gap: 14px; }
.mg-r-next .b { justify-content: flex-end; }
.mg-r-next .t { margin: 0; font-family: var(--mg-serif); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; }
.mg-r-next .s { margin: 0; font-size: 18px; line-height: 1.5; }
.mg-r-next .go { margin: 0; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; font-size: 16px; font-weight: 700; }
.mg-r-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 20px; padding: 28px var(--mg-gutter) 36px;
             background: var(--mg-bone); border-top: 1px solid var(--mg-rule); font-size: 15px; color: var(--mg-ink-2); }
.mg-state { display: inline-block; padding: 1px 8px; font-weight: 700; font-size: 13px; border: 1px solid currentColor; }
.mg-state.ok { color: var(--mg-green); }
.mg-state.no { color: #8A1F1F; }
@media (min-width: 900px) {
  .mg-r-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 48px var(--mg-gutter) 44px; }
}
@media (max-width: 719px) {
  .mg-r-full .t { display: none; }      /* 0.66.5 (AUDIT-3): no cut title in the phone's band; the h1 is just below */
  .mg .mg-r-back { top: 10px; left: 20px; min-height: 40px; padding: 0 14px; font-size: 15px; }
  .mg-r-full { bottom: 14px; }
  .mg-r-mini { display: none; }
  .mg-article { padding-top: 32px; }
}

/* the issue's own reading view: over the spread and the strip, under the top bar (magazine.js puts it here) */
.mg-overlay { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--mg-bar) + var(--mg-top)); z-index: 50; overflow: hidden; }
.mg-o-ground { position: absolute; inset: 0; background: var(--mg-page); }
.mg-o-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.mg-overlay .mg-r-head { top: 0; }

@media print {
  .mg-preview, .mg-top, .mg-strip, .mg-edge, .mg-r-head, .mg-overlay { display: none !important; }
  body.mg { overflow: visible; background: #fff; }
  .mg-book { height: auto !important; overflow: visible !important; }
  .mg-spread { display: block !important; height: auto !important; break-before: page; }
  .mg-checked > *:not(summary) { display: block; }
}

/* ---------------------------------------------------------------- hover and focus movement: never with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .mg-btn { transition: box-shadow 180ms ease-out, transform 180ms ease-out; }
  .mg-btn:hover, .mg-btn:focus-visible { transform: translate3d(0, -2px, 0); }
  .mg-card { transition: box-shadow 220ms ease-out, transform 220ms ease-out; }
  .mg-card:hover, .mg-card:focus-visible { transform: translate3d(0, -4px, 0); }
  .mg-card .go { transform: translate3d(-8px, 0, 0); transition: opacity 220ms ease-out, transform 220ms ease-out; }
  .mg-card:hover .go, .mg-card:focus-visible .go { transform: none; }
  .mg-card .mins { transition: opacity 160ms ease-out; }
  .mg-bar { transition: opacity 200ms ease-out; }
  .mg-photo .zoom { transition: transform 1600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .mg-photo:hover .zoom { transform: scale(1.03); }
  .mg-num-note, .mg-tip, .mg-dot .tipn { transition: opacity 160ms ease-out; }
  .mg-checked .i { transition: transform 200ms ease-out; }
  /* the band closing into the compact band (C-Paged: 320 ms) */
  .mg-r-field { transition: transform 320ms cubic-bezier(0.3, 0.7, 0.2, 1); }
  .mg-r-full { transition: opacity 180ms ease; }
  .mg-r-mini { transition: opacity 260ms ease 80ms; }
}

/* 0.66.4: with no script a short desktop screen shows the first quote and the first key point only */
@media (min-width: 1024px) and (pointer: fine) and (max-height: 960px) {
  [data-fit-drop] { display: none; }
  .mg-fit-on [data-fit-drop] { display: revert; }
}

/* 0.66.5 (AUDIT-3, item 5): a short desktop (1366 x 768, 1280 x 720) steps the type down before any safety scroll */
@media (min-width: 1024px) and (pointer: fine) and (max-height: 820px) {
  .mg-h2 { font-size: clamp(28px, 3.1vw, 44px); }
  .mg-h2-big { font-size: clamp(32px, 3.6vw, 52px); }
  .mg-stand { font-size: 19px; }
  .mg-lede { font-size: 17px; }
  .mg-pad { padding-top: 28px; padding-bottom: 24px; }
  .mg-bignum { font-size: 56px; }
  .mg-bignum.long { font-size: 42px; }
  .mg-panel-top .mg-ill-panel { height: calc(var(--mg-spread-h) * 0.44); }
  .mg-panel-top { padding-top: 24px; }
  .mg-tile .v { font-size: 52px; }
  .mg-sec { min-height: 104px; }
  .mg-sec .v { font-size: 40px; }
  .mg-back-h { font-size: clamp(26px, 2.6vw, 36px); }
  .mg-split.even > .mg-col-text:first-child, .mg-split.even > .mg-col-text:last-child { padding-top: 36px; padding-bottom: 28px; }
  .mg-col-text, .mg-col-body { gap: 14px; }
  .mg-next { padding-top: 14px; padding-bottom: 14px; }
}

/* ---------------------------------------------------------------- 0.67.0 (decision 0047): the full-bleed opener and cover
   Karl, 4 Nov 2026: "full-screen and a HELL OF A LOT more interesting". Magazine art, or a real landscape photograph,
   fills the spread under the top bar (the approved canvas, artdir-t215). The kicker, the headline, the standfirst, the one
   number and Read the full piece sit on the calm left side, top or bottom as measured on the picture, in bone or ink as
   measured, on a solid panel when that colour cannot reach 4.5:1 there; never a gradient wash. On a phone and narrow
   screens the picture sits on top at 16:9 and the text below it on the page ground: never text over the picture. */
.mg-spread.mg-full { color: var(--mg-ink); }
.mg-spread.mg-full > .mg-field { background: var(--mg-page) !important; }
.mg-spread.mg-full.dark a.mg-link { color: var(--mg-green); }
.mg-fb { position: relative; display: flex; flex-direction: column; }
.mg-fb-pic { order: -1; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--mg-ink); }
.mg-fb-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 0.67.2 (AUDIT-4, N4): the phone's 16:9 frame trims the calm side, not the subject, and the picture is larger than the
   frame on every edge by more than the parallax moves it, so no dark line shows under it */
.mg-fb-crop { width: 100%; height: 100%; transform: scale(1.18); transform-origin: var(--fx, 50%) var(--fy, 50%); }
.mg-fb-pic { background: var(--mg-page); }
/* 0.67.2 (AUDIT-4, N5): a spread whose content scrolls inside it on a short laptop says so, plainly; never a gradient */
.mg-more { display: none; }
.mg-fb-credit { order: -1; margin: 0; padding: 8px var(--mg-gutter) 0; font-size: 12px; line-height: 1.4; color: var(--mg-ink-2); }
.mg-fb-credit span + span::before { content: "· "; }
.mg-fb-text { display: flex; flex-direction: column; gap: 16px; padding: 24px var(--mg-gutter) 36px; }
.mg-fb-text > p { margin: 0; }
.mg-fb-h { margin-top: 0 !important; font-weight: 800; font-size: clamp(32px, 3.5vw, 50px); line-height: 1.04; text-wrap: balance; }
.mg-fb .mg-stand { margin: 0; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.35; }
.mg-fb .mg-meta { margin: 0; font-size: 14px; }
.mg-fb-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; padding-top: 8px; border-top: 1px solid rgba(14,22,38,0.35); }
.mg-fb-num { display: flex; flex-direction: column; gap: 2px; }
.mg-fb-num p { margin: 0; }
.mg-fb .mg-bignum { margin: 0; font-size: clamp(44px, 4vw, 58px); line-height: 1; }
.mg-fb .mg-bignum.long { font-size: clamp(34px, 3vw, 44px); }
.mg-fb-numw { font-size: 14px; line-height: 1.35; }
.mg-fb .mg-btn { white-space: nowrap; }
/* the cover's own text on the picture: its number and line a step smaller, the pieces one under another */
.mg-cover.mg-fb .mg-cover-no { margin-top: 0; }
.mg-cover.mg-fb .mg-cover-line { margin-top: 0; font-size: clamp(32px, 3.4vw, 50px); }
.mg-cover.mg-fb .mg-cover-go { margin: 0; }
.mg-cover.mg-fb .mg-oncover { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
.mg-cover.mg-fb .mg-oncover li { border-top: 1px solid currentColor; padding: 7px 0; gap: 0; }
.mg-cover.mg-fb .mg-oncover a { flex-direction: row; align-items: baseline; gap: 12px; }
.mg-cover.mg-fb .mg-oncover .n { flex: none; font-size: 17px; }
.mg-cover.mg-fb .mg-oncover .t { font-size: 17px; line-height: 1.2; }
@media (max-width: 1023px), (pointer: coarse) {
  .mg-spread.mg-full .mg-btn.light { background: var(--mg-ink); color: var(--mg-bone); }
  .mg-spread.mg-full .on-dark :focus-visible, .mg-spread.mg-full :focus-visible { outline-color: var(--mg-ink); }
}
@media (min-width: 1024px) and (pointer: fine) {
  .mg-fb, .mg-cover.mg-fb { display: block; height: 100%; overflow: hidden; }
  .mg-fb-pic { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; }
  .mg-fb-crop { transform: none; }
  /* in the right gutter, clear of the cards and of the Next arrow */
  .mg-scroll.has-more > .mg-more { display: block; position: sticky; bottom: 0; z-index: 8; align-self: flex-end;
                                   width: max-content; margin: 8px calc(16px - var(--mg-gutter)) 0 auto; padding: 4px 12px;
                                   background: var(--mg-ink);
                                   color: var(--mg-bone); font-weight: 700; font-size: 14px; line-height: 1.4; }
  /* sized to fit the spread by the type steps below, never a scroll: a scroll box would flash a bar while the text rises in */
  /* the left third the picture keeps calm: the column ends at 42% of the width, where the measured region ends */
  .mg-fb-text { position: absolute; z-index: 2; left: var(--mg-gutter); width: min(500px, 34vw); padding: 0; gap: 18px; }
  .mg-fb.has-panel .mg-fb-text { width: calc(min(500px, 34vw) + 56px); }
  /* How we counted opens above the number, inside the text block, so it never makes the block overflow */
  .mg-fb .mg-num-note { top: auto; bottom: calc(100% + 6px); }
  .mg-fb.at-bottom .mg-fb-text { bottom: 56px; }
  .mg-fb.at-top .mg-fb-text { top: 56px; }
  .mg-fb.has-panel .mg-fb-text { padding: 24px 28px 26px; }
  .mg-fb.tone-bone .mg-fb-text, .mg-fb.tone-bone .mg-fb-credit { color: var(--mg-bone); }
  .mg-fb.tone-ink .mg-fb-text, .mg-fb.tone-ink .mg-fb-credit { color: var(--mg-ink); }
  .mg-fb.tone-bone.has-panel .mg-fb-text { background: rgba(14,22,38,0.86); }
  .mg-fb.tone-ink.has-panel .mg-fb-text { background: rgba(246,242,234,0.9); }
  .mg-fb.tone-bone .mg-fb-foot { border-top-color: rgba(246,242,234,0.45); }
  .mg-fb.tone-bone :focus-visible { outline-color: var(--mg-bone); }
  .mg-fb.tone-ink :focus-visible { outline-color: var(--mg-ink); }
  /* the AI credit is read on any corner of any picture: always on its own small solid chip */
  .mg-fb-credit { position: absolute; z-index: 2; right: 24px; bottom: 14px; padding: 2px 8px; }
  .mg-fb.tone-bone .mg-fb-credit { background: rgba(14,22,38,0.72); }
  .mg-fb.tone-ink .mg-fb-credit { background: rgba(246,242,234,0.82); }
  .mg-cover.mg-fb .mg-cover-no .big { font-size: clamp(88px, min(10vw, 16vh), 150px); }
  .mg-cover.mg-fb .mg-cover-no .no { font-size: clamp(32px, min(3vw, 5vh), 44px); padding-top: 10px; }
  .mg-cover.mg-fb .mg-cover-no .when { font-size: clamp(22px, min(2.2vw, 3.6vh), 30px); }
  .mg-cover.mg-fb .mg-cover-line { font-size: clamp(30px, min(3vw, 5vh), 44px); }
  .mg-cover.mg-fb .mg-fb-text { gap: 14px; }
  .mg-cover.mg-fb .mg-lede { font-size: 16px; line-height: 1.4; }
  .mg-cover.mg-fb .mg-oncover { padding-top: 0; }
}
@media (min-width: 1024px) and (pointer: fine) and (max-height: 820px) {
  .mg-fb-h { font-size: clamp(30px, 3vw, 42px); }
  .mg-fb .mg-stand { font-size: 18px; }
  .mg-fb .mg-bignum { font-size: 46px; }
  .mg-fb .mg-bignum.long { font-size: 36px; }
  .mg-fb-text { gap: 14px; }
  .mg-fb.at-bottom .mg-fb-text { bottom: 32px; }
  .mg-fb.at-top .mg-fb-text { top: 32px; }
  .mg-cover.mg-fb .mg-lede { font-size: 15px; }
  .mg-cover.mg-fb .mg-cover-no .big { font-size: 84px; }
  .mg-cover.mg-fb .mg-cover-line { font-size: 34px; }
  .mg-cover.mg-fb .mg-oncover .t { font-size: 16px; }
  .mg-cover.mg-fb .mg-fb-text { gap: 12px; }
}
@media (min-width: 1024px) and (pointer: fine) and (max-height: 740px) {
  .mg-fb-h { font-size: clamp(28px, 2.7vw, 36px); }
  .mg-fb .mg-stand { font-size: 17px; }
  .mg-fb-text { gap: 10px; }
  .mg-cover.mg-fb .mg-cover-no .big { font-size: 72px; }
  .mg-cover.mg-fb .mg-cover-line { font-size: 30px; }
  .mg-cover.mg-fb .mg-oncover .t { font-size: 15px; }
  .mg-cover.mg-fb .mg-oncover li { padding: 5px 0; }
  .mg-cover.mg-fb .mg-fb-text { gap: 10px; }
}

/* ---------------------------------------------------------------- 0.67.4: the art is never cropped away on a wide spread
   Karl, 4 Nov 2026, on a window about 2000 x 870: "some of the illustrations are not scaled well, compared to the
   artifact". cover on a 3:2 picture in a 2.3:1 spread cut a third of its height. Each full-bleed opener and the cover is
   a size container (desktop only), so the layout follows the spread's own shape:
   - up to 1.725:1 (the art's 3:2, plus 15%) the art covers the spread, cropped on the text side first;
   - wider, magazine art is fitted to the spread's height on the side away from the text, the rest of the spread is the
     art's own edge colours (measured when it was made), and the art's text-side edge is masked into them over its first
     10% (a mask on the picture's own edge, not a wash over anything);
   - a real photograph keeps cover until it would lose more than a quarter of its height; then it is framed, whole, on
     ink, with the text on its panel. */
@media (min-width: 1024px) and (pointer: fine) {
  .mg-fb, .mg-cover.mg-fb { container: fb / size; }
  .mg-fb-crop { position: relative; }
  .mg-fb.is-art .mg-fb-pic { background: var(--fill, var(--mg-ink)); }
}
@container fb (min-aspect-ratio: 1725 / 1000) {
  .mg-fb.is-art .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none;
                                 object-fit: contain;
                                 -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%);
                                 mask-image: linear-gradient(to right, transparent 0, #000 10%); }
}
@container fb (min-aspect-ratio: 18 / 10) { .mg-fb.fr-18 .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; object-fit: contain; } .mg-fb.fr-18 .mg-fb-pic { background: var(--mg-ink); } .mg-fb.fr-18.tone-bone .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(14,22,38,0.86); } .mg-fb.fr-18.tone-ink .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(246,242,234,0.9); } }
@container fb (min-aspect-ratio: 20 / 10) { .mg-fb.fr-20 .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; object-fit: contain; } .mg-fb.fr-20 .mg-fb-pic { background: var(--mg-ink); } .mg-fb.fr-20.tone-bone .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(14,22,38,0.86); } .mg-fb.fr-20.tone-ink .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(246,242,234,0.9); } }
@container fb (min-aspect-ratio: 22 / 10) { .mg-fb.fr-22 .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; object-fit: contain; } .mg-fb.fr-22 .mg-fb-pic { background: var(--mg-ink); } .mg-fb.fr-22.tone-bone .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(14,22,38,0.86); } .mg-fb.fr-22.tone-ink .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(246,242,234,0.9); } }
@container fb (min-aspect-ratio: 24 / 10) { .mg-fb.fr-24 .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; object-fit: contain; } .mg-fb.fr-24 .mg-fb-pic { background: var(--mg-ink); } .mg-fb.fr-24.tone-bone .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(14,22,38,0.86); } .mg-fb.fr-24.tone-ink .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(246,242,234,0.9); } }
@container fb (min-aspect-ratio: 26 / 10) { .mg-fb.fr-26 .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; object-fit: contain; } .mg-fb.fr-26 .mg-fb-pic { background: var(--mg-ink); } .mg-fb.fr-26.tone-bone .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(14,22,38,0.86); } .mg-fb.fr-26.tone-ink .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(246,242,234,0.9); } }
@container fb (min-aspect-ratio: 28 / 10) { .mg-fb.fr-28 .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; object-fit: contain; } .mg-fb.fr-28 .mg-fb-pic { background: var(--mg-ink); } .mg-fb.fr-28.tone-bone .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(14,22,38,0.86); } .mg-fb.fr-28.tone-ink .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(246,242,234,0.9); } }
@container fb (min-aspect-ratio: 30 / 10) { .mg-fb.fr-30 .mg-fb-pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; object-fit: contain; } .mg-fb.fr-30 .mg-fb-pic { background: var(--mg-ink); } .mg-fb.fr-30.tone-bone .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(14,22,38,0.86); } .mg-fb.fr-30.tone-ink .mg-fb-text { padding: 24px 28px 26px; width: calc(min(500px, 34vw) + 56px); background: rgba(246,242,234,0.9); } }

/* ---------------------------------------------------------------- 0.68.0 (decision 0048): a spread's motion loop
   magazine.js puts the video where the still was (the still stays as its poster) and hides the still; with no script or
   with reduced motion the still is all there is. The video takes the still's own fit. */
.mg-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-photo.is-ill .mg-vid, .mg-ill-panel .mg-vid { object-fit: contain; }
.mg-has-motion > img.mg-img { display: none; }
@container fb (min-aspect-ratio: 1725 / 1000) {
  .mg-fb.is-art .mg-fb-pic .mg-vid { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none;
                                     object-fit: contain;
                                     -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%);
                                     mask-image: linear-gradient(to right, transparent 0, #000 10%); }
}

/* ---------------------------------------------------------------- 0.69.0 (decision 0046 amended): direction A
   Karl, 4 Nov 2026, on the article design canvas (artdir-t215/articles/project/Main.dc.html, Phone.dc.html): "I agree with
   A - that looks good - are you able to have the article header following and add reaction, social and share buttons to
   it too as you enter an article?" The picture full width at the top; the kicker, title, standfirst and who it is for in
   a 760 column; the body in 680 with a drop cap; a pull quote wider, between sections; the one number as a band in the
   field colour; the headings with a small numbered kicker; our view an ink box; the ledger closed at the end. The band is
   slim and becomes the header that follows once the title has gone under it: Back, the short title, N of M and minutes,
   the progress line, and React, Share and Save. */
.mg-reader { --mg-band: 60px; }
.mg-reader .mg-r-full { display: none; }
.mg .mg-reader .mg-r-back { top: 8px; }
.mg-reader .mg-r-mini { top: 8px; left: 250px; right: 330px; opacity: 1; justify-content: flex-start; text-align: left; }
.mg-reader .mg-r-mini .t { opacity: 0; }
.mg-reader.is-compact .mg-r-mini .t { opacity: 1; }
.mg-reader.is-compact .mg-r-field { transform: none; }
.mg-r-acts { position: absolute; top: 8px; right: clamp(16px, 2.2vw, 32px); z-index: 3; display: flex; align-items: center; gap: 8px;
             pointer-events: auto; opacity: 0; visibility: hidden; color: var(--mg-bone); }
.mg-reader.is-compact .mg-r-acts { opacity: 1; visibility: visible; }
.mg-act-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid currentColor;
            background: transparent; color: inherit; font-family: var(--mg-sans); font-weight: 700; font-size: 15px; line-height: 1;
            text-decoration: none; cursor: pointer; list-style: none; }
.mg-act-b::-webkit-details-marker { display: none; }
.mg-act-b[aria-pressed="true"] { background: var(--mg-mint); border-color: var(--mg-mint); color: var(--mg-ink); }
.mg-act-pop { position: relative; }
.mg-act-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
                width: max-content; max-width: min(92vw, 440px); padding: 12px 14px; background: var(--mg-paper); color: var(--mg-ink);
                border: 1px solid var(--mg-ink); box-shadow: 0 14px 30px rgba(14,22,38,0.22); }
.mg .mg-act-net { font-weight: 700; font-size: 15px; color: var(--mg-green); text-underline-offset: 3px; }
.mg-act-panel .mg-act-b { color: var(--mg-ink); }
.mg-rx { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.mg-rx .rx-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--mg-rule);
                 background: var(--mg-paper); color: var(--mg-ink); font-family: var(--mg-sans); font-weight: 500; font-size: 15px; cursor: pointer; }
.mg-rx .rx-btn[aria-pressed="true"] { border-color: var(--mg-green); background: #E3F3EB; }
.mg-rx .rx-icon { width: 18px; height: 18px; }
.mg-rx .rx-n { font-weight: 700; }
.mg-act-head { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.mg-act-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mg-act-head .mg-act-b { color: var(--mg-ink); }
.mg-act[inert], .mg-act-row[inert], .mg-act-pub[inert] > * { opacity: 0.55; }
/* 0.71.2: the Sources toggle (magazine.js) works in the preview too, so the preview's inert wraps the other actions only;
   with no script it is not drawn and the markers show */
.mg-act-pub { display: contents; }
.mg-act-src .s { font-weight: 500; }
:root:not(.mg-js) .mg-act-src { display: none; }
.mg-act-note { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--mg-ink-2); }
.mg .bar-said { margin: 0; font-size: 14px; color: var(--mg-ink-2); }
html:not([data-note-js]) .mg .nt-js { display: none !important; }
.mg-r-hero { position: relative; margin: 0; }
.mg-r-hero img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.mg-r-hero.is-ill img { object-fit: contain; background: var(--mg-ill); }
.mg-r-hero figcaption { position: absolute; right: 16px; bottom: 12px; padding: 4px 8px; background: var(--mg-page); color: var(--mg-ink-2);
                        font-size: 12px; line-height: 1.4; }
.mg-reader .mg-article { width: min(1120px, 100% - 2 * var(--mg-rgut)); padding-top: 56px; }
.mg-reader .mg-article > header { max-width: 760px; margin: 0 auto; }
.mg-reader .mg-article > .body, .mg-reader .mg-article > .mg-box, .mg-reader .mg-article > .mg-checked { max-width: 680px; margin-left: auto; margin-right: auto; }
.mg-reader .mg-article > .body + .body { margin-top: 0; }
.mg-disclose { font-size: 15px; line-height: 1.5; color: var(--mg-ink-2); }
.mg-drop::first-letter { float: left; padding: 8px 10px 0 0; font-family: var(--mg-serif); font-weight: 800; font-size: 86px; line-height: 0.8;
                         color: var(--fld, var(--mg-ink)); }
.mg-sub-k { display: block; margin-bottom: 6px; font-family: var(--mg-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--fld, var(--mg-ink)); }
.mg-pull { max-width: 940px; margin: 48px auto; text-align: center; font-family: var(--mg-serif); font-style: italic; font-weight: 700;
           font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; color: var(--fld, var(--mg-ink)); }
.mg-pull p { margin: 0; }
.mg-pull footer { margin-top: 14px; font-family: var(--mg-sans); font-style: normal; font-weight: 500; font-size: 15px; color: var(--mg-ink); }
.mg-numband { margin: 48px 0; padding: 48px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px;
              color: var(--mg-bone); }
.mg-numband p { margin: 0; }
.mg-numband .v { font-family: var(--mg-serif); font-weight: 800; font-size: clamp(64px, 8vw, 120px); line-height: 0.95; }
.mg-numband .w { max-width: 460px; font-size: 20px; line-height: 1.45; }
.mg-break { margin: 48px 0; aspect-ratio: 16 / 7; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px 20px;
            background: #E6DED0; border: 1px solid #C9BEAA; color: #4A4234; }
.mg-break strong { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-break span { font-size: 15px; line-height: 1.4; }
.mg-break .mg-break-n { font-size: 13px; }
.mg-reader .mg-view { max-width: 760px; margin: 48px auto 0; padding: 36px 40px; }
.mg-reader .mg-view p:not(.mg-kick) { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.4; }
@media (max-width: 719px) {
  .mg-reader { --mg-band: 52px; }
  .mg .mg-reader .mg-r-back { top: 6px; }
  /* the phone's bar: the arrow for Back, the title wrapped (never cut), Share */
  .mg-reader .mg-r-back-w { display: none; }
  .mg .mg-reader .mg-r-back { padding: 0 14px; }
  .mg-reader .mg-r-mini { display: flex; top: 6px; left: 72px; right: 96px; height: 40px; }
  .mg-reader .mg-r-mini .k { display: none; }
  .mg-reader .mg-r-mini .t { font-size: 14px; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; }
  .mg-r-acts { top: 4px; right: 12px; }
  .mg-r-acts .mg-act-react, .mg-r-acts .mg-act-save { display: none; }      /* the phone's bar: Back, the title, Share */
  .mg-r-acts .mg-act-src { display: none; }                                    /* 0.71.2: under the standfirst on a phone */
  .mg-r-hero img { aspect-ratio: 3 / 2; }
  .mg-r-hero figcaption { position: static; padding: 6px 20px 0; background: none; }
  .mg-reader .mg-article { padding-top: 24px; }
  .mg-drop::first-letter { font-size: 62px; padding: 6px 8px 0 0; }
  .mg-pull { margin: 32px 0; text-align: left; font-size: 27px; line-height: 1.2; }
  .mg-numband { margin: 32px calc(-1 * var(--mg-rgut)); padding: 28px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .mg-numband .v { font-size: 72px; }
  .mg-numband .w { font-size: 16px; }
  .mg-break { margin: 32px calc(-1 * var(--mg-rgut)); aspect-ratio: auto; min-height: 200px; }
  .mg-reader .mg-view { margin: 32px calc(-1 * var(--mg-rgut)) 0; padding: 28px 20px; }
  .mg-reader .mg-view p:not(.mg-kick) { font-size: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mg-r-acts, .mg-reader .mg-r-mini .t { transition: opacity 200ms ease, visibility 200ms; }
}

/* ---------------------------------------------------------------- 0.70.0 (decision 0046 amended): the header on the picture
   Karl, 4 Nov 2026, on the reading view: "it would be nice to see the articles header there on top of the image, and how
   long it will take to read, with an arrow down to indicate scrolling." When the top picture is magazine art or a real
   landscape photograph, the reading page's top is the full-bleed opener's own block (.mg-fb, _over.html): its measured
   tone and place, its panel, its fit on a wide screen and its credit chip, never a wash. On the paged desktop it is as
   tall as the window less the top bar and the band, so the header and the cue are in view on arrival; on a phone (and under
   1024 px or with touch) it is the opener's phone form, the picture at 16:9 with the header below, and no cue. */
.mg-r-over .mg-fb-text .mg-kick { color: inherit; }
.mg-r-over .mg-fb-h { margin-top: 12px; }
.mg-r-over .mg-r-time { margin: 0; }
.mg-r-cue { display: none; }
/* never the opener's edge fill or its frame on a wide screen (0.68.1): the picture covers the block toward its subject */
.mg-r-over.mg-fb.is-art .mg-fb-pic img, .mg-r-over.mg-fb.is-photo .mg-fb-pic img { position: static; width: 100%; height: 100%; max-width: none; object-fit: cover;
                                                  -webkit-mask-image: none; mask-image: none; }
.mg-article.is-over { padding-top: 32px; }
.mg-article.is-over > header .mg-r-meta { margin-top: 0; }
#mg-r-body { scroll-margin-top: calc(var(--mg-bar) + var(--mg-top) + var(--mg-band)); }
.mg-overlay #mg-r-body { scroll-margin-top: var(--mg-band); }
#mg-r-body:focus { outline: none; }
@media (min-width: 1024px) and (pointer: fine) {
  .mg-r-over.mg-fb { height: calc(100vh - var(--mg-bar) - var(--mg-top) - var(--mg-band)); min-height: 460px; }
  .mg-r-over.mg-fb.at-bottom .mg-fb-text { bottom: 84px; }
  .mg-r-over .mg-r-cue { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%);
                         display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
                         font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap; }
  .mg-r-over.tone-bone .mg-r-cue { color: var(--mg-bone); background: rgba(14,22,38,0.72); }
  .mg-r-over.tone-ink .mg-r-cue { color: var(--mg-ink); background: rgba(246,242,234,0.82); }
  .mg-r-over .mg-r-cue .ar { display: inline-block; font-size: 18px; }
  .mg-r-over .mg-r-cue:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
}
@media (min-width: 1024px) and (pointer: fine) and (max-height: 820px) {
  .mg-r-over.mg-fb.at-bottom .mg-fb-text { bottom: 72px; }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* a quiet nudge, three times after the reveal, then still; nothing at all under reduced motion */
  .mg-r-over .mg-r-cue .ar { animation: mg-cue 1.6s ease-in-out 1.2s 3; }
  @keyframes mg-cue { 0%, 100% { transform: none; } 50% { transform: translate3d(0, 5px, 0); } }
}

/* ---------------------------------------------------------------- 0.70.0 (decision 0049): a feature's picture breaks
   A picture between two sections, where direction A placed the placeholder: full width of the 1120 column, a stock
   picture or a photograph cropped toward its focal point at 16:9, an evidence crop, a chart or magazine art shown whole;
   the caption and the credit under it in the reading column. On a phone it runs to the screen's edges. */
.mg-pbreak { max-width: 1120px; margin: 48px auto; }
.mg-pbreak img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mg-bone); }
.mg-pbreak.is-whole img { aspect-ratio: auto; object-fit: contain; }
.mg-pbreak figcaption { max-width: 680px; margin: 10px auto 0; font-size: 15px; line-height: 1.45; color: var(--mg-ink-2); }
.mg-pbreak figcaption .c { color: var(--mg-ink); }
.mg-pbreak figcaption .cr { font-size: 13px; }
.mg-pbreak figcaption a { color: inherit; text-underline-offset: 3px; }
.mg-pbreak .mg-break-n { display: block; margin-top: 4px; font-size: 13px; }
/* 0.70.1: an in-column break sits in the 680 px reading column, where a 1280 px file is not stretched */
.mg-pbreak.is-col { max-width: 680px; }
@media (max-width: 719px) {
  .mg-pbreak { margin: 32px calc(-1 * var(--mg-rgut)); }
  .mg-pbreak figcaption { padding: 0 var(--mg-rgut); }
}
/* 0.72.0 (decision 0051): the feature's video. Our own frame in a 16:9 box with a play button; the player (an iframe from
   youtube-nocookie.com, magazine.js) takes the same box on the press, so nothing moves. Full width on a phone. */
.mg-video { max-width: 1120px; margin: 40px auto 48px; }
.mg-video-box { position: relative; aspect-ratio: 16 / 9; background: var(--mg-ink); overflow: hidden; }
.mg-video-play { position: absolute; inset: 0; display: block; color: var(--mg-ink); }
.mg-video-img, .mg-video-box iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mg-video-btn { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
                display: flex; align-items: center; justify-content: center; padding-left: 4px; box-sizing: border-box;
                background: var(--mg-mint); color: var(--mg-ink); box-shadow: 0 10px 28px rgba(14,22,38,0.35);
                transition: transform 200ms ease; }
@media (hover: hover) { a.mg-video-play:hover .mg-video-btn { transform: scale(1.06); } }
a.mg-video-play:focus-visible { outline: 3px solid var(--mg-mint); outline-offset: 3px; }
a.mg-video-play:focus-visible .mg-video-btn { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .mg-video-btn { transition: none; } }
.mg-video.is-unset .mg-video-btn { opacity: 0.7; }
.mg-video-unset { margin: 0 0 8px; padding: 8px 12px; background: #FFF4D6; color: var(--mg-ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.mg-video figcaption { max-width: 680px; margin: 10px auto 0; font-size: 15px; line-height: 1.45; color: var(--mg-ink-2); }
.mg-video figcaption .c { color: var(--mg-ink); font-weight: 700; }
@media (max-width: 719px) {
  .mg-video { margin: 32px calc(-1 * var(--mg-rgut)); }
  .mg-video figcaption { padding: 0 var(--mg-rgut); }
  /* the frame's words fill a phone's box; the button sits in its corner so it covers none of them */
  .mg-video-btn { left: auto; top: auto; right: 12px; bottom: 12px; width: 52px; height: 52px; margin: 0; }
  .mg-video-unset { margin: 0 var(--mg-rgut) 8px; }
}

/* ---------------------------------------------------------------- 0.71.0 (decision 0050): the cover and the contents
   Karl, 4 Nov 2026: "E looks great", the phone cover "looks good now", and on the contents: "we are using a landscape
   layout, and want to avoid scrolling", the masonry, "explore this too in 2 pages", "can you indicate page 2 in a different
   way?", "Can you have a transition animation?" and "on hover should we add a slight ken burns zoom effect too?". The
   approved files are artdir-t215/cover/project/Strip.dc.html, Phone.dc.html and ContentsFlip.dc.html; their colours,
   sizes and timings are used as they stand, the type scaled to the spread's height (the canvas is 900 px tall with its own
   header; our spread is the window less the top bar and the strip). */
.mg-k-cover > .mg-field { background: var(--mg-page) !important; }
.cv { color: var(--mg-ink); }
.cv a { color: var(--mg-ink); }
.cv a:hover { color: #2F7A57; }
.cv a.cv-open, .cv a.cv-open:hover { color: #F3EEE4; text-decoration: none; }
.cv-pic { margin: 0; overflow: hidden; background: #E9DAC4; }
.cv-pic img, .cv-pic video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-tag { margin: 0; display: flex; align-items: center; gap: 14px; background: rgba(243,238,228,0.94); padding: 10px 18px 10px 16px; }
.cv-tag .no { font-family: var(--mg-serif); font-weight: 800; font-size: 46px; line-height: 0.9; }
.cv-tag .rule { width: 1px; height: 42px; background: var(--mg-ink); }
.cv-tag .tx { display: flex; flex-direction: column; gap: 4px; }
.cv-tag .i { font-family: var(--mg-serif); font-style: italic; font-size: 22px; line-height: 1; color: #6A5226; }
.cv-tag .m { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; }
.cv-h { margin: 0; font-family: var(--mg-serif); font-weight: 800; font-size: 66px; line-height: 0.98; text-wrap: balance; }
.cv-go { display: flex; align-items: center; gap: 20px; }
.cv-open { display: inline-block; background: var(--mg-ink); color: #F3EEE4; text-decoration: none; font-weight: 800; font-size: 17px; padding: 16px 26px; }
.cv-open:hover, .cv-open:focus-visible { box-shadow: 0 10px 22px rgba(14,22,38,0.34); }
.cv-facts { font-size: 14px; color: #3A3427; }
.cv-credit { background: rgba(243,238,228,0.9); color: #4A4234; font-size: 12px; padding: 5px 9px; }
.cv-strip { list-style: none; margin: 0; padding: 0; }
.cv-strip a { display: flex; text-decoration: none; min-width: 0; }
.cv-card-pic { display: block; overflow: hidden; }
.cv-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-strip .k { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: #6A5226; text-transform: uppercase; }
.cv-strip .t { font-family: var(--mg-serif); font-weight: 700; font-size: 19px; line-height: 1.2; }

/* the contents' cards, on every screen */
.ct-flip { color: var(--mg-ink); background: var(--mg-page); }
.ct-flip a { color: var(--mg-ink); }
.ct-flip a:hover { color: #2F7A57; }
.ct-flip button:focus-visible, .ct-flip a:focus-visible { outline: 3px solid #2F9E6E; outline-offset: 2px; }
.ct-ed { background: #1B2A4A; color: #F3EEE4; display: flex; flex-direction: column; gap: 22px; }
.ct-no { margin: 0; display: flex; align-items: flex-end; gap: 18px; }
.ct-no .n { font-family: var(--mg-serif); font-weight: 800; font-size: 96px; line-height: 0.8; }
.ct-no .tag { display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; }
.ct-no .i { font-family: var(--mg-serif); font-style: italic; font-size: 24px; line-height: 1; color: #E8C9A0; }
.ct-no .m { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.ct-note { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(243,238,228,0.4); padding-top: 22px; min-height: 0; }
.ct-note p { margin: 0; }
.ct-from { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: #6FD2A6; text-transform: uppercase; }
.ct-from .bar { width: 28px; height: 4px; background: #2F9E6E; }
.ct-note .lead { font-family: var(--mg-serif); font-size: 31px; line-height: 1.28; }
.ct-note .more { font-family: var(--mg-serif); font-size: 19px; line-height: 1.45; color: #D9D3C6; }
.ct-note .sig { font-family: var(--mg-serif); font-style: italic; font-size: 24px; }
.ct-note.mg-tight .lead { font-size: 24px; }
.ct-note.mg-tight .more { font-size: 16px; }
.ct-flip .ct-ed a.ct-letter { color: #6FD2A6; font-weight: 700; font-size: 15px; }
.ct-foot { margin: auto 0 0; font-size: 11px; line-height: 1.45; color: #C9C2B4; }
.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--mg-ink); padding-bottom: 10px; }
.ct-head .l { display: flex; align-items: flex-end; gap: 18px; }
.ct-h { margin: 0; font-family: var(--mg-serif); font-weight: 800; font-size: 60px; line-height: 0.9; }
.ct-range { font-family: var(--mg-serif); font-style: italic; font-size: 19px; color: #6A5226; padding-bottom: 6px; }
.ct-range.big { font-size: 24px; padding-bottom: 4px; }
.ct-head .r, .ct-bar .r { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.ct-of { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; margin-right: 6px; }
.ct-ghost, .ct-solid { font-family: inherit; cursor: pointer; text-align: left; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.2; }
.ct-ghost { border: 1px solid var(--mg-ink); padding: 12px 16px; background: transparent; color: var(--mg-ink); }
.ct-flip .ct-solid, .ct-flip a.ct-solid:hover { border: 0; background: var(--mg-ink); color: #F3EEE4; padding: 13px 18px; }
.ct-pages { display: flex; align-items: baseline; gap: 6px; font-family: var(--mg-serif); padding-bottom: 2px; }
.ct-pages .b { font-weight: 800; font-size: 44px; line-height: 0.8; }
.ct-pages .i { font-style: italic; font-size: 18px; color: #6A5226; }
.ct-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.ct-bar .r { justify-self: end; }                       /* 0.71.1: the number strip centred, as the canvas has it */
.ct-nums { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ct-num { font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 34px; height: 30px;
          text-decoration: none; border: 1px solid rgba(14,22,38,0.3); color: #5A5244; font-weight: 700; font-size: 13px; background: transparent; }
.ct-flip a.ct-num.on, .ct-flip a.ct-num.on:hover { border: 0; background: var(--mg-ink); color: #F3EEE4; font-weight: 800; }
.ct-c { display: flex; flex-direction: column; gap: 8px; text-decoration: none; min-height: 0; }
.ct-c .k { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #6A5226; text-transform: uppercase; line-height: 1.3; }
.ct-c .tt { font-family: var(--mg-serif); font-weight: 800; font-size: 19px; line-height: 1.08; }
.ct-c .ln { font-size: 14px; line-height: 1.4; color: #2E3440; }
.ct-c .cr { font-size: 10px; line-height: 1.3; color: #5A5244; }
.ct-tx { display: flex; flex-direction: column; gap: 6px; }
.ct-pic .ct-tx { gap: 8px; }
.kb { display: block; overflow: hidden; }
.ct-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-pic.is-mint { background: #E3EFE7; gap: 0; }
.ct-pic.is-mint .ct-tx { gap: 6px; padding: 10px 14px 12px; }
.ct-pic.is-mint .k { color: #2F5D4B; }
.ct-pic.is-mood .ct-img { filter: grayscale(0.5) sepia(0.15); }    /* 0.71.1: the numbers' mood picture, as the canvas tints it */
.mg-arr { display: inline-block; width: 0.9em; height: auto; vertical-align: -0.05em; margin: 0 0.1em; }
.ct-voice { flex-direction: row; align-items: center; gap: 12px; }
.ct-face { display: block; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; object-fit: cover; filter: grayscale(0.35); }
.ct-text.is-navy { background: var(--mg-ink); padding: 14px 16px 16px; gap: 6px; }
.ct-flip .ct-text.is-navy .k { color: #E8C9A0; }
.ct-flip .ct-text.is-navy .tt { color: #F3EEE4; font-size: 20px; }
.ct-nav { font-family: inherit; cursor: pointer; text-align: left; color: var(--mg-ink); background: transparent; border: 0;
          padding-left: 0; padding-right: 0; padding-bottom: 0; }
.ct-nav .tx { font-family: var(--mg-serif); font-size: 16px; line-height: 1.35; }
.ct-start .k { color: #2F7A57; }
.ct-c:hover .tt, .ct-c:focus-visible .tt { color: #2F7A57; }
.ct-flip .ct-text.is-navy:hover .tt { color: #6FD2A6; }
/* the Ken Burns zoom on hover: 1.8 s to 1.06, each card from its own origin; never with reduced motion */
.ct-flip .kb .ct-img { transition: transform 1800ms cubic-bezier(.2,.7,.2,1); transform-origin: var(--kb, 50% 50%); }
@media (hover: hover) { .ct-flip a:hover .kb .ct-img { transform: scale(1.06); } }
.ct-flip a:focus-visible .kb .ct-img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .ct-flip .kb .ct-img { transition: none; transform: none !important; } }

/* the paged desktop: the cover in two bands, the contents as two pages that turn */
@media (min-width: 1024px) and (pointer: fine) {
  .cv { height: 100%; display: flex; flex-direction: column; background: var(--mg-page); }
  .cv-top { position: relative; flex: 0 0 62.2%; overflow: hidden; background: #E9DAC4; }
  .cv-pic { position: absolute; inset: 0; }
  .cv-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(233,218,196,0.95) 0%, rgba(233,218,196,0.7) 34%, rgba(233,218,196,0) 55%); }
  .cv-tag { position: absolute; z-index: 2; top: 22px; right: 56px; }
  .cv-text { position: absolute; z-index: 2; left: 56px; bottom: clamp(24px, 5vh, 44px); width: 640px; display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 20px); }
  .cv-h { font-size: clamp(44px, 7.4vh, 66px); }
  .cv-credit { position: absolute; z-index: 2; right: 20px; bottom: 16px; }
  .cv-strip { flex: 1 1 auto; min-height: 0; box-sizing: border-box; padding: clamp(16px, 2.7vh, 24px) 56px clamp(18px, 3.1vh, 28px);
              display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .cv-strip li { min-height: 0; display: flex; }
  .cv-strip a { flex-direction: column; gap: 10px; width: 100%; min-height: 0; }
  .cv-card-pic { flex: none; height: calc(var(--mg-spread-h) * 0.167); }   /* the canvas's 150 of 900, on every card */
  .cv-strip .k, .cv-strip .t { flex: none; }
  .cv.no-pic .cv-wash { display: none; }

  body.mg:has(.mg-k-contents.is-current) .mg-edge { display: none; }   /* the contents carries its own Previous and Next */
  body.mg:has(.mg-k-cover.is-current) .mg-edge { display: none; }      /* 0.71.1: the cover has Open the issue (audit 6) */
  .ct-flip { position: relative; height: 100%; overflow: hidden; --ct-ed: clamp(380px, 32.65vw, 560px); }
  .ct-ed { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: var(--ct-ed); padding: clamp(20px, 3vh, 28px) 44px clamp(20px, 3vh, 28px); gap: clamp(14px, 2.4vh, 22px); }
  .ct-no .n { font-size: clamp(64px, 11vh, 96px); }
  .ct-note { flex: 0 1 auto; overflow: hidden; }
  .ct-note .lead { font-size: clamp(24px, 3.5vh, 31px); }
  .ct-note .more { font-size: clamp(16px, 2.15vh, 19px); }
  .ct-pa { position: absolute; z-index: 2; left: var(--ct-ed); right: 0; top: 0; bottom: 0; padding: 22px 44px 28px; display: flex; flex-direction: column; gap: 16px; }
  .ct-pb { position: absolute; z-index: 1; inset: 0; padding: 22px 48px 28px; display: flex; flex-direction: column; gap: 16px; }
  .ct-flip.one-page .ct-pa { padding-bottom: 28px; }
  .ct-head, .ct-bar { flex: none; }
  .ct-h { font-size: clamp(44px, 6.7vh, 60px); }
  .ct-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .ct-grid.wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ct-col { min-height: 0; display: flex; flex-direction: column; gap: 16px; }
  .ct-pic { flex-basis: 0; min-height: min-content; }   /* 0.71.1: a card never shrinks under its own picture and words */
  .ct-pic .kb { flex: 1 1 0; min-height: clamp(96px, 15vh, 130px); }   /* 0.71.1: never a strip that cuts the picture */
  .ct-voice, .ct-text, .ct-nav { flex: 0 0 auto; }
  .ct-col > .ct-c + .ct-c:not(.is-mint):not(.is-navy):not(.ct-nav) { border-top: 1px solid var(--mg-ink); padding-top: 12px; }
  .ct-nav { border-top: 3px solid var(--mg-ink); padding-top: 12px; }
  .ct-grid.wide > .ct-col:first-child > .ct-pic:first-child .tt { font-size: 24px; line-height: 1.05; }
  .ct-grid > .ct-col > .ct-pic:only-of-type .tt { font-size: 20px; }

  /* the turn (ContentsFlip.dc.html, exactly): 560 ms on cubic-bezier(.22,1,.36,1); page 2 slides in from 140 px, page 1 and
     the navy column go left; the cards come in one after another. Only with script: with none, both pages are drawn */
  .mg-js .ct-ed, .mg-js .ct-pa, .mg-js .ct-pb { transition: transform 560ms cubic-bezier(.22,1,.36,1), opacity 360ms ease, visibility 0s linear 0s; }
  .mg-js .ct-flip:not(.on-p2) .ct-pb { transform: translateX(140px); opacity: 0; visibility: hidden;
                                       transition: transform 560ms cubic-bezier(.22,1,.36,1), opacity 360ms ease, visibility 0s linear 560ms; }
  .mg-js .ct-flip.on-p2 .ct-pb { transform: none; opacity: 1; visibility: visible;
                                 transition: transform 560ms cubic-bezier(.22,1,.36,1) 60ms, opacity 360ms ease 60ms, visibility 0s; }
  .mg-js .ct-flip.on-p2 .ct-ed { transform: translateX(-100%); visibility: hidden;
                                 transition: transform 560ms cubic-bezier(.22,1,.36,1), opacity 360ms ease, visibility 0s linear 560ms; }
  .mg-js .ct-flip.on-p2 .ct-pa { transform: translateX(-200px); opacity: 0; visibility: hidden;
                                 transition: transform 560ms cubic-bezier(.22,1,.36,1), opacity 260ms ease, visibility 0s linear 560ms; }
  .mg-js .ct-flip .fx, .mg-js .ct-flip .fy { transition: opacity 340ms ease, transform 480ms cubic-bezier(.22,1,.36,1); }
  .mg-js .ct-flip .fx { opacity: 0; transform: translateY(16px); }
  .mg-js .ct-flip.on-p2 .fx { opacity: 1; transform: none; transition-delay: calc(80ms + 60ms * var(--i, 1)); }
  .mg-js .ct-flip.on-p2 .fy { opacity: 0; transform: translateY(16px); }
  .mg-js .ct-flip.on-p1 .fy { transition-delay: calc(140ms + 60ms * var(--i, 1)); }
  :root:not(.mg-js) .ct-flip { overflow-y: auto; }
  :root:not(.mg-js) .ct-pb { top: 100%; bottom: auto; height: 100%; background: var(--mg-page); }
  :root:not(.mg-js) [data-ct-turn] { display: none; }
}
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .mg-js .ct-ed, .mg-js .ct-pa, .mg-js .ct-pb, .mg-js .ct-flip .fx, .mg-js .ct-flip .fy { transform: none !important; transition: opacity 200ms ease, visibility 0s linear 200ms !important; }
  .mg-js .ct-flip.on-p2 .ct-ed { opacity: 0; visibility: hidden; }
  .mg-js .ct-flip.on-p2 .ct-pb, .mg-js .ct-flip.on-p1 .ct-pa, .mg-js .ct-flip.on-p1 .ct-ed { transition: opacity 200ms ease, visibility 0s !important; }
}
@media (min-width: 1024px) and (pointer: fine) and (max-height: 760px) {
  .cv-tag .no { font-size: 40px; }
  .cv-strip .t { font-size: 17px; }
  .ct-c .tt { font-size: 17px; }
  .ct-grid.wide > .ct-col:first-child > .ct-pic:first-child .tt { font-size: 21px; }
  .ct-c .ln { font-size: 13px; }
  .ct-pa, .ct-pb { padding-top: 16px; padding-bottom: 20px; gap: 12px; }
  .ct-col { gap: 12px; }
}

/* the phone and narrow screens (Phone.dc.html; the contents one stack, the editor's note first, no page turn) */
@media (max-width: 1023px), (pointer: coarse) {
  .cv { position: relative; display: flex; flex-direction: column; background: #E9DAC4; padding-bottom: 28px; }
  .cv-top, .cv-text { display: contents; }
  /* 0.71.1 (design audit 6): Open the issue inside 844 px with the top bar, as the canvas has it (y 743) */
  .cv-pic { order: 0; position: relative; height: min(86vw, 440px); }
  .cv-wash { position: absolute; left: 0; right: 0; top: calc(min(86vw, 440px) - 100px); height: 100px;
             background: linear-gradient(180deg, rgba(233,218,196,0) 0%, #E9DAC4 100%); }
  .cv.no-pic .cv-wash { display: none; }
  .cv-credit { position: absolute; right: 12px; top: 12px; font-size: 10px; padding: 3px 6px; background: rgba(243,238,228,0.88); }
  .cv-tag { order: 1; position: relative; z-index: 1; align-self: flex-start; margin: -82px 20px 0; gap: 12px; padding: 10px 16px 10px 14px;
            background: #F3EEE4; box-shadow: 0 1px 0 rgba(14,22,38,0.15); }
  .cv.no-pic .cv-tag { margin-top: 24px; }
  .cv-tag .no { font-size: 40px; }
  .cv-tag .rule { height: 38px; }
  .cv-tag .i { font-size: 19px; }
  .cv-tag .m { font-size: 11px; letter-spacing: 0.12em; }
  .cv-h { order: 2; margin: 18px 20px 0; font-size: 34px; line-height: 1.02; }
  .cv-strip { order: 3; margin: 14px 20px 0; border-top: 2px solid var(--mg-ink); }
  .cv-strip a { flex-direction: row; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(14,22,38,0.25); font-size: 15px; line-height: 1.3; }
  .cv-card-pic, .cv-strip .lb { display: none; }
  .cv-strip li:nth-child(n+4) { display: none; }     /* the phone lists three, as the canvas does: the review first */
  .cv-strip .k { flex: none; font-size: 15px; letter-spacing: 0; line-height: 1.3; }
  .cv-strip .t { font-family: var(--mg-sans); font-weight: 400; font-size: 15px; line-height: 1.3; }
  .cv-go { order: 4; margin: 14px 20px 0; flex-direction: column; align-items: stretch; gap: 8px; }
  .cv-open { text-align: center; font-size: 16px; padding: 15px 20px; }
  .cv-facts { font-size: 13px; text-align: center; }

  .ct-flip { display: flex; flex-direction: column; padding-bottom: 32px; }
  .ct-ed { order: -1; padding: 28px 20px 26px; gap: 18px; }
  .ct-no .n { font-size: 64px; }
  .ct-note .lead { font-size: 24px; }
  .ct-note .more { font-size: 17px; }
  .ct-pa, .ct-pb, .ct-grid, .ct-col { display: contents; }
  .ct-pb > .ct-bar, .ct-pb > .ct-head, .ct-nav, .ct-head .r { display: none; }
  .ct-pa > .ct-head { order: 0; margin: 26px 20px 4px; }
  .ct-h { font-size: 40px; }
  .ct-c { order: var(--o, 500); margin: 16px 20px 0; flex: none !important; }   /* the masonry's flex is the desktop's */
  .ct-c:not(.is-mint):not(.is-navy) { border-top: 1px solid var(--mg-ink); padding-top: 12px; }
  .ct-pic .kb { height: 190px; }
  .ct-c .tt { font-size: 21px; }
}

/* 0.71.0 (decision 0050): a link to one of our own stories inside a feature, and a story picture break */
.mg-article .body a.mg-story-link { color: inherit; text-decoration-color: var(--fld, var(--mg-green)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mg-article .body a.mg-story-link:hover, .mg-article .body a.mg-story-link:focus-visible { color: var(--mg-green); text-decoration-color: var(--mg-green); }   /* 0.71.2: one colour on hover, text and line */
.mg-sbreak figcaption { display: flex; flex-direction: column; gap: 4px; }
.mg-sbreak .mg-sb-k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mg-ink-2); }
.mg-sbreak a.mg-sb-t { font-family: var(--mg-serif); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--mg-ink); text-decoration: none; }
.mg-sbreak a.mg-sb-t:hover { color: var(--mg-green); }
.mg-sbreak a.mg-sb-go { align-self: flex-start; font-weight: 700; color: var(--mg-green); }
.mg-sbreak .mg-sb-pic { display: block; }