/* ═══════════════════════════════════════════════════════════════════════
   Positioning — the playground.

   Wabi's own two colours exactly (#f0f0f0 on #191919) plus ONE accent, which
   is only ever allowed to mean "this is the live thing": the mode you are in,
   the positioning you have picked, the one that just won a comparison. A page
   whose whole job is judging between ten arguments cannot itself be arguing
   with colour.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:PosSans;src:url('../fonts/Selecta-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:PosSans;src:url('../fonts/Selecta-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:PosDisp;src:url('../fonts/EdictDisplay-Light.otf') format('opentype');font-weight:300;font-display:swap}

:root{
  --paper:#f0f0f0; --ink:#191919; --acc:#e0492a;
  --gut:20px;
  --wide:min(1180px, 100% - var(--gut)*2);
  --read:min(720px, 100% - var(--gut)*2);
  --hair:rgba(25,25,25,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 PosSans,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
b{font-weight:500}
em{font-style:normal;font-weight:500}
code{font:400 12.5px/1.4 ui-monospace,monospace;background:rgba(25,25,25,.06);padding:1px 5px;border-radius:3px}

.top{
  width:var(--wide);margin:0 auto;padding:22px 0 0;
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
}
.top i{font-style:normal;color:rgba(25,25,25,.45);margin-left:auto;letter-spacing:.08em}
.mark{
  width:15px;height:15px;border-radius:50%;background:var(--ink);
  box-shadow:9px 0 0 -3px var(--ink), 18px 0 0 -6px var(--ink);
}

/* ── the mode switcher ─────────────────────────────────────────────────── */
.modes{
  width:var(--wide);margin:clamp(22px,4vw,38px) auto 0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.mode{
  min-height:44px;display:inline-flex;align-items:center;gap:9px;
  padding:0 16px;border-radius:999px;font-size:13.5px;
  background:rgba(25,25,25,.055);transition:background .18s,color .18s;
}
.mode span{font-size:11.5px;color:rgba(25,25,25,.45)}
.mode:hover{background:rgba(25,25,25,.11)}
.mode.on{background:var(--ink);color:var(--paper)}
.mode.on span{color:rgba(240,240,240,.55)}

main{width:var(--wide);margin:0 auto;padding:clamp(26px,4vw,44px) 0 clamp(50px,8vw,96px)}
.sig{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(25,25,25,.4);margin-bottom:12px;
}
.intro{max-width:var(--read);font-size:15.5px;color:rgba(25,25,25,.68);margin-bottom:clamp(24px,4vw,40px)}
.intro b{color:var(--ink)}

/* ── the bank ──────────────────────────────────────────────────────────── */
.axis{margin-bottom:clamp(40px,6vw,72px)}
.axis-head{border-top:1px solid var(--hair);padding-top:16px;margin-bottom:20px}
.axis-head h2{
  font:300 clamp(22px,3vw,30px)/1.22 PosDisp,Georgia,serif;max-width:20em;
}
/* ⚠ THE QUESTION IS SANS, not the display face it is nested inside. It sits in
   the <h2> so it reads as part of the same statement, and it inherited Edict —
   which at 11.5px small-caps is a different typeface pretending to be a label. */
.axis-head .q{
  display:block;font:400 11.5px/1.4 PosSans,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);margin-bottom:9px;
}
.axis-head p{margin-top:10px;max-width:44em;font-size:14px;color:rgba(25,25,25,.55)}

/* ⚠ FIVE ACROSS, because a set of five is the unit. At auto-fill the last card
   wrapped alone onto a second row, which reads as four positionings and an
   afterthought rather than as a set somebody wrote as five. */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
@media (min-width:1120px){.cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
.card{
  background:#fff;border-radius:7px;padding:17px 18px 16px;
  display:flex;flex-direction:column;gap:11px;
  box-shadow:0 1px 2px rgba(25,25,25,.05),0 12px 26px -22px rgba(25,25,25,.7);
}
.card-top{display:flex;align-items:baseline;gap:8px}
.card-top b{font-size:13.5px}
.card-top .n{font-size:11px;color:rgba(25,25,25,.35);font-variant-numeric:tabular-nums}
.card-top .ctrl{
  margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);border:1px solid rgba(224,73,42,.4);border-radius:999px;padding:2px 7px;
}
.card h3{
  font:300 clamp(18px,1.7vw,21px)/1.16 PosDisp,Georgia,serif;white-space:pre-line;
}
.stake{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(25,25,25,.42);
}
.stake b{color:var(--ink)}
.card .against{font-size:13.5px;line-height:1.5;color:rgba(25,25,25,.62)}
.card .note{
  font-size:12.5px;line-height:1.5;color:rgba(25,25,25,.44);
  border-top:1px solid rgba(25,25,25,.09);padding-top:10px;
}
.card .go{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.go a{
  min-height:36px;display:inline-flex;align-items:center;
  font-size:12.5px;text-decoration:none;padding:0 11px;border-radius:999px;
  background:rgba(25,25,25,.06);transition:background .16s;
}
.go a:hover{background:rgba(25,25,25,.13)}
.go a.film{background:rgba(224,73,42,.1);color:var(--acc)}
.go a.film:hover{background:rgba(224,73,42,.18)}

/* ── compare ───────────────────────────────────────────────────────────── */
.pickbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pick{
  min-height:44px;display:inline-flex;align-items:center;gap:7px;
  padding:0 13px;border-radius:999px;font-size:13px;
  background:rgba(25,25,25,.055);transition:background .16s,color .16s;
}
.pick i{font-style:normal;font-size:10.5px;color:rgba(25,25,25,.4);letter-spacing:.06em;text-transform:uppercase}
.pick:hover{background:rgba(25,25,25,.11)}
.pick.on{background:var(--ink);color:var(--paper)}
.pick.on i{color:rgba(240,240,240,.5)}
.pick[disabled]{opacity:.36;cursor:not-allowed}

.grid{
  display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:6px;
  overflow:hidden;
}
.grid > *{background:var(--paper);padding:16px 16px 18px}
.grid .rowlab{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(25,25,25,.38);background:rgba(25,25,25,.035);
  display:flex;align-items:center;
}
.grid .hero{font:300 clamp(20px,2.1vw,26px)/1.16 PosDisp,Georgia,serif;white-space:pre-line}
.grid .lead{font-size:14px;line-height:1.55;color:rgba(25,25,25,.66)}
.grid .caps{font-size:13.5px;line-height:1.5}
/* ⚠ THE BLOCK CAPTIONS WRAP NORMALLY HERE. Their hard breaks are the other
   page's column doing its job; in a comparison cell the same break lands
   mid-phrase and the reader is fighting a layout that is not on screen. The
   HERO keeps its break, because there the break IS the writing. */
.grid .caps li{padding:5px 0;border-bottom:1px solid rgba(25,25,25,.07)}
.grid .caps li b{white-space:normal}
.grid .caps li:last-child{border-bottom:0}
.grid .caps li b{display:block}
.grid .caps li span{color:rgba(25,25,25,.5);font-size:12.5px}
.grid .end{font:300 clamp(17px,1.8vw,21px)/1.2 PosDisp,Georgia,serif;white-space:pre-line}
.grid .who{display:flex;align-items:baseline;gap:8px}
.grid .who b{font-size:13.5px}
.grid .who span{font-size:11px;color:rgba(25,25,25,.38);letter-spacing:.06em;text-transform:uppercase}
.empty{
  border:1px dashed var(--hair);border-radius:6px;padding:34px 20px;text-align:center;
  color:rgba(25,25,25,.42);font-size:14.5px;
}

/* ── tournament ────────────────────────────────────────────────────────── */
.crit{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.critq{
  font:300 clamp(21px,2.8vw,30px)/1.22 PosDisp,Georgia,serif;
  margin:clamp(16px,3vw,26px) 0 clamp(14px,2.4vw,22px);max-width:22em;
}
.duel{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.duel{grid-template-columns:1fr 1fr}}
.side{
  background:#fff;border-radius:7px;padding:22px 20px 20px;text-align:left;
  display:flex;flex-direction:column;gap:12px;min-height:230px;
  box-shadow:0 1px 2px rgba(25,25,25,.05),0 12px 26px -22px rgba(25,25,25,.7);
  transition:box-shadow .18s,transform .18s;
}
.side:hover{box-shadow:0 0 0 2px var(--acc) inset,0 14px 30px -22px rgba(25,25,25,.8)}
.side h3{font:300 clamp(21px,2.4vw,27px)/1.15 PosDisp,Georgia,serif;white-space:pre-line}
.side .lead{font-size:13.5px;line-height:1.5;color:rgba(25,25,25,.6)}
.side{min-height:200px}
.side-foot{margin-top:auto;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:rgba(25,25,25,.38)}
.duel-skip{margin-top:14px;display:flex;gap:10px;align-items:center;font-size:13px;color:rgba(25,25,25,.5)}
.duel-skip button{text-decoration:underline;text-underline-offset:3px}

.table{margin-top:clamp(30px,5vw,50px);border-top:1px solid var(--hair)}
.table h4{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(25,25,25,.4);
  display:flex;gap:10px;align-items:baseline;padding:16px 0 10px;
}
.table h4 span{text-transform:none;letter-spacing:0;font-size:12.5px;color:rgba(25,25,25,.32)}
.row{
  display:grid;grid-template-columns:1.6em 1fr auto;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(25,25,25,.08);
}
.row .rk{font-size:12px;color:rgba(25,25,25,.34);font-variant-numeric:tabular-nums}
.row .nm{font-size:14px;min-width:0}
.row .nm i{font-style:normal;color:rgba(25,25,25,.4);font-size:12px;margin-left:7px}
.row .bar{
  grid-column:2/-1;height:3px;border-radius:2px;background:rgba(25,25,25,.09);overflow:hidden;
}
.row .bar i{display:block;height:100%;background:var(--acc);border-radius:2px}
.row .sc{font-size:12.5px;color:rgba(25,25,25,.5);font-variant-numeric:tabular-nums;white-space:nowrap}
.reset{margin-top:16px;font-size:12.5px;color:rgba(25,25,25,.45);text-decoration:underline;text-underline-offset:3px}

.foot{
  width:var(--wide);margin:0 auto;padding:clamp(40px,7vw,80px) 0 clamp(46px,8vw,90px);
  border-top:1px solid var(--hair);
}
.foot p{max-width:44em;font-size:14.5px;color:rgba(25,25,25,.65)}
.colophon{margin-top:16px;font-size:12.5px;line-height:1.55;color:rgba(25,25,25,.42)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}