:root{--background:#f6f4eb;--foreground:#1c1c1b}
*{box-sizing:border-box}
body{margin:0;background:var(--background);color:var(--foreground);
  font:16px/1.55 Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,dl{margin:0}
h1,h2,h3{line-height:1.06;letter-spacing:-.05em}
h2{font-size:clamp(2.3rem,4.6vw,4.4rem);font-weight:800}
h2 em{font-family:Georgia,serif;font-weight:400}
p{line-height:1.65}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.retro button{cursor:pointer}
.retro a:focus-visible,.retro button:focus-visible{outline:3px solid #6550cf;outline-offset:4px}
.preview-note{background:#1c1c1b;color:#f6f4eb;padding:9px 18px;text-align:center;
  font:700 11px/1.5 'Courier New',monospace;letter-spacing:.06em}
.preview-note b{color:#d8ff3e}
[hidden]{display:none!important}

/* ---- app/retrofl.css ---- */
:root {
  --background: #f6f4eb;
  --foreground: #1c1c1b;
  --primary: #6550cf;
  --primary-foreground: #fff;
  --border: #a5a59b;
  --ring: #6550cf;
  --muted: #e7e6dc;
  --muted-foreground: #56564e;
}
.retro {
  --r-paper: #f6f4eb;
  --r-ink: #1c1c1b;
  --r-lime: #d8ff3e;
  --r-purple: #6550cf;
  --r-pink: #ffb6d3;
  background: var(--r-paper);
  color: var(--r-ink);
  font:
    16px/1.5 Arial,
    Helvetica,
    sans-serif;
  overflow: clip;
}
.retro button {
  cursor: pointer;
}
.retro a:focus-visible,
.retro button:focus-visible {
  outline: 3px solid #6550cf;
  outline-offset: 5px;
}
.r-announcement {
  background: var(--r-ink);
  color: var(--w-oninverse, var(--r-paper));
  padding: 10px 24px;
  text-align: center;
  font:
    700 12px/1.5 'Courier New',
    monospace;
  letter-spacing: 0.06em;
}
.r-announcement span {
  color: var(--r-lime);
  margin-left: 20px;
}
.r-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 5vw;
  border-bottom: 1px solid #1c1c1b25;
  gap: 24px;
  flex-wrap: wrap;
}
.r-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}
.r-logo img {
  width: 42px;
  height: 42px;
}
.r-dot {
  font:
    14px 'Courier New',
    monospace;
  align-self: start;
  letter-spacing: 0;
}
.r-nav nav {
  display: flex;
  gap: 32px;
  font-weight: 700;
  font-size: 14px;
}
.r-nav nav a:hover,
.r-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.r-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1.5px solid var(--r-ink);
  padding: 17px 22px;
  font-size: 15px;
  font-weight: 700;
  background: var(--r-lime);
  box-shadow: 3px 3px 0 var(--r-ink);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.r-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--r-ink);
}
.r-button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.r-small {
  padding: 11px 16px;
  font-size: 14px;
}
.r-dark {
  background: var(--r-ink);
  color: var(--w-oninverse, var(--r-paper));
  box-shadow: 4px 4px 0 var(--r-purple);
}
.r-hero {
  padding: 68px 5vw 75px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5vw;
  align-items: center;
  max-width: 1600px;
  margin: auto;
}
.r-eyebrow {
  font:
    700 13px/1.5 'Courier New',
    monospace;
  letter-spacing: 0.055em;
}
.r-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #6550cf;
  margin-right: 7px;
}
.r-hero h1 {
  font-size: clamp(3.8rem, 6.3vw, 6.7rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.072em;
  margin: 26px 0;
  position: relative;
}
.r-hero h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.07em;
  color: var(--r-purple);
}
.r-title-smile {
  display: inline-block;
  transform: rotate(10deg);
  font-family: 'Courier New', monospace;
  font-size: 0.53em;
  letter-spacing: -0.16em;
  vertical-align: middle;
  margin-left: 20px;
}
.r-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #50504a;
}
.r-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 28px 0 20px;
  flex-wrap: wrap;
}
.r-text-link {
  font-size: 14px;
  font-weight: 700;
}
.r-hero-note {
  font:
    12px/1.6 'Courier New',
    monospace;
  color: #595951;
}
.r-hero-art {
  position: relative;
  padding: 22px 0 50px;
}
.r-window {
  border: 2px solid var(--r-ink);
  background: #eee;
  box-shadow: 8px 8px 0 var(--r-ink);
}
.r-hero-window {
  transform: rotate(-3deg);
}
.r-titlebar {
  background: var(--r-purple);
  color: white;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px;
  font:
    700 13px/1.5 'Courier New',
    monospace;
  border-bottom: 2px solid var(--r-ink);
}
.r-titlebar > span:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
}
.r-address {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #2223;
  font:
    12px/1.5 'Courier New',
    monospace;
}
.r-address > span:first-of-type {
  flex: 1;
  background: white;
  border: 1px solid #aaa;
  padding: 5px 8px;
}
.r-old-web {
  background: var(--r-pink);
  padding: 35px 20px;
  text-align: center;
  background-image: radial-gradient(#1c1c1b25 1px, transparent 1px);
  background-size: 12px 12px;
}
.r-web-label {
  font:
    700 12px/1.5 'Courier New',
    monospace;
  letter-spacing: 0.1em;
}
.r-ascii {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.4;
  letter-spacing: -0.075em;
  margin: 20px 0 10px;
  font-weight: 800;
  white-space: nowrap;
}
.r-old-web h2 {
  font-size: 32px !important;
  font-weight: 900;
  letter-spacing: -0.065em;
  margin-bottom: 15px;
}
.r-old-web > p:last-of-type {
  font-size: 14px;
  line-height: 1.6;
}
.r-web-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}
.r-web-badges span {
  border: 2px solid #222;
  padding: 5px 8px;
  font:
    12px/1.2 'Courier New',
    monospace;
  background: #f8f7ec;
  box-shadow: 2px 2px 0 #222;
}
.r-web-badges span:nth-child(2) {
  background: var(--r-lime);
}
.r-window-bottom {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font:
    12px/1.5 'Courier New',
    monospace;
  gap: 10px;
}
.r-sticker {
  position: absolute;
  right: -10px;
  top: -20px;
  z-index: 1;
  background: var(--r-lime);
  border: 2px solid var(--r-ink);
  padding: 16px;
  transform: rotate(12deg);
  font-size: 13px;
  text-align: center;
  line-height: 1.1;
  box-shadow: 3px 3px 0 #222;
}
.r-sticky-note {
  position: absolute;
  bottom: 5px;
  right: 22px;
  background: #f9e47c;
  padding: 17px 23px;
  transform: rotate(5deg);
  font:
    italic 22px/1.2 Georgia,
    serif;
  box-shadow: 3px 4px 0 #2222;
}
.r-marquee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 34px;
  padding: 20px 5vw;
  background: var(--r-lime);
  border-block: 2px solid #222;
  font:
    900 14px/1.3 'Courier New',
    monospace;
  white-space: nowrap;
  overflow: hidden;
}
.r-marquee span[aria-hidden] {
  font-size: 28px;
}
.r-section {
  padding: 80px 5vw;
  max-width: 1600px;
  margin: auto;
}
.r-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 35px;
}
.retro h2 {
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1.07;
  margin-top: 15px;
}
.retro h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--r-purple);
}
.r-section-heading > p {
  font-size: 16px;
  color: #585851;
  line-height: 1.6;
}
.r-era-picker {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.r-era-picker button {
  flex: 1;
  text-align: left;
  border: 1.5px solid #222;
  padding: 15px 20px;
  background: transparent;
  font:
    700 24px/1.3 'Courier New',
    monospace;
  transition: background 0.2s;
}
.r-era-picker button span {
  display: block;
  font-size: 14px;
  font-weight: 400;
}
.r-era-picker button[aria-pressed='true'] {
  background: var(--r-ink);
  color: var(--r-lime);
}
.r-memory {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 380px;
  border: 2px solid #222;
  box-shadow: 5px 5px 0 #222;
  background: white;
}
.r-memory-art {
  position: relative;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebe8ff;
  min-height: 330px;
}
.r-memory-art img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.r-era-1 {
  background: #12203d;
}
.r-era-1 img {
  mix-blend-mode: normal;
  image-rendering: pixelated;
}
.r-era-2 {
  background: #f1ddb0;
}
.r-memory-stamp {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font:
    12px/1.5 'Courier New',
    monospace;
}
.r-era-1 .r-memory-stamp {
  color: white;
}
.r-memory-ascii {
  font-size: 40px;
  font-weight: 900;
}
.r-memory-copy {
  padding: 35px 40px;
  animation: r-arrive 0.3s ease-out;
}
.r-memory-copy h3 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  margin: 12px 0 16px;
}
.r-memory-copy > p:not(.r-eyebrow):not(.r-credit) {
  color: #585851;
}
.r-caption {
  border-left: 3px solid var(--r-purple);
  padding: 0 0 0 16px;
  margin: 25px 0;
}
.r-caption .r-eyebrow {
  font-size: 12px;
}
.r-caption > p {
  white-space: pre-line;
  font-size: 17px;
  font-weight: 700;
  margin-top: 8px;
  line-height: 1.4;
}
.r-credit {
  font-size: 12px !important;
  line-height: 1.6;
  margin-top: 22px;
  color: #595951;
}
.r-credit a {
  text-decoration: underline;
}
.r-archive-note {
  font:
    12px/1.6 'Courier New',
    monospace;
  margin-top: 17px;
  color: #595951;
}
.r-manifesto {
  max-width: none;
  background: var(--r-purple);
  color: white;
  padding-top: 75px;
  padding-bottom: 70px;
}
.r-manifesto h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  margin: 25px 0 45px;
}
.r-manifesto h2 em {
  color: var(--r-lime);
}
.r-manifesto-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  border-top: 1px solid #ffffff50;
  padding-top: 30px;
  max-width: 1250px;
}
.r-manifesto-bottom > p {
  max-width: 470px;
  font-size: 18px;
}
.r-manifesto-bottom > div > p {
  font-size: 20px;
  line-height: 1.65;
}
.r-signature {
  display: block;
  margin-top: 22px;
  font:
    italic 19px Georgia,
    serif;
  color: var(--r-lime);
}
.r-token {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8vw;
  align-items: center;
}
.r-token-intro {
  font-size: 20px;
  margin: 24px 0 15px;
}
.r-token > div > p:last-child {
  color: #585851;
  max-width: 470px;
}
.r-receipt {
  background: white;
  transform: rotate(1deg);
}
.r-receipt .r-titlebar {
  background: var(--r-ink);
}
.r-receipt dl {
  margin: 12px 23px;
}
.r-receipt dl > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px dashed #aaa;
  padding: 14px 0;
  font:
    14px/1.5 'Courier New',
    monospace;
}
.r-receipt dd {
  text-align: right;
  font-weight: 700;
}
.r-receipt > p {
  padding: 12px 23px 25px;
  font-size: 13px;
}
.r-status {
  font-size: 12px;
  background: var(--r-lime);
  padding: 3px 6px;
  white-space: nowrap;
}
.r-footer {
  background: var(--r-ink);
  color: var(--w-oninverse, var(--r-paper));
  padding: 40px 5vw 25px;
}
.r-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border-bottom: 1px solid #ffffff35;
  padding-bottom: 30px;
}
.r-footer-top > p {
  font:
    italic 22px Georgia,
    serif;
}
.r-footer-top > a:last-child {
  font:
    13px 'Courier New',
    monospace;
}
.r-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  margin-top: 22px;
  font:
    12px/1.6 'Courier New',
    monospace;
  color: #c9c9c0;
}
.r-footer-bottom > p {
  max-width: 740px;
}
.r-footer-bottom > a {
  white-space: nowrap;
  text-decoration: underline;
}
@keyframes r-arrive {
  from {
    opacity: 0.4;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.r-footer {
  display: block;
}
.r-hero > div,
.r-token > div,
.r-memory > div {
  min-width: 0;
}
.r-receipt dd {
  margin: 0;
}
@media (min-width: 1600px) {
  .r-manifesto,
  .r-footer,
  .r-nav {
    padding-inline: max(5vw, calc((100vw - 1440px) /2));
  }
}
@media (max-width: 900px) {
  .r-nav nav {
    gap: 18px;
  }
  .r-hero {
    gap: 30px;
    padding-block: 55px;
  }
  .r-hero h1 {
    font-size: clamp(3rem, 6.7vw, 5rem);
  }
  .r-title-smile {
    display: none;
  }
  .r-sticker {
    right: -5px;
    font-size: 12px;
    padding: 10px;
  }
  .r-ascii {
    font-size: 44px;
  }
  .r-old-web {
    padding: 25px 10px;
  }
  .r-actions {
    gap: 20px;
  }
  .r-button {
    gap: 14px;
  }
  .r-hero-note {
    max-width: 260px;
  }
  .r-token {
    gap: 35px;
  }
  .r-receipt dl {
    margin-inline: 16px;
  }
  .r-memory-copy {
    padding: 28px;
  }
  .r-memory-art {
    padding: 25px;
  }
}
@media (max-width: 650px) {
  .r-announcement {
    font-size: 12px;
    padding: 9px;
  }
  .r-announcement span {
    display: none;
  }
  .r-nav {
    padding: 19px 5vw;
  }
  .r-logo {
    font-size: 28px;
  }
  /* These used to be display:none below 650px, with nothing in their place —
     so on a phone the wall and the about page had no route at all except a
     sixty-screen scroll. A row of small links costs less than a menu and has
     no JavaScript to fail. */
  .r-nav nav {
    order: 3;
    flex-basis: 100%;
    gap: 0;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    border-top: 2px solid currentColor;
    padding-top: 10px;
  }

  .r-nav nav a {
    font-size: 13px;
    padding: 8px 2px;
  }
  .r-small {
    font-size: 14px;
    padding: 10px;
  }
  .r-hero {
    grid-template-columns: 1fr;
    padding: 40px 6vw 45px;
    gap: 45px;
  }
  .r-hero h1 {
    font-size: clamp(3.4rem, 12.5vw, 5.5rem);
  }
  .r-title-smile {
    display: inline-block;
  }
  .r-lead {
    font-size: 17px;
  }
  .r-hero-note {
    max-width: none;
  }
  .r-hero-art {
    padding: 0 7px 40px;
  }
  .r-sticker {
    top: -15px;
    right: 0;
  }
  .r-old-web {
    padding: 28px 15px;
  }
  .r-ascii {
    font-size: 52px;
  }
  .r-sticky-note {
    font-size: 18px;
    bottom: 0;
  }
  .r-marquee {
    justify-content: start;
    font-size: 13px;
    padding-block: 15px;
  }
  .r-section {
    padding: 50px 6vw;
  }
  .r-section-heading {
    display: block;
  }
  .r-section-heading > p {
    margin-top: 20px;
  }
  .r-era-picker {
    gap: 6px;
  }
  .r-era-picker button {
    font-size: 22px;
    padding: 12px 8px;
  }
  .r-era-picker button span {
    font-size: 12px;
  }
  .r-memory {
    grid-template-columns: 1fr;
  }
  .r-memory-art {
    min-height: 270px;
    padding: 30px;
  }
  .r-memory-art img {
    height: 210px;
  }
  .r-memory-copy {
    padding: 26px;
  }
  .r-manifesto h2 {
    font-size: clamp(2.7rem, 10vw, 4rem);
  }
  .r-manifesto-bottom,
  .r-token {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .r-manifesto-bottom > p,
  .r-manifesto-bottom > div > p {
    font-size: 17px;
  }
  .r-footer-top,
  .r-footer-bottom {
    flex-wrap: wrap;
  }
  .r-footer-top > p {
    width: 100%;
    order: 3;
    font-size: 20px;
  }
  .r-footer-bottom {
    gap: 15px;
  }
  .r-receipt {
    margin: 5px;
  }
  .r-token h2 {
    font-size: 2.4rem;
  }
  .r-footer {
    padding-inline: 6vw;
  }
  .r-address > span:first-of-type {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .retro * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---- app/wiki.css ---- */
.wiki {
  --w-border: #24241f;
  scroll-margin-top: 20px;
}
.w-intro {
  padding: 48px 5vw 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  max-width: 1600px;
  margin: auto;
}
.w-intro h1 {
  font:
    900 clamp(2.5rem, 4.4vw, 4.8rem)/1.02 Arial,
    sans-serif;
  letter-spacing: -0.065em;
  margin: 18px 0;
}
.w-intro h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: #6550cf;
}
.w-intro h1 > span {
  font:
    700 0.75em 'Courier New',
    monospace;
  display: inline-block;
  transform: rotate(12deg);
  margin-left: 25px;
}
.w-intro > div > p:last-child {
  color: var(--w-muted, #55564c);
  font-size: 16px;
}
.w-intro-note {
  border: 1px solid #292921;
  background: #d8ff3e;
  transform: rotate(3deg);
  padding: 19px 22px;
  box-shadow: 4px 4px 0 #292921;
  min-width: 195px;
}
.w-intro-note > p {
  font:
    italic 23px/1.25 Georgia,
    serif;
  margin: 10px 0 14px;
}
.w-intro-note > span {
  font:
    12px/1.5 'Courier New',
    monospace;
}
.w-library {
  padding: 12px 5vw 65px;
  max-width: 1600px;
  margin: auto;
}
.w-toolbar {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.w-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2px solid #292921;
  padding: 0 18px;
  flex: 1;
  min-width: 0;
  min-height: 62px;
}
.w-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  padding: 16px 0;
  font:
    17px/1.5 Arial,
    sans-serif;
  color: #1c1c1b;
}
.w-search:focus-within {
  outline: 3px solid #6550cf;
  outline-offset: 3px;
}
.w-search input:focus-visible {
  outline: none;
}
.w-search > button {
  background: none;
  border: 0;
  padding: 7px;
}
.w-search-hint {
  font:
    12px/1.4 'Courier New',
    monospace;
  color: #666;
}
.w-toolbar > .r-button {
  box-shadow: 3px 3px 0 #222;
}
.w-filters {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 22px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #29292130;
  flex-wrap: wrap;
}
.w-filters > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.w-filters button {
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 700;
}
.w-filters button:hover {
  border-color: #292921;
}
.w-filters button[aria-pressed='true'] {
  background: #292921;
  color: var(--w-oninverse, #f6f4eb);
}
.w-filters > div:last-child button[aria-pressed='true'] {
  background: #e5dffe;
  color: #3e2d92;
  border-color: #bdb1eb;
}
.w-results-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px;
  font:
    12px/1.6 'Courier New',
    monospace;
}
.w-results-meta span {
  color: var(--w-muted, #66675b);
}
.w-results-meta button {
  background: transparent;
  border: 0;
  text-decoration: underline;
  font: inherit;
}
.w-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.w-card {
  border: 1.5px solid #292921;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.18s,
    transform 0.18s;
  animation: r-arrive 0.35s backwards;
}
.w-card:hover {
  box-shadow: 5px 5px 0 #292921;
  transform: translate(-3px, -3px);
}
.w-art {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 30px;
  min-height: 240px;
  height: 240px;
  border-bottom: 1.5px solid #292921;
  overflow: hidden;
}
.w-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.w-lilac {
  background: #c6b8f7;
  color: #1c1c1b;
}
.w-butter {
  background: #ffd84d;
}
.w-peach {
  background: #ffb0c9;
}
.w-mint {
  background: #d8ff3e;
}
.w-night {
  background: #2a1f6b;
  color: #fff;
}
.w-night img {
  image-rendering: pixelated;
}
.w-art-year {
  position: absolute;
  left: 14px;
  top: 12px;
  border: 1px solid currentColor;
  background: #fff;
  color: #292921;
  padding: 2px 7px;
  font:
    12px/1.4 'Courier New',
    monospace;
}
.w-type-art {
  font:
    italic 38px/1.1 Georgia,
    serif;
  text-align: center;
  max-width: 100%;
}
.w-card-copy {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.w-card-copy > .r-eyebrow {
  font-size: 12px;
  color: #6550cf;
}
.w-card-copy h2 {
  font-size: 27px;
  letter-spacing: -0.045em;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
  align-items: center;
}
.w-card-copy h2 svg {
  flex-shrink: 0;
}
.w-card-copy > p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--w-muted, #5b5b52);
  flex: 1;
}
.w-card-bottom {
  border-top: 1px solid #29292120;
  padding-top: 15px;
  margin-top: 22px;
  font:
    12px/1.5 'Courier New',
    monospace;
  display: flex;
  justify-content: space-between;
}
.w-editor-note {
  font:
    12px/1.6 'Courier New',
    monospace;
  color: var(--w-muted, #5b5b52);
  margin-top: 22px;
  max-width: 850px;
}
.w-empty {
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed #292921;
  background: #ece9df;
}
.w-empty > span {
  font:
    italic 55px Georgia,
    serif;
  color: #6550cf;
}
.w-empty h2 {
  font-size: 28px;
  margin: 20px 0 12px;
}
.w-empty p {
  margin-bottom: 25px;
}
.w-about {
  padding: 55px 5vw;
  background: #e4def6;
  border-top: 1px solid #292921;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
}
.w-about h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  margin-top: 20px;
}
.w-about p + p {
  margin-top: 15px;
}
.w-about details {
  border-top: 1px solid #29292140;
  margin-top: 25px;
  padding-top: 17px;
}
.w-about summary {
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.w-about details p {
  margin-top: 12px;
  font-size: 14px;
}
.w-article {
  padding: 35px 5vw 70px;
  max-width: 1400px;
  margin: auto;
}
.w-back {
  font:
    14px 'Courier New',
    monospace;
  display: inline-block;
  margin-bottom: 35px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.w-article-heading h1 {
  font:
    900 clamp(3rem, 6vw, 6rem)/1 Arial,
    sans-serif;
  letter-spacing: -0.065em;
  margin: 20px 0;
}
.w-article-heading h1 em {
  font-family: Georgia, serif;
  color: #6550cf;
  font-weight: 400;
}
.w-article-heading > p:last-child {
  font-size: 21px;
  line-height: 1.5;
  color: var(--w-muted, #55564c);
  max-width: 750px;
}
.w-article-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 7vw;
  margin-top: 40px;
  align-items: start;
}
.w-article-body section {
  margin-bottom: 35px;
}
.w-article-body h2 {
  font-size: 26px;
  margin-bottom: 15px;
  letter-spacing: -0.03em;
}
.w-article-body section > p {
  font-size: 18px;
  line-height: 1.8;
}
.w-factbox {
  border: 2px solid #292921;
  box-shadow: 5px 5px 0 #292921;
  background: white;
}
.w-factbox .w-art {
  height: 310px;
}
.w-facts {
  padding: 25px;
}
.w-facts dl {
  margin: 20px 0;
}
.w-facts dt {
  font:
    12px/1.5 'Courier New',
    monospace;
  color: var(--w-muted, #66675b);
  margin-top: 18px;
}
.w-facts dd {
  margin: 5px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.w-image-credit {
  font:
    12px/1.6 'Courier New',
    monospace;
  color: var(--w-muted, #66675b);
  border-top: 1px solid #29292130;
  padding-top: 15px;
}
.w-sources {
  border-top: 1px solid #29292140;
  padding-top: 25px;
}
.w-sources > a {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #5542b5;
}
.w-sources > p {
  font-size: 13px !important;
  margin-top: 18px;
  color: var(--w-muted, #66675b);
}
.w-related {
  border-top: 1px solid #292921;
  padding-top: 30px;
  margin-top: 30px;
}
.w-related h2 {
  font-size: 30px;
  margin-bottom: 25px;
}
.w-related > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.w-related a {
  border: 1px solid #292921;
  padding: 20px;
  background: #c6b8f7;
}
.w-related a:hover {
  background: #d8ff3e;
}
.w-related a span {
  font:
    12px 'Courier New',
    monospace;
  display: block;
  margin-bottom: 12px;
}
.w-related a b {
  font-size: 20px;
}
@media (max-width: 1000px) {
  .w-search-hint {
    display: none;
  }
  .w-intro h1 > span {
    display: none;
  }
  .w-grid {
    gap: 17px;
  }
  .w-card-copy {
    padding: 18px;
  }
  .w-card-copy h2 {
    font-size: 23px;
  }
  .w-art {
    height: 210px;
    min-height: 210px;
    padding: 30px 22px;
  }
  .w-article-grid {
    gap: 35px;
  }
  .w-factbox .w-art {
    height: 250px;
  }
  .w-intro-note {
    min-width: 175px;
  }
}
@media (max-width: 720px) {
  .w-intro {
    padding-top: 32px;
  }
  .w-intro-note {
    display: none;
  }
  .w-intro h1 {
    font-size: clamp(2.5rem, 7.8vw, 4rem);
  }
  .w-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .w-toolbar {
    flex-wrap: wrap;
  }
  .w-search {
    flex-basis: 100%;
  }
  .w-toolbar > .r-button {
    padding: 10px 15px;
    font-size: 14px;
  }
  .w-results-meta span {
    display: none;
  }
  .w-about,
  .w-article-grid {
    grid-template-columns: 1fr;
  }
  .w-about {
    gap: 30px;
  }
  .w-article-grid .w-factbox {
    grid-row: 1;
  }
  .w-factbox .w-art {
    height: 290px;
  }
  .w-related > div {
    grid-template-columns: 1fr;
  }
  .w-article-heading > p:last-child {
    font-size: 18px;
  }
  .w-article-body section > p {
    font-size: 17px;
  }
}
@media (max-width: 460px) {
  .w-grid {
    grid-template-columns: 1fr;
  }
  .w-art {
    height: 245px;
  }
  .w-card-copy h2 {
    font-size: 28px;
  }
  .w-filters {
    gap: 10px;
  }
  .w-filters button {
    font-size: 13px;
    padding: 8px 10px;
  }
  .w-search input {
    font-size: 16px;
  }
  .w-search {
    padding-inline: 12px;
  }
  .w-intro h1 {
    font-size: 2.45rem;
  }
  .wiki .r-nav > .r-button {
    font-size: 12px;
    gap: 6px;
    padding: 9px;
  }
  .wiki .r-nav {
    gap: 12px;
  }
  .wiki .r-logo {
    font-size: 27px;
  }
  .wiki .r-logo img {
    width: 35px;
    height: 35px;
  }
}

/* ---- app/retro-pop.css ---- */
/* Random Access Memes — retro-pop editorial theme.
   Riso-printed meme annual: saturated spot inks, slight misregistration on
   interaction, halftone grounds, paper grain. Replaces the rejected
   Windows-desktop theme. Layout stays in wiki.css; brand shell in retrofl.css (filename kept; see README). */

.wiki {
  /* Spot inks, drawn from brand/RAM/tokens.json */
  --r-purple: #6550cf;
  --r-lime: #d8ff3e;
  --r-pink: #ff8fb4;
  --r-note: #ffd84d;
  --r-deep: #2a1f6b;
  --w-border: #1c1c1b;
  --w-rule: #1c1c1b26;
  --w-paper-2: #efebdc;
  --w-display: 'Archivo', 'Arial Black', Arial Black, Arial, sans-serif;
  --w-label: 'Courier New', Courier, monospace;

  /* Paper grain: a fine halftone laid over the brand paper. */
  background-color: var(--w-oninverse, var(--r-paper));
  background-image: radial-gradient(
    circle at 1px 1px,
    #1c1c1b14 1px,
    transparent 1.3px
  );
  background-size: 5px 5px;
  font-family: Arial, Helvetica, sans-serif;
}

/* ---------- Shell ---------- */

.wiki .r-announcement {
  background: var(--w-border);
  color: var(--w-oninverse, var(--r-paper));
  border: 0;
  box-shadow: none;
  padding: 11px 24px;
  font: 700 12px/1.5 var(--w-label);
  letter-spacing: 0.08em;
}

.wiki .r-announcement span {
  color: var(--r-lime);
}

.wiki .r-nav {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--w-border);
  box-shadow: none;
  padding: 20px 5vw;
  gap: 24px;
}

.wiki .r-logo {
  font-family: var(--w-display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 34px;
  letter-spacing: -0.045em;
  text-shadow: none;
}

.wiki .r-logo img {
  width: 40px;
  height: 40px;
}

.wiki .r-nav nav a {
  font-family: inherit;
  border: 0;
  padding: 6px 0;
  font-weight: 700;
  background-image: linear-gradient(var(--r-purple), var(--r-purple));
  background-size: 0 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.22s ease;
}

.wiki .r-nav nav a:hover {
  background: none;
  background-image: linear-gradient(var(--r-purple), var(--r-purple));
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
}

/* Flat poster button with a printed offset — no bevels. */
.wiki .r-button {
  background: var(--r-lime);
  color: var(--w-border);
  border: 2px solid var(--w-border);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--w-border);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* The wider search is the one action that leaves the archive, so it takes the
   ink button rather than the lime one. */
.wiki .r-button.r-dark {
  background: var(--w-border);
  color: var(--w-oninverse, var(--r-paper));
  box-shadow: 4px 4px 0 var(--r-purple);
}

.wiki .r-button.r-dark:hover {
  background: var(--w-border);
  box-shadow: 6px 6px 0 var(--r-purple);
}

.wiki .r-button:hover {
  background: var(--r-lime);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--r-purple);
}

.wiki .r-button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--w-border);
}

/* ---------- Masthead ---------- */

.wiki .w-intro {
  /* Tight enough that the decade rail lands inside the first screen: the
     archive should say what it holds before anyone scrolls. */
  padding-top: 30px;
  padding-bottom: 20px;
  align-items: flex-end;
}

.wiki .w-intro .r-eyebrow {
  display: inline-block;
  background: var(--w-border);
  color: var(--w-oninverse, var(--r-paper));
  padding: 6px 12px;
  letter-spacing: 0.12em;
  font-size: 12px;
}

.wiki .w-intro .r-eyebrow .r-led {
  background: var(--r-lime);
  width: 7px;
  height: 7px;
}

.wiki .w-intro h1 {
  font-family: var(--w-display);
  font-weight: 900;
  font-stretch: 115%;
  font-size: clamp(2.3rem, 4.4vw, 4.3rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin: 14px 0 12px;
}

.wiki .w-intro h1 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--r-purple);
  letter-spacing: -0.02em;
}

.wiki .w-intro h1 > span {
  color: var(--r-purple);
}

.wiki .w-intro-note {
  background: var(--r-note);
  border: 2px solid var(--w-border);
  box-shadow: 6px 6px 0 var(--r-purple);
  transform: rotate(-2.5deg);
  padding: 22px 24px;
}

.wiki .w-intro-note > p {
  font-family: Georgia, 'Times New Roman', serif;
}

/* ---------- Toolbar ---------- */

.wiki .w-search {
  background: #fff;
  border: 2px solid var(--w-border);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--w-rule);
}

.wiki .w-search input {
  font-family: inherit;
  font-size: 17px;
}

.wiki .w-toolbar > .r-button {
  box-shadow: 4px 4px 0 var(--w-border);
}

.wiki .w-filters button {
  border: 2px solid var(--w-border);
  background: transparent;
  border-radius: 0;
  padding: 9px 15px;
  font-family: var(--w-label);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.wiki .w-filters button:hover {
  background: var(--r-paper);
  border-color: var(--w-border);
}

.wiki .w-filters button[aria-pressed='true'] {
  background: var(--r-purple);
  color: #fff;
  border-color: var(--w-border);
}

.wiki .w-filters > div:last-child button[aria-pressed='true'] {
  background: var(--r-lime);
  color: var(--w-border);
  border-color: var(--w-border);
}

.wiki .w-results-meta {
  font-family: var(--w-label);
}

/* ---------- Plates ---------- */

.wiki .w-card {
  background: #fff;
  border: 2px solid var(--w-border);
  border-radius: 0;
  box-shadow: 0 0 0 var(--w-border);
}

/* Misregistration on hover: the plate lifts, the spot ink slips out behind it. */
.wiki .w-card:hover {
  transform: translate(-3px, -4px);
  box-shadow: 7px 8px 0 var(--w-plate, var(--r-purple));
}

.wiki .w-plate-mark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 2px solid var(--w-border);
  background: transparent;
  font: 700 11px/1.4 var(--w-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wiki .w-plate-mark > span:last-child {
  color: var(--w-muted, #6c6c62);
  letter-spacing: 0.1em;
}

.wiki .w-card .w-art {
  border-bottom: 2px solid var(--w-border);
  background-image: radial-gradient(
    circle at 1px 1px,
    #1c1c1b1f 1px,
    transparent 1.3px
  );
  background-size: 6px 6px;
}

/* The meme reads as a sticker pressed onto the printed ground. */
.wiki .w-art img {
  filter: drop-shadow(3px 4px 0 #1c1c1b2e);
  transition: transform 0.22s ease;
}

.wiki .w-card:hover .w-art img {
  transform: scale(1.03) rotate(-1deg);
}

.wiki .w-art-year {
  border: 2px solid var(--w-border);
  background: var(--r-paper);
  color: var(--w-border);
  font: 700 11px/1.4 var(--w-label);
  letter-spacing: 0.08em;
  padding: 3px 8px;
  transform: rotate(-3deg);
}

.wiki .w-type-art {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  line-height: 1.05;
}

.wiki .w-card-copy > .r-eyebrow {
  color: var(--r-purple);
  letter-spacing: 0.1em;
}

.wiki .w-card-copy h2 {
  font-family: var(--w-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 28px;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.wiki .w-card-bottom {
  border-top: 2px solid var(--w-rule);
  font-family: var(--w-label);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.wiki .w-editor-note {
  font-family: var(--w-label);
}

.wiki .w-empty {
  border: 2px solid var(--w-border);
  background: var(--w-paper-2);
}

.wiki .w-empty > span {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--r-purple);
}

.wiki .w-empty h2 {
  font-family: var(--w-display);
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.03em;
}

/* ---------- About ---------- */

.wiki .w-about {
  background: var(--r-pink);
  border-top: 2px solid var(--w-border);
}

.wiki .w-about h2 {
  font-family: var(--w-display);
  font-weight: 900;
  font-stretch: 115%;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-wrap: balance;
}

.wiki .w-about h2 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--r-deep);
}

/* ---------- Article ---------- */

.wiki .w-article {
  padding-top: 30px;
}

.wiki .w-back {
  font-family: var(--w-label);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.wiki .w-article-heading .r-eyebrow {
  display: inline-block;
  background: var(--w-border);
  color: var(--w-oninverse, var(--r-paper));
  padding: 6px 12px;
  letter-spacing: 0.12em;
  font-size: 12px;
}

.wiki .w-article-heading h1 {
  font-family: var(--w-display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-wrap: balance;
  margin: 22px 0 20px;
  padding-bottom: 18px;
  border-bottom: 8px solid var(--w-plate, var(--r-purple));
}

.wiki .w-article-heading h1 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--r-purple);
}

.wiki .w-article-body h2 {
  font-family: var(--w-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 27px;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* A printed register mark opens each section. */
.wiki .w-article-body h2::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--w-plate, var(--r-purple));
  border: 2px solid var(--w-border);
}

.wiki .w-factbox {
  border: 2px solid var(--w-border);
  box-shadow: 8px 8px 0 var(--w-plate, var(--r-purple));
  background: #fff;
}

.wiki .w-factbox .w-art {
  border-bottom: 2px solid var(--w-border);
}

.wiki .w-facts .r-eyebrow {
  display: inline-block;
  background: var(--r-lime);
  border: 2px solid var(--w-border);
  padding: 4px 10px;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.wiki .w-facts dt {
  font-family: var(--w-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wiki .w-image-credit,
.wiki .w-sources > p {
  font-family: var(--w-label);
}

.wiki .w-sources > a {
  color: var(--r-deep);
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.wiki .w-related h2 {
  font-family: var(--w-display);
  font-weight: 900;
  font-stretch: 115%;
  letter-spacing: -0.04em;
}

.wiki .w-related a {
  border: 2px solid var(--w-border);
  background: var(--r-paper);
  box-shadow: 4px 4px 0 var(--w-rule);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.wiki .w-related a:hover {
  background: var(--r-lime);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--w-border);
}

.wiki .w-related a span {
  font-family: var(--w-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wiki .w-related a b {
  font-family: var(--w-display);
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -0.02em;
}

/* ---------- Footer ---------- */

.wiki .r-footer {
  background: var(--w-border);
  color: var(--w-oninverse, var(--r-paper));
  border-top: 8px solid var(--r-lime);
  margin: 0;
  padding: 40px 5vw 25px;
  box-shadow: none;
}

.wiki .r-footer .r-logo {
  color: var(--w-oninverse, var(--r-paper));
}

.wiki .r-footer-top {
  border-bottom: 1px solid #ffffff35;
}

.wiki .r-footer-top > p {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
}

.wiki .r-footer-bottom {
  font-family: var(--w-label);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .wiki .w-card-copy h2 {
    font-size: 24px;
  }
}

@media (max-width: 720px) {
  .wiki .r-nav {
    padding: 16px 5vw;
  }

  .wiki .w-intro {
    padding-top: 34px;
  }

  .wiki .w-article-heading h1 {
    border-bottom-width: 6px;
  }

  .wiki .w-factbox {
    box-shadow: 5px 5px 0 var(--w-plate, var(--r-purple));
  }
}

@media (max-width: 460px) {
  .wiki .r-logo {
    font-size: 27px;
  }

  .wiki .r-logo img {
    width: 34px;
    height: 34px;
  }

  .wiki .w-plate-mark {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiki .r-button,
  .wiki .w-card,
  .wiki .w-art img,
  .wiki .w-related a,
  .wiki .r-nav nav a {
    transition: none;
  }

  .wiki .w-card:hover,
  .wiki .r-button:hover,
  .wiki .w-related a:hover {
    transform: none;
  }

  .wiki .w-card:hover .w-art img {
    transform: none;
  }
}

/* ---------- Per-entry spot ink ----------
   Each entry carries one ink. The card ground uses a tint of it (wiki.css);
   the misregistration shadow, the section register marks and the article rule
   use it at full strength, so an entry reads as one printed plate. */

.wiki.w-ink-lilac,
.wiki .w-ink-lilac {
  --w-plate: #6550cf;
  --w-tint: #c6b8f7;
}

.wiki.w-ink-butter,
.wiki .w-ink-butter {
  --w-plate: #e09b00;
  --w-tint: #ffd84d;
}

.wiki.w-ink-peach,
.wiki .w-ink-peach {
  --w-plate: #ff4d87;
  --w-tint: #ffb0c9;
}

.wiki.w-ink-mint,
.wiki .w-ink-mint {
  --w-plate: #5fbf00;
  --w-tint: #d8ff3e;
}

.wiki.w-ink-night,
.wiki .w-ink-night {
  --w-plate: #2a1f6b;
  --w-tint: #2a1f6b;
}

/* ---------- Wider search ----------
   Archive entries are printed plates. Anything the model names is a proof
   sheet: dashed, unprinted, no spot ink and no offset shadow, so a suggestion
   can never be mistaken for a sourced entry at a glance. */

.wiki .w-wider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 20px 22px;
  border: 2px solid var(--w-border);
  background: var(--w-paper-2);
}

.wiki .w-wider > p {
  font-size: 15px;
  max-width: 60ch;
  color: #4a4a42;
}

.wiki .w-suggestions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wiki .w-suggestions-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}

.wiki .w-suggestions-head .r-eyebrow {
  align-self: flex-start;
  background: repeating-linear-gradient(
    -45deg,
    var(--w-border) 0 6px,
    #3a3a33 6px 12px
  );
  color: var(--w-oninverse, var(--r-paper));
  padding: 6px 12px;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.wiki .w-suggestions-head > p:last-child {
  font-size: 14px;
  line-height: 1.6;
  color: #4a4a42;
  max-width: 70ch;
}

.wiki .w-suggestion-note {
  font: 700 13px/1.6 var(--w-label);
  border: 2px dashed var(--w-rule);
  padding: 16px 18px;
  color: #4a4a42;
}

.wiki .w-suggestion {
  border: 2px dashed var(--w-border);
  background: #fff;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wiki .w-suggestion-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.wiki .w-suggestion h3 {
  font-family: var(--w-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 26px;
  letter-spacing: -0.035em;
  margin: 0;
}

/* Confidence is a status, not part of the brand palette. */
.wiki .w-conf {
  font: 700 11px/1.4 var(--w-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--w-border);
  padding: 4px 9px;
  white-space: nowrap;
}

.wiki .w-conf-high {
  background: #cdefb4;
}

.wiki .w-conf-medium {
  background: #ffe08a;
}

.wiki .w-conf-low {
  background: #e6e4da;
}

.wiki .w-suggestion > p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.wiki .w-suggestion-aka {
  font: 13px/1.5 var(--w-label);
  color: var(--w-muted, #66675b);
}

.wiki .w-suggestion-caution {
  border-inline-start: 5px solid #b42f20;
  background: #fbeceb;
  padding: 11px 14px;
  font-size: 14px !important;
  line-height: 1.6;
}

.wiki .w-suggestion-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 2px solid var(--w-rule);
  padding-top: 14px;
  margin-top: 4px;
  font: 700 13px/1.5 var(--w-label);
}

.wiki .w-suggestion-links a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  color: var(--r-deep);
}

.wiki .w-suggestion-links > span {
  color: var(--w-muted, #66675b);
  font-weight: 400;
  margin-inline-start: auto;
}

.wiki .w-suggestion-local {
  color: var(--r-purple) !important;
}

@media (max-width: 720px) {
  .wiki .w-wider {
    flex-direction: column;
    align-items: stretch;
  }

  .wiki .w-suggestion h3 {
    font-size: 22px;
  }

  .wiki .w-suggestion-links > span {
    margin-inline-start: 0;
  }
}

/* ---------- Sources ----------
   Most entries carry two: an article about the meme and, where only that
   exists, the person or programme behind it. Listed, not buried in prose. */

.wiki .w-sources ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.wiki .w-sources li {
  padding-inline-start: 16px;
  border-inline-start: 4px solid var(--w-plate, var(--r-purple));
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Typographic plates ----------
   Only seven entries have a locally hosted reference image. The rest set the
   name as the artwork, which is honest about the licensing and keeps the grid
   reading as one printed collection rather than a wall of gaps. */

.wiki .w-type-art {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
  padding: 0 6px;
  position: relative;
}

.wiki .w-type-art::after {
  content: 'no free image';
  display: block;
  margin-top: 14px;
  font: 700 10px/1.4 var(--w-label);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Licence chip in the fact box: states plainly what may be reused. */
.wiki .w-image-credit p + p {
  margin-top: 9px;
}

.wiki .w-licence {
  display: inline-block;
  border: 2px solid var(--w-border);
  background: var(--r-paper);
  padding: 2px 7px;
  font: 700 10px/1.5 var(--w-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- The wall ----------
   The page used to open on a headline and a search box, with no meme visible
   until you scrolled. For an archive whose whole payload is recognition, that
   was the flaw. Two strips of faces, moving slowly in opposite directions on
   the ink ground: a contact sheet, not a banner ad. */

.wiki .w-wall {
  background: var(--w-border);
  background-image: radial-gradient(
    circle at 1px 1px,
    #ffffff14 1px,
    transparent 1.3px
  );
  background-size: 6px 6px;
  border-bottom: 2px solid var(--w-border);
  padding: 16px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* The strips run edge to edge even though the page has side padding. */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

.wiki .w-wall-row {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: w-slide 78s linear infinite;
  will-change: transform;
}

.wiki .w-wall-row:nth-child(2) {
  animation-duration: 96s;
  animation-direction: reverse;
}

.wiki .w-wall-tile {
  flex: 0 0 auto;
  width: 122px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: var(--r-paper);
  border: 2px solid var(--w-border);
  box-shadow: 3px 3px 0 #ffffff26;
  overflow: hidden;
}

/* A definite size, not auto: an auto-sized image is 0x0 until it loads, and a
   0x0 element never enters the viewport, so loading="lazy" never fires it. */
.wiki .w-wall-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes w-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* The folder name is the joke: set it as a filename, not as prose. */
.wiki .w-folder {
  font-family: var(--w-label);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: -0.01em;
  background: var(--r-lime);
  border: 2px solid var(--w-border);
  padding: 0.05em 0.22em;
  display: inline-block;
  transform: rotate(-1.5deg);
  white-space: nowrap;
}

/* ---------- Decades ----------
   Replaces the small era buttons. The counts are real, so the rail tells you
   where the archive actually is: mostly the 2010s. */

.wiki .w-decades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.wiki .w-decades button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  border: 2px solid var(--w-border);
  background: transparent;
  padding: 12px 14px;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.wiki .w-decades button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--w-border);
}

.wiki .w-decades button b {
  font-family: var(--w-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.wiki .w-decades button span {
  font: 11px/1.4 var(--w-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.wiki .w-decades button[aria-pressed='true'] {
  background: var(--w-border);
  color: var(--w-oninverse, var(--r-paper));
}

.wiki .w-decades button[aria-pressed='true'] span {
  opacity: 0.85;
}

@media (max-width: 720px) {
  .wiki .w-wall-tile {
    width: 96px;
    height: 72px;
  }

  .wiki .w-decades {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  }

  .wiki .w-decades button b {
    /* Archivo at 112% width overruns a 108px track on a 390px screen: the
       word "Everything" measured 117px inside 110px. Narrower and a shade
       smaller keeps it on one line; overflow-wrap is the belt, so a longer
       label added later wraps instead of being quietly cut off. */
    font-size: 17px;
    font-stretch: 100%;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiki .w-wall-row {
    animation: none;
  }

  .wiki .w-decades button:hover {
    transform: none;
  }
}

/* ---------- Article: editorial weight ----------
   The summary was the same size as body text, so an entry opened with no
   pause between the name and the history. It is a standfirst now: the one
   line that tells you whether you remember this meme. */

.wiki .w-standfirst {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(20px, 2.1vw, 27px) !important;
  line-height: 1.4;
  color: var(--w-border);
  max-width: 34ch;
  text-wrap: balance;
}

/* The image is the subject of the entry, so give it the room to be one. */
.wiki .w-factbox .w-art {
  height: 340px;
}

/* ---------- Related: show the faces ----------
   Three text links asked the reader to remember a name. Three faces ask
   nothing — recognition does the work, which is the whole premise. */

.wiki .w-related > div {
  gap: 18px;
}

.wiki .w-related a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.wiki .w-related a img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  padding: 12px;
  background-color: var(--w-tint, var(--r-purple));
  background-image: radial-gradient(
    circle at 1px 1px,
    #1c1c1b1f 1px,
    transparent 1.3px
  );
  background-size: 6px 6px;
  border-bottom: 2px solid var(--w-border);
}

.wiki .w-related a span {
  margin: 0;
  padding: 14px 16px 0;
}

.wiki .w-related a b {
  padding: 0 16px 16px;
}

.wiki .w-related a:hover {
  background: var(--r-lime);
}

.wiki .w-related a:hover img {
  background-color: var(--r-lime);
}

/* ---------- About ---------- */

.wiki .w-about-list {
  font-family: var(--w-label);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--w-border);
  max-width: 30ch;
}

@media (max-width: 720px) {
  .wiki .w-factbox .w-art {
    height: 290px;
  }

  .wiki .w-related a img {
    height: 150px;
  }
}

/* A plate that appears because a file failed says so, rather than repeating
   the licensing note that belongs to entries which never had an image. */
.wiki .w-type-art.w-art-missing::after {
  content: 'image unavailable';
}

/* ---------- The receipts ----------
   Styled as a printed record rather than a modal: this is evidence, and it
   should look filed rather than popped up. */

.wiki .w-receipts {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #1c1c1bcc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  animation: w-fade 0.18s ease;
}

@keyframes w-fade {
  from {
    opacity: 0;
  }
}

.wiki .w-receipts-paper {
  background: var(--r-paper);
  background-image: radial-gradient(
    circle at 1px 1px,
    #1c1c1b14 1px,
    transparent 1.3px
  );
  background-size: 5px 5px;
  border: 2px solid var(--w-border);
  box-shadow: 10px 10px 0 var(--r-lime);
  max-width: 620px;
  width: 100%;
  padding: 28px;
  max-height: 100%;
  overflow: auto;
}

.wiki .w-receipts-paper h2 {
  font-family: var(--w-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 14px 0 20px;
  text-wrap: balance;
}

.wiki .w-receipts-paper .r-eyebrow {
  display: inline-block;
  background: var(--w-border);
  color: var(--w-oninverse, var(--r-paper));
  padding: 5px 11px;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.wiki .w-receipts-paper dl {
  margin: 0 0 20px;
  border-top: 2px solid var(--w-border);
}

.wiki .w-receipts-paper dl > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--w-rule);
}

.wiki .w-receipts-paper dt {
  font: 12px/1.5 var(--w-label);
  letter-spacing: 0.04em;
  color: #4a4a42;
  flex: 1;
}

/* A leader rule, the way a printed index runs a name to its number. */
.wiki .w-receipts-paper dt::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.wiki .w-receipts-paper dd {
  margin: 0;
  font: 700 14px/1.4 var(--w-label);
  font-variant-numeric: tabular-nums;
  text-align: end;
  flex: 0 0 auto;
  max-width: 55%;
}

/* The outstanding count is the honest one, so it is the one that is marked. */
.wiki .w-receipts-paper dl > div:last-child dd {
  background: var(--r-note);
  border: 2px solid var(--w-border);
  padding: 1px 7px;
}

.wiki .w-receipts-note {
  font-size: 14px;
  line-height: 1.6;
  color: #4a4a42;
  margin-bottom: 14px;
  max-width: 62ch;
}

.wiki .r-receipts-link {
  background: none;
  border: 0;
  color: inherit;
  font: 13px/1.4 var(--w-label);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 560px) {
  .wiki .w-receipts-paper {
    padding: 20px 16px;
    box-shadow: 6px 6px 0 var(--r-lime);
  }

  .wiki .w-receipts-paper dl > div {
    flex-direction: column;
    gap: 2px;
  }

  .wiki .w-receipts-paper dd {
    text-align: start;
    max-width: 100%;
  }
}

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

/* ---------- The Wall ----------
   Contributions, not entries. The dashed border already means "not sourced"
   everywhere else on this site — on the finder's suggestions — so it means the
   same thing here, and a visitor never has to be told twice which half of the
   site is checked. */

.wiki .w-wallsec {
  padding: 55px 5vw 65px;
  max-width: 1600px;
  margin: auto;
  border-top: 2px solid var(--w-border);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 22px,
    #1c1c1b08 22px 44px
  );
}

.wiki .w-wallsec-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 62ch;
  margin-bottom: 26px;
}

.wiki .w-wallsec-head .r-eyebrow {
  align-self: flex-start;
  background: repeating-linear-gradient(-45deg, var(--w-border) 0 6px, #3a3a33 6px 12px);
  color: var(--w-oninverse, var(--r-paper));
  padding: 6px 12px;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.wiki .w-wallsec-head h2 {
  font-family: var(--w-display);
  font-weight: 900;
  font-stretch: 115%;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.wiki .w-wallsec-head h2 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--r-purple);
}

.wiki .w-wallsec-rule {
  font: 700 13px/1.5 var(--w-label);
  border-inline-start: 5px solid var(--r-purple);
  padding: 8px 0 8px 13px;
  background: #ffffff88;
}

/* ---------- Posting ---------- */

.wiki .w-postform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  border: 2px dashed var(--w-border);
  background: var(--r-paper);
  padding: 22px;
  margin-bottom: 26px;
}

.wiki .w-postform .f {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wiki .w-postform .f.big {
  grid-column: 1 / -1;
}

.wiki .w-postform .f span {
  font: 700 11px/1.4 var(--w-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wiki .w-postform input,
.wiki .w-postform textarea {
  border: 2px solid var(--w-border);
  background: #fff;
  padding: 10px 12px;
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  width: 100%;
}

.wiki .w-postform textarea {
  min-height: 74px;
  resize: vertical;
}

.wiki .w-postform input[type='file'] {
  background: transparent;
  border-style: dashed;
  padding: 9px;
  font-size: 13px;
}

.wiki .w-postform-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wiki .w-postform-foot span {
  font: 13px/1.5 var(--w-label);
}

.wiki .w-wallsec-state {
  font: 700 12px/1.5 var(--w-label);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

/* ---------- Posted ---------- */

.wiki .w-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.wiki .w-post {
  border: 2px dashed var(--w-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wiki .w-post img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  padding: 12px;
  background: var(--w-paper-2);
  border-bottom: 2px dashed var(--w-border);
}

.wiki .w-post-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 20px;
  background: var(--w-paper-2);
  border-bottom: 2px dashed var(--w-border);
  font: italic 24px/1.15 Georgia, 'Times New Roman', serif;
  text-align: center;
  text-wrap: balance;
}

.wiki .w-post-copy {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.wiki .w-post-copy h3 {
  font-family: var(--w-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 21px;
  letter-spacing: -0.03em;
  margin: 0;
}

.wiki .w-post-copy p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.wiki .w-post-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  border-top: 2px solid var(--w-rule);
  padding-top: 11px;
  font: 12px/1.5 var(--w-label);
  color: var(--w-muted, #66675b);
}

.wiki .w-post-foot a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--r-deep);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .wiki .w-postform {
    padding: 16px;
  }

  .wiki .w-wall-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- The rule, and voting ----------
   The pact panel is the one block on the wall that is drawn solid rather than
   dashed. Dashed means "not sourced" everywhere else on this page; the rule
   itself is not a contribution, it is the house's own commitment, so it is
   printed like one. */

.wiki .w-pact {
  border: 3px solid var(--w-border);
  background: var(--r-lime);
  box-shadow: 8px 8px 0 var(--w-border);
  padding: 26px 28px;
  margin: 0 0 30px;
}

.wiki .w-pact h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 6px 0 14px;
}

.wiki .w-pact p {
  max-width: 62ch;
  margin-bottom: 10px;
}

.wiki .w-pact b {
  background: var(--w-border);
  color: var(--r-lime);
  padding: 0 6px;
}

.wiki .w-pact-small {
  font: 12px/1.65 var(--w-label);
  border-top: 2px solid var(--w-border);
  padding-top: 12px;
  margin-top: 16px;
  max-width: 78ch;
}

.wiki .w-sortbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.wiki .w-sort {
  border: 2px solid var(--w-border);
  background: #fff;
  padding: 6px 14px;
  font: 700 12px/1.5 var(--w-label);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.wiki .w-sort.is-on {
  background: var(--w-border);
  color: var(--r-lime);
}

.wiki .w-sortbar .w-wallsec-state {
  margin: 0 0 0 auto;
}

.wiki .w-vote {
  border-top: 2px dashed var(--w-rule);
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 8px;
}

.wiki .w-vote-btn {
  border: 2px solid var(--w-border);
  background: var(--r-lime);
  box-shadow: 3px 3px 0 var(--w-border);
  padding: 8px 12px;
  font: 800 13px/1.2 var(--w-label);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
}

.wiki .w-vote-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--w-plate, var(--r-purple));
}

.wiki .w-vote-btn.is-mine,
.wiki .w-vote-btn:disabled {
  background: #fff;
  box-shadow: none;
  cursor: default;
  opacity: 0.75;
}

/* The counted number is the governing one, so it is the one set large. The
   three it is derived from sit under it at full opacity — small because there
   are three, not because they are footnotes. */
.wiki .w-vote-num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  font: 12px/1.4 var(--w-label);
}

.wiki .w-vote-num b {
  font-size: 17px;
  font-weight: 900;
}

.wiki .w-vote-num span {
  margin-inline-end: 8px;
  opacity: 0.7;
}

.wiki .w-vote-num i {
  flex-basis: 100%;
  font-style: normal;
  font-size: 11px;
  opacity: 0.8;
}

.wiki .w-vote-note a {
  text-decoration: underline;
  white-space: nowrap;
}

/* ---------- Account ---------- */

.wiki .w-account {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 2px solid var(--w-border);
  background: #fff;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.wiki .w-account-say {
  font: 12px/1.5 var(--w-label);
  flex: 1;
  min-width: 200px;
}

.wiki .w-account-addr {
  font: 800 14px/1.2 var(--w-label);
  background: var(--w-border);
  color: var(--r-lime);
  padding: 3px 8px;
}

.wiki .w-account-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4b8b1f;
  box-shadow: 0 0 0 2px var(--w-border);
}

.wiki .w-account-btn {
  border: 2px solid var(--w-border);
  background: #fff;
  padding: 7px 14px;
  font: 700 12px/1.4 var(--w-label);
  letter-spacing: 0.05em;
  cursor: pointer;
}

.wiki .w-account-btn.is-go {
  background: var(--r-lime);
  box-shadow: 3px 3px 0 var(--w-border);
}

.wiki .w-account-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.wiki .w-vote-track {
  height: 9px;
  border: 2px solid var(--w-border);
  background: #fff;
  overflow: hidden;
}

.wiki .w-vote-track i {
  display: block;
  height: 100%;
  background: var(--w-plate, var(--r-purple));
  transition: width 0.3s;
}

.wiki .w-vote.is-reached .w-vote-track i {
  background: var(--w-border);
}

.wiki .w-vote-note {
  font: 11px/1.5 var(--w-label);
  opacity: 0.75;
  margin: 0;
}

.wiki .w-vote.is-reached .w-vote-note {
  opacity: 1;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .wiki .w-vote-btn,
  .wiki .w-vote-track i {
    transition: none;
  }
}

/* ---------- Sign-in dialog ----------
   Printed like the rest of the site rather than like a crypto app: solid
   rules, a hard shadow, no gradients. A visitor who is about to attach an
   identity to a public list should recognise where they are. */

.wiki .w-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #1c1c1bcc;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}

.wiki .w-modal-card {
  position: relative;
  width: min(420px, 100%);
  border: 3px solid var(--w-border);
  background: var(--w-paper, #f6f4eb);
  box-shadow: 10px 10px 0 var(--w-border);
  padding: 30px 26px 24px;
}

.wiki .w-modal-x {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.wiki .w-modal-card h3 {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

.wiki .w-modal-sub {
  font: 13px/1.5 var(--w-label);
  margin: 0 0 18px;
}

.wiki .w-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  border: 2px solid var(--w-border);
  background: #fff;
  box-shadow: 3px 3px 0 var(--w-border);
  padding: 12px 14px;
  margin-bottom: 10px;
  font: 800 14px/1.2 var(--w-label);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
}

.wiki .w-modal-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--r-purple);
}

.wiki .w-modal-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.wiki .w-modal-btn.is-wallet {
  background: var(--r-lime);
}

.wiki .w-modal-g {
  font-weight: 900;
  font-size: 16px;
  color: var(--r-purple);
}

.wiki .w-modal-tag {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}

.wiki .w-modal-or {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 11px/1.5 var(--w-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 16px 0 12px;
}

.wiki .w-modal-or::before,
.wiki .w-modal-or::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--w-rule);
}

.wiki .w-modal-fine {
  font: 11px/1.6 var(--w-label);
  border-top: 2px solid var(--w-border);
  padding-top: 12px;
  margin: 16px 0 0;
}

.wiki .w-modal-msg:not(:empty) {
  font: 700 12px/1.5 var(--w-label);
  margin: 12px 0 0;
  padding: 8px 10px;
  border: 2px dashed var(--w-border);
}

@media (prefers-reduced-motion: reduce) {
  .wiki .w-modal-btn {
    transition: none;
  }
}

/* The email row: one field and one arrow, the way a form looked before
   anyone called it onboarding. */

.wiki .w-modal-mail {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.wiki .w-modal-mail input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--w-border);
  background: #fff;
  padding: 11px 12px;
  font: 14px/1.2 var(--w-label);
}

.wiki .w-modal-mail input:disabled {
  opacity: 0.6;
}

.wiki .w-modal-go {
  border: 2px solid var(--w-border);
  background: #fff;
  box-shadow: 3px 3px 0 var(--w-border);
  padding: 0 16px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.wiki .w-modal-go:hover:not(:disabled) {
  background: var(--r-lime);
}

.wiki .w-modal-note {
  font: 11px/1.6 var(--w-label);
  opacity: 0.85;
  margin: 0 0 4px;
}

/* ---------- The roll ---------- */

.wiki .w-vote-roll {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.wiki .w-modal-card.is-roll {
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
}

.wiki .w-roll-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  border-block: 2px solid var(--w-border);
  padding: 10px 0;
  margin-bottom: 10px;
  font: 12px/1.4 var(--w-label);
}

.wiki .w-roll-nums b {
  font-size: 17px;
  font-weight: 900;
  margin-inline-end: 4px;
}

.wiki .w-modal-note {
  font: 11px/1.6 var(--w-label);
  opacity: 0.8;
  margin: 0 0 14px;
}

.wiki .w-roll-list {
  margin: 0 0 14px;
  padding: 0 0 0 2.4em;
  max-height: 44vh;
  overflow-y: auto;
  border: 2px dashed var(--w-border);
  padding-block: 12px;
}

.wiki .w-roll-list li {
  margin-bottom: 5px;
  font: 12px/1.5 var(--w-label);
}

.wiki .w-roll-kind {
  display: inline-block;
  min-width: 62px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.wiki .w-roll-list code {
  word-break: break-all;
}

.wiki .w-roll-empty {
  border: 2px dashed var(--w-border);
  padding: 18px;
  text-align: center;
  font: italic 15px Georgia, serif;
  margin: 0 0 14px;
}

/* A full stop is part of the sentence, not a thing that lives alone on the
   next line. On a narrow screen the folder name filled the line and pushed
   this one down by itself, where it read as a stray blue dot. */
.wiki .w-nobreak {
  white-space: nowrap;
}

/* ---------- Reaching things ----------
   The wall has its own page now. On the home page it is an invitation rather
   than the whole room, because as a section at the foot of the archive it sat
   sixty screens down on a phone — which, on a site whose argument lives there,
   is the same as not shipping it. */

.wiki .w-teaser {
  border: 3px solid var(--w-border);
  background: var(--r-lime);
  box-shadow: 10px 10px 0 var(--w-border);
  padding: 30px 28px;
  margin: 0 0 48px;
}

.wiki .w-teaser h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 12px;
}

.wiki .w-teaser p {
  max-width: 56ch;
  margin-bottom: 20px;
}

.wiki .w-wallpage {
  padding: 40px 5vw 20px;
}

/* ---------- Keyboard and touch ----------
   There was no focus ring anywhere: a keyboard user could tab through the
   whole site without ever seeing where they were. And a vote button 23px tall
   is a button most thumbs miss. */

.wiki a:focus-visible,
.wiki button:focus-visible,
.wiki input:focus-visible,
.wiki textarea:focus-visible,
.wiki select:focus-visible,
.wiki summary:focus-visible {
  outline: 3px solid var(--r-purple);
  outline-offset: 3px;
  border-radius: 1px;
}

/* On the lime panels purple on green is not enough separation, so the ring
   goes to ink instead. */
.wiki .w-pact :focus-visible,
.wiki .w-teaser :focus-visible {
  outline-color: var(--w-border);
}

@media (hover: none) {
  .wiki .w-vote-btn,
  .wiki .w-sort,
  .wiki .w-account-btn,
  .wiki .w-modal-btn,
  .wiki .w-modal-go,
  .wiki .r-button {
    min-height: 44px;
  }

  .wiki .w-vote-roll,
  .wiki .w-post-foot a,
  .wiki .r-footer a,
  .wiki .r-footer button,
  .wiki #receipts-open,
  .wiki .r-nav nav a,
  .wiki .r-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* A row of links each 44px tall needs no extra padding above and below, or
     the header eats a third of a phone screen before anything is read. */
  .wiki .r-nav nav {
    padding-top: 0;
  }
}

/* ---------- The launch kit ----------
   Deliberately not styled like a trading app. A button that mints money looks
   exciting everywhere else on the internet, and looking exciting is how people
   click it without reading. This one is printed like the rest of the archive
   and carries its warning at the same weight as its links. */

.wiki .w-launch-btn {
  width: 100%;
  border: 2px solid var(--w-border);
  background: var(--w-border);
  color: var(--r-lime);
  padding: 11px 12px;
  margin-top: 10px;
  font: 800 13px/1.2 var(--w-label);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
}

.wiki .w-launch-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--w-plate, var(--r-purple));
}

.wiki .w-modal-card.is-launch {
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
}

.wiki .w-kit {
  border-block: 2px solid var(--w-border);
  padding: 12px 0;
  margin: 14px 0;
}

.wiki .w-kit > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}

.wiki .w-kit dt {
  flex: 0 0 128px;
  font: 11px/1.5 var(--w-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.wiki .w-kit dd {
  margin: 0;
  min-width: 0;
}

.wiki .w-kit code {
  font: 13px/1.5 var(--w-label);
  word-break: break-all;
  background: #1c1c1b0f;
  padding: 2px 6px;
}

.wiki .w-modal-btn.is-chain {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
}

.wiki .w-modal-btn.is-chain b {
  font-size: 15px;
}

.wiki .w-modal-btn.is-chain span {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.75;
  letter-spacing: 0;
}

/* The warning is not small print. It is the same size as everything else in
   the dialog, because it is the part that costs money to skip. */
.wiki .w-modal-card.is-launch .w-modal-fine {
  font-size: 12px;
  border: 2px dashed var(--w-border);
  border-inline-start-width: 6px;
  padding: 12px 14px;
  margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .wiki .w-launch-btn {
    transition: none;
  }
  .wiki .w-launch-btn:hover {
    transform: none;
  }
}

/* Where copied text goes when the clipboard API refuses: visible, selected,
   and ready for the shortcut the reader already knows. */
.wiki .w-copyfall {
  display: block;
  width: 100%;
  min-height: 80px;
  margin-top: 10px;
  border: 2px dashed var(--w-border);
  background: #fff;
  padding: 10px;
  font: 12px/1.5 var(--w-label);
  resize: vertical;
}

/* ---------- The watch ----------
   Printed as a record, not a dashboard. Nothing here glows green, because
   nothing here is a verdict — every line is a reading, and the reader is the
   one who decides what it adds up to. */

.wiki .w-ledger-btn {
  width: 100%;
  border: 2px dashed var(--w-border);
  background: #fff;
  padding: 11px 12px;
  margin-top: 10px;
  font: 800 13px/1.2 var(--w-label);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.wiki .w-ledger-btn:hover {
  background: var(--r-lime);
}

.wiki .w-modal-card.is-ledger {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
}

.wiki .w-modal-card.is-ledger h4 {
  font: 700 12px/1.5 var(--w-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 20px 0 8px;
  border-top: 2px solid var(--w-border);
  padding-top: 14px;
}

.wiki .w-facts {
  margin: 14px 0 0;
}

.wiki .w-fact {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--w-rule);
}

.wiki .w-fact dt {
  font: 11px/1.5 var(--w-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
}

.wiki .w-fact dd {
  margin: 0;
  font-size: 13px;
}

/* A reading that would stop somebody buying is marked, not coloured in.
   Colour alone is not a signal for a reader who cannot see it. */
.wiki .w-fact.is-worrying {
  background: #fbeceb;
  border-inline-start: 6px solid var(--w-border);
}

.wiki .w-fact.is-worrying dd::before {
  content: '! ';
  font-weight: 900;
}

.wiki .w-fact.is-unknown dd {
  opacity: 0.6;
  font-style: italic;
}

.wiki .w-promises,
.wiki .w-ledger-log {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 12px/1.6 var(--w-label);
}

.wiki .w-promises li,
.wiki .w-ledger-log li {
  padding: 7px 10px;
  border-bottom: 1px solid var(--w-rule);
}

.wiki .w-promises b {
  display: inline-block;
  min-width: 96px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wiki .w-promises .is-broken {
  background: #fbeceb;
  border-inline-start: 6px solid var(--w-border);
}

.wiki .w-promises .is-kept b {
  color: #3d6b16;
}

.wiki .w-promises .is-open b {
  opacity: 0.6;
}

.wiki .w-ledger-log .is-bad {
  background: #fbeceb;
  border-inline-start: 6px solid var(--w-border);
}

.wiki .w-ledger-log time {
  font-weight: 700;
  margin-inline-end: 8px;
}

.wiki .w-modal-card.is-ledger .w-modal-fine {
  border: 2px dashed var(--w-border);
  border-inline-start-width: 6px;
  padding: 12px 14px;
  margin-top: 18px;
  font-size: 12px;
}

/* What the site was paid. Printed in the same ledger as what went wrong,
   deliberately: a site that shows its earnings on a separate, prettier page
   is a site hoping you read one and not the other. */

.wiki .w-split {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 12px/1.6 var(--w-label);
}

.wiki .w-split li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--w-rule);
}

.wiki .w-split b {
  font-size: 14px;
  font-weight: 900;
  min-width: 120px;
  text-align: end;
}

.wiki .w-split span {
  margin-inline-start: auto;
  opacity: 0.7;
}

.wiki .w-split .w-split-sum {
  border-top: 2px solid var(--w-border);
  border-bottom: 0;
  font-weight: 700;
}

.wiki .w-earns {
  border: 2px solid var(--w-border);
  background: var(--r-lime);
  padding: 16px 18px;
  margin-top: 18px;
}

.wiki .w-earns p {
  font-size: 12px;
  line-height: 1.65;
  margin-bottom: 8px;
}

.wiki .w-earns-small {
  font: 11px/1.6 var(--w-label);
  border-top: 2px solid var(--w-border);
  padding-top: 10px;
  margin-bottom: 0;
}

/* Every address the site touches, in the receipts panel — where somebody who
   already doubts us is looking. Not on a separate page they would have to
   find. */

.wiki .w-wallets {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 18px;
  font: 12px/1.6 var(--w-label);
}

.wiki .w-wallets td {
  border-bottom: 1px solid var(--w-rule);
  padding: 8px 10px 8px 0;
  vertical-align: top;
}

.wiki .w-wallets td:first-child {
  width: 110px;
  white-space: nowrap;
}

.wiki .w-wallets code {
  background: #1c1c1b0f;
  padding: 2px 6px;
}

.wiki .w-wallets a {
  text-decoration: underline;
}

.wiki .w-wallets em {
  opacity: 0.65;
}

/* What each platform stops, and what it does not. The second list is the one
   that decides things, so it is not smaller or greyer than the first. */

.wiki .w-chain {
  margin-bottom: 14px;
}

.wiki .w-chain-does {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font: 11px/1.6 var(--w-label);
}

.wiki .w-chain-does li {
  padding: 3px 0 3px 22px;
  position: relative;
}

.wiki .w-chain-does li::before {
  position: absolute;
  inset-inline-start: 4px;
  font-weight: 900;
}

.wiki .w-chain-does .yes::before {
  content: '+';
}

.wiki .w-chain-does .no::before {
  content: '–';
}

.wiki .w-chain-does .no {
  opacity: 0.9;
}

/* Two lists, drawn differently on purpose. What a site cannot do is enforced
   somewhere it does not control; what it promises is worth its word. Printing
   them the same way would be the most useful lie on the page. */

.wiki .w-cannot {
  border: 2px solid var(--w-border);
  padding: 16px 18px;
  margin-top: 18px;
}

.wiki .w-cannot-lead {
  font: 11px/1.6 var(--w-label);
  opacity: 0.8;
  margin: 4px 0 10px;
}

.wiki .w-cannot ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.wiki .w-cannot li {
  border-inline-start: 6px solid var(--w-border);
  padding: 8px 0 8px 12px;
  margin-bottom: 8px;
}

.wiki .w-cannot li b {
  display: block;
  font: 800 13px/1.4 var(--w-label);
  margin-bottom: 3px;
}

.wiki .w-cannot li span {
  font-size: 12px;
  line-height: 1.6;
}

/* A promise gets a dashed edge — the same mark this site uses everywhere for
   "not verified". It is not a lesser claim because we mean it less; it is a
   lesser claim because nothing outside us enforces it. */
.wiki .w-cannot ul.is-promise li {
  border-inline-start-style: dashed;
}

.wiki .w-notendorse {
  border: 3px solid var(--w-border);
  background: var(--w-border);
  color: var(--r-lime);
  padding: 14px 16px;
  margin-top: 16px;
  font: 700 13px/1.6 var(--w-label);
}

/* ---- app/glass.css ---- */
/* Random Access Memes — the dark glass theme.
 *
 * Loaded last, over the riso-print layout. Structure and every semantic
 * selector stay exactly where they were; what changes is the light.
 *
 * The old theme encoded meaning in how things were drawn, and that survives
 * here on purpose — it is the part of the design doing actual work:
 *
 *   solid edge     something enforced outside us, or checked
 *   dashed edge    a promise, or a contribution nobody verified
 *   ! before text  a reading that should stop you
 *   red surface    broken, drained, or gone
 *
 * Dark has a wider contrast range than paper, so it carries those four
 * better, not worse. What it must not do is make the dangerous things look
 * exciting. Every launch and mint affordance here is deliberately quieter
 * than the archive around it.
 *
 * Measured against pump.fun and otcdesks.cash: near-black grounds around
 * #141414, surfaces stepping 0x1a/0x1c/0x26, radii 6-16 plus a pill, one
 * green for good and one red for bad. Glass here means translucent surfaces
 * and hairline borders, not heavy blur — blur is expensive on a phone and
 * the leading sites barely use it.
 */

.wiki {
  color-scheme: dark;

  /* Grounds */
  --g-bg: #0f1014;
  --g-bg-2: #14151c;
  --g-surface: rgba(255, 255, 255, 0.035);
  --g-surface-2: rgba(255, 255, 255, 0.06);
  --g-line: rgba(255, 255, 255, 0.1);
  --g-line-bright: rgba(255, 255, 255, 0.22);

  /* Ink */
  --g-text: #f4f4f5;
  --g-dim: #9b9ba6;
  --g-faint: #6b6b78;

  /* Signal. One green, one red, and the lime kept from the brand so the
     site still looks like itself. */
  --g-good: #34d399;
  --g-bad: #f87171;
  --g-warn-bg: rgba(248, 113, 113, 0.09);

  --r-lime: #d8ff3e;
  --r-purple: #8b7bff;
  --w-border: rgba(255, 255, 255, 0.14);
  --w-rule: rgba(255, 255, 255, 0.08);
  --w-paper-2: rgba(255, 255, 255, 0.05);

  --g-r: 14px;
  --g-r-sm: 9px;

  background-color: var(--g-bg);
  /* A single soft wash instead of the paper halftone. Two stops, no image,
     nothing to download. */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(139, 123, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 70% 50% at 90% 5%, rgba(216, 255, 62, 0.07), transparent 65%);
  background-attachment: fixed;
  color: var(--g-text);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wiki a { color: inherit; }
.wiki ::selection { background: var(--r-lime); color: #14151c; }

/* Hard print shadows read as a mistake on glass. Every one of them goes, and
   depth comes from the border catching light instead. */
.wiki [class^='w-'],
.wiki [class*=' w-'],
.wiki [class^='r-'],
.wiki [class*=' r-'] {
  box-shadow: none;
}

/* ---------- Surfaces ---------- */

.wiki .w-card,
.wiki .w-post,
.wiki .w-factbox,
.wiki .w-receipts-paper,
.wiki .w-modal-card,
.wiki .w-account,
.wiki .w-teaser,
.wiki .w-pact,
.wiki .w-cannot,
.wiki .w-postform,
.wiki .w-empty,
.wiki .w-roll-empty {
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* The two panels that are the house speaking rather than a visitor keep the
   brand lime, because they are the only places that should feel loud. */
.wiki .w-teaser,
.wiki .w-pact {
  background:
    linear-gradient(160deg, rgba(216, 255, 62, 0.14), rgba(216, 255, 62, 0.04)),
    var(--g-surface);
  border-color: rgba(216, 255, 62, 0.3);
}

.wiki .w-pact b {
  background: var(--r-lime);
  color: #14151c;
  border-radius: 4px;
}

.wiki .w-pact h3,
.wiki .w-teaser h2 { color: var(--g-text); }

/* Dashed still means unverified. It has to survive the repaint intact. */
.wiki .w-post,
.wiki .w-vote,
.wiki .w-roll-list,
.wiki .w-postform,
.wiki .w-roll-empty,
.wiki .w-ledger-btn,
.wiki .w-cannot ul.is-promise li {
  border-style: dashed;
}

.wiki .w-card {
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.wiki .w-card:hover {
  transform: translateY(-3px);
  border-color: var(--g-line-bright);
}

.wiki .w-art,
.wiki .w-post img,
.wiki .w-post-plate {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--g-r-sm);
}

/* ---------- Type ---------- */

.wiki h1, .wiki h2, .wiki h3 {
  letter-spacing: -0.03em;
  color: var(--g-text);
}

.wiki p { color: var(--g-dim); }
.wiki h1 em, .wiki h2 em, .wiki h3 em { color: var(--r-purple); }

.wiki .r-eyebrow,
.wiki .w-plate-mark,
.wiki .w-editor-note,
.wiki .w-modal-sub,
.wiki .w-modal-note,
.wiki .w-wallsec-state {
  color: var(--g-faint);
}

.wiki .w-folder {
  background: var(--r-lime);
  color: #14151c;
  border-radius: 5px;
  padding: 0 8px;
}

/* ---------- Shell ---------- */

.wiki .r-announcement {
  background: rgba(255, 255, 255, 0.04);
  color: var(--g-faint);
  border-bottom: 1px solid var(--g-line);
}

.wiki .r-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15, 16, 20, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--g-line);
}

.wiki .r-nav nav a {
  color: var(--g-dim);
  border-radius: 999px;
  padding: 7px 13px;
  transition: color 0.15s, background 0.15s;
}

.wiki .r-nav nav a:hover {
  color: var(--g-text);
  background: var(--g-surface-2);
}

.wiki .r-logo { color: var(--g-text); }
.wiki .r-footer { border-top: 1px solid var(--g-line); }

/* ---------- Controls ---------- */

.wiki .r-button,
.wiki .w-vote-btn,
.wiki .w-modal-btn,
.wiki .w-account-btn,
.wiki .w-sort,
.wiki .w-modal-go,
.wiki .w-launch-btn,
.wiki .w-ledger-btn {
  border-radius: 999px;
  border: 1px solid var(--g-line-bright);
  background: var(--g-surface-2);
  color: var(--g-text);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.wiki .r-button:hover:not(:disabled),
.wiki .w-modal-btn:hover:not(:disabled),
.wiki .w-account-btn:hover:not(:disabled),
.wiki .w-modal-go:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.34);
  transform: none;
}

/* The one green button on the page is the one that costs nothing: voting. */
.wiki .w-vote-btn:not(:disabled) {
  background: var(--r-lime);
  border-color: var(--r-lime);
  color: #14151c;
  font-weight: 800;
}

.wiki .w-vote-btn:hover:not(:disabled) {
  background: #e6ff6b;
  transform: none;
}

.wiki .w-vote-btn.is-mine,
.wiki .w-vote-btn:disabled {
  background: var(--g-surface-2);
  color: var(--g-dim);
  border-color: var(--g-line);
}

.wiki .w-sort.is-on {
  background: var(--g-text);
  color: #14151c;
  border-color: var(--g-text);
}

/* Minting stays quiet. Everywhere else on the internet this is the brightest
   thing on the screen, and bright is how people press it without reading. */
.wiki .w-launch-btn {
  background: transparent;
  border: 1px solid var(--g-line-bright);
  color: var(--g-text);
}

.wiki .w-launch-btn:hover {
  background: var(--g-surface-2);
  transform: none;
}

.wiki .w-postform input,
.wiki .w-postform textarea,
.wiki .w-modal-mail input,
.wiki .w-modal-card .f input,
.wiki .r-search input,
.wiki input[type='search'],
.wiki input[type='text'],
.wiki input[type='email'] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-sm);
  color: var(--g-text);
}

.wiki input::placeholder,
.wiki textarea::placeholder { color: var(--g-faint); }

.wiki input:focus,
.wiki textarea:focus { border-color: var(--g-line-bright); }

.wiki [aria-invalid='true'] { border-color: var(--g-bad) !important; }

/* ---------- Signal ---------- */

.wiki .w-fact.is-worrying,
.wiki .w-promises .is-broken,
.wiki .w-ledger-log .is-bad {
  background: var(--g-warn-bg);
  border-inline-start-color: var(--g-bad);
}

.wiki .w-fact.is-worrying dd { color: #fca5a5; }
.wiki .w-promises .is-kept b { color: var(--g-good); }
.wiki .w-promises .is-broken b { color: var(--g-bad); }
.wiki .w-ledger-log .is-good { border-inline-start-color: var(--g-good); }
.wiki .w-chain-does .yes::before { color: var(--g-good); }
.wiki .w-chain-does .no::before { color: var(--g-bad); }
.wiki .w-vote-track { background: rgba(255, 255, 255, 0.07); border-color: var(--g-line); }
.wiki .w-vote-track i { background: var(--r-lime); }
.wiki .w-vote.is-reached .w-vote-track i { background: var(--g-good); }

.wiki .w-notendorse {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--g-bad);
  color: #fecaca;
  border-radius: var(--g-r-sm);
}

.wiki .w-cannot li { border-inline-start-color: var(--g-line-bright); }

.wiki code,
.wiki .w-kit code,
.wiki .w-wallets code {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  color: var(--g-text);
}

/* ---------- Overlays ---------- */

.wiki .w-modal {
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.wiki .w-modal-card,
.wiki .w-receipts-paper {
  background: rgba(22, 23, 30, 0.94);
  border: 1px solid var(--g-line-bright);
  border-radius: 18px;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.wiki .w-modal-x { color: var(--g-dim); }
.wiki .w-modal-x:hover { color: var(--g-text); }

.wiki .w-account-addr {
  background: var(--g-surface-2);
  color: var(--g-text);
  border-radius: 999px;
}

.wiki .w-account-dot {
  background: var(--g-good);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}

/* ---------- The marquee, which is what people see first ---------- */

.wiki .w-wall {
  border-block: 1px solid var(--g-line);
  background: rgba(255, 255, 255, 0.02);
  /* Fades at both edges instead of stopping dead at the bezel. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wiki .w-wall-tile img {
  border-radius: var(--g-r-sm);
  border: 1px solid var(--g-line);
}

/* ---------- Focus ---------- */

.wiki a:focus-visible,
.wiki button:focus-visible,
.wiki input:focus-visible,
.wiki textarea:focus-visible,
.wiki summary:focus-visible {
  outline: 2px solid var(--r-lime);
  outline-offset: 3px;
}

.wiki .w-pact :focus-visible,
.wiki .w-teaser :focus-visible { outline-color: #14151c; }

@media (prefers-reduced-motion: reduce) {
  .wiki .w-card,
  .wiki .r-button,
  .wiki .w-vote-btn,
  .wiki .w-modal-btn { transition: none; }
  .wiki .w-card:hover { transform: none; }
}

/* ---------- Light-on-light, and how it happens ----------
   The old theme had dark ink on everything, so anything painted a bright
   brand colour inherited a readable colour for free. Inverting the page
   inverted the text too, and every one of those bright patches quietly
   became near-invisible. Contrast is not a preference; a filter chip whose
   label is 14% white on lime has no label.

   So: anything still wearing a bright ground gets ink back, explicitly. */

.wiki .w-note,
.wiki [class*='w-note'],
.wiki .w-note *,
.wiki [aria-pressed='true'],
.wiki .w-sort.is-on,
.wiki .w-pact b,
.wiki .w-folder,
.wiki .w-account-addr,
.wiki .w-vote-btn:not(:disabled),
.wiki .r-button.is-go,
.wiki .w-modal-btn.is-wallet {
  color: #14151c;
}

/* The sticky note keeps its yellow — it is the one piece of the paper
   original worth carrying over, and it reads as a physical object against
   glass rather than fighting it. */
.wiki .w-note,
.wiki [class*='w-note'] {
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.wiki .w-note a,
.wiki [class*='w-note'] a { color: #14151c; }

/* Filter chips: the resting state is glass, the chosen one is solid. */
.wiki [data-type],
.wiki [data-era] {
  border-radius: 999px;
  border: 1px solid var(--g-line);
  background: var(--g-surface);
  color: var(--g-dim);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.wiki [data-type]:hover,
.wiki [data-era]:hover {
  color: var(--g-text);
  border-color: var(--g-line-bright);
}

.wiki [data-type][aria-pressed='true'],
.wiki [data-era][aria-pressed='true'] {
  background: var(--r-lime);
  border-color: var(--r-lime);
  color: #14151c;
  font-weight: 700;
}

/* The era tiles across the top are navigation, not decoration. */
.wiki .w-decades a,
.wiki .w-decades button {
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
}

.wiki .w-decades a:hover,
.wiki .w-decades button:hover { border-color: var(--g-line-bright); }

/* ---------- The token I overloaded ----------
   --w-border was doing two jobs in the old theme: the border AND the ink on
   anything sitting on a light ground. Redefining it for glass silently turned
   that ink into 14% white, which is invisible. Three hundred and seventeen
   pieces of text on this page failed contrast because of one variable.
   Borders keep the new value; everything that used it as ink is named here. */

.wiki .w-art-year {
  background: rgba(15, 16, 20, 0.82);
  border: 1px solid var(--g-line-bright);
  color: var(--g-text);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.wiki .r-button { color: var(--g-text); }

.wiki .w-filters button {
  border-radius: 999px;
  border: 1px solid var(--g-line);
  background: var(--g-surface);
  color: var(--g-dim);
}

.wiki .w-filters button:hover {
  color: var(--g-text);
  border-color: var(--g-line-bright);
}

.wiki .w-filters button[aria-pressed='true'] {
  background: var(--g-text);
  border-color: var(--g-text);
  color: #14151c;
}

.wiki .w-filters > div:last-child button[aria-pressed='true'] {
  background: var(--r-lime);
  border-color: var(--r-lime);
  color: #14151c;
}

/* The card plate colours were grounds for dark ink. On glass they become a
   thin wash behind the image instead of a fill under text. */
.wiki .w-art {
  background: rgba(255, 255, 255, 0.045);
}

.wiki .w-card-copy,
.wiki .w-card-copy h2 { color: var(--g-text); }
.wiki .w-card-copy p { color: var(--g-dim); }
.wiki .w-card-bottom { color: var(--r-lime); }

/* Eyebrows were a mid-grey chosen against paper. */
.wiki .r-eyebrow { color: var(--g-dim); }
.wiki .w-plate-mark { color: var(--g-faint); }

/* ---------- The last light grounds ----------
   Found by walking the page for any painted background brighter than 40%
   luminance, rather than by looking for things that seemed wrong. Six
   sources accounted for every remaining contrast failure. */

/* The marquee tiles were white photo borders. On glass they become frames. */
.wiki .w-wall-tile {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--g-r-sm);
}

/* The sticky note keeps its yellow and gets its ink back, including the
   spans inside it that were inheriting page text colour. */
.wiki .w-intro-note,
.wiki .w-intro-note * {
  color: #14151c;
}

.wiki .w-intro-note {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

.wiki .w-search {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--g-line);
  border-radius: 999px;
  color: var(--g-text);
}

.wiki .w-search:focus-within { border-color: var(--g-line-bright); }
.wiki .w-search input { background: transparent; border: 0; color: var(--g-text); }

/* The about section was a full-bleed pink plate. The pink survives as a wash
   over glass so the text can stay light, and the section still reads as its
   own chapter rather than more of the same. */
.wiki .w-about {
  background:
    linear-gradient(150deg, rgba(255, 143, 180, 0.16), rgba(139, 123, 255, 0.1)),
    var(--g-bg-2);
  border-block: 1px solid var(--g-line);
}

.wiki .w-about h2,
.wiki .w-about .w-about-list { color: var(--g-text); }
.wiki .w-about p { color: var(--g-dim); }
.wiki .w-about .r-eyebrow { color: #ffb3c8; }

.wiki .r-led {
  background: var(--r-lime);
  box-shadow: 0 0 10px rgba(216, 255, 62, 0.55);
}

/* ---------- Secondary text, measured rather than eyeballed ----------
   The first pass picked these greys because they looked right in a
   screenshot. Walking the page with a contrast calculation put most of them
   between 2.5 and 3.4 against their real grounds, which is under the 4.5 a
   body-sized line needs. Dark themes flatter low contrast to a designer with
   a good screen in a dim room, and nobody else. */

.wiki {
  --g-dim: #b6b6c2;
  --g-faint: #93939f;
  /* What those literals now resolve to. */
  --w-muted: #b6b6c2;
}

/* Purple on the pink wash was the single worst pairing on the page at 1.31.
   The emphasis colour changes with the ground it is on. */
.wiki .w-about h2 em,
.wiki .w-about em { color: #ffd0dd; }

.wiki .r-announcement { color: #a9a9b5; }
.wiki .w-card-copy .r-eyebrow,
.wiki .w-plate-mark span { color: #a2a2ae; }

/* ---------- Hard-coded muds ----------
   Three olive greys written as literals in the paper theme rather than as
   tokens, so nothing I redefined could reach them. They were chosen to sit
   quietly on cream and they sit invisibly on near-black. Found by measuring;
   they looked plausible in every screenshot. */

.wiki .w-intro p,
.wiki .w-intro > p,
.wiki .w-filters-count,
.wiki .w-plate-mark span,
.wiki .w-card-copy .r-eyebrow,
.wiki .w-art-caption,
.wiki .w-post-foot span,
.wiki .w-related span,
.wiki .w-sources span {
  color: var(--g-dim);
}

/* Anything still carrying one of the three literals, wherever it is. */
.wiki [style*='#55564c'],
.wiki [style*='#6c6c62'],
.wiki [style*='#66675b'] {
  color: var(--g-dim) !important;
}

/* The note's own paragraph was being recoloured by the generic `.wiki p`
   rule further down the sheet. Order beats intent in CSS, so this is stated
   last and stated specifically. */
.wiki .w-intro-note,
.wiki .w-intro-note p,
.wiki .w-intro-note span,
.wiki .w-intro-note b,
.wiki .w-intro-note em,
.wiki .w-intro-note a {
  color: #14151c;
}

/* The sign-in button is the one call to action that should be found without
   looking, so it gets the lime rather than the ink-on-glass it inherited. */
.wiki .w-account-btn.is-go,
.wiki .r-button.is-go {
  background: var(--r-lime);
  border-color: var(--r-lime);
  color: #14151c;
  font-weight: 800;
}

.wiki .w-account-btn.is-go:hover { background: #e6ff6b; }

/* The ink plates were solid brand colours behind dark type — the card
   grounds, the related strip, the article heads. As washes over glass they
   still tint a section without deciding its text colour. */
.wiki .w-ink-lilac,
.wiki .w-ink-butter,
.wiki .w-ink-peach,
.wiki .w-ink-mint,
.wiki .w-ink-sky,
.wiki .w-ink-rose,
.wiki [class*='w-ink-'] {
  --w-tint: transparent;
}

.wiki .w-related a,
.wiki .w-related a * {
  color: var(--g-text);
}

.wiki .w-related a {
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
}

.wiki .w-related a:hover { border-color: var(--g-line-bright); }

/* The last three, each a small element the paper theme had given its own
   pale ground: the rule beside the wall's heading, the receipts strip inside
   an article's factbox, and the licence line under a picture. */

.wiki .w-wallsec-rule {
  background: var(--g-surface-2);
  border-inline-start: 4px solid var(--r-lime);
  border-radius: 0 var(--g-r-sm) var(--g-r-sm) 0;
  color: var(--g-text);
}

.wiki .w-facts,
.wiki .w-facts .r-eyebrow,
.wiki .w-facts dt,
.wiki .w-facts dd {
  color: var(--g-text);
  background: transparent;
}

.wiki .w-facts .r-eyebrow { color: var(--g-dim); }
.wiki .w-facts dt { color: var(--g-faint); }

.wiki .w-art-credit,
.wiki .w-licence,
.wiki figcaption,
.wiki .w-art figcaption {
  background: transparent;
  color: var(--g-faint);
}

/* The pill restyle overrode the touch-target rule that came before it in the
   cascade. Restated here, last, where it wins. */
@media (hover: none) {
  .wiki .w-filters button,
  .wiki [data-type],
  .wiki [data-era],
  .wiki .w-sort,
  .wiki .w-vote-btn,
  .wiki .w-account-btn,
  .wiki .w-modal-btn,
  .wiki .w-modal-go,
  .wiki .r-button,
  .wiki .w-launch-btn,
  .wiki .w-ledger-btn {
    min-height: 44px;
  }
}

/* ---------- What Robinhood does, measured ----------
 *
 * Headline: Martina Plantijn, a serif, at weight 400 and 40px with -0.33px
 * tracking over a 48px line. Not a heavy sans. That one choice is most of
 * why the page reads as an institution rather than a trading floor, and it
 * is the opposite of what every memecoin site does.
 *
 * Call to action: #CCFF00 on #110e08, 36px radius, weight 400. A warm black,
 * not a blue one. PONS lands on almost the same lime from a light ground, and
 * this project already had #d8ff3e — so all three references agree on the
 * colour and nothing about the brand has to move to match them.
 *
 * The serif is a system stack. A display webfont is 40-80KB before the first
 * headline can paint, and the brief was to hold somebody at the moment the
 * page loads.
 */

.wiki {
  --g-bg: #0c0b09;
  --g-bg-2: #131110;
  --g-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Charter,
             Georgia, 'Times New Roman', serif;
  --r-lime: #ccff00;
  --g-ink: #110e08;
  --g-r: 20px;
  --g-r-sm: 12px;

  /* A warm wash, to match the warm ground. */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(204, 255, 0, 0.07), transparent 68%),
    radial-gradient(ellipse 65% 45% at 88% 4%, rgba(139, 123, 255, 0.09), transparent 62%);
}

/* Display type: serif, regular weight, tight tracking, generous leading.
   The eyebrows and labels stay monospace — they are the archive's voice and
   the contrast between the two is the whole typographic idea. */
.wiki h1,
.wiki h2,
.wiki .w-pact h3,
.wiki .w-teaser h2,
.wiki .w-modal-card h3 {
  font-family: var(--g-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.16;
}

.wiki h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
.wiki h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.wiki .w-card-copy h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

/* Italic emphasis inside a serif headline is the same gesture the paper
   theme used, and it survives the change intact. */
.wiki h1 em,
.wiki h2 em {
  font-style: italic;
  color: var(--r-lime);
}

.wiki p {
  line-height: 1.65;
  letter-spacing: -0.005em;
}

/* Pills, at Robinhood's radius rather than a rounded rectangle. */
.wiki .r-button,
.wiki .w-vote-btn,
.wiki .w-modal-btn,
.wiki .w-account-btn,
.wiki .w-sort,
.wiki .w-modal-go,
.wiki .w-launch-btn,
.wiki .w-ledger-btn,
.wiki .w-filters button,
.wiki [data-type],
.wiki [data-era] {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0;
}

.wiki .r-button,
.wiki .w-vote-btn,
.wiki .w-account-btn.is-go {
  padding-inline: 26px;
}

/* The lime is now bright enough that dark ink on it is the only readable
   pairing, and warm ink at that. */
.wiki .w-vote-btn:not(:disabled),
.wiki .w-account-btn.is-go,
.wiki .r-button.is-go,
.wiki [data-type][aria-pressed='true'],
.wiki [data-era][aria-pressed='true'],
.wiki .w-filters > div:last-child button[aria-pressed='true'],
.wiki .w-folder,
.wiki .w-pact b {
  background: var(--r-lime);
  border-color: var(--r-lime);
  color: var(--g-ink);
}

.wiki .w-vote-btn:hover:not(:disabled),
.wiki .w-account-btn.is-go:hover { background: #dbff4d; }

.wiki .w-card-bottom,
.wiki h1 em,
.wiki h2 em { color: var(--r-lime); }

.wiki ::selection { background: var(--r-lime); color: var(--g-ink); }
.wiki .r-led { box-shadow: 0 0 10px rgba(204, 255, 0, 0.5); }

.wiki a:focus-visible,
.wiki button:focus-visible,
.wiki input:focus-visible,
.wiki textarea:focus-visible { outline-color: var(--r-lime); }

/* More air. Robinhood's page is mostly space, and space is what a reader
   reads a long article in. */
.wiki .w-intro,
.wiki .w-about,
.wiki .w-wallsec,
.wiki .w-wallpage { padding-block: clamp(38px, 6vw, 78px); }

.wiki .w-card,
.wiki .w-post,
.wiki .w-teaser,
.wiki .w-pact,
.wiki .w-cannot,
.wiki .w-postform { border-radius: var(--g-r); }

.wiki .w-modal-card { border-radius: 26px; }

/* `.w-intro h1` and `.w-article-heading h1` are two-class selectors and beat
   a bare `.wiki h1`. Specificity is not a suggestion, so they are named. */
.wiki .w-intro h1,
.wiki .r-hero h1,
.wiki .w-article-heading h1,
.wiki .w-intro h2,
.wiki .w-about h2,
.wiki .w-wallsec h2,
.wiki .w-teaser h2 {
  font-family: var(--g-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

/* The folder name stays monospace — it is a filename, and that joke only
   works if it looks like one. */
.wiki .w-intro h1 > span,
.wiki .w-folder {
  font-family: var(--w-label);
  font-weight: 700;
}

.wiki .w-intro h1 em,
.wiki .r-hero h1 em,
.wiki .w-about h2 em,
.wiki .w-teaser h2 em,
.wiki .w-wallsec h2 em {
  font-family: var(--g-serif);
  font-style: italic;
}

/* Section labels and card titles keep Archivo: the contrast between a serif
   at 400 and a grotesque at 700 is what makes both legible as different
   kinds of thing. */
.wiki .w-card-copy h2,
.wiki .w-modal-card h4,
.wiki .r-eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
}

.wiki .w-card-copy h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- Light ----------
 *
 * Not the dark theme inverted. An inverted dark theme gives you grey text on
 * grey panels and a lime that glows — the values that read as depth on black
 * read as dirt on white. This is measured off PONS, which is the one
 * reference here that ships light: a soft #f4f4f4 ground rather than pure
 * white, panels a step down at #ececec, and hairlines in ink rather than in
 * white.
 *
 * Everything the design says is said the same way in both. Dashed still means
 * unverified. The bang still precedes a reading worth stopping for. Only the
 * light changes.
 */

:root[data-theme='light'] .wiki {
  color-scheme: light;

  --g-bg: #f4f4f4;
  --g-bg-2: #ececec;
  --g-surface: rgba(17, 17, 17, 0.028);
  --g-surface-2: rgba(17, 17, 17, 0.06);
  --g-line: rgba(17, 17, 17, 0.13);
  --g-line-bright: rgba(17, 17, 17, 0.3);

  --g-text: #111111;
  --g-dim: #4b4b4b;
  --g-faint: #6a6a6a;
  --w-muted: #4b4b4b;

  /* On white the mid greens and reds fail: they were picked to glow on
     black. These are the same hues taken down until they carry. */
  --g-good: #0f7a4f;
  --g-bad: #c0362c;
  --g-warn-bg: rgba(192, 54, 44, 0.07);

  --w-border: rgba(17, 17, 17, 0.16);
  --w-rule: rgba(17, 17, 17, 0.1);

  background-color: var(--g-bg);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(204, 255, 0, 0.3), transparent 66%),
    radial-gradient(ellipse 60% 45% at 88% 4%, rgba(139, 123, 255, 0.09), transparent 60%);
  color: var(--g-text);
}

:root[data-theme='light'] .wiki .r-nav {
  background: rgba(244, 244, 244, 0.78);
  border-bottom-color: var(--g-line);
}

:root[data-theme='light'] .wiki .r-announcement {
  background: rgba(17, 17, 17, 0.05);
  color: #5a5a5a;
}

:root[data-theme='light'] .wiki .w-modal { background: rgba(244, 244, 244, 0.7); }

:root[data-theme='light'] .wiki .w-modal-card,
:root[data-theme='light'] .wiki .w-receipts-paper {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--g-line-bright);
}

:root[data-theme='light'] .wiki .w-art,
:root[data-theme='light'] .wiki .w-post img,
:root[data-theme='light'] .wiki .w-post-plate,
:root[data-theme='light'] .wiki .w-wall-tile {
  background: #ffffff;
}

:root[data-theme='light'] .wiki .w-art-year {
  background: rgba(255, 255, 255, 0.92);
  color: var(--g-text);
  border-color: var(--g-line-bright);
}

:root[data-theme='light'] .wiki .w-search,
:root[data-theme='light'] .wiki .w-postform input,
:root[data-theme='light'] .wiki .w-postform textarea,
:root[data-theme='light'] .wiki .w-modal-mail input,
:root[data-theme='light'] .wiki .w-modal-card .f input {
  background: #ffffff;
  border-color: var(--g-line);
}

/* The lime is the one thing that must not change: it is the brand, it is
   what all three references landed on, and it carries dark ink in both. */
:root[data-theme='light'] .wiki .w-teaser,
:root[data-theme='light'] .wiki .w-pact {
  background: linear-gradient(160deg, rgba(204, 255, 0, 0.42), rgba(204, 255, 0, 0.16)), #ffffff;
  border-color: rgba(17, 17, 17, 0.18);
}

:root[data-theme='light'] .wiki .w-about {
  background: linear-gradient(150deg, rgba(255, 143, 180, 0.2), rgba(139, 123, 255, 0.12)), #ffffff;
}

:root[data-theme='light'] .wiki .w-about .r-eyebrow { color: #a13a5c; }
:root[data-theme='light'] .wiki .w-about h2 em,
:root[data-theme='light'] .wiki .w-about em { color: #8a2d4c; }

/* Lime on white is unreadable as text. In light, emphasis goes to ink and
   the accent stays on solid shapes. */
:root[data-theme='light'] .wiki h1 em,
:root[data-theme='light'] .wiki h2 em,
:root[data-theme='light'] .wiki .w-card-bottom { color: #5b6b00; }

:root[data-theme='light'] .wiki .w-fact.is-worrying dd { color: #8f231b; }
:root[data-theme='light'] .wiki .w-notendorse {
  background: #111110;
  color: #ffe3e0;
  border-color: #111110;
}

:root[data-theme='light'] .wiki .w-filters button[aria-pressed='true'],
:root[data-theme='light'] .wiki .w-sort.is-on {
  background: var(--g-text);
  color: #f4f4f4;
  border-color: var(--g-text);
}

:root[data-theme='light'] .wiki .w-intro-note { box-shadow: 0 14px 30px rgba(17, 17, 17, 0.16); }
:root[data-theme='light'] .wiki .w-card:hover { border-color: var(--g-line-bright); }
:root[data-theme='light'] .wiki a:focus-visible,
:root[data-theme='light'] .wiki button:focus-visible,
:root[data-theme='light'] .wiki input:focus-visible { outline-color: #111110; }

/* ---------- The switch ---------- */

.wiki .w-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--g-line);
  background: var(--g-surface-2);
  color: var(--g-text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}

.wiki .w-theme:hover { border-color: var(--g-line-bright); }

@media (hover: none) {
  .wiki .w-theme { width: 44px; height: 44px; }
}

/* Two habits from the dark theme that do not survive the switch.
   Lime as a text colour: 1.04 against a light ground, which is no text at
   all. And #f6f4eb — the old paper cream — hard-coded as the ink on the
   decade tiles, chosen when those tiles were dark. */

:root[data-theme='light'] .wiki .r-announcement span,
:root[data-theme='light'] .wiki .w-card-bottom,
:root[data-theme='light'] .wiki .w-vote-note,
:root[data-theme='light'] .wiki .r-led + span {
  color: #4a5a00;
}

:root[data-theme='light'] .wiki .w-decades a,
:root[data-theme='light'] .wiki .w-decades button,
:root[data-theme='light'] .wiki .w-decades a *,
:root[data-theme='light'] .wiki .w-decades button *,
:root[data-theme='light'] .wiki [class*='w-decade'] * {
  color: var(--g-text);
}

:root[data-theme='light'] .wiki .w-decades a,
:root[data-theme='light'] .wiki .w-decades button {
  background: #ffffff;
  border-color: var(--g-line);
}

:root[data-theme='light'] .wiki .w-decades [aria-pressed='true'],
:root[data-theme='light'] .wiki .w-decades .is-on {
  background: var(--g-text);
  border-color: var(--g-text);
}

:root[data-theme='light'] .wiki .w-decades [aria-pressed='true'],
:root[data-theme='light'] .wiki .w-decades [aria-pressed='true'] * {
  color: #f4f4f4;
}

/* The paper cream was the ink for anything sitting on the dark footer or a
   dark plate. In light those grounds are no longer dark, so the ink has to
   move with them. One token, set per theme. */
.wiki { --w-oninverse: #f6f4eb; }
:root[data-theme='light'] .wiki { --w-oninverse: #111110; }

/* The footer keeps its dark ground in both themes — it is the colophon, and
   it reads as the back cover of the book either way. */
:root[data-theme='light'] .wiki .r-footer {
  background: #111110;
  --w-oninverse: #f6f4eb;
}

:root[data-theme='light'] .wiki .r-footer,
:root[data-theme='light'] .wiki .r-footer a,
:root[data-theme='light'] .wiki .r-footer p { color: #e8e8e4; }
:root[data-theme='light'] .wiki .r-footer .r-logo { color: #f6f4eb; }

/* ---------- The header, on a phone ----------
   Adding the theme switch pushed the shuffle button onto a line of its own,
   which made the header three rows and 278px — a third of the screen gone
   before a word of the archive. Measured, not noticed: it looked fine.

   So on a phone the logo, the switch and the shuffle share one row and the
   links take the second. Two rows, and the shuffle loses its words for its
   arrow — it is a surprise button, and the arrow says that. */

@media (max-width: 650px) {
  .wiki .r-nav {
    padding-block: 12px;
    gap: 10px 12px;
  }

  .wiki .r-logo { flex: 1; }

  .wiki .r-nav .r-button.r-small {
    order: 2;
    padding-inline: 16px;
    font-size: 0;
    min-width: 44px;
  }

  /* The label goes, the meaning stays. */
  .wiki .r-nav .r-button.r-small::after {
    content: '↗';
    font-size: 17px;
  }

  .wiki .w-theme { order: 1; }

  .wiki .r-nav nav {
    order: 3;
    margin-top: 2px;
    padding-top: 8px;
  }

  .wiki .r-announcement {
    padding-block: 6px;
    font-size: 10px;
  }
}

/* ---------- What launched ----------
   Modelled on a trading terminal's chain filter and deliberately not on its
   table. A terminal's columns are price, market cap, volume and a buy button;
   none of them tells you the thing that decides whether you lose money. The
   column here is whether the creator is still holding. */

.wiki .w-launched { margin: 0 0 48px; }

.wiki .w-launched-head { margin-bottom: 16px; }
.wiki .w-launched-head p { max-width: 58ch; }

.wiki .w-chains {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.wiki .w-chainbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--g-line);
  background: var(--g-surface);
  color: var(--g-dim);
  border-radius: 999px;
  padding: 9px 15px;
  font: 600 12px/1 var(--w-label);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.wiki .w-chainbtn i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip, var(--g-dim));
}

.wiki .w-chainbtn b { opacity: 0.6; font-weight: 700; }
.wiki .w-chainbtn:hover { color: var(--g-text); border-color: var(--g-line-bright); }

.wiki .w-chainbtn.is-on {
  background: var(--g-text);
  border-color: var(--g-text);
  color: var(--g-bg);
}

.wiki .w-chainbtn.is-on b { opacity: 0.75; }

.wiki .w-launchlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  overflow: hidden;
  background: var(--g-surface);
}

.wiki .w-launchlist li {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--g-line);
}

.wiki .w-launchlist li:last-child { border-bottom: 0; }

.wiki .w-launch-name {
  font: 600 15px/1.3 'Archivo', sans-serif;
  color: var(--g-text);
}

/* The chain, as a mark rather than a logo — no third-party brand assets to
   licence, and it stays legible at any size. */
.wiki .w-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--chip, var(--g-line));
  /* The chain's colour identifies the chip; it never carries the letters.
     See the note further down — as text these measure 1.01 to 3.21 here. */
  color: var(--g-text);
  border-radius: 999px;
  padding: 3px 9px;
  font: 700 10px/1.4 var(--w-label);
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.wiki .w-launch-asked {
  font: 11px/1.4 var(--w-label);
  color: var(--g-faint);
  white-space: nowrap;
}

.wiki .w-launch-asked b {
  font-size: 14px;
  font-weight: 800;
  color: var(--g-text);
  margin-inline-end: 4px;
}

/* The only column a terminal does not have, and the only one that matters. */
.wiki .w-launch-standing {
  font: 600 11px/1.4 var(--w-label);
  color: var(--g-good);
  white-space: nowrap;
}

.wiki .w-launch-standing.is-bad { color: var(--g-bad); }
.wiki .w-launch-standing.is-dim { color: var(--g-faint); font-weight: 400; }

.wiki .w-launch-more {
  border: 1px solid var(--g-line);
  background: transparent;
  color: var(--g-text);
  border-radius: 999px;
  padding: 7px 13px;
  font: 600 11px/1 var(--w-label);
  cursor: pointer;
  white-space: nowrap;
}

.wiki .w-launch-more:hover { border-color: var(--g-line-bright); }

.wiki .w-empty-launch,
.wiki .w-launched-state {
  border: 1px dashed var(--g-line);
  border-radius: var(--g-r);
  padding: 26px;
  text-align: center;
  color: var(--g-dim);
  font-size: 14px;
}

@media (max-width: 720px) {
  .wiki .w-launchlist li {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }
  .wiki .w-launch-name { grid-column: 1; }
  .wiki .w-chip { grid-column: 2; justify-self: end; }
  .wiki .w-launch-asked,
  .wiki .w-launch-standing { grid-column: 1 / -1; }
  .wiki .w-launch-more { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
}

@media (hover: none) {
  .wiki .w-chainbtn, .wiki .w-launch-more { min-height: 44px; }
}

/* A chain's own brand colour is chosen to sit on that chain's site, not on
   this one. As text they measure 1.01 to 3.21 here — HOOD's lime on a dark
   panel is literally invisible. So the colour identifies the chip and the
   text stays readable: border and dot carry the brand, the letters do not. */

.wiki .w-chip {
  background: color-mix(in srgb, var(--chip) 14%, transparent);
}

.wiki .w-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip, var(--g-dim));
  margin-inline-end: 6px;
  flex: none;
}

/* Browsers without color-mix still get a readable chip. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .wiki .w-chip { background: var(--g-surface-2); }
}

/* A guarantee is not a kept promise and must not look like one. It is drawn
   with the solid edge this site uses for anything enforced outside us — the
   same mark as the "what this site cannot do" list. */
.wiki .w-promises .is-guaranteed {
  border-inline-start: 6px solid var(--r-lime);
  background: color-mix(in srgb, var(--r-lime) 8%, transparent);
}

.wiki .w-promises .is-guaranteed b {
  color: var(--g-text);
  min-width: 110px;
}

.wiki .w-chain-stages {
  font: 11px/1.65 var(--w-label);
  color: var(--g-dim);
  border-inline-start: 2px solid var(--g-line);
  padding-inline-start: 10px;
  margin: 8px 0 0;
}

/* Which chains an address covers. One EVM key controls the same address on
   BNB, Base and Robinhood, and saying so stops it reading as three gaps. */
.wiki .w-wallet-on {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--g-faint);
}

/* The address of one entry, said out loud. The archive is one page with hash
   routes, so before the m/<slug>/ pages existed there was nothing to copy
   that a crawler or a link preview would understand. */
.wiki .w-permalink { margin: 10px 0 0; }

.wiki .w-permalink a {
  font: 11px/1.4 var(--w-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.68;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.wiki .w-permalink a:hover { opacity: 1; }

/* Who made the meme, on the card that asks for it. Public on purpose: a
   credit nobody can see is a credit nobody can correct, and this one decides
   where money goes. */
.wiki .w-post-creator {
  margin: 6px 0 0;
  font: 11px/1.5 var(--w-label);
  letter-spacing: 0.04em;
  color: var(--w-muted);
}

.wiki .w-post-creator span {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 4px;
  margin-inline-end: 5px;
  opacity: 0.75;
}

.wiki .w-post-creator em { font-style: normal; opacity: 0.7; }

.wiki .w-kit-none { color: var(--w-muted); font-style: italic; }

/* "That is me" — the handle on the creator's door. Quiet by default: most
   people reading a card are not the artist, and a loud button next to
   somebody's name invites the wrong kind of click. */
.wiki .w-claim {
  margin-inline-start: 6px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  background: transparent;
  padding: 1px 9px;
  font: 10px/1.6 var(--w-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}

.wiki .w-claim:hover { opacity: 1; border-style: solid; }

/* The claim form lives in a modal, not in the wall's posting form, so the
   field rules scoped to .w-postform never reached it: the label stayed
   inline and the input sat at 179px inside a 420px card. Measured, not
   guessed — it looked plausible in a screenshot. */
.wiki .w-modal-card .f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}

.wiki .w-modal-card .f span {
  font: 700 11px/1.4 var(--w-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wiki .w-modal-card .f span em {
  font: italic 400 12px/1.5 var(--g-serif, Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

.wiki .w-modal-card .f input {
  width: 100%;
  padding: 10px 12px;
  font: 15px/1.5 Arial, Helvetica, sans-serif;
}

/* Article copy must use a text token, never a translucent border token. */
.wiki .w-standfirst { color: var(--g-text); }
.wiki .w-permalink a { color: var(--g-dim); opacity: 1; font-size: 12px; }
/* The filename completes the heading on phones as well as desktops. */
.wiki .w-intro h1 > .w-nobreak { display: inline-block; font-size: .88em; max-width: 100%; }

/* ---- app/journey.css ---- */
/* RAM journeys: the community board leads; the archive remains a research route. */
.wiki [hidden] { display:none !important; }
.wiki .j-skip { position:fixed;top:-100px;left:16px;z-index:1000;background:var(--r-lime);color:#151619;padding:14px; }
.wiki .j-skip:focus { top:12px; }
.wiki main { min-height:60vh; }
.wiki .j-nav { padding:18px max(24px,calc((100% - 1160px)/2));gap:20px; }
.wiki .j-nav nav { display:flex;gap:4px;margin:auto; }
.wiki .j-nav nav a { font-size:14px;padding:12px 16px;border-radius:10px; }
.wiki .j-nav nav a[aria-current=page] { background:var(--g-surface-2);color:var(--g-text);box-shadow:inset 0 -2px var(--r-lime); }
.wiki .j-create-nav { padding:12px 18px;white-space:nowrap;background:var(--r-lime);color:#171917;border:0;min-height:44px; }
.wiki .j-nav .r-logo { gap:10px;min-width:170px; }
.wiki .j-lockup { display:flex;flex-direction:column;gap:4px;line-height:1; }
.wiki .j-lockup b { font:900 27px/.95 'Archivo',Arial,sans-serif;letter-spacing:-1px; }
.wiki .j-lockup small { font:500 9px/1.2 'Archivo',Arial,sans-serif;letter-spacing:.02em;color:var(--g-dim); }
.wiki .j-page .j-brand-kicker { display:flex;align-items:center;gap:10px;font:600 clamp(12px,1.5vw,16px)/1.5 var(--w-label);letter-spacing:.1em;color:var(--g-text);margin:0 0 20px; }
.wiki .j-brand-led { width:7px;height:7px;flex:none;background:var(--r-lime);box-shadow:0 0 0 4px rgba(216,255,62,.1);border-radius:1px; }
.wiki .j-page { max-width:1208px;margin:auto;padding:42px 24px 64px; }
.wiki .j-page h1 { font:600 clamp(36px,5vw,66px)/1.04 'Archivo',system-ui,sans-serif;letter-spacing:-.05em;margin:12px 0 18px;max-width:850px; }
.wiki .j-page h1 em { color:var(--r-lime);font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em; }
.wiki .j-page h2 { font-size:24px;line-height:1.25;letter-spacing:-.025em; }
.wiki .j-page p { color:var(--g-dim);font-size:15px;line-height:1.7;max-width:750px; }
.wiki .j-page .r-eyebrow { font:600 11px/1.5 var(--w-label);letter-spacing:.12em;color:var(--g-text); }
.wiki .j-hero { display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:center;margin-bottom:40px; }
.wiki .j-hero>div>p:not(.r-eyebrow) { max-width:490px; }
.wiki .j-actions { display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px; }
.wiki .j-actions .r-button { padding:14px 20px;min-height:44px;background:var(--r-lime);color:#161912;border:0;font-size:14px; }
.wiki .j-textlink { display:inline-flex;align-items:center;gap:6px;font:600 13px/1.5 'Archivo',system-ui,sans-serif;background:none;border:0;color:var(--g-text);cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:5px; }
.wiki .j-path { padding:24px 30px;border:1px solid var(--g-line-bright);border-radius:18px;background:linear-gradient(140deg,rgba(139,123,255,.13),transparent); }
.wiki .j-path ol { list-style:none;padding:0;margin:22px 0 0;display:grid;gap:24px; }
.wiki .j-path li { display:flex;align-items:center;gap:20px;font-size:17px; }
.wiki .j-path b { font:18px var(--w-label);color:var(--r-lime); }
.wiki .j-path small { display:block;font:12px/1.7 'Archivo',sans-serif;color:var(--g-dim); }
.wiki .j-section-head { display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--g-line);padding-top:24px; }
.wiki .j-section-head h2 { margin:4px 0 20px; }
.wiki .j-page .w-account { margin:0 0 18px;max-width:none;padding:12px 16px; }
.wiki .j-board-controls { display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:18px;align-items:end; }
.wiki .j-search { font:600 11px/1.4 var(--w-label);color:var(--g-dim);display:grid;gap:7px; }
.wiki .j-search input { width:100%;border:1px solid var(--g-line-bright);border-radius:9px;background:var(--g-surface);color:var(--g-text);padding:13px 14px;font:15px 'Archivo',sans-serif; }
.wiki .j-tabs { display:flex;gap:6px;flex-wrap:wrap; }
.wiki .j-tabs button,.wiki .j-pagination button,.wiki .j-follow,.wiki .j-refresh { border:1px solid var(--g-line-bright);border-radius:8px;background:var(--g-surface);color:var(--g-text);padding:10px 13px;font:500 12px/1.5 'Archivo',sans-serif;cursor:pointer;min-height:44px; }
.wiki .j-tabs button[aria-pressed=true] { background:var(--g-text);color:var(--g-bg); }
.wiki .j-page .w-sortbar { margin:16px 0 8px;padding:0;border:0;gap:8px; }
.wiki .j-page .w-sort[aria-pressed=true] { background:var(--g-surface-2);color:var(--g-text);border-bottom:2px solid var(--r-lime); }
.wiki #wall-state { font-size:12px;min-height:22px;margin:10px 0 16px; }
.wiki .j-proposals { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.wiki .j-proposal-card { display:flex;flex-direction:column;min-width:0;overflow:hidden;align-self:start; }
.wiki .j-card-top { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px; }
.wiki .j-status { font:600 10px/1.4 var(--w-label);padding:7px 8px;border-radius:5px;background:var(--g-surface-2);color:var(--g-text); }
.wiki .j-ready { color:var(--r-lime);background:rgba(139,123,255,.15); }
.wiki .j-launched { color:var(--g-good); }
.wiki .j-follow { font-size:11px;padding:7px 10px; }
.wiki .j-follow[aria-pressed=true] { border-color:var(--g-good);color:var(--g-good); }
.wiki .j-proposal-card>img { width:100%;height:190px;object-fit:contain;background:var(--g-surface-2);border:0;padding:10px; }
.wiki .j-proposal-card .w-post-plate { min-height:140px;display:grid;place-items:center;padding:24px;text-align:center;overflow-wrap:anywhere;background:linear-gradient(150deg,rgba(139,123,255,.17),rgba(216,255,62,.08)); }
.wiki .j-proposal-card .w-post-copy { width:100%;padding:18px; }
.wiki .j-proposal-card h3 { margin:0 0 8px;font-size:22px; }
.wiki .j-proposal-card .w-post-copy>p { font-size:13px;line-height:1.6; }
.wiki .j-proposal-card .w-post-foot { flex-wrap:wrap;gap:8px; }
.wiki .j-proposal-card .w-vote { margin:18px -18px -18px;padding:16px;border-radius:0; }
.wiki .j-proposal-card .w-vote-num i { white-space:normal;line-height:1.6; }
.wiki .j-proposal-card .w-vote-btn { min-height:44px;width:100%; }
.wiki .j-proposal-card .w-vote-note { font-size:12px; }
.wiki .j-empty { grid-column:1/-1;padding:34px 24px;text-align:center;border:1px dashed var(--g-line-bright);border-radius:14px; }
.wiki .j-empty-icon { color:var(--r-lime);font:32px/1.4 var(--w-label); }
.wiki .j-empty p { margin:10px auto;max-width:540px; }
.wiki .j-empty .j-actions { justify-content:center; }
.wiki .j-empty .r-button { margin:12px 0; }
.wiki .j-archive-bridge { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 0;margin-top:36px;border-top:1px solid var(--g-line); }
.wiki .j-archive-bridge h2 { margin:6px 0; }
.wiki .j-archive-bridge p { margin:4px 0; }
.wiki .j-archive-intro { padding-top:40px;padding-bottom:28px; }
.wiki .j-archive-intro h1 { font-size:clamp(30px,4vw,54px);max-width:760px; }
.wiki .j-archive-intro .w-intro-note { display:none; }
.wiki .w-library .w-toolbar { scroll-margin-top:20px; }
.wiki .j-pagination { display:flex;justify-content:center;align-items:center;gap:18px;margin:30px 0; }
.wiki .j-pagination span { font:12px var(--w-label);color:var(--g-dim);text-align:center; }
.wiki .j-pagination button:disabled { opacity:.4;cursor:default; }
.wiki .j-article-cta { border:1px solid var(--g-line-bright);border-radius:12px;padding:24px;margin:36px 0; }
.wiki .j-article-cta h2 { font-size:24px; }
.wiki .j-article-cta p { color:var(--g-dim);font-size:14px;line-height:1.6; }
.wiki .j-follow-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px; }
.wiki .j-follow-card { padding:24px;border:1px solid var(--g-line);border-radius:14px; }
.wiki .j-proposal-detail #wall-posts { display:block;max-width:760px;margin:24px auto; }
.wiki .j-proposal-detail .j-proposal-card>img { height:300px; }
.wiki .j-detail-title { margin-bottom:20px; }
.wiki .j-reading { max-width:850px; }
.wiki .j-guide { padding-left:25px; }
.wiki .j-guide li { padding-left:10px;margin:30px 0; }
.wiki .j-guide li::marker { color:var(--r-lime);font:18px var(--w-label); }
.wiki .j-details { padding:20px;border:1px solid var(--g-line);border-radius:10px;margin:16px 0; }
.wiki .j-details summary { cursor:pointer;font-weight:600; }
.wiki .j-details .w-cannot { margin:20px 0 0;padding:15px; }
.wiki .j-create-layout { display:grid;grid-template-columns:minmax(0,1.65fr) minmax(230px,1fr);gap:36px;align-items:start;margin-top:25px; }
.wiki .j-create-layout .w-postform { display:block;margin:0;padding:26px; }
.wiki .j-form-fields { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.wiki .j-form-fields .big { grid-column:1/-1; }
.wiki .j-form-fields .f { min-width:0; }
.wiki .j-form-fields .f span { display:block;margin-bottom:8px; }
.wiki .j-form-fields .f em,.wiki .j-form-fields small { color:var(--g-dim);font:12px/1.6 'Archivo',sans-serif; }
.wiki .j-form-fields input,.wiki .j-form-fields textarea { font-size:16px;width:100%;max-width:100%; }
.wiki .j-form-fields input[type=file] { font-size:12px;padding:12px 0; }
.wiki .j-create-layout .w-postform-foot { margin-top:25px;display:grid;gap:12px; }
.wiki .j-create-layout .w-postform-foot button { width:100%;min-height:48px; }
.wiki .j-create-layout .w-postform-foot span { margin:0; }
.wiki .j-create-help { padding:26px;border:1px solid var(--g-line);border-radius:14px; }
.wiki .j-create-help ul { padding-left:18px;font-size:14px;line-height:1.7; }
.wiki .j-create-help p { font-size:13px; }
.wiki .j-steps { list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:25px 0; }
.wiki .j-steps li { padding:10px 14px;border:1px solid var(--g-line);border-radius:8px;font:12px var(--w-label);color:var(--g-dim); }
.wiki .j-steps [aria-current=step] { color:var(--g-text);border-color:var(--r-lime); }
.wiki .j-review dt { color:var(--g-dim);font:11px var(--w-label);margin-top:20px; }
.wiki .j-review dd { margin:6px 0;overflow-wrap:anywhere;line-height:1.6; }
.wiki .j-page .w-launched { padding:24px 0;margin:20px 0; }
.wiki .j-page .w-launched-head h2 { font-size:26px; }
.wiki .j-page .w-launchlist li { min-width:0; }
.wiki .j-page code { overflow-wrap:anywhere; }
.wiki .j-page button:focus-visible,.wiki .j-page a:focus-visible,.wiki .j-nav a:focus-visible { outline:2px solid var(--r-lime);outline-offset:4px; }
.wiki .j-page button:disabled { cursor:not-allowed;opacity:.5; }
.wiki .w-account-addr { color:var(--g-text); }
.wiki .r-button:hover:not(:disabled) { box-shadow:none; }
.wiki .j-nav .j-create-nav:hover:not(:disabled),.wiki .j-nav .j-create-nav:focus-visible,
.wiki .j-page .j-actions .r-button:hover:not(:disabled) { background:#E2FF79;color:#16181E;box-shadow:none;transform:none; }
html[data-theme=light] .wiki .j-page h1 em,html[data-theme=light] .wiki .j-path b,html[data-theme=light] .wiki .j-ready,html[data-theme=light] .wiki .j-empty-icon { color:#4d4187; }
@media(max-width:950px) {
 .wiki .j-nav { padding:14px 24px;gap:12px; }
 .wiki .j-nav nav a { padding:11px; }
 .wiki .j-hero { gap:24px; }
 .wiki .j-proposals { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .wiki .j-board-controls { grid-template-columns:1fr; }
}
@media(max-width:650px) {
 .wiki .j-nav { display:grid;grid-template-columns:1fr auto auto;padding:12px 16px;gap:10px; }
 .wiki .j-nav .r-logo { font-size:28px; }
 .wiki .j-nav .r-logo img { width:30px;height:30px; }
 .wiki .j-nav .r-logo { min-width:0;gap:7px; }
 .wiki .j-lockup b { font-size:23px; }
 .wiki .j-lockup small { font-size:8px; }
 .wiki .j-nav nav { grid-column:1/-1;grid-row:2;width:100%;display:flex;justify-content:space-between;gap:2px; }
 .wiki .j-nav nav a { flex:1;padding:12px 6px;text-align:center;font-size:12px; }
 .wiki .j-nav .w-theme { grid-column:2;grid-row:1; }
 .wiki .j-create-nav { grid-column:3;grid-row:1;font-size:12px;padding:12px; }
 .wiki .j-page { padding:26px 16px 40px; }
 .wiki .j-hero { grid-template-columns:1fr;margin-bottom:26px;gap:16px; }
 .wiki .j-hero h1 { font-size:40px; }
 .wiki .j-path { padding:14px; }
 .wiki .j-path>.r-eyebrow { display:none; }
 .wiki .j-path ol { display:flex;gap:12px;margin:0;justify-content:space-between; }
 .wiki .j-path li { font-size:10px;gap:5px;align-items:start;flex:1; }
 .wiki .j-path b { font-size:11px; }
 .wiki .j-path small { display:none; }
 .wiki .j-proposals,.wiki .j-follow-grid,.wiki .j-create-layout { grid-template-columns:1fr; }
 .wiki .j-section-head { align-items:start; }
 .wiki .j-section-head h2 { font-size:22px; }
 .wiki .j-section-head>.j-textlink { font-size:11px; }
 .wiki .j-archive-bridge { flex-direction:column;align-items:start; }
 .wiki .j-tabs { gap:5px; }
 .wiki .j-tabs button { padding:9px;font-size:11px; }
 .wiki .j-pagination { gap:8px; }
 .wiki .j-pagination button { font-size:11px;padding:8px; }
 .wiki .j-pagination span { font-size:10px; }
 .wiki .j-create-layout .w-postform { padding:18px; }
 .wiki .j-form-fields { grid-template-columns:1fr; }
 .wiki .j-form-fields .big { grid-column:auto; }
 .wiki .j-steps { gap:5px; }
 .wiki .j-steps li { font-size:10px;padding:9px; }
 .wiki .j-article-cta { padding:18px; }
 .wiki .j-proposal-detail .j-proposal-card>img { height:220px; }
 .wiki .r-footer-top { flex-wrap:wrap;gap:15px; }
}
@media(prefers-reduced-motion:reduce) { .wiki *, .wiki *::before, .wiki *::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; } }

.wiki .j-hero .j-brand-tagline { color:var(--g-text);font-size:18px;line-height:1.4;margin:0 0 12px; }

/* ---- The encyclopedia's own furniture ------------------------------------
   An index, a topic shelf and a way to walk the volume. These exist because
   an archive that can only be searched reads as a list; one you can enter by
   letter, subject, era and format reads as a reference work. The counts that
   used to sit on the era buttons are gone: what a shelf holds is told by what
   is on it, not by a tally printed on the door. */

.wiki .w-index,
.wiki .w-topics { display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px; }
.wiki .w-index-label { font:600 10px/1 var(--w-label);letter-spacing:.16em;text-transform:uppercase;color:var(--g-faint);margin-inline-end:6px; }
.wiki .w-index button,
.wiki .w-topics button { border:1px solid var(--g-line);border-radius:7px;background:transparent;color:var(--g-dim);cursor:pointer;font:500 12px/1 'Archivo',sans-serif;padding:9px 10px;min-width:34px;min-height:34px; }
.wiki .w-topics button { min-width:0;padding:9px 12px; }
.wiki .w-index button:hover:not(:disabled),
.wiki .w-topics button:hover { color:var(--g-text);border-color:var(--g-line-bright); }
.wiki .w-index button[aria-pressed=true],
.wiki .w-topics button[aria-pressed=true] { background:var(--r-lime);border-color:var(--r-lime);color:#171917;font-weight:700; }
/* A letter with nothing behind it still prints. An index that hides its gaps
   is not an index — the reader should see that nothing files under Q. */
.wiki .w-index button:disabled { opacity:.32;cursor:default;border-style:dashed; }

.wiki .w-results-tools { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
.wiki .w-results-meta .w-sort { display:flex;align-items:center;gap:7px;font:500 11px/1 'Archivo',sans-serif;color:var(--g-faint); }
.wiki .w-results-meta .w-sort span { text-transform:uppercase;letter-spacing:.12em; }
.wiki .w-results-meta select { border:1px solid var(--g-line-bright);border-radius:7px;background:var(--g-surface);color:var(--g-text);padding:8px 10px;font:500 12px 'Archivo',sans-serif;min-height:38px;cursor:pointer; }

/* ---- Walking the volume ---- */
.wiki .w-steps { display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin:38px 0 0;padding-top:22px;border-top:1px solid var(--g-line); }
.wiki .w-step { display:flex;flex-direction:column;gap:3px;border:1px solid var(--g-line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--g-text);min-height:44px; }
.wiki .w-step:hover { border-color:var(--r-lime); }
.wiki .w-step span { font:600 10px/1 var(--w-label);letter-spacing:.14em;text-transform:uppercase;color:var(--g-faint); }
.wiki .w-step b { font:600 15px/1.35 'Archivo',sans-serif; }
.wiki .w-step small { font:12px/1 'Archivo',sans-serif;color:var(--g-dim); }
.wiki .w-step-next { text-align:right; }
.wiki .w-step.is-end { border:1px dashed var(--g-line);opacity:.4;border-radius:12px; }
.wiki .w-step-index { align-self:center;padding:12px 16px;border:1px solid var(--g-line-bright);border-radius:10px;text-decoration:none;color:var(--g-dim);font:600 11px/1 var(--w-label);letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center; }
.wiki .w-step-index:hover { color:var(--g-text);border-color:var(--r-lime); }

.wiki .w-tagrow { display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:26px 0 0; }
.wiki .w-tagrow span { font:600 10px/1 var(--w-label);letter-spacing:.14em;text-transform:uppercase;color:var(--g-faint); }
.wiki .w-tagrow a { border:1px solid var(--g-line);border-radius:999px;padding:7px 13px;text-decoration:none;color:var(--g-dim);font:500 12px/1 'Archivo',sans-serif;min-height:32px;display:inline-flex;align-items:center; }
.wiki .w-tagrow a:hover { color:var(--g-text);border-color:var(--r-lime); }

/* ---- Asking for a contribution ---- */
.wiki .w-contribute-band { display:flex;gap:26px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:34px 0 0;padding:28px 30px;border:1px solid var(--g-line-bright);border-radius:18px;background:linear-gradient(140deg,rgba(139,123,255,.13),transparent); }
.wiki .w-contribute-band h2 { font:600 24px/1.2 'Archivo',sans-serif;margin:6px 0 8px;color:var(--g-text); }
.wiki .w-contribute-band p { color:var(--g-dim);max-width:56ch;margin:0;font-size:14px;line-height:1.7; }
.wiki .w-contribute-actions { display:flex;flex-direction:column;gap:10px;align-items:flex-start; }
.wiki .w-contribute-actions .r-button { background:var(--r-lime);color:#171917;border:0;padding:14px 22px;min-height:44px;white-space:nowrap; }

.wiki .w-empty-actions { display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:6px; }
.wiki .w-fix { border-top:1px dashed var(--g-line);margin-top:16px;padding-top:14px;font-size:13px;color:var(--g-dim); }
.wiki .w-fix a { color:var(--r-lime); }

/* ---- The contribute form ---- */
.wiki .j-kindpick { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px; }
.wiki .j-kind { border:1px solid var(--g-line-bright);border-radius:9px;padding:12px 16px;text-decoration:none;color:var(--g-dim);font:500 13px/1 'Archivo',sans-serif;min-height:44px;display:inline-flex;align-items:center; }
.wiki .j-kind[aria-pressed=true] { background:var(--g-surface-2);color:var(--g-text);border-color:var(--r-lime);box-shadow:inset 0 -2px var(--r-lime); }
.wiki #contrib-form { display:flex;flex-direction:column;gap:18px; }
.wiki #contrib-form label { display:flex;flex-direction:column;gap:5px;font:600 13px/1.4 'Archivo',sans-serif;color:var(--g-text); }
.wiki #contrib-form label span { font-weight:400;font-size:12px;line-height:1.6;color:var(--g-dim); }
.wiki #contrib-form input,
.wiki #contrib-form select,
.wiki #contrib-form textarea { border:1px solid var(--g-line-bright);border-radius:9px;background:var(--g-surface);color:var(--g-text);padding:13px 14px;font:15px 'Archivo',sans-serif;width:100%;min-height:46px; }
.wiki #contrib-form textarea { resize:vertical;line-height:1.6; }
.wiki .j-field-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.wiki .j-about-entry { border:1px solid var(--g-line);border-radius:9px;padding:12px 14px;font-size:13px;color:var(--g-dim);margin:0; }
.wiki .j-about-entry a { color:var(--r-lime); }
.wiki .j-error:empty { display:none; }
.wiki .j-error { color:#ff9d8a;font-size:13px;margin:0;border-left:2px solid #ff9d8a;padding-left:12px; }
.wiki .j-bridge-actions { display:flex;gap:18px;flex-wrap:wrap;align-items:center; }

@media(max-width:760px) {
  .wiki .w-steps { grid-template-columns:1fr;gap:8px; }
  .wiki .w-step-next { text-align:left; }
  .wiki .w-step.is-end { display:none; }
  .wiki .w-step-index { align-self:stretch;justify-content:center; }
  .wiki .w-contribute-band { flex-direction:column;align-items:flex-start;padding:20px; }
  .wiki .w-contribute-actions { align-self:stretch; }
  .wiki .w-contribute-actions .r-button { text-align:center; }
  .wiki .j-field-row { grid-template-columns:1fr; }
  .wiki .w-index button,.wiki .w-topics button { min-height:38px;padding:8px; }
}

/* The headline pill, pinned.
   glass.css says `.wiki .w-folder { color:#14151c }` and means it — a near
   black on the lime chip. But `.wiki .w-intro h1 > span { color:var(--r-purple) }`
   is written for the other span in that heading and scores one element higher,
   so it swallowed the pill as well: purple on lime, measured at 2.80:1 where
   bold text that size needs 3. Naming the pill itself scores higher than the
   generic child selector, so this wins and the joke stays legible. */
.wiki .w-intro h1 > .w-folder { color:#14151c; }

/* ---- The chains, on the first screen -------------------------------------
   The site is a launchpad before it is an archive, and a launchpad that does
   not say where it launches is asking to be guessed at. Each chip carries its
   network's own colour and the platform underneath, because "SOL" alone tells
   you the chain and not who actually mints the thing. */
.wiki .j-chains { display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0; }
.wiki .j-chain { display:flex;flex-direction:column;gap:2px;padding:10px 16px;border:1px solid var(--g-line-bright);border-radius:12px;background:var(--g-surface);border-left:3px solid var(--chain); }
.wiki .j-chain b { font:700 14px/1.2 var(--w-label);letter-spacing:.06em;color:var(--g-text); }
.wiki .j-chain small { font:12px/1.3 'Archivo',sans-serif;color:var(--g-dim); }
.wiki .j-path-note { margin:22px 0 0;padding-top:16px;border-top:1px solid var(--g-line);font-size:13px;line-height:1.7;color:var(--g-dim); }
@media(max-width:760px) {
  .wiki .j-chains { gap:7px; }
  .wiki .j-chain { padding:8px 12px;flex:1 1 calc(50% - 7px); }
  .wiki .j-chain b { font-size:13px; }
}

/* --- where a trade's fee goes -------------------------------------------
   The table's only job is the third column: which rows the chain enforces
   and which one is us promising. Those two are given different marks, and
   the promise is dashed like every other unverified thing on this site. */
.j-money { margin: 28px 0; padding: 20px; border: 1px solid var(--g-line);
  border-radius: 10px; background: var(--g-surface); }
.j-money-lead { margin: 6px 0 16px; color: var(--g-text); max-width: 62ch; }
.j-money-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.j-money-table th { text-align: start; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--g-dim); font-weight: 600;
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--g-line); }
.j-money-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--g-line);
  vertical-align: top; color: var(--g-text); }
.j-money-table tr:last-child td { border-bottom: 0; }
.j-money-table td b { font-variant-numeric: tabular-nums; }
.j-money-table .is-chain, .j-money-table .is-word { font-size: .86rem; color: var(--g-dim); }
.j-money-table .is-chain { border-inline-start: 3px solid var(--r-lime); padding-inline-start: 10px; }
.j-money-table .is-word { border-inline-start: 3px dashed var(--g-dim); padding-inline-start: 10px; }
.j-money-note { margin: 14px 0 0; font-size: .88rem; color: var(--g-dim); max-width: 68ch; }
@media (max-width: 560px) {
  .j-money { padding: 16px; }
  .j-money-table, .j-money-table tbody, .j-money-table tr, .j-money-table td { display: block; width: 100%; }
  .j-money-table thead { display: none; }
  .j-money-table tr { padding: 10px 0; border-bottom: 1px solid var(--g-line); }
  .j-money-table td { border-bottom: 0; padding: 2px 0; }
}