/* Most-visited page upgrades (server/top-pages.mjs). Uses the site tokens from site.css. */
.tp-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.tp-hero{padding:72px 0 28px}
.tp-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.tp-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.02em;margin:0 0 16px;max-width:16ch}
.tp-lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:60ch;margin:0 0 24px}
.tp-actions{display:flex;flex-wrap:wrap;gap:10px}
.tp-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--paper);text-decoration:none;font-weight:600;font-size:15px}
.tp-btn:hover{border-color:var(--ink)}
.tp-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tp-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.tp-section{padding:36px 0}
.tp-section h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;margin:0 0 8px}
.tp-sub{color:var(--muted);margin:0 0 18px}
.tp-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-top:18px}
.tp-pair{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tp-pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.tp-pair-imgs div{position:relative}
.tp-pair-imgs img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.tp-pair-imgs em,.tp-spec-ba em{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:rgba(15,15,13,.72);color:#fff;padding:3px 8px;border-radius:999px}
.tp-pair figcaption{display:grid;gap:4px;padding:14px 16px 16px}
.tp-pair figcaption span{color:var(--muted);font-size:14px}
.tp-pair figcaption a{color:var(--accent);font-weight:600;font-size:14px;text-decoration:none;margin-top:4px}
.tp-final{padding-bottom:72px}
.tp-final p{color:var(--muted);max-width:62ch;line-height:1.55}
.tp-spec-cta{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:20px;align-items:center;margin:28px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.tp-spec-ba{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tp-spec-ba figure{position:relative;margin:0}
.tp-spec-ba img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.tp-spec-copy h2{font-size:20px;line-height:1.25;margin:0 0 6px}
.tp-spec-copy p{margin:0 0 12px;color:var(--muted);font-size:15px;line-height:1.5}
@media(max-width:640px){.tp-spec-cta{grid-template-columns:1fr}.tp-hero{padding-top:44px}.tp-pairs{grid-template-columns:1fr}}
/* Inside the reading layout (.site-reading): beat its link colour, image margins and 950px width. */
.site-reading a.tp-btn{color:var(--ink);text-decoration:none}
.site-reading a.tp-btn-primary,.site-reading a.tp-btn-primary:hover{color:#fff}
.site-reading .tp-pair img,.site-reading .tp-spec-ba img{margin:0;max-height:none;object-fit:cover;border-radius:0}
.site-reading .tp-spec-ba img{border-radius:10px}
.site-reading:has(> .tp-hero){max-width:1180px}
.site-reading .tp-wrap{padding:0 8px}
.site-reading .tp-hero{padding-top:8px}
.site-reading .tp-pair figcaption a{color:var(--accent)}
.site-reading .tp-spec-copy h2{font-size:21px;margin:0 0 6px}
.site-reading .tp-spec-copy p,.site-reading .tp-final p{margin:0 0 14px;line-height:1.55}