/* "POP PRINT" — the site look (owner's pick, 2026-10-08)
   A silkscreen poster you can buy from. Warm paper, flat colour blocks, hard edges,
   sticker badges with offset shadows. Loud, but the print still sits in a clean white plate. */

:root {
  --pink: #FF2E93;
  --acid: #D7FF3A;
  --blue: #1E5BFF;
  --cyan: #22D3EE;
  --ink: #11131A;
  --paper: #F6F1E7;
  --paper-2: #FFFFFF;
  --dim: #5C6072;
  --line: #11131A;
  --shadow: 5px 5px 0 var(--ink);
}

body {
  background: var(--paper);
  color: var(--ink);
  background-image:
    radial-gradient(60% 40% at 92% 2%, rgba(255, 46, 147, .14), transparent 60%),
    radial-gradient(50% 36% at 4% 30%, rgba(30, 91, 255, .10), transparent 60%),
    radial-gradient(55% 35% at 70% 98%, rgba(215, 255, 58, .22), transparent 60%);
  background-attachment: fixed;
}
::selection { background: var(--acid); color: var(--ink); }
a { color: var(--blue); }

/* the route line is printed, not lit: flat ink with a pink overprint */
.spine-track { stroke: var(--ink); }
.spine-line { stroke: var(--pink); }
.spine-stop { fill: var(--paper); stroke: var(--ink); }
.spine-stop.lit { fill: var(--acid); stroke: var(--ink); }
.spine-pulse { fill: none; stroke: var(--pink); transition: opacity .4s; }

.ring, .ring-dot, .tap { color: var(--blue); }

.site-head { background: var(--paper); border-bottom: 3px solid var(--ink); }
.nav a { color: var(--ink); }
.nav a::after { background: var(--pink); height: 3px; }

.eyebrow { color: var(--pink); }
.kicker { color: var(--blue); }
h1 { color: var(--ink); }
.hero h1 { -webkit-text-stroke: 0; }
h2 { color: var(--ink); }
.lede { color: #2B2F3D; }
p { color: #3A3F50; }

/* flat white plate with a hard offset block behind it: silkscreen registration */
.plate {
  background: var(--paper-2);
  border: 3px solid var(--ink);
  box-shadow: 14px 14px 0 var(--pink);
}
figcaption { color: var(--dim); }

.btn {
  background: var(--ink); color: var(--paper);
  border: 3px solid var(--ink); box-shadow: var(--shadow);
}
.btn:hover:not(:disabled) { background: var(--pink); color: #fff; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost { background: var(--acid); color: var(--ink); }
.btn.ghost:hover:not(:disabled) { background: var(--blue); color: #fff; }

.piece-card { background: var(--paper-2); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.piece-card .thumb { background: var(--cyan); }
.piece-card .meta { border-left: 3px solid var(--ink); }
@media (max-width: 899px) { .piece-card .meta { border-left: 0; border-top: 3px solid var(--ink); } }
.piece-card:hover h3 { color: var(--pink); }
.price-line { color: var(--ink); }

/* sticker badge: rotated, hard border, offset shadow */
.badge {
  background: var(--acid); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg); border-radius: 999px; padding: .4rem 1rem;
}
.badge.pink { background: var(--pink); color: #fff; transform: rotate(2deg); }

.numbers > div { border-top: 4px solid var(--ink); }
.numbers b { color: var(--ink); }
.numbers .tick { color: var(--pink); }
.numbers > div > span { color: var(--dim); }
.stats-src { color: var(--dim); }

.steps li::before { background: var(--acid); color: var(--ink); box-shadow: 0 0 0 3px var(--ink); }
ul.plain li { border-bottom: 2px dotted rgba(17, 19, 26, .3); }

.tiers th { color: var(--dim); border-bottom: 3px solid var(--ink); }
.tiers td { border-bottom: 1px solid rgba(17, 19, 26, .2); }
.tiers tr.current td { background: var(--acid); font-weight: 600; }
.tiers tr.current td:first-child::after { color: var(--pink); }
.size-head .counter { color: var(--pink); }

.reserve { background: var(--paper-2); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--blue); }
.reserve .sub { color: var(--pink); }
.field > label { color: var(--dim); }
.opt { background: var(--paper); border: 2px solid var(--ink); }
.opt:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.opt:has(input:checked) { background: var(--acid); box-shadow: 3px 3px 0 var(--ink); }
.opt input { accent-color: var(--pink); }
.totals { border-top: 3px solid var(--ink); }
.totals .row.big .v { color: var(--pink); }
.totals small, .btn-note { color: var(--dim); }
.err { background: #FFE3F0; border: 2px solid var(--pink); color: #8E0046; }
.fineprint { border-top: 3px solid var(--ink); color: var(--dim); }

.prose h2 { color: var(--blue); }
.status .big { color: var(--pink); }

.site-foot { border-top: 4px solid var(--ink); }
.site-foot p { color: var(--dim); }
.site-foot a { color: var(--blue); }
.credit, .legal { color: var(--dim); }