/* Approval Rating (approvalrating.us): "the newspaper's polling desk". Own design system; see SPEC.md section 5. */
@font-face { font-family: "Hedvig Serif"; src: url("/assets/fonts/hedvig-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("/assets/fonts/funnel-sans.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("/assets/fonts/funnel-sans-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

:root {
  --paper: #F4EFE6; --paper-2: #EBE4D6; --paper-3: #E2D9C7; --white: #FFFDF8;
  --ink: #1C1B19; --ink-2: #4A4740; --ink-3: #6E6A60; --rule: #1C1B19; --hair: #CFC6B4;
  --plum: #5A2147; --plum-2: #7A3463; --plum-tint: #EADBE3;
  --ochre: #B7791F; --ochre-tint: #F3E3C3; --slate: #61748A; --slate-tint: #D9DFE5;
  --ok: #2F5E3A; --warn: #8A4B0F;
  --serif: "Hedvig Serif", Georgia, "Times New Roman", serif;
  --sans: "Funnel Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --measure: 66ch; --gut: clamp(16px, 4vw, 40px); --max: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); font-feature-settings: "tnum" 1; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--plum-2); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 820px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--rule); background: var(--paper); }
.mast__strip { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0 8px; font-size: 13px; color: var(--ink-2); letter-spacing: .01em; }
.mast__strip a { color: var(--ink); text-decoration: none; font-weight: 600; }
.mast__strip a:hover { text-decoration: underline; }
.mast__pass b { color: var(--plum); }
.mast__name { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0 14px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--hair); }
.mast__name:hover { color: var(--ink); }
.mast__glyph { width: 46px; height: 46px; flex: none; }
.mast__word { font: 400 clamp(34px, 6vw, 62px)/1 var(--serif); letter-spacing: -.01em; }
.mast__word small { font: 600 .32em/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--plum); vertical-align: .9em; margin-left: .25em; }
.mast__motto { text-align: center; font: italic 400 14px/1.3 var(--sans); color: var(--ink-3); margin: -6px 0 12px; }
.sections { border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); }
.sections__in { display: flex; justify-content: center; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sections__in::-webkit-scrollbar { display: none; }
.sections a { flex: none; padding: 11px 16px 10px; font: 600 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sections a:hover { color: var(--plum); }
.sections a[aria-current] { border-bottom-color: var(--plum); color: var(--plum); }

/* ---------- type ---------- */
.kicker { font: 700 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--plum); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 14px; height: 14px; background: var(--plum); flex: none; }
.kicker--plain::before { display: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; margin: 0; }
.h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04; }
.h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
.h3 { font-size: 24px; line-height: 1.2; }
.deck { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin: 16px 0 0; }
.small { font-size: 14px; color: var(--ink-3); }
.note { font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 8px; margin: 14px 0 0; }
.note b { color: var(--ink); }
p { margin: 0 0 1em; }
.prose { max-width: var(--measure); }
.prose h2 { font-size: 30px; margin: 1.6em 0 .4em; }
.prose h3 { font-size: 22px; margin: 1.4em 0 .3em; }
.prose li { margin-bottom: .4em; }
.num { font-family: var(--serif); font-feature-settings: "lnum" 1, "tnum" 1; }
.hl { background: linear-gradient(transparent 58%, var(--ochre-tint) 58%); }

/* ---------- buttons + forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font: 700 15px/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--plum); border-color: var(--plum); color: var(--white); }
.btn--plum { background: var(--plum); border-color: var(--plum); color: var(--white); }
.btn--plum:hover { background: var(--ink); border-color: var(--ink); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn--link { background: none; border: 0; color: var(--plum); padding: 0; min-height: 0; text-decoration: underline; font-weight: 600; }
.btn--link:hover { background: none; color: var(--plum-2); }
.btn--danger { background: transparent; border-color: var(--warn); color: var(--warn); }
.btn--danger:hover { background: var(--warn); color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.fld { display: block; margin: 0 0 14px; }
.fld > span { display: block; font: 700 13px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; color: var(--ink-2); }
.fld em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
input[type=text], input[type=number], input[type=date], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink); font: 400 17px/1.3 var(--sans); border-radius: 0; font-feature-settings: "tnum" 1;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--ochre-tint); border-color: var(--plum); }
.fld--bad input, .fld--bad select { border-color: var(--warn); background: #FFF6EC; }
.fld__err { display: block; color: var(--warn); font-size: 14px; margin-top: 5px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 10px 0; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--plum); }
.answers { border-collapse: collapse; width: 100%; margin: 0 0 8px; }
.answers th { text-align: left; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 8px 6px 0; }
.answers td { padding: 0 8px 8px 0; vertical-align: top; }
.answers td:last-child { width: 28%; padding-right: 0; }
.more { margin: 4px 0 14px; }
.more summary { cursor: pointer; font-weight: 700; color: var(--plum); font-size: 15px; }
.flash { padding: 12px 16px; border-left: 6px solid var(--ok); background: var(--white); margin: 0 0 18px; font-weight: 600; }
.flash--err { border-left-color: var(--warn); color: var(--warn); }

/* ---------- front page ---------- */
.front { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--rule); }
.front__lead { padding: 34px 36px 34px 0; border-right: 1px solid var(--rule); }
.front__rail { padding: 34px 0 34px 30px; }
.front__lead .h1 { max-width: 16ch; }
.story { margin-top: 26px; }
.rail-h { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border-bottom: 3px double var(--rule); padding-bottom: 8px; margin: 0 0 4px; }
.edition { list-style: none; padding: 0; margin: 0 0 26px; }
.edition li { border-bottom: 1px solid var(--hair); }
.edition a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; text-decoration: none; color: var(--ink); }
.edition a:hover h3 { color: var(--plum); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.edition svg { width: 40px; height: 40px; }
.edition h3 { font-size: 20px; line-height: 1.15; margin-bottom: 3px; }
.edition p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.subbox { border: 1.5px solid var(--ink); background: var(--white); padding: 18px 18px 16px; position: relative; }
.subbox::before { content: "Reader Pass"; position: absolute; top: -11px; left: 14px; background: var(--plum); color: var(--white); font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; }
.subbox__price { font: 400 44px/1 var(--serif); margin: 10px 0 2px; }
.subbox__price small { font: 500 15px/1 var(--sans); color: var(--ink-2); }
.subbox__alt { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; }
.subbox ul { margin: 0 0 12px; padding-left: 18px; font-size: 15px; }
.preview { display: block; border-top: 1px dashed var(--ink-3); padding-top: 10px; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.preview b { color: var(--ok); }

.three { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.three > div { padding: 30px 28px 30px 0; }
.three > div + div { padding-left: 28px; border-left: 1px solid var(--hair); }
.three__n { font: 400 64px/1 var(--serif); color: var(--plum); display: block; margin-bottom: 10px; }
.three h3 { font-size: 23px; margin-bottom: 8px; }
.three p { color: var(--ink-2); font-size: 16px; margin: 0; }
.band { padding: 40px 0; border-bottom: 1px solid var(--rule); }
.band--tint { background: var(--paper-2); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); margin-top: 22px; }
.teaser { padding: 18px 22px 6px 0; text-decoration: none; color: var(--ink); }
.teaser + .teaser { padding-left: 22px; border-left: 1px solid var(--hair); }
.teaser h3 { font-size: 22px; margin: 10px 0 6px; }
.teaser p { color: var(--ink-2); font-size: 15px; }
.teaser:hover h3 { color: var(--plum); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.teaser svg { width: 100%; height: 34px; }
.neutral { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0; font-size: 15px; color: var(--ink-2); }
.neutral svg { width: 28px; height: 28px; flex: none; }

/* ---------- result sheet (Poll Check, Change Check, Planner) ---------- */
.sheet { background: var(--white); border: 1.5px solid var(--ink); }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ink); background: var(--paper-2); }
.sheet__head h2, .sheet__head h3 { font: 700 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.sheet__head p { margin: 0; font-size: 13px; color: var(--ink-2); }
.sheet__body { padding: 6px 18px 16px; }
.sheet__foot { padding: 10px 18px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-2); }
.sheet__foot b { color: var(--ink); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 6.5em; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.row:last-child { border-bottom: 0; }
.row__name { font-weight: 700; overflow-wrap: anywhere; }
.row__val { text-align: right; }
.row__val .num { font-size: 26px; display: block; line-height: 1; }
.row__val small { font-size: 13px; color: var(--ink-2); }
.range { width: 100%; height: auto; display: block; }
.range line, .range rect { vector-effect: non-scaling-stroke; }
.range .axis { stroke: var(--ink-3); stroke-width: 1; }
.range .tick { stroke: var(--hair); stroke-width: 1; }
.range .band { fill: var(--slate-tint); stroke: var(--slate); stroke-width: 1.5; }
.range .dot { fill: var(--plum); }
.range .whisk { stroke: var(--slate); stroke-width: 2.5; }
.scale { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 6.5em; gap: 14px; color: var(--ink-3); padding-top: 6px; line-height: 1; }
.scale span { display: flex; justify-content: space-between; padding: 0 0.6%; }
.scale i { font-style: normal; font-size: 13px; font-variant-numeric: tabular-nums; }
.verdict { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 16px 0 4px; padding: 16px; border: 1.5px solid var(--ink); background: var(--paper); }
.stamp { justify-self: start; display: inline-block; font: 700 12px/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; border: 2px solid currentColor; transform: rotate(-2deg); white-space: nowrap; }
.stamp--in { color: var(--slate); }
.stamp--out { color: var(--plum); }
.verdict p { margin: 0; font-size: 17px; }
.verdict .big { font: 400 22px/1.25 var(--serif); display: block; margin-bottom: 4px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); margin-top: 14px; }
.facts div { padding: 12px 12px 4px 0; }
.facts div + div { padding-left: 12px; border-left: 1px solid var(--hair); }
.facts dt { font: 700 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font: 400 26px/1.1 var(--serif); }

.toolhead { padding: 34px 0 26px; border-bottom: 1px solid var(--rule); }
.tool { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 40px; padding: 30px 0 44px; align-items: start; }
.tool__form { border-top: 3px double var(--rule); padding-top: 16px; }
.tool__out { position: sticky; top: 16px; }
.ladder { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15px; }
.ladder th, .ladder td { text-align: left; padding: 9px 8px 9px 0; border-bottom: 1px solid var(--hair); }
.ladder th { font: 700 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ladder td.num, .ladder th.r, .ladder td.r { text-align: right; }
.ladder tr.is-hit td { background: var(--ochre-tint); font-weight: 700; }
.bar { display: block; height: 8px; background: var(--slate-tint); }
.bar i { display: block; height: 8px; background: var(--slate); }

/* ---------- guide ---------- */
.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding: 34px 0 50px; }
.toc { position: sticky; top: 16px; align-self: start; border-top: 3px double var(--rule); padding-top: 10px; }
.toc ol { margin: 0; padding-left: 20px; font-size: 15px; }
.toc li { margin: 0 0 8px; }
.lesson { border-top: 1px solid var(--rule); padding: 26px 0 8px; }
.lesson:first-child { border-top: 0; padding-top: 0; }
.lesson h2 { font-size: 32px; margin: 0 0 12px; }
.lesson__n { font: 700 12px/1 var(--sans); letter-spacing: .16em; color: var(--plum); text-transform: uppercase; display: block; margin-bottom: 8px; }
.method { border-left: 6px solid var(--plum); background: var(--white); padding: 14px 18px; margin: 16px 0; font-size: 15px; }
.method b:first-child { display: block; font: 700 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--plum); margin-bottom: 6px; }
.sources { font-size: 14px; color: var(--ink-2); }
.sources li { margin-bottom: 6px; }
.formula { font: 400 19px/1.4 var(--serif); background: var(--paper-2); padding: 10px 14px; display: inline-block; margin: 4px 0 10px; overflow-wrap: anywhere; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ink); background: var(--white); margin: 30px 0; }
.plan { padding: 26px 26px 22px; }
.plan + .plan { border-left: 1.5px solid var(--ink); background: var(--plum-tint); }
.plan h2 { font-size: 30px; }
.plan__amt { font: 400 56px/1 var(--serif); margin: 14px 0 4px; }
.plan__amt small { font: 500 16px/1 var(--sans); color: var(--ink-2); }
.plan ul { padding-left: 20px; margin: 14px 0; }
.plan li { margin-bottom: 6px; }
.compare { width: 100%; border-collapse: collapse; margin: 10px 0 30px; background: var(--white); }
.compare caption { text-align: left; font: 400 26px/1.2 var(--serif); padding-bottom: 10px; }
.compare th, .compare td { padding: 11px 12px; border-bottom: 1px solid var(--hair); text-align: left; }
.compare thead th { border-bottom: 2px solid var(--ink); font: 700 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.faq details { border-top: 1px solid var(--hair); padding: 12px 0; }
.faq summary { cursor: pointer; font: 400 21px/1.3 var(--serif); }
.faq p { margin: 8px 0 0; color: var(--ink-2); max-width: var(--measure); }

/* ---------- poll book ---------- */
.bookhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 30px 0 20px; border-bottom: 1px solid var(--rule); }
.keybox { background: var(--white); border: 1.5px solid var(--ink); padding: 16px 18px; margin: 20px 0; }
.keybox h2 { font-size: 22px; margin-bottom: 6px; }
.keyrow { display: flex; gap: 8px; }
.keyrow input { font-size: 14px; }
.tracklist { list-style: none; padding: 0; margin: 10px 0 20px; border-top: 3px double var(--rule); }
.tracklist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--hair); padding: 16px 0; }
.tracklist h3 { font-size: 24px; }
.tracklist h3 a { color: var(--ink); text-decoration: none; }
.tracklist h3 a:hover { color: var(--plum); text-decoration: underline; }
.tracklist p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.tracklist .num { font-size: 34px; text-align: right; display: block; line-height: 1; }
.limit { font-size: 14px; color: var(--ink-2); background: var(--ochre-tint); padding: 8px 12px; display: inline-block; }
.chart { width: 100%; height: auto; display: block; background: var(--white); border: 1.5px solid var(--ink); }
.chart--phone { display: none; }
.chart text { font: 500 13px var(--sans); fill: var(--ink-2); }
.chart .grid { stroke: var(--hair); stroke-width: 1; }
.chart .base { stroke: var(--ink); stroke-width: 1.5; }
.chart .whisk { stroke: var(--slate); stroke-width: 2; }
.chart .whisk--b { stroke: var(--ochre); }
.chart .dot { fill: var(--plum); }
.chart .dot--b { fill: var(--ochre); }
.chart .sec { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.chart .avg { stroke: var(--ochre); stroke-width: 3; stroke-dasharray: 8 5; }
.chart .avg--b { stroke: var(--plum); }
.chart .lab { font-weight: 700; fill: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-2); margin: 10px 0 0; padding: 0; list-style: none; }
.legend i { display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: middle; }
.legend .k-dot { background: var(--plum); width: 10px; border-radius: 50%; }
.legend .k-rng { background: var(--slate); height: 3px; }
.legend .k-avg { background: var(--ochre); height: 3px; }
.legend .k-sec { border: 2px solid var(--ink); width: 10px; border-radius: 50%; }
.legend .k-b { background: var(--ochre); width: 10px; border-radius: 50%; }
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--white); }
.ledger th, .ledger td { padding: 10px 10px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.ledger thead th { border-bottom: 2px solid var(--ink); font: 700 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ledger td.r, .ledger th.r { text-align: right; }
.ledger .num { font-size: 19px; }
.tablewrap { overflow-x: auto; border: 1.5px solid var(--ink); position: relative; }
.cols > * { min-width: 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: start; margin: 24px 0 40px; }
.panel { background: var(--white); border: 1.5px solid var(--ink); padding: 18px; }
.panel h2 { font-size: 24px; margin-bottom: 12px; }
.stack > * + * { margin-top: 22px; }
.danger { border-top: 1px solid var(--hair); margin-top: 26px; padding-top: 16px; }

/* ---------- footer ---------- */
.foot { border-top: 3px double var(--rule); margin-top: 0; padding: 30px 0 22px; background: var(--paper-2); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot h2 { font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; }
.foot nav a { display: block; color: var(--ink); text-decoration: none; padding: 4px 0; font-size: 15px; }
.foot nav a:hover { color: var(--plum); text-decoration: underline; }
.foot__brand p { font-size: 14px; color: var(--ink-2); max-width: 44ch; }
.foot__word { font: 400 28px/1 var(--serif); margin-bottom: 10px; display: block; }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--ink); margin-top: 26px; padding-top: 12px; font-size: 13px; color: var(--ink-2); }
.foot__base p { margin: 0; }

/* ---------- 404 / misc ---------- */
.pagehead { padding: 40px 0 28px; border-bottom: 1px solid var(--rule); }
.page { padding: 30px 0 50px; }
.center { text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .front { grid-template-columns: minmax(0, 1fr); }
  .front__lead { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .front__rail { padding: 26px 0; }
  .tool { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tool__out { position: static; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .guide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .toc { position: static; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .mast__strip { font-size: 12px; }
  .mast__strip .mast__date { display: none; }
  .mast__strip { justify-content: center; }
  .mast__glyph { width: 34px; height: 34px; }
  .mast__name { padding: 8px 0 10px; }
  .mast__motto { display: none; }
  .sections__in { justify-content: flex-start; padding: 0 var(--gut); }
  .sections .wrap { padding: 0; }
  .sections a { padding: 12px 12px 10px; font-size: 13px; }
  .three, .teasers { grid-template-columns: 1fr; }
  .three > div, .three > div + div { padding: 20px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .three > div:first-child { border-top: 0; }
  .teaser, .teaser + .teaser { padding: 16px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .row, .scale { grid-template-columns: minmax(0, 1fr) 5.5em; gap: 4px 10px; }
  .row .range { grid-column: 1 / -1; grid-row: 2; }
  .scale > span:first-child { display: none; }
  .scale { grid-template-columns: 1fr; }
  .verdict { grid-template-columns: 1fr; gap: 10px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1.5px solid var(--ink); }
  .chart--wide { display: none; }
  .chart--phone { display: block; }
  .foot__grid { grid-template-columns: 1fr; }
  .tracklist li { grid-template-columns: 1fr; }
  .tracklist .num { text-align: left; }
  .answers td:last-child { width: 34%; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; font-size: 12pt; }
  .mast__strip, .sections, .foot nav, .actions, .noprint, .skip, form { display: none !important; }
  .mast { border: 0; }
  .sheet, .chart, .tablewrap { border-color: #000; }
  .chart--phone { display: none !important; }
  .chart--wide { display: block !important; }
  .tool { grid-template-columns: 1fr; }
  a { color: #000; text-decoration: none; }
  .foot { background: #fff; padding: 8px 0 0; }
}
.sheet__body .h3 { margin-top: 24px; }

/* v1.1.0 · AdEngine banner (adengine.us). One labelled slot between the main content and the footer, on the public pages only
   (the controllers opt in). The label, the reserved height and the spacing are all on the <ins>, so when tag.js (or ae-size.js)
   hides a slot it cannot fill, the label and the space go with it and the page closes up exactly as before. 110px = 16px label
   + 4px gap + 90px banner; 270px on phones (300x250). The footer has no top margin, so the slot keeps 48px below itself and 40px
   above. Label: the paper's small-caps rail style (Funnel Sans 700, spaced capitals) in --ink-2 on paper (8:1). display stays in
   this file and is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 var(--gut); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 40px auto 48px; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 700 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin: 32px auto 40px; } }
@media print { .ae-slot { display: none; } }