/* ============================================================
   True North Drawson — Retro Parks Poster theme
   ============================================================ */

/* Fonts */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alfa-slab-one-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
}

/* Tokens */
:root {
  --cream: #F4EDE0;
  --cream-2: #EAE0CB;
  --paper: #FBF7EC;
  --pine: #1E4D3B;
  --pine-2: #163A2C;
  --night: #14241E;
  --night-2: #0E1A15;
  --burnt: #D96C2F;
  --burnt-2: #B9531D;
  --gold: #E8B23A;
  --gold-2: #C99427;
  --ink: #26332C;
  --ink-soft: #4A5A50;
  --line: rgba(20, 36, 30, .16);
  --line-strong: rgba(20, 36, 30, .82);
  --cream-line: rgba(244, 237, 224, .18);
  --shadow-ink: rgba(20, 36, 30, .96);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --punch: cubic-bezier(.34, 1.56, .64, 1);
  --font-display: 'Alfa Slab One', 'Georgia', serif;
  --font-body: 'Figtree', 'Segoe UI', sans-serif;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, svg, video { max-width: 100%; }
svg { width: 1.2em; height: 1.2em; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  color: var(--night);
  margin: 0 0 .6em;
  letter-spacing: .01em;
  overflow-wrap: break-word;
  word-break: break-word;
}
p { margin: 0 0 1em; }
a {
  color: var(--burnt-2);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color .25s var(--ease);
}
a:hover { color: var(--pine); }
ul, ol { padding-left: 1.3em; margin: 0 0 1.1em; }
li { margin-bottom: .4em; }
strong { color: var(--night); }
::selection { background: var(--gold); color: var(--night); }

button, .btn, .nav a, .brand, .burger, .chip {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
:focus-visible { outline: 3px solid var(--burnt); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .05;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Buttons — poster press */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  padding: .82em 1.7em;
  border: 3px solid var(--night);
  border-radius: 10px;
  background: var(--pine);
  color: var(--cream);
  box-shadow: 5px 5px 0 var(--shadow-ink);
  transition: transform .3s var(--punch), box-shadow .3s var(--punch), background .25s var(--ease), color .25s var(--ease);
  white-space: normal;
  text-align: center;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-ink); color: var(--cream); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow-ink); }
.btn--primary { background: var(--burnt); }
.btn--primary:hover { background: var(--burnt-2); }
.btn--gold { background: var(--gold); color: var(--night); }
.btn--gold:hover { background: var(--gold-2); color: var(--night); }
.btn--ghost { background: transparent; color: var(--night); box-shadow: 5px 5px 0 rgba(20,36,30,.28); }
.btn--ghost:hover { background: var(--night); color: var(--cream); }
.btn--sm { font-size: .85rem; padding: .6em 1.2em; box-shadow: 4px 4px 0 var(--shadow-ink); border-width: 2.5px; }
.btn--sm:hover { box-shadow: 6px 6px 0 var(--shadow-ink); }

/* ============ HEADER (two rows) ============ */
.topline { background: var(--cream); border-bottom: 3px solid var(--night); position: relative; z-index: 61; }
.topline__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 12px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--night); }
.brand__mark { width: 54px; height: 54px; border-radius: 50%; display: block; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.24rem; line-height: 1.05; letter-spacing: .02em;
  display: block;
}
.brand__name small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--burnt-2); margin-top: 2px; }
.header-cta { display: flex; align-items: center; gap: 12px; }

.mainnav {
  position: sticky; top: 0; z-index: 60;
  background: var(--pine);
  border-bottom: 3px solid var(--night);
}
.mainnav__row { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.nav a {
  position: relative;
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: .93rem; letter-spacing: .02em;
  color: var(--cream);
  text-decoration: none;
  padding: .95em .7em .95em 1.45em;
  transition: color .25s var(--ease);
}
.nav a::before {
  content: '';
  position: absolute;
  left: .35em; top: 50%;
  width: .72em; height: .8em;
  translate: 0 -58%;
  background: var(--gold);
  clip-path: polygon(50% 0, 78% 42%, 66% 42%, 92% 78%, 58% 78%, 58% 100%, 42% 100%, 42% 78%, 8% 78%, 34% 42%, 22% 42%);
  opacity: 0;
  scale: .4;
  transition: opacity .3s var(--ease), scale .35s var(--punch);
}
.nav a:hover { color: var(--gold); }
.nav a:hover::before, .nav a.is-here::before { opacity: 1; scale: 1; }
.nav a.is-here { color: var(--gold); }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  position: relative;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--pine-2);
  border: 2.5px solid var(--night);
  cursor: pointer;
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 3px;
  background: var(--cream); border-radius: 3px;
  transition: transform .32s var(--punch), opacity .2s var(--ease), top .32s var(--punch);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }

/* Off-canvas (slides from LEFT, lives outside header) */
.offnav {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(340px, 100vw);
  z-index: 90;
  background: var(--night);
  border-right: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  padding: 22px 22px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .42s var(--ease), visibility 0s linear .42s;
}
.offnav[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform .42s var(--ease), visibility 0s linear 0s;
}
.offnav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.offnav__title { font-family: var(--font-display); color: var(--gold); font-size: 1rem; letter-spacing: .06em; }
.offnav__close {
  width: 40px; height: 40px; border-radius: 9px;
  border: 2px solid var(--cream-line);
  background: transparent; color: var(--cream);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.offnav__close:hover { border-color: var(--gold); color: var(--gold); }
.offnav__links { display: flex; flex-direction: column; }
.offnav__links a {
  color: var(--cream); text-decoration: none;
  font-weight: 700; font-size: 1.12rem;
  padding: 13px 4px;
  border-bottom: 1px solid var(--cream-line);
  display: flex; align-items: center; gap: 10px;
  transition: color .25s var(--ease), padding-left .3s var(--ease);
}
.offnav__links a::before {
  content: '';
  width: .65em; height: .72em;
  background: var(--gold);
  clip-path: polygon(50% 0, 78% 42%, 66% 42%, 92% 78%, 58% 78%, 58% 100%, 42% 100%, 42% 78%, 8% 78%, 34% 42%, 22% 42%);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.offnav__links a:hover, .offnav__links a.is-here { color: var(--gold); padding-left: 10px; }
.offnav__links a:hover::before, .offnav__links a.is-here::before { opacity: 1; }
.offnav__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.offnav-scrim {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(14, 26, 21, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.offnav-scrim[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s linear 0s; }

/* ============ SECTION FRAME ============ */
.sec { padding-block: 84px; position: relative; }
.sec--dark { background: var(--night); color: var(--cream-2); }
.sec--dark h2, .sec--dark h3 { color: var(--cream); }
.sec--dark p { color: var(--cream-2); }
.sec--pine { background: var(--pine); color: var(--cream-2); }
.sec--pine h2, .sec--pine h3 { color: var(--cream); }
.sec--tint { background: var(--cream-2); }

.sec-head { text-align: center; margin-bottom: 46px; }
.sec-head h2 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  display: inline-block;
  position: relative;
  padding-bottom: 18px;
}
.sec-head h2::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  translate: -50% 0;
  width: min(220px, 70%); height: 9px;
  background:
    linear-gradient(var(--burnt), var(--burnt)) 0 0 / 100% 4px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 7px / 100% 2px no-repeat;
}
.sec--dark .sec-head h2::after, .sec--pine .sec-head h2::after {
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 4px no-repeat,
    linear-gradient(var(--burnt), var(--burnt)) 0 7px / 100% 2px no-repeat;
}
.sec-head p { font-size: 1.08rem; color: var(--ink-soft); margin: 14px 0 0; }
.sec--dark .sec-head p, .sec--pine .sec-head p { color: rgba(244, 237, 224, .78); }

/* Reveal on scroll (below fold only) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.rv-in { opacity: 1; transform: none; }

/* ============ HERO (home) ============ */
.hero-post {
  position: relative;
  overflow: hidden;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(180deg, rgba(14,26,21,.18) 0%, rgba(14,26,21,.06) 40%, rgba(14,26,21,.72) 100%), url('/assets/img/hero/hero-north-lake.avif');
  background-size: cover;
  background-position: center;
  border-bottom: 6px solid var(--night);
}
.hero-post::before {
  content: '';
  position: absolute; inset: 16px;
  border: 3px solid rgba(244, 237, 224, .5);
  border-radius: 6px;
  pointer-events: none;
}
.hero-post__inner {
  position: relative;
  padding-block: 72px 64px;
  width: 100%;
  color: var(--cream);
  animation: heroLift 1.1s var(--ease) both;
}
@keyframes heroLift {
  from { opacity: 0; clip-path: inset(24% 0 0 0); transform: translateY(34px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.hero-post h1 {
  color: var(--cream);
  font-size: clamp(2.1rem, 6vw, 4.3rem);
  text-shadow: 3px 3px 0 rgba(14, 26, 21, .55);
  margin-bottom: .35em;
}
.hero-post h1 em { font-style: normal; color: var(--gold); }
.hero-post__sub {
  font-size: clamp(1rem, 2vw, 1.22rem);
  font-weight: 600;
  color: rgba(244, 237, 224, .94);
  margin-bottom: 1.6em;
}
.hero-post__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-post__note {
  margin: 26px 0 0;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, .85);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hero-post__note svg { width: 1.35em; height: 1.35em; fill: var(--gold); }
.hero-post__seal {
  position: absolute;
  right: 40px; top: 40px;
  z-index: 2;
  width: 118px; height: 118px;
  border-radius: 50%;
  background: var(--burnt);
  border: 3px solid var(--night);
  box-shadow: 5px 5px 0 rgba(14, 26, 21, .5);
  display: grid; place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: .82rem;
  line-height: 1.2;
  color: var(--cream);
  rotate: 8deg;
  animation: sealDrop 1s var(--punch) .45s both;
}
@keyframes sealDrop {
  from { opacity: 0; scale: 1.35; rotate: 40deg; }
  to { opacity: 1; scale: 1; rotate: 8deg; }
}
.hero-post__seal span { display: block; padding: 10px; }
.hero-post__seal small { display: block; font-family: var(--font-body); font-weight: 800; font-size: .6rem; letter-spacing: .18em; margin-top: 3px; }

/* ============ PAGE HERO (inner) ============ */
.page-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  border-bottom: 6px solid var(--night);
  min-height: 320px;
  display: flex; align-items: flex-end;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,21,.2), rgba(14,26,21,.68));
}
.page-hero__inner { position: relative; width: 100%; padding-block: 54px 44px; animation: heroLift .9s var(--ease) both; }
.page-hero h1 {
  color: var(--cream);
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  text-shadow: 3px 3px 0 rgba(14, 26, 21, .55);
  margin: 0;
}
.page-hero p {
  color: rgba(244, 237, 224, .92);
  font-weight: 600;
  font-size: 1.05rem;
  margin: .8em 0 0;
}
.ph-about { background-image: url('/assets/img/banners/about-lodge.avif'); }
.ph-mission { background-image: url('/assets/img/banners/mission-peaks.avif'); }
.ph-business { background-image: url('/assets/img/banners/business-trading-post.avif'); }
.ph-coins { background-image: url('/assets/img/banners/coins-vault.avif'); }
.ph-membership { background-image: url('/assets/img/banners/membership-lodges.avif'); }
.ph-rg { background-image: url('/assets/img/banners/rg-campfire.avif'); }
.ph-faq { background-image: url('/assets/img/banners/faq-signpost.avif'); }
.ph-contact { background-image: url('/assets/img/banners/contact-station.avif'); }
.ph-legal { background-image: url('/assets/img/banners/legal-ledger.avif'); }
.auth-aside--camp { background-image: url('/assets/img/banners/auth-camp.avif'); }
.center-cta { text-align: center; margin: 30px 0 0; }

.crumbs { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.crumbs li { margin: 0; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.crumbs li:not(:last-child)::after { content: '›'; color: rgba(244,237,224,.6); }
.crumbs a { color: rgba(244, 237, 224, .85); text-decoration: none; }
.crumbs a:hover { color: var(--gold); text-decoration: underline; }

/* ============ TRAIL MARKER FEATURE CARDS ============ */
.trailgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.marker {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 14px;
  padding: 30px 26px 26px;
  box-shadow: 6px 6px 0 var(--shadow-ink);
  transition: transform .4s var(--punch), box-shadow .4s var(--punch);
}
.marker:hover { transform: translate(-3px, -3px) rotate(-.5deg); box-shadow: 10px 10px 0 var(--shadow-ink); }
.marker__blaze {
  width: 52px; height: 52px;
  border-radius: 10px;
  rotate: 45deg;
  background: var(--pine);
  border: 3px solid var(--night);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.marker__blaze svg { rotate: -45deg; width: 26px; height: 26px; fill: var(--gold); }
.marker--burnt .marker__blaze { background: var(--burnt); }
.marker--gold .marker__blaze { background: var(--gold); }
.marker--gold .marker__blaze svg { fill: var(--night); }
.marker h3 { font-size: 1.18rem; margin-bottom: .5em; }
.marker p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ============ HOW IT WORKS — punched tickets ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step {
  position: relative;
  background: var(--cream);
  border: 3px dashed var(--gold);
  border-radius: 14px;
  padding: 30px 26px 26px 26px;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -24px; left: 22px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  background: var(--gold);
  color: var(--night);
  border: 3px solid var(--night);
  border-radius: 50%;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  box-shadow: 3px 3px 0 rgba(14, 26, 21, .55);
}
.step h3 { color: var(--night); font-size: 1.15rem; margin: .7em 0 .45em; }
.step p { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ============ SPLIT PANELS ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split--flip .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  display: block; width: 100%;
  border: 3px solid var(--night);
  border-radius: 14px;
  box-shadow: 8px 8px 0 var(--shadow-ink);
}
.split__media::after {
  content: '';
  position: absolute;
  right: -14px; top: -14px;
  width: 56px; height: 56px;
  background: var(--gold);
  border: 3px solid var(--night);
  border-radius: 50%;
  clip-path: polygon(50% 2%, 61% 35%, 96% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 4% 35%, 39% 35%);
}
.split h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.split ul { list-style: none; padding: 0; }
.split ul li {
  position: relative;
  padding-left: 34px;
  margin-bottom: .8em;
}
.split ul li::before {
  content: '';
  position: absolute; left: 0; top: .18em;
  width: 20px; height: 20px;
  background: var(--pine);
  border: 2.5px solid var(--night);
  border-radius: 6px;
  rotate: 45deg;
}
.split ul li::after {
  content: '';
  position: absolute; left: 6px; top: .42em;
  width: 8px; height: 5px;
  border-left: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  rotate: -45deg;
}

/* ============ TESTIMONIALS — camp log ============ */
.camplog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.logcard {
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 5px 5px 0 var(--shadow-ink);
  transition: transform .4s var(--punch), box-shadow .4s var(--punch);
}
.logcard:hover { transform: translate(-2px, -2px) rotate(.4deg); box-shadow: 8px 8px 0 var(--shadow-ink); }
.logcard__stars { display: flex; gap: 3px; }
.logcard__stars svg { width: 17px; height: 17px; fill: var(--gold); }
.logcard p { margin: 0; font-size: .93rem; color: var(--ink-soft); flex: 1; }
.logcard__who { display: flex; align-items: center; gap: 12px; border-top: 2px dashed var(--line); padding-top: 14px; }
.logcard__who img { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--night); object-fit: cover; }
.logcard__who strong { display: block; font-size: .92rem; }
.logcard__who small { color: var(--ink-soft); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* ============ MEMBERSHIP PLANS ============ */
.planrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.plan {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  box-shadow: 6px 6px 0 var(--shadow-ink);
  transition: transform .4s var(--punch), box-shadow .4s var(--punch);
}
.plan:hover { transform: translateY(-6px); box-shadow: 9px 9px 0 var(--shadow-ink); }
.plan--star { background: var(--night); }
.plan--star h3, .plan--star .plan__meta strong { color: var(--cream); }
.plan--star p, .plan--star li { color: rgba(244, 237, 224, .82); }
.plan__flag {
  position: absolute; top: -16px; right: 18px;
  background: var(--burnt); color: var(--cream);
  font-weight: 800; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .45em .9em;
  border: 2.5px solid var(--night);
  border-radius: 7px;
  box-shadow: 3px 3px 0 rgba(14,26,21,.5);
  rotate: 2deg;
}
.plan img { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--night); margin: 0 auto 16px; display: block; background: var(--cream); }
.plan h3 { text-align: center; font-size: 1.22rem; }
.plan__meta { text-align: center; margin-bottom: 16px; }
.plan__meta strong { font-family: var(--font-display); font-size: 1.7rem; color: var(--pine); display: block; }
.plan__meta span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.plan--star .plan__meta strong { color: var(--gold); }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan ul li {
  position: relative; padding-left: 26px; margin-bottom: .55em; font-size: .93rem;
}
.plan ul li::before {
  content: ''; position: absolute; left: 0; top: .3em;
  width: 14px; height: 14px;
  background: var(--gold); border: 2px solid var(--night); border-radius: 50%;
}
.plan .btn { width: 100%; }

/* ============ GAMES CATALOG ============ */
.gamesgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.gamecard {
  background: var(--night-2);
  border: 3px solid var(--night);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(14, 26, 21, .55);
  display: flex; flex-direction: column;
  transition: transform .4s var(--punch), box-shadow .4s var(--punch);
}
.gamecard:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 rgba(14, 26, 21, .55); }
.gamecard__art { position: relative; overflow: hidden; }
.gamecard__art img { display: block; width: 100%; transition: scale .6s var(--ease); }
.gamecard:hover .gamecard__art img { scale: 1.05; }
.gamecard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gamecard h3 { color: var(--cream); font-size: 1.12rem; margin: 0; }
.gamecard p { color: rgba(244, 237, 224, .72); font-size: .9rem; margin: 0; flex: 1; }
.gamecard .btn { align-self: flex-start; }

/* Game modal */
.gmodal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(14, 26, 21, .78);
}
.gmodal__box {
  position: relative;
  width: min(960px, 100%);
  background: var(--night);
  border: 3px solid var(--gold);
  border-radius: 16px;
  padding: 14px;
  animation: modalPunch .45s var(--punch) both;
}
@keyframes modalPunch { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
.gmodal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 12px; }
.gmodal__bar h3 { color: var(--cream); margin: 0; font-size: 1.05rem; }
.gmodal__close {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 9px;
  border: 2.5px solid var(--gold);
  background: transparent; color: var(--gold);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.gmodal__close:hover { background: var(--gold); color: var(--night); }
.gmodal__frame { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--night-2); border-radius: 10px; overflow: hidden; }
.gmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.modal-lock { overflow: hidden; }

/* ============ SLOT — Northern Trail (ranger station) ============ */
.slotwrap { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 30px; align-items: start; }

/* Paytable as a cream "trail ledger" clipboard */
.ledger {
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 14px;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .45);
  overflow: hidden;
}
.ledger__head {
  background: var(--burnt);
  border-bottom: 3px solid var(--night);
  padding: 12px 18px;
}
.ledger__head h3 { color: var(--cream); font-size: 1.02rem; margin: 0; letter-spacing: .04em; }
.ledger__head span { display: block; color: rgba(244, 237, 224, .85); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.ledger table { width: 100%; border-collapse: collapse; font-size: .84rem; color: var(--ink); }
.ledger tr:nth-child(even) { background: rgba(30, 77, 59, .07); }
.ledger td { padding: 7px 10px; border-bottom: 2px dashed rgba(20, 36, 30, .18); vertical-align: middle; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger td:first-child { width: 46px; }
.ledger td:last-child { text-align: right; font-weight: 800; color: var(--burnt-2); white-space: nowrap; }
.ledger img { width: 34px; height: 34px; border-radius: 7px; border: 2px solid var(--night); display: block; }
.slotwrap p.ledger__note {
  font-size: .74rem; font-weight: 600; color: var(--ink-soft);
  margin: 0; padding: 12px 18px 15px;
  border-top: 3px solid var(--night);
  background: var(--cream-2);
}

/* Cabinet with a hanging pine sign + lamp string */
.slotcab {
  background: var(--night-2);
  border: 3px solid var(--night);
  border-radius: 18px;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .45);
  padding: 0 24px 24px;
}
.slotcab__sign {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px;
  background: var(--pine);
  border: 3px solid var(--night);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 15px 22px 12px;
  margin: 0 10px 16px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
.slotcab__sign strong { font-family: var(--font-display); font-weight: 400; color: var(--gold); font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: .03em; }
.slotcab__sign span { color: rgba(244, 237, 224, .8); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.slotcab__lamps { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.slotcab__lamps i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(232, 178, 58, .85);
  animation: lampTwinkle 2.2s ease-in-out infinite;
}
.slotcab__lamps i:nth-child(2n) { animation-delay: .45s; }
.slotcab__lamps i:nth-child(3n) { animation-delay: .95s; }
@keyframes lampTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.slot-reels {
  --cell: 96px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background: var(--night);
  border-radius: 12px;
  padding: 12px;
}
.reel {
  position: relative;
  height: calc((var(--cell) + 8px) * 3);
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #0B1511;
  box-shadow: inset 0 0 0 2px rgba(232, 178, 58, .25), inset 0 14px 22px rgba(0,0,0,.5), inset 0 -14px 22px rgba(0,0,0,.5);
}
.reel__strip { display: grid; grid-auto-rows: calc(var(--cell) + 8px); will-change: transform; }
.reel__cell { display: grid; place-items: center; }
.reel__cell img {
  width: calc(var(--cell) - 16px);
  height: calc(var(--cell) - 16px);
  border-radius: 10px;
  display: block;
}
.reel__cell.win img { animation: symWin .7s var(--punch) 2; }
@keyframes symWin { 0%,100% { scale: 1; } 50% { scale: 1.14; rotate: -3deg; } }

.slot-deck { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 18px; }
.slot-gauges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.slot-stat { background: var(--night); border: 2px solid rgba(232,178,58,.4); border-radius: 10px; padding: 8px 16px; text-align: center; min-width: 108px; }
.slot-stat small { display: block; color: rgba(244,237,224,.6); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.slot-stat strong { color: var(--gold); font-family: var(--font-display); font-size: 1.18rem; }
.slot-bet { display: flex; align-items: center; gap: 8px; }
.slot-bet button {
  width: 38px; height: 38px; border-radius: 9px;
  border: 2.5px solid var(--gold);
  background: transparent; color: var(--gold);
  font-size: 1.2rem; font-weight: 800; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.slot-bet button:hover { background: var(--gold); color: var(--night); }
.slot-spin {
  width: 104px; height: 104px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .05em;
  border: 3px solid var(--night);
  outline: 3px solid var(--gold);
  outline-offset: -11px;
  background: var(--burnt);
  color: var(--cream);
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(0,0,0,.45);
  transition: transform .3s var(--punch), box-shadow .3s var(--punch), background .2s var(--ease);
}
.slot-spin:hover { transform: translate(-2px,-2px) rotate(-3deg); box-shadow: 7px 7px 0 rgba(0,0,0,.45); }
.slot-spin:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.45); }
.slot-spin:focus-visible { outline-color: var(--cream); }
.slot-spin[disabled] { opacity: .55; cursor: default; transform: none; }
.slot-msg {
  margin-top: 14px;
  min-height: 1.6em;
  text-align: center;
  color: var(--gold);
  font-weight: 700;
  font-size: .95rem;
}

/* ============ FAQ details ============ */
.faqlist { display: grid; gap: 14px; }
.faq {
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 13px;
  box-shadow: 4px 4px 0 var(--shadow-ink);
  overflow: hidden;
}
.sec--dark .faq, .sec--pine .faq { box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--night);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 13px; height: 13px;
  border-right: 3px solid var(--burnt);
  border-bottom: 3px solid var(--burnt);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .35s var(--ease), translate .35s var(--ease);
}
.faq.is-open summary::after { rotate: 225deg; translate: 0 3px; }
.faq__body { padding: 0 20px; }
.faq__body p { color: var(--ink-soft); padding-bottom: 17px; margin: 0; }
.faq__body p + p { padding-top: 0; margin-top: -6px; }

/* FAQ intro split (goose + copy) */
.faq-intro__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.faq-intro__media { margin: 0; display: flex; justify-content: center; }
.faq-intro__media img {
  display: block;
  width: 100%;
  border: 3px solid var(--night);
  border-radius: 14px;
  box-shadow: 8px 8px 0 var(--shadow-ink);
}
.faq-intro__copy .sec-head { margin-bottom: 18px; text-align: left; }

/* ============ PROSE / LEGAL ============ */
.prose h2 { font-size: 1.55rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.18rem; margin-top: 1.5em; }
.prose > h2:first-child { margin-top: 0; }
.prose img { border: 3px solid var(--night); border-radius: 14px; box-shadow: 6px 6px 0 var(--shadow-ink); margin: 10px 0 22px; }
.legal-note {
  background: var(--cream-2);
  border: 3px solid var(--night);
  border-left-width: 10px;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 22px 0;
  font-weight: 600;
  color: var(--ink);
}
.legal-note p { color: var(--ink); }
.legal-note p:last-child { margin-bottom: 0; }

/* Two-col figure rows inside content pages */
.figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 26px 0; }
.figrow figure { margin: 0; }
.figrow img { display: block; width: 100%; border: 3px solid var(--night); border-radius: 14px; box-shadow: 6px 6px 0 var(--shadow-ink); }
.figrow figcaption { font-size: .84rem; font-weight: 700; color: var(--ink-soft); margin-top: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* ============ FORMS ============ */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
.field label { font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--night);
  border-radius: 9px;
  padding: .6rem .85rem;
  min-width: 0;
  width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--burnt); box-shadow: 3px 3px 0 rgba(217, 108, 47, .35); }
.field textarea { resize: none; min-height: 130px; }
.field--check { flex-direction: row; align-items: center; gap: .6rem; }
.field--check input {
  appearance: none;
  -webkit-appearance: none;
  width: 21px; height: 21px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: 2.5px solid var(--night);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s var(--ease);
}
.field--check input::before {
  content: '';
  width: 9px; height: 5px;
  border-left: 2.5px solid var(--cream);
  border-bottom: 2.5px solid var(--cream);
  rotate: -45deg;
  translate: 0 -1px;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.field--check input:checked { background: var(--pine); }
.field--check input:checked::before { opacity: 1; }
.field--check label { font-weight: 600; font-size: .8rem; color: var(--ink-soft); }
.field__err { color: var(--burnt-2); font-size: .76rem; font-weight: 700; min-height: 1em; }

/* Captcha */
.captcha { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.captcha__box {
  appearance: none; -webkit-appearance: none;
  width: 21px; height: 21px; flex-shrink: 0; padding: 0; margin: 0;
  border: 2.5px solid var(--night); border-radius: 6px;
  background: var(--paper); cursor: pointer;
  display: grid; place-items: center; position: relative;
}
.captcha__box.is-busy::before {
  content: '';
  width: 12px; height: 12px;
  border: 2.5px solid var(--pine);
  border-top-color: transparent;
  border-radius: 50%;
  animation: capSpin .7s linear infinite;
}
@keyframes capSpin { to { rotate: 360deg; } }
.captcha__box.is-done { background: var(--pine); }
.captcha__box.is-done::before {
  content: '';
  width: 9px; height: 5px;
  border-left: 2.5px solid var(--cream);
  border-bottom: 2.5px solid var(--cream);
  rotate: -45deg; translate: 0 -1px;
}
.captcha__label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; gap: .5rem; }
.captcha__label svg { width: 26px; height: 26px; }

/* Auth card */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 44px; align-items: stretch; justify-content: center; }
.auth-card {
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--shadow-ink);
  padding: 30px 28px;
  align-self: start;
  width: 100%;
}
.auth-card h2 { font-size: 1.5rem; }
.auth-card .btn { width: 100%; margin-top: .4rem; }
.auth-card__alt { text-align: center; font-size: .86rem; margin: 1rem 0 0; }
.auth-aside {
  position: relative;
  border: 3px solid var(--night);
  border-radius: 16px;
  overflow: hidden;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  box-shadow: 8px 8px 0 var(--shadow-ink);
  display: flex; align-items: flex-end;
}
.auth-aside::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,21,0) 30%, rgba(14,26,21,.8)); }
.auth-aside div { position: relative; padding: 28px; color: var(--cream); }
.auth-aside__title { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream); margin: 0 0 .4em; }
.auth-aside p { color: rgba(244,237,224,.85); margin: 0; font-size: .95rem; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: .5rem; }
.auth-link { font-size: .82rem; font-weight: 700; }

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-card {
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--shadow-ink);
  padding: 30px 28px;
}
.contact-lines { list-style: none; padding: 0; margin: 0 0 6px; }
.contact-lines li {
  position: relative;
  padding: 12px 0 12px 44px;
  border-bottom: 2px dashed var(--line);
  margin: 0;
}
.contact-lines li:last-child { border-bottom: 0; }
.contact-lines svg { position: absolute; left: 4px; top: 14px; width: 24px; height: 24px; fill: var(--burnt); }
.contact-lines strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.mapframe {
  border: 3px solid var(--night);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--shadow-ink);
  overflow: hidden;
  margin-top: 34px;
}
.mapframe iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ============ FOOTER — POSTAGE STAMPS ============ */
.footer {
  background: var(--night);
  color: var(--cream-2);
  border-top: 6px solid var(--gold);
  padding-block: 60px 30px;
  position: relative;
}
.footer__brandrow {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.footer__brandrow img { width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--gold); }
.footer__brandrow .footer__title { font-family: var(--font-display); color: var(--cream); font-size: 1.35rem; line-height: 1.1; }
.footer__brandrow .footer__title small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.footer__tag { margin-left: auto; font-size: .85rem; color: rgba(244,237,224,.66); max-width: none; }

.stampsheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 36px;
}
.stamp {
  position: relative;
  background: var(--pine-2);
  border-radius: 4px;
  padding: 22px 20px 20px;
}
.stamp::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 5px at 9px 0, var(--night) 4.6px, transparent 5.2px) top left / 18px 7px repeat-x,
    radial-gradient(circle 5px at 9px 100%, var(--night) 4.6px, transparent 5.2px) bottom left / 18px 7px repeat-x,
    radial-gradient(circle 5px at 0 9px, var(--night) 4.6px, transparent 5.2px) top left / 7px 18px repeat-y,
    radial-gradient(circle 5px at 100% 9px, var(--night) 4.6px, transparent 5.2px) top right / 7px 18px repeat-y;
}
.stamp__inner { position: relative; border: 1.5px dashed rgba(232, 178, 58, .5); border-radius: 3px; padding: 14px 14px 12px; height: 100%; }
.stamp h3 {
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 800;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.stamp h3 svg { width: 16px; height: 16px; fill: var(--gold); flex-shrink: 0; }
.stamp ul { list-style: none; padding: 0; margin: 0; }
.stamp li { margin: 0 0 2px; }
.stamp a {
  color: rgba(244, 237, 224, .88);
  text-decoration: underline;
  text-decoration-color: rgba(244,237,224,.3);
  text-underline-offset: 3px;
  font-size: .92rem;
  display: inline-block;
  padding: 4px 0;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease), translate .3s var(--ease);
}
.stamp a:hover { color: var(--gold); text-decoration-color: var(--gold); translate: 3px 0; }

.customs {
  border: 3px double rgba(232, 178, 58, .65);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 26px;
  position: relative;
}
.customs h3 {
  position: absolute;
  top: -13px; left: 22px;
  margin: 0;
  background: var(--night);
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 2px 12px;
}
.customs p { font-size: .88rem; color: rgba(244, 237, 224, .8); margin: 0 0 10px; }
.customs p:last-of-type { margin-bottom: 0; }
.customs__chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--night-2);
  border: 2px solid rgba(232, 178, 58, .45);
  border-radius: 9px;
  padding: 7px 14px;
  color: var(--cream);
  font-weight: 800;
  font-size: .8rem;
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .3s var(--punch);
}
a.chip:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--cream); }
.chip--age { background: var(--burnt); border-color: var(--night); font-family: var(--font-display); font-size: .9rem; }
.chip img { height: 20px; width: auto; display: block; }
.chip svg { height: 18px; width: auto; }

.footer__base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--cream-line);
  padding-top: 22px;
}
.footer__base p { margin: 0; font-size: .84rem; color: rgba(244, 237, 224, .62); }
.postmark {
  width: 74px; height: 74px;
  border: 2.5px dashed rgba(232, 178, 58, .7);
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: .55rem;
  line-height: 1.25;
  color: var(--gold);
  rotate: -8deg;
  flex-shrink: 0;
}

/* ============ CHAT — Wilfred ============ */
.chat-toggle {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 110;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--burnt);
  border: 3px solid var(--night);
  box-shadow: 4px 4px 0 rgba(14, 26, 21, .5);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .35s var(--punch), background .25s var(--ease);
}
.chat-toggle:hover { transform: translateY(-3px) rotate(-4deg); background: var(--burnt-2); }
.chat-toggle svg { width: 30px; height: 30px; fill: var(--cream); }
.chat-panel {
  position: fixed;
  right: 20px; bottom: 94px;
  z-index: 110;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 460px;
  max-height: calc(100dvh - 120px);
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 16px;
  box-shadow: 8px 8px 0 rgba(14, 26, 21, .45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: chatPop .4s var(--punch) both;
}
@keyframes chatPop { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
.chat-head { display: flex; align-items: center; gap: 12px; background: var(--pine); padding: 12px 14px; border-bottom: 3px solid var(--night); }
.chat-head img { width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--gold); }
.chat-head strong { color: var(--cream); font-size: .98rem; display: block; }
.chat-head small { color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.chat-head button {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 2px solid rgba(244,237,224,.4);
  background: transparent; color: var(--cream);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.chat-head button:hover { border-color: var(--gold); color: var(--gold); }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 84%; padding: 9px 13px; border-radius: 13px; font-size: .88rem; line-height: 1.45; }
.chat-msg--bot { background: var(--cream-2); border: 2px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg--me { background: var(--pine); color: var(--cream); border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); animation: typing 1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 100% { opacity: .3; translate: 0 0; } 50% { opacity: 1; translate: 0 -4px; } }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 2px solid var(--line); }
.chat-form input {
  flex: 1; min-width: 0;
  font-family: var(--font-body);
  font-size: .9rem;
  padding: .55rem .8rem;
  border: 2.5px solid var(--night);
  border-radius: 9px;
  background: var(--paper);
}
.chat-form input:focus { outline: none; border-color: var(--burnt); }
.chat-form button {
  width: 44px; height: 42px;
  border-radius: 9px;
  border: 2.5px solid var(--night);
  background: var(--burnt);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s var(--ease);
}
.chat-form button:hover { background: var(--burnt-2); }
.chat-form button svg { width: 20px; height: 20px; fill: var(--cream); }

/* ============ COOKIE BANNER ============ */
.cookiebar {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 105;
  width: min(430px, calc(100vw - 40px));
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 14px;
  box-shadow: 7px 7px 0 rgba(14, 26, 21, .5);
  padding: 20px 22px;
  animation: chatPop .45s var(--punch) both;
}
.cookiebar h3 { font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.cookiebar h3 svg { width: 22px; height: 22px; fill: var(--burnt); }
.cookiebar p { font-size: .85rem; color: var(--ink-soft); margin-bottom: 14px; }
.cookiebar__row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ AGE GATE ============ */
.agegate {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(14, 26, 21, .88);
}
.agegate__box {
  width: min(480px, 100%);
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 18px;
  box-shadow: 10px 10px 0 rgba(0,0,0,.4);
  padding: 34px 30px;
  text-align: center;
  animation: modalPunch .5s var(--punch) both;
}
.agegate__badge {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--burnt);
  border: 3px solid var(--night);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.6rem;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  rotate: -6deg;
}
.agegate__box h2 { font-size: 1.45rem; }
.agegate__box p { font-size: .92rem; color: var(--ink-soft); }
.agegate__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ============ TOAST ============ */
.toast-wrap {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(14, 26, 21, .55);
}
.toast {
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 16px;
  box-shadow: 8px 8px 0 rgba(14,26,21,.5);
  padding: 28px 32px;
  text-align: center;
  max-width: 420px;
  animation: modalPunch .4s var(--punch) both;
}
.toast--ok h3 { color: var(--pine); }
.toast--err h3 { color: var(--burnt-2); }
.toast p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* ============ MISC ============ */
.cta-stamp {
  position: relative;
  background: var(--burnt);
  border-radius: 4px;
  padding: 54px 40px;
  text-align: center;
}
.cta-stamp::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 7px at 13px 0, var(--cream) 6.4px, transparent 7.2px) top left / 26px 10px repeat-x,
    radial-gradient(circle 7px at 13px 100%, var(--cream) 6.4px, transparent 7.2px) bottom left / 26px 10px repeat-x,
    radial-gradient(circle 7px at 0 13px, var(--cream) 6.4px, transparent 7.2px) top left / 10px 26px repeat-y,
    radial-gradient(circle 7px at 100% 13px, var(--cream) 6.4px, transparent 7.2px) top right / 10px 26px repeat-y;
}
.sec--tint .cta-stamp::before, .sec--dark .cta-stamp::before {
  background:
    radial-gradient(circle 7px at 13px 0, var(--cream-2) 6.4px, transparent 7.2px) top left / 26px 10px repeat-x,
    radial-gradient(circle 7px at 13px 100%, var(--cream-2) 6.4px, transparent 7.2px) bottom left / 26px 10px repeat-x,
    radial-gradient(circle 7px at 0 13px, var(--cream-2) 6.4px, transparent 7.2px) top left / 10px 26px repeat-y,
    radial-gradient(circle 7px at 100% 13px, var(--cream-2) 6.4px, transparent 7.2px) top right / 10px 26px repeat-y;
}
.sec--dark .cta-stamp::before {
  background:
    radial-gradient(circle 7px at 13px 0, var(--night) 6.4px, transparent 7.2px) top left / 26px 10px repeat-x,
    radial-gradient(circle 7px at 13px 100%, var(--night) 6.4px, transparent 7.2px) bottom left / 26px 10px repeat-x,
    radial-gradient(circle 7px at 0 13px, var(--night) 6.4px, transparent 7.2px) top left / 10px 26px repeat-y,
    radial-gradient(circle 7px at 100% 13px, var(--night) 6.4px, transparent 7.2px) top right / 10px 26px repeat-y;
}
.cta-stamp h2 { color: var(--cream); font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.cta-stamp p { color: rgba(244, 237, 224, .9); max-width: none; margin-bottom: 24px; }
.cta-stamp .btn { border-color: var(--night); }

.notice-strip {
  background: var(--night);
  color: rgba(244,237,224,.85);
  font-size: .82rem;
  font-weight: 700;
  padding: 10px 0;
  text-align: center;
  letter-spacing: .04em;
}
.notice-strip strong { color: var(--gold); }

/* RG resource cards */
.rg-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rg-card {
  background: var(--paper);
  border: 3px solid var(--night);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 5px 5px 0 var(--shadow-ink);
}
.rg-card h3 { font-size: 1.08rem; display: flex; align-items: center; gap: 10px; }
.rg-card h3 svg { width: 24px; height: 24px; fill: var(--burnt); flex-shrink: 0; }
.rg-card p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 8px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1219.98px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .burger { display: block; }
  .mainnav__row { justify-content: space-between; }
  .mainnav__hint { color: var(--gold); font-family: var(--font-display); font-size: .92rem; letter-spacing: .05em; }
}
@media (min-width: 1220px) {
  .mainnav__hint { display: none; }
}

@media (max-width: 1100px) {
  .trailgrid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .camplog { grid-template-columns: repeat(2, 1fr); }
  .planrow { grid-template-columns: repeat(2, 1fr); }
  .slotwrap { grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 860px) {
  .slotwrap { grid-template-columns: 1fr; }
  .ledger { order: 2; }
  .slotcab { order: 1; }
  .slot-reels { --cell: clamp(44px, 13vw, 84px); gap: 7px; padding: 9px; }
  .reel__cell img { border-radius: 8px; }
}

@media (max-width: 819.98px) {
  body { font-size: 16px; }
  .sec { padding-block: 60px; }
  .sec-head { margin-bottom: 34px; }
  .trailgrid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--flip .split__media { order: 0; }
  .gamesgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .camplog { grid-template-columns: 1fr; }
  .figrow { grid-template-columns: 1fr; }
  .faq-intro__split { grid-template-columns: 1fr; gap: 26px; }
  .gmodal__frame { aspect-ratio: auto; height: calc(100dvh - 150px); max-height: 640px; }
  .contact-grid { grid-template-columns: 1fr; }
  .auth-wrap { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
  .auth-aside { min-height: 300px; }
  .stampsheet { grid-template-columns: repeat(2, 1fr); }
  .rg-cards { grid-template-columns: 1fr; }
  .hero-post__seal { width: 96px; height: 96px; font-size: .7rem; right: 20px; top: 22px; }
  .hero-post { min-height: 0; }
  .footer__tag { margin-left: 0; }
  .mapframe iframe { height: 300px; }
}

@media (max-width: 519.98px) {
  .container { padding-inline: 16px; }
  .gamesgrid { grid-template-columns: 1fr; }
  .planrow { grid-template-columns: 1fr; }
  .stampsheet { grid-template-columns: 1fr; }
  .hero-post::before { inset: 10px; }
  .hero-post__inner { padding-block: 54px 44px; }
  .hero-post__actions .btn { width: 100%; }
  .brand__mark { width: 44px; height: 44px; }
  .brand__name { font-size: 1.05rem; }
  .topline__row { gap: 10px; }
  .header-cta { gap: 8px; }
  .header-cta .btn--sm { font-size: .74rem; padding: .55em .9em; }
  .cta-stamp { padding: 40px 22px; }
  .chat-panel { right: 16px; }
  .cookiebar { left: 16px; }
  .page-hero { min-height: 240px; }
}

@media (max-width: 429.98px) {
  .hero-post h1 { font-size: clamp(1.7rem, 9vw, 2.1rem); }
  .hero-post__seal { display: none; }
  .footer__brandrow { gap: 12px; }
  .postmark { width: 64px; height: 64px; }
  .slot-deck { grid-template-columns: 1fr; justify-items: center; }
  .slot-gauges { justify-content: center; }
  .slotcab { padding: 0 14px 18px; }
  .slotcab__sign { margin: 0 4px 14px; padding: 12px 16px 10px; }
  .gmodal { padding: 10px; }
  .gmodal__box { padding: 10px; }
}

@media (max-width: 360px) {
  .brand__name small { display: none; }
  .btn { font-size: .9rem; padding: .75em 1.3em; }
  .auth-card { padding: 24px 18px; }
  .contact-card { padding: 24px 18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}