/* ============================================================
understand-veganism.com — Phase 1 visual refinements
Verified against the live page (real class names & tokens).
Load AFTER the main stylesheet so it wins the cascade.
Add to :
============================================================ */
:root{
--font-read:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",monospace;
--ink-soft:#4a4642;
}
/* 1 + 2. Body copy -> proportional, constrained line length.
Verified: paragraphs are bare
in .principle/.container/section. */
section p, section li,
.container p, .container li,
.principle p, .principle li{
font-family:var(--font-read);
font-size:1.0625rem;
line-height:1.75;
letter-spacing:0;
}
.container, .principle, section .container{
max-width:760px;
margin-left:auto;
margin-right:auto;
}
/* keep mono where it looks good */
.mini-toc-label, .mini-toc-current,
.eyebrow, .subtitle, .label,
blockquote, .pull-quote, .quote,
code, kbd{ font-family:var(--font-mono); }
/* 3. Rein in the red. */
h2, h3{ color:var(--black) !important; }
.stat-number, .stat .number{ color:var(--ink-soft); }
.stat-number.is-key, .stat.is-key .number{ color:var(--red); }
footer a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
footer a:hover{ color:var(--red); }
/* 4. Nav: lighten + anchor (verified .nav-tabs, fixed, flex-end). */
.nav-tabs{
justify-content:center;
flex-wrap:wrap;
gap:4px 10px;
background:rgba(30,28,26,0.92);
backdrop-filter:saturate(140%) blur(6px);
padding:8px 16px;
width:100%;
box-sizing:border-box;
}
.nav-tabs a{
background:transparent;
border:0;
color:var(--white);
font-size:0.72rem;
padding:6px 8px;
opacity:0.82;
border-bottom:2px solid transparent;
transition:opacity .15s, border-color .15s;
}
.nav-tabs a:hover,
.nav-tabs a[aria-current="page"]{ opacity:1; border-bottom-color:var(--red); }
/* 5. Language selector: small + quiet (was a full-width red bar). */
select{
background:transparent !important;
color:var(--white) !important;
border:1px solid rgba(247,243,238,0.35) !important;
max-width:200px;
margin:0 auto;
font-family:var(--font-mono);
font-size:0.8rem;
padding:6px 12px;
border-radius:4px;
}
/* 6. CTA hierarchy. Add class="cta-secondary" to the
"Leslie Cross Archive" and "SIC" buttons in the markup;
leave "Take the Quiz" as the primary red button.
Also relabel "SIC" -> "Single-issue campaigns". */
.cta-button{ display:inline-block; padding:16px 40px; }
.cta-button.cta-secondary{
background:transparent;
color:var(--white);
border:2px solid rgba(247,243,238,0.4);
}
.cta-button.cta-secondary:hover{ border-color:var(--red); color:var(--red); }
/* 7. Reading-progress indicator: stop nav overlap + clipping. */
.mini-toc-current{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:40vw;
}
.mini-toc-label{ white-space:nowrap; }
/* 8. Remove doubled bullet+numeral on the big-numeral lists.
Real class is .key-points;