/* work-layout.css — the layout rules for a single piece's page.
 *
 * One idea, applied everywhere:
 *
 *   The hero sets the measure. Every row on the page is centred inside that
 *   measure and nothing is allowed to exceed it.
 *
 * A row is a flex line. Each child carries a --w, which is its share of the
 * row. There are two ways to use it, and they are the same mechanism:
 *
 *   1. MEDIA STRIP — set --w to the item's aspect ratio and let the frame
 *      use that same ratio. Widths then come out proportional to the shapes
 *      of the pictures, which means every item in the row is exactly the
 *      same height, automatically, whatever you put in it. Two images of
 *      different proportions sit side by side without being squeezed into
 *      a shared box, and the row reads as one band.
 *
 *   2. PROPORTIONAL — set --w to a plain number (2 and 1 for two-thirds /
 *      one-third). Use this when one side is text, which has no aspect
 *      ratio to work from.
 *
 * Row height, for a media strip, is (measure - gaps) / sum of the --w values.
 * So to make a row as tall as the hero, pick crops whose ratios add up to
 * about 2.27 — see the note on .wrow--band below.
 */

.work-page {
  /* The measure. The hero is exactly this wide; nothing else is wider.
     Kept free of percentages on purpose: --measure is resolved once, by the
     band, against the viewport. If a row re-resolved `100% - gutter*2` inside
     a band that was already that wide, every row would come out one gutter
     narrower than the hero. */
  --measure: 84rem;
  --hero-ar: 21 / 9;
  --row-gap: clamp(1rem, 0.4rem + 1.8vw, 2.75rem);
  /* Tighter than the site-wide --stack. A piece page reads as one continuous
     argument, not a run of separate sections, so the bands sit closer. */
  --band-gap: clamp(2.25rem, 1.25rem + 3.4vw, 5rem);
  /* Prose hugs the row it is talking about. */
  --band-gap-close: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);
  --prose-measure: 92ch;
}

/* ---- the band: one centred column, the width of the hero ---- */

.wband {
  /* --band-scale pulls a single band in from the measure, keeping it centred.
     Set it inline (style="--band-scale:0.8") on a band whose pictures should
     sit smaller than the hero. It only bites where the measure is the binding
     constraint, so on narrow screens — where the gutters already decide the
     width — a scaled band is full width like any other. */
  width: min(100% - var(--gutter) * 2, calc(var(--measure) * var(--band-scale, 1)));
  margin-inline: auto;
}

/* Vertical rhythm between bands. The hero counts as a band for spacing even
   though it is its own element. */
:is(.wband, .whero) + :is(.wband, .whero) { margin-top: var(--band-gap); }
/* A prose band and the row it belongs to sit closer than two rows do. */
.wband:has(> .wprose) + :is(.wband, .whero),
:is(.wband, .whero) + .wband:has(> .wprose) { margin-top: var(--band-gap-close); }
.wband--tight + .wband--tight { margin-top: clamp(1rem, 0.4rem + 1.8vw, 2.75rem); }

/* Clears the fixed header. This is padding, not margin: a margin on the first
   band collapses straight out through <main> and <body> and the title ends up
   underneath the header. */
.wband--first { padding-top: clamp(5.5rem, 4rem + 6vw, 8.5rem); }

/* ---- the hero: the thing that establishes the measure ---- */

.whero {
  width: min(100% - var(--gutter) * 2, var(--measure));
  margin-inline: auto;
  aspect-ratio: var(--hero-ar);
  background: var(--bg-raise);
  overflow: hidden;
}
.whero > img,
.whero > video,
.whero > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* ---- rows ---- */

.wrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Tops align, so the picture frames in a strip line up exactly even when
     one of them has a caption hanging below it. */
  align-items: flex-start;
  gap: var(--row-gap);
  width: 100%;   /* its band already is the measure */
}

/* Use when one side is text and should sit against the middle of the other. */
.wrow--mid { align-items: center; }

.wrow > * {
  flex: var(--w, 1) 1 0;
  min-width: 0;
  margin: 0;
}

/* A media strip whose row height lands on the hero's height.
 *
 * The maths: row height = (measure - gap) / sum(--w). The hero's height is
 * measure * 9/21. Setting those equal gives sum(--w) ~= 2.27 once the gap is
 * taken out. In practice anything from about 2.2 to 2.5 reads as "the same
 * height as the hero" — below 2 the row towers over it, above 3 it looks
 * like a thin strip. This class is a label for that intent, not a mechanism;
 * the ratios on the children are what actually do it.
 */
.wrow--band { }

/* ---- frames ---- */

.wframe {
  position: relative;
  width: 100%;
  aspect-ratio: var(--w, 1);
  background: var(--bg-raise);
  overflow: hidden;
}
.wframe > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Diagrams and anything that must not be cropped. */
.wframe--contain > img { object-fit: contain; }

/* A frame whose ratio is fixed by what is inside it (a video embed, the
 * ambisonic player) rather than by its --w share of the row. */
.wframe--own { aspect-ratio: auto; }

/* ---- prose ---- */

/* On its own in a row: a centred column, narrower than the measure, with the
 * text itself still ranged left — centred body copy is hard to read. */
.wprose {
  max-width: var(--prose-measure);
  margin-inline: auto;
  font-size: var(--step-0);
  line-height: 1.85;
}
.wprose > p { margin-block: 0 1.1em; }
.wprose > p:last-child { margin-bottom: 0; }

/* Beside something else in a row, it fills its share of the row. */
.wrow > .wprose { max-width: none; }

/* ---- the title block ----
 *
 * Ranged left on the measure. The credit line stays lower case: the type is
 * set small and tracked, which is what carries it, not capitals.
 */
.wtitle {
  padding-bottom: clamp(1.25rem, 0.6rem + 2vw, 2.25rem);
}
.wtitle__name {
  font-size: var(--step-2);
  margin: 0 0 0.5rem;
}
.wtitle__year { color: var(--text-dim); }
.wtitle__credit {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  line-height: 2;
}

/* ---- a picture that fills its band ----
 *
 * For a photograph shown at its own shape rather than cropped into a frame.
 * Pair with --band-scale on the band to pull it in from the measure.
 */
.wfull { margin: 0; }

/* A looping background video shown at its own shape, like a picture. It has
 * intrinsic dimensions, so it needs no frame to hold a ratio open. */
.wloop {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-raise);
}
.wfull > img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- a credit under something that is not a figure ----
 *
 * The hero is a bare element, so its caption cannot be a figcaption. This
 * gives the band the same gap a figcaption gets, instead of the band rhythm
 * pushing it a whole --band-gap away. Written as a sibling pair to match the
 * specificity of the rhythm rule above rather than reaching for !important.
 */
:is(.wband, .whero) + .wband--caption { margin-top: 0.75rem; }

/* ---- the back link that closes every piece page ---- */
.wband--end { padding-bottom: var(--stack); }
.wback {
  text-align: center;
  margin: 0;
}

/* ---- captions ---- */

.wcap {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.8;
}

/* ---- one column on small screens ---- */

@media (max-width: 56rem) {
  .wrow > * { flex-basis: 100%; }
  .wrow { gap: clamp(1.25rem, 0.8rem + 2vw, 2rem); }
  /* Let the pictures keep their own shapes once they are full width. */
  .wframe { aspect-ratio: auto; }
  .wframe > img { height: auto; }
  .work-page { --hero-ar: 3 / 2; }
}

/* ---- prose set beside a player or picture ----
 *
 * Tighter leading than a standalone block, so the column fits inside the
 * height of what it sits next to. See the note on the player row in
 * work/tendrenetic.html — the share, the player ratio and this value are a
 * set, and moving one means re-measuring the others.
 */
.wprose--aside { line-height: 1.6; }

/* A row whose two columns only work with real width to play with. It stacks
 * earlier than the rest of the page: below this, fitting the text beside the
 * player would mean shrinking it past readability. */
@media (max-width: 80rem) {
  .wrow--aside > * { flex-basis: 100%; }
  /* A portrait video at the full measure is a wall of video — 9:16 across
     1026px is 1824px tall. Cap it once the row stacks. 24rem is wider than
     the band on a phone, so there it simply runs full width as normal. */
  .wloop-fig {
    max-width: 24rem;
    margin-inline: auto;
  }
}

/* ---- embed frames ----
 *
 * Defined AFTER the small-screen block on purpose. That block sets
 * `.wframe { aspect-ratio: auto }` so photographs keep their own shape once
 * they are full width — but an embed's iframe is absolutely positioned, so
 * with no ratio the frame collapses to zero height and the video vanishes.
 * Same specificity, so source order decides; this has to come last.
 *
 * Defaults to 16:9. Set --embed-ar on the element when the video is some
 * other shape, so the frame matches it exactly and the player has no bars of
 * its own to add.
 */
.wframe--embed {
  position: relative;
  aspect-ratio: var(--embed-ar, 16 / 9);
  background: var(--bg-raise);
}
.wframe--embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}