/* ===================================================================
   document.css — the blocks BOTH reports draw.

   STRUCTURE ONLY. Layout, spacing, proportion, and what stays together
   on a page. Anything that would break the other report if it changed
   belongs here. TREATMENT — colours, fills, type sizes, how much air —
   belongs in free.css and deep.css.

   Contract: feed-check/CLASSES.md. Values: feed-check/tokens.css.
   Nothing here writes a hex value or a raw pixel size of its own. The
   ONE exception is the print page, below, and it says why.

   NO FIXED-WIDTH TYPE, ANYWHERE IN THE REPORT. Hamish, 11 September:
   it makes the report look like code. Addresses and evidence are Barlow.

   Read by: index.html (the free report, on screen and in its PDF) and
   render.py (the deep audit, which is only ever a PDF).

   ⚠ WEASYPRINT DRAWS BOTH PDFs. What it cannot do, proved 11 September
   by tests/weasyprint-probe/ — full table in BUILD-for-mac.md section 6:
     · aspect-ratio            ignored — print sizes are explicit here
     · clamp()                 ignored — never size print type with it
     · repeat(auto-fit, …)     ignored — print sheets set column counts
     · @media (max-width: …)   ignored — useful: phone rules never print
     · glyphs outside Barlow   borrowed from any font the machine has

   Started 10 September with the catalogue, read-as, bar chart and fold.
   Finished 11 September: every shared block.
   =================================================================== */


/* ===================================================== THE PAGE ===
   Both PDFs are A4 with the same margins, so one catalogue tile size
   fits both. These margins are what both reports used before today.

   ⚠ THE ONE PLACE RAW MEASUREMENTS ARE WRITTEN, and why. A page rule
   cannot read tokens: custom properties live on the document, and the
   page box sits outside it, in WeasyPrint and in Chrome alike. The tile
   size further down depends on these margins, so both are written in
   millimetres and kept together here. Change one, change the other.

     A4 width 210mm − 13mm − 13mm            = 184mm of text width
     ten tiles, nine gaps of 3mm             = 157mm of tiles
     157mm ÷ 10                              = 15.7mm a tile → 15.5mm

   Page numbers and the running head are TREATMENT — each report's own
   sheet adds its margin boxes to this page.
   ------------------------------------------------------------------- */

@page{ size: A4; margin: 14mm 13mm 13mm }
@page :first{ margin-top: 16mm }


/* =============================================== THE REPORT ROOT ===
   .document is the report, in both. .document.free and .document.deep
   are the switch free.css and deep.css hang their treatment on.
   ------------------------------------------------------------------- */

.document{
  font-family: var(--face-body);
  color: var(--ink);
  min-width: 0;
}

/* The report's own headings and links. The website styles its plain
   tags in site.css; inside the report, these win. CLASSES.md B0. */
.document h1,
.document h2,
.document h3,
.document h4{
  font-family: var(--face-head);
  line-height: var(--lh-head);
  margin: 0;
}

/* LINKS ARE INK WITH AN UNDERLINE. tokens.css, decided 6 September —
   teal fails contrast as text. Buttons inside the report keep their own
   look, so they are left out.
   ⚠ .beta-btn ADDED TO THE EXCLUSION 18 September 2026. The comment above
   always said "buttons", but the selector only knew about .btn — no beta
   button had ever been inside the report. The route out at the foot of the
   synthesis is the first, and it came out underlined inside its own border.
   The deep audit emits no .beta-btn, so this cannot affect it. */
.document a:not(.btn):not(.beta-btn){
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: .15em;
}

.document img{ max-width: 100% }

/* BOLD IS 600, EVERYWHERE. The files we ship stop at 600. Left at the
   default 700, a screen draws the 600 file and WeasyPrint reaches for the
   heavier Bold installed on the machine — the first proof did exactly
   that. The installed fonts are a safety net, not a second look. */
.document b,
.document strong{ font-weight: var(--w-label) }


/* ======================================== PRINT-ONLY PIECES ===
   Hidden on a screen, shown on paper. "screen" rather than "not print",
   because WeasyPrint skips a screen block entirely — so the piece shows
   in its PDF with no rule needed, and in Chrome's print too.
   ------------------------------------------------------------------- */

@media screen{
  /* Two classes, so it outranks a block's own display rule — .print-head
     is a flex row and, at equal weight, had been showing on screen. */
  .printonly,
  .print-head.printonly{ display: none }
}

.print-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

/* The feed's own address. One long unbroken string: it must be allowed
   to break anywhere or it pushes the head off the page. */
.print-head-address{
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
}


/* ================================================== THE COVER ===
   Section 1. The show's artwork as a square beside the text, dropping
   underneath it when there is not room — a phone.
   ------------------------------------------------------------------- */

.cover{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

/* Explicit width AND height, never aspect-ratio — WeasyPrint ignores it.
   An empty .cover-art div stands in when a show has no artwork. */
.cover-art{
  display: block;
  flex: none;
  width: 104px;
  height: 104px;
  object-fit: cover;
  background: var(--surface);
  border-radius: 4px;
}

.cover-meta{
  flex: 1 1 14em;
  min-width: 0;
}

/* Uppercase labels are ALWAYS weight 600. tokens.css. */
.cover-kick{
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--w-label);
}

/* The show's name. An h2 in the free report and an h1 in the deep audit —
   both right for their page. This class makes them the same thing. */
.cover-title{ margin: var(--s-2) 0 }

.cover-sub{
  margin: 0;
  max-width: var(--measure);
}


/* ===================================================== SECTIONS ===
   Every block from section 2 down is a .section with a .section-head.
   ------------------------------------------------------------------- */

.section{ margin-top: var(--s-6) }

.section-head{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.section-head h3{
  flex: 1 1 auto;
  min-width: 0;
}

.section-count{
  flex: none;
  font-variant-numeric: tabular-nums;
}

.section-note{
  max-width: var(--measure);
  margin: var(--s-3) 0 var(--s-4);
}

/* A heading is never left alone at the foot of a page. */
@media print{
  .section-head{ break-after: avoid; break-inside: avoid }
  .section-note{ break-after: avoid }
}


/* ============================================ READ AS A … FEED ===
   Section 2. Platform, the feed's own declared address, and how this
   audit reached it.
   ------------------------------------------------------------------- */

.read-as-platform{ margin: var(--s-3) 0 }

.read-as-address{
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-3) 0;
  min-width: 0;
}

.read-as-label{
  flex: none;
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ⚠ A feed address is one long unbroken string and it WILL push the
   page sideways on a phone if it is not told it may break. This is the
   overflow fault TODO-CSS section 5 predicted, in the one place it was
   most likely to appear. */
.read-as-url{
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Where the free report came from — the address pasted or picked. */
.provenance:empty{ display: none }
.provenance{ margin: var(--s-3) 0 }
.provenance-line{
  margin: 0;
  max-width: var(--measure);
}
.provenance-address{ overflow-wrap: anywhere }


/* ================================== WHERE THIS SHOW IS LISTED ===
   Section 3. One row per directory. Filled after the free report draws,
   so the block is empty — and must take no space — until it is, and for
   ever on a pasted feed.
   ------------------------------------------------------------------- */

.directories:empty{ display: none }

.directories ul{
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}

.directory-row{
  margin-bottom: var(--s-3);
  max-width: var(--measure);
}

.directory-name{ font-weight: var(--w-label) }

.directory-address{ overflow-wrap: anywhere }

.directories-foot{
  max-width: var(--measure);
  margin: var(--s-3) 0 0;
}

/* ============================== HOW YOUR SHOW DESCRIBES ITSELF ===
   Section 3b, both reports. Added 25 September 2026. The show's own
   description, quoted: a teal rule down the left — a mark, never type —
   and the feed's paragraphs, or three sentences at a time. CLASSES.md A4b.
   ------------------------------------------------------------------- */

.show-desc-text{
  border-left: 3px solid var(--teal);
  padding-left: var(--s-4);
  max-width: var(--measure);
}
.show-desc-text p{ margin: 0 }
.show-desc-text p + p{ margin-top: var(--s-3) }

.show-desc-note{
  max-width: var(--measure);
  margin: var(--s-3) 0 0;
}

@media print{
  .show-desc-text{ max-width: var(--measure-print); padding-left: 4mm }
  .show-desc-text p + p{ margin-top: 2mm }
  .show-desc-note{ margin-top: 2mm }
}

/* "We could see this, but." Its own line, under what it qualifies. */
.caveat{
  display: block;
  margin-top: var(--s-1);
  max-width: var(--measure);
}


/* ================================================ THE KPI STRIP ===
   Section 4. Six figures in the free report, fifteen in the deep audit,
   so on a screen the strip reflows by count and by width.

   ⚠ ON PAPER IT CANNOT. WeasyPrint ignores repeat(auto-fit), and the
   strip collapses to one tall column. So print gets a plain count here,
   and free.css and deep.css each set their own. CLASSES.md A5.
   ------------------------------------------------------------------- */

.kpi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}

.kpi-item{ min-width: 0 }

.kpi-n{
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kpi-k{ margin-top: var(--s-1) }

@media print{
  .kpi{
    grid-template-columns: repeat(3, 1fr);   /* the safe default; each report's sheet overrides */
    break-inside: avoid;
  }
}


/* ======================================= WHERE THE PROBLEMS SIT ===
   Section 5. A histogram of how many observations land on each episode.
   Label left, bar filling the rest. Shared by both reports.

   ⚠ NOTHING IS WRITTEN ON THE BAR. The prototype put a white number
   at the far right — it measured 1.27:1 wherever the fill stopped
   short of it, and it said the observation count, which the label has
   already said in words. Redundant twice over.

   ⚠ AND NO SEPARATE COUNT BESIDE THE LABEL. The bar's LENGTH is that
   count. Setting it again in large type said the same fact twice.
   It reads inside the sentence, emphasised, and nowhere else.
   ------------------------------------------------------------------- */

.dist{ margin: var(--s-4) 0 }

.dist-row{
  display: grid;
  grid-template-columns: minmax(11em, 20em) minmax(0,1fr);
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.dist-label{
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.dist-n{ font-variant-numeric: tabular-nums }

/* Chunky on purpose. The shape has to be readable at a glance, which a
   hairline under a label is not. */
.dist-bar{
  height: var(--s-5);
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}

/* The fill carries its length as --w, set in the markup, because the
   length IS the data. CLASSES.md A6. */
.dist-bar i{
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--accent);
  border-radius: 3px;
}

/* The nothing-to-note row is the good news. It should not shout as
   loudly as the problems above it. */
.dist-row.zero .dist-bar i{ background: var(--brown) }

.dist-foot{
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-top: var(--s-4);
}

/* On a phone the label needs the full width, so the bar drops beneath
   it rather than being squeezed into nothing. Never reaches a PDF. */
@media (max-width: 600px){
  .dist-row{ grid-template-columns: 1fr; gap: var(--s-2) }
  .dist-bar{ height: var(--s-4) }
}

@media print{
  .dist-row{ break-inside: avoid }
}


/* ================================================== THE CATALOGUE ===
   Section 6. Spec: CLASSES.md A7, the six rules. Ten across and no more,
   300px thumbnails, chronological, a caption under every tile, no cap.
   No scaling by count — the grid is the same whether there are three
   images or eight hundred.
   ------------------------------------------------------------------- */

.catalogue-grid{
  display: grid;
  grid-template-columns: repeat(10, 1fr);   /* RULE 1. Ten. Never eleven. */
  gap: var(--s-3);
  align-items: start;
  margin: 0 0 var(--s-3);   /* the catalogue is runs of grid and line; one even gap between them */
}

/* The one concession, and it is not scaling: ten tiles at phone width is
   35px each and the caption stops being readable. Fewer columns, same
   tiles. Ten remains the maximum everywhere. Neither rule reaches a PDF —
   WeasyPrint ignores size queries — so paper is always ten across. */
@media (max-width: 900px){ .catalogue-grid{ grid-template-columns: repeat(6, 1fr) } }
@media (max-width: 600px){ .catalogue-grid{ grid-template-columns: repeat(4, 1fr) } }

.tile{ margin: 0; min-width: 0 }

/* On a screen, aspect-ratio reserves the box before the file arrives, so
   nothing jumps as eight hundred lazy images land. Podcast artwork is
   square by spec. On paper it is ignored — see the print block below. */
.tile-img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--surface);
}

/* RULE 6. Only where there is genuinely nothing to fall back to. */
.tile.missing::before{
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px dashed var(--rule);
}

/* RULE 3. EP. 1,234 — at least 10pt, bold, sized for four digits and a
   thousands separator. Never wraps: a caption that breaks across two
   lines makes the row heights ragged. */
.tile-caption{
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--ink-soft);
  padding-top: var(--s-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An unnumbered episode's tile is captioned with its date, small. Hamish,
   25 Sep 2026. Sizes: tokens.css on screen, each report's sheet on paper. */
.tile-caption.is-date{ font-size: var(--t-tile-date); letter-spacing: .02em }

/* ============================== RULE 3b · THE EXCEPTIONS, ON THEIR OWN LINE ===
   Hamish, 11 September, from a sketch. A caption under a tile is only ever a
   single episode number. A picture shared by several episodes, or an episode
   with no number, is a .catalogue-line: the same tile, the caption beside it,
   where it falls in time. Nothing wraps, nothing is cut off, every block lies
   down evenly. CLASSES.md A7.

   The tile is sized to match one column of the grid above it: ten columns and
   nine gaps on a wide screen, six and four on narrower ones.
   ------------------------------------------------------------------- */

.catalogue-line{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
}

.catalogue-line .tile-img,
.catalogue-line.missing::before{
  flex: none;
  width: calc((100% - 9 * var(--s-3)) / 10);
}

.catalogue-line .tile-caption{
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
}

@media (max-width: 900px){
  .catalogue-line .tile-img,
  .catalogue-line.missing::before{ width: calc((100% - 5 * var(--s-3)) / 6) }
}
@media (max-width: 600px){
  .catalogue-line .tile-img,
  .catalogue-line.missing::before{ width: calc((100% - 3 * var(--s-3)) / 4) }
}

/* ⚠ ON PAPER: an explicit square, because WeasyPrint ignores aspect-ratio.
   15.5mm is worked out beside the @page rule at the top of this file —
   it depends on the page margins, so change them together. object-fit
   crops the fraction of a millimetre rather than stretching. */
@media print{
  /* Fixed columns, not 1fr: the proof on 11 September showed a long
     caption stretching its column. 10 × 15.5mm + 9 × 3mm = 182mm, inside
     the 184mm the page allows. */
  /* ⚠ NO justify-content: space-between — REMOVED 25 Sep 2026. WeasyPrint
     spread the ten columns across the whole sheet instead of the printed
     area, and the tenth fell off the page (The Crucible, 40 images). Fixed
     columns from the left margin fit, with 2mm spare. */
  .catalogue-grid{
    grid-template-columns: repeat(10, 15.5mm);
    gap: 3mm;
  }
  .tile{ width: 15.5mm }
  .tile-img,
  .tile.missing::before{ width: 15.5mm; height: 15.5mm }

  /* The exception line: full width, its tile the same 15.5mm square. */
  .catalogue-grid,
  .catalogue-line{ margin-bottom: 3mm }
  .tile.catalogue-line{ width: auto; gap: 3mm }
  .catalogue-line .tile-img,
  .catalogue-line.missing::before{ width: 15.5mm; height: 15.5mm }
}


/* ====================================== WHAT THIS ADDS UP TO ===
   Section 7. The synthesis.

   ⚠ IT MUST READ AS ITS OWN THING. It sits directly under the catalogue,
   and on 6 September, flush against the artwork block, it read on a
   phone as "your artwork is broken on all 31 episodes". So: more space
   above it than any other section gets, and its own box. The fill that
   finishes the job is treatment, in free.css and deep.css.
   ------------------------------------------------------------------- */

.verdict{
  margin: var(--s-7) 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
}

.verdict h3{ margin-bottom: var(--s-3) }

.verdict-line{
  max-width: var(--measure-lead);
  margin: 0 0 var(--s-3);
}

.verdict ul{
  max-width: var(--measure);
  margin: 0;
  padding-left: 1.2em;
}

.verdict-calm{
  max-width: var(--measure);
  margin: var(--s-3) 0 0;
}

@media print{
  .verdict{ break-inside: avoid }
}


/* ================================================ THE FINDINGS ===
   Sections 8 to 12. One card per finding:

     ALWAYS OPEN   tag · title and count · the one sentence of why
     FOLDED        the evidence · the remedy

   ⚠ NO RULES FOR .finding.p0, .p1 OR .p2 — AND THERE NEVER WILL BE.
   Findings are observations, not verdicts: no severity colours, no
   grades. RULES.md section 3. P0/P1/P2 group the deep audit's sections;
   they do not tint a card by how bad it is. If you are about to write
   one of those three selectors, stop.
   ------------------------------------------------------------------- */

.finding{
  margin-bottom: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  min-width: 0;
}

/* The category label — Audio, Links, Metadata, Feed, Structure. Where it
   sits only; how it looks is each report's treatment. */
.finding-tag{
  display: inline-block;
  margin-bottom: var(--s-2);
}

.finding-head{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.finding-head h4{
  flex: 1 1 12em;
  min-width: 0;
}

.finding-count{
  flex: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.finding-why{
  max-width: var(--measure);
  margin: var(--s-2) 0 0;
}

/* ⚠ THE LINE BREAKS MUST SURVIVE. The evidence is formatted with line
   breaks and the display depends on them. Lose them and every evidence
   box collapses into one paragraph. CLASSES.md A9.

   pre-line, not pre-wrap — changed 11 September. Line breaks are kept;
   runs of spaces are squeezed to one. The checks pad their evidence with
   spaces to line up columns, which only works in fixed-width type, and
   Hamish ruled fixed-width type out: "it makes it look like code". In
   Barlow the padding would show as odd gaps, so it goes. The few column
   findings read as plain lines instead. */
.finding-where{
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin: var(--s-3) 0;
  padding: var(--s-3);
}

/* The remedy. A filled block, not running text, so it takes no measure. */
.finding-do{
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
}

/* A card stays whole on a page where it fits. One too tall for any page
   still breaks — WeasyPrint has no other choice. */
@media print{
  .finding{ break-inside: avoid }

  /* ⚠ FREE ONLY. free.css and deep.css went their own ways on 11 September,
     so a change made for the free report on paper does not reach the deep
     audit. The measure is WIDTH, which is layout, so the rule lives here;
     the .free scope is what keeps it off the £49 product until that is
     looked at on its own. TODO.md A5 item 4. */
  .document.free .finding-why{ max-width: var(--measure-print) }
}


/* ============================================ THE FINDING FOLD ===
   Always open: the tag, the title, the count and the one sentence of
   why — so every fault is STATED and nothing has to be discovered.
   Folded: the evidence and the remedy, which are most of the page and
   are only wanted for the findings someone intends to act on.

   Settled 10 September. It reconciles the 6 September rule — "the
   findings never hide, only the teaching hides" — with the report
   simply being too long to read.

   ⚠ <details> RATHER THAN CSS HIDING. A closed <details> is still in
   the document, so print can open every one. The free page does that
   on beforeprint; the deep audit emits them open, because its
   deliverable is a PDF and there is nobody there to click. WeasyPrint
   prints a closed one's contents anyway — proved by the probe.
   ------------------------------------------------------------------- */

.finding-detail{ margin-top: var(--s-3) }

/* CHANGED 11 September, from Hamish's sketch: the control was too easy to
   miss. A teal line across the card, a large teal plus, and the label in
   full ink rather than grey. The whole row is the button.
   ⚠ The line and the plus are MARKS, not writing — teal on cream is 2.3:1,
   so the words beside them carry the meaning and stay full ink. */
.finding-detail > summary{
  cursor: pointer;
  display: block;
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  border-top: 3px solid var(--teal);
  padding: var(--s-3) 0 var(--s-1);
  list-style: none;              /* the default triangle, replaced below */
}
.finding-detail > summary::-webkit-details-marker{ display: none }

/* A marker that says which way it will move: plus when closed, minus when
   open. DRAWN IN CSS — two teal bars — not a font glyph, so it can be any
   size and never depends on the font having the character. (The first
   version borrowed a full-width ＋ from a Japanese font; see BUILD §6.)
   Print never shows it: the summary is hidden on paper, below. */
.finding-detail > summary::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.9em;
  height: 1.9em;
  margin: -.2em .7em 0 0;
  background:
    linear-gradient(var(--teal), var(--teal)) center / 100% .4em no-repeat,
    linear-gradient(var(--teal), var(--teal)) center / .4em 100% no-repeat;
}
.finding-detail[open] > summary::before{
  background: linear-gradient(var(--teal), var(--teal)) center / 100% .4em no-repeat;
}

.finding-detail > summary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ⚠ "WHAT TO DO" INSIDE THE TEAL BLOCK — ON PAPER. Added 25 September 2026.
   On paper the fold's button is hidden (below), and the label went with it:
   every teal block printed without saying what it was. Hamish: uppercase and
   bold, sitting inside, in both reports. On screen the button says it, so the
   label inside stays hidden there. Its size is each report's own. */
.finding-do-label{ display: none }
@media print{
  .finding-do-label{
    display: block;
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }
}

/* ⚠ THE PRINTED DOCUMENT SHOWS EVERYTHING. Not academic — the download
   is the deliverable, and an audit whose answers are folded away would
   be worse than no fold at all. This hides the control that is left. */
@media print{
  .finding-detail > summary{ display: none }
}


/* =========================================== WHAT COULD NOT BE DONE ===
   Section 14. Both reports carry it, with different words.
   CLASSES.md A11 — .limits is shared; .limits-more is free only.
   ------------------------------------------------------------------- */

.limits{
  margin-top: var(--s-7);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
}

.limits h4{ margin-bottom: var(--s-3) }

.limits p,
.limits ul{
  max-width: var(--measure);
}

.limits ul{ padding-left: 1.2em }

.limits li{ margin-bottom: var(--s-2) }

@media print{
  .limits{ break-inside: avoid }
}