/* yoursitesux.lol — one sheet. The gallery wall.
   The other sites are the hero: real screenshots drifting in columns around one
   quiet measure panel. Six named colours, two faces (self-hosted), one shadow
   (the panel), three radii by role (panel 14, control 8, tile 6). Tokens on
   :root, dark via prefers-color-scheme. Motion: the gallery settles once on
   load and drifts slowly; everything else moves only in answer to a person.
   ⛔ Every id/class site.js renders or binds is styled here; rename nothing. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light dark;
  --paper:#eef0f3; --panel:#ffffff; --ink:#14161b; --mute:#5b6070;
  --sux:#c8102e; --good:#0e7c4a; --on-stamp:#ffffff;
  --sux-text:#c8102e; --good-text:#0e7c4a; /* the words as TEXT: 5.2:1 / 4.6:1 on paper; lifted in dark */
  --rule:rgb(20 22 27/.12); --wash:rgb(20 22 27/.05); --tile-bg:#dfe2e8;
  --focus:#14161b;
  --gap:16px; --max:68rem;
  --r-panel:14px; --r-ctl:8px; --r-tile:6px;
  --shadow:0 24px 60px -24px rgb(20 22 27/.35), 0 2px 6px rgb(20 22 27/.08);
  --shadow-2:0 1px 2px rgb(20 22 27/.05), 0 8px 20px -12px rgb(20 22 27/.18), 0 28px 60px -28px rgb(20 22 27/.35);
  --glow:0 0 0 2px var(--good), 0 0 0 9px rgb(14 124 74/.10), 0 28px 64px -28px rgb(14 124 74/.6);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --text:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s0:.8rem; --s1:1rem; --s2:1.25rem; --s3:1.56rem; --s4:1.95rem; --s5:2.44rem; --s6:3.05rem; --s7:3.8rem; --s8:4.75rem;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#121418; --panel:#1c1f26; --ink:#eef0f3; --mute:#a0a6b5;
  --sux-text:#ff6b7d; --good-text:#34c274; /* 6.0:1 / 7.2:1 on the dark panel */
  --rule:rgb(238 240 243/.14); --wash:rgb(238 240 243/.06); --tile-bg:#262a33;
  --focus:#eef0f3;
  --shadow:0 24px 60px -24px rgb(0 0 0/.7), 0 2px 6px rgb(0 0 0/.4);
  --shadow-2:0 1px 2px rgb(0 0 0/.3), 0 8px 20px -12px rgb(0 0 0/.5), 0 28px 60px -28px rgb(0 0 0/.7);
  --glow:0 0 0 2px var(--good), 0 0 0 9px rgb(52 194 116/.14), 0 28px 64px -28px rgb(52 194 116/.5);
}}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-ctl)}
.wrap{width:min(var(--max),100% - 2*var(--gap));margin-inline:auto}

/* ── shell ─────────────────────────────────────────────────────────────── */
header.top{padding:14px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;letter-spacing:-.02em;text-decoration:none;font-size:var(--s2);display:inline-flex;align-items:center;gap:.4rem;min-height:44px}
.brand b{color:var(--sux-text);font-weight:700}
nav.menu{display:flex;gap:2px;font-size:var(--s1);font-weight:600}
nav.menu a{text-decoration:none;color:var(--mute);padding:10px 12px;border-radius:var(--r-ctl);min-height:44px;display:inline-flex;align-items:center;transition:color .15s,background .15s}
nav.menu a:hover{color:var(--ink);background:var(--wash)}
nav.menu a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
main{flex:1;padding-bottom:64px}
footer.foot{border-top:1px solid var(--rule);padding:22px 0 28px;color:var(--mute);font-size:var(--s0);line-height:1.6}
footer.foot .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
footer.foot a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule)}
footer.foot a:hover{border-color:var(--ink)}

/* ── the hero: the gallery wall, and the one panel over it ─────────────── */
.hero{position:relative;min-height:0;display:grid;place-items:center;padding:24px var(--gap) 40px;overflow:hidden;isolation:isolate}
.gallery{position:absolute;inset:0;z-index:0;display:flex;gap:14px;padding:0 var(--gap);opacity:0;transform:rotate(-2deg) scale(1.16);transition:opacity 1.2s ease,transform 2.4s cubic-bezier(.2,.8,.2,1);will-change:transform}
.gallery.hung{opacity:1;transform:rotate(-2deg) scale(1.12)}
.hero:has(.gallery.hung){min-height:min(92vh,880px)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,var(--paper) 0,transparent 9%,transparent 90%,var(--paper) 100%);pointer-events:none}
.gallery-empty{position:absolute;inset:auto var(--gap) 20px;text-align:center;color:var(--mute);font-size:var(--s1)}
/* ⚡ the drift is a plain stylesheet animation, one duration per column, and the
   column count comes from the markup — no inline style anywhere, because the
   CSP allows none (a `style="--n:7"` on each column was refused outright on the
   live site until 2026-09-17 and left the wall frozen behind the panel).
   The doubled `.col-run` makes the −50% loop seamless at any duration; 7 tiles
   are 1321 px against an 880 px hero, so no hole ever opens. */
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;animation:drift-up 96s linear infinite}
.col.down{animation-name:drift-down}
.col:nth-child(3n+1){animation-duration:118s}
.col:nth-child(3n+2){animation-duration:84s}
.col:nth-child(even){margin-top:-80px}
.col-run{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
.gallery:hover .col,.gallery:focus-within .col{animation-play-state:paused}
@keyframes drift-up{to{transform:translateY(-50%)}}
@keyframes drift-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
/* ⚡ a tile is an AD (owner, 2026-09-17): the domain is the headline of every
   tile — large, always drawn, never a hover caption — with the verdict tab
   beside it and the category as a chip. The pitch (brainclub.com's one honest
   line) rises over the screenshot on hover or focus. Nothing draws for a null. */
.tile{position:relative;display:block;border-radius:var(--r-tile);overflow:hidden;background:var(--tile-bg);aspect-ratio:16/11;text-decoration:none;color:var(--ink);outline-offset:2px}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top}
.tile-foot{position:absolute;inset:auto 0 0;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:5px;padding:34px 10px 9px;background:linear-gradient(transparent,rgb(0 0 0/.72) 45%);color:#fff}
.tile-host{max-width:100%;font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.4vw,1.2rem);line-height:1.1;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgb(0 0 0/.5)}
.tile-tab{flex:none;display:inline-flex;align-items:baseline;gap:.45em;padding:4px 9px;border-radius:4px;font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.2;color:var(--on-stamp);background:var(--ink)}
.tile-tab i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.85}
.tile.v-sux .tile-tab{background:var(--sux)}
.tile.v-good .tile-tab{background:var(--good)}
.tile .chip{position:absolute;top:8px;left:8px;background:rgb(255 255 255/.92);color:#14161b} /* on a white chip over a picture, ink stays ink in both themes */
.tile-pitch{position:absolute;inset:0 0 auto;padding:40px 10px 10px;font-size:.85rem;font-weight:500;line-height:1.35;color:#fff;background:linear-gradient(rgb(0 0 0/.78),rgb(0 0 0/.55) 70%,transparent);opacity:0;transition:opacity .2s;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile:hover .tile-pitch,.tile:focus-visible .tile-pitch{opacity:1}

/* the category chip — one shape everywhere */
.chip{display:inline-flex;align-items:center;min-height:22px;padding:2px 9px;border-radius:999px;background:var(--wash);color:var(--mute);font-family:var(--text);font-size:.74rem;font-weight:700;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.panel{position:relative;z-index:1;width:min(100%,38rem);background:var(--panel);border-radius:var(--r-panel);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)}
.panel h1{font-size:clamp(var(--s5),6vw,var(--s7));max-width:12ch}
.panel h1 .sux{color:var(--sux-text)}
.panel h1 .not{color:var(--good-text)}
.lead{margin-top:16px;font-size:var(--s2);line-height:1.4;color:var(--mute);max-width:32rem;text-wrap:pretty}
.panel .lead{margin-top:12px;font-size:var(--s1)}
/* the promise under the headline: what the wall does for a site */
.promise{margin-top:14px;font-family:var(--display);font-weight:700;font-size:var(--s2);line-height:1.25;letter-spacing:-.015em;color:var(--good-text);text-wrap:balance}

/* ── the measure box folds away ────────────────────────────────────────────
   ⚡ The wall IS the hero, and the box sat on the middle of it: measured by the
   owner 2026-09-17, a visitor could not read or click the tiles behind it and
   had no way to put it down. So the box folds — the × on the box, Escape, or a
   click on the wall — and a pill brings it back. ⛔ Every bit of this is a
   CLASS toggle: the CSP is `style-src 'self'`, so `element.style` is refused,
   and the hidden attribute would lose to `.panel`'s own display. */
.panel-x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:1px solid var(--rule);border-radius:50%;background:var(--panel);color:var(--mute);
  font:400 20px/1 var(--text);cursor:pointer;transition:color .15s,border-color .15s}
.panel-x:hover,.panel-x:focus-visible{color:var(--ink);border-color:var(--ink)}
.panel-back{position:absolute;right:var(--gap);bottom:16px;z-index:2;display:none;align-items:center;gap:.5em;
  padding:10px 18px;border:0;border-radius:999px;background:var(--ink);color:var(--on-stamp);
  font:600 var(--s0)/1 var(--text);box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.panel-back:hover{transform:translateY(-1px)}
.hero.wall-only .panel{display:none}
.hero.wall-only .panel-back{display:inline-flex}
/* ⛔ measured on a 390×844 phone: the box IS the hero's height there, so hiding
   it collapsed the wall into a 40px strip — the fold revealed nothing. The folded
   hero keeps the height the box was holding. */
.hero.wall-only:has(.gallery.hung){min-height:min(92vh,880px)}

/* the measure form */
form.measure{margin-top:22px;display:grid;gap:12px}
form.measure .row{display:flex;gap:8px;flex-wrap:wrap}
form.measure input[type=text]{flex:1 1 14rem;min-width:0;min-height:52px;padding:0 16px;border:1.5px solid var(--rule);border-radius:var(--r-ctl);background:var(--paper);font-size:var(--s2);font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s}
form.measure input[type=text]::placeholder{color:var(--mute);font-weight:400}
form.measure input[type=text]:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--wash)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:var(--r-ctl);border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:700;font-size:var(--s2);text-decoration:none;cursor:pointer;transition:opacity .15s,transform .1s}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--wash);opacity:1}
label.opt{display:flex;align-items:center;gap:.6rem;font-size:var(--s1);font-weight:500;cursor:pointer;min-height:44px}
label.opt input{width:1.15rem;height:1.15rem;accent-color:var(--good);cursor:pointer}

/* the line — always words, never a naked spinner */
.line{margin-top:14px;min-height:1.6rem;font-size:var(--s1);font-weight:600;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.line:empty{display:none}
.line b{font-family:var(--display);font-weight:700}
.line.wait,.line.run{color:var(--ink)}
.line.wait::before,.line.run::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:50%;background:currentColor;animation:pulse 1.2s ease-in-out infinite}
.line.run::before{border-radius:2px;animation:turn 1s linear infinite}
.line.no{color:var(--sux-text)}
.line.no::before{content:"×";flex:none;font-weight:700}
.line.done{color:var(--good-text)}
.line.done::before{content:"✓";flex:none;font-weight:700}
@keyframes pulse{50%{opacity:.3;transform:scale(.6)}}
@keyframes turn{to{transform:rotate(360deg)}}

/* the numbers — real, from brainclub.com; zero says so */
.stats-root{min-height:4.6rem} /* reserved: the numbers arrive after a fetch — CLS 0.29 measured without this */
.stats{list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px;padding:26px 0 8px;border-bottom:1px solid var(--rule)}
.stat{display:flex;align-items:baseline;gap:.5rem;min-width:9rem}
.stat-n{font-family:var(--display);font-weight:700;font-size:var(--s5);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.stat-l{font-size:var(--s1);color:var(--mute);font-weight:500}
.stat-l i{font-style:normal;color:var(--ink)}

/* section heads */
.shelf-section,.fresh{margin-top:44px}
.shelf-root{min-height:3rem}
.recent{min-height:15rem}
.shelf-head,.fresh-head{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:14px}
.shelf-head h2,.fresh-head h2{font-size:var(--s4)}
.shelf-head p,.fresh-head p{color:var(--mute);font-size:var(--s1);max-width:44rem}
.fresh-more{margin-top:14px;font-weight:600}
.fresh-more a,.sec-head a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--rule)}
.fresh-more a:hover,.sec-head a:hover{border-color:var(--ink)}

/* latest verdicts — a dense strip, no rank */
.recent-empty,.shelf-empty{color:var(--mute);font-size:var(--s1);padding:22px 0}
.recent-strip,.shelf-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gap);padding:2px var(--gap) 10px;margin-inline:calc(-1*var(--gap));scrollbar-width:none}
.recent-strip::-webkit-scrollbar,.shelf-strip::-webkit-scrollbar{display:none}
.thumb{flex:0 0 216px;scroll-snap-align:start;display:grid;grid-template-columns:1fr auto;grid-template-areas:"shot shot" "host n" "word n";column-gap:8px;row-gap:2px;text-decoration:none;color:var(--ink);align-content:start}
.thumb-shot{grid-area:shot;display:block;aspect-ratio:16/10;background:var(--tile-bg);border-radius:var(--r-tile);overflow:hidden;margin-bottom:8px}
.thumb-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.thumb:hover .thumb-shot img{transform:scale(1.03)}
.thumb-host{grid-area:host;font-family:var(--display);font-weight:700;font-size:var(--s1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb-word{grid-area:word;font-size:var(--s0);font-weight:600;color:var(--mute)}
.thumb.v-sux .thumb-word{color:var(--sux-text)}
.thumb.v-good .thumb-word{color:var(--good-text)}
.thumb-n{grid-area:n;align-self:start;font-family:var(--display);font-weight:700;font-size:var(--s3);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}

/* the ten-out-of-ten shelf — no floor, a fact not a rank */
.fame{flex:0 0 300px;scroll-snap-align:start;display:grid;gap:8px;text-decoration:none;color:var(--ink);padding:10px;border-radius:calc(var(--r-tile) + 6px);background:var(--panel);border:1.5px solid var(--good)}
.fame-shot{display:block;aspect-ratio:16/10;background:var(--tile-bg);border-radius:var(--r-tile);overflow:hidden}
.fame-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.fame-body{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
.fame-n{grid-row:1/3;font-family:var(--display);font-weight:700;font-size:var(--s5);letter-spacing:-.03em;color:var(--good-text);line-height:1;font-variant-numeric:tabular-nums}
.fame-n small{font-size:.5em;color:var(--mute)}
.fame-host{font-family:var(--display);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fame-word{font-size:var(--s0);color:var(--mute);font-weight:600}

/* ── the verdict — lands in answer to the person ───────────────────────── */
.verdict{margin-top:32px;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1)}
.verdict.landed{opacity:1;transform:none}
.verdict:empty{display:none}
.verdict.big{background:var(--panel);border-radius:var(--r-panel);padding:clamp(22px,4vw,40px);box-shadow:var(--shadow);display:grid;gap:0 40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"host shot" "pitch shot" "word shot" "overall shot" "fix shot" "marks shot" "judged judged" "links links" "share share" "note note"}
.v-host{grid-area:host;font-family:var(--display);color:var(--mute);font-weight:700;font-size:var(--s2);word-break:break-all;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v-pitch{grid-area:pitch;margin-top:6px;font-size:var(--s1);color:var(--ink);max-width:32rem;text-wrap:pretty}
.v-sent{align-self:center;font-size:var(--s0);font-weight:600;color:var(--mute)}
.btn.visit{background:var(--good);border-color:var(--good);color:#fff}
.btn.visit:hover{opacity:.9}

/* ── the share moment: the badge, the snippet, the two links ─────────────── */
.share{grid-area:share;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule);display:grid;gap:12px}
.share-title{font-size:var(--s3);letter-spacing:-.02em}
.share-title+.share-title,.snippet-row+.share-title{margin-top:10px}
.on-wall{font-family:var(--display);font-weight:700;font-size:var(--s2);color:var(--good-text);padding:12px 14px;border-radius:var(--r-ctl);background:var(--wash);justify-self:start}
.badge-show a{display:inline-block;outline-offset:4px}
.badge-show img{width:auto;height:28px;max-width:100%}
.snippet{max-width:100%;padding:12px 14px;border-radius:var(--r-ctl);background:var(--paper);border:1px solid var(--rule);font:500 .82rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);user-select:all}
.snippet-row,.share-row{display:flex;gap:10px;flex-wrap:wrap}
.share.v-sux .share-title,.share.v-unknown .share-title{color:var(--ink);font-size:var(--s2);max-width:32rem}
.v-word{grid-area:word;font-size:clamp(var(--s6),9vw,var(--s8));line-height:.95;letter-spacing:-.04em;margin:.15em 0 .2em}
.v-word span{display:inline-block;padding:.04em .18em .1em;border-radius:.12em;color:var(--on-stamp);background:var(--ink)}
.v-sux .v-word span{background:var(--sux)}
.v-good .v-word span{background:var(--good)}
.v-unknown .v-word span{font-size:.55em;padding:.2em .4em}
.landed .v-word span{animation:land .5s cubic-bezier(.2,1.2,.35,1) both}
@keyframes land{from{opacity:0;transform:scale(1.4)}}
.v-overall{grid-area:overall;font-family:var(--display);font-size:var(--s5);font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:baseline;gap:.3rem;line-height:1}
.v-overall small{font-size:.5em;color:var(--mute);font-weight:600}
.fix{grid-area:fix;margin-top:16px;font-size:var(--s1);padding:12px 14px;border-radius:var(--r-ctl);background:var(--wash);max-width:32rem;color:var(--mute)}
.fix b{font-family:var(--display);font-weight:700;color:var(--ink)}
.fix-n{font-weight:600}
.fix-do{display:block;margin-top:6px;color:var(--ink);font-weight:500}
.judged{grid-area:judged;margin-top:10px;font-size:var(--s0,13px);color:var(--mute);letter-spacing:.01em}
.v-note{grid-area:note;margin-top:10px;font-size:var(--s0,13px);color:var(--mute);max-width:34rem}
.v-shot{grid-area:shot;align-self:center;display:block;border-radius:var(--r-tile);overflow:hidden;background:var(--tile-bg);aspect-ratio:16/10;outline-offset:3px}
.v-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.v-links{grid-area:links;display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.verdict.big .marks{grid-area:marks}

/* marks — the five goals as bars */
.marks{list-style:none;margin-top:18px;display:grid;gap:8px;max-width:32rem}
.mark{display:grid;grid-template-columns:1fr 2.6rem;align-items:center;gap:8px}
.mark .mark-q{grid-column:1/-1;font-size:var(--s0);font-weight:600;color:var(--mute)}
/* the compact row on an ad: glyph, bar, number — the question is the title */
.marks.iconed .mark{grid-template-columns:18px 1fr 2.4rem}
.marks.iconed .mark-i{margin:0;width:16px;height:16px;vertical-align:0;color:var(--mute)}
.mark-i{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:8px;background:currentColor;opacity:.8;-webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat}
.mark-i-found{--mi:url(/img/goal-found.svg)}.mark-i-recommended{--mi:url(/img/goal-recommended.svg)}.mark-i-converts{--mi:url(/img/goal-converts.svg)}.mark-i-trusted{--mi:url(/img/goal-trusted.svg)}.mark-i-usable{--mi:url(/img/goal-usable.svg)}
.mark-bar{height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.mark-bar i{display:block;height:100%;border-radius:3px;background:var(--mute);transform-origin:left}
/* ⚡ the bar's width is a class, not a `style` attribute: the CSP refuses inline
   styles (a blocked one is worse than an ugly one — every bar rendered full,
   claiming 10 for a 5.2). One rule per whole percent, because the number under
   it is exact and the bar must not be a different fact. test/test-site.mjs
   walks 0–100 and fails on a missing rung. */
.w0{width:0%} .w1{width:1%} .w2{width:2%} .w3{width:3%} .w4{width:4%}
.w5{width:5%} .w6{width:6%} .w7{width:7%} .w8{width:8%} .w9{width:9%}
.w10{width:10%} .w11{width:11%} .w12{width:12%} .w13{width:13%} .w14{width:14%}
.w15{width:15%} .w16{width:16%} .w17{width:17%} .w18{width:18%} .w19{width:19%}
.w20{width:20%} .w21{width:21%} .w22{width:22%} .w23{width:23%} .w24{width:24%}
.w25{width:25%} .w26{width:26%} .w27{width:27%} .w28{width:28%} .w29{width:29%}
.w30{width:30%} .w31{width:31%} .w32{width:32%} .w33{width:33%} .w34{width:34%}
.w35{width:35%} .w36{width:36%} .w37{width:37%} .w38{width:38%} .w39{width:39%}
.w40{width:40%} .w41{width:41%} .w42{width:42%} .w43{width:43%} .w44{width:44%}
.w45{width:45%} .w46{width:46%} .w47{width:47%} .w48{width:48%} .w49{width:49%}
.w50{width:50%} .w51{width:51%} .w52{width:52%} .w53{width:53%} .w54{width:54%}
.w55{width:55%} .w56{width:56%} .w57{width:57%} .w58{width:58%} .w59{width:59%}
.w60{width:60%} .w61{width:61%} .w62{width:62%} .w63{width:63%} .w64{width:64%}
.w65{width:65%} .w66{width:66%} .w67{width:67%} .w68{width:68%} .w69{width:69%}
.w70{width:70%} .w71{width:71%} .w72{width:72%} .w73{width:73%} .w74{width:74%}
.w75{width:75%} .w76{width:76%} .w77{width:77%} .w78{width:78%} .w79{width:79%}
.w80{width:80%} .w81{width:81%} .w82{width:82%} .w83{width:83%} .w84{width:84%}
.w85{width:85%} .w86{width:86%} .w87{width:87%} .w88{width:88%} .w89{width:89%}
.w90{width:90%} .w91{width:91%} .w92{width:92%} .w93{width:93%} .w94{width:94%}
.w95{width:95%} .w96{width:96%} .w97{width:97%} .w98{width:98%} .w99{width:99%}
.w100{width:100%}
.landed .mark-bar i{animation:grow .6s cubic-bezier(.2,.9,.3,1) both}
.mark.hi .mark-bar i{background:var(--good)}
.mark.mid .mark-bar i{background:var(--ink)}
.mark.lo .mark-bar i{background:var(--sux)}
.mark-n{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:700;font-size:var(--s1)}
.mark.na .mark-n{color:var(--mute)}
@keyframes grow{from{transform:scaleX(0)}}

/* ── the wall ──────────────────────────────────────────────────────────── */
.page-head{margin-top:24px}
.page-head h1{font-size:clamp(var(--s5),7vw,var(--s7))}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:28px 0 10px}
.tab{min-height:44px;padding:0 14px;border-radius:var(--r-ctl);border:1.5px solid var(--rule);background:transparent;cursor:pointer;text-transform:capitalize;display:inline-flex;gap:.5rem;align-items:center;font-family:var(--display);font-weight:700;color:var(--ink);transition:border-color .15s,background .15s}
.tab:hover{border-color:var(--ink)}
.tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tab.thin{color:var(--mute)}
.tab-n{font-size:var(--s0);font-weight:600;font-variant-numeric:tabular-nums;opacity:.8}
.wall-status{color:var(--mute);font-size:var(--s0);min-height:1.4rem;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:28px 20px;margin-top:20px}
.card{position:relative;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.card .rank{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--display);font-weight:700;font-size:var(--s0);background:var(--panel);color:var(--ink);border-radius:4px;padding:3px 8px;line-height:1.2}
.card .shot{display:block;aspect-ratio:16/10;background:var(--tile-bg);overflow:hidden;border-radius:var(--r-tile)}
.card .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.card:hover .shot img{transform:scale(1.03)}
.card .noshot{display:grid;place-items:center;height:100%;color:var(--mute);font-size:var(--s0)}
.card-body{display:grid;gap:6px}
.card .host{font-family:var(--display);font-weight:700;text-decoration:none;word-break:break-all;font-size:var(--s2)}
.card .host:hover{text-decoration:underline;text-underline-offset:3px}
.verdict-line{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.vword{font-family:var(--display);font-weight:700;font-size:var(--s1)}
.v-sux .vword{color:var(--sux-text)}
.v-good .vword{color:var(--good-text)}
.overall{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--s1);color:var(--mute)}
.card .marks{margin-top:2px;gap:5px}
.card .mark-bar{height:4px}
.card .mark-n{font-size:var(--s0)}
.card .report{font-size:var(--s0);font-weight:600;color:var(--mute);text-decoration:none;justify-self:start;border-bottom:1px solid var(--rule);margin-top:2px}
.card .report:hover{color:var(--ink);border-color:var(--ink)}
/* ── the ad card: a site on the wall, drawn as its own advertisement ───────
   Rank on the picture, the DOMAIN as the headline, the category chip, the
   pitch in readable type, score and five marks with their glyphs, how many
   visitors the wall has sent, and one green door: "Visit <domain>". */
.grid.ads{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:24px 20px}
.ad{position:relative;display:flex;flex-direction:column;color:var(--ink);background:var(--panel);border-radius:calc(var(--r-tile) + 6px);overflow:hidden;box-shadow:0 1px 2px rgb(20 22 27/.06),0 12px 32px -20px rgb(20 22 27/.35);transition:transform .2s,box-shadow .2s}
.ad:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ad-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--tile-bg);overflow:hidden}
.ad-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.ad:hover .ad-shot img{transform:scale(1.03)}
.ad .rank{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--display);font-weight:700;font-size:var(--s1);background:var(--ink);color:var(--paper);border-radius:6px;padding:4px 10px;line-height:1.2}
.ad .noshot{display:grid;place-items:center;height:100%;color:var(--mute);font-size:var(--s0)}
.ad-body{display:grid;gap:8px;padding:14px 16px 16px;align-content:start}
.ad-body .chip{justify-self:start}
.ad-host{font-size:var(--s3);line-height:1.1;letter-spacing:-.025em;word-break:break-all}
.ad-host a{text-decoration:none}
.ad-host a:hover{text-decoration:underline;text-underline-offset:4px}
.ad-pitch{font-size:var(--s1);line-height:1.45;color:var(--ink);text-wrap:pretty}
.ad-score{display:flex;align-items:baseline;gap:.4rem;margin-top:4px;font-family:var(--display);font-weight:700;line-height:1}
.ad-score b{font-size:var(--s5);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ad-score small{font-size:var(--s1);color:var(--mute)}
.ad-score .vword{margin-left:.3rem;font-size:var(--s1)}
.ad .marks{margin-top:4px;gap:5px;max-width:none}
.ad .mark-bar{height:5px}
.ad .mark-n{font-size:var(--s0)}
.ad-sent{font-size:var(--s0);font-weight:600;color:var(--mute);margin-top:2px}
.ad-links{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:8px}
.ad-links .btn{min-height:46px;padding:0 18px;font-size:var(--s1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad .report{font-size:var(--s0);font-weight:600;color:var(--mute);text-decoration:none;border-bottom:1px solid var(--rule);min-height:44px;display:inline-flex;align-items:center}
.ad .report:hover{color:var(--ink);border-color:var(--ink)}
.home-tabs{margin:0 0 14px}
.floor{font-family:var(--display);font-size:var(--s4);font-weight:700;letter-spacing:-.02em;margin-top:28px;max-width:40rem}

/* ── card page ─────────────────────────────────────────────────────────── */
.card-status{color:var(--mute);min-height:1.4rem;font-weight:500;margin-top:24px}
.card-status:empty{display:none}
.card-status a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--rule)}
body[data-page=card] .verdict.big{margin-top:24px}

/* ── prose pages ───────────────────────────────────────────────────────── */
.prose{max-width:40rem;margin-top:28px;display:grid;gap:14px}
.prose h1{font-size:clamp(var(--s5),7vw,var(--s7));margin-bottom:6px}
.prose h2{font-size:var(--s3);margin-top:22px}
.prose p,.prose li{color:var(--ink)}
.prose ul{padding-left:1.2rem;display:grid;gap:4px}
.prose .rule em{font-style:normal;font-family:var(--display);font-weight:700}
.prose .rule b{color:var(--sux-text)}
.prose em{font-style:normal;font-weight:600}
.prose a{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--rule)}
.prose a:hover{border-color:var(--ink)}

/* ── OG card — exactly 1200×630, no shell ───────────────────────────────── */
body.ogbody{display:block;min-height:0;overflow:hidden;background:var(--paper)}
.og{width:1200px;height:630px;display:grid;grid-template-columns:1fr 520px;gap:48px;padding:56px 64px;background:var(--paper);color:var(--ink);overflow:hidden;font-family:var(--text)}
.og-text{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.og-host{font-family:var(--display);font-size:30px;color:var(--mute);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.og-word{font-family:var(--display);font-size:96px;line-height:.95;letter-spacing:-.04em;font-weight:700;display:inline-block;align-self:flex-start;padding:6px 22px 14px;border-radius:12px;color:var(--on-stamp);background:var(--ink);max-width:100%;margin:6px 0 10px}
.og.v-sux .og-word{background:var(--sux)}
.og.v-good .og-word{background:var(--good)}
.og.v-unknown .og-word{font-size:56px;background:var(--ink)}
.og-word.plain,.og.v-unknown .og-word.plain{background:none;color:var(--ink);padding:0;font-size:78px;line-height:1;margin:4px 0 8px;border-radius:0}
.og-word.plain .sux{color:var(--sux-text)}
.og-word.plain .not{color:var(--good-text)}
.og-shot.plain{aspect-ratio:auto;background:none;box-shadow:none;display:flex;flex-direction:column;gap:18px;align-items:flex-start;justify-content:center;overflow:visible}
.og-stamp{font-family:var(--display);font-weight:700;font-size:64px;letter-spacing:-.03em;line-height:1;padding:14px 26px 20px;border-radius:12px;color:var(--on-stamp);background:var(--ink);box-shadow:var(--shadow)}
.og-stamp.v-sux{background:var(--sux);transform:rotate(-2deg)}
.og-stamp.v-good{background:var(--good);margin-left:48px;transform:rotate(1.5deg)}
.og-overall{font-family:var(--display);font-size:48px;font-weight:700;letter-spacing:-.03em;line-height:1}
.og-overall small{font-size:24px;color:var(--mute);font-weight:600}
.og-fix{font-size:24px;font-weight:600;color:var(--mute)}
.og .marks{max-width:420px;gap:8px;margin-top:4px}
.og .mark-bar{height:8px}
.og .mark-n{font-size:20px}
.og-foot{margin-top:auto;font-size:20px;color:var(--mute);font-weight:600}
/* ⚡ the OG preview page is a 1200×630 frame. This lived in an inline `<style>`
   on the page until 2026-09-17 and the CSP refused it — a blocked style block
   is a card rendered at the wrong size, which is the one thing this page is
   for. It is a sheet rule now, where the policy allows it. */
html:has(body.ogbody),body.ogbody{width:1200px;height:630px;margin:0}
.og-shot{align-self:center;border-radius:12px;overflow:hidden;background:var(--tile-bg);aspect-ratio:16/10;box-shadow:var(--shadow)}
.og-shot:empty{background:var(--tile-bg)}
.og-shot img{width:100%;height:100%;object-fit:cover;object-position:top}


/* ── v4: content first, value on every card (owner, 2026-09-17) ──────────
   The wall opens with sites, not sentences: title + category tabs on ONE
   row, the podium (ranks 1–3 as feature cards, #1 dominant), a dense grid of
   compact ads, and "on the way up" below — the sites under the line with the
   one goal to fix. Numbers and marks carry the story; the pitch is clamped to
   two lines; the rules live on /about/. Screenshots are the imagery: crisp,
   rounded, a slight shadow, a subtle CSS zoom on hover. Motion only with
   purpose: the podium rises once on load, cards lift on hover; reduced motion
   turns both off (the global rule above). */
.wall-head{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;margin-top:22px}
.wall-head h1{font-size:clamp(var(--s4),5vw,var(--s6));flex:none;line-height:1}
.tabs-row{flex:1 1 20rem;min-width:0;margin:0;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:3px 0}
.tabs-row::-webkit-scrollbar{display:none}
.tabs-row .tab{flex:none;scroll-snap-align:start}
.wall-root{margin-top:22px}
.sec-head,.rising-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:14px}
.sec-head h2,.rising-head h2{font-size:clamp(var(--s4),4vw,var(--s5))}
.sec-head p,.rising-head p{color:var(--mute);font-size:var(--s1);font-weight:500}
.top-section,.rising-section{margin-top:44px}
.rising-section{padding-top:36px;border-top:1px solid var(--rule)}
.noshot{display:grid;place-items:center;height:100%;color:var(--mute);font-size:var(--s0)}

/* the podium — ranks 1–3 */
.podium{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:20px;align-items:start}
.podium.n2{grid-template-columns:1.45fr 1fr}
.podium.n1{grid-template-columns:minmax(0,40rem)}
.pod{position:relative;display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--shadow-2);transition:transform .2s,box-shadow .2s;animation:rise .6s cubic-bezier(.2,.9,.3,1) both}
.pod-2{animation-delay:.08s}
.pod-3{animation-delay:.16s}
.pod:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.pod-1{box-shadow:var(--glow)}
.pod-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--tile-bg);overflow:hidden;outline-offset:-3px}
.pod-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s}
.pod:hover .pod-shot img{transform:scale(1.03)}
.medal{position:absolute;top:12px;left:12px;z-index:2;display:grid;place-items:center;width:42px;height:42px;border-radius:50% 50% 50% 8px;background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:800;font-size:var(--s2);line-height:1;box-shadow:0 2px 8px rgb(0 0 0/.3)}
.medal-1{background:var(--good);color:#fff;width:50px;height:50px;font-size:var(--s3)}
.pod-body{display:grid;gap:10px;padding:16px 18px 18px;align-content:start}
.pod-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;min-height:22px}
.pod-sent{font-size:var(--s0);font-weight:700;color:var(--good-text);white-space:nowrap}
.pod-host{font-size:var(--s4);line-height:1.05;letter-spacing:-.03em;word-break:break-all}
.pod-1 .pod-host{font-size:clamp(var(--s4),3vw,var(--s6))}
.pod-host a{text-decoration:none}
.pod-host a:hover{text-decoration:underline;text-underline-offset:5px}
.pod-pitch,.cc-pitch{font-size:var(--s1);line-height:1.4;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.pod-value{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:center;margin-top:4px}
.pod-value .marks{margin:0;gap:4px;max-width:none}
.pod-value .mark-bar{height:5px}
.pod-value .mark-n{font-size:var(--s0)}
.pod-score,.cc-score,.rc-score,.score{display:inline-flex;align-items:baseline;gap:.15em;font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pod-score b{font-size:var(--s7)}
.pod-1 .pod-score b{font-size:clamp(var(--s7),6vw,var(--s8))}
.pod-score small,.cc-score small,.rc-score small{font-size:.32em;color:var(--mute);font-weight:700;letter-spacing:0}
.score.v-good b,.pod-score.v-good b,.cc-score.v-good b{color:var(--good-text)}
.score.v-sux b,.rc-score.v-sux b{color:var(--sux-text)}
.pod-links{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:6px}
.pod-links .btn{min-height:48px;padding:0 20px;font-size:var(--s1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .report,.cc .report,.rc .report,.rc .again{font-size:var(--s0);font-weight:600;color:var(--mute);text-decoration:none;border-bottom:1px solid var(--rule);min-height:44px;display:inline-flex;align-items:center}
.pod .report:hover,.cc .report:hover,.rc .report:hover,.rc .again:hover{color:var(--ink);border-color:var(--ink)}
/* the small podium on the home page: same component, tighter */
.podium.small .pod-1 .pod-host{font-size:var(--s4)}
.podium.small .pod-1 .pod-score b{font-size:var(--s7)}
.podium.small .pod-pitch{display:none}

/* the compact grid — #4 on: dense, scannable, the whole card opens the site's page */
.cc-grid{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:20px 16px;margin-top:24px}
.cc{position:relative;display:flex;flex-direction:column;background:var(--panel);border-radius:calc(var(--r-tile) + 6px);overflow:hidden;box-shadow:var(--shadow-2);transition:transform .2s,box-shadow .2s}
.cc:hover,.cc:focus-within{transform:translateY(-3px);box-shadow:var(--shadow)}
.cc-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--tile-bg);overflow:hidden}
.cc-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s}
.cc:hover .cc-shot img{transform:scale(1.04)}
.cc .rank{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--display);font-weight:700;font-size:var(--s0);background:var(--ink);color:var(--paper);border-radius:6px;padding:3px 8px;line-height:1.2}
.cc-body{display:grid;gap:6px;padding:12px 14px 12px;align-content:start}
.cc-host{font-size:var(--s2);line-height:1.1;letter-spacing:-.025em;word-break:break-all}
.cc-host a{text-decoration:none}
/* ⚡ the stretched link: the domain's own anchor covers the card, so the whole
   card is one tap to /s/ — with no anchor nested in another. The visit door
   and the report link sit above it (z-index) and stay their own links. */
.cc-host a::after{content:"";position:absolute;inset:0;z-index:1}
.cc:focus-within .cc-host a{text-decoration:underline;text-underline-offset:4px}
.cc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cc-score b{font-size:var(--s4)}
.cc .marks{margin-top:2px;gap:3px;max-width:none}
.cc .marks.iconed .mark{grid-template-columns:14px 1fr 2rem;gap:6px}
.cc .marks.iconed .mark-i{width:13px;height:13px}
.cc .mark-bar{height:4px}
.cc .mark-n{font-size:.74rem}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin-top:4px;min-height:44px}
.cc-sent{font-size:var(--s0);font-weight:600;color:var(--mute)}
.visit-link{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-ctl);font-family:var(--display);font-weight:700;font-size:var(--s0);color:var(--good-text);text-decoration:none;background:var(--wash);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visit-link:hover{background:var(--good);color:#fff}

/* on the way up — under the line, no rank, no door, the one fix and the gap */
.rc-grid{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:20px 16px;margin-top:0}
.rising-empty{color:var(--mute);font-size:var(--s1);padding:8px 0 22px}
.rc{position:relative;display:flex;flex-direction:column;background:var(--panel);border-radius:calc(var(--r-tile) + 6px);overflow:hidden;border:1px solid var(--rule);transition:transform .2s,box-shadow .2s}
.rc:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.rc-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--tile-bg);overflow:hidden}
.rc-shot img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.55);opacity:.85;transition:filter .3s,opacity .3s,transform .4s}
.rc:hover .rc-shot img{filter:none;opacity:1;transform:scale(1.03)}
.rc-tab{position:absolute;left:8px;bottom:8px;z-index:2;padding:4px 10px;border-radius:4px;background:var(--sux);color:var(--on-stamp);font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.2}
.rc.v-unknown .rc-tab{background:var(--ink)}
.rc-body{display:grid;gap:6px;padding:12px 14px 10px;align-content:start}
.rc-host{font-size:var(--s2);line-height:1.1;letter-spacing:-.025em;word-break:break-all}
.rc-host a{text-decoration:none}
.rc-host a:hover{text-decoration:underline;text-underline-offset:4px}
.rc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rc-score b{font-size:var(--s4)}
.rc-fix{font-size:var(--s0);line-height:1.4;color:var(--mute);padding:8px 10px;border-radius:var(--r-ctl);background:var(--wash)}
.rc-fix-l{font-weight:600}
.rc-fix b{font-family:var(--display);font-weight:700;color:var(--ink)}
.rc-gap{display:inline-block;margin-left:.3em;font-weight:700;color:var(--sux-text);white-space:nowrap}
.rc-links{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
.fix-gap{font-weight:700;color:var(--sux-text)}

@media (max-width:900px){
  .podium,.podium.n2{grid-template-columns:1fr 1fr}
  .podium .pod-1{grid-column:1/-1}
  .podium.small{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wall-head h1{flex-basis:100%}
  .tabs-row{margin-inline:calc(-1*var(--gap));padding-inline:var(--gap);flex-basis:100%}
  .podium,.podium.n2,.podium.small{grid-template-columns:1fr}
  .pod-value{grid-template-columns:1fr;gap:8px}
  .pod-links .btn,.rc-links .btn{width:100%}
  .pod-1 .pod-host{font-size:var(--s4)}
}
@media (max-width:560px){
  .cc-grid,.rc-grid{grid-template-columns:1fr}
}

/* ── motion and phones ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .gallery{opacity:1;transform:rotate(-2deg) scale(1.12)}
  .col{animation:none}
  .col-run+.col-run{display:none}
}
@media (max-width:900px){
  .verdict.big{grid-template-columns:1fr;grid-template-areas:"host" "pitch" "word" "overall" "fix" "marks" "judged" "shot" "links" "share" "note"}
  .v-shot{margin-top:22px;max-width:36rem}
}
@media (max-width:640px){
  .hero{min-height:0;padding:12px var(--gap) 28px}
  .hero:has(.gallery.hung){min-height:0}
  .col:nth-child(n+4){display:none}
  .col:nth-child(2){margin-top:-60px}
  .tile-tab{font-size:.68rem;padding:3px 6px}
  .panel{padding:20px 18px}
  .hero:has(.gallery.hung) .panel{margin:100px 0 60px}
  /* the folded hero on a phone: most of the wall, not a full empty screen */
  .hero.wall-only:has(.gallery.hung){min-height:min(72vh,640px)}
  .panel h1{font-size:clamp(2rem,9.5vw,var(--s5))}
  form.measure .row .btn{width:100%}
  .v-links .btn,.share-row .btn,.snippet-row .btn,.ad-links .btn{width:100%}
  .tile-host{font-size:.85rem}
  .tile-pitch{display:none}
  .grid.ads{grid-template-columns:1fr}
  .thumb{flex-basis:180px}
  .fame{flex-basis:260px}
  .stats{gap:10px 24px}
  .stat{min-width:8rem}
}

/* ── v5: super modern, agile (owner, 2026-09-17) ──────────────────────────
   Every country's tops: a market picker of pills (ISO code + name, never a
   flag), the headline that follows the market, the podium and the grid of one
   market cut instantly from a board in hand. Cards enter as they scroll into
   view and scores count up once; skeletons stand where cards will. Bolder
   display type, layered depth, the glow on #1, a thin border on every
   screenshot, no blur anywhere. Every bit is a class — the CSP allows no
   style attribute — and reduced motion draws the final state at once. */
.kicker{font-family:var(--text);font-weight:700;font-size:var(--s0);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);flex-basis:100%;margin-bottom:-8px}
.wall-head{align-items:flex-end}
.wall-head h1{font-size:clamp(var(--s5),6.5vw,var(--s8));letter-spacing:-.04em;line-height:.95}
.pills{display:flex;gap:6px;margin:18px 0 0;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:3px 0}
.pills::-webkit-scrollbar{display:none}
.pills:empty{display:none}
.pill{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 14px 0 9px;border-radius:999px;border:1.5px solid var(--rule);background:var(--panel);color:var(--ink);font-family:var(--text);font-weight:600;font-size:var(--s0);line-height:1;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .12s}
.pill:hover{border-color:var(--ink)}
.pill:active{transform:scale(.97)}
.pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill-code{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.06em;padding:4px 6px 3px;border-radius:6px;background:var(--wash);line-height:1}
.pill.on .pill-code{background:rgb(128 128 128/.28)}
.pill:not(:has(.pill-code)){padding-left:14px}
.pill-n{font-variant-numeric:tabular-nums;opacity:.7}
.markets-home{margin-top:36px}
.top-section{margin-top:28px}
/* skeletons — the shape of what is coming, a sweep of light across each */
.skeleton{display:grid;gap:20px 16px;margin-top:22px}
.sk-pod-grid{grid-template-columns:1.45fr 1fr 1fr;gap:20px}
.sk-cc-grid{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.sk{display:grid;gap:12px;padding-bottom:16px;border-radius:calc(var(--r-tile) + 6px);background:var(--panel);overflow:hidden;box-shadow:var(--shadow-2)}
.sk-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--tile-bg);overflow:hidden}
.sk-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255/.32) 50%,transparent 70%);transform:translateX(-100%);animation:sweep 1.4s ease-in-out infinite}
@keyframes sweep{to{transform:translateX(100%)}}
.sk-line{display:block;height:12px;border-radius:6px;background:var(--wash);margin-left:14px}
/* the thin border every screenshot wears, over the picture, under the medal */
.pod-shot::after,.cc-shot::after,.rc-shot::after,.thumb-shot::after,.fame-shot::after{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 1px var(--rule);pointer-events:none}
.thumb-shot,.fame-shot{position:relative}
/* cards enter as they scroll in; hover still lifts them afterwards */
@media (prefers-reduced-motion:no-preference){
  .cc.reveal,.rc.reveal{opacity:0;transform:translateY(18px)}
  .cc.reveal.in,.rc.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .35s ease,box-shadow .2s}
  .cc.reveal.in:hover,.cc.reveal.in:focus-within{transform:translateY(-3px)}
  .rc.reveal.in:hover{transform:translateY(-2px)}
}
/* the line a local owner screenshots: Top 2 in Latvia */
.market-root{margin-top:26px}
.market-root:empty{display:none}
.market-line{display:inline-flex;align-items:baseline;gap:.3em;flex-wrap:wrap;font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--good-text);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.3,1)}
.market-root.in .market-line{opacity:1;transform:none}
.market-line-l,.market-line-w{font-size:clamp(var(--s3),4vw,var(--s5))}
.market-line-n{font-size:clamp(var(--s7),11vw,6rem);font-variant-numeric:tabular-nums}
.stat-n{font-size:var(--s6)}
main{padding-bottom:96px}
@media (max-width:900px){
  .sk-pod-grid{grid-template-columns:1fr 1fr}
  .sk-pod-grid .sk:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .pills{margin-inline:calc(-1*var(--gap));padding-inline:var(--gap)}
  .sk-pod-grid{grid-template-columns:1fr}
  .wall-head .kicker{margin-bottom:-4px}
}
@media (max-width:560px){
  .sk-cc-grid{grid-template-columns:1fr}
}