/* ========================================================================== Continuance / Remaining Human — Companion web v0.1b (GitHub Pages static build) Add ONCE to the Tribefii theme's custom CSS. Every selector is namespaced `rh-` and scoped under `.rh-root`, so nothing touches or clashes with the CMS-generated page container or system styles. System fonts only. Full static pages (this build owns /). Design: dusk interior. ========================================================================== */ :root { --rh-ground: #EAEDEE; --rh-ground-warm: #ECEAE6; --rh-ink: #1B2026; --rh-ink-soft: #565E64; --rh-line: #C7CCCE; --rh-line-soft: #D8DCDD; --rh-accent: #41597A; --rh-accent-deep: #2E4260; --rh-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, "Times New Roman", serif; --rh-sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --rh-measure: 40rem; --rh-pad: 1.4rem; } html, body { margin: 0; } .rh-root, .rh-root *, .rh-root *::before, .rh-root *::after { box-sizing: border-box; } .rh-root { min-height: 100vh; background: var(--rh-ground); color: var(--rh-ink); font-family: var(--rh-serif); font-size: 1.125rem; line-height: 1.72; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .rh-root.rh-page--crossing { background: var(--rh-ground-warm); } .rh-wrap { max-width: var(--rh-measure); margin: 0 auto; padding: 0 var(--rh-pad); } .rh-masthead { padding-top: clamp(3rem, 11vh, 6.5rem); padding-bottom: 0.5rem; } .rh-kicker { font-family: var(--rh-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rh-ink-soft); margin: 0 0 1.4rem; } .rh-title { font-family: var(--rh-serif); font-weight: 400; font-size: clamp(2rem, 6.2vw, 2.75rem); line-height: 1.12; letter-spacing: -0.008em; margin: 0; } .rh-title .rh-title__sub { font-style: italic; color: var(--rh-ink-soft); } .rh-identity { font-family: var(--rh-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rh-ink-soft); margin: 0.7rem 0 0; } .rh-main { padding-bottom: clamp(3.5rem, 12vh, 7rem); } .rh-prose { margin-top: 2rem; } .rh-prose p { margin: 0 0 1.15em; } .rh-prose p:last-child { margin-bottom: 0; } .rh-prose em { font-style: italic; } .rh-lede { font-size: 1.02em; } .rh-book-title { font-style: italic; } .rh-root a { color: var(--rh-accent); text-decoration: none; border-bottom: 1px solid var(--rh-line); transition: color 0.2s ease, border-color 0.2s ease; } .rh-root a:hover { color: var(--rh-accent-deep); border-bottom-color: var(--rh-accent); } .rh-action { margin: 2.2rem 0 0.4rem; } .rh-action .rh-cta { font-size: 1.12rem; border-bottom-width: 0; } .rh-action .rh-cta strong { font-weight: 400; } .rh-action .rh-cta .rh-arrow { color: var(--rh-accent); } .rh-series-order { margin-top: 1.6rem; color: var(--rh-ink-soft); font-style: italic; font-size: 0.98em; } .rh-aside-crossing { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rh-line-soft); color: var(--rh-ink-soft); font-size: 0.98em; } .rh-prompt { text-align: center; font-style: italic; font-size: 1.28rem; margin: 2.8rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--rh-line); } .rh-prompt::after { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--rh-line); margin: 1.4rem auto 0; } .rh-doors { margin-top: 0.5rem; border-bottom: 1px solid var(--rh-line); } .rh-door { border-top: 1px solid var(--rh-line); } .rh-doors .rh-door:first-child { border-top: 0; } .rh-door__trigger { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: 100%; background: none; border: 0; padding: 1.15rem 0.15rem; margin: 0; font-family: var(--rh-serif); font-size: 1.2rem; line-height: 1.35; color: var(--rh-ink); text-align: left; cursor: pointer; transition: color 0.2s ease; } .rh-door__trigger:hover { color: var(--rh-accent-deep); } .rh-door__trigger .rh-mark { flex: none; font-family: var(--rh-sans); font-size: 1rem; color: var(--rh-ink-soft); transform: rotate(0deg); transition: transform 0.3s ease, color 0.2s ease; } .rh-door__trigger[aria-expanded="true"] .rh-mark { transform: rotate(90deg); color: var(--rh-accent); } .rh-door__trigger:hover .rh-mark { color: var(--rh-accent); } /* Rooms collapse by default; the accordion JS opens them. No-JS readers get a