/* Christian Lagadec — shared site styles
   Design tokens live at the top; every page pulls from this one file. */

:root{
  --bg: #12100D;
  --bg-panel: #1B1815;
  --ink: #EDE7DA;
  --ink-dim: #A79E8E;
  --accent: #8C2F2F;
  --accent-bright: #B24545;
  --line: rgba(237,231,218,0.14);
  --line-strong: rgba(237,231,218,0.28);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --maxw: 1040px;
  --pad: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-padding-top: env(safe-area-inset-top, 0px);}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
}
body{
  min-height:100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img{max-width:100%;display:block;}
a{color:inherit;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:var(--ink);
  padding:12px 18px; z-index:100; text-decoration:none;
}
.skip-link:focus{left:12px; top:12px;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:relative;
  top:0; left:0; right:0;
  z-index:20;
  padding: 22px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-header.is-overlay{
  position:absolute;
  width:100%;
  background:linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.wordmark{
  font-family:var(--serif);
  font-size:1.68rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--name-color, #FFFFFF);
  white-space:normal;
}
.wordmark span{color:var(--ink-dim); font-style:normal; font-weight:400; letter-spacing:0.04em; font-size:1em;}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line-strong);
  color:var(--ink);
  width:42px;height:42px;
  border-radius:2px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle svg{width:18px;height:18px;}

.site-nav ul{
  list-style:none;
  display:flex;
  gap:clamp(18px, 3vw, 34px);
  margin:0; padding:0;
}
.site-nav a{
  text-decoration:none;
  font-size:0.95rem;
  letter-spacing:0.03em;
  color:var(--ink-dim);
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--accent-bright);
}

@media (max-width:700px){
  .nav-toggle{display:flex;}
  .site-nav{
    position:fixed; inset:0 0 0 auto;
    width:min(78vw, 320px);
    height:100vh;
    background:var(--bg-panel);
    border-left:1px solid var(--line);
    padding: calc(80px + env(safe-area-inset-top,0px)) 28px 28px;
    transform:translateX(100%);
    transition:transform .25s ease;
  }
  .site-nav.is-open{transform:translateX(0);}
  .site-nav ul{flex-direction:column; gap:22px;}
  .site-nav a{font-size:1.1rem;}

  /* Stack the name above the SAG-AFTRA line instead of running them
     together on one crowded phone-width line. Sized independently from
     the (now larger) desktop wordmark so it doesn't wrap on narrow phones. */
  .wordmark{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    line-height:1.25;
    font-size:1.44rem;
  }
  .wordmark span{font-size:1em;}
  .wordmark .sep{display:none;}
}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  text-decoration:none;
  font-size:0.92rem;
  letter-spacing:0.02em;
  border-radius:2px;
  background:transparent;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.btn:hover, .btn:focus-visible{border-color:var(--accent-bright); background:rgba(140,47,47,0.12);}

/* ================= HOME — inline video variant ================= */
.hero-inline{
  padding: clamp(48px,9vh,110px) var(--pad) clamp(40px,7vh,80px);
  max-width:var(--maxw);
  margin:0 auto;
}
.hero-inline .eyebrow-name{
  font-family:var(--serif);
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  margin:0 0 10px;
  font-weight:600;
  animation: fade-up .8s ease both;
}
.hero-inline .role-line{
  color:var(--ink-dim);
  font-size:1.05rem;
  margin:0 0 40px;
  max-width:56ch;
  animation: fade-up .8s ease .1s both;
}
.video-frame{
  position:relative;
  border:1px solid var(--line-strong);
  padding:10px;
  background:var(--bg-panel);
  animation: fade-up .9s ease .18s both;
}
.video-frame .ratio{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-caption{
  display:flex; justify-content:space-between; gap:16px;
  color:var(--ink-dim); font-size:0.85rem;
  padding:10px 4px 2px;
  flex-wrap:wrap;
}
.video-caption a{color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px;}
.video-caption a:hover{color:var(--ink);}

/* Mobile/tablet homepage: framed video right under the header, no hero
   copy above it. Hidden on desktop — .hero-full is the desktop treatment. */
.hero-inline-mobile{
  display:none;
  padding: 18px var(--pad) 8px;
  max-width:var(--maxw);
  margin:0 auto;
}
.hero-inline-mobile .video-frame{
  animation: fade-up .7s ease both;
}

@keyframes fade-up{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

/* ================= HOME — fullscreen video variant ================= */
.hero-full{
  position:relative;
  width:100%;
  height:100svh;
  min-height:480px;
  overflow:hidden;
  background:#000;
}
.hero-full .vimeo-wrapper{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .5s ease;
}
.hero-full .vimeo-wrapper.is-active{opacity:1;}
.hero-full .vimeo-wrapper iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.hero-full noscript img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.hero-full .scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,7,0.92) 0%, rgba(10,9,7,0.15) 40%, rgba(10,9,7,0.35) 100%);
  pointer-events:none;
  transition:opacity .5s ease;
}
.hero-full .hero-content{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 0 var(--pad) clamp(40px, 8vh, 90px);
  animation: fade-up 1s ease .2s both;
  z-index:6;
}
.hero-full .eyebrow-name{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 7vw, 5rem);
  margin:0 0 8px;
  font-weight:600;
}
.hero-full .role-line{
  color:var(--ink-dim);
  font-size:1.05rem;
  margin:0;
  max-width:56ch;
}

/* ---- Play gate: shown before the visitor chooses to play the reel ---- */
.hero-cover{
  position:absolute; inset:0;
  z-index:4;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at center, rgba(140,47,47,0.10) 0%, rgba(0,0,0,0) 60%),
    var(--bg);
  transition:opacity .5s ease, visibility .5s ease;
}
.hero-cover.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.hero-cover-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  opacity:0;
  transition:opacity .8s ease;
}
.hero-cover-bg.is-loaded{opacity:1;}
.hero-cover-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,7,0.72) 0%, rgba(10,9,7,0.5) 45%, rgba(10,9,7,0.82) 100%);
}
.play-gate{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
  padding:0 var(--pad);
}
.play-gate .kicker{
  color:var(--ink-dim);
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.play-button{
  width:82px; height:82px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(237,231,218,0.03);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.play-button svg{width:24px; height:24px; margin-left:4px;}
.play-button:hover, .play-button:focus-visible{
  border-color:var(--accent-bright);
  background:rgba(140,47,47,0.14);
  transform:scale(1.04);
}
.play-gate .play-label{
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:600;
}
.play-gate .play-hint{
  color:var(--ink-dim);
  font-size:0.88rem;
}

/* ---- Desktop vs. mobile/tablet homepage switch ----
   Above the breakpoint: fullscreen video hero (unchanged desktop behavior).
   At or below it: framed inline video instead, header returns to normal
   document flow (it's an overlay on desktop because it floats over the
   video; on mobile/tablet the video is just a normal block on the page). */
@media (max-width:1024px){
  .hero-full{display:none;}
  .hero-inline-mobile{display:block;}
  .site-header.is-overlay{
    position:relative;
    background:var(--bg);
  }
}

/* Phones/tablets in landscape: let the framed video use more of the
   available width rather than staying capped at the desktop max-width. */
@media (max-width:1024px) and (orientation:landscape){
  .hero-inline-mobile{padding-top:12px;}
  .hero-inline-mobile .video-frame{max-width:none;}
}

/* ---------- Screen-reader-only text ---------- */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ================= About ================= */
.about-main{
  max-width:var(--maxw);
  margin:0 auto;
  padding: clamp(28px,6vh,64px) var(--pad) clamp(60px,10vh,110px);
}
.about-grid{
  display:grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items:start;
}
.about-photo{margin:0;}
.about-photo img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  filter:grayscale(0.15);
}
.about-photo figcaption{
  margin-top:10px;
  color:var(--ink-dim);
  font-size:0.82rem;
}
.about-body h1{
  font-family:var(--serif);
  font-size:clamp(2.1rem, 4vw, 2.9rem);
  margin:0 0 22px;
  font-weight:600;
}
.about-body p{
  font-size:1.05rem;
  line-height:1.75;
  max-width:64ch;
  color:var(--ink);
  margin:0 0 20px;
}
.about-body p:first-of-type::first-letter{
  font-family:var(--serif);
  font-size:3.4em;
  float:left;
  line-height:0.8;
  padding:6px 8px 0 0;
  color:var(--accent-bright);
  font-weight:600;
}

@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;}
  .about-photo{max-width:260px;}
}

/* ================= Contact ================= */
.contact-main{
  max-width:760px;
  margin:0 auto;
  padding: clamp(28px,6vh,64px) var(--pad) clamp(60px,10vh,110px);
}
.contact-main h1{
  font-family:var(--serif);
  font-size:clamp(2.1rem, 4vw, 2.9rem);
  margin:0 0 14px;
  font-weight:600;
}
.contact-intro{
  color:var(--ink-dim);
  max-width:56ch;
  margin:0 0 40px;
  line-height:1.6;
}
.rep-list{
  border-top:1px solid var(--line);
}
.rep{
  padding:28px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px 20px;
  align-items:baseline;
}
.rep h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.4rem;
  font-variant-numeric:lining-nums;
  margin:0;
  grid-column:1;
}
.rep .region{
  color:var(--ink-dim);
  font-size:0.9rem;
  grid-column:2;
  text-align:right;
  white-space:nowrap;
}
.rep dl{
  grid-column:1 / -1;
  margin:10px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  font-size:0.98rem;
}
.rep dl a{text-decoration:underline; text-underline-offset:3px; color:var(--ink);}
.rep dl a:hover{color:var(--accent-bright);}

@media (max-width:520px){
  .rep{grid-template-columns:1fr;}
  .rep .region{grid-column:1; text-align:left;}
}

/* ================= Footer ================= */
.site-footer{
  max-width:var(--maxw);
  margin:0 auto;
  padding: 30px var(--pad) 50px;
  display:flex;
  flex-wrap:wrap;
  gap:18px 30px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
}
.footer-credentials{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.credential-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--ink-dim);
  font-size:0.88rem;
  letter-spacing:0.02em;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.credential-link:hover, .credential-link:focus-visible{color:var(--ink); border-color:var(--accent-bright);}
.credential-link img{height:22px; width:auto; opacity:0.9;}
.imdb-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.72rem; letter-spacing:0.03em;
  background:#EDE7DA; color:#12100D;
  padding:3px 6px;
  border-radius:2px;
  font-family:var(--sans);
}
.copyright{
  color:var(--ink-dim);
  font-size:0.85rem;
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent-bright);
  outline-offset:2px;
}