/* ============================================================================
   TASTE — one system, rigorously applied.

   FONT     IBM Plex Sans only. Tabular figures globally (digits align without
            needing a mono face).
   TYPE     4 sizes — 13 meta / 16 body / 20 head / 30 title. Nothing between.
            One step on mobile: title → 24. Nothing reads below 13.
   SPACE    one 8-based scale — 4 8 12 16 24 32 48 64.
   TRACK    -.02em headings · 0 body · .1em uppercase eyebrows. Three values.
   RULES    one hairline (--line) for structure; --ink only anchors the header.
            One active treatment everywhere: a 2px ink underline.
   COLOUR   achromatic ground + ink. The four model colours are the only hues;
            everything else (agreement, benchmarks, hallucination) is value.
   ========================================================================== */
:root{
  --font:'IBM Plex Sans',system-ui,-apple-system,sans-serif;

  /* type scale — four sizes, by role */
  --fs-title:30px;   /* page H1 / H2 */
  --fs-head:20px;    /* the row verdict — one mid-tier lede */
  --fs-body:16px;    /* everything read or scanned */
  --fs-meta:13px;    /* uppercase eyebrows, labels, captions, meta */

  /* achromatic ground + ink */
  --bg:#ffffff;
  --inset:#f1f1f1;       /* wells: bar tracks, image letterboxing */
  --line:#e4e4e4;        /* the one hairline */
  --line-2:#c8c8c8;      /* neutral fill (bar remainders, scale track) */
  --ink:#171717;         /* near-black */
  --ink-dim:#555555;     /* secondary text */
  --ink-faint:#979797;   /* labels, tertiary */

  /* the four models — the only colour in the system */
  --m1:#2f6090;  --m2:#3a8377;  --m3:#9a7d2e;  --m4:#9c4d6b;

  --maxw:1160px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body); line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:#e6e6e6;color:var(--ink)}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-.02em;margin:0}

/* uppercase eyebrow — the one label treatment (short labels only, never running text) */
.back-link,.logo,.shot-rank,.cohort-tab,.p-intent span,.p-spec span{
  text-transform:uppercase;letter-spacing:.1em}

/* ── top bar ──────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:0 32px;height:64px;background:var(--bg);border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:baseline;gap:12px;line-height:1}
.logo{font-weight:600;font-size:var(--fs-body)}
.brand-sub{font-size:var(--fs-body);color:var(--ink-dim)}
.back-link{font-size:var(--fs-meta);color:var(--ink-faint);text-decoration:none;transition:color .12s}
.back-link:hover{color:var(--ink);text-decoration:underline}

main{max-width:1320px;margin:0 auto;padding:64px 32px 64px}
.foot{max-width:var(--maxw);margin:0 auto;padding:32px 32px 48px;color:var(--ink-faint);
  font-size:var(--fs-meta);line-height:1.6;border-top:1px solid var(--line)}
.foot strong{color:var(--ink-dim);font-weight:600}
.foot-prov{display:block;margin-top:8px}

/* ============================================================================
   EXPLORE — one brief per row, divided by the single hairline.
   ========================================================================== */
.explore-head{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
  flex-wrap:wrap;margin-bottom:32px}
.explore-head-txt{max-width:640px}
.explore-head h1{font-size:var(--fs-title);line-height:1.1}
.explore-head p{margin:12px 0 0;color:var(--ink-dim);font-size:var(--fs-body);line-height:1.6}
.explore-head p.prov{color:var(--ink-faint);font-size:var(--fs-meta);line-height:1.6}
.explore-stats{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline}
.explore-stats span{display:flex;gap:4px;align-items:baseline;font-size:var(--fs-meta);color:var(--ink-faint)}
.explore-stats b{color:var(--ink);font-weight:600}
.explore-stats i{font-style:normal}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-bottom:32px;flex-wrap:wrap}
.toolbar-left{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.count{color:var(--ink-faint);font-size:var(--fs-meta)}
.count b{color:var(--ink);font-weight:600}
.toolbar-right{display:flex;gap:8px;align-items:center}
select,.sel{padding:8px 12px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);font-family:var(--font);font-size:var(--fs-body);cursor:pointer}
select:hover{border-color:var(--ink)}
.sortsel{min-width:168px}
/* one brief per row, divided by the single hairline — centered in the 48px rhythm
   so each prompt + its four designs read as one unmistakable block */
.rows{display:flex;flex-direction:column}
.crow{position:relative;border-top:1px solid var(--line);margin-top:24px;padding-top:24px;
  outline:2px solid transparent;outline-offset:6px;transition:outline-color 1.2s}
.crow:first-child{border-top:0;margin-top:0;padding-top:0}
.crow.flash{outline-color:var(--m1);transition:outline-color .1s}
.placeholder-intent{color:var(--ink);font-size:var(--fs-meta);margin:0}

/* quiet permalink affordance, tucked by the cohort toggle — faint until hovered */
.permalink{position:absolute;top:24px;right:0;font-size:var(--fs-meta);color:var(--ink-faint);
  opacity:.35;text-decoration:none;transition:opacity .12s}
.crow:hover .permalink,.permalink:hover{opacity:1}

/* cohort toggle + axis links — plain text, active = the one ink underline */
.cohort-toggle{display:flex;gap:24px;margin-bottom:16px}
.cohort-tab{font-size:var(--fs-meta);background:none;border:0;padding:0 0 4px;
  color:var(--ink-faint);cursor:pointer;transition:color .12s}
.cohort-tab:hover{color:var(--ink)}
.cohort-tab.on{color:var(--ink);box-shadow:inset 0 -2px var(--ink)}

.crow-top{display:flex;gap:48px;align-items:flex-start;margin-bottom:24px}
/* prompt fills the row; h2h (fixed width) is pushed to the right edge.
   the spec runs long, so it reads at the smaller meta size, wide and parseable. */
.prompt{flex:1;min-width:0}
.prompt-label{font-size:var(--fs-meta);color:var(--ink-dim);font-weight:500;margin-bottom:10px}
.prompt p{margin:0;font-size:var(--fs-meta);line-height:1.55}
.prompt .p-intent{color:var(--ink)}
.prompt .p-spec{color:var(--ink-dim);margin-top:4px}
.prompt .p-intent span,.prompt .p-spec span{display:block;color:var(--ink-faint);font-size:var(--fs-meta);font-weight:500;margin-bottom:4px}
.prompt .p-spec span{margin-top:12px}

/* pairwise wins — who beat whom */
.h2h{flex:none;width:300px;display:flex;flex-direction:column;gap:8px}
.h2h-lab{font-size:var(--fs-meta);color:var(--ink-faint);margin-bottom:4px}
.h2h-row{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  align-items:center;gap:8px;font-size:var(--fs-meta)}
.h2h-a{text-align:right}
.h2h-a,.h2h-b{color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2h-a.w,.h2h-b.w{font-weight:600}
.h2h-bar{height:6px;background:var(--inset);overflow:hidden;display:flex}
.h2h-bar i{display:block;height:100%}

/* verdict — the headline of the row */
.verdict{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.verdict-main{font-weight:600;font-size:var(--fs-head);line-height:1.2;color:var(--ink);margin:0}
.verdict-agree{font-size:var(--fs-meta);color:var(--ink-faint)}

/* who won each criterion — text-first, so the mix of leaders reads at a glance.
   active = the one ink underline; the winning model name carries the only colour. */
.axwins{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:16px;font-size:var(--fs-meta)}
.axwins-lab{color:var(--ink-faint)}
.axwin{display:inline-flex;align-items:baseline;gap:6px;background:none;border:0;padding:0 0 3px;
  font-family:var(--font);font-size:var(--fs-meta);cursor:pointer}
.axwin:hover .axwin-ax{color:var(--ink)}
.axwin.on{box-shadow:inset 0 -2px var(--ink)}
.axwin.on .axwin-ax{color:var(--ink)}
.axwin-ax{color:var(--ink-faint);transition:color .12s}
.axwin-win{font-weight:600}

/* the four designs — no frames on the artwork; the winner is marked in the caption below */
.crow-imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.shot{display:flex;flex-direction:column}
.shot-imgwrap{aspect-ratio:1;background:var(--inset);cursor:zoom-in;overflow:hidden}
.shot-imgwrap img{width:100%;height:100%;object-fit:contain;display:block}
.shot-info{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.shot-rank{font-size:var(--fs-body);font-weight:600;color:var(--ink-faint);min-width:26px}
.shot-model{font-size:var(--fs-body);color:var(--ink-dim);display:flex;align-items:center;gap:8px;line-height:1.3}
/* 1st place — marked by caption weight and the winning model's colour, via --win (set inline in app.js). */
.shot.won .shot-model{font-weight:600;color:var(--win)}
.mdot{width:8px;height:8px;flex:none}
.shot-ranks{font-size:var(--fs-meta);color:var(--ink-faint);margin-top:8px}
.shot-hall{font-size:var(--fs-meta);color:var(--ink-dim);margin-top:8px}
.shot-hall.major{color:var(--ink);font-weight:600}

/* ── responsive ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .crow-top{flex-direction:column;gap:24px}
  .h2h{width:100%;max-width:420px}
}
@media(max-width:600px){
  .crow-imgs{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:860px){
  .topbar{height:auto;padding:16px 24px;gap:16px}
  main{padding:48px 24px 64px}
  .explore-head h1{font-size:24px}
}