/* Armored Kitten ($ARMORED): community.stonkbuilder.com/creator/armoredkitten (app/armoredkitten_page.py) */
:root {
  --paper: #efe5cf;
  --paper-2: #e4d7b8;
  --paper-3: #d8c79f;
  --ink: #17130e;
  --ink-2: #2a241b;
  --iron: #6f7378;
  --bow: #f3a9b9;
  --bow-deep: #d9738c;
  --gold: #d6a23e;
  --moss: #5b6b3a;
  --text-muted: #5c5243;
  --meme: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Heavy", "Arial Black", sans-serif;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hard: 6px 6px 0 var(--ink);
  --max: 1180px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  overflow-x: hidden;
  /* the faint texture of cheap parchment */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120, 90, 40, .08), transparent 45%);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--bow-deep); outline-offset: 3px; }

/* --- StonkBuilder strip + header ------------------------------------------------ */
.sb-strip { background: var(--ink); color: #cdbf9f; font-size: 13px; }
.sb-strip-inner { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.sb-strip a { color: #f1e6cc; text-decoration: none; }
.sb-strip a:hover { text-decoration: underline; }
.ak-header { border-bottom: 3px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.ak-header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.ak-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.ak-brand img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--bow); }
.ak-brand strong { display: block; font: 25px/1 var(--meme); text-transform: uppercase; letter-spacing: .01em; }
.ak-brand small { display: block; font: 700 12px/1.2 var(--sans); letter-spacing: .12em; color: var(--bow-deep); }
.ak-nav { display: flex; gap: 22px; font-weight: 700; font-size: 15px; }
.ak-nav a { text-decoration: none; padding: 4px 0; border-bottom: 3px solid transparent; }
.ak-nav a:hover { border-bottom-color: var(--bow-deep); }

/* --- buttons + stickers ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px; border: 3px solid var(--ink); border-radius: 0;
  font: 21px/1 var(--meme); text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  cursor: pointer; box-shadow: var(--hard); transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-pink { background: var(--bow); color: var(--ink); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ghost-light { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 6px 6px 0 var(--bow-deep); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: 18px; box-shadow: 4px 4px 0 var(--bow-deep); }
.sticker {
  position: absolute; z-index: 2; padding: 8px 12px; background: var(--bow); color: var(--ink);
  border: 3px solid var(--ink); font: 19px/1 var(--meme); text-transform: uppercase; text-align: center;
  box-shadow: 4px 4px 0 var(--ink);
}
.sticker::before { /* tape */
  content: ""; position: absolute; left: 50%; top: -14px; width: 54px; height: 20px; translate: -50% 0; rotate: -4deg;
  background: rgba(240, 232, 200, .78); border: 1px solid rgba(0, 0, 0, .12);
}

/* --- hero ------------------------------------------------------------------------ */
.hero { padding: 28px 0 46px; }
.hero-frame { position: relative; margin: 0; border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); background: var(--ink); }
.hero-frame img { width: 100%; aspect-ratio: 1672 / 941; object-fit: cover; }
.bubble {
  position: absolute; left: 29%; top: 63%; max-width: 20%; margin: 0; padding: 12px 16px;
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 22px;
  font: 600 clamp(13px, 1.25vw, 17px)/1.3 var(--sans); rotate: -2deg;
}
.bubble b { font-weight: 800; color: var(--bow-deep); }
.bubble::after { /* the tail, pointing at the kitten */
  content: ""; position: absolute; right: -20px; top: 38%; width: 24px; height: 22px; background: #fff;
  border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: skewY(18deg);
}
.sticker-hero { right: -14px; top: -18px; rotate: 7deg; font-size: 20px; }
.hero-bar { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; margin-top: 34px; }
.hero-line { margin: 0; font: 400 clamp(22px, 2.6vw, 31px)/1.25 var(--serif); }
.hero-line em { font-style: italic; background: linear-gradient(transparent 62%, var(--bow) 62%); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.ca-chip {
  grid-column: 1 / -1; justify-self: start; display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 8px 14px 8px 8px; border: 2px dashed var(--ink); background: var(--paper-2); font-size: 15px;
}
.ca-chip > .ca-label { flex: none; padding: 3px 8px; background: var(--ink); color: var(--paper); font: 16px/1 var(--meme); letter-spacing: .05em; }
.ca-chip code { font-size: 13px; word-break: break-all; }

/* --- marquee --------------------------------------------------------------------- */
.marquee-wrap { overflow: hidden; padding: 14px 0; }
.marquee { overflow: hidden; background: var(--ink); color: var(--paper); border-block: 3px solid var(--ink); rotate: -1.2deg; margin: 0 -12px; }
.marquee-track { display: flex; align-items: center; gap: 22px; width: max-content; padding: 12px 0; animation: crawl 38s linear infinite; }
.marquee-track span { font: 26px/1 var(--meme); text-transform: uppercase; white-space: nowrap; letter-spacing: .02em; }
.marquee .paw { width: 22px; height: 22px; color: var(--bow); flex: none; }
@keyframes crawl { to { transform: translateX(-50%); } }

/* --- section heads --------------------------------------------------------------- */
section { scroll-margin-top: 80px; }
.lore, .memes, .code, .token { padding: 88px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 40px; flex-wrap: wrap; margin-bottom: 34px; }
.display {
  margin: 0; font: clamp(50px, 8vw, 104px)/.9 var(--meme); text-transform: uppercase; letter-spacing: .005em;
  color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink);
}
.aside { margin: 0 0 6px; max-width: 34ch; font: italic 19px/1.4 var(--serif); color: var(--text-muted); }

/* --- the lore: the film and three lines -------------------------------------------- */
.lore-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.film { position: relative; margin: 0; background: var(--ink); border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.lore-beats { margin: 0 0 22px; font: clamp(34px, 3.6vw, 52px)/.98 var(--meme); text-transform: uppercase; }
.lore-beats span { display: block; }
.lore-beats span:last-child { color: var(--bow-deep); }
.lore-note { margin: 0 0 16px; font: 20px/1.5 var(--serif); }
.lore-hint { display: inline-block; margin: 0; padding: 6px 12px; border: 2px dashed var(--ink); font: 700 14px/1.3 var(--sans); rotate: -1.5deg; }
.film figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; color: var(--paper); font: italic 18px/1.4 var(--serif); }
.film-tag { padding: 4px 10px 3px; background: var(--bow); color: var(--ink); font: normal 18px/1 var(--meme); text-transform: uppercase; letter-spacing: .03em; }

/* --- meme wall -------------------------------------------------------------------- */
.memes { background: var(--ink-2); color: var(--paper); background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 14px 14px; }
.memes .aside { color: #cdbf9f; }
.meme-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px 28px; align-items: start; }
.meme { position: relative; margin: 0; padding: 10px 10px 0; background: #f7f1e3; border: 3px solid #000; box-shadow: 8px 8px 0 #000; grid-column: span 2; transition: rotate .2s ease; }
.meme::before { content: ""; position: absolute; left: 50%; top: -12px; width: 70px; height: 22px; translate: -50% 0; rotate: 3deg; background: rgba(243, 169, 185, .8); }
.meme-1 { rotate: -2deg; }
.meme-2 { rotate: 1.5deg; margin-top: 28px; }
.meme-3 { rotate: -1deg; }
.meme-4 { grid-column: span 2; rotate: 1deg; }
.meme-5 { grid-column: span 4; rotate: -1.2deg; margin-top: 30px; }
.meme:hover { rotate: 0deg; z-index: 2; }
.meme figcaption { display: flex; gap: 10px; padding: 10px 0 12px; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); text-decoration: none; font: 18px/1 var(--meme); text-transform: uppercase;
}
.chip:hover { background: var(--bow); }
.chip-x { background: var(--ink); color: var(--paper); }
.chip-x:hover { background: var(--ink-2); color: var(--bow); }

/* --- meme forge ------------------------------------------------------------------- */
.forge { padding: 88px 0; background: var(--bow); border-block: 4px solid var(--ink); }
.forge .display { color: var(--paper); }
.forge .aside { color: var(--ink-2); }
.forge-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: start; }
.forge-canvas { border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); background: var(--ink); }
.forge-canvas canvas { display: block; width: 100%; height: auto; }
.forge-controls { display: grid; gap: 22px; }
.forge-controls fieldset { margin: 0; padding: 18px; border: 3px solid var(--ink); background: var(--paper); }
.forge-controls legend { padding: 2px 10px; background: var(--ink); color: var(--paper); font: 20px/1.1 var(--meme); text-transform: uppercase; }
.tpl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tpl { position: relative; cursor: pointer; text-align: center; font: 700 12px/1.2 var(--sans); }
.tpl input { position: absolute; opacity: 0; }
.tpl img { width: 72px; height: 72px; object-fit: cover; border: 3px solid var(--ink); margin-bottom: 4px; }
.tpl input:checked + img { outline: 4px solid var(--bow-deep); outline-offset: 2px; }
.tpl input:focus-visible + img { outline: 4px solid var(--ink); outline-offset: 2px; }
.field { display: grid; gap: 5px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.field input { width: 100%; min-height: 46px; padding: 8px 12px; border: 3px solid var(--ink); background: #fff; font: 22px/1.1 var(--meme); text-transform: uppercase; color: var(--ink); }
.forge-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hint { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }

/* --- the code --------------------------------------------------------------------- */
.code-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: center; }
.code-art { position: relative; margin: 0; border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); rotate: -2deg; }
.sticker-code { left: -18px; bottom: 34px; rotate: -8deg; font-size: 17px; background: var(--paper); }
.scroll { padding: 36px 40px; background: var(--paper-2); border: 3px solid var(--ink); box-shadow: inset 0 0 0 8px var(--paper-2), inset 0 0 0 10px var(--paper-3); }
.scroll h2 { margin: 0 0 22px; font: 700 clamp(30px, 3.8vw, 46px)/1.05 var(--serif); letter-spacing: -.01em; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rules li { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; font: 18px/1.45 var(--serif); }
.rules li strong { font-weight: 700; }
.numeral { grid-row: span 2; font: 700 26px/1 var(--serif); color: var(--bow-deep); }

/* --- road map ---------------------------------------------------------------------- */
.roadmap { padding: 88px 0; background: var(--paper); border-top: 4px solid var(--ink); }
.road { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.road::before { /* the dotted trail the chapters sit on */
  content: ""; position: absolute; left: 4%; right: 4%; top: 46px; border-top: 4px dashed var(--ink); z-index: 0;
}
.chapter { position: relative; z-index: 1; padding: 22px 20px 20px; background: #f7f0de; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.chapter:nth-child(odd) { rotate: -1deg; }
.chapter:nth-child(even) { rotate: 1deg; margin-top: 34px; }
.chapter-no { margin: 0; font: italic 16px/1.2 var(--serif); color: var(--text-muted); }
.chapter h3 { margin: 4px 0 10px; font: 30px/1 var(--meme); text-transform: uppercase; letter-spacing: .01em; }
.status { display: inline-block; padding: 4px 10px 3px; border: 2px solid var(--ink); font: 16px/1 var(--meme); text-transform: uppercase; letter-spacing: .03em; }
.status-done { background: var(--moss); color: #f3ecd6; }
.status-next { background: var(--bow); }
.status-later { background: var(--paper-2); }
.chapter ul { margin: 14px 0 0; padding: 0 0 0 18px; display: grid; gap: 8px; font: 16px/1.4 var(--serif); }
.chapter-done ul { list-style: "✓  "; }
.chapter-done li::marker { color: var(--moss); font-weight: 700; }

/* --- merch & events ---------------------------------------------------------------- */
.merch { padding: 88px 0; background: var(--ink-2); color: var(--paper); border-top: 4px solid var(--ink); }
.merch .aside { color: #cdbf9f; }
.merch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.merch-item { padding: 18px 18px 20px; background: #f7f1e3; color: var(--ink); border: 3px solid #000; box-shadow: 8px 8px 0 #000; }
.merch-item h3 { margin: 16px 0 6px; font: 26px/1 var(--meme); text-transform: uppercase; }
.merch-item p { margin: 0; font: 16px/1.45 var(--serif); }
.merch-item .merch-status { display: inline-block; margin-top: 12px; padding: 4px 10px; border: 2px dashed var(--ink); font: 700 13px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.mock { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border: 3px solid var(--ink); background: var(--paper-2); }
.mock-tee { background: var(--bow); }
.tee { /* a tee, drawn with a clip path */
  position: relative; display: grid; place-items: center; width: 82%; aspect-ratio: 1 / 1; background: #1b1814;
  clip-path: polygon(30% 4%, 40% 9%, 60% 9%, 70% 4%, 98% 20%, 88% 40%, 78% 35%, 78% 98%, 22% 98%, 22% 35%, 12% 40%, 2% 20%);
}
.tee img { width: 36%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 62%; border-radius: 50%; border: 3px solid var(--paper); margin-top: 6%; }
.tee b { position: absolute; bottom: 20%; color: var(--paper); font: clamp(14px, 1.5vw, 19px)/1 var(--meme); text-transform: uppercase; letter-spacing: .04em; }
.mock-stickers { background: #d7d0bf; background-image: radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px); background-size: 10px 10px; }
.die { position: absolute; border: 6px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.die-1 { width: 46%; height: auto; border-radius: 50%; left: 8%; top: 8%; rotate: -8deg; }
.die-2 { right: 6%; top: 18%; padding: 10px 14px; background: var(--ink); color: var(--bow); font: clamp(18px, 2vw, 26px)/1 var(--meme); border-radius: 14px; rotate: 9deg; }
.die-3 { width: 30%; height: auto; border-radius: 50%; right: 14%; bottom: 10%; rotate: 12deg; }
.die-4 { left: 12%; bottom: 10%; padding: 12px 14px; background: var(--bow); color: var(--ink); font: clamp(14px, 1.4vw, 18px)/1 var(--meme); text-transform: uppercase; text-align: center; border-radius: 50%; aspect-ratio: 1 / 1; display: grid; place-items: center; rotate: -6deg; }
.mock-poster { background: #8a7d63; }
.mock-poster img { width: 62%; height: auto; border: 8px solid #f4ecd8; box-shadow: 6px 8px 0 rgba(0, 0, 0, .35); rotate: -2deg; }
.events { margin-top: 56px; padding: 30px 32px; background: #6b5536; background-image: radial-gradient(rgba(0, 0, 0, .12) 2px, transparent 2px); background-size: 18px 18px; border: 6px solid #3d2f1c; box-shadow: 8px 8px 0 #000; }
.events-title { margin: 0 0 20px; font: 34px/1 var(--meme); text-transform: uppercase; color: var(--paper); text-shadow: 3px 3px 0 #000; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.event-list li { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 18px 18px; background: #f6eeda; color: var(--ink); box-shadow: 3px 4px 0 rgba(0, 0, 0, .35); font: 16px/1.4 var(--serif); }
.event-list li:nth-child(1) { rotate: -1.5deg; }
.event-list li:nth-child(2) { rotate: 1deg; }
.event-list li:nth-child(3) { rotate: -.5deg; }
.event-list li::before { /* the pin */ content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: var(--bow-deep); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .25); }
.event-list strong { font: 24px/1 var(--meme); text-transform: uppercase; }
.when { justify-self: start; padding: 3px 8px; background: var(--ink); color: var(--paper); font: 700 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.events-cta { margin-top: 26px; }
.events-cta .btn { background: var(--bow); color: var(--ink); }

/* --- token notice ----------------------------------------------------------------- */
.token { background: var(--paper-2); border-top: 4px solid var(--ink); }
.notice {
  max-width: 760px; margin-inline: auto; padding: 42px 44px; text-align: center; background: #f6eeda;
  border: 4px double var(--ink); box-shadow: 12px 12px 0 var(--ink); rotate: .6deg;
}
.notice-head { margin: 0; font: italic 20px/1.2 var(--serif); color: var(--text-muted); }
.notice h2 { margin: 6px 0 22px; font: clamp(60px, 10vw, 110px)/.9 var(--meme); letter-spacing: .01em; }
.notice-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 24px; border: 3px solid var(--ink); text-align: left; }
.notice-facts div { padding: 12px 14px; border-right: 3px solid var(--ink); }
.notice-facts div:last-child { border-right: 0; }
.notice-facts dt { font: 700 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.notice-facts dd { margin: 5px 0 0; font: 21px/1.1 var(--meme); text-transform: uppercase; word-break: break-word; }
.notice p { margin: 0 auto 12px; max-width: 54ch; font: 18px/1.5 var(--serif); }
.notice .fine { font: 14px/1.5 var(--sans); color: var(--text-muted); margin-bottom: 0; }

/* --- finale + footer -------------------------------------------------------------- */
.finale { padding: 90px 0 100px; background: var(--ink); color: var(--paper); }
.finale-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.finale-art { border: 4px solid var(--paper); box-shadow: 12px 12px 0 var(--bow-deep); rotate: 1.5deg; }
.finale .display { color: var(--bow); -webkit-text-stroke: 0; text-shadow: 5px 5px 0 #000; font-size: clamp(46px, 6.4vw, 86px); }
.finale .btn-pink { box-shadow: 6px 6px 0 var(--bow-deep); }
.finale-copy p { font: 22px/1.45 var(--serif); margin: 22px 0 30px; color: #e9dcbd; max-width: 34ch; }
.ak-footer { background: #0e0b08; color: #b9ab8a; padding: 34px 0 110px; font-size: 14px; }
/* the platform's X chip pads <body> by 160px; the footer keeps that room in its own colour instead */
body.armoredkitten { padding-bottom: 0; }
.ak-footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 40px; align-items: start; }
.ak-footer a { color: #efe2c4; }
.ak-footer p { margin: 0 0 6px; }
.ak-footer-brand { display: flex; align-items: center; gap: 10px; font: 22px/1 var(--meme); text-transform: uppercase; color: var(--paper); }
.ak-footer-brand img { border-radius: 50%; border: 2px solid var(--paper); }
.ak-footer-brand span { color: var(--bow); }
.ak-footer-note { max-width: 62ch; line-height: 1.55; }
.ak-footer nav { display: grid; gap: 6px; }

/* --- smaller screens -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .lore-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .meme-wall { grid-template-columns: repeat(2, 1fr); }
  .meme, .meme-4, .meme-5 { grid-column: span 1; margin-top: 0; }
  .meme-5 { grid-column: span 2; }
  .forge-grid, .code-grid, .finale-grid { grid-template-columns: minmax(0, 1fr); }
  .code-art { max-width: 420px; }
  .finale-art { max-width: min(520px, 100%); }
  .ak-footer-inner { grid-template-columns: 1fr; }
  .road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road::before { display: none; }
  .merch-grid, .event-list { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .ak-nav { gap: 14px; font-size: 14px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .ak-nav { display: none; }
  .ak-brand strong { font-size: 21px; white-space: nowrap; }
  .sb-strip-inner > span { display: none; }
  .hero { padding-top: 18px; }
  .hero-frame { box-shadow: 7px 7px 0 var(--ink); }
  .bubble { position: relative; left: auto; top: auto; max-width: none; margin: 0; border-radius: 0; border-width: 0; border-top: 3px solid var(--ink); rotate: 0deg; font-size: 15px; }
  .bubble::after { right: auto; left: 62%; top: -20px; width: 22px; height: 18px; border-right: 0; border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); clip-path: polygon(0 0, 100% 100%, 0 100%); transform: none; }
  .sticker-hero { right: -6px; top: -14px; font-size: 15px; }
  .hero-bar { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .lore, .memes, .code, .token, .forge { padding: 64px 0; }
  .display { -webkit-text-stroke-width: 2px; text-shadow: 3px 3px 0 var(--ink); }
  .meme-wall { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .meme, .meme-5 { grid-column: auto; rotate: 0deg; }
  .meme:nth-child(odd) { rotate: -1deg; }
  .meme:nth-child(even) { rotate: 1deg; }
  .forge-canvas, .code-art, .notice, .finale-art, .film { box-shadow: 7px 7px 0 var(--ink); }
  .lore-beats { margin: 0 0 22px; font: clamp(34px, 3.6vw, 52px)/.98 var(--meme); text-transform: uppercase; }
.lore-beats span { display: block; }
.lore-beats span:last-child { color: var(--bow-deep); }
.lore-note { margin: 0 0 16px; font: 20px/1.5 var(--serif); }
.lore-hint { display: inline-block; margin: 0; padding: 6px 12px; border: 2px dashed var(--ink); font: 700 14px/1.3 var(--sans); rotate: -1.5deg; }
.film figcaption { font-size: 16px; }
  .finale-art { box-shadow: 7px 7px 0 var(--bow-deep); }
  .scroll { padding: 26px 20px; }
  .rules li { grid-template-columns: 40px 1fr; }
  .notice { padding: 30px 18px; rotate: 0deg; }
  .notice-facts { grid-template-columns: 1fr 1fr; }
  .notice-facts div:nth-child(2) { border-right: 0; }
  .notice-facts div:nth-child(-n+2) { border-bottom: 3px solid var(--ink); }
  .finale { padding: 64px 0 72px; }
  .roadmap, .merch { padding: 64px 0; }
  .road { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .chapter:nth-child(even) { margin-top: 0; }
  .events { padding: 22px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .btn, .meme { transition: none; }
}