:root {
  --ink: #10110d;
  --lime: #b7f20a;
  --lime-soft: #e6ff93;
  --cream: #fcfff2;
  --soft: #f4f6f0;
  --warning: #fff2a9;
  --red: #ff3b30;
  --white: #ffffff;
  --muted: #62655d;
  --line: 3px solid var(--ink);
  --radius: 1.25rem;
  --shell: min(1200px, 90vw);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
.i18n-multiline { white-space: pre-line; }

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 4px solid var(--lime);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: -9999px;
  top: 1rem;
  z-index: 1000;
  border: var(--line);
  background: var(--white);
  padding: 0.75rem 1rem;
  font-weight: 900;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
}

.shell,
.header-shell,
.footer-shell {
  width: var(--shell);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: var(--line);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(10px);
}

.header-shell {
  min-height: 4.75rem;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: -0.06em;
  text-decoration: none;
}

.wordmark-dot {
  width: 0.65rem;
  height: 0.65rem;
  margin: 0.32rem 0 0 -0.12rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
}

.status-badges,
.planning-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mobile-menu-toggle {
  display: none;
}

.badge,
.planning-labels span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  padding: 0.35rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.badge-warning {
  background: var(--warning);
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.85rem, 2vw, 1.8rem);
}
.language-switcher {
  display: flex;
  max-width: 15rem;
  justify-self: end;
  gap: .35rem;
  overflow-x: auto;
  padding: .2rem;
}
.language-switcher a {
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  padding: .28rem .5rem;
  text-decoration: none;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 850;
}
.language-switcher a.active { background: var(--lime); }

.site-nav a,
.footer-links a {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mobile-contract-warning {
  display: none;
}

.scene[id] {
  scroll-margin-top: 6.5rem;
}

.scene {
  position: relative;
  min-height: 90vh;
  overflow: clip;
  border-bottom: var(--line);
  padding: clamp(5.5rem, 10vw, 9rem) 0;
}

.hero {
  min-height: calc(100svh - 4.75rem);
  display: grid;
  align-items: start;
  padding-top: clamp(3.5rem, 7vh, 6rem);
  padding-bottom: clamp(18rem, 36vh, 27rem);
  background: var(--white);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(58rem, 100%);
  margin: 0 auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--lime);
  padding: 0.42rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.035em;
}

.eyebrow > span {
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.eyebrow-light {
  background: var(--white);
}

.eyebrow-red {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

h1,
h2,
h3,
.footer-wordmark {
  font-family: "Space Grotesk", "Arial Black", Inter, sans-serif;
}

h1,
h2 {
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

.hero h1 {
  font-size: clamp(4.5rem, 10.2vw, 9rem);
}

.hero-lead,
.scene-lead,
.subpage-lead {
  max-width: 45rem;
  margin: 1.75rem 0 0;
  color: #34362f;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.55;
}

.hero-lead {
  margin-inline: auto;
}

.hero-safety {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.35rem auto 0;
  border-top: 2px solid var(--ink);
  padding-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 900;
}

.safety-dot {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--warning);
}

.section-navigator {
  position: fixed;
  z-index: 82;
  top: 50%;
  right: clamp(0.7rem, 2.2vw, 2rem);
  width: 8.5rem;
  min-height: 8rem;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 160ms ease, transform 180ms ease;
}

.section-nav-link {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(1rem) scale(0.94) rotate(2deg);
  transition:
    opacity 180ms ease,
    transform 220ms ease,
    visibility 0s linear 220ms;
}

.section-nav-link.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1) rotate(0);
  transition-delay: 0s;
}

.section-nav-label {
  position: relative;
  max-width: 8.5rem;
  border: 2px solid var(--ink);
  border-radius: 0.9rem;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.6rem 0.75rem;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-align: center;
}

.section-nav-label::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -0.34rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--white);
  transform: translateX(50%) rotate(45deg);
}

.section-nav-arrow {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 46% 54% 43% 57%;
  background: var(--lime);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1;
  transform: rotate(-3deg);
  transition: background-color 160ms ease, transform 160ms ease;
}

.section-nav-link:hover .section-nav-label {
  background: var(--warning);
  transform: rotate(-1.5deg);
}

.section-nav-link:hover .section-nav-arrow {
  animation-play-state: paused;
  background: var(--white);
  transform: translateY(0.2rem) rotate(5deg) scale(1.07);
}

html.mobile-menu-visible .section-navigator {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(1rem);
}

.hero-character-stage {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(43vw, 34rem);
}

.hanging-character {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
}

.hanging-character img {
  width: 100%;
  height: auto;
}

.hanging-left {
  left: 4vw;
  width: min(27vw, 21.5rem);
}

.hanging-center {
  left: 50%;
  width: min(32vw, 27rem, 44vh);
  transform: translateX(-50%);
}

.hanging-right {
  right: 4vw;
  width: min(25vw, 19rem);
}

.hero-ledge {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.15rem;
  background: var(--ink);
}

.split-layout,
.warning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.build-scene {
  background: var(--soft);
}

.scene-index {
  margin: 0 0 1.25rem;
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.scene h2 {
  max-width: 12ch;
  font-size: clamp(3.2rem, 7.2vw, 6.6rem);
}

.status-list {
  display: grid;
  gap: 0.7rem;
  margin: 2.25rem 0;
}

.status-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 4rem;
  border: 2px solid var(--ink);
  border-radius: 0.85rem;
  background: var(--white);
  padding: 0.65rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 900;
}

.status-row small {
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.status-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 0.8rem;
}

.status-complete {
  background: var(--lime);
}

.status-progress {
  background: linear-gradient(90deg, var(--lime) 50%, var(--white) 50%);
}

.status-locked {
  background: var(--warning);
}

.text-link,
.button-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.text-link {
  text-underline-offset: 0.35rem;
}

.button-link {
  min-height: 3.2rem;
  margin-top: 2rem;
  border: var(--line);
  border-radius: 999px;
  background: var(--lime);
  padding: 0.65rem 1.1rem;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}

.button-link:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--ink);
}

.button-dark {
  background: var(--ink);
  color: var(--white);
}

.character-frame {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 32rem;
  overflow: hidden;
  border: var(--line);
  border-radius: 45% 45% 1rem 1rem;
  background: var(--lime-soft);
}

.character-composition {
  position: relative;
  isolation: isolate;
  padding: 2.6rem 0 0;
}

.character-frame::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 4%;
  left: 8%;
  height: 1rem;
  border-radius: 50%;
  background: rgba(16, 17, 13, 0.18);
}

.character-frame img {
  position: relative;
  z-index: 2;
  max-height: 30rem;
  object-fit: contain;
  transform-origin: bottom center;
}

.frame-label,
.speech-bubble {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 1rem;
  max-width: calc(100% - 2rem);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  padding: 0.45rem 0.7rem;
  font-size: 0.65rem;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.build-composition {
  padding-left: clamp(1.4rem, 4vw, 3.5rem);
}

.build-composition .frame-label {
  left: clamp(2.4rem, 6vw, 5rem);
}

.support-character {
  position: absolute;
  z-index: 4;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0.75rem 0 rgba(16, 17, 13, 0.12));
}

.support-coffee {
  left: -1.5rem;
  bottom: -0.2rem;
  width: clamp(7rem, 15vw, 11rem);
}

.principles-scene {
  background: var(--cream);
}

.principles-heading {
  display: grid;
  grid-template-columns: 1fr 18rem;
  align-items: end;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.principles-cast {
  position: relative;
  width: 18rem;
  min-height: 16rem;
  justify-self: end;
}

.principles-character {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 0;
  width: 10rem;
  max-height: 15rem;
  object-fit: contain;
  object-position: bottom;
  transform: translateX(50%);
}

.principles-face {
  position: absolute;
  bottom: 0;
  width: 6.8rem;
  max-height: 9rem;
  object-fit: contain;
  object-position: bottom;
}

.principles-face-smirk {
  z-index: 3;
  left: -0.25rem;
}

.principles-face-closed {
  z-index: 3;
  right: -0.25rem;
  opacity: 1;
  transform: translate(18%, 7%) rotate(4deg);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.principle-card,
.info-card,
.allocation-card {
  position: relative;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.principle-card {
  min-height: 12.5rem;
  padding: 1.4rem;
}

.accent-card {
  background: var(--lime-soft);
}

.card-number {
  display: inline-block;
  margin-bottom: 2.4rem;
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  font-weight: 900;
}

.principle-card h3 {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  letter-spacing: -0.05em;
}

.principle-card p {
  margin: 0;
  color: #4d5048;
  font-size: 0.88rem;
}

.planning-labels {
  margin-top: 1.4rem;
}

.planning-labels span:last-child {
  background: var(--warning);
}

.warning-scene {
  background: var(--warning);
}

.warning-stripe {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1.1rem;
  background: repeating-linear-gradient(
    135deg,
    var(--ink) 0 1.25rem,
    var(--warning) 1.25rem 2.5rem
  );
}

.warning-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
}

.warning-copy h2 {
  color: var(--red);
}

.warning-box {
  max-width: 42rem;
  margin: 2rem 0;
  border: var(--line);
  background: var(--white);
  padding: clamp(1.2rem, 3vw, 2rem);
}

.warning-box strong {
  font-size: 1rem;
}

.warning-box p {
  margin: 0.8rem 0 0;
}

.warning-character {
  position: relative;
  align-self: end;
}

.warning-character img {
  max-height: 37rem;
  margin-inline: auto;
  object-fit: contain;
}

.warning-character > img:first-of-type {
  position: relative;
  z-index: 2;
}

.warning-sidekick {
  position: absolute;
  z-index: 3;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0.7rem 0 rgba(16, 17, 13, 0.12));
}

.warning-shocked {
  left: -3.5rem;
  bottom: -0.5rem;
  width: clamp(6.5rem, 13vw, 9rem);
}

.warning-sweating {
  right: -2rem;
  bottom: -0.25rem;
  width: clamp(6rem, 12vw, 8.5rem);
}

.sound-mark {
  position: absolute;
  z-index: 3;
  border: 0 solid var(--red);
  border-top-width: 4px;
  transform: rotate(-14deg);
}

.sound-mark-one {
  width: 3.6rem;
  top: 17%;
  right: 4%;
}

.sound-mark-two {
  width: 2.2rem;
  top: 24%;
  right: 1%;
}

.community-scene {
  background: var(--white);
}

.community-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
}

.channel-status {
  display: inline-grid;
  gap: 0.25rem;
  margin-top: 2rem;
  border-left: 0.65rem solid var(--lime);
  background: var(--soft);
  padding: 1rem 1.2rem;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.035em;
}

.phone-character {
  min-height: 36rem;
  background: var(--lime);
}

.phone-character img {
  max-height: 34rem;
}

.speech-bubble {
  left: 1.2rem;
}

.community-cast {
  padding-right: clamp(1.4rem, 4vw, 3.5rem);
}

.community-sidekicks {
  position: absolute;
  z-index: 4;
  right: -1rem;
  bottom: -1rem;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.community-sidekicks img {
  width: clamp(5rem, 10vw, 7.5rem);
  max-height: 9rem;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 0.6rem 0 rgba(16, 17, 13, 0.14));
}

.community-sidekicks img:first-child {
  width: clamp(6rem, 11vw, 8rem);
  max-height: 10rem;
}

.community-sidekicks img:nth-child(2) {
  width: clamp(6rem, 12vw, 9rem);
}

.community-sidekicks img:nth-child(3) {
  transform: translateY(0.5rem);
}

.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 4rem 0;
}

.footer-shell {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 2.5rem 5rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-wordmark {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 950;
  letter-spacing: -0.08em;
}

.footer-state {
  color: var(--lime);
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

.footer-disclaimer {
  max-width: 46rem;
  margin: 0;
  color: #d7d9d2;
  font-size: 0.9rem;
}

.footer-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #4f514a;
}

.footer-links a:hover {
  color: var(--lime);
}

/* Supporting public pages */
.subpage-hero {
  min-height: 62vh;
  display: flex;
  align-items: end;
  border-bottom: var(--line);
  background: var(--white);
  padding: 7rem 0 5rem;
}

.subpage-hero h1 {
  max-width: 11ch;
  font-size: clamp(4rem, 9vw, 8rem);
}

.subpage-lead {
  max-width: 52rem;
}

.subpage-content {
  min-height: 50vh;
  background: var(--soft);
  padding: 6rem 0;
}

.article-grid,
.allocation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.info-card {
  min-height: 21rem;
  padding: 1.5rem;
}

.info-card h2,
.allocation-card h2,
.truth-panel h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.info-card p,
.info-card li,
.allocation-card p,
.truth-panel p {
  color: #45483f;
  font-size: 0.95rem;
}

.info-card ul {
  display: grid;
  gap: 0.7rem;
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
}

.token-page-hero {
  background: var(--lime-soft);
}

.supply-panel,
.truth-panel {
  border: var(--line);
  background: var(--white);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.supply-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.supply-panel span {
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  font-weight: 900;
}

.supply-panel strong {
  font-size: clamp(1.25rem, 3.5vw, 3.4rem);
  letter-spacing: -0.06em;
}

.allocation-card {
  min-height: 18rem;
  padding: 1.5rem;
}

.allocation-main {
  background: var(--lime-soft);
}

.allocation-value {
  display: block;
  margin-bottom: 2.5rem;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 1;
}

.allocation-bar {
  height: 2rem;
  display: flex;
  overflow: hidden;
  margin: 1rem 0;
  border: var(--line);
  background: var(--white);
}

.allocation-bar span {
  display: block;
  border-right: 2px solid var(--ink);
}

.bar-public {
  background: var(--lime);
}

.bar-founder {
  background: var(--warning);
}

.bar-reserve {
  background: var(--red);
}

.truth-panel {
  margin-top: 1rem;
  background: var(--warning);
}

@media (max-width: 1050px) {
  .header-shell {
    grid-template-columns: auto 1fr;
  }

  .site-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-bottom: 0.7rem;
  }

  .language-switcher {
    grid-column: 1 / -1;
    justify-self: start;
    padding-bottom: .7rem;
  }

  .status-badges {
    justify-content: flex-end;
  }

  .split-layout,
  .warning-layout,
  .community-layout {
    gap: 3rem;
  }

  .scene h2 {
    font-size: clamp(3rem, 7vw, 5.5rem);
  }
}

@media (max-width: 820px) {
  :root {
    --shell: calc(100% - 3rem);
    --mobile-header-height: 4.6rem;
  }

  html {
    scroll-padding-top: 8rem;
  }

  .site-header {
    position: sticky;
    top: 0;
    border-bottom: 0;
    background: var(--cream);
    backdrop-filter: none;
  }

  .header-shell {
    position: relative;
    min-height: 0;
    grid-template-columns: 1fr auto;
    grid-template-rows: var(--mobile-header-height) auto auto;
    gap: 0;
  }

  .header-shell::after {
    content: "";
    position: absolute;
    top: calc(var(--mobile-header-height) - 2px);
    right: 0;
    left: 0;
    z-index: 2;
    height: 2px;
    background: var(--ink);
    pointer-events: none;
  }

  .wordmark {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: 1.4rem;
    line-height: 1;
  }

  .wordmark-dot {
    width: 0.58rem;
    height: 0.58rem;
    margin: 0.25rem 0 0 0.04rem;
  }

  .status-badges {
    display: none;
  }

  .mobile-menu-toggle {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--lime);
    box-shadow: 2px 2px 0 var(--ink);
    padding: 0.4rem 0.75rem;
    color: var(--ink);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.045em;
    cursor: pointer;
    transition: box-shadow 150ms ease, transform 150ms ease;
  }

  .mobile-menu-toggle:active {
    box-shadow: 1px 1px 0 var(--ink);
    transform: translate(2px, 2px);
  }

  .mobile-menu-icon {
    width: 1rem;
    display: grid;
    gap: 0.18rem;
  }

  .mobile-menu-icon span {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: var(--ink);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .site-header.menu-open .mobile-menu-icon span:first-child {
    transform: translateY(0.32rem) rotate(45deg);
  }

  .site-header.menu-open .mobile-menu-icon span:nth-child(2) {
    opacity: 0;
  }

  .site-header.menu-open .mobile-menu-icon span:last-child {
    transform: translateY(-0.32rem) rotate(-45deg);
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    padding: 0;
    transform: translateY(-0.35rem);
    transition:
      max-height 220ms ease,
      opacity 160ms ease,
      padding 220ms ease,
      transform 180ms ease,
      visibility 0s linear 220ms;
  }

  .site-header.menu-open .site-nav {
    max-height: 14rem;
    visibility: visible;
    opacity: 1;
    padding: 0.8rem 0 0.9rem;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .site-nav a {
    min-height: 2.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ink);
    border-radius: 0.75rem;
    background: var(--white);
    padding: 0.55rem 0.4rem;
    text-align: center;
  }

  .site-nav a:nth-child(2),
  .site-nav a:nth-child(3) {
    background: var(--lime-soft);
  }

  .site-nav a::after {
    display: none;
  }

  .language-switcher {
    grid-row: 3;
    grid-column: 1 / -1;
    display: none;
    max-width: 100%;
    justify-self: stretch;
    justify-content: center;
    border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    padding: 0 0 0.8rem;
  }

  .site-header.menu-open .language-switcher:not(.language-switcher-single) {
    display: flex;
  }

  .language-switcher-single {
    display: none !important;
  }

  .mobile-contract-warning {
    position: sticky;
    top: var(--mobile-header-height);
    z-index: 99;
    display: block;
    border-bottom: 2px solid var(--ink);
    background: var(--warning);
    padding: 0.45rem 1.5rem;
    text-align: center;
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.04em;
  }

  .site-header.menu-open + .mobile-contract-warning {
    position: relative;
    top: auto;
    border-top: 2px solid var(--ink);
  }

  .scene {
    min-height: auto;
    padding: 6rem 0;
  }

  .hero {
    min-height: auto;
    display: block;
    padding-top: 4rem;
    padding-bottom: 0;
  }

  .hero h1 {
    font-size: clamp(3.5rem, 13vw, 5.5rem);
  }

  .hero-character-stage {
    position: relative;
    height: clamp(12rem, 42vw, 17rem);
    margin-top: 2.5rem;
  }

  .hanging-character {
    bottom: 0.9rem;
  }

  .hanging-left {
    left: -1rem;
    width: min(37vw, 13rem);
  }

  .hanging-center {
    width: min(51vw, 18rem);
  }

  .hanging-right {
    right: -0.65rem;
    width: min(34vw, 12rem);
  }

  .section-navigator {
    top: auto;
    right: 0.75rem;
    bottom: max(0.8rem, env(safe-area-inset-bottom));
    width: auto;
    min-height: auto;
    transform: none;
  }

  .section-nav-link {
    flex-direction: row;
    gap: 0.55rem;
  }

  .section-nav-label {
    max-width: 9.5rem;
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
  }

  .section-nav-label::after {
    right: -0.3rem;
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }

  .section-nav-arrow {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1.35rem;
  }

  html.mobile-menu-visible .section-navigator {
    opacity: 0;
    transform: translateX(1rem);
  }

  .split-layout,
  .warning-layout,
  .community-layout {
    grid-template-columns: 1fr;
  }

  .character-frame {
    min-height: 27rem;
  }

  .character-frame img {
    max-height: 26rem;
  }

  .principles-heading {
    grid-template-columns: 1fr 13rem;
  }

  .principles-cast {
    width: 13rem;
    min-height: 12rem;
  }

  .principles-character {
    right: 50%;
    width: 7.8rem;
    max-height: 11rem;
    transform: translateX(50%);
  }

  .principles-face {
    width: 5rem;
    max-height: 6.8rem;
  }

  .warning-shocked {
    left: -2.5rem;
  }

  .warning-sweating {
    right: -1.5rem;
  }

  .principles-grid,
  .article-grid,
  .allocation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warning-character img {
    max-height: 28rem;
  }

  .warning-character {
    order: -1;
    width: min(22rem, 80%);
    margin-inline: auto;
  }

  .phone-character {
    min-height: 30rem;
  }

  .phone-character img {
    max-height: 29rem;
  }

  .community-cast {
    padding-inline: 1.5rem;
  }

  .community-scene {
    padding-bottom: 4rem;
  }

  .community-sidekicks {
    right: 0;
  }

  .footer-shell {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer {
    padding: 3rem 0;
  }

  .footer-links {
    grid-column: auto;
  }

  .subpage-hero {
    min-height: 55vh;
  }

  .supply-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  :root {
    --shell: calc(100% - 2rem);
  }

  .wordmark {
    font-size: 1.35rem;
  }

  .mobile-menu-toggle {
    min-height: 2.5rem;
    padding-inline: 0.65rem;
  }

  .hero {
    padding-top: 3.2rem;
    padding-bottom: 0;
  }

  .hero h1 {
    font-size: clamp(2.95rem, 14vw, 4.25rem);
    line-height: 0.9;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .hero-safety {
    align-items: flex-start;
    text-align: left;
  }

  .hero-character-stage {
    height: clamp(9.5rem, 43vw, 13rem);
    margin-top: 2rem;
  }

  .section-nav-label {
    max-width: min(9rem, calc(100vw - 5.5rem));
    font-size: 0.6rem;
  }

  .hanging-character {
    bottom: 0.75rem;
  }

  .hanging-left {
    left: -0.75rem;
    width: 36vw;
  }

  .hanging-center {
    width: 50vw;
  }

  .hanging-right {
    right: -0.5rem;
    width: 34vw;
  }

  .scene {
    padding: 4.5rem 0;
  }

  .scene h2 {
    font-size: clamp(2.7rem, 14vw, 4.2rem);
  }

  .status-row {
    grid-template-columns: 2rem 1fr;
  }

  .status-row small {
    grid-column: 2;
  }

  .character-frame {
    min-height: 22rem;
  }

  .character-frame img {
    max-height: 21rem;
  }

  .principles-heading {
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem;
  }

  .principles-cast {
    width: min(18rem, 88vw);
    min-height: 12rem;
    justify-self: center;
  }

  .principles-character {
    right: 50%;
    width: 8rem;
    max-height: 11.5rem;
    transform: translateX(50%);
  }

  .principles-face {
    width: 5.2rem;
    max-height: 7rem;
  }

  .principles-grid,
  .article-grid,
  .allocation-grid {
    grid-template-columns: 1fr;
  }

  .principle-card {
    min-height: 10rem;
  }

  .card-number {
    margin-bottom: 1.5rem;
  }

  .planning-labels {
    display: grid;
  }

  .planning-labels span {
    justify-content: center;
    text-align: center;
  }

  .warning-character {
    width: min(17rem, 78%);
  }

  .warning-shocked {
    left: -2.8rem;
    width: 5.8rem;
  }

  .warning-sweating {
    right: -2.4rem;
    width: 5.6rem;
  }

  .phone-character {
    min-height: 25rem;
  }

  .phone-character img {
    max-height: 24rem;
  }

  .build-composition,
  .community-cast {
    padding-inline: 1.1rem;
  }

  .build-composition .frame-label,
  .speech-bubble {
    left: 1.8rem;
  }

  .support-coffee {
    left: -0.2rem;
    width: 6.8rem;
  }

  .community-sidekicks {
    right: -0.2rem;
    left: -0.2rem;
    bottom: -0.75rem;
  }

  .community-sidekicks img {
    width: 5rem;
    max-height: 6.5rem;
  }

  .community-sidekicks img:nth-child(2) {
    width: 5.7rem;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .subpage-hero {
    min-height: auto;
    padding: 5rem 0 3.5rem;
  }

  .subpage-hero h1 {
    font-size: clamp(3.2rem, 15vw, 5.2rem);
  }

  .subpage-content {
    padding: 4rem 0;
  }

  .info-card,
  .allocation-card {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .section-nav-link.is-active .section-nav-arrow {
    animation: section-nav-bob 1.65s ease-in-out infinite;
  }
}

@keyframes section-nav-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(0.35rem) rotate(3deg);
  }
}

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--ink);
  background: var(--red);
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 1000;
}

.preview-banner a { color: inherit; }

.shorts-scene { background: var(--cream); }
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.short-card {
  border: 3px solid var(--ink);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 1rem;
}
.short-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 2px solid var(--ink);
  object-fit: cover;
}
.short-media { display: block; }
.short-card h3 a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.short-card span { font-size: .75rem; font-weight: 1000; }
.short-card h3 { margin: .6rem 0; font-size: 1.25rem; }
.short-card p { line-height: 1.55; }

.report-layout { display: grid; gap: 1.5rem; }
.report-form {
  display: grid;
  gap: 1rem;
  border: 3px solid var(--ink);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(1rem, 4vw, 2.5rem);
}
.report-form label { display: grid; gap: .4rem; font-size: .8rem; font-weight: 900; }
.report-form input,
.report-form select,
.report-form textarea {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: .55rem;
  background: #fff;
  padding: .8rem;
  font: inherit;
}
.report-form input:focus,
.report-form select:focus,
.report-form textarea:focus {
  outline: 4px solid var(--lime);
  outline-offset: 2px;
}
.report-form .cta-link { cursor: pointer; }
.honeypot { position: absolute !important; left: -9999px !important; }

@media (max-width: 48rem) {
  .shorts-grid { grid-template-columns: 1fr; }
}

/* Custom MANAWOO pointer with native PNG/SVG fallback. */
@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  summary {
    cursor:
      url("/characters/manawoo-mouse-cursor-32.png") 16 16,
      url("/characters/manawoo-mouse-cursor.svg") 16 16,
      auto;
  }

  input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  textarea,
  [contenteditable="true"] {
    cursor: text;
  }

  html.manawoo-cursor-active,
  html.manawoo-cursor-active body,
  html.manawoo-cursor-active a,
  html.manawoo-cursor-active button,
  html.manawoo-cursor-active [role="button"],
  html.manawoo-cursor-active select,
  html.manawoo-cursor-active summary {
    cursor: none;
  }

  html.manawoo-cursor-active.cursor-text-mode input,
  html.manawoo-cursor-active.cursor-text-mode textarea,
  html.manawoo-cursor-active.cursor-text-mode [contenteditable="true"] {
    cursor: text;
  }
}

.manawoo-cursor {
  --cursor-size: 2.25rem;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 120ms ease;
  will-change: transform;
}

.manawoo-cursor.is-visible {
  opacity: 1;
}

.manawoo-cursor-core,
.manawoo-cursor-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: filter 160ms ease, transform 160ms ease;
}

.manawoo-cursor-core {
  z-index: 2;
  filter: drop-shadow(0 0.18rem 0 rgba(16, 17, 13, 0.28));
}

.manawoo-cursor-trail {
  z-index: 1;
  opacity: 0.24;
  transform: translate(-50%, -50%) scale(1.55);
}

.manawoo-cursor-ripple {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid var(--lime);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
}

.manawoo-cursor.is-interactive .manawoo-cursor-core {
  filter:
    drop-shadow(0 0.2rem 0 rgba(16, 17, 13, 0.32))
    drop-shadow(0 0 0.45rem rgba(181, 239, 0, 0.78));
  transform: translate(-50%, -50%) rotate(16deg) scale(1.2);
}

.manawoo-cursor.is-pressing .manawoo-cursor-core {
  transform: translate(-50%, -50%) scale(0.78);
}

.manawoo-cursor.is-pressing .manawoo-cursor-ripple {
  animation: cursor-ripple 420ms ease-out;
}

@keyframes cursor-ripple {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.35);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

.language-switcher[aria-busy="true"] {
  pointer-events: none;
}

.language-switcher[aria-busy="true"] a {
  opacity: 0.58;
}

#main-content {
  transition: opacity 150ms ease, transform 150ms ease;
}

html.language-transitioning #main-content {
  opacity: 0.42;
  transform: translateY(0.35rem);
}

@supports (view-transition-name: root) {
  ::view-transition-old(root) {
    animation: 150ms ease both language-fade-out;
  }

  ::view-transition-new(root) {
    animation: 220ms ease both language-fade-in;
  }
}

@keyframes language-fade-out {
  to {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

@keyframes language-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .manawoo-cursor {
    display: none;
  }

  #main-content {
    transition: none;
  }
}

@media (forced-colors: active) {
  html,
  body,
  a,
  button,
  input,
  select,
  textarea,
  summary {
    cursor: auto !important;
  }

  input,
  textarea,
  [contenteditable="true"] {
    cursor: text !important;
  }

  .manawoo-cursor {
    display: none;
  }
}