/* Prep Liberty article (reading) pages — Marginalia Bold.
   Loads AFTER home-marginalia.css (tokens/header/buttons/auth/footer come from there);
   this file holds the reading-page pieces from the approved mock
   (docs/design/options/article/index.html). Reading grammar: near-silent —
   no ticker, no rotation in the reading column. */

/* the reading column is narrow */
/* Header/footer keep the site-wide 1080px wrap (constant across pages);
   only the reading column narrows, via .narrow. */
.narrow{max-width:720px;margin:0 auto}

/* breadcrumb strip under the ink header */
.crumbs{border-bottom:1.5px solid var(--line);background:var(--paper-deep)}
.crumbs-in{max-width:760px;margin:0 auto;padding:11px 20px;font-size:13px;font-weight:700;color:var(--ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs-in a:hover{color:var(--red)}

/* article head */
.art-head{padding:38px 0 8px}
@media(min-width:900px){.art-head{padding:56px 0 10px}}
.meta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.chip{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1.5px solid rgba(25,31,51,.25);padding:4px 9px;border-radius:3px}
.rt{font-size:13px;font-weight:700;color:var(--ink-soft)}
.art-head h1{font-size:clamp(26px,4.6vw,40px);font-weight:800;line-height:1.18;letter-spacing:-.02em}

/* save (bookmark) action — hidden until auth.js confirms login */
.save-actions{margin-left:auto}
.vault-btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--ink);background:var(--hl);border:2px solid var(--ink);padding:8px 12px;cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .12s;flex:none;min-height:44px}
.vault-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(25,31,51,.4)}
.vault-btn svg{width:14px;height:14px}
.vault-btn.bookmarked svg{fill:var(--ink)}
@media (prefers-reduced-motion:reduce){.vault-btn{transition:none}.vault-btn:hover{transform:none}}

/* sections */
.sec{margin-top:44px}
@media(min-width:900px){.sec{margin-top:56px}}
.sec-tab{display:inline-block;background:var(--ink);color:var(--hl);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;transform:rotate(-1deg);box-shadow:2px 2px 0 var(--hl);margin-bottom:18px}

/* What-Happened numbered rows */
.pt{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 0;border-bottom:1.5px solid var(--line);align-items:start}
.pt:last-child{border-bottom:0}
.pt-n{font-size:13px;font-weight:800;color:var(--red);padding-top:4px}
.pt p{font-size:16.5px;line-height:1.7;color:var(--body)}

/* static-topic note cards */
.topic{margin-top:44px}
.topic-over{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.topic-card{background:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--paper-deep)}
.topic-head{padding:20px 22px 0}
.topic-head h2{font-size:20px;font-weight:800;line-height:1.3}
.topic-card .body{padding:14px 22px 22px}

/* reading body (shared by cards, intros, and fallback sections) */
.body p{font-size:16px;line-height:1.75;color:var(--body);margin-top:12px;max-width:66ch}
.body p:first-child{margin-top:0}
.body h3,.body h4{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:20px}
.body ul,.body ol{margin:10px 0 4px;padding-left:2px;list-style:none;display:grid;gap:9px}
.body li{font-size:15.5px;line-height:1.65;color:var(--body);padding-left:22px;position:relative;max-width:64ch}
.body li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;background:var(--hl);border:1.5px solid var(--ink);transform:rotate(-4deg)}
.body strong{color:var(--ink)}
.body table{border-collapse:collapse;margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--body)}
.body th,.body td{border:1.5px solid var(--line);padding:8px 12px;text-align:left}
.body th{font-weight:800;color:var(--ink)}

/* Connection callout: hl-wash bg, red left edge */
.connect{margin:20px 22px 22px;background:var(--hl-wash);border:1.5px solid rgba(25,31,51,.2);border-left:4px solid var(--red);padding:14px 16px}
.connect-label{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.connect-label svg{width:14px;height:14px;flex:none}
.connect p{font-size:15px;line-height:1.7;color:var(--body);margin-top:8px;max-width:64ch}
.connect p:first-of-type{margin-top:8px}

/* Key Facts card: yellow offset shadow, red arrow bullets */
.facts-card{background:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--hl);padding:22px}
.facts-card ul{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.facts-card li{font-size:15.5px;line-height:1.65;color:var(--body);padding-left:26px;position:relative;max-width:64ch}
.facts-card li::before{content:"\2192";position:absolute;left:0;color:var(--red);font-weight:800}
.facts-card strong{color:var(--ink)}

/* generic fallback section body (odd h2s, unstructured articles) */
.plain-card{background:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--paper-deep);padding:20px 22px}

/* continue reading: prev / next note cards */
.next-nav{display:grid;gap:14px;margin-top:52px}
@media(min-width:640px){.next-nav{grid-template-columns:1fr 1fr}}
.next-nav a{display:block;background:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--paper-deep);padding:15px 17px;transition:transform .14s ease,box-shadow .14s ease}
.next-nav a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--hl)}
@media (prefers-reduced-motion:reduce){.next-nav a{transition:none}.next-nav a:hover{transform:none}}
.next-nav .kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.next-nav .t{font-size:14.5px;font-weight:700;line-height:1.4}

/* closing quiz CTA */
.after{margin:52px 0 28px;background:var(--hl);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:26px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.after-txt{flex:1;min-width:230px}
.after-txt b{font-size:17px;font-weight:800;display:block}
.after-txt span{font-size:13.5px;font-weight:700;opacity:.7}
.after .btn{padding:13px 22px}