/* ============================================================
   SENNIEVRC — shared styles
   Brand tokens: edit these to retheme the whole site
============================================================ */
:root{
  --cream:      #f2ebbf;   /* main text + borders */
  --champagne:  #e6cf9a;   /* hover golds */
  --ink:        #241a0e;   /* dark text on filled buttons */
  --overlay:    rgba(14,10,6,.55);   /* darkening wash over art */
  --overlay-2:  rgba(14,10,6,.78);   /* heavier wash (spicy page) */
  --font: 'Poppins', system-ui, sans-serif;
}

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

html,body{ height:100%; }

body{
  font-family:var(--font);
  color:var(--cream);
  background:#0e0a06;
}

/* ---- full-viewport hero background ---- */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  text-align:center;
  padding:4rem 1.25rem 3rem;
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(var(--overlay), var(--overlay)),
    url('assets/hero.jpg');           /* swap this file to update art */
  background-size:cover;
  background-position:32% center;     /* keeps Sennie's face in frame */
  background-attachment:fixed;
}
@media (max-width:700px){
  .hero{ background-attachment:scroll; background-position:38% center; }
}
.spicy .hero{
  background-image:
    linear-gradient(var(--overlay-2), var(--overlay-2)),
    url('assets/hero.jpg');
}

/* ---- typography ---- */
.site-title{
  font-size:clamp(2.6rem, 8vw, 5.5rem);
  font-weight:600;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.tagline{
  font-size:clamp(.95rem, 2.2vw, 1.15rem);
  font-weight:400;
  line-height:1.7;
  max-width:46rem;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* ---- pill buttons ---- */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.9em;
  font-family:var(--font);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--cream);
  background:rgba(14,10,6,.35);
  border:1px solid var(--cream);
  border-radius:999px;
  padding:1.2em 3em;
  min-width:min(26rem, 86vw);
  cursor:pointer;
  transition:background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.pill:hover{
  background:rgba(242,235,191,.14);
  box-shadow:0 0 20px rgba(242,235,191,.28);
}
.pill--filled{
  background:var(--cream);
  color:var(--ink);
}
.pill--filled:hover{
  background:var(--champagne);
  box-shadow:0 0 22px rgba(230,207,154,.45);
}
.pill i{ font-size:1.1em; text-indent:0; }

/* ---- social icon row ---- */
.socials{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2.2rem;
  margin-top:1rem;
}
.socials a{
  color:var(--cream);
  font-size:1.5rem;
  transition:color .2s ease, transform .2s ease, text-shadow .2s ease;
}
.socials a:hover{
  color:var(--champagne);
  transform:translateY(-3px);
  text-shadow:0 0 14px rgba(230,207,154,.6);
}

/* ---- footer credit ---- */
.credit{
  position:absolute;
  bottom:1rem;
  left:0; right:0;
  font-size:.7rem;
  letter-spacing:.2em;
  opacity:.65;
}
.credit a{ color:var(--cream); }

/* ---- age gate modal ---- */
.gate-overlay{
  position:fixed; inset:0; z-index:999;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(12,9,5,.74);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  padding:1.5rem;
}
.gate-overlay.open{ display:flex; }
.gate-card{
  max-width:26rem; width:100%;
  text-align:center;
  background:rgba(24,18,10,.94);
  border:1px solid var(--cream);
  border-radius:1.6rem;
  padding:2.5rem 2rem;
  box-shadow:0 0 44px rgba(0,0,0,.6), 0 0 26px rgba(242,235,191,.12);
  animation:gateIn .22s ease;
}
@keyframes gateIn{ from{opacity:0; transform:scale(.94)} to{opacity:1; transform:scale(1)} }
@media (prefers-reduced-motion:reduce){
  .gate-card{ animation:none; }
  .socials a{ transition:none; }
}
.gate-card h2{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.gate-card p{
  font-size:.9rem;
  line-height:1.65;
  opacity:.92;
  margin-bottom:1.7rem;
}
.gate-actions{ display:flex; flex-direction:column; gap:.85rem; }
.gate-actions .pill{ min-width:0; width:100%; padding:1em 1.5em; font-size:.78rem; }

/* ---- spicy page extras ---- */
.spicy-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:center;
}
.back-link{
  margin-top:.5rem;
  font-size:.75rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--cream);
  text-decoration:none;
  opacity:.8;
  transition:opacity .2s ease;
}
.back-link:hover{ opacity:1; }

/* ---- credits page ---- */
.credits-list{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  align-items:center;
}
.credit-entry{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
}
.credit-role{
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  opacity:.75;
}
.credit-entry a{
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid rgba(242,235,191,.45);
  padding-bottom:.15rem;
  transition:color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
.credit-entry a:hover{
  color:var(--champagne);
  border-color:var(--champagne);
  text-shadow:0 0 12px rgba(230,207,154,.55);
}
.credit-entry a i{ font-size:.85em; }