:root{--paper:#FCFBF8;--paper-hi:#F3F0E7;--paper-line:#E7E1D3;--paper-line-strong:#D8CFB8;--ink:#211C15;--ink-soft:#6B6252;--ink-faint:#948A76;--accent:#1B4F8C;--accent-fill:#3B7DC4;--accent-deep:#123A66;--aod:#8A6A28;--aod-fill:#C6A353;--amber:#B4650C;--amber-fill:#E8952A;--steel:#48627A;--steel-fill:#7E93A6;--ruby:#9E3B3F;--ruby-fill:#C1585C;--forest:#3F6B45;--forest-fill:#6E9B72;--serif:"Fraunces",Georgia,serif;--display:"DM Serif Display",Georgia,serif;--serif-num:"Spectral",Georgia,serif;--serif-brand:"Domine",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;--label:"Archivo",Arial,sans-serif;--maxw:1120px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
main a{color:var(--accent);text-decoration:none}
main a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;text-wrap:balance;letter-spacing:-.01em}
.display{font-family:var(--serif)}
.mono{font-family:var(--label);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-soft)}
.eyebrow{font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.eyebrow a{color:var(--accent)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--paper-hi);padding:8px 12px;z-index:10;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-fill);outline-offset:3px}
/* mast */
.mast{border-bottom:1px solid var(--paper-line);position:sticky;top:0;background:rgba(252,251,248,.92);backdrop-filter:blur(8px);z-index:5}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;max-width:var(--maxw);margin:0 auto}
.brandmark{display:flex;align-items:center;gap:10px;flex:none}.brandmark .logo{width:24px;height:24px;flex:none}.brandmark b{font-family:var(--serif);font-weight:600;font-size:18px;white-space:nowrap}
.searchbox input{background:var(--paper-hi);border:1px solid var(--paper-line-strong);color:var(--ink);font-family:var(--sans);font-size:13px;padding:7px 12px;border-radius:2px;width:150px}
.searchbox input::placeholder{color:var(--ink-faint)}
main.wrap{padding-top:8px;padding-bottom:40px}
.crumbs{font-family:var(--label);font-size:11px;letter-spacing:.05em;color:var(--ink-soft);padding:22px 0 6px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-soft)}.crumbs span[aria-current]{color:var(--ink)}
.page-head{padding:14px 0 26px}
.page-head h1{font-size:clamp(30px,4.4vw,52px);line-height:1;margin:12px 0 0}
.lead{font-size:17px;color:var(--ink-soft);max-width:58ch;margin:16px 0 0}
/* edition-page stat row (the homepage has its own, see the mobile-first layer) */
.statline{display:flex;flex-wrap:wrap;gap:40px;margin-top:34px;padding-top:24px;border-top:1px solid var(--paper-line)}
.stat .n{font-family:var(--serif-num);font-size:clamp(36px,4.4vw,52px);font-weight:600;display:block;line-height:1}
.stat .l{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px;display:block;line-height:1.5}
/* watch photography: shared by the edition page's cards and the no-photo motif */
.hc-photo{background:var(--paper-hi);overflow:hidden;aspect-ratio:1/1;align-self:start}
.hc-linkwrap{display:block;width:100%;height:100%}
.hc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.hc-linkwrap:hover img{transform:scale(1.03)}
.hc-photo .hc-placeholder{width:100%;height:100%;padding:22%;box-sizing:border-box}
.chip.pending{color:var(--steel)}.chip.pending::before{background:var(--steel-fill)}
/* gauge — coloured by the score itself: red below 30, amber 30-50, green 50 and up */
.gauge{width:130px;height:auto}.gauge-lg{width:100%;max-width:320px}
.gtrack{stroke:var(--paper-line-strong);stroke-width:5}.gauge-lg .gtrack{stroke-width:7}
.gval{stroke-width:5;stroke-linecap:round}.gauge-lg .gval{stroke-width:7}
.gtick{stroke:var(--paper-line-strong);stroke-width:1}
.gtick-major{stroke:var(--ink-faint);stroke-width:1.5}
.gneedle{stroke-width:1.9;stroke-linecap:round}.gauge-lg .gneedle{stroke-width:2.4}
.gauge-low .gval{stroke:var(--ruby-fill)}.gauge-low .gneedle{stroke:var(--ruby)}.gauge-low .ghub{fill:var(--ruby)}
.gauge-mid .gval{stroke:var(--amber-fill)}.gauge-mid .gneedle{stroke:var(--amber)}.gauge-mid .ghub{fill:var(--amber)}
.gauge-high .gval{stroke:var(--forest-fill)}.gauge-high .gneedle{stroke:var(--forest)}.gauge-high .ghub{fill:var(--forest)}
.gnum{font-family:var(--serif-num);font-weight:600;fill:var(--ink);font-size:26px}.gauge-lg .gnum{font-size:34px}
/* caveat */
.caveat{display:flex;gap:16px;align-items:flex-start;border-top:1px solid rgba(158,59,63,.3);border-bottom:1px solid rgba(158,59,63,.3);padding:18px 0;margin:6px 0}
.caveat.sm{border-color:var(--paper-line);margin:0 0 20px}
.caveat .jewel{width:11px;height:11px;margin-top:6px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#c96a6d,var(--ruby) 60%,#6d2225)}
.caveat p{margin:0;font-size:15px;color:var(--ink-soft)}.caveat b{font-family:var(--serif);color:var(--ink)}
/* sections */
.block{padding:40px 0;border-top:1px solid var(--paper-line)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px}
.sec-head h2{font-size:clamp(22px,3vw,34px)}
.block h2{font-size:clamp(20px,2.6vw,28px);margin-bottom:18px}
.sec-link{font-family:var(--label);font-size:12px;letter-spacing:.06em;color:var(--accent)}
/* odds cards */
.odds{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-line)}
.card{background:#fff;padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.card-photo{aspect-ratio:1/1;background:var(--paper-hi);overflow:hidden;margin:-24px -22px 0}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card-photo a:hover img{transform:scale(1.03)}
.card-photo .hc-placeholder{width:100%;height:100%;padding:26%;box-sizing:border-box}
.card .cat{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.card .brand{font-family:var(--serif-brand);font-size:24px;font-weight:600;line-height:1.02}
.card .model{font-size:14px;color:var(--ink-soft);margin-top:-6px;white-space:normal}
.brand-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;row-gap:4px}
.brand-badges{display:flex;gap:5px;flex-wrap:wrap}
.badge{font-family:var(--label);font-size:10px;color:var(--ink-soft);border:1px solid var(--paper-line);border-radius:20px;padding:2px 8px}
.badge-win{color:var(--accent);border-color:var(--accent-fill)}
.g-row{display:flex;align-items:center;gap:14px}
.chip{font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%}
.chip.won{color:var(--accent)}.chip.won::before{background:var(--accent-fill)}
.chip.miss{color:var(--ruby)}.chip.miss::before{background:var(--ruby)}
.chip.short{color:var(--ink-soft)}.chip.short::before{background:var(--ink-faint)}
.chip-sub{color:var(--ink-faint);font-size:11px;text-transform:none;letter-spacing:0}
.notes{border-top:1px solid var(--paper-line);padding-top:14px;display:flex;flex-direction:column;gap:11px}
.nlbl{font-family:var(--label);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
/* ranked reasons, most influential first — a small bar sized to that reason's actual
   share of the model's explanation, so the weighting is legible, not just the order */
.note{display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.note-bar{flex:none}
.note-bar .bar{width:34px;height:5px}
.note-txt{flex:1;min-width:0}
.note:nth-of-type(1){font-weight:600}
/* leaderboard mini */
.leaderboard-mini{display:flex;flex-direction:column;border-top:1px solid var(--paper-line)}
.lb-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--paper-line)}
.lb-row:hover{background:var(--paper-hi)}
.lb-name{font-family:var(--serif-brand);font-size:19px;font-weight:600}.lb-n{color:var(--ink-soft);font-size:13px}.lb-aod{color:var(--aod);font-size:13px;min-width:44px;text-align:right}
/* tables */
.table-wrap{overflow-x:auto;border-top:1px solid var(--paper-line-strong);margin-top:20px}
table{border-collapse:collapse;width:100%;min-width:640px}
thead th{font-family:var(--label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;text-align:right;padding:12px 14px;border-bottom:1px solid var(--paper-line)}
.th-sort{color:inherit;text-decoration:none;white-space:nowrap}
.th-sort:hover{color:var(--accent);text-decoration:underline}
.th-sort.active{color:var(--accent);font-weight:600}
thead th.l,tbody td.l{text-align:left}
tbody td{padding:13px 14px;border-bottom:1px solid var(--paper-line)}
tbody tr:hover td{background:var(--paper-hi)}
td.rank{color:var(--ink-faint)}
td.name{font-family:var(--serif-brand);font-size:19px;font-weight:600}
td.num{text-align:right;color:var(--ink)}
td.aod{text-align:right;color:var(--aod)}
td.rate{text-align:right}.rate .pct{color:var(--ink);margin-right:8px}
.bar{width:70px;height:6px;display:inline-block;vertical-align:middle}
.bar-bg{fill:var(--paper-hi)}.bar-fg{fill:var(--accent-fill)}
/* dossier */
.dstats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);margin-top:8px}
.dstat{background:#fff;padding:16px 14px}
.dstat .n{font-family:var(--serif-num);font-size:26px;font-weight:500;display:block;line-height:1}.dstat .n.gold{color:var(--aod)}
.dstat .l{font-family:var(--label);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;display:block}
.tl-cap{display:flex;justify-content:space-between;font-family:var(--label);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.hmap{display:flex;gap:3px;flex-wrap:wrap}
.hm{flex:1 1 0;min-width:8px;aspect-ratio:1/1;border-radius:2px;background:var(--paper-line)}
.hm.t0{background:var(--paper-line)}
.hm.t1{background:var(--accent-fill)}
.hm.t2{background:var(--accent)}
.hm.t3{background:var(--accent-deep)}
.hm.aod{box-shadow:inset 0 0 0 3px var(--aod-fill)}
.hmap-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-family:var(--label);font-size:11px;color:var(--ink-soft)}
.hml{display:inline-flex;align-items:center;gap:6px}
.hml-sw{width:9px;height:9px;border-radius:2px;display:inline-block}
.hml-sw.t0{background:var(--paper-line)}
.hml-sw.t1{background:var(--accent-fill)}
.hml-sw.t2{background:var(--accent)}
.hml-sw.t3{background:var(--accent-deep)}
.hml-sw.aod{box-shadow:inset 0 0 0 2px var(--aod-fill)}
.prizelist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.prizelist li{font-size:15px;padding-bottom:8px;border-bottom:1px solid var(--paper-line)}
.prizelist .py{color:var(--accent);margin-right:8px}.prizelist .pc{color:var(--ink-soft);font-family:var(--label);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--paper-line)}
.mini{background:#fff;padding:10px 16px 10px 10px;display:flex;align-items:center;gap:12px}
.mini:hover{background:var(--paper-hi)}
.mini-photo{width:56px;height:56px;flex:none;background:var(--paper-hi);overflow:hidden;border-radius:2px}
.mini-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mini-photo .hc-placeholder{width:100%;height:100%;padding:20%;box-sizing:border-box}
.mini-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.mini-y{color:var(--ink-faint);font-size:12px}.mini-m{flex:1}
/* palmares — year jump index */
.yearjump{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;padding:16px 0 4px;
  border-top:1px solid var(--paper-line)}
.yearjump-lbl{font-family:var(--label);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);flex:0 0 100%}
.yearjump ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.yearjump a{display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;min-height:44px;padding:0 8px;
  font-family:var(--label);font-variant-numeric:tabular-nums;font-size:13px;
  color:var(--accent);border:1px solid var(--paper-line);border-radius:2px;background:#fff}
.yearjump a:hover{border-color:var(--accent-fill);background:var(--paper-hi);text-decoration:none}
/* The masthead is sticky, so an anchor jump would otherwise land the year heading
   underneath it. Reserve its height plus a little breathing room. */
.palm-year{scroll-margin-top:84px}
.palm-year:focus{outline:none}
.palm-year:focus-visible{outline:2px solid var(--accent-fill);outline-offset:6px}
.palm-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;
  font-family:var(--label);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint)}
.palm-back:hover{color:var(--accent)}
.yearjump{scroll-margin-top:84px}
.yearjump:focus{outline:none}
@media(min-width:600px){.yearjump-lbl{flex:0 0 auto}}
/* palmares */
.palm-year{padding:26px 0;border-top:1px solid var(--paper-line)}.palm-year h2{color:var(--accent);font-family:var(--label);font-size:15px;letter-spacing:.1em;margin-bottom:14px}
.palm-aod{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;margin-bottom:18px;background:var(--paper-hi);border:1px solid var(--paper-line);text-decoration:none}
.palm-aod-photo{aspect-ratio:1/1;background:#fff;overflow:hidden}
.palm-aod-photo img{width:100%;height:100%;object-fit:cover;display:block}
.palm-aod-photo .hc-placeholder{width:100%;height:100%;padding:22%;box-sizing:border-box}
.palm-aod-info{display:flex;flex-direction:column;gap:5px;padding:16px 20px 16px 0}
.palm-aod .pc{color:var(--aod)}
.palm-aod-brand{font-family:var(--serif-brand);font-weight:600;font-size:22px;color:var(--ink)}
.palm-aod-model{font-size:14px;color:var(--ink-soft)}
.palm-aod:hover .palm-aod-brand{text-decoration:underline}
/* watch */
.watch-photo{margin:18px 0 0;background:var(--paper-hi);border:1px solid var(--paper-line);
  aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.watch-photo img{width:100%;height:100%;object-fit:cover;display:block}
.watch-photo .ph-missing{padding:18%}
@media(min-width:760px){
  /* Beyond a phone the square photo is left to sit at a readable size rather than
     stretching to the full column, where a 640px-wide watch dwarfs its own spec table. */
  .watch-photo{max-width:420px}
}
.watch-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:start;padding-top:8px}
.specs{display:grid;grid-template-columns:1fr;gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);margin:8px 0 0}
.spec{background:#fff;display:grid;grid-template-columns:180px 1fr;gap:12px;padding:12px 16px}
.spec dt{font-family:var(--label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.spec dd{margin:0;color:var(--ink);white-space:pre-line}
.desc{margin-top:26px}
.desc p{color:var(--ink-soft);max-width:66ch;margin:0 0 14px}
.desc p:last-of-type{margin-bottom:0}
.desc-src{font-family:var(--label);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:16px !important}
.desc-orig{margin-top:18px;border-top:1px solid var(--paper-line);padding-top:6px}
.desc-orig>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;min-height:44px;font-family:var(--label);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);-webkit-user-select:none;user-select:none}
.desc-orig>summary::-webkit-details-marker{display:none}
.desc-orig>summary::after{content:"+";font-size:15px;color:var(--ink-faint)}
.desc-orig[open]>summary::after{content:"–"}
.desc-orig-body p{color:var(--ink-faint);font-size:14.5px}
.odds-aside{background:var(--paper-hi);border:1px solid var(--paper-line);padding:22px;display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:80px}
.oa-head{font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.oa-result{margin-top:2px}
/* search */
.searchbig{display:flex;gap:10px;margin-top:18px;max-width:560px}
.searchbig input{flex:1;background:#fff;border:1px solid var(--paper-line-strong);color:var(--ink);font-family:var(--sans);font-size:16px;padding:12px 16px;border-radius:2px}
.searchbig button{background:var(--accent-fill);color:#fff;border:none;font-family:var(--label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 20px;min-height:44px;cursor:pointer;border-radius:2px}
.results{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--paper-line)}
.sr{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:14px 4px;border-bottom:1px solid var(--paper-line)}
.sr:hover{background:var(--paper-hi)}.sr-b{font-family:var(--serif-brand);font-size:17px;font-weight:600}.sr-m{color:var(--ink)}.sr-meta{color:var(--ink-soft);font-size:12px;text-align:right}
/* prose */
.prose{max-width:66ch}.prose h2{font-size:22px;margin:30px 0 10px}.prose h3{font-size:17px;margin:22px 0 6px}.prose p{margin:0 0 14px;color:var(--ink-soft)}
.pager{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-top:1px solid var(--paper-line);font-family:var(--label);font-size:13px;margin-top:20px}
.pager a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.errpage{padding:80px 0;text-align:center}.errpage h1{font-size:clamp(34px,6vw,64px);margin-top:12px}
/* footer */
.site-footer{border-top:1px solid var(--paper-line);margin-top:40px}
.foot-in{display:flex;flex-direction:column;gap:6px;padding:34px 28px 60px;font-family:var(--label);font-size:11px;letter-spacing:.03em;color:var(--ink-faint);max-width:var(--maxw);margin:0 auto}
@media(max-width:860px){.odds{grid-template-columns:1fr}.dstats{grid-template-columns:repeat(3,1fr)}.watch-grid{grid-template-columns:1fr}.odds-aside{position:static}}
@media(max-width:540px){.wrap{padding:0 16px}.dstats{grid-template-columns:repeat(2,1fr)}}
/* compare */
.head-action{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-family:var(--label);font-size:12px;letter-spacing:.05em;color:var(--accent)}
.cmp-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 8px}
.cmp-form input[type=text]{background:#fff;border:1px solid var(--paper-line-strong);color:var(--ink);font-family:var(--sans);font-size:14px;padding:10px 12px;border-radius:2px;max-width:260px}
.cmp-vs{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.cmp-form button{background:var(--accent-fill);color:#fff;border:none;font-family:var(--label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 18px;min-height:44px;cursor:pointer;border-radius:2px}
.cmp-panel{border-top:1px solid var(--paper-line);margin-top:14px}
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:16px;margin-bottom:14px}
.cmp-name{font-family:var(--serif-brand);font-size:clamp(20px,3vw,30px);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.cmp-head .cmp-name:first-child{text-align:left}.cmp-head .cmp-name:last-child{text-align:right}
.cmp-mid{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.cmp-list{margin:0;width:100%}
.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 10px;border-bottom:1px solid var(--paper-line)}
.cmp-k{grid-column:2;text-align:center;font-family:var(--label);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);min-width:8ch}
.cmp-a{grid-column:1;text-align:left;margin:0}
.cmp-b{grid-column:3;text-align:right;margin:0}
.cmp-a .bar,.cmp-b .bar{width:120px;max-width:40%}
.cmp-a .cmp-v,.cmp-b .cmp-v{display:block;font-size:18px;color:var(--ink);margin-bottom:5px}
.cmp-a.lead .cmp-v,.cmp-b.lead .cmp-v{color:var(--accent)}
.cmp-a.lead .bar-fg,.cmp-b.lead .bar-fg{fill:var(--accent-fill)}
.cmp-mark{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);vertical-align:middle;margin:0 6px}
.cmp-summary{text-align:center;font-size:13px;color:var(--ink-soft);margin:16px 0 0}
.cmp-b .bar{transform:scaleX(-1)}
/* year rankings */
.rk-note{margin:-6px 0 18px}
.rankings{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.rk-title{font-family:var(--label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.rk-list{display:flex;flex-direction:column}
.rk-row{display:grid;grid-template-columns:20px 32px 1fr 44px 20px;grid-template-areas:"pos thumb brand bar p" "pos thumb model bar mark";gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--paper-line);color:inherit}
.rk-row[href]:hover{background:var(--paper-hi)}
.rk-pos{grid-area:pos;color:var(--ink-faint);font-size:12px}
.rk-thumb{grid-area:thumb;grid-row:1/3;width:32px;height:32px;background:var(--paper-hi);overflow:hidden;align-self:center}
.rk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rk-thumb .hc-placeholder{width:100%;height:100%;padding:18%;box-sizing:border-box}
.rk-brand{grid-area:brand;font-family:var(--serif-brand);font-size:15px;font-weight:600}
.rk-model{grid-area:model;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-bar{grid-area:bar}.rk-bar .bar{width:100%;max-width:44px}
.rk-p{grid-area:p;text-align:right;font-size:12px;color:var(--ink)}
.rk-mark{grid-area:mark;color:var(--accent);font-size:13px;text-align:center}
.rk-won .rk-brand{color:var(--accent)}.rk-won .bar-fg{fill:var(--accent-fill)}
.rk-more{display:inline-flex;align-items:center;min-height:44px;font-family:var(--label);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  border-top:1px solid var(--paper-line);width:100%}
.rk-allnote{margin-top:22px;font-size:14px;color:var(--ink-soft)}
@media(max-width:700px){.rankings{grid-template-columns:1fr}}
/* ==========================================================================
   MOBILE-FIRST LAYER
   Everything below is authored small-screen-first: the base rule is the phone
   layout and the @media(min-width:…) blocks add room as it becomes available.
   It uses only the tokens declared at the top of this sheet — no new palette,
   no new typefaces, no second design system.
   Breakpoints are chosen from the device widths in the brief: 320 / 375 / 390 /
   430 are all "phone" (one column), 600 unlocks two-up grids, 720 swaps the
   masthead to its flat desktop row, 900 is the full desktop composition.
   ========================================================================== */

/* -- masthead: disclosure menu on phones, flat link row from 720px ---------- */
.mast-in{gap:12px;padding:12px 16px}
.brandmark b{font-size:16px}
.navrow{display:none}
.navdrop{position:relative}
.navdrop>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--paper-line-strong);border-radius:2px;
  padding:9px 12px;background:var(--paper-hi);-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  min-height:44px}
.navdrop>summary::-webkit-details-marker{display:none}
.navdrop>summary:hover{color:var(--ink);border-color:var(--accent-fill)}
.brandmark{min-height:44px}
.navbtn-bars{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:14px}
.navbtn-bars i{display:block;height:1.5px;background:currentColor;border-radius:1px}
.navdrop[open]>summary{color:var(--accent);border-color:var(--accent-fill)}
.navpanel{position:absolute;right:0;top:calc(100% + 9px);min-width:min(74vw,260px);
  background:var(--paper);border:1px solid var(--paper-line-strong);
  box-shadow:0 12px 28px rgba(33,28,21,.12);padding:6px;z-index:20;
  display:flex;flex-direction:column}
.navpanel a{font-family:var(--label);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding:13px 12px;border-bottom:1px solid var(--paper-line)}
.navpanel a:last-of-type{border-bottom:none}
.navpanel a:hover,.navpanel a[aria-current]{color:var(--accent);background:var(--paper-hi)}
.navpanel .searchbox{padding:8px 6px 4px;border-top:1px solid var(--paper-line)}
.navpanel .searchbox input{width:100%}
@media(min-width:720px){
  .navdrop{display:none}
  .brandmark{min-height:0}
  .navrow{display:flex;align-items:center;gap:18px;font-family:var(--label);font-size:12px;
    letter-spacing:.06em;text-transform:uppercase}
  .navrow a{color:var(--ink-soft);padding:4px 0;border-bottom:1px solid transparent}
  .navrow a:hover{color:var(--ink);border-color:var(--accent)}
  .navrow a[aria-current]{color:var(--accent);border-color:var(--accent)}
  .mast-in{padding:14px 28px}
  .brandmark b{font-size:18px}
  .navrow .searchbox input{width:clamp(110px,14vw,170px)}
}

/* -- shared section furniture ---------------------------------------------- */
.block-m{padding:34px 0;border-top:1px solid var(--paper-line)}
.block-m.band{background:var(--paper-hi);border-top:1px solid var(--paper-line);
  box-shadow:0 0 0 100vmax var(--paper-hi);clip-path:inset(0 -100vmax)}
.sec-head-m{margin-bottom:20px}
.sec-head-m h2{font-size:clamp(21px,5.4vw,30px);line-height:1.12}
.sec-sub{margin:7px 0 0;color:var(--ink-soft);font-size:14.5px;max-width:52ch}
.empty{color:var(--ink-soft);font-size:15px;border:1px dashed var(--paper-line-strong);
  padding:20px 16px;text-align:center;border-radius:2px}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:12px 22px;font-family:var(--label);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:2px;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--paper)}
.btn-primary:hover{background:var(--accent-deep);text-decoration:none}
main a.btn-primary{color:var(--paper)}
.btn-ghost{border:1px solid var(--paper-line-strong);color:var(--accent);background:transparent}
.btn-ghost:hover{border-color:var(--accent-fill);text-decoration:none}

/* -- hero: proposition first, numbers much later --------------------------- */
.hero-m{padding:30px 0 8px}
.hero-eyebrow{font-family:var(--label);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0}
.hero-h{font-family:var(--display);font-weight:400;font-size:clamp(44px,15vw,92px);
  line-height:.94;letter-spacing:-.015em;margin:10px 0 0}
.hero-lead{font-size:16.5px;line-height:1.5;color:var(--ink-soft);margin:14px 0 0;max-width:34ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-cta .btn-primary,.hero-cta .btn-ghost{flex:1 1 auto;min-width:140px}
@media(min-width:600px){
  .hero-m{padding:44px 0 12px}
  .hero-lead{font-size:18px;max-width:46ch}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{flex:0 0 auto}
}

/* -- featured prediction / category browser -------------------------------- */
.catbrowser{border:1px solid var(--paper-line);background:#fff}
.cb-tabs{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;border-bottom:1px solid var(--paper-line);
  scroll-snap-type:x proximity}
.cb-tab{flex:0 0 auto;scroll-snap-align:center;background:none;border:none;
  border-bottom:2px solid transparent;color:var(--ink-soft);font-family:var(--label);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:13px 14px;
  cursor:pointer;white-space:nowrap;min-height:44px}
.cb-tab:hover{color:var(--ink)}
.cb-tab.active{color:var(--amber);border-bottom-color:var(--amber-fill);background:var(--paper-hi)}
/* Before the script runs (or with JS off) every panel is shown, stacked and separated —
   the content is never trapped behind an interaction that may never arrive. */
.cb-panel+.cb-panel{border-top:1px solid var(--paper-line)}
.cb-live .cb-panel{display:none}
.cb-live .cb-panel.active{display:block;border-top:none}
.cb-live .cb-nav{display:flex}
.cb-nav{display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:8px;border-top:1px solid var(--paper-line);background:var(--paper-hi)}
.cb-prev,.cb-next{min-width:46px;min-height:44px;background:#fff;cursor:pointer;
  border:1px solid var(--paper-line-strong);border-radius:2px;color:var(--ink-soft);font-size:16px}
.cb-prev:hover,.cb-next:hover{color:var(--accent);border-color:var(--accent-fill)}
.cb-pos{font-size:11.5px;letter-spacing:.1em;color:var(--ink-faint)}
.cb-panel{padding:18px 16px 20px;touch-action:pan-y}
.cb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cb-cat{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cb-rank{font-family:var(--serif-num);font-size:26px;color:var(--paper-line-strong);line-height:1}
.cb-media{display:block;margin:12px 0 0;aspect-ratio:1/1;background:var(--paper-hi);overflow:hidden}
.cb-media img{width:100%;height:100%;object-fit:cover;display:block}
.cb-body{display:flex;flex-direction:column;gap:2px;padding-top:14px}
.cb-brand{font-family:var(--serif-brand);font-size:clamp(21px,5.6vw,26px);font-weight:600;
  line-height:1.06;color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
main a.cb-brand{color:var(--ink)}
.cb-model{font-family:var(--sans);font-weight:400;font-size:15px;color:var(--ink-soft);
  margin:2px 0 0;line-height:1.35}
.cb-status{margin:10px 0 0;font-size:13.5px;color:var(--ink-soft)}
.cb-more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;
  font-family:var(--label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent)}
.ph-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;width:100%;height:100%;padding:14%;box-sizing:border-box}
.ph-missing .hc-placeholder{width:64%;height:auto;padding:0}
.ph-txt{font-family:var(--label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center}

/* probability read-out: the gauge keeps its meaning, the number gets a plain-language
   label beside it so "31%" is never left to speak for itself */
.pb{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--paper-line)}
.pb .gauge{width:92px;flex:none}
.pb .gauge-lg{width:104px;max-width:104px;flex:none}
.pb-read{display:flex;flex-direction:column;min-width:0}
.pb-n{font-family:var(--serif-num);font-size:clamp(30px,8vw,40px);font-weight:600;line-height:1}
.pb-l{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:6px}
.pb-sub{font-size:12px;color:var(--ink-faint);margin-top:3px}

/* "Why this watch?" — a native disclosure, so state is exposed for free */
.why{margin-top:14px;border-top:1px solid var(--paper-line);padding-top:10px}
.why>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  -webkit-user-select:none;user-select:none;
  min-height:44px;font-family:var(--label);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.why>summary::-webkit-details-marker{display:none}
.why>summary::after{content:"+";font-size:15px;line-height:1;color:var(--ink-faint)}
.why[open]>summary::after{content:"–"}
.why-body{padding-bottom:6px}
.why-body .notes{border-top:none;padding-top:4px}
.why-none{font-size:14px;color:var(--ink-soft);margin:0 0 8px}
.disclaimer{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;
  font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.disclaimer .jewel{width:9px;height:9px;margin-top:6px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#c96a6d,var(--ruby) 60%,#6d2225)}

@media(min-width:600px){
  .cb-panel,.cb-live .cb-panel.active{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-areas:"head head" "media body";gap:0 26px;padding:22px}
  .cb-head{grid-area:head;margin-bottom:4px}
  .cb-media{grid-area:media;margin-top:10px;align-self:start}
  .cb-body{grid-area:body;padding-top:10px}
  .pb .gauge-lg{width:130px;max-width:130px}
}
@media(min-width:900px){
  .cb-panel,.cb-live .cb-panel.active{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);padding:28px}
  .cb-rank{font-size:34px}
  /* Enough room to show every category at once — no hidden horizontal scroll on desktop,
     where there is no swipe to fall back on. */
  .cb-tabs{flex-wrap:wrap;overflow-x:visible}
  .cb-tab{flex:0 1 auto}
}

/* -- model performance ------------------------------------------------------ */
.scoreline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--paper-line);padding:20px 14px}
.sl-fig{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.sl-n{font-family:var(--serif-num);font-size:clamp(34px,10vw,52px);font-weight:600;
  line-height:1;color:var(--ink-soft)}
.sl-model .sl-n{color:var(--forest)}
.sl-l{font-family:var(--label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:8px;line-height:1.4;max-width:16ch}
.sl-vs{font-family:var(--serif);font-style:italic;color:var(--ink-faint);font-size:14px}
.sl-say{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.sl-say b{color:var(--ink)}
.sl-alt{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft);
  padding-left:14px;border-left:2px solid var(--paper-line-strong)}
.sl-fine{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ink-faint)}
@media(min-width:600px){.scoreline{padding:26px 22px;gap:20px}.sl-say{font-size:16px;max-width:64ch}}

/* -- called it / missed ----------------------------------------------------- */
.cm{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-line);
  border:1px solid var(--paper-line)}
.cm-cell{background:#fff;padding:20px 14px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:4px}
.cm-mark{font-size:19px;line-height:1}
.cm-hit .cm-mark{color:var(--forest)}
.cm-miss .cm-mark{color:var(--ruby)}
.cm-n{font-family:var(--serif-num);font-size:clamp(32px,9vw,44px);font-weight:600;line-height:1}
.cm-hit .cm-n{color:var(--forest)}
.cm-miss .cm-n{color:var(--ruby)}
.cm-l{font-family:var(--label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);line-height:1.4;max-width:15ch}
.cm-say{margin:14px 0 16px;font-size:14.5px;color:var(--ink-soft)}

/* -- compact prediction list ------------------------------------------------ */
.prlist{display:flex;flex-direction:column;border-top:1px solid var(--paper-line);
  margin-bottom:18px}
.pr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:11px 2px;border-bottom:1px solid var(--paper-line);color:inherit}
a.pr:hover{background:var(--paper-hi);text-decoration:none}
.pr-thumb{width:52px;height:52px;background:var(--paper-hi);overflow:hidden;border-radius:2px}
.pr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pr-thumb .hc-placeholder{width:100%;height:100%;padding:18%;box-sizing:border-box}
.pr-text{display:flex;flex-direction:column;min-width:0;gap:1px}
.pr-cat{font-family:var(--label);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent)}
.pr-brand{font-family:var(--serif-brand);font-size:16px;font-weight:600;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-model{font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pr-p{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.pr-n{font-family:var(--serif-num);font-size:17px;font-weight:600}
.pr-p .bar{width:52px;height:5px}

/* -- data stories ----------------------------------------------------------- */
.stories{display:grid;grid-template-columns:1fr;gap:1px;background:var(--paper-line);
  border:1px solid var(--paper-line)}
.story{background:#fff;padding:20px 16px;display:flex;flex-direction:column;gap:8px}
.story-kicker{font-family:var(--label);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber)}
.story-h{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.2;margin:0}
.story-b{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.story-link{margin-top:auto;display:inline-flex;align-items:flex-end;min-height:44px;
  padding-top:10px;font-family:var(--label);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
@media(min-width:760px){.stories{grid-template-columns:repeat(3,1fr)}}

/* -- dataset statistics (moved below the fold, per the brief) --------------- */
.dstats-m{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--paper-line);
  border:1px solid var(--paper-line);margin:0}
.ds{background:#fff;padding:16px 14px;display:flex;flex-direction:column;gap:6px}
.ds dt{font-family:var(--label);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint)}
.ds dd{margin:0;font-family:var(--serif-num);font-size:clamp(21px,5.6vw,26px);font-weight:600;
  line-height:1}
@media(min-width:600px){.dstats-m{grid-template-columns:repeat(4,1fr)}}

/* -- explore ---------------------------------------------------------------- */
.explore{display:grid;grid-template-columns:1fr;gap:1px;background:var(--paper-line);
  border:1px solid var(--paper-line)}
.ex{background:#fff;padding:18px 16px;display:flex;flex-direction:column;gap:5px;
  min-height:44px;color:inherit}
.ex:hover{background:var(--paper-hi);text-decoration:none}
.ex-h{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--accent)}
.ex-b{font-size:14px;color:var(--ink-soft)}
@media(min-width:700px){.explore{grid-template-columns:repeat(3,1fr)}}

/* -- small-screen fixes to pre-existing pages ------------------------------- */
/* The brand table was a 640px-wide block inside a horizontal scroller: on a 320px screen
   that meant scrolling sideways through seven numeric columns to read one brand. Below
   700px each row becomes a card, with the column headers repeated as data labels. */
@media(max-width:700px){
  .table-wrap{overflow-x:visible;border-top:none}
  .brandtable{min-width:0;display:block}
  .brandtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .brandtable tbody,.brandtable tr,.brandtable td{display:block;width:auto}
  .brandtable tr{border:1px solid var(--paper-line);margin-bottom:-1px;padding:12px 14px;background:#fff}
  .brandtable td{border:none;padding:3px 0;text-align:left}
  .brandtable td.rank{display:none}
  .brandtable td.name{font-size:20px;padding-bottom:8px}
  .brandtable td.num,.brandtable td.aod,.brandtable td.rate{display:flex;align-items:baseline;
    justify-content:space-between;gap:12px;font-size:14px}
  .brandtable td[data-label]::before{content:attr(data-label);font-family:var(--label);
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .brandtable td.rate .pct{margin-left:auto}
  .brandtable td.rate .bar{width:60px;margin-left:10px}
}
@media(max-width:560px){
  .page-head h1{font-size:clamp(28px,8.4vw,44px)}
  .statline{gap:22px;margin-top:24px}
  .stat .n{font-size:clamp(28px,8vw,40px)}
  .searchbig{flex-direction:column}
  .searchbig button{padding:14px 20px}
  .cmp-form input[type=text]{max-width:none;flex:1 1 100%}
  .cmp-form button{width:100%}
  /* Three columns (value | label | value) do not fit 320px: the label takes a third of
     the screen to describe BOTH sides, leaving ~100px per value -- enough to snap
     "265,719 CHF" onto two lines. So the label moves above its own pair and the values
     share the full width, ~140px each. Reading order stays left = brand A, right =
     brand B, which is what keeps the two halves comparable at a glance. */
  .cmp-row{grid-template-columns:1fr 1fr;align-items:start;gap:2px 10px;padding:10px 0}
  .cmp-k{grid-column:1/-1;grid-row:1;text-align:left;min-width:0;font-size:9.5px;
    letter-spacing:.1em;margin-bottom:2px}
  .cmp-a{grid-column:1;grid-row:2}
  .cmp-b{grid-column:2;grid-row:2}
  .cmp-a .cmp-v,.cmp-b .cmp-v{font-size:16px;margin-bottom:4px}
  .cmp-a .bar,.cmp-b .bar{width:100%;max-width:70px}
  /* Same idea for the header: "head to head" sits above, so each name gets half the screen
     instead of a third. break-word rather than anywhere, so a name only splits when the
     word itself cannot fit -- never "Constanti / n". */
  .cmp-head{grid-template-columns:1fr 1fr;grid-template-areas:"mid mid" "a b";
    gap:2px 10px;align-items:end}
  .cmp-head .cmp-name:first-child{grid-area:a;text-align:left}
  .cmp-head .cmp-mid{grid-area:mid;text-align:left}
  .cmp-head .cmp-name:last-child{grid-area:b;text-align:right}
  .cmp-name{font-size:clamp(17px,5.4vw,22px);overflow-wrap:break-word;line-height:1.12}
  .spec{grid-template-columns:1fr;gap:3px}
  .minis{grid-template-columns:1fr}
  .palm-aod{grid-template-columns:96px 1fr;gap:14px}
  .palm-aod-info{padding:12px 14px 12px 0}
  .rk-row{grid-template-columns:18px 30px minmax(0,1fr) 38px 18px}
  .foot-in{padding:28px 16px 48px}
}
@media(prefers-reduced-motion:reduce){
  .cb-tabs{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}