:root { --bg:#000; --fg:#fff; --muted:#888; --mono:'Lucida Console', 'Courier New', monospace; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--fg); font-family:var(--mono); min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--fg); text-decoration:none; }

.site-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem clamp(1.25rem,4vw,3rem); position:relative; }
.brand { font-size:1.15rem; letter-spacing:.02em; }
.site-nav { display:flex; gap:2rem; }
.site-nav a { font-size:.95rem; opacity:.75; transition:opacity .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity:1; }
.site-nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:6px; }

.nav-toggle { display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--fg); margin:5px 0; transition:transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

main { flex:1; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,5vw,5rem); padding:2rem clamp(1.25rem,4vw,3rem) 4rem; max-width:1200px; width:100%; margin:0 auto; }
.hero h1 { font-weight:normal; font-size:clamp(2rem,5vw,3.75rem); line-height:1.2; margin:0; }
.hero-portrait { margin:0; }
.hero-portrait img { width:100%; max-height:78vh; object-fit:cover; display:block; filter:grayscale(1); }

.hero h2 { font-weight:normal; font-size:clamp(2rem,5vw,3.75rem); margin:.25rem 0 1.25rem; letter-spacing:.08em; text-transform:uppercase; }
.kicker { color:var(--muted); font-size:.85rem; letter-spacing:.15em; text-transform:uppercase; margin:0; }
.tagline { line-height:1.7; opacity:.85; max-width:34em; margin:0 0 2rem; }
.more { display:inline-block; border-bottom:1px solid var(--fg); padding-bottom:3px; transition:opacity .2s; }
.more:hover { opacity:.6; }
.film .hero-portrait img { object-fit:contain; filter:none; }
.divider { display:flex; align-items:center; gap:1.25rem; max-width:1200px; margin:2rem auto; padding:0 clamp(1.25rem,4vw,3rem); color:var(--muted); }
.divider span { flex:1; height:1px; background:linear-gradient(90deg,transparent,#555,transparent); }
.divider i { font-style:normal; font-size:.9rem; }

.site-footer { color:var(--muted); font-size:.8rem; text-align:center; padding:2rem 1rem; }

@media (max-width:720px) {
  .nav-toggle { display:block; }
  .site-nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-top:1px solid #222; border-bottom:1px solid #222; z-index:10; }
  .site-nav.open { display:flex; }
  .site-nav a { padding:1rem clamp(1.25rem,4vw,3rem); font-size:1.05rem; }
  .hero { grid-template-columns:1fr; text-align:center; padding-top:1rem; }
  .hero-portrait { order:-1; }
  .tagline { margin-left:auto; margin-right:auto; }
  .hero-portrait img { max-height:60vh; }
}

/* stills strip */
.stills { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; width:100%; margin:2rem 0; }
.stills img { width:100%; height:auto; aspect-ratio:1400/735; object-fit:cover; display:block; }
/* simple sections */
.section { max-width:800px; margin:0 auto; padding:2rem clamp(1.25rem,4vw,3rem) 3rem; text-align:center; }
.section .kicker { margin-bottom:1.75rem; }
.section .tagline { margin-left:auto; margin-right:auto; }
.fest-list { list-style:none; padding:0; margin:0; }
.fest-list li { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid #222; text-align:left; }
.fest-list li span:last-child { color:var(--muted); text-align:right; }
.socials { display:flex; justify-content:center; align-items:center; gap:1.75rem; padding:2rem 1rem 0; color:var(--muted); font-size:.85rem; }
.socials a { color:var(--muted); transition:color .2s; display:inline-flex; }
.socials a:hover { color:var(--fg); }
@media (max-width:720px) {
  .stills { grid-template-columns:1fr; }
  .fest-list li { flex-direction:column; gap:.25rem; }
  .fest-list li span:last-child { text-align:left; }
}

/* Resonance film page */
.film-title { font-weight:normal; font-size:clamp(2.25rem,6vw,4.25rem); letter-spacing:.08em; text-transform:uppercase; margin:.25rem 0 1.25rem; }
.credits { margin:0; font-size:.85rem; line-height:1.6; }
.credits div { padding:.6rem 0; border-top:1px solid #1e1e1e; }
.credits dt { color:var(--muted); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.credits dd { margin:0; }
.trailer video { aspect-ratio:16/9; object-fit:cover; width:100%; max-width:1000px; display:block; margin:1.5rem auto 0; background:#111; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.gallery img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:opacity .2s; }
.gallery a:hover img { opacity:.75; }
.files { list-style:none; padding:0; margin:1.5rem auto 0; max-width:640px; text-align:left; }
.files li { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid #1e1e1e; font-size:.9rem; }
.files small { color:var(--muted); margin-left:.5rem; }
@media (max-width:720px) {
  .gallery { grid-template-columns:1fr 1fr; }
  .files li { flex-direction:column; align-items:flex-start; gap:.4rem; }
  .credits { text-align:left; }
}

/* Bio & Contact */
.muted { color:var(--muted); }
.placeholder { opacity:.45; font-style:italic; }
.contact-email { font-size:clamp(1.25rem,3.5vw,2rem); margin:1.5rem 0 2.5rem; }
.contact-email a { border-bottom:1px solid var(--fg); padding-bottom:4px; }
.contact { padding-top:4rem; }

/* Icon-only arrow button */
.arrow-btn { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border:1px solid var(--fg); border-radius:50%; color:var(--fg); transition:background .2s, color .2s, transform .2s; }
.arrow-btn:hover { background:var(--fg); color:var(--bg); transform:translateX(4px); }
.arrow-btn:focus-visible { outline:2px solid var(--fg); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) { .arrow-btn, .arrow-btn:hover { transition:none; transform:none; } }

.hero-about { margin-top:2rem; }
.hero-about .kicker { margin-bottom:.75rem; }
.hero-about .tagline { margin-bottom:1rem; }

.role{color:#888;margin:-.25rem 0 1rem;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}

/* Works page */
.page-title{font-size:clamp(2rem,5vw,3.5rem);margin:.25rem 0 1rem}
.works-heading{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 2rem}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:3rem 2.5rem}
.work{display:flex;flex-direction:column}
.work-img{margin:0 0 1rem;aspect-ratio:3/2;overflow:hidden;background:#111}
.work-img img{width:100%;height:100%;object-fit:cover;display:block}
.work h3{margin:.25rem 0 .35rem;font-size:1.2rem}
.work-desc{color:#ccc;line-height:1.6;margin:0 0 1rem}
.arrow-btn.small{width:44px;height:44px;margin-top:auto}
.works-group{max-width:1100px}

/* Works: desktop alternating rows like the home page */
@media (min-width:800px){
  .works-group{max-width:1100px;margin-left:auto;margin-right:auto}
  .works-grid{display:flex;flex-direction:column;gap:5rem}
  .work{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;text-align:left}
  .work-img{margin:0}
  .work:nth-child(even) .work-img{order:2}
  .work .arrow-btn.small{margin-top:.5rem}
}

/* Posters (TV series, student films): show whole image, no crop */
.work-img.poster{aspect-ratio:auto;background:none}
.work-img.poster img{height:auto;object-fit:contain;max-height:80vh;width:auto;max-width:100%;margin:0 auto}