/* 02 Poster, concept.css: the homepage concept CSS (its own header and drawer removed; the shared nav is ../assets/nav.css), then every interior, then the light and dark theme tokens. */

/* ---------- 02 POSTER: scope, zero radii, hard rules ---------- */
body[data-concept="02"] {
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-pill: 0;
  --rule: 1px solid var(--bs-body-color);
}
body[data-concept="02"] .btn { --bs-btn-border-radius: 0; }
body[data-concept="02"] .card { --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; }
body[data-concept="02"] .badge, body[data-concept="02"] .badge-sale, body[data-concept="02"] .badge-new, body[data-concept="02"] .flag, body[data-concept="02"] .dot-stock { border-radius: 0; }
body[data-concept="02"] .card-lift:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--po-shadow); }
body[data-concept="02"] .po-mono { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
body[data-concept="02"] .po-rule-top { border-top: var(--rule); }
body[data-concept="02"] .po-rule-bottom { border-bottom: var(--rule); }
body[data-concept="02"] .po-ico { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Hero ---------- */
.po-hero { position: relative; overflow: hidden; }
.po-hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.po-stack { font-size: clamp(64px, 23vw, 260px); line-height: .86; letter-spacing: -.01em; margin: 0; padding: 20px 16px 0; text-wrap: initial; }
.po-stack span { display: block; }
.po-stack .po-teal { color: var(--po-accent); -webkit-text-stroke: 1.5px var(--po-accent-stroke); paint-order: stroke fill; }
.po-hero-copy { padding: 20px 16px 24px; }
.po-hero-copy .lede { max-width: 42ch; margin: 0 0 18px; }
.po-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.po-trust { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; border-top: var(--rule); }
.po-trust li { flex: 1 1 100%; padding: 12px 16px; border-bottom: var(--rule); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.po-trust li:last-child { border-bottom: 0; }
.po-trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bs-primary-text-emphasis); }
.po-window { position: relative; border-top: var(--rule); border-bottom: var(--rule); aspect-ratio: 16 / 9; background: var(--ink); }
.po-window video { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-window-tag { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: var(--po-tag-bg); color: var(--po-tag-fg); border-top: 1px solid var(--po-tag-fg); border-right: 1px solid var(--po-tag-fg); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 768px) {
  .po-hero-grid { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .po-stack { font-size: clamp(64px, 17vw, 260px); padding: 28px 32px 0; }
  .po-hero-copy { padding: 24px 32px 32px; }
  .po-window { border-top: 0; border-bottom: 0; border-left: var(--rule); aspect-ratio: auto; min-height: 100%; }
  .po-window video { position: absolute; inset: 0; }
  .po-trust { border-top: var(--rule); }
  .po-trust li { flex: 1 1 auto; padding: 14px 32px; border-bottom: 0; border-right: var(--rule); }
  .po-trust li:last-child { border-right: 0; }
}

/* ---------- Ticker ---------- */
.po-ticker { position: relative; overflow: hidden; border-top: var(--rule); border-bottom: var(--rule); padding: 14px 0; }
.po-tick-track { display: flex; width: max-content; gap: 0; animation: po-tick 70s linear infinite; }
.po-ticker:hover .po-tick-track { animation-play-state: paused; }
.po-tick-list { display: flex; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.po-tick-list li { font-family: var(--mono); font-size: max(14px, 1.05rem); letter-spacing: .14em; text-transform: uppercase; padding: 0 22px; display: flex; align-items: center; gap: 22px; }
.po-tick-list li::after { content: ""; width: 6px; height: 6px; background: var(--teal); flex-shrink: 0; }
@keyframes po-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.po-stamp-free { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(6deg); background: var(--coral); color: var(--po-stamp-ink); font-family: var(--mono); font-weight: 700; font-size: max(14px, 1rem); letter-spacing: .12em; text-transform: uppercase; padding: 16px 20px; border: 3px solid var(--po-stamp-ink); outline: 3px solid var(--coral); white-space: nowrap; z-index: 2; }
@media (min-width: 768px) { .po-stamp-free { left: auto; right: 10vw; font-size: max(14px, 1.15rem); } }

/* ---------- Products ---------- */
.po-grid { border-top: var(--rule); border-left: var(--rule); }
.po-prod { position: relative; border-right: var(--rule); border-bottom: var(--rule); background: var(--bs-body-bg); overflow: hidden; display: flex; flex-direction: column; min-height: 520px; }
.po-num { position: absolute; right: 8px; top: -14px; font-family: Anton, "Arial Narrow", sans-serif; font-size: clamp(120px, 14vw, 200px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--bs-body-color); opacity: .45; pointer-events: none; z-index: 0; user-select: none; }
.po-prod-img { position: relative; z-index: 1; aspect-ratio: 1 / 1; margin: 56px 24px 0; display: flex; align-items: center; justify-content: center; background: var(--po-tile); border: 1px solid var(--po-tile-line); }
.po-prod-img img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.po-prod-body { position: relative; z-index: 1; padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.po-prod-kicker { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); display: flex; justify-content: space-between; gap: 10px; }
.po-prod h3 { font-size: max(14px, clamp(26px, 2.4vw, 32px)); margin: 0; }
.po-prod h3 a { color: inherit; text-decoration: none; }
.po-stock { display: inline-flex; align-items: center; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-prod-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: var(--rule); }
.po-prod-foot .price { font-size: max(14px, 1.15rem); }
.po-stamp { position: absolute; z-index: 2; left: 16px; top: 18px; transform: rotate(-6deg); background: var(--po-stamp-bg); border: 2px solid var(--coral); outline: 2px solid var(--coral); outline-offset: 2px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 10px; }
.po-stamp .price { font-size: max(14px, 1.05rem); font-weight: 700; }
.po-stamp .price ins { color: var(--po-coral-txt); }
.po-kitbtn { position: relative; z-index: 3; font-size: max(14px, .875rem); padding: .7rem .9rem .6rem; }
.po-kitbtn svg { transition: transform .25s var(--ease); }
.po-kitbtn[aria-pressed="true"] { --bs-btn-bg: var(--po-solid); --bs-btn-color: var(--po-on-solid); --bs-btn-border-color: var(--po-solid); --bs-btn-hover-bg: var(--po-solid-hover); --bs-btn-hover-color: var(--po-on-solid); --bs-btn-hover-border-color: var(--po-solid-hover); }
.po-kitbtn[aria-pressed="true"] svg { transform: rotate(45deg); }
.po-kitbtn .po-lbl-off, .po-kitbtn[aria-pressed="true"] .po-lbl-on { display: inline; }
.po-kitbtn .po-lbl-on, .po-kitbtn[aria-pressed="true"] .po-lbl-off { display: none; }
.po-prod.is-picked { background: var(--bs-tertiary-bg); }
.po-prod.is-picked .po-num { opacity: 1; color: var(--po-accent); -webkit-text-stroke: 1px var(--po-accent-stroke); }
.no-js .po-kitbtn { display: none; }
.po-link-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- Kit tally chip ---------- */
.po-kit { position: fixed; right: 16px; bottom: 16px; z-index: 65; width: min(320px, calc(100vw - 32px)); padding: 14px 16px; text-decoration: none; border: 1px solid var(--bs-body-color); box-shadow: 8px 8px 0 var(--po-kit-shadow); visibility: hidden; opacity: 0; transform: translateY(24px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.po-kit.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.po-kit:hover { box-shadow: 4px 4px 0 var(--po-kit-shadow); }
.po-kit-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: max(14px, .95rem); letter-spacing: .06em; text-transform: uppercase; }
.po-kit-line b { font-weight: 700; }
.po-kit-bar { display: block; height: 8px; margin: 10px 0 8px; background: var(--po-kit-track); border: 1px solid var(--bs-body-color); position: relative; overflow: hidden; }
.po-kit-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pct, 0) * 1%); background: var(--teal); transition: width .45s var(--ease), background-color .3s; }
.po-kit.is-free .po-kit-bar i { background: var(--volt); }
.po-kit-ship { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-kit.is-free .po-kit-ship { color: var(--volt); }
.po-kit-ship svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 767.98px) { .po-kit { z-index: 55; bottom: calc(var(--po-mbar-h, calc(72px + env(safe-area-inset-bottom))) + 12px); right: 12px; width: calc(100vw - 24px); } }
@media (min-width: 768px) { .po-kit { right: 24px; bottom: 24px; } }

/* ---------- Regions index ---------- */
.po-index { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.po-index li { border-bottom: var(--rule); }
.po-index-link { display: grid; grid-template-columns: 56px 1fr 44px; gap: 8px 12px; align-items: start; padding: 18px 0; text-decoration: none; color: var(--bs-body-color); transition: transform .3s var(--ease); }
.po-index-link .po-n { font-family: var(--mono); font-size: max(14px, .95rem); letter-spacing: .08em; padding-top: 10px; color: var(--bs-secondary-color); }
.po-index-link .po-region { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: max(14px, 34px); line-height: .95; letter-spacing: .005em; text-wrap: balance; }
.po-index-link .po-ports { grid-column: 2; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-index-link .po-arrow { grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--teal); opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.po-index-link .po-arrow svg { width: 28px; height: 28px; }
.po-index-link:hover, .po-index-link:focus-visible { transform: translateX(12px); }
.po-index-link:hover .po-region, .po-index-link:focus-visible .po-region { color: var(--bs-primary-text-emphasis); }
.po-index-link:hover .po-arrow, .po-index-link:focus-visible .po-arrow { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .po-index-link { padding: 22px 0; grid-template-columns: 64px 1fr 44px; }
  .po-index-link .po-region { font-size: max(14px, 48px); }
  .po-index-cols > [class*="col-"]:first-child .po-index { border-top: var(--rule); }
  .po-index-cols > [class*="col-"]:last-child .po-index { border-top: var(--rule); }
}
.po-index-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }

/* ---------- Story (black band) ---------- */
.po-story { position: relative; overflow: hidden; }
.po-water { position: absolute; left: -2vw; top: 50%; transform: translateY(-50%); font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 22vw; line-height: .9; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--bs-body-color); opacity: .22; pointer-events: none; user-select: none; }
.po-story-inner { position: relative; z-index: 1; }
.po-story p { max-width: 58ch; }
.po-story-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--bs-body-color); }
.po-story-photos figure { margin: 0; position: relative; aspect-ratio: 4 / 5; }
.po-story-photos figure + figure { border-left: 1px solid var(--bs-body-color); }
.po-story-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-story-photos figcaption { position: absolute; left: 0; bottom: 0; background: var(--po-tag-bg); color: var(--po-tag-fg); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; }
.po-story .po-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bs-body-color); }
.po-story .po-lines li { padding: 12px 0; border-bottom: 1px solid var(--bs-body-color); font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: max(14px, clamp(22px, 2.4vw, 32px)); line-height: .95; display: flex; gap: 14px; align-items: baseline; }
.po-story .po-lines li span { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; color: var(--bs-secondary-color); }

/* ---------- Journal (newspaper rows) ---------- */
.po-news { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.po-news li { border-bottom: var(--rule); }
.po-news a { display: grid; grid-template-columns: 56px 1fr; gap: 12px 16px; align-items: center; padding: 20px 0; text-decoration: none; color: var(--bs-body-color); }
.po-news a:hover h3, .po-news a:focus-visible h3 { color: var(--bs-primary-text-emphasis); }
.po-news .po-n { font-family: var(--mono); font-size: max(14px, .95rem); letter-spacing: .08em; color: var(--bs-secondary-color); align-self: start; padding-top: 6px; }
.po-news h3 { margin: 0; font-size: max(14px, clamp(26px, 3.2vw, 40px)); }
.po-news .po-meta { grid-column: 2; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); display: flex; gap: 14px; align-items: center; }
.po-news .po-meta svg { width: 18px; height: 18px; color: var(--teal); }
.po-news img { display: none; }
@media (min-width: 768px) {
  .po-news a { grid-template-columns: 64px 1fr 120px; }
  .po-news img { display: block; width: 120px; height: 120px; object-fit: cover; grid-column: 3; grid-row: 1 / span 2; filter: grayscale(1); border: var(--rule); }
  .po-news a:hover img { filter: none; }
}

/* ---------- Community strip ---------- */
.po-crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule); border-bottom: var(--rule); }
.po-crew a { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; outline-offset: -3px; }
.po-crew img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .35s var(--ease), transform .6s var(--ease); }
.po-crew a:hover img, .po-crew a:focus-visible img { filter: none; transform: scale(1.03); }
@media (min-width: 768px) { .po-crew { grid-template-columns: repeat(6, 1fr); } }
.po-crew-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; padding: 20px 16px; }
@media (min-width: 768px) { .po-crew-head { padding: 24px 32px; } }

/* ---------- Final CTA ---------- */
.po-final { border-top: var(--rule); }
.po-final-stack { font-size: clamp(56px, 13vw, 180px); line-height: .9; margin: 0 0 20px; }
.po-final-stack span { display: block; }
.po-final-stack .po-teal { color: var(--po-accent); -webkit-text-stroke: 1.5px var(--po-accent-stroke); paint-order: stroke fill; }
.po-final-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; border-top: var(--rule); border-bottom: var(--rule); }
.po-final-facts li { flex: 1 1 200px; padding: 14px 0; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-final-facts li b { display: block; font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400; font-size: max(14px, 1.6rem); letter-spacing: .005em; margin-bottom: 4px; }

/* ---------- Footer ---------- */
.po-footer { border-top: 1px solid var(--bs-body-color); }
.po-footer .po-logo img { height: 20px; }
.po-footer h4 { font-family: var(--mono); font-weight: 500 !important; font-size: max(14px, .875rem); letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); margin: 0 0 10px; }
.po-footer ul { list-style: none; margin: 0; padding: 0; }
.po-footer ul a { display: inline-block; padding: 6px 0; color: var(--bs-body-color); text-decoration: none; font-weight: 500; }
.po-footer ul a:hover { color: var(--bs-primary-text-emphasis); text-decoration: underline; }
.po-fine { border-top: 1px solid var(--po-fine-rule); margin-top: 32px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: var(--bs-secondary-color); }
.po-fine a { color: inherit; }
.po-fine a:hover { color: var(--bs-primary-text-emphasis); }

/* ---------- Motion fallbacks ---------- */
.po-reveal-row { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.po-reveal-row.is-visible { opacity: 1; transform: none; }
.no-js .po-reveal-row { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .po-crew a { animation: po-in linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
  @keyframes po-in { from { opacity: .3; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .po-tick-track { animation: none; }
  .po-crew a { animation: none; }
  .po-index-link, .po-index-link .po-arrow, .po-kit, .po-kitbtn svg, .po-crew img { transition: none; }
}

/* ================================================================
   02 POSTER, interiors. Same language as the homepage: paper ground, hard 1px rules,
   zero radii, Anton stacks, mono index numbers, rubber stamps. Brand tokens only.
   ================================================================ */
body[data-concept="02"] [data-bs-theme] { --rule: 1px solid var(--bs-body-color); --rule2: 2px solid var(--bs-body-color); }
body[data-concept="02"] { --rule2: 2px solid var(--bs-body-color); }
body[data-concept="02"] .form-control, body[data-concept="02"] .form-select { border-radius: 0; border: 1px solid var(--bs-body-color); background-color: var(--bs-body-bg); color: var(--bs-body-color); }
body[data-concept="02"] .form-control:focus, body[data-concept="02"] .form-select:focus { border-color: var(--bs-body-color); box-shadow: 0 0 0 3px var(--teal); }
.po-wrap { width: min(1440px, 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .po-wrap { width: min(1440px, 100% - 64px); } }
.po-pad { padding-block: var(--gap); }
.po-n { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; color: var(--bs-secondary-color); font-weight: 400; }

/* ---------- masthead: sheet number, crumbs, the giant stack ---------- */
.po-mast { border-bottom: var(--rule); position: relative; }
.po-mast-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding: 10px 0; border-bottom: var(--rule); }
.po-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-crumbs li { display: flex; align-items: center; min-width: 0; }
.po-crumbs li + li::before { content: "/"; padding: 0 10px; color: var(--bs-secondary-color); }
.po-crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: var(--bs-body-color); text-decoration: underline; text-underline-offset: 3px; }
.po-crumbs a:hover { color: var(--bs-primary-text-emphasis); }
.po-crumbs [aria-current] { color: var(--bs-secondary-color); max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-sheet { display: flex; gap: 16px; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-sheet-l { color: var(--bs-body-color); }
.po-mast-eb { margin: 20px 0 0; }
.po-fit { container-type: inline-size; padding-top: 14px; }
.po-giant { font-size: min(var(--cap), calc((100vw - 96px) / var(--w))); line-height: .88; letter-spacing: -.01em; margin: 0; text-wrap: nowrap; }
@supports (width: 1cqi) { .po-giant { font-size: min(var(--cap), calc(100cqi / var(--w))); } }
.po-giant span { display: block; white-space: nowrap; }
.po-giant .po-teal { color: var(--po-accent); -webkit-text-stroke: 1.5px var(--po-accent-stroke); paint-order: stroke fill; }
.po-mast-foot { display: grid; gap: 16px 40px; margin-top: 22px; padding: 18px 0 22px; border-top: var(--rule); }
.po-mast-foot > :only-child { grid-column: 1 / -1; }
@media (min-width: 992px) { .po-mast-foot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } }
.po-mast-lede { max-width: 58ch; color: var(--bs-body-color); }
.po-mast-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: var(--rule); }
.po-mast-facts li { padding: 2px 12px; border-right: var(--rule); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-mast-facts b { display: block; font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400; font-size: max(14px, clamp(28px, 3vw, 46px)); line-height: 1; letter-spacing: 0; color: var(--bs-body-color); margin-bottom: 4px; }
.po-mast-quiet .po-fit { padding-bottom: 20px; }
.po-404-code { font-family: Anton, "Arial Narrow", sans-serif; font-size: clamp(120px, 30vw, 400px); line-height: .8; letter-spacing: -.02em; margin: 18px 0 0; color: transparent; -webkit-text-stroke: 2px var(--bs-body-color); }
.po-404 .po-cta { justify-self: end; }

/* ---------- section heads ---------- */
.po-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: end; padding-top: 14px; border-top: var(--rule2); margin-bottom: clamp(22px, 3vw, 40px); }
.po-head-n { align-self: start; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; padding: 6px 8px; border: var(--rule); line-height: 1; }
.po-head-t h2 { margin: 0; }
.po-head-a { grid-column: 1 / -1; }
.po-head-a .lede { max-width: 52ch; }
@media (min-width: 992px) { .po-head { grid-template-columns: auto minmax(0, 1fr) auto; } .po-head-a { grid-column: auto; justify-self: end; } }

/* ---------- product cards (numbered poster grid) ---------- */
.po-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); }
@media (min-width: 992px) {
  .po-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .po-cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.po-card { min-height: 0; color: var(--bs-body-color); text-decoration: none; }
.po-card[hidden] { display: none !important; }
.po-card .po-num { font-size: clamp(80px, 8.4vw, 150px); top: -8px; right: 6px; opacity: .35; }
.po-card .po-prod-img { position: relative; z-index: 1; display: block; margin: 44px 12px 0; aspect-ratio: 1 / 1; background: var(--po-tile); border: 1px solid var(--po-tile-line); }
.po-card .po-prod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .35s var(--ease); }
.po-card .po-img2 { opacity: 0; }
@media (hover: hover) {
  .po-card .po-prod-img:has(.po-img2):hover img:first-child, a.po-card:has(.po-img2):hover .po-prod-img img:first-child { opacity: 0; }
  .po-card .po-prod-img:hover .po-img2, a.po-card:hover .po-img2 { opacity: 1; }
}
.po-card .po-prod-body { padding: 10px 12px 14px; gap: 6px; }
.po-card .po-prod-kicker { flex-direction: column; gap: 2px; }
.po-card-t { font-size: max(14px, clamp(20px, 1.9vw, 28px)); margin: 0; }
.po-card-t a { color: inherit; text-decoration: none; }
.po-card-t a:hover { color: var(--bs-primary-text-emphasis); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.po-card .po-prod-foot { flex-wrap: wrap; gap: 10px; }
.po-card .po-add { width: 100%; padding-inline: 10px; font-size: max(14px, .875rem); }
@media (min-width: 768px) { .po-card .po-prod-kicker { flex-direction: row; } .po-card .po-prod-body { padding: 12px 18px 18px; } .po-card .po-prod-img { margin: 52px 22px 0; } }
@media (min-width: 1200px) { .po-card .po-add { width: auto; } }
.po-add .po-l2 { display: none; }
.po-add.is-added .po-l1 { display: none; }
.po-add.is-added .po-l2 { display: inline; }
.po-add.is-added { --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--teal); --bs-btn-hover-color: var(--ink); }
.po-viewd { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-viewd svg { width: 16px; height: 16px; }
a.po-card { display: flex; }
a.po-card:hover { box-shadow: inset 0 0 0 2px var(--bs-body-color); }
a.po-card:hover .po-viewd, a.po-card:hover .po-card-t { color: var(--bs-primary-text-emphasis); }
.po-card.is-sold .po-prod-img img { filter: grayscale(1); opacity: .75; }
.po-card.is-picked { background: var(--bs-tertiary-bg); }
.po-card.is-picked .po-num { opacity: 1; color: var(--po-accent); -webkit-text-stroke: 1px var(--po-accent-stroke); }
.po-inkit { display: inline-block; align-self: flex-start; background: var(--po-inkit-bg); color: var(--po-inkit-fg); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; }
.po-inkit:empty { display: none; }
.po-inkit-home { position: absolute; z-index: 3; right: 12px; bottom: 96px; }
.po-stock.is-out { color: var(--bs-secondary-color); }
.po-stamp-t { font-family: var(--mono); font-weight: 700; font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; color: var(--po-coral-txt); }
.po-card .po-stamp, .po-gal-main .po-stamp { left: 10px; top: 12px; }
.po-stamp-out { border-color: var(--po-stamp-fg); outline-color: var(--po-stamp-fg); font-family: var(--mono); font-weight: 700; font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; color: var(--po-stamp-fg); }

/* ---------- chips and tools ---------- */
.po-chips { overflow-x: auto; scrollbar-width: thin; margin: 0 0 4px; padding: 1px 0 2px 1px; }
.po-chips ul { display: flex; list-style: none; margin: 0; padding: 0; width: max-content; }
@media (min-width: 992px) { .po-chips ul { flex-wrap: wrap; width: auto; } }
.po-chips a, .po-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; margin: 0 -1px -1px 0; border: var(--rule); background: transparent; color: var(--bs-body-color); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; }
.po-chips a span, .po-chip span { color: var(--bs-secondary-color); }
.po-chips a:hover, .po-chip:hover { background: var(--teal); color: var(--ink); }
.po-chips a:hover span, .po-chip:hover span { color: var(--ink); }
.po-chips a[aria-current], .po-chip[aria-pressed="true"] { background: var(--po-solid); color: var(--po-on-solid); }
.po-chips a[aria-current] span, .po-chip[aria-pressed="true"] span { color: var(--po-on-solid-acc); }
.po-shop { padding-top: 22px; padding-bottom: var(--gap); }
.po-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 12px 0; margin-top: 14px; border-top: var(--rule); }
.po-tools-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.po-status { color: var(--bs-secondary-color); }
.po-sortl { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-sortl .form-select { width: auto; min-height: 44px; font-family: var(--mono); font-size: max(14px, .9375rem); text-transform: none; letter-spacing: 0; }
.po-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; cursor: pointer; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-switch input { position: absolute; left: 0; top: 50%; width: 46px; height: 26px; margin: -13px 0 0; opacity: 0; cursor: pointer; }
.po-switch-ui { position: relative; width: 46px; height: 26px; flex-shrink: 0; border: var(--rule); background: var(--bs-body-bg); transition: background-color .2s var(--ease); }
.po-switch-ui::after { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; background: var(--bs-body-color); transition: transform .2s var(--ease); }
.po-switch input:checked + .po-switch-ui { background: var(--teal); }
.po-switch input:checked + .po-switch-ui::after { transform: translateX(20px); background: var(--ink); }
.po-switch input:focus-visible + .po-switch-ui { outline: 3px solid var(--teal); outline-offset: 3px; }
.po-filter-empty { padding: 28px 0 0; }
.po-notes { border-top: var(--rule); }
.po-notes-tag { padding-top: 10px; border-top: 4px solid var(--bs-body-color); }

/* ---------- prose ---------- */
.po-prose { max-width: 68ch; font-size: max(14px, 1.0625rem); line-height: 1.62; }
.po-prose-lg { font-size: max(14px, clamp(17px, 1.25vw, 19px)); }
.po-prose > :first-child { margin-top: 0; }
.po-prose > :last-child { margin-bottom: 0; }
.po-prose h2 { font-size: max(14px, clamp(28px, 3vw, 40px)); margin: 1.5em 0 .5em; }
.po-prose h3 { font-size: max(14px, clamp(22px, 2vw, 28px)); margin: 1.4em 0 .4em; }
.po-prose a { color: var(--bs-body-color); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.po-prose a:hover { color: var(--bs-primary-text-emphasis); }
.po-prose strong { font-weight: 700; }
.po-prose ul { list-style: none; padding-left: 0; }
.po-prose ul > li { position: relative; padding-left: 22px; margin-bottom: .45em; }
.po-prose ul > li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--teal); }
.po-prose ol { list-style: none; padding-left: 0; counter-reset: po-ol; }
.po-prose ol > li { position: relative; padding-left: 40px; margin-bottom: .55em; counter-increment: po-ol; }
.po-prose ol > li::before { content: counter(po-ol, decimal-leading-zero); position: absolute; left: 0; top: .18em; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; color: var(--bs-secondary-color); }
.po-table { max-width: 100%; overflow-x: auto; margin: 1.3em 0; border: var(--rule); }
.po-table:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.po-table table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: max(14px, .9375rem); }
.po-table caption { caption-side: top; padding: 10px 12px; border-bottom: var(--rule); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-table th, .po-table td { padding: 10px 12px; border-bottom: var(--rule); text-align: left; vertical-align: top; }
.po-table th { background: var(--bs-body-color); color: var(--bs-body-bg); font-family: var(--mono); font-weight: 500; font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-table th + th { border-left: 1px solid var(--po-th-rule); }
.po-table td + td { border-left: var(--rule); }
.po-table tr:last-child td { border-bottom: 0; }
.po-table td:first-child { font-weight: 700; }

/* ---------- product page: the spec poster ---------- */
.po-pdp-grid { display: grid; gap: 22px; padding: 16px 0 var(--gap); }
@media (min-width: 992px) {
  .po-pdp-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 0; padding-top: 0; }
  .po-gallery { padding: 24px 36px 0 0; }
  .po-buy { padding: 24px 0 0 36px; border-left: var(--rule); }
}
.po-gallery { position: relative; min-width: 0; }
.po-gal-main { position: relative; margin: 0; border: 1px solid var(--po-tile-edge); background: var(--white); aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .po-gal-main { aspect-ratio: 5 / 4; } }
.po-gal-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.po-thumbs { list-style: none; display: flex; margin: 0; padding: 0; border-left: 1px solid var(--po-tile-edge); }
.po-thumbs li { width: 20%; max-width: 96px; }
.po-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 4px; border: 0; border-right: 1px solid var(--po-tile-edge); border-bottom: 1px solid var(--po-tile-edge); background: var(--white); cursor: pointer; }
.po-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.po-thumb:hover { background: var(--sand); }
.po-thumb[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.po-thumb:focus-visible { outline-offset: -3px; }
@media (max-width: 767.98px) {
  .po-pdp .po-sheet { display: none; }
  .po-pdp .po-gal-main { aspect-ratio: 16 / 10; }
  .po-pdp .po-thumbs li { width: 52px; }
  .po-pdp-grid { gap: 14px; padding-top: 10px; }
}
.po-buy { position: relative; min-width: 0; }
.po-buy > * { position: relative; z-index: 1; }
.po-buy > .po-bignum { position: absolute; z-index: 0; right: -4px; top: -6px; font-family: Anton, "Arial Narrow", sans-serif; font-size: clamp(120px, 19vw, 300px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--bs-body-color); opacity: .2; pointer-events: none; user-select: none; }
.po-buy-kick { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: var(--rule); }
.po-fit-buy { padding-top: 12px; }
.po-pricebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 6px; }
.po-price-lg { font-size: max(14px, clamp(22px, 2vw, 28px)); font-weight: 700; }
.po-price-lg del { font-weight: 400; font-size: .7em; }
.po-save { display: inline-block; transform: rotate(-5deg); padding: 5px 10px; border: 2px solid var(--coral); outline: 2px solid var(--coral); outline-offset: 2px; background: var(--po-stamp-bg); color: var(--po-coral-txt); font-family: var(--mono); font-weight: 700; font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; }
.po-stockline { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-stockline.is-out { color: var(--bs-secondary-color); }
.po-out-mark { width: 10px; height: 10px; border: 2px solid currentColor; }
.po-sizes { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.po-legend { float: none; display: flex; width: 100%; margin: 0 0 8px; padding: 0; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-sel { margin-left: 8px; font-weight: 700; }
.po-size-table { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); }
.po-size { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; margin: 0; padding: 6px 4px; border-right: var(--rule); border-bottom: var(--rule); text-align: center; cursor: pointer; }
.po-size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.po-size b { font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400; font-size: max(14px, 1.375rem); line-height: 1; }
.po-size-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.po-size-chest, .po-size-st { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .02em; color: var(--bs-secondary-color); line-height: 1.15; }
.po-size:not(.is-off) .po-size-st { display: none; }
.po-size:not(.is-off):hover { background: var(--po-hover); }
.po-size:has(input:checked) { background: var(--po-solid); color: var(--po-on-solid); }
.po-size:has(input:checked) .po-size-chest, .po-size:has(input:checked) .po-size-st { color: var(--po-on-solid-mute); }
.po-size:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: -3px; }
.po-size.is-off { cursor: not-allowed; color: var(--bs-secondary-color); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--po-stripe) 8px 9px); }
.po-size.is-off b { text-decoration: line-through; }
.po-size.is-off input { cursor: not-allowed; }
.po-size.is-off .po-size-st { color: var(--po-coral-txt); font-weight: 700; text-transform: uppercase; }
@media (min-width: 992px) {
  .po-size { min-height: 84px; gap: 4px; }
  .po-size:not(.is-off) .po-size-st { display: block; }
  .po-size b { font-size: max(14px, 1.625rem); }
}
.po-sizelink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-body-color); text-decoration: underline; text-underline-offset: 3px; }
.po-sizelink:hover { color: var(--bs-primary-text-emphasis); }
.po-sizelink svg { width: 16px; height: 16px; }
.po-addrow { display: flex; gap: 10px; }
.po-qty { display: inline-flex; align-items: stretch; flex-shrink: 0; border: 1px solid var(--bs-body-color); background: var(--bs-body-bg); }
.po-qty button { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--bs-body-color); cursor: pointer; }
.po-qty button:hover { background: var(--po-hover); }
.po-qty button svg { width: 16px; height: 16px; }
.po-qty input { width: 48px; padding: 0; border: 0; border-left: var(--rule); border-right: var(--rule); background: transparent; color: inherit; text-align: center; font-family: var(--mono); font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.po-qty input::-webkit-outer-spin-button, .po-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.po-pform .po-qty button { min-height: 56px; }
.po-addbtn { flex: 1; min-height: 58px; }
.po-shipline { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-shipline svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--bs-body-color); }
.po-soldout { padding: 18px; border: var(--rule2); background: var(--bs-body-bg); }
.po-stamp-out-lg { display: inline-block; margin: 0 14px 6px 4px; padding: 4px 10px; transform: rotate(-4deg); border: 2px solid var(--bs-body-color); outline: 2px solid var(--bs-body-color); outline-offset: 2px; font-family: var(--mono); font-weight: 700; font-size: max(14px, .9375rem); letter-spacing: .1em; text-transform: uppercase; }
.po-spec { border-top: var(--rule); }
.po-prose-lg ul { margin-top: 1em; }
.po-facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border-top: var(--rule); border-left: var(--rule); }
@media (min-width: 992px) { .po-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.po-facts li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-right: var(--rule); border-bottom: var(--rule); }
.po-facts svg { width: 26px; height: 26px; margin-bottom: 8px; color: var(--bs-primary-text-emphasis); }
.po-facts b { font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400; font-size: max(14px, 1.5rem); line-height: 1; text-transform: uppercase; }
.po-facts span { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }

/* ---------- accordions ---------- */
.po-accs { border-top: var(--rule2); }
.po-acc { border-bottom: var(--rule); }
.po-acc summary { display: grid; grid-template-columns: auto minmax(0, 1fr) 24px; gap: 14px; align-items: center; min-height: 58px; padding: 12px 0; list-style: none; cursor: pointer; }
.po-acc summary::-webkit-details-marker { display: none; }
.po-acc-t { font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(20px, 1.8vw, 26px)); line-height: 1.02; text-transform: uppercase; text-wrap: balance; }
.po-acc summary i { position: relative; width: 24px; height: 24px; }
.po-acc summary i::before, .po-acc summary i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.po-acc summary i::after { transform: rotate(90deg); }
.po-acc[open] summary i::after { transform: rotate(0deg); }
.po-acc summary:hover .po-acc-t { color: var(--bs-primary-text-emphasis); }
.po-acc-b { padding: 0 0 20px; }
@media (min-width: 768px) { .po-acc-b { padding-left: 52px; } }

/* ---------- region index bands ---------- */
.po-rband { border-top: var(--rule); }
.po-mini-index { list-style: none; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; border-top: var(--rule); }
.po-mini-index li { border-bottom: var(--rule); }
@media (min-width: 768px) { .po-mini-index { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: var(--rule); } .po-mini-index li { border-right: var(--rule); } }
@media (min-width: 1200px) { .po-mini-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.po-mini-index a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 10px; align-items: center; min-height: 58px; height: 100%; padding: 10px 14px; color: var(--bs-body-color); text-decoration: none; transition: background-color .2s var(--ease); }
.po-rn { font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(20px, 1.7vw, 26px)); line-height: 1; text-transform: uppercase; }
.po-mini-index svg { width: 20px; height: 20px; opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.po-mini-index a:hover { background: var(--teal); color: var(--ink); }
.po-mini-index a:hover .po-n { color: var(--ink); }
.po-mini-index a:hover svg, .po-mini-index a:focus-visible svg { opacity: 1; transform: none; }

/* ---------- regions hub ---------- */
.po-bigindex { list-style: none; margin: 0; padding: 0; border-top: var(--rule2); }
.po-bigindex li { border-bottom: var(--rule); }
.po-big-link { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px 14px; align-items: center; padding: 16px 0; color: var(--bs-body-color); text-decoration: none; transition: transform .3s var(--ease); }
.po-big-link .po-n { align-self: start; padding-top: .5em; }
.po-big-name { font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(34px, 6.2vw, 100px)); line-height: .9; text-transform: uppercase; text-wrap: balance; }
.po-big-ports, .po-big-meta { grid-column: 2; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-big-meta { color: var(--bs-body-color); }
.po-big-link .po-arrow { display: flex; align-items: center; justify-content: center; color: var(--teal); opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.po-big-link .po-arrow svg { width: 32px; height: 32px; }
.po-big-link:hover, .po-big-link:focus-visible { transform: translateX(12px); }
.po-big-link:hover .po-big-name { color: var(--bs-primary-text-emphasis); }
.po-big-link:hover .po-arrow, .po-big-link:focus-visible .po-arrow { opacity: 1; transform: none; }
@media (min-width: 992px) {
  .po-big-link { grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 56px; padding: 22px 0; }
  .po-big-name { grid-column: 2; grid-row: 1 / span 2; }
  .po-big-ports { grid-column: 3; grid-row: 1; align-self: end; }
  .po-big-meta { grid-column: 3; grid-row: 2; align-self: start; }
  .po-big-link .po-arrow { grid-column: 4; grid-row: 1 / span 2; }
  .po-big-link .po-n { grid-row: 1 / span 2; }
}
.po-essay .po-prose { color: var(--bs-body-color); }
.po-dir { columns: 1; border-top: var(--rule); }
@media (min-width: 768px) { .po-dir { columns: 2; column-gap: 32px; column-rule: var(--rule); } }
@media (min-width: 1200px) { .po-dir { columns: 3; } }
.po-dir-b { break-inside: avoid; padding: 16px 0 20px; border-bottom: var(--rule); }
.po-dir-b h3 { margin: 0 0 10px; font-size: max(14px, clamp(22px, 2vw, 30px)); }
.po-dir-b h3 a { display: flex; gap: 10px; align-items: baseline; color: inherit; text-decoration: none; }
.po-dir-b h3 a:hover { color: var(--bs-primary-text-emphasis); text-decoration: underline; text-underline-offset: 4px; }
.po-dir-b ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.7; }
.po-dir-b li::after { content: "/"; padding: 0 8px; color: var(--bs-secondary-color); }
.po-dir-b li:last-child::after { content: none; }

/* ---------- region page ---------- */
.po-run { width: 100%; }
.po-run-l { margin-bottom: 8px; color: var(--bs-secondary-color); }
.po-run-list { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(48px, 1fr)); margin: 0; padding: 0; overflow-x: auto; border-top: var(--rule); border-left: var(--rule); scrollbar-width: thin; }
.po-run-list a { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; min-height: 60px; padding: 8px 10px; border-right: var(--rule); border-bottom: var(--rule); color: var(--bs-body-color); text-decoration: none; }
.po-run-list .po-n { color: inherit; }
.po-run-name { display: none; font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, 1.0625rem); line-height: 1.04; text-transform: uppercase; }
@media (min-width: 992px) { .po-run-name { display: block; } .po-run-list a { min-height: 92px; } }
.po-run-list a:hover { background: var(--teal); color: var(--ink); }
.po-run-list a.is-here { background: var(--po-solid); color: var(--po-on-solid); box-shadow: inset 0 -6px 0 var(--teal); }
.po-frame { position: relative; margin: 0; border: var(--rule); background: var(--ink); }
.po-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.po-frame figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 12px; background: var(--po-tag-bg); color: var(--po-tag-fg); border-top: 1px solid var(--po-tag-fg); border-right: 1px solid var(--po-tag-fg); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .1em; text-transform: uppercase; }
.po-frame-wide img { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .po-frame-wide img { aspect-ratio: 21 / 9; } }
.po-frame-wide figcaption { position: static; border: 0; border-top: 1px solid var(--po-tag-fg); letter-spacing: .06em; }
.po-twin { border-top: var(--rule); }
.po-twin-grid { display: grid; grid-template-columns: 1fr; }
.po-twin-c { padding: var(--gap) 0; }
.po-twin-c + .po-twin-c { border-top: var(--rule); }
@media (min-width: 768px) {
  .po-twin-grid { grid-template-columns: 1fr 1fr; }
  .po-twin-c:first-child { padding-right: 40px; }
  .po-twin-c + .po-twin-c { border-top: 0; border-left: var(--rule); padding-left: 40px; }
}
.po-twin-n, .po-chap-n, .po-chapter-n { margin: 0 0 10px; font-family: Anton, "Arial Narrow", sans-serif; font-size: clamp(80px, 9vw, 150px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--bs-body-color); user-select: none; }
.po-twin h2 { margin-bottom: 16px; }
.po-rl { list-style: none; margin: 18px 0 0; padding: 0; border-top: var(--rule); }
.po-rl li { display: flex; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: var(--rule); font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(22px, 2.2vw, 32px)); line-height: 1; text-transform: uppercase; }
.po-lists .po-rl .po-n { color: var(--teal-t1); }
.po-shopband, .po-journal-band, .po-faqband, .po-related, .po-hubidx, .po-ports, .po-rules, .po-topics, .po-contact, .po-cover, .po-contents { border-top: var(--rule); }
.po-faqband { scroll-margin-top: var(--rn-h); }
.po-pn { border-top: var(--rule); border-bottom: var(--rule); }
.po-pn-grid { display: grid; grid-template-columns: 1fr 1fr; }
.po-pn-a { display: flex; flex-direction: column; gap: 10px; min-height: 130px; padding: 22px 16px 22px 0; color: var(--bs-body-color); text-decoration: none; }
.po-pn-next { align-items: flex-end; text-align: right; padding: 22px 0 22px 16px; border-left: var(--rule); }
.po-pn-a .mono { display: inline-flex; align-items: center; gap: 8px; color: var(--bs-secondary-color); }
.po-pn-a svg, .po-pn-hub svg { width: 18px; height: 18px; }
.po-pn-a b { font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400; font-size: max(14px, clamp(22px, 3vw, 44px)); line-height: .95; text-transform: uppercase; text-wrap: balance; }
.po-pn-a:hover b { color: var(--bs-primary-text-emphasis); }
.po-pn-hub { grid-column: 1 / -1; order: 3; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-top: var(--rule); color: var(--bs-body-color); text-decoration: none; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-pn-hub:hover { background: var(--teal); color: var(--ink); }
@media (min-width: 992px) {
  .po-pn-grid { grid-template-columns: 1fr auto 1fr; }
  .po-pn-hub { grid-column: auto; order: 0; flex-direction: column; padding: 0 30px; border-top: 0; border-left: var(--rule); }
  .po-pn-a { padding-right: 30px; }
  .po-pn-next { padding-left: 30px; }
}

/* ---------- long-form: pillar, size guide, shipping, policies ---------- */
.po-long-grid { display: grid; gap: 36px; }
@media (min-width: 992px) {
  .po-long-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
  .po-toc { position: sticky; top: calc(var(--rn-h) + 24px); max-height: calc(100vh - var(--rn-h) - 48px); overflow-y: auto; }
}
.po-toc-l { margin: 0; padding-bottom: 8px; border-bottom: var(--rule2); }
.po-toc ol { list-style: none; margin: 0; padding: 0; }
.po-toc a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 44px; padding: 10px 0; border-bottom: var(--rule); color: var(--bs-body-color); font-weight: 600; line-height: 1.3; text-decoration: none; transition: padding .2s var(--ease), box-shadow .2s var(--ease); }
.po-toc a:hover { color: var(--bs-primary-text-emphasis); }
.po-toc a.is-active { padding-left: 12px; box-shadow: inset 4px 0 0 var(--teal); color: var(--bs-primary-text-emphasis); }
.po-chap { margin-bottom: clamp(34px, 4vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); border-bottom: var(--rule); scroll-margin-top: calc(var(--rn-h) + 20px); }
.po-chap:last-child { margin-bottom: 0; border-bottom: 0; }
.po-chap-n { font-size: clamp(64px, 7vw, 110px); }
.po-chap-n:empty { display: none; }
.po-chap h2 { margin: 0 0 18px; font-size: max(14px, clamp(30px, 3.4vw, 48px)); }
.po-callout { margin-bottom: 40px; padding: 16px 20px; border: var(--rule2); box-shadow: 8px 8px 0 var(--teal); }
.po-legal .po-prose { font-size: max(14px, 1rem); }
.po-legal .po-chap h2 { font-size: max(14px, clamp(24px, 2.4vw, 32px)); }
.po-legal .po-chap { margin-bottom: 28px; padding-bottom: 28px; }

/* ---------- journal ---------- */
.po-cover-grid { display: grid; border: var(--rule); }
@media (min-width: 992px) { .po-cover-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.po-cover-img { display: block; overflow: hidden; background: var(--ink); }
.po-cover-img img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); transition: filter .4s var(--ease); }
.po-cover-img:hover img { filter: none; }
.po-cover-t { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 20px; border-top: var(--rule); }
@media (min-width: 992px) { .po-cover-t { padding: 36px; border-top: 0; border-left: var(--rule); } }
.po-cover-kick { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.po-cover-kick span { margin: 0 -1px -1px 0; padding: 4px 10px; border: var(--rule); }
.po-cover-kick span:first-child { background: var(--po-solid); color: var(--po-on-solid); border-color: var(--po-solid); }
.po-cover-t h2 { font-size: max(14px, clamp(34px, 4.2vw, 66px)); }
.po-cover-t h2 a { color: inherit; text-decoration: none; }
.po-cover-t h2 a:hover { color: var(--bs-primary-text-emphasis); }
.po-contents-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule2); }
.po-contents-row { border-bottom: var(--rule); }
.po-contents-row[hidden] { display: none; }
.po-contents-row a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px; padding: 16px 0; color: var(--bs-body-color); text-decoration: none; }
.po-contents-row .po-n { padding-top: .3em; }
.po-ct-title { display: block; font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(22px, 2.4vw, 34px)); line-height: .96; text-transform: uppercase; text-wrap: balance; }
.po-ct-ex { display: -webkit-box; margin-top: 6px; max-width: 70ch; overflow: hidden; color: var(--bs-secondary-color); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.po-ct-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--bs-secondary-color); }
.po-ct-img { display: none; }
.po-contents-row a:hover .po-ct-title { color: var(--bs-primary-text-emphasis); }
@media (min-width: 992px) {
  .po-contents-row a { grid-template-columns: 56px minmax(0, 1fr) 210px 150px; align-items: center; gap: 8px 24px; }
  .po-ct-meta { grid-column: 3; flex-direction: column; gap: 2px; }
  .po-ct-img { display: block; grid-column: 4; width: 150px; height: 100px; object-fit: cover; border: var(--rule); filter: grayscale(1); transition: filter .3s var(--ease); }
  .po-contents-row a:hover .po-ct-img { filter: none; }
}

/* ---------- article ---------- */
.po-progress { display: none; position: fixed; z-index: 250; left: 0; right: 0; top: var(--rn-h); height: 4px; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .po-progress { display: block; }
  .po-progress i { display: block; height: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(0); animation: po-read linear both; animation-timeline: scroll(root); }
}
@keyframes po-read { to { transform: scaleX(1); } }
.po-byline { display: flex; flex-wrap: wrap; gap: 6px 26px; color: var(--bs-secondary-color); }
.po-byline b { color: var(--bs-body-color); font-weight: 700; }
.po-art-hero .po-frame { margin-top: 22px; }
.po-art-grid { display: grid; gap: 28px; }
@media (min-width: 992px) { .po-art-grid { grid-template-columns: 210px minmax(0, 1fr); gap: 64px; } .po-art-side { position: sticky; top: calc(var(--rn-h) + 24px); grid-template-columns: 1fr !important; } }
.po-art-side { align-self: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); }
.po-art-side p { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px; border-right: var(--rule); border-bottom: var(--rule); }
.po-art-side span { color: var(--bs-secondary-color); }
.po-art-side b { font-weight: 700; }
.po-article { max-width: 70ch; counter-reset: po-sec; font-size: max(14px, clamp(17px, 1.2vw, 19px)); }
.po-article > p:first-child::first-letter { float: left; margin: .08em .1em 0 0; font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400; font-size: 5.1em; line-height: .8; color: var(--bs-body-color); }
.po-article h2 { counter-increment: po-sec; padding-top: 18px; border-top: var(--rule); }
.po-article h2::before { content: counter(po-sec, decimal-leading-zero); display: block; margin-bottom: 10px; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .1em; color: var(--bs-primary-text-emphasis); }
.po-author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin-top: 44px; padding: 20px; border: var(--rule2); font-size: max(14px, 1rem); }
.po-mono-mark { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--po-solid); color: var(--po-on-solid); font-family: Anton, "Arial Narrow", sans-serif; font-size: 28px; }
.po-author-n { margin: 0; font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, 1.5rem); line-height: 1; text-transform: uppercase; }
.po-author-r { margin: 6px 0 8px; color: var(--bs-secondary-color); }

/* ---------- about ---------- */
.po-chapter { display: grid; gap: 22px; margin-bottom: clamp(44px, 5vw, 76px); padding-bottom: clamp(44px, 5vw, 76px); border-bottom: var(--rule); }
.po-chapter:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
@media (min-width: 992px) { .po-chapter { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .po-chapter.is-flip .po-chapter-t { order: 2; } }
.po-chapter-n { font-size: clamp(110px, 15vw, 230px); }
.po-chapter h2 { font-size: max(14px, clamp(34px, 4vw, 60px)); }
.po-chapter .lede { color: var(--bs-body-color); max-width: 52ch; }
.po-chapter .po-frame img { aspect-ratio: 4 / 3; }
.po-quote-t { margin: 0; }
.po-quote-t p { max-width: 17ch; margin: 0 0 18px; font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(40px, 6.4vw, 104px)); line-height: .92; text-transform: uppercase; text-wrap: balance; }
.po-quote-t p::before { content: "\201C"; color: var(--teal); }
.po-quote-t p::after { content: "\201D"; color: var(--teal); }
.po-quote figcaption { color: var(--bs-secondary-color); }
.po-crew-static figure { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.po-crew-static img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.po-rule-grid { list-style: none; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; border-top: var(--rule); border-left: var(--rule); }
@media (min-width: 768px) { .po-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .po-rule-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.po-rule-grid li { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border-right: var(--rule); border-bottom: var(--rule); }
.po-rule-grid .po-n { font-family: Anton, "Arial Narrow", sans-serif; font-size: 72px; line-height: .8; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1.5px var(--bs-body-color); }
.po-rule-grid h3 { margin: 0; font-size: max(14px, clamp(24px, 2.2vw, 32px)); }
.po-steps { list-style: none; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; border-top: var(--rule); }
.po-steps li { padding: 22px 0; border-bottom: var(--rule); }
@media (min-width: 768px) { .po-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: var(--rule); } .po-steps li { padding: 22px; border-right: var(--rule); } }
@media (min-width: 1200px) { .po-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.po-steps .po-n { color: var(--teal-t1); }
.po-year { margin: 10px 0 12px; font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(56px, 6vw, 96px)); line-height: .85; color: transparent; -webkit-text-stroke: 1.5px var(--bs-body-color); }
.po-steps h3 { margin: 0 0 8px; font-size: max(14px, clamp(22px, 2vw, 28px)); }
.po-steps p:last-child { color: var(--bs-secondary-color); }

/* ---------- contact, account, forms ---------- */
.po-topic-grid { list-style: none; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; border-top: var(--rule); border-left: var(--rule); }
@media (min-width: 576px) { .po-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .po-topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.po-topic { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: 100%; padding: 18px; border: 0; border-right: var(--rule); border-bottom: var(--rule); background: transparent; color: var(--bs-body-color); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s var(--ease); }
@media (min-width: 768px) { .po-topic { min-height: 150px; } }
.po-topic-t { font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(24px, 2.2vw, 32px)); line-height: .95; text-transform: uppercase; }
.po-topic-x { color: var(--bs-secondary-color); }
.po-topic:hover { background: var(--po-hover); }
.po-topic[aria-pressed="true"] { background: var(--po-solid); color: var(--po-on-solid); }
.po-topic[aria-pressed="true"] .po-n, .po-topic[aria-pressed="true"] .po-topic-x { color: var(--po-on-solid-mute); }
.po-formbox { padding: 20px; border: var(--rule2); background: var(--bs-body-bg); }
@media (min-width: 768px) { .po-formbox { padding: 32px; box-shadow: 10px 10px 0 var(--teal); } }
.po-field label { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: max(14px, .875rem); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.po-field .form-control, .po-field .form-select { min-height: 50px; }
.po-hint { margin: 6px 0 0; color: var(--bs-secondary-color); font-size: max(14px, .9375rem); }
.po-err { margin: 6px 0 0; color: var(--po-coral-txt); font-weight: 600; font-size: max(14px, .9375rem); }
.po-field [aria-invalid="true"] { border-color: var(--po-coral-txt); box-shadow: inset 4px 0 0 var(--coral); }
.po-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.po-consent { color: var(--bs-secondary-color); }
.po-consent a { color: inherit; }
.po-success { padding: 24px; border: var(--rule2); }
.po-success:focus { outline: 3px solid var(--teal); outline-offset: 3px; }
.po-stamp-ok { display: inline-block; margin: 0 0 14px; padding: 4px 12px; transform: rotate(-5deg); border: 2px solid var(--bs-body-color); outline: 2px solid var(--teal); outline-offset: 2px; font-family: var(--mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.po-cinfo { border-top: var(--rule2); }
.po-cinfo-c { padding: 16px 0; border-bottom: var(--rule); }
.po-cl { margin: 0 0 4px; color: var(--bs-secondary-color); }
.po-email { margin: 0; font-family: var(--mono); font-size: max(14px, clamp(18px, 1.7vw, 23px)); font-weight: 700; word-break: break-all; user-select: all; }
.po-copy { margin-top: 12px; }
.po-copy-msg { display: block; margin-top: 8px; color: var(--bs-primary-text-emphasis); }
.po-copy-msg:empty { display: none; }
.po-cv { margin: 0; font-weight: 700; font-size: max(14px, 1.125rem); }
.po-stockists { margin-top: 32px; padding: 20px; border: var(--rule); }
.po-stockists h3 { font-size: max(14px, clamp(24px, 2.2vw, 32px)); }
.po-jump ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border-top: var(--rule); border-left: var(--rule); }
.po-jump a { display: flex; align-items: baseline; gap: 10px; height: 100%; min-height: 58px; padding: 12px; border-right: var(--rule); border-bottom: var(--rule); color: var(--bs-body-color); text-decoration: none; font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(18px, 1.6vw, 24px)); line-height: 1; text-transform: uppercase; }
.po-jump em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: max(14px, .875rem); color: var(--bs-secondary-color); }
.po-jump a:hover { background: var(--teal); color: var(--ink); }
.po-jump a:hover .po-n, .po-jump a:hover em { color: var(--ink); }
.po-ask-grid { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
.po-ask-grid h2 { margin: 0; max-width: 16ch; }
.po-acct-grid { display: grid; gap: 32px; }
@media (min-width: 992px) { .po-acct-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.po-acct-n { margin-bottom: 10px; color: var(--bs-secondary-color); }
.po-acct-grid h2 { margin-bottom: 18px; }
.po-acct-btn { margin: 14px 0 12px; }
.po-acct-msg { margin: 0 0 12px; padding: 12px 14px; border: var(--rule); background: var(--bs-tertiary-bg); }
.po-ticks { list-style: none; margin: 0 0 20px; padding: 0; border-top: var(--rule); }
.po-ticks li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: var(--rule); font-weight: 600; }
.po-ticks svg { width: 18px; height: 18px; color: var(--bs-primary-text-emphasis); }

/* ---------- cart: the kit list on a receipt ---------- */
.po-cart-grid { display: grid; gap: 32px; }
@media (min-width: 992px) { .po-cart-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; } }
.po-cart-cols { display: none; }
@media (min-width: 768px) { .po-cart-cols { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px; margin: 0; padding-bottom: 8px; border-bottom: var(--rule2); color: var(--bs-secondary-color); } .po-cart-cols span:last-child { text-align: right; } }
.po-lines { list-style: none; margin: 0; padding: 0; }
.po-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "img info info" "img qty total"; gap: 12px 16px; align-items: start; padding: 16px 0; border-bottom: var(--rule); }
@media (min-width: 768px) { .po-line { grid-template-columns: 110px minmax(0, 1fr) 150px 110px; grid-template-areas: "img info qty total"; align-items: center; } }
.po-line-img { grid-area: img; display: block; aspect-ratio: 1 / 1; border: 1px solid var(--po-tile-edge); background: var(--white); }
.po-line-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.po-line-info { grid-area: info; min-width: 0; }
.po-line-n { margin: 0 0 2px; color: var(--bs-secondary-color); }
.po-line-t { margin: 0 0 4px; font-size: max(14px, clamp(20px, 1.8vw, 26px)); }
.po-line-t a { color: inherit; text-decoration: none; }
.po-line-t a:hover { color: var(--bs-primary-text-emphasis); text-decoration: underline; text-underline-offset: 4px; }
.po-line-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-line-save { color: var(--po-coral-txt); font-weight: 700; }
.po-line .po-qty { grid-area: qty; justify-self: start; }
.po-line-total { grid-area: total; justify-self: end; align-self: center; margin: 0; font-family: var(--mono); font-weight: 700; font-size: max(14px, 1.0625rem); }
.po-remove { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--bs-body-color); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.po-remove:hover { color: var(--bs-primary-text-emphasis); }
.po-remove svg { width: 16px; height: 16px; }
.po-continue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; color: var(--bs-body-color); }
.po-continue:hover { color: var(--bs-primary-text-emphasis); }
.po-continue svg { width: 16px; height: 16px; }
.po-receipt { position: relative; padding: 24px 22px 26px; border: 1px solid var(--po-rc-fg); background: var(--po-rc-bg); color: var(--po-rc-fg); font-family: var(--mono); box-shadow: 10px 10px 0 var(--po-rc-shadow); }
@media (min-width: 992px) { .po-receipt { position: sticky; top: calc(var(--rn-h) + 24px); } }
.po-rc-head { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--po-rc-fg); text-align: center; font-size: max(14px, .875rem); letter-spacing: .12em; text-transform: uppercase; }
.po-rc-head b { display: block; font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400; font-size: max(14px, 2rem); letter-spacing: .01em; line-height: 1; margin-bottom: 6px; }
.po-rc-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; font-size: max(14px, .9375rem); letter-spacing: .04em; text-transform: uppercase; }
.po-rc-row span:first-child { min-width: 0; }
.po-rc-total { margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--po-rc-fg); font-weight: 700; font-size: max(14px, 1.125rem); }
.po-rc-saved { color: var(--po-coral-txt); font-weight: 700; }
.po-rc-stamp { display: inline-block; margin: 16px 0 10px 4px; padding: 7px 12px; transform: rotate(-4deg); border: 2px solid var(--coral); outline: 2px solid var(--coral); outline-offset: 2px; color: var(--po-coral-txt); font-weight: 700; font-size: max(14px, .9375rem); letter-spacing: .08em; text-transform: uppercase; }
.po-rc-stamp.is-free { border-color: var(--po-rc-fg); outline-color: var(--volt); background: var(--volt); color: var(--volt-ink); }
.po-meter { position: relative; display: block; height: 10px; margin: 6px 0 20px; border: 1px solid var(--po-rc-fg); background: var(--po-meter-bg); }
.po-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--free-pct, 0%); background: var(--teal); transition: width .45s var(--ease); }
.po-meter.is-free i { background: var(--volt); }
.po-receipt .btn { min-height: 58px; }
.po-rc-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: var(--po-rc-muted); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; }
.po-rc-note svg { width: 16px; height: 16px; }
.po-empty-head { display: grid; gap: 20px; margin-bottom: 36px; }
@media (min-width: 992px) { .po-empty-head { grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; } }
.po-stamp-big { display: inline-block; justify-self: start; margin: 14px; padding: 8px 22px; transform: rotate(-8deg); border: 4px solid var(--bs-body-color); outline: 4px solid var(--bs-body-color); outline-offset: 6px; font-family: Anton, "Arial Narrow", sans-serif; font-size: clamp(56px, 9vw, 140px); line-height: .9; text-transform: uppercase; }
.po-stamp-sm { font-size: clamp(40px, 6vw, 72px); }
.po-sub-h { margin: 0 0 16px; font-size: max(14px, clamp(24px, 2.4vw, 34px)); }
.po-empty-head .po-chips { margin-top: 18px; }
.po-noscript { padding: 16px; border: var(--rule); }
.po-ymal { border-top: var(--rule); }

/* ---------- search ---------- */
.po-search-l { display: block; margin-bottom: 10px; color: var(--bs-secondary-color); }
.po-search-row { display: flex; border: var(--rule2); }
.po-search-row .form-control { min-width: 0; min-height: 64px; padding: 0 16px; border: 0; font-family: var(--mono); font-size: max(16px, clamp(18px, 2vw, 26px)); }
.po-search-row .form-control:focus { box-shadow: inset 0 0 0 3px var(--teal); }
.po-search-row .btn { flex-shrink: 0; border: 0; border-left: var(--rule2); }
.po-pop { margin: 20px 0 8px; }
.po-pop-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.po-pop-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: var(--rule); color: var(--bs-body-color); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.po-pop-list a:hover { background: var(--teal); color: var(--ink); }
.po-rgroup { margin-top: 32px; }
.po-rgroup-h { display: flex; align-items: baseline; gap: 12px; margin: 0; padding-bottom: 8px; border-bottom: var(--rule2); font-size: max(14px, clamp(26px, 2.6vw, 38px)); }
.po-rgroup-h span { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; color: var(--bs-secondary-color); }
.po-rlist { list-style: none; margin: 0; padding: 0; }
.po-rlist a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; min-height: 56px; padding: 12px 0; border-bottom: var(--rule); color: var(--bs-body-color); text-decoration: none; }
.po-rlist a.no-img { grid-template-columns: 48px minmax(0, 1fr) auto; }
.po-rlist img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--po-tile-edge); background: var(--white); }
.po-rlist img.is-photo { object-fit: cover; }
.po-r-t { display: block; font-weight: 700; font-size: max(14px, 1.0625rem); }
.po-r-s { display: block; color: var(--bs-secondary-color); font-size: max(14px, .9375rem); }
.po-r-x { font-family: var(--mono); font-size: max(14px, .9375rem); }
.po-r-x svg { width: 18px; height: 18px; }
.po-rlist a:hover .po-r-t { color: var(--bs-primary-text-emphasis); text-decoration: underline; text-underline-offset: 3px; }
.po-results mark { padding: 0 2px; background: var(--teal); color: var(--ink); }
.po-noresults { margin-top: 24px; padding: 24px; border: var(--rule2); }
.po-noresults h2 { font-size: max(14px, clamp(26px, 3vw, 40px)); }

/* ---------- collections index ---------- */
.po-coll-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule2); }
.po-coll-list li { border-bottom: var(--rule); }
.po-coll-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 76px; grid-template-areas: "n name img" "n intro img" "n count img"; gap: 4px 14px; align-items: center; padding: 14px 0; color: var(--bs-body-color); text-decoration: none; transition: transform .3s var(--ease); }
.po-coll-row .po-n { grid-area: n; align-self: start; padding-top: .4em; }
.po-coll-name { grid-area: name; font-family: Anton, "Arial Narrow", sans-serif; font-size: max(14px, clamp(30px, 5vw, 76px)); line-height: .9; text-transform: uppercase; }
.po-coll-intro { grid-area: intro; display: -webkit-box; overflow: hidden; color: var(--bs-secondary-color); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.po-coll-count { grid-area: count; font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .08em; text-transform: uppercase; }
.po-coll-img { grid-area: img; display: block; width: 76px; aspect-ratio: 1 / 1; border: 1px solid var(--po-tile-edge); background: var(--white); }
.po-coll-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); transition: filter .3s var(--ease); }
@media (min-width: 992px) {
  .po-coll-row { grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr) 120px 110px; grid-template-areas: "n name intro count img"; gap: 4px 28px; }
  .po-coll-img { width: 110px; }
}
.po-coll-row:hover { transform: translateX(12px); }
.po-coll-row:hover .po-coll-name { color: var(--bs-primary-text-emphasis); }
.po-coll-row:hover .po-coll-img img { filter: none; }

/* ---------- chrome: footer heads, kit chip, toast, mobile bar ---------- */
.po-fh { margin: 0 0 10px; font-family: var(--mono) !important; font-weight: 500 !important; font-size: max(14px, .875rem); letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-foot-n { color: var(--bs-secondary-color); }
.po-kit { color: var(--bs-body-color); }
body[data-page="cart"] .po-kit { display: none; }
@media (max-width: 767.98px) { .po-kit-ship { display: none; } .po-kit { padding: 10px 14px; } .po-kit-bar { margin: 8px 0 0; } }
.po-toast { position: fixed; z-index: 280; right: 16px; top: 120px; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 6px 8px 6px 14px; border: 1px solid var(--bs-body-color); box-shadow: 6px 6px 0 var(--teal); font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .06em; text-transform: uppercase; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.po-toast.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.po-toast svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--teal); }
.po-toast a { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 8px; color: var(--bs-body-color); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.po-toast a:hover { color: var(--teal-t1); }
.po-mbar-price { display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; min-width: 0; padding-right: 4px; color: var(--bs-body-color); }
.po-mbar-price .price { font-size: max(14px, 1rem); font-weight: 700; }
.po-mbar-price small { font-family: var(--mono); font-size: max(14px, .875rem); letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.po-mbar-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--ink); color: var(--white); font-family: var(--mono); font-size: max(14px, .875rem); }
.po-final-stack .po-teal { color: var(--teal); }
.po-mbar-n.is-empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .po-progress { display: none !important; }
  .po-big-link:hover, .po-big-link:focus-visible, .po-coll-row:hover { transform: none; }
  .po-card .po-prod-img img, .po-mini-index svg, .po-toast, .po-meter i, .po-switch-ui, .po-switch-ui::after { transition: none; }
}

/* ================================================================
   02 POSTER, two times of day. Light is paper white with ink rules; dark is ink paper with
   white rules, teal-t1 accents, deep teal bands, and the coral stamps still punching.
   Every colour the concept binds directly lives in these tokens; the dark set flips them.
   Product photos on white always keep a white tile with a 1px rule.
   ================================================================ */
body[data-concept="02"] {
  --po-paper: #FFFFFF;
  --po-accent: var(--teal);            /* the teal word in every giant stack */
  --po-accent-stroke: var(--ink);
  --po-solid: var(--ink);              /* selected chip, checked size, current stop, mono mark */
  --po-solid-hover: var(--ink-3);
  --po-on-solid: var(--white);
  --po-on-solid-mute: var(--line);
  --po-on-solid-acc: var(--teal-t1);
  --po-hover: var(--sand);
  --po-stripe: var(--line);
  --po-stamp-bg: var(--white);
  --po-stamp-fg: var(--ink);
  --po-stamp-ink: #1F0A02;
  --po-coral-txt: var(--coral-ink);    /* coral as text on light: #B23D10 */
  --po-tag-bg: var(--white);
  --po-tag-fg: var(--ink);
  --po-tile: transparent;              /* product photo tile inside cards (paper is already white) */
  --po-tile-line: transparent;
  --po-tile-edge: var(--ink);          /* rule round every white product tile */
  --po-inkit-bg: var(--ink);
  --po-inkit-fg: var(--white);
  --po-th-rule: var(--ink-3);
  --po-shadow: var(--ink);
  --po-kit-shadow: var(--teal);
  --po-kit-track: var(--ink-3);
  --po-fine-rule: var(--ink-3);
  --po-band-rule: var(--ink-3);
  --po-rc-bg: var(--white);            /* the receipt */
  --po-rc-fg: var(--ink);
  --po-rc-muted: var(--ink-3);
  --po-rc-shadow: var(--ink);
  --po-meter-bg: var(--sand);
  background-color: var(--po-paper);
}

/* Light mode: the ink bands (story, footer, kit chip, toast, mobile bar, region lists, timeline) are the
   poster's black plates and stay ink. Re-declare the dark set so the base light re-map does not bleach them. */
html[data-theme="light"] body[data-concept="02"] [data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-color: #FFFFFF; --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #0D1014; --bs-body-bg-rgb: 13, 16, 20;
  --bs-emphasis-color: #FFFFFF; --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #B4BCC4; --bs-secondary-color-rgb: 180, 188, 196;
  --bs-secondary-bg: #161B21; --bs-tertiary-bg: #1C232B;
  --bs-primary-text-emphasis: #3FCBDB; --bs-secondary-text-emphasis: #B4BCC4;
  --bs-link-color: #3FCBDB; --bs-link-color-rgb: 63, 203, 219; --bs-link-hover-color: #3FCBDB;
  --bs-border-color: #232B33; --bs-heading-color: inherit;
  --bs-form-invalid-color: #FF8F66; --bs-form-invalid-border-color: #FF8F66;
  --po-coral-txt: var(--coral-t1);
  --po-tag-bg: var(--white);
  --po-tag-fg: var(--ink);
}

/* Dark mode: ink paper (#0D1014), white rules, deep teal plates (#04191E), teal-t1 accents. */
html[data-theme="dark"] body[data-concept="02"] {
  --po-paper: #0D1014;
  --po-accent: var(--teal-t1);
  --po-accent-stroke: var(--ink);
  --po-solid: var(--white);
  --po-solid-hover: var(--sand);
  --po-on-solid: var(--ink);
  --po-on-solid-mute: #5A636B;
  --po-on-solid-acc: var(--teal-ink);
  --po-hover: var(--ink-3);
  --po-stripe: var(--ink-3);
  --po-stamp-bg: var(--ink);
  --po-stamp-fg: var(--white);
  --po-coral-txt: var(--coral-t1);     /* coral as text on dark: #FF8F66 */
  --po-tag-bg: var(--ink);
  --po-tag-fg: var(--white);
  --po-tile: var(--white);
  --po-tile-line: var(--line);
  --po-tile-edge: var(--line);
  --po-inkit-bg: var(--teal-t1);
  --po-inkit-fg: var(--ink);
  --po-th-rule: #C9C9C9;
  --po-shadow: var(--teal);
  --po-kit-shadow: var(--teal);
  --po-kit-track: var(--ink);
  --po-fine-rule: #333A40;
  --po-band-rule: var(--white);
  --po-rc-bg: var(--ink-2);
  --po-rc-fg: var(--white);
  --po-rc-muted: #B4BCC4;
  --po-rc-shadow: var(--teal);
  --po-meter-bg: var(--ink-3);
  color: #FFFFFF;
}
/* the black plates turn deep teal so they still read as bands on ink paper */
html[data-theme="dark"] body[data-concept="02"] [data-bs-theme="dark"] {
  --bs-body-bg: #04191E; --bs-body-bg-rgb: 4, 25, 30;
  --bs-secondary-bg: #064049; --bs-tertiary-bg: #064049;
  --po-tag-bg: var(--white);
  --po-tag-fg: var(--ink);
}
html[data-theme="dark"] body[data-concept="02"] .po-story .po-water { opacity: .3; }
html[data-theme="dark"] body[data-concept="02"] .po-footer { border-top: 1px solid var(--white); }
/* ink buttons would vanish on ink paper: the poster inverts them to white plates */
html[data-theme="dark"] body[data-concept="02"] .btn-ink {
  --bs-btn-bg: var(--white); --bs-btn-border-color: var(--white); --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--teal-t1); --bs-btn-hover-border-color: var(--teal-t1); --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--teal); --bs-btn-active-border-color: var(--teal); --bs-btn-active-color: var(--ink);
}
html[data-theme="dark"] body[data-concept="02"] [data-bs-theme="light"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='square' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* white product tiles on ink: the photo keeps its white ground; sold-out stays a quiet grey photo */
html[data-theme="dark"] body[data-concept="02"] .po-card.is-sold .po-prod-img img { opacity: .6; }
html[data-theme="dark"] body[data-concept="02"] .po-num { opacity: .5; }
html[data-theme="dark"] body[data-concept="02"] .po-buy > .po-bignum { opacity: .28; }
html[data-theme="dark"] body[data-concept="02"] .po-receipt .btn-primary { --bs-btn-hover-bg: var(--teal-t1); }

/* the mobile bar is an ink plate in light mode, a deep teal plate with a white rule in dark */
.po-mbar { border-top: 1px solid var(--po-band-rule); }

/* Build your kit chip vs the sticky bar: on phones the product and cart bars already carry the cart, so the
   chip steps aside there; everywhere else it sits above the bar's measured height and under it in the stack. */
@media (max-width: 767.98px) {
  body[data-concept="02"][data-page="product"] .po-kit,
  body[data-concept="02"][data-page="cart"] .po-kit { display: none; }
}

body[data-concept="02"] .po-ticker .po-stamp-free { top: 0; bottom: 0; right: 0; left: auto; transform: none; outline: 0; border: 0;
  border-left: var(--rule); display: flex; align-items: center; gap: 10px; padding: 0 20px; font-size: max(14px, .875rem); letter-spacing: .1em; }
body[data-concept="02"] .po-ticker .po-stamp-free::before { content: ""; width: 9px; height: 9px; background: currentColor; }
@media (min-width: 768px) { body[data-concept="02"] .po-ticker .po-stamp-free { right: 0; padding: 0 32px; font-size: max(14px, 1rem); } }

/* Chris 2026-10-07: regions index rows. The arrow had an explicit row, so grid placed it first, in column 1,
   and pushed the number and the region name one column right. Pin every cell. Also keep the ports-section
   rule off the per-row port line that shares its class name. */
.po-index-link .po-n { grid-column: 1; grid-row: 1; }
.po-index-link .po-region { grid-column: 2; grid-row: 1; }
.po-index-link .po-arrow { grid-column: 3; }
.po-index-link .po-ports { grid-column: 2; grid-row: 2; border-top: 0; }