:root {
  color-scheme: dark;
  --ink: #162119;
  --canvas: #f1eee4;
  --lime: #b8e960;
  --stone: #d8d1c0;
  --line: rgba(22, 33, 25, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header { align-items: center; background: rgba(12, 21, 15, .96); border-bottom: 1px solid rgba(255, 255, 255, .14); color: #f7f8f3; display: flex; justify-content: space-between; min-height: 76px; padding: 0 5vw; position: sticky; top: 0; z-index: 10; }
.brand { align-items: center; display: inline-flex; font-size: 19px; font-weight: 800; gap: 9px; letter-spacing: 0; }
.brand-mark { align-items: center; background: var(--lime); border-radius: 5px; color: var(--ink); display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 900; height: 30px; justify-content: center; width: 30px; }
nav { display: flex; gap: 27px; }
nav a { color: #bdc6bd; font-size: 14px; transition: color .2s ease; }
nav a:hover { color: var(--lime); }

.hero { background: #172018; min-height: 700px; overflow: hidden; position: relative; }
.hero-image { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.hero-scrim { background: linear-gradient(90deg, rgba(9, 15, 11, .88) 0%, rgba(9, 15, 11, .54) 43%, rgba(9, 15, 11, .04) 100%); inset: 0; position: absolute; }
.hero-content { color: #f7f8f3; max-width: 680px; padding: 150px 5vw 100px; position: relative; }
.eyebrow { color: var(--lime); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0; margin: 0 0 20px; text-transform: uppercase; }
.eyebrow.dark { color: #536d30; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(52px, 8vw, 112px); letter-spacing: 0; line-height: .92; margin-bottom: 30px; }
h2 { font-size: clamp(34px, 5vw, 67px); letter-spacing: 0; line-height: .98; margin-bottom: 0; }
.hero-copy { color: #d8ded5; font-size: 18px; line-height: 1.55; max-width: 500px; }
.button { background: var(--lime); color: var(--ink); display: inline-flex; font-weight: 800; gap: 16px; margin-top: 18px; padding: 15px 19px; transition: background .2s ease, transform .2s ease; }
.button:hover { background: #d3ff81; transform: translateY(-2px); }
.hero-note { bottom: 34px; color: #d8ded5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; left: 5vw; margin: 0; position: absolute; }

.section { padding: 112px 5vw; }
.intro { display: grid; gap: 10vw; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
.intro > p { font-size: 21px; line-height: 1.55; margin: 60px 0 0; }
.projects { border-top: 1px solid var(--line); }
.section-heading { max-width: 790px; }
.project-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
.project { background: #e0dbcd; display: flex; flex-direction: column; min-height: 440px; overflow: hidden; }
.project-tall { background: #d1c9b7; }
.project-wide { grid-column: span 2; }
.project img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.project-tall img { aspect-ratio: 1 / 1; object-position: center; }
.project-wide img { aspect-ratio: 16 / 7; object-position: center; }
.project div { padding: 22px 25px 26px; }
.project span { color: #607d35; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.project h3 { font-size: 28px; margin: 8px 0; }
.project p { color: #576056; line-height: 1.45; margin-bottom: 0; }

.showreel { background: #152017; color: #eff2eb; display: grid; gap: 6vw; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.showreel-copy { padding-top: 24px; }
.showreel-copy p:last-child { color: #bcc7ba; line-height: 1.55; margin-top: 24px; }
.video-frame { background: #050806; box-shadow: 14px 14px 0 rgba(184, 233, 96, .6); }
video { display: block; max-height: 560px; object-fit: cover; width: 100%; }

.youtube-section { background: #0b130d; min-height: 610px; overflow: hidden; position: relative; }
.youtube-section > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.youtube-overlay { background: linear-gradient(90deg, rgba(9, 15, 11, .94), rgba(9, 15, 11, .53) 55%, rgba(9, 15, 11, .18)); inset: 0; position: absolute; }
.youtube-content { color: #f1f3ee; max-width: 740px; padding: 130px 5vw; position: relative; }
.youtube-content p:last-of-type { color: #cad3c8; font-size: 18px; line-height: 1.55; margin: 26px 0 0; max-width: 520px; }

footer { background: #0c150f; color: #c5cfc3; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; justify-content: space-between; padding: 28px 5vw; }

@media (max-width: 720px) {
  .site-header { min-height: 64px; padding: 0 20px; }
  nav { gap: 14px; }
  nav a { font-size: 12px; }
  .brand { font-size: 16px; }
  .hero { min-height: 630px; }
  .hero-scrim { background: linear-gradient(0deg, rgba(9, 15, 11, .86), rgba(9, 15, 11, .22)); }
  .hero-content { padding: 260px 20px 80px; }
  .section { padding: 72px 20px; }
  .intro, .showreel { grid-template-columns: 1fr; }
  .intro > p { font-size: 18px; margin: 0; }
  .project-grid { grid-template-columns: 1fr; }
  .project-wide { grid-column: auto; }
  .youtube-content { padding: 250px 20px 82px; }
  .youtube-overlay { background: linear-gradient(0deg, rgba(9, 15, 11, .92), rgba(9, 15, 11, .2)); }
  footer { gap: 16px; padding: 24px 20px; }
}