/* =============================================================================
   CueArr — main marketing page stylesheet (index-mockup2.php).
   Cache-busted via ?v= query param from lang.php's asset_url() helper.
   ============================================================================= */
:root {
  --midnight:    #050a15;
  --deep:        #0a1728;
  --deep-2:      #0f2038;
  --deep-3:      #16304f;
  --panel:       #17293e;
  --parchment:   #efdcb2;
  --parchment-dim: #c9b98f;
  --parchment-deep: #b09967;
  --brass:       #c98f3d;
  --brass-hot:   #ffcd6b;
  --brass-deep:  #7a5416;
  --ink:         #1a0e04;
  --crimson:     #a01e28;
  --crimson-hot: #d94656;
  --cyan:        #4fb7ff;
  --cyan-hot:    #7ed4ff;
  --sea-foam:    #a8e4ff;
  --patina:      #3d7d5b;
  --shadow-deep: 0 30px 80px rgba(0,0,0,0.85);
  --max-w:       1220px;
  --nav-h:       76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  min-height: 100%;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--parchment);
  background: var(--midnight);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.89  0 0 0 0 0.75  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lantern that follows cursor */
.lantern {
  position: fixed; pointer-events: none; z-index: 150;
  left: 50vw; top: 50vh;
  width: 520px; height: 520px;
  margin-left: -260px; margin-top: -260px;
  background: radial-gradient(circle at center, rgba(255,205,107,0.13) 0%, rgba(255,205,107,0.05) 25%, transparent 60%);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}
@media (max-width: 900px) { .lantern { display: none; } }

.page-inner { max-width: var(--max-w); margin: 0 auto; padding-inline: clamp(1rem, 3vw, 1.6rem); position: relative; z-index: 2; }

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

/* ============ TOPBAR (rope + brass rivets) ============ */
.topbar-wrap {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(5,10,21,0.94), rgba(5,10,21,0.78));
  border-bottom: 3px double var(--brass);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
.topbar {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0.7rem clamp(1rem, 3vw, 1.6rem);
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand-mark {
  width: 56px; height: 56px; border-radius: 50%;
  background: #000; overflow: hidden;
  box-shadow:
    0 0 0 2px var(--brass),
    0 0 0 4px rgba(201,143,61,0.35),
    0 0 24px rgba(79,183,255,0.5),
    0 6px 22px rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.05);
  box-shadow:
    0 0 0 2px var(--brass-hot),
    0 0 0 4px rgba(255,205,107,0.5),
    0 0 40px rgba(126,212,255,0.7),
    0 6px 22px rgba(0,0,0,0.7);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-text-primary {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.7rem);
  letter-spacing: 0.06em;
  color: var(--parchment);
  text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 20px rgba(255,205,107,0.3);
  line-height: 1;
}
.brand-text-secondary {
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: 0.9rem;
  color: var(--brass-hot);
  letter-spacing: 0.06em;
  margin-top: 3px;
  white-space: nowrap;
}

.nav-links {
  display: flex; gap: clamp(0.6rem, 1.4vw, 1.5rem);
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.12em; color: var(--parchment-dim);
  text-transform: uppercase;
  /* Hug the children so the flex container never grows past its content
     when the topbar's `justify-content: space-between` has room to spare. */
  flex: 0 0 auto;
}
.nav-links a {
  position: relative;
  /* Zero horizontal padding — the link box is the exact width of its text.
     With padding, each link reserved a fixed extra 0.4rem regardless of
     language, so shorter translations still occupied a "button" the size
     of the longest. Underline stays pinned to the text edges via ::after. */
  padding: 0.4rem 0;
  transition: color 0.18s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}
.nav-links a::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--cyan));
  transition: width 0.22s ease, left 0.22s ease;
  box-shadow: 0 0 10px var(--brass-hot);
}
.nav-links a:hover { color: var(--brass-hot); }
.nav-links a:hover::after { width: 100%; left: 0; }

.btn, .btn-ghost {
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.12em;
  padding: 0.75rem 1.4rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
  border-radius: 4px;
  transition: transform 0.14s ease, box-shadow 0.22s ease, background 0.22s ease;
  position: relative;
  text-transform: uppercase;
  border: none;
}
.btn {
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--brass-hot) 0%, var(--brass) 45%, #a0721b 100%);
  border: 1.5px solid #4a3210;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -1.5px 0 rgba(0,0,0,0.35),
    0 8px 22px rgba(201,143,61,0.35),
    0 2px 6px rgba(0,0,0,0.7);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -1.5px 0 rgba(0,0,0,0.4),
    0 14px 36px rgba(255,205,107,0.55),
    0 4px 10px rgba(0,0,0,0.8);
}
.btn::before, .btn::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe19a, #5a3f0b);
  top: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn::before { left: 8px; }
.btn::after { right: 8px; }
.btn-ghost {
  color: var(--parchment);
  background: rgba(15,32,56,0.6);
  border: 1.5px solid var(--brass);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.btn-ghost:hover {
  background: rgba(201,143,61,0.15);
  border-color: var(--brass-hot);
  box-shadow: 0 8px 24px rgba(255,205,107,0.25);
  transform: translateY(-1px);
}
/* Bolt-head rivets in the top corners — same geometry as .btn::before/::after
   but tinted for the ghost palette (brass-hot glint over a dark deep core). */
.btn-ghost::before, .btn-ghost::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brass-hot), #1a0e04);
  top: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-ghost::before { left: 8px; }
.btn-ghost::after  { right: 8px; }

.nav-toggle {
  display: none;
  background: rgba(15,32,56,0.7); border: 1.5px solid var(--brass);
  color: var(--brass-hot);
  width: 46px; height: 46px; border-radius: 6px;
  align-items: center; justify-content: center;
}
.nav-toggle:hover { background: rgba(201,143,61,0.15); }
.nav-toggle svg { width: 22px; height: 22px; }

.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 99;
  background: rgba(5,10,21,0.96);
  backdrop-filter: blur(14px);
  padding-top: var(--nav-h);
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu-inner { padding: 2rem 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.4rem; }
.mobile-menu a {
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 1.5rem; color: var(--parchment); text-transform: uppercase;
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(201,143,61,0.4);
}
.mobile-menu-cta { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
/* Stretch CTAs full width in the stacked mobile menu and center their content
   (text + rivets) so both Login and Sign up read as balanced pills. */
.mobile-menu-cta .btn,
.mobile-menu-cta .btn-ghost {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.mobile-menu-apps {
  margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px dashed rgba(201,143,61,0.35);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.mobile-menu-apps-label {
  font-family: "IM Fell English SC", serif;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-hot); margin-bottom: 0.4rem;
}
.mobile-menu-apps a {
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: 1.05rem; text-transform: none; letter-spacing: 0;
  color: var(--parchment); border-bottom: none;
  padding: 0.5rem 0;
  display: flex; align-items: center; gap: 0.6rem;
}
.mobile-menu-apps a:hover { color: var(--brass-hot); }
.mobile-menu-apps__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  color: var(--brass-hot);
}
.mobile-menu-apps__icon svg { width: 22px; height: 22px; display: block; }

/* Language block inside the mobile menu */
.mobile-menu-lang {
  margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px dashed rgba(201,143,61,0.35);
}

/* ============ Header right-side action group ============ */
.topbar-actions {
  display: inline-flex; align-items: center; gap: 0.6rem;
}
/* Language chip — now lives inside .topbar-actions, between the nav and the
   "Get The App" block. Stacked with a small caption underneath (matching the
   header-apps-label typography) so the two right-side widgets read as a pair. */
.header-lang {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 3px;
  line-height: 1;
}
.header-lang__caption {
  font-family: "IM Fell English SC", serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-hot);
  opacity: 0.9;
  white-space: nowrap;
}
.header-apps {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.2rem 0.55rem 0.2rem 0.75rem;
  border-radius: 8px;
  background: rgba(255,205,107,0.08);
  border: 1px solid rgba(201,143,61,0.35);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.header-apps:hover {
  background: rgba(255,205,107,0.14);
  border-color: rgba(255,205,107,0.55);
}
.header-apps-label {
  font-family: "IM Fell English SC", serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-hot);
  white-space: nowrap;
}
.header-apps-icons { display: inline-flex; gap: 0.15rem; }
.header-apps-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--parchment);
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.header-apps-icon:hover {
  color: var(--brass-hot);
  background: rgba(255,205,107,0.15);
  transform: translateY(-1px);
}
.header-apps-icon svg { width: 22px; height: 22px; display: block; }

/* Mobile-only lang chip that sits in the topbar next to the hamburger.
   Hidden on desktop (the topbar-actions version is used there instead). */
.header-lang--mobile { display: none; }
/* Hamburger breakpoint.
   The full desktop bar (brand + nav + actions + gaps) needs roughly:
     Pirate 1170px · French 1160px · English 1255px
   English is now the widest, so it sets the breakpoint. Keep nav labels
   short in every language: adding a long one here pushes this breakpoint
   back up and costs laptop users the desktop nav. Below 1340px the bar
   collapses into the hamburger rather than clipping the Login button. */
@media (max-width: 1339.98px) {
  .nav-links, .topbar-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Reveal the mobile lang chip in the topbar, right before the hamburger.
     No caption — just the flag chip, to keep the topbar compact.
     margin-left:auto soaks up the free space the hidden nav leaves behind, so
     the chip stays pinned to the hamburger instead of drifting to the middle
     of the bar on wide screens (the topbar is justify-content: space-between). */
  .header-lang--mobile {
    display: inline-flex; align-items: center;
    margin-left: auto;
    margin-right: 0.4rem;
  }
}
/* Above the breakpoint the bar must be allowed past the 1220px content cap —
   otherwise the nav reappears into a box only ~1170px wide and the longest
   language clips again no matter how wide the window gets. The header is
   therefore a little wider than the page content below it, by design. */
@media (min-width: 1340px) {
  .topbar { max-width: min(1400px, calc(100vw - 1rem)); }
}
/* Only reachable when the desktop actions are visible (>=1340px), but kept
   so the label still drops out first if the breakpoint is ever lowered. */
@media (max-width: 500px) {
  .header-apps-label { display: none; }
}

/* ============ HERO — THE COVER OF THE CODEX ============ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  padding: clamp(2rem, 5vw, 4rem) 0 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(126,212,255,0.15), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(255,205,107,0.10), transparent 55%),
    linear-gradient(180deg, #050a15 0%, #0a1e35 40%, #0f2f4e 78%, #143d5f 100%);
}
/* Stars */
.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, var(--parchment) 50%, transparent),
    radial-gradient(1px 1px at 25% 8%, var(--parchment) 50%, transparent),
    radial-gradient(1px 1px at 40% 22%, var(--sea-foam) 50%, transparent),
    radial-gradient(1.5px 1.5px at 65% 12%, var(--parchment) 50%, transparent),
    radial-gradient(1px 1px at 80% 25%, var(--parchment) 50%, transparent),
    radial-gradient(1px 1px at 92% 8%, var(--sea-foam) 50%, transparent),
    radial-gradient(1px 1px at 15% 32%, var(--parchment) 50%, transparent),
    radial-gradient(1.5px 1.5px at 55% 35%, var(--parchment) 50%, transparent),
    radial-gradient(1px 1px at 33% 45%, var(--sea-foam) 50%, transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
  opacity: 0.85;
}
@keyframes twinkle {
  0%   { opacity: 0.7; }
  100% { opacity: 1;   }
}

/* Moon */
.moon {
  position: absolute; top: 8%; right: 9%;
  width: 110px; height: 110px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff6e0 0%, #eddba8 40%, #a8926a 100%);
  box-shadow:
    0 0 30px rgba(255,239,190,0.4),
    0 0 80px rgba(255,205,107,0.25),
    inset -10px -10px 20px rgba(0,0,0,0.3);
  z-index: 1;
  pointer-events: none;
}
.moon::before {
  content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 60% 30%, transparent 8px, rgba(0,0,0,0.15) 10px, transparent 14px),
    radial-gradient(circle at 40% 65%, transparent 10px, rgba(0,0,0,0.12) 12px, transparent 16px),
    radial-gradient(circle at 70% 55%, transparent 6px, rgba(0,0,0,0.1) 8px, transparent 12px);
}
/* Faint skull emoji blended into the moon — visible on close look, doesn't pop */
.moon::after {
  content: "☠";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 62px;
  color: #a8926a;
  opacity: 0.24;
  mix-blend-mode: multiply;
  filter: blur(0.5px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transform: rotate(-8deg) translateY(2px);
  pointer-events: none;
}
@media (max-width: 700px) {
  .moon { width: 70px; height: 70px; top: 5%; right: 6%; }
  .moon::after { font-size: 40px; }
}

/* Sailing ship on horizon */
.ship-silhouette {
  position: absolute; bottom: 22%; z-index: 2;
  width: 140px; height: 80px;
  animation: sail-across 65s linear infinite;
  pointer-events: none;
}
@keyframes sail-across {
  0%   { transform: translateX(105vw); }
  100% { transform: translateX(-140px); }
}
.ship-silhouette svg { width: 100%; height: 100%; }

/* Ocean waves at bottom */
.ocean {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 22%;
  min-height: 120px;
  z-index: 3;
  pointer-events: none;
}
.ocean svg { position: absolute; bottom: 0; width: 200%; height: 100%; }
.wave-a { animation: wave-shift 12s linear infinite; opacity: 0.6; }
.wave-b { animation: wave-shift 18s linear infinite reverse; opacity: 0.85; }
.wave-c { animation: wave-shift 22s linear infinite; opacity: 1; }
@keyframes wave-shift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hero content */
.hero-grid {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: 65vh;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(6rem, 12vw, 10rem);
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content-right { order: -1; }
}

.hero-chapter-mark {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.35rem 1rem 0.35rem 0.4rem;
  border-radius: 999px;
  background: rgba(15,32,56,0.7);
  border: 1px solid var(--brass);
  margin-bottom: 1.5rem;
  font-family: "IM Fell English SC", serif;
  font-size: 0.85rem; letter-spacing: 0.18em;
  color: var(--brass-hot);
  text-transform: uppercase;
}
@media (max-width: 960px) { .hero-chapter-mark { margin-left: auto; margin-right: auto; } }
.hero-chapter-star {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brass-hot), var(--brass));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); font-weight: 900; font-size: 0.9rem;
  box-shadow: 0 0 14px rgba(255,205,107,0.6);
}

.hero-title {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(2.8rem, 7vw + 1rem, 6.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  color: var(--parchment);
  text-shadow:
    0 3px 0 rgba(0,0,0,0.5),
    0 0 40px rgba(255,205,107,0.15),
    0 20px 40px rgba(0,0,0,0.7);
}
.hero-title .gold {
  background: linear-gradient(180deg, var(--brass-hot) 0%, var(--brass) 50%, #8a5d15 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 12px rgba(255,205,107,0.35));
}
.hero-title .cyan {
  background: linear-gradient(180deg, var(--sea-foam), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}

.hero-subtitle {
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: clamp(1.1rem, 1vw + 0.9rem, 1.5rem);
  line-height: 1.55;
  color: var(--parchment);
  max-width: 34rem;
  margin-bottom: 2rem;
}
@media (max-width: 960px) { .hero-subtitle { margin-left: auto; margin-right: auto; } }

.hero-subtitle .quill {
  color: var(--brass-hot); font-style: normal;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
}
@media (max-width: 960px) { .hero-actions { justify-content: center; } }

/* Right side: MASSIVE skull-QR with animations */
.skull-stage {
  position: relative;
  aspect-ratio: 1;
  max-width: 520px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.skull-halo {
  position: absolute; inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(126,212,255,0.35) 0%, rgba(79,183,255,0.15) 40%, transparent 70%);
  animation: halo-pulse 4s ease-in-out infinite;
  filter: blur(20px);
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.skull-compass {
  position: absolute; inset: 0;
  animation: rotate-slow 120s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes rotate-slow { to { transform: rotate(360deg); } }
.skull-svg {
  width: 78%; height: auto;
  position: relative; z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)) drop-shadow(0 0 30px rgba(79,183,255,0.5));
  animation: skull-float 6s ease-in-out infinite;
}
@keyframes skull-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
/* Skull "linking" blink — the skull-bone eyelid drops from the top,
   covers the QR, then retracts. Both eyes blink in sync like a real face.
   The eyelid rect starts at scaleY(0) (invisible at the top edge) and
   briefly scales to 1 (fully covering the socket) then back to 0. */
.skull-svg .qr-eye .eyelid {
  transform-box: fill-box;
  transform-origin: center top;
  transform: scaleY(0);
  animation: skull-blink 5s ease-in-out infinite;
}
@keyframes skull-blink {
  0%, 88%  { transform: scaleY(0); }
  92%      { transform: scaleY(1); }
  95%      { transform: scaleY(1); }
  99%      { transform: scaleY(0); }
  100%     { transform: scaleY(0); }
}

/* ============ Hero phone mockup (replaces skull) ============ */
.hero-phone {
  position: relative;
  width: clamp(240px, 24vw, 340px);
  margin: 0 auto;
  animation: phone-wiggle 6s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes phone-wiggle {
  0%, 100% { transform: rotate(-1.2deg) translateY(0); }
  25%      { transform: rotate(0.8deg)  translateY(-4px); }
  50%      { transform: rotate(-0.4deg) translateY(0); }
  75%      { transform: rotate(1.4deg)  translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .hero-phone { animation: none; } }
.hero-phone__glow {
  position: absolute; inset: -12%;
  background: radial-gradient(circle at center, rgba(126,212,255,0.35) 0%, rgba(79,183,255,0.12) 40%, transparent 70%);
  filter: blur(24px);
  animation: phone-halo 4s ease-in-out infinite;
  z-index: 0;
}
@keyframes phone-halo {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.hero-phone__frame {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, #1c1c1e, #050508);
  border-radius: 32px;
  padding: 9px;
  box-shadow:
    0 0 0 2px rgba(201,143,61,0.4),
    0 24px 50px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-phone__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 20px;
  background: #050508;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.hero-phone__screen {
  background: #f5f5fb;
  border-radius: 22px;
  overflow: hidden;
  padding-top: 26px;
  color: #0c1020;
  font-family: system-ui, -apple-system, sans-serif;
  aspect-ratio: 9 / 19;
  display: flex; flex-direction: column;
}
.hero-phone__header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
  font-size: 12px; font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hero-phone__header-icon {
  width: 18px; height: 18px; border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, #0c1020 0 1.5px, transparent 1.5px 3px),
    repeating-linear-gradient(90deg, #0c1020 0 1.5px, transparent 1.5px 3px);
  background-color: white; border: 1px solid #0c1020;
}
.hero-phone__header-title { flex: 1; }
.hero-phone__header-caret { color: #4fb7ff; font-size: 11px; }
.hero-phone__qr-wrap { padding: 10px 12px 6px; text-align: center; }
.hero-phone__qr {
  display: block; width: 42%; aspect-ratio: 1;
  margin: 0 auto;
  background: white; border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: 4px;
  box-sizing: border-box;
}
.hero-phone__qr-label {
  margin-top: 6px;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.hero-phone__qr-label span { font-size: 10px; color: #666; }
.hero-phone__images {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 12px 6px;
  min-height: 0;
}
.hero-phone__image {
  width: 100%; flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.hero-phone__image img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.hero-phone__nav {
  margin-top: auto;
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 4px 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: white;
}
.hero-phone__nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 9px; color: #666;
}
.hero-phone__nav-item span { font-size: 13px; }
.hero-phone__nav-item em { font-style: normal; }
.hero-phone__nav-item--center {
  width: 36px; height: 36px; border-radius: 50%;
  background: #4fb7ff; color: white;
  margin-top: -10px;
  box-shadow: 0 4px 8px rgba(79,183,255,0.5);
  justify-content: center;
}
.hero-phone__nav-item--center span { color: white; font-size: 15px; }

/* Push alert floating off the handset — "someone scanned your CueArr".
   Sits outside .hero-phone__frame (which clips its screen) so it can
   overhang the bezel; the overhang stays inside .page-inner's padding. */
.hero-phone__alert {
  position: absolute; z-index: 4;
  left: -7%; right: -7%; bottom: 21%;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(244,248,255,0.96);
  color: #0c1020;
  font-family: system-ui, -apple-system, sans-serif;
  box-shadow:
    0 0 0 1.5px rgba(79,183,255,0.9),
    0 10px 26px rgba(0,0,0,0.55),
    0 0 26px rgba(79,183,255,0.35);
  /* Slides in shortly after load, then stays put — `both` holds it hidden
     through the delay and holds the end state afterwards, so it never
     flickers back out the way a looping keyframe would. */
  animation: phone-alert-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}
@keyframes phone-alert-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-phone__alert { animation: none; }
}
.hero-phone__alert-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(79,183,255,0.16);
  color: #1478c4;
}
.hero-phone__alert-icon svg { width: 15px; height: 15px; }
.hero-phone__alert-text { min-width: 0; display: block; }
.hero-phone__alert-text strong {
  display: block;
  font-size: 11.5px; font-weight: 700; line-height: 1.25;
}
.hero-phone__alert-text em {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 10.5px; line-height: 1.3; color: #454c5a;
}
.hero-phone__alert-time {
  align-self: start;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5c6474;
}

/* Falling coins */
.coins-rain {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  overflow: hidden;
}
.gcoin {
  position: absolute; top: -40px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--brass-hot), var(--brass) 55%, #6a4a1a);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), inset 0 2px 2px rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.5);
  opacity: 0;
  animation: coin-fall 8s linear infinite;
}
@keyframes coin-fall {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(90vh) rotate(720deg); opacity: 0; }
}
.gcoin:nth-child(1)  { left: 8%;  animation-delay: 0s;   animation-duration: 9s; }
.gcoin:nth-child(2)  { left: 18%; animation-delay: 3s;   animation-duration: 11s; width: 16px; height: 16px; }
.gcoin:nth-child(3)  { left: 34%; animation-delay: 6s;   animation-duration: 10s; }
.gcoin:nth-child(4)  { left: 76%; animation-delay: 1.5s; animation-duration: 12s; width: 18px; height: 18px; }
.gcoin:nth-child(5)  { left: 88%; animation-delay: 4.5s; animation-duration: 9.5s; }
.gcoin:nth-child(6)  { left: 60%; animation-delay: 7s;   animation-duration: 13s; width: 14px; height: 14px; }

/* Divider — torn parchment edge */
.torn-edge {
  position: relative; height: 40px;
  background:
    radial-gradient(circle at 10% 100%, transparent 8px, var(--midnight) 9px),
    radial-gradient(circle at 25% 100%, transparent 12px, var(--midnight) 13px),
    radial-gradient(circle at 45% 100%, transparent 6px,  var(--midnight) 7px),
    radial-gradient(circle at 63% 100%, transparent 14px, var(--midnight) 15px),
    radial-gradient(circle at 82% 100%, transparent 9px,  var(--midnight) 10px),
    radial-gradient(circle at 95% 100%, transparent 11px, var(--midnight) 12px),
    var(--midnight);
  z-index: 4;
}

/* ============ CHAPTER HEADERS ============ */
.chapter-header {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
.chapter-badge {
  display: inline-block;
  font-family: "IM Fell English SC", serif;
  font-size: 0.85rem; letter-spacing: 0.4em;
  color: var(--brass-hot); text-transform: uppercase;
  padding: 0.4rem 1.4rem;
  border: 1px solid var(--brass);
  background: rgba(15,32,56,0.6);
  margin-bottom: 1.2rem;
  position: relative;
}
.chapter-badge::before, .chapter-badge::after {
  content: "❦"; color: var(--brass); font-size: 1rem;
  position: absolute; top: 50%; transform: translateY(-52%);
}
.chapter-badge::before { left: -1.4rem; }
.chapter-badge::after  { right: -1.4rem; }
.chapter-title {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(2.2rem, 3vw + 1.4rem, 3.8rem);
  line-height: 1.05;
  color: var(--parchment);
  margin-bottom: 1rem;
  text-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 20px 40px rgba(0,0,0,0.5);
}
.chapter-title .gold {
  background: linear-gradient(180deg, var(--brass-hot), var(--brass), #7a5416);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chapter-subtitle {
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.2rem);
  line-height: 1.65;
  color: var(--parchment-dim);
}

/* ============ SECTION SHARED ============ */
.section {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

/* ============ CHAPTER I — THE FLEET (parchment cards) ============ */
.chapter-fleet {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(15,32,56,0.4), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(21,58,95,0.3), transparent 55%),
    linear-gradient(180deg, var(--midnight) 0%, #08131f 100%);
}
/* 260px (not 280) so Chapter I's four cards land on one row at full width
   instead of orphaning the fourth. auto-fit collapses the spare track, so
   three-card grids (e.g. whatisthis.php) still stretch to fill the row. */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.3rem, 2vw, 1.8rem);
}
.fleet-card {
  position: relative;
  padding: 2.2rem 1.5rem 2rem;
  background:
    linear-gradient(180deg, #f0dfb3, #ddc890);
  color: var(--ink);
  border-radius: 3px;
  box-shadow:
    0 4px 0 #a89575,
    0 30px 60px rgba(0,0,0,0.7),
    inset 0 0 40px rgba(139,58,26,0.1);
  border: 1px solid #a89575;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  transform-origin: center 20%;
}
.fleet-card:nth-child(1) { transform: rotate(-1.4deg); }
.fleet-card:nth-child(2) { transform: rotate(0.8deg); }
.fleet-card:nth-child(3) { transform: rotate(-0.6deg); }
.fleet-card:nth-child(4) { transform: rotate(1.1deg); }
.fleet-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02);
  box-shadow:
    0 4px 0 #a89575,
    0 40px 80px rgba(0,0,0,0.85),
    0 0 60px rgba(255,205,107,0.3);
}
/* Torn edges */
.fleet-card::before, .fleet-card::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background:
    radial-gradient(circle at 5% 50%, transparent 3px, #f0dfb3 4px),
    radial-gradient(circle at 15% 50%, transparent 4px, #f0dfb3 5px),
    radial-gradient(circle at 30% 50%, transparent 3px, #f0dfb3 4px),
    radial-gradient(circle at 50% 50%, transparent 5px, #f0dfb3 6px),
    radial-gradient(circle at 70% 50%, transparent 4px, #f0dfb3 5px),
    radial-gradient(circle at 85% 50%, transparent 3px, #f0dfb3 4px),
    radial-gradient(circle at 95% 50%, transparent 4px, #f0dfb3 5px);
}
.fleet-card::before { top: -8px; }
.fleet-card::after { bottom: -8px; transform: rotate(180deg); }

.fleet-card h3 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
  padding-right: 3.5rem;
}
.fleet-card .tag {
  font-family: "IM Fell English SC", serif;
  font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 0.5rem;
  /* Clear the wax seal, which overhangs the top-right corner. The tag sits at
     the seal's vertical band, so without this a long tag runs underneath it. */
  padding-right: 4.5rem;
}
.fleet-card p {
  font-family: "IM Fell English", serif;
  font-size: 1.05rem; line-height: 1.65;
  color: #3a2411;
}
.fleet-card ul {
  margin-top: 0.7rem; padding-left: 1.2rem;
  font-family: "IM Fell English", serif;
  font-size: 1rem; line-height: 1.7; color: #4a3211;
}
.fleet-card ul li::marker { color: var(--crimson); }

/* "Read more" link at the foot of a card (e.g. the scan-alerts card → primer) */
.fleet-card__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.9rem;
  font-family: "IM Fell English SC", serif;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--crimson);
  border-bottom: 1px solid rgba(160,30,40,0.5);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fleet-card__link:hover { color: #6a0f18; border-color: #6a0f18; }

/* Drop cap on first paragraph of each card */
.fleet-card p:first-of-type::first-letter {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 3rem;
  float: left;
  line-height: 0.85;
  margin: 0.2rem 0.4rem 0 0;
  color: var(--crimson);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

/* Wax seal — one solid pressed blob with the chapter numeral stamped in.
   Previously this was two half-SVGs that split apart on hover; each half kept
   the full 100x100 viewBox inside a 50%-wide box, so "meet" scaling shrank
   them to 34px and left a permanent gap down the middle. A single CSS blob
   avoids that (and avoids four duplicate gradient ids on the page). */
.wax-seal {
  position: absolute; top: -16px; right: 18px;
  width: 72px; height: 72px;
  z-index: 4;
  display: grid; place-items: center;
  transform: rotate(-10deg);
  /* Uneven radii so it reads as hand-pressed wax rather than a flat disc. */
  border-radius: 47% 53% 51% 49% / 52% 48% 53% 47%;
  background: radial-gradient(circle at 34% 28%, #c8353f 0%, #a81f2a 45%, #7d1520 78%, #5f0e16 100%);
  border: 1px solid #4d0c13;
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,0.22),
    inset 0 -6px 11px rgba(0,0,0,0.5),
    0 5px 12px rgba(0,0,0,0.55);
}
/* Faint stamped ring inside the wax */
.wax-seal::before {
  content: "";
  position: absolute; inset: 7px;
  border-radius: inherit;
  border: 1px dashed rgba(240,223,179,0.28);
  pointer-events: none;
}
.wax-seal__num {
  position: relative;
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 1.7rem; line-height: 1;
  white-space: nowrap;
  color: #f2e2b8;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.35);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
/* Hover lights up the numeral only; the wax itself stays put. */
.fleet-card:hover .wax-seal__num,
.wax-seal:hover .wax-seal__num {
  color: var(--brass-hot);
  text-shadow: 0 1px 1px rgba(0,0,0,0.65), 0 0 14px rgba(255,205,107,0.8);
}

/* ============ CHAPTER II — THE ARENA (stormy) ============ */
.chapter-arena {
  background:
    radial-gradient(ellipse at 25% 0%, rgba(160,30,40,0.25), transparent 55%),
    radial-gradient(ellipse at 75% 100%, rgba(79,183,255,0.2), transparent 55%),
    linear-gradient(180deg, #08131f 0%, #0a1a2e 45%, #0a1225 100%);
  overflow: hidden;
}
/* Lightning flash overlay */
.lightning {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: rgba(220,240,255,0);
  animation: flash 11s infinite;
}
@keyframes flash {
  0%, 100%      { background: rgba(220,240,255,0); }
  1%            { background: rgba(220,240,255,0.4); }
  2%            { background: rgba(220,240,255,0); }
  3.5%          { background: rgba(220,240,255,0.5); }
  4%            { background: rgba(220,240,255,0.1); }
  4.5%          { background: rgba(220,240,255,0); }
}
@media (prefers-reduced-motion) { .lightning { animation: none; } }

/* Ship's wheel */
.wheel-bg {
  position: absolute; top: -80px; right: -80px;
  width: min(60vw, 520px); height: min(60vw, 520px);
  animation: rotate-slow 100s linear infinite;
  opacity: 0.16;
  z-index: 1;
  pointer-events: none;
}
.wheel-bg svg { width: 100%; height: 100%; }

/* Kraken tentacle */
.kraken {
  position: absolute; left: -40px; bottom: -20px;
  width: min(30vw, 260px); height: auto;
  z-index: 1; opacity: 0.42;
  animation: tentacle-sway 8s ease-in-out infinite;
  transform-origin: bottom center;
  pointer-events: none;
}
@keyframes tentacle-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(6deg); }
}
@media (max-width: 700px) { .kraken { display: none; } }

.arena-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2vw, 1.6rem);
}
.arena-card {
  padding: 1.8rem 1.6rem;
  background:
    linear-gradient(180deg, rgba(10,23,40,0.85), rgba(5,15,30,0.9));
  border: 1px solid rgba(201,143,61,0.3);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.arena-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--crimson), var(--brass), transparent);
}
.arena-card:hover {
  transform: translateY(-6px);
  border-color: var(--brass-hot);
  box-shadow: 0 30px 70px rgba(0,0,0,0.85), 0 0 40px rgba(160,30,40,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.arena-card .tag {
  font-family: "IM Fell English SC", serif;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--crimson-hot); margin-bottom: 0.5rem;
}
.arena-card h3 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 1.35rem; margin-bottom: 0.7rem; color: var(--parchment);
}
.arena-card p {
  font-family: "IM Fell English", serif;
  font-size: 1.05rem; line-height: 1.6; color: var(--parchment-dim);
}

/* ============ CHAPTER III — OUTFIT THE CREW (cargo hold) ============ */
.chapter-crew {
  background:
    linear-gradient(180deg, #0a1225 0%, #10192a 50%, #0d1523 100%);
  position: relative;
}
/* Wooden slat texture */
.chapter-crew::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 68px, rgba(0,0,0,0.15) 68px 70px),
    repeating-linear-gradient(180deg, transparent 0 8px, rgba(139,90,45,0.03) 8px 12px);
  pointer-events: none;
  opacity: 0.5;
}
.crew-wrap {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.8rem, 3vw, 3rem);
  align-items: center;
  position: relative; z-index: 2;
}
@media (max-width: 960px) { .crew-wrap { grid-template-columns: 1fr; } }

.crew-blurb h3 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(1.7rem, 2vw + 1.2rem, 2.4rem);
  color: var(--parchment); margin-bottom: 1.2rem;
  text-shadow: 0 3px 0 rgba(0,0,0,0.4);
}
.crew-blurb p {
  font-family: "IM Fell English", serif; font-size: 1.1rem; line-height: 1.65;
  color: var(--parchment-dim); margin-bottom: 0.8rem;
}
.crew-blurb ul {
  margin-top: 0.6rem; padding-left: 1.4rem;
  font-family: "IM Fell English", serif; font-size: 1.05rem; color: var(--parchment-dim);
}
.crew-blurb ul li::marker { color: var(--brass); }
.crew-blurb ul li { margin-bottom: 0.4rem; line-height: 1.6; }
.crew-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Ship's manifest scroll */
.manifest {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, #f0dfb3, #d5bf85);
  border-radius: 4px;
  padding: 2.2rem 1.8rem 2.4rem;
  color: #3a2411;
  box-shadow: 0 30px 70px rgba(0,0,0,0.85), inset 0 0 40px rgba(139,58,26,0.2);
  font-family: "IM Fell English", serif;
  border-top: 5px solid #6d5836;
  border-bottom: 5px solid #6d5836;
  transform: rotate(-1.2deg);
  transition: transform 0.4s ease;
}
.manifest:hover { transform: rotate(0deg); }
.manifest::before, .manifest::after {
  content: ""; position: absolute; left: -10px; right: -10px; height: 30px;
  background:
    repeating-linear-gradient(90deg, #7a5c34 0 10px, #5c4324 10px 15px, #7a5c34 15px 25px);
  border-left: 3px solid #4a3218;
  border-right: 3px solid #4a3218;
  border-radius: 3px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
.manifest::before { top: -36px; }
.manifest::after  { bottom: -36px; }
.manifest h4 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 1.8rem; text-align: center;
  margin-bottom: 0.4rem; letter-spacing: 0.06em;
  color: #3a1a08;
}
.manifest-sub {
  text-align: center; font-style: italic; font-size: 0.9rem;
  color: #6a3f1a; margin-bottom: 1.4rem;
  border-bottom: 1px dashed var(--crimson);
  padding-bottom: 0.8rem;
}
.manifest-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px dotted rgba(139,58,26,0.4);
  font-size: 1rem;
}
.manifest-row:last-child { border-bottom: none; }
.manifest-row .value {
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crimson);
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(160,30,40,0.4); border-radius: 3px;
  background: rgba(255,255,255,0.35);
  white-space: nowrap; margin-left: 1rem;
}
.manifest-stamp {
  position: absolute; bottom: 1.5rem; right: 1.5rem;
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px dashed var(--crimson);
  display: flex; align-items: center; justify-content: center;
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 0.65rem;
  color: var(--crimson); text-align: center; line-height: 1.15;
  transform: rotate(-14deg);
  opacity: 0.85;
}

/* ============ CHAPTER IV — SET SAIL (treasure-map scroll on blue sea) ============ */
.chapter-sail {
  background:
    radial-gradient(ellipse at 20% 6%, rgba(255,205,107,0.14), transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(126,212,255,0.10), transparent 55%),
    linear-gradient(180deg, #0d1523 0%, #14304f 55%, #1a3d6a 82%, #050a15 100%);
  overflow: hidden;
  position: relative;
  padding-bottom: clamp(10rem, 18vw, 15rem); /* leaves the sea visible below the scroll */
}
/* Black Pearl-style galleon — hull sits into the wave zone. */
.dawn-schooner {
  position: absolute; bottom: -18px; left: 50%;
  width: min(62vw, 480px); height: auto;
  z-index: 3;
  opacity: 0.98;
  transform: translateX(-50%);
  animation: schooner-bob 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes schooner-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-10px); }
}

/* Two wave layers with parallax — back sits behind the boat, front laps over the hull */
.sail-waves {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
  background-repeat: repeat-x;
}
.sail-waves--back {
  bottom: 0; height: 70px; z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 70' preserveAspectRatio='none'><path d='M0,36 Q65,10 130,36 T260,36 L260,70 L0,70 Z' fill='%230a1c34'/><path d='M0,36 Q65,10 130,36 T260,36' fill='none' stroke='rgba(126,212,255,0.20)' stroke-width='0.9'/></svg>");
  background-size: 260px 70px;
  animation: waves-drift-back 18s linear infinite;
}
.sail-waves--front {
  bottom: 0; height: 90px; z-index: 4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90' preserveAspectRatio='none'><path d='M0,44 Q55,12 110,44 T220,44 L220,90 L0,90 Z' fill='%23050a15'/><path d='M0,44 Q55,12 110,44 T220,44' fill='none' stroke='rgba(180,220,255,0.40)' stroke-width='1'/></svg>");
  background-size: 220px 90px;
  animation: waves-drift-front 11s linear infinite;
}
@keyframes waves-drift-back  { from { background-position: 0 0; } to { background-position: -260px 0; } }
@keyframes waves-drift-front { from { background-position: 0 0; } to { background-position:  220px 0; } }
.bearings {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.2rem, 2vw, 1.6rem);
  margin-bottom: clamp(6rem, 12vw, 10rem);
}
.bearing {
  padding: 2rem 1.4rem 1.6rem;
  border-radius: 12px;
  background: rgba(10,23,40,0.85);
  border: 1px solid rgba(201,143,61,0.4);
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  text-align: center;
}
.bearing-mark {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--brass-hot), var(--brass) 55%, #6a4a1a);
  display: flex; align-items: center; justify-content: center;
  font-family: "Cinzel Decorative", serif; font-weight: 900; font-size: 1.1rem;
  color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(255,220,150,0.5), inset 0 -2px 4px rgba(0,0,0,0.4), 0 8px 22px rgba(0,0,0,0.6);
}
.bearing h3 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  margin-top: 1rem; margin-bottom: 0.6rem;
  font-size: 1.35rem; color: var(--parchment);
}
.bearing p {
  font-family: "IM Fell English", serif;
  font-size: 1rem; line-height: 1.6; color: var(--parchment-dim);
}
.bearing a { color: var(--cyan-hot); text-decoration: underline; }

/* ============ Fine Ports: pirate scroll of affiliate merchants ============ */
.chapter-ports {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,205,107,0.05), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(126,212,255,0.04), transparent 55%),
    linear-gradient(180deg, #08131f 0%, #0a1728 100%);
}
.ports-scroll {
  max-width: 900px;
  margin: 2rem auto 0;
  position: relative;
}
/* Rolled parchment ends (same look as the treasure-map scroll) */
.ports-scroll__dowel {
  position: relative;
  height: 30px;
  margin: 0 -10px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg,
      rgba(80,45,15,0.10) 0 2px,
      transparent 2px 5px),
    linear-gradient(180deg,
      #e0c084 0%,
      #b8945a 35%,
      #d9bd80 55%,
      #a37f4a 80%,
      #7a5a2a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,240,210,0.55),
    inset 0 -4px 8px rgba(60,30,10,0.45),
    0 8px 14px rgba(0,0,0,0.4);
  z-index: 3;
}
.ports-scroll__cap {
  position: absolute; top: -3px; bottom: -3px;
  width: 32px; border-radius: 50%;
  background:
    radial-gradient(circle at 40% 32%,
      #eecf8c 0%,
      #b8945a 45%,
      #7a5a2a 85%,
      #3a2411 100%);
  border: 1px solid #3a2411;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.35),
    0 4px 8px rgba(0,0,0,0.35);
}
.ports-scroll__cap--l { left: -16px; }
.ports-scroll__cap--r { right: -16px; }

/* Weathered parchment body */
.ports-scroll__parchment {
  position: relative;
  padding: 2rem clamp(1.5rem, 4vw, 2.5rem);
  background:
    linear-gradient(90deg,
      rgba(80,40,15,0.55) 0%,
      rgba(80,40,15,0.15) 5%,
      transparent 10%,
      transparent 90%,
      rgba(80,40,15,0.15) 95%,
      rgba(80,40,15,0.55) 100%),
    radial-gradient(ellipse at 12% 22%, rgba(120,70,30,0.28), transparent 40%),
    radial-gradient(ellipse at 88% 78%, rgba(120,70,30,0.28), transparent 40%),
    radial-gradient(ellipse at 62% 12%, rgba(120,70,30,0.18), transparent 35%),
    radial-gradient(ellipse at 28% 82%, rgba(120,70,30,0.22), transparent 40%),
    linear-gradient(180deg, #ead4a0 0%, #d9bd80 55%, #cba76b 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    inset 0 6px 12px rgba(60,30,10,0.35),
    inset 0 -6px 12px rgba(60,30,10,0.35);
}
.ports-scroll__parchment::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.18  0 0 0 0 0.05  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: 0.5;
}

.ports-scroll__list {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
}

/* Individual merchant row on the scroll */
.port {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 0.5rem;
  border-bottom: 1px dashed rgba(139,58,26,0.4);
  transition: background 0.2s ease;
}
.port:last-child { border-bottom: none; }
.port:hover { background: rgba(255,205,107,0.08); }
@media (max-width: 640px) {
  .port {
    grid-template-columns: 70px 1fr;
    grid-template-areas: "img meta" "img link";
    gap: 0.6rem 0.9rem;
    padding: 1rem 0.4rem;
  }
  .port__image { grid-area: img; }
  .port__meta  { grid-area: meta; }
  .port__link  { grid-area: link; justify-self: start; }
}

.port__image {
  width: 84px; height: 84px;
  border-radius: 6px;
  overflow: hidden;
}
.port__image-frame {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #d9c896, #a89575);
  border: 2px solid #8a7550;
  border-radius: 6px;
  font-size: 2.4rem;
  box-shadow: inset 0 0 12px rgba(58,36,17,0.2), 0 3px 6px rgba(0,0,0,0.25);
}
@media (max-width: 640px) {
  .port__image, .port__image-frame { width: 70px; height: 70px; font-size: 2rem; }
}
.port__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.port__meta { min-width: 0; }
.port__name {
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 1.15rem; line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.port__tagline {
  font-family: "IM Fell English", serif;
  font-size: 0.95rem; line-height: 1.5;
  color: #3a2411;
}
.port__tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.4rem;
}
.port__tags span {
  padding: 2px 8px;
  font-family: "IM Fell English SC", serif;
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--crimson);
  border: 1px dashed rgba(160,30,40,0.45);
  border-radius: 3px;
  background: rgba(160,30,40,0.05);
}
.port__link {
  white-space: nowrap;
}

.ports-cta {
  text-align: center;
  margin-top: 2.4rem;
  font-family: "IM Fell English", serif; font-style: italic;
  color: var(--parchment-dim);
}
.ports-cta p { margin: 0 0 0.8rem; font-size: 1rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.ports-cta-buttons {
  display: inline-flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center;
  margin-top: 0.6rem;
}

/* Pagination for Fine Ports on the marketing page */
.ports-pager {
  margin-top: 1.6rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  font-family: "IM Fell English", serif; color: var(--parchment-dim);
}
.ports-pager__label { font-size: 0.95rem; letter-spacing: 0.06em; }
.ports-pager__label strong { color: var(--brass-hot); font-family: "Cinzel Decorative", serif; font-weight: 900; }
.ports-pager__btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 1rem;
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-hot);
  background: rgba(255,205,107,0.08);
  border: 1.5px solid var(--brass);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ports-pager__btn:hover { background: rgba(255,205,107,0.2); transform: translateY(-1px); }
.ports-pager__btn.is-disabled {
  opacity: 0.35; pointer-events: none; cursor: not-allowed;
}
.port__image-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 4px;
}

/* ============ Chapter IV: Treasure-map scroll containing the 4 stops ============ */
/* The parchment scroll that wraps the whole treasure map */
.sail-scroll {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}
/* Rolled parchment ends — no more wooden dowels or brass caps.
   Uses the same tan family as the parchment body with layered lines to imply the roll. */
.sail-scroll__dowel {
  position: relative;
  height: 30px;
  margin: 0 -10px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg,
      rgba(80,45,15,0.10) 0 2px,
      transparent 2px 5px),
    linear-gradient(180deg,
      #e0c084 0%,
      #b8945a 35%,
      #d9bd80 55%,
      #a37f4a 80%,
      #7a5a2a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,240,210,0.55),
    inset 0 -4px 8px rgba(60,30,10,0.45),
    0 8px 14px rgba(0,0,0,0.4);
  z-index: 3;
}
/* The ends of the roll spiral inward — replaces the old brass caps */
.sail-scroll__cap {
  position: absolute; top: -3px; bottom: -3px;
  width: 32px; border-radius: 50%;
  background:
    radial-gradient(circle at 40% 32%,
      #eecf8c 0%,
      #b8945a 45%,
      #7a5a2a 85%,
      #3a2411 100%);
  border: 1px solid #3a2411;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.35),
    0 4px 8px rgba(0,0,0,0.35);
}
.sail-scroll__cap--l { left: -16px; }
.sail-scroll__cap--r { right: -16px; }
/* Weathered parchment body — mottled sepia with dark burnt edges */
.sail-scroll__parchment {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.4rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  background:
    /* Burnt edges on left + right */
    linear-gradient(90deg,
      rgba(80,40,15,0.55) 0%,
      rgba(80,40,15,0.15) 5%,
      transparent 10%,
      transparent 90%,
      rgba(80,40,15,0.15) 95%,
      rgba(80,40,15,0.55) 100%),
    /* Weathering blotches */
    radial-gradient(ellipse at 12% 22%, rgba(120,70,30,0.28), transparent 40%),
    radial-gradient(ellipse at 88% 78%, rgba(120,70,30,0.28), transparent 40%),
    radial-gradient(ellipse at 62% 12%, rgba(120,70,30,0.18), transparent 35%),
    radial-gradient(ellipse at 28% 82%, rgba(120,70,30,0.22), transparent 40%),
    radial-gradient(ellipse at 75% 45%, rgba(120,70,30,0.14), transparent 45%),
    /* Base warm tan */
    linear-gradient(180deg, #ead4a0 0%, #d9bd80 55%, #cba76b 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    inset 0 6px 12px rgba(60,30,10,0.35),
    inset 0 -6px 12px rgba(60,30,10,0.35);
}
/* Heavy noise for a weathered surface */
.sail-scroll__parchment::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.18  0 0 0 0 0.05  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: 0.5;
}
.sail-scroll__parchment > * { position: relative; z-index: 1; }

/* Header inside the scroll needs dark ink instead of parchment-on-dark */
.sail-scroll .chapter-header { text-align: center; margin-bottom: 2rem; }
.sail-scroll .chapter-badge {
  background: rgba(255,255,255,0.55);
  border-color: var(--crimson);
  color: var(--crimson);
}
.sail-scroll .chapter-badge::before,
.sail-scroll .chapter-badge::after { color: var(--crimson); }
.sail-scroll .chapter-title {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.sail-scroll .chapter-title .gold {
  background: linear-gradient(180deg, #d94656, var(--crimson), #5a0f18);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sail-scroll .chapter-subtitle { color: #5a3218; }

/* The trail map inside the scroll */
.trail-map {
  position: relative;
  margin-top: 1.4rem;
  aspect-ratio: 5 / 4;
  min-height: 620px;
}
@media (max-width: 720px) {
  .trail-map { aspect-ratio: auto; min-height: 0; }
}
/* Dashed cartographer trail behind the stops — stretched to the container */
.trail-map__path {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(139,58,26,0.35));
  z-index: 1;
}
@media (max-width: 720px) { .trail-map__path { display: none; } }

/* Stops absolutely positioned on desktop to hit the drawn path;
   collapse to a single column on mobile. */
.trail-map__stops {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
}
.trail-map__stops > .trail-stop {
  position: absolute;
  width: 42%;
}
.trail-map__stops > .trail-stop:nth-child(1) { top: 2%;  left: 3%;  transform: rotate(-2.8deg); }
.trail-map__stops > .trail-stop:nth-child(2) { top: 8%;  right: 3%; transform: rotate(3deg); }
.trail-map__stops > .trail-stop:nth-child(3) { top: 52%; left: 3%;  transform: rotate(-1.8deg); }
.trail-map__stops > .trail-stop:nth-child(4) { top: 58%; right: 3%; transform: rotate(2.4deg); }
.trail-map__stops > .trail-stop:hover { transform: rotate(0) translateY(-3px); z-index: 5; transition: transform 0.35s ease; }

@media (max-width: 720px) {
  .trail-map__stops { display: flex; flex-direction: column; gap: 1.6rem; height: auto; }
  .trail-map__stops > .trail-stop {
    position: static; width: 100%;
    transform: none !important;
  }
}

/* Each stop = a parchment card with a red X + roman numeral */
.trail-stop {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, #f5e5be, #ddc890);
  color: var(--ink);
  border: 1px solid var(--parchment-deep);
  border-radius: 4px;
  box-shadow: 0 4px 0 #a89575, 0 20px 40px rgba(0,0,0,0.5);
  /* Torn top + bottom edges */
}
.trail-stop::before,
.trail-stop::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background:
    radial-gradient(circle at 5% 50%, transparent 3px, #f5e5be 4px),
    radial-gradient(circle at 20% 50%, transparent 5px, #f5e5be 6px),
    radial-gradient(circle at 40% 50%, transparent 3px, #f5e5be 4px),
    radial-gradient(circle at 60% 50%, transparent 5px, #f5e5be 6px),
    radial-gradient(circle at 80% 50%, transparent 4px, #f5e5be 5px),
    radial-gradient(circle at 95% 50%, transparent 3px, #f5e5be 4px);
}
.trail-stop::before { top: -8px; }
.trail-stop::after  { bottom: -8px; transform: rotate(180deg); }

/* Red X + numeral in the top-right corner of each stop */
.trail-stop__x {
  position: absolute; top: -14px; right: 14px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
  transform: rotate(-6deg);
}
.trail-stop__x svg { width: 100%; height: 100%; }
.trail-stop__num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 0.85rem; color: var(--parchment);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 4px rgba(0,0,0,0.6);
  z-index: 2; letter-spacing: 0.05em;
}
.trail-stop h3 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 1.3rem; color: var(--ink);
  margin: 0 0 0.7rem;
  padding-right: 3.5rem;
  line-height: 1.15;
}
.trail-stop p {
  font-family: "IM Fell English", serif;
  font-size: 1rem; line-height: 1.6;
  color: #3a2411;
  margin: 0 0 1rem;
}
.trail-stop a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.trail-stop a:hover { color: #7a1520; }

/* Pill CTA button used inside the stops + Get-the-app style */
.btn-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: rgba(139,58,26,0.1);
  border: 1.5px solid var(--crimson);
  border-radius: 6px;
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crimson); text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn-pill:hover {
  background: var(--crimson); color: var(--parchment) !important;
  transform: translateY(-1px);
}
.btn-pill span { font-size: 0.9rem; }

/* Store icon buttons inside stop II */
.trail-stop__apps {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem;
}
.trail-stop__app {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--ink); color: var(--parchment) !important;
  border-radius: 6px;
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.trail-stop__app:hover {
  background: var(--crimson); transform: translateY(-1px);
}
.trail-stop__app svg { width: 18px; height: 18px; }
.trail-stop__app em { font-style: normal; }

/* ============ FOOTER — SHIP'S LOG ============ */
footer {
  position: relative;
  padding: clamp(3rem, 5vw, 4.5rem) 0 2.8rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(15,32,56,0.7), transparent 60%),
    var(--midnight);
}
.log-header {
  text-align: center; margin-bottom: 2.5rem;
}
.log-header h5 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem);
  color: var(--parchment);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.log-header p {
  font-family: "IM Fell English", serif; font-style: italic;
  color: var(--parchment-dim); font-size: 1.05rem;
}

.subscribe-row {
  display: flex; gap: 0.5rem; justify-content: center; align-items: stretch;
  max-width: 460px; margin: 0 auto;
}
.subscribe-row input {
  flex: 1;
  background: rgba(15,32,56,0.6);
  border: 1.5px solid var(--brass);
  padding: 0.75rem 1rem; border-radius: 4px;
  color: var(--parchment); font-family: "IM Fell English", serif; font-size: 1rem;
  outline: none;
}
.subscribe-row input::placeholder { color: var(--parchment-dim); font-style: italic; }
.subscribe-row input:focus { border-color: var(--brass-hot); box-shadow: 0 0 20px rgba(255,205,107,0.3); }

.footer-links {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  justify-content: center; margin-top: 2.5rem;
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.12em;
  color: var(--parchment-dim); text-transform: uppercase;
}
.footer-links a { transition: color 0.2s ease; }
.footer-links a:hover { color: var(--brass-hot); }

.footer-tag {
  text-align: center; margin-top: 1.6rem;
  font-family: "IM Fell English", serif; font-style: italic;
  color: rgba(239,220,178,0.5); font-size: 0.9rem;
}
.footer-tag strong { color: var(--brass); font-style: normal; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}