:root {color-scheme:dark;--ink:#171714;--paper:#f1ede3;--muted:#c8c0b2;--accent:#e8b886;--edge:#514c43;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,sans-serif}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:var(--ink);color:var(--paper);font:1rem/1.6 var(--sans)}
a {color:inherit;text-decoration:none}
a:hover {color:var(--accent)}
:focus-visible {outline:3px solid #dc8b45;outline-offset:5px}
.wrap {width:min(1280px,calc(100% - clamp(36px,10vw,160px)));margin-inline:auto}
.bar {display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.mast {border-bottom:1px solid var(--edge)}
.wordmark {text-transform:uppercase;letter-spacing:.16em;font-weight:650;font-size:.78rem}
nav {display:flex;align-items:center;gap:clamp(15px,3vw,48px);font-size:.85rem}
nav a,footer a {padding-block:.55rem}
.skip {position:absolute;top:-8rem;left:1rem;background:var(--paper);color:var(--ink);padding:.6rem 1rem;z-index:2}
.skip:focus {top:1rem}
.hero {min-height:615px;display:grid;grid-template-columns: .78fr 1.22fr;align-items:center;gap:clamp(24px,5vw,80px);padding-block:clamp(65px,9vw,130px)}
.hero-copy {padding-bottom:1.8rem}
.label {margin:0 0 1.5rem;color:var(--accent);font-size:clamp(.68rem,1.1vw,.78rem);letter-spacing:.15em;text-transform:uppercase;font-weight:650}
h1,h2,.credit-title {font-family:var(--serif);font-weight:400}
h1 {font-size:clamp(4rem,8.5vw,9rem);line-height:.89;letter-spacing:-.069em;margin:0 0 2.65rem}
figure {margin:0}
img {display:block;width:100%;height:auto}
.hero figure {justify-self:center;width:min(100%,440px)}
.hero img {aspect-ratio:4 / 5;object-fit:cover;object-position:center 25%}
.button {display:inline-flex;align-items:center;justify-content:space-between;gap:1.8rem;border:1px solid var(--accent);padding:.76rem 1rem;background:var(--accent);color:#201911;font:650 .83rem/1.4 var(--sans);cursor:pointer}
.button:hover {background:var(--paper);color:var(--ink)}
.button:disabled {cursor:wait;opacity:.7}
.work {background:#eae4d7;color:#25211b;padding-block:clamp(55px,8vw,112px);color-scheme:light}
.section-heading {display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem}
h2 {font-size:clamp(2.7rem,5.7vw,5.6rem);line-height:1;letter-spacing:-.057em;margin:0}
.intro {max-width:61ch;margin:1.65rem 0 2.8rem;color:#514739}
.text-link {text-decoration:underline;text-underline-offset:5px;font-size:.87rem}
.work a:hover {color:#814317}
.credits {list-style:none;padding:0;margin:0;border-top:1px solid #a69c8b}
.credits li {border-bottom:1px solid #a69c8b}
.credits a {display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,13rem) 1rem;align-items:baseline;gap:1rem;padding:1.2rem 0}
.credit-title {font-size:clamp(1.2rem,2.7vw,2.15rem);line-height:1.18}
.year,.role {font-size:.82rem;color:#514739}
.contact {display:grid;grid-template-columns: .85fr 1.15fr;gap:clamp(28px,8vw,118px);padding-block:clamp(60px,9vw,126px)}
.contact p {max-width:34ch;color:var(--muted)}
.email {display:inline-block;margin-top:.4rem}
form {min-width:0}
.fields {display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label {display:block;font-size:.82rem;font-weight:600}
input,textarea {display:block;width:100%;margin:.35rem 0 1.15rem;padding:.72rem .78rem;border:1px solid #82796a;border-radius:0;background:#211f1b;color:var(--paper);font:1rem/1.4 var(--sans)}
textarea {resize:vertical}
.status:empty {display:none}
footer {border-top:1px solid var(--edge);color:var(--muted);font-size:.8rem}
@media (max-width:760px) {
  .hero,.contact {grid-template-columns:1fr;min-height:0}
  .hero-copy {padding-bottom:0}
  h1 {font-size:clamp(4rem,13vw,7rem)}
  .credits a {grid-template-columns:2.65rem minmax(0,1fr) 1rem;gap:.4rem .65rem}
  .credit-title {grid-column:2}
  .credits a > :last-child {grid-column:3;grid-row:1}
  .role {grid-column:2}
}
@media (max-width:390px) {
  .wordmark {font-size:.65rem}
  nav {gap:11px;font-size:.8rem}
  .fields {grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}

.film-stills {margin-top:clamp(2.5rem,6vw,5rem)}
.film-stills h3 {font:400 clamp(1.8rem,3vw,2.65rem)/1.1 var(--serif);margin:0 0 1.1rem}
.stills-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,2vw,1.3rem)}
.stills-grid img {aspect-ratio:16 / 9;object-fit:cover}
.film-stills figcaption {margin-top:.7rem;color:#514739;font-size:.85rem}
@media (max-width:560px) {
  .stills-grid {grid-template-columns:1fr}
}