/* ============================================================
   The City of First Light · Meridian Special District
   Dawn palette · film-art storytelling site · v2
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}

/* ---- Tokens ---- */
:root{
  --navy:#15233D;
  --navy-deep:#0E1830;
  --navy-soft:#243A5C;
  --paper:#F3ECDB;
  --paper-warm:#FBF4E4;
  --ink:#2A2C33;
  --gold:#C6A24E;
  --gold-hi:#EAC98A;
  --coral:#E8896B;
  --coral-deep:#C97F5E;
  --teal:#2E5E63;
  --peach:#F6C99F;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1120px;
  --radius:18px;
  --shadow:0 14px 40px rgba(21,35,61,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:var(--paper);padding:.6em 1em;z-index:99}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- Reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- Header ---- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;
  background:linear-gradient(180deg,rgba(14,24,48,.78),rgba(14,24,48,.45) 70%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--paper)}
.brand b{font-family:var(--serif);font-weight:700;font-size:1.18rem;letter-spacing:.02em}
.brand span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);opacity:.9}
.site-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.site-nav a{color:var(--paper);text-decoration:none;font-size:.86rem;font-weight:500;letter-spacing:.03em;opacity:.88}
.site-nav a:hover{opacity:1;color:var(--gold-hi)}
.site-nav a.ext{border:1px solid rgba(243,236,219,.35);border-radius:999px;padding:.42em 1em}
.site-nav a.ext:hover{border-color:var(--gold-hi)}
@media (max-width:820px){.site-nav a:not(.ext){display:none}}

/* ---- Hero ---- */
.hero{
  position:relative;min-height:94vh;display:grid;align-items:end;
  background:var(--navy-deep);color:var(--paper);overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background:url('../assets/img/harbor.webp') center 38%/cover no-repeat;transform:scale(1.04)}
@media (prefers-reduced-motion:no-preference){
  .hero-bg{animation:heroDrift 26s ease-in-out infinite alternate}
  @keyframes heroDrift{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.09) translateY(-12px)}}
}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,24,48,.55) 0%,rgba(14,24,48,.12) 42%,rgba(14,24,48,.62) 78%,rgba(14,24,48,.9) 100%)}
.hero-inner{position:relative;padding:140px 24px 72px;max-width:var(--maxw);margin:0 auto;width:100%}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 14px;font-weight:600}
.hero h1{
  font-family:var(--serif);font-weight:700;margin:0 0 14px;
  font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1.04;letter-spacing:.005em;
  text-shadow:0 2px 30px rgba(14,24,48,.55);
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-hi)}
.hero p.lede{max-width:37em;font-size:1.06rem;line-height:1.7;color:rgba(243,236,219,.92);margin:0 0 22px}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none}
.hero-stats li{border:1px solid rgba(234,201,138,.4);border-radius:999px;padding:.35em 1em;font-size:.78rem;letter-spacing:.06em;color:var(--gold-hi)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.92rem;letter-spacing:.03em;border-radius:999px;padding:.78em 1.6em;transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--navy-deep);box-shadow:0 8px 26px rgba(198,162,78,.35)}
.btn-ghost{color:var(--paper);border:1.5px solid rgba(243,236,219,.55)}
.btn-ghost:hover{border-color:var(--gold-hi);color:var(--gold-hi)}
.hero-note{font-size:.74rem;color:rgba(243,236,219,.55);max-width:46em}

/* ---- Section scaffolding ---- */
section{padding:88px 0}
.sec-eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-deep);font-weight:600;margin:0 0 10px}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;margin:0 0 16px;color:var(--navy)}
.sec-lede{max-width:46em;color:#4b4e58;margin:0 0 40px}

/* ---- Story: logline ---- */
#story{background:linear-gradient(180deg,var(--paper) 0%,#EFE4CC 100%)}
.logline{
  border-left:4px solid var(--gold);background:var(--paper-warm);
  border-radius:0 var(--radius) var(--radius) 0;box-shadow:0 10px 30px rgba(21,35,61,.08);
  padding:26px 30px;margin:0 0 56px;max-width:56em;
}
.logline p{font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.55;color:var(--navy);margin:0}

/* ---- Story: acts ---- */
.act{margin:0 0 72px}
.act:last-child{margin-bottom:0}
.act-head{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;margin:0 0 30px}
@media (max-width:880px){.act-head{grid-template-columns:1fr}}
.act-head .act-no{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-deep);font-weight:600;margin:0 0 8px}
.act-head h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--navy);margin:0 0 10px}
.act-head h3 em{font-style:italic;font-weight:500;color:var(--coral-deep)}
.act-head p{margin:0;color:#4b4e58;max-width:34em}
.act-reel{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(21,35,61,.06)}
.act-reel video{width:100%;aspect-ratio:16/9;background:var(--navy-deep)}
.act-reel .reel-cap{display:flex;justify-content:space-between;align-items:baseline;padding:12px 18px;font-size:.8rem;color:#6b6e78}
.act-reel .reel-cap b{font-family:var(--serif);font-size:1.02rem;color:var(--navy);font-weight:600}

/* ---- Episode cards ---- */
.ep-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media (max-width:820px){.ep-grid{grid-template-columns:1fr}}
.film{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(21,35,61,.06)}
.film video{width:100%;aspect-ratio:16/9;background:var(--navy-deep)}
.film-meta{padding:20px 22px 24px}
.film-meta .ep{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-deep);font-weight:600}
.film-meta h4,.film-meta h3{font-family:var(--serif);font-size:1.42rem;font-weight:700;color:var(--navy);margin:.25em 0 .35em}
.film-meta p{margin:0;font-size:.88rem;color:#55585f;line-height:1.6}
.film-meta .dur{color:#9a9da5;font-size:.78rem;margin-left:.6em;letter-spacing:.05em}

/* ---- City: cinematic district panels ---- */
#city{background:var(--navy-deep);color:var(--paper)}
#city h2{color:var(--paper)}
#city .sec-lede{color:rgba(243,236,219,.78)}
#city .sec-eyebrow{color:var(--gold-hi)}
.dist{
  display:grid;grid-template-columns:1.2fr 1fr;gap:0;align-items:stretch;
  background:#111D36;border:1px solid rgba(234,201,138,.16);
  border-radius:var(--radius);overflow:hidden;margin:0 0 36px;
  box-shadow:0 18px 50px rgba(6,12,26,.5);
}
.dist:nth-child(even){grid-template-columns:1fr 1.2fr}
.dist:nth-child(even) .dist-img{order:2}
@media (max-width:880px){
  .dist,.dist:nth-child(even){grid-template-columns:1fr}
  .dist:nth-child(even) .dist-img{order:0}
}
.dist-img{position:relative;min-height:300px}
.dist-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.dist-body{padding:34px 36px;display:flex;flex-direction:column;gap:12px;justify-content:center}
@media (max-width:880px){.dist-body{padding:26px 24px}}
.dist-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);font-weight:600;margin:0}
.dist-body h3{font-family:var(--serif);font-size:1.75rem;font-weight:700;color:var(--paper);margin:0}
.dist-host{font-size:.82rem;color:rgba(243,236,219,.6);margin:0}
.dist-quote{font-family:var(--serif);font-style:italic;font-size:1.14rem;line-height:1.5;color:var(--gold-hi);border-left:3px solid var(--gold);padding-left:14px;margin:4px 0}
.dist-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 2px}
@media (max-width:1020px){.dist-facts{grid-template-columns:1fr}}
.dist-fact{background:rgba(243,236,219,.05);border:1px solid rgba(243,236,219,.12);border-radius:12px;padding:12px 14px}
.dist-fact b{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.dist-fact.is b{color:#8FD0C3}
.dist-fact.not b{color:var(--coral)}
.dist-fact p{margin:0;font-size:.84rem;line-height:1.55;color:rgba(243,236,219,.85)}
.dist-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.dist-link{font-weight:600;font-size:.86rem;text-decoration:none;color:var(--paper);border-bottom:2px solid var(--gold);padding-bottom:2px}
.dist-link:hover{color:var(--gold-hi)}
.ep-chip{font-size:.72rem;letter-spacing:.08em;color:var(--gold-hi);text-decoration:none;border:1px solid rgba(234,201,138,.4);border-radius:999px;padding:.3em .9em}
.ep-chip:hover{background:rgba(234,201,138,.12)}

/* ---- City rules band ---- */
#rules{background:var(--navy);color:var(--paper);padding:72px 0}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:760px){.rules-grid{grid-template-columns:1fr}}
.rule{border:1px solid rgba(243,236,219,.18);border-radius:14px;padding:24px 22px;background:rgba(243,236,219,.04)}
.rule-glyph{display:block;margin-bottom:12px;line-height:0}
.rule h3{font-family:var(--serif);font-size:1.32rem;font-weight:600;margin:0 0 8px;color:var(--gold-hi)}
.rule p{margin:0;font-size:.9rem;color:rgba(243,236,219,.82);line-height:1.6}

/* ---- Postcards (concept shorts) ---- */
#postcards{background:linear-gradient(180deg,#EFE4CC 0%,var(--paper) 30%)}
.pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1020px){.pc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pc-grid{grid-template-columns:1fr}}
.pc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(21,35,61,.12);border:1px solid rgba(21,35,61,.06)}
.pc video{width:100%;aspect-ratio:16/9;background:var(--navy-deep)}
.pc-meta{padding:14px 16px 16px}
.pc-meta b{font-family:var(--serif);font-size:1.06rem;color:var(--navy);font-weight:700;display:block;margin-bottom:2px}
.pc-meta span{font-size:.76rem;color:#7c7f88}

/* ---- Persona ---- */
#you{background:var(--paper)}
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:980px){.persona-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.persona-grid{grid-template-columns:1fr}}
.persona{
  background:linear-gradient(165deg,var(--paper-warm),#F1E3C6);
  border:1px solid rgba(198,162,78,.4);border-radius:var(--radius);
  padding:26px 22px;display:flex;flex-direction:column;gap:10px;
  transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;color:var(--ink);
}
.persona:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.persona .glyph{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--paper);
  background:radial-gradient(circle at 32% 28%,var(--navy-soft),var(--navy-deep));
  border:2px solid var(--gold);
}
.persona h3{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--navy);margin:6px 0 0}
.persona .role{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);font-weight:600}
.persona p{margin:0;font-size:.87rem;color:#55585f;line-height:1.6;flex:1}
.persona .go{font-weight:600;font-size:.85rem;color:var(--teal)}
.persona:hover .go{color:var(--navy)}

/* ---- Footer ---- */
.site-foot{background:var(--navy-deep);color:rgba(243,236,219,.8);padding:64px 0 40px;font-size:.86rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{font-family:var(--serif);color:var(--paper);font-size:1.25rem;margin:0 0 10px;font-weight:600}
.site-foot p{margin:0 0 10px;line-height:1.65}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.site-foot a{color:var(--gold-hi);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-motto{font-family:var(--serif);font-style:italic;color:var(--gold-hi);font-size:1.05rem}
.foot-legal{border-top:1px solid rgba(243,236,219,.15);padding-top:22px;font-size:.74rem;color:rgba(243,236,219,.5);line-height:1.7}