/* ─────────────────────────────────────────────────────────────
   LIBRARY v2 — cues and moving image, no photography.
   A single editorial column: masthead, 01 Cues, 02 Moving image.
   Loads AFTER styles.css. Nothing here touches the live page.
   ───────────────────────────────────────────────────────────── */

/* the two-panel design locked the page; v2 is a scrolling document */
html, body {
  overflow-y: auto !important;
  height: auto !important;
}

/* ── Type ────────────────────────────────────────────────────
   ABC Diatype (Dinamo) — the face the Cargo reference actually sets its
   copy in: "Diatype Variable", weight axis 200–1000, used at 500. Taken
   from Cargo's own CDN and self-hosted in fonts/.
   Licence note for later: Cargo's stylesheet states the files are
   authorised for use on Cargo only. Fine while this page is private or
   served from Cargo; a Dinamo web licence is needed to ship it elsewhere.
   styles.css routes everything through three variables, so redefining them
   here re-faces the whole page at once. v2.css is loaded by index.html, which is the live library page. */
@font-face {
  font-family: "Diatype Variable";
  src: url("fonts/DiatypeVariable.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --face: "Diatype Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: var(--face);
  --sans: var(--face);
  --serif: var(--face);
}
/* a few rules in styles.css name Arial directly rather than a variable */
main.lib2, main.lib2 *, #pw-gate, #pw-gate * {
  font-family: var(--face);
  font-weight: 500;   /* the weight the reference sets its copy at */
}

/* Diatype is proportional, so the number and length columns no longer align
   by accident — its tabular figures put them back on a grid. */
.lib2 .track-idx,
.lib2 .track-dur,
.vt-dur { font-variant-numeric: tabular-nums; }

/* ── Masthead: the mark, centred, alone ──────────────────────
   Native 717×252. Height alone sets the size; width stays auto so the
   drawing keeps its own proportions and cannot be stretched. */
.lib2-mast {
  text-align: center;
  /* kept tight: every pixel here pushes the first row of films below the fold */
  padding: clamp(14px, 1.5vw, 20px) 0 clamp(12px, 1.4vw, 17px);
}
/* the mark is the contact: clicking it opens a mail to the studio address */
.lib2-logo-link {
  display: inline-block;
  line-height: 0;
  border: 0;
  opacity: 1;
  transition: opacity 180ms ease;
}
.lib2-logo-link:hover,
.lib2-logo-link:focus-visible { opacity: 0.58; }

.lib2-logo {
  display: inline-block;
  width: auto;
  height: clamp(38px, 3.4vw, 48px);
  max-width: 100%;
}

/* undo the two-panel viewport layout from styles.css */
main.lib2 {
  display: block;
  height: auto;
  min-height: calc(100vh - 56px);
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
  padding: 0 0 88px;
}

/* ── Section headers ────────────────────────────────────────── */
.lib2-sec { padding: 0 0 clamp(30px, 4vw, 52px); }
.lib2-sec:first-of-type { padding-top: 0; }

/* the page runs on one two-column module: cues sit above the left film
   column, the about slot above the right. Column gap matches .reel-grid
   so the two blocks line up exactly. */
.lib2-top {
  padding-top: 0;   /* the masthead above supplies the top space */
  padding-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* The photo is never cropped: it prints whole, and its own proportions set
   the height of the band. The cue box then stretches to match it, so the two
   always share a top and a bottom edge — and because that height comes from
   the photo and not from the list, switching tabs can't resize it.
   Columns and gap are identical to .reel-grid below, so the dissolving photo
   is exactly the width of a film thumbnail and the player is exactly the
   width of the one beside it. */
.lib2-cues { min-width: 0; }

.lib2-about {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.lib2-about-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 18, 16, 0.32);
}

.lib2-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 0 9px;
}
.lib2-sec .lib2-head { padding-top: clamp(18px, 2vw, 26px); }
.lib2-head:has(.reel-filters) { padding-top: 16px; }

.lib2-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent, #c2410c);
}

.lib2-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: auto;
}

/* nav + filters sit on the same baseline as the label */
.lib2-cues .lib-nav { margin: 0 0 14px; gap: clamp(18px, 2.2vw, 30px); }
.lib2-head .lib-nav { margin: 0 0 0 auto; gap: 24px; }
.lib2-cues .lib-nav-item,
.lib2-head .lib-nav-item { padding: 0 0 3px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Cues ───────────────────────────────────────────────────── */
.lib2 #track-list {
  border-top: 0;   /* no rule above the first cue */
  /* fixed block: switching All / Strings / Electronic must not resize the
     page or shift the films below. Longer lists scroll inside it. */
  height: clamp(300px, 43vh, 440px);   /* fallback; v2.js fits it to the largest view */
  overflow-y: auto;
  flex: none;
  scrollbar-width: thin;
}
.lib2 #track-list::-webkit-scrollbar { width: 6px; }
.lib2 #track-list::-webkit-scrollbar-thumb {
  background: rgba(17, 18, 16, 0.22);
}
.lib2 #track-list::-webkit-scrollbar-track { background: transparent; }

/* a cue row is three things: number, name, length. Nothing else. */
.lib2 .track-row {
  grid-template-columns: 34px minmax(0, 1fr) 74px;
  gap: 16px;
  padding: 13px 0 14px;
}
.lib2 .track-name { font-size: 15px; }
.lib2 .track-fav,
.lib2 .track-tag { display: none; }

/* ── Moving image ───────────────────────────────────────────── */
.reel-filters { display: flex; gap: 24px; margin-right: auto; }

.reel-f {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 3px;
  border-bottom: 1.5px solid transparent;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.reel-f:hover { color: var(--ink); }
.reel-f.is-on { color: var(--ink); border-bottom-color: var(--ink); }

.reel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
  border-top: 1px solid var(--ink);
  padding-top: 14px;
}

/* both tabs run two across, so every row is full and the grid lines up
   with the cues / about block above */

.vt {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.vt[hidden] { display: none; }

/* the frame carries the film's own 16:9 — the shape it expands to */
.vt-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #141414;
}

/* Films sit in their own colour; hovering drains it. The studio frames above
   stay black-and-white — they're B&W scans, and the contrast between a colour
   grid and a monochrome band is the point. */
.vt-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: filter 300ms ease, transform 460ms cubic-bezier(.2,.7,.2,1);
}
.vt:hover .vt-frame img,
.vt:focus-visible .vt-frame img { filter: grayscale(1) contrast(1.02); transform: scale(1.025); }

/* a vertical film shows whole rather than being cropped to a wide slice */
.vt.is-upright .vt-frame img { object-fit: contain; background: #141414; }
.vt.is-upright:hover .vt-frame img { transform: none; }

.vt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  padding-left: 2px;
  color: #fff;
  background: rgba(0, 0, 0, 0.26);
  transition: background 200ms ease;
}
.vt:hover .vt-play { background: rgba(0, 0, 0, 0.5); }

.vt-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.vt-name {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vt-dur {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* Playing spans both columns; pausing returns the film to its own cell.
   `is-playing` means the embed exists, `is-expanded` means it is running —
   the two are separate so a paused film can shrink without being torn down. */
.vt.is-expanded { grid-column: 1 / -1; }
.vt.is-playing .vt-play,
.vt.is-playing .vt-frame img { display: none; }
.vt.is-playing .vt-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  main.lib2 { width: calc(100% - 32px); }
  .reel-grid, .reel-grid[data-cat="commercial"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib2-cues .lib-nav { gap: 16px; }
  .lib2-cues .lib-nav-item { font-size: 12px; }
  .lib2-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lib2-head { flex-wrap: wrap; gap: 10px 14px; }
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib2 .track-row { grid-template-columns: 26px minmax(0, 1fr) 62px; }
}
@media (max-width: 620px) {
  .reel-grid, .reel-grid[data-cat="commercial"] { grid-template-columns: minmax(0, 1fr); }
}


/* ─────────────────────────────────────────────────────────────
   Boxed cues left, studio photo right. No transport bar.
   ───────────────────────────────────────────────────────────── */
/* the box and the photo are one band: both run the full height of the row,
   which the photo's own proportions set. The box therefore stays exactly the
   same size on every tab — switching All / Strings / Electronic / Piano can
   never resize it or shift the films below. */
/* `height: 0` keeps the cue column out of the row-height calculation, so the
   photo alone decides how tall the band is; `min-height: 100%` then stretches
   the column back to exactly that. Without it a long list (All, 8 rows) grows
   the row and the box stops matching the photo beside it. */
.lib2-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;
}

/* the drawn box: cues live inside it, with their own nav */
.cue-box {
  border: 1px solid var(--line);
  /* softened corners — the one curve on a page of hard hairlines */
  border-radius: 8px;
  padding: 14px 16px 6px;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cue-box .lib-nav {
  margin: 0 0 10px;
  gap: clamp(14px, 1.6vw, 22px);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
/* Courier is already wide-set; the reference adds no tracking and no caps */
.cue-box .lib-nav-item { font-size: 14px; letter-spacing: 0; text-transform: none; padding: 0 0 2px; }

/* One studio frame per cue category, swapped on the tab. The first image
   stays in flow so the figure keeps that picture's own height — nothing is
   ever cropped — and the other two are laid over it. All three are the same
   3:2 scan, so the band never changes height when the picture changes. */
.lib2-photo {
  margin: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--soft, #8d8886);
}
.lib2-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
}
.lib2-photo img + img {
  position: absolute;
  inset: 0;
  height: 100%;
}
/* a straight cut, not a dissolve — the picture changes with the tab */
.lib2-photo img { opacity: 0; }
.lib2-photo img.is-on { opacity: 1; }

/* No transport bar: every cue carries its own play/pause. The markup stays
   because player.js reads it directly, but it is never shown. */
.now-playing { display: none !important; }

.lib2 .track-idx { position: relative; }
.lib2 .track-row:hover .track-num,
.lib2 .track-row.is-playing .track-num,
.lib2 .track-row.is-active .track-num { visibility: hidden; }
.lib2 .track-idx .track-cue { display: none; }
.lib2 .track-row:hover .track-idx .track-cue,
.lib2 .track-row.is-playing .track-idx .track-cue,
.lib2 .track-row.is-active .track-idx .track-cue {
  display: inline-flex;
  position: absolute;
  inset: 0;
  align-items: center;
  color: var(--ink);
}
.lib2 .track-idx .track-cue svg { width: 11px; height: 11px; fill: currentColor; }

/* the box sets its own rhythm — tighter than the full-width list was */
.cue-box .track-row { padding: 10px 0 11px; grid-template-columns: 26px minmax(0, 1fr) 54px; gap: 12px; }
.cue-box .track-name { font-size: 14px; letter-spacing: 0; }
.lib2 .track-idx, .lib2 .track-dur { font-size: 13px; letter-spacing: 0; }
/* film captions read as the same typed line as a cue row */
.vt-name { font-size: 13px; letter-spacing: 0; }
.vt-dur { font-size: 13px; }
.cue-box #track-list { height: auto; min-height: 0; flex: 1 1 auto; overflow-y: auto; }

@media (max-width: 900px) {
  /* stacked: each block finds its own height again */
  .lib2-top > .lib2-left,
  .lib2-top > .lib2-photo { height: auto; }
  .lib2-photo img { height: auto; min-height: 220px; }
}

/* Music-first private portfolio refresh. */
:root { --soft: #f1eee8; --surface-rgb: 241,238,232; --ink: #24241f; --muted: #67665e; --line: rgba(36,36,31,.19); }
body { padding-bottom: 0; }
main.lib2 { width: min(calc(100% - 80px), 1120px); padding-bottom: 30px; }
.lib2-mast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; text-align: left; padding: 32px 0 38px; }
.lib2-logo { height: 46px; }
.mast-caption h1 { margin: 0 0 5px; font-size: 16px; }
.mast-caption p { margin: 0; color: var(--muted); font-size: 14px; }
.contact-link { font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 5px; }
.lib2 h2 { font-size: 20px; letter-spacing: -.025em; margin: 0; }
.lib2-top { display: block; padding-bottom: 40px; }
.music-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.music-intro p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.start-listening { border: 1px solid var(--ink); background: var(--ink); color: var(--soft); border-radius: 4px; padding: 12px 17px; cursor: pointer; white-space: nowrap; font-size: 14px; }
.lib2-left { height: auto; min-height: 0; }
.cue-box { border-radius: 5px; padding: 18px 20px 8px; background: rgba(255,255,255,.24); }
.cue-box .lib-nav { gap: 26px; }
.cue-box .lib-nav-item { padding: 5px 0 8px; font-size: 15px; }
.cue-box #track-list { max-height: 330px; }
.lib2 .cue-box .track-row { grid-template-columns: 28px minmax(0,1fr) 54px; padding: 14px 0; min-height: 49px; cursor: pointer; }
.cue-box .track-name { font-size: 15px; white-space: normal; line-height: 1.4; }
.lib2 .track-idx .track-num { display: none; }
.lib2 .track-idx .track-cue { display: inline-flex; position: absolute; inset: 0; align-items: center; color: var(--ink); }
.lib2 .track-row:hover, .lib2 .track-row.is-playing { background: rgba(36,36,31,.045); }
.lib2 :is(button,a,[role="button"]):focus-visible { outline: 2px solid #75684d; outline-offset: 5px; }
.lib2-sec { padding-bottom: 40px; }
.lib2-sec .lib2-head { padding-top: 20px; padding-bottom: 12px; }
.reel-f { font-size: 15px; padding: 5px 0 7px; }
.vt-meta { width: 100%; padding: 4px 0 12px; }
.vt-copy { min-width: 0; }
.vt-name { display: block; white-space: normal; font-size: 15px; line-height: 1.4; }
.vt-role { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.vt-dur { font-size: 13px; }
.studio-note { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 32px 0 40px; border-top: 1px solid var(--line); }
.studio-copy p { font-size: 17px; line-height: 1.6; max-width: 30em; margin: 16px 0 24px; color: var(--muted); }
.lib2-photo img { min-height: 0; }
.lib2-footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; color: var(--muted); font-size: 13px; }
.lib2-footer a { color: var(--ink); text-decoration: none; }
@media(max-width: 700px) {
 main.lib2 { width: calc(100% - 36px); }
 .lib2-mast { grid-template-columns: 1fr auto; gap: 18px; padding: 24px 0 30px; }
 .lib2-logo { height: 42px; }
 .mast-caption { grid-column: 1 / -1; grid-row: 2; }
 .lib2-mast > .contact-link { grid-column: 2; grid-row: 1; }
 .music-intro { align-items: flex-start; flex-direction: column; gap: 16px; }
 .cue-box { padding-inline: 14px; }
 .lib2 .cue-box .track-row { gap: 8px; grid-template-columns: 22px minmax(0,1fr) 42px; }
 .studio-note { grid-template-columns: 1fr; gap: 24px; }
 .lib2-footer { flex-direction: column; gap: 12px; }
}

.start-listening:disabled { opacity: .4; cursor: default; }

/* Quieter presentation: let the music and images carry the page. */
.lib2-mast { position: relative; display: flex; justify-content: center; padding: 24px 0 28px; }
.lib2-mast > .contact-link { position: absolute; right: 0; font-size: 13px; border: 0; padding: 0; color: var(--muted); }
.lib2-top { padding-bottom: 24px; }
.cue-box { background: transparent; border: 0; border-radius: 0; padding: 0; }
.cue-box .lib-nav { margin-bottom: 0; }
.lib2-sec .lib2-head { padding-top: 0; }
.vt-name { font-size: 13px; }
.vt-meta { padding-bottom: 8px; }
.studio-note { display: block; border-top: 0; padding: 0 0 32px; }
.studio-note .lib2-photo { width: min(100%, 540px); margin: 0 auto; }
.lib2-footer { font-size: 12px; }
@media(max-width: 700px) { .lib2-mast { padding: 24px 0 28px; } }

/* Tighter screen-work spacing. */
.reel-grid { gap: 14px 14px; padding-top: 8px; }
.vt { gap: 4px; }
.vt-meta { padding: 2px 0 5px; }
.lib2-sec .lib2-head { padding-bottom: 6px; }
.lib2-sec { padding-bottom: 24px; }

/* Restore the original relationship between listening and the studio. */
.lib2-top { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; padding-bottom: 20px; }
.lib2-left { height: 0; min-height: 100%; }
.cue-box { border: 1px solid var(--line); border-radius: 5px; padding: 14px 16px 6px; }
.cue-box #track-list { max-height: none; }
.lib2 .cue-box .track-row { padding: 10px 0 11px; min-height: 42px; }
.cue-box .track-name { font-size: 14px; }
.lib2-top .lib2-photo { align-self: start; }
@media(max-width: 900px) {
 .lib2-top { grid-template-columns: minmax(0,1fr); gap: 22px; }
 .lib2-top > .lib2-left { height: auto; min-height: 0; }
 .cue-box #track-list { max-height: 330px; }
}

/* Video thumbnails reveal their colour on hover or keyboard focus. */
.vt-frame img { filter: grayscale(1); }
.vt:hover .vt-frame img,
.vt:focus-visible .vt-frame img { filter: none; }

/* Keep the video spacing without divider rules. */
.reel-grid { border-top-color: transparent; }
.vt-meta { border-bottom-color: transparent; }

/* Courier typography, matching the jaar.site reference. */
:root { --face: Courier, "Courier New", monospace; }
main.lib2, main.lib2 *, #pw-gate, #pw-gate * { font-weight: 400; }
.cue-box .lib-nav-item, .cue-box .track-name,
.lib2 .track-idx, .lib2 .track-dur,
.reel-f, .vt-name, .vt-dur,
.lib2-mast > .contact-link, .lib2-footer { font-size: 14px; letter-spacing: 0; }

/* A quieter, unboxed listening list with room above the signature. */
.lib2-mast { padding-top: 54px; padding-bottom: 38px; }
.cue-box { border: 0; border-radius: 0; padding: 0; }
.cue-box .lib-nav { border-bottom: 0; margin-bottom: 12px; gap: 25px; }
.cue-box .lib-nav-item { color: var(--muted); }
.cue-box .lib-nav-item.active { color: var(--ink); }
.lib2 .cue-box .track-row { border-bottom: 1px solid rgba(36,36,31,.09); padding: 13px 0; gap: 12px; }
.lib2 .cue-box .track-row:last-child { border-bottom: 0; }
.lib2 .track-idx .track-cue svg { width: 14px; height: 14px; }
.lib2 .track-row.is-active .track-name { font-weight: 400; }
.lib2 .track-row.is-active .track-idx { color: var(--ink); }
.lib2 .track-row:hover, .lib2 .track-row.is-playing { background: transparent; }
.lib2 .track-row:hover .track-name { text-decoration: underline; text-underline-offset: 4px; }
.cue-box > .now-scrubber { display: none; }
.cue-box:has(.track-row.is-active) > .now-scrubber { display: flex; align-items: center; gap: 12px; width: 100%; height: 30px; margin-top: 10px; grid-area: auto; }
.cue-box .now-scrubber .seek { appearance: none; flex: 1; width: auto; min-width: 0; height: 24px; background: transparent; cursor: pointer; }
.cue-box .now-scrubber .seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,var(--ink) var(--progress,0%),var(--line) var(--progress,0%)); }
.cue-box .now-scrubber .seek::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; border-radius: 50%; margin-top: -3px; background: var(--ink); border: 0; }
.cue-box .now-scrubber .seek::-moz-range-track { height: 2px; background: var(--line); }
.cue-box .now-scrubber .seek::-moz-range-progress { background: var(--ink); height: 2px; }
.cue-box .now-scrubber .seek::-moz-range-thumb { width: 8px; height: 8px; background: var(--ink); border: 0; }
.cue-box .now-scrubber span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vt:hover .vt-frame img, .vt:focus-visible .vt-frame img { transform: none; }
@media(max-width:700px) { .lib2-mast { padding-top: 42px; padding-bottom: 32px; } }

/* More compact overall rhythm, with a little air above the signature. */
main.lib2 { width: min(calc(100% - 40px), 1200px); padding-bottom: 20px; }
.lib2-mast { padding-top: 42px; padding-bottom: 26px; }
.lib2-top { gap: 14px; padding-bottom: 14px; }
.cue-box .lib-nav { margin-bottom: 6px; }
.lib2 .cue-box .track-row { padding: 9px 0; min-height: 38px; }
.lib2-sec { padding-bottom: 18px; }
.lib2-footer { padding-top: 16px; }
@media (max-width:700px) {
 main.lib2 { width: calc(100% - 28px); }
 .lib2-mast { padding-top: 33px; padding-bottom: 24px; }
 .lib2-top { gap: 14px; }
}

/* God Party: trial a large editorial hover credit. */
.vt-overlay-trial .vt-meta { display: none; }
.vt-overlay-trial { gap: 0; }
main.lib2 .vt-hover-credit {
 position: absolute; inset: 0; z-index: 2;
 display: flex; align-items: flex-end;
 padding: 16px; background: linear-gradient(transparent 30%, rgba(0,0,0,.65));
 color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 400;
 font-size: clamp(28px, 4.5vw, 58px); line-height: 1.02; letter-spacing: -.035em;
 text-align: left; opacity: 0; transition: opacity 180ms ease; pointer-events: none;
}
.vt-overlay-trial:hover .vt-hover-credit,
.vt-overlay-trial:focus-visible .vt-hover-credit { opacity: 1; }
.vt-overlay-trial:hover .vt-play,
.vt-overlay-trial:focus-visible .vt-play { opacity: 0; }
.vt-overlay-trial.is-playing .vt-hover-credit { display: none; }
@media (prefers-reduced-motion: reduce) { main.lib2 .vt-hover-credit { transition: none; } }

/* A small amount of extra breathing room. */
.lib2-mast { padding-bottom: 33px; }
.lib2-top { padding-bottom: 20px; }
.reel-grid { row-gap: 18px; }
@media(max-width:700px) { .lib2-mast { padding-bottom: 31px; } }

/* Work captions live inside each image, revealed on hover or focus. */
.vt-overlay { gap: 0; }
main.lib2 .vt-overlay-copy {
 position: absolute; inset: 0; z-index: 2; padding: 18px;
 display: flex; flex-direction: column; justify-content: space-between;
 /* title top right, director bottom right */
 align-items: flex-end; text-align: right;
 background: linear-gradient(rgba(0,0,0,.55), transparent 45%, rgba(0,0,0,.6));
 color: white; opacity: 0; pointer-events: none; transition: opacity 180ms ease;
}
main.lib2 .vt-overlay-copy span { font-family: "Diatype Variable", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
/* both stepped down 20% from 40/30 */
main.lib2 .vt-overlay-title { font-size: clamp(19px,2.4vw,32px); }
main.lib2 .vt-overlay-director { font-size: clamp(15px,1.9vw,24px); margin-top: auto; }
.vt-overlay:hover .vt-overlay-copy, .vt-overlay:focus-visible .vt-overlay-copy { opacity: 1; }
.vt-overlay:hover .vt-play, .vt-overlay:focus-visible .vt-play { opacity: 0; }
.vt-overlay.is-playing .vt-overlay-copy { display: none; }
@media(hover:none) { .vt-overlay .vt-overlay-copy { opacity: 1; } }
@media(prefers-reduced-motion:reduce) { main.lib2 .vt-overlay-copy { transition: none; } }


/* The studio frame carries the availability note, revealed on hover the same
   way the work tiles reveal their credit — same scrim, same fade, so the two
   halves of the page behave alike. Links stay clickable once it is up, and on
   a touch screen (no hover) it simply stays visible. */
main.lib2 .photo-note {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* centred in the frame, both axes */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
  background: rgba(17, 18, 16, 0.72);
  color: #fff;
  /* the face the work-tile credits use, not the page's mono.
     Scoped through main.lib2 so it outranks the blanket `main.lib2 *` rule. */
  font-family: "Diatype Variable", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 0.92vw, 13.5px);
  line-height: 1.55;
  letter-spacing: -0.004em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
/* a measure, so the centred copy doesn't run the full width of the frame */
/* the copy lives in spans, and `main.lib2 *` matches them directly —
   inheritance from .photo-note loses to that, so the face is named for every
   descendant, not just the outer one (a nested span would fall back to mono) */
main.lib2 .photo-note span,
main.lib2 .photo-note a {
  font-family: "Diatype Variable", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
main.lib2 .photo-note > span { display: block; max-width: 34em; }

/* sign-off, sitting a line below the note */
main.lib2 .photo-sign { display: block; margin-top: 1.5em; }
.lib2-photo:hover .photo-note,
.lib2-photo:focus-within .photo-note { opacity: 1; pointer-events: auto; }

main.lib2 .photo-note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main.lib2 .photo-note a:hover { text-decoration-thickness: 2px; }

@media (hover: none) {
  .photo-note { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-note { transition: none; }
}

/* Cream falling away to black in the bottom-right, the way the reference
   puts a single light in one corner — the field stays flat paper for most of
   the page and only the far corner goes dark. Longhand rather than the
   `background` shorthand so it doesn't wipe the colour styles.css set.
   Static and one hue; the earlier three-colour animated wash was distracting. */
body {
  background-color: var(--soft);
  background-image: radial-gradient(118% 92% at 100% 100%,
    rgba(14, 14, 13, 0.94) 0%,
    rgba(14, 14, 13, 0.62) 24%,
    rgba(14, 14, 13, 0.26) 45%,
    rgba(14, 14, 13, 0.07) 60%,
    rgba(14, 14, 13, 0) 74%);
  background-attachment: fixed;   /* one light source, doesn't scroll away */
  background-repeat: no-repeat;
}