/* ── The three record pages: a person, a theatre, a recording ────────────────

   Its own file rather than a new section in site.css, for the reason
   base.html already states about share.css and shows_period.html states about
   period.css: several agents were editing site.css at the same moment this was
   written, and a stylesheet merge conflict is a site that renders wrong rather
   than one that fails loudly. Loaded by person.html, venue.html and album.html
   and by nothing else. Every colour, step and unit here is a token declared in
   site.css, so light and dark, the type scale and the spacing scale all follow
   that file and nothing new is invented.

   WHAT THIS BORROWS, AND FROM WHERE. The visual-language specimen
   (visual-language-ui-specimen.html, sixteenth pass) establishes two devices
   this extends to the three entity pages, which the specimen itself never
   mocked up:

   1. `.show-title-band`. An entity's own name, set once in the display face at
      the head of its own page, with the handful of facts a reader wants first
      running inline beside it instead of sitting in a stats block further
      down. Here that is `.entity-band`: a person's name with what they were
      credited as and when they were on stage, a theatre's name with its
      address and whether it is still open, a recording's title with its label,
      its release date and its territory.

   2. `.ledger`. A dated, attributed row: the year, an optional thumbnail, the
      billing with an imprint sub-line under it, a tag on the right, and a
      caveat that belongs to one row printed on that row rather than in a note
      under the whole list. It replaces `table.runs` wherever these pages list
      dated things: a person's credits, a theatre's productions, a recording's
      candidate stagings and its sibling issues.

   THE DISPLAY FACE STILL APPEARS EXACTLY ONCE PER PAGE. `.entity-band h1` is
   that one element on all three pages. Everything else here is the workhorse
   sans at the same size and weight as site.css's own h2. */

/* ── the title band ──────────────────────────────────────────────────────── */

.entity-band{display:flex; justify-content:space-between; align-items:flex-end;
  gap:calc(var(--u)*3); flex-wrap:wrap;
  padding:var(--band) 0 calc(var(--u)*2.5);
  border-bottom:2px solid var(--ink); margin:0 0 calc(var(--u)*4)}

/* After a full-bleed photograph the page has already opened. A second
   var(--band) of air would only push the building's name away from the
   picture of it. Venue only, and only when there is a hero. */
.entity-band.under-image{padding-top:calc(var(--u)*3)}

.entity-band h1{font-family:var(--display); font-size:var(--d1); line-height:.9;
  font-weight:600; letter-spacing:-.01em; margin:0; max-width:15ch; flex:1 1 12ch}

/* The same trade site.css makes at .plate-title.long: a long name set at --d1
   is four lines of 104px type, which stops being commanding and starts being
   a wall. It steps down one place in the scale rather than wrapping forever.
   The templates decide by name length, not by page. */
.entity-band.long h1{font-size:var(--d2); line-height:.98; letter-spacing:-.03em;
  max-width:22ch}

.entity-facts{margin:0; flex:0 1 auto; text-align:right; max-width:38ch;
  font-size:var(--t-small); color:var(--grey); line-height:1.8;
  font-variant-numeric:tabular-nums}
.entity-facts span{display:block}
.entity-facts b{color:var(--ink); font-weight:600}

/* ── the lead: a portrait beside the writing ─────────────────────────────── */

/* 380px rather than a fraction of the width. The portrait carries no crop, so
   its height is whatever the plate was, and a free 2fr column would let a
   narrow studio portrait run 700px tall and push the biography off the
   screen. Fixed on the left, the writing takes everything else. */
.entity-lead{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:calc(var(--u)*5); align-items:start; margin:0 0 var(--half)}
/* No picture, so no second column to break the grid against. One deliberate
   measure instead of a half-empty two-column layout. */
.entity-lead.solo{display:block; max-width:74ch}
.entity-lead .lede{margin:0}

.entity-pic{margin:0}
/* NO aspect-ratio, deliberately, and this is the whole reason the rule is
   written out rather than left to the browser. site.css's own register of
   cropping surfaces (the comment above img.whole) exists because a crop that
   happens in the browser is invisible to web/cropping.py. A portrait box with
   a ratio on it would crop faces silently on every person page at once. If
   this box ever needs a fixed height, the crop has to be cleared first. */
.entity-pic img{width:100%; display:block;
  border:1px solid var(--hair); background:var(--sunk)}
.entity-pic figcaption{font-size:var(--t-cap); color:var(--grey);
  line-height:1.5; margin-top:calc(var(--u)*.75)}
.entity-pic .why{display:block; color:var(--alert); margin-bottom:3px}

/* ── the ledger head: a section opened by a rule above it, not below ─────── */

.ledger-head{display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--u); border-top:2px solid var(--ink);
  padding-top:calc(var(--u)*1.25); margin:var(--half) 0 0}
.ledger-head:first-child{margin-top:0}
/* site.css's base h2 rules itself off underneath and sets its own margins.
   Inside a ledger head the 2px rule above is the entire device, so both are
   cancelled here, the way that file's own comment says any h2 variant must. */
.ledger-head h2{display:block; margin:0; padding:0; border-bottom:0;
  font-size:var(--t-small); font-weight:600; letter-spacing:.02em}
.ledger-head em{flex:none; font-style:normal; font-weight:400;
  color:var(--grey); font-size:var(--t-cap); text-align:right}
.ledger-head em.gone{color:var(--alert)}

.ledger-note{font-size:var(--t-cap); color:var(--grey); line-height:1.6;
  margin:calc(var(--u)*.75) 0 calc(var(--u)*2); max-width:74ch}
.ledger + .ledger-note{margin-top:calc(var(--u)*1.5)}
.ledger-head + .lede{margin-top:calc(var(--u)*1.5)}

/* ── the ledger row ──────────────────────────────────────────────────────── */

.ledger{border-top:1px solid var(--hair); margin:calc(var(--u)*1.5) 0 0}
.ledger-note + .ledger{margin-top:0}

.ledger-row{display:grid;
  grid-template-columns:64px 64px minmax(0,1fr) auto;
  grid-template-areas:"yr thumb billing tag"
                      "flag flag flag flag";
  gap:0 calc(var(--u)*2.25); align-items:center;
  padding:calc(var(--u)*1.6) 0; border-bottom:1px solid var(--hair)}

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

/* A NEW CROPPING SURFACE. object-fit:cover here means this box crops, so it
   belongs on the register site.css keeps above img.whole. img.whole's own
   `object-fit:contain !important` still wins inside it, which is what makes
   the crop safe: a sleeve whose terms refuse one letterboxes in the box
   rather than being squared off. */
.ledger-row .thumb{grid-area:thumb; width:64px; aspect-ratio:var(--ar-sq);
  position:relative; overflow:hidden;
  border:1px solid var(--hair); background:var(--sunk)}
.ledger-row .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.ledger-row .thumb .cap{position:absolute; inset:0; padding:4px;
  display:flex; align-items:flex-end;
  font-size:11px; line-height:1.25; color:var(--mute)}

.ledger-row .billing{grid-area:billing; 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.45}

/* Square, not a pill. site.css's .tag is a round chip carrying a fact in the
   .tags row at the top of a page; this is a value in a column, and it takes
   the shape of the column it sits in. */
.ledger-row .tag{grid-area:tag; justify-self:end; align-self:center;
  border-radius:0; background:var(--sunk); color:var(--grey);
  font-size:var(--t-cap); padding:5px 11px; white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* A missing field, said on the row it is missing from rather than counted up
   in a note somewhere else on the page. Quiet on purpose: an empty field is
   not a warning, and three hundred of them should not read as one. */
.ledger-row .tag.quiet{background:none; color:var(--mute);
  padding-left:0; padding-right:0}

/* ── a caveat that belongs to one row ────────────────────────────────────── */

/* --mount rather than a tinted accent: the row's own tag sits on --sunk, and
   a warm alert tint here would be a colour doing decoration rather than work.
   The red is spent once, on the label, where it names what is wrong. */
.ledger-row.flagged{background:var(--mount);
  padding-left:calc(var(--u)*2); padding-right:calc(var(--u)*2);
  margin-left:calc(var(--u)*-2); margin-right:calc(var(--u)*-2)}
.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-size:var(--t-cap); font-weight:600}
.ledger-row .flag-line p{margin:0; font-size:var(--t-cap); color:var(--grey);
  line-height:1.6; max-width:74ch}

/* ── two variants, because not every list has a picture ──────────────────── */

/* A person's credits and a theatre's productions: we hold no image per
   production in these views, so the row would open on an empty 64px box. */
.ledger.no-thumb .ledger-row{grid-template-columns:64px minmax(0,1fr) auto;
  grid-template-areas:"yr billing tag"
                      "flag flag flag"}

/* Sleeves. A record cover is the thing itself rather than an illustration of
   it, so it gets half again the width of an ordinary thumbnail. */
.ledger.sleeves .ledger-row{grid-template-columns:64px 96px minmax(0,1fr) auto}
.ledger.sleeves .ledger-row .thumb{width:96px}

/* ── the album's object ──────────────────────────────────────────────────── */

/* site.css's .object caps the sleeve at 420px next to a column carrying the
   title, the billing and the whole stats list. The title and billing moved up
   into .entity-band, so the sleeve is now the largest thing on the page and
   the column beside it holds one list. Same class, so the flip script's
   `.object .sleeve` and `.object .flip` selectors are untouched. */
.object.album-object{grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:calc(var(--u)*6); margin-bottom:var(--band)}

/* ── the people who keep turning up ──────────────────────────────────────── */

/* site.css's .tight-index runs three columns, which is right for a full-width
   index of collections and wrong inside the ~700px main column of a record
   page: "Marion Bell" plus "4 productions" ellipsis away to nothing. */
.tight-index.pairs{columns:2; margin-top:calc(var(--u)*2)}

/* ── how the broken grid collapses ───────────────────────────────────────── */

/* The band is the one place asymmetry could survive a phone and shouldn't:
   facts right-aligned under a left-aligned name reads as a mistake once they
   are stacked, so they square up left and the name takes the full measure. */
@media (max-width:900px){
  .entity-band{align-items:flex-start}
  .entity-band h1{max-width:none}
  .entity-facts{text-align:left; max-width:none}
}

@media (max-width:820px){
  .entity-lead{grid-template-columns:1fr; gap:calc(var(--u)*3)}
  /* The portrait leads on a phone: it is the fastest thing to read, and the
     biography under it is then one uninterrupted measure. */
  .entity-lead .entity-pic{max-width:320px}
  .object.album-object{grid-template-columns:1fr}
  .tight-index.pairs{columns:1}
}

/* One deliberate column. The year and the thumbnail stay side by side on the
   left, the billing and its tag stack in the remaining width, and a row's
   caveat still runs the full width underneath both. */
@media (max-width:720px){
  .ledger-row{grid-template-columns:52px 52px minmax(0,1fr);
    grid-template-areas:"yr thumb billing"
                        "yr thumb tag"
                        "flag flag flag";
    row-gap:calc(var(--u)*.5); align-items:start;
    gap:0 calc(var(--u)*1.75)}
  .ledger-row .thumb{width:52px}
  .ledger-row .tag{justify-self:start; align-self:start}
  .ledger.no-thumb .ledger-row{grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:"yr billing"
                        "yr tag"
                        "flag flag"}
  .ledger.sleeves .ledger-row{grid-template-columns:52px 64px minmax(0,1fr)}
  .ledger.sleeves .ledger-row .thumb{width:64px}
  .ledger-row.flagged{padding-left:var(--u); padding-right:var(--u);
    margin-left:calc(var(--u)*-1); margin-right:calc(var(--u)*-1)}
  .ledger-row .flag-line{flex-direction:column; gap:calc(var(--u)*.5)}
}