/* ───────────────────────────────────────────────────────────── The Rings — section styles. rg-* token system. Aged paper and natural ink, candlelight rather than screen. No purples or blues (the Map owns those), no dark treatment (the Mycelium owns that), no gradients, no flourishes. The ring glyph replaces horizontal rules everywhere here. ───────────────────────────────────────────────────────────── */ html.rg-root { --rg-paper: #F5EEDF; --rg-ink: #2B2825; --rg-faded: #8A7F6E; --rg-sienna: #9C5226; --rg-ring: #C8BCA4; /* set by the app from Tweaks */ --rg-body-font: 'Literata', Georgia, serif; --rg-display-font: 'Besley', Georgia, serif; --rg-type-scale: 1; background: var(--rg-paper); } /* ─── night ─── The other thing a Kindle gives you: a warm near-black, soft off-white ink. Not the Mycelium's loam (that ground is its own) — this is paper with the lamp off. Toggled by The Rings' own reading-mode control, which sets . */ html.rg-root[data-mode="dark"] { --rg-paper: #181513; --rg-ink: #D9CEBB; --rg-faded: #8C8170; --rg-sienna: #D08653; --rg-ring: #463E33; } body.rg-body { background: var(--rg-paper); color: var(--rg-ink); font-family: var(--rg-body-font); font-optical-sizing: auto; transition: background-color 0.45s ease, color 0.45s ease; } .rg-body ::selection { background: rgba(156, 82, 38, 0.16); } html.rg-root[data-mode="dark"] .rg-body ::selection { background: rgba(208, 134, 83, 0.26); } /* ───────── tree rings in the grain ───────── Fixed canvas behind everything; content layers ride above it. */ .rg-rings-bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 1; pointer-events: none; } .rg-head, .rg-page, .rg-foot { position: relative; z-index: 1; } /* the reading-mode button — quiet, matches the nav links */ .rg-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin-left: 2px; border: none; background: transparent; color: var(--rg-faded); cursor: pointer; border-radius: 50%; transition: color 0.2s ease, background-color 0.2s ease; } .rg-mode-toggle:hover { color: var(--rg-sienna); background: color-mix(in srgb, var(--rg-ring), transparent 60%); } /* ───────── chrome ───────── */ .rg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 28px; } .rg-brand { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--rg-faded); } .rg-brand:hover { color: var(--rg-ink); } .rg-brand .sep { margin: 0 8px; color: var(--rg-ring); } .rg-brand .sub { color: var(--rg-ink); } .rg-head nav { display: flex; gap: 22px; align-items: baseline; } .rg-head nav a { font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--rg-faded); } .rg-head nav a:hover { color: var(--rg-sienna); } .rg-foot { margin-top: 0; padding: 56px 28px 64px; text-align: center; } .rg-foot-brand { font-family: 'Jost', sans-serif; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rg-faded); margin-bottom: 12px; } .rg-foot a { font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--rg-faded); text-decoration: none; } .rg-foot a:hover { color: var(--rg-sienna); } /* ───────── shared page column ───────── */ .rg-page { max-width: 44rem; margin: 0 auto; padding: 9vh 24px 10vh; } .rg-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rg-faded); margin-bottom: 20px; } .rg-back { display: inline-block; font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--rg-faded); margin-bottom: 7vh; } .rg-back:hover { color: var(--rg-sienna); } /* ───────── ring glyphs ───────── */ .rg-mark circle, .rg-break svg circle { fill: none; stroke: var(--rg-ring); stroke-width: 1; transition: stroke 0.25s ease; } .rg-break { display: flex; justify-content: center; margin: 3.2em 0; } .rg-break svg { display: block; } .rg-break svg circle { stroke-width: 1.2; } .rg-colophon { display: flex; justify-content: center; margin: 5em 0 3.5em; } /* ───────── landing ───────── */ .rg-landing-head { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; } .rg-title { font-family: var(--rg-display-font); font-weight: 500; font-size: clamp(2.1rem, 1.7rem + 1.6vw, 3rem); line-height: 1.12; letter-spacing: 0.01em; color: var(--rg-ink); } .rg-intro { max-width: 33em; } .rg-intro p { font-size: calc(clamp(1.0625rem, 1rem + 0.45vw, 1.1875rem) * var(--rg-type-scale)); line-height: 1.65; color: var(--rg-ink); text-wrap: pretty; margin: 0 0 1.2em; } .rg-work-list { margin-top: 9vh; } .rg-work-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; text-decoration: none; padding: 18px 0; } .rg-work-row h2 { font-family: var(--rg-display-font); font-weight: 500; font-size: 1.55rem; color: var(--rg-ink); transition: color 0.25s ease; } .rg-work-row:hover h2 { color: var(--rg-sienna); } .rg-work-row:hover .rg-mark circle { stroke: var(--rg-sienna); } .rg-desc { font-family: var(--rg-body-font); font-style: italic; font-size: 1.05rem; color: var(--rg-faded); } .rg-work-meta { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--rg-faded); } /* ───────── work landing ───────── */ .rg-work-head { margin-bottom: 5vh; } .rg-work-head .rg-desc { display: block; margin-top: 10px; font-size: 1.15rem; } .rg-framing { max-width: 31em; margin-top: 4vh; } .rg-framing p { font-size: calc(1.0625rem * var(--rg-type-scale)); line-height: 1.65; color: var(--rg-ink); text-wrap: pretty; margin: 0 0 1.1em; } .rg-ch-list { list-style: none; margin-top: 7vh; padding: 0; } .rg-ch-list a { display: flex; align-items: baseline; gap: 20px; text-decoration: none; padding: 16px 0; } .rg-ch-num { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; letter-spacing: 0.14em; color: var(--rg-faded); } .rg-ch-list h3 { font-family: var(--rg-display-font); font-weight: 500; font-size: 1.25rem; color: var(--rg-ink); transition: color 0.25s ease; } .rg-ch-list a:hover h3 { color: var(--rg-sienna); } .rg-ch-date { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--rg-faded); } /* ───────── chapter ───────── */ .rg-chapter { padding-top: 11vh; } .rg-ch-head { text-align: center; margin-bottom: 8vh; } .rg-ch-work { display: inline-block; font-family: 'Jost', sans-serif; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--rg-faded); margin-bottom: 22px; } .rg-ch-work:hover { color: var(--rg-sienna); } .rg-ch-title { font-family: var(--rg-display-font); font-weight: 500; font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem); line-height: 1.15; color: var(--rg-ink); } .rg-prose { max-width: 33em; margin: 0 auto; font-size: calc(clamp(1.0625rem, 1rem + 0.45vw, 1.25rem) * var(--rg-type-scale)); line-height: 1.7; } .rg-prose p { margin: 0 0 1.45em; text-align: left; /* ragged right, never justified */ text-wrap: pretty; color: var(--rg-ink); } .rg-prose a { color: var(--rg-sienna); } /* end-of-chapter nav: the only chrome a reader meets */ .rg-ch-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px; max-width: 33em; margin: 0 auto; } .rg-ch-nav a { font-family: 'Jost', sans-serif; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--rg-faded); } .rg-ch-nav a:hover { color: var(--rg-sienna); } .rg-ch-nav .prev { text-align: left; } .rg-ch-nav .home { text-align: center; } .rg-ch-nav .next { text-align: right; } /* ───────── paged reader (Kindle-style) ───────── The chapter becomes a fixed, full-viewport book: no document scroll, the prose flowed into page-width columns that slide. */ html.rg-paged, html.rg-paged body.rg-body { height: 100%; overflow: hidden; } .rg-paged-shell { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; } .rg-reader-region { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; padding: 3.4vh 0 1vh; } .rg-reader { width: min(86vw, 40rem); height: 100%; margin: 0 auto; overflow: hidden; } /* the sliding track carries the motion (NOT the multicol element). The slide is run via the Web Animations API in JS — no CSS transition here, because a CSS transform-transition on this element fails to commit in some engines. */ .rg-track { height: 100%; } /* the column track. column-width / column-gap / height are set inline by the app from the live reader size. */ .rg-pages { box-sizing: border-box; height: 100%; column-fill: auto; font-size: calc(clamp(1.0625rem, 1rem + 0.45vw, 1.25rem) * var(--rg-type-scale)); line-height: 1.7; } .rg-pages p { margin: 0 0 1.4em; /* no top margin: page tops stay aligned */ text-align: left; text-wrap: pretty; color: var(--rg-ink); } .rg-pages a { color: var(--rg-sienna); } /* the chapter opener, on page one */ .rg-opener { margin: 0 0 2em; break-inside: avoid; } .rg-opener .rg-ch-work { display: block; margin-bottom: 14px; } .rg-opener .rg-ch-title { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); line-height: 1.16; } /* colophon + end-nav ride to the last page, kept whole */ .rg-pages .rg-colophon { margin: 2.4em 0 1.6em; break-inside: avoid; justify-content: flex-start; } .rg-ch-end { display: flex; flex-direction: column; gap: 14px; margin-top: 1.2em; break-inside: avoid; } .rg-ch-end a, .rg-ch-end .rg-end-note { font-family: 'Jost', sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--rg-faded); } .rg-ch-end a:hover { color: var(--rg-sienna); } .rg-end-note { text-transform: none; letter-spacing: 0; font-style: italic; } /* the page-turn zones at the reader's edges */ .rg-turn { position: absolute; top: 0; bottom: 0; width: clamp(44px, 13%, 150px); display: flex; align-items: center; border: none; background: transparent; cursor: pointer; color: var(--rg-faded); opacity: 0.26; transition: opacity 0.2s ease, color 0.2s ease; z-index: 5; } .rg-turn-prev { left: 0; justify-content: flex-start; padding-left: 10px; } .rg-turn-next { right: 0; justify-content: flex-end; padding-right: 10px; } .rg-turn:hover { opacity: 0.72; color: var(--rg-sienna); } .rg-turn:disabled { opacity: 0; pointer-events: none; } /* the quiet pager bar */ .rg-pager { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px)); } .rg-pager-count { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--rg-faded); min-width: 5em; text-align: center; } .rg-pager-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--rg-faded); border-radius: 50%; transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; } .rg-pager-arrow:hover { color: var(--rg-sienna); background: color-mix(in srgb, var(--rg-ring), transparent 60%); } .rg-pager-arrow:disabled { opacity: 0.22; pointer-events: none; } /* slow fade on chapter load — the only motion in the scroll layout */ @media (prefers-reduced-motion: no-preference) { .rg-fade { animation: rgFade 0.9s ease both; } } @keyframes rgFade { from { opacity: 0; } to { opacity: 1; } } /* ───────── mobile ───────── */ @media (max-width: 640px) { .rg-head { padding: 18px 20px; } .rg-page { padding-left: 22px; padding-right: 22px; } .rg-work-meta, .rg-ch-date { margin-left: 0; flex-basis: 100%; } .rg-ch-nav { grid-template-columns: 1fr; justify-items: center; row-gap: 22px; } .rg-ch-nav .prev, .rg-ch-nav .next { text-align: center; } /* paged reader: edge zones stay tappable but slim; swipe carries the rest */ .rg-turn { width: 56px; opacity: 0.3; } .rg-reader { width: 88vw; } }