@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Creepster&family=Nunito:wght@400;600;800&display=swap');

:root {
  --bg-base: #0d0817;
  --bg-elevated: #160f28;
  --accent-orange: #e8935a;
  --accent-purple: #b083ff;
  --accent-green: #8fd9a8;
  --text-primary: #f3ecff;
  --text-muted: #b6a8d6;
  --border-glow: rgba(176, 131, 255, 0.2);

  /* Footer art is drawn full-width at its natural aspect ratio (see body::after). */
  --footer-art: linear-gradient(to bottom, var(--bg-base) 0%, rgba(13, 8, 23, 0.2) 40%),
    url('/2026/images/footer-bg.png');
  --footer-art-ratio: 2007 / 783;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Nunito', system-ui, sans-serif;
  line-height: 1.65;
  position: relative;
  overflow-x: hidden;
}

/* Faint full-page texture (fog / mist / stars) that tiles behind everything
   and blends into the base color rather than sitting on top of it. Drop a
   file at /2026/images/texture-overlay.png to activate — page looks fine without it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/2026/images/texture-overlay.png');
  background-repeat: repeat;
  background-size: 480px;
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Footer art: a pure background pinned to the bottom of the page. It is always
   the full page width and shows its full height, so it scales with the screen
   instead of being cropped, and being absolutely positioned it never affects
   the page height or pushes content around. */
body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: var(--footer-art-ratio);
  background-image: var(--footer-art);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

main, header, footer {
  position: relative;
  z-index: 1;
}

h1, h2, h3 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-orange);
}

a {
  color: var(--accent-purple);
}

/* ---------- Hero ---------- */

.hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem 5rem;
  background-color: var(--bg-elevated);
  background-image:
    linear-gradient(to bottom, rgba(13, 8, 23, 0.2) 0%, var(--bg-base) 94%),
    url('/2026/images/hero-bg.png');
  background-size: cover;
  background-position: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.8rem;
  color: var(--accent-purple);
  margin-bottom: 0.5rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  margin: 0.25rem 0;
  line-height: 1.15;
}

.hero h1 .year {
  margin-left: 0.4em;
  color: var(--accent-green);
}

.subtitle {
  font-family: 'Creepster', 'Cinzel', serif;
  font-size: clamp(2.75rem, 10vw, 5.5rem);
  line-height: 1;
  letter-spacing: 6px;
  color: #ff5a1f;
  text-shadow:
    0 0 6px rgba(255, 90, 31, 0.7),
    0 0 22px rgba(255, 90, 31, 0.45),
    3px 4px 0 #3a0a52;
  margin: 0.5rem 0 0.75rem;
}

.intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 1.25rem auto 0;
}

.cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.85rem 2rem;
  background: linear-gradient(135deg, var(--accent-orange), #c9587a);
  color: #1a0d05;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(232, 147, 90, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-small {
  margin-top: 0.25rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.9rem;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(232, 147, 90, 0.4);
}

/* ---------- Sections ---------- */

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--border-glow);
}

.section:last-child {
  border-bottom: none;
}

.section h2 {
  font-size: 1.6rem;
  margin: 0 0 1rem;
}

.section h3 {
  font-size: 1rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 1.5rem 0 0.5rem;
}

.section h3:first-of-type {
  margin-top: 0;
}

.placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.plain-list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.plain-list li {
  margin-bottom: 0.35rem;
}

.costume-note {
  margin-top: 1.25rem;
  color: var(--text-muted);
}

.bring-list,
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bring-list li,
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(176, 131, 255, 0.1);
}

.bring-list li:first-child,
.checklist li:first-child {
  border-top: none;
}

.bring-list .icon {
  flex-shrink: 0;
}

.checklist .box {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  border: 1px solid var(--text-muted);
  border-radius: 3px;
}

/* ---------- Map ---------- */

.map-embed {
  margin-top: 1rem;
  border: 1px solid var(--border-glow);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  /* darken the default light map to fit the page */
  filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* ---------- RSVP / notice ---------- */

.rsvp-section {
  text-align: center;
}

.notice {
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* ---------- Footer ---------- */

footer {
  text-align: center;
  min-height: 380px;
  padding: 3rem 1.5rem 2.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---------- Page toggle (After Dark <-> Family Time) ---------- */

.mode-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-glow);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}

.mode-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
}