/* Composer and artist pages. Generated markup — see tools/build_entity_pages.py.

   The shared chrome — tokens, reset, gutter, masthead, nav, breadcrumbs, footer — lives in
   `site.css`, which is linked before this file. Only what these pages own is below. */

/* The rule strip carries generous vertical space here because it separates the page head from
   the featured cards; `site.css` sets the height. */
.rule-blocks{margin:clamp(1.4rem,3vw,2rem) 0 clamp(1.6rem,3.5vw,2.4rem)}

/* ---- page head ---------------------------------------------------------------------- */
.ehead{padding:clamp(1.8rem,4.5vw,3rem) 0 0}
.ehead .eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin:0 0 .7rem}
/* `overflow-wrap:break-word` is a safety net, not a fix for a current defect. The 2.6rem floor
   cannot shrink, and "Jagodziński" — the longest unbreakable word in any heading on the site —
   needs 284px in a 288px box at 320px. It fits by four pixels. That margin disappears if Jost
   fails to load and the system fallback has wider metrics, or the first time a longer name is
   catalogued, and without this the word would simply hang outside the page. */
/* line-height 1, not .85. Below 1 the line box is shorter than the glyphs, so any descender
   lands in the line beneath — and Jost's uppercase J descends. On a single-word heading
   (COMPOSERS, CHOPIN) nothing wraps and it never showed; on "Andrzej Jagodziński Trio" at 320px
   the J of ANDRZEJ sat inside JAGODZIŃSKI and its own J sat inside TRIO. Measured at 43.2px:
   ink height 54px against a 36.7px line box, a 17.3px overlap. Bob spotted it on the cards.
   Fully clearing the Ń acute sitting under a J descender would need 1.25, which would visibly
   loosen the largest type on the site; 1 clears every all-caps descender collision. */
.ehead h1{font-size:clamp(2.6rem,9vw,6.4rem);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;line-height:1;margin:0 0 1rem;overflow-wrap:break-word}
/* Naming convention, fixed 16 August 2026 — the two were inverted, which cost a long and
   confusing exchange about which class was which. `.lede` is the opening paragraph under the
   page's h1; `.kick` is the smaller explainer under a section h2, matching album-detail.css.
   Same role, same name, across both stylesheets. The values still differ between sheets and
   that is a separate, unresolved question. */
.ehead .lede{font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.18rem);line-height:1.55;max-width:62ch;color:#C4C0B8;margin:0}

/* the stat strip — facts drawn straight from the catalogue, no prose required */
.stats{display:flex;flex-wrap:wrap;gap:0;margin:clamp(1.4rem,3vw,2rem) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:.95rem 1.6rem .9rem 0;margin-right:1.6rem;border-right:1px solid var(--line)}
.stat:last-child{border-right:0;margin-right:0}
.stat b{display:block;font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--chalk);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:.42rem}

/* ---- editorial slot -------------------------------------------------------------------------
   MOVED TO `site.css` on 2 September 2026, with all of its reasoning. It stopped being an entity
   page component the moment the homepage used it for the doorway to the Learn page, and the two
   copies had already begun to drift apart in the hour they both existed. Nothing about the panel
   is defined here any more -- edit it in one place, in `site.css`. */


/* ---- sections ----------------------------------------------------------------------- */
.sec{padding:clamp(2.2rem,5vw,3.4rem) 0 0}
.sec h2{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:400;letter-spacing:-.02em;margin:0 0 .3rem}
.sec .kick{font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--read-2);max-width:70ch;margin:0 0 1.4rem}

/* ---- album grid ---------------------------------------------------------------------
   The card itself now lives in site.css, shared with the catalogue. It used to be copied
   here under a comment saying it matched the catalogue's cards, which meant every tune of
   the card type had to be made twice and stay in step by hand. Only the rack differs, and
   it differs for a reason: an entity rack sits inside a section with more below it, so it
   ends in .5rem where the catalogue's ends in 4rem. */
.rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(1rem,2.2vw,1.7rem);padding-bottom:.5rem}
.art.blank{display:flex;flex-direction:column;justify-content:space-between;padding:.9rem;background:var(--navy)}
.art.blank .comp{font-size:.57rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.art.blank .ttl{font-family:var(--serif);font-size:clamp(.9rem,1.5vw,1.14rem);line-height:1.1;color:var(--chalk)}
.art.blank .lab{font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,243,235,.6)}

/* ---- featured cards on the index pages ---------------------------------------------- */
/* Explicit column counts rather than `auto-fill` with a 300px floor.

   The floor existed so five cards read 3 + 2 on a wide screen instead of 4 + 1 with an orphan,
   which is a real goal — but it set the *column count* as a side effect of arithmetic, and the
   arithmetic said one column all the way up to a ~667px viewport. A single card therefore
   stretched from 288px to 607px wide against a fixed `min-height:210px`, reaching a 2.89:1
   letterbox with a dead gap through the middle. Stating the counts directly keeps the 3 + 2
   intent and bounds the aspect ratio: worst single-column case is now 2.27:1 at 519px, and two
   columns give 1.10:1.

   Both bounds come from measurement rather than eye.

   The 380px cap: a single full-width card was still 478 x 210 at 519px — 2.27:1, with 47% of its
   width unused and a 67px dead gap between the years and the artist list, because `min-height`
   is fixed while the width is fluid. The card carries at most 228px of line, so the extra width
   buys nothing. On desktop the card is 375 x 210, so capping at 380px means a card never takes a
   shape it does not already have at full size. Below ~415px the cap does not bite and the card
   is simply full width.

   The 480px step: `.fcard` has 22.4px of padding each side and its heading floor is 24px, where
   "Jagodziński" — the longest unbreakable word on either index — needs 160px, so a card must
   clear 205px. At 480px two columns are 214px. The 1000px step is where `auto-fill` already
   reached three columns, so the desktop layout is unchanged. */
.feat{display:grid;grid-template-columns:minmax(0,380px);gap:clamp(.9rem,2vw,1.4rem)}
@media(min-width:480px){ .feat{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1000px){ .feat{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fcard{background:var(--cobalt);color:#fff;padding:1.4rem 1.4rem 1.25rem;display:flex;flex-direction:column;min-height:210px;position:relative;overflow:hidden;transition:transform .2s ease}
.fcard:hover{transform:translateY(-3px)}
/* Same safety net as the page headings: "Jagodziński" needs 160px against 168px of content
   width at the tightest two-column step, and artist names are not a closed set. */
/* line-height 1.02, not .94: at 24px the glyph ink is 24px tall against a 22.6px line box, so
   "JACQUES / LOUSSIER" and "ANDRZEJ / JAGODZIŃSKI / TRIO" had the J touching the line below.
   Card headings only wrap in the narrow two-column step, which is why it went unseen. */
/* The card heading is an h2, not an h3, and the level is the point rather than the size.
   `composers.html` and `artists.html` went h1 -> h3 here: the featured cards were the first
   thing under the page title, at level 3, with no h2 above them, so a screen reader
   navigating by heading heard eight sub-items of a section that was never announced. The
   cards and "Every artist in the catalogue" are peers -- both are top-level blocks of the
   page -- so both are h2 and the skip is gone. NOTHING MOVES VISUALLY: the rule below is the
   same declaration under a different selector. */
.fcard h2{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;letter-spacing:-.028em;text-transform:uppercase;line-height:1.02;margin:0 0 .55rem;position:relative;overflow-wrap:break-word}
.fcard .sub{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 .2rem;position:relative}
.fcard .yrs{font-size:.68rem;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.62);margin:0;font-variant-numeric:tabular-nums;position:relative}
/* The Loose Cuts line — BRIEF.md §3e: the index card "gains a line, e.g. 6 Loose Cuts, with its
   own year span". Its own, not merged into `.yrs`: the album span and the cuts span are two facts
   about two different bodies of work, and a 1937 78 pulling a composer's album span back to 1937
   would say something untrue about the albums. (The individual PAGE merges them, because there
   the two sit under one "years covered" stat describing everything on that page.)
   Set like `.sub` rather than like `.yrs` because it is the albums line's peer, not a footnote to
   it, and carried at the same weight so neither half of the card reads as the lesser one. The
   span rides inline so this costs one line rather than two. Brass would be the natural accent and
   cannot be used: #C08E36 on cobalt measures 2.7:1. */
.fcard .cuts{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:.5rem 0 0;position:relative;font-variant-numeric:tabular-nums}
.fcard .who{font-family:var(--serif);font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.9);margin:auto 0 0;padding-top:.9rem;position:relative}

/* ---- the complete A–Z --------------------------------------------------------------- */
.azwrap{border-top:1px solid var(--line);margin-top:clamp(2rem,4.5vw,3rem);padding-top:clamp(1.5rem,3vw,2rem)}
.az{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;list-style:none}
.az li{margin:0}
.az a{display:inline-flex;align-items:baseline;gap:.4rem;border:1px solid var(--line);padding:.36rem .68rem;font-size:.75rem;font-weight:500;color:var(--chalk);transition:border-color .15s,background .15s}
.az a:hover{border-color:var(--chalk);background:var(--ink-2)}
.az a i{font-style:normal;font-size:.66rem;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
/* The A-Z highlight marks the names with a CARD ABOVE, not the names with a page -- Bob's
   original instruction, restored 19 August 2026 after the destination reading was tried and
   failed on the page. See BRIEF.md section 3e *What the A-Z highlight marks*. */
.az a.has-card{border-color:#3E5FA8}
.az a.has-card i{color:var(--cyan)}

/* ---- back link ---------------------------------------------------------------------- */
.back{display:inline-block;margin:clamp(2rem,4vw,3rem) 0 0;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);border-bottom:2px solid var(--brass);padding-bottom:3px}

/* These pages end on a card grid or an A–Z list rather than a section with its own bottom
   padding, so the footer needs the gap that the other page types get for free. */
footer{margin-top:clamp(2.5rem,5vw,4rem)}

@media(max-width:640px){
  .stat{padding-right:1.1rem;margin-right:1.1rem}
  .fcard .n{font-size:6.5rem}
}