/* Consolidated from inline <style> in templates/layout.php. ASCII only. */
@font-face{font-family:'Noto Color Emoji';src:url('/fonts/NotoColorEmoji.v2.woff2') format('woff2');font-display:swap;}
@font-face {
  font-family: 'Jersey10';
  src: url('/fonts/Jersey10-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Micro5';
  src: url('/fonts/Micro5Charted-Regular.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  background: #0b0b10;
  color: #e6e6f0;
  /* Prose uses a readable monospace; the pixel fonts (Jersey10 / Micro5) are for
     display headings + tiny accents only. Micro5 at body size reads like a
     captcha, so it is NOT the prose default. */
  font-family: 'Courier New', ui-monospace, Consolas, monospace, "Noto Color Emoji";
}

a { color: #ffd24e; text-decoration: none; border-bottom: 1px dotted #ffd24e44; }
a:hover { color: #fff; border-bottom-color: #fff; }

/* --- Hero ---- */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background:
    linear-gradient(180deg, rgba(11,11,16,.55) 0%, rgba(11,11,16,.85) 70%, #0b0b10 100%),
    url('/img/hero_title.png') center/cover no-repeat;
  image-rendering: pixelated;
  border-bottom: 2px solid #1a1a22;
}
.hero .inner { max-width: 800px; width: 100%; position: relative; z-index: 2; }
.hero .sprite {
  width: 128px; height: 128px;
  margin: 0 auto 24px;
  background: url('/img/mrstump_128.png') center/contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgba(255,210,80,.25));
  animation: bob 1.8s ease-in-out infinite alternate;
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

h1 {
  font-family: 'Jersey10', 'Courier New', monospace;
  font-size: clamp(48px, 11vw, 110px);
  font-weight: normal;
  letter-spacing: .04em;
  color: #ffd24e;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 #533a06, 0 0 20px rgba(255,210,80,.3);
  margin: 0 0 6px 0;
  line-height: .95;
}
.tagline {
  font-family: 'Jersey10', 'Courier New', monospace;
  font-size: clamp(15px, 2.4vw, 21px);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #c7ccdd;
  text-shadow: 0 2px 4px rgba(0,0,0,.85);
  margin: 0 0 24px;
}
.blurb {
  font-family: 'Courier New', ui-monospace, Consolas, monospace;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.65;
  color: #e3e5ee;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  max-width: 620px;
  margin: 0 auto 28px;
}
.cta {
  display: inline-block;
  padding: 12px 22px;
  background: #ffd24e;
  color: #0b0b10;
  font-family: 'Jersey10', monospace;
  font-size: clamp(18px, 3vw, 22px);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  border-bottom: 3px solid #c39935;
  cursor: pointer;
  text-decoration: none;
}
.cta:hover { background: #fff; color: #000; border-bottom-color: #999; }
.cta + .cta { margin-left: 10px; }
.cta.ghost { background: transparent; color: #ffd24e; border: 2px solid #ffd24e; border-bottom-width: 2px; padding: 10px 20px; }
.cta.ghost:hover { background: #ffd24e; color: #0b0b10; }
.cta.discord { background: #5865F2; color: #fff; border-bottom: 3px solid #3a45c7; }
.cta.discord:hover { background: #6c78ff; color: #fff; border-bottom-color: #4a55d7; }

/* --- Sections ---- */
section.block {
  max-width: 920px;
  margin: 0 auto;
  padding: 64px 24px;
}
section.block h2 {
  font-family: 'Jersey10', monospace;
  font-size: clamp(34px, 6vw, 56px);
  color: #ffd24e;
  font-weight: normal;
  letter-spacing: .04em;
  margin: 0 0 24px;
  text-shadow: 2px 2px 0 #000;
}
section.block p {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.65;
  color: #cfd1dc;
  margin: 12px 0;
}
section.block + section.block { border-top: 1px solid #1a1a22; }

.intro-quote {
  font-family: 'Jersey10', monospace;
  font-size: clamp(20px, 3vw, 26px);
  color: #c8b27a;
  background: #14141c;
  border-left: 4px solid #ffd24e;
  padding: 14px 18px;
  margin: 22px 0;
  letter-spacing: .04em;
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-top: 22px; }
.facts .fact { background:#14141c; border:1px solid #2a2a34; padding:14px; }
.facts .fact .k { font-size:11px; letter-spacing:.18em; color:#7a7d92; text-transform:uppercase; }
.facts .fact .v { font-family:'Jersey10', monospace; font-size:24px; color:#ffd24e; margin-top:4px; }

/* --- Demo block ---- */
.demo {
  background: #11111a;
  border: 1px solid #2a2a34;
  padding: 18px;
  margin: 22px 0;
}
.demo h3 { font-family:'Jersey10', monospace; font-size:24px; color:#fff; margin:0 0 8px; font-weight:normal; }
.demo .note { font-size:13px; color:#7a7d92; margin-top:8px; }

/* --- Press kit ---- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 22px 0;
}
.press-grid img {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;
  border: 1px solid #2a2a34;
}
.press-download {
  display: inline-block;
  padding: 10px 18px;
  background: #14141c;
  border: 1px solid #ffd24e;
  color: #ffd24e;
  font-family: 'Jersey10', monospace;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.press-download:hover { background: #ffd24e; color: #0b0b10; }

/* --- Contact form ---- */
form.contact { background:#11111a; border:1px solid #2a2a34; padding:22px; }
form.contact label { display:block; font-size:12px; color:#7a7d92; letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px; }
form.contact input, form.contact textarea {
  width:100%; padding:10px;
  background:#0b0b10; color:#e6e6f0;
  border:1px solid #2a2a34;
  font-family:'Courier New', ui-monospace, Consolas, monospace;
  font-size:16px;
  margin-bottom:14px;
}
form.contact input:focus, form.contact textarea:focus { border-color:#ffd24e; outline:none; }
form.contact textarea { min-height:140px; resize:vertical; }
form.contact button {
  font-family:'Jersey10', monospace;
  font-size:22px;
  background:#ffd24e; color:#0b0b10;
  padding:10px 24px; border:none;
  border-bottom:3px solid #c39935;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
}
form.contact button:hover { background:#fff; }
form.contact .hp { position:absolute; left:-9999px; }
.cf-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.flash { padding:12px; margin-bottom:14px; font-size:15px; }
.flash.ok  { background:#143; color:#cfeacc; border-left:4px solid #6c6; }
.flash.err { background:#411; color:#fbb; border-left:4px solid #c66; }

/* --- FAQ accordion (/faq) ---- */
.faq-wrap{display:grid;gap:12px;padding:10px 0 20px;max-width:820px;margin:0 auto;interpolate-size:allow-keywords}
.faq-item{border:1px solid #2a2a34;background:#11111a;overflow:hidden}
.faq-item[open]{border-color:#ffd24e;box-shadow:0 10px 30px rgba(255,210,80,.07)}
/* Smooth slide-open for the native <details> content (Chromium 2026+; degrades
   to an instant toggle on browsers without ::details-content/interpolate-size). */
.faq-item::details-content{block-size:0;overflow:hidden;
  transition:block-size .32s ease,content-visibility .32s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;font-family:'Jersey10',monospace;font-size:clamp(18px,3vw,24px);letter-spacing:.03em;color:#ffd24e;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-mark{flex:0 0 18px;width:18px;height:18px;position:relative}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:#ffd24e;transition:.2s}
.faq-mark::before{top:8px;left:0;width:18px;height:3px}
.faq-mark::after{top:0;left:8px;width:3px;height:18px}
.faq-item[open] .faq-mark::after{transform:rotate(90deg);opacity:0}
.faq-body{padding:0 20px 20px;color:#cfd1dc;line-height:1.65;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease .08s,transform .4s ease .08s}
.faq-item[open] .faq-body{opacity:1;transform:translateY(0)}
.faq-body p{margin:0}

/* --- Footer ---- */
footer {
  border-top: 2px solid #1a1a22;
  padding: 32px 24px;
  text-align: center;
  color: #5d6377;
  font-size: 13px;
  letter-spacing: .08em;
}
footer .sig { margin: 6px 0; }
footer a { color: #9aa0b4; padding: 4px 10px; display: inline-block; }
footer a:hover { color: #ffd24e; }

/* --- Tiny screens ---- */
@media (max-width: 520px) {
  h1 { font-size: 56px; }
  .cta + .cta { margin-left: 0; margin-top: 10px; }
  section.block { padding: 44px 18px; }
}

/* --- Nav bar ---- */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: #11111a;
  border-bottom: 2px solid #ffd24e;
  image-rendering: pixelated;
  flex-wrap: wrap;
}
.topnav .brand {
  font-family: 'Jersey10', monospace;
  font-size: clamp(16px, 3vw, 22px);
  letter-spacing: .06em;
  color: #ffd24e;
  text-shadow: 2px 2px 0 #000;
  border-bottom: none;
  white-space: nowrap;
}
.topnav .navmenu { position: relative; }
.topnav .navmenu-btn {
  font-family: 'Jersey10', monospace;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #0b0b10;
  color: #ffd24e;
  border: 2px solid #ffd24e;
  padding: 7px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topnav .navmenu-btn:hover { background: #ffd24e; color: #0b0b10; }
.topnav .navmenu-btn svg { width: 10px; height: 10px; }
.topnav .navmenu-list {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 4px;
  background: #0b0b10;
  border: 2px solid #ffd24e;
  min-width: 160px;
  display: none;
  z-index: 50;
  padding: 0;
  list-style: none;
}
.topnav .navmenu.open .navmenu-list { display: block; }
.topnav .navmenu-list li { border-bottom: 1px solid #2a2a34; }
.topnav .navmenu-list li:last-child { border-bottom: none; }
.topnav .navmenu-list a {
  display: block;
  padding: 9px 14px;
  font-family: 'Courier New', ui-monospace, Consolas, monospace;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffd24e;
  border-bottom: none;
}
.topnav .navmenu-list a:hover { background: #ffd24e; color: #0b0b10; }
.nav-mlsub{display:flex;align-items:center;gap:6px;margin-left:auto;font-family:'Courier New',ui-monospace,Consolas,monospace}
.nav-mlsub input[type=email]{padding:7px 10px;border:2px solid #ffd24e;background:#0b0b10;color:#e6e6f0;font-family:'Courier New',ui-monospace,Consolas,monospace;font-size:14px;width:160px}
.nav-mlsub input[type=email]::placeholder{color:#7a7d92}
.nav-mlsub input[type=email]:focus{outline:none;border-color:#fff}
.nav-mlsub button{padding:7px 14px;border:none;border-bottom:3px solid #c39935;background:#ffd24e;color:#0b0b10;font-family:'Jersey10',monospace;font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.nav-mlsub button:hover{background:#fff}
.nav-mlsub button:disabled{opacity:.6;cursor:default}
.nav-mlsub-msg{color:#9aa0b4;font-size:11px;max-width:120px;line-height:1.2}
.nav-mlsub-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width: 700px) {
  .nav-mlsub{display:none}
}

@media (min-width:760px){
  .topnav .navmenu-btn{display:none}
  .topnav .navmenu-list{position:static;display:flex;flex-wrap:wrap;align-items:center;margin-top:0;background:transparent;border:none;min-width:0;gap:2px}
  .topnav .navmenu-list li{border-bottom:none}
  .topnav .navmenu-list a{padding:7px 10px;white-space:nowrap;border:2px solid transparent}
  .topnav .navmenu-list a:hover{background:#ffd24e;color:#0b0b10}
}

/* themed-scrollbar v1 (mrstumps.com) */
* { scrollbar-width: thin; scrollbar-color: #ffd24e #11111a; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #11111a; }
::-webkit-scrollbar-thumb { background: #ffd24e; border-radius: 7px; border: 2px solid #11111a; }
::-webkit-scrollbar-thumb:hover { background: #ffe27a; }
::-webkit-scrollbar-corner { background: #11111a; }