/*
 * book.css — the look of the book: a light desk, warm paper pages, the church's
 * own accent colours, and index tabs on the page edge.
 *
 * HOW TEXT IS SIZED: page-flip sizes each page in PIXELS from JavaScript, so
 * type cannot be sized off the viewport or it drifts out of proportion with the
 * page. js/book.js sets --pw (the current page width, in px) on #book after
 * every layout, and every size inside a page is a fraction of it — so the
 * characters-per-line stays constant from a phone to a desktop. The default
 * below is what the book looks like for the instant before JS measures.
 *
 * TWO VIEWS, ONE STYLESHEET: with the book running, body.is-book; in the plain
 * view (footer link, or no JavaScript) the same sections are laid out as an
 * ordinary page at the foot of this file.
 *
 * LOADED BY: index.html. Imports vendor/page-flip.css itself.
 */

@import url('../vendor/page-flip.css?v=27ee257');

/* THE LIBRARY'S OWN TYPO. vendor/page-flip.css ships a rule for ".sft__wrapper"
   (t and f transposed), so the wrapper it actually creates gets no width and the
   book collapses. Corrected here, not in the vendored file, so an upgrade that
   fixes it does not silently drop our fix with it. */
.stf__wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

:root {
  /* The palette, the faces and the link mark come from css/theme.css — the
     church's file. This file is the book, and keeps only its own measures. */

  /* Page width in px. Overwritten by js/book.js on every layout. */
  --pw: 340px;
  /* Width of the index tabs that stick out past the page edge. */
  --tabw: 34px;
  --chrome-h: 52px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
}
/* The book view is one screen tall and never scrolls as a document — the
   pages scroll inside themselves where they must. */
body.is-book {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 8px 12px;
  background: var(--accent-deep);
  color: #fff;
  z-index: 10;
}
.skip:focus { left: 8px; }

/* --- The chrome: a thin bar above the book ------------------------------- */

.chrome {
  flex: none;
  height: var(--chrome-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-edge);
}
.brand img { height: 30px; width: auto; display: block; }

/* The Give button, gradient and all, from the old header. */
.give,
.give-link {
  display: inline-block;
  font: 500 13px/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, var(--action-from) 0%, var(--action-to) 100%);
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.give:hover, .give-link:hover { filter: brightness(1.06); }
/* A giving button with nowhere to send anyone. Kept visible and visibly dead
   rather than removed, so the page still says where giving belongs and the
   markup is ready for a real destination. Neither element is a link while it
   carries this, so there is nothing to click, hover or tab to. */
.give.is-disabled, .paypal-btn.is-disabled {
  filter: grayscale(1);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.give:focus-visible, .give-link:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; }

/* --- The stage that centres the book ------------------------------------- */

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* room on the right for the tabs, which hang past the page edge */
  padding: 14px calc(var(--tabw) + 12px) 14px 12px;
}

/* Wraps the book so the tabs can sit on its right edge. js/book.js keeps its
   --cap equal to the width cap it puts on #book, so the two never disagree. */
.binding {
  position: relative;
  width: 100%;
  max-width: var(--cap, 1120px);
}

.book {
  max-width: 100%;
  filter: drop-shadow(0 14px 24px rgba(50, 50, 30, 0.22));
}

/* --- The index tabs ------------------------------------------------------ */

.tabs {
  position: absolute;
  left: 100%;
  top: 4%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}

.tab {
  writing-mode: vertical-rl;
  /* In vertical-rl the line box hugs the tab's OUTER edge and text-align does
     nothing across it; flex centring is what puts the label mid-tab. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tabw);
  min-height: 44px;           /* a thumb's target, even for "Go" */
  padding: 10px 0;
  font: 500 11px/1 var(--font-ui);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-deep);
  background: var(--accent-pale);
  border: 1px solid var(--accent-mid);
  border-left: none;
  border-radius: 0 7px 7px 0;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.tab:hover { background: var(--accent-light); }
.tab:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
/* The open section's tab is pulled out a little and wears the paper's colour,
   the way the tab you are on in a real index sits proud of the rest. */
.tab.is-active {
  background: var(--paper);
  font-weight: 700;
  transform: translateX(3px);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.16);
}

/* --- Turn arrows --------------------------------------------------------- */

.turn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(44px, 4.4vw, 54px);
  height: clamp(44px, 4.4vw, 54px);
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  background: rgba(251, 249, 243, 0.85);
  color: var(--accent-deep);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  opacity: 0.45;
  transition: opacity 0.25s, background 0.25s;
}
.turn > * { pointer-events: none; }
.stage:hover .turn { opacity: 0.9; }
.turn:hover { background: var(--accent-pale); }
.turn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; opacity: 1; }
.turn-prev { left: 4px; }
.turn-next { right: 4px; }
.turn[hidden] { display: none; }

/* ===========================================================================
   PAGES
   The outer .page belongs to page-flip — it rewrites that element's INLINE
   style every frame (width, height, transform, clip-path). Nothing of ours goes
   on it; everything lives on .page-inner and the .leaf inside.
   =========================================================================== */

.page {
  background: var(--paper);
  overflow: hidden;
}

.page-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  /* the bottom band holds the folio and the running "next" line; a page's
     scrolling body ends above it, so neither ever sits on the words */
  padding: calc(var(--pw) * 0.08) calc(var(--pw) * 0.085) calc(var(--pw) * 0.105);
  color: var(--ink);
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper-deep) 100%);
}

/* The gutter — the curve of the paper into the spine. Left and right pages
   take it on opposite edges, which is what sells a spread as one book. */
.page-inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--pw) * 0.07);
  pointer-events: none;
  z-index: 1;
}
.page--left  .page-inner::before { right: 0; background: linear-gradient(to right, transparent, rgba(80, 70, 40, 0.13)); }
.page--right .page-inner::before { left: 0;  background: linear-gradient(to left,  transparent, rgba(80, 70, 40, 0.13)); }

/* --- The covers: cloth boards, gilt tooling --------------------------------
   In the church's accent. The front opens past itself
   on load (the book starts on Home); it is there for a reader who turns back.
   The page is page-flip's 'hard' density, so it swings like a board. */
.page--cover .page-inner, .page--back .page-inner {
  padding: calc(var(--pw) * 0.12);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gilt-bright);
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(255, 245, 200, 0.08), transparent 70%),
    repeating-linear-gradient(74deg,
      rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px,
      rgba(255, 255, 255, 0.025) 2px, rgba(255, 255, 255, 0.025) 5px),
    linear-gradient(155deg, var(--cover-cloth) 0%, var(--cover-cloth-deep) 100%);
}
.page--cover .page-inner::before, .page--back .page-inner::before { display: none; }
/* blind-tooled border, the way a real binding is stamped */
.page--cover .page-inner::after, .page--back .page-inner::after {
  content: '';
  position: absolute;
  inset: calc(var(--pw) * 0.055);
  border: 2px solid rgba(201, 178, 107, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 calc(var(--pw) * 0.06) rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
/* the leaf fills the board; its content sits in the middle of it */
.page--cover .leaf, .page--back .leaf { justify-content: center; align-items: center; }
.cover { display: flex; flex-direction: column; align-items: center; }
.cover-device {
  width: calc(var(--pw) * 0.2);
  height: calc(var(--pw) * 0.2);
  background: var(--gilt);
  -webkit-mask: var(--theme-mark) center / contain no-repeat;
          mask: var(--theme-mark) center / contain no-repeat;
  opacity: 0.85;
  margin-bottom: calc(var(--pw) * 0.06);
}
.cover-title { margin: 0; font-family: var(--font-cover); font-weight: 600; line-height: 1.05;
  color: var(--gilt-bright);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 calc(var(--pw) * 0.03) rgba(201, 178, 107, 0.3); }
.cover-title-a { display: block; font-size: calc(var(--pw) * 0.13); font-variant: small-caps; letter-spacing: 0.02em; }
.cover-title-b { display: block; font-size: calc(var(--pw) * 0.052); font-variant: small-caps; letter-spacing: 0.06em; margin-top: 0.35em; }
.cover-rule {
  width: 42%;
  height: 1px;
  margin: calc(var(--pw) * 0.055) 0;
  background: linear-gradient(to right, transparent, var(--gilt), transparent);
}
.cover-sub { margin: 0; font: italic 500 calc(var(--pw) * 0.045) / 1.3 var(--font-cover); color: rgba(234, 217, 160, 0.8); }
.cover-place { margin: calc(var(--pw) * 0.09) 0 0; font: 600 calc(var(--pw) * 0.034) / 1 var(--font-cover);
  font-variant: small-caps; letter-spacing: 0.14em; color: rgba(234, 217, 160, 0.7); }
.cover-open, .cover-turn {
  margin-top: calc(var(--pw) * 0.09);
  background: none;
  border: 1px solid rgba(201, 178, 107, 0.4);
  color: rgba(234, 217, 160, 0.9);
  font: 600 calc(var(--pw) * 0.04) / 1 var(--font-cover);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  padding: 0.6em 1.5em;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.cover-open:hover, .cover-turn:hover { background: rgba(201, 178, 107, 0.12); border-color: var(--gilt-bright); color: var(--gilt-bright); }
.cover-open:focus-visible, .cover-turn:focus-visible { outline: 2px solid var(--gilt-bright); outline-offset: 3px; }
/* The back board carries the logo too, and larger than the front's. The
   leaf is the hover icon only. */
.cover--back .cover-device { width: calc(var(--pw) * 0.26); height: calc(var(--pw) * 0.26); margin-bottom: calc(var(--pw) * 0.07); }
.cover-label { margin: 0 0 0.5em; font: 600 calc(var(--pw) * 0.034) / 1 var(--font-cover);
  font-variant: small-caps; letter-spacing: 0.16em; color: var(--gilt); }
.cover-statement { margin: 0; max-width: 17em; font: italic 500 calc(var(--pw) * 0.05) / 1.3 var(--font-cover);
  color: var(--gilt-bright); }
.cover--back .cover-rule { width: 28%; }

/* A CLOSED BOOK SITS IN THE MIDDLE. page-flip reserves a two-page block and
   puts the front cover in the right-hand slot (the back in the left), so a
   closed book sits half a page off-centre. Sliding the binding — book and tabs
   together — by a quarter of its width centres it, and the slide doubles as
   the book opening. Landscape only; a phone already shows one page. The tabs
   hide on the back board: they belong to the front edge. */
/* The slide runs only once the book has settled (body.is-settled, set by
   book.js two frames after load) — otherwise a book that opens on its cover
   visibly slides into the middle as the page appears. */
body.is-book.is-settled:not(.is-portrait) .binding { transition: transform 0.55s cubic-bezier(.4, 0, .2, 1); }
body.is-book:not(.is-portrait).is-cover .binding { transform: translateX(-25%); }
body.is-book:not(.is-portrait).is-back  .binding { transform: translateX(25%); }
body.is-back .tabs { opacity: 0; pointer-events: none; }
.tabs { transition: opacity 0.3s; }
@media (prefers-reduced-motion: reduce) {
  body.is-book:not(.is-portrait) .binding { transition: none; }
}

/* --- The foot: number in the outer corner, the way to turn beside it ------
   Left page:  ( 12  ← back ) ..................... ( next → )
   Right page: ( ← back ) ..................... ( next →  13 )
   Each side is a capsule. In a
   spread the inner capsule is hidden — the page it would turn to is the one
   beside it; on a phone every page shows both. Built by js/book.js. */
.foot {
  position: absolute;
  left: calc(var(--pw) * 0.085);
  right: calc(var(--pw) * 0.085);
  bottom: calc(var(--pw) * 0.018);
  display: flex;
  align-items: center;
  font: max(12px, calc(var(--pw) * 0.032)) / 1.2 var(--font-ui);
  z-index: 2;
}
.foot-capsule {
  /* a <button> when it turns the page (js/book.js): reset its own look */
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: default;
  display: inline-flex;
  align-items: baseline;
  gap: 0.8em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: rgba(251, 249, 243, 0.92);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 1px 2px rgba(60, 50, 20, 0.08);
}
.foot-capsule--next { margin-left: auto; }
.folio { color: var(--ink-soft); opacity: 0.6; }
.turn-link {
  color: var(--accent-deep);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Every child ignores the pointer, so a tap anywhere on the capsule lands on
   the button itself — page-flip only lets a touch through when its target IS
   the <button>. */
.foot-capsule > *, .turn-link > * { pointer-events: none; }
button.foot-capsule { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  button.foot-capsule:hover .turn-link { color: var(--accent); }
}
button.foot-capsule:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
body:not(.is-portrait) .page--left  .foot-capsule--next:not(:has(.folio)),
body:not(.is-portrait) .page--right .foot-capsule--prev:not(:has(.folio)) { display: none; }

/* --- The plate: the oak, printed inside paper margins ----------------------
   Framed rather than full-bleed on purpose: the library shows the previous
   page's corner as a turn-back hint, and a dark corner over the next page's
   title read as a glitch. With paper margins the corner is paper. */
.page--plate .page-inner, .page--art .page-inner { padding: calc(var(--pw) * 0.1) calc(var(--pw) * 0.085) calc(var(--pw) * 0.15); }   /* clear of the foot */
.plate {
  flex: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(80, 70, 40, 0.25);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(80, 70, 40, 0.15);
}
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- A leaf: the content of one page --------------------------------------
   Head on top, body below. The body takes the rest of the page and SCROLLS
   when the words outrun it — a person is one page and an article is one page,
   however long they are; the type never shrinks to make them fit. */

.leaf {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.leaf-head { flex: none; margin-bottom: calc(var(--pw) * 0.035); }
.leaf-head--center { text-align: center; }

/* Measured against the paper: --accent is 8.6:1 and --accent-deep is 11.9:1,
   so both clear the 4.5:1 that small text needs. Under the green palette this
   file was built with, the lighter of the two was only 3.98:1 and small labels
   HAD to use the deeper one; that constraint no longer binds, and the split is
   kept because it still reads as a hierarchy, not because it has to.
   The 12px floor stays: it is about size, not colour. */
.leaf-kicker {
  font: 500 max(12px, calc(var(--pw) * 0.031)) / 1.2 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 calc(var(--pw) * 0.012);
}
.leaf-title {
  font: 700 calc(var(--pw) * 0.066) / 1.15 var(--font-ui);
  color: var(--accent-deep);
  margin: 0;
}
.leaf-lede {
  font: italic calc(var(--pw) * 0.04) / 1.4 var(--font-body);
  color: var(--ink-soft);
  margin: calc(var(--pw) * 0.015) 0 0;
}

.leaf-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font: calc(var(--pw) * 0.044) / 1.5 var(--font-body);
  padding-right: calc(var(--pw) * 0.02);
}
.leaf-body p { margin: 0 0 0.8em; }
.leaf-body p:last-child { margin-bottom: 0; }
.leaf-body h3 {
  font: 700 calc(var(--pw) * 0.046) / 1.25 var(--font-ui);
  color: var(--accent-deep);
  margin: 1.1em 0 0.45em;
}
.leaf-body h4 {
  font: 700 calc(var(--pw) * 0.042) / 1.25 var(--font-ui);
  color: var(--ink);
  margin: 1em 0 0.35em;
}
.leaf-body ul { padding-left: 1.3em; margin: 0 0 0.8em; }
.leaf-body li { margin: 0 0 0.35em; }
/* --- Links: colour at rest; the theme's mark grows in front on hover -------
   Nothing sits under a link — a resting stroke still reads as an underline,
   only a broken one. It reads in the deep accent at medium weight; on
   hover or keyboard focus the theme's link icon (--theme-link-icon, an oak
   leaf for Oak Park) grows in front of the words. Buttons, pictures, the chapter lists
   and the page feet keep their own looks. */
.leaf-body a:not(.paypal-btn):not(.give-link):not(.way):not(.contents a),
.glance-line a:not(.paypal-btn),
.chat-msg--bot a,
.colophon a {
  color: var(--accent-deep);
  font-weight: 500;
  text-decoration: none;
  border: none;
}
.leaf-body a:not(.paypal-btn):not(.give-link):not(.way):not(.contents a)::before,
.glance-line a:not(.paypal-btn)::before,
.chat-msg--bot a::before,
.colophon a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0.9em;
  vertical-align: -0.1em;
  background: currentColor;
  -webkit-mask: var(--theme-link-icon) center / contain no-repeat;
          mask: var(--theme-link-icon) center / contain no-repeat;
  opacity: 0;
  transform: scale(0.4) rotate(-30deg);
  transform-origin: 50% 90%;
  transition: width 0.28s, margin 0.28s, opacity 0.28s, transform 0.28s;
}
/* ⛔⛔ HOVER ONLY WHERE THERE IS HOVER. On a phone, iOS treats a tap on a link
   whose :hover changes the layout as "show the hover first" and only follows
   the link on a SECOND tap — the leaf grows and pushes the words, so it did
   exactly that. Keyboard focus shows the leaf everywhere; the mouse hover only
   on devices that can hover. */
.leaf-body a:not(.paypal-btn):not(.give-link):not(.way):not(.contents a):focus-visible::before,
.glance-line a:not(.paypal-btn):focus-visible::before,
.chat-msg--bot a:focus-visible::before,
.colophon a:focus-visible::before {
  width: 0.9em;
  margin-right: 0.3em;
  opacity: 1;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .leaf-body a:not(.paypal-btn):not(.give-link):not(.way):not(.contents a):hover::before,
  .glance-line a:not(.paypal-btn):hover::before,
  .chat-msg--bot a:hover::before,
  .colophon a:hover::before {
    width: 0.9em;
    margin-right: 0.3em;
    opacity: 1;
    transform: none;
  }
}
.leaf-body a:focus-visible, .glance-line a:focus-visible,
.chat-msg--bot a:focus-visible, .colophon a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .leaf-body a::before, .glance-line a::before, .chat-msg a::before, .colophon a::before { transition: none; }
}

/* While there is more below, the bottom of the text fades — the one hint a
   page needs that it scrolls. Gone the moment the reader reaches the end. */
.leaf-body.can-scroll {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
}
.leaf-body.can-scroll.at-end {
  -webkit-mask-image: none;
          mask-image: none;
}
/* A scrolling body takes keyboard focus (js/book.js gives it tabindex when it
   scrolls); the ring is drawn on the page, outside the fade mask. */
.leaf-body:focus { outline: none; }
.page-inner:has(> .leaf > .leaf-body:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent-deep); }
/* Programmatic focus after a jump needs no ring on a heading or the book. */
.leaf-title:focus, .book:focus { outline: none; }

/* --- Home: at a glance --------------------------------------------------- */

.welcome-logo {
  display: block;
  height: calc(var(--pw) * 0.12);
  width: auto;
  margin: 0 auto calc(var(--pw) * 0.03);
}
.page--welcome .leaf-title { font-size: calc(var(--pw) * 0.058); }
.page--welcome .leaf-body { font-family: var(--font-ui); }

.glance-h {
  font: 500 max(12px, calc(var(--pw) * 0.033)) / 1 var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-align: center;
  margin: calc(var(--pw) * 0.02) 0 calc(var(--pw) * 0.03);
}
.glance {
  list-style: none;
  margin: 0 0 calc(var(--pw) * 0.055);
  padding: 0;
  display: flex;
  justify-content: center;
  gap: calc(var(--pw) * 0.07);
}
.glance li { display: flex; flex-direction: column; align-items: center; }
.glance-when {
  font: 700 calc(var(--pw) * 0.08) / 1 var(--font-ui);
  color: var(--accent-deep);
  letter-spacing: -0.01em;
  white-space: nowrap;      /* "9:45 am" is one thing; it never breaks */
}
.glance-what {
  font: 500 calc(var(--pw) * 0.034) / 1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.4em;
}
.glance-line {
  text-align: center;
  margin: 0 0 calc(var(--pw) * 0.032);
  font-size: calc(var(--pw) * 0.042);
  line-height: 1.4;
}
.glance-line a {
  color: var(--ink);
}
.glance-line--address a { font-size: calc(var(--pw) * 0.047); }
.glance-line--give { margin-top: calc(var(--pw) * 0.05); }
.glance-line--give a, .contact + .glance-line--give a { border: none; }
.glance-line a.paypal-btn { color: #fff; border: none; }
/* On Home the button sits centred in whatever room is left under the lines,
   the same way it does on Contact. */
#welcome .leaf-body { display: flex; flex-direction: column; }
#welcome .glance-line--give {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: calc(var(--pw) * 0.22);
}
.give-link { font-size: calc(var(--pw) * 0.036); padding: 0.7em 1.6em; }

/* --- Find your way: three doors ------------------------------------------ */

.ways {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pw) * 0.035);
  overflow: hidden;
}
.way {
  position: relative;
  flex: 1;
  min-height: 0;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}
/* page-flip only forwards a click whose target IS the link, so the picture and
   the label under it must not be targets themselves. */
.way > * { pointer-events: none; }
.way img { width: 100%; height: 100%; object-fit: cover; display: block; }
.way span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.55em 0.8em 0.45em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  color: #fff;
  font: 700 calc(var(--pw) * 0.058) / 1 var(--font-ui);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.way:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

/* --- Section dividers: the picture, the title, and what is in the tab ---- */

.page--divider .page-inner { padding: 0; }
.divider-art {
  flex: none;
  height: 26%;
  margin: 0;
  overflow: hidden;
}
.divider-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page--divider .leaf-head {
  flex: none;
  margin: 0;
  padding: calc(var(--pw) * 0.04) calc(var(--pw) * 0.085) 0;
}
/* an opener with no picture (Help) starts its title where a page's head does */
.page--divider .leaf-head:first-child { padding-top: calc(var(--pw) * 0.08); }
.page--divider .leaf-body > p { font-family: var(--font-body); margin-bottom: 0.6em; }
.help-about { color: var(--ink-soft); font-size: 0.92em; }
.page--divider .leaf-title { font-size: calc(var(--pw) * 0.076); }
.page--divider .leaf-body {
  /* the band for the running line is a MARGIN, outside the scroll region —
     padding inside a scroller scrolls away with the list */
  padding: calc(var(--pw) * 0.03) calc(var(--pw) * 0.085) 0;
  margin-bottom: calc(var(--pw) * 0.105);
  font-family: var(--font-ui);
}

/* The chapter's contents: each line a page in this tab. */
.contents { list-style: none; margin: 0; padding: 0; }
.contents li { border-top: 1px solid var(--paper-edge); }
.contents li:first-child { border-top: none; }
.contents a {
  display: flex;
  flex-direction: column;
  padding: 0.38em 0;
  text-decoration: none;
  color: var(--ink);
}
.contents a > * { pointer-events: none; }
.contents-name { font: 500 calc(var(--pw) * 0.042) / 1.25 var(--font-ui); }
.contents-role {
  font: max(12px, calc(var(--pw) * 0.03)) / 1.3 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 0.15em;
}
.contents a:hover .contents-name { color: var(--accent-deep); }
.contents a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }



/* --- People -------------------------------------------------------------- */

.leaf-head--person {
  display: flex;
  align-items: center;
  gap: calc(var(--pw) * 0.05);
}
.portrait {
  flex: none;
  width: calc(var(--pw) * 0.33);
  height: calc(var(--pw) * 0.33);
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.leaf-head-text { min-width: 0; }
.page--person .leaf-title { font-size: calc(var(--pw) * 0.056); }

/* --- Programs ------------------------------------------------------------ */

.programs { margin: 0; }
.program { margin: 0 0 1em; }
.program dt {
  font: 700 calc(var(--pw) * 0.046) / 1.25 var(--font-ui);
  color: var(--accent-deep);
}
.program dd { margin: 0; }
.program-when {
  font: 500 max(12px, calc(var(--pw) * 0.035)) / 1.3 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  margin: 0.15em 0 0.3em !important;
}

/* --- The articles index -------------------------------------------------- */

.toc { margin: 0; padding: 0 0 0 1.5em; }
.toc li { margin: 0 0 0.8em; padding-left: 0.2em; }
.toc li::marker { color: var(--accent-deep); font-family: var(--font-ui); font-weight: 700; }
/* a short list with no order to it — the Events tab */
.leaf-body .toc--plain { list-style: none; padding-left: 0; }   /* beats .leaf-body ul */
.toc--plain li { padding-left: 0; }
.toc a {
  font: 500 calc(var(--pw) * 0.045) / 1.35 var(--font-ui);
  color: var(--ink);
}

/* Pastoral Ponderings' index alone is in the hand face, beside the drawing of
   him writing. Kalam's letters stand apart, so it reads where script would not. */
#articles .leaf-kicker,
#articles .leaf-title,
#articles .toc a,
#articles .toc li::marker { font-family: var(--font-hand); }
#articles .leaf-kicker { letter-spacing: 0.06em; }

/* --- Help: the assistant --------------------------------------------------
   The page's body is a column: the conversation grows and scrolls in the
   middle, the field stays at the foot. js/chat.js builds it into #chat-slot. */

.page--help .leaf-body { font-family: var(--font-ui); display: flex; flex-direction: column; overflow: hidden; }
.chat-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-slot:not(.is-live) { justify-content: center; align-items: center; text-align: center; color: var(--ink-soft); }
.chat-slot-note { margin: 0; font-style: italic; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--pw) * 0.025); }
.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pw) * 0.02);
  padding: 2px;
}
.chat-msg {
  margin: 0;
  max-width: 88%;
  padding: 0.5em 0.8em;
  border-radius: 12px;
  font-size: max(13px, calc(var(--pw) * 0.04));
  line-height: 1.4;
}
.chat-msg--bot { align-self: flex-start; background: var(--accent-pale); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg--user { align-self: flex-end; background: var(--accent-deep); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg--email { background: transparent; color: var(--ink-soft); padding-top: 0; }
.chat-msg--user a { color: #fff; }
/* the padding is room for the field's focus ring, which the page would
   otherwise clip on the left */
.chat-form { flex: none; display: flex; gap: 0.5em; padding: 4px; }
.chat-input {
  flex: 1;
  min-width: 0;
  font: max(16px, calc(var(--pw) * 0.042)) / 1.3 var(--font-ui);   /* 16px: iOS does not zoom */
  padding: 0.5em 0.8em;
  border: 1px solid var(--accent-mid);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}
.chat-input:focus { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.chat-send {
  flex: none;
  font: 500 max(12px, calc(var(--pw) * 0.034)) / 1 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, var(--action-from) 0%, var(--action-to) 100%);
  border: none;
  border-radius: 999px;
  padding: 0 1.2em;
  cursor: pointer;
}
.chat-send:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

/* --- Contact ------------------------------------------------------------- */

.leaf-body .contact { list-style: none; margin: 0 0 1.2em; padding: 0; }   /* flush with the headings */
.contact li { display: flex; flex-direction: column; margin: 0 0 1em; }
.contact-label {
  font: 500 max(12px, calc(var(--pw) * 0.031)) / 1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.35em;
}
.contact a {
  align-self: flex-start;
  font: calc(var(--pw) * 0.046) / 1.35 var(--font-ui);
  color: var(--ink);
}
/* Two links on one line — the list stacks its children, so they need a row. */
.contact-row { display: flex; align-items: baseline; gap: 0.6em; }
.contact-sep { color: var(--ink-soft); }
/* The button sits centred in whatever room is left under the rows. */
#contact .leaf-body { display: flex; flex-direction: column; }
#contact .contact { flex: none; }
.giving {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: calc(var(--pw) * 0.32);
}

/* Our own PayPal button. The wordmark is Poppins Bold — the nearest open face
   to PayPal's own — in white on the church's accent, with "Give with" set small
   above it. One element, no hosted image. */
.paypal-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45em 1.4em 0.5em;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--action-from) 0%, var(--action-to) 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.paypal-btn > * { pointer-events: none; }
.paypal-btn:hover { filter: brightness(1.06); }
.paypal-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.paypal-give {
  font: 500 max(9px, calc(var(--pw) * 0.022)) / 1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.25em;
}
.paypal-mark {
  font: 700 max(16px, calc(var(--pw) * 0.052)) / 1 'Poppins', var(--font-ui);
  letter-spacing: -0.025em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}
/* The body's link colour outranks a button's own; the buttons stay white. */
.leaf-body .give-link, .leaf-body .paypal-btn { color: #fff; }
.leaf-body--policy { font-size: calc(var(--pw) * 0.038); }

/* --- The colophon under the book ----------------------------------------- */

.colophon {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
  padding: 8px 14px;
  font: 12px/1.4 var(--font-ui);
  color: var(--ink-soft);
  background: var(--paper);
  border-top: 1px solid var(--paper-edge);
}


/* Read by a screen reader, never drawn. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Phones: one page at a time ------------------------------------------
   Keyed to .is-portrait, which js/book.js sets from page-flip's OWN
   orientation — a media query here would be a second opinion about when the
   book goes single-page, and the two would disagree in the band between. */

/* No edge arrows on a phone: the page foot's ← back / next → turn the page; the covers carry
   their own buttons; a swipe works everywhere. The room they held goes back to
   the book. */
body.is-portrait .turn { display: none; }
body.is-portrait .stage { padding: 10px calc(var(--tabw) + 8px) 12px 8px; }
body.is-portrait .tabs { gap: 3px; }

/* A phone held sideways: the book is held at one readable page and the stage
   scrolls, from the top — a centred item taller than its box would clip above. */
body.is-cramped .stage { overflow-y: auto; align-items: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .tab, .turn, .give, .give-link { transition: none; }
}

/* ===========================================================================
   THE PLAIN VIEW — and the page with no JavaScript at all.
   The same sections, laid out as an ordinary readable page. The tabs become a
   row of links to the sections; the book, its arrows and its shadows are gone.
   =========================================================================== */

/* With the book running the sections are lifted out of #pages by book.js, so
   the empty container is hidden; in the plain view it is the page. */
html.js .pages { display: none; }
html.js body.is-plain .pages { display: block; }

html:not(.js) .book, body.is-plain .book,
html:not(.js) .turn, body.is-plain .turn { display: none; }

html:not(.js) .stage, body.is-plain .stage {
  flex: none;
  display: block;
  padding: 12px 16px 0;
}
html:not(.js) .binding, body.is-plain .binding { max-width: 720px; margin: 0 auto; }
html:not(.js) .tabs, body.is-plain .tabs {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
html:not(.js) .tab, body.is-plain .tab {
  writing-mode: horizontal-tb;
  width: auto;
  padding: 8px 14px;
  border-left: 1px solid var(--accent-mid);
  border-radius: 999px;
}

html:not(.js) .pages, body.is-plain .pages {
  --pw: 440px;               /* a fixed type scale: about 19px body text */
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}
html:not(.js) .leaf, body.is-plain .leaf {
  margin: 0 0 36px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--paper-edge);
}
html:not(.js) .leaf-body, body.is-plain .leaf-body { overflow: visible; }
html:not(.js) .divider-art, body.is-plain .divider-art { height: auto; max-height: 260px; }
html:not(.js) .ways, body.is-plain .ways { flex-direction: row; }
html:not(.js) .way, body.is-plain .way { aspect-ratio: 3 / 2; }
html:not(.js) .chat-slot, body.is-plain .chat-slot { min-height: 160px; }
html:not(.js) .chat, body.is-plain .chat { min-height: 360px; }
html:not(.js) .foot, body.is-plain .foot { display: none; }
html:not(.js) .leaf--cover, body.is-plain .leaf--cover,
html:not(.js) .leaf--back, body.is-plain .leaf--back,
html:not(.js) .leaf--plate, body.is-plain .leaf--plate,
html:not(.js) .leaf--art, body.is-plain .leaf--art { display: none; }

/* ------------------------------------------------------- the announcement
   js/notice.js, read from an event's pages. A card laid inside the open pages on a
   visitor's first page, their edges showing round it (notice.js places it):
   the picture fills it (portrait, like the article pictures), the words sit
   centred on a clear glass pane in its middle: barely tinted, blurred
   behind, white words with a soft shadow. The
   words are real text, so a screen reader and a search engine get them and
   the hours can change without a new picture. */
.notice {
  width: min(92vw, 30rem, calc(88vh * 2 / 3));
  aspect-ratio: 2 / 3;
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cover-cloth) center / cover no-repeat;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
.notice[open] { display: flex; flex-direction: column; justify-content: center; }
/* placed over the book by notice.js: its own left/top/width/height win */
.notice.is-placed { position: fixed; inset: auto; margin: 0; max-width: none; max-height: none; aspect-ratio: auto; }
.notice:not([open]) { display: none; }
/* no picture yet: the cloth of the covers, so the card still reads as the book's */
.notice--plain { background: radial-gradient(circle at 50% 35%, var(--cover-cloth), var(--cover-cloth-deep)); }
.notice::backdrop { background: rgba(30, 32, 20, 0.45); }
/* where <dialog> is not understood, it still sits in the middle, on top */
.notice[open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 50; }

.notice-glass {
  margin: 0.75rem;
  text-align: center;
  padding: 1rem 1.15rem 1.1rem;
  max-height: 60%;
  overflow-y: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  /* the standard property LAST: a minifier may keep only the last of the pair,
     and Chromium ignores the -webkit- one */
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 5px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.notice-title {
  margin: 0 0 0.3rem;
  font-family: var(--font-cover);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
}
.notice-when {
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1rem;
}
.notice-text {
  margin: 0;
  white-space: pre-line;           /* a line break in the file is a line break on the card */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}
.notice-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 249, 243, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font: 500 1.5rem/1 var(--font-ui);
  cursor: pointer;
}
.notice-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------- an event
   The details page of an event spread (index.html, the Events tab): title,
   when it runs, then its hours, centred both ways on the page. The body only shrinks and scrolls if it outgrows the page.
   The Events list is centred the same way, so a short list does not read as
   an empty one (leaf--centered). */
.leaf--event, .leaf--centered { justify-content: center; text-align: center; }
.leaf--event .leaf-body, .leaf--centered .leaf-body { flex: 0 1 auto; padding-right: 0; }
.event-when {
  margin: 0 0 0.6em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.15em;
  color: var(--accent-deep);
}
.event-hours { margin: 0 0 1em; line-height: 1.6; }
.events-none { font-style: italic; color: var(--ink-soft); }

/* A page whose content has not been written yet. Centred by leaf--centered on
   the section; this only sets the voice, which is quiet on purpose — it is a
   note to the reader, not a heading. */
.soon {
  margin: 0;
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}