:root {
  --night: #0e211a;
  --night-deep: #0a1a14;
  --forest: #1b3a2d;
  --forest-mid: #24493a;
  --parchment: #f2e8d5;
  --parchment-light: #f7efdd;
  --parchment-warm: #ecdfc4;
  --gold: #d99e2b;
  --gold-bright: #e8b03c;
  --gold-glow: #f0c05a;
  --gold-ember: #ffe9a8;
  --gold-deep: #b57f1a;
  --berry: #8f3325;
  --berry-bright: #a8442f;
  --berry-deep: #6e2417;
  --ink: #1b3a2d;
  --ink-soft: #5a4a30;
  --ink-faint: #8a7752;
  --field-line: #9c8a66;
  --content: 1100px;
  --serif: "IM Fell English", Georgia, serif;
  --caps: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --display: "Cinzel Decorative", "Times New Roman", serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Candlelit vignette over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  box-shadow: inset 0 0 190px rgba(4, 10, 7, 0.55);
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--gold);
}

a:hover {
  color: var(--gold-glow);
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

input:focus,
select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.section-inner,
.hero-inner,
.enlist-inner,
.orders,
.pack,
.time-band,
.faq {
  max-width: var(--content);
  margin: 0 auto;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--caps);
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}

.btn-gold {
  font-size: 19px;
  padding: 15px 32px;
  color: #2b1e08;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  border: 1px solid var(--gold-deep);
  box-shadow: 0 0 24px rgba(217, 158, 43, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.6);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.btn-gold:hover {
  color: #2b1e08;
  box-shadow: 0 0 34px rgba(240, 192, 90, 0.55), inset 0 1px 0 rgba(255, 240, 200, 0.7);
  transform: translateY(-1px);
}

.btn-forest {
  width: 100%;
  font-size: 19px;
  padding: 15px 20px;
  color: var(--parchment);
  background: linear-gradient(180deg, var(--forest-mid) 0%, var(--forest) 100%);
  border: 1px solid var(--gold);
  transition: box-shadow 180ms ease;
}

.btn-forest:hover {
  color: var(--parchment);
  box-shadow: 0 0 18px rgba(217, 158, 43, 0.35);
}

.btn-forest:disabled {
  cursor: wait;
  opacity: 0.6;
}

.btn-forest svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--parchment);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

/* ─── Lantern marks ─── */
.lantern-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 38px;
  border: 1.5px solid var(--gold);
  border-radius: 6px 6px 10px 10px;
}

.lantern-mark::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 4px;
  margin-left: -5px;
  border: 1.5px solid var(--gold);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.lantern-flame {
  width: 8px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-ember) 0%, var(--gold) 70%);
  box-shadow: 0 0 12px 4px rgba(240, 192, 90, 0.55);
  animation: dl-flicker 3s ease-in-out infinite;
}

.lantern-mark-sm {
  width: 26px;
  height: 34px;
  border-color: rgba(217, 158, 43, 0.6);
  border-radius: 5px 5px 9px 9px;
}

.lantern-mark-sm::before {
  display: none;
}

.lantern-mark-sm .lantern-flame {
  width: 7px;
  height: 10px;
  box-shadow: 0 0 10px 3px rgba(240, 192, 90, 0.4);
  animation-duration: 4s;
}

/* ─── Header ─── */
.site-header {
  background: var(--night);
  border-bottom: 1px solid rgba(217, 158, 43, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--content);
  margin: 0 auto;
  padding: 18px 32px;
}

.site-name {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 17px;
  color: var(--parchment);
  letter-spacing: 0.04em;
}

.site-name b {
  color: var(--gold);
  font-weight: 700;
}

.site-header nav {
  display: flex;
  gap: 28px;
  font-family: var(--caps);
  font-size: 16px;
}

.site-header nav a {
  color: var(--parchment);
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a.nav-cta {
  color: var(--gold);
}

/* ─── Shared eyebrow ─── */
.eyebrow {
  font-family: var(--caps);
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}

/* Ornament flourish beneath section headings */
.orders-heading h2::after,
.pack-copy h2::after,
.faq-heading h2::after,
.access h2::after,
.enlist-intro h2::after {
  content: "— ✦ —";
  display: block;
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 10px;
}

.orders-heading h2::after,
.faq-heading h2::after {
  color: var(--gold-deep);
}

.access h2::after,
.enlist-intro h2::after {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(240, 192, 90, 0.4);
}

.pack-copy h2::after {
  color: var(--berry);
}

/* ─── Hero ─── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--night) url("/assets/flint_scene.gif") center / cover no-repeat;
  image-rendering: pixelated;
}

/* Dusk overlay so the quest text stays legible */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 33, 26, 0.6) 0%, transparent 25%, transparent 68%, var(--night) 100%),
    linear-gradient(100deg, rgba(10, 26, 20, 0.85) 0%, rgba(10, 26, 20, 0.6) 45%, rgba(10, 26, 20, 0.28) 100%);
  pointer-events: none;
}

/* Twinkling starfield (shared with the enlist section) */
.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.starfield::before,
.starfield::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fdf3d0;
}

.starfield::before {
  box-shadow: 40px 30px, 180px 90px, 320px 40px, 460px 120px, 590px 60px,
    700px 150px, 830px 50px, 950px 110px, 1060px 40px, 1180px 90px,
    1280px 160px, 90px 200px, 250px 260px, 410px 210px, 560px 300px,
    720px 240px, 880px 320px, 1020px 260px, 1160px 330px, 1320px 260px,
    160px 360px, 360px 420px, 640px 400px, 940px 430px, 1240px 420px,
    500px 160px, 780px 180px, 1100px 200px, 220px 140px, 1340px 60px;
  animation: dl-twinkle 3.6s ease-in-out infinite;
}

.starfield::after {
  width: 3px;
  height: 3px;
  background: var(--gold-ember);
  box-shadow: 120px 60px, 380px 100px, 660px 90px, 900px 60px, 1140px 140px,
    300px 330px, 600px 230px, 860px 380px, 1120px 300px, 180px 300px,
    480px 370px, 760px 340px, 1040px 180px, 1300px 340px, 40px 120px;
  animation: dl-twinkle 5.2s ease-in-out 1.4s infinite;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: center;
  padding: 90px 32px 100px;
}

.hero h1 {
  font-size: clamp(40px, 5.6vw, 58px);
  line-height: 1.12;
  color: var(--parchment);
  margin-bottom: 26px;
  text-shadow: 0 0 32px rgba(240, 192, 90, 0.28), 0 2px 0 rgba(4, 10, 7, 0.6);
}

.hero .eyebrow {
  font-size: 17px;
  margin-bottom: 20px;
}

.lead {
  font-size: 20px;
  line-height: 1.6;
  color: rgba(242, 232, 213, 0.85);
  max-width: 46ch;
  margin-bottom: 34px;
}

/* Illuminated initial, as in a storybook */
.lead::first-letter {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3.1em;
  line-height: 0.78;
  float: left;
  padding: 8px 12px 0 0;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(240, 192, 90, 0.45);
}

.fact-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(217, 158, 43, 0.3);
  border-bottom: 1px solid rgba(217, 158, 43, 0.3);
  margin: 0 0 36px;
}

.fact-band div {
  padding: 16px 20px;
}

.fact-band div:not(:last-child) {
  border-right: 1px solid rgba(217, 158, 43, 0.3);
}

.fact-band div:first-child {
  padding-left: 0;
}

.fact-band div:last-child {
  padding-right: 0;
}

.fact-band dt {
  font-family: var(--caps);
  font-size: 18px;
  color: var(--gold);
}

.fact-band dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-style: italic;
  color: rgba(242, 232, 213, 0.6);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-note {
  font-size: 14px;
  font-style: italic;
  color: rgba(242, 232, 213, 0.55);
  max-width: 26ch;
  line-height: 1.5;
}

.date-note {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 24px;
  padding: 9px 16px;
  border: 1px dashed rgba(217, 158, 43, 0.45);
  border-radius: 3px;
  background: rgba(217, 158, 43, 0.07);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(242, 232, 213, 0.7);
}

.date-note::before {
  content: "✦";
  font-style: normal;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(240, 192, 90, 0.5);
}

/* Illuminated plaque */
.plaque-wrap {
  justify-self: center;
  animation: dl-float 7s ease-in-out infinite;
}

.plaque {
  position: relative;
  width: 300px;
  padding: 14px;
  background: var(--parchment);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(217, 158, 43, 0.2);
  transform: rotate(2.5deg);
}

.plaque-frame {
  border: 2px solid var(--berry);
  padding: 6px;
}

.plaque-face {
  position: relative;
  border: 1px solid var(--gold);
  padding: 34px 24px;
  text-align: center;
  background-image: var(--grain), radial-gradient(circle at 50% 30%, var(--parchment-light) 0%, var(--parchment-warm) 100%);
}

.corner {
  position: absolute;
  color: var(--berry);
  font-size: 14px;
  line-height: 1;
}

.corner-tl { top: 4px; left: 4px; }
.corner-tr { top: 4px; right: 4px; transform: scaleX(-1); }
.corner-bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.corner-br { bottom: 4px; right: 4px; transform: scale(-1); }

.plaque-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.25;
  color: var(--forest);
}

.plaque-place {
  font-family: var(--caps);
  font-size: 20px;
  color: var(--berry);
  margin-top: 10px;
  letter-spacing: 0.2em;
}

.plaque-rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 16px auto;
}

.plaque-tagline {
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}

.wax-seal {
  position: absolute;
  right: -26px;
  bottom: -20px;
  width: 74px;
  height: 74px;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, var(--berry-bright) 0%, var(--berry) 55%, var(--berry-deep) 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 0 0 5px rgba(110, 36, 23, 0.5),
    inset 0 0 0 6px rgba(242, 232, 213, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  color: var(--parchment);
}

.wax-day {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

.wax-month {
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: 0.1em;
}

/* ─── Lantern particles ─── */
.lantern-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lantern-particle {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-ember) 0%, rgba(217, 158, 43, 0.6) 60%, transparent 100%);
  box-shadow: 0 0 var(--halo) var(--size) rgba(240, 192, 90, 0.25);
  animation: dl-drift var(--dur) ease-in-out var(--delay) infinite;
  opacity: 0;
}

/* ─── Three orders ─── */
.orders {
  position: relative;
  background-image: var(--grain), linear-gradient(180deg, var(--parchment-warm) 0%, var(--parchment) 12%, var(--parchment) 100%);
  color: var(--ink);
  padding: 90px 32px 100px;
}

.orders-heading {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 56px;
}

.orders-heading h2 {
  font-size: clamp(32px, 4.2vw, 42px);
  line-height: 1.2;
  color: var(--ink);
}

.orders-heading p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  font-style: italic;
}

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.order-row {
  display: grid;
  grid-template-columns: 130px 1fr 200px;
  gap: 32px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid rgba(27, 58, 45, 0.25);
}

.order-row:last-child {
  border-bottom: 2px solid var(--ink);
}

.order-age-label {
  display: block;
  font-family: var(--caps);
  font-size: 15px;
  color: var(--berry);
}

.order-age-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 74px;
  padding: 0 8px;
  border-radius: 50%;
  border: 1px solid rgba(143, 51, 37, 0.55);
  box-shadow: inset 0 0 0 3px var(--parchment), inset 0 0 0 4px rgba(217, 158, 43, 0.6),
    0 2px 6px rgba(27, 58, 45, 0.15);
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
}

.order-body h3 {
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 8px;
}

.order-body p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.order-note {
  font-family: var(--caps);
  font-size: 15px;
  color: var(--berry);
  text-align: right;
}

/* ─── Quest pack ─── */
.pack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  background: linear-gradient(180deg, var(--gold) 0%, #cf9322 100%);
  color: var(--ink);
  padding: 90px 32px;
}

.pack-map {
  justify-self: center;
}

.pack-map svg {
  width: 380px;
  max-width: 100%;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.25));
  font-family: var(--caps);
}

.pack-copy h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 22px;
}

.pack-copy > p {
  font-size: 18px;
  line-height: 1.65;
  color: #4a3208;
  margin-bottom: 30px;
}

.pack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(27, 58, 45, 0.4);
}

.pack-list li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(27, 58, 45, 0.4);
  font-family: var(--caps);
  font-size: 19px;
  color: var(--ink);
}

.pack-num {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--berry);
}

/* ─── Time band ─── */
.time-band {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  background: var(--berry);
  padding: 54px 32px;
}

.time-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.time-glyph {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 20px;
}

.time-head h2 {
  font-size: clamp(24px, 3.4vw, 30px);
  color: var(--parchment);
  white-space: nowrap;
}

.time-band > p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(242, 232, 213, 0.85);
  font-style: italic;
}

/* ─── FAQ ─── */
.faq {
  position: relative;
  background-image: var(--grain), linear-gradient(180deg, var(--parchment) 0%, var(--parchment-light) 100%);
  color: var(--ink);
  padding: 90px 32px 100px;
}

.faq-inner {
  max-width: 800px;
  margin: 0 auto;
}

.faq-heading {
  text-align: center;
  margin-bottom: 48px;
}

.faq-heading h2 {
  font-size: clamp(32px, 4.2vw, 42px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px;
}

.faq-heading p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  font-style: italic;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--parchment-warm);
  border: 1px solid var(--field-line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.faq-item:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(27, 58, 45, 0.08);
}

.faq-item[open] {
  border-color: var(--gold-deep);
  box-shadow: 0 6px 16px rgba(27, 58, 45, 0.12);
}

.faq-item summary {
  padding: 20px 24px;
  font-family: var(--caps);
  font-size: 19px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 56px;
  user-select: none;
  font-weight: 700;
  transition: color 180ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--berry);
}

.faq-item summary::after {
  content: "✦";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--berry);
  font-size: 15px;
  transition: transform 250ms ease, color 250ms ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--gold-deep);
}

.faq-content {
  padding: 0 24px 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  border-top: 1px dashed rgba(27, 58, 45, 0.15);
  padding-top: 16px;
}

.faq-content p {
  margin: 0;
}

/* ─── Access ─── */
.access {
  position: relative;
  background-image: var(--grain), linear-gradient(180deg, var(--berry) 0%, var(--berry-deep) 100%);
  color: var(--parchment);
  padding: 80px 32px 90px;
}

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

.access h2 {
  font-size: clamp(32px, 4.2vw, 42px);
  line-height: 1.2;
  color: var(--parchment);
  margin-bottom: 16px;
}

.access-lead {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(242, 232, 213, 0.85);
  font-style: italic;
  margin-bottom: 36px;
}

.access-list {
  list-style: none;
  margin: 0 0 42px;
  padding: 0;
  text-align: left;
  border-top: 2px solid rgba(242, 232, 213, 0.8);
}

.access-list li {
  position: relative;
  padding: 16px 0 16px 34px;
  border-bottom: 1px solid rgba(242, 232, 213, 0.3);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(242, 232, 213, 0.85);
}

.access-list li::before {
  content: "✦";
  position: absolute;
  left: 4px;
  color: var(--gold-glow);
}

.access-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--caps);
  font-size: 18px;
  color: var(--parchment);
}

.access-contact a {
  padding: 9px 18px;
  border: 1px dashed rgba(240, 192, 90, 0.6);
  border-radius: 3px;
  background: rgba(217, 158, 43, 0.14);
  color: var(--gold-glow);
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.access-contact a:hover {
  background: rgba(217, 158, 43, 0.28);
  color: var(--gold-ember);
}

/* ─── Enlist ─── */
.enlist {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 30% 10%, var(--forest) 0%, var(--night) 65%);
}

.enlist-inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
  padding: 90px 32px 100px;
}

.enlist-intro {
  padding-top: 20px;
}

.enlist-intro h2 {
  font-size: clamp(32px, 4.2vw, 42px);
  line-height: 1.2;
  color: var(--parchment);
  margin-bottom: 22px;
}

.enlist-intro > p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(242, 232, 213, 0.8);
  margin-bottom: 34px;
}

.enlist-points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(217, 158, 43, 0.3);
}

.enlist-points li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(217, 158, 43, 0.3);
  font-family: var(--caps);
  font-size: 17px;
  color: var(--parchment);
}

/* Parchment ledger */
.ledger {
  background: var(--parchment);
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.ledger-face {
  position: relative;
  border: 1px solid var(--gold);
  padding: 36px 36px 40px;
  background-image: var(--grain), radial-gradient(circle at 50% 0%, var(--parchment-light) 0%, #eee1c8 100%);
  color: var(--ink);
}

.ledger-face .corner {
  font-size: 13px;
}

.ledger-face .corner-tl { top: 6px; left: 6px; }
.ledger-face .corner-tr { top: 6px; right: 6px; }

.ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: 26px;
}

.ledger-head h3 {
  font-size: 26px;
  color: var(--ink);
}

.ledger-head span {
  font-size: 13px;
  font-style: italic;
  color: var(--berry);
  white-space: nowrap;
}

/* ─── Form fields ─── */
.field {
  margin-bottom: 22px;
}

.field label,
.adventurers legend {
  display: block;
  margin-bottom: 7px;
  font-family: var(--caps);
  font-size: 16px;
  color: var(--ink);
}

.field input,
.field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--field-line);
  border-radius: 2px;
  background: rgba(255, 252, 244, 0.7);
  color: #2b241a;
}

.field input:focus,
.field select:focus {
  border-color: var(--gold);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--berry);
}

.field-help {
  margin: 6px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.45;
}

.field-error {
  margin: 6px 0 0;
  font-family: var(--caps);
  font-size: 14px;
  color: var(--berry);
  line-height: 1.4;
}

.field-error:empty {
  display: none;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.adventurers {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.adventurers legend {
  padding: 0;
  margin-bottom: 4px;
}

.adventurers .field-help {
  margin-bottom: 8px;
}

#player-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-row {
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  gap: 12px;
  align-items: center;
}

.player-row .adventurer-label {
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}

.player-row input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--field-line);
  border-radius: 2px;
  background: rgba(255, 252, 244, 0.7);
  color: #2b241a;
  font-size: 16px;
}

.player-row .field-error {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin-top: 4px;
}

.consent input {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--berry);
}

.consent span {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}

.form-status {
  margin: 16px 0 0;
  font-family: var(--caps);
  font-size: 15px;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  padding: 10px 14px;
  border: 1px dashed var(--berry);
  color: var(--berry);
}

.btn-forest {
  margin-top: 22px;
}

/* Success */
.success-state {
  text-align: center;
  padding: 40px 10px;
}

.success-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--berry-bright) 0%, var(--berry) 55%, var(--berry-deep) 100%);
  color: var(--parchment);
  font-size: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.success-state h3 {
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 12px;
}

.success-state p {
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 20px;
}

.success-state a {
  font-family: var(--caps);
  color: var(--berry);
  text-underline-offset: 4px;
}

/* ─── Footer ─── */
footer {
  background: var(--night-deep);
  border-top: 1px solid rgba(217, 158, 43, 0.2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  max-width: var(--content);
  margin: 0 auto;
  padding: 64px 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-name {
  font-family: var(--display);
  font-size: 16px;
  color: var(--parchment);
}

.footer-date {
  margin-top: 2px;
  font-size: 14px;
  font-style: italic;
  color: rgba(242, 232, 213, 0.5);
}

.footer-cta {
  font-family: var(--caps);
  font-size: 17px;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

[hidden] {
  display: none !important;
}

/* ─── Animations ─── */
@keyframes dl-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}

@keyframes dl-flicker {
  0%, 100% { opacity: 0.9; }
  40% { opacity: 0.55; }
  60% { opacity: 1; }
}

@keyframes dl-dash {
  from { stroke-dashoffset: 300; }
  to { stroke-dashoffset: 0; }
}

@keyframes dl-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.5; }
  100% { transform: translate(14px, -120px) scale(0.7); opacity: 0; }
}

@keyframes dl-twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.9; }
}

.map-trail {
  stroke-dashoffset: 300;
  animation: dl-dash 5s ease-in-out infinite alternate;
}

/* ─── Responsive ─── */
@media (max-width: 940px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 72px 28px 84px;
  }

  .plaque-wrap {
    order: -1;
  }

  .orders-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .order-row {
    grid-template-columns: 100px 1fr;
    gap: 20px 28px;
  }

  .order-note {
    grid-column: 1 / -1;
    text-align: left;
  }

  .pack {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 72px 28px;
  }

  .time-band {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 44px 28px;
  }

  .time-head h2 {
    white-space: normal;
  }

  .enlist-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 72px 28px 84px;
  }

  .enlist-intro {
    padding-top: 0;
  }

  .faq {
    padding: 72px 28px 84px;
  }

  .access {
    padding: 72px 28px 84px;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .site-header {
    padding: 16px 20px;
    gap: 14px;
  }

  .site-name span:not(.lantern-mark) {
    max-width: 150px;
    line-height: 1.2;
  }

  .site-header nav {
    gap: 18px;
    font-size: 15px;
  }

  .hero-inner {
    padding: 56px 20px 70px;
  }

  .fact-band {
    grid-template-columns: 1fr;
  }

  .fact-band div {
    padding: 12px 0;
  }

  .fact-band div:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(217, 158, 43, 0.25);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .btn-gold {
    width: 100%;
  }

  .orders,
  .enlist-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .orders {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .order-row {
    grid-template-columns: 80px 1fr;
    gap: 16px 20px;
    padding: 24px 0;
  }

  .order-age-value {
    min-width: 62px;
    height: 62px;
    font-size: 24px;
  }

  .pack,
  .time-band,
  .faq,
  .access {
    padding-left: 20px;
    padding-right: 20px;
  }

  .enlist-inner {
    padding-top: 60px;
    padding-bottom: 72px;
  }

  .faq {
    padding-top: 60px;
    padding-bottom: 72px;
  }

  .access {
    padding-top: 60px;
    padding-bottom: 72px;
  }

  .faq-item summary {
    padding: 16px 20px;
    font-size: 17px;
    padding-right: 48px;
  }

  .faq-item summary::after {
    right: 20px;
  }

  .faq-content {
    padding: 0 20px 20px;
    font-size: 15px;
    padding-top: 12px;
  }

  .ledger-face {
    padding: 28px 22px 32px;
  }

  .player-row {
    grid-template-columns: 1fr 84px;
  }

  .player-row .adventurer-label {
    grid-column: 1 / -1;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 48px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .plaque-wrap {
    animation: none;
  }
}