:root{
  --bg:#0a0a0c;
  --bg-panel:#131317;
  --bg-panel-2:#17171d;
  --line:rgba(255,255,255,.08);
  --text:#f2f1ee;
  --text-dim:#a3a3ad;
  --navy:#2f6690;
  --navy-deep:#003153;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
}

/* Nav */
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,12,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto;
  padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:var(--serif); font-weight:700;
  letter-spacing:.14em; font-size:.85rem;
}
.nav-links{ display:flex; align-items:center; }
.nav-links a{
  color:var(--text-dim); text-decoration:none;
  font-size:.85rem; letter-spacing:.04em;
  margin-left:32px; transition:color .2s;
}
.nav-links a:hover{ color:var(--navy); }

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px;
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; height:1px; width:100%;
  background:var(--text); transition:transform .2s ease, opacity .2s ease;
}

/* Hero */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg.placeholder-hero{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 600px at 20% 10%, rgba(47,102,144,.18), transparent 60%),
    linear-gradient(160deg, #17171d 0%, #0a0a0c 60%);
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,12,1) 0%, rgba(10,10,12,.2) 55%, rgba(10,10,12,.55) 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto; width:100%;
  padding:0 28px 90px;
}
.hero-title-row{
  display:flex;
  align-items:center;
  gap:32px;
}
.hero-portrait{
  width:104px; height:104px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  display:block;
  flex:none;
}
.kicker{
  color:var(--navy);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:22px;
}
.hero h1{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(3rem, 8vw, 6.4rem);
  line-height:.98;
  letter-spacing:-.01em;
}
.tagline{
  max-width:46ch; margin:26px 0 34px;
  color:var(--text-dim); font-size:1.12rem; font-weight:300;
}
.cta{
  display:inline-block;
  color:var(--text); background:var(--navy-deep);
  text-decoration:none;
  padding:14px 30px;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.cta:hover{ transform:translateY(-2px); opacity:.9; }

/* Sections */
.section{
  max-width:1180px; margin:0 auto;
  padding:110px 28px;
}
.section.alt{ background:var(--bg-panel); max-width:none; padding-left:28px; padding-right:28px; }
.section.alt > *{ max-width:1180px; margin-left:auto; margin-right:auto; }
.section-head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:56px;
}
.section-tag{
  font-family:var(--serif); color:var(--navy);
  font-size:1rem; letter-spacing:.1em;
}
.section-head h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
}

/* Film grid */
.film-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  align-items:start;
}
.film-card{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.film-card:hover{ transform:translateY(-6px); border-color:rgba(47,102,144,.5); }

/* Posters are shown at their real proportions — no cropping, so title cards,
   laurels and cast text baked into the artwork stay fully visible. */
.film-media{ line-height:0; }
.film-media img{ width:100%; height:auto; display:block; }

.film-info{ padding:26px; }
.film-year{
  color:var(--navy); font-size:.75rem; letter-spacing:.16em;
}
.film-info h3{
  font-family:var(--serif); font-size:1.4rem; font-weight:700;
  margin:10px 0 12px;
}
.film-info p{ color:var(--text-dim); font-size:.95rem; }
.film-info p.needs-content{ font-style:italic; opacity:.7; }

.film-meta{ margin-top:18px; display:grid; gap:8px; }
.film-meta p{ font-size:.82rem; line-height:1.5; }
.film-meta .label{
  display:inline-block; color:var(--navy);
  text-transform:uppercase; letter-spacing:.08em;
  font-size:.68rem; font-weight:600;
  margin-right:8px;
}

/* Watch link — YouTube restricts embedding on a lot of student uploads,
   so we link out to the video instead of trying to iframe it in. */
.watch-link{
  display:flex; align-items:center; gap:10px;
  padding:16px 26px;
  background:var(--bg-panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--navy);
  text-decoration:none;
  font-size:.85rem; letter-spacing:.04em; font-weight:500;
  transition:background .2s ease;
}
.watch-link:hover{ background:#1c1c22; }
.watch-icon{ font-size:.7rem; }

/* Other Films — same visual language as My Films, no poster art */
.other-film-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.other-film-card{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.other-film-card:hover{ transform:translateY(-6px); border-color:rgba(47,102,144,.5); }
.other-film-card h3{
  font-family:var(--serif); font-size:1.15rem; font-weight:700;
  margin:20px 26px 8px;
}
.other-film-card p{ color:var(--text-dim); font-size:.9rem; margin:0 26px 24px; }
.other-film-card p.needs-content{ font-style:italic; opacity:.7; }

/* Credits + Stills split */
.section.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.split-col{ min-width:0; }

.credit-panel{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:44px;
}
.credit-role-line{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:28px;
}
.credit-role-line h3{ font-family:var(--serif); font-size:1.3rem; font-weight:700; }
.badge{
  color:var(--navy); border:1px solid rgba(47,102,144,.5);
  padding:5px 14px; border-radius:999px; font-size:.75rem; letter-spacing:.08em;
}
.credit-list{ list-style:none; }
.credit-list li{
  display:flex; align-items:center; gap:12px;
  padding:18px 0;
  border-top:1px solid var(--line);
  font-size:.98rem;
}
.credit-list li:first-child{ border-top:none; }
.credit-list .dot{ flex:1; border-bottom:1px dotted rgba(255,255,255,.2); margin:0 4px; height:0; align-self:center; }
.credit-list .yr{ color:var(--text-dim); font-size:.88rem; }

.credit-list + .credit-role-line{ margin-top:38px; }

/* Stills */
.stills-masonry{
  column-count:3;
  column-gap:16px;
}
.still-card{
  break-inside:avoid;
  margin-bottom:16px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:4/5;
}
.still-card img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; transition:opacity .2s ease, transform .3s ease; }
.still-card img:hover{ opacity:.85; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,8,.94);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:40px; cursor:zoom-out; gap:18px;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:100%; max-height:80vh;
  border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  cursor:default;
}
.lightbox-caption{
  color:var(--text-dim);
  font-family:var(--serif);
  font-size:1rem; letter-spacing:.04em;
  text-align:center;
}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  background:none; border:none;
  color:var(--text); font-size:2.2rem; line-height:1;
  cursor:pointer;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  width:52px; height:52px;
  border-radius:50%;
  font-size:1.8rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.14); }
.lightbox-prev{ left:24px; }
.lightbox-next{ right:24px; }

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding:50px 28px;
  text-align:center;
}
.footer-name{ font-family:var(--serif); font-size:1.1rem; }
.footer-sub{ color:var(--text-dim); font-size:.85rem; margin-top:6px; }
.footer-links{ margin-top:18px; }
.footer-links a{
  color:var(--navy); text-decoration:none; font-size:.9rem; letter-spacing:.03em;
}
.footer-links a:hover{ text-decoration:underline; }
.footer-sep{ color:var(--text-dim); margin:0 10px; font-size:.85rem; }

@media (max-width:900px){
  .film-grid{ grid-template-columns:1fr; }
  .other-film-grid{ grid-template-columns:1fr; }
  .section.split{ grid-template-columns:1fr; gap:90px; }
  .stills-masonry{ column-count:2; }
  .hero-title-row{ gap:20px; }
  .hero-portrait{ width:76px; height:76px; }
  .lightbox-nav{ width:42px; height:42px; font-size:1.4rem; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }

  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start;
    background:var(--bg-panel);
    border-bottom:1px solid var(--line);
    padding:8px 28px 20px;
    max-height:0; overflow:hidden;
  }
  .nav-links.open{ max-height:280px; padding-top:16px; }
  .nav-links a{ margin:12px 0 0; }
}