/* ============================================================
   Willowbrook — cozy medieval SMP theme
   Palette drawn from the logo: parchment, oak, honey gold,
   willow green, lantern ember
   ============================================================ */

/* ---------- Self-hosted fonts (latin) ---------- */
@font-face { font-family: 'Metamorphous'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/Metamorphous-400.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/Alegreya-400.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(../assets/fonts/Alegreya-400i.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/Alegreya-500.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/Alegreya-700.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/AlegreyaSans-400.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/AlegreyaSans-500.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/AlegreyaSans-700.woff2) format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --parchment:      #f6ead2;
  --parchment-2:    #eeddba;
  --parchment-hi:   #fdf6e5;
  --ink:            #3a2915;
  --ink-soft:       #6d5334;
  --wood:           #4a2f17;
  --wood-dark:      #2e1d0d;
  --wood-hi:        #6d4523;
  --gold:           #e8a63d;
  --gold-deep:      #b97e1e;
  --gold-dark:      #8a5c12;
  --gold-hi:        #ffd985;
  --green:          #6f8f2f;
  --green-deep:     #4c661d;
  --ember:          #ff9d2e;
  --live:           #4f8a2c;

  --font-display:   'Metamorphous', 'Georgia', serif;
  --font-body:      'Alegreya', 'Georgia', serif;
  --font-ui:        'Alegreya Sans', 'Trebuchet MS', sans-serif;

  --frame-shadow:   0 10px 24px -12px rgba(46, 29, 13, .45);
  --radius:         12px;
  --nav-h:          64px;
}

/* ---------- Reset-ish ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--parchment);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-dark); }
button { font: inherit; cursor: pointer; }

/* No spinner arrows on number inputs, ever */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   NAV — carved oak beam
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background:
    linear-gradient(180deg, #573920 0%, #4a2f17 45%, #3a2410 100%);
  border-bottom: 3px solid var(--gold-deep);
  box-shadow: 0 3px 14px rgba(30, 18, 8, .45);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 38px; height: 38px; }
.brand span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  text-shadow: 0 2px 3px rgba(0,0,0,.55);
  letter-spacing: .5px;
}
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav-link {
  display: inline-block;
  padding: 9px 14px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.02rem;
  color: #f3e3c3;
  text-decoration: none;
  border-radius: 8px;
  transition: background .18s ease, color .18s ease;
}
.nav-link:hover, .nav-link:focus-visible { background: rgba(255, 217, 133, .14); color: var(--gold-hi); }
.nav-link[aria-current=page] { color: var(--gold-hi); }

/* Store — the gilded one */
.nav-store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .3px;
  color: #3a2410;
  text-decoration: none;
  background: linear-gradient(180deg, #ffd985 0%, #e8a63d 55%, #cf8c25 100%);
  border: 1px solid #8a5c12;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-store:hover, .nav-store:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.4);
}
.nav-store svg { width: 16px; height: 16px; }

/* More dropdown */
.dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .98rem;
  color: var(--gold-hi);
  background: rgba(0,0,0,.22);
  border: 1.5px solid var(--gold-deep);
  border-radius: 9px;
  transition: background .18s ease, transform .15s ease;
}
.dropdown-toggle:hover, .dropdown-toggle:focus-visible { background: rgba(232,166,61,.16); transform: translateY(-1px); }
.dropdown-toggle svg { width: 12px; height: 12px; transition: transform .18s ease; }
.dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  padding: 8px;
  list-style: none;
  background: linear-gradient(180deg, var(--parchment-hi), var(--parchment));
  border: 2px solid var(--wood);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(185, 126, 30, .35), 0 12px 26px -8px rgba(30,18,8,.5);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dropdown.open .dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 7px;
  transition: background .15s ease, color .15s ease;
}
.dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: rgba(232, 166, 61, .18); color: var(--wood-dark); }

/* Login */
.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .98rem;
  color: var(--gold-hi);
  background: rgba(0,0,0,.22);
  border: 1.5px solid var(--gold-deep);
  border-radius: 9px;
  transition: background .18s ease, transform .15s ease;
}
.btn-login:hover, .btn-login:focus-visible { background: rgba(232,166,61,.16); transform: translateY(-1px); }
.btn-login svg { width: 15px; height: 15px; }

/* Burger */
.burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  border-radius: 8px;
}
.burger svg { width: 26px; height: 26px; stroke: #f3e3c3; }
.burger:hover { background: rgba(255,217,133,.14); }

/* ============================================================
   HERO — the title screen
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 100vh; /* full title screen: footer starts below the fold */
  display: flex;
  align-items: stretch;
  background-image: url("../assets/bg-hero.webp?v=5");
  background-size: cover;
  background-position: center 62%;
}
@media (max-width: 700px) {
  .hero { background-image: url("../assets/bg-hero-sm.webp?v=5"); }
}
/* parchment veil as an overlay layer so background actors (birds) can fly
   UNDER it while fireflies/lantern/content sit above.
   Stacking: artwork (bg) -> .bird z0 -> veil z1 -> grain/firefly/glow z2 -> .hero-inner z3 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(246, 234, 210, .78) 0%,
    rgba(246, 234, 210, .55) 30%,
    rgba(246, 234, 210, .55) 70%,
    rgba(246, 234, 210, .78) 100%);
}

/* bird layer — plain container for the flock */
.bird-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* birds — distant silhouettes crossing the sky behind the veil */
.bird {
  position: absolute;
  left: 0;
  z-index: 0;
  pointer-events: none;
  animation: bird-fly var(--dur, 26s) linear infinite;
  animation-delay: var(--bd, 0s);
  transform: translateX(-8vw);
}
.bird img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* 3-frame wingbeat: up -> mid -> down -> mid */
.bird .f1 { animation: bird-frame1 .52s linear infinite; }
.bird .f2 { animation: bird-frame2 .52s linear infinite; }
.bird .f3 { animation: bird-frame3 .52s linear infinite; }
@keyframes bird-frame1 {
  0%, 24.9% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes bird-frame2 {
  0%, 24.9% { opacity: 0; }
  25%, 49.9% { opacity: 1; }
  50%, 74.9% { opacity: 0; }
  75%, 100% { opacity: 1; }
}
@keyframes bird-frame3 {
  0%, 49.9% { opacity: 0; }
  50%, 74.9% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes bird-fly {
  0%   { transform: translate(-8vw, 0); }
  25%  { transform: translate(20vw, -14px); }
  50%  { transform: translate(48vw, 6px); }
  75%  { transform: translate(76vw, -10px); }
  100% { transform: translate(108vw, 0); }
}
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}
/* lantern glow — positioned by JS to track the hanging lantern in the
   background artwork through the cover crop; hidden until first placement */
.lantern-glow {
  position: absolute;
  z-index: 2;
  width: 340px;
  height: 340px;
  display: none;
  pointer-events: none;
  /* long, easing tail all the way to the element edge — an abrupt stop or
     any box-shadow here reads as a hard disc edge over the artwork */
  background: radial-gradient(circle,
    rgba(255, 225, 140, .85) 0%,
    rgba(255, 205, 100, .55) 22%,
    rgba(255, 190, 80, .32) 38%,
    rgba(255, 178, 65, .17) 52%,
    rgba(255, 168, 55, .08) 64%,
    rgba(255, 160, 48, .03) 76%,
    rgba(255, 157, 46, 0) 92%);
  animation: lantern-flicker 3.6s ease-in-out infinite;
}
/* irregular flame flicker — uneven steps and amplitudes so it never
   reads as a metronome pulse */
@keyframes lantern-flicker {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: .78; }
  7%   { transform: translate(-50%, -50%) scale(1.05); opacity: .84; }
  11%  { transform: translate(-50%, -50%) scale(.98);  opacity: .68; }
  16%  { transform: translate(-50%, -50%) scale(1.03); opacity: .88; }
  23%  { transform: translate(-50%, -50%) scale(1.09); opacity: .88;   }
  29%  { transform: translate(-50%, -50%) scale(1.01); opacity: .74; }
  34%  { transform: translate(-50%, -50%) scale(1.04); opacity: .82;  }
  41%  { transform: translate(-50%, -50%) scale(.96);  opacity: .65; }
  46%  { transform: translate(-50%, -50%) scale(1.07); opacity: .85; }
  55%  { transform: translate(-50%, -50%) scale(1.02); opacity: .8;  }
  62%  { transform: translate(-50%, -50%) scale(1.1);  opacity: .88;   }
  68%  { transform: translate(-50%, -50%) scale(.99);  opacity: .7;  }
  75%  { transform: translate(-50%, -50%) scale(1.06); opacity: .83; }
  82%  { transform: translate(-50%, -50%) scale(.97);  opacity: .66; }
  90%  { transform: translate(-50%, -50%) scale(1.08); opacity: .86; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: .78; }
}

/* fireflies — parent handles drift + one-time fade-in, the ::before layer
   carries the visuals + endless twinkle, so the two opacity animations
   compose instead of overriding each other */
.firefly {
  position: absolute;
  z-index: 2;
  width: var(--fs, 12px);
  height: var(--fs, 12px);
  opacity: 0;
  pointer-events: none;
  animation:
    firefly-drift 9s ease-in-out infinite,
    firefly-fadein 1.8s ease-out forwards;
  animation-delay: var(--fd, 0s), var(--tw, 0s);
}
.firefly::before {
  content: "";
  position: absolute;
  inset: calc(var(--fs, 12px) * -2); /* halo scales with core size */
  border-radius: 50%;
  /* lantern-style single gradient: solid white core blending into solid
     gold at full alpha, then a long halving tail to zero — no box-shadow
     glow layers, those read as rings */
  background: radial-gradient(circle,
    #ffffff 0%,
    #fff8dc 9%,
    #ffc94d 19%,
    rgba(255, 200, 85, .5) 28%,
    rgba(255, 190, 75, .27) 38%,
    rgba(255, 180, 65, .14) 49%,
    rgba(255, 170, 55, .07) 61%,
    rgba(255, 160, 48, .03) 74%,
    rgba(255, 157, 46, 0) 90%);
  /* twinkle is JS-driven (random targets/durations) via --g / --gt */
  opacity: var(--g, 0);
  transition: opacity var(--gt, 1.2s) ease-in-out;
}
@keyframes firefly-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes firefly-drift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(18px, -22px); }
  50%      { transform: translate(34px, -40px); }
  75%      { transform: translate(10px, -62px); }
}


.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 20px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-main { text-align: center; }
.hero-logo-wrap {
  display: block;
  will-change: transform;
  animation: logo-breathe 5.5s ease-in-out infinite;
}
/* scale DOWN from natural size, never past 100% — Chrome rasterizes the
   layer at natural size, so upscaling mid-animation goes blurry */
@keyframes logo-breathe {
  0%, 100% { transform: scale(.94); }
  50%      { transform: scale(1); }
}
.hero-logo {
  width: min(640px, 92%);
  height: auto;
  margin: 0 auto 6px;
  filter: drop-shadow(0 14px 22px rgba(46, 29, 13, .35));
}
.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 2px 0 30px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  /* soft parchment halo so the line stays readable over the artwork */
  text-shadow:
    0 0 6px rgba(253, 246, 229, .95),
    0 0 14px rgba(253, 246, 229, .85),
    0 0 26px rgba(253, 246, 229, .7);
}
.tagline::before, .tagline::after {
  content: "";
  flex: 0 0 70px;
  height: 2px;
  background: linear-gradient(90deg, rgba(185,126,30,0), var(--gold-deep));
  border-radius: 2px;
  /* matching parchment halo so the rules read over the artwork too */
  box-shadow:
    0 0 5px 1px rgba(253, 246, 229, .7),
    0 0 12px 2px rgba(253, 246, 229, .45);
}
.tagline::after { background: linear-gradient(90deg, var(--gold-deep), rgba(185,126,30,0)); }

/* ---------- Action cards ---------- */
.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 320px));
  justify-content: center;
  gap: 22px;
}

/* Parchment panel with oak frame — the house container style */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--parchment-hi) 0%, #f3e5c6 100%);
  border: 2px solid var(--wood);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(185, 126, 30, .4),
    inset 0 1px 0 rgba(255, 255, 255, .6),
    var(--frame-shadow);
}
.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--gold-deep);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.corner.tl { top: 5px; left: 5px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.corner.tr { top: 5px; right: 5px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.corner.bl { bottom: 5px; left: 5px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.corner.br { bottom: 5px; right: 5px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

.action-card {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.action-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--wood);
  background: radial-gradient(circle at 50% 35%, #ffe6b3, #f0cf8b);
  border: 1.5px solid var(--gold-deep);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(46,29,13,.25);
}
.action-icon svg { width: 24px; height: 24px; }
.action-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--wood-dark);
  letter-spacing: .4px;
}
.action-value {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--gold-dark);
  word-break: break-all;
}
.action-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: .95rem;
  color: var(--ink-soft);
  min-height: 22px;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b8a583;
  flex: none;
}
.status-dot.live { background: var(--live); box-shadow: 0 0 0 3px rgba(79,138,44,.18); }
.status-dot.down { background: #b3452c; box-shadow: 0 0 0 3px rgba(179,69,44,.15); }

/* Carved oak button */
.btn-wood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 8px;
  padding: 12px 22px;
  min-height: 46px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: .3px;
  color: var(--gold-hi);
  text-decoration: none;
  background: linear-gradient(180deg, var(--wood-hi) 0%, var(--wood) 50%, #3a2410 100%);
  border: 1px solid var(--wood-dark);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 217, 133, .28), inset 0 -2px 4px rgba(0,0,0,.35), 0 3px 8px rgba(46,29,13,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-wood:hover, .btn-wood:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,217,133,.28), inset 0 -2px 4px rgba(0,0,0,.35), 0 6px 14px rgba(46,29,13,.4);
}
.btn-wood:active { transform: translateY(1px); filter: brightness(.97); }
.btn-wood svg { width: 18px; height: 18px; flex: none; }

.btn-gold {
  background: linear-gradient(180deg, #ffd985 0%, #e8a63d 55%, #cf8c25 100%);
  color: #3a2410;
  border-color: var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(138,92,18,.35), 0 3px 8px rgba(46,29,13,.35);
}

/* ---------- Ledger (right column) ---------- */
.ledger { padding: 22px 20px; }
.ledger h2 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--wood-dark);
  text-align: center;
  letter-spacing: .5px;
}
.ledger-rule {
  width: 72px;
  height: 3px;
  margin: 9px auto 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(185,126,30,0), var(--gold-deep), rgba(185,126,30,0));
}
.ledger-rows { list-style: none; display: flex; flex-direction: column; }
.ledger-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 4px;
  border-bottom: 1px dashed rgba(109, 83, 52, .3);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-row svg { width: 20px; height: 20px; color: var(--gold-dark); flex: none; }
.ledger-label {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--ink-soft);
  font-size: .99rem;
}
.ledger-value {
  margin-left: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--wood-dark);
}
.ledger-value.soon {
  font-weight: 500;
  font-style: italic;
  font-family: var(--font-body);
  color: #9a815d;
  font-size: .94rem;
}
.ledger-note {
  margin-top: 14px;
  padding: 11px 12px;
  font-size: .95rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  background: rgba(232, 166, 61, .12);
  border: 1px dashed rgba(185, 126, 30, .45);
  border-radius: 8px;
}

/* ============================================================
   Sub-pages (Rules, Staff Applications, Appeals)
   ============================================================ */
.page-wrap {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 46px 20px 70px;
}
.page-panel { padding: 38px 36px 42px; }
.page-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--wood-dark);
  text-align: center;
  letter-spacing: .5px;
}
.page-panel .ledger-rule { width: 110px; margin-bottom: 22px; }
.page-body { font-size: 1.08rem; color: var(--ink); text-align: center; }
.page-body p + p { margin-top: 12px; }
.back-home { text-align: center; margin-top: 26px; }

/* ============================================================
   Footer — night beam
   ============================================================ */
.footer {
  background: linear-gradient(180deg, #3a2410, var(--wood-dark));
  border-top: 3px solid var(--gold-deep);
  padding: 26px 20px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-ui);
}
.footer-copy { color: #b9a888; font-size: .95rem; }
.footer-links { display: flex; gap: 18px; list-style: none; }
.footer-links a { color: #e3cf9f; text-decoration: none; font-size: .97rem; transition: color .15s ease; }
.footer-links a:hover { color: var(--gold-hi); }

/* ============================================================
   Modal + toast
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(30, 18, 8, .55);
  backdrop-filter: blur(2px);
}
.modal-backdrop.open { display: flex; }
.modal {
  max-width: 430px;
  width: 100%;
  padding: 30px 28px;
  text-align: center;
}
.modal h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--wood-dark);
}
.modal p { margin: 12px 0 18px; color: var(--ink-soft); }
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 16px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--gold-hi);
  background: linear-gradient(180deg, var(--wood-hi), var(--wood-dark));
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(30,18,8,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 17px; height: 17px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1020px) {
  .hero-inner { padding-bottom: 56px; }
}
@media (max-width: 840px) {
  .burger { display: block; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 16px 16px;
    background: linear-gradient(180deg, #4a2f17, #3a2410);
    border-bottom: 3px solid var(--gold-deep);
    box-shadow: 0 10px 22px rgba(30,18,8,.4);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-link, .dropdown-toggle { width: 100%; text-align: left; }
  .nav-store { justify-content: center; }
  .dropdown-menu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
    margin-top: 4px;
    box-shadow: none;
  }
  .dropdown.open .dropdown-menu { display: block; }
  .btn-login { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .actions { grid-template-columns: minmax(0, 340px); }
  .tagline { font-size: 1.15rem; }
  .tagline::before, .tagline::after { flex-basis: 40px; }
  .page-panel { padding: 30px 22px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .firefly { display: none; }
}

/* ============================================================
   Homepage title-screen mode (desktop): no scroll, footer as a
   hover-reveal strip along the bottom edge
   ============================================================ */
@media (min-width: 841px) {
  body.home { height: 100vh; overflow: hidden; }
  body.home .hero { height: 100vh; min-height: 0; }
  body.home .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    transform: translateY(calc(100% - 13px));
    transition: transform .35s ease;
  }
  body.home .footer:hover,
  body.home .footer:focus-within {
    transform: translateY(0);
  }
}

/* ============================================================
   Homepage floating controls — same nav markup, no beam.
   Quiet ink links with parchment halo; Store/Login as small chips
   ============================================================ */
body.home .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  background: none;
  border-bottom: none;
  box-shadow: none;
}
body.home .nav-inner {
  height: auto;
  padding: 16px 22px 0;
  max-width: none;
}
body.home .brand { display: none; }
body.home .nav-links { margin-left: auto; gap: 10px; }
body.home .nav-link[aria-current=page] { display: none; } /* Home link is redundant here */
body.home .nav-link {
  color: var(--ink);
  font-weight: 700;
  text-shadow:
    0 0 6px rgba(253, 246, 229, .95),
    0 0 14px rgba(253, 246, 229, .8);
}
body.home .nav-link:hover, body.home .nav-link:focus-visible {
  background: rgba(58, 41, 21, .1);
  color: var(--wood-dark);
}
body.home .dropdown-toggle {
  color: var(--wood-dark);
  border-color: var(--gold-dark);
  background: rgba(253, 246, 229, .55);
}
body.home .dropdown-toggle:hover, body.home .dropdown-toggle:focus-visible {
  background: rgba(253, 246, 229, .85);
}
body.home .btn-login {
  color: var(--wood-dark);
  border-color: var(--gold-dark);
  background: rgba(253, 246, 229, .55);
}
body.home .btn-login:hover, body.home .btn-login:focus-visible {
  background: rgba(253, 246, 229, .85);
}
@media (max-width: 840px) {
  body.home .burger svg { stroke: var(--ink); filter: drop-shadow(0 0 5px rgba(253,246,229,.95)); }
  body.home .nav-links {
    background: linear-gradient(180deg, var(--parchment-hi), var(--parchment));
    border-bottom: 3px solid var(--gold-deep);
  }
  body.home .nav-link, body.home .dropdown-toggle { text-shadow: none; }
  body.home .nav-link[aria-current=page] { display: block; }
}