/* Debatery shared styles, editorial version. Light serif headings, clean sans body, cream bands, square buttons, navy footer.
   Navy = Pro, brick = Con, ochre = small highlights. */
:root {
  --blue: #1f3a5f; --blue-soft: #e8edf3;
  --red: #a8322d; --red-soft: #f6e9e6;
  --yellow: #c8902a; --yellow-soft: #f3ecdc;
  --ink: #1d2433;
  --bg: #ffffff; --bg-alt: #f3ecdc; --card: #ffffff; --fg: #1d2433; --muted: #5b6170; --line: #ddd6c6;
  --link: #1f3a5f; --prop: #1f3a5f; --opp: #a8322d; --ok: #2f6b45; --warn: #8a6214; --danger: #a8322d;
  --brand: #1f3a5f; --brand-deep: #1d2433; --brand-light: #8aa3c4; --accent: #c8902a; --accent-ink: #1d2433;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-motion: var(--font-display); --font-num: var(--font-display);
  --r: 2px;
  color-scheme: light;
}
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 17px; line-height: 1.65; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; line-height: 1.15; margin: 0; letter-spacing: -.005em; }
h1 { font-weight: 300; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.stripe { height: 4px; background: var(--blue); }

/* Header */
.band { background: var(--bg); color: var(--fg); }
.nav { border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 18px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo b { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: -.01em; }
.logo b i { font-style: italic; color: var(--red); }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0; padding: 0; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.nav ul a { color: var(--fg); text-decoration: none; padding: 6px 10px; display: block; border-bottom: 2px solid transparent; }
.nav ul a:hover { border-bottom-color: var(--line); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--blue); color: var(--blue); }
.page-head { background: var(--bg-alt); }
.page-head .wrap { padding-block: 48px 52px; display: grid; gap: 12px; }
.page-head .eyebrow { color: var(--red); }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 300; }
.page-head p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 18px; }
main .wrap { padding-block: 40px 72px; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 0; padding: 12px 22px; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.accent { background: var(--yellow); color: #1d2433; }
.btn.red { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 0; padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 0; background: var(--bg-alt); color: var(--muted); border: 0; }
select, input[type="search"], input[type="number"], input[type="url"], textarea { font: inherit; padding: 10px 14px; border: 1px solid #c9c2b2; border-radius: 0; background: var(--card); color: var(--fg); }
.note { font-size: 14px; color: var(--muted); }

/* Topic tags: quiet tints, square */
.t-blue { background: var(--blue-soft); color: var(--blue); }
.t-red { background: var(--red-soft); color: var(--red); }
.t-yellow { background: var(--yellow-soft); color: var(--warn); }
.t-ink { background: #eef0f3; color: var(--fg); }

/* Footer */
footer.site { background: var(--blue); color: rgba(255,255,255,.8); font-size: 15px; }
footer.site .wrap { padding-block: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer.site b { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 20px; }
footer.site a { color: #fff; }
@media (prefers-reduced-motion: no-preference) { .chip, .btn, .nav ul a { transition: background-color .15s, border-color .15s; } }

/* Style: poster */
:root{--blue:#0033cc;--blue-soft:#e5eaff;--red:#e10600;--red-soft:#ffe6e5;--yellow:#ffd400;--yellow-soft:#fff6c2;--ink:#111;
--bg:#fff;--bg-alt:#fff6c2;--card:#fff;--fg:#111;--muted:#444;--line:#111;--link:#0033cc;--prop:#0033cc;--opp:#e10600;--warn:#6b5800;
--font-display:"Anton",Impact,sans-serif;--font-ui:"Archivo",Arial,sans-serif;}
h1,h2,h3{font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1}
h3{text-transform:none;font-family:var(--font-ui);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.stripe{height:10px;background:#ffd400}
.nav{border-bottom:3px solid #111}
.logo b{font-size:32px;text-transform:uppercase;letter-spacing:.01em}
.logo b i{font-style:normal;color:#e10600}
.nav ul{font-weight:800;letter-spacing:.04em}
.nav ul a[aria-current="page"]{background:#ffd400;color:#111;border-bottom-color:#111}
.page-head{background:#ffd400;border-bottom:3px solid #111}
.page-head .eyebrow{color:#111}
.page-head h1{font-size:clamp(44px,8vw,96px)}
.btn{font-weight:800;border:3px solid #111}
.btn.primary{background:#111;color:#ffd400}
.btn.accent{background:#ffd400}
.chip{border:2px solid #111;font-weight:700}
.chip[aria-pressed="true"]{background:#111;border-color:#111;color:#ffd400}
.t-blue,.t-red,.t-yellow,.t-ink{border:2px solid #111}
.t-yellow{background:#ffd400;color:#111}
input[type="search"],select{border:3px solid #111 !important}
footer.site{background:#111;border-top:10px solid #ffd400}
footer.site b{font-family:"Anton";text-transform:uppercase;letter-spacing:.02em}
html body .hero{background:#ffd400;border-bottom:3px solid #111}
html body .hero h1{font-size:clamp(56px,9vw,128px);line-height:.92;font-weight:400}
html body .hero h1 .p,html body .hero h1 .c{font-style:normal}
html body .hero .lede{color:#111;font-weight:500}
html body .themes a{background:#fff;border:2px solid #111;padding:4px 10px;font-weight:700;color:#111}
html body .vs{border:3px solid #111;box-shadow:8px 8px 0 #111}
html body .vs h2{text-transform:none;font-family:var(--font-ui);font-weight:800;letter-spacing:-.02em}
html body .stats{background:#111;color:#fff;border:0}
html body .stats b{color:#ffd400;font-family:"Anton";font-weight:400;font-size:40px}
html body section.alt{background:#fff6c2;border-block:3px solid #111}
html body .card{border:3px solid #111 !important;box-shadow:5px 5px 0 #111}
html body .tool{border:3px solid #111;box-shadow:5px 5px 0 #111}
html body .tool.b{background:#0033cc !important;color:#fff !important}
html body .tool.r{background:#e10600 !important;color:#fff !important}
html body .tool.y{background:#ffd400 !important}
html body .tool.b span,html body .tool.r span{color:#fff}
html body .tool b{font-family:"Anton";font-weight:400;text-transform:uppercase}
html body .inside li i{color:#e10600 !important;font-family:"Anton";font-weight:400}
html body .fmt{border:3px solid #111}
html body .fmt .abbr{font-family:"Anton";font-weight:400;font-size:40px}
html body .tm li{border:3px solid #111;border-left:10px solid #ffd400}
html body .tm li q{font-family:var(--font-ui);font-weight:700}

html body .inside li i{border:0 !important}

/* Poster: new home and pages */
html body .intro{background:#ffd400;border-bottom:3px solid #111}
html body .intro h1{font-size:clamp(46px,8vw,104px);line-height:.95;max-width:16ch}
html body .intro p{color:#111;font-weight:500}
html body .featured{border-top:0}
html body .feat h2{font-family:"Anton";text-transform:uppercase;font-weight:400;line-height:1}
html body .feat-top .eyebrow{color:#e10600}
html body .both{border:3px solid #111;box-shadow:8px 8px 0 #111}
html body .both .p{border-right:3px solid #111}
@media (max-width:720px){html body .both .p{border-right:0;border-bottom:3px solid #111}}
html body .both h3{font-family:var(--font-ui);font-weight:800}
html body .both li::before{font-family:"Anton";font-weight:400}
html body .both li b{font-family:var(--font-ui);font-weight:800;font-size:19px;text-transform:none;letter-spacing:-.01em}
html body .debates{border:0;gap:20px}
html body .deb{border:3px solid #111;box-shadow:5px 5px 0 #111}
html body .deb .pic{border-bottom:3px solid #111;margin:-18px -20px 6px}
html body .deb h3{font-size:20px}
html body .deb .yn span{font-weight:800;border:2px solid #111}
html body .theme{border:3px solid #111;box-shadow:5px 5px 0 #111}
html body .theme .pic{border-bottom:3px solid #111}
html body .theme h3{font-family:"Anton";text-transform:uppercase;font-weight:400;font-size:28px;letter-spacing:.01em}
html body .theme li a{font-weight:600}
html body .theme li a::before{background:#e10600}
html body .art{border-top:6px solid #111}
html body .art h3,html body .lead h2,html body .rel h3,html body .link-box h3{font-family:var(--font-ui);text-transform:none;font-weight:800;letter-spacing:-.02em;line-height:1.15}
html body .art.planned{border-top-color:#999}
html body .lead .pic{border:3px solid #111}
html body .toolstrip{background:#111;border:0}
html body .toolstrip b{color:#ffd400}
html body .toolstrip a{color:#fff}
html body .head h2{font-weight:400}
html body .art-head h1{font-size:clamp(40px,6vw,72px)}
html body .body h2{font-family:var(--font-ui);font-weight:800;text-transform:none}
html body .rel,html body .link-box{border:3px solid #111;box-shadow:5px 5px 0 #111}
html body .rel-flag{background:#ffd400;border:2px solid #111;color:#111;text-decoration:none;font-weight:600}
html body .tool{border:3px solid #111;box-shadow:5px 5px 0 #111}
html body .tool b{font-family:"Anton";text-transform:uppercase}
html body .theme h2 .pic{border:2px solid #111}
html body .ths .chip small{font-weight:700}
html body .deb{grid-template-rows:auto auto 1fr auto}
html body .deb .pill{justify-self:start}
html body .themes .theme a{border:0;background:none;box-shadow:none}
html body .themes .theme h3 a{padding:0}
html body .themes .theme li a{padding:0 0 0 14px;font-weight:600}
html body .themes .theme .all{padding:12px 18px 16px}
html body .themes .theme > a{padding:0;display:block}
html body .row q{font-family:var(--font-ui);font-weight:700;font-size:18px;text-transform:none;letter-spacing:-.01em}
html body .row{grid-template-columns:minmax(0,1fr) 260px}
@media (max-width:640px){html body .row{grid-template-columns:1fr}}