/* ============================================================
   LUNA LUMEN FILM FESTIVAL — design tokens
   Dark, dramatic palette: near-black grounds, deep maroon,
   warm gold. Signature motif: the moon-phase wayfinder — an
   8-phase strip marking where something sits in its cycle
   (open / in review / awarded).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink: #0A0708;         /* primary background — near black */
  --ink-2: #170F10;       /* nav / footer / alt-section panel */
  --panel: #1F1517;       /* card & component surface */
  --paper: #1B1213;       /* input / quiz-shell surface */
  --ink-line: rgba(198,162,77,0.16);

  --moonlight: #ECE1C8;   /* warm ivory — headings, nav text, icons */
  --moonlight-dim: #C9BBA0;
  --ink-text: #D9CDB8;    /* body copy on dark grounds */
  --silver: #B7A38C;      /* muted secondary text */

  --laurel: #C6A24D;      /* gold accent */
  --gold-bright: #E4C878;
  --rust: #B23A4A;        /* maroon/crimson accent */
  --maroon-deep: #4E0F1B; /* deep maroon fill for borders/panels */
  --sage: #A9803D;        /* bronze accent (third accent tone) */

  --display: 'Fraunces', serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'Space Mono', monospace;

  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--ink);
  color:var(--ink-text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0 0 .5em;color:var(--moonlight);}
h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:500;}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rust);
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* ---------- nav ---------- */
.site-nav{
  background:var(--ink-2);
  color:var(--moonlight);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--ink-line);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:20px;padding-top:10px;padding-bottom:10px;}
.brand{
  font-family:var(--display);
  font-size:1.25rem;
  color:var(--moonlight);
  text-decoration:none;
  display:flex;align-items:center;gap:12px;
  letter-spacing:.01em;
  flex:none;
}
.brand-logo{height:140px;width:auto;flex:none;}
.brand .glyph{width:22px;height:22px;flex:none;color:var(--laurel);}
.nav-links{display:flex;align-items:center;gap:1.8rem;list-style:none;margin:0;padding:0;flex:1;}
.nav-links a{
  text-decoration:none;color:var(--silver);
  font-size:.92rem;letter-spacing:.02em;
  transition:color .15s;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
}
.nav-links a:hover,.nav-links a.active{color:var(--moonlight);border-color:var(--laurel);}
.nav-submit{margin-left:auto;flex:none;}
.nav-toggle{display:none;background:none;border:none;color:var(--moonlight);font-size:1.6rem;cursor:pointer;}

@media (max-width:860px){
  .site-nav .wrap{padding-left:16px;padding-right:16px;padding-top:4px;padding-bottom:4px;}
  .hero{padding:48px 0 40px;}
  .brand-logo{height:90px;}
  .brand{min-width:0;flex-shrink:1;}
  .nav-submit{flex-shrink:1;min-width:0;padding:7px 10px;font-size:.72rem;white-space:nowrap;}
  .nav-toggle{display:block;order:3;flex:none;font-size:1.3rem;}
  .site-nav .wrap{gap:10px;}
  .nav-submit{order:2;margin-left:0;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--ink-2);
    flex-direction:column;align-items:flex-start;gap:0;border-bottom:1px solid var(--ink-line);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-links.open{max-height:400px;}
  .nav-links a{display:block;padding:14px 28px;border-bottom:1px solid var(--ink-line);width:100%;}
}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(ellipse at 78% 10%, rgba(198,162,77,0.14), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(78,15,27,0.35), transparent 60%),
    var(--ink);
  color:var(--moonlight);
  padding:110px 0 96px;
  position:relative;
  overflow:hidden;
}
.hero .wrap{position:relative;z-index:2;}
.hero-sub{
  max-width:560px;font-size:1.08rem;color:var(--silver);
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem;}

.hero-with-image{
  background-image:
    linear-gradient(180deg, rgba(10,7,8,0.55) 0%, rgba(10,7,8,0.88) 100%),
    radial-gradient(ellipse at 10% 90%, rgba(78,15,27,0.4), transparent 60%),
    url('../images/hero.jpg');
  background-size:cover;
  background-position:center;
}

/* moon phase wayfinder — signature motif */
.moon-strip{
  display:flex;align-items:center;gap:14px;margin:2.4rem 0 0;
}
.moon-strip .phase{width:26px;height:26px;flex:none;}
.moon-strip .track{flex:1;height:1px;background:var(--ink-line);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:2px;
  font-family:var(--body);font-weight:600;font-size:.92rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background .15s;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--laurel);color:#1a1206;}
.btn-primary:hover{background:var(--gold-bright);}
.btn-ghost{border-color:var(--ink-line);color:var(--moonlight);}
.btn-ghost:hover{background:rgba(236,225,200,0.06);}
.btn-dark{background:var(--maroon-deep);color:var(--moonlight);border-color:rgba(198,162,77,0.25);}
.btn-dark:hover{background:#63182A;}
.btn-sm{padding:9px 18px;font-size:.82rem;}

/* ---------- sections ---------- */
section{padding:86px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--ink-2);}

.grid{display:grid;gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--panel);
  border:1px solid var(--ink-line);
  padding:30px 28px;
  position:relative;
}
.card .phase-icon{width:20px;height:20px;margin-bottom:14px;}
.card h3{margin-bottom:.4em;}
.card .lead{font-family:var(--mono);font-size:.7rem;color:var(--rust);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:10px;}

.category-card{border-left:3px solid var(--rust);}
.category-card.sage{border-left-color:var(--sage);}
.category-card.laurel{border-left-color:var(--laurel);}

/* judges */
.judge{display:flex;gap:20px;align-items:flex-start;}
.judge .initial{
  width:56px;height:56px;border-radius:50%;
  background:var(--maroon-deep);color:var(--laurel);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.3rem;flex:none;
  border:1px solid rgba(198,162,77,0.3);
}
.judge h3{margin-bottom:.15em;font-size:1.15rem;}
.judge .role{font-family:var(--mono);font-size:.72rem;color:var(--sage);text-transform:uppercase;letter-spacing:.08em;}

/* quote */
.blockquote{
  font-family:var(--display);font-style:italic;font-size:1.4rem;
  color:var(--moonlight);border-left:2px solid var(--laurel);padding-left:24px;
  max-width:760px;
}

/* footer */
.site-footer{background:var(--ink-2);color:var(--silver);padding:56px 0 30px;border-top:1px solid var(--ink-line);}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;}
.site-footer h4{font-family:var(--display);color:var(--moonlight);font-size:1.05rem;margin-bottom:.6em;}
.site-footer a{color:var(--silver);text-decoration:none;font-size:.92rem;}
.site-footer a:hover{color:var(--moonlight);}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap;}
.foot-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.foot-bottom{
  border-top:1px solid var(--ink-line);margin-top:40px;padding-top:20px;
  font-family:var(--mono);font-size:.72rem;color:var(--silver);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* video embed */
.video-frame{
  position:relative;padding-top:56.25%;background:var(--ink);
  overflow:hidden;border:1px solid var(--ink-line);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* embed page wrapper (quiz/tracker) */
.embed-wrap{background:var(--ink-2);}
.embed-frame{width:100%;border:0;min-height:900px;background:var(--paper);}
.embed-note{
  font-family:var(--mono);font-size:.78rem;color:var(--gold-bright);
  background:rgba(198,162,77,0.08);border:1px solid rgba(198,162,77,0.25);
  padding:14px 18px;margin-bottom:28px;
}

/* form */
.form-field{margin-bottom:18px;min-width:0;}
.form-field label{display:block;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;color:var(--silver);}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:12px 14px;border:1px solid var(--ink-line);
  background:var(--paper);font-family:var(--body);font-size:.95rem;color:var(--ink-text);
}
.form-field textarea{min-height:130px;resize:vertical;}

.divider-phases{display:flex;justify-content:center;gap:16px;margin:0 auto;padding:20px 0 0;}
.divider-phases .phase{width:16px;height:16px;opacity:.5;}