/* ---- Lorcana palette ------------------------------------------------------
   Dark is the primary design here — the game's own presentation is dark and
   gold — but light mode is a deliberate parchment scheme rather than an
   inversion, so it reads as intentional rather than washed out. */
:root{
  --bg:#f6f2e9; --panel:#fffdf7; --ink:#241c33; --muted:#6b6280;
  --line:#e0d6c2; --chip:#efe7d6;
  --gold:#8a6d1f; --gold-soft:#b8933a; --accent:#6b4bb8;
  --good:#1f7a52; --warn:#a5461a;
  --ink-amber:#d9a520; --ink-amethyst:#8b5cc7; --ink-emerald:#2e9e6b;
  --ink-ruby:#c9455c; --ink-sapphire:#3d7fc1; --ink-steel:#7d8595;
  /* Ink that sits ON a gold fill. White on gold measures ~2.3:1 and fails; this
     is the dark aubergine, which passes comfortably. */
  --on-gold:#fffdf7; --scrim:rgba(8,5,20,.55);
  /* Pre-redesign tokens still consumed in 64 places across the pages. Aliased
     rather than deleted: every consumer resolves to the Lorcana palette without
     having to find and repoint each one. */
  --surface:var(--panel); --ink2:var(--muted); --accent-ink:var(--on-gold);
  --hot:var(--warn); --rail:var(--line);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]){
  --bg:#120e22; --panel:#1b1533; --ink:#ece8f5; --muted:#9d95bb;
  --line:#2e2650; --chip:#241d42;
  --gold:#e8c46a; --gold-soft:#c9a94f; --accent:#c9a94f;
  --good:#3fbb84; --warn:#e08a4e;
  /* Accent must not equal gold, or every link, button and progress bar turns
     gold and the colour stops meaning "chase card". */
  --accent:#a887e8; --on-gold:#1a1330;
  --surface:var(--panel); --ink2:var(--muted); --accent-ink:var(--on-gold);
  --hot:var(--warn); --rail:var(--line);
}}
:root[data-theme=dark]{
  --bg:#120e22; --panel:#1b1533; --ink:#ece8f5; --muted:#9d95bb;
  --line:#2e2650; --chip:#241d42;
  --gold:#e8c46a; --accent:#c9a94f;
  --good:#3fbb84; --warn:#e08a4e;
  /* Accent must not equal gold, or every link, button and progress bar turns
     gold and the colour stops meaning "chase card". */
  --accent:#a887e8; --on-gold:#1a1330;
  --surface:var(--panel); --ink2:var(--muted); --accent-ink:var(--on-gold);
  --hot:var(--warn); --rail:var(--line);
}

/* ---- header --------------------------------------------------------------- */
.sitehdr{position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 88%, var(--bg)));
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 color-mix(in srgb,var(--gold) 22%, transparent);
  padding:.55rem .9rem;display:flex;gap:.7rem;align-items:center}
.sitehdr .brand{display:flex;align-items:center;gap:.5rem;
  font-size:1.02rem;font-weight:700;letter-spacing:.01em;margin:0;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.sitehdr .brand img{display:block;border-radius:5px}
.sitehdr .brand em{font-style:normal;font-weight:500;font-size:.62em;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.sitehdr .spacer{margin-left:auto}
.sitehdr .sub{color:var(--muted);font-size:.78rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
/* On a narrow screen the stats caption pushes the burger onto a second row and
   the header doubles in height. The burger has to stay reachable; the caption
   is repeated on the page itself. */
@media (max-width:620px){ .sitehdr .sub{display:none} }

/* burger */
.burger{display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:34px;padding:0 8px;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:8px}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .18s ease,opacity .18s ease}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- drawer --------------------------------------------------------------- */
.scrim{position:fixed;inset:0;z-index:45;background:var(--scrim);
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(310px,86vw);
  background:var(--panel);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .22s ease;
  display:flex;flex-direction:column;overflow-y:auto}
/* Visually hidden is not hidden: nine nav links stayed focusable behind the
   closed drawer on every page. visibility flips it out of the tab order, and the
   script also sets [inert]. */
.drawer{visibility:hidden;transition:transform .22s ease, visibility 0s linear .22s}
.drawer.open{transform:none;visibility:visible;transition-delay:0s}
/* Every page carries its own bare-element rules from before this chrome existed
   — market has nav{display:flex} for the old horizontal bar, several have
   header{position:sticky}. Those leak straight into the drawer's own <nav> and
   <header>, which is what laid the menu out sideways. Each property the drawer
   depends on is therefore set explicitly rather than assumed. */
.drawer header{display:flex;align-items:center;gap:.5rem;padding:.75rem .9rem;
  position:static;margin:0;z-index:auto;background:none;flex-wrap:nowrap;
  border-bottom:1px solid var(--line)}
.drawer header .who{font-size:.78rem;color:var(--muted);margin-left:auto;text-align:right}
.drawer nav{display:flex;flex-direction:column;align-items:stretch;
  padding:.5rem;margin:0;gap:0;width:auto}
.drawer nav a{display:flex;align-items:center;gap:.6rem;width:auto;flex:0 0 auto;
  padding:.62rem .7rem;margin:.1rem 0;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:.95rem;
  background:none;border:1px solid transparent}
.drawer nav a:hover{background:var(--chip)}
.drawer nav a.on{background:color-mix(in srgb,var(--gold) 16%, transparent);
  border-color:color-mix(in srgb,var(--gold) 45%, transparent);font-weight:600}
.drawer nav a .lbl{flex:1}
.drawer nav .sep{width:100%;flex:0 0 auto;margin:.5rem .7rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.gate{display:inline-flex;align-items:center;gap:.25rem;font-size:.62rem;
  letter-spacing:.07em;text-transform:uppercase;padding:.14rem .4rem;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.gate.pro{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%, transparent);
  background:color-mix(in srgb,var(--gold) 12%, transparent);font-weight:700}
.gate svg{width:11px;height:11px;fill:currentColor;display:block}
.drawer .foot{margin-top:auto;padding:.9rem;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--muted)}

/* ---- Calibre Grading promo ----------------------------------------------
   Sits above the footer on every page. Deliberately labelled as ours rather than
   dressed up as editorial: a price site that quietly advertises its own grading
   company without saying so is exactly the sort of thing that costs a collector's
   trust in the prices too. */
.promo{max-width:1180px;margin:2.4rem auto 0;padding:1.15rem 1.25rem;
  display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--gold) 34%, var(--line));
  border-radius:var(--r-panel);position:relative;overflow:hidden;
  background:linear-gradient(115deg,color-mix(in srgb,var(--gold) 9%, var(--panel)),var(--panel) 62%)}
.promo:after{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 17%, transparent),transparent 70%)}
.promo .p-body{flex:1 1 22rem;min-width:0;position:relative}
.promo .p-eyebrow{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 .25rem}
.promo h3{margin:0 0 .3rem;font-size:1.05rem;font-weight:650}
.promo p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.5;max-width:60ch}
.promo .p-cta{position:relative;display:inline-block;padding:.6rem 1.05rem;border-radius:var(--r-control);
  background:var(--gold);color:var(--on-gold);font-weight:650;font-size:.9rem;text-decoration:none;
  white-space:nowrap}
.promo .p-cta:hover{filter:brightness(1.07)}
@media (max-width:620px){ .promo{padding:1rem} .promo .p-cta{width:100%;text-align:center} }

/* ---- footer --------------------------------------------------------------- */
.sitefoot{margin-top:2.5rem;padding:1.5rem 1rem 2.6rem;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--panel) 60%, transparent));
  color:var(--muted);font-size:.8rem}
.sitefoot .inner{max-width:1180px;margin:0 auto;display:flex;gap:1.4rem;
  flex-wrap:wrap;justify-content:space-between}
.sitefoot a{color:var(--muted);text-decoration:none;margin-right:.9rem}
.sitefoot a:hover{color:var(--gold);text-decoration:underline}
.sitefoot .cols{display:flex;gap:2rem;flex-wrap:wrap}
.sitefoot p{margin:.35rem 0;max-width:56ch}
.sitefoot strong{color:var(--ink)}
.pageTitle{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:650;
  margin:.9rem 0 .35rem;letter-spacing:-.01em}

/* ---- Lorcana motifs -------------------------------------------------------
   The game's own visual language: six ink colours and gold. Used as accents on
   real data — a card's ink, a card's rarity — rather than as decoration, so the
   colour is carrying information rather than just theming. */
.ink{display:inline-block;width:.62em;height:.62em;border-radius:50%;
  margin-right:.35em;vertical-align:baseline;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.ink-amber{background:var(--ink-amber)} .ink-amethyst{background:var(--ink-amethyst)}
.ink-emerald{background:var(--ink-emerald)} .ink-ruby{background:var(--ink-ruby)}
.ink-sapphire{background:var(--ink-sapphire)} .ink-steel{background:var(--ink-steel)}

/* Rarity chips. Enchanted and Iconic are the chase cards and read as gold; the
   rest step down in weight so a list scans by rarity at a glance. */
.tag.r-enchanted,.tag.r-iconic{
  color:var(--gold);border-color:color-mix(in srgb,var(--gold) 55%, transparent);
  background:color-mix(in srgb,var(--gold) 14%, transparent);font-weight:650}
.tag.r-legendary{color:var(--ink-amethyst);border-color:color-mix(in srgb,var(--ink-amethyst) 50%, transparent)}
.tag.r-epic{color:var(--ink-sapphire);border-color:color-mix(in srgb,var(--ink-sapphire) 50%, transparent)}
.tag.r-super-rare{color:var(--ink-emerald);border-color:color-mix(in srgb,var(--ink-emerald) 50%, transparent)}
.tag.r-promo{color:var(--ink-ruby);border-color:color-mix(in srgb,var(--ink-ruby) 50%, transparent)}

/* Gold hairline used to separate major sections. */
.goldrule{height:1px;margin:1.6rem 0 1.1rem;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 65%, transparent) 22%,
             color-mix(in srgb,var(--gold) 65%, transparent) 78%,transparent)}

/* ---- home hero ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;border-radius:16px;margin:18px 0 6px;
  border:1px solid color-mix(in srgb,var(--gold) 26%, var(--line));
  background:var(--panel)}
.hero .art{position:absolute;inset:0;display:flex;gap:0;opacity:.30;
  filter:saturate(1.05)}
.hero .art img{flex:1;height:100%;object-fit:cover;object-position:center 22%;min-width:0}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(100deg,var(--panel) 26%,color-mix(in srgb,var(--panel) 72%, transparent) 58%,
             color-mix(in srgb,var(--panel) 30%, transparent))}
.hero .inner{position:relative;padding:2.6rem 1.6rem 2.1rem;max-width:44rem}
.hero h1{font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.12;margin:0 0 .6rem;
  letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lede{font-size:1.02rem;color:var(--muted);max-width:38rem;margin:0 0 1.2rem}
.hero .cta{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.hero .cta a{display:inline-block;padding:.62rem 1.1rem;border-radius:10px;
  text-decoration:none;font-weight:650;font-size:.95rem}
.hero .cta a.primary{background:var(--gold);color:#1a1330;
  box-shadow:0 1px 0 color-mix(in srgb,#000 25%, transparent)}
.hero .cta a.ghost{border:1px solid var(--line);color:var(--ink)}
.hero .inks{display:flex;gap:.3rem;margin-top:1.1rem;align-items:center;
  font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.hero .inks i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* On a narrow screen the text spans the full width, so a horizontal veil leaves
   art directly behind the copy. Switch to a vertical veil and drop the art back —
   legibility of the lede matters more than seeing the art. */
@media (max-width:760px){
  .hero .art{opacity:.14}
  .hero .veil{background:linear-gradient(180deg,var(--panel) 34%,
    color-mix(in srgb,var(--panel) 82%, transparent) 72%,
    color-mix(in srgb,var(--panel) 60%, transparent))}
  .hero .inner{padding:1.9rem 1.15rem 1.5rem;max-width:none}
  .hero .inks{font-size:.64rem;flex-wrap:wrap;row-gap:.3rem}
  .hero .cta a{flex:1 1 auto;text-align:center}
}

/* ---- scale ---------------------------------------------------------------
   Radii had grown to nine distinct values (4/8/9/10/11/12/13/14/16px), with
   three of them stacked in a single viewport. Collapsed to four steps, and the
   px type sizes folded into the rem ladder the newer components already use. */
:root{--r-chip:99px; --r-control:9px; --r-panel:12px; --r-hero:16px; --gap:.85rem}
.card,.stat,.cross,.viz svg,.scroll,.feat article,.showcase a{border-radius:var(--r-panel)}
.hero{border-radius:var(--r-hero)}
.thumb,.burger,input,select,button,.drawer nav a{border-radius:var(--r-control)}
.tag,.gate,.chip,.chips .chip{border-radius:var(--r-chip)}
table{font-size:.9rem}
th{font-size:.78rem}
.tag,.gate{font-size:.72rem}
.sub,.thin{font-size:.88rem}
h2{font-size:1.05rem;font-weight:650}
.feat,.showcase,.statgrid{gap:var(--gap)}

/* ---- page header ---------------------------------------------------------
   A title, a sentence saying what the page is for, and the live counters — so a
   page opens by explaining itself rather than starting cold with a control bar. */
/* Self-contained: its own panel, border and padding, so it renders identically
   whatever container a page happens to put it in. Previously it was border-bottom
   only and inherited each page's wrapper — the market header appeared on a panel,
   the sets header did not, and the two looked like different components. */
.pagehead{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;
  justify-content:space-between;margin:.2rem 0 1rem;
  padding:1.15rem 1.25rem;position:relative;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 5%, var(--panel)),var(--panel) 60%);
  border:1px solid var(--line);border-radius:var(--r-panel)}
.pagehead:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 75%, transparent),
             color-mix(in srgb,var(--gold) 20%, transparent) 45%,transparent)}
.pagehead .ph-main{flex:1 1 24rem;min-width:0}
.pagehead .pageTitle{margin:0}
.pagehead .ph-lede{margin:.3rem 0 0;color:var(--muted);font-size:.9rem;max-width:56ch;line-height:1.5}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.chips .chip{background:var(--chip);border:1px solid var(--line);border-radius:99px;
  padding:.2rem .55rem;font-size:.74rem;color:var(--muted);white-space:nowrap}
.chips .chip b{color:var(--ink);font-weight:650}

/* Control bars sit under the header as one grouped strip rather than loose
   inputs floating on the background. */
.controls{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:.6rem .75rem;margin:.7rem 0 1rem}
.controls label.grow{flex:1 1 15rem}
.controls label.grow input{width:100%}

/* Visually hidden but available to assistive tech — used for table captions and
   for the empty image/action column headers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- data tables ---------------------------------------------------------
   Tables were browser-default on a bare background while every other component
   is a bordered, rounded panel — leaving the densest and most important data on
   the site looking the least finished. */
.scroll{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:auto}
.scroll table{margin:0}
thead th{position:sticky;top:0;z-index:1;background:var(--chip);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 40%, var(--line))}
tbody tr:hover td{background:var(--chip)}
/* A gold edge on hover instead of a near-invisible tint — the previous
   tr:hover background measured 1.09:1 against the row. */
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--gold) 70%, transparent)}
tbody tr:last-child td{border-bottom:0}

/* ---- focus -------------------------------------------------------------
   The only focus rule on the site was for inputs, and four pages have none —
   so every link, the burger, the drawer items and the showcase cards fell back
   to a UA outline against a near-black ground. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
  outline:none;border-radius:9px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%, transparent)}
.burger:hover, button:hover{border-color:color-mix(in srgb,var(--gold) 40%, var(--line))}

/* ---- price-by-grade chart ------------------------------------------------
   Series colours for the scatter. These live here, not in the page template,
   because the chrome CSS block is regenerated wholesale and anything appended
   beside it is overwritten on the next regeneration — which is exactly how the
   chart lost its colours and sizing. */
.viz{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--sother:#6b7280;--raw:#8a8580;
  --grid:#e4e6eb;margin-top:.6rem}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .viz{
  --s1:#5fa8ff;--s2:#ff8a4c;--s3:#3fbb84;--sother:#9d95bb;--raw:#b9b2a8;--grid:#2e2650}}
:root[data-theme=dark] .viz{--s1:#5fa8ff;--s2:#ff8a4c;--s3:#3fbb84;
  --sother:#9d95bb;--raw:#b9b2a8;--grid:#2e2650}
.viz svg{display:block;width:100%;height:auto;max-width:620px;
  background:color-mix(in srgb,var(--panel) 55%, transparent);
  border:1px solid var(--line);border-radius:12px}
.lgd{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;
  font-size:.76rem;color:var(--muted);margin-top:.5rem;max-width:620px}
.lgd span{display:inline-flex;align-items:center;gap:.32rem;white-space:nowrap}
.lgd i{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.assume{font-size:.74rem;color:var(--muted);margin-top:.45rem;max-width:62ch;line-height:1.5}
.cross{background:var(--chip);border:1px solid var(--line);border-radius:11px;
  padding:.8rem .9rem;margin-top:.5rem;font-size:.88rem;max-width:620px}
.cross .big{font-size:1.05rem;font-weight:700}
.cross .pos{color:var(--good)} .cross .neg{color:var(--warn)}

/* ---- form controls -------------------------------------------------------
   The pages inherited browser-default inputs and selects, which looked pasted in
   against everything else. Styled to the same surface, border and radius as the
   cards, with a gold focus ring so keyboard focus is obvious. */
.wrap input, .wrap select, main input, main select,
input[type=text], input[type=search], input[type=number], input[type=email], select{
  font:inherit;font-size:.9rem;color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);border-radius:9px;
  padding:.42rem .6rem;
  transition:border-color .15s ease, box-shadow .15s ease}
select{
  appearance:none;-webkit-appearance:none;padding-right:1.9rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
input:hover, select:hover{border-color:color-mix(in srgb,var(--gold) 40%, var(--line))}
input:focus, select:focus{outline:none;
  border-color:color-mix(in srgb,var(--gold) 70%, var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%, transparent)}
input::placeholder{color:var(--muted);opacity:.75}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:1.05rem;height:1.05rem;
  padding:0;border-radius:5px;position:relative;vertical-align:-3px;cursor:pointer}
input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
input[type=checkbox]:checked:after{content:"";position:absolute;left:.32rem;top:.11rem;
  width:.28rem;height:.55rem;border:solid #1a1330;border-width:0 2px 2px 0;transform:rotate(42deg)}
label{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.84rem}

/* ---- feature cards -------------------------------------------------------
   Each carries an ink colour and an icon. The colour is not decoration: it ties
   the four capabilities to the game's own palette, and the hover lift plus gold
   edge gives the same "premium object" feel a collector expects from a card. */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:14px 0 6px}
.feat article{position:relative;overflow:hidden;border-radius:14px;padding:1.15rem 1.15rem 1.25rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--panel) 96%, transparent),var(--panel));
  border:1px solid var(--line);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.feat article:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-ink-col,var(--gold))}
.feat article:after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-ink-col,var(--gold)) 26%, transparent),transparent 68%);
  pointer-events:none}
.feat article:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent-ink-col,var(--gold)) 55%, var(--line));
  box-shadow:0 8px 26px -14px color-mix(in srgb,var(--accent-ink-col,var(--gold)) 60%, transparent)}
.feat article:nth-child(1){--accent-ink-col:var(--ink-amber)}
.feat article:nth-child(2){--accent-ink-col:var(--ink-emerald)}
.feat article:nth-child(3){--accent-ink-col:var(--ink-sapphire)}
.feat article:nth-child(4){--accent-ink-col:var(--ink-amethyst)}
.feat .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  margin-bottom:.65rem;background:color-mix(in srgb,var(--accent-ink-col,var(--gold)) 18%, transparent);
  border:1px solid color-mix(in srgb,var(--accent-ink-col,var(--gold)) 40%, transparent)}
.feat .ic svg{width:17px;height:17px;fill:none;stroke:var(--accent-ink-col,var(--gold));stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin:0 0 .3rem;font-size:1rem;font-weight:650}
.feat p{margin:0;font-size:.87rem;color:var(--muted);line-height:1.5}
.feat a.more{display:inline-block;margin-top:.7rem;font-size:.82rem;font-weight:600;
  color:var(--accent-ink-col,var(--gold));text-decoration:none}
.feat a.more:hover{text-decoration:underline}

/* ---- showcase: the chase cards, shown as cards ---------------------------- */
.showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin:12px 0 4px}
.showcase a{position:relative;display:block;text-decoration:none;color:inherit;border-radius:13px;
  overflow:hidden;border:1px solid var(--line);background:var(--panel);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.showcase a:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--gold) 60%, var(--line));
  box-shadow:0 14px 34px -18px color-mix(in srgb,var(--gold) 70%, transparent)}
.showcase img{display:block;width:100%;aspect-ratio:5/7;object-fit:cover}
.showcase .meta{padding:.6rem .7rem .75rem}
.showcase .nm{font-weight:650;font-size:.88rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.showcase .vs{font-size:.78rem;color:var(--muted);margin-top:.1rem}
.showcase .pr{margin-top:.4rem;font-weight:700;font-size:1.02rem;color:var(--gold)}
/* On a narrow screen five cards leave a single orphan on the second row. Show a
   clean 2x2 and drop the fifth — better a tidy grid than a ragged one. */
@media (max-width:640px){
  .showcase{grid-template-columns:repeat(2,1fr);gap:10px}
  .showcase a:nth-child(n+5){display:none}
  .showcase .nm{font-size:.82rem}
  .showcase .pr{font-size:.95rem}
}
.showcase .rk{position:absolute;top:.5rem;left:.5rem;z-index:2;
  background:color-mix(in srgb,#0d0a1c 78%, transparent);color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 50%, transparent);
  border-radius:99px;font-size:.7rem;font-weight:700;padding:.1rem .45rem}

/* stat tiles get an ink-coloured edge, cycling the six inks */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:20px 0}
.statgrid .card{border-left:3px solid var(--line)}
.statgrid .card:nth-child(1){border-left-color:var(--ink-amber)}
.statgrid .card:nth-child(2){border-left-color:var(--ink-amethyst)}
.statgrid .card:nth-child(3){border-left-color:var(--ink-emerald)}
.statgrid .card:nth-child(4){border-left-color:var(--ink-sapphire)}
/* The footer rule is the same gradient as .goldrule — share it rather than
   maintaining two slightly different versions. */
.sitefoot .rule{height:1px;max-width:1180px;margin:0 auto 1.1rem;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 65%, transparent) 22%,
             color-mix(in srgb,var(--gold) 65%, transparent) 78%,transparent)}

/* Freshness stamp. Amber past 12 hours so a stale corpus is visible on the page
   rather than something you only find by reading the API. */
#freshness,#freshnessFoot{transition:color .2s}
#freshness.stale,#freshnessFoot.stale{color:var(--gold)}
#freshnessFoot.stale::before{content:"\26A0\FE0E";margin-right:.4rem;opacity:.85}

/* A price shown in dollars because the card has no UK listing. Marked rather
   than silently mixed in: the reader needs to know it is a different market,
   not a converted figure. */
.usonly{color:var(--gold);white-space:nowrap}
.usonly::after{content:"\00a0US";font-size:.72em;opacity:.75;letter-spacing:.04em}