/* ── DRYCE Hearth register ────────────────────────────────────────────────── A warm soft dark. Not black-on-grey "cinema" dark — closer to walking into a wood-panelled reading room at dusk: deep indigo-charcoal field, raised slate cards with brass-rim accents, off-white type tinted toward cream, and a fine paper grain that keeps the dark surfaces from reading as flat. Design intent ------------- - Field, not void. The base is a warm deep indigo around L≈10–12, dimmer than #000 but warmer, so the screen reads as architecture rather than absence. - Cream, not white. Body type is #f1e9d8 — bright enough for AA contrast against the field but warmer than #fff. - Architectural ply. Cards sit on the field as raised slate with a quiet top-edge highlight and a deep umber under-shadow; sections take an inset left stripe in the section-local accent. - Brass CTAs. Buttons keep the tactile chunk in a brass/copper gradient with a deep umber stand-off shadow — colour and weight, not glare. - Paper grain. A fine SVG fractal-noise overlay screens over the field with low alpha so the dark surface never reads as flat. */ :root { color-scheme: dark; /* Field palette — warm deep indigo / charcoal */ --rg-hearth-base: #15131e; /* primary field — warm deep indigo */ --rg-hearth-raised: #1f1b2b; /* card / raised ply */ --rg-hearth-raised-2: #25212f; /* highest ply (header / TOC) */ --rg-hearth-recessed: #0f0d16; /* recessed / shadow ply */ --rg-hearth-edge: #3b3548; /* warm slate rule */ --rg-hearth-edge-soft: rgba(180, 162, 128, 0.18); /* warm faint */ /* Type — warm cream, passes WCAG AA on field at body size */ --rg-cream: #f1e9d8; /* primary text — warm cream */ --rg-cream-quiet: #b8ad97; /* secondary text — warm bone */ --rg-cream-faint: #8a7f6c; /* metadata / decorative only */ /* Tokens consumed by the rest of the stylesheet */ --rg-bg: var(--rg-hearth-base); --rg-fg: var(--rg-cream); --rg-muted: var(--rg-cream-quiet); --rg-card: var(--rg-hearth-raised); --rg-rule: var(--rg-hearth-edge); --rg-accent-soft: color-mix( in srgb, var(--rg-hearth-edge) 32%, transparent ); /* Section-local default accent — saffron. Per-section themes near the bottom of this file override --rg-zone-accent to colour the stripe / heading tint / CTA without otherwise touching the field. */ --rg-zone-accent: var(--saffron, #f6c667); --rg-zone-sheen: color-mix(in srgb, var(--rg-zone-accent) 13%, transparent); /* Heading colour leans the section accent toward cream so colour reads as "warm light with undertones" rather than shouting on the dark field. */ --rg-heading-tint: color-mix( in srgb, var(--rg-zone-accent) 38%, var(--rg-cream) ); /* Brass / copper CTA — warm metallic with softened highlight */ --rg-btn-top: #f1d488; --rg-btn-bot: #b88420; --rg-btn-text: #1c1208; --rg-btn-border: rgba(20, 12, 4, 0.42); --rg-btn-shadow-deep: #5e3e0c; --rg-btn-inset: rgba(255, 244, 210, 0.32); --rg-btn-glow: color-mix(in srgb, #c9871e 28%, transparent); --rg-radius-lg: 18px; --rg-radius-md: 14px; /* Soft outer drop + faint top-edge gloss — "raised slate" */ --rg-shadow-soft: inset 0 1px 0 rgba(241, 233, 216, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.34), 0 18px 42px rgba(0, 0, 0, 0.42); /* Rhythm: 4px grid-aligned steps */ --rg-gap-xs: 0.5rem; --rg-gap-sm: 0.75rem; --rg-gap-md: 1rem; --rg-gap-lg: 1.5rem; --rg-read: 1.65; --rg-btn-min: 3rem; --rg-btn-font: 0.9375rem; /* Vertical decorative spine beside the article column */ --rg-axis-gutter: 1.375rem; --rg-axis-x: 0.35rem; } /* The site's background is the global dryce.css recess wash. Replace it on rg-guide pages with the warmer Hearth field, so the safe-area inset region (notch / system bars / scroll bounce) reads as the same warm dark plane as the body. */ html:has(body.rg-guide) { background-color: var(--rg-hearth-base); background-image: radial-gradient( ellipse 110% 60% at 50% 0%, rgba(246, 198, 103, 0.07) 0%, transparent 60% ), radial-gradient( ellipse 70% 55% at 100% 30%, rgba(74, 111, 165, 0.05) 0%, transparent 70% ), radial-gradient( ellipse 60% 45% at 0% 100%, rgba(196, 178, 224, 0.04) 0%, transparent 65% ), radial-gradient( ellipse 90% 35% at 50% 100%, rgba(20, 12, 4, 0.45) 0%, transparent 60% ); background-attachment: fixed; } @media (prefers-contrast: more) { :root { --rg-cream: #ffffff; --rg-cream-quiet: #e0d9c8; --rg-hearth-edge: #6a5e4b; } body.rg-guide article section { background: var(--rg-card); border: 1px solid var(--rg-hearth-edge); box-shadow: var(--rg-shadow-soft); } body.rg-guide .trust-banner, body.rg-guide header { background: var(--rg-card); border: 1px solid var(--rg-hearth-edge); } body.rg-guide .trust-banner { border-left: 4px solid var(--rg-zone-accent); } body.rg-guide section h2 { text-shadow: none; } body.rg-guide article > hr { height: 1px; opacity: 1; background: linear-gradient( 90deg, transparent, var(--rg-hearth-edge), transparent ); } body.rg-guide main#main-content { padding-left: 1rem; } body.rg-guide main#main-content::before { width: 2px; opacity: 1; border-radius: 1px; background: color-mix(in srgb, var(--rg-cream) 50%, transparent); } } body.rg-guide * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.rg-guide ::selection { background: var(--rg-accent-soft); color: var(--rg-fg); } body.rg-guide { margin: 0; font-family: "CashMarket-BoldRounded", system-ui, -apple-system, sans-serif; font-size: 1rem; font-weight: 500; line-height: var(--rg-read); letter-spacing: -0.01em; color: var(--rg-fg); /* Hearth field. Layers (back-to-front in CSS, front-to-back in paint order): warm dark field colour, three soft directional washes, and a fine fractal-noise paper grain that screens lightly over the field so dark surfaces never read as flat. */ background-color: var(--rg-hearth-base); background-image: /* Paper grain — small SVG, screens light particles into the field */ url("data:image/svg+xml;utf8,"), /* Warm hearth glow from the top — saffron whisper */ radial-gradient( ellipse 100% 38% at 50% 0%, rgba(246, 198, 103, 0.075) 0%, transparent 62% ), /* Cool slate slip on the right — recessed plane */ radial-gradient( ellipse 55% 50% at 100% 45%, rgba(74, 111, 165, 0.06) 0%, transparent 70% ), /* Lavender wash low-left — quiet horizon */ radial-gradient( ellipse 50% 40% at 0% 90%, rgba(196, 178, 224, 0.045) 0%, transparent 65% ), /* Deep warm shadow at the foot — gravity */ radial-gradient( ellipse 80% 30% at 50% 100%, rgba(0, 0, 0, 0.32) 0%, transparent 60% ); background-attachment: fixed, fixed, fixed, fixed, fixed; background-size: 180px 180px, auto, auto, auto, auto; background-blend-mode: screen, normal, normal, normal, normal; padding: max(1.125rem, env(safe-area-inset-top)) max(1.125rem, env(safe-area-inset-right)) max(2.5rem, env(safe-area-inset-bottom)) max(1.125rem, env(safe-area-inset-left)); max-width: var(--dryce-measure, 40rem); margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: reduce) { body.rg-guide { background-attachment: scroll, scroll, scroll, scroll, scroll; } } body.rg-guide h1, body.rg-guide h2, body.rg-guide h3, body.rg-guide .trust-banner h2 { font-family: inherit; font-weight: 700; letter-spacing: -0.02em; } body.rg-guide header { position: relative; padding: var(--rg-gap-lg) var(--rg-gap-md); margin-bottom: var(--rg-gap-lg); background: var(--rg-card); border: 1px solid var(--rg-rule); border-radius: var(--rg-radius-lg); box-shadow: var( --dryce-dim-inset-top, inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) ), var(--rg-shadow-soft); overflow: hidden; } body.rg-guide header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient( 90deg, color-mix(in srgb, var(--cobalt) 55%, transparent) 0%, var(--dryce-mark-aperture) 20%, color-mix(in srgb, var(--dryce-mark-core) 85%, white) 42%, #6ec4c4 58%, #c4b2e0 78%, color-mix(in srgb, var(--dryce-mark-aperture) 90%, white) 100% ); opacity: 0.92; } body.rg-guide h1 { font-size: clamp(1.3125rem, 4.2vw, 1.5rem); line-height: 1.3; margin: 0 0 var(--rg-gap-sm); text-shadow: var(--dryce-dim-type-face, none); } body.rg-guide .lede { margin: 0; color: var(--rg-muted); font-size: 1rem; line-height: var(--rg-read); font-weight: 500; } body.rg-guide .lede em { color: var(--rg-fg); opacity: 0.85; font-style: normal; font-weight: 600; } body.rg-guide .lede + .lede { margin-top: var(--rg-gap-sm); } body.rg-guide article section { --rg-zone-accent: var(--saffron); --rg-zone-sheen: color-mix(in srgb, var(--rg-zone-accent) 11%, transparent); background: linear-gradient( 168deg, color-mix(in srgb, var(--rg-zone-accent) 9%, var(--rg-card)) 0%, var(--rg-card) 52%, color-mix(in srgb, var(--rg-zone-accent) 4%, var(--rg-card)) 100% ); border: 1px solid color-mix(in srgb, var(--rg-zone-accent) 22%, var(--rg-rule)); border-radius: var(--rg-radius-md); padding: var(--rg-gap-lg) var(--rg-gap-md); margin-bottom: var(--rg-gap-md); box-shadow: var( --dryce-dim-inset-top, inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) ), var(--rg-shadow-soft), inset 3px 0 0 color-mix(in srgb, var(--rg-zone-accent) 72%, transparent); scroll-margin-top: var(--rg-gap-md); } body.rg-guide section { margin-bottom: 0; } body.rg-guide section h2 { font-size: 1.0625rem; margin: 0 0 var(--rg-gap-sm); line-height: 1.35; padding-bottom: var(--rg-gap-sm); border-bottom: 1px solid color-mix(in srgb, var(--rg-zone-accent) 38%, var(--rg-rule)); color: var(--rg-zone-accent); letter-spacing: 0.02em; text-shadow: 0 1px 0 color-mix(in srgb, var(--rg-zone-accent) 30%, transparent), 0 2px 14px color-mix(in srgb, var(--dryce-recess) 52%, transparent); } body.rg-guide section h3 { font-size: 1rem; margin: var(--rg-gap-md) 0 var(--rg-gap-sm); line-height: 1.35; color: color-mix(in srgb, var(--rg-zone-accent) 26%, var(--rg-fg)); } body.rg-guide p { margin: 0 0 var(--rg-gap-md); } body.rg-guide ul { margin: 0 0 var(--rg-gap-md); padding-left: 1.25rem; } body.rg-guide li { margin: var(--rg-gap-xs) 0; } body.rg-guide section li::marker { color: color-mix(in srgb, var(--rg-zone-accent) 48%, var(--rg-muted)); } /* Primary source titles — clear rim line (intent: disciplined attribution, not MLA cosplay) */ body.rg-guide cite { font-style: normal; font-weight: 600; letter-spacing: 0.03em; color: color-mix(in srgb, var(--rg-zone-accent) 20%, var(--rg-fg)); border-bottom: 1px solid color-mix(in srgb, var(--rg-zone-accent) 40%, transparent); text-decoration: none; padding-bottom: 0.05em; } /* Skip link: hide chrome until focused (general `a` rule below would paint it otherwise) */ body.rg-guide a.skip-link:not(:focus):not(:focus-visible) { margin: 0; padding: 0; min-height: 0; min-width: 0; background: none; border: none; border-radius: 0; box-shadow: none; color: transparent; font-size: 1px; line-height: 1; } /* Hyperlinks: tactile buttons (guide body only; chrome resets in dryce-resource-brand.css) */ body.rg-guide a { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: var(--rg-gap-xs) 0.12rem; padding: 0.75rem 1.125rem; min-height: var(--rg-btn-min); box-sizing: border-box; font-family: inherit; font-size: var(--rg-btn-font); font-weight: 700; line-height: 1.35; color: var(--rg-btn-text); text-decoration: none; text-align: center; word-break: break-word; hyphens: auto; background: linear-gradient( 165deg, var(--rg-btn-top) 0%, var(--rg-btn-bot) 92% ); border: 1px solid var(--rg-btn-border); border-radius: 14px; box-shadow: 0 5px 0 var(--rg-btn-shadow-deep), 0 10px 22px var(--rg-btn-glow), inset 0 2px 0 var(--rg-btn-inset); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease; } @media (hover: hover) { body.rg-guide a:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 7px 0 var(--rg-btn-shadow-deep), 0 14px 28px var(--rg-btn-glow), inset 0 2px 0 var(--rg-btn-inset); } } body.rg-guide a:active { transform: translateY(3px); filter: brightness(0.98); box-shadow: 0 2px 0 var(--rg-btn-shadow-deep), 0 5px 14px var(--rg-btn-glow), inset 0 2px 0 var(--rg-btn-inset); } body.rg-guide a:focus-visible { outline: 3px solid var(--rg-zone-accent); outline-offset: 3px; } @media (forced-colors: active) { body.rg-guide a:focus-visible, body.rg-guide #main-content:focus-visible { outline-color: CanvasText; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.rg-guide a { transition: none; } body.rg-guide details.link-drawer > summary::after { transition: none; } } body.rg-guide pre.address { font-family: "CashMarket-BoldRounded", system-ui, -apple-system, sans-serif; font-size: 0.875rem; font-weight: 600; line-height: 1.6; letter-spacing: 0.01em; background: linear-gradient( 160deg, rgba(255, 255, 255, 0.05), var(--rg-card) ); border: 1px solid var(--rg-rule); border-radius: 12px; padding: var(--rg-gap-md) var(--rg-gap-md); overflow-x: auto; white-space: pre-wrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); color: var(--rg-fg); } body.rg-guide hr { border: none; height: 1px; margin: var(--rg-gap-lg) 0; background: linear-gradient(90deg, transparent, var(--rg-rule), transparent); } body.rg-guide article > hr { --hr-a: #8aa4c8; --hr-b: #c9a855; height: 2px; margin: var(--rg-gap-lg) 0; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--hr-a) 78%, transparent) 18%, color-mix(in srgb, var(--hr-b) 82%, transparent) 48%, color-mix(in srgb, var(--hr-a) 65%, transparent) 82%, transparent 100% ); opacity: 0.88; } body.rg-guide article > hr:nth-of-type(5n + 1) { --hr-a: #89b4e8; --hr-b: #7db980; } body.rg-guide article > hr:nth-of-type(5n + 2) { --hr-a: #c4b2e0; --hr-b: #f6c667; } body.rg-guide article > hr:nth-of-type(5n + 3) { --hr-a: #6ec4c4; --hr-b: #d4a574; } body.rg-guide article > hr:nth-of-type(5n + 4) { --hr-a: #9bc89b; --hr-b: #d9a882; } body.rg-guide article > hr:nth-of-type(5n) { --hr-a: #d4a0b8; --hr-b: #7a9fd4; } body.rg-guide footer { font-size: 0.875rem; color: var(--rg-muted); margin-top: var(--rg-gap-lg); padding: var(--rg-gap-md) var(--rg-gap-md); border-radius: var(--rg-radius-md); border: 1px solid color-mix(in srgb, var(--cobalt) 32%, var(--rg-rule)); background: linear-gradient( 168deg, color-mix(in srgb, var(--cobalt) 11%, var(--rg-card)) 0%, var(--rg-card) 55%, color-mix(in srgb, var(--viridian) 7%, var(--rg-card)) 100% ); box-shadow: var(--rg-shadow-soft); text-align: center; line-height: var(--rg-read); } /* Skip link */ body.rg-guide .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body.rg-guide .skip-link:focus, body.rg-guide .skip-link:focus-visible { position: fixed; left: max(1rem, env(safe-area-inset-left)); top: max(1rem, env(safe-area-inset-top)); z-index: 10000; width: auto; height: auto; clip: auto; overflow: visible; padding: 0.75rem 1.25rem; margin: 0; background: linear-gradient( 165deg, var(--rg-btn-top) 0%, var(--rg-btn-bot) 100% ); color: var(--rg-btn-text); border-radius: 14px; border: 1px solid var(--rg-btn-border); box-shadow: 0 5px 0 var(--rg-btn-shadow-deep), 0 10px 22px var(--rg-btn-glow); font-family: inherit; font-weight: 700; text-decoration: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body.rg-guide main#main-content { position: relative; isolation: isolate; padding-left: var(--rg-axis-gutter); } /** * Af Klint–inflected spine: one column, gradient thread, luminous nodes. * Purely decorative (no text); kept left of the article column. */ body.rg-guide main#main-content::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: var(--rg-axis-x); width: 3px; border-radius: 2px; pointer-events: none; opacity: 0.9; background: radial-gradient( circle, color-mix(in srgb, var(--saffron) 92%, var(--color-text)) 0 2.5px, transparent 2.8px ) 50% 7% / 11px 11px no-repeat, radial-gradient( circle, color-mix(in srgb, var(--cobalt) 75%, var(--saffron)) 0 2px, transparent 2.4px ) 50% 26% / 10px 10px no-repeat, radial-gradient( circle, color-mix(in srgb, var(--saffron) 88%, transparent) 0 2.2px, transparent 2.6px ) 50% 48% / 10px 10px no-repeat, radial-gradient( circle, color-mix(in srgb, var(--viridian) 70%, var(--saffron)) 0 2px, transparent 2.4px ) 50% 68% / 10px 10px no-repeat, radial-gradient( circle, color-mix(in srgb, var(--cobalt) 55%, var(--color-text)) 0 2px, transparent 2.5px ) 50% 88% / 10px 10px no-repeat, linear-gradient( 180deg, color-mix(in srgb, var(--cobalt) 42%, transparent) 0%, color-mix(in srgb, var(--saffron) 38%, transparent) 46%, color-mix(in srgb, var(--dryce-joint) 55%, transparent) 100% ); } body.rg-guide #main-content:focus { outline: none; } body.rg-guide #main-content:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; } body.rg-guide .trust-banner { --rg-zone-accent: #7eb8d4; --rg-zone-sheen: color-mix(in srgb, var(--rg-zone-accent) 12%, transparent); background: linear-gradient( 145deg, color-mix(in srgb, var(--rg-zone-accent) 10%, var(--rg-card)) 0%, var(--rg-card) 100% ); border: 1px solid color-mix(in srgb, var(--rg-zone-accent) 26%, var(--rg-rule)); border-radius: var(--rg-radius-md); padding: var(--rg-gap-md) var(--rg-gap-md) var(--rg-gap-md); margin-bottom: var(--rg-gap-lg); box-shadow: var(--rg-shadow-soft); border-left: 4px solid var(--rg-zone-accent); } body.rg-guide .trust-banner h2 { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--rg-muted); margin: 0 0 var(--rg-gap-sm); } body.rg-guide .trust-banner dl { margin: 0; display: grid; gap: var(--rg-gap-sm); } body.rg-guide .trust-banner div { margin: 0; } body.rg-guide .trust-banner dt { font-family: inherit; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rg-muted); margin: 0 0 var(--rg-gap-xs); } body.rg-guide .trust-banner dd { margin: 0; font-size: 0.9375rem; line-height: var(--rg-read); color: var(--rg-fg); font-weight: 500; } body.rg-guide details.link-drawer { background: linear-gradient( 180deg, color-mix(in srgb, var(--rg-zone-accent) 7%, var(--rg-card)) 0%, var(--rg-card) 100% ); border: 1px solid color-mix(in srgb, var(--rg-zone-accent) 20%, var(--rg-rule)); border-radius: var(--rg-radius-md); padding: 0 var(--rg-gap-md) var(--rg-gap-md); margin: 0 0 var(--rg-gap-md); box-shadow: var(--rg-shadow-soft); } body.rg-guide details.link-drawer > summary { list-style: none; cursor: pointer; padding: var(--rg-gap-md) 0; font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--rg-fg); min-height: var(--rg-btn-min); display: flex; align-items: center; touch-action: manipulation; } body.rg-guide details.link-drawer > summary::-webkit-details-marker { display: none; } body.rg-guide details.link-drawer > summary::after { content: ""; margin-left: auto; width: 0.45rem; height: 0.45rem; border-right: 2px solid color-mix(in srgb, var(--rg-zone-accent) 40%, var(--rg-muted)); border-bottom: 2px solid color-mix(in srgb, var(--rg-zone-accent) 40%, var(--rg-muted)); transform: rotate(45deg); transition: transform 0.15s ease; opacity: 0.85; } body.rg-guide details.link-drawer[open] > summary::after { transform: rotate(-135deg); margin-top: 0.22rem; } body.rg-guide details.link-drawer ul { margin-top: 0; } body.rg-guide article section ol.steps { margin: 0 0 var(--rg-gap-md); padding-left: 1.375rem; } body.rg-guide article section ol.steps li { margin: var(--rg-gap-sm) 0; padding-left: 0.125rem; } body.rg-guide article section ol.steps li::marker { font-family: inherit; font-weight: 700; color: var(--rg-zone-accent); } body.rg-guide article section blockquote { margin: 0 0 var(--rg-gap-md); padding: var(--rg-gap-md) var(--rg-gap-md); border-left: 4px solid color-mix(in srgb, var(--rg-zone-accent) 85%, var(--rg-btn-bot)); background: var(--rg-zone-sheen); border-radius: 0 var(--rg-radius-md) var(--rg-radius-md) 0; } body.rg-guide article section blockquote p { margin: 0 0 var(--rg-gap-sm); } body.rg-guide article section blockquote p:last-child { margin-bottom: 0; } body.rg-guide #sci-camp-hill h2 { letter-spacing: 0.055em; } body.rg-guide #calls-securus h2, body.rg-guide #messages-connectnetwork h2 { letter-spacing: 0.045em; } /* Per-section register themes (accent + matched CTA gradients) */ body.rg-guide #sci-camp-hill { --rg-zone-accent: #a8b8d9; --rg-btn-top: #dce4f2; --rg-btn-bot: #6f849e; --rg-btn-shadow-deep: #455771; --rg-btn-glow: color-mix(in srgb, #a8b8d9 34%, transparent); } body.rg-guide #official-links { --rg-zone-accent: #c4b2e0; --rg-btn-top: #ebe4f7; --rg-btn-bot: #8f78b8; --rg-btn-shadow-deep: #5c4a7a; --rg-btn-glow: color-mix(in srgb, #c4b2e0 34%, transparent); } body.rg-guide #apps-stores { --rg-zone-accent: #6ec4c4; --rg-btn-top: #d4f2f0; --rg-btn-bot: #3d9090; --rg-btn-shadow-deep: #265858; --rg-btn-glow: color-mix(in srgb, #6ec4c4 34%, transparent); } body.rg-guide #before-you-start { --rg-zone-accent: #d4a574; --rg-btn-top: #f5e0c8; --rg-btn-bot: #b87a3d; --rg-btn-shadow-deep: #7a5228; --rg-btn-glow: color-mix(in srgb, #d4a574 34%, transparent); } body.rg-guide #locator { --rg-zone-accent: #89b4e8; --rg-btn-top: #dbe8fb; --rg-btn-bot: #4a7ab8; --rg-btn-shadow-deep: #2f5080; --rg-btn-glow: color-mix(in srgb, #89b4e8 34%, transparent); } body.rg-guide #visits-ivs-browser { --rg-zone-accent: var(--saffron); --rg-btn-top: #fce39a; --rg-btn-bot: #d4a012; --rg-btn-shadow-deep: #8a6309; --rg-btn-glow: color-mix(in srgb, var(--color-signal) 30%, transparent); } body.rg-guide #visits-zoom-app { --rg-zone-accent: #b5a8e0; --rg-btn-top: #eae4fb; --rg-btn-bot: #7d6bb8; --rg-btn-shadow-deep: #51467a; --rg-btn-glow: color-mix(in srgb, #b5a8e0 34%, transparent); } body.rg-guide #calls-securus { --rg-zone-accent: #9bc89b; --rg-btn-top: #e2f0e2; --rg-btn-bot: #5e9a5e; --rg-btn-shadow-deep: #3d663d; --rg-btn-glow: color-mix(in srgb, #9bc89b 34%, transparent); } body.rg-guide #messages-connectnetwork { --rg-zone-accent: #9ebdd4; --rg-btn-top: #e4eef6; --rg-btn-bot: #5a85a8; --rg-btn-shadow-deep: #3b5a72; --rg-btn-glow: color-mix(in srgb, #9ebdd4 34%, transparent); } body.rg-guide #money-jpay { --rg-zone-accent: #6bc4a8; --rg-btn-top: #d4f2ea; --rg-btn-bot: #2e8f72; --rg-btn-shadow-deep: #1d5c4a; --rg-btn-glow: color-mix(in srgb, #6bc4a8 34%, transparent); } body.rg-guide #mail { --rg-zone-accent: #d9a882; --rg-btn-top: #f7e8d9; --rg-btn-bot: #b07850; --rg-btn-shadow-deep: #7a5035; --rg-btn-glow: color-mix(in srgb, #d9a882 34%, transparent); } body.rg-guide #something-broke { --rg-zone-accent: #f0c46a; --rg-btn-top: #fcecc8; --rg-btn-bot: #c9942e; --rg-btn-shadow-deep: #8a6820; --rg-btn-glow: color-mix(in srgb, #f0c46a 34%, transparent); } body.rg-guide #contacts { --rg-zone-accent: #bfa996; --rg-btn-top: #ede4d9; --rg-btn-bot: #8f755e; --rg-btn-shadow-deep: #5e4d3f; --rg-btn-glow: color-mix(in srgb, #bfa996 34%, transparent); } body.rg-guide #fact-check-notes { --rg-zone-accent: #d4a0b8; --rg-btn-top: #f7e5ed; --rg-btn-bot: #a86b87; --rg-btn-shadow-deep: #70485a; --rg-btn-glow: color-mix(in srgb, #d4a0b8 34%, transparent); } body.rg-guide #disclaimer { --rg-zone-accent: #a8a4bc; --rg-btn-top: #e8e6f0; --rg-btn-bot: #736e8f; --rg-btn-shadow-deep: #4b485e; --rg-btn-glow: color-mix(in srgb, #a8a4bc 34%, transparent); } body.rg-guide .rg-verify-callout { --rg-verify-accent: color-mix( in srgb, var(--dryce-mark-core) 55%, var(--color-success) ); margin: var(--rg-gap-sm) 0 var(--rg-gap-lg); padding: var(--rg-gap-md) var(--rg-gap-lg); border-radius: var(--rg-radius-md); border: 1px solid color-mix(in srgb, var(--rg-verify-accent) 28%, var(--rg-rule)); border-left: 4px solid var(--rg-verify-accent); background: linear-gradient( 145deg, color-mix(in srgb, var(--rg-verify-accent) 8%, var(--rg-card)) 0%, var(--rg-card) 100% ); box-shadow: var(--rg-shadow-soft); } body.rg-guide .rg-verify-callout__heading { margin: 0 0 var(--rg-gap-sm); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--rg-verify-accent) 35%, var(--rg-fg)); } body.rg-guide .rg-verify-callout__lede { margin: 0 0 var(--rg-gap-md); font-size: 0.9375rem; line-height: var(--rg-read); color: var(--rg-muted); font-weight: 500; } body.rg-guide .rg-verify-steps { margin: 0; padding-left: 1.35rem; color: var(--rg-fg); font-size: 0.9375rem; line-height: 1.55; } body.rg-guide .rg-verify-steps li { margin: 0.35rem 0; padding-left: 0.2rem; } body.rg-guide .rg-verify-steps li::marker { color: color-mix(in srgb, var(--rg-verify-accent) 70%, var(--rg-muted)); font-weight: 700; } body.rg-guide .rg-subhead { margin: var(--rg-gap-md) 0 var(--rg-gap-sm); } body.rg-guide .rg-subhead h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: color-mix(in srgb, var(--rg-zone-accent) 22%, var(--rg-fg)); } body.rg-guide .rg-table-wrap caption { caption-side: top; padding: 0.65rem 0.75rem 0.85rem; text-align: left; font-size: 0.8125rem; line-height: 1.45; font-weight: 500; color: var(--rg-muted); border-bottom: 1px solid var(--rg-rule); } body.rg-guide .rg-table-caption { display: block; max-width: 42rem; } @media (prefers-contrast: more) { body.rg-guide .rg-verify-callout { border-width: 2px; } body.rg-guide .rg-verify-callout__lede { color: var(--rg-fg); } } /* Dense link-mesh reference pages (e.g. international HR URL index) */ body.rg-guide .rg-link-block h2 { font-size: 1.05rem; margin: 0 0 var(--rg-gap-sm); } body.rg-guide .dense-links { margin: 0; overflow-wrap: anywhere; line-height: 1.62; text-wrap: pretty; } /* Per-link factual blurb (international HR index) */ body.rg-guide .rg-link-with-claim { margin: 0 0 var(--rg-gap-md); padding: 0 0 var(--rg-gap-sm); border-bottom: 1px solid color-mix(in srgb, var(--rg-rule) 35%, transparent); } body.rg-guide .rg-link-with-claim:last-child { border-bottom: none; padding-bottom: 0; } body.rg-guide .rg-factual-claim { margin: var(--rg-gap-xs) 0 0; padding: 0 0 0 0.7rem; border-left: 3px solid color-mix(in srgb, var(--rg-zone-accent) 45%, transparent); font-size: 0.875rem; line-height: var(--rg-read); color: var(--rg-muted); text-wrap: pretty; max-width: 46rem; } @media (prefers-contrast: more) { body.rg-guide .rg-factual-claim { color: var(--rg-fg); border-left-color: var(--rg-fg); } } /* ── Numbered reference pages (Roman-numeral sections + Contents nav). Used by international-sources-us-human-rights-21c.html. ────────────── */ /* Anchor jumps shouldn't hide section headings behind the fixed topbar. */ body.rg-guide article section { scroll-margin-top: 5.5rem; } /* Roman numeral + title flex layout for h2 inside an indexed section. */ body.rg-guide section h2:has(.rg-section-num) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } body.rg-guide .rg-section-num { font-size: 0.78em; font-weight: 700; letter-spacing: 0.07em; color: color-mix(in srgb, var(--rg-zone-accent) 55%, var(--rg-muted)); font-variant-numeric: tabular-nums; flex: 0 0 auto; } body.rg-guide .rg-section-title { flex: 1 1 auto; min-width: 0; text-wrap: balance; } /* Contents — architectural office card, not chunky CTAs. */ body.rg-guide .rg-toc { --rg-zone-accent: #c9a874; background: radial-gradient( ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--rg-zone-accent) 12%, transparent) 0%, transparent 70% ), linear-gradient( 178deg, color-mix(in srgb, var(--rg-zone-accent) 9%, var(--rg-card)) 0%, var(--rg-card) 55%, color-mix(in srgb, #4a3f5e 6%, var(--rg-card)) 100% ); border: 1px solid color-mix(in srgb, var(--rg-zone-accent) 24%, var(--rg-rule)); border-left: 3px solid color-mix(in srgb, var(--rg-zone-accent) 65%, transparent); border-radius: var(--rg-radius-md); padding: var(--rg-gap-md) var(--rg-gap-md) var(--rg-gap-xs); margin: 0 0 var(--rg-gap-md); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent), 0 2px 6px rgba(0, 0, 0, 0.22), 0 16px 36px rgba(0, 0, 0, 0.28); } body.rg-guide .rg-toc h2 { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--rg-zone-accent) 30%, var(--rg-muted)); margin: 0 0 var(--rg-gap-sm); padding: 0 0 var(--rg-gap-xs); border-bottom: 1px solid color-mix(in srgb, var(--rg-zone-accent) 22%, transparent); text-shadow: none; } body.rg-guide .rg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } body.rg-guide .rg-toc li { margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--rg-zone-accent) 14%, var(--rg-rule)); } body.rg-guide .rg-toc li:first-child { border-top: none; } /* TOC anchors override the tactile-button base used elsewhere on the page. */ body.rg-guide .rg-toc a { display: flex; align-items: baseline; gap: 0.55rem; margin: 0; padding: 0.6rem 0.45rem; min-height: 2.5rem; background: none; border: none; border-radius: 4px; box-shadow: none; color: var(--rg-fg); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; text-align: left; text-decoration: none; letter-spacing: 0; } body.rg-guide .rg-toc a:hover { transform: none; filter: none; box-shadow: none; background: color-mix(in srgb, var(--rg-zone-accent) 7%, transparent); color: color-mix(in srgb, var(--rg-zone-accent) 30%, var(--rg-fg)); } body.rg-guide .rg-toc a:active { transform: none; filter: none; box-shadow: none; background: color-mix(in srgb, var(--rg-zone-accent) 12%, transparent); } body.rg-guide .rg-toc a:focus-visible { outline: 2px solid var(--rg-zone-accent); outline-offset: 2px; border-radius: 4px; } body.rg-guide .rg-toc .rg-toc-num { flex: 0 0 auto; min-width: 2rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--rg-zone-accent) 60%, var(--rg-muted)); } body.rg-guide .rg-toc .rg-toc-title { flex: 1 1 auto; min-width: 0; text-wrap: balance; } body.rg-guide .rg-table-wrap { overflow-x: auto; margin: var(--rg-gap-md) 0; border-radius: var(--rg-radius-md); border: 1px solid var(--rg-rule); } body.rg-guide .rg-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } body.rg-guide .rg-table-wrap th, body.rg-guide .rg-table-wrap td { padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rg-rule); } body.rg-guide .rg-table-wrap th { background: color-mix(in srgb, var(--rg-card) 70%, transparent); } body.rg-guide .rg-changelog ul { margin: var(--rg-gap-sm) 0 0; padding-left: 1.25rem; }