:root {
  --canvas: #0f100f;
  --panel: #171816;
  --panel-raised: #1d1f1c;
  --paper-2: var(--panel-raised);
  --ink: #f1eee6;
  --ink-soft: #b8b6ae;
  --line: rgb(241 238 230 / 18%);
  --line-strong: rgb(241 238 230 / 42%);
  --gold: #d9a93a;
  --terra: #c0694a;
  --green: #93a883;
  --accent: var(--green);
  --sans: "Instrument Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { min-width: 320px; color: var(--ink); background: var(--canvas); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { color: var(--canvas); background: var(--gold); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.wrap { width: min(100% - clamp(2rem, 6vw, 7rem), 1440px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .5rem 1rem; background: var(--gold); color: var(--canvas); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.eyebrow, .case-index, .project-back, .yr, .stats > div, .credits-list .role, .attr, .motion-toggle, .nav-links {
  font-family: var(--mono); font-size: .68rem; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase;
}
.eyebrow { margin-bottom: 1rem; color: var(--green); }
h1, h2, h4 { font-weight: 500; letter-spacing: -.045em; }
h2 { max-width: 21ch; font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.12; margin-bottom: 1.6rem; }

/* The same compact navigation and three-color signature as the alternate home. */
.site-nav { position: fixed; z-index: 80; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .85rem clamp(1rem, 3vw, 2.5rem); background: rgb(15 16 15 / 97%); border-bottom: 1px solid var(--line); }
.brand, .stamp { display: inline-flex; align-items: center; gap: .7rem; font-size: 1rem; font-weight: 600; flex: 0 0 auto; }
.markers, .blocks { display: inline-flex; gap: .22rem; }
.marker, .blk { width: .58rem; height: .58rem; }
.gold, .blk.y { background: var(--gold); }
.terra, .blk.t { background: var(--terra); }
.green, .blk.g { background: var(--green); }
.nav-actions, .nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-actions { min-width: 0; }
.nav-links { color: var(--ink-soft); }
.nav-links a { padding-block: .45rem; }
.nav-links a:hover { color: var(--ink); }
.motion-toggle { flex: 0 0 auto; padding: .48rem .6rem; border: 1px solid var(--line-strong); background: var(--canvas); cursor: pointer; }
.motion-toggle:hover { border-color: var(--ink); }

/* Each project opens with its own footage and a readable role/credit rail. */
.case-hero { padding-top: 7.5rem; padding-bottom: clamp(3rem, 6vw, 6rem); }
.case-topline { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2.4rem; color: var(--ink-soft); }
.project-back:hover { color: var(--ink); }
.case-index { color: var(--gold); }
.case-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.case-heading { padding-block: .75rem; }
.case-hero h1 { max-width: 14ch; font-size: clamp(3.2rem, 5.8vw, 6.5rem); line-height: 1.05; letter-spacing: -.055em; text-wrap: balance; }
.case-hero .yr { margin-top: 1.6rem; color: var(--green); }
.case-hero .lede { max-width: 48ch; margin-top: 1.5rem; color: var(--ink-soft); font-size: clamp(1.05rem, 1.55vw, 1.35rem); line-height: 1.6; }
.case-preview { position: relative; min-height: 24rem; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.case-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-preview::after { position: absolute; inset: 0; border: 10px solid rgb(15 16 15 / 8%); content: ""; pointer-events: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem 2rem; margin-top: 3rem; padding-block: 1.6rem; border-block: 1px solid var(--line); }
.stats > div { color: var(--ink-soft); }
.stats b { display: block; margin-top: .6rem; color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; }

/* Narrative and supporting media share a steady two-column rhythm. */
main > section:not(.case-hero) { padding-block: clamp(2.5rem, 5vw, 5rem); }
.body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 6vw, 6rem); border-top: 1px solid var(--line); }
.section-copy { min-width: 0; }
.section-copy p { max-width: 62ch; margin-bottom: 1.2rem; color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.1rem); }
.section-copy p:last-child { margin-bottom: 0; }
.section-copy b { color: var(--ink); font-weight: 500; }
.body > .mgrid { grid-column: 1 / -1; }
.duo, .mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.mgrid { margin-top: 2rem; }
.duo > *, .mgrid > * { min-width: 0; }
.mgrid .cell.wide { grid-column: 1 / -1; }
.shot { display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); background: var(--panel-raised); }
.shot video, .shot img { width: 100%; height: auto; object-fit: contain; }
.duo .shot, .mgrid .shot { aspect-ratio: 16 / 10; }
.duo .shot video, .mgrid .shot video, .duo .shot img, .mgrid .shot img { max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.mgrid .wide .shot { aspect-ratio: 16 / 9; }
.case-adobe .shot { padding: clamp(1rem, 3vw, 3rem); }
.case-adobe .shot.sm video { max-width: 420px; }
.cap { margin-top: .85rem; padding-left: .9rem; border-left: 1px solid var(--terra); font-size: .85rem; color: var(--ink-soft); line-height: 1.6; }
.cap b { color: var(--ink); font-weight: 500; }
.film-inner { width: 100%; }
.feature > p { max-width: 64ch; color: var(--ink-soft); }
.feature h2 { max-width: 28ch; }
.sys { border-block: 1px solid var(--line); }
.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; counter-reset: system; }
.sys-grid > div { padding-top: 1.4rem; border-top: 1px solid var(--line); counter-increment: system; }
.sys-grid > div::before { display: block; content: "0" counter(system); margin-bottom: 1.5rem; font-family: var(--mono); font-size: .75rem; color: var(--terra); }
.sys-grid h4 { font-size: 1.5rem; margin-bottom: .7rem; }
.sys-grid p { color: var(--ink-soft); font-size: .95rem; }
.credits { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 6vw, 6rem); border-top: 1px solid var(--line); }
.credits-list { min-width: 0; }
.credits-list .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.credits-list .row:first-child { padding-top: 0; }
.credits-list .role { color: var(--ink-soft); }
.credits-list .name { text-align: right; font-size: 1rem; overflow-wrap: anywhere; }
.pull { border-top: 1px solid var(--terra); }
.pull blockquote, .testimonial-quote blockquote { max-width: min(100%, 42ch); font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
.pull blockquote em { color: var(--green); font-style: normal; }
.pull .attr { margin-top: 1.8rem; color: var(--ink-soft); }

footer.wrap { margin-top: 3rem; padding-block: clamp(3rem, 7vw, 7rem) 2rem; border-top: 1px solid var(--line); }
.foot-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
footer .next { font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.2; letter-spacing: -.04em; }
footer .next a { border-bottom: 1px solid var(--line-strong); }
footer .next a:hover { color: var(--green); }
.colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; color: var(--ink-soft); font-size: .75rem; }

@media (max-width: 1050px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-preview { min-height: 20rem; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 8rem; }
  .wrap { width: calc(100% - 2rem); }
  .site-nav { flex-wrap: wrap; gap: .45rem; padding: .7rem 1rem .55rem; }
  .nav-actions { width: 100%; }
  .nav-links { width: 100%; justify-content: space-between; gap: .5rem; font-size: .58rem; }
  .motion-toggle { position: absolute; top: .65rem; right: 1rem; }
  .case-hero { padding-top: 8rem; }
  .case-topline { margin-bottom: 1.8rem; }
  .case-intro, .body, .credits, .duo, .mgrid, .sys-grid { grid-template-columns: 1fr; }
  .case-hero h1 { font-size: clamp(3rem, 12vw, 5.5rem); line-height: 1.08; }
  .case-preview { min-height: 0; aspect-ratio: 16 / 10; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .body { gap: .75rem; }
  .section-intro h2 { max-width: 22ch; }
  .mgrid .cell.wide { grid-column: 1; }
  .foot-grid { align-items: flex-start; flex-direction: column; }
  .colophon { flex-direction: column; }
  .colophon > span { line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}