/* Minimalist editorial: cream paper, black ink, a single red accent, black-and-white
   photographs, a tight grotesk. The home is a poster: the name (both lines from the left edge),
   the portrait it crosses, one paragraph, one spread line of navigation, one moving photograph.
   The refs (Cronenberg, Built From Noise, brutalism, APD...) work because they leave air.
   Individual director's notes keep the old site's look (src/wix/). */
:root {
  --paper: #e8e4db;
  --ink: #161412;
  --red: #b3241b;
  --rule: rgba(22, 20, 18, .3);
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;   /* the name, headlines, labels */
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;         /* running text: Inter's text cut, normal spacing */
  --gut: clamp(14px, 1.6vw, 26px);
  --small: clamp(10.5px, .78vw, 13px);
  --text: 400 clamp(13px, 1.02vw, 17px)/1.45 var(--body);
  --body-track: -.012em;   /* Inter set a little tighter than its default */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 500 var(--small)/1.32 var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: clip;
  font-variant-emoji: text;   /* arrows like ↗ stay type, never the blue emoji (iPhone) */
}
/* paper grain, fixed so it doesn't scroll with the page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.photo { filter: grayscale(1) contrast(1.06); background: #2a2725; }
.u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ---------- page transitions ----------
   Quiet: the old page fades out fast, the new one fades in just behind it and settles 10px up into
   place; the bar and the footer stay put, so only the page changes; from the home page the big
   name shrinks into the bar's name. Browsers without cross-document view transitions just change
   page; off for reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease-out both; }
::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.2, .7, .2, 1) .06s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.bar { view-transition-name: bar; }
.foot { view-transition-name: foot; }
.bar > a:first-child, .poster .name:not(.on-photo) { view-transition-name: tlr; }
::view-transition-group(tlr) { animation-duration: .42s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
::view-transition-group(bar), ::view-transition-group(foot) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- touch: everything clickable presses in (scale, so it composes with drifting
   and floating animations); hover states stay as each element has them ---------- */
a, button, .still, [tabindex] { -webkit-tap-highlight-color: transparent; }
a, button { transition: scale .12s ease, background-color .15s, color .15s; }
a:active, button:active { scale: .97; }
.spread a:active { background: var(--red); color: var(--paper); scale: .94; }
.rows > li > a:active { background: var(--red); color: var(--paper); scale: 1; }
.rows > li > a:active .n { color: var(--paper); }
.reels a:active, .gallery .still:active, .still:active { scale: .96; }
.bar a:active, .foot a:active, .share a:active, .share button:active { color: var(--red); }
.strip { transition: outline-color .15s, scale .12s; outline: 3px solid transparent; outline-offset: 4px; }
.strip:hover { outline-color: var(--red); }
.strip:active { scale: .985; }
.fests .f { transition: color .15s; }
.fests .f:hover .nm { color: var(--red); }
.video-lite { transition: scale .12s; } .video-lite:active { scale: .985; }
.video-lite .play { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.video-lite:hover .play { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  a:active, button:active, .reels a:active, .still:active, .strip:active { scale: 1; }
}

/* ---------- top bar on inner pages ---------- */
.bar {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px;
  padding: var(--gut) var(--gut) 0; text-transform: uppercase; font-weight: 600;
}
.bar nav { display: flex; gap: clamp(12px, 2.4vw, 40px); }
.bar a:hover, .bar a[aria-current] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.sq { display: inline-block; width: .85em; height: .85em; background: var(--red); vertical-align: -.05em; margin-right: .5em; }

/* ---------- the name, and photographs it crosses ---------- */
.name {
  grid-column: 1 / -1; grid-row: 1; z-index: 3; margin: 0; pointer-events: none;
  font: 800 var(--name, 12vw)/.8 var(--sans); letter-spacing: -.042em; text-transform: uppercase;
  padding-top: calc(var(--name) * .12);
}
.name span { display: block; width: max-content; white-space: nowrap; margin-left: -.05em; }
.name .l2 .w { display: inline; margin-left: 0; }   /* LEE RATCLIFF stays one line, except on phones */
@media (min-width: 761px) { .poster .name .l2 .w + .w { margin-left: .12em; } }   /* half a space more: LEE  RATCLIFF, two words */
.name.on-photo { color: var(--paper); position: absolute; inset: 0 auto auto 0; }
/* home: where the name crosses the portrait it inverts the photo (white over the dark hat,
   dark over the bright film strip) instead of sitting on it as flat paper colour */
.poster .name.on-photo { color: #fff; mix-blend-mode: difference; }
.poster .arena .name.on-photo { color: var(--ink); mix-blend-mode: normal; z-index: 1; }   /* name over the arena: ink on the picture */
/* a photograph sits above the black name and is pulled up under its second line; a
   paper-coloured copy of the name inside it (site.js) makes the letters go light over it */
.portrait { position: relative; z-index: 4; overflow: hidden; margin: 0; margin-top: calc(var(--name) * -.86); background: #2a2725; }   /* top edge just above line 2: whole letters cross it */
.portrait img, .portrait video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   HOME: the poster (fills the window on desktop)
   ========================================================================= */
.poster {
  position: relative; display: grid; min-height: 100vh;
  grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  grid-template-rows: auto auto auto minmax(200px, 1fr) auto;   /* the lasso takes what's left */
  padding: var(--gut);
}
.poster .portrait { grid-column: 9 / -1; grid-row: 2 / -1; margin-top: calc(var(--name) * -1.45); }   /* top edge up beside TRAVIS */
/* home only: a little air between the lines, and LEE RATCLIFF set in from the left */
.poster .name .l2 { margin-left: .9em; margin-top: .1em; }
/* variant (/?name=three): a staircase. TRAVIS top left with a small label after it; LEE steps in
   where TRAVIS ends, the paragraph in the pocket under TRAVIS; RATCLIFF runs to the right edge
   and into the photo, the four links stacked in the pocket to its left; the lasso underneath. */
.poster .name .t1, .poster .name .t2 { margin-left: -.05em; }
.poster .poster-label { display: none; }
@media (min-width: 761px) {
  .poster.three {
    grid-template-rows: calc(var(--name) * .9) calc(var(--name) * .82) calc(var(--name) * .86) minmax(150px, 1fr) auto;
  }
  .poster.three .name { grid-row: 1 / span 3; padding-top: calc(var(--name) * .1); }
  .poster.three .name .t2 { margin-left: 3.15em; margin-top: .02em; }
  .poster.three .name .t3 { margin-left: auto; margin-right: -.03em; margin-top: .06em; }
  .poster.three .portrait { grid-column: 10 / -1; grid-row: 1 / -1; margin-top: 0; }
  .poster.three .lede { grid-column: 1 / span 4; grid-row: 2; align-self: center; margin: 0; font-size: clamp(12.5px, .95vw, 16px); z-index: 6; }
  .poster.three .poster-label { display: block; grid-column: 1 / span 4; grid-row: 2; align-self: end; margin: 0 0 .4em; text-transform: uppercase; font-weight: 600; z-index: 6; }
  .poster.three .spread { grid-column: 1 / span 2; grid-row: 3; flex-direction: column; align-items: flex-start; justify-content: center; gap: .45em; padding: 0; z-index: 6; }
  .poster.three .strip { grid-column: 1 / span 9; grid-row: 4; margin-top: 1em; }
  .poster.three .caption { grid-column: 1 / span 9; grid-row: 5; }
}
@media (max-width: 760px) {
  .poster.three .name .t2 { margin-left: 1.5em; }
  .poster.three .name .t3 { margin-left: auto; }
}

/* variant (/?name=oneline): the whole name on one line across the top, the photo under it */
.poster.oneline .name .l2 { margin-left: -.05em; margin-top: 0; }
.poster.oneline .portrait { margin-top: calc(var(--name) * -.86); }
.poster .portrait img { object-position: 62% 32%; }
/* the one colour picture on the site: Dynasty and Destiny's arena, the Texas flag behind her, a
   loop. site.js lays it over the end of TRAVIS, the portrait's edge and the top of LEE RATCLIFF;
   hidden on phones, where the name stacks under the portrait */
.arena { position: absolute; z-index: 5; display: block; overflow: hidden; outline: 3px solid transparent; outline-offset: 4px; transition: outline-color .15s; background: #2a2725; }   /* over the portrait; the name, copied in, over it */
.arena video { width: 100%; height: 100%; object-fit: cover; display: block; }
.arena:hover { outline-color: var(--red); }
.poster.three .arena, .poster.oneline .arena { display: none; }
.arena[hidden], .tvroom[hidden] { display: none; }
.poster .lede { grid-column: 1 / span 5; grid-row: 2; margin: 1.8em 0 0; max-width: 34em; font: var(--text); letter-spacing: var(--body-track); }
.poster .lede a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.spread { grid-column: 1 / span 8; grid-row: 3; display: flex; justify-content: space-between; text-transform: uppercase; font-weight: 600; padding: 2.4em 0 .9em; }
/* each link plain text; on hover it's set on a black text block, like the AUSTIN, TEXAS band.
   The outer two are pulled out by their padding so the words line up with the edges below */
.spread a { display: inline-flex; gap: .5em; align-items: baseline; background: transparent; color: var(--ink); padding: .38em .55em .3em; }
.spread a:first-child { margin-left: -.55em; } .spread a:last-child { margin-right: -.55em; }
.spread a i { font-style: normal; transition: transform .2s; }
.spread a:hover { background: var(--ink); color: var(--paper); }
.spread a:hover i { transform: translateX(4px); }
.strip { grid-column: 1 / span 8; grid-row: 4; position: relative; overflow: hidden; display: block; background: #2a2725; }
.strip video, .strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }  /* rope loop to her face */
.caption { grid-column: 1 / span 8; grid-row: 5; display: flex; justify-content: space-between; gap: 1em; padding: .6em 0 0; }
.caption b { font-weight: 600; text-transform: uppercase; }

/* =========================================================================
   Index rows (/what, /blog)
   ========================================================================= */
.section { padding: 0 var(--gut); }
body.frame .section { display: grid; grid-template-rows: auto minmax(0, 1fr); }
body.frame .rows-wrap { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; border-bottom: 1px solid var(--rule); margin-bottom: var(--gut); }
body.frame .rows > li:last-child > a { border-bottom: 0; }
.section-head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: end;
  padding: .8em 0 clamp(14px, 2.4vh, 34px); margin-top: clamp(10px, 2vh, 40px);
}
.section-head h1 { grid-column: 1 / span 8; margin: 0; font: 800 clamp(44px, min(8vw, 15vh), 140px)/.8 var(--sans); letter-spacing: -.045em; text-transform: uppercase; margin-left: -.04em; }
.section-head p { grid-column: 9 / span 4; margin: 0; font: var(--text); letter-spacing: var(--body-track); }
.section-head p a { text-decoration: underline; text-underline-offset: 2px; }
.rows { list-style: none; margin: 0; padding: 0; position: relative; }
.rows > li > a {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: baseline;
  padding: .7em 0 .6em; border-top: 1px solid var(--rule); text-transform: uppercase; font-weight: 600;
}
.rows > li:last-child > a { border-bottom: 1px solid var(--rule); }
.rows .n { grid-column: 1 / span 1; color: var(--red); }
.rows > li > a:hover .n { color: var(--paper); }
.rows .t { grid-column: 2 / span 6; font: 600 clamp(18px, 1.9vw, 32px)/.98 var(--sans); letter-spacing: -.025em; }
.rows .y { grid-column: 8 / span 1; }
.rows .k { grid-column: 9 / span 3; }
.rows .go { grid-column: 12 / span 1; text-align: right; transition: transform .2s; }
.rows > li > a:hover { background: var(--ink); color: var(--paper); }
.rows > li > a:hover .go { transform: translateX(-6px); }
.preview {
  position: fixed; z-index: 20; width: clamp(220px, 24vw, 420px); aspect-ratio: 16 / 9; pointer-events: none;
  opacity: 0; transition: opacity .15s; left: 0; top: 0; will-change: transform;
}
.preview.on { opacity: 1; }
.preview img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   One-window pages (who, what, where, notes on desktop): the bar, the page, a one-line footer
   ========================================================================= */
body.frame { height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
body.frame > main, body.frame > section { min-height: 0; }

/* =========================================================================
   DIRECTOR'S NOTES index: one-line heading, the list, clouds of quotation
   ========================================================================= */
.notesp { grid-template-columns: repeat(12, 1fr) !important; column-gap: var(--gut); grid-template-rows: auto minmax(0, 1fr) !important; display: grid; }
.notes-h { grid-column: 1 / -1; margin: clamp(10px, 2vh, 40px) 0 clamp(14px, 2.6vh, 34px) -.04em; white-space: nowrap; font: 800 clamp(40px, min(9.4vw, 15vh), 180px)/.8 var(--sans); letter-spacing: -.045em; text-transform: uppercase; }
.notesp .rows-wrap { grid-column: 1 / span 7; grid-row: 2; }
.notesp .rows > li > a { grid-template-columns: 2.6em 1fr auto 1.4em; column-gap: 1em; }
.notesp .rows .n { grid-column: 1; } .notesp .rows .t { grid-column: 2; } .notesp .rows .k { grid-column: 3; text-align: right; } .notesp .rows .go { grid-column: 4; }
/* behind-the-scenes photos floating down the right column, overlapping, stacked by --z. The files
   are in colour (so search results show them in colour); the page shows them black and white, and
   in colour on hover */
.bts { grid-column: 8 / -1; grid-row: 2; position: relative; min-height: 0; margin: 0 0 var(--gut) 1.4em; container-type: size; }
.bts-photo {
  position: absolute; top: var(--y); left: var(--x); width: min(var(--w), 58cqh); aspect-ratio: 3 / 2;   /* never taller than ~39% of the column */
  object-fit: cover; display: block; z-index: var(--z, 1); outline: 4px solid var(--paper); background: #111;
  filter: grayscale(1) contrast(1.06); transition: filter .5s;
  animation: bob var(--t, 10s) ease-in-out var(--d, 0s) infinite alternate; --a: 5%;
}
.bts-photo:hover { filter: none; z-index: 10; }

/* =========================================================================
   WHAT: the list on the left, a collage of one- and two-shot loops on the right
   ========================================================================= */
.whatp { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: var(--gut); grid-template-rows: auto minmax(0, 1fr); }
.whatp .left { grid-column: 1 / span 5; grid-row: 2; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: 1.2em; }
.whatp .intro { margin: 0 0 1.4em; font: var(--text); letter-spacing: var(--body-track); max-width: 32em; }
.whatp .intro a { text-decoration: underline; text-underline-offset: 2px; }
.whatp .rows-wrap { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.whatp .rows > li > a { grid-template-columns: 2.6em 1fr auto; column-gap: 1em; }
.whatp .rows .n { grid-column: 1; } .whatp .rows .t { grid-column: 2; } .whatp .rows .go { grid-column: 3; }
.whatp .rows .k { grid-column: 2 / -1; margin-top: .3em; font-size: var(--small); }
.whatp .rows .t { font-size: clamp(15px, 1.3vw, 22px); }
.whatp .rows > li > a { padding: .55em 0 .5em; }
.whatp .rows > li > a.hot { background: var(--ink); color: var(--paper); }
.whatp .rows > li > a.hot .n { color: var(--paper); }
/* the loops float up and down and rise into the WHAT? row; WHAT? sits on top in white with a
   difference blend: black on the paper, an inverted picture wherever a loop passes beneath */
.reels { grid-column: 6 / -1; grid-row: 1 / -1; position: relative; min-height: 0; margin-left: 1.2em; }   /* the right column, top to bottom */
.whatp .name { position: relative; z-index: 50; color: #fef8ed; mix-blend-mode: difference; }   /* paper + ink: inverts to exactly ink on the paper */
.reels a {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: var(--z); outline: 4px solid var(--paper); background: #111; overflow: hidden; display: block;
  animation: bob var(--t, 9s) ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes bob { from { transform: translateY(calc(var(--a, 10%) * -1)); } to { transform: translateY(var(--a, 10%)); } }
.reels video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reels a.hot { z-index: 40; outline-color: var(--red); }
@media (hover: hover) { .reels a:hover { z-index: 40; outline-color: var(--red); } }   /* a mouse only: on a phone a tap would leave it stuck */
/* touch screens: the first touch on a loop names it in a black box, the second opens the film */
.reels .tag { display: none; position: absolute; left: 0; bottom: 0; max-width: 100%; background: var(--ink); color: var(--paper); padding: .35em .5em .28em; text-transform: uppercase; font-weight: 600; font-size: 12px; line-height: 1.15; }
.reels .tag i { font-style: normal; color: var(--red); }
.reels a.on { z-index: 45; outline-color: var(--red); }
.reels a.on .tag { display: block; }

/* =========================================================================
   WHO: the name crosses the baby-cowboy tape
   ========================================================================= */
.who { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: var(--gut); grid-template-rows: auto minmax(0, 1fr); }
/* the right column: the tape (pulled up under WHO?) and, under it, the festival cloud */
.who .right { grid-column: 7 / -1; grid-row: 2; margin-top: calc(var(--name) * -.86); display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 4; }
.who .right .portrait { margin-top: 0; width: 100%; aspect-ratio: 16 / 10; flex: none; }
.who .right .portrait video { object-position: 50% 42%; }
.fests {
  flex: 1; min-height: 0; list-style: none; margin: .9em 0 0; padding: 0; position: relative;
  display: flex; flex-wrap: wrap; align-content: space-evenly; justify-content: space-around; gap: .15em .7em; text-transform: uppercase;
  container-type: size;   /* the names are sized to this box, so the cloud always fits under the tape */
}
.fests .f { position: relative; animation: float var(--t, 8s) ease-in-out var(--d, 0s) infinite alternate; cursor: default; outline: none; line-height: .95; }
@keyframes float { to { transform: translate(var(--dx, 0), var(--dy, 5px)); } }
.fests .t1 { font: 800 calc(min(5.2cqw, 9.5cqh) * var(--k, 1))/.95 var(--sans); letter-spacing: -.035em; }
.fests .t2 { font: 700 calc(min(2.75cqw, 5cqh) * var(--k, 1))/1 var(--sans); letter-spacing: -.01em; }
.fests .t3 { font: 600 max(9px, calc(min(1.95cqw, 3.6cqh) * var(--k, 1)))/1 var(--sans); letter-spacing: .03em; opacity: .85; }
.fests .outline .nm { color: var(--paper); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.fests .red .nm { color: var(--red); }
.fests .tip {
  position: absolute; z-index: 20; left: 50%; bottom: 100%; transform: translate(-50%, -6px); width: max-content; max-width: 22em;
  background: var(--ink); color: var(--paper); font: 600 11px/1.35 var(--sans); letter-spacing: .02em; padding: .45em .6em; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.fests .f:hover, .fests .f:focus-visible { z-index: 30; animation-play-state: paused; }
.fests .f:hover .tip, .fests .f:focus-visible .tip { opacity: 1; }
.who .text { grid-column: 1 / span 6; grid-row: 2; min-height: 0; overflow: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4em; padding-top: 1.6em; scrollbar-width: thin; }
.who .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); font: 400 clamp(12.5px, .95vw, 16px)/1.48 var(--body); letter-spacing: var(--body-track); }
.who .cols p { margin: 0 0 1em; }
.who .cols a { text-decoration: underline; text-underline-offset: 2px; }
/* the all-caps links (films, MOVEMENT HOUSE, the two series): underlined; on hover they go onto a
   black strip like the AUSTIN, TEXAS band. The padding is always there (offset by a negative
   margin) so the line doesn't shift when the strip appears */
.who .cols a.hl { padding: .08em .22em .04em; margin: 0 -.22em; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .12s, color .12s; }
.who .cols a.hl:hover { background: var(--ink); color: var(--paper); text-decoration-color: transparent; }
.who .facts { list-style: none; margin: 0; padding: 0; text-transform: uppercase; font-weight: 600; }
.who .facts li { display: flex; justify-content: space-between; gap: 1em; border-top: 1px solid var(--rule); padding: .5em 0 .4em; }
.who .facts li:last-child { border-bottom: 1px solid var(--rule); }

/* =========================================================================
   WHERE: Austin's traffic cameras, live, in black and white, as a wall of monitors
   ========================================================================= */
.where { display: grid; padding: var(--gut); grid-template-rows: minmax(0, 1fr) auto; }
/* the collage: monitors laid over the city's name, stacked and outlined (after the ROSTRO spread
   in the zine ref). Flat and square: overlap does the work, nothing tilts. Each monitor is placed
   by --x/--y/--w/--h (% of the stage) and stacked by --z; phones use --mx/--my/--mw/--mh. */
.stage { position: relative; min-height: 0; overflow: hidden; container-type: size; }
/* behind the monitors: clouds of live text (Austin traffic incident reports, TxDOT highway sign
   messages and incidents), small, drifting slowly; new reports type in red, then go to ink */
.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); max-height: var(--h); overflow: hidden; margin: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent);
  font: 600 clamp(9.5px, .72vw, 12px)/1.28 var(--sans); letter-spacing: .02em; text-transform: uppercase; text-align: justify;
  animation: drift var(--t, 60s) ease-in-out var(--d, 0s) infinite alternate;
}
.cloud p { margin: 0 0 .55em; transition: color 4s; }
.cloud p.new { color: var(--red); transition: none; }
.cloud p b { font-weight: 800; }
@keyframes drift { to { transform: translate(var(--dx, 2%), var(--dy, 3%)); } }
/* AUSTIN, TEXAS on a black band, centred across, 8% above the middle, over the monitors */
.stage .on-top {
  position: absolute; z-index: 30; left: 50%; top: 42%; transform: translate(-50%, -50%); margin: 0;
  font: 800 min(13.4cqw, 22.5cqh)/.8 var(--sans);   /* the width cap only bites on narrow screens */ letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap;
}
.stage .on-top > span { display: block; position: relative; background: var(--ink); color: var(--paper); padding: .07em .1em .03em .06em; }
/* a white × appears when you hover the band; clicking it takes AUSTIN, TEXAS away */
.stage .on-top button {
  position: absolute; top: 0; right: 0; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; padding: 0;
  border: 0; background: none; color: #fff; font: 400 1.2rem/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.stage .on-top:hover button, .stage .on-top button:focus-visible { opacity: 1; }
.stage.band-gone .on-top { display: none; }
/* on arrival the band asks WHERE?, flickers like a sign, and answers AUSTIN, TEXAS */
.stage .on-top i { font-style: normal; }
.stage .on-top .ask { display: none; }
.stage .on-top.asking .ask { display: inline; }
.stage .on-top.asking .answer { display: none; }
.stage .on-top.off > span { visibility: hidden; }
.stage .on-top .mbr { display: none; }      /* phones break it after the comma */
.stage .cam { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: var(--z, 2); outline: 4px solid var(--paper); }
.stage .vert {
  position: absolute; z-index: 20; right: 0; bottom: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  text-transform: uppercase; font-weight: 600; letter-spacing: .04em; background: var(--paper); padding: .6em .2em;
  white-space: nowrap; font-size: min(13px, 1.42cqh);   /* one line, nearly the wall's full height */
}
.cam { position: relative; margin: 0; overflow: hidden; background: #111; min-height: 0; }
.cam img {
  position: absolute; left: 0; top: 0; width: 100%; height: 108%; object-fit: cover; object-position: 50% 0;  /* the cameras' burned-in timestamp sits under the bottom edge */
  filter: grayscale(1) contrast(1.45) brightness(.92); visibility: hidden;
}
.cam img.on { visibility: visible; }
.cam .grain {
  position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .55; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain .5s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-7%, 4%); } 33% { transform: translate(5%, -6%); }
  50% { transform: translate(-3%, 8%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-6%, -4%); } 100% { transform: translate(0, 0); }
}
.cam::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,.35)); }
/* desktop: a click cuts a monitor to another camera; after the × the wall is a desk (site.js) */
@media (min-width: 761px) and (pointer: fine) { .wall .cam { cursor: pointer; } }
.stage.play .cam { cursor: grab; touch-action: none; user-select: none; transition: outline-color .15s; }
.stage.play .cam.held { cursor: grabbing; outline-color: var(--red); }
.stage.play .cam img { pointer-events: none; }
.cam .grip { display: none; }
.stage.play .cam .grip { display: block; position: absolute; right: 0; bottom: 0; z-index: 5; width: 18px; height: 18px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--paper) 50%); }
.stage.play .cam:hover .grip, .stage.play .cam.held .grip { background: linear-gradient(135deg, transparent 50%, var(--red) 50%); }
.stage.play .clouds { display: none; }
/* the flowing text: one run of live reports, set around the monitors line by line */
.flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; font: 600 clamp(9.5px, .72vw, 12px)/1 var(--sans); letter-spacing: .02em; color: var(--ink); }
.flow span { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.1; will-change: transform; }   /* one word each, placed by transform */
.flow .b { font-weight: 800; }
.flow .sep, .flow .new { color: var(--red); }
.where .info { grid-row: 2; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .6em 2em; padding-top: .8em; text-transform: uppercase; font-weight: 600; }
.where .info .mail { font: 700 clamp(18px, 1.8vw, 32px)/1 var(--sans); letter-spacing: -.035em; }
.where .info .links { display: flex; gap: 1.8em; flex-wrap: wrap; }
.where .info a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   A director's note
   ========================================================================= */
.note { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: var(--gut); }
.note .kicker { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; text-transform: uppercase; font-weight: 600; margin: clamp(10px, 2vh, 30px) 0 1.2em; }
.note .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the title crosses the cover: paper+ink white with a difference blend is ink on the paper and
   an inverted picture over the photograph */
.note h1 {
  grid-column: 1 / span 10; grid-row: 2; position: relative; z-index: 5; margin: 0 0 0 -.04em;
  font: 800 clamp(40px, 6.4vw, 124px)/.86 var(--sans); letter-spacing: -.045em; text-transform: uppercase;
  color: #fef8ed; mix-blend-mode: difference; overflow-wrap: anywhere;
}
.note.no-cover h1 { grid-column: 1 / -1; color: var(--ink); mix-blend-mode: normal; }
.note .cover { grid-column: 8 / -1; grid-row: 2 / span 2; margin: .3em 0 0; align-self: start; }
.note .cover img { width: 100%; height: auto; display: block; }
.note .meta {
  grid-column: 1 / span 2; grid-row: 4; align-self: start; position: sticky; top: var(--gut); margin-top: 3.2em;
  text-transform: uppercase; font-weight: 600;
}
.note .meta p { margin: 0 0 .45em; }
.note .meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.note .body {
  grid-column: 3 / span 6; grid-row: 4; margin-top: 3em;
  font: 400 clamp(16px, 1.12vw, 19px)/1.62 var(--body); letter-spacing: var(--body-track); color: #1f1c19;
}
.note .body p { margin: 0 0 1.05em; }
.note .body p.empty { margin: 0; height: .5em; }
.note .body p.center { text-align: center; } .note .body p.right { text-align: right; }
.note .body h1, .note .body h2, .note .body h3 { font: 700 1.35em/1.05 var(--sans); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin: 1.8em 0 .55em; }
.note .body h3 { font-size: 1.12em; }
.note .body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.note .body a:hover { color: var(--red); }
.note .body em { font-style: italic; } .note .body strong { font-weight: 700; }
.note .body hr { border: 0; border-top: 1.5px solid var(--ink); margin: 2.2em 0; }
.note .body figure { margin: 2em 0; }
.note .body figure.size-full { margin-left: calc(-1 * (100% / 6 + var(--gut))); margin-right: calc(-2 * (100% / 6 + var(--gut))); }
.note .body figure img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.06); }
.note .body figcaption { font: 600 var(--small)/1.35 var(--sans); text-transform: uppercase; margin-top: .6em; color: var(--ink); }
.note .body .raw-html { margin: 1em 0; }
.video-lite { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden; }
.video-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter .5s; }
.video-lite:hover img { filter: none; }   /* the still is in colour underneath, like the set photos */
.video-lite .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.video-lite .play svg { width: 100%; height: 100%; }
.video-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.note .end { grid-column: 3 / -1; grid-row: 5; margin-top: 3.5em; }
.note .share { display: flex; gap: 1.6em; flex-wrap: wrap; text-transform: uppercase; font-weight: 600; border-top: 1.5px solid var(--ink); padding-top: .7em; }
.note .share a, .note .share button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.note .share a:hover, .note .share button:hover { text-decoration: underline; text-underline-offset: 3px; }
.note .share .copied { display: none; color: var(--red); } .note .share .copied.on { display: inline; }
.note .next { display: block; margin-top: 2.6em; }
.note .next span { display: block; text-transform: uppercase; font-weight: 600; color: var(--red); margin-bottom: .5em; }
.note .next b { display: block; font: 800 clamp(28px, 4.2vw, 76px)/.86 var(--sans); letter-spacing: -.045em; text-transform: uppercase; }
.note .next:hover b { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .08em; }

/* =========================================================================
   Note types (screening, gallery, episode, interview, essay; log uses .note above)
   ========================================================================= */
.nt { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: var(--gut); }
.nt .kicker { grid-column: 1 / -1; display: flex; justify-content: space-between; text-transform: uppercase; font-weight: 600; margin: clamp(10px, 2vh, 30px) 0 1.2em; }
.nt .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nt h1 { margin: 0 0 0 -.04em; font: 800 clamp(40px, 6.4vw, 124px)/.86 var(--sans); letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; }
.nt .dateline { text-transform: uppercase; font-weight: 600; margin: .9em 0 0; }
.nt .hero { margin: 0; }
.nt .hero .video-lite { aspect-ratio: 16 / 9; }
.nt .text p, .nt .notes p, .nt .body p, .nt .columns p { margin: 0 0 1em; }
.nt p.empty { margin: 0; height: .5em; }
.nt a.u, .nt .text a, .nt .notes a, .nt .body a, .nt .columns a, .nt .standfirst a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nt .end { grid-column: 3 / -1; margin-top: 3.5em; }
.nt .share { display: flex; gap: 1.6em; flex-wrap: wrap; text-transform: uppercase; font-weight: 600; border-top: 1.5px solid var(--ink); padding-top: .7em; }
.nt .share a, .nt .share button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; text-decoration: none; }
.nt .share .copied { display: none; color: var(--red); } .nt .share .copied.on { display: inline; }
.nt .next { display: block; margin-top: 2.6em; text-decoration: none; }
.nt .next span { display: block; text-transform: uppercase; font-weight: 600; color: var(--red); margin-bottom: .5em; }
.nt .next b { display: block; font: 800 clamp(28px, 4.2vw, 76px)/.86 var(--sans); letter-spacing: -.045em; text-transform: uppercase; }

/* screening: the film large, title and credits beside it (one window) */
.screening { grid-template-rows: auto minmax(0, 1fr); align-items: start; }
.screening .screen { grid-column: 1 / span 8; grid-row: 2; }
.screening .card { grid-column: 9 / -1; grid-row: 2; display: grid; gap: .9em; align-content: start; }
.screening .card h1 { font-size: clamp(36px, 4.4vw, 84px); }
.screening .credits, .screening .laurels { margin: 0; text-transform: uppercase; font-weight: 600; }
.screening .laurels { color: var(--red); }
.screening .card .text { font: var(--text); letter-spacing: var(--body-track); }
.screening .card p { margin: 0; }
.screening .mh, .screening .next-s { text-transform: uppercase; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.screening .next-s { margin-top: 1.4em; }

/* gallery: a floating cloud of stills, the title on a black band, click to enlarge (one window) */
.gallery { grid-template-rows: auto minmax(0, 1fr) auto; }
.gallery .stills { grid-column: 1 / -1; position: relative; min-height: 0; container-type: size; }
.gallery .still {
  position: absolute; left: var(--x); top: var(--y); width: min(var(--w), calc(var(--hn) * 1cqh * var(--ar))); aspect-ratio: var(--ar); z-index: var(--z); padding: 0; border: 0; cursor: zoom-in;   /* each still at its own shape, sized to fit its slot */
  outline: 4px solid var(--paper); background: #111; overflow: hidden; animation: bob var(--t, 9s) ease-in-out var(--d, 0s) infinite alternate; --a: 6%;
}
.gallery .still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .still:hover { z-index: 40; outline-color: var(--red); }
.gallery .band { position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: max-content; max-width: 96%; text-align: center; font-size: min(7cqw, 12cqh); }
.gallery .band span { background: var(--ink); color: var(--paper); padding: .07em .12em .03em; box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.04; }
.gallery .gallery-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2em; padding-top: .8em; text-transform: uppercase; font-weight: 600; }
.gallery .gallery-foot .text p { margin: 0; }
.gallery .gallery-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(22, 20, 18, .94); display: grid; place-items: center; padding: 4vmin; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; filter: grayscale(1) contrast(1.06); }
.lightbox button { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font: 400 32px/1 var(--sans); cursor: pointer; }

/* episode: a video essay with program notes beside it */
.episode h1 { grid-column: 1 / -1; }
.episode .screen { grid-column: 1 / span 8; margin-top: 1.4em; align-self: start; position: sticky; top: var(--gut); }
.episode .notes { grid-column: 9 / -1; margin-top: 1.4em; font: 400 clamp(14.5px, 1vw, 17px)/1.55 var(--body); letter-spacing: var(--body-track); }
.episode .notes .label { text-transform: uppercase; font-weight: 600; font-size: var(--small); color: var(--red); margin: 0; }
.episode .notes .dateline { font-size: var(--small); margin: .3em 0 1.4em; }

/* interview: numbered questions, answers set in */
.interview h1 { grid-column: 1 / span 10; }
.interview .dateline { grid-column: 1 / -1; }
.interview .screen { grid-column: 1 / -1; margin-top: 1.6em; }
.interview .body { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); margin-top: 2.4em; font: 400 clamp(16px, 1.12vw, 19px)/1.62 var(--body); letter-spacing: var(--body-track); }
.interview .body > * { grid-column: 5 / span 6; }
.interview .body > p:first-child { grid-column: 1 / span 8; font-size: 1.25em; line-height: 1.4; margin-bottom: 2em; }
.interview .q { grid-column: 1 / span 10 !important; display: grid; grid-template-columns: subgrid; margin: 2em 0 .8em; font: 700 clamp(22px, 2.2vw, 40px)/1 var(--sans); letter-spacing: -.03em; text-transform: uppercase; }
.interview .q b { grid-column: 1 / span 1; color: var(--red); font-weight: 600; font-size: .6em; padding-top: .2em; }
.interview .q span { grid-column: 2 / -1; }

/* essay: standfirst, a strip of image, two columns */
.essay h1 { grid-column: 1 / span 11; }
.essay .dateline { grid-column: 1 / -1; }
.essay .standfirst { grid-column: 1 / span 9; margin-top: 2em; font: 500 clamp(20px, 2vw, 34px)/1.25 var(--sans); letter-spacing: -.01em; }
.essay .standfirst p { margin: 0; }
.essay .about { grid-column: 1 / -1; margin: 1.1em 0 0; text-transform: uppercase; font-weight: 600; }
.essay .about span { background: var(--ink); color: var(--paper); padding: .14em .35em .08em; margin-right: .3em; }
.essay .lead-img { grid-column: 1 / span 7; margin: 2.4em 0 0; }   /* the still at its own shape */
.essay .lead-img img { width: 100%; height: auto; display: block; }
.essay .lead-img figcaption { margin-top: .6em; text-transform: uppercase; font-weight: 600; font-size: var(--small); }
.essay .columns { grid-column: 3 / -1; margin-top: 2.4em; columns: 2; column-gap: calc(var(--gut) * 2); column-rule: 1px solid var(--rule); font: 400 clamp(15.5px, 1.05vw, 18px)/1.6 var(--body); letter-spacing: var(--body-track); }
.essay .columns h2, .essay .columns h3 { column-span: all; font: 700 1.3em/1.05 var(--sans); text-transform: uppercase; margin: 1.4em 0 .6em; }
.essay .columns figure { break-inside: avoid; margin: 0 0 1em; }
.essay .columns img { width: 100%; height: auto; filter: grayscale(1); }

/* log: the film full width under the title, stills set out into the right margin */
.note.log .film { grid-column: 1 / -1; grid-row: 3; margin-top: 2em; }
.note.log .film .hero { margin: 0; }
.note.log .meta, .note.log .body { grid-row: 4; }
.note.log .end { grid-row: 5; }
.note.log .body figure:not(.size-full):has(img) { float: right; clear: right; width: 58%; margin: .3em calc(-1 * (66% + var(--gut))) 1em 1em; }
.note.log.no-cover .film { margin-top: 1.4em; }

/* ---------- the pieces a note can be made of (::credits, ::list, ::pull, ::photos) ---------- */
/* end credits: role on the left in small caps, set flush right to the centre line; names on the right */
.credits-list { margin: 2.6em 0; border-top: 1.5px solid var(--ink); padding-top: .9em; }
.credits-list h2 { margin: 0 0 1em !important; font: 600 var(--small)/1.2 var(--sans) !important; letter-spacing: .02em !important; text-transform: uppercase; color: var(--red) !important; }
.credits-list dl { margin: 0; display: grid; row-gap: .5em; }
.credits-list dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 1.1em; align-items: baseline; }
.credits-list dt { text-align: right; text-transform: uppercase; font-weight: 600; font-size: .74em; letter-spacing: .03em; line-height: 1.35; }
.credits-list dd { margin: 0; font-weight: 500; line-height: 1.35; }
.credits-list dl > p { margin: .5em 0 .2em !important; text-align: center; text-transform: uppercase; font-weight: 600; font-size: .74em; letter-spacing: .03em; }
.credits-list.flow dl { display: block; }
.credits-list.flow dl > div { display: block; }
.credits-list.flow dt { text-align: left; margin-bottom: .3em; }
.credits-list.flow dd { font-size: .92em; line-height: 1.5; }
/* a run of film titles, in italics, divided by slashes */
.ref-list { margin: 2.2em 0; border-top: 1px solid var(--rule); padding-top: .8em; }
.ref-list h2 { margin: 0 0 .7em !important; font: 600 var(--small)/1.2 var(--sans) !important; letter-spacing: .02em !important; text-transform: uppercase; color: var(--red) !important; }
.ref-list ul { margin: 0; padding: 0; list-style: none; line-height: 1.5; }
.ref-list li { display: inline; font-style: italic; }
.ref-list.plain li { font-style: normal; }
.ref-list li + li::before { content: " / "; font-style: normal; color: var(--red); }
/* a pull quote, large, out into the margin on wide pages */
.pull { margin: 2.2em 0 2.4em; padding: 0; }
.pull p { margin: 0 !important; font: 600 clamp(22px, 2.1vw, 38px)/1.14 var(--sans); letter-spacing: -.02em; text-indent: -.42em; }
.pull cite { display: block; margin-top: .8em; font-style: normal; text-transform: uppercase; font-weight: 600; font-size: var(--small); }
.pull cite::before { content: "— "; color: var(--red); }
/* a row of photos at their own shapes, all one height, nothing cropped */
.photo-row { display: flex; gap: 6px; margin: 2em 0 .4em; align-items: flex-start; }
.photo-row figure { margin: 0 !important; min-width: 0; }
.photo-row img { width: 100%; height: auto; display: block; }
.photo-cap { text-transform: uppercase; font-weight: 600; font-size: var(--small) !important; margin: .2em 0 2em !important; }
.note .body .photo-row { margin-left: calc(-1 * (100% / 6 + var(--gut))); margin-right: calc(-2 * (100% / 6 + var(--gut))); }
/* small marks a paragraph can carry: {.lede} the intro, {.stamp} the date of the notes, {.sign} the sign-off */
.note .body p.lede, .nt p.lede { font-size: 1.22em; line-height: 1.38; font-weight: 500; letter-spacing: -.005em; margin-bottom: 1.6em; }
.note .body p.stamp, .nt p.stamp { text-transform: uppercase; font-weight: 600; font-size: var(--small); color: var(--red); margin-bottom: 1.4em; }
.note .body p.sign, .nt p.sign { text-transform: uppercase; font-weight: 600; text-align: right; margin-top: 1.6em; }

/* ---------- footer (inner pages): one line ---------- */
.foot {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5em 1.6em;
  margin: 0 var(--gut); padding: .65em 0 var(--gut); border-top: 1.5px solid var(--ink); text-transform: uppercase; font-weight: 600;
}
.foot .social { display: flex; gap: 1.6em; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Phones
   ========================================================================= */
@media (max-width: 760px), (max-height: 600px) {
  body.frame { height: auto; display: block; overflow: visible; }
  body.frame .rows-wrap { overflow: visible; border-bottom: 0; }
  /* except Director's notes: one screen on phones too, the list scrolling inside its panel */
  body.frame.notes-index { height: 100vh; height: var(--app-h, 100svh); display: grid; overflow: hidden auto; }   /* --app-h: the measured visible height (site.js) */
  body.frame.notes-index .rows-wrap { overflow-y: auto; border-bottom: 1px solid var(--rule); margin-bottom: .8em; }
  .who .text { overflow: visible; }
}
@media (max-width: 760px) {
  :root { --small: 11px; --text: 400 15px/1.48 var(--body); }
  .poster { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto auto auto auto auto; min-height: 0; }
  /* phones: a tall poster. The portrait takes the right two-thirds; TRAVIS / LEE / RATCLIFF is
     stacked at the left, mostly ink on the paper, each line's tail crossing the photo (the
     desktop's logic: a big black name whose end runs into the picture) */
  .poster .portrait { grid-column: 3 / -1; grid-row: 1; aspect-ratio: 3 / 4.6; margin-top: 0; }
  .poster .name:not(.on-photo) { grid-row: 1; margin-top: 0; align-self: center; }
  /* phones: the home is the TV room, edge to edge, one screen, nothing below. On the pink above
     the stack, centred: the name on black, then Who / What / Where. A still of the room (tv/room.jpg) sits
     behind the frame so something shows at once on a slow connection */
  .poster.tv { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--gut) * .4); position: relative; height: 100vh; height: var(--app-h, 100dvh); min-height: 0; padding: var(--gut); overflow: hidden; background: #b52a52; }
  /* behind the page too, so the space a phone's toolbar leaves when it slides away is pink, never paper */
  html:has(.poster.tv), html:has(.poster.tv) body { background: #b52a52; }
  html:has(.poster.tv) body::before { display: none; }
  .poster.tv .portrait, .poster.tv .arena, .poster.tv .strip, .poster.tv .caption, .poster.tv .lede, .poster.tv .poster-label { display: none; }
  .poster.tv .tvroom { position: absolute; inset: 0; z-index: 0; background: url("/tv/room.jpg") center bottom / cover; }
  .poster.tv .tvroom iframe { display: block; width: 100%; height: 100%; border: 0; }
  /* the title card: the name on black, Who / What / Where on a thinner black bar attached under
     it, one object resting above the stack (placed and sized by titleCard() in site.js), with a
     soft shadow falling down and right like the TVs' own */
  .poster.tv .name:not(.on-photo), .poster.tv .spread { position: absolute; z-index: 2; margin: 0; box-shadow: .35em .55em 1.1em -.25em rgba(48, 6, 18, .42); }
  .poster.tv .name:not(.on-photo) { pointer-events: none; white-space: nowrap; background: var(--ink); color: var(--paper); padding: .12em .2em .12em; }   /* the capitals sit centred in the box */
  .poster.tv .name > span { display: inline-block; margin: 0; }
  .poster.tv .name .l2 { margin-left: .22em; margin-top: 0; }
  .poster.tv .name .l2 .w { display: inline; margin: 0; }
  .poster.tv .name .l2 .w + .w { margin-left: .12em; }
  .poster.tv .spread { display: flex; justify-content: space-between; padding: .5em .75em .55em; background: var(--ink); border-top: 1px solid rgba(232, 228, 219, .22); font-size: 12px; letter-spacing: .04em; }
  .poster.tv .spread a { background: none; color: var(--paper); margin: 0; padding: 0; }
  .poster.tv .spread a:active { color: var(--red); background: none; }
  /* phones: TRAVIS / LEE / RATCLIFF, three lines stacked flush left */
  .poster .name .l2 { margin-left: 0; }
  .poster .name .l2 .w { display: block; width: max-content; margin-left: -.05em; margin-top: .1em; }
  .arena { display: none; }
  .poster .lede { grid-column: 1 / -1; grid-row: 3; margin-top: 1.2em; }
  .spread { grid-column: 1 / -1; grid-row: 4; padding: 1.6em 0 .9em; }
  .strip { grid-column: 1 / -1; grid-row: 5; aspect-ratio: 2.6; }
  .caption { grid-column: 1 / -1; grid-row: 6; flex-direction: column; gap: .2em; }
  .section-head { grid-template-columns: 1fr; } .section-head h1, .section-head p { grid-column: 1; } .section-head p { margin-top: 1em; }
  .rows > li > a { grid-template-columns: 2.4em 1fr auto; }
  .rows .n { grid-column: 1; } .rows .t { grid-column: 2; } .rows .y { grid-column: 3; text-align: right; }
  .rows .k { grid-column: 2 / -1; margin-top: .4em; } .rows .go { display: none; }
  .preview { display: none; }
  .note { grid-template-columns: 1fr; }
  .note h1, .note .cover, .note .meta, .note .body, .note .end { grid-column: 1; }
  .note .cover { grid-row: 3; margin-top: -.6em; }
  .note .meta { grid-row: 4; position: static; display: flex; flex-wrap: wrap; gap: .3em 1.2em; margin-top: 1.6em; }
  .note .body { grid-row: 5; margin-top: 1.4em; }
  .note .end { grid-row: 6; }
  .note .body figure.size-full, .note .body .photo-row { margin-left: 0; margin-right: 0; }
  .photo-row { flex-wrap: wrap; } .photo-row figure { flex-basis: 100% !important; }
  .nt { grid-template-columns: 1fr; }
  .nt > *, .interview .body > *, .interview .q { grid-column: 1 / -1 !important; }
  .screening .screen, .screening .card { grid-row: auto; }
  .episode .screen { position: static; }
  .interview .body { display: block; } .interview .q { display: block; } .interview .q b { margin-right: .4em; }
  .essay .columns { columns: 1; }
  .gallery .stills { aspect-ratio: 3 / 4.4; }
  .gallery .still { left: var(--mx); top: var(--my); width: min(var(--mw), calc(var(--mhn) * 1cqh * var(--ar))); }
  .gallery .band { font-size: 8.5cqw; }
  .gallery .gallery-foot { flex-direction: column; gap: .6em; }
  .note.log .film, .note.log .meta, .note.log .body, .note.log .end { grid-row: auto; }
  .note.log .body figure:not(.size-full):has(img) { float: none; width: auto; margin: 1.6em 0; }
  .notesp { grid-template-columns: 1fr !important; }
  .notes-h { white-space: normal; font-size: clamp(40px, 15vw, 90px); }
  .notesp .rows-wrap, .bts { grid-column: 1; }
  .bts { display: none; }   /* phones: just the list */
  .whatp { grid-template-columns: 1fr; }
  .whatp .left { grid-column: 1; grid-row: 3; }
  .whatp .rows-wrap { display: none; }   /* phones: the cloud is the list; touch a loop for its name */
  .reels { grid-column: 1; grid-row: 2; aspect-ratio: 3 / 4; margin: -2.4em 0 1.2em; }
  .whatp .rows-wrap { overflow: visible; }
  .who { grid-template-columns: repeat(6, 1fr); }
  .who .right { grid-column: 1 / -1; grid-row: 2; margin-top: calc(var(--name) * -.5); }
  .fests, .who .facts { display: none; }   /* phones: the film, the bio, nothing else */
  .fests .t1 { font-size: 24px; } .fests .t2 { font-size: 14px; } .fests .t3 { font-size: 10px; }
  .who .text { grid-column: 1 / -1; grid-row: 3; }
  .who .cols { grid-template-columns: 1fr; gap: 0; }
  .stage { aspect-ratio: 3 / 4.6; }
  .stage .cam { left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); outline-width: 3px; }
  .stage .on-top { font-size: min(22cqw, 15cqh); }
  .stage .on-top .mbr { display: inline; }
  .stage .on-top .sp { display: none; }
  .stage .vert { display: none; }   /* phones: no vertical caption */
  .cloud { left: var(--mx); top: var(--my); width: var(--mw); max-height: var(--mh); font-size: 9px; }
  .cloud.desk { display: none; }
  .where .info { flex-direction: column; padding-top: 1em; }
  .bar { grid-template-columns: 1fr; } .bar nav { justify-content: space-between; margin-top: .6em; }
}
/* phones held upright: Who, What and Where are one screen each, like the home and Director's
   notes. The picture takes what height is left: --app-h, the visible height measured by site.js
   (browsers disagree on 100svh: Chrome on iPhone counts the space under its bottom toolbar); the
   bottom keeps clear of the iPhone's home bar too,
   Who's bio shrinks to fit (site.js), and the footer folds to two short lines */
@media (max-width: 760px) and (min-height: 450px) {
  body.frame:has(> .who, > .whatp, > .where .stage) { height: 100vh; height: var(--app-h, 100svh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden auto; }   /* if it ever runs over, it scrolls rather than hiding the footer */
  body.frame:has(> .who, > .whatp) .foot { padding-top: .5em; gap: .2em 1.2em; font-size: 10px; }
  body.frame:has(> .who, > .whatp) .foot > span:last-child { display: none; }
  .whatp { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; padding-bottom: .4em; }
  .whatp .reels { aspect-ratio: auto; min-height: 0; margin: -2.4em 0 .6em; }
  .whatp .left { padding-top: 0; }
  .whatp .intro { margin: 0; }
  .who { grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; padding-bottom: .4em; }
  .who .right .portrait { aspect-ratio: auto; height: clamp(110px, 24dvh, 230px); }
  .who .text { overflow: hidden auto; padding-top: .9em; min-height: 0; }
  .who .cols p { margin-bottom: .7em; }
  .where { min-height: 0; padding-bottom: .6em; }
  .where .stage { aspect-ratio: auto; min-height: 0; }
  .where .info { padding-top: .6em; gap: .3em; }
  .where .info .mail { font-size: 18px; }
}
/* iPhones without a home button: the footer and Where's links stay above the home bar */
@media (max-width: 760px) {
  .foot { padding-bottom: calc(var(--gut) + env(safe-area-inset-bottom)); }
  .where { padding-bottom: calc(.6em + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .cam .grain, .cloud, .reels a, .fests .f, .bts-photo { animation: none; } }