/* The two record pages: a show, and one staging of it.
   Loaded by show.html and production.html through `{% block head %}`, the same
   way account.css, legal.css and contribute.css already load for the pages
   that need them.

   Its own file rather than a new section in site.css, for the reason
   base.html already states about share.css: several agents were editing that
   one stylesheet at the same time, and a merge that goes wrong there is a site
   that renders wrong rather than one that fails loudly. Nothing here changes
   a rule in site.css. Everything reads site.css's tokens, so the type scale,
   the spacing scale and the palette stay single-sourced.

   Added 29 August 2026 for the visual-language redesign's composition pass.
   Reference: visual-language-ui-specimen.html, the `.show-title-band` and
   `.ledger` blocks (:311 and :322). */


/* ── the masthead ────────────────────────────────────────────────────────────
   What it replaces. Both pages opened with a 2.8:1 full-bleed image band, then
   a separate title bar under it, then the record's own facts in a definition
   list a screen further down under a heading of its own. Three unrelated
   blocks that happened to be stacked in that order, and on most records the
   first of them was empty.

   The specimen composes them instead: the name against the top of the page in
   the display face, the record's key facts beside it, one heavy rule under
   both, and the picture inside the grid below rather than as a banner over it.

   Built for no picture first, because most records here hold none. `.show-say`
   takes a wider track when nothing sits beside it, so the masthead reads as a
   deliberate measure rather than as a hole where a photograph should be.
   Column 6 of the 12 is left empty on purpose: it is the gap that makes the
   offset read as a decision rather than as a rounding error. Below 820px the
   grid collapses to one column, picture first, and the facts move under the
   title and left-align with it. */
.show-mast{display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:calc(var(--u)*3); row-gap:var(--half); margin:0 0 var(--band)}

.show-title-band{grid-column:1/-1; display:flex; flex-wrap:wrap;
  gap:var(--u) calc(var(--u)*3); justify-content:space-between; align-items:flex-end;
  padding:calc(var(--u)*3) 0 calc(var(--u)*2.5); border-bottom:2px solid var(--ink)}

/* --d1 is site.css's own "one commanding line on a page" step, and its comment
   there says most pages have none. A record page is where that line belongs:
   the thing's own name, which is the reason the reader opened the page. Weight
   600 is franklin-gothic-condensed's ceiling and -.005em is the tracking every
   display heading on the site already uses. 16ch so a long title wraps rather
   than pushing the facts off the row. */
.show-title-band h1{font-family:var(--display); font-size:var(--d1); font-weight:600;
  line-height:.92; letter-spacing:-.005em; margin:0; max-width:16ch; flex:1 1 12ch}

.show-facts{flex:0 1 30ch; text-align:right; font-size:var(--t-small);
  line-height:1.75; color:var(--grey); font-variant-numeric:tabular-nums}
.show-facts p{margin:0}
.show-facts b{color:var(--ink); font-weight:600}
.show-facts a{color:var(--link); text-decoration:none}
.show-facts a:hover{color:var(--ink)}
.show-facts .nil{color:var(--mute); font-weight:400}

.show-plate{grid-column:1/6; margin:0}
/* object-fit here is the site's default crop. site.css's img.whole carries
   !important and still wins, so an image whose stated terms forbid cropping
   is unaffected by this rule. */
.show-plate img{width:100%; display:block; aspect-ratio:var(--ar-wide);
  object-fit:cover; background:var(--mount);
  outline:1px solid var(--hair); outline-offset:-1px}
.show-plate figcaption{font-size:var(--t-cap); color:var(--grey); line-height:1.5;
  margin-top:var(--u)}
/* The stand-in keeps its grayscale and its caption, both of which exist for a
   reason site.css spells out at length. It only needs to stop being a
   170px-and-text side grid when it sits in a plate slot. */
.show-plate .stand-in{display:block; max-width:none; margin:0}

.show-say{grid-column:7/-1}
.show-mast.no-plate .show-say{grid-column:1/10}
.show-say .lede:last-child{margin-bottom:0}
.show-say .flag{margin-top:calc(var(--u)*2)}

/* Named roles, printed the way a programme prints them: the job, then the
   person. They were pills, which is this site's treatment for a category you
   can click, and none of these is one. Themes stay pills, because those are. */
.show-credits{margin:0 0 calc(var(--u)*2.5)}
.show-credits div{display:flex; gap:calc(var(--u)*2); padding:var(--u) 0;
  border-bottom:1px solid var(--hair)}
.show-credits dt{flex:0 0 10ch; color:var(--grey); font-size:var(--t-cap);
  line-height:1.6; padding-top:1px}
.show-credits dd{margin:0; font-size:var(--t-small); line-height:1.5}
.show-credits dd a{color:var(--link); text-decoration:none}
.show-credits dd a:hover{color:var(--ink)}


/* ── the ledger ──────────────────────────────────────────────────────────────
   One list pattern for both pages. A show page held a four-across grid of
   sleeve cards for its recordings and a table for its stagings: two registers
   doing the same job on one page, and the cards gave a 200px square to a
   record whose only held fact is often a label name.

   The row carries its own caveat. A production that predates its own show, a
   duplicate record, a recording with no date: those were a bold clause buried
   inside a run-on sub-line, or a paragraph at the foot of the section pointing
   back up at rows the reader had already read past. `.flag-line` puts the
   problem in the row it belongs to, named, under a dashed rule so it reads as
   an aside to that record rather than as part of its billing.

   No tint behind a flagged row and no colour bar down its side. The label says
   what is wrong in words, which is the part a reader can act on, and a
   background nobody can name the meaning of is the thing the owner has already
   rejected twice on the year page.

   Three widths, and the modifier sits on the container so every row in one
   list agrees. Plain is year, billing, right column. `.plates` adds a square
   for a sleeve. `.slim` drops the year for a list that has none. */
.ledger{border-top:1px solid var(--hair); margin:0 0 var(--u)}
.ledger-row{display:grid; align-items:center;
  grid-template-columns:64px minmax(0,1fr) auto;
  grid-template-areas:"yr billing rt" "flag flag flag";
  gap:0 calc(var(--u)*2.25); padding:calc(var(--u)*2) 0;
  border-bottom:1px solid var(--hair)}
.ledger.plates .ledger-row{grid-template-columns:64px 64px minmax(0,1fr) auto;
  grid-template-areas:"yr plate billing rt" "flag flag flag flag"}
.ledger.slim .ledger-row{grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"billing rt" "flag flag"}

.ledger-row .yr{grid-area:yr; align-self:start; padding-top:3px;
  font-size:var(--t-cap); color:var(--mute); font-variant-numeric:tabular-nums}

.ledger-row .plate{grid-area:plate; align-self:start; width:64px;
  aspect-ratio:var(--ar-sq); overflow:hidden; background:var(--mount);
  outline:1px solid var(--hair); outline-offset:-1px}
.ledger-row .plate img{width:100%; height:100%; object-fit:cover; display:block}

.ledger-row .billing{grid-area:billing; min-width:0;
  font-size:var(--t-body); font-weight:600; line-height:1.3}
.ledger-row .billing a{color:var(--link); text-decoration:none}
.ledger-row:hover .billing a{color:var(--ink)}
.ledger-row .imprint{display:block; margin-top:4px; font-size:var(--t-cap);
  font-weight:400; color:var(--grey); line-height:1.5}
/* Same de-emphasis dress site.css already gives a wayfinding link in a muted
   column: the record's own name stays the loudest link in the row. */
.ledger-row .imprint a{color:inherit; text-decoration:underline;
  text-decoration-color:var(--hair); text-underline-offset:3px}
.ledger-row .imprint a:hover{color:var(--ink); text-decoration-color:var(--ink)}

.ledger-row .rt{grid-area:rt; justify-self:end; align-self:start; padding-top:3px;
  text-align:right; font-size:var(--t-cap); color:var(--grey);
  white-space:nowrap; font-variant-numeric:tabular-nums}

.ledger-row .flag-line{grid-area:flag; display:flex; align-items:flex-start;
  gap:calc(var(--u)*1.5); margin-top:calc(var(--u)*1.5);
  padding-top:calc(var(--u)*1.5); border-top:1px dashed var(--hair)}
.ledger-row .flag-line b{flex:none; color:var(--alert); font-weight:600;
  font-size:var(--t-cap); line-height:1.6}
.ledger-row .flag-line p{margin:0; font-size:var(--t-cap); color:var(--grey);
  line-height:1.6; max-width:66ch}


/* One deliberate column below 820px, for the grid and for the row alike. The
   year and the sleeve hold their own track and the billing stacks over the
   right-hand column beside them, so a row is still one object rather than
   three lines of unrelated text. */
@media (max-width:820px){
  .show-mast{grid-template-columns:1fr; row-gap:calc(var(--u)*3)}
  .show-title-band{align-items:flex-start; padding:calc(var(--u)*2) 0}
  .show-title-band h1{flex:1 1 100%; max-width:none}
  .show-facts{flex:1 1 100%; text-align:left}
  .show-plate,.show-say,.show-mast.no-plate .show-say{grid-column:1/-1}
  .show-credits dt{flex:0 0 8ch}

  .ledger-row{grid-template-columns:56px minmax(0,1fr);
    grid-template-areas:"yr billing" "yr rt" "flag flag"; row-gap:4px}
  .ledger.plates .ledger-row{grid-template-columns:56px 56px minmax(0,1fr);
    grid-template-areas:"yr plate billing" "yr plate rt" "flag flag flag"}
  .ledger.slim .ledger-row{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"billing" "rt" "flag"}
  .ledger-row .plate{width:56px}
  .ledger-row .rt{justify-self:start; text-align:left; padding-top:0}
}