/* Reformed Life Liturgy — page-specific presentation.
   Shared frame comes from base.css, shell.css, grid-surface.css,
   themes/default.css, and content-systems.css (cs-section, section-title,
   lede, cs-proof, cs-navigator, cs-entry-links patterns). This file only
   adds what the page needs beyond those. */

.reformed-liturgy {
  --rl-accent: #7a2e38;        /* liturgical burgundy, for light surfaces */
  --rl-accent-ink: #eec3c9;    /* rose tint, for dark surfaces */
  --rl-cite: #c00000;          /* document citation red, used selectively */
  --rl-nav-offset: 6rem;
  /* The page speaks the red family, not the portfolio navy. Every
     navy-partnered token is re-homed here, scoped to this page only. */
  --ink: #1d1917;                        /* warm near-black: no navy text on paper */
  --muted-on-light: #6f6159;             /* warm gray for secondary text on paper */
  --muted-on-dark: #cfa9ae;              /* rose gray for secondary text on oxblood */
  --line-light: rgba(122, 46, 56, 0.22); /* oxblood-tinted rules on paper */
  --line-dark: rgba(238, 195, 201, 0.18);/* rose-tinted rules on oxblood */
  --grid-line: rgba(122, 46, 56, 0.10);  /* the grid field wears oxblood, not navy */
  --grid-line-strong: #c4a3a7;           /* warm rose-gray for block outlines */
  --accent-dark-surface: #eec3c9;        /* rose replaces the navy-partnered gold */
}

/* Project identity, per the implementation plan: the dark surfaces wear the
   liturgical oxblood, not the portfolio navy. Accents flip to the rose tint. */
.reformed-liturgy .hero { background-color: #7a2e38; }
.reformed-liturgy .section-dark { background-color: #7a2e38; --rl-accent: var(--rl-accent-ink); }
.reformed-liturgy .section-dark .grid-block:not(.grid-index) { background-color: transparent; }

/* A grid item's outer top margin shifts its box inside the measured rows,
   which reads as misaligned containers. Spacing between blocks already
   comes from the grid's own row gap. */
.reformed-liturgy .grid-block.rl-cards,
.reformed-liturgy .grid-block.rl-ledger { margin-top: 0; }
.reformed-liturgy :is(section[id], article[id]) { scroll-margin-top: var(--rl-nav-offset); }

/* Hero proof strip: three verified facts across on desktop. */
.rl-hero-proof.cs-proof { grid-template-columns: repeat(3, 1fr); }

/* Live-app link under the entry links. */
.rl-live { margin: 2rem 0 0; }

/* Card grids: problem failures, design moves, item types, outputs. */
.rl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; }
.rl-cards--two { grid-template-columns: repeat(2, 1fr); }
.rl-card { border-top: 2px solid var(--line-light); padding-top: 1.25rem; }
.section-dark .rl-card { border-top-color: var(--line-dark); }
.rl-card h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.75rem; }
.rl-card p { margin: 0; max-width: 42ch; }
.rl-kicker { display: block; margin-bottom: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rl-accent); }
.section-dark .rl-kicker { color: var(--rl-accent-ink); }
.rl-card .cs-credit { margin-top: 0.9rem; }

/* Sub-block headings inside the answer section. */
.rl-subhead { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rl-accent); margin: 0 0 1.25rem; }
.section-dark .rl-subhead { color: var(--rl-accent-ink); }

/* The standard: two decisions, accent rule on the side. */
.rl-move { border-left: 2px solid var(--rl-accent-ink); padding-left: 1.5rem; }
.rl-move h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.75rem; }
.rl-move p { margin: 0; max-width: 52ch; color: var(--muted-on-dark); }

/* Governance: burgundy accent for the term-reveal tabs. */
.rl-govern .term-reveal { --reveal-accent: var(--rl-accent); }

/* Term-reveal panels crossfade instead of teleporting. transform/opacity
   only, under 300ms, ease-out; visibility flips after the fade. */
.rl-govern .term-reveal-panel { opacity: 0; transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms; }
.rl-govern .term-reveal-panel.is-active { opacity: 1; transition: opacity 160ms var(--ease-out); visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .rl-govern .term-reveal-panel { transition: none; }
}

/* Honest ledger: definition rows, dark section. The grid-block outline is
   the top rule; the rows only divide between each other. */
.rl-ledger { margin-top: 3rem; }
.rl-ledger-row { display: grid; grid-template-columns: 13rem 1fr; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line-dark); }
.rl-ledger-row dt { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--rl-accent-ink); }
.rl-ledger-row dd { margin: 0; max-width: 64ch; }
.rl-ledger-row dd p { margin: 0; }
.rl-ledger-close { margin-top: 2.5rem; max-width: 58ch; color: var(--muted-on-dark); }

/* Ringing-bell icon family, shared with the landing's Liturgy chapter. */
.reformed-liturgy .hero-copy { position: relative; }
.rl-hero-bell { position: absolute; top: 0.5rem; right: clamp(1rem, 3vw, 2rem); opacity: .5; /* decorative icons stay subtle on dark */ }

/* Document cue: a citation tag set the way the product sets it. */
.rl-cite-sample { margin: 0.9rem 0 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--rl-cite); }

/* Grid icons, quiet and red: the six content sections render the icon-tile
   grid the way the landing and content-systems pages do, in this page's own
   palette. Oxblood icons on paper, rose on oxblood. Opacity is 0.04 everywhere,
   the design system's quiet level, on both paper and dark. */
.reformed-liturgy .grid-icon { opacity: 0.04; }
@media (hover: hover) and (pointer: fine) {
  .reformed-liturgy .grid-icon:hover { opacity: 0.46; }
}
.reformed-liturgy .section-dark .grid-icon {
  background: transparent;
  box-shadow: inset -1px -1px 0 rgba(238, 195, 201, 0.14);
  opacity: 0.03;
}
@media (hover: hover) and (pointer: fine) {
  .reformed-liturgy .section-dark .grid-icon:hover { opacity: 0.32; }
}

/* Live-production gallery: fresh screenshots fetched from the deployed app. */
.rl-gallery { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2.5rem; margin-top: 3.5rem; align-items: start; }
.rl-gallery-side { display: grid; gap: 2.5rem; align-content: start; }
.rl-shot { margin: 0; }
.rl-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-light); border-radius: 8px; }
.rl-shot figcaption { margin-top: 1rem; font-size: 0.85rem; line-height: 1.5; color: var(--muted-on-light); max-width: 44ch; }
/* Scrollable embedded liturgy viewer: vertical mobile-browser frame around the webview pattern. */
.rl-viewer { max-width: 26rem; margin-inline: auto; border: 8px solid #101418; border-radius: 2rem; overflow: hidden; background: var(--white); box-shadow: 0 1.5rem 3rem rgba(14, 34, 53, 0.22); }
.rl-viewer-chrome { display: flex; align-items: center; gap: 0.75rem; background: #f2f0ea; border-bottom: 1px solid #ddd8cc; padding: 0.7rem 1rem; }
.rl-viewer-back { color: #8a8a8a; font-size: 1.4rem; line-height: 1; font-family: -apple-system, sans-serif; }
.rl-viewer-url { flex: 1; background: #fff; border: 1px solid #e2ded2; border-radius: 999px; padding: 0.35rem 0.5rem; text-align: center; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-viewer .webview-embed { height: 32rem; }
.rl-viewer .webview-law-num { display: inline-block; min-width: 1.8em; font-weight: 600; }
.rl-viewer .webview-indent { display: inline-block; padding-left: 2rem; }
/* Reformed Life page light grid icons at 0.065 (overrides shared 0.055). */
.reformed-liturgy .grid-icon { opacity: 0.055; }
.rl-gallery-sub { margin: 3rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rl-accent); }

@media (max-width: 800px) {
  .rl-hero-bell { position: static; display: inline-block; margin: 0 0 1.25rem; }
  .rl-gallery, .rl-gallery-side { grid-template-columns: 1fr; gap: 1.75rem; }
  .rl-cards, .rl-cards--two { grid-template-columns: 1fr; gap: 1.75rem; }
  .rl-hero-proof.cs-proof { grid-template-columns: 1fr; }
  .rl-ledger-row { grid-template-columns: 1fr; gap: 0.5rem; }
}