:root {
  --bg: #000;
  --panel: #0d0d0d;
  --line: #1f1f1f;
  --text: #fff;
  --muted: #a3a3a3;
  --accent: #e8ff3a;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Archivo', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--text); }
img { max-width: 100%; display: block; }
p + p { margin-top: .8em; }
.muted { color: var(--muted); }

/* Top bar & header */
.topbar { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); text-align: center; }
.age-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px; border: 2px solid #e11d2e; border-radius: 50%; color: #fff; font: 700 11px var(--body); flex-shrink: 0; }
.age-badge--lg { min-width: 40px; height: 40px; font-size: 14px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 32px; }
.brand { font: 400 clamp(34px, 5vw, 56px)/1 var(--display); letter-spacing: .5px; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font: 400 18px var(--display); text-transform: uppercase; text-decoration: none; letter-spacing: .3px; }
.nav a:hover, .nav a.active { color: var(--accent); }
.nav-toggle { display: none; background: none; border: 1px solid #fff; color: #fff; font: 16px var(--display); padding: 6px 12px; cursor: pointer; }

/* Split layout (Conrad Stel) */
.split { display: grid; grid-template-columns: 40% 1fr; gap: 48px; padding: 24px 32px 64px; }
.split-side { position: sticky; top: 24px; align-self: start; }
.split-side p { color: #e5e5e5; font-size: 14px; }
.side-visual { aspect-ratio: 4/3; background: radial-gradient(circle at 30% 30%, #2a2a2a, #050505 70%); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; margin-bottom: 18px; overflow: hidden; }
.side-visual span { font: 400 clamp(40px, 6vw, 88px) var(--display); color: #1d1d1d; text-shadow: 0 0 1px #444; }
.side-visual span:nth-child(2), .side-visual span:nth-child(3) { color: #3a0d10; }
.side-title { font: 400 30px/1.1 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.side-links { display: flex; gap: 24px; margin-top: 18px; }
.side-links a { font: 400 18px var(--display); text-transform: uppercase; text-decoration: none; }
.side-links a:hover { color: var(--accent); }
.side-logo { background: var(--panel); padding: 40px 28px; margin-bottom: 18px; }
.score { font: 400 18px var(--display); text-transform: uppercase; margin-bottom: 16px; }
.score span { font-size: 54px; color: var(--accent); }
.facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-bottom: 14px; }
.facts dt, .facts dd { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { color: var(--muted); }

.intro { margin-bottom: 20px; }
.eyebrow { font: 400 15px var(--display); text-transform: uppercase; color: var(--accent); letter-spacing: .6px; margin-bottom: 6px; }
.eyebrow a { color: inherit; text-decoration: none; }
h1 { font: 400 clamp(32px, 4vw, 46px)/1.05 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.lead { font-size: 17px; color: #e5e5e5; margin-bottom: 14px; }
.section-title { font: 400 clamp(26px, 3vw, 34px)/1.1 var(--display); text-transform: uppercase; margin: 44px 0 16px; }

/* Entries */
.entry { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.entry h3 { font: 400 30px/1.1 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { color: var(--accent); }
.entry p { font-size: 14px; }
.entry-rank { color: var(--accent); font: 400 14px var(--display); text-transform: uppercase; letter-spacing: .5px; }
.entry-media { background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 32px; min-height: 220px; transition: background .2s; }
.entry-media:hover { background: #161616; }
.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 16px; }
.licence { font-size: 13px; color: var(--muted); margin-top: 10px; }
.licence a { color: var(--accent); }
.tc { font-size: 11px; color: var(--muted); margin-top: 10px; }

.btn { display: inline-block; background: var(--accent); color: #000; font: 400 17px var(--display); text-transform: uppercase; text-decoration: none; padding: 12px 22px; border: 2px solid var(--accent); cursor: pointer; letter-spacing: .4px; }
.btn:hover { background: #fff; border-color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: #555; }
.btn--ghost:hover { background: #222; border-color: #fff; }
.btn--block { display: block; text-align: center; margin-top: 14px; }
.link-arrow { font: 400 16px var(--display); text-transform: uppercase; text-decoration: none; }
.link-arrow:hover { color: var(--accent); }

.disclaimer { border-left: 3px solid var(--accent); background: var(--panel); padding: 14px 18px; font-size: 13px; color: #ddd; margin: 18px 0; }
.disclaimer a { color: var(--accent); }
.notice { background: var(--panel); border-left: 3px solid var(--accent); padding: 18px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-4 > div { background: var(--bg); padding: 18px; }
.grid-4 h4, .proscons h4 { font: 400 20px var(--display); text-transform: uppercase; margin-bottom: 6px; }
.grid-4 p { font-size: 13px; color: var(--muted); }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.proscons > div { background: var(--panel); padding: 20px; }
.proscons ul { padding-left: 18px; font-size: 14px; }

.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font: 400 20px var(--display); text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; color: var(--accent); }
.faq details[open] summary::after { content: '–'; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 0 16px; color: #ddd; font-size: 14px; }

.page { max-width: 880px; padding: 24px 32px 64px; margin-left: calc(40% + 16px); }
.page > p { color: #e5e5e5; }

.form { display: grid; gap: 16px; max-width: 560px; }
.form label { display: grid; gap: 6px; font: 400 16px var(--display); text-transform: uppercase; }
.form input, .form textarea { background: var(--panel); border: 1px solid #333; color: #fff; padding: 12px; font: 15px var(--body); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); }
.form .check { display: flex; gap: 10px; align-items: center; font: 14px var(--body); text-transform: none; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 40px 32px 28px; }
.footer-top { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.footer-top > div:first-child { flex-shrink: 0; }
.footer-top .muted { margin: 10px 0 14px; max-width: 360px; font-size: 14px; }
.brand--footer { font-size: 40px; }
.help-logos { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.help-logos a { background: #fff; padding: 8px 14px; height: 52px; display: flex; align-items: center; border-radius: 4px; }
.help-logos img { max-height: 32px; width: auto; }
.help-logos a.help-logo--dark { background: #111; border: 1px solid #333; }
.help-logos a.help-logo--dark img { height: 32px; width: 154px; max-height: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; font: 400 16px var(--display); text-transform: uppercase; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.footer-links span { color: #444; }
.footer-links--sub { margin-top: 10px; gap: 22px; font-size: 14px; color: var(--muted); }
.footer-links--sub a { color: var(--muted); }
.footer-note { display: flex; gap: 12px; align-items: flex-start; font-size: 12px; color: var(--muted); margin-top: 22px; max-width: 980px; }
.footer-copy { font-size: 12px; color: #666; margin-top: 14px; }

/* Cookie banner */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: #111; border: 1px solid #333; padding: 18px; z-index: 50; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.cookie[hidden] { display: none; }
.cookie p { font-size: 13px; color: #ddd; }
.cookie a { color: var(--accent); }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.cookie .btn { padding: 8px 18px; font-size: 15px; }

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 32px; padding: 16px 16px 48px; }
  .split-side { position: static; }
  .page { margin-left: 0; padding: 16px 16px 48px; }
  .header { padding: 16px; flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav.open { display: flex; }
  .entry, .proscons { grid-template-columns: 1fr; }
  .entry-media { order: -1; min-height: 160px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer { padding: 32px 16px 24px; }
  .footer-top { flex-wrap: wrap; }
  .help-logos { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr; }
  .topbar { font-size: 11px; }
  .brand { font-size: 26px; }
  .brand--footer { font-size: 30px; }
}