/* Shared chrome for every page on the site.
   ============================================================================================

   What belongs here: anything identical on the homepage, the catalogue, the 83 album pages and
   the 16 composer/artist pages — design tokens, the reset, the gutter, the masthead, the nav,
   breadcrumbs, the rule strip and the footer base.

   What does not: anything a single page type owns. Those live in `album-detail.css`,
   `entity.css`, or the inline block on `index.html` / `catalogue.html`, each of which is loaded
   *after* this file so it can override what it needs.

   Why it exists. Until 14 August 2026 all of this was duplicated four times. `entity.css` and
   `album-detail.css` are linked by generators, so they became real stylesheets; `index.html`
   and `catalogue.html` kept the inline `<style>` the original mockup was built with, and nobody
   reconciled the two. The cost was concrete: three separate one-line fixes in a single session
   each had to be applied in four files, and the masthead gutter bug survived precisely because
   it had to be found and fixed four times over.

   A rule that differs between page types is a decision. Put it in the page's own sheet and say
   why, rather than making this file conditional. */

/* ---- palette ------------------------------------------------------------------------------
   Roles matter more than values — BRIEF.md section 4. ink is the browsing ground, cobalt is the
   only colour that carries text, cyan is ink only and never carries text, navy is for the
   missing-cover type cards, brass is a small accent. Do not repurpose them. */
:root{
  --ink:#111014; --ink-2:#191820; --navy:#1E3160;
  --cyan:#1E9BD7; --cobalt:#2B54C4; --brass:#C08E36;
  --card:#EFE9DC; --chalk:#F6F3EB; --dim:#8E8A83; --line:#2E2C36;
  /* --read is text MEANT TO BE READ on a dark ground, at 12.19:1 -- as against --dim at 5.52:1,
     which is furniture a reader glances at. The two are a role distinction, not two shades: the
     editorial slot, the album note, the track list's classical source column and the player
     labels are all read, and every one of them arrived at this value separately.
     It was hardcoded as #D3CFC6 in four rules across two stylesheets before 19 August 2026, and
     was about to become six. That is exactly the shape of the #6C6961 defect BRIEF.md section 4
     records -- one value, hand-copied, in two sheets, which section 4's own "roles matter more
     than values" rule forbids. */
  --read:#D3CFC6;
  /* --read-2 is a THIRD step, quieter than something you sit and read but well clear of
     --dim's furniture: 8.77:1 against --read's 12.19 and --dim's 5.52. It is not a new
     colour -- entity.css's `.sec .kick` has carried this exact value since the entity
     pages were built, and the footer's copyright line became the second use on
     3 September 2026. Bob asked for that line 'dimmer, just maybe not *that* dim',
     and --dim at 11.5px was what he had called ridiculous. Tokenised rather than
     hand-copied into a second stylesheet, which is the #6C6961 defect BRIEF section 4
     records and the same mistake `.slot` was promoted out of the day before. */
  --read-2:#B4B0A8;
  --sans:'Jost',system-ui,sans-serif; --serif:'Newsreader',Georgia,serif;
}

/* ---- reset --------------------------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--chalk);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ---- skip link ------------------------------------------------------------------------------
   The first focusable element on every page, and invisible until it is focused. The masthead,
   seven nav links and the breadcrumb all precede the content, so a keyboard reader met about 96
   tab stops before the first album on the catalogue and had no way past them.

   `fixed`, not `absolute`: shift-tabbing back into the link from further down the page has to
   bring it into view, and an absolutely positioned one would reveal itself at the top of the
   document where nobody is looking. The dark chip is legible against the cream masthead it
   covers, and the global :focus-visible outline above already rings it in cyan.

   Its target carries `tabindex="-1"`, and has to. A fragment link to a plain <main> SCROLLS
   the page but leaves focus where it was, so the next Tab went straight back to the masthead
   logo -- measured on 31 August 2026, and the exact 96 tab stops the link exists to skip. The
   attribute makes <main> programmatically focusable without putting it in the tab order, and
   nothing shows a ring, because the rule above is :focus-visible rather than :focus. */
.skip{position:fixed;top:-4rem;left:1rem;z-index:10;background:var(--ink);color:var(--chalk);padding:.6rem 1rem;font-size:.8rem;font-weight:600;letter-spacing:.04em;transition:top .12s ease-out}
.skip:focus{top:1rem}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}

/* ---- layout ---------------------------------------------------------------------------------
   `.shell` is the gutter, and it is the whole system. Any rule that also targets a `.shell`
   element must set `padding-block`, never the `padding` shorthand: a shorthand with a
   horizontal `0` wins on specificity and removes the gutter rather than leaving it alone. That
   is exactly how the masthead came to have no gutter on all 101 pages at every width — see
   BRIEF.md section 4, "Responsive". */
.shell{max-width:1280px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.dots{background-image:radial-gradient(currentColor .9px,transparent .9px);background-size:5px 5px}

/* ---- masthead -------------------------------------------------------------------------------
   A cream band, which keeps the logo in its original navy-and-black without redesigning it. */
.masthead{background:var(--card);color:#17161A}
/* Split gap. The 2rem column gap separates logo from nav when they share a row; the row gap
   only applies once the nav has wrapped below the logo, where 2rem was a 32px chasm that made
   the masthead 189px tall on a narrow screen. Setting the row gap alone costs nothing at
   desktop widths, where the masthead is a single row and the row gap never applies. */
.masthead .inner{display:flex;align-items:center;justify-content:space-between;gap:.9rem 2rem;padding-block:1.2rem;flex-wrap:wrap}
.masthead img{display:block;width:clamp(160px,20vw,220px);height:auto}

/* The nav has to wrap, and the gap has to scale with the room available.
   Seven items need ~454px of text before any gap at all, in a row 288px wide at a 320px
   viewport — one row is arithmetically impossible without shrinking the type past legibility and
   past a usable tap target. So wrapping is a given; what a single fixed `gap` got wrong was
   *how* it wrapped. At 1.7rem the seventh item was orphaned alone on a third row (masthead 227px
   at 320px, over a quarter of the screen), and because `gap` sets both axes, the 27.2px row gap
   also made two rows read as two separate strips rather than one block.
   Row gap fixed and tight; column gap scaling: 9.6px at 320px, 27.2px from 1280px up, so the
   desktop rhythm is untouched. Two rows at every width tested, and the split falls out along
   meaning from 360px up — Home plus the browse routes, then the editorial ones. */
.nav{display:flex;gap:.5rem clamp(.6rem,3vw,1.7rem);flex-wrap:wrap}
.nav a{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#17161A;padding-bottom:2px;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{border-bottom-color:var(--cobalt)}
.nav a.sell{color:#8A6A24}

/* Below ~340px the seventh item is orphaned alone on a third row. `.18em` of tracking on seven
   uppercase labels is roughly 55px of pure letter-spacing, so buying the width back from there
   costs less than shrinking the type, which would also shrink the tap target. Measured at 306px:
   `.14em` still orphans, `.12em` does not.

   Note what this does *not* fix. Below about 300px even `.08em` is needed, which would visibly
   change the nav, so the layout degrades to three rows instead — taller, but nothing overflows
   and every link stays reachable. A real 320px phone has no persistent scrollbar and gets the
   full 320px, so it never sees this; a desktop browser resized to 320px reports about 305px to
   the page, which is what this rule is for. */
@media(max-width:340px){ .nav a{letter-spacing:.12em} }

/* ---- breadcrumbs ---------------------------------------------------------------------------- */
/* Bob's choice of 31 August 2026 -- Option 1 in audit/breadcrumb-options.html: a line break may
   fall only BETWEEN crumbs, so on a phone an album title drops to line two whole instead of
   splitting as "KENTON - / WAGNER".

   The demo implemented that as `white-space:nowrap` on each segment, and THAT VERSION CANNOT
   SHIP: measured at 343px, 27 of the 203 album titles are wider than the 311px of shell they
   have, and nowrap made the page itself 611px wide at its worst. A breadcrumb that scrolls the
   page sideways is a worse fault than the one it fixes.

   Flex delivers the same rule without it. Each crumb is a flex item, and an item is placed whole
   or moved whole to the next line -- so no segment splits while it fits. `flex:0 0 auto` stops
   an item shrinking to squeeze onto the current line, which is what would break a short title in
   half; `max-width:100%` caps the one case flex cannot place, a single crumb wider than the
   whole shell, and lets that one wrap internally rather than overflow. Nothing is hidden or
   truncated, which was Option 2 and was refused.

   The separator is an element now rather than `&nbsp;/&nbsp;` text, because a flex container
   would otherwise make each run of text its own item and the slashes would wrap on their own. */
.crumb{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.35rem;
       padding:1.4rem 0 0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.crumb a{color:var(--cyan)}
.crumb .seg{flex:0 0 auto;max-width:100%}
.crumb .sep{flex:0 0 auto;color:var(--dim)}

/* ---- rule strip -----------------------------------------------------------------------------
   Must not contain cobalt when it sits above the cobalt band, or it dissolves into it.
   Page sheets override the height and the margins; the order is set in the markup. */
.rule-blocks{display:flex;height:9px}
.rule-blocks i{flex:1}

/* ---- record cards -----------------------------------------------------------------------------
   The catalogue's Albums grid, its Loose Cuts grid and the entity pages' racks are the same card.
   Until 17 August 2026 these rules were duplicated byte-for-byte in `catalogue.html` and
   `entity.css`, the latter under a comment reading "matches the catalogue's cards" — an
   acknowledged copy, which is precisely the drift this file exists to stop. They were merged when
   the type was retuned, so there is now one place to tune it, and because the cuts cards are about
   to appear on entity pages under "Appears on these Loose Cuts" (BRIEF.md section 3e).

   `.rack` is deliberately NOT here: the catalogue ends in 4rem of padding and an entity rack in
   .5rem, and a rule that differs between page types is a decision, not shared chrome.

   Type retuned 17 August 2026, after measuring rather than eyeballing:
   - `.meta` was 10.4px in a hard-coded `#6C6961` belonging to no palette, giving **3.46:1**
     against `--ink` — a WCAG AA failure, at the smallest size on the card, on the line carrying
     the year and the cut count. Now `--dim` at 11.2px, which measures 5.52:1.
   - `.by` carried the artist dimmed at 12px, making the most useful line on the card the least
     visible. It is now `--chalk`, distinguished from the title by size and weight instead of by
     being greyed out.
   - The cut list stays deliberately smaller than the artist: a card can carry three cuts titled
     "Interprétation swing du premier mouvement du Concerto en ré mineur de J.-S. Bach", and at
     the artist's size that buries everything else on the card. **Smaller, but NOT dimmer** — the
     first attempt gave the cut names +1px and left them at `--dim`, so when the title and artist
     went to `--chalk` at 17:1 the cut names stayed at 5.52:1 and ended up relatively *less*
     legible than before. Hierarchy on this card is carried by SIZE and WEIGHT; dimming buys
     nothing that size was not already providing and costs real legibility. Bob had to ask twice.
     The cut names are the reason the Loose Cuts section exists, so they are the last thing that
     should be hard to read. */
.rec{display:block;position:relative}
.rec[hidden]{display:none}
.rec .art{position:relative;aspect-ratio:1;background:var(--ink-2);overflow:hidden}
.rec .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.rec:hover .art img{transform:scale(1.04)}
.rec .tag{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--cyan);font-size:.57rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.32rem .5rem}
.rec .fmt{position:absolute;top:.45rem;left:.45rem;background:var(--cobalt);color:#fff;font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .4rem}
.rec h3{font-size:.95rem;font-weight:600;line-height:1.24;margin:.7rem 0 .24rem}
.rec .by{font-size:.85rem;font-style:italic;color:var(--chalk);margin:0 0 .22rem;line-height:1.32}
.rec .meta{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin:0;font-variant-numeric:tabular-nums}

/* Loose Cuts cards. A record card carries a list of its cuts, which an album card does not, so
   the anchor wraps only the record and each cut gets its own link — section 3e, where a named cut
   opens the page with the players cued to it. Nested anchors are invalid HTML, which is why
   `.cutrec` is a div rather than the <a> an album card uses.

   The underline is not decoration. Until 17 August 2026 a cut link rested in `--dim` with no
   underline and a transparent border — the identical rendering to `.by`, which is not a link — and
   revealed itself only on hover, which does not exist on a touch screen. Bob did not know the cuts
   were clickable. A resting affordance is required.

   **The underline is full brass, not dimmed.** It was `rgba(192,142,54,.5)` while the text was
   `--dim`; once the text went to `--chalk` that balance inverted and Bob reported it read as less
   clearly a link than before. An affordance has to be judged against the text it sits under, not in
   isolation. Hover thickens it to 2px, since brightening the text is no longer available as a hover
   signal.

   **Italic — approved by Bob, 17 August 2026**, after he checked it in a real browser: *"I think it
   looks great."* He remembered these as italic, preferred them so, and made the sharper point that
   removing a slant is the wrong cure for a legibility problem when the actual fault is contrast —
   which is exactly what had happened to the catalogue's filter query line. Legibility here is
   carried by size and by 17.09:1 contrast, so the slant costs nothing.

   **The italic is scoped deliberately: the ARTIST on album cards, the CUT NAMES on cuts cards, and
   never both on one card.** `.rec .by` is shared, so italicising it reached the cuts cards too on the
   first attempt; the artist and the cut list then sat 0.5px apart in the same slant and colour and
   read as one undifferentiated block. `.cutrec .by` restores upright below. This is the better
   arrangement on its own merits, not merely a narrower one — on a cuts card the slant is what
   separates the list from the artist, so size no longer has to. */
/* The artist stays UPRIGHT on a cuts card. `.rec .by` is italic above, which is right for an album
   card, but Bob asked for the italic in album view only — and on a cuts card the italic belongs to
   the cut names below, which is what separates them from the artist now that the two sit 0.5px
   apart in size. Italicising both made the artist and the cut list read as one undifferentiated
   block. Style does the separating here; size does not have to. */
.cutrec .by{font-style:normal}
.rec .cutlink{display:block;color:inherit;text-decoration:none}
.rec .noart{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--ink-2),var(--ink))}
.cutlist{list-style:none;margin:.55rem 0 0;padding:0}
.cutlist li{font-size:.82rem;line-height:1.45;margin:0 0 .55rem;padding-left:.7rem;position:relative}
.cutlist li::before{content:"·";position:absolute;left:0;color:var(--brass)}
/* Offset 3px, not 2px, and skip-ink explicit. At 2px the rule cut straight through the descenders
   of an oblique at 13.1px — visible on "swing du", "premier", "J.-S." in Swing 18's titles, which
   wrap to three lines each. Seen only by screenshotting Bob's real Chrome; the preview pane renders
   at about a third scale and this is invisible there. Item spacing went .28rem -> .55rem for the
   same card: two three-line titles at the tighter spacing read as one ruled block rather than two
   cuts. */
.cutlist a{color:var(--chalk);font-style:italic;text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-skip-ink:auto}
.cutlist a:hover,.cutlist a:focus{text-decoration-thickness:2px}

/* The filtered card's completeness line — "+2 other Loose Cuts from this record" (BRIEF.md §3e).
   It appears wherever a rack is showing a name's matching cuts rather than the record's whole
   set: the entity pages' "Appears on these Loose Cuts", and the catalogue's Loose Cuts view once
   a filter is active. Both build the same card, one in Python and one in JavaScript, so this rule
   is the one place the two cannot drift.

   Deliberately NOT a link and deliberately not styled as one. It reports what the card is not
   showing; the destination it would point at is already carried by the card body and by every cut
   name above it, and a third control to the same place is one more affordance to keep in step.
   `--dim` measures 5.52:1 on `--ink` — the same value the year-and-count line was raised to when
   `#6C6961` was found failing AA at 3.46:1. */
.more{font-size:.74rem;line-height:1.4;color:var(--dim);margin:.15rem 0 0}

/* ---- footer --------------------------------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:2.2rem 0;display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;align-items:baseline}
/* The two halves must READ AS A PAIR. Until 3 September 2026 the footer had no `nav` rule at all,
   so the links inherited the body's 16px chalk while the copyright beside them sat at 11.5px
   --dim. Bob: "so faint it looks ridiculous" -- and the fault was the mismatch, not the colour
   alone. Same size now, with the links a step brighter than the line that is only a notice. */
footer p{font-size:.8rem;color:var(--read-2);margin:0}
footer nav{font-size:.8rem;line-height:1.9;color:var(--dim);text-align:right}
footer nav a{color:var(--read)}
footer nav a:hover{color:var(--chalk)}

/* ---- the Reviews page ------------------------------------------------------------------------
   One block per review, modelled on the homepage's own review feature so the two read as the same
   thing in two places -- Bob's instruction, 1 September 2026: "something that looks similar to the
   Homepage for each one".

   The values are the homepage's, deliberately: cream ground, the same 0.85fr/1.35fr split, the same
   serif extract capped by a fade. What differs is that this page stacks them, so:

     * the cover SIDE ALTERNATES. A column of identical left-aligned covers reads as a list of
       search results; alternating gives the page a rhythm and stops the eye running straight down
       one edge. It reverts to a single column below 820px, exactly as the homepage block does,
       where alternation would be invisible anyway.
     * each block is its own cream panel on the dark page rather than one continuous band, so the
       boundary between two reviews is never ambiguous.

   `.revfeature` rather than `.review`: album-detail.css already uses `.review` for the review as it
   appears on an album page, which is a different design on a different ground. Two names, because
   they are two things -- and because a page could one day carry both. */
.revfeature{background:var(--card);color:#17161A;margin-bottom:clamp(1.5rem,4vw,2.6rem)}
.revfeature .grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding-block:clamp(2.2rem,6vw,4.5rem)}
.revfeature img{width:100%;display:block}
.revfeature:nth-of-type(even) .grid>img{order:2}
.revfeature .eye{font-size:1.2rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#8A6A24;margin:0 0 1rem}
.revfeature h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.06;margin:0 0 1.1rem}
.revfeature h2 a{color:inherit;text-decoration:none}
.revfeature h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.revfeature p.lede{font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.65;margin:0 0 1.2rem;max-width:52ch;color:#33313A}
.revfeature .extract{position:relative;max-height:clamp(11rem,20vw,14.5rem);overflow:hidden}
.revfeature .extract::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5rem;pointer-events:none;background:linear-gradient(to bottom,rgba(239,233,220,0),var(--card))}
.revfeature .cont{font-family:var(--serif);font-style:italic;font-size:.92rem;color:#6A6660;margin:.9rem 0 0}
.revfeature .sig{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6A6660}
.revfeature .more{display:inline-block;margin-top:1.3rem;background:var(--ink);color:var(--chalk);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.85rem 1.5rem;text-decoration:none}
.revfeature .more:hover{background:var(--cobalt)}
@media(max-width:820px){
  .revfeature .grid{grid-template-columns:1fr}
  .revfeature:nth-of-type(even) .grid>img{order:0}
}

/* ---- editorial slot -------------------------------------------------------------------------
   SHARED, and it lives here for that reason. It began in `entity.css` as the artist and composer
   pages' introduction panel, and on 2 September 2026 the homepage adopted it for the block that
   sends a reader to the Learn page. It was duplicated into `index.html` for about an hour, which
   is exactly how the #6C6961 defect in BRIEF.md section 4 happened -- one value, hand-copied,
   living in two sheets. Bob had it promoted the same day rather than left to drift.

   Everything below arrived by argument and the arguments are kept. Read them before changing a
   value: they record what was tried, what Bob rejected, and why. */
/* This carried real editorial copy from 13 August 2026 but kept the styling of the empty
   placeholder it had been: --dim at .95rem, the same colour as breadcrumbs and stat labels.
   Those values were signalling "nothing here yet", not setting prose to be read, and nobody
   changed them when the copy went in. Bob: "VERY hard to read".

   It is now #D3CFC6 — 11.45:1 against the slot's blended background, comfortably past WCAG AAA
   where --dim managed 5.29:1 and failed it. That is not a new colour: it is what album pages
   already use for `.album-note p`, a reading paragraph on the same dark ground. Stopping short
   of full chalk is deliberate, because BRIEF.md section 4 records halation on light-over-dark as
   worst for exactly this readership.

   **The paragraph is upright, and the italic has gone back where it means something.** It was
   set italic whole, which cost twice over. Italic is built for emphasis rather than sustained
   reading and it turns four or five sentences into work — and, worse, `entity-copy.md` marks
   album and work titles with `*asterisks*`, so every one of them (*Play Bach*, *The Four
   Seasons*, *Kinderszenen*, *Diabelli Variations*) rendered as `<em>` inside an italic parent
   and became invisible. On a site about named repertoire, italic work titles are not decoration.
   The editorial register is already carried by the serif face and the cobalt wash; the paragraph
   did not need a costume as well. (The dashed rule this sentence also used to name went on
   31 August 2026 — see the note on `.slot` below.)

   **The cap is on the box, not the paragraph.** Capping the text alone left a 505px void inside
   a bordered, filled box at 1280px, which read as a mistake. Capping the box makes it a narrow
   editorial column, consistent with `.lede` and `.kick`, which are capped and left-aligned in
   the same way. Note `66ch` measured out at 85 actual characters — `ch` is the width of "0", not
   of an average letter, so it is a loose proxy at best. */
/* Full-width band, text column centred inside it. Three versions were tried on 14 August 2026
   and the reasoning matters more than the result.

   Left-aligned and capped: 505px of empty box to the right of the text at 1280px. Bob called the
   page unbalanced, and he was right — the void was asymmetric, so it read as a bug.

   Capped and centred: symmetric, but it made the box the only element on the page not spanning
   the column. The heading, the stats row, the rule strip and the card grid all run edge to edge.

   Literal padding on a full-width box does not work either, and the arithmetic says so: holding
   a ~65-character measure inside a 1184px column needs about 333px of padding a side, which is a
   bordered box that is mostly border.

   So the band spans the column and keeps the page's structure, and `margin-inline:auto` on the
   paragraph centres the measure within it. No media query: below about 600px the paragraph is
   narrower than its cap and the auto margins collapse to nothing, so on a phone this is simply a
   full-width box with normal padding. */
/* NO BORDER, and a slightly stronger tint. Bob's ruling, 31 August 2026, from
   audit/intro-box-options.html. The dashed outline traced the full 1184px shell while `.slot p`
   is capped at 34rem and centred, so it drew a frame around roughly 320px of empty space on each
   side and read as an unfilled placeholder rather than a pull-quote. Dropping the border and
   lifting the wash from .07 to .10 keeps the band separate from the page without outlining the
   emptiness. The width and the centred measure are unchanged -- both were argued out above and
   neither is what was wrong.

   The tint change moves the blended ground from #131520 to #141726, so the contrast note higher
   up in this file is now 11.45:1 rather than 11.69:1. Still far past WCAG AAA. */
.slot{margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;padding:clamp(1.15rem,2.4vw,1.9rem) clamp(1.3rem,3vw,2.2rem);background:rgba(43,84,196,.10)}
.slot p{margin:0 auto;font-family:var(--serif);font-size:1.05rem;line-height:1.6;color:var(--read);max-width:34rem}
.slot em{font-style:italic}
/* `font-style:normal` used to live here so a bold run could stand out against an italic
   paragraph. The paragraph is upright now, so bold is simply bold. */
.slot b{font-weight:700;color:var(--chalk);letter-spacing:.02em}