:root {
  --paper: #f5f5f3;
  --ink: #282829;
  --muted: #77777a;
  --green: #2b4a3a;
  --field: #fafafa;
  --logo-ink: var(--ink);   /* client logo color: ink on paper, leader yellow at night */
  --logo-h: 42px;           /* client logo height; the grid scales with it */
  --soft-mix: .445;         /* soften: opacity of a blurred copy laid over the sharp logos (dial with ?tune) */
  --soft-r: 1.65px;         /* blur radius of that copy */
  --logo-glow: 0px;         /* glow and halation come from a copy behind the logos */
  --logo-halation: 14px;    /* red-orange fringe, night only (--halo is transparent on paper) */
  --title-halation: 14px;   /* the same fringe on the title at night */
  --halo: transparent;
  --grain: .55;         /* grain strength on paper (grain.js; dial it with ?tune) */
  --grain-night: .31;   /* grain strength with the lights off */
  --leader: #e4b32e;    /* leader yellow, as on jessedacri.com */
  --t: 700ms cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}
/* night: the lights-off toggle (acq.js); the head of each page applies a saved choice before first paint */
:root.lights-off {
  --paper: #101726;            /* film base blue, as on jessedacri.com */
  --ink: #efe9da;
  --muted: #9aa0ae;
  --field: #161f33;
  --green: var(--leader);      /* links, caret and focus take the leader yellow */
  --logo-ink: var(--leader);
  --halo: rgba(255, 84, 36, .5);   /* film halation: warm red bleeding around bright highlights */
  color-scheme: dark;
}
:root.lights-off .top { color: var(--leader); text-shadow: 0 0 var(--title-halation) var(--halo); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.45 "Courier Prime", "Courier Std", "Courier New", Courier, monospace;
  transition: background-color var(--t), color var(--t);
}
.wrap { max-width: 1320px; padding: clamp(40px, 7vw, 100px) clamp(16px, 4vw, 58px) 80px; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green); }

.top { font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; margin: 0 0 clamp(36px, 6vw, 80px); line-height: 1.2; }
.top a { text-decoration: none; }
.mark { color: var(--green); font-weight: 700; }
.bar { margin: 0 .35em; }

p { margin: 0 0 1em; max-width: 1220px; }
.lede { margin-bottom: clamp(48px, 6vw, 80px); }

.logos { position: relative; margin: 36px 0 clamp(80px, 10vw, 140px); }
.clients { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, calc(var(--logo-h) * 3.15)); gap: calc(var(--logo-h) * 1.65) calc(var(--logo-h) * 1.7); align-items: center; }
/* blur and glow go on the grid, not the logos: a filter on a masked logo is clipped back to its sharp shape */
/* Softness works like a diffusion filter: the sharp logos are never filtered (any CSS filter re-rasterizes them, which
   softens them on its own). acq.js adds two hidden copies: a blurred one over the logos, faded in by --soft-mix, and one
   behind them that casts the glow and halation. Each shows only with its class on :root (grain.js sets them from the values). */
.clients.fx { position: absolute; inset: 0; pointer-events: none; display: none; }
:root.logo-soft .clients.fx-soft { display: grid; filter: blur(var(--soft-r)); opacity: var(--soft-mix); }
:root.logo-bloom .clients.fx-bloom { display: grid; filter: drop-shadow(0 0 var(--logo-glow) color-mix(in srgb, var(--logo-ink) 55%, transparent)) drop-shadow(0 0 var(--logo-halation) var(--halo)); }
.clients img { display: block; width: 100%; height: var(--logo-h); object-fit: contain; object-position: left center; }
/* logos are drawn as masks so they take any color; the image stays (invisible) for its alt text and size */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .clients li[style*="--logo"] { background: var(--logo-ink); -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
  .clients li[style*="--logo"] img { opacity: 0; }
}
@media (max-width: 640px) {
  .clients { grid-template-columns: repeat(2, minmax(0, calc(var(--logo-h) * 3.5))); gap: calc(var(--logo-h) * 1.3) calc(var(--logo-h) * 1.4); }
}

.work { list-style: none; padding: 0; margin: 0 0 clamp(48px, 6vw, 80px); }
.work li { margin: 0 0 .95em; }
.note { margin-bottom: clamp(80px, 10vw, 150px); }
.back { font-weight: 700; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; max-width: 496px; margin: 28px 0 clamp(80px, 10vw, 130px); }
.form .full { grid-column: 1 / -1; }
.form .legend { grid-column: 1 / -1; margin: 0 0 8px; }
.form label { display: block; margin: 0 0 20px; }
.form label span { color: var(--muted); }
.form input, .form textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
  background: var(--field); color: var(--ink); border: 1px solid var(--ink); border-radius: 0;
  font: inherit; font-size: 16px;
}
.form textarea { min-height: 100px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.form button {
  justify-self: start; padding: 20px 34px; background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; font: inherit; cursor: pointer;
}
.form button:hover { background: var(--ink); color: var(--paper); }
#grain { mix-blend-mode: multiply; opacity: var(--grain); }   /* grain.js also sets these inline */
.lights-toggle { position: absolute; top: clamp(44px, 7.4vw, 106px); right: clamp(16px, 4vw, 58px); padding: 0; background: none; border: 0; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.lights-toggle:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .lights-toggle { top: 12px; } }   /* above the title, which runs nearly full width on phones */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .form { grid-template-columns: 1fr; } }

/* typewriter title (acq.js) */
.tw { visibility: hidden; }
.tw.on { visibility: visible; }
.caret { display: inline-block; position: relative; width: 0; }
.caret::after { content: ""; position: absolute; left: 1px; top: -.82em; width: .5em; height: 1.02em; background: var(--green); opacity: .85; }
.caret.blink::after { animation: blink 1s steps(1) 3 forwards; }
@keyframes blink { 50% { opacity: 0; } 100% { opacity: 0; } }

/* frames popover by the cursor over a film line (acq.js); scale composes with the weave's transform */
.work a[data-film] { cursor: pointer; }
.peek { position: fixed; z-index: 50; margin: 0; background: #111; pointer-events: none; opacity: 0; scale: .94; transition: opacity .14s, scale .2s cubic-bezier(.2,.8,.2,1); box-shadow: 0 6px 24px rgba(40,40,41,.18); }
.peek.on { opacity: 1; scale: 1; }
.peek img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* corner timecode (acq.js) */
.corner { margin: 64px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.corner .tod { color: var(--ink); }
@media (min-width: 900px) {
  .corner { position: fixed; right: clamp(16px, 4vw, 58px); bottom: 22px; margin: 0; padding: 4px 0 4px 8px; background: var(--paper); z-index: 40; }
}

/* screening room (player.js) */
.screen {
  --night: #0e1311; --light: #f5f5f3;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--night); color: var(--light); font: inherit; display: none; place-items: center;
}
.screen[open] { display: grid; animation: lights-down .45s ease both; }
.screen::backdrop { background: var(--night); }
html:has(.screen[open]) { overflow: hidden; }
@keyframes lights-down { from { opacity: 0; } }
.screen-in { width: min(92vw, calc((100dvh - 180px) * var(--ar, 1.778))); }
.screen-title { margin: 0 0 14px; font-size: 13px; opacity: .7; max-width: none; }
.screen-frame { position: relative; background: #000; aspect-ratio: 16 / 9; }
.screen-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.screen-start {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 14px 26px;
  background: transparent; color: var(--light); border: 1px solid rgba(245,245,243,.75); font: inherit; cursor: pointer;
  transition: opacity .2s;
}
.screen-start:hover { background: var(--light); color: var(--night); }
.screen[data-state="playing"] .screen-start { opacity: 0; pointer-events: none; }
.screen-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 14px; font-size: 13px; transition: opacity .3s; }
.screen-bar .ctl { display: flex; gap: 16px; align-items: center; white-space: nowrap; }
.screen-bar button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; opacity: .8; }
.screen-bar button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.screen-time { font-variant-numeric: tabular-nums; }
.screen-time b { font-weight: 400; }
.screen-track { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.screen-track::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(245,245,243,.25); }
.screen-buf { position: absolute; left: 0; height: 1px; width: 0; background: rgba(245,245,243,.45); }
.screen-fill { position: absolute; left: 0; height: 3px; width: 0; background: var(--light); }
.screen-tip { position: absolute; bottom: 22px; transform: translateX(-50%); font-size: 11px; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .15s; }
.screen-track:hover .screen-tip { opacity: .8; }
.screen-in:fullscreen { width: 100%; height: 100%; background: #000; display: grid; grid-template-rows: auto 1fr auto; padding: 18px 24px; }
.screen-in:fullscreen .screen-frame { aspect-ratio: auto !important; min-height: 0; }
.screen.idle .screen-bar, .screen.idle .screen-title { opacity: 0; }
.screen.idle { cursor: none; }
@media (max-width: 640px) {
  .screen-in { width: 100%; padding: 0 16px; }
  .screen-bar { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .screen-track { grid-column: 1 / -1; grid-row: 2; }
  .screen-bar [data-full] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .screen[open] { animation: none; } }