/* Master sets hub — scoped additions. Pairs with /stylesheet.css.

   ⛔ THE BAND SYSTEM IS NOT IN THE SHARED STYLESHEET — it lives in the HOMEPAGE's own
   `<style id="home-bands">` block, so a second banded page has to carry its own copy of it. These
   rules mirror the homepage's exactly (same two navy values, same parchment, same 3.1rem rhythm,
   same thin gold seam) so the two pages read as the same site.
   ⛔ AND the sketch wallpaper lives on `body` in stylesheet.css, which every one of the 3,827 pages
   loads, so a banded page must switch it off FOR ITSELF or it shows in the gaps between bands. The
   homepage does the same page-scoped. Sweeping it off the inner pages site-wide is a separate item. */
body{background-color:#131A2E;background-image:none !important;background-attachment:scroll}
.band{width:100%;padding:3.1rem 0}
.band--hero{padding:0}
.band--navy{background:#131A2E}
.band--navy-2{background:#1A2340}
.band--parchment{background:#F8F3E7;--text-faint:#726d64}
.band--parchment + .band--navy,.band--navy + .band--parchment,
.band--parchment + .band--navy-2,.band--navy-2 + .band--parchment{
  border-top:1px solid rgba(184,134,11,.28)}
.ms-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 1.5rem}

/* ---- the hero: the artwork is the room; the copy sits on a parchment card --------------------
   MEASURED, not chosen by eye (2026-10-15): the illustration's own luminance runs 0.137 to 0.893,
   so light text directly on it fails on the pale cliffs. A 95%-opaque parchment card resolves to
   13.7:1 worst case for navy ink over ANY part of the picture. */
/* ---- the header OVERLAYS the hero, the way the reference's does ----------------------------------
   The reference's photograph starts at the very top edge with its nav transparent on top of it, and
   the nav leaves as you scroll down. Ours was a sticky opaque bar above the image, which is why the
   image could not reach the top. Page-scoped: every other page keeps the sticky header it has. */
/* ⚠️ `header.site-header` — the shared stylesheet's own selector is element+class (0,1,1), which
   BEATS a plain `.site-header` (0,1,0); a bare class override measured as a no-op (sticky won).
   And `main.site-content` carries `margin: 2rem auto` + a max-width, which held the hero 32px down
   the page. Both are undone here, page-scoped only. */
header.site-header{position:fixed !important;top:0;left:0;right:0;z-index:60;
  background:transparent !important;box-shadow:none !important;border-bottom:0 !important;
  transition:transform .3s ease, background-color .25s ease}
main.site-content{max-width:none !important;margin:0 !important;padding:0 !important}
header.site-header.hidden{transform:translateY(-102%)}

/* ⭐ AT MOBILE THE TRANSPARENT OVERLAY IS OFF (2026-10-21). Floating the nav on a TRANSPARENT bar
   over the hero is a DESKTOP design; on a phone the header wraps to 184px while the hero's own text
   starts 40px down, so the nav sat ON the hero's eyebrow and headline (measured at a true 390px
   viewport). Below 821px this page falls back to the shared sticky header - the same one every other
   page uses, which is why those pages never showed the fault. */
@media (max-width: 820px){
  header.site-header{position:sticky !important;background:#131A2E !important;
    transform:none !important;backdrop-filter:none !important;will-change:auto}
  header.site-header.hidden,header.site-header.nav-hidden{transform:none !important}
}

header.site-header.nav-solid{background:rgba(19,26,46,.95) !important;backdrop-filter:blur(10px)}
/* ⭐ THE NAV CARRIES ITS OWN SHADOW AND NOTHING IS TINTED, because THIS ILLUSTRATION HAS NO SAFE ZONE.
   Measured band-by-band on the artwork itself: only the top 12% is quiet, and even there dark navy ink
   tops out at **3.90:1** while light ink reaches **2.43:1** — every band below it runs 1.0–1.4:1 for
   BOTH inks, i.e. a highlight and a shadow inside the same line of type. A tinted band is what would
   make one ink compliant, and a tinted band is exactly what reads as a dark bar across the top of the
   picture (confirmed in review, 2026-10-15). So the shadow goes on the glyphs: cream ink over a 0.85
   shadow composite measures ≥5:1 where the art is brightest and 13:1 where it is dark, and the
   artwork itself is untouched. */
header.site-header .brand-name,header.site-header .nav-btn{color:#F8F3E7;text-shadow:0 2px 6px rgba(6,9,18,.92), 0 1px 1px rgba(6,9,18,.9)}
header.site-header .brand-text p{color:#E8C46A;text-shadow:0 1px 4px rgba(6,9,18,.9)}
header.site-header .brand-badge{background:#F8F3E7;color:#131A2E}
header.site-header .nav-badge-pill{background:rgba(19,26,46,.55) !important;color:#F8F3E7 !important;
  border-color:rgba(248,243,231,.42) !important}
header.site-header .nav-btn:hover{color:#E8C46A}

/* ---- the hero: the artwork is the page, copy straight on it, no panel, no wash --------------------
   ⛔ THERE IS NO SCRIM, per [Caleb]: *"i don't think we need the darkening at all"* — and the numbers
   say why a WASH was never the right tool here: this illustration has no flat area at the scale of a
   line of text. Every 240×180 cell of the rendered hero spans luminance 0.00–0.92 (bright highlights
   AND near-black shadows inside the same line of type), so navy ink measures 1.1–1.9:1 against the
   dark patches and cream measures 1.0–2.6:1 against the light ones. A dark plate is what would make
   either ink satisfy a checker — and the plate is the thing that was just removed.
   ⭐ So the copy is CREAM with a TIGHT DARK SHADOW, the way the reference does it (its own artwork is
   a soft 3D render with a quiet area behind the text; this one is a detailed watercolour that has
   none). The shadow is local to the glyphs — it darkens nothing else on the picture. */
.band--hero{position:relative;display:flex;align-items:flex-end;min-height:88vh;padding:0;
  background:#131A2E url('/assets/hero-mankey-bridge.jpg') left bottom/cover no-repeat}
.ms-hero-inner{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;
  padding:0 1.5rem 3.1rem}
.ms-hero-inner > *{max-width:660px}
/* ⛔ NOT the H1. At the reference's own relationship (5.6vw = 107px at 1920) "Master Set Guides" needs
   ~910px; capped at 660 it wrapped to THREE lines (measured 215px of box). The 660 cap is for the eyebrow
   and the subline, where a narrow measure is right. */
.ms-hero-inner > .hero-title{max-width:1180px}
.hero-eyebrow,.hero-title{color:#F8F3E7;
  text-shadow:0 2px 7px rgba(6,9,18,.92), 0 1px 2px rgba(6,9,18,.85), 0 0 1px rgba(6,9,18,.9)}
.hero-eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 .45rem;
  text-shadow:0 2px 6px rgba(6,9,18,.96), 0 0 3px rgba(6,9,18,.95), 0 1px 1px rgba(6,9,18,.95)}
.hero-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.6rem, 5.6vw, 6.6rem);line-height:1.02;
  font-weight:700;letter-spacing:-.025em;margin:0}
/* ⭐ THE TYPE SCALE IS THE REFERENCE'S (2026-10-24). Measured on their /pokemon-master-set-guides at 1920:
   hero H1 **140px Fraunces w400** in a 1843 box at x38, and every section head **61px Fraunces w400**.
   Ours was 59.2px Space Grotesk in a 660 column with 25px section heads — [Caleb]: *"some of the text size
   look and position is different then what pokecottage has"*. Their 140px is not copied literally (our hero
   column is 660 wide and our own homepage hero is 94px), but the RELATIONSHIP is: the hero is a display
   serif at ~5.6vw and a section head is ~3.2vw. */
.ms-credit{font-size:.75rem;line-height:1.6;color:var(--text-muted);margin:0 0 1.4rem}
.ms-credit a{color:#7a5c14}

.ms-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.35rem 0 .9rem}
.ms-btn-ghost{display:inline-flex;align-items:center;padding:.7rem 1.15rem;border-radius:var(--radius-sm);
  border:1px solid var(--card-border);color:#5a5348;background:#fff;font-weight:600;text-decoration:none}
.ms-btn-ghost:hover{border-color:var(--gold-border);color:#7a5c14;background:var(--gold-soft)}
/* ⚠️ THE GHOST BUTTON IS SURFACE-SCOPED. It is light-on-dark on the navy bands and dark-on-light
   everywhere else; one shared treatment fails on one of the two (measured, 2026-10-15). */
.band--hero .ms-btn-ghost,.band--navy .ms-btn-ghost,.band--navy-2 .ms-btn-ghost{
  border-color:rgba(237,241,248,.42);color:#EDF1F8;background:transparent}
.band--hero .ms-btn-ghost:hover,.band--navy .ms-btn-ghost:hover,.band--navy-2 .ms-btn-ghost:hover{
  border-color:#E8C46A;color:#E8C46A;background:transparent}
.ms-pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  color:#5a5348;background:#fff;border:1px solid var(--gold-border);border-radius:999px;
  padding:.32rem .7rem}

/* ---- the light first band, which mirrors the reference's "what's included" section ------------ */
.ms-center{text-align:center;max-width:800px;margin:0 auto 1.9rem}
.ms-promise{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.9rem, 3.2vw, 3.8rem);line-height:1.02;font-weight:700;letter-spacing:-.06em;
  color:#171513;margin:0 0 .85rem;letter-spacing:-.02em}
.ms-promise em{font-style:normal;color:#8a5a10;border-bottom:3px solid rgba(184,134,11,.3)}
.ms-two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0 2.75rem;
  max-width:1000px;margin:0 auto}
.ms-two-col .ms-list li:last-child{border-bottom:0}

.ms-h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.7rem, 3.2vw, 3.8rem);font-weight:700;color:#171513;
  margin:0 0 .5rem;letter-spacing:-.01em}
.ms-sub-line{color:var(--text-muted);line-height:1.65;max-width:760px;margin:0 0 1.1rem}
.ms-chips{font-size:.92rem;color:#171513;font-weight:600;line-height:1.9;margin:0 0 1.1rem}
.ms-list{list-style:none;padding:0;margin:0}
.ms-list li{padding:.6rem 0;border-bottom:1px solid #f0eadd;font-size:.95rem;color:var(--text-muted);
  line-height:1.6}
.ms-list li strong{color:#171513}
.ms-list li:before{content:"\2713";color:var(--gold-primary);font-weight:700;margin-right:.55rem}

.ms-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.1rem}
.ms-tab{background:#fff;border:1px solid var(--card-border);border-radius:999px;padding:.5rem 1rem;
  cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#5a5348}
.ms-tab:hover{border-color:var(--gold-border);background:var(--gold-soft);color:#7a5c14}
.ms-tab.sel{background:var(--band-navy,#131A2E);border-color:var(--band-navy,#131A2E);color:#fff}
.ms-tabnote{font-size:.88rem;color:var(--text-muted);margin:0 0 1.15rem;line-height:1.6}
/* the six one-line bullets -- their band 1's shape: ~15px, a tick, one line each, in a 1225 column */
/* ⭐ THE SIGNUP ROW: their two columns (916 heading / 684 right-aligned line), our copy, and the field
   disabled with the reason stated beside it. */
/* ⛔ THE DOUBLE-GRID BUG: the outer wrapper was ALSO called .ms-signup, so this rule matched the wrapper and
   the inner div -- nesting the grid in itself, which halved the heading column to 547.8px and wrapped 61px
   text to four lines. The wrapper and the grid are now separate classes. */
.ms-signup-band{max-width:1891px;margin:clamp(2.6rem,4vw,4rem) auto 0;
  padding:clamp(1.6rem,2.4vw,2.4rem) 24px 0;border-top:1px solid rgba(30,27,20,.12)}
.ms-signup{display:grid;grid-template-columns:916fr 684fr;gap:2rem;align-items:start}
.ms-signup-h{margin:0;max-width:none;letter-spacing:-.06em}  /* their own measure: -3.66px at 61px */   /* ⛔ .ms-h2 caps at 548px, which wrapped the 61px heading to
   four lines; theirs is 916 wide and takes two. The cap is a column measure for the narrow .ms-wrap sections and
   is wrong for a full-band row. */
.ms-signup-side{text-align:right}
.ms-signup-p{font-size:1.25rem;line-height:1.35;margin:0 0 1rem}
.ms-soon{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--gold-border);border-radius:999px;padding:.22rem .5rem;
  margin-left:.35rem;white-space:nowrap;vertical-align:.12em}
.ms-form--signup{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;margin:0}
.ms-form--signup input{min-width:min(300px,58%);padding:.7rem .9rem;border:1px solid var(--gold-border);
  border-radius:8px;font:inherit;background:#FFFFFF;color:#3B372F}
.ms-form--signup button{padding:.7rem 1.15rem;border-radius:8px;border:1px solid var(--gold-border);
  background:#131A2E;color:#F4EEE0;font:inherit;font-weight:600;cursor:not-allowed;opacity:.62}
@media (max-width:900px){.ms-signup{grid-template-columns:1fr;gap:1rem}.ms-signup-side{text-align:left}
  .ms-form--signup{justify-content:flex-start}.ms-form--signup input{min-width:0;flex:1 1 200px}}
.ms-eyebrow{text-align:center;font-size:.8rem;line-height:19px;letter-spacing:.15px;color:#C6CFE4;
  margin:0 0 .5rem}
/* ⭐ THE UNDERLINE. Theirs is an SVG "Text Attribute" -- shape underlineCurve, isFront false, thickness 0.1em,
   linecap round, animated left-to-right in 0.5s, stroked in their palette's darkAccent. Reproduced as an inline
   SVG so it costs no request: the text stays our cream and the stroke is our sky #9CC9E8, not their green.
   ⛔ A plain `text-decoration: underline` is NOT this: theirs is a curve that overshoots the words and reads as
   hand-drawn, which is the whole look [Caleb] is pointing at. */
.ms-hl{text-align:center;margin:0}
.ms-hl-t{position:relative;display:inline-block}
.ms-hl-svg{position:absolute;left:-1.5%;right:-1.5%;bottom:-.14em;width:103%;height:.17em;overflow:visible}
.ms-hl-svg path{fill:none;stroke:#9CC9E8;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: no-preference){
  .ms-hl-svg path{stroke-dasharray:330;stroke-dashoffset:330;animation:msDraw .5s ease-out .2s forwards}
}
@keyframes msDraw{to{stroke-dashoffset:0}}
.ms-tier-h3{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.3rem, 1.98vw, 2.375rem);font-weight:700;
  color:#F4EEE0 !important;text-align:center;line-height:1.05;letter-spacing:-.06em;margin:30px 0}
.ms-tier-note{text-align:center;font-size:.8rem;line-height:19px;letter-spacing:.15px;font-style:italic;
  color:#C6CFE4;margin:0}
.ms-tier-body{text-align:center;font-size:.95rem;line-height:23px;letter-spacing:.15px;color:#DDE4F0;
  max-width:916px;margin:15px auto}
.ms-tier-body strong{color:#FFFFFF}
.ms-tier-inc{list-style:none;text-align:center;max-width:916px;margin:15px auto;padding:0}
.ms-tier-inc li{font-size:.95rem;line-height:23px;letter-spacing:.15px;color:#DDE4F0}
.ms-tier-inc strong{color:#FFFFFF}
.band--navy-2 .ms-tier-h3 em{font-style:italic;color:#9CC9E8}
/* ⭐ THE SIX ✓ LINES ARE THE REFERENCE'S, MEASURED 2026-10-24 (their band 1, per element):
   each is a CENTERED `<p>` at 15px / line-height 23px / letter-spacing 0.15px / margin 15px 0, in a 1225 column,
   with the tick as a LITERAL character inside a `<strong>` -- not a list, not a ::before.
   ⛔ AND THE ESCAPE WAS A BUG: the first version drew the tick with a CSS hex escape written inside a Python
   string, and Python read the backslash as an OCTAL escape -- so the page printed the two characters that
   escape resolves to, followed by a 3, in front of every line. [Caleb]: *"we have 13 for some reason in front of text lines where there should be check marks."*
   [Caleb]: *"we have 13 for some reason in front of text lines where there should be check marks."*
   The glyph lives in the MARKUP now, where nothing can re-escape it. */
.ms-tick{text-align:center;max-width:1225px;margin:15px auto;font-size:.95rem;line-height:23px;
  letter-spacing:.15px;color:#3b372f}
.ms-tick strong{color:#171513}
.band--navy .ms-tick,.band--navy-2 .ms-tick{color:#C6CFE4}
.band--navy .ms-tick strong,.band--navy-2 .ms-tick strong{color:#FFFFFF}
.ms-tick:first-of-type{margin-top:1.5rem}
@media (max-width:700px){.ms-tick{line-height:21px}}
/* ⭐ THE FOUR CIRCULAR WAYS IN — the reference's own block, measured 2026-10-24: four 293x293 circles across
   1843 (x38 / 502 / 965 / 1429 — a 453 column with 11px of gap), a 38px Fraunces heading under each, then one
   15px line. [Caleb]: *"the text and options with circle pictures to pick a kind of master set. they have a by
   pokemon, by set, pokedex and trainers and more."*
   ⛔ TWO OF OURS ARE HONESTLY MARKED COMING SOON: there is no Pokédex page yet (the spine is built, the page
   is next) and no Trainer data at all — the harvest carries no supertype field. A tile that looks live and
   opens nothing is the thing to avoid; a chip that says so is not. */
.ms-circles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:2.4rem 0 0;text-align:center}
.ms-circle{display:block;text-decoration:none;color:inherit}
.ms-circle-img{display:block;margin:0 auto;width:100%;max-width:293px;height:auto;aspect-ratio:1/1;
  border-radius:50%;object-fit:cover;background:#EFE7D6;border:1px solid var(--card-border);
  transition:transform .25s ease, box-shadow .25s ease}
.ms-circle:hover .ms-circle-img,.ms-circle:focus-visible .ms-circle-img{transform:translateY(-4px) scale(1.015);
  box-shadow:0 14px 26px rgba(23,21,19,.18)}
.ms-circle:focus-visible{outline:2px solid #8a5a10;outline-offset:6px;border-radius:12px}
.ms-circle-h{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.35rem, 1.98vw, 2.375rem);font-weight:700;
  color:#171513;margin:.95rem 0 .35rem;line-height:1.14;letter-spacing:-.01em}
.ms-circle-p{font-size:.95rem;color:var(--text-muted);line-height:1.6;margin:0 auto;max-width:310px}
.ms-circle.is-soon .ms-circle-img{filter:saturate(.4);opacity:.8}
.ms-tab.sel .ms-soon{background:#131A2E;border-color:#131A2E;color:#E8C46A}
.ms-soon{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#7a5c14;background:#F5EBCB;border:1px solid #E0C98A;
  border-radius:999px;padding:.2rem .5rem;margin:.5rem 0 0}
/* the search — theirs is an input above the tabs, placeholder "Search Eevee, Charizard, Evolving Skies, ..." */
.ms-search{position:relative;margin:0 0 .9rem;max-width:620px}
.ms-search input{width:100%;box-sizing:border-box;padding:.8rem 1rem .8rem 2.5rem;border-radius:999px;
  border:1px solid rgba(237,241,248,.38);background:transparent;color:#fff;font-size:1rem;font-family:inherit}
.ms-search input::placeholder{color:#C6CFE4;opacity:1}
.ms-search input:focus{outline:2px solid #E8C46A;outline-offset:2px}
.ms-search-mag{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:#C6CFE4;stroke-width:2;fill:none}
.ms-search-count{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:#6b6355;
  margin:.45rem 0 0;min-height:1em}
/* ⚠️ THE SEARCH WAS BUILT FOR THE NAVY BAND and moved to a parchment one when the ground flipped. A
   white-ink input on cream is an invisible control, so the light surface gets its own values -- and the
   navy pair stays, because the same class may sit on either. */
.band--parchment .ms-search input,.band--parchment .ms-search input::placeholder{color:#171513}
.band--parchment .ms-search input{background:#fff;border-color:var(--card-border)}
.band--parchment .ms-search input::placeholder{color:#6b6355;opacity:1}
.band--parchment .ms-search-mag{stroke:#6b6355}
@media (max-width:900px){
  .ms-circles{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}
  .ms-circle-h{font-size:1.3rem}
}
.ms-era{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#7a5c14;margin:1.5rem 0 .55rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--card-border)}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:.7rem}
.ms-grid--band{grid-template-columns:repeat(auto-fill,minmax(198px,1fr))}
.ms-grid--mon{grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:.5rem}
/* ⭐ THE DEX GRID: SQUARES, in Pokédex order. The set tiles' square (191x191, radius 0, art centred) is the
   shape already signed off on this page, so the Pokémon grid reuses it rather than inventing a third tile —
   sprite on top at ~74% of the box, the name under it, the number in mono under that. Seven-up at 1032px,
   four-up under 900px, three-up under 560px. */
.ms-grid--dex{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:.6rem}
.ms-tile--dex{aspect-ratio:1/1;padding:.6rem .4rem .55rem;align-items:center;justify-content:center;
  text-align:center;gap:0}
.ms-dex-img{width:72%;height:auto;max-height:60%;object-fit:contain;margin:0 auto .1rem;flex:0 0 auto}
.ms-tile--dex .ms-tile-name{font-size:.86rem;line-height:1.15}
.ms-dex-n{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;
  color:var(--text-muted);margin-top:.12rem}
.ms-tile{position:relative;display:flex;flex-direction:column;gap:.2rem;background:#fff;
  border:1px solid var(--card-border);border-radius:var(--radius-md);padding:.85rem .9rem;
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.ms-tile:hover,.ms-tile:focus-within{border-color:var(--gold-border);box-shadow:0 6px 18px rgba(45,35,20,.09)}
/* ⭐ the reference's tile, measured: a 191x191 SQUARE with the set art centred in it, radius 0, no visible
   text. Ours carries the set SYMBOL (pokemontcg.io, the same host the set pages already use) instead of a
   wordmark, so the square reads as a badge rather than a paragraph. */
/* ⭐ THE TILE ITSELF, measured off theirs: a 191x191 box with a TRANSPARENT background, radius 0, NO border
   and NO shadow, holding 132x69 of art and no visible text -- and the art is `filter: grayscale(1)`, which is
   the thing they do that we did not. Ours were chrome cards at 249.6px with a gold border and a hover shadow.
   The pack art is PORTRAIT (389x660), so it is sized by height instead of by width and stands centred. */
.ms-tile--set{aspect-ratio:1/1;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;
  background:transparent;border-color:transparent;box-shadow:none}
.ms-tile--set:hover,.ms-tile--set:focus-within{border-color:transparent;box-shadow:none;transform:translateY(-2px)}
/* ⭐ the SET LOGO is LANDSCAPE (their measured art is 132x69, about 1.9:1), so it is sized by WIDTH here, not
   by height -- the pack art's portrait sizing was the giveaway that it was the wrong asset. */
/* ⭐ FULL COLOUR, ALWAYS. [Caleb]: *"make them stay full color. pokecottage has grey squares for sets they
   don't have master set pages done for yet. we wont worry about adding those yet."* So the greyscale is gone --
   it was their "not built yet" signal, and every one of our 18 sets has a page, so the signal would be a lie.
   ⚠️ IF that state is ever wanted, it belongs on a `.ms-tile--todo` modifier keyed off `built`, NOT as a blanket
   filter on the art class. */
.ms-setart{width:min(132px,82%);height:auto;object-fit:contain;margin:0}
.ms-grid--set{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:.55rem}
/* the four sets with no symbol (Base Set, Best of Game, the promos, League Energy) show their name */
.ms-tile-fallback{display:none;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:.86rem;line-height:1.15;letter-spacing:-.01em;color:var(--text-heading);text-align:center;padding:.8rem}
.ms-tile--set.no-sym .ms-tile-fallback{display:block}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;
  border:0!important}
.ms-tile-body{display:flex;flex-direction:column}
.ms-tile-name{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#171513;
  line-height:1.25;text-decoration:none;display:block}
/* the STRETCHED LINK: one anchor covers the whole tile, so the tile cannot contain a second <a>
   (a nested anchor makes the parser close the outer one early — the tile then escapes its card). */
.ms-tile-name:after{content:"";position:absolute;inset:0;z-index:2}
/* ⛔ THE LOGO SAT ON TOP OF THE TILE'S OWN LINK (fixed 2026-10-27). The stretched overlay was z-index 0 and
   `.ms-tile--set img` was z-index 1, so the 132px-wide logo — the middle of every square — swallowed the click
   and only the tile's outer edge worked. [Caleb]: *"i got a click or two to take me to the set page but its
   generally not letting me click on these very well."* The overlay is now above the art (2) and the secondary
   "All N priced rungs" link is above the overlay (3) so it stays clickable. */
.ms-tile-link,.ms-tile--set img{position:relative;z-index:1}
.ms-tile-link{z-index:3}
.ms-tile-link{font-size:.76rem;font-weight:700;color:#7a5c14;margin-top:.35rem;display:inline-block}
.ms-tile-live{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#1d6b3a;margin-top:.35rem}
.ms-tile-meta{font-size:.76rem;color:var(--text-muted);margin-top:.1rem}
.ms-from{font-size:.9rem;font-weight:700;color:#7a5c14;margin-top:.3rem}
.ms-sub{font-size:.78rem;color:var(--text-muted);line-height:1.45}
.ms-tag{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:.18rem .5rem;margin-top:.45rem;align-self:flex-start}
.ms-tag--ok{background:#eaf6ee;color:#1d6b3a;border:1px solid #bfe3cb}
.ms-tag--wait{background:#fdf3e3;color:#8a5a10;border:1px solid #f0d9ad}
.ms-tile-link{font-size:.76rem;font-weight:700;color:#7a5c14;margin-top:.35rem}
.ms-band-n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;color:#171513;
  line-height:1.1}
.ms-note{font-size:.86rem;color:var(--text-muted);line-height:1.6;margin:.9rem 0 0;max-width:760px}
.ms-email{background:var(--gold-soft);border:1px solid var(--gold-border);border-radius:var(--radius-md);
  padding:1.35rem 1.4rem}
.ms-form{display:flex;gap:.55rem;flex-wrap:wrap;margin:.9rem 0 .5rem}
.ms-input{flex:1 1 260px;border:2px solid var(--card-border);border-radius:var(--radius-sm);
  padding:.72rem .9rem;font-size:.95rem;background:#fff;color:#6b665f}
.ms-input:disabled,.ms-btn:disabled{cursor:not-allowed}
.ms-btn{border:1px solid var(--card-border);border-radius:var(--radius-sm);background:#fff;
  padding:.72rem 1.15rem;font-size:.95rem;font-weight:700;color:#6b665f}
.ms-source{font-size:.78rem;color:var(--text-muted);line-height:1.6;margin:2.2rem 0 0;
  padding-top:1.1rem;border-top:1px solid var(--card-border)}
.ms-source a{color:#7a5c14}
/* ---- dark-band ink, scoped per band (the same gold is 5.2:1 on navy and 2.94:1 on cream) ------ */
.band--navy .ms-h2,.band--navy-2 .ms-h2{color:#fff}
.band--navy .ms-sub-line,.band--navy-2 .ms-sub-line,
.band--navy .ms-note,.band--navy-2 .ms-note,
.band--navy .ms-tabnote,.band--navy-2 .ms-tabnote{color:#C6CFE4}
.band--navy .ms-note a,.band--navy-2 .ms-note a{color:#E8C46A}
.band--navy .ms-chips,.band--navy-2 .ms-chips{color:#EDF1F8}
.band--navy .section-eyebrow,.band--navy-2 .section-eyebrow{
  color:#e8c766;background:rgba(232,199,102,.12);border-color:rgba(232,199,102,.36)}
.band--navy .ms-era,.band--navy-2 .ms-era{color:#E8C46A;border-bottom-color:rgba(237,241,248,.22)}
.band--navy .ms-list li,.band--navy-2 .ms-list li{color:#C6CFE4;border-bottom-color:rgba(237,241,248,.15)}
.band--navy .ms-list li strong,.band--navy-2 .ms-list li strong{color:#fff}
.band--navy .ms-tab,.band--navy-2 .ms-tab{background:transparent;border-color:rgba(237,241,248,.38);
  color:#EDF1F8}
.band--navy .ms-tab:hover,.band--navy-2 .ms-tab:hover{background:rgba(232,199,102,.14);
  border-color:#E8C46A;color:#E8C46A}
.band--navy .ms-tab.sel,.band--navy-2 .ms-tab.sel{background:#E8C46A;border-color:#E8C46A;color:#131A2E}
/* ⚠️ THIS BOX IS WHITE BUT SITS INSIDE A NAVY BAND — the band's light gold cascaded onto it and
   the PriceCharting link measured 1.68:1, the worst ratio on the site (2026-10-21). The inline style
   that caused it is fixed above; this rule is the guard so a link added later without one still passes. */
.ms-email{background:#fff;border:1px solid var(--gold-border);border-radius:var(--radius-md);
  padding:1.5rem 1.6rem;max-width:840px}
@media (max-width:700px){
  .band{padding:2.2rem 0}
  .band--hero{min-height:0;background-position:center 38%}
  .ms-hero-inner{padding:1.1rem 1rem}
  .ms-hero-card{padding:1.1rem 1rem .95rem;border-radius:var(--radius-md)}
  .ms-hero-card h1{font-size:1.62rem;margin:.4rem 0 .5rem}
  .ms-lede{font-size:.95rem;line-height:1.5}
  .ms-cover{font-size:.88rem;line-height:1.5}
  .ms-cta{margin:.9rem 0 .7rem;gap:.55rem}
  .ms-cta .btn-primary,.ms-cta .ms-btn-ghost{padding:.6rem .9rem;font-size:.92rem}
  .ms-credit{font-size:.7rem;margin:.75rem 0 0}
  .ms-promise{font-size:1.5rem}
  .ms-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ms-grid--mon{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .ms-grid--dex{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .ms-tile--dex .ms-tile-name{font-size:.78rem}
  .ms-dex-n{font-size:.64rem}
  .ms-logo{height:38px}
  .ms-wrap{padding:0 1.1rem}
}