:root {
  --bg:#f7f3ec; --card:#fffdf9; --text:#16130f; --muted:#7a7268; --line:#e6dfd3;
  --gold:#a8834a; --ink:#16130f; --on-ink:#f7f3ec;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f0d0b; --card:#1a1714; --text:#f3eee6; --muted:#9a9187; --line:#2b2621; --gold:#d1ad72; --ink:#000; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { display:block; max-width:100%; }
.serif { font-family:"Cormorant Garamond", Georgia, serif; font-weight:500; }
.wrap { max-width:1240px; margin:0 auto; padding:0 16px; }
.eyebrow { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.meta { color:var(--muted); font-size:13px; }

/* Header */
header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-size:26px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; }
nav a { margin-left:26px; text-decoration:none; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
nav a:hover { color:var(--text); }
@media (max-width:700px) { .logo { font-size:21px; } nav a { margin-left:14px; font-size:11px; letter-spacing:.06em; } nav a.wide { display:none; } }
.progress { position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--gold); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; font:600 13px Inter, sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border:0; cursor:pointer; }
.btn-light { background:#fff; color:#111; }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-dark { background:var(--text); color:var(--bg); }
.btn:hover { transform:translateY(-1px); }

/* Score ring: set --s (0-10) inline */
.ring { --size:64px; width:var(--size); height:var(--size); border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--gold) calc(var(--s) * 10%), rgba(127,127,127,.25) 0); }
.ring b { width:calc(var(--size) - 8px); height:calc(var(--size) - 8px); border-radius:50%; display:grid; place-items:center; background:var(--card); color:var(--text); font:600 calc(var(--size) * .3) "Cormorant Garamond", Georgia, serif; }
.ring.lg { --size:104px; }
.ring.sm { --size:46px; }

/* Hero */
.hero { position:relative; min-height:min(86vh, 760px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#111; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:zoom 18s ease-out both; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.88)); }
.hero .wrap { position:relative; z-index:1; width:100%; padding-bottom:56px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; }
.hero h1 { font-size:clamp(40px, 7vw, 92px); line-height:.95; margin:12px 0 16px; max-width:900px; }
.hero p { font-size:19px; max-width:560px; margin:0 0 26px; color:rgba(255,255,255,.85); }
.hero .eyebrow { color:#f0d29d; }
.hero .ring b { background:rgba(0,0,0,.55); color:#fff; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
@keyframes zoom { from { transform:scale(1.12); } to { transform:scale(1); } }
@media (max-width:700px) { .hero .wrap { grid-template-columns:1fr; gap:0; } .hero .wrap > span { order:-1; margin-bottom:8px; } .hero .ring.lg { --size:72px; } .hero p { font-size:17px; } }

/* Section headings */
.sec { margin:88px 0 0; }
.sec-head { display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.sec-head h2 { font-size:clamp(32px, 4.5vw, 52px); line-height:1; margin:6px 0 0; }

/* Horizontal scroller */
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:min(78%, 300px); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; scrollbar-width:thin; }
.rail > * { scroll-snap-align:start; }
.pick { position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; color:#fff; text-decoration:none; background:#222; }
.pick img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.pick:hover img { transform:scale(1.06); }
.pick::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.8)); }
.pick div { position:absolute; left:18px; right:18px; bottom:18px; z-index:1; }
.pick h3 { font-size:26px; line-height:1.05; margin:6px 0 0; }
.pick .eyebrow { color:#f0d29d; }
.pick .ring { position:absolute; top:14px; right:14px; z-index:1; }

/* Category chips */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chips button { font:500 13px Inter, sans-serif; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer; }
.chips button[aria-pressed="true"] { background:var(--text); color:var(--bg); border-color:var(--text); }

/* Magazine grid */
.mag { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 28px; }
.story { text-decoration:none; color:inherit; display:block; }
.story .ph { position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:#222; }
.story .ph img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.story:hover .ph img { transform:scale(1.05); }
.story .ring { position:absolute; left:14px; bottom:14px; }
.story .play { position:absolute; right:14px; bottom:14px; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; }
.story .play::before { content:""; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; }
.story h3 { font-size:28px; line-height:1.08; margin:14px 0 6px; }
.story p { margin:0 0 6px; color:var(--muted); font-size:15px; }
.story.big { grid-column:span 2; grid-row:span 2; }
.story.big .ph { aspect-ratio:16/11; }
.story.big h3 { font-size:clamp(32px, 4vw, 46px); }
@media (max-width:900px) { .mag { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .mag { grid-template-columns:minmax(0,1fr); } .story.big { grid-column:auto; grid-row:auto; } }
.load { display:flex; justify-content:center; margin-top:40px; }

/* Dark video band */
.band { background:var(--ink); color:var(--on-ink); padding:80px 0; margin-top:96px; }
.band .meta { color:#9a9187; }
.reel { position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#222; border:0; padding:0; cursor:pointer; color:#fff; text-align:left; }
.reel img { width:100%; height:100%; object-fit:cover; opacity:.8; transition:opacity .3s, transform .6s; }
.reel:hover img { opacity:1; transform:scale(1.04); }
.reel span { position:absolute; left:16px; right:16px; bottom:16px; font:500 22px/1.1 "Cormorant Garamond", Georgia, serif; }
.reel i { position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(6px); display:grid; place-items:center; }
.reel i::before { content:""; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:5px; }
.band .rail { grid-auto-columns:min(55%, 230px); }

/* Leaderboard */
.board { display:grid; gap:2px; }
.row { display:grid; grid-template-columns:48px 72px minmax(0,1fr) auto; gap:18px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.row .n { font:500 40px "Cormorant Garamond", Georgia, serif; color:var(--gold); }
.row img { width:72px; height:72px; object-fit:cover; border-radius:12px; }
.row h3 { font:500 24px/1.1 "Cormorant Garamond", Georgia, serif; margin:0 0 6px; }
.bar { height:4px; background:var(--line); border-radius:4px; overflow:hidden; }
.bar i { display:block; height:100%; width:0; background:var(--gold); transition:width 1.2s cubic-bezier(.2,.7,.2,1); }
.row.in .bar i { width:calc(var(--s) * 10%); }
.row .sc { font:600 30px "Cormorant Garamond", Georgia, serif; }
@media (max-width:600px) { .row { grid-template-columns:30px 56px minmax(0,1fr) auto; gap:12px; } .row img { width:56px; height:56px; } .row .n { font-size:28px; } }

/* How we rate */
.method { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
.method div { padding-top:18px; border-top:1px solid var(--text); }
.method b { font:500 48px "Cormorant Garamond", Georgia, serif; color:var(--gold); }
.method h3 { margin:4px 0; font:600 13px Inter, sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.method p { margin:0; color:var(--muted); }
@media (max-width:700px) { .method { grid-template-columns:1fr; } }

/* CTA */
.cta { margin:96px 0; padding:56px 24px; border-radius:24px; text-align:center; background:var(--card); border:1px solid var(--line); }
.cta h2 { font-size:clamp(32px, 5vw, 56px); line-height:1; margin:10px 0 12px; }
.cta p { color:var(--muted); margin:0 0 24px; }

/* Ad slots: fixed size so the layout doesn't jump when ads load */
.ad { display:flex; align-items:center; justify-content:center; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:10px; letter-spacing:.22em; text-transform:uppercase; }
.ad-top { height:90px; margin:40px 0 0; }
.ad-feed { height:250px; grid-column:1/-1; }
.ad-inline { height:250px; margin:40px 0; }
.ad-side { height:600px; position:sticky; top:88px; }

/* Video modal */
dialog { width:min(1000px, 94vw); padding:0; border:0; border-radius:16px; background:#000; overflow:hidden; }
dialog::backdrop { background:rgba(0,0,0,.85); }
dialog .player { aspect-ratio:16/9; }
dialog form { position:absolute; top:8px; right:8px; z-index:1; }
dialog form button { width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.2); color:#fff; font-size:20px; cursor:pointer; }
.player { aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden; }
.player iframe { width:100%; height:100%; border:0; display:block; }
.player .empty { height:100%; display:grid; place-items:center; color:#888; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s, transform .8s; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } .hero img { animation:none; } * { transition:none !important; } }

/* Full review page */
.r-hero { position:relative; min-height:72vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#111; }
.r-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.r-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85)); }
.r-hero .wrap { position:relative; z-index:1; width:100%; padding-bottom:48px; }
.r-hero h1 { font-size:clamp(40px, 7vw, 84px); line-height:.95; margin:10px 0 12px; max-width:900px; }
.r-hero .eyebrow { color:#f0d29d; }
.r-hero .meta { color:rgba(255,255,255,.75); }
.r-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; margin:56px auto 0; }
@media (max-width:960px) { .r-layout { grid-template-columns:minmax(0,1fr); } .ad-side { display:none; } }
.quick { display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; padding:28px; border-radius:20px; background:var(--card); border:1px solid var(--line); }
.quick p { margin:4px 0 0; font:500 26px/1.2 "Cormorant Garamond", Georgia, serif; }
.subs { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); grid-column:1/-1; }
.subs div { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.subs strong { display:block; font:600 26px "Cormorant Garamond", Georgia, serif; color:var(--text); letter-spacing:0; }
.pc { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:32px 0; }
.pc > div { padding:22px; border-radius:16px; background:var(--card); border:1px solid var(--line); }
.pc ul { margin:10px 0 0; padding-left:20px; }
@media (max-width:600px) { .quick { grid-template-columns:1fr; } .pc { grid-template-columns:1fr; } }
.gallery { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin:32px 0; }
.gallery img { width:100%; height:100%; object-fit:cover; border-radius:14px; aspect-ratio:4/3; }
.specs { width:100%; border-collapse:collapse; font-size:15px; }
.specs th, .specs td { text-align:left; padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.specs th { color:var(--muted); font-weight:500; width:40%; }

/* Text pages and article body */
.page, .body { font-size:18px; line-height:1.8; }
.page { max-width:720px; margin:64px auto 96px; }
.page h1 { font-size:clamp(38px, 6vw, 60px); line-height:1; margin:10px 0 24px; }
.page h2, .body h2 { font-size:34px; line-height:1.1; margin:48px 0 10px; }
.page .lead, .body .lead { font-size:21px; color:var(--muted); }

footer { border-top:1px solid var(--line); padding:40px 0; color:var(--muted); font-size:13px; margin-top:96px; }
footer a { margin-right:20px; }
footer p { max-width:640px; }

/* "Worth it?" verdict labels */
.worth { display:inline-block; margin:0 0 8px; padding:3px 9px; border-radius:999px; font:600 10px Inter, sans-serif; letter-spacing:.12em; text-transform:uppercase; vertical-align:middle; }
.worth.yes { background:#2f6b4f; color:#fff; }
.worth.maybe { background:#b7862d; color:#fff; }
.worth.no { background:#9b3b32; color:#fff; }
.eyebrow .worth { margin:0 0 0 6px; }

/* People are asking */
.asking { margin:48px 0 0; }
.qs { display:flex; gap:10px; overflow-x:auto; padding:12px 0 6px; scrollbar-width:none; }
.qs a { flex:none; padding:12px 18px; border-radius:999px; background:var(--card); border:1px solid var(--line); text-decoration:none; font-size:15px; white-space:nowrap; }
.qs a:hover { border-color:var(--gold); }
.qs a span { color:var(--gold); }

/* Head to head */
.vs { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; }
.side { display:grid; grid-template-columns:160px minmax(0,1fr); gap:20px; padding:20px; border-radius:20px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:inherit; }
.side.win { border-color:var(--gold); }
.side img { width:160px; height:100%; min-height:200px; object-fit:cover; border-radius:12px; }
.side h3 { font-size:26px; line-height:1.1; margin:0 0 4px; }
.vrow { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; text-transform:capitalize; color:var(--muted); }
.vrow b { color:var(--text); font:600 18px "Cormorant Garamond", Georgia, serif; }
.vrow.total { border:0; color:var(--text); font-weight:600; }
.vrow.total b { font-size:24px; color:var(--gold); }
.vs-mark { font-size:44px; color:var(--gold); font-style:italic; }
@media (max-width:900px) { .vs { grid-template-columns:1fr; } .vs-mark { text-align:center; } }
@media (max-width:500px) { .side { grid-template-columns:1fr; } .side img { width:100%; min-height:0; aspect-ratio:4/3; } }

/* Quick answers accordion */
.faq { border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary { cursor:pointer; list-style:none; padding:14px 0; font:500 24px/1.2 "Cormorant Garamond", Georgia, serif; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold); }
.faq[open] summary::after { content:"–"; }
.faq p { margin:0 0 16px; }