/* Encore (Page Lemon app template): The Lowland Hum fan club.
   Art direction 2026-10-25 (docs/templates/app-art-direction-2026-10-23.md, family B): a riso-printed zine.
   Paper, Ink Violet, Fluoro Pink and Riso Teal overprinting with a little misregistration, Riso Yellow for stickers.
   Bungee for poster type, Karla for text. The vault is a crate of 7-inch sleeves whose records slide out; the member
   card is a laminated riso pass; questions are cut-out clippings; forms are coupons. Dark mode is the zine under UV.
   kit.css (never edited here) gives behaviour, layout and accessibility; every colour, font and surface is set here. */
:root {
  --z-paper: #F5F1E8;
  --z-sheet: #FFFCF4;
  --z-ink: #3B2A6B;
  --z-deep: #2A1D4F;
  --z-pink: #FF48B0;
  --z-pink-soft: #FFD6EC;
  --z-teal: #00737A;
  --z-yellow: #FFE800;
  --z-ground: var(--z-paper);
  --z-text: var(--z-ink);
  --z-muted: #5A4D82;
  --z-accent: #00737A;
  --z-line: rgba(59, 42, 107, .22);
  --z-tape: rgba(255, 232, 0, .62);
  --z-shadow-ink: var(--z-pink);
  --z-display: "Bungee", "Arial Black", Impact, sans-serif;
  --z-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --z-dots: radial-gradient(circle, rgba(42, 29, 79, .16) 1.3px, transparent 1.8px);

  --k-brand: var(--z-teal);
  --k-brand-ink: #ffffff;
  --k-brand-soft: #D6ECEA;
  --k-hero: var(--z-deep);
  --k-hero-ink: var(--z-paper);
  --k-gold: var(--z-yellow);
  --k-bg: var(--z-ground);
  --k-surface: var(--z-sheet);
  --k-surface-2: #EEE7D8;
  --k-line: var(--z-line);
  --k-line-strong: rgba(59, 42, 107, .45);
  --k-text: var(--z-text);
  --k-muted: var(--z-muted);
  --k-faint: var(--z-muted);
  --k-ok: #0B6A4C;
  --k-ok-soft: #D8EFE3;
  --k-warn: #7A4300;
  --k-warn-soft: #FFF6A8;
  --k-info: var(--z-deep);
  --k-info-soft: var(--z-pink-soft);
  --k-danger: #B0195F;
  --k-font: var(--z-body);
  --k-font-display: var(--z-display);
  --k-r-s: 2px; --k-r-m: 3px; --k-r-l: 4px; --k-r-xl: 6px;
  --k-shadow-1: none;
  --k-shadow-2: none;
  --k-shadow-3: 0 18px 40px rgba(42, 29, 79, .25);
  --k-max: 1240px;
  --z-night: #170E2E; --z-night-deep: #0E081F; --z-neon: #3FE0CF; --z-white: #fff; --z-footer-ink: #EDE4FF; --z-sheet-light: #FFFCF4; --z-teal-deep: #0B3B4A;
  --z-spread-muted: #5A4D82;
}
@media (prefers-color-scheme: dark) {
  :root {
    --z-ground: #170E2E;
    --z-sheet: #22153F;
    --z-text: #F6EEFF;
    --z-muted: #CDBCF0;
    --z-pink: #FF5CBA;
    --z-pink-soft: rgba(255, 92, 186, .2);
    --z-accent: #3FE0CF;
    --z-line: rgba(246, 238, 255, .2);
    --z-tape: rgba(255, 232, 0, .85);
    --z-shadow-ink: #3FE0CF;
    --z-dots: radial-gradient(circle, rgba(255, 92, 186, .2) 1.3px, transparent 1.8px);
    --k-brand: #3FE0CF;
    --k-brand-ink: #170E2E;
    --k-brand-soft: rgba(63, 224, 207, .14);
    --k-surface-2: #2C1D52;
    --k-line-strong: rgba(246, 238, 255, .4);
    --k-ok: #6BE3A8; --k-ok-soft: rgba(107, 227, 168, .14);
    --k-warn: #FFE800; --k-warn-soft: rgba(255, 232, 0, .14);
    --k-info: #FF8FCF; --k-info-soft: rgba(255, 92, 186, .18);
    --k-danger: #FF8FCF;
    --k-hero-ink: var(--z-paper);
  }
}

/* ---------- base ---------- */
body.k-app { background: var(--z-ground); color: var(--z-text); font-family: var(--z-body); }
.k-app h1, .k-app h2, .k-app h3, .z-display { font-family: var(--z-display); font-weight: 400; letter-spacing: 0; line-height: 1; }
.k-app :focus-visible { outline: 3px solid var(--z-deep); outline-offset: 3px; box-shadow: 0 0 0 6px var(--z-yellow); }
@media (prefers-color-scheme: dark) { .k-app :focus-visible { outline-color: var(--z-yellow); box-shadow: none; } }
.k-app ::selection { background: var(--z-yellow); color: var(--z-deep); }
.k-app a { color: inherit; }
.z-kick { font: 800 .8125rem/1.3 var(--z-body); text-transform: uppercase; letter-spacing: .12em; color: var(--z-accent); }
.z-stub .z-kick { color: var(--z-yellow); }
.z-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: ink-stamped rectangles with a misregistered pink offset */
body.k-app .k-btn { border-radius: 2px; background: var(--z-deep); color: var(--z-paper); font: 800 .9375rem/1.1 var(--z-body); text-transform: uppercase; letter-spacing: .07em; box-shadow: 4px 4px 0 var(--z-pink); transition: transform .12s ease, box-shadow .12s ease; text-align: center; }
body.k-app .k-btn:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--z-pink); }
body.k-app .k-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--z-pink); }
body.k-app .k-btn-2 { background: var(--z-pink); color: var(--z-deep); box-shadow: 4px 4px 0 var(--z-teal); }
body.k-app .k-btn-2:hover { box-shadow: 5px 5px 0 var(--z-teal); }
body.k-app .k-btn-line { background: transparent; color: var(--z-text); box-shadow: inset 0 0 0 2px currentColor; }
body.k-app .k-btn-line:hover { box-shadow: inset 0 0 0 2px currentColor, 4px 4px 0 var(--z-pink); }
body.k-app .k-btn-lg { min-height: 56px; padding: 0 26px; font-size: 1rem; }
@media (prefers-color-scheme: dark) {
  body.k-app .k-btn { background: var(--z-pink); color: var(--z-night); box-shadow: 4px 4px 0 var(--z-neon); }
  body.k-app .k-btn:hover { box-shadow: 5px 5px 0 var(--z-neon); }
  body.k-app .k-btn-2 { background: var(--z-neon); color: var(--z-night); box-shadow: 4px 4px 0 var(--z-pink); }
  body.k-app .k-btn-line { background: transparent; color: var(--z-text); box-shadow: inset 0 0 0 2px currentColor; }
}

/* Tape and staples (the zine's paste-up) */
.z-tape { position: relative; }
.z-tape::before { content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: var(--z-tape); transform: rotate(-3deg); pointer-events: none; }
.z-staples { position: relative; }
.z-staples::before, .z-staples::after { content: ""; position: absolute; z-index: 3; left: 50%; width: 5px; height: 30px; margin-left: -2.5px; border-radius: 2px; background: linear-gradient(90deg, #8C8A93, #E4E2E8 45%, #77757F); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.z-staples::before { top: 22%; }
.z-staples::after { bottom: 22%; }

/* ---------- the 7-inch sleeve (vault signature) ---------- */
.z-sleeve { position: relative; min-width: 0; }
.z-sleeve-art { position: relative; aspect-ratio: 1 / .8; container-type: inline-size; }
.z-disc { position: absolute; z-index: 0; top: 1.5%; left: 0; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--z-paper) 0 2.6%, var(--z-deep) 3% 3.6%, var(--z-pink) 4% 30%, #120B24 31% 33%, transparent 33.5%), repeating-radial-gradient(circle, #1B1233 0 2px, #2E2350 2px 3.4px); box-shadow: 0 2px 8px rgba(18, 11, 36, .35); transform: translateX(13%) rotate(0deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.z-c-teal .z-disc { background: radial-gradient(circle, var(--z-paper) 0 2.6%, var(--z-deep) 3% 3.6%, #18B3B0 4% 30%, #120B24 31% 33%, transparent 33.5%), repeating-radial-gradient(circle, #1B1233 0 2px, #2E2350 2px 3.4px); }
.z-c-yellow .z-disc { background: radial-gradient(circle, var(--z-paper) 0 2.6%, var(--z-deep) 3% 3.6%, var(--z-yellow) 4% 30%, #120B24 31% 33%, transparent 33.5%), repeating-radial-gradient(circle, #1B1233 0 2px, #2E2350 2px 3.4px); }
.z-sleeve:hover .z-disc, .z-sleeve:focus-within .z-disc, .z-sleeve.is-open .z-disc { transform: translateX(31%) rotate(160deg); }
.z-cover { position: relative; z-index: 1; width: 76%; aspect-ratio: 1; margin: 0; overflow: hidden; background: var(--z-paper); box-shadow: 0 0 0 1px rgba(42, 29, 79, .2), 3px 4px 0 rgba(42, 29, 79, .18); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.z-sleeve:hover .z-cover, .z-sleeve:focus-within .z-cover { transform: translateX(-3%) rotate(-1.2deg); }
.z-cover img { width: 100%; height: 100%; object-fit: cover; }
.z-cover-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 7% 7% 6%; font: 400 7.4cqi/.95 var(--z-display); color: var(--z-paper); background: var(--z-deep); text-shadow: .05em .04em 0 var(--z-pink); }
.z-cover-n { position: absolute; top: 6%; left: 7%; z-index: 2; font: 800 .6875rem/1 var(--z-body); letter-spacing: .14em; text-transform: uppercase; color: var(--z-deep); background: var(--z-paper); padding: 4px 6px; }
/* Type-only covers: collage shapes in two inks */
.z-type { display: grid; align-content: end; padding: 9%; color: var(--z-deep); background: var(--z-pink); }
.z-type::before, .z-type::after { content: ""; position: absolute; mix-blend-mode: multiply; }
.z-type .z-cover-big { position: relative; z-index: 1; font: 400 10.5cqi/.9 var(--z-display); overflow-wrap: anywhere; background: var(--z-paper); color: var(--z-deep); text-shadow: none; padding: .1em; }
.z-v1::before { width: 70%; aspect-ratio: 1; top: -12%; right: -18%; border-radius: 50%; background: var(--z-teal); }
.z-v1::after { inset: 0; background-image: radial-gradient(circle, rgba(42, 29, 79, .35) 1.6px, transparent 2.1px); background-size: 9px 9px; }
.z-v2 { background: var(--z-teal); color: var(--z-white); }
.z-v2 .z-cover-big { text-shadow: .045em .04em 0 var(--z-pink); }
.z-v2::before { width: 46%; height: 130%; top: -15%; left: 18%; background: var(--z-pink); transform: rotate(14deg); clip-path: polygon(8% 0, 100% 3%, 92% 100%, 0 96%); }
.z-v2::after { width: 30%; aspect-ratio: 1; bottom: 12%; right: 10%; border-radius: 50%; background: var(--z-pink); mix-blend-mode: normal; }
.z-v3 { background: var(--z-yellow); }
.z-v3::before { width: 64%; aspect-ratio: 1; top: 8%; left: -10%; border-radius: 50%; background: var(--z-pink); }
.z-v3::after { width: 56%; height: 34%; top: 20%; right: -6%; background: var(--z-teal); clip-path: polygon(0 12%, 100% 0, 94% 88%, 6% 100%); }
.z-sleeve-body { margin-top: 12px; }
.z-sleeve-body h3 { font-size: 1.375rem; line-height: 1.02; margin-top: 4px; }
.z-sleeve-body .z-kick { font-size: .75rem; }
.z-note { margin-top: 6px; color: var(--z-muted); font-size: .9375rem; line-height: 1.45; max-width: 40ch; }
.z-new { display: inline-block; padding: 2px 6px; background: var(--z-yellow); color: var(--z-deep); letter-spacing: .1em; }
.z-play { position: absolute; z-index: 2; left: calc(76% - 62px); top: 10px; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--z-yellow); color: var(--z-deep); box-shadow: 3px 3px 0 var(--z-deep); text-decoration: none; }
.z-play .k-i { width: 22px; height: 22px; fill: currentColor; }
.z-play:hover { transform: scale(1.06); }
.k-app a.z-play { color: var(--z-deep); }
.z-lockchip { position: absolute; z-index: 2; left: 8px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; background: var(--z-yellow); color: var(--z-deep); font: 800 .6875rem/1 var(--z-body); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--z-deep); }
.z-lockchip .k-i { width: 14px; height: 14px; }
.is-locked .z-disc { display: none; }
.is-locked.z-sleeve:hover .z-cover, .is-locked.z-sleeve:focus-within .z-cover { transform: none; }

/* The crate: sleeves in a grid on desktop, rows on phones */
.z-crate { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 36px 28px; }
@media (max-width: 639px) {
  .z-crate { gap: 22px; }
  .z-crate .z-sleeve { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: start; }
  .z-crate .z-sleeve-body { margin-top: 0; }
  .z-crate .z-sleeve-body h3 { font-size: 1.125rem; }
  .z-crate .z-play { width: 40px; height: 40px; left: calc(76% - 46px); top: 6px; }
  .z-crate .z-cover-n { display: none; }
  .z-crate .z-note { font-size: .875rem; }
}
@media (max-width: 639px) { .z-crate .z-sleeve { grid-template-columns: minmax(0, 1fr); } .z-sleeve-body { min-width: 0; overflow-wrap: anywhere; } }

/* ---------- the laminated member pass ---------- */
.z-pass { position: relative; overflow: hidden; padding: 28px 24px 24px; border-radius: 14px; background-color: var(--z-pink); background-image: none; color: var(--z-deep); box-shadow: inset 7px 6px 0 var(--z-teal), 0 0 0 1px rgba(42, 29, 79, .25), 6px 7px 0 rgba(42, 29, 79, .85); }
.z-pass::before { content: ""; position: absolute; top: 12px; left: 50%; width: 46px; height: 12px; margin-left: -23px; border-radius: 8px; background: var(--z-ground); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.z-pass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .18)); pointer-events: none; }
.z-pass > * { position: relative; z-index: 1; }
.z-pass-top { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; font: 800 .75rem/1.2 var(--z-body); text-transform: uppercase; letter-spacing: .14em; }
.z-pass-name { margin-top: 18px; font: 400 clamp(2.4rem, 1.4rem + 4vw, 4rem)/.9 var(--z-display); text-shadow: .045em .04em 0 var(--z-paper); overflow-wrap: anywhere; }
.z-pass-plan { display: inline-block; margin-top: 12px; padding: 6px 10px; background: var(--z-deep); color: var(--z-paper); font: 800 .8125rem/1 var(--z-body); text-transform: uppercase; letter-spacing: .12em; }
.z-pass-note { margin-top: 12px; max-width: 34ch; font-weight: 700; font-size: .9375rem; line-height: 1.4; }
.z-pass-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.z-pass-no { font: 800 .75rem/1 var(--z-body); letter-spacing: .14em; text-transform: uppercase; }
body.k-app .z-pass .k-btn { box-shadow: 4px 4px 0 var(--z-paper); }
@media (prefers-color-scheme: dark) {
  .z-pass { color: var(--z-night); box-shadow: inset 7px 6px 0 var(--z-teal), 0 0 0 1px rgba(255, 92, 186, .6), 0 0 36px rgba(255, 92, 186, .45); }
  body.k-app .z-pass .k-btn { background: var(--z-night); color: var(--z-paper); box-shadow: 4px 4px 0 var(--z-neon); }
  .z-pass-plan { background: var(--z-night); }
}
/* The pass's stamp dots: three show stamps and the signed poster */
.z-pass .k-dots { margin-top: 18px; gap: 10px; }
.z-pass .k-dots { max-width: 230px; }
.z-pass .k-dots li { border: 0; background: rgba(255, 252, 244, .55); box-shadow: inset 0 0 0 2px var(--z-deep); border-radius: 50%; }
.z-pass .k-dots li.on { border: 0; background: var(--z-deep); }
.z-pass .k-dots li.on::before { background: var(--z-yellow); }
.z-pass .k-dots li.k-free { border: 0; background: var(--z-yellow); box-shadow: inset 0 0 0 2px var(--z-deep); }
.z-pass .k-scan [data-pl-scan-show] { background: var(--z-deep); color: var(--z-paper); border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font: 800 1rem/1 var(--z-body); box-shadow: 4px 4px 0 var(--z-paper); }
.z-pass.k-scan [data-pl-scan-show], .z-pass .k-scan-light [data-pl-scan-show] { background: var(--z-deep); color: var(--z-paper); }
.z-pass [data-pl-scan-demo] { border-radius: 2px; }
.z-pass [data-pl-scan-code]:not([hidden]) { border-radius: 4px; background: var(--z-sheet); color: var(--z-deep); box-shadow: 0 0 0 3px var(--z-deep); }
.z-pass [data-pl-wallet] button { border-radius: 0; font-family: var(--z-body); background: var(--z-sheet); color: var(--z-ink); border: 2px solid var(--z-ink); box-shadow: 3px 3px 0 var(--z-deep); }
.z-pass .z-pass-note { width: fit-content; max-width: 100%; padding: 6px 10px; background: var(--z-sheet); color: var(--z-deep); box-shadow: 2px 2px 0 var(--z-deep); }
@media (prefers-color-scheme: dark) { .z-pass .z-pass-note { color: var(--z-text); } }
@media (prefers-color-scheme: dark) { .z-pass .k-scan [data-pl-scan-show], .z-pass.k-scan [data-pl-scan-show] { background: var(--z-night); box-shadow: 4px 4px 0 var(--z-neon); } .z-pass [data-pl-wallet] button { background: var(--z-sheet-light); color: var(--z-deep); border-color: var(--z-deep); } .z-pass [data-pl-scan-code]:not([hidden]) { background: var(--z-sheet-light); color: var(--z-deep); } }

/* ---------- the ticket stub (next gig) ---------- */
.z-stub { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--z-teal); color: var(--z-white); box-shadow: 5px 6px 0 var(--z-deep); }
.z-stub-main { position: relative; padding: 22px 22px 20px; background-image: radial-gradient(circle, rgba(255, 72, 176, .45) 1.6px, transparent 2.1px); background-size: 10px 10px; background-position: 0 0; }
.z-stub-date { font: 400 clamp(2.6rem, 1.6rem + 3.4vw, 4rem)/.88 var(--z-display); text-shadow: .05em .04em 0 var(--z-pink); }
.z-stub-venue { margin-top: 10px; font: 400 1.25rem/1.05 var(--z-display); }
.z-stub-meta { margin-top: 6px; font-weight: 700; font-size: .9375rem; }
body.k-app .z-stub .k-btn { margin-top: 16px; background: var(--z-paper); color: var(--z-deep); box-shadow: 4px 4px 0 var(--z-pink); }
.z-stub-tear > div { display: grid; justify-items: center; gap: 8px; }
.z-stub-tear { position: relative; display: grid; align-content: center; justify-items: center; gap: 8px; width: 150px; padding: 18px 12px; background: var(--z-yellow); color: var(--z-deep); text-align: center; border-left: 3px dashed var(--z-deep); }
.z-stub-tear::before, .z-stub-tear::after { content: ""; position: absolute; left: -13px; width: 22px; height: 22px; border-radius: 50%; background: var(--z-ground); }
.z-stub-tear::before { top: -11px; }
.z-stub-tear::after { bottom: -11px; }
.z-stub-tear small { font: 800 .6875rem/1.2 var(--z-body); letter-spacing: .12em; text-transform: uppercase; }
.z-code { font: 400 1rem/1 var(--z-display); letter-spacing: .02em; }
.z-stub-tear a { font-weight: 800; font-size: .8125rem; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.z-stub-tear .k-i { width: 26px; height: 26px; }
@media (max-width: 420px) { .z-stub-tear { width: 116px; } .z-code { font-size: .8125rem; } }
@media (max-width: 420px) { .z-stub { grid-template-columns: minmax(0, 1fr); } .z-stub-main { min-width: 0; overflow-wrap: anywhere; } .z-stub-tear { width: 100%; border-left: 0; border-top: 3px dashed var(--z-deep); } }
@media (prefers-color-scheme: dark) { .z-stub { box-shadow: 0 0 0 1px rgba(63, 224, 207, .5), 0 0 30px rgba(63, 224, 207, .3); } body.k-app .z-stub .k-btn { background: var(--z-paper); color: var(--z-deep); } }

/* ---------- clippings (questions and answers) ---------- */
.z-cuts { display: grid; gap: 22px; filter: drop-shadow(3px 4px 0 rgba(42, 29, 79, .16)); }
.z-cut { position: relative; display: block; padding: 22px 20px 18px; background: var(--z-sheet); color: var(--z-text); clip-path: polygon(0 3%, 4% 0, 37% 2%, 62% 0, 97% 1.5%, 100% 6%, 99% 46%, 100% 94%, 96% 100%, 58% 98.5%, 31% 100%, 2% 98%, 0 60%); transform: rotate(-.6deg); }
.z-cut:nth-child(even) { transform: rotate(.5deg); }
.z-cut-wrap { position: relative; }
.z-cut-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.z-cut .k-badge { border-radius: 2px; font: 800 .6875rem/1 var(--z-body); text-transform: uppercase; letter-spacing: .1em; padding: 6px 8px; background: var(--z-pink-soft); color: var(--z-text); }
.z-cut .k-badge-state { background: var(--k-surface-2); }
.z-q { display: block; margin-top: 10px; font: 400 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.15 var(--z-display); }
.z-when { display: block; margin-top: 8px; color: var(--z-muted); font-size: .8125rem; font-weight: 700; }
.z-cut q.z-a, .z-cut .z-a { display: block; margin-top: 12px; padding: 12px 14px; background: var(--z-teal); color: var(--z-white); font-weight: 700; font-size: .9375rem; line-height: 1.45; quotes: none; transform: rotate(.4deg); }
.z-cut q.z-a:empty { display: none; }
.z-cut q.z-a::before { content: "The band: "; font-weight: 800; letter-spacing: .02em; }
.z-cut-answered .z-a::before { content: none; }
@media (prefers-color-scheme: dark) { .z-cuts { filter: drop-shadow(0 0 8px rgba(255, 92, 186, .3)); } .z-cut .k-badge { color: var(--z-text); } }

/* ---------- coupon (forms and sign-in) ---------- */
.z-coupon { position: relative; padding: 30px 24px 24px; background: var(--z-sheet); border: 3px dashed var(--z-text); }
.z-coupon-cut { position: absolute; top: -17px; left: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--z-ground); color: var(--z-text); font: 800 .75rem/32px var(--z-body); letter-spacing: .14em; text-transform: uppercase; }
.z-coupon-cut .k-i { width: 22px; height: 22px; transform: rotate(-90deg); }
.z-coupon h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); text-shadow: .04em .035em 0 var(--z-pink); }
.z-coupon .k-help { color: var(--z-muted); margin-top: 8px; }
.k-app .k-field label { font: 800 .75rem/1.2 var(--z-body); text-transform: uppercase; letter-spacing: .12em; color: var(--z-text); }
.k-app .k-field input, .k-app .k-field select, .k-app .k-field textarea { border-radius: 2px; border: 0; border-bottom: 3px solid var(--z-text); background: color-mix(in srgb, var(--z-pink) 8%, var(--z-sheet)); box-shadow: none; color: var(--z-text); font-family: var(--z-body); font-size: 1.0625rem; }
.k-app .k-field textarea { background-image: repeating-linear-gradient(transparent 0 31px, var(--z-line) 31px 32px); line-height: 32px; padding-top: 0; }
.k-app .k-field input:focus, .k-app .k-field select:focus, .k-app .k-field textarea:focus { border-bottom-color: var(--z-pink); }
.z-prio { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 10px; background: var(--z-yellow); color: var(--z-deep); font-weight: 800; font-size: .875rem; }
.z-prio .k-i { width: 16px; height: 16px; }

/* ---------- stickers (plans) ---------- */
.z-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 28px; }
@media (min-width: 860px) { .z-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.z-plan { position: relative; display: flex; flex-direction: column; padding: 30px 24px 24px; background: var(--z-sheet); color: var(--z-text); box-shadow: 0 0 0 2px var(--z-text); }
.z-plan:nth-child(2) { transform: rotate(-.8deg); }
.z-plan:nth-child(3) { transform: rotate(.6deg); }
.z-plan h3 { font-size: 1.75rem; padding-right: 104px; }
.z-plan ul { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 10px; font-size: 1rem; line-height: 1.4; }
.z-plan li { position: relative; padding-left: 22px; }
.z-plan li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; background: var(--z-pink); box-shadow: 2px 2px 0 var(--z-teal); }
.z-plan .k-btn { margin-top: auto; width: 100%; }
.z-plan-flag { position: absolute; top: -14px; left: 18px; padding: 6px 10px; background: var(--z-deep); color: var(--z-paper); font: 800 .6875rem/1 var(--z-body); letter-spacing: .14em; text-transform: uppercase; }
.z-sticker { position: absolute; top: -26px; right: -14px; display: grid; place-content: center; width: 112px; height: 112px; border-radius: 50%; text-align: center; background: var(--z-yellow); color: var(--z-deep); transform: rotate(9deg); box-shadow: 3px 3px 0 var(--z-deep); }
.z-sticker b { display: block; font: 400 1.75rem/.9 var(--z-display); }
.z-sticker small { display: block; margin-top: 4px; font: 800 .6875rem/1.1 var(--z-body); letter-spacing: .1em; text-transform: uppercase; }
.z-sticker-burst { border-radius: 0; background: var(--z-pink); box-shadow: none; filter: drop-shadow(3px 3px 0 var(--z-deep)); clip-path: polygon(50.0% 0.0%, 56.4% 9.5%, 65.5% 2.4%, 68.6% 13.5%, 79.4% 9.5%, 79.0% 21.0%, 90.5% 20.6%, 86.5% 31.4%, 97.6% 34.5%, 90.5% 43.6%, 100.0% 50.0%, 90.5% 56.4%, 97.6% 65.5%, 86.5% 68.6%, 90.5% 79.4%, 79.0% 79.0%, 79.4% 90.5%, 68.6% 86.5%, 65.5% 97.6%, 56.4% 90.5%, 50.0% 100.0%, 43.6% 90.5%, 34.5% 97.6%, 31.4% 86.5%, 20.6% 90.5%, 21.0% 79.0%, 9.5% 79.4%, 13.5% 68.6%, 2.4% 65.5%, 9.5% 56.4%, 0.0% 50.0%, 9.5% 43.6%, 2.4% 34.5%, 13.5% 31.4%, 9.5% 20.6%, 21.0% 21.0%, 20.6% 9.5%, 31.4% 13.5%, 34.5% 2.4%, 43.6% 9.5%); width: 124px; height: 124px; top: -32px; transform: rotate(-8deg); }
.z-sticker-teal { background: var(--z-teal); color: var(--z-white); }
@media (max-width: 600px) {
  .z-plan, .z-plan:nth-child(2), .z-plan:nth-child(3) { transform: none; }
  .z-sticker { right: -4px; width: 94px; height: 94px; }
  .z-sticker-burst { width: 104px; height: 104px; }
  .z-sticker b { font-size: 1.5rem; }
  .z-plan { padding-top: 100px; }
  .z-plan h3 { padding-right: 0; overflow-wrap: anywhere; }
}
@media (prefers-color-scheme: dark) { .z-plan { box-shadow: 0 0 0 2px var(--z-pink), 0 0 26px rgba(255, 92, 186, .25); } .z-sticker { box-shadow: none; } .z-sticker-burst { color: var(--z-night); filter: none; } }

/* ---------- member app shell: masthead and zine index tabs ---------- */
.z-app .k-top { background: var(--z-ground); border-bottom: 3px solid var(--z-text); backdrop-filter: none; -webkit-backdrop-filter: none; }
.z-app .k-brand { font: 400 1.0625rem/1 var(--z-display); color: var(--z-text); letter-spacing: 0; }
.z-app .k-brand img { border-radius: 4px; }
.z-app .k-top a.k-signin { border-radius: 2px; background: var(--z-deep); color: var(--z-paper); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: .8125rem; box-shadow: 3px 3px 0 var(--z-pink); }
.z-app .k-avatar { background: var(--z-pink); color: var(--z-deep); font-family: var(--z-display); font-weight: 400; box-shadow: 2px 2px 0 var(--z-text); }
@media (prefers-color-scheme: dark) { .z-app .k-top a.k-signin { background: var(--z-pink); color: var(--z-night); box-shadow: 3px 3px 0 var(--z-neon); } .z-app .k-avatar { color: var(--z-night); box-shadow: 0 0 14px rgba(255, 92, 186, .6); } }
.z-app .k-tabs { background: var(--z-deep); border-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.z-app .k-tabs a { color: var(--z-deep); background: var(--z-yellow); font: 400 .8125rem/1 var(--z-display); letter-spacing: .02em; text-transform: none; border-radius: 0; min-height: 44px; transform: rotate(-1.5deg); }
.z-app .k-tabs a:nth-child(even) { transform: rotate(1.5deg); }
.z-app .k-tabs .k-tabs-brand { background: none; transform: none; }
.z-app .k-tabs a[aria-current="page"] { background: var(--z-pink); color: var(--z-deep); box-shadow: 3px 3px 0 var(--z-teal); transform: none; }
@media (prefers-color-scheme: dark) { .z-app .k-tabs { background: var(--z-night-deep); box-shadow: 0 -1px 0 rgba(255, 92, 186, .5); } .z-app .k-tabs a[aria-current="page"] { color: var(--z-night); } }
@media (min-width: 1024px) {
  .z-app[data-k-nav="top"] .k-top { border-bottom: 0; padding-top: 18px; padding-bottom: 10px; }
  .z-app[data-k-nav="top"] .k-top .k-brand { font-size: 1.5rem; }
  .z-app[data-k-nav="top"] .k-top .k-brand img { width: 38px; height: 38px; }
  .z-app[data-k-nav="top"] .k-tabs { gap: 10px; padding-bottom: 14px; background: var(--z-ground); border-bottom: 3px dashed var(--z-text); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .z-app[data-k-nav="top"] .k-tabs a { min-height: 48px; padding: 0 18px; font: 400 1.0625rem/1 var(--z-display); letter-spacing: .01em; text-transform: none; color: var(--z-deep); border-radius: 0; }
  .z-app[data-k-nav="top"] .k-tabs a:hover { color: var(--z-text); background: var(--z-pink-soft); }
  .z-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { background: var(--z-pink); color: var(--z-deep); box-shadow: 4px 4px 0 var(--z-teal); transform: none; }
  .z-app[data-k-nav="top"] .k-main { padding-top: 28px; }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) { .z-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { color: var(--z-night); box-shadow: 4px 4px 0 var(--z-neon); } }

/* Page head: poster type with a misregistered pink layer */
.z-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 8px 0 26px; }
.z-head h1 { margin-top: 6px; font-size: clamp(2rem, 1.1rem + 3.6vw, 4.25rem); line-height: .95; text-shadow: .04em .035em 0 var(--z-pink); max-width: 18ch; }
.z-head-aside { color: var(--z-muted); font-weight: 700; font-size: .9375rem; max-width: 36ch; }
.z-h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.875rem); text-shadow: .04em .035em 0 var(--z-pink); }
.z-sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
.z-sechead a, .z-link { color: var(--z-accent); font-weight: 800; font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.z-sechead p { color: var(--z-muted); font-weight: 700; font-size: .875rem; }
.z-sec + .z-sec { margin-top: 48px; }
.z-cuts + .z-sechead { margin-top: 48px; }

/* Grids for member screens */
.z-grid { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .z-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 44px; align-items: start; }
  .z-7 { grid-column: span 7; } .z-5 { grid-column: span 5; } .z-8 { grid-column: span 8; } .z-4 { grid-column: span 4; } .z-6 { grid-column: span 6; } .z-9 { grid-column: span 9; } .z-3 { grid-column: span 3; } .z-12 { grid-column: 1 / -1; }
  .z-stick { position: sticky; top: 90px; }
}

/* Home */
.z-home-drop .z-sleeve-art { aspect-ratio: 1 / .78; }
@media (min-width: 720px) {
  .z-sleeve-lg { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: center; }
  .z-sleeve-lg .z-sleeve-body { margin-top: 0; }
}
.z-sleeve-lg .z-sleeve-body h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); text-shadow: .04em .035em 0 var(--z-pink); }
.z-sleeve-lg .z-note { font-size: 1rem; }
.z-sleeve-lg .z-play { width: 64px; height: 64px; left: calc(76% - 78px); top: 14px; }
.z-sleeve-lg .z-play .k-i { width: 26px; height: 26px; }
@media (min-width: 1024px) { .z-home-drop .z-sleeve-lg { grid-template-columns: minmax(0, 1fr); } }
.z-sleeve-lg .k-btn-row { margin-top: 18px; }
.z-home-side { display: grid; gap: 34px; }

/* Welcome (signed out): a zine cover */
.z-app .k-welcome { padding-top: 8px; }
.z-app .k-welcome-art { border-radius: 0; box-shadow: 6px 7px 0 var(--z-text); background: var(--z-paper); overflow: visible; transform: rotate(-1.2deg); }
.z-app .k-welcome-art img { display: block; }
.z-app .k-welcome-art::after { content: ""; position: absolute; inset: auto auto -14px 50%; width: 96px; height: 24px; margin-left: -48px; background: var(--z-tape); transform: rotate(3deg); }
.z-app .k-welcome-art figcaption { left: 0; right: auto; bottom: 18px; padding: 8px 12px; background: var(--z-yellow); color: var(--z-deep); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.z-app .k-welcome h1 { font-family: var(--z-display); font-weight: 400; letter-spacing: 0; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.5rem); line-height: .95; text-shadow: .04em .035em 0 var(--z-pink); }
.z-app .k-welcome .k-kicker { font: 800 .8125rem/1.3 var(--z-body); text-transform: uppercase; letter-spacing: .12em; color: var(--z-accent); }
.z-app .k-welcome .k-lead { color: var(--z-text); }
.z-app .k-perks .k-tile { border-radius: 2px; background: var(--z-pink); color: var(--z-deep); box-shadow: 2px 2px 0 var(--z-teal); }
@media (prefers-color-scheme: dark) { .z-app .k-welcome-art { box-shadow: 0 0 0 2px var(--z-pink), 0 0 40px rgba(255, 92, 186, .4); } }

/* Empty states: a blank clipping */
.z-app .k-empty { background: var(--z-sheet); border: 2px dashed var(--z-line); border-radius: 0; color: var(--z-muted); }
.z-app .k-empty .k-empty-art { border-radius: 2px; background: var(--z-pink); color: var(--z-deep); transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--z-teal); }
.z-app .k-empty h3 { font-family: var(--z-display); font-weight: 400; }

/* Cards, tables, lists restyled as zine pages */
.z-page { position: relative; padding: 24px; background: var(--z-sheet); box-shadow: 0 0 0 2px var(--z-text); }
.z-page h2 { font-size: 1.5rem; text-shadow: .04em .035em 0 var(--z-pink); }
.z-page p { margin-top: 10px; line-height: 1.5; }
@media (prefers-color-scheme: dark) { .z-page { box-shadow: 0 0 0 2px rgba(255, 92, 186, .7); } }
.z-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; line-height: 1.45; }
.z-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.z-checks li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; background: var(--z-pink); box-shadow: 3px 3px 0 var(--z-teal); }
.z-app .k-table { border-radius: 0; background: var(--z-sheet); box-shadow: 0 0 0 2px var(--z-text); }
.z-app .k-tr + .k-tr { border-top: 2px dashed var(--z-line); }
.z-app .k-td-main { color: var(--z-text); font-weight: 700; }
.z-app .k-tile-gold { border-radius: 50%; background: var(--z-yellow); color: var(--z-deep); }
.z-app .k-row { border-radius: 0; }
.z-app .k-list { border-radius: 0; background: var(--z-sheet); box-shadow: 0 0 0 2px var(--z-text); }
.z-app .k-list .k-tile { border-radius: 2px; background: var(--z-pink-soft); color: var(--z-text); }
.z-app .k-chev { color: var(--z-text); }
.z-app .k-row-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.z-app .k-card { border-radius: 0; background: var(--z-sheet); box-shadow: 0 0 0 2px var(--z-text); }

/* Account block as zine pages */
.z-app .k-account > p:first-child { border-radius: 0; background: var(--z-sheet); box-shadow: 0 0 0 2px var(--z-text); color: var(--z-muted); }
.z-app .k-account h3 { font-family: var(--z-display); font-weight: 400; font-size: 1.375rem; }
.z-app .k-account form, .z-app .k-account > div, .z-app .k-account > section { border-radius: 0; }
.z-app .k-account .k-btn { border-radius: 0; box-shadow: 3px 3px 0 var(--z-pink); }
.z-app .k-account .k-btn-danger, .z-app .k-account .k-danger { border-radius: 0; border: 2px solid var(--z-text); }
.z-me { display: flex; align-items: center; gap: 16px; }
.z-me b { display: block; font: 400 1.75rem/1 var(--z-display); }
.z-me span.z-me-sub { display: block; margin-top: 6px; color: var(--z-muted); font-size: .9375rem; line-height: 1.4; }
.z-me .k-avatar { flex: none; }
.z-me > div { min-width: 0; }
.z-me b { overflow-wrap: anywhere; }

/* Gig-poster list (tour) */
.z-gigs { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--z-text); }
.z-gig { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 14px 0; border-bottom: 2px dashed var(--z-line); }
.z-gig-date { display: grid; justify-items: center; padding: 8px 4px 6px; background: var(--z-pink); color: var(--z-deep); font: 400 2rem/.85 var(--z-display); text-align: center; box-shadow: 3px 3px 0 var(--z-teal); }
.z-gig:nth-child(even) .z-gig-date { background: var(--z-teal); color: var(--z-white); box-shadow: 3px 3px 0 var(--z-pink); }
.z-gig-date small { display: block; margin-top: 4px; font: 800 .75rem/1 var(--z-body); letter-spacing: .14em; text-transform: uppercase; }
.z-gig-venue { font: 400 clamp(1.05rem, .85rem + .9vw, 1.6rem)/1.02 var(--z-display); overflow-wrap: anywhere; }
.z-gig-meta { display: block; margin-top: 4px; color: var(--z-muted); font-weight: 700; font-size: .875rem; }
.z-gig-flag { display: inline-block; margin-left: 6px; padding: 3px 6px; background: var(--z-yellow); color: var(--z-deep); font: 800 .6875rem/1 var(--z-body); letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.z-gig .k-btn { min-height: 44px; padding: 0 16px; font-size: .8125rem; }
@media (max-width: 560px) {
  .z-gig { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .z-gig-date { font-size: 1.6rem; }
  .z-gig .k-btn { min-height: 40px; padding: 0 12px; }
}
@media (prefers-color-scheme: dark) { .z-gig-date { color: var(--z-night); } .z-gig:nth-child(even) .z-gig-date { background: var(--z-teal); color: var(--z-white); } }

/* Tour page */
.z-tour-strip { margin-bottom: 34px; }
.z-strip.z-tour-strip img { height: 300px; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 1024px) {
  .z-tour .z-tour-list { grid-column: 1 / span 8; grid-row: 1; }
  .z-tour .z-tour-aside { grid-column: 9 / span 4; grid-row: 1; position: sticky; top: 90px; }
}
.z-stub-solo .z-stub-date { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.25rem); }

/* Riso photo strips (hand-cut) */
.z-strip { position: relative; margin: 0; }
.z-strip img { display: block; width: 100%; height: auto; clip-path: polygon(0 4%, 18% 0, 46% 3%, 71% 0, 100% 2%, 99% 96%, 74% 100%, 41% 97%, 12% 100%, 1% 95%); }
.z-strip figcaption { position: absolute; left: 4%; bottom: 10%; padding: 8px 12px; background: var(--z-deep); color: var(--z-paper); font: 400 clamp(1.5rem, 1rem + 2.6vw, 3.5rem)/.9 var(--z-display); text-shadow: .05em .04em 0 var(--z-pink); transform: rotate(-2deg); }
@media (prefers-color-scheme: dark) { .z-strip img { filter: drop-shadow(0 0 14px rgba(255, 92, 186, .45)); } }

/* ---------- public page ---------- */
.z-pub main { display: block; overflow-x: clip; }
.z-app .k-main { overflow-x: clip; }
.z-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .z-wrap { padding: 0 48px; } }
.z-mast { position: relative; z-index: 5; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; background: var(--z-pink); color: var(--z-deep); border-bottom: 3px solid var(--z-deep); }
.z-mast-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--z-deep); text-decoration: none; font: 400 1.125rem/1 var(--z-display); }
.z-mast-brand img { flex: none; border-radius: 4px; box-shadow: 2px 2px 0 var(--z-deep); }
.z-mast-links { display: none; margin-left: auto; gap: 2px; }
.z-mast-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--z-deep); font: 800 .875rem/1 var(--z-body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.z-mast-links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
body.k-app .z-mast .k-btn { margin-left: auto; min-height: 44px; padding: 0 14px; font-size: .8125rem; box-shadow: 3px 3px 0 var(--z-paper); }
@media (min-width: 900px) { .z-mast { padding: 12px 48px; } .z-mast-brand { font-size: 1.375rem; } .z-mast-links { display: flex; } body.k-app .z-mast .k-btn { margin-left: 10px; } }
@media (max-width: 380px) { .z-mast-brand span { font-size: .9375rem; } }
@media (prefers-color-scheme: dark) { .z-mast { color: var(--z-night); border-bottom-color: var(--z-night-deep); } .z-mast-brand, .z-mast-links a { color: var(--z-night); } body.k-app .z-mast .k-btn { background: var(--z-night); color: var(--z-paper); box-shadow: 3px 3px 0 var(--z-neon); } }

/* Hero: the gig poster */
.z-hero { position: relative; overflow: hidden; overflow-x: clip; background-color: var(--z-pink); color: var(--z-deep); padding: 26px 0 40px; }
.z-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(42, 29, 79, .04) 1.5px, transparent 2px); background-size: 9px 9px; -webkit-mask: linear-gradient(160deg, #000 0, transparent 55%); mask: linear-gradient(160deg, #000 0, transparent 55%); pointer-events: none; }
.z-hero::after { content: ""; position: absolute; width: min(34vw, 460px); aspect-ratio: 1; right: -4vw; bottom: -10vw; border-radius: 50%; background: var(--z-teal); mix-blend-mode: multiply; opacity: .9; pointer-events: none; }
.z-hero-in { position: relative; z-index: 1; display: grid; gap: 22px; }
.z-hero-in > * { min-width: 0; }
.z-hero-kick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font: 800 .8125rem/1.3 var(--z-body); text-transform: uppercase; letter-spacing: .14em; }
.z-poster { margin: 0; font: 400 clamp(56px, 13vw, 200px)/.9 var(--z-display); max-width: 100%; overflow-wrap: anywhere; color: var(--z-deep); text-shadow: .035em .03em 0 var(--z-teal); }
.z-poster span { display: block; }
.z-hero-photo { position: relative; margin: 0; transform: rotate(-2.5deg); }
.z-hero-photo img { display: block; width: 100%; height: auto; clip-path: polygon(2% 3%, 30% 0, 63% 2.5%, 98% 0, 100% 40%, 97.5% 97%, 62% 100%, 24% 97.5%, 0 100%, 1.5% 52%); filter: drop-shadow(0 0 0 transparent); }
.z-hero-photo::before { content: ""; position: absolute; z-index: 2; top: -10px; left: 12%; width: 96px; height: 26px; background: var(--z-tape); transform: rotate(-6deg); }
.z-hero-photo::after { content: ""; position: absolute; z-index: 2; bottom: -8px; right: 14%; width: 84px; height: 24px; background: var(--z-tape); transform: rotate(5deg); }
.z-lp { position: absolute; z-index: 3; right: 8px; top: 12px; display: grid; place-content: center; width: 104px; height: 104px; border-radius: 50%; background: var(--z-yellow); color: var(--z-deep); text-align: center; transform: rotate(10deg); box-shadow: 4px 4px 0 var(--z-deep); }
.z-lp small { font: 800 .6875rem/1.1 var(--z-body); letter-spacing: .12em; text-transform: uppercase; }
.z-lp b { display: block; margin: 4px 0 2px; font: 400 1.25rem/.9 var(--z-display); }
.z-hero-lead { max-width: 34ch; font-size: 1.1875rem; line-height: 1.45; font-weight: 700; }
.z-hero .k-btn-row { margin-top: 20px; }
body.k-app .z-hero .k-btn-line { color: var(--z-deep); }
.z-hero-fine { margin-top: 14px; font-weight: 700; font-size: .875rem; }
@media (min-width: 900px) {
  .z-hero { padding: 36px 0 56px; }
  .z-hero::after { width: min(20vw, 280px); top: 300px; bottom: auto; right: 5vw; }
  .z-hero-in { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 0 40px; align-items: start; }
  .z-hero-kick { grid-column: 1; grid-row: 1; }
  .z-poster { grid-column: 1; grid-row: 2; margin-top: 10px; font-size: clamp(56px, 9.2vw, 132px); }
  .z-hero-copy { grid-column: 1; grid-row: 3; padding-top: 24px; }
  .z-hero-photo { grid-column: 2; grid-row: 1 / span 3; justify-self: end; width: min(520px, 100%); margin: 52px 0 0; }
  .z-lp { width: 156px; height: 156px; top: -30px; right: -18px; }
  .z-lp b { font-size: 1.875rem; }
}
@media (prefers-color-scheme: dark) {
  .z-hero { color: var(--z-night); }
  .z-poster { color: var(--z-night); }
  body.k-app .z-hero .k-btn { background: var(--z-night); color: var(--z-paper); box-shadow: 4px 4px 0 var(--z-neon); }
  body.k-app .z-hero .k-btn-line { background: transparent; color: var(--z-night); box-shadow: inset 0 0 0 2px currentColor; }
  .z-hero::after { background: var(--z-teal); }
}

/* Sections */
.z-band { padding: 72px 0; }
.z-band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 30px; }
.z-band-head h2 { font-size: clamp(2.4rem, 1.2rem + 5.6vw, 6.5rem); line-height: .88; text-shadow: .035em .03em 0 var(--z-pink); }
.z-band-head p { max-width: 38ch; font-weight: 700; color: var(--z-muted); line-height: 1.45; }
.z-band-head .z-presale, .z-presale { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; background: var(--z-yellow); color: var(--z-deep); font-weight: 800; transform: rotate(-1deg); box-shadow: 3px 3px 0 var(--z-deep); }
.z-presale a { color: var(--z-deep); }
.z-tourwrap { display: grid; gap: 30px; }
@media (min-width: 1024px) { .z-tourwrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; } .z-tourwrap .z-strip { position: sticky; top: 24px; } }

/* The app spread on a teal field */
.z-teal { background: var(--z-teal); color: var(--z-white); }
.z-teal .z-band-head h2 { color: var(--z-white); text-shadow: .035em .03em 0 var(--z-pink); }
.z-teal .z-band-head p { color: var(--z-white); }
@media (prefers-color-scheme: dark) { .z-teal { background: var(--z-teal-deep); } }
.z-spread { position: relative; display: grid; gap: 0; background: var(--z-paper); color: var(--z-ink); box-shadow: 8px 10px 0 var(--z-deep); }
.z-spread-page { position: relative; padding: 32px 22px; min-width: 0; }
.z-spread-page + .z-spread-page { border-top: 2px dashed rgba(59, 42, 107, .35); }
.z-spread-cap { margin-bottom: 18px; font: 800 .75rem/1.3 var(--z-body); letter-spacing: .14em; text-transform: uppercase; color: var(--z-teal); }
.z-spread-cap b { display: block; margin-top: 4px; font: 400 1.5rem/1 var(--z-display); letter-spacing: 0; text-transform: none; color: var(--z-ink); }
.z-spread .z-pass { max-width: 400px; margin: 0 auto; }
.z-spread .z-sleeve-body h3, .z-spread .z-note { color: var(--z-ink); }
.z-spread .z-note { color: var(--z-spread-muted); }
.z-spread .z-kick { color: var(--z-teal); }
.z-spread .z-crate { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 26px 20px; }
@media (min-width: 1024px) {
  .z-spread { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .z-spread::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 45%; width: 2px; background: linear-gradient(90deg, rgba(42, 29, 79, .25), rgba(255, 255, 255, .6)); }
  .z-spread::after { content: ""; position: absolute; z-index: 3; left: calc(45% - 2px); top: 18%; width: 6px; height: 64%; background: linear-gradient(#9A98A1, #E8E6EC 45%, #7A7883) top / 6px 34px no-repeat, linear-gradient(#9A98A1, #E8E6EC 45%, #7A7883) bottom / 6px 34px no-repeat; }
  .z-spread-page { padding: 44px 48px; }
  .z-spread-page + .z-spread-page { border-top: 0; }
}
@media (prefers-color-scheme: dark) { .z-spread { box-shadow: 0 0 0 2px var(--z-pink), 0 0 50px rgba(255, 92, 186, .35); } }
.z-spread .z-pass-name { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.25rem); }

/* Plans and sign-in on the public page */
.z-club .z-plans { margin-top: 18px; }
.z-signin { margin-top: 64px; display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .z-signin { grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; } }
.z-signin .k-btn-row { justify-content: flex-start; }

/* About and footer */
.z-about { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .z-about { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.z-about-photo { position: relative; margin: 0; transform: rotate(1.5deg); }
.z-about-photo img { display: block; width: 100%; height: auto; box-shadow: 6px 7px 0 var(--z-text); }
.z-about h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: .92; text-shadow: .035em .03em 0 var(--z-pink); }
.z-about p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; max-width: 52ch; }
.z-about .k-btn-row { margin-top: 22px; }
@media (prefers-color-scheme: dark) { .z-about-photo img { box-shadow: 0 0 0 2px var(--z-pink), 0 0 36px rgba(255, 92, 186, .4); } }
.z-foot { background: var(--z-deep); color: var(--z-footer-ink); padding: 30px 0 36px; }
.z-foot .z-wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-weight: 700; font-size: .9375rem; }
.z-foot b { font: 400 1.25rem/1 var(--z-display); color: var(--z-pink); margin-right: auto; }
.z-foot a { color: var(--z-white); min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-color-scheme: dark) { .z-foot { background: var(--z-night-deep); } }
.z-app .k-foot { border-top: 3px solid var(--z-text); color: var(--z-muted); }
.z-app .k-foot a { color: var(--z-text); }

/* Privacy notice */
.z-prose { max-width: 760px; margin: 32px auto 64px; padding: 32px 24px; background: var(--z-sheet); box-shadow: 0 0 0 2px var(--z-text), 6px 7px 0 var(--z-pink); }
.z-prose h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); text-shadow: .04em .035em 0 var(--z-pink); }
.z-prose h2 { margin-top: 28px; font-size: 1.25rem; }
.z-prose p, .z-prose li { margin-top: 10px; line-height: 1.6; }
.z-prose ul { padding-left: 20px; }
.z-prose .blank { background: var(--z-yellow); color: var(--z-deep); padding: 0 4px; }
.z-prose .tip { padding: 12px 14px; background: var(--z-pink-soft); font-weight: 700; }
@media (min-width: 900px) { .z-prose { padding: 48px 56px; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
  .z-sleeve:hover .z-disc, .z-sleeve:focus-within .z-disc, .z-sleeve.is-open .z-disc { transform: translateX(13%); }
  .z-sleeve:hover .z-cover, .z-sleeve:focus-within .z-cover { transform: none; }
  body.k-app .k-btn:hover, body.k-app .k-btn:active, .z-play:hover { transform: none; }
}
.z-spread-checks { max-width: 400px; margin: 26px auto 0; color: var(--z-ink); }
.z-prose a, .z-prose .blank { overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { .z-disc { box-shadow: 0 0 0 1px rgba(255, 92, 186, .55), 0 0 22px rgba(255, 92, 186, .35); } }
.z-sechead a, .z-stub-tear a { display: inline-flex; align-items: center; min-height: 44px; }
.z-stub-tear { box-sizing: border-box; }
@media (prefers-color-scheme: dark) { .z-v3 .z-cover-big { background: var(--z-paper); color: var(--z-deep); text-shadow: none; } }
.z-cutout { margin-top: 48px; }
@media (min-width: 1100px) { .z-grid > .z-12 .z-crate { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- round 2 review fixes ---------- */
.z-grid > *, .z-cuts, .z-cut { min-width: 0; }
.z-q, .z-a { overflow-wrap: anywhere; }
.k-app input::placeholder, .k-app textarea::placeholder { color: var(--z-muted); opacity: 1; }
.z-pass .k-dots { margin-bottom: 26px; }
.z-pass .k-dots li.k-free::before { color: var(--z-deep); }
.z-app .k-perks { background: var(--z-paper); padding: 14px 16px; }
.z-app .k-perks, .z-app .k-perks li { color: var(--z-deep); }
.z-app .k-tr::after { display: none; }
.z-app .k-td:not(.k-td-main) { order: 2; flex: 0 0 auto; margin-left: auto; text-align: right; }
.z-app .k-thead span:last-child { text-align: right; }
@media (min-width: 640px) { .z-app .k-table .k-tr, .z-app .k-table .k-thead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } .z-app .k-table .k-td:not(.k-td-main) { justify-self: end; } }
.z-app .k-thead { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; }
@media (min-width: 900px) { .z-grid .z-crate.z-free { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 40px; align-items: center; } }
@media (min-width: 1024px) {
  .z-tourwrap .z-strip { position: relative; top: auto; align-self: stretch; }
  .z-tourwrap .z-strip img { height: 100%; object-fit: cover; }
}
@media (prefers-color-scheme: dark) { body.k-app.z-pub { background-color: var(--z-deep); background-image: var(--z-dots); } }
/* Account block (rendered by the platform): the zine treatment, not the generic kit cards */
.z-app .k-account [class] { border-radius: 0; }
.z-app .k-account > div, .z-app .k-account > section, .z-app .k-account form { background: var(--z-sheet); box-shadow: 0 0 0 2px var(--z-text); }
.z-app .k-account > div > * + * { border-top: 2px dashed var(--z-line); }
.z-app .k-account button[type="submit"] { background: var(--z-sheet); color: var(--z-text); box-shadow: 0 0 0 2px var(--z-text); }
.z-app .k-account form:has(input:not([type="checkbox"])) button[type="submit"] { background: var(--z-deep); color: var(--z-paper); box-shadow: 3px 3px 0 var(--z-pink); font: 800 .875rem/1.1 var(--z-body); text-transform: uppercase; letter-spacing: .07em; }
.z-app .k-account form:has(input[type="checkbox"]) button[type="submit"] { color: var(--k-danger); box-shadow: 0 0 0 2px var(--k-danger); }
@media (prefers-color-scheme: dark) { .z-app .k-account form:has(input:not([type="checkbox"])) button[type="submit"] { background: var(--z-pink); color: var(--z-night); box-shadow: 3px 3px 0 var(--z-neon); } }

/* ---------- round 3 review fixes ---------- */
/* Riso misregistration: a teal plate offset 3px right and 2px down behind the hero photo and each sleeve */
.z-misreg { display: block; filter: drop-shadow(3px 2px 0 var(--z-teal)); }
.z-cover { box-shadow: 0 0 0 1px rgba(42, 29, 79, .2), 3px 2px 0 var(--z-teal); }
/* Stitched edge: a dashed 6px line inside each spread page and under the app page heads */
.z-spread-page { outline: 6px dashed rgba(59, 42, 107, .3); outline-offset: -12px; }
.z-head { padding-bottom: 14px; border-bottom: 6px dashed rgba(59, 42, 107, .3); }
@media (prefers-color-scheme: dark) { .z-head { border-bottom-color: rgba(255, 92, 186, .45); } .z-spread-page { outline-color: rgba(255, 92, 186, .35); } }
/* Spacing: the public page's club block and the band section were 144px apart */
.z-club { padding-bottom: 0; }
.z-club + .z-band { padding-top: 64px; }
/* Spread: the three sleeves sit on one row at desktop widths */
@media (min-width: 1280px) { .z-spread .z-crate { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Stub kicker: white on teal passes 4.5:1 where the yellow did not */
.z-stub .z-kick { color: var(--z-white); }
/* Scan code: never wider than its padded box at 320px */
.z-pass [data-pl-scan-code] svg, .z-pass [data-pl-scan-code] img { max-width: 100%; height: auto; }
/* Member header branding: wrap long band names instead of truncating them */
.z-app .k-top .k-brand { flex: 1; }
.z-app .k-top .k-brand span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Pilot Light: keep the cover's shapes in the palette (multiply made pink and yellow go orange-red) */
.z-v3::before, .z-v3::after { mix-blend-mode: normal; }
/* Vault: the three rows fill the width; the free row is a 460px sleeve beside the liner notes */
@media (min-width: 1100px) { .z-grid > .z-12 .z-crate { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .z-grid .z-crate.z-free { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; align-items: stretch; } .z-crate.z-free .z-page { align-self: start; } }
/* Card history: the star sits inline, 32px, to the left of the label */
.z-app .k-td-main:has(.k-tile-gold) { display: flex; align-items: center; gap: 12px; }
.z-app .k-tile-gold { width: 32px; height: 32px; flex: none; }
/* Plans on phones: the sticker hangs half off the card, so the title no longer waits under it */
@media (max-width: 600px) {
  .z-plan { padding-top: 24px; }
  .z-plan .z-sticker { top: -28px; }
  .z-plan h3 { padding-right: 96px; }
}
.z-acct-plans .z-plans { margin-top: 44px; }
/* Tour on phones: the show list comes straight after the banner, then the presale stub, then the card box */
@media (max-width: 1023px) {
  .z-tour .z-tour-aside { display: contents; }
  .z-tour .z-tour-list { order: 0; }
  .z-tour .z-tour-aside > * { order: 1; }
  .z-tour .z-tour-aside > div[data-pl-if="signed-out"] { order: 2; }
  .z-tour .z-tour-aside > section.z-page { order: 3; }
}
/* Ask: the form stays in view below the sticky app tabs; the Insider chip clears the TOPIC label */
@media (min-width: 1024px) { #ask.z-stick { top: 120px; } }
.z-prio { margin-bottom: 12px; }
/* Dark: the vinyl disc lifts off the violet ground, with a pink groove ring */
@media (prefers-color-scheme: dark) {
  .z-disc { background: radial-gradient(circle, var(--z-paper) 0 2.6%, var(--z-deep) 3% 3.6%, var(--z-pink) 4% 30%, #3B2A6B 31% 33%, transparent 33.5%), repeating-radial-gradient(circle, #3B2A6B 0 2px, #4A3784 2px 3.4px); box-shadow: 0 0 0 1px var(--z-pink), 0 2px 8px rgba(0, 0, 0, .35); }
  .z-c-teal .z-disc { background: radial-gradient(circle, var(--z-paper) 0 2.6%, var(--z-deep) 3% 3.6%, #18B3B0 4% 30%, #3B2A6B 31% 33%, transparent 33.5%), repeating-radial-gradient(circle, #3B2A6B 0 2px, #4A3784 2px 3.4px); }
  .z-c-yellow .z-disc { background: radial-gradient(circle, var(--z-paper) 0 2.6%, var(--z-deep) 3% 3.6%, var(--z-yellow) 4% 30%, #3B2A6B 31% 33%, transparent 33.5%), repeating-radial-gradient(circle, #3B2A6B 0 2px, #4A3784 2px 3.4px); }
  /* The app masthead keeps its pink band in dark mode */
  .z-app .k-top { background: var(--z-pink); color: var(--z-night); border-bottom-color: var(--z-night-deep); }
  .z-app .k-top .k-brand { color: var(--z-night); }
  .z-app .k-top a.k-signin { background: var(--z-night); color: var(--z-paper); box-shadow: 3px 3px 0 var(--z-neon); }
  .z-app .k-avatar { background: var(--z-night); color: var(--z-paper); }
}
/* Account block: Bungee H3s at the PLANS size, square Ink Violet buttons with the pink offset */
.z-app .k-account h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.875rem); }
.z-app .k-account button, .z-app .k-account .k-btn { border-radius: 0; font: 800 .875rem/1.1 var(--z-body); text-transform: uppercase; letter-spacing: .07em; background: var(--z-deep); color: var(--z-paper); box-shadow: 3px 3px 0 var(--z-pink); }
.z-app .k-account form:has(input[type="checkbox"]) button[type="submit"] { background: var(--z-deep); color: var(--z-paper); box-shadow: 3px 3px 0 var(--z-pink); }
@media (prefers-color-scheme: dark) { .z-app .k-account button, .z-app .k-account .k-btn { background: var(--z-pink); color: var(--z-night); box-shadow: 3px 3px 0 var(--z-neon); } }

/* ---------- round 4 final fixes ---------- */
/* Tour: the presale stub follows the spring tour photo on phones, before the show list */
@media (max-width: 767px) {
  .z-tour .z-tour-aside > div[data-pl-if="signed-in"] { order: 0; }
  .z-tour .z-tour-list { order: 1; }
}
.z-tour .z-page > .k-btn { margin-top: 16px; }
/* Vault: Add Backstage is a button, not a full-width bar */
.z-cutout .z-coupon > .k-btn { width: auto; max-width: 320px; margin-top: 16px; }
/* Card history header: the same small caps at every width */
.z-app .k-thead { font: 800 .6875rem/1.2 var(--z-body); letter-spacing: .14em; text-transform: uppercase; color: var(--z-text); background: var(--k-surface-2); }
/* Wallet buttons: readable labels, not captions */
.z-pass [data-pl-wallet] button { font: 600 .875rem/1.2 var(--z-body); }

/* ---------- polish 2026-10-26: the Vault fills 1440 and flicks on phones ---------- */
/* Free row: one printed band, the sleeve beside a three-column liner-notes spread */
.z-grid .z-crate.z-free { padding: 28px 20px; background-color: var(--k-surface-2); background-image: var(--z-dots); background-size: 9px 9px; box-shadow: inset 0 0 0 2px var(--z-text); }
.z-liner { display: grid; gap: 18px; }
.z-liner-head .z-kick { font-size: .75rem; }
.z-liner-head h2 { margin-top: 4px; }
.z-liner-head p:not(.z-kick) { color: var(--z-muted); }
.z-liner-cols { display: grid; gap: 14px; margin: 0; }
.z-liner-cols > div { padding-top: 12px; border-top: 3px dashed var(--z-line); }
.z-liner-cols dt { font: 400 1rem/1.05 var(--z-display); color: var(--z-text); text-shadow: .04em .035em 0 var(--z-pink); }
.z-liner-cols dd { margin: 6px 0 0; line-height: 1.5; font-size: .9375rem; }
.z-liner-foot { margin-top: 0; padding-top: 12px; border-top: 2px solid var(--z-text); font-weight: 800; font-size: .875rem; }
@media (min-width: 640px) { .z-liner-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .z-liner-cols > div { padding: 12px 18px 4px; border-top: 0; border-left: 3px dashed var(--z-line); } .z-liner-cols > div:first-child { padding-left: 0; border-left: 0; } }
@media (min-width: 900px) {
  .z-grid .z-crate.z-free { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px 44px; }
  .z-crate.z-free .z-page { align-self: center; padding: 32px 32px 26px; }
  .z-liner-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: end; }
  .z-liner-head .z-kick { grid-column: 1 / -1; }
  .z-liner-head p:not(.z-kick) { margin: 0 0 4px; }
  .z-liner-head h2 { font-size: 2rem; }
}
/* Liner notes: two facing zine pages with a gutter and a strip of tape over the fold (1440); phones stay stacked */
.z-leaf { min-width: 0; }
@media (min-width: 900px) {
  .z-crate.z-free .z-liner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
  .z-liner .z-leaf { padding: 30px 32px 26px; display: grid; align-content: start; gap: 18px; }
  .z-liner .z-leaf-l { border-right: 3px solid var(--z-text); background-image: linear-gradient(to left, rgba(38, 27, 85, .14), transparent 16px); }
  .z-liner .z-leaf-r { background-image: linear-gradient(to right, rgba(38, 27, 85, .14), transparent 16px); }
  .z-liner .z-liner-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .z-liner .z-liner-cols > div, .z-liner .z-liner-cols > div:first-child { padding: 12px 0 0; border-left: 0; border-top: 3px dashed var(--z-line); }
  .z-liner .z-liner-head { display: block; }
  .z-liner .z-liner-head h2 { font-size: 2rem; }
  .z-liner .z-liner-foot { margin-top: auto; }
  .z-liner::after { content: ""; position: absolute; z-index: 4; top: 58%; left: 50%; width: 96px; height: 28px; margin-left: -48px; background: var(--z-tape); transform: rotate(-4deg); pointer-events: none; }
}
@media (prefers-color-scheme: dark) { .z-grid .z-crate.z-free { background-color: var(--z-night-deep); box-shadow: inset 0 0 0 2px rgba(255, 92, 186, .7); } .z-liner-cols > div { border-color: rgba(255, 92, 186, .4); } }
/* Upgrade coupon: copy left, button right at desktop widths */
@media (min-width: 900px) {
  .z-cutout .z-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; padding: 34px 36px 30px; }
  .z-cutout .z-coupon > h2, .z-cutout .z-coupon > .k-help { grid-column: 1; }
  .z-cutout .z-coupon > .k-btn { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; min-width: 240px; }
}
/* Phones: each row is a crate you flick through, a sleeve and a peek of the next, fading at the edge */
.z-crate-row:focus-visible { outline-offset: -3px; }
@media (max-width: 639px) {
  .z-grid .z-crate-row { display: flex; gap: 18px; margin: 0 -16px; padding: 4px 16px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: thin; scrollbar-color: var(--z-pink) transparent; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .z-grid .z-crate-row .z-sleeve { display: block; flex: 0 0 74%; scroll-snap-align: start; }
  .z-grid .z-crate-row .z-sleeve:last-child { margin-right: 20px; }
  .z-grid .z-crate-row .z-sleeve-body { margin-top: 10px; }
  .z-grid .z-crate.z-free { margin: 0 -4px; padding: 22px 16px; }
}