/* Set visual-card-list sections (work order A). Scoped to .set-* only.
   Palette is the site's own: navy #131A2E, parchment #F8F3E7, brand gold.
   Measured on the light content box, where --gold-primary fails AA as text,
   so gold text uses --gold-ink. */
.set-meta-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:1.5rem 0 .2rem;background:#fff;border:1px solid var(--card-border);
  border-top:2px solid var(--gold-border);border-radius:var(--radius-md);overflow:hidden}
/* on the hero band the strip is the band's own bottom row, so it loses its box */
.set-meta-cell{padding:.95rem 1.1rem;border-left:1px solid var(--card-border);min-width:0}
.set-meta-cell:first-child{border-left:0}
.set-meta-label{display:block;font-family:'Space Grotesk',sans-serif;font-size:.66rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:.35rem}
.set-meta-value{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.02rem;
  font-weight:600;color:var(--text-main);letter-spacing:-.01em;line-height:1.25;
  overflow-wrap:break-word}
.set-meta-value a{color:#8d6c1e;font-weight:700;text-decoration:none}
.set-meta-value a:hover{text-decoration:underline}
.set-meta-symbol{width:26px;height:26px;display:block;object-fit:contain}

.set-list-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;margin:.35rem 0 .9rem}
.set-action-btn{display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;
  font-size:.86rem;font-weight:600;padding:.6rem 1.05rem;border-radius:999px;
  border:1px solid var(--gold-border);color:#8d6c1e;background:var(--gold-soft);
  text-decoration:none;line-height:1.2}
.set-action-btn:hover{background:#f6ecd0}
.set-action-btn--primary{background:#171513;color:#F8F3E7;border-color:#171513}
.set-action-btn--primary:hover{background:#2b2823}
.set-action-btn--soon{background:transparent;border-style:dashed;color:var(--text-muted);cursor:default}

.set-nav{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  margin:1.6rem 0 .2rem;padding-top:1.25rem;border-top:1px solid var(--card-border)}
.set-nav-link{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;
  padding:.55rem .85rem;border:1px solid var(--card-border);border-radius:var(--radius-sm);
  background:#fff;min-width:0}
.set-nav-link:hover{border-color:var(--gold-border);background:var(--gold-soft)}
.set-nav-spacer{border:0;background:transparent}
.set-nav-dir{font-family:'JetBrains Mono',monospace;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted)}
.set-nav-name{font-family:'Space Grotesk',sans-serif;font-size:.98rem;font-weight:600;color:var(--text-main)}
.set-nav-next{align-items:flex-end;text-align:right}

.set-faq{margin:2rem 0 .2rem;padding:1.3rem 1.4rem 1rem;background:#faf7ef;
  border:1px solid var(--card-border);border-radius:var(--radius-lg)}
.set-faq-h{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;color:#171513;margin:0 0 .9rem}
.set-faq-item{padding:.85rem 0;border-top:1px solid var(--card-border)}
.set-faq-item:first-child{border-top:0;padding-top:.2rem}
.set-faq-q{font-family:'Space Grotesk',sans-serif;font-size:1.02rem;font-weight:600;
  color:var(--text-main);margin:0 0 .35rem}
.set-faq-a{margin:0;font-size:.95rem;line-height:1.65;color:var(--text-muted)}
.set-faq-a a{color:#8d6c1e;font-weight:700;text-decoration:none}
.set-faq-a a:hover{text-decoration:underline}
/* ---- the full-bleed hero band. Navy, our own colour (#131A2E is the 1999 Base Set
   wrapper). The per-set colour comes from that set's OWN pack art, so 18 sets get 18
   accents without inventing 18 palettes. */
/* ⚠️ The header and the breadcrumb bar are LIGHT on every other page, which draws a visible
   seam across the top of a dark band. This sheet loads ONLY on the 18 set pages, and it is
   linked last, so these two rules restyle the site chrome here without touching the 3,809
   other pages. The reference's header is `position:fixed` with a TRANSPARENT background over
   the band for exactly this reason -- ours stays sticky and simply matches the colour. */
header.site-header{background:#131A2E;border-bottom:0;box-shadow:none}
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}
/* ⛔ The breadcrumb bar is hidden HERE ONLY. The nav already offers Home / Sets, so on a set
   page "Home / Sets / Jungle Expansion" is a second navigation strip nobody asked for, and it
   drew a line across the top of the band. It is `display:none`, not deleted: the markup and
   the BreadcrumbList data stay in the page. */
.breadcrumbs-bar{display:none}

header.site-header{transition:transform .22s ease, background .2s ease}
header.site-header.nav-hidden{transform:translateY(-102%) !important}
@media (prefers-reduced-motion: reduce){header.site-header{transition:none}}
.set-hero{position:relative;background:#131A2E;color:#F8F3E7;overflow:hidden;
  padding:2.2rem 0 0}
.set-hero-inner{max-width:1120px;margin:0 auto;padding:0 1.5rem;display:flex;
  align-items:center;gap:2.5rem;min-height:600px}
.set-hero-inner{position:relative;z-index:2}
.set-hero-copy{flex:0 1 44%;min-width:0;max-width:500px}
/* ⭐ THE TYPE WAS THE REAL PROBLEM. Nothing in this repo declares an @font-face and no page
   links a webfont -- so 'Space Grotesk', 'Plus Jakarta Sans' and 'JetBrains Mono' are named in
   the CSS and NEVER LOAD. Every page has been rendering in the system fallback sans, which is
   exactly why the text reads generic. The H1 now uses a real serif (Fraunces, the face the
   reference's own H1 uses) via the link the builder writes into the head.
   ⚠️ Site-wide font loading is a separate, bigger call -- flagged, not taken. */
.set-hero-eyebrow{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#9CC9E8;margin-bottom:.7rem}
.set-hero-h1{font-family:'Fraunces','Space Grotesk',Georgia,serif;font-weight:600;
  font-optical-sizing:auto;color:#F8F3E7;
  font-size:clamp(2.5rem,5.8vw,4.4rem);line-height:1.0;letter-spacing:-.045em;
  margin:0 0 1.05rem;max-width:12ch}
/* Two accents, not one: sky blue for the era label, gold for emphasis and links, cream for
   the headline and the emphasised facts, muted warm for the body. The reference runs the same
   shape (cream headline, a bright secondary on the eyebrow, muted body). */
.set-hero-intro{margin:0;font-size:1.02rem;line-height:1.7;color:#bdb6a6;max-width:52ch}
.set-hero-intro strong{color:#F8F3E7}
.set-hero-intro em{color:#e8c46a;font-style:normal}
.set-hero-intro a{color:#e8c46a}
.set-hero-intro a{color:#e8c46a;font-weight:700;text-decoration:none}
/* The art hangs off the RIGHT EDGE of the viewport, not the edge of the 1080 column.
   .set-hero has overflow:hidden, so what runs past is clipped — that clip IS the bleed. */
/* Composition read off the reference's hero: the CHASE CARD is in FRONT and runs off the
   right edge, the booster pack sits BEHIND it and to the left, fully contained. Both tilt
   counter-clockwise (-4deg / -6deg) and both sit in the upper two-thirds of the band.
   (The build spec had the z-order the other way round; the rendered hero does not.) */
/* The art is a FLEX ITEM of the same row as the copy, not an absolutely pinned block: the
   reference's cluster sits inside its hero row (their .tcg-hero runs 636..1189 in a 1280
   viewport, ending ~76px short of the edge), and ours read as jammed against the right edge
   when it was pinned there. */
.set-hero-art{position:relative;flex:1 1 56%;min-width:0;height:600px;pointer-events:none}
.set-hero-cardwrap,.set-hero-packwrap{position:absolute;height:auto}
/* ⭐ THE Z-ORDER, from their live DOM, not from a screenshot: the element they class
   `card-front` is the BOOSTER PACK at z-index 2 and it is the SMALL one (235x426); the
   element they class `card-back` is the CHASE CARD at z-index 1 and it is the BIG one
   (456x634). So: pack in FRONT and smaller, card BEHIND and larger -- which is what the
   build spec said all along and what a vision pass talked me out of. */
.set-hero-cardwrap{width:74%;right:0;top:0;z-index:1;transform:rotate(-2deg);
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.5))}
.set-hero-packwrap{width:39%;right:52%;top:24%;z-index:2;transform:rotate(-5deg);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.set-hero-card,.set-hero-pack{display:block;width:100%;height:auto}
.set-hero-card{border-radius:9px}
/* the reference's `.holo` layer: a soft sheen that sweeps the card face. Pure decoration,
   screen-blended so it lifts the artwork rather than greying it, and it stops dead under
   prefers-reduced-motion. */
.set-hero-cardwrap::after{content:"";position:absolute;inset:0;border-radius:10px;
  pointer-events:none;mix-blend-mode:screen;opacity:.75;
  background:linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.55) 45%,
    rgba(170,255,225,.45) 52%,rgba(255,180,255,.35) 58%,rgba(255,255,255,0) 70%);
  background-size:260% 260%;background-position:120% 0;
  animation:set-holo 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes set-holo{
  0%{background-position:120% 20%}
  55%{background-position:-40% 80%}
  100%{background-position:-40% 80%}
}
@media (prefers-reduced-motion: reduce){
  .set-hero-cardwrap::after{animation:none;opacity:.28}
}
.set-hero .set-meta-strip{max-width:1080px;margin:1.6rem auto 0;border-radius:0;
  background:transparent;border:0;border-top:1px solid rgba(248,243,231,.18)}
.set-hero .set-meta-cell{border-left-color:rgba(248,243,231,.18)}
.set-hero .set-meta-label{color:#b3ab97}
.set-hero .set-meta-value{color:#F8F3E7}
.set-hero .set-meta-value a{color:#e8c46a}
.set-hero .set-meta-symbol{filter:brightness(0) invert(1);opacity:.85}
/* ---- the CARD LIST band. The reference's card-list section sits on its dark background with
   bare card images and a row of count-carrying pills; ours is the same shape on our navy, and
   the pills filter by PRINTING (our axis) instead of theirs by rarity.
   Full-bleed via the 100vw trick so the band reads edge to edge even though the card grid is
   generated inside the page's light content box and cannot be moved without breaking site.py. */
.set-cards{background:#131A2E;color:#F8F3E7;padding:2.1rem 0 2.6rem}
/* The band is a SIBLING of the light content box, like the hero. Both earlier attempts to
   keep it inside the box failed on the render, not in the CSS: `width:100vw` overflowed by the
   scrollbar's width, and the shadow+clip trick was swallowed by the box's own rounded clip. */
.set-cards-inner{max-width:1080px;margin:0 auto;padding:0 1.5rem}
.set-cards-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;flex-wrap:wrap}
.set-cards-h{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05;color:#F8F3E7;margin:0}
.set-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 .7rem}
.set-filter{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:600;
  padding:.42rem .9rem;border-radius:999px;cursor:pointer;color:#F8F3E7;
  border:1px solid rgba(232,196,106,.45);background:rgba(232,196,106,.09)}
.set-filter:hover{background:rgba(232,196,106,.2)}
.set-filter.is-on{background:#e8c46a;border-color:#e8c46a;color:#131A2E}
.set-filter-n{opacity:.72;margin-left:.15rem}
.set-filter.is-on .set-filter-n{opacity:.9}
.set-filter-count{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.07em;
  text-transform:uppercase;color:#b3ab97;margin:0 0 1rem;min-height:1.1em}
/* the tiles are cards on the dark: no boxes, light ink, gold chips */
.set-cards .card-thumb-item{background:transparent;border:0;box-shadow:none}
/* ⚠️ The shared stylesheet paints a cream background ON the tile <img> itself
   (measured rgb(250,248,245)), which shows as a pale box behind every card once the grid
   is on navy. The tile's own background was already transparent -- it was the image, not
   the tile. */
.set-cards .card-thumb-img{background:transparent}
.set-cards .card-thumb-name{color:#F8F3E7}
.set-cards .card-thumb-number{color:#b3ab97}
.set-cards .card-thumb-tag{color:#b3ab97;border-color:rgba(248,243,231,.2);background:transparent}
.set-cards .print-chip{color:#e8c46a;border-color:rgba(232,196,106,.4);background:rgba(232,196,106,.08)}
.set-cards .print-chip:hover{background:rgba(232,196,106,.2)}
.set-cards .set-action-btn--primary{background:#F8F3E7;color:#131A2E;border-color:#F8F3E7}
.set-cards .set-action-btn--primary:hover{background:#fff}
.set-cards .set-action-btn{border-color:rgba(232,196,106,.5);background:rgba(232,196,106,.1);color:#e8c46a}
.set-cards .set-action-btn:hover{background:rgba(232,196,106,.22)}
.set-cards .set-action-btn--soon{background:transparent;border-style:dashed;color:#b3ab97}
@media (max-width:640px){
  .set-cards{padding:1.5rem 0 1.8rem}
  .set-filters{gap:.4rem}
  .set-filter{font-size:.75rem;padding:.38rem .75rem}
}

@media (max-width:900px){
  /* ⭐ THE ART STAYS (2026-10-21). This was `display:none`, and on a phone that removed the whole
     signature of a set page -- the reference keeps its pack + chase card at mobile (measured at a true
     390px) while we showed nothing. It now stacks UNDER the copy on a phone-scaled box. The two
     wrappers are absolutely positioned children, so the container needs a definite height or they
     collapse to nothing. */
  .set-hero-art{display:block;flex:1 1 100%;height:min(96vw,380px);margin-top:1.6rem}
  .set-hero-cardwrap{width:66%;right:0;top:0}
  .set-hero-packwrap{width:35%;right:56%;top:22%}
  .set-hero-inner{min-height:0;padding-bottom:1.4rem;flex-wrap:wrap}
  /* ⚠️ The copy keeps `flex:0 1 44%` from the desktop rule, so with the art hidden it was
     squeezed to 150px on a 390 viewport and the band ballooned to 1166px of wrapping text.
     Hiding the art is not enough -- the copy's basis has to be released too. */
  .set-hero-copy{flex:1 1 100%;max-width:none}
  .set-hero-h1{font-size:clamp(1.9rem,7vw,2.6rem);max-width:none}
}
@media (max-width:640px){
  .set-hero{padding-top:1.6rem}
  .set-hero .set-meta-strip{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .set-meta-cell{border-left:0;border-top:1px solid var(--card-border);padding-left:0;padding-right:0}
  .set-meta-cell:first-child{border-top:0}
  .set-list-actions{justify-content:flex-start}
}