/* Klimakurven — shared visual identity across the exported static site.
   Same tokens as the internal pipeline dashboard, kept consistent pending
   the brand pass with Fable 5.1 (docs/01, HANDOVER.md). */

:root {
  --paper: #f1f4ee; --paper-raised: #ffffff;
  --ink: #16211c; --ink-soft: #526056; --ink-faint: #8a9690;
  --line: #d7ddd2; --line-strong: #b9c2b3;
  --brand: #1f6b4a; --brand-strong: #144d35; --brand-soft: #e2eee6;
  --gA: #2e7d4f; --gB: #7a9a3d; --gC: #c99a2e; --gD: #c2712e; --gE: #b5432e;
  --gA-soft: #e3f0e7; --gB-soft: #edf1de; --gC-soft: #f8eed7; --gD-soft: #f7e5d6; --gE-soft: #f6ddd6;
  --shadow: 0 1px 2px rgba(20,30,25,.06), 0 6px 20px rgba(20,30,25,.05);

  /* Lifecycle stage colours. One source of truth: the strip tiles, the journey bar
     segments and the legend all read from these, so a stage is the same colour
     everywhere on the site. Five distinct hues, not five shades of one colour - a
     stacked bar of near-identical greens is unreadable, and the four-greens-plus-one-
     orange scheme this replaced looked like an inconsistency rather than a choice. Kept
     entirely outside the gA-gE grade ramp's green-to-red range so a stage colour can
     never be misread as a grade signal. */
  --st-growing: #1f6b4a; --st-processing: #5c7a8c; --st-packaging: #b3894f;
  --st-transport: #4d6f94; --st-retail: #8c5f82;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10140f; --paper-raised: #171d16;
    --ink: #e7ece5; --ink-soft: #a9b3a4; --ink-faint: #6d766a;
    --line: #2a322a; --line-strong: #3a453a;
    --brand: #52b784; --brand-strong: #7ad3a4; --brand-soft: #1a2b21;
    --gA: #52b784; --gB: #a3c15a; --gC: #e0b64f; --gD: #e08a4f; --gE: #dd6a52;
    --gA-soft: #17281f; --gB-soft: #22271a; --gC-soft: #2c261a; --gD-soft: #2c221a; --gE-soft: #2c1e1a;
    --st-growing: #52b784; --st-processing: #8fa9ba; --st-packaging: #d1a56c;
    --st-transport: #7fa0c9; --st-retail: #bf8bb3;
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.55;
}
a { color: var(--brand-strong); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.site-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px; border-bottom: 1px solid var(--line); max-width: 1040px; margin: 0 auto;
}
.wordmark { font-family: 'Fraunces', serif; font-weight: 600; font-size: 21px; color: var(--brand-strong); text-decoration: none; }
.wordmark .dot { color: var(--brand); }
.site-head nav a { margin-left: 22px; text-decoration: none; color: var(--ink-soft); font-size: 14.5px; }
.site-head nav a:hover { color: var(--brand-strong); }
.site-head nav a.lang-switch { border: 1px solid var(--line-strong); border-radius: 4px; padding: 3px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.site-head nav a.lang-switch:hover { border-color: var(--brand); }

main { max-width: 1040px; margin: 0 auto; padding: 0 28px 60px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin: 20px 0 8px; }
.hero-copy h1 { margin-top: 10px; }
.hero-art {
  border-radius: 14px; overflow: hidden; background: var(--paper-raised);
  box-shadow: 0 2px 4px rgba(20,30,25,.05), 0 18px 46px rgba(20,30,25,.09);
  position: relative;
}
.hero-art img { display: block; width: 100%; height: auto; }
.hero-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 6px; text-decoration: none; font-size: 14.5px; font-weight: 500; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-strong); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 420px; margin: 0 auto; }
}

/* ---------- mission ---------- */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 8px; }
.mission-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; padding: 22px; box-shadow: var(--shadow); }
.mission-icon { font-size: 26px; margin-bottom: 6px; }
.mission-card h3 { margin: 0 0 8px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; }
.mission-card p { margin: 0; font-size: 13.5px; }
@media (max-width: 700px) { .mission-grid { grid-template-columns: 1fr; } }

/* ---------- journey comparison ---------- */
.journey-list { display: flex; flex-direction: column; gap: 22px; margin: 20px 0 12px; }
.journey-pair { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; box-shadow: var(--shadow); }
.journey-pair h3 { margin: 0 0 6px; font-size: 16.5px; }
.journey-pair p { margin: 0 0 16px; font-size: 13.5px; }
.journey-row { display: grid; grid-template-columns: 200px 1fr auto auto; align-items: center; gap: 14px; padding: 7px 0; }
.journey-label { font-size: 13px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.journey-label-text { display: flex; flex-direction: column; min-width: 0; }
.journey-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; box-shadow: var(--shadow); }
.journey-origin { font-size: 11px; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; }
.journey-bar { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: var(--line); min-width: 24px; }
.journey-seg { height: 100%; position: relative; }
.journey-stage-icon {
  /* Repeats the legend's icon directly on the bar segment it belongs to, so reading a row
     never means looking away to decode a colour. Only rendered (see index.html) where the
     segment is wide enough on screen not to overflow. */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; color: #fff; opacity: .92;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
/* Stage colours are shared with the lifecycle strip and the legend - see :root. */
.s-growing    { background: var(--st-growing); }
.s-processing { background: var(--st-processing); }
.s-packaging  { background: var(--st-packaging); }
.s-transport  { background: var(--st-transport); }
.s-retail     { background: var(--st-retail); }
.journey-total { font-size: 13.5px; font-weight: 600; white-space: nowrap; text-align: right; }
.journey-total .unit { font-weight: 400; color: var(--ink-faint); font-size: 11px; }
.journey-legend-top { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0 24px; padding: 14px 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; }
.legend-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }
.legend-caption { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-right: 2px; }
.legend-group .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend-group .grade-pill { width: 18px; height: 18px; font-size: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 4px; }
.grade-range { font-size: 10.5px; color: var(--ink-faint); }
.grade-band-list { list-style: none; padding: 0; margin: 10px 0 16px; display: flex; flex-wrap: wrap; gap: 14px; }
.grade-band-list li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-family: 'IBM Plex Mono', monospace; color: var(--ink-soft); }
.grade-band-list .grade-pill { width: 22px; height: 22px; font-size: 11px; }

/* ---------- personalized ranking panel (rank.js) ---------- */
/* A <details> element now, closed by default - see index.html for why (587px of a phone
   screen before the store list even started). `summary` gets the disclosure triangle
   removed and a plus/minus glyph drawn instead, matching the site's own visual language
   rather than the browser default marker. */
.rank-panel {
  margin: 18px 0 22px; padding: 14px 20px 16px; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.rank-panel[open] { padding-bottom: 18px; }
.rank-panel summary.rank-h {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: var(--ink);
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.rank-panel summary.rank-h::-webkit-details-marker { display: none; }
.rank-panel summary.rank-h::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand-strong); font-size: 14px; font-weight: 700; flex: none;
}
.rank-panel[open] summary.rank-h::before { content: "–"; }
.rank-presets { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.rank-presets .chip {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 12.5px; padding: 5px 12px;
  border-radius: 14px; border: 1px solid var(--line-strong); background: var(--paper);
  color: var(--ink-soft); cursor: pointer; transition: border-color .15s, color .15s;
}
.rank-presets .chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.rank-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 22px; margin-top: 14px; }
.rank-slider { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.rank-slider-label { display: flex; justify-content: space-between; }
.rank-slider input[type="range"] { width: 100%; accent-color: var(--brand); }
.rank-slider output { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); align-self: flex-end; margin-top: -4px; }
.rank-note { font-size: 12px; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.5; }
.store-row.is-personalized .store-figure:first-of-type { position: relative; }
.store-row.is-personalized .store-figure:first-of-type::before {
  content: ""; position: absolute; inset: -6px -8px; border: 1.5px dashed var(--brand);
  border-radius: 8px; opacity: .5; pointer-events: none;
}

/* ---------- per-product feedback box (_feedback.html) ---------- */
.feedback-box {
  margin-top: 34px; padding: 18px 20px; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 8px;
}
.feedback-box h2 { margin-top: 0; font-size: 16.5px; }
.feedback-box p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; }
.legend-ic { width: 15px; height: 15px; color: var(--ink-soft); flex: none; }
.journey-foot { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; font-style: italic; }
@media (max-width: 640px) {
  .journey-row { grid-template-columns: 1fr auto; gap: 6px; }
  .journey-row .journey-bar { grid-column: 1 / -1; }
  .journey-total { text-align: left; }
  .journey-legend-top { flex-direction: column; gap: 12px; }
}

.site-foot {
  max-width: 1040px; margin: 40px auto 0; padding: 20px 28px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-faint); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 40px; letter-spacing: -.01em; margin: 36px 0 12px; color: var(--brand-strong); text-wrap: balance; }
h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; margin: 40px 0 14px; }
h3 { font-size: 16px; margin: 24px 0 8px; }
p { max-width: 66ch; color: var(--ink-soft); }
p.lede { font-size: 17px; color: var(--ink); max-width: 62ch; }

.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 4px 10px; border-radius: 3px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.pill.warn { background: var(--gC-soft); border-color: transparent; color: var(--gD); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; margin: 20px 0 32px; }
.stat { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; padding: 16px; box-shadow: var(--shadow); }
.stat .num { font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600; color: var(--brand-strong); }
.stat .lbl { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- lifecycle strip: "no product arrives for free" ---------- */
.strip-section { margin-top: 34px; }
.stage-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0 14px;
}
.stage-card {
  margin: 0; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  /* Each card carries its stage's colour, so the accent, the icon and the fill below
     are set once here rather than repeated per stage. */
  --st: var(--line-strong);
}
.stage-card.s-growing    { --st: var(--st-growing); }
.stage-card.s-processing { --st: var(--st-processing); }
.stage-card.s-packaging  { --st: var(--st-packaging); }
.stage-card.s-transport  { --st: var(--st-transport); }
.stage-card.s-retail     { --st: var(--st-retail); }
.stage-card .stage-photo { position: relative; aspect-ratio: 1; background: var(--line); }
.stage-card .stage-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The colour-multiply overlay that used to live here existed to drag five drifting
   photographs into one palette. The illustrated tiles are already drawn in the site's
   colours, so the overlay would only mute them. */
.stage-step {
  position: absolute; left: 8px; top: 8px; z-index: 1; width: 22px; height: 22px;
  border-radius: 50%; background: var(--st); color: #fff; font-size: 11.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.stage-card figcaption { padding: 12px 13px 14px; border-top: 3px solid var(--st); flex: 1; }
.stage-head { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.stage-ic { width: 18px; height: 18px; flex: none; color: var(--st); }
.stage-share { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
.share-num { font-size: 21px; font-weight: 600; color: var(--st); }
.share-of { font-size: 10.5px; color: var(--ink-faint); line-height: 1.2; }
.stage-track { height: 5px; border-radius: 3px; background: var(--line); margin: 7px 0 9px; overflow: hidden; }
.stage-fill { height: 100%; background: var(--st); border-radius: 3px; }
.stage-what { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.strip-foot { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }
@media (max-width: 900px) {
  /* A five-across strip below this width makes each tile too narrow to read. Scroll it
     horizontally instead of reflowing to a grid - the left-to-right order IS the story. */
  .stage-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -28px; padding-inline: 28px; }
  .stage-card { flex: 0 0 210px; scroll-snap-align: start; }
}

/* ---------- store comparison rows ---------- */
.stores-section { margin-top: 38px; }
.explainer {
  background: var(--brand-soft); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 8px; padding: 14px 18px; margin: 16px 0 20px;
}
.explainer-h { font-size: 11px; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-strong); margin-bottom: 5px; }
.explainer p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

.store-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 32px; }
.store-row {
  display: grid; grid-template-columns: 56px minmax(170px, 1.5fr) 118px minmax(190px, 1.5fr) 18px;
  gap: 18px; align-items: center;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.store-row:hover { border-color: var(--brand); transform: translateY(-1px); }
.store-mark, .store-logo {
  width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; flex: none; object-fit: contain;
}
.store-logo {
  /* Real logos are wordmarks, not icons - wide and short, not square. object-fit:contain
     on a 56x56 box already prevents distortion; the padding just keeps a wide mark from
     touching the box edge the way a square glyph would want to. */
  padding: 9px 6px;
}
.store-mark {
  /* Our own typographic tile in the chain's colour - never a reproduction of their mark. */
  background: var(--mark-bg); color: var(--mark-fg);
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 13px; letter-spacing: -.01em;
  text-align: center; padding: 4px; line-height: 1.1; overflow: hidden;
}
.store-logo { background: #fff; border: 1px solid var(--line); padding: 5px; }
.store-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.store-name { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.store-group { font-size: 11.5px; color: var(--ink-faint); line-height: 1.35; }
.store-ident .badge-row { margin: 5px 0 0; }

.store-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.figure-label {
  font-size: 10px; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint);
}
.figure-value { font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.figure-value i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--ink-faint); }
.figure-value.none { color: var(--ink-faint); }
.figure-value.under { color: var(--ink-soft); }
.figure-of { font-style: normal; font-size: 10.5px; color: var(--ink-faint); display: block; margin-top: -1px; }
.figure-note { font-size: 10.5px; color: var(--ink-faint); line-height: 1.35; }
.coverage-track { position: relative; height: 7px; border-radius: 4px; background: var(--line); margin: 6px 0 5px; }
.coverage-fill { height: 100%; border-radius: 4px; background: var(--brand); }
.coverage-fill.under { background: var(--line-strong); }
.coverage-mark {
  /* The 60% publication threshold, drawn on the bar. Without it a coverage percentage is
     a number with no scale; with it, a reader sees instantly how far off we still are. */
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-soft);
  border-radius: 1px; opacity: .55;
}
.store-go { font-size: 17px; color: var(--ink-faint); text-align: right; }
.store-row:hover .store-go { color: var(--brand); }
.badge-chip.warn { background: var(--gD-soft); color: var(--gD); }
.store-cell { display: inline-flex; align-items: center; gap: 9px; }

/* ---------- category comparison table (kategorier.html) ---------- */
.category-table { min-width: 640px; }
.category-table .cat-store-head { padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--line-strong); }
.category-table .cat-store-head .store-cell { color: var(--ink); text-decoration: none; }
.category-table .cat-store-head .store-cell:hover { color: var(--brand-strong); }
.category-table .cat-store-head span:last-child { font-size: 13px; font-weight: 600; white-space: nowrap; }
.category-table .cat-name { font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; padding-right: 18px; }
.category-table .cat-cell { font-size: 15px; font-weight: 600; min-width: 64px; }
.category-table .cat-cell.none { color: var(--ink-faint); font-weight: 400; cursor: help; }

/* ---------- climate facts page (klima-facts.html) ---------- */
.fact-list { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 30px; }
.fact-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 24px 20px; box-shadow: var(--shadow);
}
.fact-card h2 { margin: 8px 0 10px; font-size: 19px; }
.fact-verdict {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  font-weight: 600; letter-spacing: .05em; padding: 3px 10px; border-radius: 10px;
}
.fact-verdict.v-solid    { background: var(--gA-soft); color: var(--gA); }
.fact-verdict.v-mixed    { background: var(--gC-soft); color: var(--gC); }
.fact-verdict.v-our_calc { background: color-mix(in srgb, var(--st-transport) 16%, var(--paper)); color: var(--st-transport); }
.fact-verdict.v-unverified { background: var(--line); color: var(--ink-faint); }
.fact-answer { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.fact-body { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.fact-embed { margin-top: 16px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.fact-embed iframe { width: 100%; height: 500px; border: 0; display: block; }
.fact-sources { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.fact-sources-h {
  font-size: 10px; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint);
}
.fact-sources ul { margin: 6px 0 0; padding-left: 18px; }
.fact-sources li { font-size: 12.5px; margin-bottom: 3px; }
.fact-embed-open {
  display: block; text-align: center; font-size: 12.5px; padding: 9px;
  background: var(--paper); border-top: 1px solid var(--line); color: var(--ink-soft);
}
.fact-embed-open:hover { color: var(--brand-strong); }
@media (max-width: 640px) {
  /* Still cramped at any mobile height - OWID's grapher is a map + timeline scrubber +
     country picker, built for a desktop-sized canvas. More height than desktop actually
     gets (which is backwards, but the alternative is an illegible 380px map) plus the
     "open full chart" link above is the real escape hatch. */
  .fact-embed iframe { height: 560px; }
}
.store-mark-sm {
  width: 28px; height: 28px; border-radius: 6px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; object-fit: contain;
  background: var(--mark-bg, var(--line)); color: var(--mark-fg, var(--ink));
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 9px; line-height: 1;
  overflow: hidden; padding: 2px; text-align: center;
}

@media (max-width: 820px) {
  .store-row { grid-template-columns: 44px 1fr; gap: 12px 14px; }
  .store-mark, .store-logo { width: 44px; height: 44px; font-size: 11px; }
  .store-figure { grid-column: 2; }
  .store-go { display: none; }
}

.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.badge-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 9px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 500; cursor: help; }

.notice { background: var(--paper-raised); border: 1px solid var(--line-strong); border-left: 3px solid var(--gC); border-radius: 4px; padding: 14px 18px; font-size: 13.5px; color: var(--ink-soft); margin: 20px 0; max-width: 66ch; }
.notice strong { color: var(--ink); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--line); }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--paper-raised); }
td.num, th.num { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); box-shadow: var(--shadow); margin: 16px 0 28px; }
.table-wrap table { min-width: 640px; }
a.row-link { color: inherit; text-decoration: none; display: block; }
a.row-link:hover { color: var(--brand-strong); }

.grade-pill { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12.5px; color: #fff; flex: none; }
.q-badge { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 6px; }

.dims { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 30px; max-width: 560px; }
.dim-row { display: grid; grid-template-columns: 170px 1fr 52px; align-items: center; gap: 12px; }
.dim-label { font-size: 13px; }
.dim-weight { font-size: 11px; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; }
.dim-track { height: 8px; background: var(--brand-soft); border-radius: 4px; overflow: hidden; }
.dim-fill { height: 100%; background: var(--brand); border-radius: 4px; }
.dim-fill.zero { background: var(--gE); }
.dim-val { font-family: 'IBM Plex Mono', monospace; font-size: 13px; text-align: right; font-weight: 500; }

.score-hero { display: flex; align-items: center; gap: 24px; margin: 20px 0 8px; flex-wrap: wrap; }
.score-hero .big { font-family: 'IBM Plex Mono', monospace; font-size: 56px; font-weight: 600; line-height: 1; }
.score-hero .grade-big { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 26px; color: #fff; flex: none; }

.stage-bars { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 30px; max-width: 560px; }
.stage-row { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 10px; font-size: 13px; }
.stage-track { height: 7px; background: var(--brand-soft); border-radius: 4px; overflow: hidden; }
.stage-fill { height: 100%; background: var(--brand); }
.stage-val { text-align: right; font-family: 'IBM Plex Mono', monospace; color: var(--ink-soft); }

.rationale-box { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; font-size: 13.5px; color: var(--ink-soft); max-width: 66ch; margin: 8px 0 28px; }
.rationale-box .who { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 6px; display: block; }

.breadcrumb { font-size: 12.5px; color: var(--ink-faint); margin: 24px 0 0; }
.breadcrumb a { color: var(--ink-faint); }

@media (max-width: 640px) {
  h1 { font-size: 30px; }
  .site-head { padding: 16px 18px; }
  main { padding: 0 18px 40px; }
  .dim-row, .stage-row { grid-template-columns: 100px 1fr 46px; }
}