/* Public pages of Leadsler Guides (guides, /guides, /guides/about and the legal pages). Self-contained:
   these pages load only this file — no scripts, and one web font (Anton, for the headline of a guide's cover, served from
   this origin; see "the cover" below). Mobile-first; the first phone screen of a guide is its cover: photo → season →
   title → disclosure → byline, then "Start here". Brand tokens match the pins (visuals.ts). */
:root {
  --ink: #1c1f26; --ink-2: #3a3f4b; --muted: #5d6474; --line: #e4e7ec; --line-2: #eef0f3;
  --accent: #3d5fe0; --accent-ink: #2a45b8; --accent-bg: #f1f4ff;
  --bg: #fbfbfa; --panel: #f4f4f1; --card: #ffffff;
  --safety: #b3372c; --safety-bg: #fdf4f2; --tip: #2a45b8; --tip-bg: #f3f6ff;
  --serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 var(--sans); }
a { color: var(--accent-ink); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

/* ── site header / footer ── */
.site-head, .guide-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.site-head .brand, .guide-top a { font: 700 19px/1.2 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -0.005em; }
.site-head nav { display: flex; gap: 18px; }
.site-head nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.site-head nav a:hover { color: var(--ink); }
.guide-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 16px 32px; border-top: 1px solid var(--line); margin-top: 24px; }
.guide-foot .foot-money { max-width: 62ch; margin: 6px auto 0; }
.guide-foot .foot-money a { color: var(--accent-ink); }
.guide-foot .legal-links { margin-top: 6px; }
.guide-foot .legal-links a { color: var(--muted); }

/* ── page & type ── */
.guide { max-width: 720px; margin: 0 auto; padding: 22px 16px 40px; }
.guide h1 { font: 700 31px/1.12 var(--serif); letter-spacing: -0.012em; margin: 8px 0 14px; text-wrap: pretty; }
.guide h2 { font: 700 25px/1.22 var(--serif); letter-spacing: -0.005em; margin: 40px 0 12px; text-wrap: balance; }
.guide h3 { font-size: 18px; line-height: 1.3; margin: 26px 0 6px; font-weight: 700; }
.guide p { margin: 0 0 16px; }
.guide article > p:first-child { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.guide ul, .guide ol { padding-left: 24px; margin: 0 0 18px; }
.guide li { margin: 0 0 8px; padding-left: 2px; }
.guide ol li::marker { font-weight: 700; color: var(--accent-ink); }
.guide ul li::marker { color: var(--muted); }
.crumbs { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); }
.kicker { text-transform: uppercase; letter-spacing: 0.09em; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); margin: 0; }
.disclosure { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 6px; }
.disclosure a { color: var(--muted); }
.byline { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; }
.guide-preview { background: #fff6d9; border: 1px solid #f0c85a; padding: 8px 12px; border-radius: 8px; font-weight: 600; margin: 0 0 14px; font-size: 14px; }
.guide-meta { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.guide-disclosure { font-size: 14px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }

/* ── at a glance: stacked label/value on phones, two columns from 640 px ── */
.glance { background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px 6px; margin: 0 0 22px; }
.guide .glance h2 { font: 700 12.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin: 0 0 6px; }
.glance dl { margin: 0; }
.glance dt { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 9px; }
.glance dd { margin: 0; padding: 1px 0 9px; font-size: 16px; line-height: 1.45; border-bottom: 1px solid #e6e7e1; }
.glance dd:last-of-type { border-bottom: 0; }

/* ── hero photo ── */
.hero { margin: 0 -16px 26px; }
.hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--panel); }
.hero figcaption { font-size: 12.5px; line-height: 1.45; color: var(--muted); padding: 7px 16px 0; }
.hero figcaption a { color: var(--muted); }

/* ── body: tables, callouts, citations ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px -16px 20px; padding: 0 16px; }
.guide table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.guide th, .guide td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide th { font-size: 13px; font-weight: 700; color: var(--ink-2); border-bottom: 2px solid var(--ink); background: transparent; }
.guide tbody tr:nth-child(even) td { background: #f6f6f3; }
.guide td:first-child { font-weight: 600; }
/* a table's caption ("**What fits which drawer**" right above it) */
.guide p:has(+ .table-wrap) { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 22px 0 6px; }
.guide blockquote { margin: 20px 0; padding: 12px 16px 12px 16px; background: var(--tip-bg); border: 0; border-left: 3px solid var(--tip); border-radius: 0 8px 8px 0; }
.guide blockquote p { margin: 0; }
.guide blockquote strong:first-child { color: var(--tip); }
.guide blockquote.safety { background: var(--safety-bg); border-left-color: var(--safety); }
.guide blockquote.safety strong:first-child { color: var(--safety); }
.guide blockquote + blockquote { margin-top: -8px; }
.cite { font-size: 12px; vertical-align: super; line-height: 0; text-decoration: none; color: var(--muted); }
.cite:hover { color: var(--accent-ink); }

/* ── product cards ── */
.product { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 4px 4px 10px 10px; padding: 16px 14px 14px; margin: 26px 0 30px; }
.product .card-kicker { text-transform: uppercase; letter-spacing: 0.09em; font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.guide .product h3 { font: 700 21px/1.25 var(--serif); margin: 0 0 8px; }
.product p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.product .why { color: var(--ink-2); }
.product .card-facts { display: grid; gap: 8px; margin: 12px 0 14px; }
.product .crit, .product .skip { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 15px; }
.product .crit { background: var(--accent-bg); }
.product .skip { background: var(--panel); color: var(--ink-2); }
.product .card-foot { display: grid; gap: 8px; }
/* one line on every phone (a 320-px screen fits "See options on Amazon.co.uk →"): the label never wraps mid-sentence */
.product .btn { display: block; text-align: center; padding: 12px 10px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: clamp(14px, 4.3vw, 16px); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product .btn:hover { background: var(--accent-ink); }
.product .btn.is-preview { background: #9aa6c7; }
.product .card-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 0; }
/* pre-2.0 guides: an inline button in the text */
.guide-btn { display: inline-block; max-width: 100%; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.guide-btn.is-preview { background: #9aa6c7; }

/* ── index & related guides ── */
.guide .cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.guide .cards li { margin: 0; padding: 0; }
.index-card { display: grid; grid-template-columns: 104px 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); }
.index-card:hover { border-color: #c9ceda; }
.index-card.featured-card { border: 2px solid var(--accent-ink); }
.index-card .feat-art { padding: 0; width: 104px; min-height: 112px; display: flex; align-items: center; justify-content: center; font: 800 34px/1 var(--serif); letter-spacing: -0.02em; color: #fff; background: linear-gradient(135deg, #1f2a44, #3b5bdb); }
.index-card img, .index-card .no-img { width: 104px; height: 100%; min-height: 112px; object-fit: cover; background: var(--panel); }
.index-card div { padding: 12px 14px; }
.guide .index-card h2, .guide .index-card h3 { font: 700 18px/1.25 var(--serif); margin: 2px 0 4px; }
.index-card p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.index-card span { font-size: 11.5px; color: var(--accent-ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.index-lead { color: var(--ink-2); font-size: 18px; margin: 0 0 10px; }
.related { margin-top: 44px; padding-top: 6px; border-top: 1px solid var(--line); }
/* season hubs: "By season: Christmas (4) Halloween (2)" as pills; "All guides →" under a hub's cards */
.hub-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 18px; font-size: 14px; color: var(--muted); }
.hub-links a { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.hub-links a:hover { border-color: #c9ceda; color: var(--accent-ink); }
.hub-links small { color: var(--muted); font-weight: 400; }
.hub-all { margin: 18px 0 0; font-weight: 600; }

/* ── sources ── */
.guide-sources { margin-top: 36px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.guide .guide-sources h2 { font: 700 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin: 18px 0 10px; }
.guide-sources ol { padding-left: 22px; }
.guide-sources li { margin: 0 0 4px; overflow-wrap: anywhere; }
.guide-note { font-size: 13px; line-height: 1.55; }
.legal-company { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.legal-missing { color: var(--muted); font-style: italic; }

@media (min-width: 640px) {
  body { font-size: 18px; }
  .site-head, .guide-top { padding: 14px 28px; }
  .guide { padding: 36px 24px 64px; }
  .guide h1 { font-size: 42px; margin-bottom: 16px; }
  .guide h2 { font-size: 29px; margin-top: 48px; }
  .guide article > p:first-child { font-size: 20px; }
  .glance { padding: 16px 22px 8px; }
  .glance dl { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; }
  /* one line height for label and value, so both sit on the same baseline */
  .glance dt { padding: 8px 20px 8px 0; border-bottom: 1px solid #e6e7e1; font-size: 14px; line-height: 23px; }
  .glance dd { padding: 8px 0; line-height: 23px; }
  .glance dt:last-of-type { border-bottom: 0; }
  .hero { margin: 0 0 30px; }
  .hero img { border-radius: 6px; }
  .hero figcaption { padding: 8px 0 0; }
  .table-wrap { margin: 4px 0 24px; padding: 0; }
  .guide table { font-size: 15px; }
  .guide th, .guide td { padding: 9px 12px; }
  .product { padding: 22px 24px 18px; }
  .guide .product h3 { font-size: 23px; }
  .product .card-facts { grid-template-columns: 1fr 1fr; }
  .product .card-foot { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
  .product .btn { padding: 11px 20px; font-size: 16px; }
  .guide .cards { grid-template-columns: 1fr 1fr; gap: 18px; }
  .index-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .index-card img, .index-card .no-img { width: 100%; height: 170px; min-height: 0; }
  .index-card div { padding: 14px 16px 16px; }
}

/* ───────────── the cover: the guide's opening (guideHtml → coverHtml) ─────────────
   The guide's own photo full-bleed under a dark band, two round discs, the LEADSLER lockup, the season kicker, the title in
   Anton capitals, the Amazon disclosure directly under it. It is the CSS twin of the Instagram news cover (Leadsler Guides
   theme). No scripts. The headline font is a Latin subset of Anton (SIL OFL 1.1; the licence is /static/anton-OFL.txt), served
   from this origin because the CSP has no font-src; guides.tsx preloads it. Sizes are container units of the cover itself, so one
   design runs from 320 px to 1120 px. The guide pages are light only (color-scheme: light above). */
@font-face { font-family: "Anton"; src: url("anton-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --band: #1c1f26; --band-rgb: 28 31 38; --band-ink: #ffffff; --band-rule: #eef1f6; --band-sub: #b8c0cf;
  --anton: "Anton", Impact, Haettenschweiler, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

/* the page: the cover may be wider than the reading column, everything else keeps the 720 px measure */
.guide.has-cover { max-width: 1120px; padding-top: 10px; }
.guide.has-cover > :not(.crumbs):not(.cover) { max-width: 720px; margin-left: auto; margin-right: auto; }
.guide.has-cover > .crumbs { margin-bottom: 10px; }

.cover { container-type: inline-size; position: relative; isolation: isolate; margin: 0 -16px 10px; background: var(--band); color: var(--band-ink); overflow: hidden; }
.cover .top { position: relative; }

/* the photo's stage; the band below it rises over its lower part. The band is in the flow (never an overlay), so a long title
   makes the cover taller instead of running into the discs. */
.cover .stage { position: relative; aspect-ratio: 375 / 338; }
.cover .hero { position: absolute; inset: 0; margin: 0; }
.cover .hero img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: var(--band); filter: saturate(1.06) contrast(1.03); }
/* no photo: the same cover on the brand's ink with a blue glow, the discs and the title unchanged */
.cover.plain .stage { background: radial-gradient(90% 70% at 14% 4%, rgb(61 95 224 / .5), transparent 72%), linear-gradient(180deg, #232a3f, var(--band)); }

/* the round insets: a white rim, a dark keyline and a deep shadow (the news cover's inset). Each is a container of its own,
   so the number inside is sized to the disc, not to the cover. */
.cover .disc { container-type: inline-size; position: absolute; z-index: 2; top: 2.4cqw; width: 43cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; border: max(4px, 1.7cqw) solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .22), 0 .9cqw 3.4cqw rgb(0 0 0 / .55); }
.cover .disc.a { left: 2.4cqw; }
.cover .disc.b { right: 2.4cqw; }
.cover .disc.steps, .cover .disc.date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; text-align: center; color: #fff; }
.cover .disc.steps { background: var(--accent); }
.cover .disc.date { background: var(--band); }
.cover .disc .n { font: 400 48cqw/.8 var(--anton); letter-spacing: .01em; }
.cover .disc .l { font: 800 max(9px, 9.5cqw)/1 var(--sans); letter-spacing: .17em; text-indent: .17em; text-transform: uppercase; }
.cover .disc.date .l { color: var(--band-sub); }
.cover .disc.mark { display: grid; place-items: center; background: var(--band); }
.cover .disc.mark svg { display: block; width: 40cqw; height: auto; }

/* the band: the brand ink rising out of the photo (alpha 0 → .43 → .8 → 1), carrying lockup, kicker and title */
.cover .band { position: relative; margin-top: -47.3cqw; text-align: center; padding: 19cqw 6cqw 5cqw; background: linear-gradient(180deg, rgb(var(--band-rgb) / 0) 0, rgb(var(--band-rgb) / .5) 12cqw, rgb(var(--band-rgb) / .85) 19cqw, var(--band) 26cqw); }

/* lockup: the wordmark over the season line, between two thin rules that end in the wordmark's square period */
.cover .lockup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 3.4cqw; }
.cover .lockup .rule { position: relative; height: 2px; background: var(--band-rule); }
.cover .lockup .rule::before, .cover .lockup .rule::after { content: ""; position: absolute; }
.cover .lockup .rule::before { top: -3px; width: 2px; height: 8px; background: var(--band-rule); }
.cover .lockup .rule::after { top: -3px; width: 8px; height: 8px; background: var(--accent); }
.cover .lockup .rule:first-child::before { left: 0; }
.cover .lockup .rule:first-child::after { right: 0; }
.cover .lockup .rule:last-child::before { right: 0; }
.cover .lockup .rule:last-child::after { left: 0; }
.cover .lockup .mid { display: grid; justify-items: center; gap: 1.2cqw; max-width: 62cqw; }   /* a long season line wraps here, so the rules keep some length */
.cover .wordmark { display: block; height: max(15px, 4.4cqw); width: auto; }
.cover .kicker { margin: 0; color: var(--band-sub); font: 800 max(10px, 2.55cqw)/1.1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-wrap: balance; }

/* the title: the page's real <h1>, set like the Instagram cover's headline: Anton capitals, tracked, a little wider, a hair of stroke */
.guide .cover h1 { margin: 3.2cqw auto 0; width: calc(100% / 1.1); transform: scaleX(1.1); transform-origin: 50% 0; font: 400 10cqw/1.043 var(--anton); letter-spacing: .022em; text-transform: uppercase; text-wrap: balance; color: var(--band-ink); -webkit-text-stroke: .02em currentColor; overflow-wrap: anywhere; }
.cover h1 .nb { white-space: nowrap; }   /* a hyphenated word (Step-by-Step) never breaks at its hyphen */

/* the required lines stay directly under the title, on the solid ink that continues the band */
.cover .fine { padding: 1cqw 6cqw 5cqw; text-align: center; background: var(--band); }
.cover .disclosure { margin: 0 auto; max-width: 64ch; font-size: 12.5px; line-height: 1.45; color: #d6dbe5; text-wrap: pretty; }
.cover .disclosure a { color: #fff; white-space: nowrap; }
.cover .byline { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: #a3adbf; }

/* the photo credit, as the page has always printed it (title → file page, author, licence → its text, via Commons) */
.credits { margin: 0 0 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.credits a { color: var(--muted); }

/* ── "Start here": step 1 and the way to the others ── */
.start { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; margin: 4px auto 22px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.start .badge { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 58px; height: 58px; padding-top: 3px; border-radius: 50%; background: var(--accent); color: #fff; font: 400 34px/1 var(--anton); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgb(0 0 0 / .18); }
.start .head { grid-column: 2; grid-row: 1; }
.start .start-k { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.start .start-title { margin: 2px 0 0; font: 700 19px/1.25 var(--serif); letter-spacing: -.005em; }
.start .start-title a { color: var(--ink); text-decoration: none; }
.start .start-title a:hover { text-decoration: underline; }
.start p.lead { grid-column: 1 / -1; margin: 2px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.guide .chips { grid-column: 1 / -1; list-style: none; display: flex; gap: 8px; margin: 2px -14px 0 0; padding: 2px 14px 4px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.guide .chips::-webkit-scrollbar { display: none; }
.guide .chips li { margin: 0; padding: 0; flex: none; }
.chips a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.chips a:hover { border-color: #c9ceda; color: var(--accent-ink); }
.chips b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
/* a guide without "Step N" headings: just the card, one column, no badge and no chips */
.start.no-badge { grid-template-columns: minmax(0, 1fr); }
.start.no-badge .head, .start.no-badge p.lead { grid-column: 1; }

@media (min-width: 640px) {
  .cover { margin: 0 0 14px; border-radius: 18px; }
  .start { grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-items: start; padding: 18px 22px 16px; }
  .start .badge { grid-row: 1 / span 3; width: 112px; height: 112px; padding-top: 6px; border-width: 4px; font-size: 64px; }
  .start .head, .start p.lead, .guide .chips { grid-column: 2; }
  .start .start-title { font-size: 24px; }
  .start p.lead { font-size: 16.5px; -webkit-line-clamp: unset; display: block; overflow: visible; }
  .guide .chips { flex-wrap: wrap; overflow: visible; margin: 4px 0 0; padding: 2px 0 0; }
  .start.no-badge { grid-template-columns: minmax(0, 1fr); }
  .start.no-badge .head, .start.no-badge p.lead { grid-column: 1; }
}

/* a wide cover (from 560 px: small tablets, landscape phones, desktop): landscape, the title on two lines, the discs smaller at the top corners */
@container (min-width: 560px) {
  .cover .stage { aspect-ratio: 1120 / 450; }
  .cover .disc { width: 26cqw; top: 2cqw; border-width: 9px; }
  .cover .disc.a { left: 2cqw; }
  .cover .disc.b { right: 2cqw; }
  .cover .band { margin-top: -20.3cqw; padding: 11cqw 8cqw 1.4cqw; background: linear-gradient(180deg, rgb(var(--band-rgb) / 0) 0, rgb(var(--band-rgb) / .5) 6.5cqw, rgb(var(--band-rgb) / .85) 11cqw, var(--band) 15.5cqw); }
  .cover .lockup { column-gap: 22px; }
  .cover .lockup .rule::before { top: -4px; height: 10px; }
  .cover .lockup .rule::after { top: -4px; width: 10px; height: 10px; }
  .cover .wordmark { height: 28px; }
  .cover .kicker { font-size: 12.5px; }
  .cover .lockup .mid { gap: 8px; max-width: 56cqw; }
  .guide .cover h1 { font-size: 5.6cqw; margin-top: 16px; }
  .cover .fine { padding: 4px 8cqw 22px; }
  .cover .disclosure { max-width: 80ch; font-size: 13px; }
  .cover .byline { font-size: 13px; }
}
/* a browser without container units (before 2022-23) gets a plain dark cover: no discs, the title in Anton at a fixed size */
@supports not (width: 1cqw) {
  .cover .disc.a, .cover .disc.b { display: none; }
  .cover .stage { aspect-ratio: 16 / 10; }
  .cover .band { margin-top: 0; padding: 22px 16px 14px; }
  .cover .lockup { column-gap: 12px; }
  .cover .wordmark { height: 18px; }
  .cover .kicker { font: 800 11px/1.2 var(--sans); }
  .guide .cover h1 { width: auto; transform: none; margin: 14px 0 0; font: 400 36px/1.08 var(--anton); }
  .cover .fine { padding: 4px 16px 20px; }
}
@media (prefers-reduced-motion: no-preference) { html:has(.has-cover) { scroll-behavior: smooth; } }