/* Woodhouse Realty Ltd. — the showcase site.
   Ground: white. One black thing per screen. One small crimson pointer.
   Instrument Sans for running text, Cal Sans for figures and display lines:
   the same two faces the films are set in. Both ship in assets/fonts, so the
   page asks nothing of the network. */

@font-face {
  font-family: 'Instrument Sans';
  /* the plain truetype line is the fallback for engines that do not know the
     variations keyword; the first one any engine understands wins */
  src: url('assets/fonts/InstrumentSans-Variable.ttf') format('truetype-variations'),
       url('assets/fonts/InstrumentSans-Variable.ttf') format('truetype');
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: 'Cal Sans';
  src: url('assets/fonts/CalSans-SemiBold.otf') format('opentype');
  font-weight: 600; font-display: swap;
}

:root {
  --fg: #0a0a0a;
  --fg-2: #666;
  --fg-3: #8f8f8f;
  --line: #eaeaea;
  --line-2: #f5f5f5;
  --hair: rgba(10, 10, 10, .12);
  --bg: #fff;
  --bg-2: #fafafa;
  --crimson: #8d0e1a;
  --r: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --wrap: 1200px;
  --gutter: 20px;
  --air: 96px;                 /* between screens at 1440 */
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
  --display: 'Cal Sans', 'Instrument Sans', Georgia, serif;

  /* ---------------------------------------------------------------- motion --
     One scale for everything that moves. A value is chosen by what the motion
     does, never by the nearest number: a close is quicker than its open, a
     hover-in is direct and the hover-out springs back, a stagger steps 40 ms an
     item and the whole run stays under about 300 ms. Anything that invites
     rather than reacts is 500 ms or longer and moves 2 to 4 per cent. */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --duration-draw: 700ms;        /* a mark or a laurel drawing itself */
  --duration-breath: 4s;         /* the invitation on the play button */

  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);

  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;

  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --scale-breath: 1.04;

  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* named uses, all pointing back at the scale above */
  --stagger-dur: var(--duration-very-slow);
  --stagger-distance: var(--distance-medium);
  --stagger-stagger: var(--duration-stagger);
  --stagger-blur: var(--blur-medium);
  --stagger-ease: var(--ease-smooth-out);

  --reveal-dur: var(--duration-very-slow);
  --reveal-blur: var(--blur-medium);
  --reveal-ease: var(--ease-in-out);

  --digit-dur: var(--duration-very-slow);
  --digit-distance: var(--distance-base);
  --digit-stagger: 40ms;
  --digit-blur: var(--blur-small);
  --digit-ease: var(--ease-smooth-out);

  --tabs-dur: var(--duration-fast);
  --tabs-ease: var(--ease-smooth-out);

  --swap-dur: var(--duration-quick);
  --open-dur: var(--duration-fast);
  --close-dur: var(--duration-fast);

  --clear-out-dur: var(--duration-slow);
  --clear-out-fly: var(--distance-medium);
  --clear-blur: var(--blur-small);

  --check-dur: var(--duration-very-slow);
  --check-path-delay: var(--duration-micro);
  --check-blur-from: var(--blur-large);

  --draw-ease: var(--ease-smooth-out);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }

/* ------------------------------------------------------------------ type --- */
/* One scale: 40 / 22 / 17 / 14 / 12. One weight for body, one for headings.
   Letterspacing on eyebrows only. Line length under 60 characters. */

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 40px; letter-spacing: -0.04em; }
h2, h3 { font-size: 22px; }
h4 { font-size: 17px; letter-spacing: -0.02em; }
p { margin: 0; }

.display { font-family: var(--display); font-weight: 600; }

.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-2);
}
.lead { font-size: 17px; color: var(--fg-2); max-width: 52ch; }
.small { font-size: 14px; color: var(--fg-2); }
.fine { font-size: 14px; color: var(--fg-3); line-height: 1.5; }

.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; } .mt40 { margin-top: 40px; }
.mt48 { margin-top: 48px; } .mt64 { margin-top: 64px; } .mt88 { margin-top: 88px; }
.max520 { max-width: 520px; } .max560 { max-width: 560px; } .max640 { max-width: 640px; }
.max720 { max-width: 720px; } .max960 { max-width: 960px; }
.centred { margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------- layout --- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
main { display: block; padding-bottom: var(--air); }
.screen { padding: var(--air) 0 0; }
.screen--first { padding-top: 56px; }

/* the whisper: one grey line at the foot of a screen naming the next step */
.whisper {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--fg-3); text-decoration: none;
  background: none; border: 0; font-family: inherit; padding: 10px 0; cursor: pointer;
  transition: color var(--duration-quick) var(--ease-smooth-out);
}
.whisper[aria-disabled="true"] { cursor: default; }
.whisper:hover { color: var(--fg-2); }
.whisper svg { width: 14px; height: 14px; flex: none; }
.whisper-row { margin-top: 32px; text-align: center; }

/* --------------------------------------------------------------- header --- */

.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap {
  height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.wordmark { font-weight: 600; letter-spacing: -0.02em; text-decoration: none; font-size: 17px; }
.by { font-size: 14px; color: var(--fg-3); justify-self: end; white-space: nowrap; }

/* --------------------------------------------------------------- footer --- */

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; }
footer .row { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }

/* =============================================================== welcome ==== */

/* these two sit on the .wrap itself, so they must never use the padding
   shorthand: it would wipe the gutters the wrap is there to hold. */
.welcome { padding-top: 56px; padding-bottom: 40px; text-align: center; }
.mark { width: 52px; height: 52px; margin: 0 auto; color: var(--crimson); display: block; }
.mark path {
  fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  transition: stroke-dashoffset var(--duration-draw) var(--draw-ease);
}
.is-shown .mark path { stroke-dashoffset: 0; }
.welcome h1 { margin-top: 24px; }
.welcome .lead { margin: 14px auto 0; }

.entries { margin: 40px auto 0; max-width: 520px; display: grid; gap: 12px; text-align: left; }
.entry {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 18px; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px;
  text-decoration: none; background: #fff;
  transition:
    box-shadow   var(--duration-medium) var(--ease-bounce-strong),
    border-color var(--duration-medium) var(--ease-bounce-strong),
    transform    var(--duration-medium) var(--ease-bounce-strong);
}
.entry:hover {
  transform: translateY(-2px); border-color: transparent;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .10);
  transition:
    box-shadow   var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out),
    transform    var(--duration-quick) var(--ease-smooth-out);
}
.entry .thumb {
  width: 72px; height: 96px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2);
}
.entry .thumb video, .entry .thumb img {
  width: 100%; height: 100%; object-fit: cover; opacity: .7;
  transition: opacity var(--duration-slow) var(--ease-in-out);
}
.entry:hover .thumb video, .entry:hover .thumb img { opacity: 1; }
.entry .t { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.entry .m { display: block; font-size: 14px; color: var(--fg-2); margin-top: 3px; }
.entry .go { color: var(--fg-3); display: grid; place-items: center; }

/* ============================================================ video pages === */

[data-panel] { animation: panel-in var(--swap-dur) var(--ease-in-out) both; }
@keyframes panel-in {
  from { opacity: 0; filter: blur(var(--blur-small)); }
  to   { opacity: 1; filter: blur(0); }
}

/* --------------------------------------------------------- the two films --- */

.results-row { display: flex; justify-content: center; align-items: stretch; }
.vcard { width: 360px; flex: none; }
.vcard .cap {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2); text-align: left; margin-bottom: 12px; padding-left: 2px;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 20px;
}
.vcard--new .cap { color: var(--fg); }
.vcard .cap .gem { width: 7px; height: 7px; background: var(--crimson); transform: rotate(45deg); }

.stage {
  position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background: #0a0a0a; isolation: isolate;
}
.stage video { width: 100%; height: 100%; object-fit: cover; background: #0a0a0a; }
.stage .plate {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}
/* the original sits at a lower weight until it is played */
.vcard--old .stage .plate { filter: saturate(.8) brightness(.97); }
.vcard--old .stage.is-playing .plate { filter: none; }

.stage.is-playing .plate { opacity: 0; pointer-events: none; }

.pb {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px;
  transform: translate(-50%, -50%); transform-origin: center;
  border-radius: 999px; border: 0; cursor: pointer; padding: 0;
  background: var(--fg); color: #fff; display: grid; place-items: center;
  transition:
    opacity   var(--duration-fast) var(--ease-in-out),
    width     var(--duration-fast) var(--ease-smooth-out),
    height    var(--duration-fast) var(--ease-smooth-out);
}
.pb svg { width: 22px; height: 22px; }
/* the invitation: one slow swell every four seconds, only while it is waiting */
.pb .breath {
  position: absolute; inset: 0; border-radius: 999px; background: var(--fg);
  animation: breathe var(--duration-breath) var(--ease-in-out) infinite;
}
.pb .glyph { position: relative; z-index: 1; display: grid; place-items: center; }
@keyframes breathe {
  0%, 70%, 100% { transform: scale(1); }
  35% { transform: scale(var(--scale-breath)); }
}


/* the divider: a hairline broken by one crimson gem */
.divider { width: 72px; flex: none; display: grid; place-items: center; position: relative; }
.divider .line { position: absolute; top: 34px; bottom: 0; width: 1px; background: var(--hair); }
.divider .gem {
  position: relative; width: 10px; height: 10px; background: var(--crimson);
  transform: rotate(45deg);
  box-shadow: 0 0 0 12px #fff;
}
.dots { display: none; }

/* ------------------------------------------------------------ feedback ---- */

.feedback { max-width: 520px; margin: 0 auto; text-align: center; }
.feedback h3 { font-size: 22px; }
.stars { display: flex; justify-content: center; gap: 2px; margin-top: 18px; }
.star {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  width: 44px; height: 44px; display: grid; place-items: center; color: var(--fg-2);
  transition:
    color     var(--duration-quick) var(--ease-smooth-out),
    transform var(--duration-medium) var(--ease-bounce-strong);
}
.star svg { width: 32px; height: 32px; }
.star svg path {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round;
  stroke-dasharray: 90; stroke-dashoffset: 0;
}
.star:hover { transform: translateY(-2px); transition-duration: var(--duration-quick); }
.star { position: relative; -webkit-tap-highlight-color: transparent; }
.star::after {
  content: ""; position: absolute; inset: 6px; border-radius: 999px; border: 1.5px solid var(--crimson);
  opacity: 0; transform: scale(.6); pointer-events: none;
}
.star.is-burst::after { animation: star-ripple 650ms var(--ease-smooth-out) both; }
.star.is-burst svg { animation: star-pop 420ms var(--ease-bounce-strong) both; }
@keyframes star-ripple {
  0%   { opacity: .7; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(2.1); }
}
@keyframes star-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.star.on { color: var(--crimson); }
.star.on svg path {
  fill: currentColor;
  animation: star-draw var(--duration-very-slow) var(--ease-smooth-out) both;
}
@keyframes star-draw {
  from { stroke-dashoffset: 90; fill-opacity: 0; }
  to   { stroke-dashoffset: 0; fill-opacity: 1; }
}

/* the box and the button only arrive once a star is chosen */
.more-feedback {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition:
    grid-template-rows var(--close-dur) var(--ease-smooth-out),
    opacity            var(--close-dur) var(--ease-smooth-out);
}
.more-feedback > div { overflow: hidden; }
.feedback.is-open .more-feedback {
  grid-template-rows: 1fr; opacity: 1;
  transition:
    grid-template-rows var(--duration-slow) var(--ease-smooth-out),
    opacity            var(--duration-slow) var(--ease-smooth-out);
}
.feedback textarea {
  width: 100%; margin-top: 18px; min-height: 84px; resize: vertical;
  font-family: inherit; font-size: 17px; line-height: 1.5; color: var(--fg); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px;
}
.feedback textarea:focus { outline: none; border-color: var(--fg); }
.feedback .btn { margin-top: 16px; }
.feedback.shake { animation: shake var(--duration-medium) var(--ease-in-out) 1; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.thanks { display: grid; place-items: center; gap: 12px; }

.btn {
  appearance: none; font-family: inherit; font-size: 14px; font-weight: 500;
  height: 44px; padding: 0 24px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--fg); background: var(--fg); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  transition:
    transform  var(--duration-medium) var(--ease-bounce-strong),
    background var(--duration-medium) var(--ease-bounce-strong);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-2px); transition-duration: var(--duration-quick); }
.btn.ghost { background: #fff; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--fg); }

/* ---------------------------------------------------- the door onwards ---- */

.door {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 17px; color: var(--fg);
  padding-bottom: 6px;
  transition: border-color var(--duration-quick) var(--ease-smooth-out);
}
.door:hover { color: var(--crimson); }
.door svg { width: 18px; height: 18px; color: var(--crimson); flex: none; }
.door span { text-align: left; }

/* ========================================================= how it's made === */

.rail {
  position: sticky; top: var(--bar-h, 64px); z-index: 20; background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line-2);
  padding: 12px 0; text-align: center;
}
.rail .n { font-size: 14px; color: var(--fg-2); }
.rail .pips { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.rail .pips i {
  width: 6px; height: 6px; border-radius: 999px; background: var(--line); display: block;
  transition: background var(--duration-fast) var(--ease-smooth-out);
}
.rail .pips i.on { background: var(--crimson); }

.steps { scroll-snap-type: y proximity; }
.step { padding: 72px 0 0; scroll-snap-align: start; }
.step:first-child { padding-top: 40px; }
.step .visual { margin: 0 auto; max-width: 960px; }
.step .visual img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.step .cap {
  margin: 0 auto 26px; max-width: 34ch; font-size: 22px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.2; text-align: center; text-wrap: balance; color: var(--fg);
}
.step .extra { margin: 32px auto 0; max-width: 640px; }

figure { margin: 0; }
figure img { width: 100%; height: auto; border-radius: var(--r-md); }
figure figcaption { font-size: 14px; color: var(--fg-2); margin-top: 10px; }
.grid { display: grid; gap: 10px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* a long list opens in place, never on another page */
.disclosure .rest {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--close-dur) var(--ease-smooth-out);
}
.disclosure .rest > div { overflow: hidden; }
.disclosure.is-open .rest {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--open-dur) var(--ease-smooth-out);
}
.more {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--fg);
  min-height: 44px; padding: 10px 0 0;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--duration-quick) var(--ease-smooth-out);
}
.more:hover { border-color: var(--fg); }

.lines .ln {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--line-2); font-size: 17px;
}
.lines .ln:first-child { border-top: 0; }
.lines .ln .k {
  color: var(--fg-3); font-size: 14px; padding-top: 3px; font-variant-numeric: tabular-nums;
}
.lines .ln--time { grid-template-columns: 52px minmax(0, 1fr); }
.lines .ln--cue { grid-template-columns: 52px 72px minmax(0, 1fr); }

.notes p { font-size: 14px; color: var(--fg-2); margin-top: 10px; }

.counters { display: flex; gap: 48px; flex-wrap: wrap; }
.counter .n { font-family: var(--display); font-size: 40px; line-height: 1.1; }
.counter .k { font-size: 14px; color: var(--fg-2); }

.searchbar { position: relative; max-width: 520px; }
.field {
  width: 100%; height: 52px; padding: 0 44px 0 16px;
  border: 1px solid var(--fg); border-radius: var(--r-md);
  font-family: inherit; font-size: 17px; color: var(--fg); background: #fff;
}
.field:focus { outline: none; }
.searchbar .clear {
  position: absolute; right: 8px; top: 10px; width: 32px; height: 32px; border: 0;
  background: none; color: var(--fg-2); font-size: 18px; line-height: 1; cursor: pointer;
  border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity var(--duration-quick) var(--ease-smooth-out);
}
.searchbar.has-value .clear { opacity: 1; pointer-events: auto; }
.searchbar .clear:hover { color: #000; background: var(--bg-2); }

.dissolving {
  opacity: 0; transform: translateY(calc(var(--clear-out-fly) * -1)); filter: blur(var(--clear-blur));
  transition:
    opacity   var(--clear-out-dur) var(--ease-smooth-out),
    transform var(--clear-out-dur) var(--ease-smooth-out),
    filter    var(--clear-out-dur) var(--ease-smooth-out);
}
.scroll-y { max-height: 420px; overflow-y: auto; }
.results .result { padding: 12px 14px; border-top: 1px solid var(--line-2); font-size: 14px; }
.results .result:first-child { border-top: 0; }
.results .result .meta { font-size: 12px; color: var(--fg-3); }
.stat-row { display: flex; gap: 40px; flex-wrap: wrap; }
.stat .n { font-family: var(--display); font-size: 32px; line-height: 1.1; }
.stat .k { font-size: 14px; color: var(--fg-2); }

/* ================================================ the library rows (Library) */

.row-card {
  display: grid; grid-template-columns: 46% minmax(0, 54%); gap: 40px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  padding: 24px; margin-top: 24px;
  transition:
    box-shadow   var(--duration-medium) var(--ease-bounce-strong),
    border-color var(--duration-medium) var(--ease-bounce-strong),
    transform    var(--duration-medium) var(--ease-bounce-strong);
}
.row-card:hover {
  transform: translateY(-2px);
  border-color: transparent; box-shadow: 0 8px 30px rgba(0, 0, 0, .10);
  transition:
    box-shadow   var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out),
    transform    var(--duration-quick) var(--ease-smooth-out);
}
/* a sheet wider than it is tall reads better across the whole row */
.row-card--wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.row-card > .pic { border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.row-card > .pic img { width: 100%; height: auto; display: block; border-radius: 0; }
.row-card .txt h4 { font-size: 22px; letter-spacing: -0.03em; }
.row-card .txt p { margin-top: 12px; font-size: 17px; color: var(--fg-2); max-width: 46ch; }

/* =============================================================== motion ===== */

.t-stagger-line {
  opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
}
.is-shown .t-stagger-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.is-shown .t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.is-shown .t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.is-shown .t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.is-shown .t-stagger-line--5 { transition-delay: calc(var(--stagger-stagger) * 4); }
.is-shown .t-stagger-line--6 { transition-delay: calc(var(--stagger-stagger) * 5); }
.is-shown .t-stagger-line--7 { transition-delay: calc(var(--stagger-stagger) * 6); }
/* second visit: the entrance does not replay */
.no-entrance .t-stagger-line { opacity: 1; transform: none; filter: none; transition: none; }
.no-entrance .mark path { stroke-dashoffset: 0; transition: none; }

.reveal-img {
  opacity: 0; filter: blur(var(--reveal-blur)); transform: scale(1.02);
  transition:
    opacity   var(--reveal-dur) var(--reveal-ease),
    filter    var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
}
.is-revealed .reveal-img { opacity: 1; filter: blur(0); transform: scale(1); }
.reveal-line {
  opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
}
.is-revealed .reveal-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.is-revealed .reveal-line--2 { transition-delay: var(--stagger-stagger); }
.is-revealed .reveal-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
/* a card arrives as one piece, a short rise, then its lines follow inside it */
.card.reveal, .row-card.reveal, .screen.reveal, .rhythm.reveal {
  opacity: 0; transform: translateY(var(--distance-base));
  transition: opacity var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out);
}
.card.reveal.is-revealed, .row-card.reveal.is-revealed, .screen.reveal.is-revealed, .rhythm.reveal.is-revealed { opacity: 1; transform: translateY(0); }
.two > .card.reveal:nth-child(2) { transition-delay: 60ms; }
.two > .card.reveal:nth-child(2) .reveal-line { transition-delay: calc(60ms + var(--stagger-stagger)); }
.two > .card.reveal:nth-child(2) .reveal-line--2 { transition-delay: calc(60ms + var(--stagger-stagger) * 2); }
.card.reveal .reveal-line { transition-delay: var(--stagger-stagger); }
.card.reveal .reveal-line--2 { transition-delay: calc(var(--stagger-stagger) * 2); }

@keyframes t-digit-pop-in {
  from { opacity: 0; transform: translateY(var(--digit-distance)); filter: blur(var(--digit-blur)); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.t-digit { display: inline-block; opacity: 0; }
.is-revealed .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
  animation-delay: calc(var(--stagger-stagger) * 2 + var(--stagger, 0) * var(--digit-stagger));
}
.t-success-check { display: inline-grid; place-items: center; color: var(--crimson); }
.t-success-check svg path {
  stroke-dasharray: 30; stroke-dashoffset: 30;
  transition: stroke-dashoffset var(--check-dur) var(--ease-smooth-out) var(--check-path-delay);
}
.t-success-check[data-state="out"] { opacity: 0; filter: blur(var(--check-blur-from)); }
.t-success-check[data-state="in"],
.t-success-check[data-state="done"] {
  opacity: 1; filter: blur(0);
  transition: opacity var(--check-dur) var(--ease-smooth-out),
              filter  var(--check-dur) var(--ease-smooth-out);
}
.t-success-check[data-state="in"] svg path,
.t-success-check[data-state="done"] svg path { stroke-dashoffset: 0; }

/* ========================================================== responsive ====== */

@media (max-width: 1120px) {
  .vcard { width: 300px; }
  .divider { width: 56px; }
}

@media (max-width: 1023px) {
  /* narrow screens keep a little overhang on the row images so the drift in
     app.js never opens a gap at the top or the bottom of the frame */
  .reveal-img { transform: scale(1.05); }
  .is-revealed .reveal-img { transform: scale(1.015); }
  .reveal-img.drift {
    transition:
      opacity var(--reveal-dur) var(--reveal-ease),
      filter  var(--reveal-dur) var(--reveal-ease);
    will-change: transform;
  }
  .row-card { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .g6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .counters { gap: 32px; }
}

@media (max-width: 860px) {
  :root { --air: 64px; }
  .wrap { padding: 0 var(--gutter); }
  .bar .wrap {
    height: auto; padding-top: 12px; padding-bottom: 8px;
    grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px;
  }
  .by { display: none; }
  .welcome { padding-top: 32px; padding-bottom: 24px; }
  .welcome h1 { margin-top: 18px; }
  .entries { margin-top: 28px; }

  /* the two films become one snapping row, the second peeking on the right.
     The left padding matches the gutter, so the first film lines up with the
     eyebrow above it; the negative margin lets the second one run off the edge. */
  .results-row {
    display: flex; justify-content: flex-start; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    padding: 0 var(--gutter) 4px; margin: 0 calc(var(--gutter) * -1);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .results-row::-webkit-scrollbar { display: none; }
  .vcard { width: 72vw; flex: none; scroll-snap-align: start; }
  .divider { width: 24px; flex: none; }
  .divider .line { top: 34px; }
  .divider .gem { box-shadow: 0 0 0 8px #fff; }
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .dots i {
    width: 6px; height: 6px; border-radius: 999px; background: var(--line); display: block;
    transition: background var(--duration-quick) var(--ease-smooth-out);
  }
  .dots i.on { background: var(--fg); }

  .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .stat .n { font-size: 26px; }
  .row-card { padding: 16px; }
  h1 { font-size: 32px; }
}

/* =============================================================== focus ====== */

a:focus-visible, button:focus-visible, textarea:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 2px;
}
a:not([class]):focus-visible { border-radius: 4px; }

/* ======================================================= reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .card.reveal, .row-card.reveal, .screen.reveal, .rhythm.reveal,
  .t-stagger-line, .reveal-line, .reveal-img, .t-success-check, .t-digit {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .t-success-check svg path, .mark path { stroke-dashoffset: 0 !important; }
  .pb .breath { animation: none !important; }
}

/* Play both: a quiet pill under the two films. Outlined, never solid, so the tab
   stays the one black thing on the screen. */
.both-row { margin-top: 26px; text-align: center; }
.both {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; color: var(--fg-2, #666);
  background: transparent; border: 1px solid var(--line, #eaeaea); border-radius: 999px;
  padding: 9px 16px 9px 13px; cursor: pointer; min-height: 40px;
  transition: color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)),
              border-color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)),
              transform var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(.22,1,.36,1));
}
.both svg { width: 16px; height: 16px; flex: none; }
.both:hover { color: var(--fg, #111); border-color: var(--fg, #111); }
.both[aria-pressed="true"] { color: var(--fg, #111); border-color: var(--fg, #111); }
.both:focus-visible { outline: 2px solid var(--fg, #111); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .both { transition: none; } }

/* the header, premium: sticky, frosted, a hairline only once the page moves,
   the current page as a small black pill */
header.bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-smooth-out);
}
header.bar.is-scrolled { border-bottom-color: var(--line); }
header.bar .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; }
header.bar .nav { grid-column: 2; }
header.bar .by { grid-column: 3; justify-self: end; }
header.bar .wordmark { font-weight: 600; letter-spacing: -0.02em; font-size: 16px; color: var(--fg); text-decoration: none; }
header.bar .by { font-size: 13px; color: var(--fg-2); }
/* the pages: plain words, one crimson line under the current one (transitions.dev,
   underline sliding). It snaps to the current page on first paint with the
   transition suspended, slides under the word you hover, and slides home. */
header.bar .nav { position: relative; display: inline-flex; gap: 36px; }
header.bar .nav a {
  position: relative; padding: 10px 0; font-size: 14px; line-height: 1; color: var(--fg-2);
  text-decoration: none; border: 0; margin: 0;
  transition: color var(--duration-fast) var(--ease-smooth-out);
}
header.bar .nav a:hover, header.bar .nav a.is-under { color: var(--fg); }
header.bar .nav a[aria-current="page"] { color: var(--fg); font-weight: 500; }
header.bar .nav a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 4px; }
header.bar .nav .nav-line {
  position: absolute; left: 0; bottom: 4px; height: 1.5px; width: 0; border-radius: 1px;
  background: var(--crimson); opacity: 0; transform: translateX(0);
  transition: transform var(--duration-fast) var(--ease-smooth-out),
              width var(--duration-fast) var(--ease-smooth-out),
              opacity var(--duration-quick) var(--ease-smooth-out);
  will-change: transform, width; pointer-events: none;
}
header.bar .nav .nav-line.is-on { opacity: 1; }
header.bar .nav.is-still .nav-line { transition: none; }
@media (prefers-reduced-motion: reduce) {
  header.bar .nav .nav-line, header.bar .nav a { transition: none !important; }
}
@media (max-width: 719px) {
  header.bar .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
  header.bar .by { display: none; }
}
main > .wrap:first-child, main > [data-panel]:first-of-type { padding-top: 40px; }
/* the step rail carries the way back: Results at the left, the step count centred */
.rail-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 40px; }
.rail-c { grid-column: 2; text-align: center; }
.both--back { grid-column: 1; justify-self: start; min-height: 36px; padding: 7px 14px 7px 11px; font-size: 13px; background: rgba(255, 255, 255, .7); }
@media (max-width: 479px) { .rail .both--back { padding: 7px 10px; } .rail .both--back span { display: none; } }

/* ================================================================ search === */
/* One box, six words to try, then results grouped by video. Under it, one thin
   bar per month says how much of the channel was read; a month opens as a list. */

.searchbar--big { max-width: 640px; }
.searchbar--big .field { height: 60px; font-size: 19px; border-radius: 999px; padding: 0 56px 0 24px; }
.searchbar--big .clear { top: 14px; right: 14px; }
.try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-3); }
.try .k { margin-right: 2px; }
.try-word {
  appearance: none; font: inherit; font-size: 14px; color: var(--fg-2); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; min-height: 34px; padding: 0 13px; cursor: pointer;
  transition: background var(--duration-quick) var(--ease-smooth-out),
              border-color var(--duration-quick) var(--ease-smooth-out),
              color var(--duration-quick) var(--ease-smooth-out);
}
.try-word:hover { border-color: var(--fg); color: var(--fg); }
.try-word[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: #fff; }
.try-word:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.hits { font-size: 15px; margin-top: 20px; min-height: 24px; color: var(--fg-2); }
.hits .t-digit { color: var(--fg); font-weight: 600; }
.hits-list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.hit { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.hit:last-child { border-bottom: 0; }
.hit--flat { padding: 12px 18px; }
.hit-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center;
  text-decoration: none; color: var(--fg);
}
.hit-head .t { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; }
.hit-head .m { display: block; font-size: 13px; color: var(--fg-3); margin-top: 3px; }
.hit-head:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.th { display: block; object-fit: cover; border-radius: 6px; background: var(--bg-2); }
.th--short { width: 40px; height: 72px; }
.th--long { width: 112px; height: 63px; }
.hit-lines { margin-top: 8px; display: grid; gap: 2px; }
.hit .ln {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline;
  text-decoration: none; color: var(--fg-2); font-size: 14px; line-height: 1.45;
  padding: 6px 8px; margin: 0 -8px; border-radius: 8px;
  transition: background var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out);
}
.hit a.ln:hover { background: var(--bg-2); color: var(--fg); }
.hit .ln .k { font-size: 12px; color: var(--crimson); font-variant-numeric: tabular-nums; }
.hit .ln--more { color: var(--fg-3); font-size: 13px; }
.hit .ln--more::before { content: ""; }
.hit mark { background: #fbe9ea; color: #000; padding: 0 1px; border-radius: 2px; }
.hits-title {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--fg-2);
}
.hits-title .x {
  appearance: none; font: inherit; font-size: 13px; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--fg-2);
  transition: border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out);
}
.hits-title .x:hover { border-color: var(--fg); color: var(--fg); }

/* the months: one thin bar each, drawn up on arrival, black under the hand, crimson when open */
.months { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.mo {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; flex: 1 1 0; height: 100%;
  display: flex; align-items: flex-end; cursor: pointer; border-radius: 3px; min-width: 0;
}
.mo[disabled] { cursor: default; }
.mo i {
  display: block; width: 100%; height: calc(var(--h) * 100%); background: #d4d4d4; border-radius: 3px 3px 1px 1px;
  transform-origin: bottom; transform: scaleY(0);
  transition: transform var(--duration-slow) var(--ease-smooth-out) calc(120ms + var(--i) * 4ms),
              background var(--duration-quick) var(--ease-smooth-out);
}
.is-revealed .mo i { transform: scaleY(1); }
.mo:not([disabled]):hover i, .mo:focus-visible i { background: var(--fg); transition-delay: 0ms; }
.mo[aria-pressed="true"] i, .mo[aria-pressed="true"]:hover i { background: var(--crimson); }
.mo:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.years { display: grid; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--fg-3); }
.years span { border-top: 1px solid var(--line); padding-top: 6px; }
.months-cap { font-size: 14px; color: var(--fg-2); min-height: 22px; }

@media (max-width: 719px) {
  .searchbar--big .field { height: 54px; font-size: 17px; padding: 0 48px 0 20px; }
  .searchbar--big .clear { top: 11px; right: 10px; }
  .months { height: 100px; gap: 2px; }
  .th--long { width: 96px; height: 54px; }
  .hit { padding: 14px; }
  .hit--flat { padding: 10px 14px; }
  .hit .ln { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 479px) {
  header.bar .nav { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mo i { transform: none; transition: none; }
}


/* ================================================================ library === */
/* Two cards on top: the search with the counters and the month bars, then every
   video as a wall of tiles that light up for a search. The nine rows follow. */

.card {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 32px;
}
.card h3 { font-size: 22px; letter-spacing: -0.03em; }
.card .sub { margin-top: 8px; font-size: 17px; color: var(--fg-2); max-width: 52ch; }
.card-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.card-foot .btn svg { width: 16px; height: 16px; }
.both-row--start { text-align: left; margin-top: 24px; }
a.both { text-decoration: none; }

.mo { position: relative; }
.mo b {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hh) * 100%); display: block;
  background: var(--crimson); border-radius: 3px 3px 1px 1px; pointer-events: none;
  transition: height var(--duration-fast) var(--ease-smooth-out);
}
.months.has-hits .mo i { background: #e6e6e6; }

/* the catalogue: every video as a card; a search keeps the ones that say it */
.cat-head { padding-top: 32px; }
.cat-bar { display: flex; gap: 12px 28px; flex-wrap: wrap; align-items: center; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }
.vid-main { display: block; text-decoration: none; color: var(--fg); }
.th-wide { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--bg-2); display: block; }
.vid .t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 500; line-height: 1.35; margin-top: 10px;
}
.vid-main:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.vid .m { display: block; font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.vid-line { margin-top: 6px; }
.vid-line .ln {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px; align-items: baseline;
  text-decoration: none; color: var(--fg-2); font-size: 13px; line-height: 1.4; padding: 4px 6px; margin: 0 -6px;
  border-radius: 6px;
  transition: background var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out);
}
.vid-line .ln:hover { background: var(--bg-2); color: var(--fg); }
.vid-line .ln .k { font-size: 11px; color: var(--crimson); font-variant-numeric: tabular-nums; }
.vid-line .ln > span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vid-line mark { background: #fbe9ea; color: #000; padding: 0 1px; border-radius: 2px; }

@media (max-width: 1023px) {
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .card { padding: 20px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .card-foot { gap: 12px; }
}

/* ============================================================ one video === */

.vhead {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "poster text" "poster facts" "poster links";
  grid-template-rows: 1fr auto 1fr; gap: 0 40px; align-items: center;
}
.vhead .vposter { grid-area: poster; }
.vhead .vtext { grid-area: text; align-self: end; }
.vhead .vfacts { grid-area: facts; margin-top: 22px; }
.vhead .vlinks { grid-area: links; align-self: start; margin-top: 22px; }
.vposter { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.vposter--short { width: 240px; aspect-ratio: 9 / 16; }
.vposter--long { width: 240px; aspect-ratio: 16 / 9; }
.vposter-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtext h2 { font-size: 28px; }
.counters--small .counter .n { font-size: 32px; }
.vlinks { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vsaid { font-size: 15px; color: var(--fg-2); }
.vsaid b { color: var(--fg); }
.vpage h3 { font-size: 22px; letter-spacing: -0.03em; }
.vpage .sub { margin-top: 8px; font-size: 17px; color: var(--fg-2); }
.tr { border-top: 1px solid var(--line); }
.tr .ln {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: baseline;
  text-decoration: none; color: var(--fg); font-size: 16px; line-height: 1.5;
  padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line-2); border-radius: 0;
  transition: background var(--duration-quick) var(--ease-smooth-out);
}
.tr .ln:hover { background: var(--bg-2); }
.tr .ln .k { font-size: 13px; color: var(--crimson); font-variant-numeric: tabular-nums; }
.tr .ln.is-hit { background: #fdf3f4; }
.tr mark { background: #fbe9ea; color: #000; padding: 0 1px; border-radius: 2px; }
.try-word--link { display: inline-flex; align-items: center; text-decoration: none; gap: 8px; }
.try-word .c { color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .vhead { grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "poster text" "poster links" "facts facts"; grid-template-rows: auto auto auto; gap: 0 18px; align-items: start; align-content: start; }
  .vhead .vlinks { margin-top: 14px; align-self: start; }
  .vposter--short { width: 132px; }
  .vposter--long { width: 100%; grid-column: 1 / -1; }
  .vhead .vtext { align-self: end; }
  .vhead .vfacts { margin-top: 20px; }
  .vtext h2 { font-size: 22px; }
  .vlinks .btn { height: 40px; padding: 0 18px; }
  .tr .ln { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 15px; }
}

/* ============================================================== insights === */

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ranks { display: grid; gap: 10px; }
.rank {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 36px; gap: 14px; align-items: center;
  text-decoration: none; color: var(--fg); font-size: 14px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px;
  transition: background var(--duration-quick) var(--ease-smooth-out);
}
.rank:hover { background: var(--bg-2); }
.rank-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar { height: 10px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.rank-bar i {
  display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--fg); border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-smooth-out) calc(120ms + var(--i) * 30ms);
}
.is-revealed .rank-bar i { transform: scaleX(1); }
.rank:hover .rank-bar i { background: var(--crimson); }
.rank-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
.fact-t { font-size: 17px; font-weight: 500; }
.fact-s { font-size: 14px; color: var(--fg-2); margin-top: 4px; }
.fact-s a { color: var(--fg-2); text-underline-offset: 3px; }
.mt20 { margin-top: 20px; }
.tr--quiet .ln { font-size: 14px; color: var(--fg-2); padding: 7px 8px; }
@media (max-width: 860px) {
  .two { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .rank { grid-template-columns: 120px minmax(0, 1fr) 32px; gap: 10px; }
}

/* the poster on a video page is the player: one tap swaps the picture for the film */
.vposter { position: relative; }
.vplay {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border: 0; border-radius: 999px; background: var(--fg); color: #fff; cursor: pointer; padding: 0;
  display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  transition: transform var(--duration-medium) var(--ease-bounce-strong);
}
.vplay:hover { transform: scale(1.06); }
.vplay svg { width: 22px; height: 22px; margin-left: 2px; position: relative; z-index: 1; }
.vplay .breath { position: absolute; inset: 0; border-radius: 999px; background: var(--fg); animation: vbreath var(--duration-breath) ease-in-out infinite; z-index: -1; }
@keyframes vbreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.vframe { width: 100%; height: 100%; border: 0; display: block; }
.vposter.is-live { background: #000; }
@media (prefers-reduced-motion: reduce) { .vplay .breath { animation: none; } }

/* the box shows one clear button, ours; the browser's own is hidden */
.field::-webkit-search-cancel-button, .field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Play both: on the divider between the films on wide screens (the gem gives way),
   under the dots on a phone */
.divider .both--play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  background: var(--fg); color: #fff; border-color: var(--fg); z-index: 2; box-shadow: 0 0 0 10px #fff;
  padding: 8px 16px 8px 12px; min-height: 40px; font-size: 14px;
}
.divider .both--play:hover { background: #2a2a2a; border-color: #2a2a2a; color: #fff; }
.divider .both--play .l-short { display: none; }
.divider .both--play svg { width: 14px; height: 14px; }
.divider.has-both .gem { display: none; }
.divider .both--play[aria-pressed="true"] { color: #fff; background: var(--fg); border-color: var(--fg); }
/* the same pill on a phone, icon only, on the seam between the two films */
@media (max-width: 860px) {
  .divider .both--play { min-height: 36px; padding: 7px 12px 7px 9px; gap: 6px; box-shadow: 0 0 0 5px #fff; }
  .divider .both--play .l-long { display: none; }
  .divider .both--play .l-short { display: inline; }
  .divider .both--play svg { width: 14px; height: 14px; }
}
.divider .both--play .p-pause { display: none; }
.divider .both--play.is-on .p-play { display: none; }
.divider .both--play.is-on .p-pause { display: block; }

/* the film's controls live under the picture: a small dark play disc, the mute
   disc beside it, the length at the right. The picture itself also answers a tap. */
/* the timeline row sits above the picture, a little narrower than it on both sides */
.controls { display: flex; align-items: center; gap: 10px; margin: 4px 12px 8px; }
.controls .time { margin-left: 2px; font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; gap: 5px; }
.controls .time .now { color: var(--fg-2); }
.controls .dur { position: static; background: none; padding: 0; opacity: 1; }
.controls .snd {
  appearance: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--fg-2); display: grid; place-items: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out);
}
.controls .snd svg { width: 16px; height: 16px; }
.controls .snd .wave { display: none; }
.controls .snd:hover { border-color: var(--fg); color: var(--fg); }
.vcard.is-heard .controls .snd { background: var(--fg); border-color: var(--fg); color: #fff; }
.vcard.is-heard .controls .snd .wave { display: block; }
.vcard.is-heard .controls .snd .cross { display: none; }
.controls .time { margin-left: 2px; font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; gap: 5px; }
.controls .time .now { color: var(--fg-2); }
.controls .dur { position: static; background: none; padding: 0; opacity: 1; }
.stage { cursor: pointer; }

.both-row { margin-top: 32px; }
/* the small Close on a month list matches the outlined pills */
.hits-title .x { min-height: 32px; padding: 5px 12px; border-radius: 999px; }

/* the Play both focus ring follows the pill, and only shows for the keyboard */
.divider .both--play:focus-visible { outline: none; border-radius: 999px; box-shadow: 0 0 0 10px #fff, 0 0 0 12px var(--fg); }
.controls .snd:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fg); }
.divider .both--play:focus:not(:focus-visible) { outline: none; }


/* on a phone the films start closer to the tabs: no dead band above them */
@media (max-width: 860px) {
  main > [data-panel]:first-of-type { padding-top: 8px; }
  .screen { padding-top: 24px; }
}


/* the timeline: a hairline that fills, a knob riding on top of it with a white
   ring, and a time bubble that follows the finger while it drags. Hover and
   drag thicken the line and grow the knob (in quick, out springy). */
.scrub { position: relative; flex: 1 1 80px; min-width: 80px; height: 40px; cursor: pointer; touch-action: none; margin: 0 2px; -webkit-tap-highlight-color: transparent; }
.scrub .tl {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--line); border-radius: 999px; overflow: hidden;
  transition: height var(--duration-quick) var(--ease-smooth-out), margin-top var(--duration-quick) var(--ease-smooth-out);
}
.scrub:hover .tl, .scrub.is-scrubbing .tl { height: 5px; margin-top: -2.5px; }
.scrub .fill { height: 100%; width: 0; background: var(--fg); border-radius: 999px; }
.scrub .knob {
  position: absolute; z-index: 1; top: 50%; left: calc(6px + var(--p, 0) * (100% - 12px)); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 999px; background: var(--fg); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .28);
  transition: transform var(--duration-medium) var(--ease-bounce);
}
.scrub:hover .knob, .scrub.is-scrubbing .knob { transform: scale(1.25); transition-duration: var(--duration-quick); transition-timing-function: var(--ease-smooth-out); }
.scrub::after {
  content: attr(data-time); position: absolute; z-index: 2; left: calc(6px + var(--p, 0) * (100% - 12px)); top: -9px; transform: translate(-50%, 4px);
  font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; background: var(--fg); padding: 5px 8px; border-radius: 999px;
  opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out);
}
.scrub.is-scrubbing::after { opacity: 1; transform: translate(-50%, 0); }
.scrub:focus { outline: none; }
.scrub:focus-visible .knob { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fg); }
@media (max-width: 860px) {
  .controls .snd { display: none; }                  /* on a phone the film in view is the one heard */
}

/* Insights opens on the rhythm itself: a heading with the catalogue button beside it,
   the month chart, then three figures in a row parted by soft hairlines */
.rhythm { padding-top: 16px; }
.rhythm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rhythm-head h2 { font-size: 30px; letter-spacing: -0.03em; }
.rhythm-head .sub { margin-top: 10px; }
.rhythm-head .btn { flex: none; }
.rhythm .reveal-line--3 { transition-delay: calc(var(--stagger-stagger) * 3); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { position: relative; padding: 6px 28px; }
.stat:first-child { padding-left: 0; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
.stat .n { font-family: var(--display); font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.stat .k { font-size: 14px; color: var(--fg-2); margin-top: 2px; }
@media (max-width: 860px) {
  .rhythm { padding-top: 8px; }
  .rhythm-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .rhythm-head h2 { font-size: 26px; }
  .stat { padding: 4px 14px; }
  .stat:first-child { padding-left: 0; }
  .stat .n { font-size: 28px; }
  .stat .k { font-size: 12px; }
}