:root{color-scheme:dark;--ink:#08090c;--white:#f1f3eb;--lime:#d3ff00;--blue:#1739ff;--heading:"Arial Black",Arial,sans-serif;--mono:"IBM Plex Mono","Courier New",monospace;--gutter:clamp(1.25rem,6vw,7rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:4.5rem}body{margin:0;background:var(--ink);color:var(--white);font:1.05rem/1.55 Arial,sans-serif}a{color:inherit;text-underline-offset:.19em}button{font:inherit}img{display:block;width:100%;height:100%;object-fit:cover}figure,p{margin:0}p+p{margin-top:1.15rem}h1,h2{font-family:var(--heading);text-transform:uppercase;letter-spacing:-.085em;line-height:.85;margin:.32em 0 .34em;font-weight:900}h2{font-size:clamp(3rem,8.5vw,9.5rem)}.inset{padding:clamp(3rem,7vw,8rem) var(--gutter)}.label{font:700 .8rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em}.skip{position:absolute;z-index:3;left:1rem;top:1rem;background:#fff;color:#000;padding:1rem;transform:translateY(-160%)}.skip:focus{transform:none}
.top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:.65rem;padding:.85rem var(--gutter);background:var(--ink);border-bottom:1px solid #444;font:700 .78rem/1.35 var(--mono)}.top a{text-decoration:none}.top nav{display:flex;gap:clamp(.55rem,2vw,2rem)}.top a:hover,.top a:focus-visible{color:var(--lime)}.brand{color:var(--lime);white-space:nowrap}
.hero{min-height: min(860px,calc(100svh - 3rem));display:grid;align-items:center;background:#08090c url(assets/chrome.png) center 52% / cover no-repeat;padding:5rem var(--gutter)}.hero-copy{padding:clamp(1rem,4vw,4rem);max-width:73rem;background:linear-gradient(90deg,#08090cf0,#08090c79 82%,transparent)}.hero h1{font-size:clamp(4rem,13vw,13rem);margin:.18em 0}.hero h1 span{display:block;color:var(--lime)}.hero-copy>p:last-of-type{font-size:clamp(1rem,2vw,1.5rem)}.jump{display:inline-flex;align-items:center;gap:1.2rem;margin-top:2rem;color:var(--lime);font-family:var(--mono)}
.split{display:grid;grid-template-columns:1fr 1fr}.split>figure{position:relative;min-width:0;min-height:32rem}.split>figure img{position:absolute;inset:0}.split figcaption{position:absolute;right:1rem;bottom:1rem;background:var(--ink);color:var(--white);padding:.35rem .65rem;font: .7rem var(--mono)}.split .inset>p:not(.label){max-width:33rem}.split .inset>a{display:inline-block;margin-top:1.7rem;font:700 .9rem var(--mono)}.study{background:var(--lime);color:var(--ink)}.study h2{font-size:clamp(2.65rem,6.4vw,8.5rem)}.study figure img{object-position:70% center}
.test{background:var(--blue)}.test h2{color:var(--lime);max-width:12ch}.sequence{list-style:none;padding:0;margin:2.5rem 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}.sequence li{border-top:1px solid #ffffff9c;padding-top:1rem}.sequence strong{color:var(--lime);display:block;margin-bottom:.5rem}.test-note{font: .83rem/1.45 var(--mono);color:var(--lime)}
.diary h2{color:var(--lime)}.lede{max-width:36rem;font-size:clamp(1.1rem,2vw,1.45rem)}.film-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem;margin:2.5rem 0}.film iframe{display:block;border:1px solid #444;width:100%;aspect-ratio:9 / 16;background:#000}.film figcaption,.reel figcaption{display:grid;gap:.3rem;padding:.8rem 0 0}.film figcaption a,.reel a,.portfolio{font: .82rem/1.4 var(--mono)}.film figcaption a,.portfolio{color:var(--lime)}
.work{background:var(--white);color:var(--ink)}.reels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,4vw,4rem)}.reel{min-width:0}.reel img{height:auto;aspect-ratio:16 / 9}.reel iframe{display:block;width:100%;height:clamp(480px,75vh,720px);border:0;background:white}.reel button{justify-self:start;background:var(--blue);color:white;border:0;padding:.7rem .9rem;cursor:pointer}.reel a{color:#0927ca}
.together{background:var(--lime);color:var(--ink)}.together h2{font-size:clamp(2.7rem,6vw,7.5rem)}.together .inset>p:not(.label){max-width:55ch}.together .inset>a{display:inline-block;margin-top:1.4rem}footer{display:flex;justify-content:space-between;gap:1rem;color:var(--lime);font: .85rem var(--mono)}:focus-visible{outline:3px solid currentColor;outline-offset:4px}
@media(max-width:900px){.film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sequence{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.split,.reels{grid-template-columns:1fr}.split>figure{min-height:0;aspect-ratio:4 / 4.7}.hero{background-size:cover;background-position:center;min-height:78svh}.hero-copy{padding:.75rem}.hero h1{font-size:clamp(3.3rem,14vw,6rem)}.film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .75rem}.film iframe{max-height:78svh}.top{padding-inline:1rem}.top nav{font-size:.7rem}.together>figure{order:2}.together h2,.study h2{font-size:clamp(3.1rem,12vw,6.5rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.reel-stats{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.65rem 0 0;font-size:.875rem;font-variant-numeric:tabular-nums}.reel-stats span{white-space:nowrap}

.film-player {
  display: grid;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid #55564b;
  background: #1c2119;
}
.film-player iframe, .film-cover {
  grid-area: 1 / 1;
}
.film-player iframe {
  height: 100%;
  border: 0;
}
.film-player [hidden] {
  display: none;
}
.film-cover {
  position: relative;
  min-height: 0;
  background: #000;
}
.film-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.film-cover button {
  position: absolute;
  inset: auto auto .8rem .8rem;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #f5f5ed;
  color: #192016;
  cursor: pointer;
}
.film-cover button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}
@media (max-width: 640px) {
  .film-player { max-height: 78svh; }
}

.film-player { position: relative; }
.film-player .film-frame-loading {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.film-status { font-size: .85rem; }
.film-status:empty { display: none; }

.siren {
  background: #12191a;
}
.siren-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.siren-board img {
  height: auto;
  aspect-ratio: 1;
}
.siren-board figcaption, .siren-copy a {
  font: .8rem/1.4 var(--mono);
  color: var(--lime);
}
.siren-board figcaption { margin-top: .75rem; }
.siren-copy h2 { color: var(--lime); }
.siren-copy p { max-width: 46ch; }
.siren-copy a { display: inline-block; margin-top: 1.4rem; }
.siren-reference-label { margin: clamp(3rem, 7vw, 7rem) 0 1.2rem; }
.siren-references {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.65rem, 1.5vw, 1.5rem);
}
.siren-references figure {
  aspect-ratio: 3 / 4;
  background: #08090c;
}
.siren-references img { object-fit: contain; }

@media (max-width: 900px) {
  .siren-references { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .siren-lead { grid-template-columns: 1fr; }
  .siren-references { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.diary {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.diary h2 {
  font-size: clamp(3rem, 7vw, 6rem);
}
.diary .film-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin: 1rem 0 .75rem;
}
.diary .film-player:not(:has(iframe:not(.film-frame-loading))) {
  aspect-ratio: 4 / 5;
  max-height: 34svh;
}
.diary .film-player iframe:not(.film-frame-loading) {
  max-height: none;
}
.diary .film-cover img {
  object-fit: cover;
}
.diary .film-cover button {
  inset: auto auto .45rem .45rem;
  width: 44px;
  height: 44px;
}
.diary .film figcaption {
  padding-top: .35rem;
  gap: .1rem;
  line-height: 1.2;
  font-size: .9rem;
}
.diary-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.diary-notes details {
  min-width: 0;
  border-top: 1px solid #55564b;
}
.diary-notes summary {
  cursor: pointer;
  padding: .65rem 0;
  font-weight: 700;
}
.diary-notes .lede {
  font-size: 1rem;
}
.diary-notes h3 {
  margin: .55rem 0 .2rem;
}
@media (max-width: 640px) {
  .diary .film-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .diary .film-player:not(:has(iframe:not(.film-frame-loading))) {
    aspect-ratio: 4 / 3;
    max-height: 20svh;
  }
  .diary-notes details[open] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 6rem; }
  .top { flex-direction: column; gap: .25rem; padding-block: .5rem; }
  .top nav { flex-wrap: wrap; justify-content: center; gap: 0 .65rem; }
  .top nav a { display: flex; align-items: center; min-height: 32px; white-space: nowrap; }
}

.pitch-reference-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem 1.5rem;
  margin: 1.5rem 0 1rem;
}
.pitch-reference-header .siren-reference-label {
  margin: 0;
}
.pitch-listening {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
}
.pitch-listening a {
  display: inline-block;
  margin-top: .35rem;
  color: var(--lime);
  font: .85rem/1.5 var(--mono);
}