*{box-sizing:border-box}
:root{
  --bg:#000;
  --fg:#f5f5f5;
  --muted:#bcbcbc;
  --accent:#f5d876;
  --line:#222;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-serif,Georgia,serif;line-height:1.6}
h1,h2{font-weight:600;letter-spacing:0.06em}
a{color:var(--fg);text-decoration:none}
.hero{min-height:75vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 16px;border-bottom:1px solid var(--line)}
.hero .emblem{width:min(220px,60vw);
              height:auto;
              margin-bottom:18px;
}

.hero h1{font-size: clamp(42px, 6vw, 72px); margin: 8px 0 0}
.subtitle{opacity:.85;letter-spacing:.25em;text-transform:uppercase;font-size:.9rem;margin-top:8px}
.tagline{opacity:.8;font-style:italic;margin-top:6px}
main section{max-width:880px;margin:0 auto;padding:56px 20px;border-bottom:1px solid var(--line)}
.manifesto p{margin:10px 0;font-size:1.1rem}
.torch .sub{color:var(--muted);margin-bottom:16px}
.torch-ctrls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#torchBtn{background:var(--accent);color:#1a1a1a;border:0;padding:10px 16px;border-radius:4px;font-weight:600;cursor:pointer}
#torchBtn:active{transform:translateY(1px)}
.count{opacity:.85}
.note{color:var(--muted);font-size:.9rem;margin-top:10px}
.downloads{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.downloads li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:#0a0a0a}
.res-title{opacity:.9}
.btn{border:1px solid var(--fg);padding:8px 12px;border-radius:4px}
.btn.outline{border-color:var(--muted);opacity:.9}
.btn.disabled{opacity:.4;border-color:#444;color:#888;cursor:not-allowed}
.clarify ul{margin:0;padding-left:18px}
.footer{padding:28px 16px;text-align:center;color:var(--muted)}
.small{font-size:.85rem}
@media (prefers-color-scheme: light){
  :root{--bg:#f7f7f7;--fg:#111;--muted:#555;--line:#ddd}
  .downloads li{background:#fff}
}

/* Fullscreen center for splash page */
body.splash {
  min-height: 100vh;
  margin: 0;
  display; grid;
  place-items; center;
  background: #0b0b0b; /* or var(--bg) */
}

/* Make the emblem nicely big and centered on splash */
.splash-emblem {
  display: block;
  width: min(420px, 70vw);
  height: auto;
  margin: 0 auto;
}

/* Kill any default header/hero borders if they leak in */
body.splash header,
body.splash .hero {
  border: 0;
  padding: 0;
}

/* Optional: make it obvious the emblem is clickable */
body.splash a {
  cursor: pointer;
}
/* Lantern Emblem Styling */
.emblem {
  filter: contrast(120%) brightness(120%); /* keep warm color, no grayscale */
  transition: filter 0.6s ease, drop-shadow 0.6s ease;
  display: block;
  margin: 0 auto;
  max-width: 90vw; /* responsive scaling */
height: auto;
  animation: lanternFlicker 4s infinite ease-in-out; 
  drop-shadow; 0 0 25px rgba(255, 200, 120, 0.6); /* soft glow always */
}

.emblem:hover {
  filter: contrast(130%) brightness(135%); /* intensify glow */
  drop-shadow: 0 0 25px rgba(255, 180, 80, 0.9); /* stronger orange glow */
  }

/* Default size for lantern emblem */
.lantern {
  width: min(360px, 80vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Smaller size when inside hero section */
.hero .lantern {
  width: min(220px, 60vw);
}
  
/* lantern-only glow overlay */
.lantern-glow {
  position: absolute;
  top: 53%;  /* adjust until it lines up with your lantern flame */
  left: 63%;  /* adjust until centered inside lantern */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 216, 118, 0.6) 0%, rgba(245, 216, 118, 0) 70%);
  pointer-events: none; /* don't block clicks */
  animation: flicker 4s infinite ease-in-out;
  z-index: 1;
}

/* Flicker baseline */
@keyframes flicker {
  0%  { transform: scale(1);  opacity: 0.8; }
  25% { transform: scale(1.05);  opactity: 0.9; }
  50% { transform: scale(0.95);  opacity: 0.7; }
  75% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}
/* Intensify glow on hover */
.hero:hover .lantern-glow {
  animation: flickerFast 2s infinite ease-in-out;
  background: radial-gradient(circle, rgba(245, 216, 118, 0.9) 0%, rgba(245, 216, 118, 0) 70%);

  /* Stronger hover (works whether you hover the image, the picture wrapper, or a link wrapper) */
  .splash-link:hover .lantern,
  .emblem:hover .lantern,
  .lantern:hover {
    filter: contrast(135%) brightness(150%)
    drop-shadow(0 0 28px rgba(255, 170, 60, .90));
    transform: translateZ(0) scale(1.02);
}

  /* If you're using lantern-glow overlay, intensify it on hover too*/
  .splash-link:hover . lantern-glow,
  .emblem:hover .lantern-glow {
    opacity: 1;
    filter: brightness(130%);
  }

/* Base look: warm, subtle */
.lantern {
  filter: contrast(120%) brightness(115%)
    drop-shadow(0 0 8px rgba(255, 190, 90, .35));
  transition: filter .35s ease, transform .35s ease;
  display: block;
  margin: 0 auto;
  max-width: 90vw;
}

@keyframes flickerFast {
  0%  { transform: scale(1);  opacoty: 0.9; }
  25% { transform: scale(1.1);  opacity: 1; }
  50% { transform: scale(0.9);  opacity: 0.8; }
  75% { transform: scale(1.15);  opacity: 1; }
  100% { transform: scale(1);  opacity: 0.9;}
}

  /* Fullscreen center layout for splash */
  body {
  margin: 0;
}

body.splash {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0b0b0b; 
}

/* Emblem on spalsh page */
.splash-emblem {
  display: block;
  margin: 0 auto;
  width: min(420px, 70vw); /*nicely big, but responsive */
  height: auto;
}