/* ===================================================================
   Volkara — landing
   Palette: GUNMETAL base + brass-GOLD + verdigris PATINA (copper oxide)
   Deliberately cool/industrial — distinct from the warm ember theme.
   =================================================================== */
:root{
  --brass-hi:#f4d98c; --brass:#e0b44c; --brass-base:#c2922e; --brass-deep:#8a6320; --brass-shadow:#5e4316;
  --patina:#54ad9a; --patina-dk:#2f6e62; --patina-hi:#7fd0bf;
  --copper:#b87333; --copper-rivet:#c47a3a;
  --steel:#243038; --steel-dk:#141c22; --gun:#0e1418;
  --ink:#dcd6c2; --ink-dim:#93a39c; --steam:#cfe3dd;
  --bg:#0e1418; --bg2:#162026; --card-line:rgba(138,99,32,.5);
  --gold-rgb:240,217,140; --patina-rgb:84,173,154; --copper-rgb:196,122,58;
  --radius:10px; --maxw:1180px;
  --shadow:0 16px 44px rgba(0,0,0,.6);
  --fd:'Cinzel',Georgia,serif; --fb:'Cardo',Georgia,serif; --ft:'Special Elite',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overscroll-behavior:none;-webkit-overscroll-behavior:none}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(1100px 540px at 50% -8%, rgba(84,173,154,.12), transparent 60%),
    radial-gradient(820px 460px at 88% 12%, rgba(224,180,76,.06), transparent 55%)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brass);color:#1a120a;padding:8px 14px;z-index:200}
.skip-link:focus{left:0}

/* ---------- ornaments ---------- */
.kicker{font-family:var(--ft);text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;color:var(--patina);margin-bottom:12px}
.rule{display:flex;align-items:center;justify-content:center;gap:13px;margin:14px auto}
.rule span{height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--brass-base))}
.rule span:last-child{background:linear-gradient(90deg,var(--brass-base),transparent)}
.rule i{font-style:normal;color:var(--patina);font-size:.95rem;filter:drop-shadow(0 0 7px rgba(var(--patina-rgb),.5))}

/* ---------- buttons (brass plate) ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;font-family:var(--fd);font-weight:700;letter-spacing:.05em;
  cursor:pointer;border:none;border-radius:8px;padding:.7em 1.5em;font-size:.92rem;transition:transform .12s ease,box-shadow .18s ease,filter .15s ease}
.btn-brass{background:linear-gradient(180deg,#f4d98c,#e0b44c 50%,#c2922e);color:#1c1408;border:1px solid #6a4a16;
  text-shadow:0 1px 0 rgba(255,245,220,.4);box-shadow:0 2px 0 #3c2c12,0 0 14px rgba(var(--gold-rgb),.2),inset 0 1px 0 rgba(255,245,220,.55)}
.btn-brass:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 4px 0 #3c2c12,0 0 24px rgba(var(--gold-rgb),.4),inset 0 1px 0 rgba(255,245,220,.6)}
.btn-brass:active{transform:translateY(1px);box-shadow:0 0 16px rgba(var(--gold-rgb),.4),inset 0 2px 5px rgba(60,44,18,.6)}
.btn-ghost{background:linear-gradient(180deg,rgba(36,48,56,.7),rgba(20,28,34,.8));color:var(--brass-hi);border:1px solid var(--patina-dk);box-shadow:inset 0 1px 0 rgba(127,208,191,.08)}
.btn-ghost:hover{border-color:var(--patina);color:var(--patina-hi);transform:translateY(-2px);box-shadow:0 0 18px rgba(var(--patina-rgb),.3)}
.btn-lg{font-size:1.02rem;padding:.85em 1.8em}
.btn-xl{font-size:1.14rem;padding:1em 2.4em}
.btn-sm{font-size:.8rem;padding:.55em 1.1em}

/* ---------- header: asymmetric brass nameplate ----------
   Left = cog emblem + stacked brand lockup. Right = riveted brass nav plate.
   space-between, sticky, condenses on scroll. Deliberately left-weighted. */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(11,16,20,.96),rgba(13,19,24,.8));
  border-bottom:1px solid var(--brass-deep);
  box-shadow:0 1px 0 rgba(127,208,191,.06),0 8px 22px rgba(0,0,0,.35);
  transition:background .2s,box-shadow .2s}
/* a thin brass "pipe" hugging the bottom edge */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--brass-base) 12%,var(--brass-deep) 50%,var(--brass-base) 88%,transparent);
  opacity:.55}
.nav.shrink{background:rgba(10,14,18,.98);box-shadow:0 6px 22px rgba(0,0,0,.5)}

.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:14px 22px;transition:padding .2s}
.nav.shrink .nav-inner{padding:7px 22px}

/* LEFT brand lockup */
.nav-brand{display:flex;align-items:center;gap:12px;text-align:left}
.nav-emblem{display:inline-flex;color:var(--brass);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation:navCog 16s linear infinite;transform-origin:50% 50%;transition:width .2s,height .2s}
.nav-emblem svg{display:block;transition:width .2s,height .2s}
.nav.shrink .nav-emblem svg{width:28px;height:28px}
@keyframes navCog{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.nav-lockup{display:flex;flex-direction:column;line-height:1.05}
.nav-name{font-family:var(--fd);font-weight:900;font-size:1.28rem;letter-spacing:.06em;
  background:linear-gradient(180deg,#fdeecb,var(--brass-hi) 45%,var(--brass-base));
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:font-size .2s}
.nav.shrink .nav-name{font-size:1.12rem}
.nav-sub{font-family:var(--ft);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--patina);margin-top:2px}
.nav.shrink .nav-sub{font-size:.56rem}

/* RIGHT riveted brass nav plate */
.nav-plate{position:relative;display:flex;align-items:center;gap:14px;padding:7px 16px 7px 18px;border-radius:9px;
  border:1px solid var(--brass-deep);
  background:linear-gradient(180deg,rgba(40,52,60,.9),rgba(18,26,31,.92));
  box-shadow:inset 0 1px 0 rgba(190,210,205,.08),inset 0 -2px 5px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4);
  transition:padding .2s}
.nav.shrink .nav-plate{padding:5px 14px 5px 16px}
/* corner rivets on the plate */
.nav-plate::before,.nav-plate::after{content:"";position:absolute;top:5px;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--brass-hi),var(--brass-base) 60%,var(--brass-shadow));box-shadow:0 0 2px rgba(0,0,0,.7)}
.nav-plate::before{left:6px}
.nav-plate::after{right:6px;top:auto;bottom:5px}
.nav-links{display:flex;gap:2px}
.nav-links a{font-family:var(--fd);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);padding:7px 11px;border-radius:5px;transition:color .15s,background .15s}
.nav-links a:hover,.nav-links a.active{color:var(--brass-hi);background:rgba(84,173,154,.14)}
.nav-cta{padding:.5em 1.15em;font-size:.82rem}

.nav-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-burger span{width:24px;height:2px;background:var(--brass-hi);border-radius:2px}

/* ---------- hero (centered banner) ---------- */
.hero{position:relative;text-align:center;padding:92px 22px 100px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:url('assets/menu_bg.png') center/cover;opacity:.26;transform:scale(1.04)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:rgba(20,40,46,.32);mix-blend-mode:color}
.hero-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,18,22,.78),rgba(16,26,31,.55) 45%,var(--bg))}
.hero-inner{max-width:830px;margin:0 auto}
.hero-title{font-family:var(--fd);font-weight:900;font-size:clamp(2.6rem,7vw,5rem);letter-spacing:.04em;
  background:linear-gradient(180deg,#fdeecb,var(--brass-hi) 38%,var(--brass) 70%,var(--brass-base));
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.hero-tag{font-family:var(--fb);font-style:italic;font-size:clamp(1.15rem,2.6vw,1.6rem);color:var(--steam);margin:6px 0 14px}
.hero-lead{font-size:1.08rem;color:var(--ink);max-width:60ch;margin:0 auto 28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---------- sections ---------- */
.section{padding:84px 22px;position:relative}
.section.alt{background:linear-gradient(180deg,rgba(36,48,56,.4),rgba(14,20,24,0))}
.section-head{max-width:680px;margin:0 auto 46px;text-align:center}
.section-head h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:.06em;
  background:linear-gradient(180deg,#fbe8bf,var(--brass) 55%,var(--brass-base));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head .lede{color:var(--ink-dim);font-size:1.05rem;margin-top:6px}

/* ---------- plate cards (corner rivets) ---------- */
.card-grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:18px}
.crops{grid-template-columns:repeat(4,1fr)}
.tools{grid-template-columns:repeat(6,1fr)}
.builds{grid-template-columns:repeat(3,1fr)}
.folk{grid-template-columns:repeat(3,1fr)}
.feature-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plate{position:relative;text-align:center;padding:22px 18px;border:1px solid var(--brass-deep);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--steel),var(--steel-dk));
  box-shadow:inset 0 1px 0 rgba(190,210,205,.06),inset 0 -2px 4px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.45);
  transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease}
.plate:hover{transform:translateY(-5px);border-color:var(--patina);
  box-shadow:inset 0 1px 0 rgba(190,210,205,.08),0 16px 34px rgba(0,0,0,.55),0 0 22px rgba(var(--patina-rgb),.3)}
.card h3{font-family:var(--fd);font-weight:600;color:var(--brass-hi);font-size:1.05rem;margin:12px 0 4px;letter-spacing:.02em}
.card .meta{font-family:var(--ft);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--patina);margin-bottom:8px}
.card .desc{font-size:.9rem;color:var(--ink-dim);line-height:1.55}

/* crop sprites: 7-col growth sheets → ripe rightmost frame, full (no clip) */
.crop-thumb{height:104px;margin:2px auto 8px;background-repeat:no-repeat;background-position:100% 0;image-rendering:pixelated;filter:drop-shadow(0 5px 9px rgba(0,0,0,.5))}
.c-wheat,.c-radish,.c-pepper,.c-cotton{width:104px;background-size:700% 100%}
.c-tomato,.c-corn,.c-onion,.c-coffee{width:52px;background-size:700% 100%}
.c-wheat{background-image:url('assets/crops/wheat.png')}
.c-radish{background-image:url('assets/crops/radish.png')}
.c-pepper{background-image:url('assets/crops/pepper.png')}
.c-cotton{background-image:url('assets/crops/cotton.png')}
.c-tomato{background-image:url('assets/crops/tomato.png')}
.c-corn{background-image:url('assets/crops/corn.png')}
.c-onion{background-image:url('assets/crops/onion.png')}
.c-coffee{background-image:url('assets/crops/coffee.png')}

.tool img{height:58px;width:auto;margin:0 auto 6px;image-rendering:pixelated;filter:drop-shadow(0 5px 8px rgba(0,0,0,.5))}
.tool .desc{font-size:.8rem}
.build-thumb{height:132px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:8px}
.build-thumb img{max-height:128px;max-width:90%;width:auto;image-rendering:pixelated;filter:drop-shadow(0 8px 13px rgba(0,0,0,.5))}

/* NPC portraits: 8-col x 12-row atlases (32x48). Front row = blockRow; walk anim = cols 4-7. */
.npc-portrait{height:123px;width:82px;margin:2px auto 10px;background-repeat:no-repeat;background-size:800% 1200%;
  image-rendering:pixelated;filter:drop-shadow(0 7px 11px rgba(0,0,0,.55));
  animation:npcWalk .62s steps(4) infinite}
@keyframes npcWalk{from{background-position-x:57.143%}to{background-position-x:114.286%}}
.n-barty{background-image:url('assets/npcs/char_male2.png');background-position-y:54.5455%}
.n-hodge{background-image:url('assets/npcs/char_male2.png');background-position-y:0%;animation-delay:-.12s}
.n-flint{background-image:url('assets/npcs/char_male3.png');background-position-y:54.5455%;animation-delay:-.24s}
.n-ashleigh{background-image:url('assets/npcs/char_male4.png');background-position-y:54.5455%;animation-delay:-.36s}
.n-granny{background-image:url('assets/npcs/char_female2.png');background-position-y:81.8182%;animation-delay:-.18s}
.n-vespera{background-image:url('assets/npcs/char_female1.png');background-position-y:81.8182%;animation-delay:-.30s}
.npc h3{font-size:1rem;line-height:1.2}

/* feature plates */
.feature{text-align:center;padding:32px 26px 28px}
.feature h3{position:relative;display:inline-block;font-family:var(--fd);font-weight:600;color:var(--brass-hi);font-size:1.3rem;letter-spacing:.03em;margin-bottom:16px;padding-bottom:12px}
.feature h3::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--patina),var(--brass));box-shadow:0 0 8px rgba(var(--patina-rgb),.4)}
.feature p{color:var(--ink-dim);font-size:.95rem;line-height:1.62;max-width:34ch;margin:0 auto}

/* feature LIST — clean rows, brass→patina accent bar, no boxes/rivets */
.feature-list{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.feat{position:relative;padding:24px 8px 24px 26px;border-bottom:1px solid rgba(138,99,32,.16);transition:background .2s ease}
.feat:nth-last-child(-n+2){border-bottom:none}
.feat::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--brass),var(--patina));transition:.2s ease}
.feat:hover{background:linear-gradient(90deg,rgba(84,173,154,.05),transparent 70%)}
.feat:hover::before{top:18px;bottom:18px;box-shadow:0 0 10px rgba(var(--gold-rgb),.4)}
.feat h3{font-family:var(--fd);font-weight:600;color:var(--brass-hi);font-size:1.18rem;letter-spacing:.03em;margin-bottom:6px;transition:color .2s ease}
.feat:hover h3{color:#fff7e6}
.feat p{color:var(--ink-dim);font-size:.95rem;line-height:1.62}

/* ---------- cta ---------- */
.cta{position:relative;text-align:center;padding:96px 22px 104px;margin-top:28px;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;z-index:-3;background:url('assets/menu_bg.png') center/cover;opacity:.24;transform:scale(1.05)}
.cta::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--bg),rgba(16,26,31,.55) 45%,var(--bg))}
.cta-inner{max-width:760px;margin:0 auto;position:relative}
.cta h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.9rem,4.6vw,3.1rem);color:var(--brass-hi);letter-spacing:.04em;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.cta h2 .gold{background:linear-gradient(180deg,#fdeecb,var(--brass) 55%,var(--brass-base));-webkit-background-clip:text;background-clip:text;color:transparent}
/* brass-riveted boarding plate */
.cta-plate{position:relative;max-width:740px;margin:0 auto;padding:44px 40px 42px;border:1px solid var(--brass-deep);border-radius:14px;
  background:linear-gradient(180deg,rgba(36,48,56,.94),rgba(18,26,31,.96));
  box-shadow:inset 0 1px 0 rgba(190,210,205,.08),0 18px 50px rgba(0,0,0,.6),0 0 26px rgba(var(--patina-rgb),.12)}
/* the route — stops joined by a brass line */
.cta-route{list-style:none;display:flex;justify-content:center;gap:0;margin:24px 0 30px;position:relative}
.cta-route li{flex:1;max-width:200px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 6px}
.cta-route li:not(:last-child)::after{content:"";position:absolute;top:18px;left:50%;width:100%;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--brass-base),var(--brass-deep))}
.cta-route .stop{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:11px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass-base));color:#1c1408;font-family:var(--fd);font-weight:700;border:2px solid var(--brass-deep);box-shadow:0 0 12px rgba(var(--gold-rgb),.3),inset 0 1px 0 rgba(255,245,220,.5)}
.cta-route b{font-family:var(--fd);color:var(--brass-hi);font-size:1rem;font-weight:600}
.cta-route em{font-style:normal;display:block;margin-top:2px;color:var(--ink-dim);font-size:.82rem}
.cta-play{animation:brassPulse 2.6s ease-in-out infinite}
@keyframes brassPulse{0%,100%{box-shadow:0 2px 0 #3c2c12,0 0 16px rgba(var(--gold-rgb),.3),inset 0 1px 0 rgba(255,245,220,.55)}50%{box-shadow:0 4px 0 #3c2c12,0 0 36px rgba(var(--gold-rgb),.6),inset 0 1px 0 rgba(255,245,220,.6)}}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--card-line);padding:34px 22px;background:#0a0e12}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .crops{grid-template-columns:repeat(2,1fr)}
  .tools{grid-template-columns:repeat(3,1fr)}
  .builds,.folk{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr 1fr}
  .nav-plate{background:none;border:none;box-shadow:none;padding:0;gap:0}
  .nav-plate::before,.nav-plate::after{display:none}
  .nav-links{position:fixed;inset:62px 0 auto 0;flex-direction:column;gap:0;background:rgba(11,15,19,.98);border-top:1px solid var(--brass-deep);border-bottom:1px solid var(--brass-deep);padding:8px 16px 16px;transform:translateY(-145%);transition:transform .25s ease;margin:0;z-index:99}
  .nav-links.open{transform:none}
  .nav-links a{padding:14px 8px;border-radius:0;border-bottom:1px solid rgba(84,173,154,.1)}
  .nav-burger{display:flex}
  .nav-cta{display:none}
  .nav-sub{display:none}
}
@media (max-width:560px){
  .section{padding:54px 16px}
  .section-head{margin-bottom:32px}
  .hero{padding:52px 16px 56px}
  .hero-title{font-size:clamp(2.1rem,9.5vw,3.4rem)}
  .hero-tag{font-size:1.12rem}
  .crops{grid-template-columns:repeat(2,1fr);gap:14px}
  .tools{grid-template-columns:repeat(2,1fr);gap:14px}
  .builds,.folk{grid-template-columns:repeat(2,1fr);gap:14px}
  .feature-grid{grid-template-columns:1fr;gap:14px}
  .feature-list{grid-template-columns:1fr;gap:0}
  .feat:nth-last-child(-n+2){border-bottom:1px solid rgba(138,99,32,.16)}
  .feat:last-child{border-bottom:none}
  .card{padding:16px 14px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .cta{padding:66px 16px 76px}
  .cta-plate{padding:34px 20px 32px}
  .cta-route{flex-direction:column;gap:18px}
  .cta-route li{max-width:none}
  .cta-route li:not(:last-child)::after{display:none}
  .cta-play{width:100%;justify-content:center}
}
@media (max-width:400px){
  .crops,.tools{grid-template-columns:1fr 1fr}
  .builds,.folk{grid-template-columns:1fr}
  .nav-brand span{font-size:.92rem}
  .hero{padding:44px 14px 48px}
  .hero-lead{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .cta-play{animation:none}
  .nav-emblem{animation:none}
  .npc-portrait{animation:none;background-position-x:14.286%}
  html{scroll-behavior:auto}
}

/* ============================================================================
   GAME-SYNCED COMPONENTS — boot loader + admin footer + cookie consent + page popup
   Copied 1:1 from the game (index.html / style.css / src/main.js) so the landing
   is visually & behaviourally identical and pulls the SAME admin-managed content.
   The game uses its own steampunk palette CSS variables (--brass-*, --bronze-*,
   etc.); they are redeclared here so this stylesheet stays self-contained.
   ============================================================================ */

/* ---- Steampunk palette used by the copied game rules (from game style.css) -- */
:root{
    --font-display:"Cinzel","Trajan Pro",Georgia,serif;
    --font-body:"Cardo","IM Fell English",Georgia,serif;
    --type-display:"IM Fell English","Cinzel",Georgia,serif;
    --type-body:"Cardo","IM Fell English",Georgia,serif;
    --bronze-dark:#2a1810;
    --bronze-mid:#3d2614;
    --brass-deep:#6a4818;
    --brass-shadow:#5a3a18;
    --brass-base:#a8782a;
    --brass-bright:#d4a040;
    --brass-hilite:#f8d898;
    --copper-rivet:#c8703a;
    --copper-glow:rgba(200,99,58,0.4);
    --copper-glow-strong:rgba(200,112,58,0.65);
    --soot-black:#0f0a06;
    --rivet-hilite:rgba(255,220,160,0.18);
    --inset-shadow:rgba(0,0,0,0.78);
    --brass-stops-safe:var(--brass-hilite) 0%,var(--brass-base) 70%,var(--brass-deep) 100%;
}
@keyframes introFadeIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ===== BOOT LOADER (#font-loader) ===== */
#font-loader{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at center, #1a1208 0%, #0f0a06 55%, #070503 100%);
    transition: opacity .35s ease-out;
    overflow:hidden;
    font-family: var(--font-display, 'Cinzel', serif);
}
#font-loader.loaded{ opacity:0; pointer-events:none; }
.sm-loader-haze{
    position:absolute; inset:-10%;
    background:
        radial-gradient(circle at 20% 30%, rgba(200,160,90,0.06) 0%, transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(120,70,30,0.08) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.4) 60%, transparent 100%);
    filter: blur(2px);
    animation: smHazeDrift 14s ease-in-out infinite alternate;
    pointer-events:none;
}
@keyframes smHazeDrift{
    from{ transform: translate(-2%, -1%) scale(1); opacity:.85; }
    to  { transform: translate(2%, 1%)  scale(1.05); opacity:1;   }
}
.sm-loader-stage{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:22px;
    padding: 28px 36px;
}
.sm-loader-cog{
    filter:
        drop-shadow(0 0 12px rgba(200,150,80,0.25))
        drop-shadow(0 4px 6px rgba(0,0,0,0.7));
    animation: smCogTurn 8s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes smCogTurn{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.sm-loader-bar{
    position:relative;
    width: 220px; height: 12px;
    background: linear-gradient(180deg, #0a0604 0%, #1a1208 100%);
    border: 1.5px solid #3a2410;
    border-radius: 2px;
    box-shadow:
        inset 0 2px 3px rgba(0,0,0,0.85),
        inset 0 -1px 0 rgba(80,50,20,0.25),
        0 1px 0 rgba(120,80,40,0.15);
    overflow:hidden;
}
.sm-loader-bar-fill{
    position:absolute; top:0; bottom:0; left:0;
    width: 35%;
    background: linear-gradient(180deg, #f8d898 0%, #c8a060 45%, #8a5a20 100%);
    border-right: 1px solid #6a4818;
    box-shadow:
        inset 0 1px 0 rgba(255,235,180,0.5),
        0 0 10px rgba(200,150,80,0.5);
    animation: smBarPulse 1.6s ease-in-out infinite;
}
@keyframes smBarPulse{
    0%   { width: 18%; opacity:.85; }
    50%  { width: 78%; opacity:1;   }
    100% { width: 18%; opacity:.85; }
}
.sm-loader-rivet{
    position:absolute; top:50%; transform:translateY(-50%);
    width:5px; height:5px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #f0d090 0%, #8a5a20 60%, #2a1808 100%);
    box-shadow: 0 0 2px rgba(0,0,0,0.8);
}
.sm-loader-rivet--l{ left:-3px; }
.sm-loader-rivet--r{ right:-3px; }
.sm-loader-text{
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 1.4px;
    color: #c8a060;
    text-shadow:
        0 0 10px rgba(200,150,80,0.35),
        0 2px 3px rgba(0,0,0,0.85);
    animation: smTextFlicker 2.2s ease-in-out infinite;
    visibility:hidden;
    position:relative;
}
@keyframes smTextFlicker{ 0%,100%{ opacity:1; } 45%{ opacity:.55; } }
.sm-loader-text::after{
    visibility:visible; position:absolute; inset:0;
    text-align:center;
    content: "Stoking the boilers...";
    animation: smTextSwap 6s steps(1, end) infinite;
}
@keyframes smTextSwap{
    0%   { content: "Stoking the boilers..."; }
    33%  { content: "Lighting the gas-lamps..."; }
    66%  { content: "Wiring the brass cogs..."; }
    100% { content: "Stoking the boilers..."; }
}

/* ===== ADMIN-SYNCED FOOTER (.menu-footer) — "industrial ledger" 3-zone band ===== */
/* No brown panel/border here — the 3-zone content sits directly on the landing's
   cool footer band (.footer #0a0e12, already border-top separated), so it blends
   with the steel/brass palette instead of reading as a warm-brown box. */
.menu-footer{
    position:static;background:none;border-top:none;padding:0;box-sizing:border-box;
    line-height:1.45;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;width:100%;
    max-width:var(--maxw);margin:0 auto;
}
.menu-footer.hidden{display:none}
.menu-footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;width:100%}
.menu-footer-row-top{gap:8px 20px;padding-bottom:9px;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(194,146,46,.5),transparent) 1}

.menu-footer-text,.menu-footer-company,.menu-footer-copy{font-family:var(--type-body);font-size:.8rem;color:rgba(255,220,160,.28);margin:0}
.menu-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin:0}
.menu-footer-links a{font-family:var(--type-body);font-size:.82rem;color:rgba(245,200,66,.6);text-decoration:none;cursor:pointer}
.menu-footer-links a:hover{color:rgba(245,200,66,.95)}
.menu-footer-social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0}
.menu-footer-social a{font-family:var(--type-body);font-size:.8rem;color:rgba(255,220,160,.4);text-decoration:none}
.menu-footer-social a:hover{color:rgba(255,220,160,.7)}
.menu-footer-company{color:rgba(255,220,160,.42);font-size:.76rem;line-height:1.7}
.menu-footer-company a{color:rgba(245,200,66,.55);text-decoration:none}
.menu-footer-copy{font-size:.76rem}
.menu-footer-logos{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center;margin:0 0 2px}
.menu-footer-logos img{height:18px;opacity:.5}

/* stack the ledger into one centered column on narrow screens */
@media (max-width:760px){
    .menu-footer{gap:14px;padding:8px 12px;text-align:center}
    .menu-footer-logos{justify-content:center}
}

/* ===== COOKIE CONSENT (.cookie-consent) ===== */
.cookie-consent{position:fixed;inset:0;z-index:10004;display:flex;align-items:flex-end;justify-content:center;padding-bottom:24px}
.cookie-consent.hidden{display:none}
.cookie-consent-overlay{position:absolute;inset:0;background:
    radial-gradient(ellipse at center, rgba(15,10,6,.55), rgba(15,10,6,.82) 80%),
    rgba(10,8,4,.4);
    backdrop-filter:blur(4px) saturate(.85);-webkit-backdrop-filter:blur(4px) saturate(.85)}
.cookie-consent-panel,.page-popup-panel{
    position:relative;max-height:85vh;display:flex;flex-direction:column;animation:introFadeIn .3s ease-out;color:#f0d8a8;
    background:
        radial-gradient(circle at 10px 10px, var(--brass-hilite) 0 1.4px, var(--brass-base) 1.4px 2.6px, var(--brass-deep) 2.6px 3.4px, var(--bronze-dark) 3.4px 4px, transparent 4.2px) no-repeat 0 0 / 22px 22px,
        radial-gradient(circle at calc(100% - 10px) 10px, var(--brass-hilite) 0 1.4px, var(--brass-base) 1.4px 2.6px, var(--brass-deep) 2.6px 3.4px, var(--bronze-dark) 3.4px 4px, transparent 4.2px) no-repeat 100% 0 / 22px 22px,
        radial-gradient(circle at 10px calc(100% - 10px), var(--brass-hilite) 0 1.4px, var(--brass-base) 1.4px 2.6px, var(--brass-deep) 2.6px 3.4px, var(--bronze-dark) 3.4px 4px, transparent 4.2px) no-repeat 0 100% / 22px 22px,
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--brass-hilite) 0 1.4px, var(--brass-base) 1.4px 2.6px, var(--brass-deep) 2.6px 3.4px, var(--bronze-dark) 3.4px 4px, transparent 4.2px) no-repeat 100% 100% / 22px 22px,
        radial-gradient(circle at 22% 28%, rgba(0,0,0,.18) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 68%, rgba(0,0,0,.14) 0 1px, transparent 2px),
        linear-gradient(180deg, var(--bronze-mid) 0%, var(--bronze-dark) 55%, var(--soot-black) 100%);
    border:3px solid var(--bronze-dark);border-top-color:var(--brass-shadow);border-bottom-color:var(--brass-shadow);border-radius:10px;
    box-shadow:
        inset 0 1px 0 var(--rivet-hilite),
        inset 0 -1px 0 var(--inset-shadow),
        inset 0 0 0 1px var(--brass-deep),
        inset 0 6px 14px rgba(0,0,0,.42),
        0 2px 0 var(--soot-black),
        0 6px 18px rgba(0,0,0,.65);
}
.cookie-consent-panel{width:640px;max-width:92vw}
.cookie-consent-view{display:flex;flex-direction:column;min-height:0;flex:1}
.cookie-consent-view.hidden{display:none}
.cookie-consent-header{padding:16px 20px 10px;border-bottom:1px solid var(--brass-deep);box-shadow:inset 0 1px 0 var(--rivet-hilite)}
.cookie-consent-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--brass-hilite);margin:0;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.cookie-consent-body{padding:14px 20px;overflow-y:auto;font-family:var(--font-body);font-size:.85rem;color:#f0d8a8;line-height:1.5}
.cookie-consent-msg{font-size:.85rem;margin:0 0 10px;line-height:1.7;color:#f0d8a8}
.cookie-consent-submsg{font-size:.78rem;color:#ffe0a0;margin:14px 0 8px;font-weight:600}
.cookie-consent-link{color:var(--brass-hilite);text-decoration:underline;cursor:pointer}
.cookie-consent-link:hover{color:#ffe8b8}
.cookie-consent-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--brass-deep);box-shadow:inset 0 1px 0 var(--rivet-hilite)}
.cookie-consent-actions .cookie-consent-btn{flex:1 1 auto;white-space:nowrap;text-align:center}
.cookie-consent-btn{font-family:'Cinzel',Georgia,serif;font-size:.82rem;letter-spacing:.015em;padding:8px 13px;white-space:nowrap;border-radius:5px;cursor:pointer;
    transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
    background:linear-gradient(180deg, var(--bronze-mid) 0%, var(--bronze-dark) 55%, var(--soot-black) 100%);
    border:2px solid var(--brass-deep);color:var(--brass-hilite);text-shadow:1px 1px 0 rgba(0,0,0,.7);
    box-shadow:inset 0 1px 0 var(--rivet-hilite),inset 0 -1px 0 var(--inset-shadow),0 2px 0 var(--soot-black),0 3px 6px rgba(0,0,0,.5)}
.cookie-consent-btn:hover{border-color:var(--brass-base);color:#fff0c8;transform:translateY(-1px);
    box-shadow:inset 0 1px 0 var(--rivet-hilite),inset 0 -1px 0 var(--inset-shadow),0 2px 0 var(--soot-black),0 0 8px rgba(168,120,42,.45)}
.cookie-consent-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 4px var(--inset-shadow),0 1px 0 var(--soot-black)}
.cookie-consent-btn.primary{background:linear-gradient(180deg, var(--brass-stops-safe));border:2px solid var(--bronze-dark);color:var(--bronze-dark);
    text-shadow:0 1px 0 var(--brass-hilite),0 -1px 0 var(--brass-shadow);
    box-shadow:inset 0 1px 0 var(--rivet-hilite),inset 0 -2px 4px var(--inset-shadow),0 2px 0 var(--soot-black),0 3px 6px rgba(0,0,0,.5)}
.cookie-consent-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px);
    box-shadow:inset 0 1px 0 var(--rivet-hilite),inset 0 -2px 4px var(--inset-shadow),0 2px 0 var(--soot-black),0 0 10px var(--copper-glow),0 3px 8px rgba(0,0,0,.55)}
.cookie-consent-btn.primary:active{transform:translateY(1px);
    box-shadow:inset 0 1px 3px var(--inset-shadow),inset 0 -1px 0 var(--rivet-hilite),0 1px 0 var(--soot-black),0 0 14px var(--copper-glow-strong)}
.cookie-category{margin:10px 0;padding:10px 12px;border-radius:6px;
    background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.42));border:1px solid var(--brass-deep);
    box-shadow:inset 0 1px 0 var(--rivet-hilite),inset 0 -1px 0 var(--inset-shadow)}
.cookie-category-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.cookie-category-title{font-family:var(--type-display);font-size:.78rem;color:#ffe0a0;font-weight:600;flex:1}
.cookie-category-desc{font-family:var(--font-body);font-size:.78rem;color:#f0d8a8;margin:0;line-height:1.5}
.cookie-switch{position:relative;display:inline-block;width:38px;height:20px;flex-shrink:0;cursor:pointer}
.cookie-switch input{opacity:0;width:0;height:0}
.cookie-slider{position:absolute;inset:0;background:rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.5);border-radius:20px;transition:background .2s}
.cookie-slider::before{content:'';position:absolute;height:14px;width:14px;left:2px;top:2px;background:#d9b070;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.cookie-switch input:checked + .cookie-slider{background:linear-gradient(180deg,#4a7a28,#356018)}
.cookie-switch input:checked + .cookie-slider::before{transform:translateX(18px);background:#ffe0a0}
.cookie-switch.disabled{cursor:not-allowed;opacity:.7}
.cookie-switch.disabled .cookie-slider{background:linear-gradient(180deg,#4a7a28,#356018)}
.cookie-switch.disabled .cookie-slider::before{transform:translateX(18px);background:#ffe0a0}

/* ===== STATIC PAGE POPUP (#page-popup) ===== */
#page-popup{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center}
#page-popup.hidden{display:none}
.page-popup-panel{width:600px;max-width:90vw;max-height:80vh}
.confirm-overlay{position:absolute;inset:0;
    background:radial-gradient(ellipse at center, rgba(15,10,6,.55), rgba(15,10,6,.82) 80%), rgba(10,8,4,.4);
    backdrop-filter:blur(4px) saturate(.85);-webkit-backdrop-filter:blur(4px) saturate(.85)}
.page-popup-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--brass-deep);box-shadow:inset 0 1px 0 var(--rivet-hilite)}
.page-popup-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--brass-hilite);margin:0;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.page-popup-body{padding:16px 20px;overflow-y:auto;font-family:var(--font-body);font-size:.85rem;color:#f0d8a8;line-height:1.5}
.page-popup-body h1,.page-popup-body h2,.page-popup-body h3,.page-popup-body h4,.page-popup-body h5,.page-popup-body h6{color:var(--brass-hilite);margin:12px 0 6px;line-height:1.3}
.page-popup-body h1{font-size:.92rem}.page-popup-body h2{font-size:.88rem}.page-popup-body h3{font-size:.82rem}
.page-popup-body h4,.page-popup-body h5,.page-popup-body h6{font-size:.78rem}
.page-popup-body p{margin:0 0 8px;font-size:inherit}
.page-popup-body a{color:var(--brass-hilite);text-decoration:underline}
.page-popup-body ul,.page-popup-body ol{margin:0 0 8px;padding-left:18px;font-size:inherit}
.page-popup-body li{margin:0 0 4px;font-size:inherit;line-height:1.6}
.page-popup-body strong,.page-popup-body b{color:#fff0c8;font-weight:600}
.page-popup-body em,.page-popup-body i{font-style:italic}
.page-popup-body blockquote{margin:8px 0;padding:4px 0 4px 10px;border-left:2px solid rgba(255,224,160,.35);color:rgba(255,230,180,.7)}
.page-popup-body hr{border:0;border-top:1px solid rgba(255,224,160,.2);margin:12px 0}
.page-popup-body table{width:100%;border-collapse:collapse;margin:8px 0;font-size:inherit}
.page-popup-body th,.page-popup-body td{border:1px solid rgba(255,224,160,.25);padding:4px 6px;text-align:left}
.page-popup-body *{max-width:100%}
.page-popup-body img{height:auto}
.btn-x{width:28px;height:28px;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;
    background:linear-gradient(180deg,#e04848,#c03030);color:#fff;border:2px solid #802020;border-radius:4px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #601818,inset 0 1px 0 rgba(255,255,255,.15);transition:all .1s}
.btn-x:hover{background:linear-gradient(180deg,#f05858,#d84040);transform:translateY(-1px)}

@media (max-width:560px){
    .cookie-consent-panel{width:94vw;max-height:90vh}
    .cookie-consent-actions{flex-direction:column;align-items:stretch}
    .cookie-consent-actions .cookie-consent-btn{width:100%}
}