/* =========================================================
   Aether & Earth — main.css
   Cleaned + scoped for homepage and story pages
   Date: 2025-10-14
   ========================================================= */

/* ========== RESET ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; scroll-behavior: smooth; }

/* =========================================================
   HOMEPAGE (default) — dark theme, video intro, fixed nav
   Applies when body does NOT have .story-page
   ========================================================= */
body:not(.story-page) {
  font-family: 'Lora', serif;
  line-height: 1.6;
  color: #f2efe5;
  background-color: #0c0c0c;
  overflow-x: hidden;
}

/* Header & Navigation (homepage) */
body:not(.story-page) header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 10;
  background-color: rgba(22, 33, 10, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242, 199, 68, 0.2);
}

body:not(.story-page) nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 30px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
}

body:not(.story-page) nav a {
  color: #f2efe5; text-decoration: none;
  font-family: 'Uncial Antiqua', cursive;
  letter-spacing: 1px; font-size: 1.1rem; transition: color .3s;
}
body:not(.story-page) nav a:hover { color: #f2c744; }

/* Hero video (homepage) */
body:not(.story-page) .hero { position: relative; height: 100vh; width: 100%; overflow: hidden; }
body:not(.story-page) .hero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.6);
}
body:not(.story-page) .hero .overlay {
  position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.5) 30%, rgba(0,0,0,.9) 90%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #f2efe5; z-index: 2;
}
body:not(.story-page) .hero h1 {
  font-family: 'Uncial Antiqua', cursive; font-size: 3rem; color: #f2c744;
  margin-bottom: 20px; text-shadow: 0 0 15px rgba(242,199,68,.5);
}
body:not(.story-page) .hero p {
  font-family: 'Lora', serif; font-size: 1.2rem; width: 80%; max-width: 800px; margin: 0 auto 40px;
}
body:not(.story-page) .hero .enter-btn {
  padding: 12px 30px; background: transparent; color:#f2efe5; border: 2px solid #f2c744; border-radius: 30px;
  font-family: 'Uncial Antiqua', cursive; font-size: 1.2rem; cursor: pointer; transition: all .4s ease;
}
body:not(.story-page) .hero .enter-btn:hover {
  background-color:#f2c744; color:#0c0c0c; box-shadow: 0 0 20px rgba(242,199,68,.5);
}

/* Welcome section (homepage) */
body:not(.story-page) #welcome {
  padding: 100px 15%; background: rgba(22,33,10,.75);
  border-top: 1px solid rgba(242,199,68,.15);
  border-bottom: 1px solid rgba(242,199,68,.15);
  backdrop-filter: blur(10px); text-align: left; position: relative; z-index: 3;
}
body:not(.story-page) #welcome h2 {
  font-family:'Uncial Antiqua', cursive; color:#f2c744; font-size:2.2rem; margin-bottom:40px; text-align:center;
  text-shadow:0 0 15px rgba(242,199,68,.3);
}
body:not(.story-page) #welcome p {
  font-size:1.1rem; color:#f2efe5; margin-bottom:25px; line-height:1.8;
  background: rgba(12,12,12,.5); padding:15px 25px; border-radius:10px; box-shadow:0 0 25px rgba(0,0,0,.2);
}

/* Reveal effect (homepage) */
body:not(.story-page) .reveal-step h2,
body:not(.story-page) .reveal-step p { opacity:0; transform: translateY(25px); transition: opacity 1.5s ease, transform 1.5s ease; }
body:not(.story-page) .reveal-step h2.visible,
body:not(.story-page) .reveal-step p.visible { opacity:1; transform: translateY(0); text-shadow: 0 0 10px rgba(242,199,68,.25); }

/* Intro overlay (homepage) */
body:not(.story-page) #intro-video {
  position: fixed; inset: 0; z-index: 9999; background:#000; display: grid; place-items: center; transition: opacity .8s ease;
}
body:not(.story-page) #intro-video video,
body:not(.story-page) #introVid { width: 100vw; height: 100vh; object-fit: cover; display:block; }
body:not(.story-page) #intro-video .intro-controls {
  position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; z-index: 10000;
}
body:not(.story-page) #soundToggle,
body:not(.story-page) #skipIntro {
  appearance: none; border: 1px solid rgba(242,199,68,.6); background: rgba(0,0,0,.55);
  color:#f2efe5; font: 600 14px/1 'Lora', serif; padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
body:not(.story-page) #soundToggle:hover,
body:not(.story-page) #skipIntro:hover { background: rgba(242,199,68,.15); }
body.loaded #intro-video { opacity: 0; pointer-events: none; }

/* Homepage responsive */
@media (max-width: 900px){
  body:not(.story-page) .hero h1 { font-size: 2.2rem; }
  body:not(.story-page) #welcome { padding: 80px 10%; }
  body:not(.story-page) #welcome p { font-size: 1rem; }
}
@media (max-width: 600px){
  body:not(.story-page) nav { flex-direction: column; }
  body:not(.story-page) .hero p { width: 90%; }
}

/* =========================================================
   STORY PAGES — light theme, paper background
   Applies when body has .story-page
   ========================================================= */
.story-page {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  color: #1b1b1b;
  background-color: #f2efe5;
  line-height: 1.65;
}

/* Containers */
.story-page .container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Header / hero (story) */
.story-page header {
  position: static; /* not fixed on stories */
  background: linear-gradient(180deg,#f5ecd8,#efe2c3 55%,#efe9df);
  border-bottom: 2px solid #e0d4b8;
}
.story-page .hero { padding: 28px 0; }
.story-page .crumbs { font-size:.95rem; margin:6px 0 10px; }
.story-page .crumbs a { color:#a07c2e; text-decoration:none; border-bottom:1px dashed #e6d4ad; }
.story-page .eyebrow { text-transform:uppercase; letter-spacing:.14em; color:#a07c2e; font-weight:700; font-size:.9rem; }
.story-page h1,
.story-page h2, .story-page h3, .story-page h4,
.story-page .hero h1, .story-page .story-card__title {
  font-family: "Uncial Antiqua", serif; font-weight: 400; letter-spacing: .02em; color: #3D5517;
}
.story-page .dek { margin: 0 0 12px; color:#2a2a2a; }
.story-page .hero-img { border-radius:14px; overflow:hidden; margin:10px 0; background:#e9e5dc; }
.story-page .hero-img img { width:100%; height:auto; display:block; }

/* Story content */
.story-page main { background: #fffdf7; }
.story-page .content { padding: 22px 0; }
.story-page .byline { color:#666; margin:0 0 10px; }
.story-page .prose p { margin:0 0 1.1em; }
.story-page .lede { font-size: 1.15rem; line-height: 1.75; }

/* Pull quote */
.story-page .pull {
  margin:1rem 0; padding:12px; border-left:4px solid #f2c744;
  background:#fbf7ec; border-radius:10px; color:#821517;
  font-family:"Uncial Antiqua", serif; text-align:center;
}

/* Aside box */
.story-page .aside {
  background:#faf7f0; border:1px solid #ece7da; border-radius:12px; padding:12px; margin:1rem 0;
}
.story-page .aside h4 { margin:.2rem 0 .5rem; }

/* Optional gallery */
.story-page .gallery {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:10px; margin:1rem 0;
}
.story-page .gallery img {
  width:100%; height:160px; object-fit:cover; border-radius:10px; display:block;
}

/* CTA row */
.story-page .cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.story-page .btn {
  display:inline-block; padding:.6rem 1rem; border-radius:999px;
  background: linear-gradient(180deg,#f2c744,#faa538);
  color:#3b2600; font-weight:700; text-decoration:none; box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.story-page .link {
  color:#a07c2e; font-weight:700; text-decoration:none; border-bottom:1px dashed #e6d4ad;
}
/* ==========================================
   Smooth JS Parallax Hero for story pages
   ========================================== */
.story-page header.hero-full {
  position: relative;
  margin: 0 0 2rem;
  border: none;
  padding: 0;
  background: none;
}

.story-page .hero-banner {
  position: relative;
  width: 100%;
  height: 70vh;               /* adjust banner height */
  min-height: 420px;
  overflow: hidden;
  margin: 0;
}

.story-page .hero-banner .parallax-img {
  width: 100%;
  height: 120%;               /* taller than container for movement */
  object-fit: cover;
  display: block;
  will-change: transform;
  transform: translateY(0);
  transition: transform 0.1s linear;
}

.story-page .hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.75));
  z-index: 1;
}

.story-page .hero-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  text-align: center;
  color: #fff;
  z-index: 2;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}

.story-page .hero-text .eyebrow {
  color: #f2c744;
}
/* ================================
   STORY: MAROON
   ================================ */

#story-maroon .chapter-title {
  font-family: 'Uncial Antiqua', serif;
  font-size: 2.5em;               /* ⬅ lowered from 3em */
  text-align: center;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  letter-spacing: 2px;
  color: #556B2F;                /* Moss Green */
  text-transform: uppercase;
}

#story-maroon .dropcap {
  font-family: 'Lora', serif;
  font-size: 1.25em;
  line-height: 1.6;
  max-width: 65ch;
  margin: 0;
  text-align: left;
  color: #2a2a2a;
}

#story-maroon .dropcap::first-letter {
  font-family: 'Uncial Antiqua', serif;
  float: left;
  font-size: 3.5em;              /* ⬅ slightly smaller */
  line-height: 1;
  padding-right: 6px;           /* ⬅ reduced space to bring text closer */
  padding-top: 4px;             /* ⬅ tightened top spacing */
  font-weight: 700;
  color: #800000;               /* Dark Maroon */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}


/* Product Spotlight (shared) */
.product-showcase {
  background:#fffdf7; border-top:1px solid #e6e1d6; padding:22px 0 28px; margin-top:20px;
}

.ps-wrap { display:grid; grid-template-columns:1fr; gap:14px; }
.ps-media { max-width:560px; border-radius:12px; overflow:hidden; background:#eee; }
.ps-media img { width:100%; height:auto; display:block; }
.ps-body h3 { margin:.2rem 0 .4rem; font-size:1.35rem; color:#1b1b1b; }
.ps-body p { margin:0 0 .8rem; line-height:1.6; }
.ps-ingredients h4 { margin:.4rem 0 .35rem; font-size:1rem; color:#1b1b1b; }
.ps-ingredients ul { margin:0; padding-left:18px; }
.ps-ingredients li { margin:.25rem 0; }
.ps-ingredients a { color:#254d3f; text-decoration:none; border-bottom:1px dashed #cfd8cf; }
.ps-ingredients a:hover { border-bottom-color:#97b197; }
.buy-btn {
  display:inline-block; margin-top:.6rem; padding:.6rem 1rem; border-radius:999px;
  background: linear-gradient(180deg,#f2c744,#faa538); color:#3b2600; font-weight:700; text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}

/* Footer (shared) */
footer { text-align:center; padding:40px 20px; font-size:.9rem; background: rgba(22,33,10,.75); border-top:1px solid rgba(242,199,68,.15); color:#ccc; }
footer a { color:#f2c744; text-decoration:none; }
footer a:hover { text-decoration: underline; }

/* Story-specific footer on light bg */
.story-page footer {
  background: linear-gradient(180deg,#fbfaf7,#f5f0e6);
  border-top: 1px solid #e6e1d6;
  color: #423;
}

/* Product layout wider on desktop */
@media (min-width: 780px){
  .ps-wrap { grid-template-columns: 1fr 1.15fr; align-items: start; }
}