/*
  The wall is a neutral mid-dark grey, the surround used in colour grading rooms,
  so the page puts no colour cast on the clips. One warm tone is reserved for the
  Mac clips' placards. Type is local to each visitor's system: no font downloads.
*/
:root {
  --wall: #37393b;
  --wall-deep: #2d2f31;
  --screen: #1a1b1c;
  --paper: #efede8;
  --quiet: #c0bfba;
  --rule: #55575a;
  --tungsten: #f2d58e;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 56px);
  --row-gap: clamp(20px, 2vw, 32px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--paper);
  font: 400 1rem/1.5 var(--sans);
  overflow-wrap: anywhere;
}

h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--tungsten); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Preview banner */
.banner {
  background: var(--tungsten);
  color: #2a2620;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.8;
  padding: 0 var(--gutter);
}

/* Masthead */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 0 var(--row-gap);
  padding: clamp(24px, 3vw, 44px) var(--gutter) clamp(20px, 2vw, 28px);
}

.masthead h1 {
  grid-row: 1 / span 2;
  font: 400 clamp(2.5rem, 4.4vw, 5rem)/1.04 var(--serif);
  letter-spacing: -0.01em;
}

.lede {
  max-width: 62ch;
  font: 400 clamp(1.0625rem, 1.3vw, 1.1875rem)/1.45 var(--serif);
}

.note {
  max-width: 72ch;
  margin-top: 0.5rem;
  color: var(--quiet);
  font-size: 0.875rem;
}

/* Sticky section nav */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--wall-deep);
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }

.section-nav ul {
  display: flex;
  gap: clamp(16px, 2.5vw, 36px);
  list-style: none;
  padding: 0 var(--gutter);
  width: max-content;
  min-width: 100%;
}

.section-nav a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 2px solid transparent;
  color: var(--quiet);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.section-nav a:hover { color: var(--paper); }
.section-nav a[aria-current] { color: var(--paper); border-bottom-color: var(--paper); }

/* Sections and cases */
.section {
  padding: clamp(40px, 6vw, 88px) var(--gutter) 0;
}
.section:first-of-type { padding-top: clamp(24px, 2.4vw, 36px); }

.section > h2 {
  font: 400 clamp(1.875rem, 3.6vw, 3.25rem)/1.1 var(--serif);
}

.case { margin-top: clamp(20px, 2vw, 32px); }
.case + .case { margin-top: clamp(48px, 5.5vw, 80px); }

.case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 16px;
}

.case-head h3 { font: 400 1.5rem/1.2 var(--serif); }
.case-input { margin-top: 2px; color: var(--quiet); font-size: 0.875rem; }

.case-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* Controls */
.play-together,
.size-option {
  min-height: 40px;
  border-radius: 2px;
  font: 600 0.9375rem/1 var(--sans);
  cursor: pointer;
}

.play-together {
  min-width: 10.5em;
  padding: 0 18px;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: #26282a;
}
.play-together:hover { background: #fff; border-color: #fff; }
.play-together[aria-pressed="true"] { background: transparent; color: var(--paper); }
.play-together[aria-pressed="true"]:hover { background: rgb(255 255 255 / 0.08); border-color: var(--paper); }

.size-switch { display: inline-flex; }
.size-option {
  padding: 0 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--quiet);
  font-weight: 500;
}
.size-option + .size-option { margin-left: -1px; }
.size-option:hover { color: var(--paper); }
.size-option[aria-pressed="true"] {
  position: relative;
  border-color: var(--quiet);
  color: var(--paper);
  background: rgb(255 255 255 / 0.08);
}

.row-scrubber {
  width: clamp(140px, 18vw, 280px);
  accent-color: var(--paper);
}
.row-scrubber[hidden] { display: none; }

.row-status {
  margin-bottom: 12px;
  color: var(--tungsten);
  font-size: 0.875rem;
}

/* The row: up to three across, equal size, wrapping */
.clip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 40px) var(--row-gap);
}

.frame {
  position: relative;
  background: var(--screen);
  aspect-ratio: 7 / 4;
}

.frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--screen);
}

.placeholder-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 1px 7px;
  border-radius: 2px;
  background: rgb(26 27 28 / 0.78);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 500;
  pointer-events: none;
}

/* Placards, like the label on a gallery wall */
.placard {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 16px;
  padding-top: 10px;
}

.placard-name { grid-column: 1; font-size: 0.9375rem; font-weight: 500; }
.placard-caption { grid-column: 2; color: var(--quiet); font-size: 0.875rem; }

.placard-time {
  grid-column: 1 / -1;
  font: 400 clamp(1.5rem, 2.1vw, 2.125rem)/1.15 var(--serif);
  font-variant-numeric: lining-nums;
}
.placard-length { grid-column: 2; grid-row: 1; color: var(--quiet); font-size: 0.875rem; }
.clip-mac .placard-name,
.clip-mac .placard-time { color: var(--tungsten); }

/* Footer */
.colophon {
  margin-top: clamp(56px, 7vw, 104px);
  padding: 20px var(--gutter) 32px;
  border-top: 1px solid var(--rule);
  color: var(--quiet);
  font-size: 0.875rem;
}

.load-error { padding: 40px var(--gutter); }

@media (max-width: 1000px) {
  .clip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masthead { display: block; }
  .lede { margin-top: 0.75rem; }
}

@media (max-width: 640px) {
  .clip-row { grid-template-columns: minmax(0, 1fr); }
  .case-head { align-items: stretch; flex-direction: column; }
  .case-controls { justify-content: space-between; }
  .play-together { flex: 1 1 auto; min-height: 44px; }
  .size-option { min-height: 44px; }
  .row-scrubber { flex: 1 1 100%; width: 100%; min-height: 32px; }
}