/* ═══════════════════════════════════════════════════════════════
   PAPER ARCADE — youxi--1--130 index stylesheet
   A riso-print paper arcade: letterpress masthead, cut-out coupons,
   paper tags, perforated stamp sheets, pinned cutouts and hard
   offset shadows on warm recycled stock.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper: #F3EDE1;
  --paper-2: #E7DECB;
  --card: #FFFCF4;
  --ink: #17140F;
  --ink-soft: #514838;
  --ink-dim: #93887A;
  --line: #17140F;
  --line-2: #17140F;
  --red: #E33B26;
  --teal: #0E8C8C;
  --mustard: #F0B400;
  --pink: #E4599B;
  --blue: #2B4FD8;
  --green: #1C9A5B;
  --display: 'Arial Black', 'Segoe UI Black', 'Impact', 'PingFang SC', sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
  --mono: 'Courier New', 'Consolas', monospace;
  --sec-gap: 30px;
  --hard: 4px 4px 0 var(--ink);
  --hard-sm: 3px 3px 0 var(--ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; overflow-x: hidden; }

[v-cloak] { display: none !important; }

/* ── base element resets — no link underlines anywhere ─────── */
a { color: inherit; text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: 44px;
}

/* halftone stock + faint ink misregistration in the corners */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(23, 20, 15, .05) .8px, transparent 1.4px) 0 0 / 7px 7px,
    radial-gradient(620px 320px at 6% -4%, rgba(227, 59, 38, .09), transparent 70%),
    radial-gradient(620px 330px at 96% 4%, rgba(14, 140, 140, .09), transparent 70%),
    radial-gradient(760px 420px at 50% 106%, rgba(240, 180, 0, .10), transparent 72%);
}

.wrap { width: min(1180px, 92%); margin: 0 auto; }

/* ── shared: editorial label bar ───────────────────────────── */
.labelbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.labelbar-tab {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 2px 7px;
  box-shadow: 2px 2px 0 var(--ink);
}

.labelbar-title {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--card);
  background: var(--ink);
  padding: 4px 11px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.labelbar-rule {
  flex: 1;
  height: 8px;
  min-width: 18px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 9px);
}

.labelbar-side {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 3px 8px;
  box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
}

/* ── shared: sticker chips & stars ─────────────────────────── */
.pchip {
  display: inline-block;
  font-family: var(--mono);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  white-space: nowrap;
}

.chip-red { background: var(--red); color: #fff; }
.chip-teal { background: var(--teal); color: #fff; }
.chip-mustard { background: var(--mustard); color: var(--ink); }
.chip-pink { background: var(--pink); color: #fff; }
.chip-ink { background: var(--ink); color: var(--card); }

.pchip-ink { background: var(--ink); color: var(--card); }

.pstars { font-size: .78rem; letter-spacing: 1px; color: var(--mustard); white-space: nowrap; }
.pstars .off { color: rgba(23, 20, 15, .22); }

/* ═══ 1) MASTHEAD ═══════════════════════════════════════════ */
.mast {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(23, 20, 15, .10);
}

.mast-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
}

.mast-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--card);
  font-family: var(--display);
  font-size: 1.28rem;
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s;
}

.mast-mark:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

.mast-word {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 1.14rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46%;
}

.mast-rule {
  flex: 1;
  height: 9px;
  min-width: 16px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 9px);
}

.mast-issue {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.mast-lens {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s, background .15s;
}

.mast-lens:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); background: var(--mustard); }

/* ═══ 2) COUPON — clip-out search ticket ═════════════════════ */
.coupon { margin-top: 16px; }

.coupon-in {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 2px dashed var(--ink);
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--hard);
}

.coupon-scissor { flex-shrink: 0; display: grid; place-items: center; color: var(--ink-soft); line-height: 1; }

.coupon-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--ink);
}

.coupon-input::placeholder { color: var(--ink-dim); }

.coupon-cut {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 8px 16px;
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s;
}

.coupon-cut:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

/* ═══ 3) TAG RAIL — paper category tags ═════════════════════ */
.tagrail { margin-top: 12px; }

.tagrail-in {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 2px 10px;
  scrollbar-width: none;
}

.tagrail-in::-webkit-scrollbar { display: none; }

.ptag {
  position: relative;
  flex-shrink: 0;
  padding: 7px 13px 7px 21px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}

/* punched hole, inked in the category colour */
.ptag::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.f-red::before { background: var(--red); }
.f-teal::before { background: var(--teal); }
.f-mustard::before { background: var(--mustard); }
.f-pink::before { background: var(--pink); }
.f-ink::before { background: var(--ink); }

.ptag:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

.ptag.is-on {
  background: var(--ink);
  color: var(--card);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}

.ptag.is-on::before { background: var(--paper); }

/* ═══ loading — the press warms up ══════════════════════════ */
.loading-full {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--paper);
}

.press { display: flex; flex-direction: column; align-items: center; gap: 15px; }

.press-roller {
  width: 132px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 17px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 11px),
    var(--card);
  box-shadow: var(--hard-sm);
  animation: rollspin 1.5s linear infinite;
}

@keyframes rollspin { to { background-position: 15px 0, 0 0; } }

.press-txt {
  font-family: var(--display);
  font-size: .96rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.press-bar {
  width: 210px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  overflow: hidden;
}

.press-bar i {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--red);
  animation: pressload 1.4s steps(8, end) infinite;
}

@keyframes pressload {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(255%); }
}

/* ═══ 4) SPOT — front page spread ═══════════════════════════ */
.spot-sec { margin-top: var(--sec-gap); }

.front {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.front-lead {
  display: grid;
  grid-template-rows: minmax(190px, 1fr) auto;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.front-lead:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.lead-shot { position: relative; overflow: hidden; border-bottom: 2px solid var(--ink); background: var(--paper-2); }

.lead-shot img { width: 100%; height: 100%; object-fit: cover; min-height: 190px; }

/* halftone screen over the big picture */
.lead-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(23, 20, 15, .16) .7px, transparent 1.2px) 0 0 / 6px 6px;
  mix-blend-mode: multiply;
}

/* rotated rubber stamp on the lead picture */
.lead-stamp {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-family: var(--display);
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--card);
  border: 2px solid var(--red);
  padding: 4px 9px 3px;
  border-radius: 2px;
  transform: rotate(-7deg);
  box-shadow: 2px 2px 0 var(--ink);
}

.lead-plate {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px 14px;
  min-width: 0;
}

.lead-kicker { display: flex; gap: 6px; flex-wrap: wrap; }

.lead-head {
  font-family: var(--display);
  font-size: clamp(1.18rem, 2.4vw, 1.68rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 0 rgba(227, 59, 38, .3);
}

.lead-desc {
  font-size: .85rem;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lead-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 2px dashed var(--ink);
}

.lead-go {
  margin-left: auto;
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--card);
  background: var(--ink);
  padding: 6px 12px;
  border-radius: 2px;
  box-shadow: var(--hard-sm);
}

.front-side { display: contents; }

.brief {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-items: stretch;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.brief:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.brief-shot { border-bottom: 2px solid var(--ink); overflow: hidden; background: var(--paper-2); }

.brief-shot img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; min-height: 0; display: block; }

.brief-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px 13px;
  min-width: 0;
}

.brief-kicker { display: flex; gap: 6px; flex-wrap: wrap; }
.brief-kicker .pchip { font-size: .48rem; padding: 1px 5px; }

.brief-head {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.12;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.brief-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 2px dashed var(--ink);
}

.brief-foot .pstars { font-size: .68rem; }

.brief-go {
  margin-left: auto;
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--card);
  background: var(--ink);
  padding: 4px 8px;
  border-radius: 2px;
}

/* ranked follow-ups — its own section below the front page */
.inside-sec { margin-top: var(--sec-gap); }

.front-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.strip-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 48px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 13px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.strip-item:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.strip-no {
  font-family: var(--display);
  font-size: 1.1rem;
  text-align: center;
  color: var(--ink-dim);
}

.strip-item:nth-child(1) .strip-no { color: var(--red); }
.strip-item:nth-child(2) .strip-no { color: var(--blue); }

.strip-shot { border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; }

.strip-shot img { width: 48px; height: 48px; object-fit: cover; }

.strip-body { min-width: 0; }

.strip-head {
  display: block;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strip-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .08em;
  color: var(--ink-dim);
}

.strip-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
}

.strip-bar i { display: block; height: 100%; background: var(--teal); }

/* ═══ 5) SHELF — twelve spines on the rack ══════════════════ */
.shelf-sec { margin-top: var(--sec-gap); }

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 15px 12px;
  padding: 16px 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard);
}

.spine { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.spine-no {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--card);
  background: var(--ink);
  padding: 1px 5px;
  border-radius: 2px;
}

.spine-shot {
  border: 2px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--hard-sm);
  transition: transform .18s, box-shadow .18s;
}

.spine:hover .spine-shot { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.spine-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.spine-nm {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 6) STAMP BOOK ═════════════════════════════════════════ */
.stamp-sec { margin-top: var(--sec-gap); }

.stamp-sheet {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard);
  padding: 14px;
}

.stamp-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  margin-bottom: 13px;
  border-bottom: 2px dashed var(--ink);
}

.stamp-hd-t {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.stamp-hd-no {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--card);
  background: var(--teal);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 2px 7px;
}

.stamp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 9px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  transition: transform .18s, box-shadow .18s;
}

.stamp:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* perforation inside each stamp */
.stamp::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(23, 20, 15, .4);
  border-radius: 2px;
  pointer-events: none;
}

.stamp-face { position: relative; z-index: 1; border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; }

.stamp-face img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.stamp-nm {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 7) CHART — the weekly top eight ═══════════════════════ */
.chart-sec { margin-top: var(--sec-gap); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.chart-row {
  display: grid;
  grid-template-columns: 48px 58px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  transition: transform .18s, box-shadow .18s;
}

.chart-row:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.chart-rank {
  font-family: var(--display);
  font-size: 1.4rem;
  text-align: center;
  color: var(--ink-dim);
}

.chart-row:nth-child(1) .chart-rank { color: var(--red); }
.chart-row:nth-child(2) .chart-rank { color: var(--blue); }
.chart-row:nth-child(3) .chart-rank { color: var(--teal); }

.chart-shot { border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; }

.chart-shot img { width: 58px; height: 58px; object-fit: cover; }

.chart-body { min-width: 0; }

.chart-nm {
  display: block;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }

.chart-bar {
  position: relative;
  flex: 1;
  height: 9px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper-2);
  overflow: hidden;
}

.chart-bar i { position: absolute; inset: 0 auto 0 0; background: var(--red); }

/* ═══ 8) AISLES — genre rail + sheet ════════════════════════ */
.aisle-sec { margin-top: var(--sec-gap); }

.aisle-rail { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }

.aisle-rail::-webkit-scrollbar { display: none; }

.aisle-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}

.aisle-tab:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

.aisle-tab.is-on { background: var(--ink); color: var(--card); }

.aisle-count {
  font-family: var(--mono);
  font-size: .54rem;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 5px;
}

.aisle-sheet {
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard);
}

.aisle-pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.pad-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pad-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 2px;
  transition: transform .18s, box-shadow .18s;
}

.pad-item:hover img { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.pad-item p {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aisle-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 2px dashed var(--ink);
}

.aisle-note { font-family: var(--mono); font-size: .62rem; color: var(--ink-soft); }

.aisle-open {
  margin-left: auto;
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--mustard);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 7px 13px;
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s;
}

.aisle-open:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

/* ═══ 9) PAPER WALL — the catalogue ═════════════════════════ */
.wall-sec { margin-top: var(--sec-gap); }

.wall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.sheet {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.sheet:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.sheet-shot { border-bottom: 2px solid var(--ink); background: var(--paper-2); }

.sheet-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.sheet-plate { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px 10px; min-width: 0; }

.sheet-nm {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-foot { display: flex; align-items: center; gap: 6px; }

.sheet-no {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .08em;
  color: var(--ink-dim);
  white-space: nowrap;
}

.pmore-wrap { display: flex; justify-content: center; margin-top: 18px; }

.pmore {
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 9px 20px;
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s, background .15s;
}

.pmore:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); background: var(--mustard); }

/* ═══ 9b) PIN BOARD ═════════════════════════════════════════ */
.pin-sec { margin-top: var(--sec-gap); }

.pin-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px 12px;
  padding: 20px 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, rgba(23, 20, 15, .07) .8px, transparent 1.3px) 0 0 / 10px 10px,
    var(--card);
  box-shadow: var(--hard);
}

.pin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }

.pin-clip {
  position: absolute;
  top: -12px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 1px 2px 0 rgba(23, 20, 15, .45);
}

.pin:nth-child(even) .pin-clip { background: var(--blue); }
.pin:nth-child(3n) .pin-clip { background: var(--mustard); }

.pin-shot {
  border: 2px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--hard-sm);
  transform: rotate(-1.6deg);
  transition: transform .18s, box-shadow .18s;
}

.pin:nth-child(even) .pin-shot { transform: rotate(1.6deg); }

.pin:hover .pin-shot { transform: rotate(0) translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.pin-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.pin-nm {
  max-width: 100%;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 9c) GRAB BAG ══════════════════════════════════════════ */
.bag-sec { margin-top: var(--sec-gap); }

.bag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.bag {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.bag:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.bag-tag {
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--card);
  background: var(--ink);
  padding: 3px 8px;
}

.bag-shot { background: var(--paper-2); }

.bag-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.bag-perf { height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 11px); }

.bag-nm {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 7px 9px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 9d) TWO FOR ONE ═══════════════════════════════════════ */
.duo-sec { margin-top: var(--sec-gap); }

.duo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }

.duo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  transition: transform .18s, box-shadow .18s;
}

.duo:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.duo-x {
  position: absolute;
  top: -11px;
  right: -8px;
  font-family: var(--display);
  font-size: .84rem;
  color: #fff;
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 1px 7px;
  transform: rotate(-6deg);
  box-shadow: var(--hard-sm);
}

.duo-shot { border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; }

.duo-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.duo-nm {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ 10) TILL — filtered / searched results ════════════════ */
.till-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sec-gap);
  padding: 11px 13px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
}

.till-back {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 6px 11px;
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s;
}

.till-back:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

.till-title {
  font-family: var(--display);
  font-size: .94rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.till-count {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--card);
  background: var(--ink);
  border-radius: 2px;
  padding: 3px 8px;
  white-space: nowrap;
}

.till-sec { margin-top: 14px; }

.till-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.till-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--hard-sm);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.till-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.till-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px solid var(--ink); }

.till-body { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px 11px; min-width: 0; }

.till-nm {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.till-desc {
  font-size: .72rem;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.till-foot { display: flex; align-items: center; gap: 6px; margin-top: 3px; }

.soldout {
  padding: 36px 20px;
  text-align: center;
  border: 3px dashed var(--ink);
  border-radius: 4px;
  background: var(--card);
}

.soldout-txt {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
}

.soldout-sub {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-soft);
}

/* ═══ 11) PAPER FOOTER ══════════════════════════════════════ */
.paper-foot {
  margin-top: 44px;
  border-top: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.foot-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 20px 0;
}

.foot-stamp {
  font-family: var(--display);
  font-size: .86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--paper);
  border-radius: 2px;
  padding: 4px 11px;
}

.foot-note {
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .14em;
  color: rgba(243, 237, 225, .68);
}

.foot-links {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
}

.foot-links a { padding-bottom: 2px; border-bottom: 2px solid transparent; }

.foot-links a:hover { border-bottom-color: var(--paper); }

.foot-fine {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .12em;
  color: rgba(243, 237, 225, .52);
}

/* back to top — a paper tab */
.totop-btn {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 50;
  width: 44px;
  height: 44px;
  font-family: var(--display);
  font-size: .9rem;
  color: var(--ink);
  background: var(--mustard);
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--hard-sm);
  transition: transform .15s, box-shadow .15s;
}

.totop-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

/* ═══ ambient: ink grain + drifting confetti ════════════════ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: .55;
  background: repeating-linear-gradient(0deg, rgba(23, 20, 15, .022) 0 1px, transparent 1px 3px);
}

.confetti { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.bit {
  position: absolute;
  bottom: -30px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  opacity: .55;
  animation: bitdrift 32s linear infinite;
}

.bit.b1 { left: 5%; background: var(--red); animation-duration: 28s; }
.bit.b2 { left: 31%; background: var(--teal); animation-duration: 37s; animation-delay: 6s; }
.bit.b3 { left: 63%; background: var(--mustard); animation-duration: 31s; animation-delay: 12s; }
.bit.b4 { left: 88%; background: var(--pink); animation-duration: 41s; animation-delay: 3s; }

@keyframes bitdrift {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  12% { opacity: .55; }
  80% { opacity: .4; }
  100% { transform: translateY(-118vh) rotate(400deg); opacity: 0; }
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .shelf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .till-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* front page: one row of three, only shrink */
  .front { gap: 10px; }
  .brief-shot img { aspect-ratio: 16 / 10; }
  .brief-body { padding: 9px 11px 11px; gap: 5px; }
  .brief-head { font-size: .88rem; }
  .lead-shot img { min-height: 170px; max-height: 260px; }
  .lead-stamp { font-size: .54rem; top: 8px; left: 8px; }
  .stamp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aisle-pad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mast-issue { display: none; }
}

@media (max-width: 560px) {
  .mast-in { gap: 8px; padding: 9px 0; }
  .mast-mark { width: 34px; height: 34px; font-size: 1.08rem; }
  .mast-word { font-size: .92rem; max-width: 52%; }
  .mast-lens { width: 32px; height: 32px; }
  .labelbar { gap: 7px; margin-bottom: 11px; }
  .labelbar-title { font-size: .84rem; letter-spacing: .05em; padding: 3px 8px; }
  .labelbar-side { display: none; }
  .labelbar-tab { font-size: .48rem; padding: 2px 5px; }
  .coupon-in { gap: 8px; padding: 9px 11px; }
  .coupon-input { font-size: .72rem; }
  .coupon-cut { font-size: .68rem; padding: 7px 11px; letter-spacing: .06em; }
  .front { gap: 8px; }
  .brief-shot img { aspect-ratio: 4 / 3; }
  .brief-kicker .pchip { font-size: .42rem; padding: 1px 4px; }
  .brief-body { padding: 8px 9px 10px; gap: 4px; }
  .brief-head { font-size: .74rem; }
  .brief-foot { padding-top: 6px; gap: 5px; }
  .brief-foot .pstars { font-size: .58rem; }
  .brief-go { font-size: .5rem; padding: 3px 6px; }
  .lead-stamp { display: none; }
  .front-strip { grid-template-columns: 1fr; gap: 10px; }
  .strip-item { grid-template-columns: 28px 42px 1fr; gap: 8px; padding: 8px 10px 12px; }
  .strip-shot img { width: 42px; height: 42px; }
  .strip-no { font-size: .96rem; }
  .lead-plate { padding: 11px 12px 12px; gap: 6px; }
  .lead-head { font-size: 1.02rem; }
  .lead-desc { font-size: .76rem; -webkit-line-clamp: 2; }
  .lead-go { font-size: .62rem; padding: 5px 9px; }
  .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 9px; padding: 12px 10px; }
  .spine-nm { font-size: .54rem; }
  .stamp-sheet { padding: 11px 10px; }
  .stamp-grid { gap: 9px; }
  .stamp { padding: 8px 7px; }
  .stamp-nm { font-size: .54rem; }
  .chart-row { grid-template-columns: 30px 42px 1fr; gap: 8px; padding: 9px; }
  .chart-shot img { width: 42px; height: 42px; }
  .chart-rank { font-size: 1.05rem; }
  .chart-nm { font-size: .7rem; }
  .chart-meta { gap: 6px; margin-top: 4px; }
  .pin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 9px; padding: 18px 10px 14px; }
  .pin-nm { font-size: .54rem; }
  .aisle-sheet { padding: 11px 10px; }
  .aisle-pad { gap: 10px; }
  .pad-item p { font-size: .56rem; }
  .aisle-open { font-size: .62rem; padding: 6px 10px; }
  .bag-nm { font-size: .58rem; }
  .duo { padding: 8px; gap: 6px; }
  .duo-nm { font-size: .58rem; }
  .till-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .till-body { padding: 8px 9px 9px; }
  .till-nm { font-size: .68rem; }
  .till-desc { font-size: .66rem; }
  .till-bar { padding: 9px 10px; gap: 8px; }
  .till-back { font-size: .62rem; padding: 5px 9px; }
  .till-title { font-size: .82rem; }
  .till-count { font-size: .52rem; }
  .foot-in { padding: 16px 0; }
  .foot-fine { display: none; }
  .foot-links { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}