/* ==========================================================================
   The Fulfilling Life of a Dead Man
   Fellowship Bible Church of New Braunfels

   Typography deliberately mirrors the printed study guide: Caladea (a Cambria
   metric-match) for reading, Carlito (a Calibri metric-match) for interface.
   Both are open fonts already installed on many machines; the stacks fall back
   to Cambria/Georgia and Calibri/system sans, so the page never waits on a
   webfont request and never shifts.
   ========================================================================== */

:root {
  --ink:        #14241C;
  --forest:     #1E3A2F;
  --forest-sub: #2E4E41;
  --gold:       #C6A15B;
  --gold-deep:  #A2803F;
  --cream:      #F7F3E8;
  --paper:      #FDFBF6;
  --muted:      #6E7B72;
  --rule:       rgba(30, 58, 47, 0.16);

  --serif: Caladea, Cambria, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  Carlito, Calibri, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--forest); text-decoration-color: var(--gold); text-underline-offset: 0.18em; }
a:hover { color: var(--gold-deep); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.sans { font-family: var(--sans); }

.skip {
  position: absolute; left: -9999px;
  background: var(--forest); color: var(--cream);
  padding: 0.75rem 1.25rem; z-index: 100;
  font-family: var(--sans);
}
.skip:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--forest);
  color: var(--cream);
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) clamp(2rem, 5vw, 3rem);
  text-align: center;
  border-bottom: 3px solid var(--gold);
}

.masthead .eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}

.masthead h1 {
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.012em;
}

.masthead .sub {
  font-style: italic;
  color: rgba(247, 243, 232, 0.82);
  margin: 1rem auto 0;
  max-width: 30rem;
  font-size: 1.02rem;
}

.masthead .byline {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1.6rem;
}

/* Thin gold rule with a diamond — used to separate movements */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; margin: 2.5rem auto;
  max-width: 12rem; color: var(--gold);
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.5;
}
.ornament span { font-size: 0.6rem; transform: rotate(45deg); display: block; }
.ornament span::before { content: "\25A0"; }

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) 4rem;
}

.wrap-wide { max-width: 64rem; }

.lede {
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--forest-sub);
  max-width: var(--measure);
  margin: 0 auto 1.5rem;
}

/* --------------------------------------------------------------------------
   SIGNATURE ELEMENT
   The index reads as a table of contents in a book still being written.
   Released weeks carry their title. Unreleased weeks show only the numeral
   and the date they open — present on the page, but not yet legible.
   -------------------------------------------------------------------------- */

.contents { list-style: none; margin: 0; padding: 0; }

.contents li { border-bottom: 1px solid var(--rule); }
.contents li:first-child { border-top: 1px solid var(--rule); }

.entry {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  align-items: baseline;
  gap: 0 1rem;
  padding: 1.05rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 140ms ease, padding-left 140ms ease;
}

a.entry:hover, a.entry:focus-visible {
  background: rgba(198, 161, 91, 0.11);
  padding-left: 0.75rem;
}

.entry .num {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}

.entry .name {
  font-size: 1.09rem;
  line-height: 1.4;
  color: var(--forest);
}

.entry .meta {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

/* Locked rows: dimmed, non-interactive, no title revealed */
.entry.locked { cursor: default; }
.entry.locked .num  { color: rgba(110, 123, 114, 0.75); }
.entry.locked .name { color: var(--muted); font-style: italic; }

/* The current week gets a gold spine */
.contents li.now { position: relative; }
.contents li.now::before {
  content: "";
  position: absolute; left: -0.85rem; top: 0.35rem; bottom: 0.35rem;
  width: 3px; background: var(--gold); border-radius: 2px;
}
.contents li.now .name { font-weight: 700; }

/* Progress line above the contents */
.progress { margin: 0 0 2rem; }
.progress .bar {
  height: 2px; background: var(--rule); position: relative; overflow: hidden;
}
.progress .bar i {
  position: absolute; inset: 0 auto 0 0;
  background: var(--gold); display: block;
}
.progress .label {
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   Devotional page
   -------------------------------------------------------------------------- */

.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--forest);
  border-bottom: 3px solid var(--gold);
}

@media (min-width: 60rem) {
  .hero { aspect-ratio: 21 / 8; }
}

.devo-head { text-align: center; margin-bottom: 2.25rem; }

.devo-head .num {
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 0.9rem;
}

.devo-head h1 {
  font-size: clamp(1.8rem, 5.2vw, 2.7rem);
  line-height: 1.14; font-weight: 400; margin: 0;
  color: var(--forest); letter-spacing: -0.01em;
}

.scripture {
  margin: 2.25rem auto;
  max-width: var(--measure);
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  border-left: 3px solid var(--gold);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--forest-sub);
}
.scripture p { margin: 0; font-style: italic; }
.scripture .ref {
  display: block; margin-top: 0.85rem;
  font-family: var(--sans); font-style: normal;
  font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold-deep);
}

.devo-body { max-width: var(--measure); margin: 0 auto; }
.devo-body p { margin: 0 0 1.35rem; }
.devo-body p:first-of-type::first-letter {
  float: left; font-size: 3.35rem; line-height: 0.82;
  padding: 0.09em 0.09em 0 0; color: var(--gold-deep);
}
.devo-body h2 {
  font-size: 1.22rem; font-weight: 700; color: var(--forest);
  margin: 2.25rem 0 0.85rem;
}
.devo-body ol, .devo-body ul { padding-left: 1.4rem; margin: 0 0 1.35rem; }
.devo-body li { margin-bottom: 0.55rem; }
.devo-body blockquote {
  margin: 1.6rem 0; padding-left: 1.2rem;
  border-left: 2px solid var(--gold); font-style: italic; color: var(--forest-sub);
}

/* Pager */
.pager {
  display: flex; gap: 1rem; margin-top: 3.5rem;
  border-top: 1px solid var(--rule); padding-top: 1.5rem;
  font-family: var(--sans);
}
.pager a, .pager span {
  flex: 1; padding: 0.9rem 1rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 3px;
  display: flex; flex-direction: column; gap: 0.2rem;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.pager a:hover { border-color: var(--gold); background: rgba(198, 161, 91, 0.09); }
.pager .nxt { text-align: right; align-items: flex-end; }
.pager .lbl {
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted);
}
.pager .ttl { font-size: 0.94rem; color: var(--forest); }
.pager span { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Locked / not-yet-released page
   -------------------------------------------------------------------------- */

.gate {
  max-width: 30rem; margin: 0 auto; text-align: center;
  padding: 3rem 0;
}
.gate .mark {
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem;
}
.gate h1 { font-weight: 400; font-size: 1.9rem; color: var(--forest); margin: 0 0 1rem; }
.gate p { color: var(--muted); }
.gate .when {
  display: inline-block; margin-top: 1.25rem; padding: 0.7rem 1.4rem;
  border: 1px solid var(--gold); border-radius: 3px;
  font-family: var(--sans); font-size: 0.9rem; color: var(--forest);
}

/* --------------------------------------------------------------------------
   Footer / credit
   -------------------------------------------------------------------------- */

footer.credit {
  background: var(--forest); color: rgba(247, 243, 232, 0.9);
  margin-top: 4rem; padding: 2.75rem var(--gutter) 3rem;
  font-size: 0.9rem;
}
footer.credit .inner { max-width: 40rem; margin: 0 auto; text-align: center; }
footer.credit p { margin: 0 0 0.9rem; line-height: 1.6; }
footer.credit a { color: var(--gold); }
footer.credit .fine { font-size: 0.78rem; color: rgba(247, 243, 232, 0.62); margin-top: 1.5rem; }
footer.credit .rule { height: 1px; background: rgba(198, 161, 91, 0.4); margin: 0 auto 1.75rem; max-width: 8rem; }

/* --------------------------------------------------------------------------
   Reader protection
   Applied to text containers only, so form fields in the console still work.
   -------------------------------------------------------------------------- */

.protect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.hero { -webkit-user-drag: none; }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; font-size: 11.5pt; }
  .masthead { background: none; color: #000; border-bottom: 1pt solid #999; padding: 0 0 1rem; }
  .masthead h1, .masthead .eyebrow, .masthead .byline { color: #000; }
  .hero { display: none; }
  .pager, .progress, .skip { display: none; }
  footer.credit { background: none; color: #000; margin-top: 2rem; }
  footer.credit a { color: #000; }
  .protect { user-select: auto; }
  a[href]::after { content: ""; }
}

/* --------------------------------------------------------------------------
   Front matter — introduction, dedication, acknowledgments
   Set narrower and quieter than a devotional. This is the author speaking
   about the book rather than the book itself, so it reads as a preface:
   no drop caps, no scripture block, section heads in gold small caps.
   -------------------------------------------------------------------------- */

.announce {
  max-width: var(--measure);
  margin: 0 auto 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  border-left: 3px solid var(--gold);
}
.announce h2 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 400;
  margin: 0 0 0.9rem;
}
.announce p { margin: 0 0 0.85rem; color: var(--forest-sub); }
.announce p:last-child { margin-bottom: 0; }

.fm {
  max-width: var(--measure);
  margin: 0 auto;
}

.fm-head {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 400;
  text-align: center;
  margin: 0 0 1.75rem;
}

.fm p { margin: 0 0 1.3rem; }

.fm-lead {
  font-size: 1.1rem;
  color: var(--forest-sub);
}

/* Each grandchild's paragraph leads with the name, so give the name weight
   and let the paragraphs sit slightly indented as a group. */
.fm-names {
  margin-top: 1.75rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--rule);
}
.fm-names p { margin-bottom: 1.15rem; }
.fm-names .who {
  font-weight: 700;
  color: var(--forest);
  letter-spacing: 0.01em;
}

@media print {
  .announce { background: none; border-left: 1pt solid #999; }
}

/* --------------------------------------------------------------------------
   Appendix A — the raw form
   A withheld line keeps its place in the list so the reader watches the
   outline fill in, but the words are not in the page at all.
   -------------------------------------------------------------------------- */

.raw-form { max-width: var(--measure); margin: 0 auto; }
.raw-form p { margin: 0 0 1.1rem; }


.raw-preview {
  border-left: 2px solid var(--gold);
  padding-left: 0.9rem;
  background: rgba(198, 161, 91, 0.09);
}

/* --------------------------------------------------------------------------
   Pre-launch dateline
   The single most important fact on this page before July 30 is when the
   series starts, so it sits above everything else and is set large.
   The whole block is removed by PHP once Week 1 goes live.
   -------------------------------------------------------------------------- */

.dateline {
  max-width: var(--measure);
  margin: 0 auto 2.5rem;
  padding: 1.75rem 1.5rem 1.85rem;
  text-align: center;
  background: var(--forest);
  color: var(--cream);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}

.dateline .kicker {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

.dateline .when {
  margin: 0;
  font-size: clamp(1.25rem, 4.4vw, 1.7rem);
  line-height: 1.25;
  font-weight: 400;
}
.dateline .when strong {
  display: block;
  font-weight: 700;
  margin-top: 0.2rem;
}

.dateline .rel {
  margin: 0.85rem 0 0;
  font-style: italic;
  color: var(--gold);
  font-size: 1.02rem;
}

.dateline .cadence {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(247, 243, 232, 0.75);
  margin: 1.1rem 0 0;
}

@media print {
  .dateline { background: none; color: #000; border-color: #999; }
  .dateline .kicker, .dateline .rel, .dateline .cadence { color: #000; }
}

/* Editor's note inside the author's text. Square brackets already signal it;
   the lighter weight and colour keep it from reading as Dennis's own voice. */
.ed-note {
  color: var(--muted);
  font-size: 0.97rem;
  font-style: italic;
}
.ed-note a { color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   Study guide call to action
   Sits after the devotional, not in the footer. A reader who has just
   finished the day's reading is the reader most likely to want the questions.
   Forest panel so it reads as a deliberate invitation rather than chrome.
   -------------------------------------------------------------------------- */

.guide-cta {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 1.75rem 1.75rem 1.85rem;
  background: var(--forest);
  color: var(--cream);
  border-left: 3px solid var(--gold);
  text-align: center;
}

.guide-cta .eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.85rem;
}

.guide-cta .lead {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.6;
}
.guide-cta .lead strong { color: var(--gold); }

.guide-cta .act { margin: 1.35rem 0 0; }
.guide-cta .act a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 0.8rem 1.6rem;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.guide-cta .act a:hover,
.guide-cta .act a:focus-visible { background: #D9BC80; color: var(--ink); }

.guide-cta .fine {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: rgba(247, 243, 232, 0.7);
  margin: 1.1rem 0 0;
}

@media print { .guide-cta { display: none; } }

/* --------------------------------------------------------------------------
   Review mode
   Only present inside an authenticated preview session.
   -------------------------------------------------------------------------- */

.rev-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  background: var(--ink); color: var(--cream);
  font-family: var(--sans); font-size: 0.82rem;
  border-top: 2px solid var(--gold);
}
.rev-bar .rev-who { color: rgba(247,243,232,0.75); }
.rev-bar .rev-who strong { color: var(--gold); }

.rev-toggle {
  font-family: inherit; font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  padding: 0.5rem 1rem; border-radius: 3px;
  background: transparent; color: var(--cream);
  border: 1px solid rgba(198,161,91,0.6);
}
.rev-toggle:hover { border-color: var(--gold); }
.rev-toggle.is-on { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.rev-status { margin-left: auto; font-size: 0.8rem; color: rgba(247,243,232,0.7); }
.rev-status.is-ok { color: #8FCBA6; }
.rev-status.is-error { color: #F0A9A0; }

/* Give the fixed bar room so it never covers the last paragraph. */
body:has(.rev-bar) { padding-bottom: 4.5rem; }

/* Editable regions. Selection has to work here, so override .protect. */
.rev-editing [data-edit] {
  -webkit-user-select: text; user-select: text;
  outline: 1px dashed rgba(198,161,91,0.6);
  outline-offset: 0.6rem;
  border-radius: 2px;
  cursor: text;
  transition: outline-color 140ms ease, background-color 140ms ease;
}
.rev-editing [data-edit]:hover { outline-color: var(--gold); }
.rev-editing [data-edit]:focus {
  outline: 2px solid var(--gold-deep);
  background: rgba(198,161,91,0.06);
}

/* A block carrying a saved revision. */
[data-edit].is-edited { position: relative; }
[data-edit].is-edited::before {
  content: "revised";
  position: absolute; top: -1.5rem; left: 0;
  font-family: var(--sans); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
}

/* Approve button in the console. */
.okbtn {
  background: none; border: 1px solid rgba(30,58,47,0.25); border-radius: 3px;
  padding: 0.25rem 0.6rem; font-family: inherit; font-size: 0.76rem;
  color: #1E3A2F; cursor: pointer;
}
.okbtn:hover { border-color: var(--gold); }
.okbtn.is-on { background: #1E3A2F; color: #F7F3E8; border-color: #1E3A2F; }
.okbtn[disabled] { opacity: 0.5; cursor: wait; }

@media print { .rev-bar { display: none; } }

/* --------------------------------------------------------------------------
   Appendix A — the raw form, line classes
   Dennis's own shorthand outline. Set tighter and plainer than a devotional:
   this is a working list he goes through daily, not prose to be read through.
   -------------------------------------------------------------------------- */

/* Roman-numeral section heading. Always visible, so it carries the outline. */
.raw-form .rf-head {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin: 2.5rem 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--forest);
}
.raw-form .rf-head:first-child { margin-top: 0; }

.rf-num {
  flex: 0 0 auto;
  min-width: 2.1rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* Numbered item under a section. */
.raw-form .rf-item {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin: 0 0 0.75rem;
  padding-left: 2.1rem;
  line-height: 1.62;
}

.rf-n {
  flex: 0 0 auto;
  min-width: 1.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}

/* Scripture quoted in the outline. */
.raw-form .rf-scrip {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--forest-sub);
  line-height: 1.6;
}

/* A free-standing prose line with no number. */
.raw-form .rf-free {
  margin: 0 0 0.9rem;
  padding-left: 1rem;
  color: var(--forest-sub);
}

/* The summary line. Dennis capitalises it himself. */
.raw-form .rf-sum {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border-left: 3px solid var(--gold);
  font-weight: 700;
  color: var(--forest);
  letter-spacing: 0.01em;
}

/* Withheld lines keep their indent so the outline shape survives. */
.raw-form 
/* ---- raw-form link above each devotional ------------------------------- */
/* Quiet by design: it sits between the scripture and the reading, so it must
   not compete with either. Hairline under it separates link from body.       */
.raw-link{
  margin:0 0 1.6rem;
  padding:0 0 .75rem;
  border-bottom:1px solid var(--rule, rgba(30,58,47,.14));
  font-size:.78rem;
  letter-spacing:.05em;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.25rem .6rem;
}
.raw-link a{
  color:var(--gold-ink, #8A6B2F);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.raw-link a:hover{ color:var(--forest, #1E3A2F); }
.raw-link .hint{
  color:var(--muted, #5E5E54);
  font-size:.72rem;
  font-style:italic;
}
/* ---- appendix: one block per week -------------------------------------- */
/* Everything a lesson opens sits together under a single marker. Order is
   unchanged from the printed appendix; this only groups what is already there. */
.raw-week{
  margin:0 0 1.5rem;
  padding:0 0 0 1.1rem;
  border-left:2px solid var(--rule, rgba(30,58,47,.14));
  scroll-margin-top:5rem;
}
.raw-week:focus{ outline:none; }
.raw-week-mark{
  margin:0 0 .6rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-ink, #8A6B2F);
  font-weight:700;
}
/* a block containing only withheld lines recedes */
@media print{ .raw-link{ display:none; } }

/* ---- appendix: withheld lines ------------------------------------------ */
/* One quiet notice per block instead of a skeleton bar per line. Sixty-three
   grey rows read as broken loading UI; this says the same thing and looks
   deliberate. The withheld text is still never sent to the browser.          */
.raw-pending{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:.15rem 0 0;
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.03em;
  color:var(--muted);
  font-style:italic;
}
.raw-pending .dot{
  flex:0 0 auto;
  width:.3rem;
  height:.3rem;
  border-radius:50%;
  background:var(--gold);
  opacity:.6;
}
/* a block whose lines are all still to come sits back a little */
.raw-week > .raw-pending:first-of-type:last-child{ opacity:.85; }

/* a week that opens nothing new — still gets a block so its anchor exists */
.raw-none{
  margin:.15rem 0 0;
  font-family:var(--sans);
  font-size:.74rem;
  color:var(--muted);
  font-style:italic;
  opacity:.8;
}
/* section heading repeated as context inside a week block sits tighter */
.raw-week .rf-head{ margin-top:0; }