:root {
  --ink: #12110d;
  --black: #071213;
  --deep: #002d2f;
  --acid: #a8ff14;
  --gold: #dda915;
  --paper: #fff0b5;
  --cream: #fff8df;
  --red: #ce3154;
  --line: rgba(255, 240, 181, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 82% 8%, rgba(168, 255, 20, .11), transparent 24rem),
    radial-gradient(circle at 5% 52%, rgba(221, 169, 21, .1), transparent 28rem),
    var(--black);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }
.page-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .15;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.025) 6px);
}

.atc-shell {
  width: min(94vw, 1500px);
  margin: clamp(12px, 2vw, 30px) auto;
  border: 1px solid rgba(221, 169, 21, .32);
  background: rgba(1, 22, 23, .76);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
}

.atc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 18px clamp(18px, 4vw, 60px);
  border-bottom: 1px solid var(--line);
}
.brand-mark, .atc-nav { display: flex; align-items: center; }
.brand-mark {
  gap: 12px;
  font: 900 1.15rem Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand-arrow {
  width: 46px;
  height: 20px;
  background: var(--gold);
  clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%);
}
.atc-nav { gap: clamp(16px, 3vw, 36px); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.atc-nav a { padding: 10px 0; border-bottom: 1px solid transparent; }
.atc-nav a:hover { color: var(--acid); border-color: var(--acid); }

.atc-hero {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(360px, .72fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: center;
  min-height: calc(100vh - 124px);
  padding: clamp(56px, 8vw, 120px) clamp(24px, 7vw, 110px);
}
.hero-copy { max-width: 680px; }
.eyebrow, .section-number {
  margin: 0 0 18px;
  color: var(--gold);
  font: 800 .72rem/1.2 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1, h2 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
h1 { max-width: 760px; font-size: clamp(4rem, 7.4vw, 8.8rem); line-height: .82; }
h2 { font-size: clamp(3.1rem, 5.4vw, 6.8rem); line-height: .86; }
.hero-lede {
  max-width: 610px;
  margin: 30px 0 0;
  color: rgba(255, 248, 223, .74);
  font: clamp(1rem, 1.35vw, 1.25rem)/1.65 Georgia, "Times New Roman", serif;
}
.current-hop-note {
  max-width: 640px;
  margin: 24px 0 0;
  padding: 15px 17px;
  border: 1px solid rgba(168, 255, 20, .42);
  color: rgba(255, 248, 223, .78);
  background: rgba(168, 255, 20, .07);
  font: .82rem/1.55 Arial, Helvetica, sans-serif;
}
.current-hop-note strong { color: var(--acid); text-transform: uppercase; letter-spacing: .06em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 34px; }
.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 50px;
  padding: 12px 17px;
  border: 1px solid var(--gold);
  font-weight: 800;
}
.primary-cta { color: var(--ink); background: var(--gold); box-shadow: 7px 7px 0 rgba(168, 255, 20, .28); }
.primary-cta:hover { background: var(--acid); }
.text-link { padding: 10px 0; border-bottom: 1px solid var(--cream); font-size: .86rem; }
.text-link:hover { color: var(--acid); border-color: var(--acid); }
.hop-jump {
  display: inline-block;
  margin-top: 18px;
  color: rgba(255, 248, 223, .58);
  font: 700 .66rem "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hop-jump:hover { color: var(--acid); }

.card-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 52px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.card-facts div { padding: 16px 14px 16px 0; }
.card-facts dt { color: rgba(255, 248, 223, .48); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.card-facts dd { margin: 8px 0 0; color: var(--acid); font: 800 .88rem "Courier New", monospace; text-transform: uppercase; }

.card-stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.card-stage::before {
  content: "";
  position: absolute;
  width: min(42vw, 610px);
  aspect-ratio: 1;
  border: 1px solid rgba(221, 169, 21, .26);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(168, 255, 20, .11);
}
.orbit-copy {
  position: absolute;
  color: rgba(255, 240, 181, .16);
  font: 700 clamp(.62rem, .85vw, .78rem) "Courier New", monospace;
  letter-spacing: .28em;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left top;
}
.card-frame {
  position: relative;
  z-index: 2;
  width: min(29vw, 390px);
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(255, 240, 181, .4);
  background: #070c0b;
  box-shadow: 22px 26px 0 rgba(221, 169, 21, .16), 0 28px 75px rgba(0, 0, 0, .55);
  transform: rotate(1.3deg);
}
.card-image-wrap { position: relative; overflow: hidden; }
.card-image-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; }
.unrevealed-stamp {
  position: absolute;
  right: 15px;
  bottom: 17px;
  padding: 8px 10px 7px;
  border: 2px solid var(--acid);
  color: var(--acid);
  background: rgba(0, 20, 21, .82);
  font: 900 .66rem "Courier New", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.card-frame figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 3px 2px; color: rgba(255, 248, 223, .62); font: .61rem "Courier New", monospace; text-transform: uppercase; }

.onchain-collection, .atc-quickstart, .hop-section, .hop-hop-exchange, .definition-section, .rights-section { border-top: 1px solid var(--line); }
.onchain-collection {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: clamp(38px, 7vw, 110px);
  padding: clamp(64px, 7vw, 105px) clamp(24px, 7vw, 110px);
  background: #091111;
}
.onchain-collection header { min-width: 0; }
.onchain-collection h2 { overflow-wrap: anywhere; }
.onchain-collection header > p:last-child {
  max-width: 440px;
  margin: 24px 0 0;
  color: rgba(255, 248, 223, .68);
  font: .96rem/1.65 Georgia, serif;
}
.onchain-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.onchain-card {
  display: grid;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 240, 181, .34);
  background: #050b0b;
  box-shadow: 8px 9px 0 rgba(221, 169, 21, .12);
  transition: border-color .2s ease, transform .2s ease;
}
.onchain-card:hover { border-color: var(--acid); transform: translateY(-4px); }
.onchain-card img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain; background: #071213; }
.onchain-card > span { display: flex; justify-content: space-between; gap: 14px; padding: 12px 2px 2px; }
.onchain-card strong { color: var(--cream); font: 800 .72rem "Courier New", monospace; text-transform: uppercase; }
.onchain-card em { color: var(--acid); font: 700 .62rem "Courier New", monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.atc-quickstart {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: start;
  padding: clamp(64px, 7vw, 105px) clamp(24px, 7vw, 110px);
  background: #061617;
}
.quickstart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 1px;
  background: var(--line);
}
.quickstart-intro {
  max-width: 390px;
  margin: 24px 0 0;
  color: rgba(255, 248, 223, .68);
  font: .96rem/1.6 Georgia, serif;
}
.quickstart-guide {
  display: inline-block;
  margin-top: 24px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--acid);
  color: var(--acid);
  font: 800 .7rem "Courier New", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.quickstart-guide:hover { color: var(--cream); border-color: var(--cream); }
.quickstart-grid article { min-height: 245px; padding: clamp(22px, 2.5vw, 34px); background: #0b2021; }
.quickstart-grid span { color: var(--gold); font: 700 .66rem "Courier New", monospace; letter-spacing: .08em; }
.quickstart-grid h3 { margin: 54px 0 14px; color: var(--acid); font: 900 clamp(1.55rem, 2.1vw, 2.7rem)/.92 Impact, sans-serif; text-transform: uppercase; }
.quickstart-grid p { margin: 0; color: rgba(255, 248, 223, .68); font: .9rem/1.58 Georgia, serif; }
.hop-section {
  padding: clamp(70px, 9vw, 140px) clamp(24px, 7vw, 110px);
  background:
    linear-gradient(135deg, rgba(221, 169, 21, .08), transparent 45%),
    #11100d;
}
.hop-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr);
  gap: clamp(36px, 8vw, 130px);
  align-items: end;
}
.hop-intro > p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 248, 223, .75);
  font: clamp(1.05rem, 1.4vw, 1.3rem)/1.65 Georgia, serif;
}
.hop-intro .primary-cta { margin-top: 30px; }
.hop-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(54px, 7vw, 90px) 0 0;
  padding: 1px;
  list-style: none;
  background: var(--line);
}
.hop-steps li {
  min-height: 290px;
  padding: clamp(24px, 2.8vw, 40px);
  background: #081819;
}
.hop-steps li > span {
  color: var(--gold);
  font: 700 .68rem "Courier New", monospace;
}
.hop-steps h3 {
  margin: 64px 0 16px;
  color: var(--acid);
  font: 900 clamp(1.8rem, 2.6vw, 3.3rem)/.9 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
}
.hop-steps p {
  margin: 0;
  color: rgba(255, 248, 223, .68);
  font: .96rem/1.6 Georgia, serif;
}
.hop-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}
.hop-rules p {
  margin: 0;
  padding: 24px clamp(24px, 3vw, 40px);
  color: rgba(255, 248, 223, .64);
  background: #0a1313;
  font: .82rem/1.65 Arial, Helvetica, sans-serif;
}
.hop-rules strong { color: var(--cream); }
.hop-rules a { color: var(--gold); border-bottom: 1px solid rgba(221, 169, 21, .5); }
.hop-rules a:hover { color: var(--acid); border-color: var(--acid); }
.hop-rules-wide { grid-column: 1 / -1; }

.hop-hop-exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .68fr);
  gap: clamp(38px, 8vw, 125px);
  align-items: end;
  padding: clamp(70px, 9vw, 140px) clamp(24px, 7vw, 110px);
  background:
    linear-gradient(145deg, rgba(168, 255, 20, .08), transparent 42%),
    #071b1c;
}
.exchange-copy > p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 248, 223, .72);
  font: clamp(1.02rem, 1.35vw, 1.26rem)/1.65 Georgia, serif;
}
.exchange-copy dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.exchange-copy dl div { min-width: 0; padding: 16px 12px 16px 0; }
.exchange-copy dt { color: rgba(255, 248, 223, .46); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.exchange-copy dd { margin: 7px 0 0; color: var(--acid); font: 800 .72rem/1.35 "Courier New", monospace; text-transform: uppercase; }
.exchange-copy .primary-cta { margin-top: 30px; }
.exchange-deep-link {
  display: block;
  width: fit-content;
  margin-top: 16px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.exchange-deep-link:hover { color: var(--acid); border-color: var(--acid); }

.definition-section {
  display: grid;
  grid-template-columns: .36fr 1fr .48fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding: clamp(70px, 9vw, 140px) clamp(24px, 7vw, 110px);
  background: var(--paper);
  color: var(--ink);
}
.definition-section .section-number { color: #825e00; }
.definition-section p:not(.section-number) { max-width: 700px; margin: 30px 0 0; font: clamp(1.05rem, 1.4vw, 1.34rem)/1.7 Georgia, serif; }
.definition-story-link {
  display: inline-flex;
  gap: 22px;
  margin-top: 30px;
  padding: 13px 0 9px;
  border-bottom: 2px solid var(--ink);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.definition-story-link:hover { color: #6a4c00; border-color: var(--gold); }
.definition-section aside { padding: 24px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--gold); }
.definition-section aside strong, .definition-section aside span { display: block; }
.definition-section aside strong { font: 900 clamp(2rem, 3.5vw, 4.4rem)/.9 Impact, sans-serif; }
.definition-section aside span { margin-top: 14px; font: 700 .68rem "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }

.rights-section { padding: clamp(70px, 9vw, 140px) clamp(24px, 7vw, 110px); background: #052425; }
.rights-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.rights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 60px; background: var(--line); }
.rights-grid article { min-height: 270px; padding: clamp(24px, 3vw, 44px); background: #071b1c; }
.rights-grid article > span { color: var(--gold); font: 700 .68rem "Courier New", monospace; }
.rights-grid h3 { margin: 54px 0 15px; color: var(--acid); font: 900 clamp(1.8rem, 2.5vw, 3.2rem) Impact, sans-serif; text-transform: uppercase; }
.rights-grid p, .rights-note { color: rgba(255, 248, 223, .68); font: 1rem/1.65 Georgia, serif; }
.rights-note { max-width: 900px; margin: 30px 0 0; font-size: .82rem; }
.fulfilment-banner {
  display: grid;
  grid-template-columns: .45fr .72fr 1fr;
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  margin-top: 1px;
  padding: 26px clamp(24px, 3vw, 42px);
  border-left: 5px solid var(--acid);
  color: var(--cream);
  background: #10100d;
}
.fulfilment-banner span { color: var(--gold); font: 800 .62rem "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.fulfilment-banner strong { font: 900 clamp(1.55rem, 2.4vw, 2.7rem)/.95 Impact, sans-serif; text-transform: uppercase; }
.fulfilment-banner p { margin: 0; color: rgba(255, 248, 223, .68); font: .86rem/1.55 Georgia, serif; }

.atc-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding: 36px clamp(24px, 7vw, 110px);
  border-top: 1px solid var(--line);
  background: #050d0e;
}
.atc-footer span, .atc-footer strong { display: block; }
.atc-footer span { color: var(--gold); font: 700 .62rem "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; }
.atc-footer strong { margin-top: 8px; font: 900 1.2rem Impact, sans-serif; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; color: rgba(255, 248, 223, .62); font-size: .78rem; text-transform: uppercase; }
.footer-links a:hover { color: var(--acid); }

@media (max-width: 980px) {
  .atc-hero { grid-template-columns: 1fr; }
  .onchain-collection { grid-template-columns: 1fr; }
  .atc-quickstart { grid-template-columns: 1fr; }
  .card-stage { min-height: 580px; }
  .card-stage::before { width: min(76vw, 600px); }
  .card-frame { width: min(54vw, 390px); }
  .hop-heading { grid-template-columns: 1fr; align-items: start; }
  .hop-steps { grid-template-columns: 1fr 1fr; }
  .hop-hop-exchange { grid-template-columns: 1fr; align-items: start; }
  .definition-section { grid-template-columns: 1fr; }
  .definition-section aside { max-width: 360px; }
  .rights-grid { grid-template-columns: 1fr 1fr; }
  .fulfilment-banner { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .atc-shell { width: 96vw; }
  .atc-topbar { align-items: flex-start; flex-wrap: wrap; }
  .atc-nav { justify-content: space-between; width: 100%; gap: 12px; font-size: .61rem; }
  .atc-nav a:first-child { display: none; }
  .brand-mark { font-size: .92rem; }
  .brand-arrow { width: 32px; height: 15px; }
  .atc-hero { min-height: 0; padding-top: 64px; }
  h1 { font-size: clamp(3.4rem, 17vw, 5.6rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-cta { width: 100%; }
  .text-link { align-self: flex-start; }
  .card-facts { grid-template-columns: 1fr 1fr; }
  .quickstart-grid { grid-template-columns: 1fr; }
  .onchain-card-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .onchain-card { padding: 6px; }
  .onchain-card > span { align-items: flex-start; flex-direction: column; gap: 5px; }
  .quickstart-grid article { min-height: 0; }
  .quickstart-grid h3 { margin-top: 30px; }
  .card-stage { min-height: 500px; }
  .card-frame { width: min(78vw, 340px); }
  .orbit-copy { display: none; }
  .hop-steps, .hop-rules { grid-template-columns: 1fr; }
  .hop-steps li { min-height: 220px; }
  .hop-steps h3 { margin-top: 34px; }
  .hop-rules-wide { grid-column: auto; }
  .exchange-copy dl { grid-template-columns: 1fr; }
  .exchange-copy dl div + div { border-top: 1px solid var(--line); }
  .rights-grid { grid-template-columns: 1fr; }
  .rights-grid article { min-height: 220px; }
  .rights-grid h3 { margin-top: 34px; }
  .atc-footer { align-items: flex-start; flex-direction: column; }
}

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

/* Interaction safety: visible keyboard focus and comfortable touch targets. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
@media(pointer:coarse){
  .atc-nav a,.atc-footer a,.hop-jump{display:inline-flex;align-items:center;min-height:44px}
  .music-toggle,.music-mini-control{min-width:44px;min-height:44px}
}

/* Readability floor (2026-08-16): no live text under ~13px. */
.atc-nav{font-size:.85rem}
.eyebrow, .section-number{font-size:.85rem}
.current-hop-note{font-size:.85rem}
.hop-jump{font-size:.85rem}
.card-facts dt{font-size:.85rem}
.unrevealed-stamp{font-size:.85rem}
.card-frame figcaption{font-size:.85rem}
.onchain-card strong{font-size:.85rem}
.onchain-card em{font-size:.85rem}
.quickstart-guide{font-size:.85rem}
.quickstart-grid span{font-size:.85rem}
.hop-steps li > span{font-size:.85rem}
.hop-rules p{font-size:.85rem}
.exchange-copy dt{font-size:.85rem}
.exchange-copy dd{font-size:.85rem}
.exchange-deep-link{font-size:.85rem}
.definition-story-link{font-size:.85rem}
.definition-section aside span{font-size:.85rem}
.rights-grid article > span{font-size:.85rem}
.rights-note{font-size:.85rem}
.fulfilment-banner span{font-size:.85rem}
.atc-footer span{font-size:.85rem}
.footer-links{font-size:.85rem}
.orbit-copy{font-size:.85rem}
.ca-chip-value,.token-address .ca-chip-value,.footer-contract .ca-chip-value{font-size:.78rem}

/* Readability floor: keep functional labels above 12px. */
.eyebrow,.section-number,.hop-jump,.card-facts dt,.card-frame figcaption,.onchain-card em,.exchange-copy dt,.quickstart-grid span,.hop-steps li>span,.atc-nav{font-size:.8rem}
@media(max-width:780px){.atc-nav{font-size:.75rem}}
.exchange-deep-link,.definition-story-link{font-size:.8rem}