/* Hot issue pages. Builds on /site.css. Generated by scripts/seo_pages.mjs */
.issue { max-width: 780px; margin: 0 auto; padding: 24px 20px 48px; overflow-wrap: anywhere }
.crumbs { font-size: 15px; color: var(--muted); margin: 0 0 18px } .crumbs a { color: inherit }
.issue h1 { font: 400 clamp(38px, 6.6vw, 62px)/1.04 var(--display); letter-spacing: -.015em; margin: 0 0 22px; overflow-wrap: normal }
.issue h2 { font: 700 clamp(24px, 3.4vw, 28px)/1.2 var(--head); margin: 52px 0 14px; padding-top: 14px; border-top: 2px solid var(--ink) }
.now { font: 400 clamp(20px, 2.6vw, 23px)/1.5 var(--head); border-left: 4px solid var(--red); padding-left: 18px; margin: 0 0 26px }
.stat { display: grid; gap: 4px; margin: 0 0 26px; padding: 18px 20px; background: var(--tint); border: 1px solid var(--line) }
.stat b { font: 400 clamp(40px, 7vw, 56px)/1 var(--display); color: var(--red) }
.stat span { color: var(--muted); font-size: 17px; line-height: 1.5 }
.eli5 { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; margin: 0 0 28px }
.eli5 b { color: var(--red); font-weight: 600 } .eli5 p { margin: 6px 0 0 }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 0 }
.cta-row small { color: var(--muted); font-size: 15px }
.opts { list-style: none; margin: 0; padding: 0; counter-reset: o }
.opts > li { counter-increment: o; padding: 18px 0 20px; border-bottom: 1px solid var(--line) }
.opts h3 { font: 700 21px/1.3 var(--head); margin: 0 0 6px; display: flex; gap: 12px }
.opts h3::before { content: counter(o); font: 400 30px/1 var(--display); color: var(--red); flex: none; min-width: 20px }
.opts p { margin: 0 0 10px; color: var(--ink); font-size: 17px }
.opts .backers { font-size: 15px; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center }
.opts .backers span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500 }
.opts .backers i { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15) }
.opts .gov { display: inline-block; font-size: 13px; font-weight: 600; color: var(--red); background: var(--red-soft); padding: 2px 8px; border-radius: 3px; margin: 0 0 8px }
.opts .pick { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 15px }
.chain { list-style: none; margin: 0; padding: 0 }
.chain li { padding: 14px 0 14px 18px; border-left: 2px solid var(--line); position: relative; margin-left: 6px }
.chain li::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--red) }
.chain b { display: block; font: 700 18px/1.35 var(--head) } .chain p { margin: 4px 0 0; font-size: 17px }
.chain small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px }
.views { display: grid; gap: 14px; margin: 0 }
.views > div { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 4px; padding: 16px 18px }
.views h3 { font: 700 19px/1.3 var(--head); margin: 0 0 8px }
.views ul, .plain { margin: 0; padding-left: 20px } .views li, .plain li { margin: 0 0 8px; font-size: 17px }
.sources { margin: 0; padding-left: 22px; font-size: 16px } .sources li { margin: 0 0 6px } .sources small { color: var(--muted) }
.asof { color: var(--muted); font-size: 15px; margin: 18px 0 0 }
.game { background: var(--ink); color: var(--paper); border-radius: 4px; padding: 28px 24px; margin: 52px 0 0 }
.game h2 { border: 0; padding: 0; margin: 0 0 10px; color: var(--paper); font: 400 clamp(30px, 5vw, 38px)/1.08 var(--display) }
.game p { margin: 0 0 18px; opacity: .9 }
.game .btn { background: var(--paper); color: var(--ink) } .game .btn:hover { background: var(--red); color: #fff }
.more { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink) }
.more li { border-bottom: 1px solid var(--line) }
.more a { display: block; padding: 14px 0; text-decoration: none } .more a:hover b { color: var(--red) }
.more b { display: block; font: 700 20px/1.3 var(--head) } .more span { display: block; color: var(--muted); font-size: 16px; margin-top: 4px }
.more em { font-style: normal; color: var(--red); font-weight: 600; font-size: 14px; display: block; margin-bottom: 2px }
.lede { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; margin: 0 0 8px; max-width: 46ch }
@media (min-width: 720px) { .views { grid-template-columns: 1fr 1fr } .game { padding: 34px 36px } }