/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Theme: FORJA (default) ---------- */
:root,
[data-palette="forja"] {
  --bg: oklch(0.11 0.012 40);
  --bg-deep: oklch(0.07 0.01 40);
  --surface: oklch(0.15 0.015 35);
  --surface-2: oklch(0.19 0.018 35);
  --line: oklch(0.28 0.02 40 / 0.6);
  --line-soft: oklch(0.28 0.02 40 / 0.25);
  --ink: oklch(0.94 0.015 80);
  --ink-2: oklch(0.78 0.02 70);
  --ink-3: oklch(0.58 0.02 60);
  --ember: oklch(0.7 0.18 45);
  --ember-deep: oklch(0.55 0.18 35);
  --gold: oklch(0.82 0.13 85);
  --gold-deep: oklch(0.65 0.12 75);
  --accent: var(--ember);
  --accent-glow: oklch(0.7 0.18 45 / 0.45);
  --grain-opacity: 0.06;
}

/* ---------- Theme: SELO (variation B) ---------- */
[data-palette="selo"] {
  --bg: oklch(0.13 0.04 25);
  --bg-deep: oklch(0.08 0.035 22);
  --surface: oklch(0.18 0.05 22);
  --surface-2: oklch(0.22 0.06 22);
  --line: oklch(0.4 0.04 30 / 0.6);
  --line-soft: oklch(0.4 0.04 30 / 0.25);
  --ink: oklch(0.95 0.02 85);
  --ink-2: oklch(0.8 0.03 75);
  --ink-3: oklch(0.6 0.03 60);
  --ember: oklch(0.66 0.15 35);
  --ember-deep: oklch(0.5 0.16 30);
  --gold: oklch(0.85 0.14 88);
  --gold-deep: oklch(0.7 0.13 80);
  --accent: var(--gold);
  --accent-glow: oklch(0.85 0.14 88 / 0.35);
  --grain-opacity: 0.08;
}

/* ---------- Type system ---------- */
.font-display { font-family: "Cinzel", "Cormorant Garamond", serif; letter-spacing: 0.04em; font-weight: 600; }
.font-serif   { font-family: "Cormorant Garamond", "EB Garamond", serif; }
.font-sans    { font-family: "Inter", system-ui, sans-serif; }
.font-mono    { font-family: "JetBrains Mono", ui-monospace, monospace; }
.font-fraktur { font-family: "UnifrakturMaguntia", "Cinzel", serif; }

[data-typography="editorial"] .font-display { font-family: "Cormorant Garamond", serif; letter-spacing: 0.02em; font-weight: 500; }
[data-typography="editorial"] h1, [data-typography="editorial"] h2 { font-style: italic; }

.eyebrow {
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 11px;
  color: var(--gold);
  font-weight: 500;
}

.smallcaps {
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}

/* ---------- Atmosphere: grain & vignette ---------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 36px;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: oklch(from var(--bg-deep) l c h / 0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink);
}
.nav-logo .crest {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, var(--ember-deep), transparent 65%);
  position: relative;
}
.nav-logo .crest::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
}
.nav-logo .crest svg { width: 16px; height: 16px; color: var(--gold); }
.nav-links {
  display: flex; gap: 36px; align-items: center;
}
.nav-link {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.has-menu::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  vertical-align: middle;
}
.nav-cta {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 11px 22px;
  border: 1px solid var(--gold-deep);
  color: var(--gold);
  background: transparent;
  border-radius: 999px;
  transition: all 0.25s ease;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--bg-deep);
  box-shadow: 0 0 30px var(--accent-glow);
}

.has-dropdown {
  /* Extend hover region in both directions so the cursor can traverse the gap
     between the trigger and the dropdown without the menu closing.
     Symmetric padding keeps the trigger vertically aligned with sibling nav links
     under flex `align-items: center`. */
  padding: 18px 0;
  margin: -18px 0;
}

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  padding: 12px;
  background: oklch(from var(--bg-deep) l c h / 0.95);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}
/* Invisible bridge that fills the visual gap between the trigger and
   the dropdown panel — keeps :hover alive while the cursor crosses. */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  color: var(--ink-2);
  border-radius: 8px;
  transition: all 0.15s;
}
.dropdown a:hover { background: var(--surface); color: var(--ink); }
.dropdown a .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--gold);
  margin-right: 12px;
  letter-spacing: 0.1em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(180deg, var(--ember) 0%, var(--ember-deep) 100%);
  color: oklch(0.12 0.01 40);
  box-shadow: 0 0 0 1px oklch(from var(--ember) l c h / 0.6),
              0 20px 50px oklch(from var(--ember) l c h / 0.35),
              inset 0 1px 0 oklch(from var(--ember) calc(l + 0.15) c h / 0.7);
  font-weight: 700;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px oklch(from var(--ember) l c h / 0.8),
              0 28px 70px oklch(from var(--ember) l c h / 0.5),
              inset 0 1px 0 oklch(from var(--ember) calc(l + 0.15) c h / 0.7);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: oklch(from var(--gold) l c h / 0.04);
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 8vw 80px;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 75%, oklch(from var(--ember) l c h / 0.28), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 30%, oklch(from var(--gold) l c h / 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.hero-image-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%,
      oklch(from var(--ember) l c h / 0.5),
      oklch(from var(--ember-deep) l c h / 0.2) 40%,
      transparent 70%);
  mix-blend-mode: screen;
}
.hero-canvas {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.hero-eyebrow .line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.hero h1 {
  font-family: "Cinzel", serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  color: var(--ink);
  text-shadow: 0 0 80px oklch(from var(--ember) l c h / 0.3);
}
.hero h1 .em {
  background: linear-gradient(180deg, var(--gold) 0%, var(--ember) 80%, var(--ember-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
[data-typography="editorial"] .hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero-tagline {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(18px, 1.6vw, 24px);
  font-style: italic;
  color: var(--ink-2);
  max-width: 520px;
  margin: 36px 0 16px;
  line-height: 1.5;
}
.hero-sub {
  font-size: 15px;
  color: var(--ink-3);
  max-width: 480px;
  margin: 0 0 44px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-actions .meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 12px;
  padding-left: 24px;
  border-left: 1px solid var(--line-soft);
}
.hero-actions .meta .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-actions .meta .value {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-transform: uppercase;
}

.hero-side {
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 360px;
  display: none;
}
@media (min-width: 1200px) { .hero-side { display: block; } }

.crest-large {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  animation: slowPulse 6s ease-in-out infinite;
}
.crest-large::before,
.crest-large::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  opacity: 0.3;
}
.crest-large::after {
  inset: 30px;
  border-color: var(--ember);
  opacity: 0.4;
}
.crest-large .runes {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.6em;
  color: var(--gold);
  opacity: 0.55;
  animation: rotate 60s linear infinite;
}
.crest-large .core {
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 60%, oklch(from var(--ember) l c h / 0.5), transparent 60%),
    radial-gradient(circle at 50% 50%, oklch(from var(--gold) l c h / 0.15), transparent 70%);
  display: grid;
  place-items: center;
  position: relative;
}
.crest-large .core img {
  width: 75%;
  filter: drop-shadow(0 0 30px oklch(from var(--ember) l c h / 0.5));
}

@keyframes slowPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}

.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.scroll-hint .line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--gold-deep), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* ---------- Section common ---------- */
.section {
  position: relative;
  padding: 140px 8vw;
  z-index: 2;
}
.section-deep { background: var(--bg-deep); }
.section-surface { background: var(--surface); }
.section-tag {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.section-tag .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.section-tag .label {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.section-tag .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  max-width: 200px;
}

h2.section-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0 0 24px;
  color: var(--ink);
  max-width: 18ch;
}
h2.section-title .em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gold);
}
[data-typography="editorial"] h2.section-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
}

.section-lede {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}

/* ---------- Sinopse ---------- */
.synopsis {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .synopsis { grid-template-columns: 1fr; gap: 40px; } }

.synopsis-quote {
  position: relative;
  padding: 40px 0 0 60px;
  border-top: 1px solid var(--line-soft);
}
.synopsis-quote::before {
  content: "“";
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 140px;
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.5;
}
.synopsis-quote p {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 24px;
}
.synopsis-quote .attribution {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.synopsis-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.synopsis-body p strong {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- Books ---------- */
.books-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 32px;
  margin-top: 80px;
}
@media (max-width: 1100px) { .books-grid { grid-template-columns: 1fr 1fr; } .book-card.featured { grid-column: 1 / -1; } }
@media (max-width: 700px) { .books-grid { grid-template-columns: 1fr; } }

.book-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line-soft);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: all 0.4s ease;
  overflow: hidden;
}
.book-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 110%, oklch(from var(--ember) l c h / 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.book-card:hover { border-color: oklch(from var(--gold) l c h / 0.5); transform: translateY(-4px); }
.book-card:hover::before { opacity: 1; }

.book-card.featured {
  grid-row: span 2;
  background: linear-gradient(180deg, var(--surface-2), var(--surface), var(--bg-deep));
}

.book-cover {
  position: relative;
  aspect-ratio: 2/3;
  background:
    linear-gradient(135deg, oklch(from var(--ember-deep) l c h / 0.25) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--bg-deep));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 0 0 1px oklch(from var(--gold) l c h / 0.08) inset;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}
.book-card:hover .book-cover {
  transform: translateY(-6px);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.7),
    0 0 50px oklch(from var(--ember) l c h / 0.25),
    0 0 0 1px oklch(from var(--gold) l c h / 0.25) inset;
}
.book-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-cover-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      transparent 35%,
      oklch(from var(--gold) l c h / 0.18) 50%,
      transparent 65%);
  opacity: 0;
  transition: opacity 0.6s ease;
  mix-blend-mode: overlay;
}
.book-card:hover .book-cover-shine { opacity: 1; }
.book-cover-art {
  position: absolute;
  inset: 16px;
  border: 1px solid var(--gold-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 22px 18px;
  background: radial-gradient(ellipse 80% 60% at 50% 70%, oklch(from var(--ember) l c h / 0.18), transparent 70%);
}
.book-cover-art .crest-mini {
  width: 70px; height: 70px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, oklch(from var(--ember) l c h / 0.25), transparent 70%);
}
.book-cover-art .vol {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
}
.book-cover-art .title {
  font-family: "Cinzel", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  line-height: 1.3;
}
.book-cover-art .author {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.book-cover-art .ornament {
  width: 24px; height: 1px;
  background: var(--gold-deep);
  position: relative;
}
.book-cover-art .ornament::before,
.book-cover-art .ornament::after {
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
  top: -2px;
}
.book-cover-art .ornament::before { left: -8px; }
.book-cover-art .ornament::after { right: -8px; }

.book-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.book-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.book-card.featured .book-title { font-size: 28px; }
.book-desc {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
  flex: 1;
}
.book-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
  transition: gap 0.3s;
}
.book-link:hover { gap: 16px; }
.book-link svg { width: 14px; height: 14px; }

/* ---- eBook price badge ---- */
.book-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: -4px;
  padding: 10px 14px;
  align-self: flex-start;
  background:
    linear-gradient(180deg,
      oklch(from var(--ember) l c h / 0.10),
      oklch(from var(--ember) l c h / 0.04));
  border: 1px solid oklch(from var(--gold) l c h / 0.45);
  border-radius: 2px;
  position: relative;
  /* notched price-tag look on the left edge */
  clip-path: polygon(
    10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%
  );
  padding-left: 22px;
}
.book-price-label {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.book-price-value {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 1px 0 oklch(from var(--bg-deep) l c h / 0.6);
}
.book-card.featured .book-price-value { font-size: 24px; }
.book-card:hover .book-price {
  border-color: var(--gold);
  background:
    linear-gradient(180deg,
      oklch(from var(--ember) l c h / 0.18),
      oklch(from var(--ember) l c h / 0.06));
}

/* ---------- Characters ---------- */
.characters {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) { .characters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .characters { grid-template-columns: 1fr; } }

.character {
  position: relative;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.character:hover { border-color: oklch(from var(--gold) l c h / 0.5); }

.character-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-deep));
}
.character-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  filter: saturate(0.92) contrast(1.05);
}
.character:hover .character-portrait {
  transform: scale(1.06);
  filter: saturate(1.1) contrast(1.08);
}
.character-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, oklch(from var(--ember) l c h / 0.04) 14px 15px),
    radial-gradient(ellipse 60% 70% at 50% 40%, oklch(from var(--ember) l c h / 0.18), transparent 70%);
  transition: transform 1.2s ease;
}
.character:hover .character-placeholder { transform: scale(1.05); }
.character-placeholder .silhouette {
  width: 60%;
  height: 70%;
  background:
    radial-gradient(ellipse 30% 18% at 50% 18%, oklch(from var(--bg-deep) l c h) 50%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 65%, oklch(from var(--bg-deep) l c h) 50%, transparent 70%);
  filter: blur(2px);
  opacity: 0.85;
  margin-top: auto;
}
.character-placeholder .label {
  position: absolute;
  bottom: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.character-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, oklch(from var(--bg-deep) l c h / 0.85) 75%, var(--bg-deep) 100%);
}
.character-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px;
}
.character-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 6px;
}
.character-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.character-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  margin: 0 0 14px;
}
.character-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}
.character:hover .character-desc {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}

/* ---------- World map teaser ---------- */
.world-section {
  position: relative;
  overflow: hidden;
}
.world-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1000px) { .world-grid { grid-template-columns: 1fr; } }

.world-map {
  position: relative;
  margin: 0;
  aspect-ratio: 4/3;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 1px oklch(from var(--gold) l c h / 0.1) inset;
}
.world-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.05);
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.world-map:hover .world-map-img { transform: scale(1.03); }
.world-map-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid oklch(from var(--gold) l c h / 0.35);
  pointer-events: none;
  box-shadow: 0 0 0 1px oklch(from var(--bg-deep) l c h / 0.6);
}
.world-map-frame::before,
.world-map-frame::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold);
}
.world-map-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.world-map-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.world-map-caption {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: oklch(from var(--gold) l c h / 0.95);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  pointer-events: none;
}
.world-map-caption .cardinal {
  width: 28px; height: 28px;
  border: 1px solid oklch(from var(--gold) l c h / 0.7);
  border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(from var(--bg-deep) l c h / 0.5);
  backdrop-filter: blur(4px);
  font-size: 11px;
  letter-spacing: 0;
}

.world-pin {
  position: absolute;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.world-pin::before {
  content: "";
  width: 8px; height: 8px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: oklch(from var(--ember) l c h / 0.6);
  box-shadow: 0 0 12px oklch(from var(--ember) l c h / 0.8);
}
.world-pin.right { flex-direction: row-reverse; text-align: right; }

.realms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.realm {
  border: 1px solid var(--line-soft);
  padding: 20px;
  background: oklch(from var(--surface) l c h / 0.4);
  transition: all 0.3s;
}
.realm:hover { border-color: oklch(from var(--gold) l c h / 0.5); background: var(--surface); }
.realm .symbol {
  width: 36px; height: 36px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 14px;
  font-family: "Cinzel", serif;
  font-size: 14px;
  color: var(--gold);
}
.realm h4 {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--ink);
}
.realm p {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Bestiary ---------- */
.bestiary {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 900px) { .bestiary { grid-template-columns: repeat(2, 1fr); } }
.beast {
  position: relative;
  aspect-ratio: 1;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  transition: all 0.5s ease;
}
.beast:last-child { border-right: none; }
@media (max-width: 900px) {
  .beast:nth-child(2n) { border-right: none; }
  .beast:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}
.beast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, oklch(from var(--ember) l c h / 0.25), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
}
.beast:hover::before { opacity: 1; }
.beast-shape {
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  display: grid; place-items: center;
  opacity: 0.5;
  transition: all 0.5s;
}
.beast:hover .beast-shape { opacity: 0.85; transform: translate(-50%, -50%) scale(1.05); }
.beast-shape svg { width: 100%; height: 100%; color: var(--gold); }
.beast-rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 4px;
  position: relative;
}
.beast-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
  position: relative;
}
.beast-class {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
  position: relative;
}

/* ---------- Newsletter ---------- */
.newsletter {
  position: relative;
  padding: 140px 8vw;
  background: var(--bg-deep);
  overflow: hidden;
  text-align: center;
}
.newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 50% 100%, oklch(from var(--ember) l c h / 0.25), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%, oklch(from var(--gold) l c h / 0.05), transparent 70%);
  pointer-events: none;
}
.newsletter-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.newsletter h2 {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  margin: 24px 0;
  color: var(--ink);
}
.newsletter h2 .em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.newsletter p {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-style: italic;
  color: var(--ink-2);
  margin: 0 0 48px;
}
.newsletter-form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.newsletter-input {
  flex: 1;
  max-width: 380px;
  background: oklch(from var(--bg-deep) l c h / 0.6);
  border: 1px solid var(--line);
  padding: 16px 20px;
  font-family: "Inter", sans-serif;
  color: var(--ink);
  font-size: 14px;
  border-radius: 2px;
  outline: none;
  transition: all 0.2s;
}
.newsletter-input::placeholder { color: var(--ink-3); }
.newsletter-input:focus {
  border-color: var(--gold);
  background: oklch(from var(--bg) l c h / 0.8);
  box-shadow: 0 0 0 3px oklch(from var(--gold) l c h / 0.15);
}
.newsletter-disclaimer {
  margin-top: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.newsletter-success {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  margin-top: 8px;
  animation: fadeUp 0.6s ease;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: oklch(from var(--bg-deep) calc(l - 0.02) c h);
  padding: 80px 8vw 40px;
  border-top: 1px solid var(--line-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.footer-brand h3 {
  font-family: "Cinzel", serif;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 16px 0 12px;
  color: var(--ink);
}
.footer-brand p {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
  max-width: 36ch;
  margin: 0 0 20px;
}
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: all 0.2s;
}
.footer-social a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: oklch(from var(--gold) l c h / 0.06);
}
.footer-col h5 {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-col a {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  color: var(--ink-2);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-wrap: wrap;
  gap: 20px;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Quote section ---------- */
.epigraph {
  padding: 80px 8vw;
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.epigraph p {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 auto;
}
.epigraph .em {
  background: linear-gradient(180deg, var(--gold), var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.epigraph .seal {
  margin: 32px auto 0;
  width: 36px;
  height: 1px;
  background: var(--gold-deep);
  position: relative;
}
.epigraph .seal::before,
.epigraph .seal::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
  top: -3px;
}
.epigraph .seal::before { left: -10px; }
.epigraph .seal::after { right: -10px; }

/* ---------- Mobile nav simplification ---------- */
@media (max-width: 900px) {
  .nav { padding: 14px 20px; }
  .nav-links { display: none; }
  .section { padding: 90px 6vw; }
  .hero { padding: 110px 6vw 80px; }
  .newsletter { padding: 90px 6vw; }
}


/* ========================================================== */
/* ============== PAGE: O Grande Continente ================= */
/* ========================================================== */

/* ---------- Chapter Hero ---------- */
.chapter-hero {
  position: relative;
  min-height: 92vh;
  padding: 200px 8% 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.chapter-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 80% at 80% 30%, oklch(from var(--ember) l c h / 0.18), transparent 60%),
    radial-gradient(ellipse 50% 70% at 10% 80%, oklch(from var(--gold) l c h / 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 60%, var(--bg) 100%);
}
.chapter-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 38px, oklch(from var(--gold) l c h / 0.025) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, oklch(from var(--gold) l c h / 0.025) 38px 39px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 80%);
}
.chapter-hero-inner {
  max-width: 920px;
  position: relative;
  z-index: 2;
}
.chapter-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.chapter-eyebrow .line {
  flex: 0 0 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.chapter-eyebrow .line:last-child {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
  flex: 1;
}
.chapter-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin: 0 0 36px;
  color: var(--ink);
  text-shadow: 0 4px 60px oklch(from var(--ember) l c h / 0.35);
}
.chapter-title .em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, var(--gold), var(--ember-deep) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0;
}
.chapter-lede {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 760px;
  margin: 0 0 22px;
}
.chapter-lede em {
  color: var(--gold);
  font-style: italic;
}
.chapter-sub {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-3);
  max-width: 680px;
  margin: 0 0 48px;
}
.chapter-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chapter-breadcrumbs a {
  color: var(--ink-3);
  transition: color 0.2s;
}
.chapter-breadcrumbs a:hover { color: var(--gold); }
.chapter-breadcrumbs .sep { color: var(--line); }
.chapter-breadcrumbs .current { color: var(--gold); }

/* ---------- Realms Atlas Index ---------- */
.atlas {
  padding: 60px 8%;
  position: relative;
}
.atlas-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 28px 0;
}
@media (max-width: 1100px) { .atlas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .atlas-grid { grid-template-columns: repeat(2, 1fr); } }
.atlas-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 20px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid transparent;
  color: var(--ink-2);
  transition: all 0.4s ease;
  position: relative;
}
.atlas-card:last-child { border-right: none; }
@media (max-width: 1100px) {
  .atlas-card { border-bottom: 1px solid var(--line-soft); }
  .atlas-card:nth-child(3n) { border-right: none; }
  .atlas-card:nth-last-child(-n+2):nth-child(n+4) { border-bottom: none; }
}
@media (max-width: 700px) {
  .atlas-card:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .atlas-card:nth-child(2n) { border-right: none; }
  .atlas-card:nth-last-child(-n+2):nth-child(n+4) { border-bottom: 1px solid var(--line-soft); }
  .atlas-card:last-child { border-bottom: none; }
}
.atlas-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, oklch(from var(--ember) l c h / 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.atlas-card:hover::before { opacity: 1; }
.atlas-card:hover { color: var(--ink); }
.atlas-numeral {
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--gold);
}
.atlas-sigil {
  color: var(--gold-deep);
  transition: all 0.5s ease;
}
.atlas-card:hover .atlas-sigil {
  color: var(--ember);
  transform: rotate(-6deg) scale(1.05);
  filter: drop-shadow(0 0 16px var(--accent-glow));
}
.atlas-name {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Map Stage ---------- */
.map-stage {
  padding: 120px 8% 100px;
  position: relative;
}
.map-frame {
  position: relative;
  margin: 60px auto 0;
  max-width: 1280px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  box-shadow:
    0 60px 120px rgba(0,0,0,0.5),
    inset 0 0 80px oklch(from var(--bg-deep) l c h / 0.6);
}
.map-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 50%, oklch(from var(--bg-deep) l c h / 0.7) 100%),
    linear-gradient(180deg, transparent 70%, oklch(from var(--bg-deep) l c h / 0.6));
}
.map-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-corners .c {
  position: absolute;
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--gold);
  opacity: 0.7;
}
.map-corners .c.tl { top: 18px; left: 22px; }
.map-corners .c.tr { top: 18px; right: 22px; }
.map-corners .c.bl { bottom: 18px; left: 22px; }
.map-corners .c.br { bottom: 18px; right: 22px; }
.map-frame figcaption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: oklch(from var(--bg-deep) l c h / 0.7);
  padding: 8px 18px;
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
}
.map-frame figcaption .dot { color: var(--gold); }

/* ---------- Realm Section ---------- */
.realm-section {
  padding: 140px 8%;
  position: relative;
  overflow: hidden;
}
.realm-section::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.realm-section[data-realm="demonios"] {
  background: linear-gradient(180deg, var(--bg) 0%, oklch(from var(--bg-deep) l c h) 50%, var(--bg) 100%);
}
.realm-section[data-realm="demonios"] .realm-numeral-art {
  color: oklch(from var(--ember) l 0.16 25 / 0.18);
}
.realm-section[data-realm="dragoes"] .realm-numeral-art {
  color: oklch(from var(--gold) l c h / 0.12);
}
.realm-section[data-realm="devastadas"] .realm-numeral-art {
  color: oklch(from var(--ink-3) l c h / 0.15);
}

.realm-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.realm-section.flipped .realm-grid {
  grid-template-columns: 1fr 1.05fr;
}
.realm-section.flipped .realm-text { order: 2; }
.realm-section.flipped .realm-art { order: 1; }
@media (max-width: 980px) {
  .realm-grid,
  .realm-section.flipped .realm-grid { grid-template-columns: 1fr; gap: 48px; }
  .realm-section.flipped .realm-text,
  .realm-section.flipped .realm-art { order: initial; }
}

.realm-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.realm-num {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.realm-tag .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.realm-of {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}

.realm-headline {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}
.realm-sigil-wrap {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: radial-gradient(circle, oklch(from var(--ember) l c h / 0.08), transparent 70%);
  color: var(--gold);
  position: relative;
}
.realm-sigil-wrap::before,
.realm-sigil-wrap::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.realm-sigil-wrap::before { top: -5px; left: -5px; }
.realm-sigil-wrap::after { bottom: -5px; right: -5px; }
.realm-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
  color: var(--ink);
}
.realm-epithet {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
  margin: 0;
  letter-spacing: 0.02em;
}

.realm-body {
  margin-bottom: 40px;
}
.realm-body p {
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.realm-body p:first-child::first-letter {
  font-family: "Cinzel", serif;
  font-size: 3.4em;
  float: left;
  line-height: 0.9;
  padding: 6px 12px 0 0;
  color: var(--gold);
  font-weight: 700;
}

.realm-traits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
}
.realm-traits .trait {
  padding: 0 18px;
  border-right: 1px solid var(--line-soft);
}
.realm-traits .trait:first-child { padding-left: 0; }
.realm-traits .trait:last-child { border-right: none; padding-right: 0; }
.realm-traits dt {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.realm-traits dd {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}
@media (max-width: 600px) {
  .realm-traits { grid-template-columns: 1fr; gap: 14px; }
  .realm-traits .trait { padding: 0; border-right: none; border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; }
  .realm-traits .trait:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ---------- Realm Art ---------- */
.realm-art {
  position: relative;
}
.realm-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow:
    0 50px 100px rgba(0,0,0,0.5),
    inset 0 0 60px oklch(from var(--bg-deep) l c h / 0.4);
}
.realm-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.05);
}
.realm-image-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid oklch(from var(--gold) l c h / 0.18);
  pointer-events: none;
}
.realm-image-frame::before,
.realm-image-frame::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.realm-image-frame::before { top: -8px; left: -8px; }
.realm-image-frame::after { bottom: -8px; right: -8px; }

.realm-image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.realm-image-placeholder .ph-pattern {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, oklch(from var(--ember) l c h / 0.05) 22px 23px),
    radial-gradient(ellipse 60% 70% at 50% 50%, oklch(from var(--ember) l c h / 0.18), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg-deep));
}
.realm-image-placeholder .ph-frame {
  position: absolute;
  inset: 36px;
  border: 1px dashed oklch(from var(--gold) l c h / 0.3);
}
.realm-image-placeholder .ph-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 32px;
}
.realm-image-placeholder .ph-mark {
  font-size: 36px;
  color: var(--gold);
  opacity: 0.7;
}
.realm-image-placeholder .ph-label {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.realm-image-placeholder .ph-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.realm-numeral-art {
  position: absolute;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.85;
  color: oklch(from var(--gold) l c h / 0.1);
  top: -40px;
  right: -20px;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0;
  z-index: -1;
}
.realm-section.flipped .realm-numeral-art {
  right: auto;
  left: -20px;
}

/* ---------- Chapter Outro ---------- */
.chapter-outro {
  padding: 120px 8%;
  text-align: center;
  position: relative;
  background: linear-gradient(180deg, var(--bg), var(--bg-deep));
}
.outro-rule {
  width: 1px;
  height: 80px;
  margin: 0 auto 40px;
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
}
.outro-quote {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto 32px;
  text-wrap: balance;
}
.outro-attr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 56px;
}
.outro-attr .line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.outro-attr .line:last-child {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}
.outro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Smaller adjustments for narrow screens */
@media (max-width: 700px) {
  .chapter-hero { padding: 160px 6% 80px; }
  .realm-section { padding: 80px 6%; }
  .map-stage { padding: 80px 6% 60px; }
  .realm-headline { flex-direction: column; gap: 16px; }
}


/* ========================================================== */
/* ============== PAGE: Chamado dos Aventureiros ============ */
/* ========================================================== */

.chamado-hero { padding-bottom: 80px; }

.chamado-body {
  position: relative;
  padding: 60px 8% 140px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.chamado-body::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

.chamado-form {
  max-width: 960px;
  margin: 0 auto;
}

/* ---------- Form Step ---------- */
.form-step {
  padding: 60px 0;
  border-bottom: 1px solid var(--line-soft);
}
.form-step:last-of-type { border-bottom: none; }

.step-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}
.step-roman {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: oklch(from var(--gold) l c h / 0.85);
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: radial-gradient(circle, oklch(from var(--ember) l c h / 0.1), transparent 70%);
  position: relative;
}
.step-roman::before,
.step-roman::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.step-roman::before { top: -6px; left: -6px; }
.step-roman::after { bottom: -6px; right: -6px; }

.step-kicker {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.step-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.step-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
@media (max-width: 700px) {
  .step-head { grid-template-columns: auto 1fr; gap: 18px; }
  .step-roman { width: 64px; height: 64px; font-size: 44px; }
  .step-rule { display: none; }
}

/* ---------- Field ---------- */
.step-fields {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.field {
  scroll-margin-top: 120px;
}
.field-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: baseline;
}
.field-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-weight: 500;
}
.field-num .of {
  color: var(--ink-3);
  margin-left: 6px;
}
.field-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.01em;
}
.field-hint {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 8px 0 0;
  max-width: 640px;
}

/* ---------- Text input ---------- */
.text-field {
  position: relative;
  margin-top: 8px;
}
.text-field input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-style: italic;
  color: var(--ink);
  padding: 14px 0 18px;
  letter-spacing: 0.01em;
}
.text-field input::placeholder { color: var(--ink-3); opacity: 0.7; }
.text-field-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.text-field-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s ease;
}
.text-field input:focus ~ .text-field-rule::after { width: 100%; }

/* ---------- Option Grid ---------- */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(var(--opt-cols, 2), 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .opt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .opt-grid { grid-template-columns: 1fr; } }

.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  background: oklch(from var(--surface) l c h / 0.4);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  user-select: none;
}
.opt:hover {
  border-color: oklch(from var(--gold) l c h / 0.4);
  background: oklch(from var(--surface) l c h / 0.7);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.checked {
  border-color: var(--gold);
  background: oklch(from var(--ember) l c h / 0.1);
  box-shadow: inset 0 0 30px oklch(from var(--ember) l c h / 0.08);
}
.opt.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.opt.disabled:hover {
  border-color: var(--line-soft);
  background: oklch(from var(--surface) l c h / 0.4);
}

.opt-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  position: relative;
  transition: all 0.25s;
}
.opt-radio .opt-mark { border-radius: 50%; }

.opt-mark .diamond,
.opt-mark .cross {
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
.opt-mark .diamond {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg) scale(0.4);
  border-radius: 50%;
}
.opt-mark .cross {
  width: 10px;
  height: 10px;
  position: relative;
  transform: scale(0.5);
}
.opt-mark .cross::before,
.opt-mark .cross::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 1px;
}
.opt-mark .cross::before { transform: rotate(45deg); }
.opt-mark .cross::after { transform: rotate(-45deg); }

.opt.checked .opt-mark {
  border-color: var(--gold);
  background: oklch(from var(--ember) l c h / 0.15);
  box-shadow: 0 0 12px oklch(from var(--gold) l c h / 0.4);
}
.opt.checked .opt-mark .diamond {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.opt.checked .opt-mark .cross {
  opacity: 1;
  transform: scale(1);
}

.opt-label {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.opt.checked .opt-label { color: var(--ink); }

.elem-opt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.elem-glyph {
  font-family: "Cinzel", serif;
  font-size: 18px;
  color: var(--gold);
  width: 18px;
  text-align: center;
}

/* ---------- Counter pill ---------- */
.opt-counter {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.counter-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.counter-pill strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--gold);
  font-weight: 500;
}

/* ---------- Consent ---------- */
.consent-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  padding: 36px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 80% at 0% 50%, oklch(from var(--ember) l c h / 0.07), transparent 70%),
    oklch(from var(--surface) l c h / 0.5);
  position: relative;
}
.consent-card::before,
.consent-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.consent-card::before { top: -8px; left: -8px; }
.consent-card::after { bottom: -8px; right: -8px; }

.consent-mark {
  font-family: "Cinzel", serif;
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
}
.consent-body h4 {
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 600;
}
.consent-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.consent-body li {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.consent-body li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
  font-size: 10px;
  top: 6px;
}
.consent-body em { color: var(--gold); font-style: italic; }

.consent-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  color: var(--ink-2);
  background: var(--bg-deep);
}
.consent-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.consent-toggle:hover { border-color: var(--gold-deep); }
.consent-toggle.checked {
  border-color: var(--gold);
  color: var(--ink);
  background: oklch(from var(--ember) l c h / 0.12);
}
.consent-toggle .opt-mark { width: 20px; height: 20px; }
.consent-toggle.checked .opt-mark {
  border-color: var(--gold);
  background: oklch(from var(--ember) l c h / 0.2);
  box-shadow: 0 0 14px oklch(from var(--gold) l c h / 0.5);
}
.consent-toggle.checked .opt-mark .cross { opacity: 1; transform: scale(1); }

@media (max-width: 700px) {
  .consent-card { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
  .consent-mark { font-size: 40px; }
}

/* ---------- Form error ---------- */
.form-error {
  margin: 48px 0 0;
  padding: 16px 22px;
  border: 1px solid oklch(from var(--ember) l 0.18 30);
  background: oklch(from var(--ember) l 0.12 35 / 0.18);
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  color: var(--ink);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 12px;
}
.form-error .dot {
  color: var(--ember);
  font-style: normal;
  font-size: 18px;
}

/* ---------- Submit ---------- */
.form-actions {
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap-reverse;
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
}
.btn-large {
  padding: 20px 36px !important;
  font-size: 13px !important;
  letter-spacing: 0.28em !important;
}
.form-foot {
  margin-top: 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: center;
}

/* ---------- Confirmation ---------- */
.chamado-confirm {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 0;
  animation: confirmIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes confirmIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.confirm-rule {
  width: 1px;
  height: 80px;
  margin: 0 auto 40px;
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
}
.confirm-seal {
  color: var(--gold);
  display: grid;
  place-items: center;
  margin: 0 auto 32px;
  filter: drop-shadow(0 0 30px var(--accent-glow));
  animation: sealSpin 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sealSpin {
  from { opacity: 0; transform: rotate(-90deg) scale(0.5); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
.confirm-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.confirm-eyebrow .line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.confirm-eyebrow .line:last-child {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}
.confirm-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0 0 28px;
  text-shadow: 0 0 60px oklch(from var(--ember) l c h / 0.4);
}
.confirm-body {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 auto 16px;
  max-width: 600px;
}
.confirm-body em { color: var(--gold); font-style: italic; }
.confirm-blessing {
  font-family: "UnifrakturMaguntia", "Cinzel", serif;
  font-size: 28px;
  color: var(--gold);
  margin: 24px 0 60px;
  letter-spacing: 0.04em;
}

.confirm-card {
  text-align: left;
  border: 1px solid var(--line);
  padding: 32px;
  background: oklch(from var(--surface) l c h / 0.4);
  margin: 0 0 60px;
  position: relative;
}
.confirm-card::before,
.confirm-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.confirm-card::before { top: -8px; left: -8px; }
.confirm-card::after { bottom: -8px; right: -8px; }

.confirm-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.confirm-card-head .dot { color: var(--ink-3); }

.confirm-summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.summary-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  padding-top: 3px;
}
.summary-row dd {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}

.confirm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}


/* ---------- Submit loading dots ---------- */
.btn[disabled] { opacity: 0.6; cursor: wait; }
.sending-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  align-items: center;
}
.sending-dots i {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: sendingDot 1.1s infinite ease-in-out;
}
.sending-dots i:nth-child(2) { animation-delay: 0.18s; }
.sending-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes sendingDot {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}


/* ========================================================== */
/* ============== PAGE: VI · Bestiário ===================== */
/* ========================================================== */

/* ---- Parchment tones ---- */
:root[data-parchment="sepia"] {
  --parch-1: oklch(0.92 0.05 78);
  --parch-2: oklch(0.86 0.06 72);
  --parch-3: oklch(0.78 0.07 65);
  --parch-edge: oklch(0.42 0.07 45);
  --ink-quill: oklch(0.30 0.08 40);
  --ink-quill-2: oklch(0.40 0.07 40);
  --ink-quill-3: oklch(0.52 0.06 45);
  --ink-flourish: oklch(0.40 0.13 35);
  --ink-rune: oklch(0.35 0.09 38);
  --binding-shadow: oklch(0.20 0.06 35 / 0.45);
}
:root[data-parchment="marfim"] {
  --parch-1: oklch(0.96 0.03 88);
  --parch-2: oklch(0.92 0.04 82);
  --parch-3: oklch(0.85 0.05 75);
  --parch-edge: oklch(0.55 0.06 60);
  --ink-quill: oklch(0.28 0.07 35);
  --ink-quill-2: oklch(0.38 0.06 35);
  --ink-quill-3: oklch(0.50 0.05 40);
  --ink-flourish: oklch(0.35 0.12 30);
  --ink-rune: oklch(0.30 0.08 35);
  --binding-shadow: oklch(0.30 0.05 40 / 0.35);
}
:root[data-parchment="couro"] {
  --parch-1: oklch(0.82 0.07 62);
  --parch-2: oklch(0.74 0.08 55);
  --parch-3: oklch(0.64 0.09 48);
  --parch-edge: oklch(0.32 0.08 40);
  --ink-quill: oklch(0.22 0.08 38);
  --ink-quill-2: oklch(0.30 0.07 38);
  --ink-quill-3: oklch(0.42 0.06 42);
  --ink-flourish: oklch(0.32 0.14 32);
  --ink-rune: oklch(0.26 0.09 35);
  --binding-shadow: oklch(0.12 0.05 30 / 0.55);
}

/* ---- Hero spacing on bestiary page ---- */
.bestiary-hero { padding-bottom: 60px; }

/* ---- Bestiary Index ---- */
.bestiary-index {
  padding: 40px 8% 60px;
  position: relative;
}
.bestiary-index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px 0 14px;
}
.bestiary-index-head .index-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bestiary-index-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 1100px) { .bestiary-index-grid { grid-template-columns: repeat(2, 1fr); } }
.bestiary-index-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 22px 22px 22px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  transition: all 0.4s ease;
  position: relative;
}
.bestiary-index-card:nth-child(5n) { border-right: none; }
@media (max-width: 1100px) {
  .bestiary-index-card { border-right: 1px solid var(--line-soft); }
  .bestiary-index-card:nth-child(5n) { border-right: 1px solid var(--line-soft); }
  .bestiary-index-card:nth-child(2n) { border-right: none; }
}
.bestiary-index-card:hover { color: var(--ink); background: oklch(from var(--ember) l c h / 0.05); }
.bestiary-index-card .idx-num {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gold);
}
.bestiary-index-card .idx-name {
  font-family: "Cinzel", serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.bestiary-index-card .idx-epithet {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
}

/* ---- Book container ---- */
.bestiary-book {
  position: relative;
  padding: 80px 4% 120px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, oklch(from var(--ember) l c h / 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.book-margin-tag {
  position: sticky;
  top: 90px;
  margin: 0 0 20px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  z-index: 1;
}

/* ---- Spread ---- */
.bestiary-spread {
  max-width: 1480px;
  margin: 0 auto 80px;
  position: relative;
}
.bestiary-spread:last-child { margin-bottom: 0; }

.spread-folio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 18px 0;
}
.spread-folio .of {
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
}

/* ---- Pages container (two pages side by side) ---- */
.spread-pages {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    linear-gradient(90deg,
      var(--parch-2) 0%,
      var(--parch-1) 8%,
      var(--parch-1) 48%,
      var(--parch-3) 50%,
      var(--parch-1) 52%,
      var(--parch-1) 92%,
      var(--parch-2) 100%);
  border-radius: 4px;
  box-shadow:
    0 50px 100px rgba(0,0,0,0.55),
    0 0 0 1px oklch(from var(--parch-edge) l c h / 0.4),
    0 0 0 8px oklch(from var(--bg-deep) l c h / 0.6),
    0 0 0 9px oklch(from var(--gold-deep) l c h / 0.25),
    inset 0 0 120px oklch(from var(--parch-edge) l c h / 0.25);
  overflow: hidden;
  min-height: 920px;
}

/* Subtle paper texture overlay over the whole spread */
.spread-pages::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 0 0.05  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
}

/* Folds toggle */
:root[data-folds="on"] .spread-pages::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* horizontal old fold */
    linear-gradient(180deg,
      transparent calc(50% - 1px),
      oklch(from var(--parch-edge) l c h / 0.18) 50%,
      transparent calc(50% + 1px)),
    /* faint diagonal grain */
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      oklch(from var(--parch-edge) l c h / 0.03) 14px 15px);
}

/* Binding shadow in the middle */
.spread-binding {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--binding-shadow) 35%,
      var(--binding-shadow) 50%,
      var(--binding-shadow) 65%,
      transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ---- Page (one side) ---- */
.page {
  position: relative;
  padding: 56px 60px 64px;
  color: var(--ink-quill);
  font-family: "IM Fell English SC", "Cormorant Garamond", serif;
  font-size: 15px;
  line-height: 1.55;
  z-index: 1;
}
.page-left { padding-right: 80px; }
.page-right { padding-left: 80px; }

/* Aging — dark corners on each page */
.page-aging {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 30% at 0% 0%, oklch(from var(--parch-edge) l c h / 0.35), transparent 60%),
    radial-gradient(ellipse 30% 30% at 100% 100%, oklch(from var(--parch-edge) l c h / 0.30), transparent 60%),
    radial-gradient(ellipse 25% 25% at 100% 0%, oklch(from var(--parch-edge) l c h / 0.22), transparent 60%),
    radial-gradient(ellipse 25% 25% at 0% 100%, oklch(from var(--parch-edge) l c h / 0.25), transparent 60%);
}
.page-left .page-aging {
  background:
    radial-gradient(ellipse 30% 30% at 0% 0%, oklch(from var(--parch-edge) l c h / 0.45), transparent 60%),
    radial-gradient(ellipse 24% 30% at 0% 100%, oklch(from var(--parch-edge) l c h / 0.35), transparent 60%),
    radial-gradient(ellipse 18% 60% at 0% 50%, oklch(from var(--parch-edge) l c h / 0.2), transparent 70%);
}
.page-right .page-aging {
  background:
    radial-gradient(ellipse 30% 30% at 100% 0%, oklch(from var(--parch-edge) l c h / 0.45), transparent 60%),
    radial-gradient(ellipse 24% 30% at 100% 100%, oklch(from var(--parch-edge) l c h / 0.35), transparent 60%),
    radial-gradient(ellipse 18% 60% at 100% 50%, oklch(from var(--parch-edge) l c h / 0.2), transparent 70%);
}

/* Corner ornaments */
.page-corners .corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid oklch(from var(--ink-quill) l c h / 0.4);
  pointer-events: none;
}
.page-corners .tl { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.page-corners .tr { top: 22px; right: 22px; border-left: none; border-bottom: none; }
.page-corners .bl { bottom: 22px; left: 22px; border-right: none; border-top: none; }
.page-corners .br { bottom: 22px; right: 22px; border-left: none; border-top: none; }

/* ---- Creature head (left page) ---- */
.creature-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  margin-bottom: 16px;
}
.creature-name {
  font-family: "Tangerine", "Pinyon Script", cursive;
  font-weight: 700;
  font-size: clamp(60px, 6vw, 96px);
  line-height: 0.85;
  letter-spacing: 0;
  margin: 0;
  color: var(--ink-flourish);
  text-shadow: 0 1px 0 oklch(from var(--parch-1) l c h / 0.4);
}
.creature-meta {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-quill-2);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meta-row { display: flex; flex-direction: column; align-items: flex-end; }
.meta-runes {
  font-family: "UnifrakturMaguntia", "Cinzel", serif;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: var(--ink-rune);
  line-height: 1;
}
:root[data-runes="off"] .meta-runes { display: none; }
.runes-dwarvish {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.18em;
}
.meta-lat {
  font-family: "IM Fell English SC", serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-quill-3);
  text-transform: uppercase;
  margin-top: 2px;
}

.creature-class {
  font-family: "IM Fell English SC", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-quill-3);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid oklch(from var(--ink-quill) l c h / 0.25);
  position: relative;
}
.creature-class::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 5px; height: 5px;
  border: 1px solid oklch(from var(--ink-quill) l c h / 0.5);
  background: var(--parch-1);
  transform: translateX(-50%) rotate(45deg);
}

.creature-intro {
  font-family: "IM Fell English SC", serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--ink-quill);
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.creature-intro span:first-of-type::first-letter {
  font-family: "Tangerine", "Pinyon Script", cursive;
  font-size: 3.6em;
  float: left;
  line-height: 0.85;
  padding: 0 8px 0 0;
  color: var(--ink-flourish);
  font-weight: 700;
}

/* ---- Figure slots (left page bottom) ---- */
.creature-figures {
  display: grid;
  gap: 28px;
  align-items: end;
}
.creature-figures.fig-count-1 { grid-template-columns: 1fr; }
.creature-figures.fig-count-2 { grid-template-columns: 1fr 1fr; }

.figure-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.figure-caption {
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-size: 36px;
  color: var(--ink-flourish);
  line-height: 1;
}

/* ---- Scene plate (replaces figure slots when an illustration is provided) ---- */
.creature-scene {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.creature-scene-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid oklch(from var(--ink-quill) l c h / 0.55);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.45),
    inset 0 0 0 6px oklch(from var(--parch-1) l c h / 0.95),
    inset 0 0 0 7px oklch(from var(--ink-quill) l c h / 0.35);
  background: var(--parch-2);
}
.creature-scene-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Tint slightly toward parchment so the modern AI art feels "of" the book */
  filter: saturate(0.88) contrast(1.02) sepia(0.08);
}
.creature-scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* darken corners like aged paper */
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, oklch(from var(--parch-edge) l c h / 0.45) 100%),
    /* faint paper grain over the image */
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      oklch(from var(--parch-edge) l c h / 0.05) 14px 15px);
  mix-blend-mode: multiply;
}
.creature-scene-caption {
  font-family: "Cormorant Garamond", "IM Fell English", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-quill-2);
  letter-spacing: 0.02em;
  margin: 0;
  text-align: center;
  padding: 0 12px;
}

/* ---- Right page: anatomy layout ---- */
.anatomy-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 22px 28px;
  height: 100%;
}

.anatomy-main {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.anatomy-main .top-note {
  align-self: flex-start;
  text-align: left;
  max-width: 240px;
}
.anatomy-main .art-slot { width: 100%; aspect-ratio: 1 / 1; }

.anatomy-detail {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.anatomy-detail .art-slot { width: 70%; aspect-ratio: 1.4 / 1; }
.anatomy-detail .hand-note { text-align: right; max-width: 200px; }

.anatomy-sample {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.anatomy-sample .art-slot { width: 64px; height: 110px; }
.anatomy-sample .hand-note { font-size: 14px; }

.anatomy-main-note {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  max-width: 320px;
}

.anatomy-sub {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.anatomy-sub .art-slot { width: 90px; height: 130px; }
.anatomy-sub .hand-note { text-align: right; }
.anatomy-sub .dim { color: var(--ink-quill-3); }

.anatomy-variants {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed oklch(from var(--ink-quill) l c h / 0.3);
}
.variants-intro { font-size: 14px; }
.variants-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.variant { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.variant .art-slot { width: 100%; aspect-ratio: 3 / 4; }

/* ---- Hand-written notes ---- */
.hand-note {
  font-family: "Cormorant Garamond", "IM Fell English", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink-quill-2);
  letter-spacing: 0.01em;
  display: inline-block;
}
.hand-note.small { font-size: 13px; }
.hand-note.tiny  { font-size: 12px; text-align: center; }

/* ---- Art slot (image placeholder) ---- */
.art-slot {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, oklch(from var(--parch-3) l c h / 0.5), transparent 70%),
    var(--parch-2);
  border: 1px dashed oklch(from var(--ink-quill) l c h / 0.45);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.art-slot-pattern {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 10px,
      oklch(from var(--ink-quill) l c h / 0.04) 10px 11px);
  pointer-events: none;
}
.art-slot-frame {
  position: absolute;
  inset: 6px;
  border: 1px solid oklch(from var(--ink-quill) l c h / 0.18);
  pointer-events: none;
}
.art-slot-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
}
.art-slot-mark {
  font-size: 22px;
  color: oklch(from var(--ink-quill) l c h / 0.45);
}
.art-slot-drop {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(from var(--ink-quill) l c h / 0.5);
}
.art-slot-label {
  position: absolute;
  bottom: 6px; right: 8px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 11px;
  color: oklch(from var(--ink-quill) l c h / 0.55);
}
.art-slot-tall { aspect-ratio: 3 / 5; width: 100%; }
.art-slot-wide { aspect-ratio: 5 / 3; width: 100%; }
.art-slot-square { aspect-ratio: 1 / 1; width: 100%; }
.art-slot-mini { aspect-ratio: 1.6 / 1; width: 100%; }
.art-slot-thumb { aspect-ratio: 3 / 4; width: 100%; }
.art-slot-bottle { aspect-ratio: 0.55 / 1; }
.art-slot-tag { aspect-ratio: 0.7 / 1; }

/* ---- Art slot with real image ---- */
.art-slot.has-image {
  background:
    radial-gradient(120% 90% at 30% 25%, oklch(from var(--parch-3) l c h / 0.5), transparent 60%),
    var(--parch-2);
}
.art-slot.has-image .art-slot-img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04) sepia(0.06);
  display: block;
}
.art-slot.has-image .art-slot-frame {
  inset: 6px;
  border: 1px solid oklch(from var(--ink-quill) l c h / 0.28);
  box-shadow:
    inset 0 0 0 1px oklch(from var(--parch-1) l c h / 0.55),
    inset 0 0 26px oklch(from var(--ink-quill) l c h / 0.18);
  pointer-events: none;
}
.art-slot.has-image .art-slot-label {
  background: oklch(from var(--parch-1) l c h / 0.85);
  padding: 1px 6px;
  border: 1px solid oklch(from var(--ink-quill) l c h / 0.25);
}

/* ---- "Em Construção" diagonal banner across each spread ---- */
.spread-construction {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}
.spread-construction-text {
  /* Stripe geometry — calc'd to clear corner-to-corner on the 1480×920 spread */
  display: block;
  width: 180%;
  text-align: center;
  transform: rotate(-32deg);
  padding: 22px 0;
  background:
    repeating-linear-gradient(
      90deg,
      oklch(from var(--gold) l c h / 0.92) 0 22px,
      oklch(from var(--gold-deep) l c h / 0.92) 22px 44px
    );
  color: oklch(0.14 0.03 35);
  font-family: var(--font-display, "Cinzel"), serif;
  font-weight: 800;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 64px);
  text-shadow: 0 1px 0 oklch(from var(--gold) calc(l + 0.12) c h / 0.6);
  box-shadow:
    0 2px 0 oklch(0 0 0 / 0.18),
    0 -2px 0 oklch(0 0 0 / 0.18),
    0 24px 60px oklch(0 0 0 / 0.45);
  border-top: 1px solid oklch(from var(--gold-deep) l c h / 0.7);
  border-bottom: 1px solid oklch(from var(--gold-deep) l c h / 0.7);
}

@media (max-width: 1000px) {
  .spread-construction-text {
    transform: rotate(-58deg);
    font-size: clamp(26px, 7vw, 40px);
    letter-spacing: 0.3em;
    padding: 16px 0;
  }
}

/* ---- Mobile: stack pages ---- */
@media (max-width: 1000px) {
  .spread-pages {
    grid-template-columns: 1fr;
    min-height: 0;
    background: var(--parch-1);
  }
  .spread-binding { display: none; }
  .page { padding: 40px 28px; }
  .page-left, .page-right { padding-left: 28px; padding-right: 28px; }
  .creature-name { font-size: 64px; }
  .creature-head { grid-template-columns: 1fr; }
  .creature-meta { text-align: left; padding-top: 8px; }
  .meta-row { align-items: flex-start; }
  .anatomy-layout { grid-template-columns: 1fr; }
  .anatomy-main, .anatomy-detail, .anatomy-sample, .anatomy-main-note, .anatomy-sub, .anatomy-variants {
    grid-column: auto; grid-row: auto;
  }
  .anatomy-detail, .anatomy-sub { align-items: flex-start; }
  .anatomy-detail .hand-note, .anatomy-sub .hand-note { text-align: left; }
  .variants-row { grid-template-columns: repeat(2, 1fr); }
  .bestiary-book { padding: 50px 4% 80px; }
}

/* ---- Outro tweak ---- */
.bestiary-outro {
  background: linear-gradient(180deg, var(--bg-deep), var(--bg));
}


/* ========================================================== */
/* ============== Bestiário · Stacked spreads ================ */
/* ========================================================== */

/* Carousel viewport — one spread visible at a time, slides L/R */
.book-viewport {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  overflow: hidden;
}
.book-track {
  display: flex;
  width: 100%;
  /* Smooth ease-out so the page glides into place */
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.book-slide {
  flex: 0 0 100%;
  min-width: 0;
  /* Tiny inner padding so the spread's box-shadow isn't clipped */
  padding: 4px 8px;
}

.bestiary-book .bestiary-spread {
  margin: 0 auto;
  max-width: 100%;
}
.bestiary-book .book-slide .bestiary-spread { margin-bottom: 0; }

/* Folio header — keep name on the right side aligned */
.spread-folio { gap: 22px; }
.spread-folio > span:last-child {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ink-2);
  text-transform: uppercase;
}

/* sticky margin tag adjustment */
.bestiary-book .book-margin-tag {
  position: static;
  margin: 0 0 28px;
}

/* ---- Floating side arrow rails (do not overlap the pages) ----
   The book max-width is 1480px. Center one rail in the gap between
   the page edge and the viewport edge on each side. */
.folio-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  pointer-events: none;
  /* gap between book edge and viewport edge */
  width: max(48px, calc((100vw - 1480px) / 2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.folio-rail-left  { left: 0; }
.folio-rail-right { right: 0; }

.folio-arrow {
  pointer-events: auto;
  appearance: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: oklch(from var(--bg-deep) l c h / 0.78);
  border: 1px solid oklch(from var(--gold) l c h / 0.35);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.45),
    inset 0 0 0 1px oklch(from var(--gold) l c h / 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.folio-arrow:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow:
    0 8px 30px oklch(from var(--ember) l c h / 0.45),
    inset 0 0 0 1px oklch(from var(--gold) l c h / 0.2);
  transform: scale(1.08);
}
.folio-arrow:active:not(:disabled) { transform: scale(0.96); }
.folio-arrow:disabled { opacity: 0.25; cursor: default; }

.folio-arrow-glyph {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  margin-top: -3px;
}

/* Tight viewports: tuck arrows close to viewport edge but don't overlap pages
   (the .bestiary-book itself has 4% horizontal padding, so there's room) */
@media (max-width: 1560px) {
  .folio-rail { width: 60px; }
}
@media (max-width: 1000px) {
  .folio-rail { width: 44px; }
  .folio-arrow { width: 38px; height: 38px; }
  .folio-arrow-glyph { font-size: 22px; }
}


/* ========================================================== */
/* ============== Livros / Biblioteca ======================= */
/* ========================================================== */

.biblioteca-hero {
  min-height: 80vh;
  padding-top: 180px;
  padding-bottom: 120px;
}

/* ---------- Reading order ---------- */
.biblioteca-order {
  padding: 100px 6%;
  max-width: 1480px;
  margin: 0 auto;
}
.biblioteca-order-head {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 40px;
  align-items: end;
  margin: 32px 0 48px;
}
.biblioteca-section-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 14px 0 0;
  color: var(--ink);
}
.biblioteca-section-title .em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.biblioteca-order-lede {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 16px 0 0;
  max-width: 640px;
}
.order-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  background: oklch(from var(--bg-deep) l c h / 0.6);
  border-radius: 2px;
  padding: 4px;
  align-self: end;
}
.order-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.order-toggle-btn:hover { color: var(--ink); }
.order-toggle-btn.active {
  background: oklch(from var(--ember) l c h / 0.12);
  border: 1px solid oklch(from var(--gold) l c h / 0.45);
  color: var(--gold);
  margin: -1px;
}

.order-timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr) ;
  gap: 12px;
  align-items: stretch;
}
.order-step {
  position: relative;
  display: flex;
  align-items: stretch;
}
.order-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line);
  border-radius: 2px;
  width: 100%;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.order-step-card:hover {
  border-color: oklch(from var(--gold) l c h / 0.5);
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.order-step-cover {
  width: 110px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid oklch(from var(--gold) l c h / 0.25);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  margin-bottom: 18px;
  background: var(--bg-deep);
}
.order-step-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.order-step-body {
  display: flex; flex-direction: column; gap: 4px;
}
.order-step-num {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.order-step-vol {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.order-step-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin-top: 4px;
  line-height: 1.2;
}
.order-step-when {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 6px;
}
.order-step-arrow {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  color: var(--gold);
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 0 12px oklch(from var(--ember) l c h / 0.55);
}

@media (max-width: 1100px) {
  .biblioteca-order-head { grid-template-columns: 1fr; align-items: start; }
  .order-timeline { grid-template-columns: repeat(2, 1fr); }
  .order-step-arrow:nth-of-type(2n) { display: none; }
}
@media (max-width: 600px) {
  .order-timeline { grid-template-columns: 1fr; }
  .order-step-arrow {
    right: 50%; top: auto; bottom: -20px; transform: translateX(50%) rotate(90deg);
  }
}

/* ---------- Spreads ---------- */
.biblioteca-spreads {
  padding: 60px 6% 100px;
  display: flex;
  flex-direction: column;
  gap: 120px;
  max-width: 1480px;
  margin: 0 auto;
}

.book-spread {
  position: relative;
  scroll-margin-top: 90px;
}
.book-spread-folio {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.folio-num {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--gold);
}
.folio-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.folio-vol {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.book-spread-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: start;
}
.book-spread.flipped .book-spread-grid {
  grid-template-columns: 1fr 380px;
}
.book-spread.flipped .book-spread-cover-col { order: 2; }
.book-spread.flipped .book-spread-body      { order: 1; }

/* Cover column */
.book-spread-cover-col {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.book-spread-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid oklch(from var(--gold) l c h / 0.35);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 1px oklch(from var(--gold) l c h / 0.18),
    inset 0 0 0 1px oklch(from var(--gold) l c h / 0.15);
  background: var(--bg-deep);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}
.book-spread-cover:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 60px 110px rgba(0,0,0,0.7),
    0 0 70px oklch(from var(--ember) l c h / 0.35),
    inset 0 0 0 1px oklch(from var(--gold) l c h / 0.25);
}
.book-spread-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.book-spread-cover-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, oklch(from var(--gold) l c h / 0.2), transparent 40%, transparent 60%, oklch(from var(--ember) l c h / 0.15));
  opacity: 0; transition: opacity 0.6s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.book-spread-cover:hover .book-spread-cover-shine { opacity: 1; }

/* Library catalogue card (ficha) */
.ficha {
  background:
    linear-gradient(180deg,
      oklch(from var(--surface) l c h / 0.95),
      oklch(from var(--bg-deep) l c h / 0.85));
  border: 1px solid var(--line);
  padding: 22px 22px 24px;
  position: relative;
}
.ficha::before {
  /* punched hole top-left, like a real library card */
  content: "";
  position: absolute;
  top: -7px; left: 16px;
  width: 14px; height: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.ficha-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed oklch(from var(--gold) l c h / 0.3);
}
.ficha-stamp {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.ficha-cota {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.ficha-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ficha-list > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px dotted oklch(from var(--ink-3) l c h / 0.25);
  padding-bottom: 6px;
}
.ficha-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha-list dt {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ficha-list dd {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.ficha-price {
  margin: 18px 0 18px;
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background:
    linear-gradient(180deg,
      oklch(from var(--ember) l c h / 0.12),
      oklch(from var(--ember) l c h / 0.04));
  border: 1px solid oklch(from var(--gold) l c h / 0.45);
  border-radius: 2px;
}
.ficha-price-label {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ficha-price-value {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 1px 0 oklch(from var(--bg-deep) l c h / 0.6);
}
.ficha-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  padding: 14px 18px;
  background: linear-gradient(180deg, oklch(from var(--ember) l c h / 0.35), oklch(from var(--ember) l c h / 0.18));
  border: 1px solid oklch(from var(--gold) l c h / 0.55);
  color: var(--ink);
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.ficha-cta:hover {
  background: linear-gradient(180deg, oklch(from var(--ember) l c h / 0.5), oklch(from var(--ember) l c h / 0.28));
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 10px 30px oklch(from var(--ember) l c h / 0.35);
}
.ficha-cta svg { width: 14px; height: 14px; }

/* Body */
.book-spread-body {
  padding-top: 4px;
}
.book-spread-head {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.book-spread-eyebrow {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.book-spread-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(38px, 3.6vw, 58px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 14px 0 8px;
  text-shadow: 0 2px 30px oklch(from var(--ember) l c h / 0.2);
}
.book-spread-epithet {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-style: italic;
  color: var(--gold);
  margin: 0;
}
.book-spread-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.book-theme {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: oklch(from var(--bg-deep) l c h / 0.6);
}

.book-spread-prose {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}
.book-para { margin: 0 0 18px; }
:root[data-dropcap="on"] .book-para.has-dropcap::first-letter {
  font-family: "Tangerine", "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  padding: 4px 14px 0 0;
  color: var(--gold);
  text-shadow: 0 2px 20px oklch(from var(--ember) l c h / 0.4);
}

.book-spread-pull {
  margin: 32px 0 0;
  padding: 28px 36px;
  position: relative;
  background:
    linear-gradient(180deg,
      oklch(from var(--ember) l c h / 0.06),
      oklch(from var(--ember) l c h / 0.02));
  border-left: 2px solid oklch(from var(--gold) l c h / 0.5);
  border-right: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.book-spread-pull p {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.book-pull-mark {
  position: absolute;
  top: -22px; left: 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: 110px;
  line-height: 1;
  color: oklch(from var(--gold) l c h / 0.45);
}
.book-pull-source {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 1100px) {
  .book-spread-grid {
    grid-template-columns: 280px 1fr;
    gap: 40px;
  }
  .book-spread.flipped .book-spread-grid { grid-template-columns: 1fr 280px; }
}
@media (max-width: 800px) {
  .book-spread-grid,
  .book-spread.flipped .book-spread-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .book-spread.flipped .book-spread-cover-col { order: 0; }
  .book-spread.flipped .book-spread-body      { order: 0; }
  .book-spread-cover-col { position: static; max-width: 320px; margin: 0 auto; }
}

/* ---------- Coda ---------- */
.biblioteca-coda {
  padding: 100px 6% 140px;
  background: linear-gradient(180deg, var(--bg), var(--bg-deep));
  border-top: 1px solid var(--line-soft);
}
.biblioteca-coda-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.biblioteca-coda-covers {
  position: relative;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}
.biblioteca-coda-covers img {
  position: absolute;
  width: 200px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid oklch(from var(--gold) l c h / 0.4);
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
  transition: transform 0.6s ease;
}
.biblioteca-coda-covers img:nth-child(1) { left: calc(50% - 230px); }
.biblioteca-coda-covers img:nth-child(2) { left: calc(50% - 100px); }
.biblioteca-coda-covers img:nth-child(3) { left: calc(50% + 30px); }
.biblioteca-coda-covers img:nth-child(4) { left: calc(50% + 160px); }
.biblioteca-coda-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.1;
  margin: 14px 0 20px;
  color: var(--ink);
}
.biblioteca-coda-title .em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.biblioteca-coda-lede {
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
}
.biblioteca-coda-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
}

@media (max-width: 900px) {
  .biblioteca-coda-inner { grid-template-columns: 1fr; }
  .biblioteca-coda-covers { height: 280px; }
  .biblioteca-coda-covers img {
    width: 140px;
  }
  .biblioteca-coda-covers img:nth-child(1) { left: calc(50% - 160px); }
  .biblioteca-coda-covers img:nth-child(2) { left: calc(50% - 70px); }
  .biblioteca-coda-covers img:nth-child(3) { left: calc(50% + 20px); }
  .biblioteca-coda-covers img:nth-child(4) { left: calc(50% + 110px); }
}