/* ================================================================
   INDIGO � Marketing Website Styles
   Dark � Immersive � Animated
================================================================ */

/* ----------------------------------------------------------------
   CSS Custom Properties
---------------------------------------------------------------- */

:root {
  --color-bg:           #080a0f;
  --color-surface:      #0d1117;
  --color-surface-2:    #111825;
  --color-border:       rgba(160, 165, 170, 0.25);
  --color-gold:         #A0A5AA;
  --color-gold-light:   #C0C5CA;
  --color-gold-dim:     rgba(160, 165, 170, 0.4);
  --color-off-white:    #e8e0d0;
  --color-muted:        rgba(232, 224, 208, 0.55);
  --color-indigo:       #3a5f8a;
  --color-indigo-light: #5b8fc4;
  --color-smoke:        rgba(8, 10, 15, 0.72);

  --nav-height:         50px;
  --font-display:       'Cinzel Decorative', serif;
  --font-heading:       'Cinzel', serif;
  --font-body:          'EB Garamond', serif;
  --font-nav:           'Inter', system-ui, sans-serif;
  --font-ui:            'Inter', system-ui, sans-serif;

  --ease-out-quart:     cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-sine:   cubic-bezier(0.37, 0, 0.63, 1);
}

/* ----------------------------------------------------------------
   Reset & Base
---------------------------------------------------------------- */

@font-face {
  font-family: 'GoudyOldStyleBT-Bold';
  src: url('../Assets/GoudyOldStyleBT-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'TrajanPro-Bold';
  src: url('../Assets/TrajanPro-Bold.otf') format('opentype'),
       url('../Assets/TrajanPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--color-bg);
  color: var(--color-off-white);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.7;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------------
   Utility
---------------------------------------------------------------- */

.section-divider {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(160, 165, 170, 0.6), transparent);
  margin: 1.2rem auto 1.8rem;
}

/* Live-type section headers — replaced the old painted PNG headers. */

.stub-header-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-off-white);
  text-shadow: 0 0 30px rgba(160, 165, 170, 0.3);
  line-height: 1.25;
}

/* ================================================================
   LEAN REBUILD — section rhythm mirroring monad-press-app
================================================================ */

.nav-link-cta {
  border: 1px solid var(--color-gold-dim);
  padding: 0.5rem 1.1rem !important;
  border-radius: 2px;
}

.nav-link-cta::after { display: none; }

.nav-link-cta:hover {
  background: var(--color-gold-light);
  color: var(--color-bg) !important;
}

.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin: 0;
}

.hero-subtitle-text {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 3vmin, 1.9rem);
  color: var(--color-off-white);
  margin: 0.5rem 0 0;
}

.hero-native-img-static {
  max-width: min(320px, 70vw);
  margin: 0.7rem auto 0;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.9));
}

.hero-tagline-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 2.2vmin, 1.3rem);
  color: var(--color-muted);
  margin: 1.6rem 0 0;
  max-width: 34ch;
  text-align: center;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-preorder-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-gold-light);
  padding: 0.9rem 2.3rem;
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out-quart), background 0.3s;
}

.hero-preorder-btn:hover { background: #fff; transform: translateY(-2px); }

.hero-read-link {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-off-white);
  border-bottom: 1px solid var(--color-gold-dim);
  padding-bottom: 3px;
}

/* Pull-quote banners */

.quote-banner {
  background: var(--color-gold-light);
  color: var(--color-bg);
  padding: 3.5rem 2rem;
  text-align: center;
}

.quote-banner p {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  max-width: 900px;
  margin: 0 auto;
}

.quote-banner-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.quote-banner-cta h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

.quote-banner-cta .hero-preorder-btn {
  background: var(--color-bg);
  color: var(--color-gold-light);
}

.quote-banner-cta .hero-preorder-btn:hover { background: #000; }

.section-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.6rem;
}

/* The Story */

.section-story { padding: 7rem 2rem; }

.story-inner { max-width: 900px; margin: 0 auto; text-align: center; }

.story-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-muted);
  margin: 0.8rem 0 0;
}

.story-body {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 1rem;
}

.story-body p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--color-off-white);
  margin: 0;
}

.story-body blockquote {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.5;
  padding: 1.4rem 0 1.4rem 1.8rem;
  border-left: 2px solid var(--color-gold-light);
  color: var(--color-gold-light);
  margin: 0.6rem 0;
}

/* Parchment reveal — floats in over a table+lantern scene, click to zoom */

.parchment-scene-label {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 3.5rem 0 1.2rem;
}

.parchment-scene {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  perspective: 1400px;
  perspective-origin: 50% 20%;
}

.parchment-scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.parchment {
  position: absolute;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: translateY(-260px) rotateX(8deg) rotateZ(-18deg) scale(0.75);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity 1.1s cubic-bezier(0.34, 1.35, 0.4, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.3s ease,
              z-index 0s;
  z-index: 2;
}

.parchment img {
  width: 100%;
  height: auto;
  display: block;
}

.parchment.reveal.visible {
  opacity: 1;
}

/* Resting state: two sheets piled on top of each other, further right on
   the table, pitched down into the table plane (rotateX) so they read as
   lying flat rather than standing up facing the reader. */
.parchment-1 {
  left: 40%;
  top: 46%;
  width: 22%;
  z-index: 2;
}

.parchment-1.reveal.visible {
  transform: translate(0, 0) rotateX(58deg) rotateZ(-10deg) scale(1);
  animation: paperRuffle1 9s ease-in-out 1.2s infinite;
}

.parchment-2 {
  left: 46%;
  top: 43%;
  width: 22%;
  z-index: 3;
}

.parchment-2.reveal.visible {
  transform: translate(0, 0) rotateX(60deg) rotateZ(8deg) scale(1);
  animation: paperRuffle2 9.6s ease-in-out 1.6s infinite;
}

/* Idle "breeze" — the pile stays put almost the whole cycle, then each
   sheet nudges apart for a moment, like wind slipping between them, and
   settles back into the stack. Both sheets stay on the table throughout. */
@keyframes paperRuffle1 {
  0%, 82%, 100% { transform: translate(0, 0) rotateX(58deg) rotateZ(-10deg) scale(1); }
  86% { transform: translate(-10px, 4px) rotateX(52deg) rotateZ(-16deg) scale(1.01); }
  90% { transform: translate(-6px, 2px) rotateX(56deg) rotateZ(-13deg) scale(1.005); }
  94% { transform: translate(-3px, 1px) rotateX(57deg) rotateZ(-11deg) scale(1); }
  97% { transform: translate(0, 0) rotateX(58deg) rotateZ(-10deg) scale(1); }
}

@keyframes paperRuffle2 {
  0%, 82%, 100% { transform: translate(0, 0) rotateX(60deg) rotateZ(8deg) scale(1); }
  86% { transform: translate(10px, -4px) rotateX(54deg) rotateZ(14deg) scale(1.01); }
  90% { transform: translate(6px, -2px) rotateX(58deg) rotateZ(11deg) scale(1.005); }
  94% { transform: translate(3px, -1px) rotateX(59deg) rotateZ(9deg) scale(1); }
  97% { transform: translate(0, 0) rotateX(60deg) rotateZ(8deg) scale(1); }
}

/* Hover lifts the sheet above the pile and eases the tilt back, like
   picking up a corner to peek at it. */
.parchment-1:hover {
  animation: none;
  z-index: 10;
  transform: translate(0, -14px) rotateX(46deg) rotateZ(-10deg) scale(1.06);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5));
}

.parchment-2:hover {
  animation: none;
  z-index: 10;
  transform: translate(0, -14px) rotateX(48deg) rotateZ(8deg) scale(1.06);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5));
}

/* Hover/focus affordance — a small ink X draws itself in stroke by stroke,
   like a mark being made on paper, instead of a browser zoom cursor or icon. */
.parchment-hint {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  z-index: 11;
}

.parchment-hint svg {
  width: 100%;
  height: 100%;
}

.parchment-hint .x-stroke {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.5s ease;
}

.parchment-hint-1 { left: 47%; top: 52%; width: 7%; aspect-ratio: 1; }
.parchment-hint-2 { left: 53%; top: 49%; width: 7%; aspect-ratio: 1; }

.parchment-1:hover + .parchment-hint-1,
.parchment-1:focus-visible + .parchment-hint-1,
.parchment-2:hover + .parchment-hint-2,
.parchment-2:focus-visible + .parchment-hint-2 {
  opacity: 1;
}

.parchment-1:hover + .parchment-hint-1 .x-stroke-a,
.parchment-1:focus-visible + .parchment-hint-1 .x-stroke-a,
.parchment-2:hover + .parchment-hint-2 .x-stroke-a,
.parchment-2:focus-visible + .parchment-hint-2 .x-stroke-a {
  stroke-dashoffset: 0;
}

.parchment-1:hover + .parchment-hint-1 .x-stroke-b,
.parchment-1:focus-visible + .parchment-hint-1 .x-stroke-b,
.parchment-2:hover + .parchment-hint-2 .x-stroke-b,
.parchment-2:focus-visible + .parchment-hint-2 .x-stroke-b {
  stroke-dashoffset: 0;
  transition-delay: 0.45s;
}

/* Zoomed reading view — rendered inside the fixed, full-viewport backdrop
   below rather than enlarging the button in place. The button lives inside
   an overflow:hidden scene box, so blowing it up there was clipping the
   image to a small corner; the backdrop has no such box. */
.parchment-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(4, 5, 8, 0.9);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.parchment-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.parchment-backdrop-img {
  display: block;
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .parchment-1 { left: 34%; top: 48%; width: 34%; }
  .parchment-2 { left: 40%; top: 45%; width: 34%; }
  .parchment-hint-1 { left: 44%; top: 55%; width: 11%; }
  .parchment-hint-2 { left: 50%; top: 52%; width: 11%; }
}

.series-cover-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 0.6rem;
  text-align: center;
}

/* The Author */

.section-author { padding: 7rem 2rem; }

.author-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 4rem;
  align-items: start;
  text-align: left;
}

.author-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: block;
}

/* Footer wordmark — same Trajan Pro face as the hero, no raster logo */

.footer-wordmark {
  font-family: 'TrajanPro-Bold', serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: 0.06em;
  color: var(--color-off-white);
  margin: 0 0 0.6rem;
  text-align: center;
}

.footer-nav {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 1.4rem 0;
}

.footer-nav a:hover { color: var(--color-gold-light); }

@media (max-width: 768px)  {.author-grid { grid-template-columns: 1fr; gap: 2rem; }
.author-portrait { max-width: 280px; margin: 0 auto; }
.hero-cta-row { flex-direction: column; gap: 1.2rem; }
}

/* ----------------------------------------------------------------
   Scroll-reveal base states
---------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s var(--ease-out-quart),
              transform 0.85s var(--ease-out-quart);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-only reveal � for absolutely-positioned elements that
   already manage their own transform (e.g. gallery buttons) */

.reveal-fade {
  opacity: 0;
  transition: opacity 0.85s var(--ease-out-quart);
}

.reveal-fade.visible {
  opacity: 1;
}

.delay-1 { transition-delay: 0.12s; }

.delay-2 { transition-delay: 0.24s; }

.delay-3 { transition-delay: 0.38s; }

.delay-4 { transition-delay: 0.52s; }

.delay-5 { transition-delay: 0.68s; }

/* fade-in-up used on hero (runs once on load) */

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s var(--ease-out-quart) forwards;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ?? entrance keyframes ?? */

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes riseGlow {
  from { opacity: 0; transform: translateY(18px) scale(0.96); filter: brightness(0.6); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    filter: brightness(1);   }
}

/* Nav logo entrance */

.nav-logo-enter {
  opacity: 0;
  animation: slideDown 2.0s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: 0.2s;
}

/* Nav link entrance � delay set via inline style from JS */

.nav-link-enter {
  opacity: 0;
  animation: slideDown 1.8s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ----------------------------------------------------------------
   BACKGROUND MUSIC TOGGLE — starts muted, visitor opts in
---------------------------------------------------------------- */

.music-toggle {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 3000;
  background: rgba(8, 10, 15, 0.55);
  border: 1px solid rgba(160, 165, 170, 0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(6px);
  padding: 0;
}

.music-toggle:hover {
  opacity: 0.9;
  border-color: rgba(160, 130, 80, 0.5);
}

.music-icon {
  width: 16px;
  height: 16px;
  fill: rgba(180, 150, 90, 0.8);
  stroke: none;
}

.music-icon-off line {
  stroke: rgba(180, 150, 90, 0.8);
}

/* ----------------------------------------------------------------
   NAVIGATION
---------------------------------------------------------------- */

.nav-wordmark {
  font-family: 'TrajanPro-Bold', serif;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--color-off-white);
}

#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  height: var(--nav-height);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  background: transparent;
  pointer-events: auto;
}

#main-nav.scrolled {
  background: rgba(8, 10, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 1px 0 var(--color-border);
}

.nav-container {
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2.2rem;
  align-items: center;
}

.nav-link {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 1px;
  background: var(--color-gold);
  transition: left 0.35s var(--ease-out-quart),
              right 0.35s var(--ease-out-quart);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-gold-light);
}

.nav-link:hover::after,
.nav-link.active::after {
  left: 0; right: 0;
}

/* Hamburger toggle (mobile) */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-gold);
  transition: transform 0.35s, opacity 0.35s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-toggle.open span:nth-child(2) { opacity: 0; }

.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------
   SECTION BASE
---------------------------------------------------------------- */

.section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ================================================================
   SECTION 1 � HERO
================================================================ */

.section-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Hero background layers */

.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-bg-image.active {
  opacity: 1;
}

.hero-bg-image.inactive {
  opacity: 0;
}

/* Layered dark smoke overlay */

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
}

/* Rain accent canvas — confined to the rain-shaft area of the hero art,
   under the storm cloud, rather than covering the whole hero. */

#hero-rain {
  position: absolute;
  left: 40%;
  top: 32%;
  width: 34%;
  height: 24%;
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: calc(var(--nav-height) + 2rem) 2rem 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 1200px;
}

.hero-title-text {
  font-family: 'TrajanPro-Bold', serif;
  /* Bounded by vmin (not just vw) so the title can't overgrow the
     hero on short/wide viewports — e.g. dragging the window to a
     monitor with a different aspect ratio than the one this was
     tuned on. */
  font-size: clamp(2.75rem, 11vmin, 9.5rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  margin: 0 0 -0.2rem;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 65% at 50% 32%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 20%, #C4CBD2 40%, #8D97A0 58%, #545E67 78%, #2A3136 100%);
  background-blend-mode: screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.2))
          drop-shadow(0 4px 30px rgba(0,0,0,0.8));
  animation: titleGlow 4s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { filter: drop-shadow(0 0 30px rgba(255,255,255,0.18)) drop-shadow(0 4px 30px rgba(0,0,0,0.8)); }
  to   { filter: drop-shadow(0 0 55px rgba(255,255,255,0.38)) drop-shadow(0 4px 30px rgba(0,0,0,0.8)); }
}

/* Second Watauga tagline sits below the first */

@keyframes writeIn {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}

@keyframes fadeOutTagline {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* CTA Button — scroll-down chevron */

.hero-cta {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  z-index: 4;
  text-align: center;
}

.hero-enter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.45;
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: arrowFloat 3s ease-in-out infinite;
}

.hero-enter-link:hover {
  opacity: 0.75;
  transform: translateY(3px);
}

.hero-enter-arrow {
  width: 36px;
  height: 22px;
  stroke: #a0654a;
  stroke-width: 2.5;
}

@keyframes arrowFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* fade-in-up delays for hero stack � rhythmic 0.18s beat */

.hero-title         { animation-delay: 0.65s;  animation-duration: 1.1s; }

/* ================================================================
   SHARED STUB SECTION WRAPPER (Series, Gallery)
================================================================ */

.section-series {
  padding: 7rem 2rem;
}

#series .stub-header-title {
  font-size: clamp(1.8rem, 5vw, 3.1rem);
}

.stub-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ---- Series covers ---- */

.series-covers {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 2.5rem;
}

.series-cover-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.series-cover-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.series-cover {
  width: 240px;
  border: none;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s;
  border-radius: 2px;
}

.series-cover:hover,
.series-cover-link:hover .series-cover {
  transform: translateY(-8px) scale(1.28);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  z-index: 10;
  position: relative;
}

.series-cover-placeholder {
  width: 240px;
  aspect-ratio: 2 / 3;
  border: none;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  border-radius: 2px;
  background: rgba(32,26,16,0.80);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s;
}

.series-cover-wrap:hover .series-cover-placeholder {
  transform: translateY(-8px) scale(1.28);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  z-index: 10;
  position: relative;
}

.series-cover-placeholder::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-gold-dim);
  border-radius: 50%;
  opacity: 0.58;
}

.series-cover-placeholder-text {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-dim);
  text-align: center;
  opacity: 0.85;
}

.series-cover-wrap:hover .cover-label-img {
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.5)) drop-shadow(0 2px 8px rgba(0,0,0,0.7));
}

/* ---- Book One images ---- */

/* ================================================================
   FOOTER
================================================================ */

.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  text-align: center;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.footer-tagline {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.footer-copy {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(232,224,208,0.3);
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ================================================================
   RESPONSIVE
================================================================ */

/* ---- Gallery prev/next button offsets ---- */

/* ---- Tablet / large phone: ? 720px ---- */

@media (max-width: 720px)  {.nav-toggle { display: flex; }
.nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: rgba(8,10,15,0.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    gap: 0;
    padding: 1.5rem 0 2rem;
    transform: translateY(-110%);
    transition: transform 0.4s var(--ease-out-quart);
    border-bottom: 1px solid var(--color-border);
  }
.nav-links.open { transform: translateY(0); }
.nav-links li { width: 100%; text-align: center; }
.nav-link { display: block; padding: 0.9rem 2rem; font-size: 0.88rem; }
.nav-link::after { bottom: 2px; }
}

/* ---- Small phones: ? 480px ---- */

@media (max-width: 480px)  {.series-covers { gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; }
.series-cover { width: 120px; flex-shrink: 0; }
.series-cover-placeholder { width: 120px; flex-shrink: 0; }
}

/* ================================================================
   MOBILE � single-column responsive overrides (? 768px)
================================================================ */

@media (max-width: 768px)  {/* ---- Hero: fix iOS background-attachment: fixed ---- */
.hero-bg-image {
    background-attachment: scroll;
  }
.hero-content {
    top: auto !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    padding: calc(var(--nav-height) + 3rem) 1.2rem 2rem !important;
    gap: 2rem !important;
    width: 100%;
  }
.hero-title-text {
    font-size: min(3.6rem, 15vw) !important;
    margin-bottom: 0 !important;
  }
/* ---- The Series ---- */
#series .series-covers {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    overflow-x: visible !important;
    align-items: flex-start !important;
  }
#series .series-cover-wrap {
    width: calc(45vw - 1rem) !important;
    max-width: 160px !important;
    align-items: center !important;
  }
#series .series-cover,
  #series .series-cover-placeholder {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
  }
/* ---- Footer ---- */
.footer-monad-logo {
    max-width: 120px;
  }
}

/* ================================================================
   VERY SMALL PHONES � ? 390px (iPhone SE, older models)
================================================================ */

@media (max-width: 390px)  {.hero-title-text {
    font-size: 15vw !important;
  }
#series .series-cover,
  #series .series-cover-placeholder {
    width: calc(44vw - 0.5rem) !important;
  }
}

/* ================================================================
   TOUCH � disable hover transforms that require a mouse
================================================================ */

@media (hover: none)  {.series-cover:hover,
  .series-cover-link:hover .series-cover,
  .series-cover-wrap:hover .series-cover-placeholder {
    transform: none;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  }
}