/* P3-B: page-only additions to the approved ink, red and torn-paper system. */
.page :is(.site-nav,.prize-wall,.page-entries,.inner-hero,.series-zone,.identify,.faq,#sources,#help,#data,#guides,.not-found) {
  min-width: 0;
}
.page :is(.prize-wall,.page-entries,.inner-hero,.series-zone,.identify,.faq,#sources,#help,#data,#guides,.not-found) {
  padding: 36px var(--lp3-gutter);
}
.page :is(.prize-wall,.page-entries,.inner-hero,.series-zone,.identify,.faq,#sources,#help,#data,#guides,.not-found) :is(p,figcaption) {
  line-height: 1.75;
}
.page :is(.prize-wall,.page-entries,.inner-hero,.series-zone,.identify,.faq,#sources,#help,#data,#guides,.not-found) :is(h2,h3,h4) {
  font-weight: 900;
  line-height: 1.24;
}
.page :is(.prize-wall,.series-zone,.identify,.faq,#sources,#help,#data,#guides) > :is(header,h2) {
  max-width: 70ch;
}
.page :is(.prize-wall,.series-zone,.identify,.faq,#sources,#help,#data,#guides) > :is(header,h2) h2,
.page :is(.identify,.faq,#sources,#help,#data,#guides) > h2 {
  color: var(--red);
  font-size: clamp(1.875rem, 8.5vw, 3.375rem);
  line-height: 1.2;
  letter-spacing: -.04em;
  text-shadow: 2px 2px 0 var(--paper);
  margin: 8px 0 18px;
}
.page :is(.prize-wall,.series-zone) > header > p:first-child {
  display: table;
  padding: 5px 9px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--red);
  font-size: .875rem;
  letter-spacing: .06em;
}
.page :is(.prize-wall,.series-zone) > header > p:last-child {
  max-width: 65ch;
  font-size: var(--lp3-body);
}
.page :is(.prize-wall,.series-zone,.identify,.faq,#sources,#help,#data,#guides) > a,
.page .series-zone > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 8px 0;
  border-bottom: 2px solid var(--paper);
  font-size: var(--lp3-note);
  font-weight: 900;
}
.page :is(.prize-wall,.series-zone,.identify,.faq,#sources,#help,#data,#guides) > a:hover {
  transform: translateY(-2px);
}

/* Navigation stays in one row at every width. */
.site-nav {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 2px;
  align-items: stretch;
  background: var(--ink);
  padding: 5px var(--lp3-gutter);
  border-block: 1px solid #f1ead940;
}
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 7px 2px;
  color: var(--paper);
  font-size: clamp(.8125rem,3.2vw,.875rem);
  line-height: 1.4;
  text-align: center;
  font-weight: 900;
  transition: transform 180ms ease;
}
.site-nav a[aria-current="page"] { background: var(--red); }
.site-nav a:hover,.site-nav a:focus-visible { transform: translateY(-2px); }
.site-nav a:focus-visible { outline: 3px solid var(--marker); outline-offset: -3px; }

/* Prize wall: captions use the existing LABEL-02 paper sticker. */
.prize-wall { background: var(--ink); }
.prize-wall > p { margin-top: 24px; font-size: var(--lp3-note); }
.prize-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 25px 14px;
  align-items: start;
  margin-top: 29px;
}
.prize-grid .prize-item,.zone-grid .zone-item,.series-set .zone-item,.identify-art .zone-item {
  min-width: 0;
  max-width: none;
  margin: 0;
}
.prize-grid .prize-item:nth-child(3n+1) { transform: rotate(-2deg); }
.prize-grid .prize-item:nth-child(3n+2) { transform: rotate(1.5deg); }
.prize-grid .prize-item:nth-child(3n) { transform: rotate(-1deg); }
.prize-grid .prize-item img,.zone-grid .zone-item img,.series-set .zone-item img,.identify-art .zone-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.page .prize-grid .product-label,.page .zone-grid .product-label {
  width: 100%;
  max-width: calc(100% - 6px);
  margin-top: 12px;
}
.page .prize-grid .product-label-name,.page .zone-grid .product-label-name {
  font-size: clamp(1rem,3.8vw,1.375rem);
}

/* Three links are whole paper stickers, with staggered edges. */
.page-entries {
  display: grid;
  gap: 20px;
  background: var(--ink);
}
.page-entry {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 150px;
  padding: 22px 21px 19px;
  color: var(--ink);
  transform: rotate(-1deg);
  transition: transform 200ms ease;
}
.page-entry:nth-child(2) { transform: rotate(1deg); }
.page-entry:nth-child(3) { transform: rotate(-.5deg); }
.page-entry::before,.page-entry::after,.series-set::before,.series-set::after,.not-found::before,.not-found::after {
  content: '';
  position: absolute;
  pointer-events: none;
  clip-path: polygon(0 3%,18% 0,39% 2%,61% 0,82% 2%,100% 0,99% 97%,75% 100%,48% 98%,22% 100%,0 98%);
}
.page-entry::before,.series-set::before,.not-found::before { inset: 0; z-index: -1; background: var(--paper); }
.page-entry::after,.series-set::after,.not-found::after { inset: 3px -3px -3px 3px; z-index: -2; background: var(--ink); }
.page-entry h3 { font-size: clamp(1.5rem,6vw,2rem); color: var(--red); }
.page-entry p { margin-top: 10px; font-size: var(--lp3-body); }
.page-entry span { margin-top: auto; padding-top: 15px; border-bottom: 2px solid var(--red); font-size: var(--lp3-note); font-weight: 900; }
.page-entry:hover,.page-entry:focus-visible { transform: rotate(0) translateY(-3px); }
.page-entry:focus-visible { outline: 3px solid var(--marker); outline-offset: 4px; }

/* Inner headings echo the home poster at a smaller scale. */
.inner-hero { position: relative; background: var(--ink); text-align: left; }
.inner-hero h1,.not-found h1 {
  max-width: 16ch;
  margin: 0;
  padding: 0;
  font-size: clamp(2.625rem,12vw,4.875rem);
  line-height: 1.18;
  letter-spacing: -.055em;
  transform: rotate(-2deg) skewX(-3deg);
  transform-origin: left center;
  text-shadow: 3px 3px 0 var(--ink),4px 5px 0 var(--ink);
}
.inner-hero > p {
  display: table;
  max-width: 58ch;
  margin-top: 23px;
  padding: 10px 14px;
  background: var(--ink);
  border-left: 3px solid var(--red);
  font-size: var(--lp3-body);
}
.inner-hero > p:empty { display: none; }
.inner-hero-art { position: relative; min-height: 250px; margin-top: 22px; }
.inner-hero-art picture { position: absolute; width: 43%; top: 8%; left: 5%; transform: rotate(-8deg); }
.inner-hero-art picture:nth-child(2) { top: 0; left: 29%; transform: rotate(4deg); }
.inner-hero-art picture:nth-child(3) { top: 24%; left: 56%; transform: rotate(9deg); }
.inner-hero-art img { width: 100%; height: auto; }

/* Series listings retain their image ratios and have a visible next-card peek. */
.series-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px var(--lp3-gutter);
  background: var(--ink);
}
.series-jumps a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #f1ead940;
  font-size: .875rem;
}
.series-jumps a:hover,.series-jumps a:focus-visible { background: var(--paper); color: var(--ink); }
.series-jumps a:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
.series-zone { background: var(--ink); }
.series-zone + .series-zone { border-top: 1px solid #f1ead940; }
.zone-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px 14px;
  margin-top: 28px;
}
.series-zone:has(.zone-grid > :nth-child(5)) > .zone-grid:first-of-type {
  grid-auto-columns: minmax(42%,42%);
  grid-auto-flow: column;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 14% 15px 4px;
  scrollbar-color: var(--paper) var(--ink);
}
.series-zone:has(.zone-grid > :nth-child(5)) > .zone-grid:first-of-type > * { scroll-snap-align: start; }
.series-zone > p { margin-top: 17px; font-size: var(--lp3-note); }
.series-zone > h3 { margin-top: 32px; font-size: 1.5rem; }
.page .series-zone.choose { display: block; color: var(--paper); background: var(--ink); }
.page .series-zone.choose > header h2 { color: var(--red); }
.series-zone.choose .pick-route { margin: 25px 0; padding: 0; background: none; color: var(--paper); }
.series-zone.choose .pick-route::before { display: none; }
.series-zone.choose .pick-route h3 { font-size: 1.5rem; color: var(--paper); }
.series-zone.choose .pick-route > span { display: table; margin-top: 5px; padding: 3px 8px; background: var(--ink); border-bottom: 2px solid var(--red); font-size: .875rem; }
.series-zone.choose .pick-route > p { max-width: 65ch; margin-top: 12px; font-size: var(--lp3-body); }
.series-zone.choose .character-compare {
  display: grid;
  grid-template-columns: none;
  grid-auto-columns: minmax(42%,42%);
  grid-auto-flow: column;
  gap: 20px 14px;
  height: auto;
  margin: 20px 0;
  padding: 4px 14% 15px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--paper) var(--ink);
}
.series-zone.choose .character-compare .zone-item { margin: 0; }
.series-zone.choose .character-compare .zone-item { scroll-snap-align: start; }
.series-zone.choose .specific-note { margin: 25px 0 0; padding: 19px; background: var(--paper); color: var(--ink); }
.series-zone.choose .specific-note h3 { color: var(--red); }
.series-zone.onepiece-pick { display: block; background: var(--ink); }
.series-zone.onepiece-pick > h3 { color: var(--red); }

/* Each package and its singles form one torn paper set. */
.series-set {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 15px;
  margin-top: 22px;
  padding: 21px 17px 23px;
  color: var(--ink);
}
.series-set h4 { font-size: 1.375rem; color: var(--red); }
.series-set-product,.series-set-singles { display: grid; min-width: 0; gap: 12px; }
.series-set-product { grid-template-columns: repeat(2,minmax(0,1fr)); }
.series-set-product > :only-child { grid-column: 1 / -1; max-width: 60%; margin-inline: auto; }
.series-set-singles { grid-template-columns: repeat(2,minmax(0,1fr)); }
.series-set .product-label { width: 100%; max-width: calc(100% - 6px); margin-top: 9px; }
.series-set .product-label-name { font-size: 1rem; }
.series-set .product-label-detail { font-size: .75rem; }

/* Product identification is a sequence of rows, not three equal cards. */
.identify { background: var(--ink); }
.identify-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 9px 17px;
  align-items: start;
  padding: 23px 0;
  border-top: 1px solid #f1ead940;
}
.identify-row h3 { grid-column: 1 / -1; color: var(--red); font-size: 1.5rem; }
.identify-row p { grid-column: 1; font-size: var(--lp3-body); }
.identify-art { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.identify-art > :only-child { grid-column: 1 / -1; max-width: 75%; margin: auto; }
.identify-art .product-label { width: 100%; max-width: calc(100% - 6px); margin-top: 7px; }
.identify-art .product-label-name { font-size: .9375rem; }
.identify-art .product-label-detail { font-size: .6875rem; }
.identify > p { margin-top: 16px; font-size: var(--lp3-note); }

.faq { background: var(--ink); }
.faq-item { max-width: 720px; border-top: 1px solid #f1ead940; }
.faq-item:last-child { border-bottom: 1px solid #f1ead940; }
.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 48px 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--lp3-body);
  font-weight: 900;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before,.faq-item summary::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--red);
  transform: translateY(-50%);
}
.faq-item summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] summary::after { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }
.faq-item > p { max-width: 65ch; padding: 0 28px 19px 0; font-size: var(--lp3-body); }

/* Support content and compact, dated image credits. */
#sources,#help,#data,#guides { background: var(--ink); border-top: 1px solid #f1ead940; }
#sources > p,#help > p,#data > p,#guides > p { max-width: 75ch; margin-top: 14px; font-size: var(--lp3-body); }
#data p a,#guides p a { display: inline; text-decoration: underline; text-underline-offset: 4px; }
.source-list { margin-top: 23px; }
.source-list summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  padding: 8px 13px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--lp3-note);
  font-weight: 900;
}
.source-list summary:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }
.source-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.source-grid li {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  justify-items: start;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: .8125rem;
  overflow-wrap: anywhere;
}
.source-grid img { width: 64px; height: 64px; max-width: 100%; object-fit: contain; }
.source-grid img { grid-row: span 2; }
.source-grid time { font-size: .75rem; font-variant-numeric: tabular-nums; }
#spend.spend { padding: 36px var(--lp3-gutter); background: var(--ink); color: var(--paper); }
#spend > h2,#spend > h3 { font-weight: 900; }
#spend > h2 { font-size: .875rem; }
#spend > h3 { margin-top: 8px; font-size: clamp(1.875rem,8vw,3rem); color: var(--red); }
#spend > p,#spend details p { max-width: 70ch; margin-top: 14px; font-size: var(--lp3-body); line-height: 1.75; }
#spend details { max-width: 720px; margin-top: 20px; border-block: 1px solid #f1ead940; }
#spend summary { display: flex; align-items: center; min-height: 54px; cursor: pointer; }
#spend summary:focus-visible { outline: 3px solid var(--marker); }
#spend > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; border-bottom: 2px solid var(--paper); }

/* Footer is outside .page, so reset the generic prototype footer layout. */
.site-footer {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px var(--lp3-gutter);
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid #f1ead940;
  font-size: var(--lp3-note);
}
.site-footer :is(p,a) { line-height: 1.7; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f1ead940;
}
.footer-top img { width: 128px; height: auto; padding: 8px; background: var(--paper); transform: rotate(-2deg); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 900; text-decoration: underline; text-underline-offset: 4px; transition: transform 180ms ease; }
.site-footer a:hover,.site-footer a:focus-visible { transform: translateY(-2px); }
.site-footer a:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }
.footer-columns {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px 15px;
  padding: 25px 0;
}
.footer-columns > p { grid-column: 1 / -1; max-width: 60ch; margin: 0; }
.footer-columns nav { display: grid; align-content: start; min-width: 0; }
.footer-columns h2 { margin: 0 0 8px; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.footer-columns a { width: fit-content; }
.site-footer a[aria-current="page"] { padding: 0 7px; background: var(--red); color: var(--paper); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  padding-top: 21px;
  border-top: 1px solid #f1ead940;
}
.footer-bottom p { max-width: 85ch; margin: 0; font-size: .8125rem; }
.footer-bottom > a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; background: var(--red); color: var(--paper); border: 1px solid var(--paper); box-shadow: 3px 3px 0 var(--paper); font-size: 1rem; font-weight: 900; text-decoration: none; }
.footer-bottom > a:hover { background: var(--paper); color: var(--red); text-decoration: none; }
.footer-bottom > a:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }

.not-found {
  position: relative;
  isolation: isolate;
  max-width: 1116px;
  min-height: 340px;
  margin: 35px auto;
  padding: 42px var(--lp3-gutter);
  color: var(--ink);
}
.not-found h1 { color: var(--red); text-shadow: 2px 2px 0 var(--paper); }
.not-found p { margin-top: 25px; font-size: var(--lp3-body); }
.not-found a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 18px 12px 0 0;
  padding: 9px 14px;
  background: var(--red);
  color: var(--paper);
  font-weight: 900;
  transition: transform 180ms ease;
}
.not-found a:hover,.not-found a:focus-visible { transform: translateY(-2px); }
.not-found a:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }

@media (min-width: 768px) {
  .page :is(.prize-wall,.page-entries,.inner-hero,.series-zone,.identify,.faq,#sources,#help,#data,#guides,.not-found) { padding-block: 50px; }
  .site-nav { grid-template-columns: repeat(4,minmax(0,125px)); justify-content: start; gap: 9px; }
  .site-nav a { padding-inline: 10px; }
  .prize-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px 22px; }
  .prize-grid [data-p0="20"],.prize-grid [data-p0="23"] { grid-column: span 2; }
  .prize-grid .prize-item:nth-last-child(-n+2) { grid-column: span 2; }
  .prize-grid { grid-auto-flow: dense; }
  .page-entries { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 22px; }
  .page-entry { min-height: 260px; }
  .inner-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); align-items: center; gap: 0 30px; }
  .inner-hero h1,.inner-hero > p { grid-column: 1; }
  .inner-hero-art { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-height: 330px; }
  .zone-grid,.series-zone:has(.zone-grid > :nth-child(5)) > .zone-grid:first-of-type {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-auto-columns: auto;
    grid-auto-flow: row;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  .series-zone.choose .character-compare { grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-flow: row; overflow: visible; padding: 0; scroll-snap-type: none; }
  .series-set { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 18px 27px; padding: 27px; }
  .series-set h4 { grid-column: 1 / -1; }
  .series-set-product { grid-column: 1; }
  .series-set-singles { grid-column: 2; align-content: center; }
  .series-set:nth-of-type(even) .series-set-product { grid-column: 2; grid-row: 2; }
  .series-set:nth-of-type(even) .series-set-singles { grid-column: 1; grid-row: 2; }
  .identify-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 35px; }
  .identify-row:nth-of-type(even) { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .identify-row h3,.identify-row p { grid-column: 1; }
  .identify-art { grid-column: 2; grid-row: 1 / span 2; }
  .identify-row:nth-of-type(even) h3,.identify-row:nth-of-type(even) p { grid-column: 2; }
  .identify-row:nth-of-type(even) .identify-art { grid-column: 1; }
  .source-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .source-grid li { grid-template-columns: 64px minmax(0,1fr); gap: 3px 9px; }
  .source-grid img { grid-row: span 2; }
  .footer-columns { grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap: 30px; }
  .footer-columns > p { grid-column: 1; }
  .footer-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
  .footer-bottom > a { margin-left: auto; }
}
@media (min-width: 1024px) {
  .zone-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .series-zone.choose .character-compare { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 359px) {
  .source-grid li { padding: 7px; }
  .source-grid img { width: 56px; height: 56px; }
  .page-entry { padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .page :is(.site-nav a,.page-entry,.prize-item,.zone-item,.series-jumps a,.not-found a),
  .site-footer a { transition: none; }
  .page :is(.site-nav a,.page-entry,.not-found a):hover,
  .page :is(.site-nav a,.page-entry,.not-found a):focus-visible,
  .site-footer a:hover,.site-footer a:focus-visible { transform: none; }
}