/*
Theme Name: Four Candles
Description: Custom theme for Four Candles Films
Version: 11.0
*/

/* =========================
   TOKENS
========================= */
:root{
  --bg:#070708;
  --panel:#0b0b0e;
  --text:#e9e6df;
  --muted:#b9b3a8;
  --gold:#c8a24b;
  --gold2:#e3c77a;
  --line:rgba(200,162,75,.22);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius:18px;
  --max:1120px;
  --heading-font: "Trajan Pro 3", "Trajan Pro", "Cinzel", "Times New Roman", Times, serif;
  --body-font: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
  --shimmer-duration: 2.9s;
  --shimmer-opacity: .22;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  margin:0;
  font-family: var(--body-font);
  background: var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size: 20px;
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-12vh;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(1400px 900px at 50% 10%,
      rgba(0,0,0,0),
      rgba(0,0,0,.58) 68%,
      rgba(0,0,0,.92) 100%);
  opacity:1;
  transform: translateZ(0);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.016), rgba(255,255,255,.016) 1px, transparent 1px, transparent 3px);
  opacity:.08;
}
a{color:inherit;text-decoration:none}

section{padding:28px 20px}
.wrap{max-width:var(--max); margin:0 auto;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  section{padding:22px 16px}
}

.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,7,8,.62);
  border-bottom: 1px solid rgba(200,162,75,.18);
  transform: translateY(-110%);
  opacity:0;
  transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .38s ease;
}
.header.is-visible{transform:translateY(0); opacity:1;}
.nav{
  max-width:var(--max); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand img{height:26px; width:auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));}
.menu{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.menu a{
  font-family: var(--heading-font);
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  padding:10px 10px; border-radius:999px;
  transition: transform .22s cubic-bezier(.22,1,.36,1), color .25s ease, background .25s ease;
}
.menu a:hover{color:var(--text); background:rgba(200,162,75,.10); transform:translateY(-1px) scale(1.02);}

.glowHover, .menu a, .mobileMenu a, .btn, .card, details.acc, .expClose, .modalClose{
  position:relative; overflow:hidden; isolation:isolate;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .38s ease, border-color .38s ease, background .38s ease, color .25s ease;
}
.menu a::after,
.mobileMenu a::after,
.btn::after,
.card::after,
details.acc::after,
.expClose::after,
.modalClose::after{
  content:"";
  position:absolute;
  inset:-12% auto -12% -42%;
  width:34%;
  pointer-events:none;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.03) 20%,
    rgba(227,199,122,var(--shimmer-opacity)) 48%,
    rgba(255,255,255,.05) 58%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-145%) skewX(-18deg);
  opacity:0;
  filter: blur(1px);
  z-index:0;
}
.menu a > *, .mobileMenu a > *, .btn > *, .card > *, details.acc > *, .expClose > *, .modalClose > *{
  position:relative; z-index:1;
}
.projCircle, .avatar, .chev{
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .38s ease, border-color .38s ease, background .38s ease, color .25s ease;
}
@keyframes subtleGoldPass {
  0% { transform: translateX(-145%) skewX(-18deg); opacity:0; }
  18% { opacity:.10; }
  55% { opacity:.22; }
  100% { transform: translateX(460%) skewX(-18deg); opacity:0; }
}
@media (hover:hover){
  .menu a:hover, .mobileMenu a:hover, .btn:hover, .card:hover, details.acc:hover, .expClose:hover, .modalClose:hover{
    border-color: rgba(227,199,122,.34);
    box-shadow: 0 0 0 1px rgba(227,199,122,.08), 0 12px 30px rgba(0,0,0,.24);
  }
  .menu a:hover::after, .mobileMenu a:hover::after, .btn:hover::after, .card:hover::after, details.acc:hover::after, .expClose:hover::after, .modalClose:hover::after{
    animation: subtleGoldPass var(--shimmer-duration) cubic-bezier(.16,.72,.22,1) 1;
  }
  .card:hover .avatar, .card:hover .projCircle, details.acc:hover .projCircle, summary.accSum:hover .chev{
    border-color: rgba(227,199,122,.38);
    box-shadow: 0 12px 26px rgba(0,0,0,.30), 0 0 0 6px rgba(200,162,75,.05);
  }
}

.navToggle{
  font-family: var(--heading-font);
  display:none;
  border:1px solid rgba(200,162,75,.30);
  background: rgba(200,162,75,.10);
  color:var(--text);
  padding:10px 12px; border-radius:999px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.mobileMenu{display:none; border-top:1px solid rgba(200,162,75,.16); background: rgba(7,7,8,.92)}
.mobileMenu.is-open{display:block}
.mobileMenu .wrap{max-width:var(--max); margin:0 auto; padding:10px 20px 16px; display:grid; gap:6px}
.mobileMenu a{
  font-family: var(--heading-font);
  padding:12px 10px; border-radius:12px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; font-size:12px;
  border:1px solid rgba(200,162,75,.14); background: rgba(11,11,14,.35);
  transition: transform .22s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease;
}
.mobileMenu a:hover{color:var(--text); background: rgba(200,162,75,.10); transform: translateY(-1px) scale(1.01)}
@media (max-width:900px){ .menu{display:none} .navToggle{display:inline-flex} }

.intro{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden;
  background:transparent;
}
.logoStage{width:100%; text-align:center; padding:40px 0; position:relative; z-index:1;}
.logoWrap{position:relative; width:min(720px, 86%); margin:0 auto; padding:10px 0}
.logoWrap img{width:100%; height:auto; display:block; filter: drop-shadow(0 18px 36px rgba(0,0,0,.55));}
.scrollCue{
  margin-top:22px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(233,230,223,.62);
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.scrollCue::before, .scrollCue::after{
  content:""; height:1px; width:28px; background: linear-gradient(90deg, transparent, rgba(200,162,75,.85), transparent);
}

.reveal{
  opacity:0; transform:translateY(14px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.is-in{opacity:1; transform:translateY(0);}

.panel{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(200,162,75,.18);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
}
.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(227,199,122,.10), transparent 62%),
    radial-gradient(700px 260px at 90% 18%, rgba(200,162,75,.06), transparent 65%);
  opacity:.9;
}
.eyebrow{
  font-family: var(--heading-font);
  font-weight:600;
  color:var(--gold2);
  letter-spacing:.28em; text-transform:uppercase; font-size:12px; margin:0 0 12px;
}
h1,h2{
  font-family: var(--heading-font);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0;
  color:var(--gold2);
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.38);
}
h2{font-size: clamp(28px, 3.4vw, 40px); line-height:1.15}
h3{
  margin:0 0 8px;
  font-family: var(--heading-font);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold2);
}
p{margin:12px 0; font-size:1.04em}
.muted{color:var(--muted)}
input, textarea, button{font-family: var(--body-font);}
.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(200,162,75,.55), transparent);
  margin:18px 0;
}
.panelGrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.panelGridSingle{grid-template-columns:1fr}
@media (max-width:900px){ .panelGrid{grid-template-columns:1fr} .panel{padding:24px} }

.card{
  border:1px solid rgba(200,162,75,.18);
  background: rgba(11,11,14,.45);
  border-radius:16px;
  padding:22px;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
@media (hover:hover){ .card:hover{ transform: translateY(-3px) scale(1.015); } }

.photoPanel{
  border:1px solid rgba(200,162,75,.18); background: rgba(11,11,14,.45); border-radius:16px; overflow:hidden;
}
.photoSingle{
  width:100%; aspect-ratio:21/9; min-height:240px; position:relative;
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(227,199,122,.10), transparent 62%),
    radial-gradient(700px 260px at 90% 18%, rgba(200,162,75,.06), transparent 65%),
    rgba(7,7,8,.55);
}
.photoSingle img{width:100%; height:100%; object-fit:cover; display:block; filter: saturate(.98) contrast(1.04) brightness(.86);}
@media (max-width:900px){ .photoSingle{aspect-ratio:16/10} }

details.acc{
  border:1px solid rgba(200,162,75,.18);
  background: rgba(11,11,14,.45);
  border-radius:16px;
  overflow:hidden;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
@media (hover:hover){ details.acc:hover{ transform: translateY(-3px) scale(1.01);} }
summary.accSum{
  list-style:none; cursor:pointer; padding:24px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; background:transparent;
}
summary.accSum::-webkit-details-marker{display:none}
.accLead{display:flex; gap:20px; align-items:center; min-width:0;}
.accText{min-width:0;}
.accText h3{line-height:1.12; margin-bottom:6px;}
#features .accText > p.muted,
#shorts .accText > p.muted{
  display:none;
}
.chev{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(200,162,75,.24);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.08), transparent 45%),
    rgba(200,162,75,.08);
  color:rgba(233,230,223,.92);
  font-size:24px;
  line-height:1;
  transition:transform .22s ease, box-shadow .3s ease, border-color .3s ease;
  margin-top:0;
}
summary.accSum:hover .chev{
  border-color:rgba(227,199,122,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 14px rgba(200,162,75,.14);
}
details[open] .chev{transform:rotate(180deg)}
.accBody{padding: 0 22px 22px;}
.badge{
  display:inline-flex; font-family: var(--heading-font); align-items:center; gap:8px;
  border:1px solid rgba(200,162,75,.30); background: rgba(200,162,75,.10); color:var(--gold2);
  padding:8px 12px; border-radius:999px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; width:fit-content;
}
.projCircle{
  width:clamp(96px, 11vw, 132px); height:clamp(96px, 11vw, 132px); border-radius:999px; overflow:hidden; flex:0 0 auto;
  border:1px solid rgba(200,162,75,.45);
  box-shadow:0 16px 34px rgba(0,0,0,.46), 0 0 0 7px rgba(200,162,75,.05);
  background: rgba(255,255,255,.03);
}
.projCircle img{width:100%; height:100%; object-fit:cover; display:block;}

.projectsExpander{
  grid-column:1 / -1;
  border:1px solid rgba(200,162,75,.18);
  background: rgba(11,11,14,.55);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.expTop{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px;
  border-bottom:1px solid rgba(200,162,75,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.expLead{display:flex; gap:18px; align-items:center; min-width:0;}
.expMedia{flex:0 0 auto;}
.expMedia .projCircle{width:112px; height:112px;}
.expText{min-width:0;}
.expTitle{
  margin:0 0 6px;
  font-family: var(--heading-font);
  font-weight:600;
  font-size:26px;
  letter-spacing:.05em;
  color:var(--gold2);
}
.expClose{
  flex:0 0 auto; border:1px solid rgba(200,162,75,.30); background: rgba(200,162,75,.10); color:var(--text);
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center; cursor:pointer; font-size:22px; line-height:1;
}
.expBody{padding:0 22px 22px}
details.acc.is-hidden{display:none !important}

/* Project detail layout */
.filmFacts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:6px 0 18px;
}
.filmFact{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(200,162,75,.24);
  background: rgba(200,162,75,.08);
  color:var(--gold2);
  font-family: var(--heading-font);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.projectInfoGrid{
  display:grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
  gap:24px;
  align-items:start;
  margin-top:18px;
}
.projectMainCopy{
  min-width:0;
}
.projectSidebar{
  min-width:0;
}
.projectCopy{
  max-width: 70ch;
  color: var(--text);
}
.projectCopy p:first-child{margin-top:0}
.projectCopy p:last-child{margin-bottom:0}
.projectMetaGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:0;
  margin-top:0;
  padding:20px 22px;
  border:1px solid rgba(200,162,75,.14);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.metaItem{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
  align-items:start;
  min-width:0;
  padding:0 0 14px;
  margin:0 0 14px;
  border-bottom:1px solid rgba(200,162,75,.10);
}
.metaItem:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:none;
}
.metaLabel{
  font-family: var(--heading-font);
  color:var(--gold2);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.35;
}
.metaValue{
  min-width:0;
  color:var(--text);
  font-size:1.02em;
  line-height:1.55;
  word-break:break-word;
}
.metaItemLink .metaValue a{display:inline-block}
.projectStillsSpacer{height:16px}
.thumbs{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.thumb{
  aspect-ratio:16/10; border-radius:14px; border:1px solid rgba(200,162,75,.18);
  background:
    radial-gradient(420px 200px at 30% 30%, rgba(227,199,122,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}
.textLink{
  font-family: var(--heading-font);
  color:var(--gold2);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.textLink:hover{color:var(--text)}

.teamGridFeatured{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;
}
.teamGridSecondary{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;
}
.teamCardSecondary{padding:18px}
.teamCardSecondary .teamTop{gap:16px}
.teamCardSecondary .avatar{
  width:clamp(84px, 9vw, 110px); height:clamp(84px, 9vw, 110px);
  box-shadow:0 12px 28px rgba(0,0,0,.40), 0 0 0 6px rgba(200,162,75,.05);
}
.teamCardSecondary .teamText h3{font-size: clamp(18px, 1.55vw, 22px);}
.teamCardSecondary .role{font-size:11px; letter-spacing:.15em;}
.role{
  font-family: var(--heading-font);
  color:var(--gold); letter-spacing:.18em; text-transform:uppercase; font-size:12px; margin:0 0 10px;
}
.teamTop{display:flex; gap:22px; align-items:center; justify-content:space-between}
.teamText{min-width:0}
.teamText h3{overflow:hidden; text-overflow:ellipsis; line-height:1.08}
.avatar{
  width:clamp(112px, 13vw, 148px); height:clamp(112px, 13vw, 148px); border-radius:999px; flex:0 0 auto;
  display:grid; place-items:center;
  font-family: var(--heading-font); letter-spacing:.08em; color:rgba(233,230,223,.92);
  border:1px solid rgba(200,162,75,.45);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(227,199,122,.28), transparent 60%),
    radial-gradient(42px 42px at 70% 75%, rgba(200,162,75,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow:0 16px 34px rgba(0,0,0,.46), 0 0 0 7px rgba(200,162,75,.05);
  position:relative; overflow:hidden;
}
.avatar.photo{color:transparent; background-size:cover; background-position:center; background-repeat:no-repeat}
.cardBtn{
  width:100%; text-align:left; background:transparent; border:0; padding:0; color:inherit; font:inherit; cursor:pointer;
}
.cardBtn:focus-visible{outline:2px solid rgba(227,199,122,.45); outline-offset:6px; border-radius:14px}

form{display:grid; gap:12px}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(200,162,75,.20); background: rgba(7,7,8,.55);
  color:var(--text); font-size:14px; outline:none;
}
textarea{min-height:120px; resize:vertical}
.btn{
  font-family: var(--heading-font);
  border:1px solid rgba(200,162,75,.42); background: linear-gradient(180deg, rgba(200,162,75,.14), rgba(200,162,75,.06)); color:var(--text);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding:10px 14px; border-radius:999px;
  transition: transform .18s ease, background .18s ease; white-space:nowrap; width:fit-content;
}
.btn:hover{transform: translateY(-2px) scale(1.02); background: rgba(200,162,75,.16)}

.modalOverlay{
  position:fixed; inset:0; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); z-index:100; display:none; align-items:center; justify-content:center; padding:22px;
}
.modalOverlay.is-open{display:flex}
.modal{
  width:min(860px, 100%); max-height:min(78vh, 780px); overflow:auto; border-radius:18px; border:1px solid rgba(200,162,75,.22);
  background: radial-gradient(900px 360px at 50% 0%, rgba(200,162,75,.10), transparent 55%), rgba(11,11,14,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.70);
}
.modalHeader{
  position:sticky; top:0; display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  padding:18px 18px 10px; background: rgba(11,11,14,.88); border-bottom:1px solid rgba(200,162,75,.14);
}
.modalMeta{display:flex; gap:14px; align-items:center}
.modalAvatar{
  width:74px; height:74px; border-radius:999px; border:1px solid rgba(200,162,75,.45);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 7px rgba(200,162,75,.06);
  object-fit:cover; background: rgba(255,255,255,.03);
}
.modalTitle{margin:0; font-family:var(--heading-font); font-weight:600; font-size:26px}
.modalRole{margin:6px 0 0; color:var(--gold); letter-spacing:.18em; text-transform:uppercase; font-size:12px}
.modalClose{
  flex:0 0 auto; border:1px solid rgba(200,162,75,.30); background: rgba(200,162,75,.10); color:var(--text);
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center; cursor:pointer; font-size:22px; line-height:1;
}
.modalBody{padding:8px 22px 22px}
.modalBody p{color:var(--muted)}

@media (max-width:900px){
  body{font-size:18px}
  .projCircle{width:82px; height:82px}
  .expMedia .projCircle{width:92px; height:92px}
  .avatar{width:88px; height:88px}
  .accLead{align-items:flex-start}
  .projectInfoGrid{grid-template-columns:1fr; gap:18px}
  .projectCopy{max-width:none}
}
@media (max-width:680px){
  .teamGridFeatured, .teamGridSecondary{grid-template-columns:1fr}
  .teamCardFeatured .teamTop{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:14px;
  }
  .teamCardFeatured .avatar{
    order:-1;
    margin-bottom:4px;
  }
  .teamCardFeatured .teamText{
    width:100%;
  }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .header, .card, details.acc, .menu a, .mobileMenu a, .btn, .projCircle, .avatar, .expClose, .modalClose, .chev{transition:none}
}



a.filmFact.filmFactWatch{
  background:var(--gold2);
  color:var(--bg);
  border-color:var(--gold2);
  font-weight:600;
}

a.filmFact.filmFactWatch:hover{
  background:#f0d48b;
  color:var(--bg);
  border-color:#f0d48b;
}