/* /shows/period only, loaded from shows_period.html rather than from
   base.html. Its own file for the reason share.css is its own file: several
   agents were editing site.css at once on 28 August 2026, and a stylesheet
   merge conflict is a site that renders wrong rather than one that fails
   loudly.

   Every token here is declared in site.css. No new colour, no new type step,
   no new spacing value. Nothing below overrides a shared selector; every rule
   is qualified by a class this page alone carries.

   The page was a masthead, a three-column list of decade links, and then
   thirteen identical tables. Two things were wrong with that. Nothing told
   you which decade you were reading once you were inside a band, and a band
   runs to four figures of rows. And the whole page sat at one size, so the
   shape of the catalogue over time, which is the only reason this page exists
   next to the alphabetical /shows, was invisible.

   Composition is drawn from visual-language-ui-specimen.html:
     .home-hero          the 7fr/5fr masthead split
     .swatches           the ruled index band, without the tint
     .ledger-row         the reading order of a row, year first
     .ranks h2           the section label, 15px/600/.02em over a 2px ink rule
                         (already live in site.css as h2.rule, reused here) */

/* ── the masthead ──────────────────────────────────────────────────────────
   .huge stays the one display-face element on the page. The standfirst sits
   in the right column, set to the foot of it, so the two blocks share a
   baseline rather than stacking. */
.period-mast{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:0 calc(var(--u)*6); align-items:end}
.period-mast .front-sub{margin:0 0 calc(var(--u)*.5)}

/* ── the decade index ──────────────────────────────────────────────────────
   Thirteen cells is a table of contents, not a set of feature cards, so it
   carries no fill, no border box and no shadow: a 2px ink rule over the band
   and a hairline under each cell, which is the same furniture every ruled
   list on this site already uses.

   Each cell says the decade and how many shows are in it. The unit is
   attached to the number, which is voice.md's most-broken rule and the reason
   the old `.tight-index` version of this index read "The 1930s   184". */
.period-jump{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  column-gap:calc(var(--u)*3);
  border-top:2px solid var(--ink); margin:0 0 var(--band)}
.period-jump a{display:block; text-decoration:none;
  padding:calc(var(--u)*1.5) 0 calc(var(--u)*1.75);
  border-bottom:1px solid var(--hair)}
.period-jump b{display:block; font-size:var(--d4); font-weight:700;
  line-height:1; letter-spacing:-.015em; color:var(--link);
  font-variant-numeric:tabular-nums;
  transition:color var(--beat) var(--ease)}
.period-jump span{display:block; margin-top:5px; font-size:var(--t-cap);
  color:var(--grey); font-variant-numeric:tabular-nums}
.period-jump a:hover b{color:var(--ink)}

/* ── a band ────────────────────────────────────────────────────────────────
   The heading sticks. It keeps h2.rule's 2px ink rule above it, which reads
   as a line pinned to the top of the viewport while the band is in view, and
   it takes NO hairline underneath: site.css's own h2 comment records that an
   ink rule above plus a hairline below is the doubled rule that made the
   front page read as noise. --paper behind it and real padding under it are
   what stop rows showing through.

   No transition and no scroll behaviour, so there is nothing here for
   prefers-reduced-motion to switch off. */
.period-band{margin:0 0 var(--band)}
.period-band > h2{position:sticky; top:0; z-index:2;
  background:var(--paper); margin:0;
  padding:var(--u) 0 calc(var(--u)*1.5)}
.period-band > .note{margin-top:0}
.period-band .more{margin-top:calc(var(--u)*2)}

/* ── a row ─────────────────────────────────────────────────────────────────
   Year, title, type. The year leads because the band is chronological within
   itself and that is the column the eye runs down; .browse's default puts it
   on the right, where it reads as an annotation rather than as the spine.

   `td.kind` deliberately is not `.rt`. site.css hides `.browse td.rt:last-
   child` below 821px, which took the type of show off every phone. Here it
   survives at every width and moves under the title below 560. */
.period-rows{margin-top:calc(var(--u)*1.5)}
.period-rows td.yr{width:64px; color:var(--mute);
  font-variant-numeric:tabular-nums}
.period-rows td.kind{width:1%; text-align:right; white-space:nowrap;
  color:var(--grey); font-size:var(--t-cap)}

@media (max-width:820px){
  .period-mast{grid-template-columns:1fr}
  .period-mast .front-sub{margin:calc(var(--u)*2) 0 0}
}

/* The broken grid collapses to one deliberate column, and the row collapses
   with it: the year holds the left rail across both lines, the title takes
   the first line, the type sits under it. Nothing is hidden at any width. */
@media (max-width:560px){
  .period-rows tr{display:grid; grid-template-columns:46px minmax(0,1fr);
    gap:0 var(--u); padding:calc(var(--u)*1.25) 0;
    border-bottom:1px solid var(--hair)}
  .period-rows td{display:block; border-bottom:0; padding:0}
  .period-rows td.yr{width:auto; grid-row:1 / span 2; line-height:1.45}
  .period-rows td.kind{width:auto; text-align:left; margin-top:2px}
  .period-jump{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
    column-gap:calc(var(--u)*2)}
}