/* allthings.coffee — design system v0.2
   Crisp, bright base + one signature color per ORIGIN COUNTRY, used everywhere that origin appears
   (hero, card accents, origin chips, chart series, buttons, meters). Color = origin. Nothing else is coded by hue.
   Fonts: Fraunces (display) + Inter (UI/data). Origin variables are generated by design/palette.py. */

/*ORIGINS:START*/
:root{
  --el-salvador:#2f5bea; --el-salvador-ink:#2a57ea; --el-salvador-soft:#e6ebfc; --el-salvador-chip:#2f5bea; --el-salvador-on:#ffffff;  /* Cobalt */
  --panama:#0fa678; --panama-ink:#0b7756; --panama-soft:#e2f4ef; --panama-chip:#0fa678; --panama-on:#11162a;  /* Jade */
  --kenya:#e0264f; --kenya-ink:#c41c41; --kenya-soft:#fbe5ea; --kenya-chip:#e0264f; --kenya-on:#ffffff;  /* Ruby */
  --colombia:#d42585; --colombia-ink:#ba2075; --colombia-soft:#fae5f0; --colombia-chip:#d42585; --colombia-on:#ffffff;  /* Magenta */
  --costa-rica:#0fb3c4; --costa-rica-ink:#0a747f; --costa-rica-soft:#e2f6f8; --costa-rica-chip:#0fb3c4; --costa-rica-on:#11162a;  /* Turquoise */
  --honduras:#7b4fe0; --honduras-ink:#7446de; --honduras-soft:#efeafb; --honduras-chip:#7b4fe0; --honduras-on:#ffffff;  /* Violet */
  --guatemala:#1f96ee; --guatemala-ink:#0d6bb1; --guatemala-soft:#e4f2fd; --guatemala-chip:#1f96ee; --guatemala-on:#11162a;  /* Azure */
  --yemen:#f4b400; --yemen-ink:#8b6700; --yemen-soft:#fef6e0; --yemen-chip:#f4b400; --yemen-on:#11162a;  /* Saffron */
  --brazil:#4cb52f; --brazil-ink:#32781f; --brazil-soft:#eaf6e6; --brazil-chip:#4cb52f; --brazil-on:#11162a;  /* Leaf */
  --ethiopia:#3a3fd6; --ethiopia-ink:#3a3fd6; --ethiopia-soft:#e7e8fa; --ethiopia-chip:#3a3fd6; --ethiopia-on:#ffffff;  /* Ultramarine */
  --nicaragua:#b347d6; --nicaragua-ink:#a02cc6; --nicaragua-soft:#f6e9fa; --nicaragua-chip:#a02cc6; --nicaragua-on:#ffffff;  /* Orchid */
  --mexico:#ec3f36; --mexico-ink:#ca1c13; --mexico-soft:#fde8e7; --mexico-chip:#ec3f36; --mexico-on:#11162a;  /* Vermilion */
  --peru:#0f9e93; --peru-ink:#0b746c; --peru-soft:#e2f3f2; --peru-chip:#0f9e93; --peru-on:#11162a;  /* Lagoon */
  --rwanda:#f2c40f; --rwanda-ink:#856b07; --rwanda-soft:#fdf8e2; --rwanda-chip:#f2c40f; --rwanda-on:#11162a;  /* Sunflower */
  --burundi:#8cc320; --burundi-ink:#557613; --burundi-soft:#f1f8e4; --burundi-chip:#8cc320; --burundi-on:#11162a;  /* Lime */
  --bolivia:#5b7cfa; --bolivia-ink:#2c56f9; --bolivia-soft:#ebeffe; --bolivia-chip:#5b7cfa; --bolivia-on:#11162a;  /* Periwinkle */
  --ecuador:#12c2a8; --ecuador-ink:#0b7767; --ecuador-soft:#e3f8f5; --ecuador-chip:#12c2a8; --ecuador-on:#11162a;  /* Aqua */
  --indonesia:#9b3fd1; --indonesia-ink:#9533ce; --indonesia-soft:#f3e8f9; --indonesia-chip:#9b3fd1; --indonesia-on:#ffffff;  /* Amethyst */
  --thailand:#f0517e; --thailand-ink:#cc1246; --thailand-soft:#fdeaf0; --thailand-chip:#f0517e; --thailand-on:#11162a;  /* Rose */
  --taiwan:#3fb0f5; --taiwan-ink:#096fae; --taiwan-soft:#e8f6fe; --taiwan-chip:#3fb0f5; --taiwan-on:#11162a;  /* Sky */
  --china:#e8333a; --china-ink:#c7161d; --china-soft:#fce7e7; --china-chip:#c7161d; --china-on:#ffffff;  /* Scarlet */
  --hawaii:#ff4fa3; --hawaii-ink:#cc0061; --hawaii-soft:#ffeaf4; --hawaii-chip:#ff4fa3; --hawaii-on:#11162a;  /* Hibiscus */
}
@media (prefers-color-scheme: dark){ :root{
  --el-salvador-ink:#7794f1; --el-salvador-soft:#1a2857;
  --panama-ink:#11bb87; --panama-soft:#13393e;
  --kenya-ink:#ea6d89; --kenya-soft:#411d35;
  --colombia-ink:#e56daf; --colombia-soft:#3e1c41;
  --costa-rica-ink:#10bccd; --costa-rica-soft:#133c4f;
  --honduras-ink:#a78aea; --honduras-soft:#2b2655;
  --guatemala-ink:#4cabf1; --guatemala-soft:#163558;
  --yemen-ink:#f4b400; --yemen-soft:#453c24;
  --brazil-ink:#50bf32; --brazil-soft:#203c2e;
  --ethiopia-ink:#888be6; --ethiopia-soft:#1c2253;
  --nicaragua-ink:#c97de2; --nicaragua-soft:#372453;
  --mexico-ink:#f1746e; --mexico-soft:#442230;
  --peru-ink:#11b5a9; --peru-soft:#133744;
  --rwanda-ink:#f2c40f; --rwanda-soft:#453f27;
  --burundi-ink:#8cc320; --burundi-soft:#2e3f2b;
  --bolivia-ink:#859efb; --bolivia-soft:#24305b;
  --ecuador-ink:#12c2a8; --ecuador-soft:#143f49;
  --indonesia-ink:#bc7fe0; --indonesia-soft:#322252;
  --thailand-ink:#f3779a; --thailand-soft:#442640;
  --taiwan-ink:#4bb5f6; --taiwan-soft:#1d3b5a;
  --china-ink:#ef7176; --china-soft:#432031;
  --hawaii-ink:#ff6eb3; --hawaii-soft:#482648;
}}
.o-el-salvador{--accent:var(--el-salvador); --accent-ink:var(--el-salvador-ink); --accent-soft:var(--el-salvador-soft); --accent-chip:var(--el-salvador-chip); --accent-on:var(--el-salvador-on)}
.o-panama{--accent:var(--panama); --accent-ink:var(--panama-ink); --accent-soft:var(--panama-soft); --accent-chip:var(--panama-chip); --accent-on:var(--panama-on)}
.o-kenya{--accent:var(--kenya); --accent-ink:var(--kenya-ink); --accent-soft:var(--kenya-soft); --accent-chip:var(--kenya-chip); --accent-on:var(--kenya-on)}
.o-colombia{--accent:var(--colombia); --accent-ink:var(--colombia-ink); --accent-soft:var(--colombia-soft); --accent-chip:var(--colombia-chip); --accent-on:var(--colombia-on)}
.o-costa-rica{--accent:var(--costa-rica); --accent-ink:var(--costa-rica-ink); --accent-soft:var(--costa-rica-soft); --accent-chip:var(--costa-rica-chip); --accent-on:var(--costa-rica-on)}
.o-honduras{--accent:var(--honduras); --accent-ink:var(--honduras-ink); --accent-soft:var(--honduras-soft); --accent-chip:var(--honduras-chip); --accent-on:var(--honduras-on)}
.o-guatemala{--accent:var(--guatemala); --accent-ink:var(--guatemala-ink); --accent-soft:var(--guatemala-soft); --accent-chip:var(--guatemala-chip); --accent-on:var(--guatemala-on)}
.o-yemen{--accent:var(--yemen); --accent-ink:var(--yemen-ink); --accent-soft:var(--yemen-soft); --accent-chip:var(--yemen-chip); --accent-on:var(--yemen-on)}
.o-brazil{--accent:var(--brazil); --accent-ink:var(--brazil-ink); --accent-soft:var(--brazil-soft); --accent-chip:var(--brazil-chip); --accent-on:var(--brazil-on)}
.o-ethiopia{--accent:var(--ethiopia); --accent-ink:var(--ethiopia-ink); --accent-soft:var(--ethiopia-soft); --accent-chip:var(--ethiopia-chip); --accent-on:var(--ethiopia-on)}
.o-nicaragua{--accent:var(--nicaragua); --accent-ink:var(--nicaragua-ink); --accent-soft:var(--nicaragua-soft); --accent-chip:var(--nicaragua-chip); --accent-on:var(--nicaragua-on)}
.o-mexico{--accent:var(--mexico); --accent-ink:var(--mexico-ink); --accent-soft:var(--mexico-soft); --accent-chip:var(--mexico-chip); --accent-on:var(--mexico-on)}
.o-peru{--accent:var(--peru); --accent-ink:var(--peru-ink); --accent-soft:var(--peru-soft); --accent-chip:var(--peru-chip); --accent-on:var(--peru-on)}
.o-rwanda{--accent:var(--rwanda); --accent-ink:var(--rwanda-ink); --accent-soft:var(--rwanda-soft); --accent-chip:var(--rwanda-chip); --accent-on:var(--rwanda-on)}
.o-burundi{--accent:var(--burundi); --accent-ink:var(--burundi-ink); --accent-soft:var(--burundi-soft); --accent-chip:var(--burundi-chip); --accent-on:var(--burundi-on)}
.o-bolivia{--accent:var(--bolivia); --accent-ink:var(--bolivia-ink); --accent-soft:var(--bolivia-soft); --accent-chip:var(--bolivia-chip); --accent-on:var(--bolivia-on)}
.o-ecuador{--accent:var(--ecuador); --accent-ink:var(--ecuador-ink); --accent-soft:var(--ecuador-soft); --accent-chip:var(--ecuador-chip); --accent-on:var(--ecuador-on)}
.o-indonesia{--accent:var(--indonesia); --accent-ink:var(--indonesia-ink); --accent-soft:var(--indonesia-soft); --accent-chip:var(--indonesia-chip); --accent-on:var(--indonesia-on)}
.o-thailand{--accent:var(--thailand); --accent-ink:var(--thailand-ink); --accent-soft:var(--thailand-soft); --accent-chip:var(--thailand-chip); --accent-on:var(--thailand-on)}
.o-taiwan{--accent:var(--taiwan); --accent-ink:var(--taiwan-ink); --accent-soft:var(--taiwan-soft); --accent-chip:var(--taiwan-chip); --accent-on:var(--taiwan-on)}
.o-china{--accent:var(--china); --accent-ink:var(--china-ink); --accent-soft:var(--china-soft); --accent-chip:var(--china-chip); --accent-on:var(--china-on)}
.o-hawaii{--accent:var(--hawaii); --accent-ink:var(--hawaii-ink); --accent-soft:var(--hawaii-soft); --accent-chip:var(--hawaii-chip); --accent-on:var(--hawaii-on)}

/*ORIGINS:END*/

:root{
  color-scheme: light dark;
  --bg:#f6f7fb; --card:#ffffff; --wash:#eef0f7; --ink:#11162a; --ink-2:#3a4160; --ink-3:#59617f;
  --line:#e3e6f0; --line-2:#cfd4e3;
  --ok:#0e7a43; --ok-bg:#e2f6ea; --up:#4338ca; --up-bg:#eceafe; --off:#59617f; --off-bg:#eef0f7;
  --accent:var(--ink); --accent-ink:var(--ink); --accent-soft:var(--wash); --accent-chip:var(--ink); --accent-on:#fff;
  --spectrum:linear-gradient(90deg,var(--el-salvador) 0 14%,var(--honduras) 14% 28%,var(--colombia) 28% 42%,var(--kenya) 42% 57%,var(--yemen) 57% 71%,var(--panama) 71% 85%,var(--costa-rica) 85% 100%);
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:16px; --shadow:0 1px 2px rgba(17,22,42,.05), 0 12px 32px -18px rgba(17,22,42,.28); --wrap:1180px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --card:#141a2e; --wash:#10162a; --ink:#eef1fb; --ink-2:#c3c9de; --ink-3:#959dba;
    --line:#242c47; --line-2:#323b5c;
    --ok:#6fe0a0; --ok-bg:#12301f; --up:#b4adff; --up-bg:#24204a; --off:#a3abc6; --off-bg:#1b2238;
    --accent-on:#0b1020;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 36px -20px rgba(0,0,0,.9);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration-color:color-mix(in srgb, var(--accent-ink) 50%, transparent); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(18px,4vw,40px)}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--bg); padding:8px 14px; border-radius:8px; z-index:99}
.skip:focus{left:12px}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.muted{color:var(--ink-3)}

/* ── Masthead ───────────────────────────────────── */
.masthead{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line)}
.masthead::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--spectrum)}
.masthead .wrap{max-width:1340px; display:flex; align-items:center; gap:20px; min-height:64px; padding-top:3px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font:600 19px/1 var(--serif); letter-spacing:-.01em; white-space:nowrap}
.brand{flex-shrink:0} .brand svg{width:26px; height:26px; flex-shrink:0}
.brand .wm{display:inline-flex; letter-spacing:-.01em} .brand .wm span{font-weight:400; color:var(--ink)} .brand .wm b{font-weight:700; color:var(--ink)}
.nav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin-left:auto}
.nav::-webkit-scrollbar{display:none}
.nav a{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none; font:500 13px/1 var(--sans); color:var(--ink-2); padding:9px 9px; border-radius:999px}
.nav a i{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.nav a:hover{background:var(--wash); color:var(--ink)}
.nav a[aria-current="page"]{background:var(--ink); color:var(--card)}
@media (max-width:760px){
  .masthead .wrap{flex-wrap:wrap; gap:6px 16px; padding-top:13px; padding-bottom:8px; min-height:0}
  .nav{margin-left:-6px; width:calc(100% + 12px); -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent)}
}

/* ── Hero ───────────────────────────────────────── */
.hero{position:relative; padding:clamp(40px,6vw,76px) 0 clamp(28px,4vw,40px); overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent-soft) 85%, var(--bg)) 0%, var(--bg) 100%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center}
.eyebrow{font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); display:flex; gap:10px; align-items:center; margin:0 0 18px}
.eyebrow::before{content:""; width:28px; height:2px; border-radius:2px; background:var(--accent)}
.hero h1{font:400 clamp(40px,7vw,84px)/.98 var(--serif); letter-spacing:-.025em; margin:0; max-width:14ch; font-variation-settings:"opsz" 144}
.hero h1 em{font-style:italic; color:var(--accent-ink); font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1}
.hero .deck{font:400 clamp(17px,1.9vw,21px)/1.5 var(--serif); color:var(--ink-2); max-width:58ch; margin:22px 0 0}
.disc{position:relative; width:clamp(220px,24vw,300px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 30% 22%, color-mix(in srgb,var(--accent) 78%, #fff) 0%, var(--accent) 38%, color-mix(in srgb,var(--accent) 82%, #000) 100%);
  color:var(--accent-on); box-shadow:0 30px 60px -30px color-mix(in srgb,var(--accent) 80%, transparent)}
.disc::before{content:""; position:absolute; inset:12px; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--accent-on) 45%, transparent)}
.disc small{display:block; font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; opacity:.85}
.disc strong{display:block; font:400 clamp(28px,3vw,38px)/1.05 var(--serif); margin:10px 18px 8px; letter-spacing:-.01em}
.disc span{font:500 13px/1.3 var(--sans); opacity:.9}
.disc.multi{background:conic-gradient(var(--el-salvador) 0 25%, var(--panama) 0 50%, var(--kenya) 0 70%, var(--colombia) 0 100%); color:#fff}
.disc.multi::after{content:""; position:absolute; inset:22%; border-radius:50%; background:var(--card); box-shadow:inset 0 0 0 1px var(--line)}
.disc.multi > *{position:relative; z-index:1; color:var(--ink)}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr} .disc{display:none} }
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:36px 0 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line)}
.stat{padding:16px 18px 16px 0}
.stat + .stat{padding-left:18px; border-left:1px solid var(--line)}
.stat dt{font:600 11px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.stat dd{margin:6px 0 0; font:400 30px/1.05 var(--serif); letter-spacing:-.01em; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap}
.stat dd small{font:500 13px/1 var(--sans); color:var(--ink-3); margin-left:4px}
@media (max-width:620px){ .stats{grid-template-columns:1fr 1fr} .stat:nth-child(odd){padding-left:0; border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} }

/* ── Origin chip (the one place hue = meaning, everywhere) ── */
.origin{display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--sans); letter-spacing:.02em; padding:5px 9px 5px 7px; border-radius:999px;
  background:var(--accent-chip); color:var(--accent-on); white-space:nowrap}
.origin::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.8}

/* ── Layout ─────────────────────────────────────── */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(28px,4vw,56px); align-items:start; padding-top:clamp(24px,3vw,36px); padding-bottom:40px}
.layout > aside{position:sticky; top:88px}
@media (max-width:980px){ .layout{grid-template-columns:1fr} .layout > aside{position:static} }
.section{padding:clamp(28px,4vw,48px) 0 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
h2{font:400 clamp(26px,3vw,36px)/1.1 var(--serif); letter-spacing:-.015em; margin:0}
h2 .count{font:600 13px/1 var(--sans); color:var(--accent-on); background:var(--accent-chip); padding:4px 8px; border-radius:999px; margin-left:10px; vertical-align:middle; letter-spacing:0}
h3{font:600 17px/1.3 var(--sans); margin:0}
.lede{color:var(--ink-2); max-width:68ch; margin:6px 0 0}
.hint{font-size:13.5px; color:var(--ink-3)}
a.hint{color:var(--accent-ink)}

/* ── Listing cards ──────────────────────────────── */
.lots{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.lot{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 20px 0; position:relative; overflow:hidden}
.lot::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent)}
.lot-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.lot-roaster{font:600 12px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:0}
.lot h3{font:500 21px/1.22 var(--serif); letter-spacing:-.01em; margin:12px 0 4px; text-wrap:balance}
.lot-producer{margin:0; color:var(--ink-2); font-size:14px}
.lot-notes{margin:14px 0 0; font:italic 400 16px/1.45 var(--serif); color:var(--ink)}
.lot-notes::before{content:"“"; color:var(--accent-ink)} .lot-notes::after{content:"”"; color:var(--accent-ink)}
.specs{display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 0; padding:0}
.specs div{display:flex; flex-direction:column} .specs dt{font:600 10.5px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.specs dd{margin:3px 0 0; font-size:14.5px; font-weight:500}
.alt{margin-top:14px} .alt-track{position:relative; height:6px; border-radius:6px; background:var(--wash); border:1px solid var(--line)}
.alt-fill{position:absolute; top:-1px; bottom:-1px; border-radius:6px; background:var(--accent); min-width:6px}
.alt-scale{display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.04em; color:var(--ink-3); margin-top:5px}
.missing{margin:14px 0 0; font-size:13px; color:var(--ink-3); font-style:italic}
.lot > :nth-last-child(2){margin-bottom:18px}
.lot-foot{margin-top:auto; padding:16px 0; display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 12px; border-top:1px dashed var(--line-2)}
.lot-foot .dest{grid-column:1 / -1; margin:0; padding-top:10px; border-top:1px solid var(--line)}
.price .amt{font:400 32px/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:lining-nums}
.price .unit{font:500 12.5px/1.2 var(--sans); color:var(--ink-3); display:block; margin-top:4px}
.buy{display:inline-flex; text-decoration:none}
.buy .btn{display:inline-flex; align-items:center; gap:6px; background:var(--accent-chip); color:var(--accent-on); font:600 14px/1 var(--sans); padding:11px 16px; border-radius:999px; transition:transform .15s ease, box-shadow .15s}
.buy:hover .btn{transform:translateY(-1px); box-shadow:0 8px 18px -8px var(--accent)}
.dest{font-size:11.5px; color:var(--ink-3); word-break:break-all; line-height:1.3}
.empty{background:var(--card); border:1px dashed var(--line-2); border-radius:var(--r); padding:22px; color:var(--ink-2)}
.lots.solo{grid-template-columns:1fr}
.lots.solo .lot{display:grid; grid-template-columns:1.3fr 1fr; column-gap:28px; padding:24px 26px 0}
.lots.solo .lot > *{grid-column:1} .lots.solo .lot-foot{grid-column:2; grid-row:1 / span 7; align-self:stretch; border-top:0; border-left:1px dashed var(--line-2); padding:0 0 22px 26px; align-content:end}
.lots.solo .lot h3{font-size:28px}
@media (max-width:640px){ .lots.solo .lot{grid-template-columns:1fr; padding:20px 20px 0} .lots.solo .lot-foot{grid-column:1; grid-row:auto; border-left:0; border-top:1px dashed var(--line-2); padding:16px 0} }
.crosslink{display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:center; margin-top:18px; padding:22px 24px; border-radius:var(--r); text-decoration:none;
  background:linear-gradient(110deg, var(--accent-soft), color-mix(in srgb,var(--accent-soft) 40%, var(--card))); border:1px solid color-mix(in srgb,var(--accent) 35%, transparent)}
.crosslink .k{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
.crosslink strong{font:400 24px/1.2 var(--serif); grid-column:1} .crosslink span.d{grid-column:1; color:var(--ink-2); font-size:14.5px}
.crosslink .arrow{grid-column:2; grid-row:1 / span 3; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--accent-chip); color:var(--accent-on); font:600 20px/1 var(--sans); transition:transform .2s}
.crosslink:hover .arrow{transform:translateX(4px)}

/* ── Status & process ───────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--sans); padding:6px 9px; border-radius:999px; white-space:nowrap; background:var(--off-bg); color:var(--off)}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.badge.in{background:var(--ok-bg); color:var(--ok)}
.badge.up{background:var(--up-bg); color:var(--up)} .badge.up::before{border-radius:1px; transform:rotate(45deg); width:6px; height:6px}
.badge.off::before{background:transparent; border:1.5px solid currentColor}
.chip{display:inline-block; font:500 12.5px/1.2 var(--sans); padding:5px 8px; border-radius:6px; background:var(--wash); color:var(--ink-2); border:1px solid var(--line)}

/* ── Data table ─────────────────────────────────── */
.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px}
.seg{display:inline-flex; flex-wrap:wrap; background:var(--wash); border:1px solid var(--line); border-radius:999px; padding:3px}
.seg button{all:unset; white-space:nowrap; cursor:pointer; font:500 13px/1 var(--sans); padding:8px 12px; border-radius:999px; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--accent-chip); color:var(--accent-on); box-shadow:0 2px 6px -2px var(--accent)}
.seg button:focus-visible{outline:2px solid var(--accent-ink)}
.table-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:auto; box-shadow:var(--shadow)}
table.data{width:100%; border-collapse:collapse; font-size:14px}
.data th{font:600 11px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:14px 14px 10px; border-bottom:2px solid var(--line-2); white-space:nowrap; background:var(--card); position:sticky; top:0}
.data th button{all:unset; cursor:pointer} .data th button::after{content:" ↕"; opacity:.45} .data th[aria-sort="ascending"] button::after{content:" ↑"; opacity:1} .data th[aria-sort="descending"] button::after{content:" ↓"; opacity:1}
.data td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.data tbody tr:last-child td{border-bottom:0}
.data tbody tr:hover td{background:color-mix(in srgb, var(--accent-soft) 60%, transparent)}
.data td.num,.data th.num{text-align:right} .data td.num{white-space:nowrap}
.data .coffee{min-width:220px; max-width:34ch} .data .coffee a{font-weight:600; text-decoration:none} .data .coffee a:hover{text-decoration:underline}
.data .coffee .dest{display:block; margin-top:3px}
.t-roaster{display:block; font:600 10.5px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.data td:nth-child(2){min-width:120px; max-width:20ch; font-size:13.5px; color:var(--ink-2)}
.data .notes{color:var(--ink-2); font-family:var(--serif); font-style:italic; min-width:170px; max-width:28ch}
.data tr.is-off td{color:var(--ink-3)}
@media (max-width:720px){
  html{scroll-padding-top:116px} .toolbar .hint{display:none}
  .data.stack thead{display:none} .data.stack, .data.stack tbody{display:block; width:100%}
  .data.stack tr{position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"c c c" "p p p" "pr al pz"; gap:6px 14px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:center}
  .data.stack tr[hidden]{display:none}
  .data.stack .t-roaster{min-height:24px; display:flex; align-items:center; margin-bottom:2px; padding-right:120px}
  .data.stack .chip{white-space:normal; max-width:36vw}
  .data.stack td{display:block; border:0; padding:0; min-width:0; max-width:none; text-align:left}
  .data.stack td:nth-child(1){grid-area:c; font-size:16px} .data.stack td:nth-child(2){grid-area:p; font-size:13px; color:var(--ink-3)}
  .data.stack td:nth-child(3){grid-area:pr} .data.stack td:nth-child(4){grid-area:al; color:var(--ink-2); white-space:nowrap}
  .data.stack td:nth-child(5){display:none} .data.stack td:nth-child(6){position:absolute; top:14px; right:16px}
  .data.stack td:nth-child(7){grid-area:pz; justify-self:end; font-weight:600; white-space:nowrap}
  .data.stack td:empty{display:none}
}

/* ── Aside: variety fact sheet ──────────────────── */
.facts{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.facts::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent)}
.facts .eyebrow{margin-bottom:10px}
.facts h2{font-size:26px} .facts .aka{margin:4px 0 0; font-size:13.5px; color:var(--ink-3)}
.facts p{font-size:14.5px; color:var(--ink-2)}
.facts dl{margin:16px 0 0; display:grid; grid-template-columns:auto 1fr; font-size:13.5px}
.facts dt{color:var(--ink-3); padding:8px 12px 8px 0; border-top:1px solid var(--line)}
.facts dd{margin:0; padding:8px 0; border-top:1px solid var(--line); font-weight:500; text-align:right}
.meter{display:inline-flex; gap:3px; vertical-align:middle; margin-left:6px} .meter i{width:12px; height:5px; border-radius:2px; background:var(--line-2)} .meter i.on{background:var(--accent)}
.source{font-size:12.5px; color:var(--ink-3); margin-top:14px}
.aside-card{margin-top:16px; background:var(--accent-soft); border-radius:var(--r); padding:18px 20px; font-size:14px; border:1px solid color-mix(in srgb,var(--accent) 25%, transparent)}
.aside-card h3{font:500 18px/1.2 var(--serif); margin-bottom:8px}
.aside-card ul{margin:0; padding:0; list-style:none} .aside-card li{display:flex; justify-content:space-between; padding:5px 0; border-top:1px solid color-mix(in srgb,var(--ink) 10%, transparent)}
.aside-card li:first-child{border-top:0} .aside-card li b{font-variant-numeric:tabular-nums}

/* ── Competition ────────────────────────────────── */
.comp{margin-top:56px; padding:clamp(36px,5vw,64px) 0; background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative}
.comp::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent)}
.comp-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:start}
@media (max-width:900px){ .comp-grid{grid-template-columns:1fr} }
.comp .stats{border-top-color:var(--accent)}
.chart{margin:0; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:16px 16px 8px}
.chart svg{width:100%; height:auto} .chart text{font:500 12px var(--sans); fill:var(--ink-3)}
.chart .grid line{stroke:var(--line-2); stroke-dasharray:2 4} .chart .dot{fill:var(--accent); fill-opacity:.8; stroke:var(--card); stroke-width:1.5}
.chart .dot.top{fill-opacity:1; stroke:var(--ink); stroke-width:1.5} .chart .lbl{fill:var(--ink); font-weight:600}
.chart figcaption{font-size:12.5px; color:var(--ink-3); padding:6px 4px 6px}
.legend{display:flex; flex-wrap:wrap; gap:6px; margin:4px 4px 8px}
.podium{list-style:none; margin:0; padding:0}
.podium li{display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; padding:14px 0; border-top:1px solid var(--line-2); align-items:baseline}
.podium li:first-child{border-top:0; padding-top:4px}
.podium .score{font:400 30px/1 var(--serif); color:var(--accent-ink); font-variant-numeric:lining-nums; grid-row:span 2; min-width:2.6em}
.podium .farm{font-weight:600} .podium .meta{grid-column:2; font-size:13px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center}
.podium .usd{font:600 14px var(--sans); text-align:right; grid-row:span 2; font-variant-numeric:tabular-nums}
.podium .usd small{display:block; font-weight:400; color:var(--ink-3); font-size:11.5px}
details.all{margin-top:22px} details.all summary{cursor:pointer; font-weight:600; color:var(--ink); list-style:none; display:inline-flex; gap:8px; align-items:center; padding:10px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--card)}
details.all summary::-webkit-details-marker{display:none} details.all summary::before{content:"+"; color:var(--accent-ink); font-weight:700} details.all[open] summary::before{content:"–"}
details.all .table-wrap{margin-top:14px; max-height:560px; box-shadow:none}

/* ── Hub (index) ────────────────────────────────── */
.hero h1 .spectrum{font-style:italic; background:linear-gradient(90deg,var(--el-salvador-ink),var(--honduras-ink) 38%,var(--colombia-ink) 72%,var(--kenya-ink)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1; padding-right:.06em}
.hub-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:18px; padding:clamp(28px,4vw,44px) 0 20px}
.hub-card{display:flex; flex-direction:column; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s}
.hub-card:hover{transform:translateY(-3px); box-shadow:0 22px 44px -24px color-mix(in srgb,var(--accent) 70%, transparent)}
.hub-card .swatch{height:150px; position:relative; overflow:hidden; color:var(--accent-on);
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--accent) 50%, #fff) 0%, transparent 55%), var(--accent)}
.hub-card .swatch::after{content:""; position:absolute; right:-40px; bottom:-60px; width:200px; height:200px; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--accent-on) 40%, transparent)}
.hub-card .swatch b{position:absolute; left:22px; bottom:16px; font:italic 400 40px/1 var(--serif); letter-spacing:-.02em; font-variation-settings:"opsz" 144, "SOFT" 100}
.hub-card .swatch .origin{position:absolute; left:20px; top:18px; background:color-mix(in srgb,var(--accent-on) 16%, transparent); color:var(--accent-on)}
.hub-card .body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.hub-card h2{font-size:28px} .hub-card p{margin:0; color:var(--ink-2); font-size:14.5px}
.hub-card .row{display:flex; gap:22px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)}
.hub-card .row b{display:block; font:400 22px/1.1 var(--serif); color:var(--ink); font-variant-numeric:lining-nums}
.method{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; padding:40px 0 10px; border-top:1px solid var(--line); margin-top:36px}
.method h3{font:500 20px/1.2 var(--serif); margin-bottom:6px; display:flex; gap:10px; align-items:center}
.method h3 i{width:12px; height:12px; border-radius:50%; background:var(--accent)}
.method p{margin:0; color:var(--ink-2); font-size:14.5px}
.palette{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
code{font:500 .88em ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--wash); padding:.1em .35em; border-radius:4px; border:1px solid var(--line)}

/* ── Footer ─────────────────────────────────────── */
.foot{padding:40px 0 56px; color:var(--ink-3); font-size:13.5px; border-top:1px solid var(--line)}
.foot .wrap{display:grid; grid-template-columns:1.4fr 1fr; gap:28px} .foot p{margin:0 0 8px; max-width:70ch}
.foot strong{color:var(--ink-2)}
@media (max-width:760px){ .foot .wrap{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important} }

/* ── Print ──────────────────────────────────────── */
@media print{
  :root{--bg:#fff; --card:#fff; --wash:#f3f4f8; --shadow:none}
  body{font-size:11pt; -webkit-print-color-adjust:exact; print-color-adjust:exact} .masthead,.skip,.toolbar,.buy .btn,.disc{display:none!important}
  .hero{background:none} .layout{grid-template-columns:1fr} .layout > aside{position:static}
  .lot,.facts,.chart,.table-wrap,.hub-card{break-inside:avoid; box-shadow:none}
  details.all > *{display:block} details.all .table-wrap{max-height:none; overflow:visible}
  .data th{position:static}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all}
}

/* Hub hero: the whole palette, softly */
.hero.hub{background:
  radial-gradient(38% 70% at 92% 10%, color-mix(in srgb,var(--colombia) 16%, transparent), transparent 70%),
  radial-gradient(30% 60% at 70% 90%, color-mix(in srgb,var(--panama) 14%, transparent), transparent 70%),
  radial-gradient(40% 70% at 10% 0%, color-mix(in srgb,var(--el-salvador) 13%, transparent), transparent 70%),
  radial-gradient(30% 50% at 45% 60%, color-mix(in srgb,var(--yemen) 10%, transparent), transparent 70%), var(--bg)}
.hero.hub .eyebrow{color:var(--ink-2)} .hero.hub .eyebrow::before{background:var(--spectrum)}

/* ══ Data views (top-coffees, producers) ═══════════ */
.nav-sep{flex:0 0 1px; align-self:stretch; margin:6px 4px; background:var(--line-2)}
.nav a.nav-data{font-weight:600; color:var(--ink)}
.nav a.nav-data::before{content:""; width:10px; height:10px; border-radius:50%; background:conic-gradient(var(--el-salvador) 0 25%,var(--colombia) 0 50%,var(--yemen) 0 75%,var(--panama) 0)}
.nav a.nav-data[aria-current="page"]{color:var(--card)} .nav a.nav-data[aria-current="page"]::before{box-shadow:0 0 0 1.5px var(--card)}
.hub-data{padding:28px 0 8px} .hub-data h2{margin-bottom:16px}
.hub-data-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:16px}
.data-card{position:relative; display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:center; padding:24px 26px; border-radius:20px; text-decoration:none; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
.data-card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--spectrum)}
.data-card .k{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.data-card strong{font:400 26px/1.15 var(--serif); grid-column:1} .data-card .d{grid-column:1; color:var(--ink-2); font-size:14.5px}
.data-card .arrow{grid-column:2; grid-row:1 / span 3; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--card); font:600 20px/1 var(--sans); transition:transform .2s}
.data-card:hover .arrow{transform:translateX(4px)}

/* tabs */
.tabs{position:sticky; top:64px; z-index:15; background:color-mix(in srgb,var(--bg) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-top:10px; padding-bottom:10px}
.tabs a{white-space:nowrap; text-decoration:none; font:600 14px/1 var(--sans); color:var(--ink-2); padding:10px 16px; border-radius:999px; border:1px solid transparent}
.tabs a:hover{background:var(--wash); color:var(--ink)}
.tabs a[aria-current="true"]{background:var(--card); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow)}
@media (max-width:760px){ .tabs{top:var(--mh,98px)} }
.view{padding:clamp(28px,4vw,44px) 0 56px}
.view[hidden]{display:none}
.kicker{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px}

/* records wall */
.records{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.rec{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; gap:6px}
.rec::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--accent)}
.rec .what{font:600 11px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.rec .big{font:400 38px/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:lining-nums; margin-top:4px}
.rec .big small{font:500 14px/1 var(--sans); color:var(--ink-3); margin-left:3px}
.rec .alt{margin:0; font-size:12.5px; color:var(--ink-3)}
.rec .who{font-weight:600; font-size:15px; line-height:1.3} .rec .meta{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:12.5px; color:var(--ink-3); margin-top:auto; padding-top:8px}
.rec.verified{background:linear-gradient(160deg, var(--accent-soft), var(--card) 70%)}
.vbadge{display:inline-flex; align-items:center; gap:5px; font:700 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; border-radius:999px; background:var(--ink); color:var(--card)}
.cited{margin-top:18px; background:var(--card); border:1px dashed var(--line-2); border-radius:var(--r); padding:16px 18px}
.cited h3{font:600 13px/1.3 var(--sans); margin:0 0 4px} .cited p{margin:0 0 10px; font-size:13px; color:var(--ink-3)}
.cited ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:4px 22px}
.cited li{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line); font-size:13.5px}
.cited li b{font-variant-numeric:tabular-nums; white-space:nowrap} .cited li a{color:var(--ink-2)}

/* price ladder */
.ladder{margin-top:36px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:22px 22px 12px}
.ladder-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 20px; align-items:end; margin-bottom:10px}
.ladder-head p{margin:4px 0 0; color:var(--ink-2); font-size:14px; max-width:62ch}
.ladder svg{width:100%; height:auto; overflow:visible}
.ladder text{font:500 11.5px var(--sans); fill:var(--ink-3)} .ladder .yl{font-variant-numeric:tabular-nums}
.ladder .gl{stroke:var(--line); stroke-width:1} .ladder .gl.major{stroke:var(--line-2)}
.ladder circle{stroke-width:1.2} .ladder circle.pub{fill-opacity:.72; stroke:var(--card); stroke-width:.6}
.ladder circle.prv{fill:var(--card); fill-opacity:1; stroke-width:1.6}
.ladder circle:hover{stroke:var(--ink); stroke-width:2}
.ladder .med{fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:4 3}
.ladder .callout{font:600 12px var(--sans); fill:var(--ink)} .ladder .callout-l{stroke:var(--ink); stroke-width:1}
.key{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-3); align-items:center; margin:10px 2px 4px}
.key i{display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:-1px; margin-right:6px; background:var(--ink-3)}
.key i.h{background:transparent; border:1.6px solid var(--ink-3)} .key i.m{width:18px; height:0; border-radius:0; border-top:1.6px dashed var(--ink); background:none}
.tip{position:fixed; z-index:50; pointer-events:none; background:var(--ink); color:var(--card); font:500 12.5px/1.4 var(--sans); padding:8px 10px; border-radius:10px; max-width:280px; box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.tip b{display:block; font-weight:600} .tip[hidden]{display:none}

/* year strip */
.years{margin-top:36px}
.data .lotname{font-weight:600} .data .sub{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.data td .origin{vertical-align:1px}
.ptype{display:inline-block; font:600 10.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; padding:4px 6px; border-radius:5px; border:1px solid var(--line-2); color:var(--ink-2); white-space:nowrap}
.ptype.private{border-style:dashed}
.pub-dot,.prv-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:0}
.prv-dot{background:transparent; border:1.6px solid var(--accent)}
.flag{display:inline-block; font:600 10.5px/1 var(--sans); padding:4px 6px; border-radius:5px; background:var(--off-bg); color:var(--off); margin:2px 4px 0 0; white-space:nowrap}
.flag.warn{background:var(--up-bg); color:var(--up)}
.native{display:block; font-size:11.5px; color:var(--ink-3); font-weight:400}

/* country + sub-region grids */
.cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.ccard{display:flex; flex-direction:column; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s}
.ccard:hover{transform:translateY(-2px); box-shadow:0 20px 40px -24px color-mix(in srgb,var(--accent) 70%, transparent)}
.ccard .band{padding:16px 18px 14px; background:var(--accent-chip); color:var(--accent-on); position:relative; overflow:hidden}
.ccard .band::after{content:""; position:absolute; right:-30px; top:-40px; width:120px; height:120px; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--accent-on) 40%, transparent)}
.ccard .band b{display:block; font:400 26px/1.05 var(--serif); letter-spacing:-.01em}
.ccard .band span{font:500 12.5px/1 var(--sans); opacity:.9}
.ccard .body{padding:14px 18px 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
.ccard .body div{display:flex; flex-direction:column} .ccard dt{font:600 10.5px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.ccard dd{margin:3px 0 0; font:400 21px/1.1 var(--serif); font-variant-numeric:lining-nums}
.ccard dd small{font:500 11.5px var(--sans); color:var(--ink-3); margin-left:2px}
.pstrip{grid-column:1 / -1; display:flex; height:8px; border-radius:6px; overflow:hidden; background:var(--wash); gap:2px}
.pstrip i{display:block; height:100%; background:var(--accent)} .pstrip i.t-national_contest{opacity:.7} .pstrip i.t-regional_contest{opacity:.5}
.pstrip i.t-private_auction{background:repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 6px)}
.pstrip-key{grid-column:1 / -1; font-size:11.5px; color:var(--ink-3); margin-top:-4px}
.sgroup{margin-top:28px} .sgroup:first-child{margin-top:0}
.sgroup h3{display:flex; align-items:center; gap:10px; font:400 22px/1.2 var(--serif); margin-bottom:12px}
.sgroup h3 .n{font:500 13px var(--sans); color:var(--ink-3)}
.sgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.scard{display:flex; flex-direction:column; gap:4px; padding:13px 14px; border-radius:14px; text-decoration:none; color:var(--ink);
  background:color-mix(in srgb, var(--accent) calc(var(--t,0.1) * 100%), var(--card)); border:1px solid color-mix(in srgb,var(--accent) 30%, var(--line)); transition:transform .15s}
.scard:hover{transform:translateY(-2px)}
.scard b{font:600 15px/1.25 var(--sans)} .scard span{font-size:12.5px; color:color-mix(in srgb,var(--ink) 78%, transparent)}
.scard.unmapped{background:var(--card); border-style:dashed; color:var(--ink-3)}
@media (prefers-color-scheme: dark){ .scard{background:color-mix(in srgb, var(--accent) calc(var(--t,0.1) * 70%), var(--card))} }

/* detail views */
.dhero{border-radius:22px; padding:clamp(22px,3vw,34px); color:var(--accent-on); background:
  radial-gradient(90% 140% at 100% 0%, color-mix(in srgb,var(--accent-chip) 70%, #fff) 0%, transparent 55%), var(--accent-chip); position:relative; overflow:hidden}
.dhero::after{content:""; position:absolute; right:-60px; bottom:-90px; width:280px; height:280px; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--accent-on) 40%, transparent)}
.dhero .crumbs{font:600 12px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; opacity:.9}
.dhero .crumbs a{color:inherit}
.dhero h2{font:400 clamp(36px,5vw,58px)/1 var(--serif); letter-spacing:-.02em}
.dhero .dstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin:22px 0 0; position:relative; z-index:1}
.dhero .dstats dt{font:600 10.5px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; opacity:.85}
.dhero .dstats dd{margin:4px 0 0; font:400 28px/1.05 var(--serif); font-variant-numeric:lining-nums}
.dhero .dstats dd small{display:block; font:500 12px/1.3 var(--sans); opacity:.85; margin-top:4px}
.dhero .barsetter{display:inline-flex; gap:8px; align-items:center; margin-top:16px; background:color-mix(in srgb,var(--accent-on) 16%, transparent); padding:8px 12px; border-radius:999px; font:600 13px/1.2 var(--sans); position:relative; z-index:1}
.dgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:22px; margin-top:28px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 18px 10px; min-width:0}
.panel-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.panel h3{font:400 22px/1.2 var(--serif)}
.board{list-style:none; margin:0; padding:0; counter-reset:b}
.board li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:0 12px; padding:9px 0; border-top:1px solid var(--line); align-items:baseline}
.board li::before{counter-increment:b; content:counter(b); font:600 12px var(--sans); color:var(--ink-3); font-variant-numeric:tabular-nums}
.board .v{font:400 22px/1 var(--serif); text-align:right; font-variant-numeric:lining-nums; white-space:nowrap}
.board .v small{display:block; font:500 11px var(--sans); color:var(--ink-3); margin-top:2px}
.board li .v{grid-row:span 2}
.board .n{font-weight:600; min-width:0; overflow-wrap:anywhere} .board .m{grid-column:2; font-size:12.5px; color:var(--ink-3)}
.board a{text-decoration:none} .board a:hover{text-decoration:underline}
.programs{display:grid; gap:8px; margin-top:4px}
.prog{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:10px 0; border-top:1px solid var(--line); align-items:center}
.prog:first-child{border-top:0}
.prog b{font-weight:600} .prog span{font-size:12.5px; color:var(--ink-3)} .prog .bar{grid-column:1 / -1; height:6px; border-radius:4px; background:var(--wash)}
.prog .bar i{display:block; height:100%; border-radius:4px; background:var(--accent)} .prog .bar i.private{background:repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 6px)}
.heat{overflow:auto; margin-top:6px}
.heat table{border-collapse:separate; border-spacing:3px; font-size:12px; min-width:100%}
.heat th{font:600 10.5px/1.2 var(--sans); color:var(--ink-3); text-align:left; padding:4px 6px; white-space:nowrap; position:sticky; left:0; background:var(--card)}
.heat thead th{text-align:center; position:static}
.heat td{min-width:44px; height:34px; text-align:center; border-radius:6px; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink);
  background:color-mix(in srgb, var(--accent) calc(var(--t,0) * 100%), var(--wash))}
.heat td.hi{color:var(--accent-on)} .heat td.none{background:transparent; color:var(--ink-3); font-weight:400}
.heat td.np{background:var(--wash); color:var(--ink-3); font-weight:500}
.heat-key{font-size:12px; color:var(--ink-3); margin:8px 2px 4px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips a{display:inline-flex; gap:8px; align-items:center; text-decoration:none; padding:8px 12px; border-radius:999px; font:500 13.5px/1 var(--sans);
  background:color-mix(in srgb,var(--accent) calc(var(--t,.12) * 100%), var(--card)); border:1px solid color-mix(in srgb,var(--accent) 30%, var(--line))}
.chips a b{font-weight:700; font-variant-numeric:tabular-nums}
.chips a.un{background:var(--card); border-style:dashed; color:var(--ink-3)}
.mix{margin:10px 0 4px} .mix .lbl{font:600 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.mix .bar{display:flex; height:14px; border-radius:7px; overflow:hidden; gap:2px}
.mix .bar i{display:block; height:100%; background:var(--accent)}
.mix ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-2)}
.mix li i{display:inline-block; width:9px; height:9px; border-radius:3px; background:var(--accent); margin-right:6px}
.back{display:inline-flex; gap:6px; align-items:center; font:600 13.5px/1 var(--sans); text-decoration:none; color:var(--ink-2); margin-bottom:16px}

/* leaderboard controls */
.controls{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; margin-bottom:16px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
.field{display:flex; flex-direction:column; gap:5px}
.field > span{font:600 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.field select,.field input{font:500 14px/1.2 var(--sans); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:10px; padding:9px 30px 9px 11px; min-width:130px}
.field input{padding-right:11px; min-width:min(320px,80vw)}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%; background-size:5px 5px; background-repeat:no-repeat}
.result-note{font-size:13px; color:var(--ink-3); margin:0 0 10px}
table.board-t td.rk{color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums; width:36px}
table.board-t td.val{font:400 20px/1 var(--serif); font-variant-numeric:lining-nums; text-align:right; white-space:nowrap}
table.board-t td.val.dim{font:500 14px/1.2 var(--sans); color:var(--ink-2)}
@media (max-width:720px){
  table.board-t thead{display:none} table.board-t, table.board-t tbody{display:block}
  table.board-t tr{display:grid; grid-template-columns:30px minmax(0,1fr) auto; grid-template-areas:"r n v" "r o s" "r p p"; gap:4px 10px; padding:12px 14px; border-bottom:1px solid var(--line)}
  table.board-t td{display:block; padding:0; border:0}
  table.board-t td.rk{grid-area:r} table.board-t td.c-lot{grid-area:n} table.board-t td.c-o{grid-area:o; font-size:12.5px}
  table.board-t td.c-p{grid-area:p; font-size:12.5px; color:var(--ink-3)} table.board-t td.c-y{display:none}
  table.board-t td.val{grid-area:v} table.board-t td.val.dim{grid-area:s; text-align:right; font-size:12.5px}
  table.board-t td.c-b{display:none}
}

/* producers */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.pcard{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; flex-direction:column; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 16px 14px 20px; box-shadow:var(--shadow); overflow:hidden; transition:transform .15s, box-shadow .15s}
.pcard::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--accent)}
.pcard:hover{transform:translateY(-2px); box-shadow:0 18px 36px -22px color-mix(in srgb,var(--accent) 70%, transparent)}
.pcard:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}
.pcard .top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.pcard .kind{font:600 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.pcard h3{font:500 19px/1.25 var(--serif); letter-spacing:-.005em; overflow-wrap:anywhere}
.pcard .where{font-size:13px; color:var(--ink-3)}
.pcard .nums{display:flex; gap:16px; margin-top:4px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3)}
.pcard .nums b{display:block; font:400 19px/1.1 var(--serif); color:var(--ink); font-variant-numeric:lining-nums}
.pcard .lm{position:absolute; right:14px; bottom:14px}
.more{display:flex; justify-content:center; margin:22px 0 0}
.btn-ghost{all:unset; cursor:pointer; font:600 14px/1 var(--sans); padding:12px 18px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink)}
.btn-ghost:focus-visible{outline:2px solid var(--ink)}
.match{display:inline-flex; align-items:center; gap:5px; font:600 11px/1 var(--sans); padding:5px 8px; border-radius:999px; white-space:nowrap}
.match.exact{background:var(--ok-bg); color:var(--ok)} .match.exact::before{content:"✓"}
.match.fuzzy{background:transparent; color:var(--up); border:1.5px dashed currentColor} .match.fuzzy::before{content:"?"}
dialog.drawer{position:fixed; inset:0 0 0 auto; margin:0; height:100%; max-height:none; width:min(760px,100vw); max-width:100vw; border:0; padding:0; background:var(--bg); color:var(--ink); box-shadow:-30px 0 60px -30px rgba(0,0,0,.45); overflow:auto}
dialog.drawer::backdrop{background:rgba(11,16,32,.45); backdrop-filter:blur(2px)}
.drawer .dhero{border-radius:0; padding:26px 28px 24px}
.drawer .close{all:unset; cursor:pointer; position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:500 22px/1 var(--sans); background:color-mix(in srgb,var(--accent-on) 18%, transparent); color:var(--accent-on)}
.drawer .close:focus-visible{outline:2px solid var(--accent-on)}
.drawer .inner{padding:22px 28px 40px}
.drawer h3{font:400 24px/1.2 var(--serif); margin:26px 0 10px} .drawer h3:first-child{margin-top:0}
.drawer .note{font-size:13px; color:var(--ink-3); margin:0 0 12px}
.lmatch{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:10px}
.lmatch.fz{border-style:dashed}
.lmatch .t-roaster{margin:0} .lmatch strong{font:500 17px/1.25 var(--serif); grid-column:1}
.lmatch .why{grid-column:1 / -1; font-size:12.5px; color:var(--ink-3)}
.lmatch .right{grid-row:1 / span 2; grid-column:2; text-align:right; display:flex; flex-direction:column; gap:6px; align-items:end}
.lmatch .buy .btn{padding:9px 13px; font-size:13px}
.lmatch .dest{grid-column:1 / -1}
@media (max-width:620px){ .drawer .inner{padding:18px 16px 32px} .drawer .dhero{padding:22px 18px} }
@media print{ .tabs,.controls,.more,dialog.drawer::backdrop{display:none!important} .view[hidden]{display:block!important} }

/* Videos: first nav item on every page */
.nav a.nav-vid::before{content:"▶"; font-size:8.5px; line-height:1; margin-right:-1px}

/* ══ Video library ═════════════════════════════ */
.hero.vids{background:radial-gradient(900px 420px at 92% -10%, color-mix(in srgb,var(--honduras) 16%, transparent), transparent 62%),radial-gradient(760px 380px at 6% 0%, color-mix(in srgb,var(--guatemala) 13%, transparent), transparent 60%),radial-gradient(700px 360px at 62% 115%, color-mix(in srgb,var(--colombia) 12%, transparent), transparent 60%),var(--bg)}
.hero.vids .eyebrow{color:var(--ink-2)} .hero.vids .eyebrow::before{background:var(--spectrum)}
.hero.vids h1{max-width:13ch}
.mosaic{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:clamp(300px,34vw,440px); transform:rotate(-2deg)}
.mosaic a{display:block; position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow); outline:1px solid var(--line)}
.mosaic a:nth-child(2){transform:translateY(18px)} .mosaic a:nth-child(4){transform:translateY(18px)}
.mosaic img{width:100%; height:100%; object-fit:cover}
.mosaic a::after{content:"▶"; position:absolute; left:10px; bottom:10px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; background:color-mix(in srgb,#0b1020 70%, transparent); color:#fff}
@media (max-width:860px){ .mosaic{display:none} }
.vsec{padding:clamp(40px,5vw,64px) 0 0} .vsec > .lede{margin:6px 0 22px}
.vgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:26px 22px}
.vgrid.shelf{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
@media (max-width:620px){ .vgrid.shelf{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(72vw,280px); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-left:18px; padding-bottom:10px; margin-right:calc(-1 * 18px); padding-right:18px} .vgrid.shelf > *{scroll-snap-align:start} }
.vc{display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; min-width:0}
.vth{position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--wash); outline:1px solid var(--line); outline-offset:-1px}
.vth img{width:100%; height:100%; object-fit:cover; transition:transform .25s}
.vc:hover .vth img{transform:scale(1.035)}
.vc:focus-visible{outline:2px solid var(--ink); outline-offset:4px; border-radius:16px}
.vdur,.vbadge{position:absolute; bottom:8px; font:600 11.5px/1 var(--sans); padding:4px 6px; border-radius:6px; background:rgba(11,16,32,.82); color:#fff; font-variant-numeric:tabular-nums}
.vdur{right:8px} .vdur:empty{display:none} .vbadge{left:8px; letter-spacing:.04em; text-transform:uppercase; font-size:10.5px}
.vb{display:flex; flex-direction:column; gap:5px; min-width:0}
.vch{font:600 12px/1.3 var(--sans); color:var(--ink-3)}
.vc strong{font:500 17px/1.3 var(--serif); letter-spacing:-.005em; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.vc:hover strong{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}
.vm{font-size:13px; color:var(--ink-2)} .vm b{font-weight:600; color:var(--ink)}
.vup{color:var(--ink); font-weight:600}
.vtags{display:flex; flex-wrap:wrap; gap:6px; margin-top:3px}
.vsig{display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--sans); padding:5px 9px 5px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vsig::before{content:"↗"; font-size:11px}
/* quick-start shelves */
.starts{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:12px}
.start{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; flex-direction:column; gap:4px; padding:18px 18px 16px; border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; transition:transform .15s}
.start::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--spectrum); opacity:.9}
.start:hover{transform:translateY(-2px)} .start:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.start b{font:500 19px/1.2 var(--serif)} .start span{font-size:13px; color:var(--ink-3)}
/* library controls */
.vlib .controls{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:24px 26px; margin:0 0 22px; border-radius:20px; box-shadow:var(--shadow)}
.vlib .crow{display:flex; flex-wrap:wrap; gap:14px 16px; align-items:end}
.vlib .field input{min-width:0; width:100%; padding:13px 16px; font-size:15px; border-radius:12px}
.vlib .field.q{flex:1 1 280px}
.vlib .field select{padding:12px 34px 12px 13px; border-radius:12px; min-width:150px}
.fgroup{display:flex; flex-direction:column; gap:8px; min-width:0}
.fgroup > span{font:600 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pills button{all:unset; box-sizing:border-box; cursor:pointer; font:500 13.5px/1 var(--sans); padding:9px 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink-2); white-space:nowrap}
.pills button:hover{border-color:var(--ink-3); color:var(--ink)}
.pills button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--card)}
.pills button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.pills button small{font-weight:600; opacity:.6; margin-left:4px; font-variant-numeric:tabular-nums}
.cfoot{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line)}
.cfoot .result-note{margin:0; font-size:14px; color:var(--ink-2)} .cfoot .result-note b{color:var(--ink)}
.linkbtn{all:unset; cursor:pointer; font:600 13.5px/1 var(--sans); color:var(--ink-2); text-decoration:underline; text-underline-offset:.2em}
.linkbtn:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}
.empty{padding:48px 24px; text-align:center; border:1px dashed var(--line-2); border-radius:20px; color:var(--ink-2)}
.vmore{display:flex; justify-content:center; margin:34px 0 0}
@media (max-width:620px){ .vlib .controls{padding:18px 16px; border-radius:16px} .vlib .field select{min-width:0; width:100%} .vlib .crow > .field:not(.q){flex:1 1 140px} .vgrid{gap:22px} }
/* video page */
.vpage{padding:clamp(22px,3vw,36px) 0 0}
.vtop{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start}
@media (max-width:980px){ .vtop{grid-template-columns:1fr; gap:26px} }
.player{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000; box-shadow:var(--shadow)}
.player.tall{aspect-ratio:9/16; max-width:min(100%,400px); max-height:80vh; margin:0 auto}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vhead{margin:24px 0 0}
.vhead h1{font:400 clamp(28px,3.6vw,44px)/1.1 var(--serif); letter-spacing:-.02em; margin:0; overflow-wrap:anywhere}
.vbyline{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:14px 0 0; color:var(--ink-2); font-size:14.5px}
.vbyline a{font-weight:600; color:var(--ink)}
.vacts{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 14px/1 var(--sans); padding:12px 18px; border-radius:999px; text-decoration:none; background:var(--ink); color:var(--card)}
.btn.ghost{background:var(--card); color:var(--ink); border:1px solid var(--line-2)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.vdesc{margin:22px 0 0; padding:18px 20px; border-radius:16px; background:var(--wash); border:1px solid var(--line); color:var(--ink-2); font-size:14.5px; white-space:pre-line; overflow-wrap:anywhere}
.vdesc small{display:block; margin-top:8px; font:600 11px/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:normal}
.vside{display:grid; gap:16px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow)}
.panel h2{font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.vstats{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin:0}
.vstats dt{font:600 10.5px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.vstats dd{margin:4px 0 0; font:400 24px/1.1 var(--serif); font-variant-numeric:lining-nums tabular-nums}
.vstats dd small{font:500 12px/1 var(--sans); color:var(--ink-3)}
.lbls{display:flex; flex-wrap:wrap; gap:8px}
.lbls a.chip{text-decoration:none; font-size:13px; padding:7px 10px; border-radius:999px}
.lbls a.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.lbls a.origin{text-decoration:none}
.tsigbox{position:relative; overflow:hidden; border-radius:18px; padding:20px 22px 18px 26px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 35%, transparent)}
.tsigbox::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--accent)}
.tsigbox .k{font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.tsigbox b{display:block; font:500 19px/1.25 var(--serif); margin:8px 0 6px}
.tsigbox p{margin:0 0 10px; font-size:14px; color:var(--ink-2)}
.tsigbox a{font:600 13.5px/1.4 var(--sans); color:var(--accent-ink)}
.attrib{font-size:13px; color:var(--ink-3); margin:0}
.attrib a{color:var(--ink-2)}
/* privacy */
.prose{max-width:72ch; padding:clamp(28px,4vw,48px) 0 20px}
.prose h2{margin:36px 0 10px} .prose p,.prose li{color:var(--ink-2)} .prose a{color:var(--ink)}