:root{
  --bg: #0b0b0a;
  --bg-2: #131211;
  --ink: #ece7dd;
  --ink-dim: #9c968a;
  --gold: #c6a15b;
  --line: rgba(236,231,221,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.7;
}
h1,h2,h3,.serif{ font-family: 'Cormorant Garamond', serif; font-weight: 500; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* header */
header{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 6vw;
  background: rgba(11,11,10,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.logo{ font-family:'Cormorant Garamond', serif; font-size:20px; letter-spacing:1px; }
nav.main-nav{ display:flex; gap:34px; }
nav.main-nav a{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--ink-dim); position:relative; }
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--ink); }
nav.main-nav a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width .25s; }
nav.main-nav a:hover::after, nav.main-nav a.active::after{ width:100%; }
.menu-toggle{ display:none; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer; }

@media (max-width: 760px){
  nav.main-nav{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background: var(--bg);
    flex-direction:column; align-items:flex-start;
    padding: 30px 6vw; gap: 24px;
    transform: translateY(-110%);
    transition: transform .3s ease;
  }
  nav.main-nav.open{ transform: translateY(0); }
  .menu-toggle{ display:block; }
}

/* page header banner (inner pages) */
.page-hero{
  position:relative;
  min-height: 46vh;
  display:flex; align-items:flex-end;
  padding: 0 6vw 60px;
  background-size: cover;
  background-position: center 25%;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,10,0.45) 0%, rgba(11,11,10,0.75) 60%, rgba(11,11,10,1) 100%);
}
.page-hero-inner{ position:relative; z-index:1; }
.kicker{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color: var(--gold); margin-bottom:14px; }
.page-hero h1{ font-size: clamp(36px, 5vw, 60px); line-height:1.05; }

/* home hero */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex; align-items:flex-end;
  padding: 0 6vw 80px;
  background-size: cover;
  background-position: center 20%;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,10,0.35) 0%, rgba(11,11,10,0.65) 55%, rgba(11,11,10,1) 100%);
}
.hero-inner{ position:relative; z-index:1; max-width: 720px; }
.hero h1{ font-size: clamp(42px, 6vw, 76px); line-height:1.05; margin-bottom:18px; }
.hero p{ font-size:16px; color: var(--ink-dim); max-width: 520px; }

section{ padding: 90px 6vw; }
.section-tight{ padding-top: 60px; padding-bottom: 60px; }
.eyebrow{ font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-dim); margin-bottom:40px; }

/* bio layout */
.bio{ display:grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items:start; }
.bio img{ width:100%; filter: grayscale(15%) contrast(1.05); }
.bio h2{ font-size:34px; margin-bottom:24px; }
.bio p{ font-size:15.5px; color: var(--ink-dim); margin-bottom:16px; max-width:640px; }
.cv-link{ display:inline-block; margin-top:12px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--gold); border-bottom:1px solid var(--gold); padding-bottom:4px; }
@media (max-width: 760px){ .bio{ grid-template-columns: 1fr; } }

/* stats strip */
.stats{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat{ flex:1; min-width:200px; padding: 40px 6vw; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat .label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--ink-dim); margin-bottom:10px; }
.stat .value{ font-family:'Cormorant Garamond', serif; font-size:22px; }

/* role cards */
.roles{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.role-card{ border:1px solid var(--line); padding: 40px 30px; transition: border-color .25s, background .25s; }
.role-card:hover{ border-color: var(--gold); background: var(--bg-2); }
.role-card .tag{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--gold); margin-bottom:14px; }
.role-card h3{ font-size:24px; margin-bottom:12px; }
.role-card p{ font-size:14px; color: var(--ink-dim); margin-bottom:18px; }
.role-card .go{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color: var(--ink); }
@media (max-width: 760px){ .roles{ grid-template-columns: 1fr; } }

/* video / media grid */
.media-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.media-card{ border:1px solid var(--line); background: var(--bg-2); }
.media-card .thumb{ position:relative; aspect-ratio: 16/9; overflow:hidden; background:#000; }
.media-card .thumb img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.media-card iframe{ width:100%; aspect-ratio:16/9; border:none; display:block; }
.media-card .info{ padding: 18px 20px; }
.media-card h3{ font-size:16px; margin-bottom:6px; }
.media-card p{ font-size:13px; color: var(--ink-dim); }

/* generic prose block */
.prose{ max-width: 760px; }
.prose p{ font-size:15.5px; color: var(--ink-dim); margin-bottom:16px; }
.prose h2{ font-size:30px; margin-bottom:20px; }

/* placeholder card */
.placeholder{ border:1px dashed var(--line); padding: 50px 30px; text-align:center; color: var(--ink-dim); font-size:14px; }

/* footer */
footer{ padding: 60px 6vw; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); flex-wrap:wrap; gap:20px; }
footer .fname{ font-family:'Cormorant Garamond', serif; font-size:18px; }
footer .contact{ font-size:13px; color: var(--ink-dim); }
footer .contact a{ color: var(--gold); }
footer .social a{ font-size:12px; letter-spacing:1px; color: var(--ink-dim); }
footer .social a:hover{ color: var(--gold); }