/* Editorial home: full-bleed hero, white sections, quiet lists. Scoped to body.ed. */
@font-face { font-family: "EB Garamond Roman"; src: url("assets/fonts/EBGaramond-Roman.ttf") format("truetype"); font-weight: 400 800; font-style: normal; font-display: swap; }
body.ed { --serif2: "EB Garamond Roman", "EB Garamond", Georgia, serif; background: #fff; color: #111; font-family: var(--body); font-size: 1.0625rem; line-height: 1.55; }
.ed a { color: inherit; }

/* hero */
.e-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #0c0c0a url("assets/video/hero-poster.jpg") center / cover no-repeat; color: #fff; }
.e-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-hero::after { content: ""; position: absolute; inset: 0; background: rgba(6, 8, 6, .38); pointer-events: none; }
.e-grain { position: absolute; inset: 0; z-index: 1; opacity: .94; pointer-events: none; overflow: hidden; }
.e-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 var(--margin) clamp(40px, 9vh, 96px); }
.e-eyebrow { margin: 0 0 16px; font-weight: 700; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.e-hero h1 { margin: 0 0 18px; max-width: 13em; font-family: var(--serif2); font-weight: 400; font-size: clamp(2.8rem, 7.4vw, 6.4rem); line-height: 1.02; letter-spacing: -.015em; text-transform: none; text-shadow: none; text-align: left; color: #fff; }
.e-sub { margin: 0 0 22px; max-width: 30em; font-weight: 700; font-size: 1.1rem; line-height: 1.45; }
.e-go { font-weight: 700; font-size: .875rem; letter-spacing: .06em; text-decoration: none; border-bottom: 2px solid #fff; padding-bottom: 3px; }
.e-go:hover { background: #fff; color: #111; }

/* sections */
.e-sec { padding: clamp(56px, 11vh, 120px) var(--margin); }
.e-wrap { max-width: 72rem; margin-inline: auto; }
.e-label { margin: 0 0 14px; font-weight: 700; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: #6b6b64; }
.e-h2 { margin: 0 0 clamp(22px, 4vh, 40px); max-width: 16em; font-family: var(--serif2); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.01em; text-transform: none; text-shadow: none; text-align: left; color: #111; }
.e-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid #111; }
.e-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 8px clamp(14px, 3vw, 40px); align-items: baseline; padding: 20px 0; border-bottom: 1px solid #cfcfc8; text-decoration: none; }
.e-row:hover { background: #f4f3ee; }
.e-row .num { font-family: var(--serif2); font-size: 2rem; line-height: 1; }
.e-row h3 { margin: 0; font-family: var(--serif2); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; text-transform: none; text-shadow: none; text-align: left; color: #111; }
.e-row p { margin: 4px 0 0; color: #3b3b36; }
.e-row .arrow { font-weight: 700; font-size: .875rem; letter-spacing: .06em; white-space: nowrap; }
.e-more { display: inline-block; margin-top: 22px; font-weight: 700; font-size: .875rem; letter-spacing: .06em; }

.e-vision { background: #f4f3ee; }
.e-vision .e-big { margin: 0 0 24px; max-width: 18em; font-family: var(--serif2); font-weight: 500; font-size: clamp(1.8rem, 4.2vw, 3.2rem); line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; }
.e-vision p { max-width: 38em; }
.e-btn { display: inline-block; padding: 14px 22px; background: #111; color: #fff !important; font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 2px solid #111; }
.e-btn:hover, .e-btn:focus-visible { background: #fff; color: #111 !important; outline: none; }
.e-btn.alt { background: transparent; color: #111 !important; }
.e-btn.alt:hover { background: #111; color: #fff !important; }

.e-book { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.e-book img { display: block; width: min(100%, 340px); height: auto; margin-inline: auto; }
.e-book p { max-width: 34em; }
.e-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.e-essay { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
.e-essay .meta { font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #6b6b64; }

.e-covers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); margin: 0 0 26px; }
.e-covers img { display: block; width: 100%; height: auto; }

.ed .site-foot.site-foot-line { margin: 0; background: #111; border-top: 0; color: #a8a8a0; }
.ed .foot-line, .ed .foot-line span { color: #a8a8a0; }
.ed .foot-line a { color: #fff; }

@media (max-width: 760px) {
  .e-book { grid-template-columns: minmax(0, 1fr); }
  .e-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e-row, .e-essay { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .e-essay { grid-template-columns: minmax(0, 1fr); }
  .e-row .arrow { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .e-hero video { display: none; } }

/* header: frosted pill on desktop that condenses to the hands mark; round emblem + menu button on phones */
@media (min-width: 761px) {
  .ed .top { left: 50%; right: auto; top: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); height: auto; padding: 7px 28px 7px 14px; gap: 30px; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(238, 235, 228, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: none; }
  .ed .top .mark { position: static; transform: none; display: block; width: 38px; height: 38px; margin: 0; background: transparent; }
  .ed .top .mark img { height: 36px; width: auto; filter: none; }
  .ed .top nav#site-nav { display: flex; gap: 30px; }
  .ed .top nav a { font-family: var(--serif2); font-weight: 500; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 6px 0; }
  .ed .nav-toggle { display: none; }
  .ed .top.is-stuck { left: 50%; margin: 0; top: 14px; transform: translateX(-50%); padding: 5px; gap: 0; background: var(--paper); border: 2px solid var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  .ed .top.is-stuck .mark { width: 36px; height: 36px; }
  .ed .top.is-stuck .mark img { height: 32px; filter: invert(1); }
  .ed .top.is-stuck nav#site-nav { display: none; }
  .ed .top.is-stuck:hover, .ed .top.is-stuck.menu-open { padding: 5px 24px 5px 5px; gap: 20px; }
  .ed .top.is-stuck:hover nav#site-nav, .ed .top.is-stuck.menu-open nav#site-nav { display: flex; gap: 24px; }
  .ed .top.is-stuck nav a { color: var(--ink); font-size: .85rem; }
  .ed .top.is-stuck nav a:hover { border-bottom: 2px solid var(--ink); }
}
@media (max-width: 760px) {
  .ed .top { justify-content: flex-end; }
  .ed .top .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(238, 235, 228, .88); }
  .ed .top .mark img { height: 30px; width: auto; filter: invert(1); }
  .ed .top.is-stuck .mark { position: static; transform: none; width: 34px; height: 34px; background: transparent; }
  .ed .top.is-stuck .mark img { height: 30px; }
  .ed .top.menu-open nav#site-nav a { color: #fff; }
  .ed .top.is-stuck nav#site-nav a, .ed .top.is-stuck nav#site-nav a:nth-child(3) { color: var(--ink); }
}

/* ---- match church.nyc: type and measurements taken from the live page at 1280 x 800 ---- */
@font-face { font-family: "Libre Caslon Condensed"; src: url("assets/fonts/LibreCaslonCondensed.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("assets/fonts/BarlowSemiCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("assets/fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype"); font-weight: 600 700; font-style: normal; font-display: swap; }
body.ed { --serif2: "Libre Caslon Condensed", "EB Garamond Roman", Georgia, serif; --body: "Barlow Semi Condensed", "Arial Narrow", sans-serif; font-family: var(--body); font-weight: 500; font-size: 1.125rem; }
.e-hero-inner { padding-left: clamp(24px, 7.2vw, 140px); padding-right: var(--margin); padding-bottom: clamp(48px, 13vh, 140px); }
.e-hero h1 { max-width: 8.2em; font-weight: 400; font-size: clamp(2.7rem, 6.56vw, 5.25rem); line-height: 1; letter-spacing: 0; }
.e-eyebrow { font-weight: 600; font-size: 1.1875rem; letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 18px; }
.e-sub { max-width: 28em; font-weight: 600; font-size: 1.1875rem; line-height: 1.35; margin-bottom: 20px; }
.e-go { font-weight: 600; font-size: .875rem; letter-spacing: .045em; }
.e-label, .e-row .arrow, .e-more, .e-btn, .e-essay .meta, .s-btn { font-family: var(--body); font-weight: 600; }
.e-h2, .e-row h3, .e-vision .e-big, .e-row .num { font-weight: 400; }
@media (min-width: 761px) {
  .ed .top { top: 24px; padding: 0 34px 0 18px; height: 72px; gap: 40px; border: 0; border-radius: 36px; background: rgba(249, 250, 245, .55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .ed .top .mark { width: 44px; height: 44px; }
  .ed .top .mark img { height: 40px; filter: invert(1); }
  .ed .top nav#site-nav { gap: 40px; }
  .ed .top nav a { font-family: var(--serif2); font-weight: 400; font-size: 1.375rem; letter-spacing: 0; color: #111; padding: 4px 0; border-bottom: 0; }
  .ed .top nav a:hover { color: #111; border-bottom: 2px solid #111; }
  .ed .top.is-stuck { height: auto; padding: 5px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
  .ed .top.is-stuck .mark { width: 36px; height: 36px; }
  .ed .top.is-stuck .mark img { height: 32px; }
  .ed .top.is-stuck:hover, .ed .top.is-stuck.menu-open { padding: 5px 24px 5px 5px; gap: 20px; }
  .ed .top.is-stuck nav a { font-size: 1.1rem; }
}

.e-hero h1 { text-transform: uppercase; letter-spacing: .01em; }

.e-hero h1 { font-weight: 700; -webkit-text-stroke: 2.5px #fff; paint-order: stroke fill; letter-spacing: .015em; }

/* no hamburger: the hands mark opens the menu on phones */
.ed .nav-toggle { display: none !important; }
.ed .top nav .m-home { display: none; }
@media (max-width: 760px) { .ed .top nav .m-home { display: block; } }

/* full-view menu: opened by the hands mark on phones and when the pill is condensed */
.ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; padding: 90px var(--margin) 40px; background: #0a0a09; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.ov.open { opacity: 1; visibility: visible; }
.ov nav { display: flex; flex-direction: column; gap: clamp(6px, 2vh, 18px); }
.ov a { font-family: var(--serif2); font-weight: 700; text-transform: uppercase; font-size: clamp(2.6rem, 10.5vw, 6rem); line-height: 1.02; letter-spacing: .01em; color: #fff; text-decoration: none; -webkit-text-stroke: 1.5px #fff; paint-order: stroke fill; }
.ov a[aria-current="page"] { color: #b3121f; -webkit-text-stroke-color: #b3121f; }
.ov a:hover, .ov a:focus-visible { color: #e0b24a; -webkit-text-stroke-color: #e0b24a; outline: none; }
.ov a:active { color: #b3121f; -webkit-text-stroke-color: #b3121f; }
.ed .top.menu-open { z-index: 70; }
.ed .top.menu-open nav#site-nav { display: none !important; }
@media (max-width: 760px) { .ed .top.menu-open { background: transparent; border-color: transparent; } }
@media (min-width: 761px) {
  .ed .top.is-stuck:hover, .ed .top.is-stuck.menu-open { padding: 5px; gap: 0; }
  .ed .top.is-stuck:hover nav#site-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ov { transition: none; } }
.ed .top.menu-open, .ed .top.is-stuck.menu-open { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ed .top.menu-open .mark, .ed .top.is-stuck.menu-open .mark { background: transparent; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.ed .top.menu-open .mark img, .ed .top.is-stuck.menu-open .mark img { filter: none; height: 30px; }

/* condensed badge: the hands sit dead center in a round button */
.ed .top.is-stuck { padding: 5px; gap: 0; justify-content: center; align-items: center; }
.ed .top.is-stuck .mark { margin: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; }
.ed .top.is-stuck .mark img { height: 32px; width: auto; display: block; margin: 0 auto; }
@media (max-width: 760px) { .ed .top.is-stuck { padding: 5px; gap: 0; } .ed .top.is-stuck .mark { width: 38px; height: 38px; } }

.e-hero.e-short { min-height: 62svh; }

/* ---------- Sermons: reading pages ---------- */
.e-hero.e-title { min-height: 56svh; background: #0b0b0a; }
.e-title::after { background: rgba(0, 0, 0, .15); }
.e-title h1 { max-width: 12em; }
.sm { background: #fff; color: #17160f; padding: clamp(40px, 8vh, 96px) var(--margin) clamp(56px, 10vh, 120px); font-family: "EB Garamond Roman", "EB Garamond", Georgia, serif; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); line-height: 1.72; }
.sm-col { max-width: 34em; margin-inline: auto; }
.sm p { margin: 0 0 1.1em; }
.sm-dim { display: block; margin: 0 0 32px auto; padding: 6px 12px; background: transparent; color: inherit; border: 1.5px solid currentColor; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.sm-epi { margin: 0 0 28px; font-style: italic; font-size: 1.3em; line-height: 1.4; }
.sm-text { margin: 0 0 12px; padding: 0 0 0 20px; border-left: 3px solid currentColor; }
.sm-text blockquote { margin: 0; font-size: .95em; }
.sm-text figcaption { margin-top: 6px; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.sm-mark { text-align: center; margin: 28px 0 24px !important; font-size: 1.4rem; opacity: .7; }
.sm-h { margin: 2.2em 0 .8em; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .24em; text-transform: uppercase; text-align: center; text-shadow: none; color: inherit; }
.sm-h::before, .sm-h::after { content: "\2022"; margin: 0 .9em; opacity: .6; }
.sm-box, .sm-prayer, .sm-carry, .sm-study { margin-top: 3.2em; }
.sm-box h2, .sm-prayer h2, .sm-carry h2, .sm-study h2 { margin: 0 0 .8em; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .24em; text-transform: uppercase; text-align: left; text-shadow: none; color: inherit; border-top: 2px solid currentColor; padding-top: 12px; }
.sm-box ul { list-style: none; margin: 0; padding: 0; }
.sm-box li { position: relative; padding: 0 0 0 1.6em; margin: 0 0 .9em; }
.sm-box li::before { content: "\2020"; position: absolute; left: 0; top: 0; }
.sm-prayer p { font-style: italic; font-size: 1.05em; }
.sm-carry p { font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 1.9em; line-height: 1.15; text-transform: uppercase; letter-spacing: .005em; }
.sm-study .lead { font-style: italic; }
.sm-study ul { list-style: none; margin: 0; padding: 0; font-size: .92em; line-height: 1.5; }
.sm-study li { margin: 0 0 1em; }
.sm-study .ref { display: block; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.sm-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4em; padding-top: 20px; border-top: 2px solid currentColor; }
.sm-pn a { text-decoration: none; display: block; }
.sm-pn a.next { text-align: right; }
.sm-pn span { display: block; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.sm-pn b { font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 1.5rem; text-transform: uppercase; line-height: 1.1; }
.sm-pn a:hover b { text-decoration: underline; text-underline-offset: 5px; }
.sm.dim { background: #11110f; color: #d9d2bf; }
.sm.dim .sm-pn, .sm.dim .sm-text { border-color: #d9d2bf; }
@media (max-width: 760px) { .sm-pn { grid-template-columns: 1fr; } .sm-pn a.next { text-align: left; } }

/* ---------- Course ---------- */
.cq { margin: 1.1em 0 1.1em 0; padding: 0 0 0 20px; border-left: 3px solid currentColor; font-style: italic; }
.cl { font-family: var(--body); font-weight: 700; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; }
.cli { list-style: none; margin: 0 0 1.1em; padding: 0; }
.cli li { position: relative; padding: 0 0 0 1.4em; margin: 0 0 .5em; }
.cli li::before { content: "\2022"; position: absolute; left: 0; }
.cq-list { margin: 0; padding: 0 0 0 1.4em; }
.cq-list li { margin: 0 0 .9em; padding-left: .3em; }
.sm-done { margin: 3em 0 0 !important; }
.sm-done .e-btn { cursor: pointer; font-family: var(--body); }
.sm.dim .e-btn { background: #d9d2bf; color: #11110f !important; border-color: #d9d2bf; }
.e-row.is-done .meta { color: #17160f; }

/* an old phone rule hid every third nav link; keep all links in the full-screen menu */
.ov nav a, .ov nav a:hover, .ov nav a:focus-visible, .ov nav a:active { display: block; border-bottom: 0 !important; text-decoration: none; padding: 0; box-shadow: none; }

/* ---------- My vision: large type that fills in as you scroll ---------- */
.e-vis { background: #e9e6dd; color: #111; padding: clamp(88px, 18vh, 200px) var(--margin); }
.e-vis-col { max-width: 38rem; margin-left: clamp(0px, 13vw, 240px); }
.e-vis .e-label { color: #111; }
.e-vis-h { margin: 0 0 clamp(28px, 5vh, 52px); max-width: 11em; font-family: var(--serif2); font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -.01em; text-transform: uppercase; text-shadow: none; text-align: left; color: #111; }
.e-vis-h .w { opacity: .16; transition: opacity .35s ease; }
.e-vis-h .w.on { opacity: 1; }
.e-vis p { margin: 0 0 1.1em; font-size: 1.1875rem; line-height: 1.5; max-width: 34em; }
.e-vis .e-more { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .e-vis-h .w { opacity: 1; transition: none; } }

/* My vision on a candle still */
.e-vis { position: relative; background: #0a0b09 url("assets/video/vision-still.jpg") center / cover no-repeat; color: #f1eee4; overflow: hidden; }
.e-vis::before { content: ""; position: absolute; inset: 0; background: rgba(5, 7, 5, .46); pointer-events: none; }
.e-vis-col { position: relative; }
.e-vis .e-label { color: #f1eee4; }
.e-vis-h { color: #fff; }
.e-vis-h .w { opacity: .2; }
.e-vis p { color: #ebe7da; }
.e-vis .e-more { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 2px; text-decoration: none; }
.e-vis .e-more:hover { background: #fff; color: #111; }

/* words come into focus instead of fading */
.e-vis-h .w { display: inline-block; opacity: .55; filter: blur(14px); transition: filter .6s ease, opacity .6s ease; will-change: filter; }
.e-vis-h .w.on { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .e-vis-h .w { opacity: 1; filter: none; transition: none; } }

/* My vision: flat color, no image */
.e-vis { background: #1f3a2e; }
.e-vis::before { display: none; }

/* ---------- Devotionals ---------- */
.dv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.dv-tile { display: flex; flex-direction: column; justify-content: flex-end; min-height: 18rem; padding: 22px; background: var(--c); color: #fff; text-decoration: none; position: relative; overflow: hidden; }
.dv-tile .k { font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.dv-tile b { margin: 8px 0 6px; font-family: var(--serif2); font-weight: 700; font-size: clamp(2rem, 3.4vw, 3rem); line-height: .98; text-transform: uppercase; }
.dv-tile .s { font-size: .98rem; line-height: 1.3; opacity: .92; }
.dv-tile .w { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .45); font-size: .9rem; font-style: italic; }
.dv-tile:hover, .dv-tile:focus-visible { outline: 3px solid #111; outline-offset: -3px; filter: brightness(1.12); }
.dv-part { margin: 36px 0 12px; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; text-align: left; text-shadow: none; color: #111; }
.dv-how p { max-width: 36em; }
.dv-epi { margin-top: 28px; font-style: italic; max-width: 36em; }
.e-hero.dv h1 { font-size: clamp(2.2rem, 5.4vw, 4.4rem); max-width: 14em; }
.dv-crumb { margin: 0 0 18px; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.dv-crumb a { text-decoration: none; }
.dv-crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dv-sec { margin-top: 2.6em; }
.dv-sec h2 { margin: 0 0 .8em; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .24em; text-transform: uppercase; text-align: left; text-shadow: none; color: inherit; border-top: 2px solid currentColor; padding-top: 12px; }
.sm-study p { margin: 0 0 1.1em; }
@media (max-width: 900px) { .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dv-grid { grid-template-columns: minmax(0, 1fr); } .dv-tile { min-height: 14rem; } }
.dv-tile b { color: #fff; }

/* ---------- What this is, and is not ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.e-is { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e-is-col { padding: clamp(56px, 11vh, 120px) var(--margin); }
.e-is-yes { background: #fff; color: #111; }
.e-is-no { background: #111; color: #f1eee4; }
.e-is-yes .e-label { color: #111; }
.e-is-no .e-label { color: #d9d4c4; }
.e-is-big { margin: 0 0 clamp(20px, 4vh, 40px); font-family: var(--serif2); font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: .95; text-transform: uppercase; letter-spacing: -.01em; }
.e-is-no .e-is-big { text-decoration: line-through; text-decoration-thickness: .07em; text-decoration-color: #8f8a7b; }
.e-is ol { list-style: none; margin: 0; padding: 0; counter-reset: i; max-width: 30rem; }
.e-is li { counter-increment: i; position: relative; padding: 16px 0 16px 2.6rem; border-top: 1px solid currentColor; font-size: 1.1875rem; line-height: 1.4; }
.e-is li:last-child { border-bottom: 1px solid currentColor; }
.e-is li::before { content: counter(i); position: absolute; left: 0; top: 14px; font-family: var(--serif2); font-weight: 700; font-size: 1.7rem; line-height: 1; }
.e-is-no li::before { content: "\00d7"; }
.e-is li b { display: block; font-family: var(--serif2); font-weight: 700; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .005em; margin-bottom: 4px; }
@media (max-width: 860px) { .e-is { grid-template-columns: minmax(0, 1fr); } }

/* My vision on paper */
.e-vis { background: #e9e6dd; color: #111; }
.e-vis .e-label { color: #111; }
.e-vis-h { color: #111; }
.e-vis p { color: #1c1b15; }
.e-vis .e-more { color: #111; border-bottom: 2px solid #111; }
.e-vis .e-more:hover { background: #111; color: #fff; }

/* My vision: white, directly under the hero */
.e-vis { background: #fff; }

/* ---------- Click-through photo grid ---------- */
.gt-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.6vw, 20px); }
.gt-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt-four .gt-wide { grid-column: 1 / -1; }
.gt-four .gt-wide .gt { min-height: clamp(18rem, 28vw, 24rem); }
.gt-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 20rem; padding: clamp(18px, 2vw, 28px); overflow: hidden; background: #111; color: #fff; text-decoration: none; isolation: isolate; }
.gt-four .gt { min-height: clamp(20rem, 34vw, 30rem); }
.gt img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .7s ease; }
.gt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .42); transition: background .4s ease; }
.gt:hover img, .gt:focus-visible img { transform: scale(1.05); }
.gt:hover::after, .gt:focus-visible::after { background: rgba(0, 0, 0, .28); }
.gt:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.gt-k { font-weight: 600; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.gt b { margin: 8px 0 6px; font-family: var(--serif2); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: .98; text-transform: uppercase; color: #fff; }
.gt-six .gt b { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.gt-s { font-size: 1rem; line-height: 1.3; max-width: 24em; }
.gt-all { background: #111; }
.gt-all::after { background: transparent; }
.gt-all:hover { background: #2a2a28; }
@media (max-width: 900px) { .gt-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gt-four, .gt-six { grid-template-columns: minmax(0, 1fr); } .gt, .gt-four .gt { min-height: 15rem; } }
@media (prefers-reduced-motion: reduce) { .gt img { transition: none; } }

/* grid tiles: off-white text on every photo */
.gt .gt-k, .gt .gt-s { color: #ece9e0; opacity: 1; }
.gt b { color: #f4f1e8; }
.gt::after { background: rgba(0, 0, 0, .5); }
.gt:hover::after, .gt:focus-visible::after { background: rgba(0, 0, 0, .38); }

/* This is: forest green. This is not: oxblood. */
.e-is-yes { background: #1f3a2e; color: #f1eee4; }
.e-is-no { background: #5a1f2a; color: #f1eee4; }
.e-is-yes .e-label, .e-is-no .e-label { color: #e4dfd0; }
.e-is-yes .e-is-big, .e-is-no .e-is-big { color: #f6f3ea; }
.e-is-no .e-is-big { text-decoration-color: #d9b3b8; }
.e-is li b { color: #f6f3ea; }

.e-is-yes { background: #142a20; }

/* index entries on phones: label, title, then a quiet "min read" line, all in one left-aligned column */
@media (max-width: 760px) {
  .e-row.e-essay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; padding: 18px 0; }
  .e-row.e-essay > .meta { grid-column: 1; margin: 0 0 2px; }
  .e-row.e-essay > span:nth-child(2) { grid-column: 1; min-width: 0; }
  .e-row.e-essay > .arrow { grid-column: 1; margin-top: 6px; }
  .e-row.e-essay h3 { font-size: 1.55rem; line-height: 1.12; overflow-wrap: anywhere; }
  .e-row.e-essay p { margin: 4px 0 0; }
}

/* hero text always clears the logo button / pill, however long the title is */
.e-hero-inner { padding-top: 132px; }
@media (max-width: 760px) { .e-hero-inner { padding-top: 104px; } }

.e-hero-inner { padding-top: 152px; }
@media (max-width: 760px) { .e-hero-inner { padding-top: 108px; } }

/* ---------- Home hero: icon wall under the candle video ---------- */
.e-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.95) contrast(1.05); }
.e-hero-altar video { mix-blend-mode: screen; opacity: .85; }
.e-hero-altar::after { background: linear-gradient(180deg, rgba(6, 8, 6, .4), rgba(6, 8, 6, .1) 40%, rgba(6, 8, 6, .75) 100%); }

/* ---------- Phone header: the emblem button never moves ---------- */
@media (max-width: 760px) {
  .ed .top, .ed .top.is-stuck { left: 0; right: 0; margin: 0 auto; top: 10px; bottom: auto; width: max-content; height: auto; padding: 5px; gap: 0; justify-content: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ed .top .mark, .ed .top.is-stuck .mark { position: static; transform: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; }
  .ed .top .mark img, .ed .top.is-stuck .mark img { height: 30px; width: auto; filter: invert(1); }
}
@media (max-width: 760px) {
  html .ed .top.menu-open, html .ed .top.is-stuck.menu-open { padding: 5px; gap: 0; background: transparent; border-color: #fff; }
  html .ed .top.menu-open .mark, html .ed .top.is-stuck.menu-open .mark { width: 36px; height: 36px; box-shadow: none; }
}

/* ---------- Study: Search the Scriptures ---------- */
.st-prose { max-width: 38em; font-family: "EB Garamond Roman", "EB Garamond", Georgia, serif; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.65; }
.st-prose p { margin: 0 0 1em; }
.st-order { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 36px 44px; }
.st-grp h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid currentColor; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; }
.st-grp ol { list-style: none; margin: 0; padding: 0; }
.st-grp li { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.st-grp li a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; color: inherit; text-decoration: none; font-family: "EB Garamond Roman", "EB Garamond", Georgia, serif; font-size: 1.2rem; line-height: 1.3; }
.st-grp li a:hover .b, .st-grp li a:focus-visible .b { text-decoration: underline; text-underline-offset: 4px; }
.st-grp .n, .st-grp .pg { font-family: var(--body); font-size: .75rem; letter-spacing: .08em; opacity: .6; align-self: center; }
.st-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 16px 28px; margin: 0 0 8px; padding: 14px 0; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; font-size: .95em; }
.st-facts dt { font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.st-facts dd { margin: 2px 0 0; line-height: 1.35; }
.st .sm-box ul { margin: 0; }
.st-verse { margin-top: 3.2em; }
.st-verse h2, .st-jr h2 { margin: 0 0 .8em; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .24em; text-transform: uppercase; text-align: left; text-shadow: none; color: inherit; border-top: 2px solid currentColor; padding-top: 12px; }
.st-done { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--body); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.st-jr { margin-top: 3.2em; }
.st .lead { font-style: italic; }
.st-read { margin-top: 3.2em; }
.st-read h2 { margin: 0 0 .8em; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .24em; text-transform: uppercase; text-align: left; text-shadow: none; color: inherit; border-top: 2px solid currentColor; padding-top: 12px; }
.st-lab { margin: 1.4em 0 .5em; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.st-src, .st-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.st-srcb, .st-chb { appearance: none; background: transparent; color: inherit; border: 1.5px solid currentColor; border-radius: 0; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: .8125rem; line-height: 1; }
.st-srcb { padding: 9px 12px; letter-spacing: .06em; }
.st-srcb[aria-pressed="true"], .st-chb.open { background: #17160f; color: #fff; }
.st-chb { min-width: 2.6rem; height: 2.6rem; padding: 0 6px; }
.st-chb.read::after { content: "¹3"; margin-left: 3px; font-size: .7rem; }
.st-srcb:focus-visible, .st-chb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sm.dim .st-srcb[aria-pressed="true"], .sm.dim .st-chb.open { background: #d9d2bf; color: #11110f; }
.st-cred { margin: 2em 0 0; font-size: .8em; line-height: 1.5; opacity: .7; }
.st-srcinfo { margin: 8px 0 0; font-size: .85em; line-height: 1.4; opacity: .75; }
.st-chapters { margin-top: 1.4em; }
.st-chap { margin-top: 2em; padding-top: 14px; border-top: 2px solid currentColor; scroll-margin-top: 90px; }
.st-chead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.st-chead h3 { margin: 0; font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1; text-transform: uppercase; }
.st-chap .st-done { margin: 0; }
.st-ovwrap { margin: 0 0 1.2em; font-size: .9em; line-height: 1.55; }
.st-ovwrap summary { cursor: pointer; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.st-ovn h4, .st-nsrc h4 { margin: 1em 0 .3em; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.st-ovn p, .st-nsrc p { margin: 0 0 .8em; }
.st-vp { margin: 0 0 1em; }
.st-v sup { margin-right: 3px; font-family: var(--body); font-weight: 600; font-size: .62em; opacity: .65; vertical-align: super; line-height: 0; }
.st-vt { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.st-vt:hover { background: rgba(190, 150, 40, .16); }
.st-vt:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.st-v.on .st-vt { background: rgba(190, 150, 40, .28); text-decoration-style: solid; }
.st-note { margin: 0 0 1.4em; padding: 14px 16px 6px; border-left: 4px solid currentColor; background: rgba(0, 0, 0, .045); font-size: .88em; line-height: 1.55; }
.sm.dim .st-note { background: rgba(255, 255, 255, .07); }
.st-nv { margin: 0 0 4px; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; }
.st-none, .st-miss { font-style: italic; opacity: .7; }
.st-more { appearance: none; background: none; border: 0; padding: 0; margin: 0 0 .9em; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-hero { background: var(--era); }
.st-hero::after { background: rgba(0, 0, 0, .12); }
.st-strip { display: flex; gap: 2px; height: 14px; margin: 0 0 10px; }
.st-strip a { flex: 1 1 0; background: var(--c); opacity: .55; transition: opacity .15s, transform .15s; }
.st-strip a:hover, .st-strip a:focus-visible { opacity: 1; }
.st-strip a.cur { opacity: 1; transform: scaleY(1.7); outline: 2px solid currentColor; outline-offset: 1px; position: relative; z-index: 1; }
.st-era { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
.st-era i { width: 12px; height: 12px; background: var(--era); display: inline-block; }
.st-prog { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.st-prog .bar { flex: 1; height: 8px; background: rgba(0, 0, 0, .12); }
.st-prog .bar i { display: block; height: 100%; width: 0; background: var(--era); transition: width .3s; }
.sm.dim .st-prog .bar { background: rgba(255, 255, 255, .15); }
.st .sm-box ul { display: flex; flex-wrap: wrap; gap: 8px; }
.st .sm-box li { margin: 0; padding: 7px 12px; border: 1.5px solid var(--era); font-family: var(--body); font-weight: 600; font-size: .85rem; letter-spacing: .04em; line-height: 1.2; }
.st .sm-box li::before { content: none; }
.st .sm-text { border-left: 6px solid var(--era); padding: 6px 0 6px 20px; }
.st .sm-text blockquote { font-size: 1.15em; line-height: 1.5; font-style: italic; }
.st .sm-epi { border-left: 0; }
.st-chb.read { box-shadow: inset 0 -4px 0 var(--era); }
.st-chb.open { background: var(--era); color: #fff; border-color: var(--era); }
.st-chap { border-top-color: var(--era); }
.st-note { border-left-color: var(--era); }
.st-v.on .st-vt { background: color-mix(in srgb, var(--era) 22%, transparent); }
.st-mosaic { display: flex; flex-wrap: wrap; gap: 3px; margin: 24px 0 18px; }
.st-tile { position: relative; flex-basis: 58px; min-width: 58px; height: 74px; padding: 6px 7px 12px; background: var(--c); color: #fff; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s; }
.st-tile:hover, .st-tile:focus-visible { transform: translateY(-3px); outline: 2px solid #17160f; z-index: 1; }
.st-tile .n { font-family: var(--body); font-weight: 600; font-size: .65rem; letter-spacing: .08em; opacity: .75; }
.st-tile .b { font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: .95rem; line-height: 1; text-transform: uppercase; overflow-wrap: break-word; hyphens: none; }
.st-tile i { position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: rgba(255, 255, 255, .85); }
.st-tile.full::after { content: "¹3"; position: absolute; top: 5px; right: 7px; font-size: .8rem; }
@media (max-width: 760px) {
  .st-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .st-tile { flex-basis: auto; min-width: 0; height: 84px; padding: 9px 10px 14px; }
  .st-tile .n { font-size: .75rem; }
  .st-tile .b { font-size: 1.15rem; line-height: 1.05; }
  .st-tile i { height: 7px; }
  .st-legend { gap: 10px 18px; font-size: .8rem; }
}
.st-total { margin: 0 0 4px; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.st-lead { max-width: 38em; font-family: "EB Garamond Roman", "EB Garamond", Georgia, serif; font-style: italic; font-size: 1.2rem; line-height: 1.5; margin: 0 0 18px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.st-legend li { display: flex; align-items: center; gap: 7px; }
.st-legend i { width: 12px; height: 12px; display: inline-block; }
.st-prompts { margin: 0; padding: 0; list-style: none; counter-reset: pq; }
.st-prompts li { position: relative; margin: 0 0 1.1em; padding: 0 0 1.1em 2.6rem; border-bottom: 1px solid rgba(0, 0, 0, .15); font-style: italic; line-height: 1.5; counter-increment: pq; }
.st-prompts li::before { content: counter(pq); position: absolute; left: 0; top: .05em; font-family: "Libre Caslon Condensed", Georgia, serif; font-style: normal; font-weight: 700; font-size: 1.6rem; line-height: 1; opacity: .35; }
.sm.dim .st-prompts li { border-bottom-color: rgba(255, 255, 255, .18); }

/* ---------- Prayer: the daily order ---------- */
.pr-hero .pr-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 34%; mix-blend-mode: overlay; opacity: .85; }
.pr-hero { min-height: 68svh; }
.pr-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .42)); }
.pr-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2.2em 0 10px; }
.pr-tab { appearance: none; background: transparent; color: inherit; border: 1.5px solid currentColor; border-radius: 0; padding: 14px 10px; cursor: pointer; text-align: center; font-family: var(--body); }
.pr-tab b { display: block; font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.pr-tab span { display: block; margin-top: 6px; font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.pr-tab[aria-selected="true"] { background: #17160f; color: #fff; }
.sm.dim .pr-tab[aria-selected="true"] { background: #d9d2bf; color: #11110f; }
.pr-tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pr-hint { min-height: 1.4em; margin: 0 0 1em; font-size: .85em; font-style: italic; opacity: .75; }
.pr-steps { list-style: none; margin: 0; padding: 0; counter-reset: pr; }
.pr-step { position: relative; margin: 0; padding: 26px 0 8px 0; border-top: 2px solid currentColor; counter-increment: pr; }
.pr-step::before { content: counter(pr); position: absolute; right: 0; top: 18px; font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 2.4rem; line-height: 1; opacity: .18; }
.pr-k { display: block; font-family: var(--body); font-weight: 600; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.pr-step h3 { margin: 4px 0 .6em; font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 1.7rem; line-height: 1.1; text-transform: uppercase; }
.pr-step p { margin: 0 0 .9em; }
.pr-v span { display: block; margin: 0 0 .35em; padding-left: 1.2em; text-indent: -1.2em; }
.pr-q { margin: 0 0 1em; padding-left: 1.1em; font-style: italic; }
.pr-q li { margin: 0 0 .4em; }
.pr-ref { margin: -4px 0 1em; font-family: var(--body); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.pr-link { font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: inherit; }
@media (max-width: 480px) { .pr-tab { padding: 12px 4px; } .pr-tab b { font-size: 1.2rem; } .pr-tab span { font-size: .62rem; letter-spacing: .06em; } }
.pr-note { margin: 3em 0 0; font-size: .8em; line-height: 1.5; opacity: .7; }
/* ---------- Spanish: language labels ---------- */
.lg { font-family: var(--body); font-weight: 600; font-size: .42em; letter-spacing: .12em; vertical-align: super; opacity: .7; }
.foot-line .lg { font-size: .7em; vertical-align: baseline; margin-left: 2px; }

/* ---------- 404: find your way ---------- */
.hd { --p: 0; background: #0b0b0a; color: #fff; padding: clamp(48px, 9vh, 96px) var(--margin); text-align: center; }
.hd .e-label, .hd .e-h2 { color: #fff; text-align: center; }
.hd .e-h2 { margin-bottom: 22px; }
.hd-hold { position: relative; display: block; width: min(300px, 74vw); aspect-ratio: 1 / 1.18; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hd-hold:focus-visible { outline: 2px solid #e0b24a; outline-offset: 10px; border-radius: 8px; }
.hd-img { position: absolute; z-index: 2; left: 21%; top: 13.5%; width: 58%; height: auto; opacity: calc(.5 + var(--p) * .5); transform: translateY(calc((1 - var(--p)) * 16px)) scale(calc(.94 + var(--p) * .08)); filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .65)) brightness(calc(.85 + var(--p) * .3)); pointer-events: none; -webkit-user-drag: none; }
.hd-glow { position: absolute; z-index: 0; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 178, 74, .6), rgba(224, 178, 74, 0) 70%); opacity: calc(var(--p) * var(--p)); transform: scale(calc(.7 + var(--p) * .5)); pointer-events: none; }
.hd-ring { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hd-ring circle { fill: none; stroke-width: 3; }
.hd-track { stroke: rgba(255, 255, 255, .18); }
.hd-fill { stroke: #c8372d; filter: drop-shadow(0 0 7px rgba(200, 55, 45, .6)); stroke-linecap: round; stroke-dasharray: 578; stroke-dashoffset: calc(578 - 578 * var(--p)); }
.hd-ring { top: 4%; height: 84.7%; width: 100%; }
.hd-cue { margin: 18px 0 0; font-style: italic; opacity: .85; min-height: 1.5em; }
.hd-amen { max-width: 34em; margin: 22px auto 0; }
.hd-word { margin: 0 0 8px; font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 2.6rem; text-transform: uppercase; color: #e0b24a; }
.hd-amen blockquote { margin: 0 0 6px; font-family: "EB Garamond Roman", "EB Garamond", Georgia, serif; font-style: italic; font-size: 1.35rem; line-height: 1.45; }
.hd-ref { margin: 0 0 18px; font-family: var(--body); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.hd-btn { border-color: #fff !important; color: #fff !important; background: transparent !important; margin: 4px; }
.hd-btn:hover { background: rgba(255, 255, 255, .14) !important; }
@media (prefers-reduced-motion: no-preference) { .hd.done .hd-glow { animation: hd-pulse 3.2s ease-in-out infinite; } }
@keyframes hd-pulse { 50% { transform: scale(1.22); opacity: .85; } }
.nf-form { display: flex; gap: 8px; max-width: 40em; margin: 18px 0 8px; }
.nf-form input { flex: 1; min-width: 0; padding: 14px 16px; border: 2px solid #17160f; border-radius: 0; background: #fff; color: #17160f; font: inherit; font-size: 1.05rem; }
.nf-form input:focus-visible { outline: 3px solid #17160f; outline-offset: 2px; }
.nf-form button, .nf-btn, .nf-more { appearance: none; border: 2px solid #17160f; border-radius: 0; background: #17160f; color: #fff; padding: 12px 18px; cursor: pointer; text-decoration: none; display: inline-block; font-family: var(--body); font-weight: 600; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
.nf-btn, .nf-more { background: transparent; color: #17160f; }
.nf-form button:hover, .nf-btn:hover, .nf-more:hover { background: #3a382c; color: #fff; }
.nf-sr { position: absolute; left: -9999px; }
.nf-said { min-height: 1.4em; margin: 6px 0 10px; font-style: italic; }
.nf-res { list-style: none; margin: 0; padding: 0; max-width: 44em; }
.nf-res li { border-top: 1px solid rgba(0, 0, 0, .18); }
.nf-res li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .18); }
.nf-res a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 14px; padding: 12px 0; color: inherit; text-decoration: none; }
.nf-res a:hover b, .nf-res a:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }
.nf-res .k { grid-row: span 2; align-self: start; padding-top: 5px; font-family: var(--body); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.nf-res b { font-family: "Libre Caslon Condensed", Georgia, serif; font-weight: 700; font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; }
.nf-res .s { font-size: .95rem; opacity: .75; }
.nf-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.nf-verse { margin: 2.4em 0 0; padding-left: 20px; border-left: 6px solid #2b3a4a; max-width: 36em; }
.nf-verse blockquote { margin: 0 0 8px; font-family: "EB Garamond Roman", "EB Garamond", Georgia, serif; font-style: italic; font-size: 1.3rem; line-height: 1.45; }
.nf-verse figcaption { margin: 0 0 12px; font-family: var(--body); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
@media (max-width: 520px) { .nf-form { flex-direction: column; } .nf-res a { grid-template-columns: 1fr; } .nf-res .k { grid-row: auto; padding-top: 0; } }