/* Collection page -- scoped .cp-*. Emitted by ccg-site-layer/build_collection.py.
   ⭐ REBUILT 2026-10-19 as a FULL-BLEED page in our own palette. The reference
   (pokecottage.com master-set pages) runs one continuous dark surface from y=0 to the
   footer with a fixed nav that has no bar; the earlier build put the entire page inside
   the site's white content card, which is the "boxes" this page was rebuilt to remove.
   Tokens: navy #131A2E · cream #F8F3E7 · muted #BDB6A6 · gold #E8C46A · sky #9CC9E8. */

/* ---- page frame: no white card, no 1240 column, no wallpaper ---- */
body { background:#131A2E; background-image:none; }
main.site-content { max-width:none; padding:0; color:#BDB6A6;
  font-family:'Instrument Sans','Plus Jakarta Sans',system-ui,-apple-system,sans-serif; }
.content-box { background:none; border:0; border-radius:0; padding:0; margin:0;
  box-shadow:none; max-width:none; }
/* ⚠️ stylesheet.css points .content-box's tokens at LIGHT-surface inks (#6b6558 / #7a5d15),
   because on every other page this box IS the white card. On a collection page it is repainted
   TRANSPARENT over the navy canvas, so the dark-surface values are declared back here. */
.content-box { --text-main:#e8e4dc; --text-muted:#a9a396; --text-faint:#8d887d;
  --gold-primary:#e8c46a; --gold-hover:#f0d489; }
/* the bar is gone: the page behind it is the same navy, so there is nothing to separate */
header.site-header { background:#131A2E !important; border-bottom:0; box-shadow:none;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
header.site-header .brand-name, header.site-header .brand-text p { color:#F8F3E7; }
header.site-header .brand-text p { color:#b3ab97; }
header.site-header .nav-btn { color:#d8d2c4; }
header.site-header .nav-btn:hover { color:#e8c46a; }
header.site-header .nav-badge-pill { background:rgba(232,196,106,.14) !important;
  color:#e8c46a !important; border-color:rgba(232,196,106,.42) !important; }
.breadcrumbs-bar { display:none; }

/* ---- hero band: centred, like every one of their master-set pages ----
   Measured off pokecottage.com/journey-together-master-set-guide @1280: a lime bullet row
   at 15px, an 89.6px Fraunces H1 (lh 1.0, -0.06em, centred, 806px block), a 15px/22.5px
   grey paragraph (rgb(160,160,160), centred, ~600px), then the six cards 11px below it.
   No buttons: [Caleb], 2026-10-19 -- "We shouldnt have buttons either." */
/* ⭐ Measured off theirs at 1920 (2026-10-20): bullet row 15px at y=170 · H1 120px Fraunces
   weight 400, ls -7.2px, two lines, 240px tall · lede 15px in a 916px block at y=483 ·
   THE FIRST CARD STARTS 186px BELOW THE LEDE. Ours had a 42px gap and a 640px lede, which is
   what [Caleb] read as "squished": *"we just need more space and for this section to be a bit
   longer"* and *"the size of their text is a little different then ours"*. */
.cp-hero { display:block; max-width:1180px; margin:0 auto; padding:3.4rem 1.5rem 0;
  text-align:center; }
.cp-hero-bullets { margin:0 auto 1.7rem; font-size:.94rem; letter-spacing:.01em;
  color:#e8c46a; line-height:1.4; }
.cp-hero-bullets span { margin:0 .4rem; opacity:.6; }
.cp-hero h1 { font-family:'Fraunces',Georgia,serif; font-weight:400; font-optical-sizing:auto;
  color:#F8F3E7; font-size:clamp(2.6rem,6.25vw,7.5rem); line-height:1.02;
  letter-spacing:-.05em; margin:0 auto 1.7rem; max-width:16ch; text-align:center; }
.cp-hero-lede { margin:0 auto; max-width:916px; font-size:.94rem; line-height:1.55;
  color:#a0a0a0; text-align:center; }
.cp-hero-lede strong { color:#F8F3E7; font-weight:600; }


/* ---- the six-card row, measured off the reference's own hero ----
   Theirs: six scans, ~280px wide at 1280, laid in ONE row that overlaps by ~40%, each
   nudged up or down by 0-27px, radius 12.8px, shadow 0 8px 18px rgba(0,0,0,.18), and NO
   white frame or padding. That last part is why theirs reads as cards floating and ours
   read as pictures in boxes. */
/* ---- their fan, READ OUT OF THEIR OWN MARKUP (2026-10-20) ----
   Their six `.stage-card`s carry inline `--x: -434/-260.4/-86.8/+86.8/+260.4/+434px`,
   `--rotation: -5.5/3.5/-2/5/-3.5/4deg`, `--y: -12/10/-4/14/-10/6px` and z-index 1..6. The step
   between cards is 173.6px at a 280px card -- a 38% overlap -- and the row spans ~90% of the
   viewport. [Caleb]: *"their cards are a little more spaced out taking up most the screen side to
   side and the cards are angled more then ours."* So: the stage leaves the 1180 column, the card
   grows with the viewport instead of capping at 280, and every card takes its own rotation. */
.cp-stage { position:static; height:auto; display:flex; justify-content:center;
  align-items:flex-start; max-width:none; margin:clamp(3.2rem,9.7vw,11.6rem) auto 0;
  padding:0 1.2rem clamp(4.6rem,7vw,8rem); }
.cp-fan { position:relative; flex:0 0 auto; width:clamp(150px,21.9vw,420px); height:auto;
  display:block; border-radius:13px; background:transparent; padding:0; border:0;
  box-shadow:0 22px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(248,243,231,.09);
  margin-left:calc(-1 * clamp(34px,8.34vw,160px));
  transform:translateY(var(--dy,0)) rotate(var(--rot,0deg));
  transition:transform .28s ease, box-shadow .28s ease; }
.cp-fan:first-child { margin-left:0; }
.cp-fan:nth-child(1) { --dy:-12px; --rot:-5.5deg; z-index:1; }
.cp-fan:nth-child(2) { --dy:10px;  --rot:3.5deg;  z-index:2; }
.cp-fan:nth-child(3) { --dy:-4px;  --rot:-2deg;   z-index:3; }
.cp-fan:nth-child(4) { --dy:14px;  --rot:5deg;    z-index:4; }
.cp-fan:nth-child(5) { --dy:-10px; --rot:-3.5deg; z-index:5; }
.cp-fan:nth-child(6) { --dy:6px;   --rot:4deg;    z-index:6; }
.cp-fan:hover { transform:translateY(calc(var(--dy,0px) - 10px)) rotate(var(--rot,0deg)) scale(1.035);
  z-index:7; box-shadow:0 18px 36px rgba(0,0,0,.55); }
@media (prefers-reduced-motion:reduce) { .cp-fan { transition:none; } }

/* ---- stat row: hairline cells, no boxes ---- */
.cp-wrap { max-width:1180px; margin:0 auto; padding:0 1.5rem 3rem; }
.cp-sec { margin:0; padding:3.6rem 0 0; }
.cp-sec + .cp-sec { margin-top:3.6rem; border-top:1px solid rgba(248,243,231,.10); }
.cp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid rgba(248,243,231,.14); border-bottom:1px solid rgba(248,243,231,.14); }
.cp-stat { background:none; border:0; border-left:1px solid rgba(248,243,231,.14);
  border-radius:0; padding:1.15rem 1.45rem; display:flex; flex-direction:column; gap:.3rem; }
.cp-stat:first-child { border-left:0; padding-left:0; }
.cp-stat-l { font-family:'JetBrains Mono',monospace; font-size:.61rem; letter-spacing:.14em;
  text-transform:uppercase; color:#9CC9E8; }
.cp-stat-v { font-family:'Fraunces',Georgia,serif; font-size:1.95rem; font-weight:600;
  color:#F8F3E7; letter-spacing:-.02em; line-height:1.1; }
.cp-stat-n { font-size:.8rem; color:#BDB6A6; line-height:1.5; }

/* ---- section headings ---- */
.cp-h2 { font-family:'Fraunces',Georgia,serif; font-weight:600; color:#F8F3E7;
  font-size:clamp(1.7rem,3.1vw,2.55rem); line-height:1.06; letter-spacing:-.035em; margin:0 0 .95rem; }
.cp-h2 span { display:block; font-family:'JetBrains Mono',monospace; font-size:.64rem;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#9CC9E8;
  margin:0 0 .7rem; }
.cp-sub { color:#BDB6A6; font-size:1rem; line-height:1.75; max-width:70ch; margin:0 0 1.6rem; }
.cp-sub strong { color:#F8F3E7; }
.cp-sub em { color:#e8c46a; font-style:normal; }

/* ---- tables ---- */
.cp-tablewrap { background:none; border:1px solid rgba(248,243,231,.14); border-radius:10px;
  overflow-x:auto; }
table.cp-table { width:100%; border-collapse:collapse; background:none; font-size:.92rem;
  color:#d6d0c2; }
table.cp-table th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:.62rem;
  letter-spacing:.11em; text-transform:uppercase; color:#9CC9E8; padding:.75rem .95rem;
  border-bottom:1px solid rgba(248,243,231,.18); white-space:nowrap; }
table.cp-table td { padding:.66rem .95rem; border-bottom:1px solid rgba(248,243,231,.09);
  vertical-align:middle; }
table.cp-table tr:last-child td { border-bottom:none; }
table.cp-table td.cp-numc { font-family:'JetBrains Mono',monospace; font-size:.82rem;
  text-align:right; white-space:nowrap; }
table.cp-table td.cp-rar { font-weight:600; color:#F8F3E7; }
table.cp-table strong { color:#F8F3E7; }
table.cp-table a { color:#e8c46a; text-decoration:none; font-weight:600; }
table.cp-table a:hover { text-decoration:underline; }
.cp-barcell { width:34%; min-width:90px; }
.cp-bar { display:block; height:7px; border-radius:999px; background:#e8c46a; min-width:3px; }

/* ---- the cards ---- */
.cp-gridbar { display:flex; flex-wrap:wrap; align-items:center; gap:.85rem; margin:0 0 1.2rem; }
.cp-gridbar label { font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.11em;
  text-transform:uppercase; color:#9CC9E8; }
.cp-gridbar select { font-family:'Instrument Sans',sans-serif; font-size:.85rem; padding:.46rem .7rem;
  border:1px solid rgba(248,243,231,.22); border-radius:8px; background:#18213A; color:#F8F3E7; }
.cp-note-inline { font-size:.8rem; color:#9a9384; max-width:60ch; }
.cp-cardgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.9rem; }
.cp-card { background:#18213A; border:1px solid rgba(248,243,231,.12); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cp-card:hover { transform:translateY(-3px); border-color:rgba(232,196,106,.55);
  box-shadow:0 12px 24px rgba(0,0,0,.38); }
.cp-card-link { display:flex; flex-direction:column; text-decoration:none; color:inherit;
  padding:.6rem .6rem .35rem; }
.cp-card-img { display:block; }
.cp-card-img img { width:100%; height:auto; display:block; border-radius:6px; background:#0d1424; }
.cp-card-name { font-family:'Fraunces',Georgia,serif; font-size:.95rem; font-weight:600;
  color:#F8F3E7; margin:.55rem 0 .1rem; line-height:1.25; }
.cp-card-num { font-family:'JetBrains Mono',monospace; font-size:.66rem; color:#9a9384; }
.cp-card-foot { display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.55rem .6rem .6rem; border-top:1px solid rgba(248,243,231,.09); margin-top:auto; }
.cp-card-price { font-family:'JetBrains Mono',monospace; font-size:.82rem; font-weight:700;
  color:#e8c46a; }
.cp-buys { display:flex; align-items:center; gap:.3rem; }
.cp-buy { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:#e8c46a;
  background:rgba(232,196,106,.12); border:1px solid rgba(232,196,106,.42);
  border-radius:999px; padding:.24rem .6rem; }
.cp-buy:hover { background:rgba(232,196,106,.22); }
.cp-buy-alt { color:#d6d0c2; background:rgba(248,243,231,.07); border-color:rgba(248,243,231,.2); }
.cp-buy-alt:hover { background:rgba(248,243,231,.12); }

/* ---- binder: a page of pockets, not a card gallery ---- */
.cp-binder { background:#18213A; border:1px solid rgba(248,243,231,.12); border-radius:14px;
  padding:1.4rem; }
.cp-binder-ctl { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-end;
  padding-bottom:1rem; border-bottom:1px solid rgba(248,243,231,.12); margin-bottom:1.2rem; }
.cp-ctl { display:flex; flex-direction:column; gap:.4rem; }
.cp-ctl > span { font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:#9CC9E8; }
.cp-pills { display:flex; gap:.4rem; flex-wrap:wrap; }
/* Their control pill: two lines (the value, then the count), fully rounded, and the tick INSIDE
   the pill on the active one -- measured off their binder band at 84x38, radius 999. Ours keeps
   our gold instead of their teal; the treatment is what transfers, not the hex. */
.cp-pill-btn { display:flex; flex-direction:column; align-items:center; gap:0; line-height:1.2;
  font-family:'JetBrains Mono',monospace; font-size:.8rem; padding:.42rem 1rem;
  border:1px solid rgba(248,243,231,.26); background:transparent; border-radius:999px;
  color:#d6d0c2; cursor:pointer; }
.cp-pill-btn b { font-weight:600; }
.cp-pill-btn em { font-style:normal; font-size:.56rem; letter-spacing:.04em; opacity:.72; }
.cp-pill-btn:hover { border-color:#e8c46a; color:#e8c46a; }
.cp-pill-btn.sel { background:#e8c46a; border-color:#e8c46a; color:#131A2E; font-weight:700; }
.cp-pill-btn.sel b:before { content:"\2713"; margin-right:.3em; }
.cp-pill-btn.sel:hover { color:#131A2E; }
.cp-ctl--end { margin-left:auto; }
/* their DISPLAY group: a switch, not a checkbox */
.cp-switch { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-size:.82rem; color:#d6d0c2; user-select:none; }
.cp-switch input { position:absolute; opacity:0; width:0; height:0; }
.cp-switch-track { position:relative; width:38px; height:22px; border-radius:999px;
  background:rgba(248,243,231,.18); transition:background .18s ease; }
.cp-switch-track:before { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#F8F3E7; transition:transform .18s ease; }
.cp-switch input:checked + .cp-switch-track { background:#e8c46a; }
.cp-switch input:checked + .cp-switch-track:before { transform:translateX(16px); background:#131A2E; }
.cp-switch input:focus-visible + .cp-switch-track { outline:2px solid #e8c46a; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .cp-switch-track, .cp-switch-track:before { transition:none; } }
.cp-pocketgrid { display:grid; gap:.7rem; justify-content:center;
  background:#0d1424; border:1px solid rgba(248,243,231,.10); border-radius:12px; padding:1.1rem; }
.cp-pocketgrid.size-9 { grid-template-columns:repeat(3, minmax(0,148px)); }
.cp-pocketgrid.size-12, .cp-pocketgrid.size-16 { grid-template-columns:repeat(4, minmax(0,148px)); }
.cp-pocket { position:relative; aspect-ratio:0.716; border-radius:6px;
  background:rgba(248,243,231,.03); border:1px dashed rgba(248,243,231,.18);
  overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cp-pocket img { width:100%; height:100%; object-fit:contain; padding:3px; }
.cp-pocket.filled { border-style:solid; border-color:rgba(248,243,231,.22);
  background:#fff; }
.cp-pocket .cp-pk-price { position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:700;
  background:rgba(19,26,46,.92); color:#F8F3E7; border:1px solid rgba(248,243,231,.2);
  border-radius:999px; padding:.1rem .5rem; white-space:nowrap; }
.cp-pocket .cp-pk-num { position:absolute; top:4px; left:5px; font-family:'JetBrains Mono',monospace;
  font-size:.56rem; color:#6e6858; }
/* the whole pocket is the link now (their "click any card"), and DISPLAY: Show prices hides
   the pills without disturbing the grid */
.cp-pocket .cp-pk-link { display:block; width:100%; height:100%; text-decoration:none; }
.cp-pocket .cp-pk-link:hover img { opacity:.9; }
.cp-pocketgrid.hide-prices .cp-pk-price { display:none; }
.cp-binder-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem; margin-top:1.15rem; padding-top:.95rem; border-top:1px solid rgba(248,243,231,.12); }
.cp-pager { display:flex; align-items:center; gap:.55rem; font-family:'JetBrains Mono',monospace;
  font-size:.74rem; color:#BDB6A6; }
.cp-pager button { font-family:'JetBrains Mono',monospace; font-size:.74rem; padding:.34rem .75rem;
  border:1px solid rgba(248,243,231,.26); background:transparent; border-radius:8px;
  cursor:pointer; color:#F8F3E7; }
.cp-pager button:hover:not(:disabled) { border-color:#e8c46a; color:#e8c46a; }
.cp-pager button:disabled { opacity:.35; cursor:not-allowed; }
.cp-stamp { font-family:'JetBrains Mono',monospace; font-size:.63rem; color:#8f8878;
  letter-spacing:.06em; }
.cp-btns { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---- buy / method ---- */
.cp-method { font-size:.86rem; line-height:1.75; color:#9a9384;
  background:rgba(248,243,231,.035); border:1px solid rgba(248,243,231,.12);
  border-radius:10px; padding:1.15rem 1.3rem; }
.cp-method b { color:#d6d0c2; }
.cp-method a { color:#e8c46a; }
.cp-disc { font-size:.8rem; color:#9a9384; margin-top:.85rem; line-height:1.7; }
.cp-excl { list-style:none; margin:.6rem 0 0; padding:0; }
.cp-excl li { font-size:.94rem; line-height:1.65; color:#BDB6A6;
  padding:.55rem 0 .55rem 1.15rem; position:relative;
  border-top:1px solid rgba(248,243,231,.09); }
.cp-excl li:first-child { border-top:none; }
.cp-excl li:before { content:"\2014"; position:absolute; left:0; color:#e8c46a; }
.cp-excl strong { color:#F8F3E7; }

/* ---- 1. set facts (their band 1) ----
   Theirs @1265: heading 30.36px at x=26 w=499, paragraph 15px rgb(155,155,155) below it, and the
   four facts laid INLINE on the right (labels 13.5px at y=993 in pale blue, values 15px at y=1030)
   — no cells, no rules, no second row. Ours stacked a five-cell strip underneath, at twice the
   type size, which is what [Caleb] saw as "bigger than what pokecottage does". */
.cp-overview-row { display:grid; grid-template-columns:1fr 1.18fr; gap:2.5rem; align-items:start; }
.cp-overview-copy .cp-h2 { font-size:clamp(1.5rem,2.35vw,1.9rem); line-height:1.12; margin:0 0 .75rem; max-width:22ch; }
.cp-overview-copy .cp-sub { font-size:.95rem; line-height:1.6; margin:0; max-width:52ch; color:#9b9b9b; }
.cp-meta { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem 1rem; margin-top:.35rem; }
.cp-meta-cell { display:flex; flex-direction:column; gap:.18rem; }
.cp-meta-l { font-family:'Instrument Sans',sans-serif; font-size:.84rem; letter-spacing:0; color:#9CC9E8; }
.cp-meta-v { font-size:.95rem; color:#F8F3E7; line-height:1.35; display:flex; align-items:center; gap:.35rem; }
.cp-meta-sym { width:18px; height:18px; object-fit:contain; }
.cp-meta-n { font-size:.78rem; color:#8f8878; }

/* ---- 2. explore the guide (their band 2) ----
   Measured off theirs @1265: the back card bleeds off the LEFT edge (x -33), the front card sits
   at x 90..511, and the cream panel is at x 383..729 — it overlaps only the front card's right
   edge and carries the six anchors. Ours had the panel centred over both cards, which covered
   what the cards are there to show. */
/* Their band 2, measured at 1920 (2026-10-20): band 1920x1002 · BACK card 665x863 at x=-10, i.e.
   bleeding off the LEFT edge of the viewport · FRONT card 572x799 at x=172 and straight · the
   white panel 382x395 at x=579, 254px down · the copy block 684 wide starting at 62% of the page.
   Everything below is those ratios. [Caleb]: the two cards were far too small, which made the band
   short and the EXPLORE panel small with it. Their band is full-bleed -- ours now is too.
   ⚠️ 2026-10-20: [Caleb] -- *"the flareon in the back has the top left corner cut off could we
   move both cards and the box just a little to the right."* MEASURED before the fix (headless
   Chrome, its own profile): the back card's leftmost corner sat at **x -6.5** (1440) / **-5.7**
   (1280) / **-4.8** (1100) -- 5-7px off the left edge of the viewport, and nothing in the DOM
   clipped it (`html`/`body` overflow is `visible`; the only `overflow:clip` on the chain is the
   card's own `border-radius`). The bleed is `left:-2%` PLUS the ~31px the -6deg rotation throws
   the top-left corner outwards, so the fix is a true translation of the whole group: every offset
   +4% of the art column (the panel is a child of `.cp-explore-art`, so it moves with them and the
   composition is unchanged). Measured after: corner **+14.1 / +12.6 / +10.8**, still overlapping
   only the front card's right edge, panel-to-copy gap **119 / 105 / 90px**.
   ⚠️ The bleed is deliberate -- the reference's back card is at x -33. This is a nudge back inside
   the edge, not the removal of the bleed. */
.cp-explore { display:grid; grid-template-columns:39% minmax(0,36%); justify-content:space-between;
  gap:0; align-items:center; max-width:1920px; margin:0 auto;
  padding:4.2rem clamp(1.5rem,2.5vw,3rem) 4.6rem; }
.cp-explore-art { position:relative; min-height:min(52vw,1000px); }
.cp-ex-card { position:absolute; border-radius:13px;
  box-shadow:0 22px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(248,243,231,.08); }
.cp-ex-card.a { left:26%; top:9%; width:76%; z-index:2; }
.cp-ex-card.b { left:2%; top:0; width:88%; transform:rotate(-6deg); z-index:1; }
.cp-explore-panel { position:absolute; left:75%; top:25%; width:min(382px, 66%); z-index:3;
  background:#F8F3E7; color:#171513; border-radius:14px; padding:1.35rem 1.5rem 1.5rem;
  box-shadow:0 26px 50px rgba(0,0,0,.45); }
/* the panel scales with the card it sits on: theirs is 395 tall with 46-47px rows and a
   13px/900 eyebrow -- measured off their `.toc-wrap` */
.cp-ex-eyebrow { display:block; font-family:'JetBrains Mono',monospace; font-size:.81rem;
  font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:#5d6250;
  margin-bottom:1rem; }
.cp-ex-list { list-style:none; margin:0; padding:0; }
.cp-ex-list li + li { border-top:1px solid rgba(23,21,19,.10); }
.cp-ex-list a { display:flex; align-items:center; gap:.7rem; padding:.78rem 0;
  text-decoration:none; color:#171513; font-size:1rem; }
.cp-ex-list a:hover .cp-ex-t { text-decoration:underline; }
.cp-ex-n { font-family:'JetBrains Mono',monospace; font-size:.68rem; color:#6f5514; width:1.7rem; }
.cp-ex-t { flex:1 1 auto; }
.cp-badge { font-family:'JetBrains Mono',monospace; font-size:.55rem; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:.15rem .48rem; white-space:nowrap; }
.cp-badge-pop { background:#DCDCFF; color:#2b2b6b; }
.cp-badge-free { background:#CFF3D4; color:#14532d; }
.cp-explore-copy h3 { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(1.7rem,2.9vw,2.4rem);
  line-height:1.06; letter-spacing:-.035em; color:#F8F3E7; margin:0 0 .9rem; }
.cp-explore-copy p { color:#BDB6A6; font-size:1rem; line-height:1.75; margin:0; }

/* ---- 3. card count (their band 3) — a CREAM band ----
   Theirs: bg rgb(251,251,243), five rarity cells per row, label 13px OLIVE rgb(168,184,66) above a
   18px dark value, then "Total Master Set Cards: N cards" with the number circled by a hand-drawn
   oval, and an italic line whose number is underlined. We had this band dark and the values in a
   table; the colour switch is the whole point of the band in their flow. */
.cp-band { width:100%; padding:3.4rem 0 3.6rem; }
.cp-inner { max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.cp-band--cream { background:#F8F3E7; color:#3b362c; }
.cp-band--cream .cp-h2 { color:#171513; }
.cp-band--cream .cp-h2 span { color:#5f6a1c; }
.cp-band--cream .cp-sub { color:#5c5445; }
.cp-band--cream .cp-arrow { color:#6b500f; }
/* ⭐ Theirs at 1920 (2026-10-20): 5 cells of 346px on a 374 pitch, the LABEL 13px/800 UPPERCASE
   olive and CENTRED, the value 18px CENTRED · "Total Master Set Cards: 333 cards" 38px/700 ·
   "(414 cards including all promos & variants!)" 34px Fraunces ITALIC · H2 61px. [Caleb]: *"the
   text is correct but not centered right and too small and squished as well."* Ours was
   left-aligned, 13px values and a 21px total line. */
.cp-count { display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1.6rem,2.6vw,2.6rem) 1rem; margin:2.4rem 0 2.8rem; }
.cp-count-row { display:flex; flex-direction:column; gap:.32rem; align-items:center;
  text-align:center; padding:0; border:0; }
.cp-count-l { font-family:'Instrument Sans',sans-serif; font-size:.81rem; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; color:#5f6a1c; width:auto; }
.cp-count-n { font-family:'Instrument Sans',sans-serif; font-size:1.13rem; color:#171513; }
.cp-count-m { margin-left:0; font-size:.74rem; color:#6b6558; }
.cp-count-total { font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(1.35rem,1.98vw,2.38rem); color:#171513; margin:0 0 .75rem; text-align:center; }
.cp-circled { border:2px solid #a8b842; border-radius:50%; padding:.05em .6em; display:inline-block;
  transform:rotate(-2.5deg); }
.cp-count-note { font-family:'Fraunces',Georgia,serif; font-size:clamp(1.02rem,1.77vw,2.13rem);
  color:#3b362c; font-style:italic; margin:0 0 .7rem; text-align:center; }
.cp-count-split { font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.04em;
  color:#6b6558; margin:0; text-align:center; }
.cp-underlined { border-bottom:2px solid #a8b842; padding-bottom:1px; }
/* the card-count heading is theirs: 61px at 1920, centred (ours was left-aligned at 40px) */
.cp-h2--count { text-align:center; font-size:clamp(1.9rem,3.18vw,3.82rem); }

/* ---- 3b. PROMOS (their band 4) — the same cream as the card count, flowing straight into it.
   Theirs at 1920: the giant faded word "Promos" 334.5px cream-on-cream flush to x=0, then
   "Journey Together • Prerelease & Promos", then "Click to view Price on TCGPlayer", then a grid
   of promo cards each carrying art, name, PRICE and WHAT THE CARD IS. Ours: the three set-numbered
   cards, the prerelease Clefable and the error cards. */
.cp-promo-line { font-family:'Fraunces',Georgia,serif; font-weight:400; color:#171513;
  font-size:clamp(1.4rem,2.33vw,2.8rem); letter-spacing:-.03em; line-height:1.1; margin:0 0 .8rem; }
.cp-promo-line strong { font-weight:700; }
.cp-promo-line span { color:#5f6a1c; margin:0 .35rem; }   /* #8d9a2c measured 2.79:1 on cream */
.cp-promo-hint { font-size:.88rem; color:#5c5445; margin:0 0 2.2rem; max-width:64ch; }
.cp-promogrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:1.5rem .9rem; margin:0 0 2rem; }
.cp-promo { display:flex; flex-direction:column; gap:.12rem; text-decoration:none; }
.cp-promo-img img { display:block; width:100%; height:auto; border-radius:6px; background:#fff;
  box-shadow:0 10px 22px rgba(23,21,19,.16); }
.cp-promo-name { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:.95rem;
  color:#171513; margin-top:.6rem; }
.cp-promo-price { font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:700;
  color:#7a5d15; }
.cp-promo-kind { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.05em;
  text-transform:uppercase; color:#6b6558; line-height:1.35; }
a.cp-promo:hover .cp-promo-name { text-decoration:underline; }
.cp-promo-note { font-size:.86rem; line-height:1.75; color:#4a453a; max-width:78ch; margin:0; }
.cp-promo-note strong { color:#171513; }
.cp-promo-note a { color:#6b500f; }
/* their Promos word is the tallest on the page -- 334.5px at 1920, against 190/160/116 for the others */
.cp-wm-band[data-wm="Promos"]::before { font-size:clamp(3.4rem, 17.4vw, 21rem); }

/* ---- 5. binder size ---- */
.cp-check { list-style:none; margin:0 0 1.1rem; padding:0; }
.cp-check li { font-size:1rem; color:#d6d0c2; padding:.35rem 0 .35rem 1.6rem; position:relative; }
.cp-check li:before { content:"\2713"; position:absolute; left:0; color:#7ee08a; font-weight:700; }
.cp-note { font-size:.86rem; color:#8f8878; line-height:1.7; max-width:66ch; margin:0 0 1rem; }
.cp-links { margin:0; }
.cp-arrow { color:#e8c46a; font-weight:600; text-decoration:none; }
.cp-arrow:hover { text-decoration:underline; }

/* ---- binder search ---- */
.cp-search { font-family:'Instrument Sans',sans-serif; font-size:.82rem; padding:.42rem .7rem;
  border:1px solid rgba(248,243,231,.22); border-radius:8px; background:#0d1424; color:#F8F3E7;
  min-width:190px; }
.cp-search::placeholder { color:#7d7768; }

/* ---- 7. placeholders (their band 7) ---- */
.cp-placeholders { display:grid; grid-template-columns:1.05fr .95fr; gap:2.6rem; align-items:center; }
.cp-ph-copy .cp-badge { display:inline-block; margin-bottom:.9rem; }
.cp-ph-facts { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.06em;
  color:#8f8878; margin:0 0 1.3rem; }
.cp-ph-alt { font-size:.84rem; color:#6b6558; margin:.9rem 0 0; }
.cp-ph-alt a { color:#7a5d15; }
.cp-btn { display:inline-flex; align-items:center; gap:.5rem; background:#E8C46A; color:#131A2E;
  font-weight:700; font-size:.92rem; text-decoration:none; border-radius:9px; padding:.78rem 1.3rem; }
.cp-btn:hover { background:#f0d489; }
.cp-ph-sheet { display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; padding:.7rem;
  background:#F8F3E7; border-radius:10px; box-shadow:0 26px 50px rgba(0,0,0,.45); }
.cp-ph-cell { aspect-ratio:2.5/3.5; border:1px dashed #b9b09c; border-radius:0; display:flex;
  flex-direction:column; justify-content:space-between; padding:.35rem .3rem; background:#fff; }
/* ⚠️ These mirror the PRINT sheet's `.cell .n` / `.cell .name` / `.cell .foot` -- same ORDER, same
   8pt:12pt size ratio (here .46:.70), square corners, dashed cut line.
   ⛔ **Not the print sheet's ink colours.** The download uses #8a8377 for `.n` and #5c5445 for
   `.foot`; #8a8377 on white measures **3.75:1** and put NINE new below-AA elements on this page
   when it was tried. The mock keeps the page's accessible grey (#6e6858, 5.55:1) instead -- a
   colour match on a decorative mock is not worth an accessibility regression. */
.cp-ph-name { font-family:'Fraunces',Georgia,serif; font-size:.7rem; color:#171513; line-height:1.1; }
.cp-ph-num { font-family:'JetBrains Mono',monospace; font-size:.46rem; letter-spacing:.06em;
  color:#6e6858; }
.cp-ph-have { font-family:'JetBrains Mono',monospace; font-size:.46rem; color:#6e6858; }

/* ---- 8. checklist on screen ---- */
.cp-checklist-live td { font-size:.86rem; }
/* their checklist head: the set name in ITALIC Fraunces, the rest upright, and the download
   button sitting on the right of the sub-line (measured off their vintage page) */
.cp-h2 em { font-style:italic; }
.cp-cl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1.6rem;
  flex-wrap:wrap; }
/* ---- their Grand Master List: the search bar that follows you down the list ---- */
/* ⚠️ MEASURED, not assumed: the bar was sticking correctly (top 0) but the site header is
   `position:sticky`, 70px tall and z-index 100 -- so the bar parked UNDER it and its search input
   was hidden behind navy. It now parks below the header, and the offset is set from the header's
   real height by JS (it is not 70px at every width). */
.cp-cl-bar { position:sticky; top:var(--cp-hdr-h, 70px); z-index:6; display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap; padding:.7rem 0; margin:0 0 .2rem; background:#F8F3E7;
  border-bottom:1px solid rgba(23,21,19,.12); }
.cp-cl-search { flex:1 1 260px; min-width:0; font-family:'Instrument Sans',sans-serif;
  font-size:.9rem; padding:.55rem .8rem; border:1px solid rgba(23,21,19,.22); border-radius:8px;
  background:#fff; color:#171513; }
.cp-cl-count { font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.06em;
  color:#6b6558; }
th.cp-cl-th { width:46px; }
.cp-cl-th { width:46px; padding-right:.4rem; }
.cp-cl-thumb { display:block; width:40px; }
.cp-cl-thumb img { display:block; width:40px; height:auto; border-radius:4px; background:#fff;
  box-shadow:0 2px 6px rgba(23,21,19,.16); }
.cp-cl-tag { font-family:'JetBrains Mono',monospace; font-size:.54rem; letter-spacing:.06em;
  text-transform:uppercase; color:#6b6558; border:1px solid rgba(23,21,19,.18); border-radius:999px;
  padding:.1rem .4rem; margin-left:.4rem; white-space:nowrap; }
.cp-cl-none { font-size:.9rem; color:#5c5445; padding:1rem 0 0; margin:0; }
.cp-cl-head .cp-sub { margin:0 0 1.5rem; max-width:68ch; }
.cp-cl-cta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.cp-ghost-btn { display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(232,196,106,.55); color:#e8c46a; border-radius:8px;
  padding:.66rem 1.15rem; white-space:nowrap; }
.cp-ghost-btn:hover { background:rgba(232,196,106,.12); }
.cp-foil { white-space:nowrap; }
.cp-foil-tag { font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:.16rem .5rem;
  background:rgba(232,196,106,.16); color:#e8c46a; }

/* ---- 9. FAQ — their accordion, which is a native <details>/<summary> (read out of their page) ---- */
.cp-faq-item { border-top:1px solid rgba(248,243,231,.10); }
.cp-faq-item:last-child { border-bottom:1px solid rgba(248,243,231,.10); }
.cp-faq-q { display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none;
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.12rem; color:#F8F3E7;
  margin:0; padding:1.15rem 0; letter-spacing:-.015em; }
.cp-faq-q::-webkit-details-marker { display:none; }
.cp-faq-q::marker { content:""; }
/* the + that becomes a − when the answer opens */
.cp-faq-mark { margin-left:auto; position:relative; width:14px; height:14px; flex:0 0 auto; }
.cp-faq-mark::before, .cp-faq-mark::after { content:""; position:absolute; background:#e8c46a; }
.cp-faq-mark::before { left:0; top:6px; width:14px; height:2px; }
.cp-faq-mark::after { left:6px; top:0; width:2px; height:14px; transition:transform .18s ease; }
.cp-faq-item[open] .cp-faq-mark::after { transform:scaleY(0); }
.cp-faq-content { padding:0 0 1.2rem; }
.cp-faq-inner p { color:#BDB6A6; font-size:.95rem; line-height:1.75; margin:0; max-width:78ch; }
.cp-faq-inner b, .cp-faq-inner strong { color:#F8F3E7; }
.cp-faq-inner a { color:#e8c46a; }
@media (prefers-reduced-motion:reduce) { .cp-faq-mark::after { transition:none; } }

/* ---- 10. where to next ---- */
.cp-next { text-align:center; }
.cp-next-eyebrow { font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:#9CC9E8; margin:0 0 1.2rem; }
.cp-next-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
.cp-next-card { display:flex; flex-direction:column; gap:.35rem; text-decoration:none;
  border:1px solid rgba(248,243,231,.18); border-radius:12px; padding:1.4rem 1.2rem;
  transition:border-color .18s ease, background .18s ease; }
.cp-next-card:hover { border-color:rgba(232,196,106,.55); background:rgba(248,243,231,.04); }
.cp-next-card span { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:#9CC9E8; }
.cp-next-card strong { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.25rem;
  color:#F8F3E7; }

/* ---- ⭐ THE WATERMARK WORD (their signature, and I missed it twice) ----
   ⚠️ Emitted as a ::before with `content: attr(data-wm)`, NOT as a text node: decorative text in
   the DOM is walked by the contrast auditor and fails AA by design (theirs measures ~1.6:1).
   Measured on pokecottage: the Binder Size band opens with "Binder Size" at 160px Fraunces
   in rgb(238,238,229) on a rgb(251,251,243) band — a difference of 13/255, i.e. cream on cream,
   flush to x=0, ABOVE the panel. Promos is 220px, Checklist 190px, Binder Layout 116px.
   ⚠️ It is invisible in a downscaled crop and it sits ABOVE the band's own top edge, so a crop
   taken from the band boundary misses it. Crop with headroom, and boost contrast before reading. */
/* ⚠️ overflow:CLIP, not hidden: `hidden` makes the band a scroll container, which silently kills
   `position:sticky` on the checklist's search bar. `clip` cuts the giant watermark the same way and
   leaves the sticky descendant working. */
.cp-wm-band { position:relative; overflow:clip; }
.cp-wm-band::before { content:attr(data-wm); display:block;
  font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:.86;
  font-size:clamp(3rem, 12.2vw, 10rem); letter-spacing:-.05em; margin:0 0 -.06em; padding:0;
  color:#ece7da; white-space:nowrap; user-select:none; }
.cp-sec.cp-wm-band::before { margin-left:-1.5rem; }
.cp-wm-band[data-wm="Binder Layout"]::before { color:rgba(248,243,231,.07); }
.cp-band--cream.cp-wm-band::before { color:#ece7da; }

/* ---- binder size panel (their band 5) ---- */
.cp-bs-panel { display:grid; grid-template-columns:minmax(0,458px) 1fr; gap:2.4rem;
  align-items:center; background:#131A2E; border-radius:16px; padding:2rem; margin-top:.4rem; }
.cp-bs-media { position:relative; }
.cp-bs-media img { display:block; width:100%; height:auto; border-radius:10px; background:#fff; }
.cp-bs-seal { position:absolute; top:-14px; right:-14px; z-index:2; width:104px; height:104px;
  border-radius:50%; background:#131A2E; border:1px solid rgba(232,196,106,.5);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase;
  color:#e8c46a; line-height:1.4; }
.cp-bs-copy h3 { font-family:'Fraunces',Georgia,serif; font-weight:600; color:#e8c46a;
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.1; letter-spacing:-.03em; margin:0 0 .9rem; }
.cp-bs-copy p { color:#BDB6A6; font-size:.95rem; line-height:1.7; margin:0 0 .8rem; }
.cp-bs-copy strong { color:#F8F3E7; }
.cp-bs-copy .cp-check li { color:#d6d0c2; }
.cp-bs-rec { color:#d6d0c2; }
.cp-bs-copy .cp-note { font-size:.85rem; color:#8f8878; }
.cp-bs-copy .cp-links { display:flex; flex-direction:column; gap:.5rem; margin:.6rem 0 0; }
/* the panel is navy even though the band is cream — its links need the dark-band gold */
.cp-bs-panel .cp-arrow { color:#e8c46a; }

/* ---- cream bands: everything inside them flips to ink ---- */
.cp-band--cream .cp-tablewrap { background:#fff; border-color:rgba(23,21,19,.12); }
.cp-band--cream table.cp-table { color:#3b362c; }
.cp-band--cream table.cp-table th { color:#5f6a1c; border-bottom-color:rgba(23,21,19,.14); }
.cp-band--cream table.cp-table td { border-bottom-color:rgba(23,21,19,.07); }
.cp-band--cream table.cp-table strong, .cp-band--cream table.cp-table td.cp-rar { color:#171513; }
.cp-band--cream table.cp-table a { color:#7a5d15; }
.cp-band--cream .cp-ghost-btn { border-color:rgba(23,21,19,.35); color:#171513; }
.cp-band--cream .cp-ghost-btn:hover { background:rgba(23,21,19,.06); }
.cp-band--cream .cp-foil { color:#6e6858; }
.cp-band--cream .cp-foil-tag { background:#E7EDC9; color:#3f4a12; }
.cp-band--cream .cp-faq-item { border-color:rgba(23,21,19,.12); }
.cp-band--cream .cp-faq-q { color:#171513; }
.cp-band--cream .cp-faq-mark::before, .cp-band--cream .cp-faq-mark::after { background:#5f6a1c; }
.cp-band--cream .cp-faq-inner p { color:#4a453a; }
.cp-band--cream .cp-faq-inner b, .cp-band--cream .cp-faq-inner strong { color:#171513; }
.cp-band--cream .cp-faq-inner a { color:#7a5d15; }
.cp-band--cream .cp-faq-item { border-color:rgba(23,21,19,.12); }
.cp-band--cream .cp-next-eyebrow { color:#5f6a1c; }
.cp-band--cream .cp-next-card { border-color:rgba(23,21,19,.16); }
.cp-band--cream .cp-next-card:hover { border-color:#7a5d15; background:rgba(23,21,19,.03); }
.cp-band--cream .cp-next-card span { color:#5f6a1c; }
.cp-band--cream .cp-next-card strong { color:#171513; }
.cp-band--cream .cp-ph-facts { color:#6b6558; }
.cp-band--cream .cp-ph-sheet { background:#fff; border:1px solid rgba(23,21,19,.12);
  box-shadow:0 18px 34px rgba(23,21,19,.12); }
.cp-band--cream .cp-badge-free { background:#CFF3D4; color:#14532d; }
.cp-band--cream .cp-placeholders .cp-sub { color:#4a453a; }

/* ---- print: paper is white, so the dark theme is dropped entirely ---- */
.cp-checklist { display:none; }
@media print {
  body { background:#fff !important; background-image:none !important; color:#111; }
  main.site-content { color:#111; }
  header.site-header, footer, .breadcrumbs-bar, .cp-hero, .cp-stage, .cp-stats, .cp-sec,
  .cp-method, .cp-binder-ctl, .cp-binder-foot, .cp-gridbar { display:none !important; }
  .cp-print-only { display:block !important; }
  .cp-print-head { display:block !important; margin-bottom:1rem; }
  .cp-print-head h1 { font-family:'Fraunces',Georgia,serif; font-size:1.4rem; margin:0 0 .2rem; color:#111; }
  .cp-print-head p { font-size:.78rem; color:#555; margin:0; }
  body.cp-printing-checklist .cp-checklist { display:table !important; }
  body.cp-printing-checklist .cp-binder { display:none !important; }
  body.cp-printing-binder .cp-binder { display:block !important; }
  .cp-binder, .cp-pocketgrid { background:none !important; border:none !important; padding:0 !important; }
  table.cp-table { font-size:10.5pt; color:#111; }
  table.cp-table th { color:#333; }
  table.cp-table th, table.cp-table td { padding:3pt 5pt; border-bottom:1px solid #ccc; }
  table.cp-table td.cp-rar, table.cp-table strong { color:#111; }
  .cp-pocketgrid { grid-template-columns:repeat(3, 2.5in) !important; gap:.12in; }
  .cp-pocket { aspect-ratio:3.5/2.5; border:1px solid #444; border-radius:4px;
    page-break-inside:avoid; background:#fff; }
  .cp-pocket img { display:none; }
  .cp-pocket .cp-pk-link { display:none !important; }
  .cp-pocket .cp-pk-price { position:static; background:none; border:none; color:#333;
    font-size:8pt; }
  .cp-placeholder-label { display:block !important; font-family:'JetBrains Mono',monospace;
    font-size:7.5pt; padding:.1in; color:#111; }
}

@media (max-width: 900px) {
  .cp-hero { padding:1.8rem 1.1rem 0; }
  .cp-hero h1 { font-size:clamp(2.4rem,9.4vw,3.2rem); max-width:none; }
  .cp-stage { margin-top:1.9rem; padding:0 1.1rem 2.4rem; }
  /* three cards on a phone: six at a readable size cannot fit, and the row is decorative.
     ⚠️ The stagger must move --dy, NOT `transform` -- or it wipes out the rotation set above. */
  .cp-fan { width:36vw; margin-left:-11vw; }
  .cp-fan:nth-child(n+4) { display:none; }
  .cp-fan:nth-child(2) { --dy:14px; }
  .cp-fan:nth-child(3) { --dy:7px; }
  .cp-wrap { padding:0 1.1rem 2.4rem; }
  .cp-sec { padding-top:2.6rem; }
  .cp-sec + .cp-sec { margin-top:2.6rem; }
  .cp-stats { grid-template-columns:1fr; }
  .cp-overview-row { grid-template-columns:1fr; gap:1.4rem; }
  .cp-meta { grid-template-columns:1fr 1fr; gap:1rem .8rem; }
  .cp-count { grid-template-columns:1fr 1fr; }
  .cp-count-total { font-size:1.5rem; }
  .cp-count-note { font-size:1.15rem; }
  .cp-promogrid { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:1.2rem .7rem; }
  .cp-promo-line { font-size:1.5rem; }
  .cp-count-note { font-size:.88rem; }
  .cp-meta-cell { border-left:0; border-top:1px solid rgba(248,243,231,.12); padding:.9rem 0; }
  .cp-meta-cell:nth-child(-n+2) { border-top:0; }
  .cp-explore { grid-template-columns:1fr; gap:1.6rem; padding:2.8rem 1.1rem 3rem; }
  /* ⭐ STACKED, NOT OVERLAID (2026-10-21). On desktop the two cards and the cream panel are
     absolutely positioned so the art bleeds and the panel overlaps it. MEASURED at a true 390px:
     the panel ran 370px PAST the art container and painted over the guide's own link list (312px of
     overlap across every row) -- "the box is extra big and long and covers up text". Below 900px the
     panel leaves absolute positioning entirely and starts below the cards. */
  .cp-explore-art { min-height:0; }
  .cp-ex-card.a { left:22%; top:0; width:56%; }
  .cp-ex-card.b { left:2%; top:6%; width:64%; }
  .cp-explore-panel { position:static; left:auto; top:auto; width:100%; margin-top:min(66vw,300px); }
  .cp-count-l { width:auto; }
  .cp-count-row { flex-wrap:wrap; gap:.4rem 1rem; }
  .cp-count-m { margin-left:0; width:100%; }
  .cp-placeholders { grid-template-columns:1fr; gap:1.6rem; }
  .cp-bs-panel { grid-template-columns:1fr; gap:1.4rem; padding:1.3rem; }
  .cp-bs-seal { width:82px; height:82px; font-size:.44rem; top:-10px; right:-6px; }
  .cp-watermark { font-size:clamp(2.6rem, 15vw, 5rem); }
  .cp-next-row { grid-template-columns:1fr; }
  .cp-stat { border-left:0; border-top:1px solid rgba(248,243,231,.14); padding:1rem 0; }
  .cp-stat:first-child { border-top:0; }
  .cp-binder { padding:1rem; }
  .cp-pocketgrid { padding:.7rem; gap:.45rem; }
  .cp-pocketgrid.size-9 { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cp-pocketgrid.size-12, .cp-pocketgrid.size-16 { grid-template-columns:repeat(4, minmax(0,1fr)); }
  /* the control row stacks: five groups cannot share 390px */
  .cp-ctl, .cp-ctl--end { width:100%; }
  .cp-ctl--end { margin-left:0; }
  .cp-pills { flex-wrap:wrap; }
  .cp-search { width:100%; min-width:0; }
  .cp-cl-head .cp-sub { max-width:none; }
  .cp-ghost-btn { width:100%; justify-content:center; }
}