/* Fonts are self-hosted: every page links /fonts.css before this file (no Google requests). */

:root {
  color-scheme: dark;
  
  /* Premium dark palette - Linear-inspired with ASM edge */
  --bg-deepest: #08090a;
  --bg-base: #0f1011;
  --bg-elevated: #191a1b;
  --bg-hover: #28282c;
  
  /* Text hierarchy - not harsh white on black */
  --ink: #f7f8f8;
  --ink-secondary: #d0d6e0;
  --muted: #8a8f98;
  --subtle: #62666d;
  
  /* Colour system (owner direction 2026-10-08): the main site is black / grey / white.
     --accent* is monochrome and drives buttons, links and focus everywhere.
     Primary = off-white fill with near-black text (17.5:1); secondary = outline. */
  --accent: #e8e8e6;
  --accent-bright: #ffffff;
  --accent-hover: #ffffff;
  --accent-fill: #f2f2f0;
  --accent-fill-hover: #ffffff;
  --accent-ink: #0b0b0c;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-line: rgba(255, 255, 255, 0.42);

  /* Game accent (2026-10-13, Connor: no blue on the website): the Offline District tokens are neutral now, so PLAY
     buttons, game tags, the Map and game cards read black / grey / white like the rest. Ink on the fill is 17.5:1.
     The game's own UI keeps its blue; this file is the website only. */
  --game-accent: #c9ccd1;
  --game-accent-bright: #e8e8e6;
  --game-accent-hover: #ffffff;
  --game-accent-fill: #f2f2f0;
  --game-accent-fill-hover: #ffffff;
  --game-accent-ink: #0b0b0c;
  --game-accent-soft: rgba(255, 255, 255, 0.06);
  --game-accent-line: rgba(255, 255, 255, 0.3);

  /* Rarity palette (owner's Canva palette, 2026-10-08), lowest to highest.
     Use a tone for borders, bars and glows. For small text use
     color-mix(in srgb, var(--tone) 70%, #fff), which keeps >= 4.5:1 on every panel. */
  --rarity-common: #c9ced6;
  --rarity-uncommon: #6eac53;
  --rarity-rare: #099ab4;
  --rarity-very-rare: #0c74fd;
  --rarity-epic: #8553e7;
  --rarity-legendary: #c8794a;
  --rarity-mythic: #e22840;
  /* Super Rare: the Mythic red (owner, 2026-10-10: few exist, so it gets the red; mauve #b05896 retired). */
  --rarity-super-rare: #e22840;
  --rarity-exotic: #7ee5eb;

  /* Subtle borders - semi-transparent */
  --line: rgba(255, 255, 255, 0.08);
  --line-subtle: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.12);
  
  --gutter: 30px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-deepest);
  color: var(--ink);
  font: 15px/1.5 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
}

button, a {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

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

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3 {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: -0.04em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: fixed;
  z-index: 100;
  left: 20px;
  top: -100px;
  background: var(--ink);
  color: var(--bg-base);
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
}

.skip:focus {
  top: 10px;
}

/* Header */
.site-header {
  height: 86px;
  padding: 0 max(var(--gutter), calc((100vw - 1440px) / 2));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-mark {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-toggle {
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0;
}

.menu-circle {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: all 0.2s ease;
}

.menu-toggle:hover .menu-circle {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
}

.menu-circle i {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--ink-secondary);
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Menu Dialog */
.menu-dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  width: min(700px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: none;
  background: var(--bg-elevated);
  color: var(--ink);
  border: 0;
  padding: 100px 40px 40px;
  overflow: auto;
}

.menu-dialog::backdrop {
  background: rgba(8, 9, 10, 0.9);
  backdrop-filter: blur(8px);
}

.menu-dialog nav {
  display: grid;
  margin: 35px 0;
}

.menu-dialog nav a {
  border-top: 1px solid var(--line);
  padding: 16px 0;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  transition: color 0.2s ease;
}

.menu-dialog nav a:hover {
  color: var(--accent-bright);
}

.menu-close {
  position: absolute;
  right: 26px;
  top: 20px;
  background: transparent;
  color: var(--ink);
  border: 0;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.menu-close:hover {
  color: var(--accent-bright);
}

.menu-extra {
  display: flex;
  gap: 24px;
  font-size: 12px;
  margin-top: 32px;
  color: var(--ink-secondary);
}

.menu-extra a {
  transition: color 0.2s ease;
}

.menu-extra a:hover {
  color: var(--ink);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
  white-space: nowrap;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-strong);
}

/* Primary: off-white fill, near-black text (--accent-ink on --accent-fill is 17.5:1). */
.button.filled {
  background: var(--accent-fill);
  color: var(--accent-ink);
  border-color: var(--accent-fill);
}

.button.filled:hover {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--accent-ink);
}

/* Game: blue is reserved for Offline District calls to action. */
.button.game,
.button.filled.game {
  background: var(--game-accent-fill);
  color: var(--game-accent-ink);
  border-color: var(--game-accent-fill);
}

.button.game:hover,
.button.filled.game:hover {
  background: var(--game-accent-fill-hover);
  border-color: var(--game-accent-fill-hover);
  color: var(--game-accent-ink);
}

/* Typography utilities */
.eyebrow {
  font: 500 14px/1.3 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
  background: rgba(255, 255, 255, 0.02);
}

/* Hero */
.hero {
  height: max(864px, 120vh);
  position: relative;
  overflow: hidden;
  background: var(--bg-deepest);
}

.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: brightness(0.3) contrast(1.1);
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 9, 10, 0.6) 0%,
    rgba(8, 9, 10, 0.5) 43%,
    transparent 78%,
    rgba(8, 9, 10, 0.4)
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: calc(25vh - 55px);
}

.hero-content h1 {
  margin: 24px auto 0;
  width: 598px;
  max-width: 85%;
  height: 173px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-picture {
  display: block;
  width: 100%;
}

.hero-logo {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

.hero-intro {
  margin: 0 auto 40px;
  max-width: 480px;
  color: var(--ink-secondary);
  line-height: 1.6;
  font-size: 16px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.hero-actions .button {
  min-width: 180px;
}

.community-hero {
  height: 700px;
  min-height: 0;
}

.community-hero .hero-scene {
  filter: brightness(0.5);
  object-position: center 51%;
}

.community-hero .hero-content {
  padding-top: 110px;
}

.community-hero .hero-content h1 {
  width: 720px;
  height: 180px;
}

/* Promo and image CTAs */
.promo-band,
.image-cta {
  display: flex;
  position: relative;
  margin: 100px var(--gutter) 0;
  height: 590px;
  border-radius: 16px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--line-subtle);
}

.promo-band > img,
.image-cta > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-band:after,
.image-cta:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 10, 0.5);
}

.promo-band > div,
.image-cta > div {
  position: relative;
  z-index: 1;
}

.promo-band h2,
.image-cta h2 {
  font: 600 48px/1.1 'Inter', sans-serif;
  margin: 20px 0 28px;
  letter-spacing: -0.02em;
}

/* Carousel section */
.carousel-section {
  padding: 100px 0 75px;
  overflow: hidden;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--gutter) 40px;
}

.carousel-controls {
  display: flex;
  gap: 8px;
}

.carousel-controls button {
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
  font-size: 14px;
  transition: all 0.2s ease;
}

.carousel-controls button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-strong);
}

.carousel {
  display: flex;
  gap: 32px;
  padding: 0 var(--gutter) 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); /* snapping keeps the first card on the gutter */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.carousel .story-card {
  flex: 0 0 calc((100vw - 100px) / 3.3);
  min-width: 280px;
  scroll-snap-align: start;
}

.story-card img {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line-subtle);
}

.story-card h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 20px;
  letter-spacing: -0.01em;
}

.story-card p {
  color: var(--muted);
  margin: 10px 0 14px;
  line-height: 1.5;
  font-size: 14px;
}

.carousel-section .center {
  display: flex;
  justify-content: center;
  margin: 40px var(--gutter) 0;
}

/* Vision section */
.vision {
  padding: 60px var(--gutter) 90px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.035), transparent 70%);
}

.vision > .eyebrow {
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 25px;
}

.vision > p {
  max-width: 850px;
  margin: 60px auto 45px;
  font: 600 44px/1.2 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink-secondary);
}

.vision > p span {
  display: inline-flex;
  vertical-align: middle;
  border: 1px solid var(--line);
  border-radius: 99px;
  height: 50px;
  align-items: center;
  padding: 0 24px;
  color: var(--ink);
  font: 500 10px 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
}

/* Cinematic */
.cinematic {
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 var(--gutter);
  border: 1px solid var(--line-subtle);
}

.cinematic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footer */
.site-footer {
  padding: 50px var(--gutter) 35px;
  border-top: 1px solid var(--line);
  background: var(--bg-base);
}

.footer-main {
  display: grid;
  grid-template-columns: 2fr 1.1fr 1fr 1.2fr;
  gap: 55px;
}

.footer-about picture {
  display: block;
}

.footer-about img {
  width: 235px;
  height: auto;
  margin-bottom: 22px;
  mix-blend-mode: screen;
}

.footer-about p {
  max-width: 365px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.footer-main h2 {
  font: 600 14px 'Inter', sans-serif;
  color: var(--muted);
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}

.footer-main > div > a {
  display: block;
  font-size: 12px;
  margin: 0 0 15px;
  color: var(--ink-secondary);
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.footer-main > div > a:hover {
  color: var(--ink);
}

/* Legal row: 12px in --muted (6.1:1 on the footer) instead of 10px --subtle (3.3:1). */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 25px;
  align-items: center;
  margin-top: 80px;
  padding-top: 20px;
  border-top: 1px solid var(--line-subtle);
  font-size: 12px;
  color: var(--muted);
}

.footer-bottom small {
  margin-right: auto;
  font-size: 12px;
}

.footer-bottom a:hover {
  color: var(--ink-secondary);
}

/* Index-specific */
.index-title {
  padding: 240px var(--gutter) 90px;
}

.index-title h1 {
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 780px;
  font-weight: 600;
}

.index-title h1 span {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 15px;
}

.index-title h1 span:before {
  content: '';
  display: block;
  width: 165px;
  height: 1px;
  background: var(--line);
}

.news-feature {
  margin: 0 var(--gutter) 80px;
}

.feature-meta {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  margin-bottom: 40px;
}

.feature-meta h2 {
  font-size: 22px;
  line-height: 1.2;
  max-width: 310px;
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feature-meta > div > p:not(.tag) {
  color: var(--muted);
  max-width: 250px;
  margin-bottom: 28px;
  font-size: 14px;
}

.news-feature > a > img {
  width: 100%;
  height: 590px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-subtle);
}

.news-intro {
  max-width: 510px;
  color: var(--ink-secondary);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 28px;
}

.news-intro a,
.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}

.news-timeline {
  margin: 0 var(--gutter) 120px;
  border-top: 1px solid var(--line-subtle);
}

.timeline-entry {
  display: grid;
  grid-template-columns: 72px minmax(220px, .9fr) minmax(280px, 1.1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding: 54px 0;
  border-bottom: 1px solid var(--line-subtle);
}

.timeline-marker {
  align-self: start;
  padding-top: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.timeline-marker span {
  display: inline-grid;
  min-width: 38px;
  height: 28px;
  padding: 0 8px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 99px;
}

.timeline-visual { display: block; }
.timeline-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1.18;
  object-fit: cover;
  border: 1px solid var(--line-subtle);
  border-radius: 14px;
  transition: transform .3s ease, border-color .3s ease;
}
.timeline-visual:hover img { transform: translateY(-3px); border-color: var(--line); }
.timeline-copy h2 { max-width: 520px; font-size: clamp(26px, 3vw, 42px); line-height: 1.04; letter-spacing: -.035em; margin: 14px 0; }
.timeline-copy > p:not(.tag) { max-width: 460px; color: var(--ink-secondary); line-height: 1.6; margin-bottom: 20px; }
.timeline-entry-current .timeline-marker span { border-color: var(--ink); color: var(--ink); }
.timeline-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 25px; }

@media (max-width: 750px) {
  .news-timeline { margin-bottom: 72px; }
  .timeline-entry { grid-template-columns: 42px 1fr; gap: 20px; padding: 36px 0; }
  .timeline-visual { grid-column: 2; }
  .timeline-copy { grid-column: 2; }
  .timeline-copy h2 { font-size: 28px; }
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px 35px;
  padding: 0 var(--gutter) 100px;
}

.two-column .story-card img {
  height: 400px;
}

.community-about,
.spotlight {
  padding: 60px var(--gutter) 90px;
}

.community-about > .eyebrow {
  border-bottom: 1px solid var(--line);
  padding-bottom: 25px;
}

.community-about > div {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  margin-top: 55px;
  align-items: center;
}

.community-about h2:not(.eyebrow) {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.community-about p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}

.spotlight > .eyebrow {
  margin-bottom: 40px;
}

.three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Article page */
.article-page {
  padding: 180px var(--gutter) 0;
}

.article-cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-subtle);
}

.article-meta {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  padding: 50px 0 65px;
  align-items: center;
}

.article-meta h1 {
  font-size: 32px;
  line-height: 1.2;
  margin: 14px 0;
  max-width: 800px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.article-intro {
  font-size: 18px;
  max-width: 720px;
  margin-bottom: 20px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.round-action {
  flex: none;
  width: 108px;
  height: 108px;
  background: var(--bg-elevated);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.round-action:hover {
  background: var(--bg-hover);
  border-color: var(--line-strong);
}

.round-action span {
  font-size: 28px;
}

.article-copy {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 60px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-secondary);
}

.article-copy h2 {
  font-size: 28px;
  margin: 55px 0 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.article-copy h3 {
  font-size: 20px;
  margin: 40px 0 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.article-copy p {
  margin: 0 0 22px;
}

.article-copy a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.article-copy a:hover {
  color: var(--accent-hover);
  text-decoration-color: rgba(165, 180, 252, 0.5);
}

.article-copy img {
  margin: 35px 0;
  border-radius: 12px;
  border: 1px solid var(--line-subtle);
}

/* Keep the home-page shop action unavailable until wallet sign-in succeeds. */
body.home:not(.is-authenticated) .header-actions .button.filled {
  display: none;
}

/* Auth Dialog */
.public-auth-dialog {
  --auth-paper: #18191b;
  --auth-ink: #f7f8f8;
  --auth-rule: rgba(255, 255, 255, 0.08);
  
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--auth-paper);
  color: var(--auth-ink);
  width: min(820px, calc(100vw - 40px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.4);
}

.public-auth-dialog::backdrop {
  background: rgba(8, 9, 10, 0.85);
  backdrop-filter: blur(8px);
}

.public-auth-dialog .dialog-close {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--auth-ink);
  font-size: 24px;
  line-height: 1;
  transition: all 0.2s ease;
}

.public-auth-dialog .dialog-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-strong);
}

.public-auth-dialog > *.public-auth-mark,
.public-auth-dialog > .eyebrow,
.public-auth-dialog > h2,
.public-auth-dialog > .public-auth-copy,
.public-auth-dialog > .public-auth-status {
  margin-left: 42px;
  margin-right: 42px;
}

.public-auth-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 36px;
  padding-right: 40px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.public-auth-mark span:first-child {
  font: 700 24px/1 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.public-auth-mark i {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--line);
}

.public-auth-dialog .eyebrow {
  margin-top: 50px;
  color: var(--muted);
  font: 500 14px/1.2 'Inter', sans-serif;
  letter-spacing: 0.1em;
}

.public-auth-dialog h2 {
  margin-top: 12px;
  font: 600 clamp(42px, 7vw, 72px)/1 'Inter', sans-serif;
  letter-spacing: -0.03em;
}

.public-auth-copy {
  max-width: 420px;
  margin-top: 24px;
  color: var(--ink-secondary);
  line-height: 1.6;
  font-size: 15px;
}

.public-auth-status {
  min-height: 24px;
  margin-top: 18px;
  margin-bottom: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-bright);
}

.public-auth-payload {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas: 'qr steps' 'qr action';
  gap: 0 40px;
  align-items: center;
  margin-top: 40px;
  padding: 36px 42px 42px;
  border-top: 1px solid var(--auth-rule);
  background: rgba(0, 0, 0, 0.2);
}

.public-auth-qr-frame {
  grid-area: qr;
  position: relative;
  width: 280px;
  padding: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.public-auth-qr-frame img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 4px;
}

.public-auth-qr-frame span {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.public-auth-steps {
  grid-area: steps;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-secondary);
}

.public-auth-steps li {
  margin: 8px 0;
}

.public-auth-payload > .button {
  grid-area: action;
  margin-top: 20px;
  min-height: 44px;
  gap: 12px;
  white-space: normal;
}

/* Second wallet in the sign-in dialogs (Joey: its browser extension, or the Joey app on the
   phone over WalletConnect). Both buttons stay on the monochrome site accent. */
.public-auth-providers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: -16px 42px 36px;
}

.public-auth-providers:not([hidden]) ~ .public-auth-payload {
  margin-top: 4px;
}

.public-auth-providers .public-auth-or {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-secondary);
}

.public-auth-providers small {
  flex-basis: 100%;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
}

.public-auth-dialog > #public-signin-start,
.public-auth-dialog > #public-demo-signin {
  margin: 0 0 36px 42px;
}

.portal-dialog #connect-wallet + #connect-joey {
  margin-left: 10px;
}

/* Starter Claim Dialog */
#starter-claim-dialog {
  width: min(680px, calc(100vw - 48px));
  max-width: 680px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--ink);
  padding: 36px 40px;
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.4);
}

#starter-claim-dialog::backdrop {
  background: rgba(8, 9, 10, 0.85);
  backdrop-filter: blur(8px);
}

.starter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-subtle);
}

.starter-row:last-child {
  border-bottom: 0;
}

.starter-row b {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.starter-row span {
  font-size: 12px;
  color: var(--muted);
}

.starter-row .button {
  font-size: 11px;
  padding: 8px 14px;
  min-height: 32px;
}

.starter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.starter-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  animation: starter-spin 0.8s linear infinite;
  display: inline-block;
}

/* A row whose only action is the spinner (minting, or a signed request being checked on the ledger)
   keeps the height of a button row, so the list does not jump when its buttons come back
   (SEND A NEW REQUEST after a decline, OPEN XAMAN for a fresh request). */
.starter-row > .starter-spinner {
  flex: 0 0 auto;
  margin: 11px 0;
}

@keyframes starter-spin {
  to {
    transform: rotate(360deg);
  }
}

.starter-claim-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.starter-claim-prompt p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

/* Responsive - Large screens */
@media (min-width: 1600px) {
  .hero-content {
    padding-top: 170px;
  }

  .hero {
    height: 120vh;
  }

  .hero-content h1 {
    margin-top: 12px;
  }
}

/* Responsive - Mobile */
@media (max-width: 700px) {
  :root {
    --gutter: 16px;
  }

  .site-header {
    height: 84px;
  }

  /* The MENU label is hidden visually but keeps naming the button for screen readers. */
  .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .header-actions {
    gap: 8px;
  }

  /* 44px tap targets. */
  .header-actions .button {
    padding: 0 14px;
    min-height: 44px;
    font-size: 11px;
  }

  /* Long states (RETRY CONNECTION) shorten with an ellipsis instead of reaching the logo:
     half the width minus the logo half, SHOP NOW, the gap and the gutter. */
  .header-actions .sign-in {
    display: inline-block;
    max-width: calc(50vw - 152px);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 42px;
  }

  .brand-mark {
    width: 42px;
    height: 46px;
    top: 16px;
  }

  .menu-circle {
    width: 46px;
    height: 46px;
  }

  .hero {
    height: 100svh;
    min-height: 740px;
  }

  .hero-content {
    padding-top: 130px;
  }

  .hero-content h1 {
    width: 300px;
    max-width: 88%;
    height: 90px;
    margin-top: 16px;
  }

  .hero-intro {
    font-size: 14px;
    padding: 0 20px;
    margin: 10px auto 28px;
    max-width: 340px;
  }

  .hero-actions {
    gap: 12px;
    padding: 0 10px;
  }

  .hero-actions .button {
    padding: 10px 16px;
    min-height: 44px;
    min-width: 0;
    font-size: 11px;
  }

  .hero-scene {
    object-position: 50% center;
    filter: brightness(0.35);
  }

  .community-hero {
    height: 650px;
    min-height: 650px;
  }

  .community-hero .hero-content {
    padding-top: 150px;
  }

  .community-hero .hero-content h1 {
    width: 300px;
    height: 90px;
  }

  .community-hero .hero-scene {
    object-position: center;
    filter: brightness(0.5);
  }

  .promo-band,
  .image-cta {
    height: 220px;
    border-radius: 12px;
    margin-top: 100px;
  }

  .promo-band h2,
  .image-cta h2 {
    font-size: 26px;
    margin: 12px 0 18px;
  }

  .promo-band .eyebrow,
  .image-cta .eyebrow {
    font-size: 12px;
  }

  .promo-band .button,
  .image-cta .button {
    padding: 10px 18px;
    font-size: 11px;
    min-height: 44px;
  }

  .eyebrow {
    font-size: 13px;
  }

  .carousel-section {
    padding: 75px 0 50px;
  }

  .section-heading {
    margin-bottom: 32px;
  }

  .carousel {
    gap: 24px;
  }

  .carousel .story-card {
    flex-basis: calc(100vw - 78px);
    min-width: 0;
  }

  .story-card img {
    height: 290px;
  }

  .story-card h3 {
    font-size: 15px;
  }

  .story-card p {
    font-size: 13px;
  }

  .vision {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .vision > p {
    font-size: 26px;
    line-height: 1.25;
    max-width: 300px;
    margin: 50px auto 35px;
  }

  .vision > p span {
    height: 36px;
    padding: 0 16px;
    font-size: 10px;
  }

  .cinematic {
    display: none;
  }

  .two-column {
    grid-template-columns: 1fr;
    gap: 45px;
    padding-bottom: 60px;
  }

  .two-column .story-card img {
    height: 320px;
  }

  .community-about > div {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .three-column {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .index-title {
    padding: 160px var(--gutter) 70px;
  }

  .index-title h1 {
    font-size: 32px;
  }

  .news-feature > a > img {
    height: 400px;
  }

  .article-page {
    padding: 140px var(--gutter) 0;
  }

  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 0 50px;
  }

  .article-meta h1 {
    font-size: 28px;
  }

  .round-action {
    width: 90px;
    height: 90px;
    font-size: 9px;
  }

  .round-action span {
    font-size: 24px;
  }

  .article-copy {
    font-size: 15px;
  }

  .article-copy h2 {
    font-size: 24px;
    margin: 45px 0 20px;
  }

  .article-copy h3 {
    font-size: 18px;
    margin: 35px 0 16px;
  }

  .public-auth-dialog {
    width: calc(100vw - 32px);
  }

  .public-auth-dialog .dialog-close {
    right: 12px;
    top: 12px;
  }

  .public-auth-dialog .eyebrow {
    margin-top: 32px;
  }

  .public-auth-dialog h2 {
    font-size: clamp(32px, 9vw, 56px);
  }

  .public-auth-dialog > *.public-auth-mark,
  .public-auth-dialog > .eyebrow,
  .public-auth-dialog > h2,
  .public-auth-dialog > .public-auth-copy,
  .public-auth-dialog > .public-auth-status {
    margin-left: 24px;
    margin-right: 24px;
  }

  .public-auth-payload {
    grid-template-columns: 1fr;
    grid-template-areas: 'qr' 'steps' 'action';
    padding: 24px;
    gap: 24px;
  }

  .public-auth-providers {
    margin: -14px 24px 28px;
  }

  .public-auth-dialog > #public-signin-start,
  .public-auth-dialog > #public-demo-signin {
    margin: 0 0 30px 24px;
  }

  .portal-dialog #connect-wallet + #connect-joey {
    margin: 10px 0 0;
  }

  .public-auth-qr-frame {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  #starter-claim-dialog {
    max-width: none;
    padding: 24px 20px;
    width: calc(100vw - 32px);
  }

  .starter-row {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
  }

  .starter-actions {
    justify-content: flex-start;
  }

  /* Buttons are 44 px tall at phone widths: the spinner row matches. */
  .starter-row > .starter-spinner {
    margin: 14px 0;
  }
}

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

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Restored: critical rules dropped during the visual redesign --- */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.activities{padding:90px var(--gutter);overflow:hidden}
.activities details{border-top:1px solid var(--line);padding:22px 0}
.activities details:last-child{border-bottom:1px solid var(--line)}
.activities-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:100px}
.activities-layout>p{font-size:22px;max-width:460px;line-height:1.35;color:var(--ink-secondary)}
.marquee{font:500 64px/1.1 'Inter',sans-serif;white-space:nowrap;margin:50px -30px 75px;color:var(--muted);animation:drift 26s linear infinite}
@keyframes drift{to{transform:translateX(-25%)}}
.legal-copy{max-width:760px;margin:0 auto 120px;font-size:17px;line-height:1.8;padding:0 20px;color:var(--ink-secondary)}
.legal-copy h2{font-size:24px;color:var(--ink);margin-bottom:25px}
.legal-copy p+p{margin-top:25px}
.legal-title{padding-bottom:70px}
/* Credits page (2026-10-13): one entry per third-party source; staged (not yet live) items are marked. */
.credits-copy{max-width:860px}
.credits-copy a{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
.credits-copy a:hover{color:var(--ink);text-decoration-color:currentColor}
.credits-section{margin-top:80px}
.credits-section>p{font-size:16px}
.credit-entry{border-top:1px solid var(--line);padding:24px 0}
.credit-entry:last-child{border-bottom:1px solid var(--line)}
.credit-entry h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:600 18px/1.35 'Inter',sans-serif;color:var(--ink)}
.credit-status{font:500 11px/1 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--line-strong);border-radius:4px;color:var(--ink-secondary)}
.credit-status.staged{border-style:dashed;color:var(--muted)}
.credit-entry dl{display:grid;grid-template-columns:110px 1fr;gap:6px 18px;margin:14px 0 0;font-size:15px;line-height:1.6}
.credit-entry dt{font:500 12px/1.9 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.credit-entry dd{margin:0;overflow-wrap:anywhere}
.credit-line{margin-top:16px;padding:14px 16px;border-left:2px solid var(--accent-line);background:var(--bg-elevated);color:var(--ink);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.credit-line b{display:block;margin-bottom:4px;font:500 11px/1.4 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.credits-copy .credits-updated{margin-top:60px;font-size:13px;color:var(--muted)}
@media (max-width:560px){.credits-section{margin-top:56px}.credit-entry dl{grid-template-columns:1fr;gap:0}.credit-entry dd+dt{margin-top:10px}}
.game-landing{min-height:100vh;position:relative;display:grid;place-items:center;text-align:center;background:var(--bg-deepest)}
.game-landing>img{position:absolute;width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.game-landing>div{position:relative;padding:170px 20px 100px}
.game-landing h1{font:600 90px/.9 'Inter',sans-serif;margin:25px 0}
.game-landing p{margin-bottom:25px;color:var(--ink-secondary)}
.game-landing .button{margin:4px}
@media(max-width:750px){
  .desktop-break{display:none}
  .activities-layout{grid-template-columns:1fr;gap:45px}
  .activities-layout>p{font-size:18px}
  .marquee{font-size:36px;margin:30px -16px}
  .game-landing h1{font-size:48px}
}

/* --- Public pages: header, accessibility and home sections --- */

/* Sign out lives in the menu too, so phones (one header button) can always reach it. */
.menu-extra {
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}

.menu-extra a,
.menu-extra button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.menu-sign-out {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  transition: color 0.2s ease;
}

.menu-sign-out:hover {
  color: var(--ink);
}

.menu-close {
  min-width: 44px;
  min-height: 44px;
}

/* Below 960px the header has no room for PROFILE + SIGN OUT + SHOP NOW beside the centred
   logo, so SIGN OUT is offered in the menu instead (see public.js). */
@media (max-width: 960px) {
  .header-actions .public-sign-out {
    display: none;
  }
}

/* Phones: one compact account button (SIGN IN / PROFILE) that can never reach the centred logo. */
@media (max-width: 560px) {
  .header-actions .button:not(.sign-in) {
    display: none;
  }

  .header-actions .sign-in {
    max-width: calc(50vw - 21px - 10px - var(--gutter));
  }

  /* Keep the whole menu, including SIGN OUT, on one phone screen. */
  .menu-dialog {
    padding: 76px 24px 28px;
  }

  .menu-dialog nav {
    margin: 22px 0;
  }

  .menu-dialog nav a {
    padding: 11px 0;
    font-size: 28px;
  }
}

/* Small labels: 12px in --muted (6.1:1 on near-black) instead of 10px --subtle (3.4:1). */
body:not(.portal) .tag {
  font-size: 12px;
  color: var(--muted);
  border-color: var(--line-strong);
}

/* External call to action note (hero) */
.hero-note {
  margin-top: 14px;
  color: var(--ink-secondary);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* "What we do" accordion */
.activities details {
  padding: 0;
}

.activities summary {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.activities summary::-webkit-details-marker {
  display: none;
}

.activities summary::marker {
  content: '';
}

.activities summary span {
  min-width: 24px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.activities summary b {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-weight: 400;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.activities summary:hover b {
  border-color: var(--ink-secondary);
}

.activities details[open] summary b {
  transform: rotate(45deg);
}

.activities summary:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 4px;
  border-radius: 4px;
}

.activities details > p {
  max-width: 520px;
  padding: 0 0 4px 44px;
  color: var(--ink-secondary);
  line-height: 1.6;
}

.activities .activity-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 4px 0 18px 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.activities .activity-link:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

/* Home: What's New cards (generated from work/news/posts.json) */
.home-news-card .news-meta {
  margin-top: 18px;
}

.home-news-card h3 {
  margin-top: 12px;
}

.home-news-media {
  overflow: hidden;
  height: 320px;
  border-radius: 12px;
  border: 1px solid var(--line-subtle);
}

.home-news-media img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.3s ease;
}

.home-news-card:hover .home-news-media img {
  transform: scale(1.03);
}

.home-news-media-text {
  display: grid;
  align-content: end;
  gap: 12px;
  padding: 24px;
  border-color: var(--line);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    #111214;
}

.home-news-media-text span {
  color: #d9d9d6;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.home-news-media-text b {
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

/* Home: jump-in row (Wardrobe, Shop + crates, Map) */
.home-jump {
  padding: 30px var(--gutter) 40px;
}

.home-jump > .eyebrow {
  margin-bottom: 32px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.home-jump-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-jump-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #111214;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.home-jump-card:hover {
  border-color: var(--line-strong);
  background: #16171a;
}

.home-jump-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.home-jump-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.home-jump-card:hover .home-jump-media img {
  transform: scale(1.03);
}

.home-jump-media-map {
  display: grid;
  place-items: center;
  color: #e8e8e6;
  background:
    radial-gradient(70% 90% at 50% 100%, var(--game-accent-soft), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(255, 255, 255, 0.11), transparent 70%),
    #0d0e10;
}

.home-jump-media-map svg {
  width: 46%;
  height: auto;
}

.home-jump-copy {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px 22px 14px;
}

.home-jump-kicker {
  color: #d9d9d6;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.home-jump-copy h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.home-jump-copy p {
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.home-jump-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.home-jump-card:hover .home-jump-go {
  color: var(--accent-hover);
}

@media (max-width: 750px) {
  .home-jump-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: 44px tap targets without changing the desktop look. */
@media (max-width: 700px) {
  body:not(.portal) .button {
    min-height: 44px;
  }

  .carousel-controls button {
    width: 44px;
    height: 44px;
  }

  .footer-main > div > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
  }

  .footer-main h2 {
    margin-bottom: 4px;
  }

  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .home-news-media {
    height: 290px;
  }

  .activities summary {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
  }

  .activities summary b,
  .home-news-media img,
  .home-jump-media img {
    transition: none;
  }

  .home-news-card:hover .home-news-media img,
  .home-jump-card:hover .home-jump-media img {
    transform: none;
  }
}

/* About / Project page (/about/). Monochrome; only the Offline District section uses the game blue.
   Big statement type with small tracked labels, 1px rules between sections (design references 2026-10-08). */
.about-hero { max-width: 1180px; margin: 0 auto; padding: 200px var(--gutter) 64px; }
.about-hero .eyebrow { margin: 0 0 18px; font-size: 12px; }
.about-hero h1 { margin: 0; font-size: clamp(48px, 11vw, 132px); font-weight: 700; line-height: .88; letter-spacing: -.06em; text-transform: uppercase; }
.about-lede { max-width: 62ch; margin: 28px 0 0; color: var(--ink-secondary); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.about-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.about-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.about-chip-soon { border-style: dashed; color: var(--ink-secondary); }
.about-chip-game { border-color: var(--game-accent-line); background: var(--game-accent-soft); color: #e8e8e6; }
.about-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; }
.about-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-secondary); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: border-color .2s ease, color .2s ease; }
.about-jump a:hover { border-color: var(--accent); color: var(--ink); }
.about-section { display: grid; gap: 18px; max-width: 1180px; margin: 0 auto; padding: 56px var(--gutter); border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.about-section-head .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; }
.about-section-head h2 { margin: 0; font-size: clamp(30px, 5vw, 56px); font-weight: 700; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.about-copy { display: grid; gap: 16px; max-width: 68ch; color: var(--ink-secondary); font-size: 16px; line-height: 1.7; }
.about-copy p { margin: 0; }
.about-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.about-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.about-actions .button { min-height: 44px; padding: 12px 22px; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.about-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: about-step; }
.about-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-base); counter-increment: about-step; }
.about-steps li::before { content: counter(about-step, decimal-leading-zero); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); font-size: 12px; font-weight: 600; }
.about-steps b { color: var(--ink); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.about-steps span { font-size: 14px; line-height: 1.55; }
.about-game { border-top-color: var(--game-accent-line); background: radial-gradient(60% 100% at 0% 0%, var(--game-accent-soft), transparent 70%); }
.about-status-list { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.about-status-list > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.about-status-list dt { color: var(--ink); font-size: 15px; }
.about-status-list dd { margin: 0; }
.about-note { color: var(--muted); font-size: 14px; }
.about-note .text-link { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .about-section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 80px var(--gutter); }
}
@media (max-width: 750px) {
  .about-hero { padding: 140px var(--gutter) 48px; }
  .about-jump { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
  .about-jump a { flex: 0 0 auto; }
}

/* SITE-UPGRADE phase 2: nine big menu links and seven small ones. The big links scale with the screen height, so the
   whole menu (and SIGN OUT when signed in) stays on one screen on a laptop and on a phone. */
.menu-dialog { padding-top: clamp(64px, 9vh, 100px); }
.menu-dialog nav { margin: clamp(14px, 2.6vh, 35px) 0; }
.menu-dialog nav a { padding: clamp(8px, 1.5vh, 16px) 0; font-size: clamp(24px, 3.6vh, 36px); line-height: 1.15; }
@media (max-width: 560px) {
  .menu-dialog nav { margin: 16px 0; }
  .menu-dialog nav a { padding: clamp(7px, 1.2vh, 11px) 0; font-size: clamp(22px, 3.3vh, 28px); }
  .menu-extra { gap: 0 20px; }
}

/* ---------------------------------------------------------------- the centre line (Connor, 2026-10-13: "Make sure
   everything is centered"). Footer, carousel headings, the About hero and the closer sit on the middle of the page. */
.site-footer { text-align: center; }
.footer-main { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; }
.footer-about { display: grid; justify-items: center; }
.footer-about p { margin-inline: auto; }
.footer-bottom { justify-content: center; }
.footer-bottom small { margin-right: 0; flex-basis: 100%; }
.section-heading { flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
.about-hero { text-align: center; }
.about-lede { margin-inline: auto; }
@media (max-width: 900px) { .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: minmax(0, 1fr); } }
/* phone footer links are 44 px flex rows: their text sits on the centre line too */
.footer-main > div > a { justify-content: center; }