/* Set landing pages (site/set-hub.mjs): one template for announced, preview and released sets.
   The hero sits on the set's own art; every section below uses the site tokens plus one
   accent colour per set, mixed toward the text colour wherever it carries words. */
.set-hub{--set-accent:var(--ac);--set-ink:color-mix(in srgb,var(--set-accent) 62%,var(--ink));--hub-gap:clamp(44px,6vw,76px)}
.set-hub .hub-section{margin-top:var(--hub-gap);scroll-margin-top:72px}
.set-hub .hub-section>h2{margin:0 0 20px}
.set-hub a{text-underline-offset:3px}

/* Hero: what the set is and when it lands, before any reading */
/* The art hero is dark in both themes, so everything inside it takes the dark palette. */
.set-hero{position:relative;display:grid;min-height:clamp(440px,48vw,620px);border:1px solid var(--soft);background:#0b0b0b;isolation:isolate;margin-top:12px;color:#f3f3ef}
.set-hero:not(.no-art){color-scheme:dark;--ink:#f3f3ef;--muted:#b2b2b0;--soft:#4d4d4b;--bg2:#1c1c1c;--ac:#f3f3ef;--ac-ink:#111;--ac-soft:#2a2a28}
.set-hero-art{position:absolute;inset:0;z-index:-2}
.set-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 30%}
.set-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.78) 38%,rgba(8,8,8,.18) 72%,rgba(8,8,8,.05) 100%),linear-gradient(0deg,rgba(8,8,8,.9) 0%,transparent 55%)}
.set-hero-copy{align-self:end;padding:clamp(24px,4vw,52px);max-width:760px}
.set-hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font:500 15px/1.4 var(--body);color:#e4e4de}
.hub-code{font:14px var(--mono);letter-spacing:.02em}
.set-hero h1{font:700 clamp(58px,9vw,116px)/.88 var(--head);text-transform:uppercase;letter-spacing:.005em;margin:10px 0 14px;color:#fff;max-width:none}
.set-hero-date{margin:0 0 10px;font:600 clamp(18px,2vw,22px)/1.35 var(--body);color:#fff}
.set-hero-tagline{margin:0 0 20px;font:italic 18px/1.5 var(--text);color:#ecece6}
.set-hero-tagline span{font:13px var(--body);font-style:normal;color:#c9c9c3;margin-left:6px}
.set-hero-tagline a,.set-hero-credit a{color:inherit}
.set-stats{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 24px}
.set-stats li{border:1px solid rgba(255,255,255,.26);background:rgba(10,10,10,.6);padding:10px 14px 12px;min-width:96px}
.set-stats strong{display:block;font:700 32px/1 var(--head);color:#fff}
.set-stats span{display:block;margin-top:4px;font:14px var(--body);color:#d8d8d2}
.set-hero .actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.set-hero .button:not(.primary){background:rgba(10,10,10,.6);color:#fff;border-color:rgba(255,255,255,.5)}
.set-hero .hub-latest{display:grid;justify-items:start;gap:2px;max-width:560px;text-align:left;white-space:normal}
.set-hero .hub-latest span{font:500 13px var(--body);color:#c9c9c3}
.set-hero-credit{position:absolute;right:14px;bottom:10px;margin:0;font:13px var(--body);color:#c9c9c3}
.hub-chip{font:600 14px/1.3 var(--body);color:inherit;border:1px solid var(--set-accent);padding:1px 8px}
.set-hero.no-art{min-height:0;background:var(--bg2);color:var(--ink)}
.set-hero.no-art::after{display:none}
.set-hero.no-art h1,.set-hero.no-art .set-hero-date{color:var(--ink)}

/* Section chips stay in reach on a long page */
.hub-nav{position:sticky;top:var(--top-bar,0px);z-index:6;display:flex;gap:8px;overflow-x:auto;padding:12px 0;margin-top:18px;background:var(--bg);border-bottom:1px solid var(--soft);scrollbar-width:thin}
.hub-nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;font:500 15px var(--body);text-decoration:none;color:var(--ink);border:1px solid var(--soft);padding:0 14px}
.hub-nav a:hover,.hub-nav a:focus-visible{border-color:var(--set-accent);color:var(--set-ink)}

/* Facts */
.hub-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px;margin:0}
.hub-facts>div{padding:14px 16px 16px;border:1px solid var(--soft);border-top:2px solid var(--set-accent)}
.hub-facts dt{margin:0 0 6px;font:14px var(--body);color:var(--muted)}
.hub-facts dd{margin:0;font:600 17px/1.4 var(--body);color:var(--ink)}
.hub-lede{max-width:70ch;margin:0 0 18px;font:16px/1.6 var(--body);color:var(--muted)}
.hub-lede strong{font:700 24px/1 var(--head);color:var(--ink)}
.hub-lede a{color:var(--muted)}

/* Card tiles */
.hub-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:30px 20px}
.hub-card{scroll-margin-top:72px;min-width:0}
.hub-card-art{position:relative;display:block;border-radius:14px;background:var(--bg2)}
.hub-card-art img{display:block;width:100%;height:auto;aspect-ratio:744/1039;object-fit:cover;border-radius:14px}
.hub-card-art img.is-wide{object-fit:contain}
a.hub-card-art:hover img,a.hub-card-art:focus-visible img{outline:2px solid var(--set-accent);outline-offset:3px}
.hub-card-art:has(.hub-face) .hub-badge{display:none}
.hub-badge{position:absolute;top:10px;right:10px;font:600 13px var(--body);color:#fff;background:rgba(10,10,10,.82);border:1px solid var(--set-accent);padding:2px 7px}
.hub-legend .hub-badge{top:6px;right:6px;padding:1px 5px}
/* One tile everywhere (B-15): the name and the code line read as they do on Cards. */
.hub-card h3,.hub-card h4{margin:12px 0 4px;font:600 21px/1.2 var(--head);text-transform:none;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.hub-card h3 a,.hub-card h4 a{color:inherit;text-decoration:none}
.hub-meta{display:block;margin:2px 0 0;font:14px/1.45 var(--body);color:var(--muted)}
.hub-stats{margin:2px 0 0;font:13px/1.5 var(--mono);color:var(--muted)}
.hub-text{margin-top:8px}
.hub-text summary{cursor:pointer;font:600 14px var(--body);color:var(--set-ink)}
.hub-text p{margin:8px 0 0;font:15px/1.55 var(--body);color:var(--ink)}
.hub-card .fine{margin:8px 0 0;font:13px/1.45 var(--body);color:var(--muted)}
.hub-face{box-sizing:border-box;display:flex;flex-direction:column;gap:8px;aspect-ratio:744/1039;padding:16px;border:1px solid var(--soft);border-radius:14px;background:linear-gradient(160deg,var(--bg3),var(--bg2) 60%)}
.hub-face-cost:empty{display:none}
.hub-face-cost{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:700 19px var(--head);color:var(--bg);background:var(--ink)}
.hub-face strong{font:700 23px/1.02 var(--head);text-transform:uppercase;color:var(--ink)}
.hub-face-type{font:14px var(--body);color:var(--muted)}
.hub-face-text{margin-top:auto;font:14px/1.45 var(--body);color:var(--ink)}
.hub-face-note{font:14px var(--body);color:var(--set-ink)}
.hub-day{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:40px 0 18px;padding-bottom:8px;border-bottom:1px solid var(--soft);font:700 28px/1 var(--head);text-transform:uppercase}
.hub-day span{font:14px var(--mono);text-transform:none;color:var(--muted)}
/* The fold under the newest days: one wide button, then the earlier days once opened. */
.hub-more{max-width:none;margin:32px 0 4px;padding-top:24px;border-top:1px solid var(--soft);text-align:center}
.hub-more .button{min-width:min(100%,340px)}
.hub-upcoming{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:10px}
.hub-upcoming li{border:1px solid var(--soft);padding:9px 13px;font:14px var(--body)}
.hub-upcoming strong{margin-right:6px;color:var(--set-ink)}

/* Reveals: search, filters, sort and view (site/set-hub-client.mjs). Cyan marks what is pressed. */
.hub-today{margin:0 0 16px;font:15px/1.8 var(--body);color:var(--ink)}
.hub-today strong{margin-right:12px;font:600 14px var(--body);color:var(--ink);border:1px solid var(--set-accent);padding:1px 8px}
.hub-since{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px;font:600 15px var(--body)}
.hub-since button,.hub-view button{min-height:44px;font:500 15px var(--body);color:var(--ink);background:transparent;border:1px solid var(--soft);padding:0 16px;cursor:pointer}
.hub-since button[aria-pressed=true],.hub-view button[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.hub-tools{display:grid;gap:12px;margin:0 0 8px;padding:14px 0;border-block:1px solid var(--soft)}
.hub-tools-row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.hub-search{flex:1 1 320px;min-width:0}
.hub-search input,.hub-selects select{box-sizing:border-box;width:100%;min-height:44px;font:16px var(--body);color:var(--ink);background:var(--bg2);border:1px solid var(--soft);border-radius:0}
.hub-search input{padding:0 14px}
.hub-search input:focus-visible,.hub-selects select:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.hub-view{display:flex}
.hub-view button{min-height:44px}
.hub-view button+button{border-left:0}
.hub-selects label{display:grid;gap:5px;flex:1 1 150px;min-width:0}
.hub-selects span{font:14px var(--body);color:var(--muted)}
.hub-selects select,.set-hub select{appearance:none;-webkit-appearance:none;padding:0 30px 0 12px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.hub-selects select:disabled{opacity:.4}
.hub-tools .fine{margin:0}
.hub-fold{display:none}
/* Wide screens: search, view and filters share one row. */
@media(min-width:1100px){.hub-tools{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.hub-tools-row{display:contents}.hub-search{flex:2 1 280px}.hub-selects label{flex:1 1 130px}.hub-tools .fine{flex-basis:100%}}
/* The first section after the page's links needs no extra gap. */
.set-hub .hub-nav+.hub-section{margin-top:28px}

/* Reveal tiles: the card, its name and one line */
.hub-reveals .hub-grid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:28px 18px}
/* Battlefields are landscape: two columns wide, so they sit at the height of the cards beside them. */
.hub-reveals .hub-grid .hub-card:has(img.is-wide),.card-index .hub-grid .hub-card:has(img.is-wide){grid-column:span 2}
.hub-reveals .hub-grid .hub-card-art img.is-wide,.card-index .hub-card-art img.is-wide{aspect-ratio:1039/744;object-fit:cover}
/* Card indexes (Overnumbered, tokens, runes...): one grid per set, newest first. */
.card-index-group+.card-index-group{margin-top:clamp(40px,5vw,60px)}
.card-index-group h2{margin:0}
.card-index-group .hub-lede{margin:6px 0 20px}
.hub-reveals .hub-card h4{margin:10px 0 3px;font-size:20px}
.hub-line{margin:0;font:13px/1.6 var(--body);color:var(--muted)}
.hub-by{margin:4px 0 0;font:13px/1.4 var(--body);color:var(--muted)}
/* The source link leaves the site: its own 32px row, apart from the card name above it. */
.hub-by a{color:inherit;display:inline-flex;align-items:center;min-height:32px;padding-right:10px}
.hub-flat{margin-top:28px}

/* Set list: every number in order, shown or waiting, then the other printings */
.hub-setlist{margin-top:26px}
.hub-progress{display:grid;grid-template-columns:auto minmax(80px,1fr);gap:18px;align-items:center;margin:0 0 20px;font:15px var(--body);color:var(--muted)}
.hub-progress strong{font:700 26px/1 var(--head);color:var(--ink);margin-right:4px}
.hub-checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:14px 10px}
.hub-checklist li{min-width:0;display:grid;gap:5px;align-content:start;transition:opacity .15s}
.hub-checklist li:not(.is-shown)::before{content:"";display:block;aspect-ratio:744/1039;border:1px dashed var(--soft);border-radius:6px}
.hub-checklist li>span{font:13px var(--mono);color:var(--muted)}
.hub-checklist .is-shown>span{color:var(--ink)}
.hub-checklist a{display:block;border-radius:6px}
.hub-checklist img{display:block;width:100%;height:auto;aspect-ratio:744/1039;object-fit:cover;border-radius:6px}
.hub-checklist img.is-wide{object-fit:contain;background:var(--bg2)}
.hub-checklist a:hover img,.hub-checklist a:focus-visible img{outline:2px solid var(--ac);outline-offset:2px}
.hub-checklist .is-dim{opacity:.2}
.hub-slot-name{display:grid;place-items:center;aspect-ratio:744/1039;overflow-wrap:anywhere;padding:6px;border:1px solid var(--soft);border-radius:6px;font:13px/1.2 var(--body);text-align:center;color:var(--ink)}
.hub-checklist.is-printings{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:22px 14px}
.hub-checklist small{display:block;font:13px/1.4 var(--body);color:var(--muted)}
.hub-checklist small strong{display:block;font-weight:600;color:var(--ink)}
.hub-checklist small a{color:inherit}

/* Legends: fixed slots before release */
.hub-legends{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:24px 14px}
@media(min-width:801px){.hub-legends[style*="--cols"]{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}
.hub-legend{min-width:0}
.hub-legend .hub-card-art,.hub-legend .hub-card-art img,.hub-legend .hub-face{border-radius:10px}
.hub-legend .hub-face{padding:10px;gap:5px}.hub-legend .hub-face strong{font-size:17px}.hub-legend .hub-face-text,.hub-legend .hub-face-note{display:none}
.hub-legend strong{display:block;margin-top:10px;font:700 22px/1.05 var(--head);text-transform:uppercase}
.hub-legend .hub-build{display:inline-block;margin-top:6px;font:600 14px/1.4 var(--body);color:var(--ink)}
/* Set decks page: each Legend tile starts a deck in the builder */
.set-decks-legends{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}@media(min-width:700px){.set-decks-legends{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1100px){.set-decks-legends{grid-template-columns:repeat(5,minmax(0,1fr))}}
.set-decks-legend{display:grid;align-content:start;gap:6px;min-width:0}
.set-decks-legend .hub-card-art img{display:block;width:100%;height:auto;border-radius:10px}
.set-decks-legend strong{margin-top:6px;font:700 24px/1.05 var(--head);text-transform:uppercase}
.set-decks-legend .button{justify-self:start;margin-top:6px;font-size:14px}
.set-decks-legend.is-hidden .hub-slot{display:grid;place-items:center;aspect-ratio:744/1039;border:1px dashed var(--soft);border-radius:10px;font:700 48px var(--head);color:var(--muted)}
.set-decks-how{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;max-width:72ch;font:16px/1.55 var(--body)}
.set-decks-lists{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}.set-decks-lists li{display:flex;flex-wrap:wrap;gap:4px 12px}
.hub-slot{display:grid;place-items:center;aspect-ratio:744/1039;border:1px dashed var(--soft);border-radius:10px;font:700 56px var(--head);color:var(--soft);background:repeating-linear-gradient(135deg,var(--bg2) 0 12px,var(--bg) 12px 24px)}
.hub-legend.is-hidden .hub-slot{color:var(--set-ink);border-color:var(--set-accent)}

/* Keywords and what's new */
.hub-keywords{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.hub-keywords>li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;padding:18px;border:1px solid var(--soft);background:var(--bg2)}
.hub-keywords>li:not(:has(.hub-card-art)){grid-template-columns:1fr}
.hub-keywords .hub-card-art,.hub-keywords .hub-card-art img{border-radius:8px}
.hub-keywords h3{margin:0 0 10px}
.hub-keywords h3 .kw{font-size:17px;padding:3px 8px}
.hub-keywords p{margin:0 0 10px;font:15px/1.55 var(--body)}
.hub-keywords .hub-reminder{font-style:italic;color:var(--muted)}
.hub-highlights{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:18px}
.hub-highlights li{padding:20px;border:1px solid var(--soft);border-top:3px solid var(--set-accent);background:var(--bg2)}
.hub-highlights h3{margin:0 0 10px;font:700 23px/1.08 var(--head);text-transform:uppercase}
.hub-highlights p{margin:0;font:15px/1.55 var(--body);color:var(--ink)}
/* Even rows: the page sets --cols from the item count (8 reads 4+4, 5 one row, 6 as 3+3). */
@media(min-width:1100px){.hub-highlights,.hub-facts{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
@media(min-width:601px) and (max-width:1099px){.hub-highlights,.hub-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Released sets */
.hub-rarity{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:10px}
.hub-rarity li{padding:10px 16px 12px;border:1px solid var(--soft);font:14px var(--body);color:var(--muted)}
.hub-rarity strong{display:block;font:700 28px/1 var(--head);color:var(--ink)}
.set-hub .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hub-bars{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:12px}
.hub-bars li{display:grid;grid-template-columns:minmax(150px,280px) minmax(60px,1fr) auto;gap:14px;align-items:center;font:15px var(--body)}
.hub-bar{height:10px;background:linear-gradient(90deg,var(--set-accent) var(--share),var(--bg3) var(--share))}
.hub-played{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:0 24px}
.hub-played li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--soft);font:16px var(--body)}
.hub-played span{color:var(--muted);white-space:nowrap}
.hub-introduced{max-width:75ch;margin:18px 0 0;font:16px/1.6 var(--body)}
.hub-introduced .kw{margin:0 4px 6px 0;display:inline-block}
/* A released set's numbered list opens on request; 300 thumbnails would bury the page. */
.hub-setlist-open>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--soft);cursor:pointer;font:600 15px var(--body);color:var(--ink)}
.hub-setlist-open>summary:hover,.hub-setlist-open>summary:focus-visible{border-color:var(--ac)}
.hub-setlist-open[open]>summary{margin-bottom:6px}

/* Timeline: finished steps dim, the current or next one lights up */
.hub-timeline{list-style:none;padding:0;margin:0;display:grid;max-width:940px;border-left:2px solid var(--soft)}
.hub-timeline li{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;padding:0 0 26px 26px}
.hub-timeline li>.hub-meta{grid-row:span 2;padding-top:3px;font-size:15px}
.hub-timeline li>:not(.hub-meta){grid-column:2}
.hub-timeline li::before{content:"";position:absolute;top:4px;left:-9px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--soft)}
.hub-timeline .is-done{opacity:.55}
.hub-timeline .is-done::before{background:var(--soft)}
.hub-timeline .is-now{box-shadow:-2px 0 0 var(--set-accent)}
.hub-timeline .is-now::before,.hub-timeline .is-next::before{background:var(--set-accent);border-color:var(--set-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--set-accent) 28%,transparent)}
.hub-timeline strong{display:block;margin:0 0 6px;font:700 22px/1.1 var(--head);text-transform:uppercase}
.hub-timeline p{max-width:62ch;margin:0;font:15px/1.55 var(--body);color:var(--muted)}
.hub-when{margin-left:8px;color:var(--set-ink)}
.hub-timeline .hub-when{display:block;margin:6px 0 0;font-weight:600}
@media(max-width:800px){.hub-timeline .hub-when{display:inline;margin:0 0 0 8px}}

/* Packs and products */
.hub-products{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:20px;align-items:start}
.hub-products:not(:has(.hub-pack)){grid-template-columns:1fr}
.hub-pack{padding:20px;border:1px solid var(--soft);background:var(--bg2)}
.hub-pack h3{margin:0 0 14px;font:700 25px/1.05 var(--head);text-transform:uppercase}
.hub-pack ol{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:9px}
.hub-pack li{display:grid;grid-template-columns:34px 1fr;align-items:baseline;font:15px/1.4 var(--body)}
.hub-pack li strong{font:700 26px/1 var(--head);color:var(--set-ink)}
.hub-product-list{list-style:none;padding:0;margin:0;display:grid}
.hub-product-list li{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:4px 20px;padding:16px 0;border-top:1px solid var(--soft)}
.hub-product-list li:first-child{border-top:0;padding-top:4px}
@media(max-width:600px){.hub-product-list li{grid-template-columns:1fr}}
.hub-product-list strong{font:700 23px/1.08 var(--head);text-transform:uppercase}
.hub-product-list p{margin:0;font:15px/1.55 var(--body);color:var(--muted)}

/* Booster and precon reference pages */
.product-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin:0 0 18px}
.product-facts div{padding:14px 16px;border:1px solid var(--soft)}
.product-facts dt{font:600 14px/1.3 var(--body);color:var(--muted)}
.product-facts dd{margin:6px 0 0;font:17px/1.45 var(--body);color:var(--ink)}
.product-notes{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.precon-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.precon{padding:18px;border:1px solid var(--soft)}
.precon h3{margin:0 0 6px;font:700 23px/1.08 var(--head);text-transform:uppercase}
.precon p{margin:6px 0 0;font:15px/1.5 var(--body)}
.precon .context-links{margin-top:12px}

/* News and questions */
.hub-news{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:26px 22px}
.hub-news a{display:grid;gap:8px;color:var(--ink);text-decoration:none}
.hub-news img,.hub-news-blank{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg2)}
.hub-news strong{font:700 23px/1.1 var(--head);text-transform:uppercase}
.hub-news a:hover strong,.hub-news a:focus-visible strong{color:var(--set-ink)}
.hub-faq{border-top:1px solid var(--soft)}
.hub-faq details{padding:15px 0;border-bottom:1px solid var(--soft)}
.hub-faq summary{cursor:pointer;font:600 18px/1.4 var(--body)}
.hub-faq p{max-width:75ch;margin:10px 0 0;font:16px/1.6 var(--body);color:var(--ink)}
.hub-sources{margin-top:52px;line-height:1.7}
.hub-archive{margin:40px 0 28px;padding-top:16px;border-top:1px solid var(--soft)}
.hub-archive>summary{cursor:pointer;font:600 16px var(--body);color:var(--muted)}

@media(max-width:800px){
 .set-hero{min-height:0;padding-top:min(56vw,340px)}
 .set-hero-art{bottom:auto;height:min(64vw,380px)}
 .set-hero::after{background:linear-gradient(0deg,#0b0b0b 0%,#0b0b0b 38%,rgba(11,11,11,.2) 70%,rgba(11,11,11,0) 100%)}
 .set-hero-copy{padding:20px 18px 26px}
 .set-hero-credit{top:10px;bottom:auto;left:auto;max-width:calc(100% - 28px);padding:3px 7px;color:#eee;background:#0b0b0bb8;text-align:right}
 /* The art fades into the page at its own bottom edge, so the eyebrow never sits on bright art. */
 .set-hero-art{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
 .set-stats li{min-width:0;flex:1 1 40%}
 .hub-grid,.hub-reveals .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 .hub-checklist{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 6px}.hub-checklist li>span{font-size:13px}
 .hub-checklist.is-printings{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}
 .hub-selects label{flex:1 1 40%}.hub-selects span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 /* During previews the Legends are one swipeable row, so the cards start sooner. */
 .set-hub[data-stage=preview] .hub-legends{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:28%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
 .set-hub[data-stage=preview] .hub-legend{scroll-snap-align:start}
 .hub-view{flex:1 1 60%}.hub-view button{flex:1}
 .hub-fold{display:block;flex:1 1 30%;min-height:44px;font:500 15px var(--body);color:var(--ink);background:transparent;border:1px solid var(--soft);cursor:pointer}
 .hub-fold[aria-expanded=true]{border-color:var(--ac)}
 .hub-selects:not(.is-open){display:none}
 .hub-legends{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}
 .hub-legend strong{font-size:17px}
 .hub-slot{font-size:40px}
 .hub-products{grid-template-columns:1fr}
 .hub-keywords>li{grid-template-columns:84px minmax(0,1fr)}
 .hub-bars li{grid-template-columns:1fr auto;gap:6px 12px}
 .hub-bars .hub-bar{grid-column:1/-1;grid-row:2}
 .hub-timeline li{display:block;padding:0 0 22px 22px}
 .hub-timeline li>.hub-meta{display:block;padding-top:0}
}
@media(max-width:340px){.hub-legends{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sections keep a page gutter until the container has its own margin; the hero stays full width. */
.set-hub .hub-section,.set-hub .hub-nav,.set-hub .hub-sources,.set-hub>.section-jumps,.set-hub~.hub-archive{padding-inline:clamp(0px,calc((1328px - 100vw) / 2),24px)}
@media(max-width:800px){.set-hub .hub-section,.set-hub .hub-nav,.set-hub .hub-sources,.set-hub>.section-jumps,.set-hub~.hub-archive{padding-inline:16px}}

/* During previews the cards come first: a shorter hero, so the first row of cards is on the first
   screen at 1440 and 1024. The latest story is one line under the buttons, not a box over the art. */
.set-hub[data-stage=preview] .set-hero{min-height:clamp(300px,25vw,360px)}
.set-hub[data-stage=preview] .set-hero-art img{object-position:68% 14%}
/* The key art's logo sits in its lower half: narrower heroes show the top of the art, and the shading
   under the copy is deeper, so the logo never peeks out from behind the latest story line. */
.set-hub[data-stage=preview] .set-hero::after{background:linear-gradient(90deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.78) 38%,rgba(8,8,8,.18) 72%,rgba(8,8,8,.05) 100%),linear-gradient(0deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.86) 24%,transparent 60%)}
@media(max-width:1279px){.set-hub[data-stage=preview] .set-hero-art img{object-position:68% 0}}
.set-hub[data-stage=preview] .set-hero-copy{padding:clamp(20px,2.4vw,32px)}
.set-hub[data-stage=preview] .set-hero h1{font-size:clamp(52px,5.4vw,78px);margin:6px 0 8px}
.set-hub[data-stage=preview] .set-hero-date{margin-bottom:6px}
.set-hub[data-stage=preview] .set-hero-tagline{margin-bottom:10px}
.set-hub[data-stage=preview] .set-stats{margin-bottom:12px}
.set-hub[data-stage=preview] .set-stats li{padding:6px 11px 7px}
.set-hub[data-stage=preview] .set-stats strong{font-size:23px}
.set-hub[data-stage=preview] .set-stats span{font-size:13px;margin-top:3px}
.set-hub[data-stage=preview] .set-hero .hub-latest{display:inline;flex-basis:100%;max-width:none;min-height:0;padding:0;border:0;background:none!important;font:500 15px/1.4 var(--body);color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.set-hub[data-stage=preview] .set-hero .hub-latest span{font:inherit;color:#c9c9c3}
.set-hub[data-stage=preview] .set-hero .hub-latest span::after{content:": "}
.set-hub[data-stage=preview] .set-hero .hub-latest:hover{text-decoration-color:currentColor}
.set-hub[data-stage=preview] .hub-nav{margin-top:10px;padding-block:10px}
.set-hub[data-stage=preview] .hub-nav+.hub-section{margin-top:16px}
.set-hub[data-stage=preview] #reveals>h2{margin-bottom:8px}
.set-hub[data-stage=preview] #reveals>.hub-lede{max-width:none;margin-bottom:12px}
.set-hub[data-stage=preview] #reveals .hub-days>.hub-day:first-child{margin-top:12px}
/* Wide screens: the filters' first options already say what they are ("Every type"), so their labels step
   aside and the count sits at the end of the same row. */
@media(min-width:1100px){.set-hub[data-stage=preview] .hub-tools{align-items:center}.set-hub[data-stage=preview] .hub-selects label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.set-hub[data-stage=preview] .hub-tools .fine{flex-basis:auto;margin-left:auto}}
@media(max-width:800px){
 .set-hub[data-stage=preview] .set-hero{padding-top:min(38vw,230px)}
 .set-hub[data-stage=preview] .set-hero-art{height:min(46vw,270px)}
 .set-hub[data-stage=preview] .set-hero-copy{padding:14px 16px 20px}
 .set-hub[data-stage=preview] .set-hero-tagline{font-size:15px}
 .set-hub[data-stage=preview] .set-stats{gap:6px}
 .set-hub[data-stage=preview] .set-stats li{flex:1 1 20%;padding:6px 8px 8px}
 .set-hub[data-stage=preview] .set-stats strong{font-size:22px}
 .set-hub[data-stage=preview] .set-stats span{font-size:13px;line-height:1.25}
}
/* Phone previews: the hero folds to a short art band, the title, the date and one stats row, and the
   cards follow. The quote and the actions move below the cards (display:contents lifts them out of
   the hero); the art credit is a caption under the stats instead of a box over the art. */
@media(max-width:600px){
 .set-hub[data-stage=preview]{display:flex;flex-direction:column;position:relative}
 .set-hub[data-stage=preview]>*{order:4}
 .set-hub[data-stage=preview] :is(.set-hero,.set-hero-copy){display:contents}
 /* Its shading would otherwise cover the whole hub: the art band carries its own. */
 .set-hub[data-stage=preview] .set-hero::after{display:none}
 .set-hub[data-stage=preview] :is(.set-hero-art,.set-hero-eyebrow,.set-hero h1,.set-hero-date,.set-stats,.set-hero-credit){order:0;margin:0;padding-inline:16px;background:#0b0b0b}
 .set-hub[data-stage=preview] .set-hero .set-hero-art{position:relative;inset:auto;height:100px;margin-top:8px;padding:0;-webkit-mask-image:none;mask-image:none}
 .set-hub[data-stage=preview] .set-hero-art img{object-position:60% 18%}
 .set-hub[data-stage=preview] .set-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b0b0b 0%,rgba(11,11,11,.4) 50%,transparent 100%)}
 .set-hub[data-stage=preview] .set-hero .set-hero-eyebrow{margin-top:-36px;position:relative;padding-top:0;background:transparent}
 .set-hub[data-stage=preview] .set-hero h1{font-size:44px;padding-block:4px 2px}
 .set-hub[data-stage=preview] .set-hero-date{font-size:14px;padding-bottom:10px}
 /* The four stats read as one line of text: "105 cards revealed · 8 of 9 Legends shown · …". */
 .set-hub[data-stage=preview] .set-stats{display:block;padding-bottom:6px;font:14px/1.5 var(--body);color:#d8d8d2}
 .set-hub[data-stage=preview] .set-stats li{display:inline;min-width:0;padding:0;border:0;background:none}
 .set-hub[data-stage=preview] .set-stats li+li::before{content:" · ";color:#8f8f89}
 .set-hub[data-stage=preview] .set-stats strong{display:inline;font:600 14px/1.5 var(--body);color:#fff}
 .set-hub[data-stage=preview] .set-stats span{display:inline;margin:0 0 0 4px;font:inherit;color:inherit}
 .set-hub[data-stage=preview] .set-hero-credit{position:static;max-width:none;padding:0 16px 12px;text-align:right;font-size:13px;line-height:1.3;background:#0b0b0b}
 .set-hub[data-stage=preview] .hub-nav{order:1;margin-top:0;padding-block:8px}
 .set-hub[data-stage=preview] #reveals{order:2}
 .set-hub[data-stage=preview] .hub-nav+.hub-section,.set-hub[data-stage=preview] .hub-section#reveals{margin-top:16px}
 .set-hub[data-stage=preview] #reveals>h2{font-size:24px;margin-bottom:6px}
 .set-hub[data-stage=preview] #reveals>.hub-lede{font-size:14px;line-height:1.45;margin-bottom:10px}
 .set-hub[data-stage=preview] #reveals>.hub-lede strong{font-size:20px}
 .set-hub[data-stage=preview] .hub-tools{gap:8px;padding:10px 0}
 /* Here the tagline and actions sit on the page ground, so they take the page's own palette back. */
 .set-hub[data-stage=preview] .set-hero{color-scheme:inherit;--ink:inherit;--muted:inherit;--soft:inherit;--bg2:inherit;--ac:inherit;--ac-ink:inherit;--ac-soft:inherit}
 .set-hub[data-stage=preview] :is(.set-hero-tagline,.set-hero .actions){order:3;padding-inline:16px;color:var(--ink)}
 .set-hub[data-stage=preview] .set-hero-tagline{margin:var(--hub-gap) 0 14px}
 .set-hub[data-stage=preview] .set-hero-tagline span{color:var(--muted)}
 .set-hub[data-stage=preview] .set-hero .button:not(.primary){background:var(--bg);color:var(--ink);border-color:var(--soft)}
 .set-hub[data-stage=preview] .set-hero .hub-latest{color:var(--ink);text-decoration-color:var(--soft)}
 .set-hub[data-stage=preview] .set-hero .hub-latest span{color:var(--muted)}
 /* Below the cards, See all points back up to them. */
 .set-hub[data-stage=preview] .hub-arrow{display:inline-block;transform:rotate(180deg)}
 .set-hub[data-stage=preview] #reveals .hub-days>.hub-day:first-child{margin-top:12px}
}

/* Phones: a tap opens the card, a long press peeks in Quick look (card-grid-client.mjs). */
@media(hover:none){.set-hub :is(a[data-inspect],.hub-reveals a.hub-card-art){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
/* Quick look on a reveal tile, as on Cards: a pill on the art on hover or keyboard focus; a long press on a phone. */
.hub-card{position:relative}
.hub-quick{position:absolute;left:50%;top:0;margin-top:calc(100% * 1039 / 744 * .36 - 16px);transform:translateX(-50%);min-height:32px;padding:0 10px;background:#101010e6;color:#f2f2ed;border:1px solid #ffffff38;border-radius:4px;font:13px var(--body);cursor:pointer;opacity:0;transition:opacity .12s}
.hub-card:is(:hover,:focus-within) .hub-quick,.hub-quick:focus-visible{opacity:1}
.hub-quick:hover{border-color:var(--set-accent,var(--ac))}
.hub-card:has(img.is-wide) .hub-quick{margin-top:calc(100% * 744 / 1039 * .36 - 16px)}
@media(hover:none){.hub-quick{display:none}}
@media(prefers-reduced-motion:reduce){.hub-quick{transition:none}}
/* Phones (Oct 7 review): a hero title sized to the screen. A one-word name (MORDEKAISER, HEIMERDINGER) at a
   fixed 58 px was wider than a 320 px screen and pushed the whole page off centre. */
@media(max-width:700px){
 .set-hero h1,.set-hub[data-stage=preview] .set-hero h1{font-size:min(58px,13vw);overflow-wrap:break-word}
 .set-hero .set-hero-copy{min-width:0}
}