/* Misprint's own layer over site.css (DESIGN.md, "Off Register"): the print stage across the top of the home page, the
   two-column fold under it, the misprinted headline, the slipped plate in every address pair, and pink kept for one
   meaning. site.css stays identical to Evil Twin's, so its fixes copy straight across. */

/* ---------- pink means off register; positive states print in ink ---------- */
.notice.acc { border-color: var(--line-2); background: var(--surf-2); }
.notice.acc > .ico { color: var(--ink); }
.tag.warn { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.tool .ic { background: var(--surf-2); border: 1px solid var(--line); color: var(--ink); }
.rules .k { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.faq summary::after { color: var(--mute); }
.pair-foot b { color: var(--acc); }
/* one solid pink block per screen: the header's coin button is outlined, the page's own action stays solid */
.top .btn.solid.get { background: transparent; border-color: var(--line-2); color: var(--ink); }
.top .btn.solid.get:hover { border-color: var(--mute); filter: none; }

/* the misprint as type: an ink plate on register, the pink plate slipped under it */
.misprinted, .hero h1 .acc, .nf h1 { color: var(--ink); text-shadow: var(--slip-x) var(--slip-y) 0 var(--acc); }
.step .n { color: var(--ink); text-shadow: -1px 3px 0 var(--acc); }

/* ---------- home: the print stage over a two-column fold ---------- */
.hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
.hero > .stage { order: -1; }
.hero > div:not(.stage) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 72px; padding-top: 52px; align-items: start; }
.hero > div:not(.stage) > .kicker { grid-column: 1; grid-row: 1; justify-self: start; }
.hero > div:not(.stage) > h1 { grid-column: 1; grid-row: 2 / span 5; margin: 26px 0 0; font-size: clamp(42px, 6.2vw, 84px); line-height: .98; }
.hero h1 .acc { display: block; }
.hero > div:not(.stage) > .lead { grid-column: 2; grid-row: 1 / span 2; max-width: none; font-size: 18px; }
.hero > div:not(.stage) > .askbox { grid-column: 2; grid-row: 3; margin-top: 24px; max-width: none; }
.hero > div:not(.stage) > .alt { grid-column: 2; grid-row: 4; }
.hero > div:not(.stage) > .stats { grid-column: 2; grid-row: 5; max-width: none; margin-top: 30px; }

/* the stage: registration marks, the colour key, the two plates */
.stage { position: relative; padding: 30px 0 22px; border-bottom: 1px solid var(--line); }
.stage .reg { position: absolute; top: 30px; left: 0; width: 24px; height: 24px;
  background: linear-gradient(var(--mute), var(--mute)) center / 1px 100% no-repeat, linear-gradient(var(--mute), var(--mute)) center / 100% 1px no-repeat; }
.stage .reg::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--mute); border-radius: 50%; }
.stage .reg.pink { left: auto; right: 0; background: linear-gradient(var(--acc), var(--acc)) center / 1px 100% no-repeat, linear-gradient(var(--acc), var(--acc)) center / 100% 1px no-repeat; }
.stage .reg.pink::before { border-color: var(--acc); }
.stage .key { display: flex; flex-wrap: wrap; gap: 6px 30px; align-items: center; min-height: 24px; padding: 0 48px; font-size: 14px; color: var(--mute); }
.stage .key b { color: var(--ink); font-weight: 500; }
.stage .key i { display: inline-block; width: 22px; height: 3px; margin-right: 10px; vertical-align: middle; background: var(--ink); }
.stage .key i.p { background: var(--acc); }
.plates { position: relative; margin-top: 30px; height: 4.7em; font-family: var(--mono); font-size: min(72px, calc((100vw - 48px) * 0.068)); line-height: 2.2; letter-spacing: -0.02em; }
.plate { position: absolute; left: 0; top: 0; white-space: nowrap; }
.plate .line { display: block; }
.plate.p1 { color: var(--ink); }
.plate.p2 { color: var(--acc); mix-blend-mode: screen; }
/* the one motion moment: the pink plate slides off register once, when the stage first shows */
.plate.p2 .m { display: inline-block; transform: translateY(0.84em); animation: slip .8s cubic-bezier(.2, .8, .2, 1) .45s both; }
@keyframes slip { from { transform: translateY(0); } to { transform: translateY(0.84em); } }
@media (prefers-reduced-motion: reduce) { .plate.p2 .m { animation: none; } }
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; font-size: 14px; color: var(--mute); }
.verdict-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--acc); color: var(--on-acc); font-size: 12px; font-weight: 600; }
.stage-foot .real-note { display: block; margin: 0 0 0 auto; font-size: 13px; }
.stage-foot .real-note a { color: var(--ink); }

/* ---------- every real/misprint pair: the misprint's middle slips down in pink ---------- */
.pair.plated .row.twin .m { position: relative; top: 0.2em; }
.pair.plated .row.twin .who-l { color: var(--acc); }

.nav a { white-space: nowrap; }
/* the header needs more room than Evil Twin's (collapses at 1100 px, not 1020), and the fold more again: below
   1220 px its right column can't show the whole "Paste your Solana wallet address" */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .top .right .get, .top .right .ca-chip { display: none; }
}
@media (max-width: 1220px) {
  .hero > div:not(.stage) { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .hero > div:not(.stage) > :is(.kicker, h1, .lead, .askbox, .alt, .stats) { grid-column: 1; grid-row: auto; }
  .hero > div:not(.stage) > h1 { grid-row: auto; margin: 22px 0 20px; }
  .hero > div:not(.stage) > .askbox { margin-top: 24px; }
}
@media (max-width: 720px) {
  .stage { padding-top: 22px; }
  .stage .reg { top: 22px; width: 18px; height: 18px; }
  .stage .reg::before { inset: 4px; }
  .stage .key { padding: 0 30px; font-size: 13px; gap: 4px 18px; }
  .plates { margin-top: 22px; }
  .stage-foot .real-note { margin-left: 0; }
}
@media (max-width: 360px) {
  .askbox input { font-size: 13px; padding: 0 8px; }
}
@media (max-width: 300px) {
  .askbox input { font-size: 12px; letter-spacing: -0.02em; }
}