/* ═══════════════════════════════════════════════
   LORE DUMP — Shared Stylesheet
   ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --parchment:#F0EBE0;
  --parchment-dim:#C8BFA8;
  --ink:#0D0A07;
  --deep:#1C1510;
  --mid:#2E2218;
  --gold:#C9A84C;
  --gold-dim:#8A6F2E;
  --gold-bright:#ecdaa9;
  --crimson:#8B2E2E;
  --crimson-bright:#B03A3A;
}

html{scroll-behavior:smooth}

body{
  background:var(--ink);
  color:var(--parchment);
  font-family:'Crimson Text',Georgia,serif;
  font-size:18px;
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
}

/* ── NAV ──────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(13,10,7,0.93);
  border-bottom:1px solid var(--gold-dim);
  padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.nav-logo{
  font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;
  color:var(--gold);text-decoration:none;letter-spacing:0.08em;white-space:nowrap;
}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.12em;
  color:var(--parchment-dim);text-decoration:none;text-transform:uppercase;
  transition:color 0.2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.ks-badge{
  font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.1em;
  text-transform:uppercase;background:var(--crimson);color:var(--parchment);
  padding:0.3rem 0.8rem;border-radius:2px;border:1px solid var(--crimson-bright);white-space:nowrap;
}
/* Hamburger */
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:4px;background:none;border:none;
}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--parchment-dim);transition:0.2s}
/* Mobile menu */
.mobile-menu{
  display:none;position:fixed;top:60px;left:0;right:0;
  background:rgba(13,10,7,0.98);border-bottom:1px solid var(--gold-dim);
  padding:1.5rem;z-index:99;flex-direction:column;gap:1.2rem;
}
.mobile-menu a{
  font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:0.12em;
  color:var(--parchment-dim);text-decoration:none;text-transform:uppercase;
}
.mobile-menu.open{display:flex}

/* ── HERO (index — no bg image, candlelight vignette) ─────── */
.hero{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6rem 2rem 4rem;
  overflow:hidden;
  background-size:cover;background-position:center 30%;background-repeat:no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(13,10,7,0.18) 0%,
    rgba(13,10,7,0.40) 40%,
    rgba(13,10,7,0.72) 70%,
    rgba(13,10,7,1.00) 100%
  );
  z-index:0;
}
/* Candlelight vignette on body for index (no bg image) */
body.page-index::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(180,100,20,0.07) 0%,rgba(13,10,7,0.6) 70%);
  pointer-events:none;z-index:0;
}
.hero-eyebrow{
  font-family:'Cinzel',serif;font-size:0.9rem;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:1.5rem;
}
.hero h1{
  font-family:'Cinzel',serif;font-size:clamp(2.8rem,7vw,5.5rem);font-weight:700;
  color:var(--parchment);line-height:1.1;letter-spacing:0.04em;margin-bottom:1rem;
  text-shadow:0 0 60px rgba(201,168,76,0.2);
}
.hero h1 span{color:var(--gold)}
.hero-tagline{
  font-family:'Crimson Text',serif;font-size:clamp(1.1rem,2.5vw,1.5rem);
  font-style:italic;color:var(--parchment-dim);max-width:620px;
  margin:0 auto 2.5rem;line-height:1.5;
}
.cta-group{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:0.5rem}

/* ── PAGE HEADER (interior pages — bg image hero) ─────────── */
/*
  Overlay is a real sibling div (not ::after) for reliable mobile rendering.
  Opacity reduced ~10% vs previous: mid stops are 0.40 and 0.62 instead of 0.55/0.75
*/
.page-header{
  position:relative;
  min-height:52vh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:5rem 2rem 3.5rem;overflow:hidden;
  background-size:cover;background-repeat:no-repeat;
}
.page-header-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(13,10,7,0.18) 0%,
    rgba(13,10,7,0.40) 40%,
    rgba(13,10,7,0.72) 70%,
    rgba(13,10,7,1.00) 100%
  );
  z-index:0;
}
.page-header-content{position:relative;z-index:1;max-width:680px}
.eyebrow{
  font-family:'Cinzel',serif;font-size:0.9rem;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:1rem;
}
.page-header h1{
  font-family:'Cinzel',serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;
  color:var(--parchment);line-height:1.15;margin-bottom:0.8rem;
  text-shadow:0 2px 20px rgba(0,0,0,0.9);
}
.page-header .lead{font-size:1.1rem;color:var(--parchment-dim);font-style:italic}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary{
  display:inline-block;font-family:'Cinzel',serif;font-size:1rem; font-weight: 600;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--ink);
  background:var(--gold);padding:0.9rem 2.2rem;border-radius:2px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background 0.2s,transform 0.15s;white-space:nowrap;
}
.btn-primary:hover{background:#D4B060;transform:translateY(-1px)}
.btn-secondary{
  display:inline-block;font-family:'Cinzel',serif;font-size:1rem; font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);
  background:transparent;padding:0.85rem 2.2rem;border-radius:2px;
  text-decoration:none;border:1px solid var(--gold-dim);cursor:pointer;
  transition:border-color 0.2s,color 0.2s,transform 0.15s;white-space:nowrap;
}
.btn-secondary:hover{border-color:var(--gold);color:var(--parchment);transform:translateY(-1px)}
.btn-discord{
  display:inline-block;font-family:'Cinzel',serif;font-size:0.8rem;
  letter-spacing:0.12em;text-transform:uppercase;color:#fff;
  background:#5865F2;padding:0.65rem 1.4rem;border-radius:2px;
  text-decoration:none;transition:background 0.2s;
}
.btn-discord:hover{background:#4752C4}

/* ── LAYOUT UTILS ─────────────────────────────────────────── */
.section{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:5rem 2rem}
.section-eyebrow{
  font-family:'Cinzel',serif;font-size:0.9rem;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:1rem;text-align:center;
}
.section h2{
  font-family:'Cinzel',serif;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;
  color:var(--parchment);line-height:1.2;margin-bottom:1.5rem;text-align:center;
}
.section p{
  color:var(--parchment-dim);max-width:680px;margin:0 auto 1.2rem;
  text-align:center;font-size:1.05rem;
}
.divider-ornament{
  display:flex;align-items:center;gap:1rem;justify-content:center;
  margin:2rem auto;color:var(--gold-dim);max-width:860px;padding:0 2rem;
  position:relative;z-index:1;
}
.divider-ornament::before,.divider-ornament::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--gold-dim));
}
.divider-ornament::after{background:linear-gradient(to left,transparent,var(--gold-dim))}

/* ── FOG CALLOUT ──────────────────────────────────────────── */
.fog-callout{
  background:var(--deep);border:1px solid var(--gold-dim);border-left:3px solid var(--gold);
  padding:2rem 2.5rem;margin:3rem auto;max-width:680px;position:relative;z-index:1;
}
.fog-callout h3{font-family:'Cinzel',serif;font-size:1.4rem;color:var(--gold);margin-bottom:0.75rem;letter-spacing:0.06em}
.fog-callout p{text-align:left;color:var(--parchment-dim);font-style:italic;margin:0;font-size:1.2rem}

/* ── FEATURE CHIPS (home) ─────────────────────────────────── */
.feature-preview-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.5rem;margin:3rem 0;
}
.feature-chip{
  background:var(--deep);border:1px solid rgba(201,168,76,0.2);
  padding:1.2rem 1.5rem;transition:border-color 0.2s;
}
.feature-chip:hover{border-color:var(--gold-dim)}
.feature-chip h4{font-family:'Cinzel',serif;font-size:0.85rem;color:var(--gold);letter-spacing:0.08em;margin-bottom:0.4rem}
.feature-chip p{font-size:0.9rem;color:var(--parchment-dim);text-align:left;margin:0;line-height:1.5}

/* ── PRE-KS BAND ──────────────────────────────────────────── */
.pre-ks-section{
  background:var(--deep);border-top:1px solid var(--gold-dim);
  border-bottom:1px solid var(--gold-dim);text-align:center;padding:5rem 2rem;
}
.pre-ks-section .inner{max-width:680px;margin:0 auto}

/* ── FEATURES PAGE ────────────────────────────────────────── */
.features-container{
  position:relative;z-index:1;max-width:900px;margin:0 auto;
  padding:0 2rem 6rem;display:flex;flex-direction:column;gap:0;
}
.feature-card{
  border-bottom:1px solid rgba(201,168,76,0.15);
  padding:3rem 0;
  display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:start;
}
.feature-card:first-child{border-top:1px solid rgba(201,168,76,0.15)}
/* Sticky left label — the scroll effect */
.feature-card-left{position:sticky;top:80px}
.feature-number{
  font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.2em;
  color:var(--gold-dim);margin-bottom:0.5rem;
}
.feature-card h2{
  font-family:'Cinzel',serif;font-size:1.2rem;font-weight:600;
  color:var(--gold);letter-spacing:0.05em;line-height:1.3;margin-bottom:0.6rem;text-align:left;
}
.feature-tagline{
  font-family:'Crimson Text',serif;font-size:1rem;font-style:italic;
  color:var(--parchment-dim);line-height:1.4;
}
.feature-card-right p{color:var(--parchment-dim);font-size:1.02rem;line-height:1.75;margin-bottom:1rem}
.feature-card-right p:last-child{margin-bottom:0}
/* Featured card */
.feature-card.featured{
  background:var(--deep);margin:0 -2rem;padding:3rem 2rem;
  border-left:3px solid var(--gold);border-right:none;
  border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);
}
.features-cta{
  position:relative;z-index:1;text-align:center;padding:4rem 2rem 5rem;
  border-top:1px solid rgba(201,168,76,0.2);
}

/* ── JOIN PAGE ────────────────────────────────────────────── */
.join-layout{
  position:relative;z-index:1;max-width:1000px;margin:0 auto;
  padding:0 2rem 5rem;display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:start;
}
.join-perks h2{
  font-family:'Cinzel',serif;font-size:1.2rem;font-weight:600;color:var(--parchment);
  margin-bottom:1.8rem;padding-bottom:1rem;border-bottom:1px solid rgba(201,168,76,0.2);
}
.perk-item{display:flex;gap:1rem;margin-bottom:1.8rem;align-items:start}
.perk-icon{color:var(--gold);font-size:1rem;line-height:1.7;flex-shrink:0;width:1.2rem;text-align:center}
.perk-item h3{font-family:'Cinzel',serif;font-size:0.82rem;color:var(--gold);letter-spacing:0.06em;margin-bottom:0.3rem}
.perk-item p{color:var(--parchment-dim);font-size:0.93rem;line-height:1.55}
.discord-box{
  background:rgba(88,101,242,0.08);border:1px solid rgba(88,101,242,0.3);
  padding:1.4rem;margin-top:2rem;
}
.discord-box h3{font-family:'Cinzel',serif;font-size:0.85rem;color:#7289DA;letter-spacing:0.06em;margin-bottom:0.5rem}
.discord-box p{color:var(--parchment-dim);font-size:0.88rem;line-height:1.55;margin-bottom:0.9rem;text-align:left}

/* ── FORM / MAILCHIMP ─────────────────────────────────────── */
.join-form-box{
  background:var(--deep);border:1px solid var(--gold-dim);
  padding:2.2rem;position:sticky;top:72px;
}
.join-form-box h2{
  font-family:'Cinzel',serif;font-size:1.05rem;font-weight:600;
  color:var(--parchment);margin-bottom:0.4rem;letter-spacing:0.05em;
}
.form-lead{font-size:0.92rem;color:var(--parchment-dim);font-style:italic;margin-bottom:1.8rem;line-height:1.5}

#mc_embed_signup{background:transparent !important;font-family:'Crimson Text',Georgia,serif !important;width:100% !important}
#mc_embed_signup h2{display:none}
#mc_embed_signup .indicates-required{display:none}
.mc-field-group{margin-bottom:1.1rem}
.mc-field-group label,
#mc_embed_signup .mc-field-group label{
  display:block;font-family:'Cinzel',serif !important;font-size:0.62rem !important;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-dim) !important;
  margin-bottom:0.35rem;font-weight:normal !important;
}
.mc-field-group input[type="text"],
.mc-field-group input[type="email"],
#mc_embed_signup input.text,
#mc_embed_signup input.email{
  width:100% !important;background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(201,168,76,0.25) !important;color:var(--parchment) !important;
  font-family:'Crimson Text',serif !important;font-size:1rem !important;
  padding:0.6rem 0.85rem !important;border-radius:1px !important;
  outline:none !important;transition:border-color 0.2s;box-shadow:none !important;
  -webkit-appearance:none;height:auto !important;
}
#mc_embed_signup input.text:focus,
#mc_embed_signup input.email:focus{border-color:var(--gold-dim) !important}
#mc_embed_signup .mc-field-group.input-group strong{
  display:block;font-family:'Cinzel',serif !important;font-size:0.62rem !important;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-dim) !important;
  margin-bottom:0.5rem;font-weight:normal !important;
}
#mc_embed_signup .mc-field-group.input-group ul{
  list-style:none;display:flex;gap:1.2rem;flex-wrap:wrap;padding:0;margin:0;
}
#mc_embed_signup .mc-field-group.input-group ul li{display:flex;align-items:center;gap:0.4rem}
#mc_embed_signup .mc-field-group.input-group ul li label{
  font-family:'Crimson Text',serif !important;font-size:0.95rem !important;
  color:var(--parchment-dim) !important;letter-spacing:0 !important;
  text-transform:none !important;margin:0 !important;cursor:pointer;
}
#mc_embed_signup input[type="checkbox"]{accent-color:var(--gold);width:14px;height:14px;cursor:pointer}
#mc_embed_signup .clear{margin-top:1.4rem}
#mc_embed_signup input[type="submit"],#mc-embedded-subscribe{
  display:block !important;width:100% !important; font-weight:600 !important;
  font-family:'Cinzel',serif !important;font-size:0.75rem !important;
  letter-spacing:0.15em !important;text-transform:uppercase !important;
  color:var(--ink) !important;background:var(--gold) !important;
  padding:0.85rem 1.5rem !important;border-radius:2px !important;
  border:none !important;cursor:pointer !important;
  transition:background 0.2s,transform 0.15s !important;
  height:auto !important;box-shadow:none !important;-webkit-appearance:none;
}
#mc_embed_signup input[type="submit"]:hover{background:#D4B060 !important;transform:translateY(-1px)}
#mce-responses{margin-top:0.8rem}
#mce-error-response,#mce-success-response{font-family:'Crimson Text',serif;font-size:0.9rem;padding:0.6rem 0}
#mce-error-response{color:var(--crimson-bright)}
#mce-success-response{color:var(--gold)}
.form-note{font-size:0.8rem;color:var(--parchment-dim);text-align:center;margin-top:0.9rem;font-style:italic;opacity:0.65}
.vote-note{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid rgba(201,168,76,0.2);font-size:0.88rem;color:var(--parchment-dim);font-style:italic;line-height:1.5}
.vote-note strong{color:var(--gold);font-style:normal;font-family:'Cinzel',serif;font-size:0.75rem;letter-spacing:0.06em}

/* ── FOOTER ───────────────────────────────────────────────── */
footer{
  position:relative;z-index:1;border-top:1px solid rgba(201,168,76,0.2);
  padding:2rem;text-align:center;font-family:'Cinzel',serif;
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-dim);
}
footer a{color:var(--gold-dim);text-decoration:none}
footer a:hover{color:var(--gold)}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:700px){
  nav{padding:0 1rem}
  .nav-links{display:none}
  .nav-hamburger{display:flex}

  /* Hero */
  .hero{padding:5rem 1.2rem 3.5rem}
  .page-header{min-height:40vh;padding:4rem 1.2rem 2.5rem}

  /* Sections */
  .section{padding:3.5rem 1.2rem}
  .fog-callout{padding:1.5rem;margin:2rem 1.2rem}
  .feature-preview-grid{grid-template-columns:1fr 1fr}

  /* Features page — collapse sticky layout to single column */
  .features-container{padding:0 1.2rem 3rem}
  .feature-card{grid-template-columns:1fr;gap:1rem;padding:2rem 0}
  .feature-card-left{position:static}
  .feature-card.featured{margin:0 -1.2rem;padding:2.5rem 1.2rem}

  /* Join */
  .join-layout{grid-template-columns:1fr;gap:2.5rem;padding:0 1.2rem 3rem}
  .join-form-box{position:static}
  #mc_embed_signup .mc-field-group.input-group ul{flex-direction:column;gap:0.6rem}
}

@media(max-width:420px){
  .feature-preview-grid{grid-template-columns:1fr}
  .cta-group{flex-direction:column;align-items:center}
  .hero h1{font-size:2.3rem}
  .nav-logo{font-size:1rem}
}