/* ==========================================================================
   J. MENEZES — portfolio · "Do 16:9 ao 9:16"
   --------------------------------------------------------------------------
   The screen is a cinema screen with masking. Every film is shown whole, at
   its own shape; black masks close in around it, and the words are set on
   the masks. Type follows the frame: condensed beside a vertical film,
   expanded across a wide one (Archivo, width axis 62–125).
   The film is the only light: the interface is black and paper, colour comes
   from the picture — it spills onto the masks, and what leaves focus loses it.

    1. Tokens            6. Home (reel)        11. Intro
    2. Base              7. Film (project)     12. Curtain, cursor, menu, help, grain
    3. Header            8. Pages              13. Motion
    4. Links & glyphs    9. Archive (+ rolo)   14. Responsive
    5. Stage & masks    10. About
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

/* The film's light at each edge of the frame (lib/ambient.js), eased between samples. */
@property --amb-t { syntax: "<color>"; inherits: true; initial-value: rgb(0 0 0); }
@property --amb-r { syntax: "<color>"; inherits: true; initial-value: rgb(0 0 0); }
@property --amb-b { syntax: "<color>"; inherits: true; initial-value: rgb(0 0 0); }
@property --amb-l { syntax: "<color>"; inherits: true; initial-value: rgb(0 0 0); }

:root {
  --black: #000;
  --ink: #0a0a09;
  --paper: #efebe3;
  --accent: #ff3d1f;            /* tally red: progress, playhead, "now" marks only */
  --ok: #3aa267;

  --bg: var(--ink);
  --fg: var(--paper);

  --gutter: clamp(16px, 1.6vw, 28px);
  --sl: max(var(--gutter), env(safe-area-inset-left, 0px));   /* notch-safe left  */
  --sr: max(var(--gutter), env(safe-area-inset-right, 0px));  /* notch-safe right */
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --top: clamp(16px, 1.45vw, 26px);
  --fs-ui: 11px;
  --name: .75;                  /* the films' names, everywhere: 1 = filling their mask */

  --f-ui: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-disp: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-expo: cubic-bezier(.19, 1, .22, 1);
  --e-io: cubic-bezier(.76, 0, .24, 1);
  --e-in: cubic-bezier(.6, 0, .9, .35);
  --e-mask: cubic-bezier(.7, 0, .2, 1);

  --fg-70: rgb(239 235 227 / .7);
  --fg-55: rgb(239 235 227 / .55);
  --fg-40: rgb(239 235 227 / .4);
  --fg-22: rgb(239 235 227 / .22);
  --fg-12: rgb(239 235 227 / .12);
  --fg-06: rgb(239 235 227 / .06);

  color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------ */

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

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  font: 400 var(--fs-ui)/1.4 var(--f-ui);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: opacity .6s ease;
}

html.is-booting body { opacity: 0; }
html[data-media] { overflow: hidden; overscroll-behavior: none; }
html[data-media] body { height: 100%; overflow: hidden; }

a { color: inherit; text-decoration: none; }
button {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0; cursor: pointer;
}
img, video { display: block; max-width: 100%; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
sup { font-size: .62em; line-height: 0; vertical-align: super; }
::selection { background: var(--paper); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ui {
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.ui em { font-style: normal; }

.skip {
  position: absolute; left: var(--gutter); top: -80px; z-index: 5;
  padding: 6px 10px; background: var(--paper); color: var(--ink);
}
.skip:focus-visible { top: var(--top); }

.noscript { padding: 40px var(--gutter); font: 16px/1.5 var(--f-disp); }

/* index.html's safety net: the site's code didn't start — never a black screen. */
.bootfail {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px var(--gutter);
  background: var(--bg); color: var(--fg);
  font: 400 var(--fs-ui)/1.4 var(--f-ui); letter-spacing: .03em; text-transform: uppercase;
  text-align: center;
}
.bootfail__name { font: 700 clamp(28px, 7vw, 56px)/1 var(--f-disp); font-stretch: 125%; letter-spacing: 0; }
.bootfail__role, .bootfail__msg { color: var(--fg-55); }
.bootfail__msg { margin-top: 18px; text-transform: none; letter-spacing: .01em; }
.bootfail__btn { margin-top: 6px; padding: 14px 20px 13px; border: 1px solid rgb(255 255 255 / .45); }

/* Each page lives in its own layer, so the next one can grow out of it. */
.layer { position: relative; }

/* 3. Header ---------------------------------------------------------------- */

.hdr {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 40px);
  padding: calc(var(--top) + var(--st)) var(--sr) 0 var(--sl);
  color: var(--paper);
  pointer-events: none;
  transition: opacity .8s ease;
}
.hdr > * {
  pointer-events: auto;
  transition: opacity .9s var(--e-out);
}
/* Veil behind the header once a page scrolls under it. */
.hdr::before {
  content: "";
  position: absolute; inset: 0 0 -26px 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(10 10 9 / .96) 0%, rgb(10 10 9 / .86) 55%, rgb(10 10 9 / 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
html:not([data-media]).is-scrolled:not(.menu-open) .hdr::before { opacity: 1; }

.hdr__nav { display: flex; gap: clamp(16px, 1.8vw, 32px); margin-left: auto; }
.hdr__tools { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 32px); }
.hdr__menu { display: none; }

html.is-intro .hdr > * { opacity: 0; pointer-events: none; }
.hdr > :nth-child(3) { transition-delay: .08s; }
.hdr > :nth-child(4) { transition-delay: .16s; }
/* The opening hides the header before the page shows — at once, or it would still be fading out as the page fades in. */
html.is-booting .hdr > * { transition: none; }

/* Wordmark */
.brand {
  position: relative;
  display: inline-flex;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(15px, 1.12vw, 20px);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand .ch { display: inline-block; transition: transform .8s var(--e-expo); }
.brand .ch:nth-child(2) { transition-delay: .02s; }
.brand .ch:nth-child(3) { transition-delay: .04s; }
.brand .ch:nth-child(4) { transition-delay: .06s; }
.brand .ch:nth-child(5) { transition-delay: .08s; }
.brand .ch:nth-child(6) { transition-delay: .1s; }
.brand .ch--sp { width: .4em; }
@media (hover: hover) {
  .brand:hover .ch { transform: translateY(var(--ty, 0)); }
}

/* Sound toggle */
.hdr__sound { display: inline-flex; align-items: center; gap: .7em; }
.hdr__sound-state { color: var(--fg-55); min-width: 3ch; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 10px; }
.wave i {
  width: 1px; height: 100%;
  background: currentColor;
  transform: scaleY(.2);
  transition: transform .5s var(--e-out);
}
.hdr__sound.is-on .wave i { animation: wave 1.2s ease-in-out infinite; }
/* Live: the bars are the film's soundtrack, lows to highs (lib/meter.js). */
.hdr__sound.is-live .wave i { animation: none; transition: transform .07s linear; transform-origin: 50% 100%; }
.hdr__sound.is-on .wave i:nth-child(2) { animation-delay: -.45s; }
.hdr__sound.is-on .wave i:nth-child(3) { animation-delay: -.9s; }
.hdr__sound.is-on .wave i:nth-child(4) { animation-delay: -.2s; }
.hdr__sound.is-on .wave i:nth-child(5) { animation-delay: -.7s; }
.hdr__sound.is-hint { animation: hint .9s ease 3; }
html:not([data-media]) .hdr__sound { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }

@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes hint { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

.lang { display: inline-flex; gap: .45em; }
.lang span { opacity: .35; }
.lang button { opacity: .45; transition: opacity .3s ease; }
.lang button[aria-pressed="true"] { opacity: 1; }
@media (hover: hover) { .lang button:hover { opacity: 1; } }

/* Type over footage gets a whisper of shadow — invisible, but legible on white shirts. */
[data-layout="over"] .slate,
[data-layout="over"] .spec,
[data-layout="over"] .tl__bar,
.film[data-layout="over"]:not(.is-info) .film__ctl,
.film[data-layout="over"]:not(.is-info) .film__cap,
html[data-media] .hdr {
  text-shadow: 0 0 18px rgb(0 0 0 / .35), 0 0 1px rgb(0 0 0 / .3);
}

/* 4. Links & glyphs -------------------------------------------------------- */

/* Hover draws a hairline under the label; "you are here" gets a tally dot. */
.lnk {
  position: relative;
  display: inline-flex;
  align-items: center;
  opacity: .62;
  transition: opacity .35s ease;
}
.lnk::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .6s var(--e-expo);
}
.lnk[aria-current="page"],
.lnk[aria-pressed="true"],
.lnk[aria-expanded="true"] { opacity: 1; }
.lnk[aria-current="page"]::before,
.lnk[aria-pressed="true"]::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-right: .75em;
  background: var(--accent);
}
@media (hover: hover) {
  .lnk:hover { opacity: 1; }
  .lnk:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}

/* A film's shape, drawn small: 16:9 is a wide box, 9:16 a tall one. */
.glyph {
  --h: 20px;
  position: relative;
  display: inline-block;
  flex: none;
  width: max(8px, calc(var(--h) * var(--ar, 1.7778)));
  height: var(--h);
  border: 1px solid currentColor;
  overflow: hidden;
  vertical-align: middle;
}

/* A network's mark, in the page's ink and at the weight of its hairlines
   (24-unit drawing, 1px line at 12px). Beside a name it sits on the baseline,
   then drops by half itself less half the capitals (Fragment Mono's are .703em):
   centred on the letters at any size or pixel density, which centring on the
   line is not. The underline is for the name only. */
.icon {
  flex: none;
  width: 12px; height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.icon__dot { fill: currentColor; stroke: none; }
.lnk--icon { gap: .75em; align-items: baseline; }
.lnk--icon .icon { transform: translateY(calc(6px - .3516em)); }
.lnk--icon::after { left: calc(12px + .75em); }

/* 5. Stage & masks --------------------------------------------------------- */

.stage { position: absolute; inset: 0; overflow: hidden; background: var(--black); }

/* The box a picture is drawn in: sized and placed by stage.js. object-fit:
   cover inside a box of the picture's true ratio also trims bars baked into a file. */
.pic {
  position: absolute; left: 0; top: 0;
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform;
  background: var(--black);
}
.pic video {
  display: block;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
}
/* On the home, a film's first frame as a picture (content/stills.js): a cut to a
   film still on its way shows it at once, and the film takes over as it moves. */
.pic__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.pic.is-still .pic__still { opacity: 1; }

.deck, .deck__l { position: absolute; inset: 0; }
.deck__l { opacity: 0; z-index: 0; }
.deck__l.is-behind { opacity: 1; z-index: 1; }
.deck__l.is-front { opacity: 1; z-index: 2; transition: opacity var(--xfade, 0ms) var(--xease, linear); }
/* (A film on its way out keeps its colour: the change goes straight to the next one.) */

/* The lamp: before the first film, the open frame is lit but empty. */
.stage { transition: background-color .6s ease; }
.is-lamp > .stage { background: #121210; }
/* As the first film fades up out of it, the film's light on the masks fades up in step. */
.is-lamp .glow { transition: opacity var(--xfade, 0ms) var(--xease, linear); }

/* Masking: four black panels; their inner edges are the edges of the picture. */
.masks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mask {
  position: absolute; inset: 0;
  background: var(--black);
  will-change: transform;
}
/* The film's light on the masks: a soft spill from each edge of the picture.
   stage.js fits each glow to its edge of the window (it is gone by the corners)
   and sets --lit: only a mask with room to be a wall catches the light. */
.glow {
  position: absolute;
  pointer-events: none;
  opacity: calc(var(--amb-o, 0) * var(--lit, 1));
  transform-origin: 0 0;
  will-change: transform;
  transition: opacity 1.2s ease;
}
.mask--l .glow, .mask--r .glow { top: 0; bottom: 0; width: min(52vw, 760px); }
.mask--t .glow, .mask--b .glow { left: 0; right: 0; height: min(46vh, 480px); }
.mask--l .glow { right: 0; background: radial-gradient(100% 50% at 100% 50%, color-mix(in srgb, var(--amb-l) 34%, transparent), transparent); }
.mask--r .glow { left: 0; background: radial-gradient(100% 50% at 0% 50%, color-mix(in srgb, var(--amb-r) 34%, transparent), transparent); }
.mask--t .glow { bottom: 0; background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--amb-t) 34%, transparent), transparent); }
.mask--b .glow { top: 0; background: radial-gradient(50% 100% at 50% 0%, color-mix(in srgb, var(--amb-b) 34%, transparent), transparent); }
.reel, .film { transition: --amb-t .45s linear, --amb-r .45s linear, --amb-b .45s linear, --amb-l .45s linear; }
/* Viewfinder marks at the corners of the window. */
.mark {
  position: absolute; left: 0; top: 0;
  width: 13px; height: 13px;
  border: 0 solid var(--fg-55);
  will-change: transform;
  transition: opacity .6s ease;
}
.mark--tl { border-width: 1px 0 0 1px; }
.mark--tr { border-width: 1px 1px 0 0; }
.mark--bl { border-width: 0 0 1px 1px; }
.mark--br { border-width: 0 1px 1px 0; }
.masks.is-open .mark,
.masks.is-shut .mark,
.masks.is-flush:not(.is-moving) .mark { opacity: 0; }
/* The window's shape, read out while it moves — like a reframe tool. */
.masks__ar {
  position: absolute; left: 0; top: 0;
  color: var(--fg-55);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s ease;
}
.masks.is-moving .masks__ar { opacity: 1; }

.scrim {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .1) 12%, rgb(0 0 0 / 0) 22%,
    rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .22) 74%, rgb(0 0 0 / .66) 100%);
}
[data-layout="over"] > .scrim { opacity: 1; }

.tap {
  position: absolute; z-index: 14; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 20px 13px;
  color: var(--paper);
  border: 1px solid rgb(255 255 255 / .45);
  background: rgb(0 0 0 / .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* A swipe while the film waits for a tap: the button answers. */
.tap.is-nudge { animation: nudge .7s var(--e-out); }
@keyframes nudge { 30% { transform: translate(-50%, -50%) scale(1.07); border-color: var(--paper); background: rgb(0 0 0 / .45); } }

/* 6. Home (reel) ----------------------------------------------------------- */

.reel {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--paper);
  touch-action: manipulation; /* two quick taps on an edge are two films, never a zoom */
}
.reel--empty { display: grid; place-items: center; }
.reel.is-over { cursor: none; }

/* Words — the title on one mask, the specs on the other. */
.slate, .spec { position: absolute; z-index: 8; pointer-events: none; }
.slate { transition: opacity .6s ease; }
.slate a, .spec a { pointer-events: auto; }

.slate__client {
  font-family: var(--f-disp);
  font-weight: 650;
  font-stretch: 62%;
  font-size: calc(clamp(40px, 6vw, 110px) * var(--name));
  line-height: .8;
  letter-spacing: -.004em;
  text-transform: uppercase;
}
.slate__client .fit, .film__client .fit { display: inline-block; white-space: nowrap; }
.slate__title {
  margin-top: .55em;
  font-family: var(--f-disp);
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-size: clamp(19px, 1.75vw, 32px);
  line-height: 1.05;
  letter-spacing: -.01em;
}

.spec__dl { display: grid; width: 100%; }
.spec__dl > div {
  display: flex; justify-content: space-between; gap: 1.5em;
  padding: 8px 0 9px;
  border-bottom: 1px solid var(--fg-12);
}
.spec__dl > div:first-child { border-top: 1px solid var(--fg-12); }
.spec__dl dt { color: var(--fg-40); }
/* Rows lettered like a camera report: A, B, C… */
.spec__dl dt i, .film__spec dt i {
  display: inline-block;
  width: 2.2em;
  font-style: normal;
  font-size: .82em;
  color: var(--fg-22);
}
.spec__cta {
  display: inline-flex; align-items: center; gap: .9em;
  margin-top: 26px;
  opacity: 1;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(12px, .9vw, 15px);
  letter-spacing: .07em;
}
.spec__cta b { font-weight: 400; transition: transform .6s var(--e-expo); }
@media (hover: hover) { .spec__cta:hover b { transform: translateX(6px); } }

/* side: a vertical film on a landscape screen — words flank the frame. */
.reel[data-layout="side"] .slate,
.reel[data-layout="side"] .spec {
  top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.reel[data-layout="side"] .slate {
  left: var(--sl);
  width: calc(var(--wx) * 1px - var(--sl) - var(--gutter) * 1.6);
}
.reel[data-layout="side"] .slate__client { font-weight: 700; }
.reel[data-layout="side"] .spec {
  left: calc((var(--wx) + var(--ww)) * 1px + var(--gutter) * 1.6);
  right: var(--sr);
  align-items: flex-end;
}
.reel[data-layout="side"] .spec__dl { max-width: 330px; }

/* over: the film fills the screen — a title card low on the picture. */
.reel[data-layout="over"] .slate {
  left: var(--sl);
  right: 36%;
  bottom: calc(var(--gutter) + var(--sb) + 92px);
}
.reel[data-layout="over"] .slate__client {
  font-stretch: 125%;
  font-weight: 600;
  font-size: calc(clamp(30px, 4.3vw, 82px) * var(--name));
  line-height: .88;
  letter-spacing: .015em;
}
.reel[data-layout="over"] .spec {
  right: var(--sr);
  bottom: calc(var(--gutter) + var(--sb) + 2px);
  display: flex; flex-direction: column; align-items: flex-end;
}

/* band: a wide film on a phone held upright — words in the mask below. */
.reel[data-layout="band"] .slate {
  left: var(--sl); right: var(--sr);
  top: calc((var(--wy) + var(--wh)) * 1px + 30px);
}
.reel[data-layout="band"] .slate__client { font-stretch: 100%; font-weight: 650; }
.reel[data-layout="band"] .spec {
  left: var(--sl); right: var(--sr);
  bottom: calc(var(--gutter) + var(--sb) + 64px);
}

/* Compact specs (over / band): category and year on one line, then the call. */
.reel:not([data-layout="side"]) .spec__dl { display: flex; gap: 1.4em; width: auto; }
.reel:not([data-layout="side"]) .spec__dl > div { padding: 0; border: 0; gap: .6em; }
.reel:not([data-layout="side"]) .spec__dl dt i { display: none !important; }
.reel:not([data-layout="side"]) .spec__cta { margin-top: 14px; }

/* The timeline: the whole selection as one sequence — a tick a second, a clip
   per film, the red playhead running through it. Pointed at, the ruler opens
   into a filmstrip: every film's frames at its own shape. */
.tl {
  position: absolute; z-index: 9;
  left: var(--sl);
  bottom: calc(var(--gutter) + var(--sb));
  width: var(--tlw, 420px);
  transition: opacity .8s ease;
}
.tl__bar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 11px;
  white-space: nowrap;
}
.tl__no { display: inline-flex; align-items: center; gap: 9px; }
.tl__no .glyph { --h: 11px; transition: width .6s var(--e-mask); }
.glyph__fill {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.tl__cap {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .3s ease;
}
.tl__cap em { font-style: normal; color: var(--fg-55); }
.tl.is-peek .tl__cap { opacity: 1; }
.tl__tc { margin-left: auto; color: var(--fg-55); }
.reel.is-paused .tl__tc { animation: blink 1s steps(1) infinite; }

.tl__track {
  position: relative;
  display: flex; align-items: flex-end;
  gap: 5px;
  height: 11px;
  transition: height .6s var(--e-expo);
}
.tl__track.is-open { height: 46px; }
.tl__seg {
  position: relative;
  flex: var(--len) 1 0;
  min-width: 6px;
  height: 100%;
  overflow: hidden;
}
/* At rest: a ruler. The head of each clip is a taller tick. */
.tl__ticks {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px calc(100% / var(--len)));
  opacity: .28;
  transition: opacity .45s ease;
}
.tl__seg::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 1px; height: 11px;
  background: currentColor;
  opacity: .5;
  transition: opacity .45s ease;
}
.tl__seg.is-active .tl__ticks { opacity: .9; }
.tl__seg.is-active::before { opacity: 1; }
/* Open: the filmstrip. Black and white, but for the film on screen and the one pointed at. */
.tl__frames {
  position: absolute; inset: 0;
  display: flex;
  opacity: 0;
  filter: grayscale(1) brightness(.5);
  transition: opacity .45s ease, filter .5s ease;
}
.tl__frames i { flex: none; height: 100%; }
.tl__track.is-open .tl__frames { opacity: 1; }
.tl__track.is-open .tl__ticks,
.tl__track.is-open .tl__seg::before { opacity: 0; }
.tl__seg.is-active .tl__frames,
.tl__seg.is-hover .tl__frames { filter: none; }
.tl__head {
  position: absolute; left: 0; top: -5px; bottom: -3px;
  width: 1px; margin-left: -.5px;
  background: var(--accent);
  pointer-events: none;
  will-change: transform;
}
.tl__head::before {
  content: "";
  position: absolute; left: -2px; top: 0;
  width: 5px; height: 5px;
  background: var(--accent);
}
.tl__ghost {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.tl__track.is-hover .tl__ghost { opacity: .7; }
.tl__hint {
  position: absolute; left: 0; bottom: 100%;
  margin-bottom: 12px;
  color: var(--fg-40);
  white-space: nowrap;
  transition: opacity .8s ease;
}
.tl__hint.is-gone { opacity: 0; }
html.is-intro .tl { opacity: 0; pointer-events: none; }
/* The words step back while the timeline is open; everything leaves as the film is handed over. */
.reel.is-tl .slate, .reel.is-tl .spec.is-in { opacity: .12; }
.reel.is-handing .tl, .reel.is-handing .scrim { opacity: 0; transition: opacity .3s ease; }

/* Chrome steps back while the footage plays on its own. */
html.is-idle .hdr,
html.is-idle .tl,
html.is-idle .film__ctl,
html.is-idle .film__cap,
html.is-idle .film__bar,
html.is-idle .reel[data-layout="over"] .slate,
html.is-idle .reel[data-layout="over"] .spec,
html.is-idle .reel[data-layout="over"] > .scrim,
html.is-idle .film[data-layout="over"]:not(.is-info) > .scrim { opacity: 0; }
html.is-idle .reel,
html.is-idle .film { cursor: none; }
.slate, .spec, .film__cap, .film__ctl, .film__bar { transition-property: opacity, transform; }

@keyframes blink { 50% { opacity: 0; } }

/* 7. Film (project) -------------------------------------------------------- */

.film {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--paper);
}
.film.is-over { cursor: none; }
/* Grown from the Archive: the page stays lit around the frame, then the masks
   darken the room as the frame takes the screen. */
.film .masks { transition: opacity .9s ease; }
.film.is-growing .masks { opacity: 0; }
.film.is-growing, .film.is-landing,
.film.is-growing > .stage, .film.is-landing > .stage { background: transparent; }
.film__still {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  transition: opacity .5s ease;
}
.film__still.is-gone { opacity: 0; }
.film.is-landing .film__ctl,
.film.is-landing .film__bar,
.film.is-landing .film__cap { opacity: 0; }

/* Full screen on a phone (views/project.js): the film alone, filling the whole
   screen along the side its shape runs. Where the browser can't turn the screen
   (an iPhone), the film turns on it — a wide film on a phone held upright lies
   down (90), a vertical one on a phone held sideways stands up (-90): its box
   takes the screen's sides swapped, and its edges the safe areas they now meet. */
html.is-full .hdr { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
html.is-full .grain { display: none; }
.film[data-turn] {
  inset: auto;
  top: 50%; left: 50%;
  width: 100vh; width: 100dvh;
  height: 100vw; height: 100dvw;
}
.film[data-turn="90"] {
  transform: translate(-50%, -50%) rotate(90deg);
  --sl: max(var(--gutter), env(safe-area-inset-top, 0px));
  --sr: max(var(--gutter), env(safe-area-inset-bottom, 0px));
  --st: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-left, 0px);
}
.film[data-turn="-90"] {
  transform: translate(-50%, -50%) rotate(-90deg);
  --sl: max(var(--gutter), env(safe-area-inset-bottom, 0px));
  --sr: max(var(--gutter), env(safe-area-inset-top, 0px));
  --st: env(safe-area-inset-left, 0px);
  --sb: env(safe-area-inset-right, 0px);
}
/* A vertical film standing on a phone held sideways: the narrow box of a phone
   held upright, so the same compact controls (see max-width: 560px). */
.film.is-narrow .film__tc i,
.film.is-narrow .film__tc [data-dur] { display: none; }
.film.is-narrow .film__ctl { column-gap: 12px; }
/* While it turns nothing is cropped, so the picture never jumps, and the chrome steps off. */
.film.is-turning, .film.is-turning > .stage { overflow: visible; }
.film.is-turning .masks,
.film.is-turning > .scrim,
.film.is-turning .film__ctl,
.film.is-turning .film__bar,
.film.is-turning .film__cap { opacity: 0; transition: none; }

.film__panel { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.film__panel > * { pointer-events: auto; }

.film__client {
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 62%;
  font-size: calc(clamp(44px, 6vw, 120px) * var(--name));
  line-height: .8;
  letter-spacing: -.004em;
  text-transform: uppercase;
}
.film__title {
  margin-top: .55em;
  font-family: var(--f-disp);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.7vw, 30px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.film__desc {
  max-width: 36ch;
  margin-top: clamp(22px, 2.4vw, 40px);
  font-family: var(--f-disp);
  font-weight: 350;
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.5;
  color: var(--fg-70);
  text-wrap: pretty;
}

.film__spec { display: grid; }
.film__spec > div {
  display: flex; justify-content: space-between; gap: 1.5em;
  padding: 8px 0 9px;
  border-bottom: 1px solid var(--fg-12);
}
.film__spec > div:first-child { border-top: 1px solid var(--fg-12); }
.film__spec dt { color: var(--fg-40); }
.film__credits {
  display: grid; gap: 14px;
  margin-top: clamp(26px, 3vw, 44px);
}
.film__credits dt { color: var(--fg-40); margin-bottom: 3px; }
.film__credits dd {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.2;
}
.film__next {
  display: grid; gap: 10px;
  margin-top: clamp(30px, 3.6vw, 56px);
  padding-top: 14px;
  border-top: 1px solid var(--fg-22);
  opacity: .72;
  transition: opacity .4s ease;
}
.film__next-k { color: var(--fg-55); }
.film__next-name {
  display: flex; align-items: center; gap: .6em;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.film__next-name em { font-style: italic; font-weight: 300; font-stretch: 100%; letter-spacing: 0; text-transform: none; }
.film__next-name .glyph { --h: 14px; }
@media (hover: hover) { .film__next:hover { opacity: 1; } }

/* side: a vertical film on a landscape screen — its words flank the frame. */
.film[data-layout="side"] .film__head,
.film[data-layout="side"] .film__side {
  position: absolute;
  top: calc(var(--top) + 70px); bottom: calc(var(--gutter) + 30px);
  display: flex; flex-direction: column; justify-content: center;
}
.film[data-layout="side"] .film__head {
  left: var(--sl);
  width: calc(var(--wx) * 1px - var(--sl) - var(--gutter) * 1.6);
}
.film[data-layout="side"] .film__side {
  left: calc((var(--wx) + var(--ww)) * 1px + var(--gutter) * 1.6);
  right: var(--sr);
  align-items: flex-end;
}
.film[data-layout="side"] .film__side > * { width: 100%; max-width: 360px; }
.film[data-layout="side"] .film__cap { display: none; }

/* band (a wide film on a phone) and INFO: the words in the mask beside/below. */
.film[data-layout="band"] .film__panel,
.film.is-info .film__panel {
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.film[data-layout="band"] .film__panel {
  top: calc((var(--wy) + var(--wh)) * 1px + 64px);
  padding: 8px var(--sr) calc(var(--gutter) * 2 + var(--sb)) var(--sl);
}
.film[data-panel="right"] .film__panel {
  left: calc((var(--wx) + var(--ww)) * 1px);
  padding: calc(var(--top) + 84px) var(--sr) calc(var(--gutter) * 3) calc(var(--gutter) * 1.6);
}
.film[data-panel="bottom"] .film__panel {
  top: calc((var(--wy) + var(--wh)) * 1px + 64px);
  padding: 8px var(--sr) calc(var(--gutter) * 2 + var(--sb)) var(--sl);
}
.film[data-layout="band"] .film__side,
.film.is-info .film__side { margin-top: clamp(34px, 4vw, 60px); }
.film[data-layout="band"] .film__cap,
.film.is-info .film__cap { display: none; }

/* over, INFO closed: the words wait off stage. */
.film[data-layout="over"]:not(.is-info) .film__panel { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.film[data-layout="over"].is-info .film__panel { opacity: 1; visibility: visible; transition: opacity .7s ease .35s; }

/* Words arrive once the curtain has parted. */
.film .ln > span { transition-delay: calc(.45s + var(--k, 0) * 80ms); }
.film.is-open .film__head .ln > span { transform: none; }
.film .lt { --lt-d: .5s; }
.film.is-open .film__head .lt { clip-path: inset(-15% -8% -15% -8%); }
.film__desc, .film__side { opacity: 0; transition: opacity 1s ease .9s; }
.film.is-open .film__desc,
.film.is-open .film__side { opacity: 1; }

/* Caption and controls. */
.film__cap {
  position: absolute; z-index: 10;
  left: var(--sl); right: var(--sr);
  bottom: calc(var(--gutter) + var(--sb) + 40px);
  display: flex; align-items: baseline; gap: .5em;
  transition: opacity .6s ease;
}
.film__cap em { font-style: italic; text-transform: none; font-family: var(--f-disp); font-weight: 300; font-size: 1.35em; letter-spacing: 0; }

.film__ctl {
  position: absolute; z-index: 11;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px clamp(16px, 1.6vw, 28px);
  transition: opacity .6s ease;
}
.film__tc { display: inline-flex; gap: .7em; }
.film__tc i { font-style: normal; color: var(--fg-40); }
.film__tc [data-dur] { color: var(--fg-55); }
.film__gap { flex: 1; }
.film__ctl .lnk[data-act="play"] { min-width: 7ch; }

/* The scrub bar: a hairline, a buffer, the played part, a red head. */
.film__bar {
  position: absolute; z-index: 12;
  height: 18px;
  cursor: pointer;
  touch-action: none; /* let the finger scrub instead of scrolling */
  transition: opacity .6s ease;
}
.film__bar::before,
.film__buf,
.film__played {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  transform-origin: 0 50%;
}
.film__bar::before { background: rgb(255 255 255 / .16); }
.film__buf { background: rgb(255 255 255 / .28); transform: scaleX(0); }
.film__played { background: var(--paper); transform: scaleX(0); }
.film__knob {
  position: absolute; left: 0;
  width: 5px; height: 9px; margin-left: -2px;
  background: var(--accent);
}
.film[data-state="buffering"] .film__knob,
.film[data-state="loading"] .film__knob { animation: blink .8s steps(1) infinite; }
/* Pointing at the bar shows the frame there, from the film's strip, with its timecode. */
.film__peek {
  position: absolute; bottom: 100%; left: 0;
  margin-bottom: 12px;
  display: grid; justify-items: center; gap: 8px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.film__bar.is-hover .film__peek,
.film.is-scrubbing .film__peek { opacity: 1; }
.film__peek-img {
  display: none;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 16px 48px rgb(0 0 0 / .55);
}
.film__peek.has-frame .film__peek-img { display: block; }
.film__at { white-space: nowrap; text-shadow: 0 0 12px rgb(0 0 0 / .6); }

/* over and side (the film runs to the foot of the screen): controls along the bottom edge. */
.film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__ctl {
  left: var(--sl); right: var(--sr);
  bottom: calc(var(--gutter) + var(--sb) + 4px);
}
.film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__bar { left: 0; right: 0; bottom: var(--sb); }
.film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__bar::before,
.film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__buf,
.film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__played { bottom: 0; }
.film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__knob { bottom: 0; }

/* A framed film (band, INFO): controls hang under the frame. */
.film:is([data-layout="band"], .is-info) .film__ctl {
  left: max(var(--sl), calc(var(--wx) * 1px));
  right: max(var(--sr), calc(100% - (var(--wx) + var(--ww)) * 1px));
  top: calc((var(--wy) + var(--wh)) * 1px + 20px);
}
.film:is([data-layout="band"], .is-info) .film__bar {
  left: calc(var(--wx) * 1px);
  width: calc(var(--ww) * 1px);
  top: calc((var(--wy) + var(--wh)) * 1px - 9px);
}
.film:is([data-layout="band"], .is-info) .film__bar::before,
.film:is([data-layout="band"], .is-info) .film__buf,
.film:is([data-layout="band"], .is-info) .film__played { top: 9px; }
.film:is([data-layout="band"], .is-info) .film__knob { top: 5px; }
/* A small frame over a sheet of words (phone, INFO): the controls take the full width. */
.film[data-panel="bottom"] .film__ctl { left: var(--sl); right: var(--sr); }
/* The shape readout is the reel's flourish; here the controls live under the frame. */
.film .masks__ar { display: none; }
.film[data-layout="side"] .film__infobtn,
.film[data-layout="band"] .film__infobtn { display: none; }

/* End of the film: what's next, set on the frame itself. */
.film__end {
  position: absolute; z-index: 13;
  left: calc(var(--wx) * 1px); top: calc(var(--wy) * 1px);
  width: calc(var(--ww) * 1px); height: calc(var(--wh) * 1px);
  display: grid; place-content: center; justify-items: center;
  gap: 18px;
  padding: 20px;
  text-align: center;
  background: rgb(0 0 0 / .62);
  animation: fade .8s var(--e-out) both;
}
.film__end > p { color: var(--fg-55); }
.film__end-link {
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 62%;
  font-size: calc(min(7vw, calc(var(--ww) * .16px), 110px) * var(--name));
  line-height: .85;
  text-transform: uppercase;
}
.film__end-link em { display: block; margin-top: .25em; font-style: italic; font-weight: 300; font-stretch: 100%; text-transform: none; font-size: .36em; }

@keyframes fade { from { opacity: 0; } }

/* 8. Pages ----------------------------------------------------------------- */

.page {
  min-height: 100vh;
  padding: calc(var(--top) + var(--st) + clamp(110px, 12vw, 190px)) var(--sr) 0 var(--sl);
}

.page__title {
  display: flex; align-items: flex-start;
  margin-left: -.04em;
  font-family: var(--f-disp);
  font-weight: 250;
  font-stretch: 125%;
  font-size: clamp(50px, 11.4vw, 224px);
  line-height: .8;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.page__title sup {
  margin: .2em 0 0 .7em;
  font-size: var(--fs-ui);
  line-height: 1;
  vertical-align: 0;
  color: var(--fg-55);
}

/* Footer */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 10px 28px;
  margin-top: clamp(100px, 13vw, 210px);
  padding: 18px 0 calc(var(--gutter) + var(--sb));
  border-top: 1px solid var(--fg-12);
  color: var(--fg-55);
}
.foot .lnk { color: var(--paper); }

/* 404: the masks shut to a line of light. */
.nf {
  display: grid; place-content: center; justify-items: center;
  gap: 20px;
  padding-top: 0;
  text-align: center;
}
.nf__slit {
  width: 1px; height: clamp(90px, 22vh, 220px);
  background: var(--paper);
  box-shadow: 0 0 24px 2px rgb(239 235 227 / .35);
  animation: slit 3.2s var(--e-io) infinite;
}
@keyframes slit { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
.nf__tc { color: var(--fg-55); animation: blink 1.2s steps(1) infinite; }
.nf__title {
  font-family: var(--f-disp);
  font-weight: 250;
  font-stretch: 125%;
  font-size: clamp(32px, 5.6vw, 100px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.nf__text { font-family: var(--f-disp); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.5vw, 24px); color: var(--fg-70); }
.nf__back { margin-top: 12px; }

/* 9. Archive --------------------------------------------------------------- */

.arc__lede {
  max-width: 34ch;
  margin-top: clamp(24px, 2.6vw, 40px);
  font-family: var(--f-disp);
  font-weight: 350;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.45;
  color: var(--fg-55);
}
/* The pointer text breaks at its semicolon (at 34ch "it." sat alone on a third line; 37–41ch all break here). */
.arc__lede[data-t="archive_lede"] { max-width: 39ch; }
.arc__bar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px 32px;
  margin-top: clamp(40px, 4.6vw, 76px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fg-40);
}
.arc__filters { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.arc__filters sup { margin-left: .45em; opacity: .5; font-size: .82em; }
.arc__modes { display: flex; gap: 26px; }

/* Contact sheet — justified rows: a frame grows in proportion to its aspect
   ratio, so every frame in a row ends up the same height and no film is
   cropped. Growth stops at 1.5× — frames reach it together, so a short last
   row keeps its proportions instead of blowing up. */
.sheet {
  --row: clamp(240px, 27vw, 480px);
  display: flex; flex-wrap: wrap;
  gap: clamp(40px, 4.4vw, 72px) clamp(14px, 1.4vw, 24px);
  padding-top: clamp(30px, 3.2vw, 52px);
}
.card {
  flex: calc(var(--ar, 1.7778) * 1000) 1 calc(var(--ar, 1.7778) * var(--row));
  max-width: calc(var(--ar, 1.7778) * var(--row) * 1.5);
  min-width: 0;
  container-type: inline-size;
}
.card__a { display: block; }
.card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ar, 16 / 9);
  overflow: hidden;
  background: #111110;
}
.card__media img,
.card__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .5s ease;
}
.card__media video { opacity: 0; }
.card.is-playing .card__media video { opacity: 1; }
/* Viewfinder corners close in on the frame you're looking at. */
.card__media::after {
  content: "";
  position: absolute; inset: 4px; z-index: 2;
  pointer-events: none;
  opacity: 0;
  --c: rgb(239 235 227 / .9);
  background:
    linear-gradient(var(--c), var(--c)) left top / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px 14px no-repeat;
  transition: opacity .35s ease, inset .7s var(--e-expo);
}
@media (hover: hover) {
  .card__a:hover .card__media::after { opacity: 1; inset: 12px; }
}
/* Scrub: a red line and the film's timecode under the finger. */
.card__scrub {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  height: 2px;
  opacity: 0;
  transition: opacity .25s ease;
}
.card.is-scrubbing .card__scrub { opacity: 1; }
.card__scrub i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--k, 0) * 100%);
  background: var(--accent);
}
.card__scrub b {
  position: absolute; bottom: 12px;
  left: clamp(4.5ch, calc(var(--k, 0) * 100%), calc(100% - 4.5ch));
  transform: translateX(-50%);
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 0 12px rgb(0 0 0 / .6);
}
.card__meta { display: grid; gap: 10px; padding-top: 14px; }
.card__top { display: flex; align-items: center; gap: 12px; color: var(--fg-55); }
.card__top .glyph { --h: 11px; }
.card__dur { margin-left: auto; }
.card__name {
  font-family: var(--f-disp);
  font-size: clamp(18px, 1.45vw, 26px);
  line-height: 1.08;
}
.card__client {
  font-weight: 600;
  font-stretch: 125%;
  font-size: .8em;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.card__name em { font-style: italic; font-weight: 300; }
/* Narrow (vertical) frames stack the title under the client. */
@container (max-width: 300px) {
  .card__name em { display: block; margin-top: .15em; }
}

/* List */
.arc { --cols: 40px minmax(0, 1fr) 14ch 6ch 8ch; }
.arc__cols {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gutter);
  padding: 14px 0 10px;
  color: var(--fg-40);
}
.arc__cols > :nth-child(n + 4),
.row__year,
.row__dur { text-align: right; }
.row { border-bottom: 1px solid var(--fg-12); }
.row__a {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gutter);
  align-items: center;
  padding: clamp(14px, 1.3vw, 24px) 0;
  transition: opacity .5s ease;
}
.row__glyph .glyph { --h: 16px; }
.row__name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--f-disp);
  font-size: calc(clamp(26px, 3.3vw, 60px) * var(--name));
  line-height: 1.02;
  transition: transform .9s var(--e-expo);
}
.row__client {
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.row__title { font-style: italic; font-weight: 300; }
.row__cat, .row__year, .row__dur { color: var(--fg-70); }
.row__thumb { display: none; }
@media (hover: hover) {
  .arc__list:hover .row__a { opacity: .22; }
  .arc__list .row__a:hover { opacity: 1; }
  .row__a:hover .row__name { transform: translateX(14px); }
}

.float {
  --long: clamp(240px, 23vw, 420px);
  position: fixed; z-index: 30; left: 0; top: 0;
  width: calc(var(--long) * min(1, var(--ar, 1.7778)));
  height: calc(var(--long) / max(1, var(--ar, 1.7778)));
  overflow: hidden;
  background: #151513;
  pointer-events: none;
  will-change: transform;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path .7s var(--e-expo), width .6s var(--e-expo), height .6s var(--e-expo);
}
.float.is-on { clip-path: inset(0 0 0 0); }
.float video { width: 100%; height: 100%; object-fit: cover; }

/* Colour belongs to the film in focus: the sheet waits in black and white. */
.card__media img { filter: grayscale(1) brightness(.8); transition: filter .6s ease, opacity .5s ease; }
.card.is-playing .card__media img { filter: none; }
@media (hover: hover) { .card__a:hover .card__media img { filter: none; } }

/* Mode switch: Folha de contato · Lista · Rolo. */
.modes { display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 1.8vw, 28px); }
.modes--fixed {
  position: fixed; z-index: 20;
  left: var(--sl);
  bottom: calc(var(--gutter) + var(--sb));
}

/* 9b. Archive — the reel of frames ------------------------------------------ */

/* The films run in a column through a viewfinder: each at its own shape, all
   with the same area; the one in the viewfinder plays, in colour. */
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }
.rolo {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--paper);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.rolo:focus { outline: none; }
.rolo__col { position: absolute; inset: 0; }
.rolo__it {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.rolo__it.is-far { visibility: hidden; }
.rolo__a { display: block; width: 100%; height: 100%; }
.rolo.is-dragging, .rolo.is-dragging .rolo__a { cursor: grabbing; }
.rolo__media {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #121210;
}
.rolo__media img,
.rolo__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.rolo__media video { opacity: 0; transition: opacity .45s ease; }
.rolo__it.is-playing video { opacity: 1; }

.rolo__vf { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rolo__vf .mark { width: 16px; height: 16px; border-color: var(--paper); }
.rolo__ar, .rolo__tc {
  position: absolute; left: 0; top: 0;
  color: var(--fg-55);
  white-space: nowrap;
  will-change: transform;
}
.rolo__vf.is-moving .rolo__ar { color: var(--paper); }
/* Right-aligned on the viewfinder's right edge. */
.rolo__tc { width: 0; display: flex; justify-content: flex-end; }

/* The names run with the reel, like a wheel; the one in the viewfinder is lit. */
.rolo__side {
  position: absolute; z-index: 2;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 32%, #000 68%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 10%, #000 32%, #000 68%, transparent 90%);
}
.rolo__names {
  position: absolute;
  left: var(--sl); top: 0;
  pointer-events: auto;
  max-width: calc(100% - var(--half, 240px) - var(--sl) - 24px);
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 62%;
  font-size: calc(clamp(28px, 3.9vw, 70px) * var(--name));
  line-height: 1;
  text-transform: uppercase;
  will-change: transform;
}
.rolo__names li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rolo__names em {
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-size: .3em;
  letter-spacing: 0;
  text-transform: none;
}

.rolo__info {
  position: absolute; z-index: 2;
  left: calc(50% + var(--half, 240px) + clamp(40px, 4.5vw, 80px));
  right: var(--sr);
  top: 50%;
  transform: translateY(-50%);
  max-width: 340px;
}
.rolo__client {
  display: none;
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 62%;
  font-size: calc(clamp(40px, 13vw, 72px) * var(--name));
  line-height: .86;
  text-transform: uppercase;
}
.rolo__title {
  font-family: var(--f-disp);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 32px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.rolo__spec { display: grid; margin-top: clamp(18px, 2vw, 28px); }
.rolo__spec > div {
  display: flex; justify-content: space-between; gap: 1.5em;
  padding: 8px 0 9px;
  border-bottom: 1px solid var(--fg-12);
}
.rolo__spec > div:first-child { border-top: 1px solid var(--fg-12); }
.rolo__spec dt { color: var(--fg-40); }
.rolo__spec dt i { display: inline-block; width: 2.2em; font-style: normal; font-size: .82em; color: var(--fg-22); }
.rolo__cta {
  display: inline-flex; align-items: center; gap: .9em;
  margin-top: 24px;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(12px, .9vw, 15px);
  letter-spacing: .07em;
  opacity: 1;
}
.rolo__cta b { font-weight: 400; transition: transform .6s var(--e-expo); }
@media (hover: hover) { .rolo__cta:hover b { transform: translateX(6px); } }
/* The words for the film in the viewfinder come in one after the other. */
.rolo__info > * { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .25s ease, transform .25s ease; }
.rolo__info.is-in > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s var(--e-expo); }
.rolo__info.is-in > :nth-child(2) { transition-delay: .05s; }
.rolo__info.is-in > :nth-child(3) { transition-delay: .1s; }
.rolo__info.is-in > :nth-child(4) { transition-delay: .16s; }
.rolo__info.is-in > :nth-child(5) { transition-delay: .22s; }
.rolo__hint {
  position: absolute; z-index: 2;
  right: var(--sr);
  bottom: calc(var(--gutter) + var(--sb));
  color: var(--fg-40);
  transition: opacity .8s ease;
}
.rolo__hint.is-gone { opacity: 0; }

/* 10. About ---------------------------------------------------------------- */

.about__lead { padding-bottom: 0; }
.about__k { color: var(--fg-55); margin-bottom: clamp(26px, 3vw, 44px); }
.about__statement {
  max-width: 16.5em;
  font-family: var(--f-disp);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 104px);
  line-height: 1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.about__statement em { font-style: italic; font-weight: 250; }

/* The whole work as one strip of film: every film gets the same length of
   it — a few wide frames or many tall ones — in black and white until pointed at. */
.reelstrip {
  margin: clamp(80px, 10vw, 170px) calc(-1 * var(--sr)) clamp(80px, 10vw, 170px) calc(-1 * var(--sl));
  padding: 22px 0 48px;
  overflow: hidden;
  border-top: 1px solid var(--fg-12);
  border-bottom: 1px solid var(--fg-12);
}
.reelstrip__move { will-change: transform; }
.reelstrip__track {
  display: flex;
  width: max-content;
  animation: strip 110s linear infinite;
}
.reelstrip__run {
  position: relative;
  display: block;
  flex: none;
  margin-right: clamp(14px, 1.4vw, 22px);
  filter: grayscale(1) brightness(.68);
  transition: filter .5s ease;
}
.reelstrip__frames { display: flex; gap: 2px; height: var(--fh, 120px); }
.reelstrip__frames i { flex: none; height: 100%; }
.reelstrip__code {
  position: absolute; left: 0; top: 100%;
  margin-top: 12px;
  font-size: 9.5px;
  color: var(--fg-40);
  white-space: nowrap;
  transition: color .4s ease;
}
@keyframes strip { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) {
  .reelstrip:hover .reelstrip__track { animation-play-state: paused; }
  .reelstrip__run:hover { filter: none; }
  .reelstrip__run:hover .reelstrip__code { color: var(--paper); }
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--fg-40);
}
.about__bio {
  grid-column: 1 / span 6;
  max-width: 32em;
  font-family: var(--f-disp);
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 27px);
  line-height: 1.34;
}
.about__bio p + p { text-indent: 1.6em; }
.about__bio em { font-style: italic; }
.about__facts { grid-column: 8 / span 5; }
.about__facts > div {
  display: grid;
  grid-template-columns: 14ch minmax(0, 1fr);
  column-gap: var(--gutter);
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--fg-12);
}
.about__facts > div:first-child { padding-top: 0; }
.about__facts dt { color: var(--fg-40); }
.about__facts .lnk { opacity: 1; }
.about__links { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.dot {
  display: inline-block;
  width: 6px; height: 6px; margin-right: .8em;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: .12em;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

/* End credits */
.credits {
  display: grid;
  gap: clamp(80px, 9vw, 150px);
  padding-top: clamp(64px, 5vw, 96px);
}
.credits__block { text-align: center; }
.credits__h { color: var(--fg-55); margin-bottom: clamp(22px, 2.6vw, 40px); }
.credits__names {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .12em 1em;
  max-width: 66rem;
  margin: 0 auto;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(24px, 3.2vw, 58px);
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.credits__names--sm { font-size: clamp(18px, 1.8vw, 30px); font-weight: 400; }
.credits__pairs { display: grid; gap: 12px; max-width: 70rem; margin: 0 auto; }
.credits__pairs li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(22px, 3vw, 52px);
  align-items: baseline;
}
.credits__role {
  text-align: right;
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fg-55);
}
.credits__name {
  text-align: left;
  font-family: var(--f-disp);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 32px);
  line-height: 1.15;
}

.about__cta { padding-top: clamp(84px, 9vw, 150px); text-align: center; }
.about__cta-line {
  font-family: var(--f-disp);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 132px);
  line-height: .95;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.about__cta-line em { font-style: italic; font-weight: 250; }
.about__mail {
  position: relative;
  display: inline-flex; align-items: center; gap: .9em;
  margin-top: clamp(28px, 3vw, 48px);
  padding-bottom: 9px;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.about__mail b { font-weight: 400; transition: transform .6s var(--e-expo); }
.about__mail::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transition: transform .9s var(--e-expo);
}
@media (hover: hover) {
  .about__mail:hover::after { transform: scaleX(0); transform-origin: 0 50%; }
  .about__mail:hover b { transform: translateX(6px); }
}
/* The other ways in: same face as the e-mail, one step quieter — the line
   draws in under the one pointed at. */
.about__reach {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px clamp(26px, 3.4vw, 56px);
  margin-top: clamp(26px, 2.6vw, 40px);
}
.about__reach a {
  position: relative;
  display: inline-flex; align-items: center; gap: .6em;
  padding-bottom: 7px;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(11px, .9vw, 14px);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .72;
  transition: opacity .4s ease;
}
.about__reach b { font-weight: 400; transition: transform .6s var(--e-expo); }
.about__reach a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .9s var(--e-expo);
}
.about__reach a:focus-visible { opacity: 1; }
@media (hover: hover) {
  .about__reach a:hover { opacity: 1; }
  .about__reach a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .about__reach a:hover b { transform: translate(3px, -3px); }
}

/* 11. Intro ---------------------------------------------------------------- */

/* Over the lit, empty frame of the stage (the reel's masks open it: 9:16, then 16:9). */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center;
  color: var(--paper);
  pointer-events: none;
  transition: opacity .6s ease;
}
.intro__name {
  display: flex;
  height: 1em;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 62%;
  font-size: clamp(44px, 9.4vw, 172px);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 50% 50%;
}
/* The name rides at the centre of the opening frame (it sits high on a phone). */
.intro__name { translate: 0 var(--dy, 0px); }
/* (Letters cut, never fade — and follow the name's width at once: intro.js measures it.) */
.intro__ch { display: inline-block; opacity: 0; transition: none; }
.intro__ch.is-cut { opacity: 1; }
.intro__foot {
  position: absolute;
  left: var(--sl); right: var(--sr);
  bottom: calc(var(--gutter) + var(--sb));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  color: var(--fg-70);
  transition: opacity .5s ease;
}
.intro__foot > :last-child { text-align: right; }
.intro__tc { color: var(--paper); }
.intro.is-holding .intro__tc { animation: blink 1s steps(1) infinite; }
/* On the hour the film fades up under all this (FADE_UP in reel.js); role · timecode · city go with the lamp. */
.intro.is-revealing .intro__foot { opacity: 0; transition: opacity .8s ease; }
.intro.is-done { opacity: 0; }

/* 12. Curtain, cursor, menu, help, grain ----------------------------------- */

/* Between pages: two black halves meet in the middle, then part. */
.curtain { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.curtain i {
  position: absolute; top: 0; bottom: 0;
  width: 50.5%;
  background: var(--black);
  transition: transform .8s var(--e-expo);
}
.curtain i:first-child { left: 0; transform: translate3d(-101%, 0, 0); }
.curtain i:last-child { right: 0; transform: translate3d(101%, 0, 0); }
html.is-curtain .curtain { pointer-events: auto; }
html.is-curtain .curtain i { transform: none; transition: transform .5s var(--e-in); }

/* The word that rides with the pointer over a picture. */
.cur {
  position: fixed; left: 0; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 11px;
  margin: -4px 0 0 -4px;
  color: var(--paper);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.cur.is-on { opacity: 1; }
.cur__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .15);
  transition: width .5s var(--e-mask), height .5s var(--e-mask), border-radius .3s ease;
}
/* Over a film the dot becomes a tiny frame of that film's shape (same area either way). */
.cur__dot.is-frame {
  width: calc(11px * sqrt(var(--ar, 1)));
  height: calc(11px / sqrt(var(--ar, 1)));
  border-radius: 0;
}
.cur__t { text-shadow: 0 0 14px rgb(0 0 0 / .55), 0 0 2px rgb(0 0 0 / .4); }

.menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
  padding: calc(var(--top) + 100px + var(--st)) var(--sr) calc(var(--gutter) + var(--sb)) var(--sl);
  background: var(--black);
  color: var(--paper);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--e-io);
}
html.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu__nav { display: grid; gap: 6px; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(34px, 10vw, 74px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(34px);
  transition: transform .9s var(--e-expo), opacity .6s ease;
}
/* All three in the same type; "you are here" is the number in tally red, like the header's dot. */
.menu__nav a[aria-current="page"] .menu__no { color: var(--accent); }
html.menu-open .menu__nav a { opacity: 1; transform: none; }
html.menu-open .menu__nav a:nth-child(1) { transition-delay: .16s; }
html.menu-open .menu__nav a:nth-child(2) { transition-delay: .22s; }
html.menu-open .menu__nav a:nth-child(3) { transition-delay: .28s; }
.menu__no { color: var(--fg-40); letter-spacing: .02em; }
.menu__foot { display: grid; gap: 8px; justify-items: start; opacity: 0; transition: opacity .6s ease .3s; }
html.menu-open .menu__foot { opacity: 1; }

.help {
  position: fixed; z-index: 80;
  left: var(--sl); bottom: calc(var(--gutter) + var(--sb) + 40px);
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  padding: 18px 20px 16px;
  background: #121211;
  color: var(--paper);
  border: 1px solid var(--fg-12);
  box-shadow: 0 24px 70px rgb(0 0 0 / .5);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .6s var(--e-expo);
}
.help.is-open { opacity: 1; transform: none; }
.help__title { color: var(--fg-55); margin-bottom: 10px; }
.help__list > div {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  padding: 7px 0;
  border-top: 1px solid var(--fg-12);
}
.help__list dd { color: var(--fg-70); }
.help__close { margin-top: 12px; }

.grain {
  position: fixed; z-index: 95;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  pointer-events: none;
  opacity: .22;
  animation: grain 1s steps(1) infinite;
}
html[data-media] .grain { opacity: .15; }

@keyframes grain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -6%); }
  20% { transform: translate(-9%, 3%); }
  30% { transform: translate(4%, -12%); }
  40% { transform: translate(-3%, 15%); }
  50% { transform: translate(-9%, 6%); }
  60% { transform: translate(9%, 0); }
  70% { transform: translate(0, 9%); }
  80% { transform: translate(-6%, -3%); }
  90% { transform: translate(6%, 6%); }
}

/* 13. Motion --------------------------------------------------------------- */

/* Lines rise into place from behind a mask, one after the other. */
.ln {
  display: block;
  overflow: hidden;
  padding: .14em 0 .08em;
  margin: -.14em 0 -.08em;
}
.ln > span {
  display: inline-block;
  transform: translate3d(0, 112%, 0);
  transition: transform 1.05s var(--e-expo);
  transition-delay: calc(var(--k, 0) * 85ms);
}
.is-in .ln > span { transform: none; }
.is-out .ln > span {
  transform: translate3d(0, -112%, 0);
  transition: transform .34s var(--e-in);
  transition-delay: 0s;
}

/* Letters open like masks, from the middle of the word out. */
.lt {
  display: inline-block;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path .9s var(--e-mask);
  transition-delay: calc(var(--lt-d, 60ms) + var(--o, 0) * 46ms);
}
.lt--sp { clip-path: none; white-space: pre; } /* a lone space in an inline-block collapses to nothing */
.is-in .lt { clip-path: inset(-15% -8% -15% -8%); }
.is-out .lt {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path .3s var(--e-in);
  transition-delay: 0s;
}

.spec { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .3s ease, transform .3s ease; }
.spec.is-in { opacity: 1; transform: none; transition: opacity .9s ease .3s, transform 1.1s var(--e-expo) .3s; }

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--e-out), transform 1.2s var(--e-expo);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .grain, .reelstrip__track { animation: none !important; }
}

/* 14. Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .arc { --cols: 36px minmax(0, 1fr) 13ch 5ch; }
  .arc__cols > :nth-child(5),
  .row__dur { display: none; }
}

@media (max-width: 900px) {
  :root { --fs-ui: 10.5px; }

  .hdr { justify-content: space-between; }
  .hdr__nav, .lang { display: none; }
  .hdr__tools { margin-left: auto; }
  .hdr__sound-k { display: none; }
  .hdr__menu { display: block; }
  .hdr__menu-close { display: none; }
  html.menu-open .hdr__menu-open { display: none; }
  html.menu-open .hdr__menu-close { display: inline; }
  html.menu-open .hdr__sound { opacity: 0; pointer-events: none; }
  .menu .lang { display: inline-flex; }

  /* A film on a phone: the words ride the bottom of the picture, the index sits in the mask below. */
  .reel[data-layout="over"] { --above: max(calc(var(--wb) * 1px + 18px), calc(var(--gutter) + var(--sb) + 54px)); }
  .reel[data-layout="over"] .slate { right: var(--sr); bottom: calc(var(--above) + 34px); }
  .reel[data-layout="over"] .slate__client { font-stretch: 62%; font-weight: 700; font-size: calc(clamp(54px, 17vw, 96px) * var(--name)); line-height: .8; letter-spacing: 0; }
  .reel[data-layout="over"] .spec { left: var(--sl); right: var(--sr); bottom: var(--above); flex-direction: row; justify-content: space-between; align-items: baseline; }
  .reel:not([data-layout="side"]) .spec__cta { margin-top: 0; }
  /* Values only (category, year), so they share the line with the call. */
  .reel:not([data-layout="side"]) .spec__dl dt { display: none; }
  .tl { right: var(--sr); width: auto; }
  .tl__cap { display: none; }
  .tl__track { gap: 4px; }

  .film[data-layout="over"]:not(.is-info) .film__cap { flex-wrap: wrap; }
  .film__ctl { gap: 6px 16px; }
  .film__bar { height: 30px; }
  .film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__ctl { bottom: calc(var(--sb) + 36px); }
  .film[data-layout="over"]:not(.is-info) .film__cap { bottom: max(calc(var(--wb) * 1px + 16px), calc(var(--sb) + 72px)); }
  .film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__bar::before,
  .film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__buf,
  .film:is([data-layout="over"], [data-layout="side"]):not(.is-info) .film__played { height: 2px; }
  .film:is([data-layout="band"], .is-info) .film__bar { top: calc((var(--wy) + var(--wh)) * 1px - 15px); }
  .film:is([data-layout="band"], .is-info) .film__bar::before,
  .film:is([data-layout="band"], .is-info) .film__buf,
  .film:is([data-layout="band"], .is-info) .film__played { top: 15px; height: 2px; }
  .film:is([data-layout="band"], .is-info) .film__knob { top: 11px; }
  .film [data-act="fs"] { order: 5; }
  .film__desc { max-width: none; }

  /* Archive */
  .arc__bar { flex-direction: column; align-items: flex-start; }
  .arc__cols { display: none; }
  .row__a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
  .row__glyph, .row__cat, .row__year, .row__dur { display: none; }
  .row__name { white-space: normal; font-size: calc(clamp(24px, 7vw, 40px) * var(--name)); }
  .row__title { display: block; }
  /* Same height for every thumbnail; the width follows the film's shape. */
  .row__thumb { display: block; height: clamp(58px, 17vw, 80px); aspect-ratio: var(--ar, 16 / 9); overflow: hidden; background: var(--fg-06); }
  .row__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sheet { --row: 46vw; }

  /* The reel of frames on a phone: no list of names — the words sit low, on a veil. */
  .rolo__side { display: none; }
  .rolo__info {
    left: var(--sl); right: var(--sr);
    top: auto; bottom: calc(var(--gutter) + var(--sb) + 30px);
    max-width: none;
    transform: none;
    padding-top: 60px;
  }
  .rolo__info::before {
    content: "";
    position: absolute; z-index: -1;
    left: calc(-1 * var(--sl)); right: calc(-1 * var(--sr));
    top: 0; bottom: calc(-1 * (var(--gutter) + var(--sb) + 30px));
    background: linear-gradient(to bottom, rgb(10 10 9 / 0), rgb(10 10 9 / .88) 45%);
  }
  .rolo__client { display: block; }
  .rolo__title { margin-top: 6px; font-size: 20px; }
  .rolo__spec { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; }
  .rolo__spec > div, .rolo__spec > div:first-child { padding: 0; border: 0; gap: .6em; }
  .rolo__spec dt i, .rolo__cta, .rolo__hint { display: none; }

  /* About */
  .about__bio, .about__facts { grid-column: 1 / -1; }
  .reelstrip__client { display: none; }
  .credits__pairs li { grid-template-columns: 1fr; row-gap: 2px; }
  .credits__role, .credits__name { text-align: center; }

  .foot { flex-direction: column; }
  .foot__hint { display: none; }
}

@media (max-width: 560px) {
  .film__tc i, .film__tc [data-dur] { display: none; }
  /* Play · time · Info · Close · Fullscreen on one line, down to a 360 px phone. */
  .film__ctl { column-gap: 12px; }
  .sheet { --row: 76vw; }
  .about__facts > div { grid-template-columns: 11ch minmax(0, 1fr); }
  /* Two by two rather than a row of three and a stray one. */
  .about__reach { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; justify-items: start; column-gap: 44px; }
}

@media (hover: none) {
  .reel, .film { cursor: auto; }
  .cur { display: none; }
}