:root {
  --ink: #142545; --cream: #faf1da; --sun: #f5c66b; --page-cream: #f6efd8;
  --hairline: rgba(20,37,69,0.16); --ink-92: rgba(20,37,69,0.92);
  --ink-70: rgba(20,37,69,0.7); --ink-55: rgba(20,37,69,0.66); --ink-40: rgba(20,37,69,0.4);
  --display: "BR Cobane","Plus Jakarta Sans",system-ui,sans-serif;
  --body: "General Sans","Inter",system-ui,sans-serif;
  --caps: "Jamonira","General Sans",system-ui,sans-serif;
  /* vertical rhythm + motion (one system, every page) */
  --sect: clamp(88px, 11vw, 164px);
  --m-tap: 140ms; --m-quick: 280ms; --m-move: 560ms;
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@font-face { font-family:"BR Cobane"; src:url("/fonts/br-cobane-extralight.woff2") format("woff2"), url("/fonts/br-cobane-extralight.otf") format("opentype"); font-weight:200; font-display:swap; }
@font-face { font-family:"BR Cobane"; src:url("/fonts/br-cobane-light.woff2") format("woff2"), url("/fonts/br-cobane-light.otf") format("opentype"); font-weight:300; font-display:swap; }
@font-face { font-family:"BR Cobane"; src:url("/fonts/br-cobane-regular.woff2") format("woff2"), url("/fonts/br-cobane-regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Jamonira"; src:url("/fonts/jamonira.woff2") format("woff2"), url("/fonts/jamonira.ttf") format("truetype"),url("/fonts/jamonira.otf") format("opentype"); font-weight:400; font-display:swap; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--page-cream); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; }

.sitenav { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1400px; margin: 0 auto; padding: clamp(20px,2.2vw,34px) clamp(20px,5vw,48px); border-bottom: 1px solid var(--hairline); }
.sitenav .wm img { display: block; height: clamp(22px,1.8vw,30px); width: auto; }
.sitenav .links { display: flex; align-items: center; gap: clamp(16px,2.4vw,42px); }
.sitenav .links a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(11px,0.82vw,13px); color: var(--ink-55); text-decoration: none; }
.sitenav .links a:not(.join) { padding: 13px 4px; margin-block: -13px; }
.sitenav .links a:hover, .sitenav .links a.active { color: var(--ink); }
.sitenav .join { color: var(--cream) !important; background: var(--ink); padding: clamp(11px,1vw,14px) clamp(22px,2vw,34px); border-radius: 999px; transition: transform 0.2s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.2s ease; }
.sitenav .join:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(20,37,69,0.55); }
@media (max-width: 620px) {
  .sitenav { flex-direction: column; gap: 14px; padding: 18px 20px; }
  .sitenav .links { flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
}
/* ── micro-interactions (shared) ─────────────────────────── */
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.sitenav .links a { transition: color 0.2s ease; }
.more a, .article a, .post-note a { transition: color 0.2s ease, border-color 0.2s ease; }
.post-list a h2 { transition: color 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .sitenav .join:hover { transform: none; } }

main { max-width: 1400px; margin: 0 auto; padding: clamp(40px,7vw,72px) clamp(20px,5vw,48px) 80px; }
main.wide > .eyebrow, main.wide > h1, main.wide > .lede, main.wide > h2 { max-width: 30ch; }
main.wide > .lede { max-width: 56ch; }
/* Reading measure: prose holds a comfortable line length and is LEFT-anchored under the
   hero headline (never a centered column floating mid-page). Full-width children like
   .verse-cards still break out and center on the page. */
main:not(.wide) > .eyebrow, main:not(.wide) > h1, main:not(.wide) > .lede, main:not(.wide) > .more,
.article > p, .article > h2, .article > ul, .article > blockquote, .article > .post-note, .article > .more {
  max-width: 700px; margin-left: 0; margin-right: 0;
}
.eyebrow { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--ink-55); }
/* page denotation: eyebrow with a quiet living-sky bar BELOW the text */
main > .eyebrow, .about-head > .eyebrow, .app-hero .eyebrow {
  position: relative; display: inline-block; padding: 0 0 12px;
}
main > .eyebrow::after, .about-head > .eyebrow::after, .app-hero .eyebrow::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 42px; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg, #9ecbe6, #6FB5DC 34%, #D58A6E 68%, #F5C66B);
}
h1 { font-family: var(--display); font-weight: 200; font-size: clamp(38px,6.4vw,76px); letter-spacing: -0.03em; line-height: 1.02; margin: 18px 0 0; text-wrap: balance; }
.lede { font-size: clamp(18px,2vw,21px); color: var(--ink-70); margin: 20px 0 0; max-width: 56ch; }

/* Theme-page verses: a grid of scripture cards (equal-height rows, reference
   and share pinned to the card foot). Markup is unchanged so share.js still binds. */
.verse-list {
  margin: clamp(44px,7vw,72px) 0 0;
  max-width: 1320px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: clamp(18px,2vw,28px);
}
.verse-item {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(26px,3vw,38px);
  box-shadow: 0 1px 2px rgba(20,37,69,0.04), 0 18px 40px -26px rgba(20,37,69,0.4);
}
.verse-item p { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(18px,1.7vw,22px); line-height: 1.46; letter-spacing: -0.01em; color: var(--ink); }
.verse-item .vrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: clamp(22px,2.6vw,30px); }
.verse-item .ref { position: relative; display: inline-block; padding-left: 54px; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--ink-55); }
.vshare { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; color: var(--ink-55); background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 11px 16px; cursor: pointer; transition: color var(--m-quick) var(--e-soft), border-color var(--m-quick) var(--e-soft), transform var(--m-quick) var(--e-soft); }
.vshare:hover { color: var(--ink); border-color: var(--ink-40); transform: translateY(-1px); }
.vshare:active { opacity: 0.7; }
.vshare[disabled] { opacity: 0.5; cursor: default; }
.verse-item .ref::before { content: ""; position: absolute; left: 0; top: 50%; width: 42px; height: 1px; background: var(--sun); }

.more { margin: clamp(48px,7vw,72px) 0 0; padding-top: 30px; border-top: 1px solid var(--hairline); }
.more a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--sun); padding-bottom: 6px; }
/* Editorial action links: brand "action press" — underline grows on hover, dim on press, never scale. */
.more a, .post-note a, .vc-feature .vc-go, .inside .more-line a, .ds-archive-link a {
  transition: border-bottom-width 160ms ease, padding-bottom 160ms ease, opacity 120ms ease, color 0.2s ease;
}
.more a:hover, .post-note a:hover, .vc-feature .vc-go:hover, .inside .more-line a:hover, .ds-archive-link a:hover {
  border-bottom-width: 2.5px; padding-bottom: 9px;
}
.more a:active, .post-note a:active, .vc-feature .vc-go:active, .inside .more-line a:active, .ds-archive-link a:active { opacity: 0.7; }

/* ── Daily archive (/daily): a reading per day, an index grouped by week ─── */
.day-dateline { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; color: var(--ink-55); }
/* Daily reading: one measure, left-aligned, clean hierarchy. */
.day-devotional { margin: clamp(26px,3.5vw,40px) 0 0; max-width: 680px; }
.day-devotional p { margin: 0 0 16px; font-size: 18px; line-height: 1.75; color: var(--ink-92); }
.day-slots { margin: clamp(46px,6.5vw,72px) 0 0; max-width: 720px; }
.day-slots-head { display: block; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; color: var(--ink-55); margin: 0 0 clamp(8px,1.4vw,16px); }
.day-slot { padding: clamp(28px,3.4vw,42px) 0; border-top: 1px solid var(--hairline); }
.day-slot .slot-time { position: relative; display: block; padding-top: 15px; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--ink-55); }
.day-slot .slot-time::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#D58A6E,#F5C66B); }
.day-slot .slot-verse { font-family: var(--display); font-weight: 300; font-size: clamp(21px,2.2vw,28px); line-height: 1.36; letter-spacing: -0.014em; color: var(--ink); margin: 14px 0 0; max-width: 34ch; }
.day-slot .slot-ref { display: block; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; color: var(--ink-55); margin: 14px 0 0; }
.day-slot .slot-reflection { margin: 14px 0 0; color: var(--ink-70); font-size: 16px; line-height: 1.7; max-width: 62ch; }
.day-weeknote { margin: var(--sect) 0 0; padding-top: 32px; border-top: 1px solid var(--hairline); max-width: 680px; }
.day-weeknote-head { display: block; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--ink-55); margin: 0 0 16px; }
.day-weeknote p { margin: 0; color: var(--ink-92); font-size: 17px; line-height: 1.75; }
.day-prevnext { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: clamp(44px,6vw,68px) 0 0; padding-top: 28px; border-top: 1px solid var(--hairline); }
.day-prevnext a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--ink-55); text-decoration: none; transition: color 0.2s ease; }
.day-prevnext a:hover { color: var(--ink); }
/* archive index: weeks as collapsible sections (scales to many weeks) */
.arc-week { border-top: 1px solid var(--hairline); }
.arc-week:last-of-type { border-bottom: 1px solid var(--hairline); }
.arc-week-sum { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: clamp(12px,1.6vw,20px); padding: clamp(22px,2.8vw,34px) 0; }
.arc-week-sum::-webkit-details-marker { display: none; }
.arc-week-sum:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.arc-week-theme { font-family: var(--display); font-weight: 250; letter-spacing: -0.02em; font-size: clamp(22px,2.8vw,34px); color: var(--ink); margin: 0; }
.arc-week-dates { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--ink-55); }
.arc-chevron { margin-left: auto; align-self: center; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-40); border-bottom: 1.5px solid var(--ink-40); transform: rotate(45deg); transition: transform var(--m-quick) var(--e-soft); }
details[open] .arc-week-sum .arc-chevron { transform: rotate(225deg); }
.arc-week-devo { margin: 0 0 clamp(20px,2.6vw,30px); max-width: 64ch; color: var(--ink-92); font-size: 16.5px; line-height: 1.72; }
.arc-days { padding-bottom: clamp(14px,2vw,26px); }
.arc-day { display: flex; align-items: baseline; gap: clamp(16px,2vw,32px); padding: clamp(15px,1.7vw,20px) 0; border-top: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
.arc-day .arc-date { flex: 0 0 auto; width: clamp(92px,8vw,116px); white-space: nowrap; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--ink-55); align-self: center; }
.arc-day .arc-angle { font-family: var(--display); font-weight: 300; font-size: clamp(17px,1.7vw,22px); letter-spacing: -0.01em; line-height: 1.25; transition: color 0.2s ease; }
.arc-day:hover .arc-angle { color: var(--sun); }
@media (prefers-reduced-motion: reduce) { .arc-chevron { transition: none; } }

/* Closing invitation — a warm, designed end to every reading/SEO page
   (replaces the whispered text link). Centered band, display heading, gold pill. */
.endcta { margin: var(--sect) 0 0; padding: clamp(46px,6.5vw,84px) clamp(24px,5vw,48px); border-top: 1px solid var(--hairline); text-align: center; }
.endcta h2 { font-family: var(--display); font-weight: 200; font-size: clamp(30px,4.4vw,56px); letter-spacing: -0.025em; line-height: 1.05; margin: 0; color: var(--ink); text-wrap: balance; }
.endcta p { margin: clamp(16px,2vw,22px) auto 0; max-width: 46ch; color: var(--ink-70); font-size: clamp(16px,1.5vw,18px); line-height: 1.6; }
.endcta .endcta-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(26px,3.5vw,38px); font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: #142545; background: var(--sun); padding: 14px 28px; border-radius: 999px; text-decoration: none; transition: background var(--m-quick) var(--e-soft), transform var(--m-quick) var(--e-soft); }
.endcta .endcta-btn:hover { background: #f7d089; transform: translateY(-1px); }
.endcta .endcta-btn:active { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .endcta .endcta-btn { transition: none; } }

/* ── Card system: composed hub ───────────────────────────────────
   Hub pages (verses + blog index) open with a full-width featured lead
   (which rotates daily, see site.js), then a uniform grid. Every card the
   same size; only the lead is large. Pure CSS, every generated hub inherits it. */
.vc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin: clamp(32px, 5vw, 48px) 0 0;
}
/* the card currently promoted into the featured lead is hidden from the grid (no duplicate) */
.vc-grid > .vc-card.is-promoted { display: none; }
.vc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20,37,69,0.04), 0 20px 46px -28px rgba(20,37,69,0.45);
  transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.28s ease;
}
.vc-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #e7e0cd;
  transition: transform var(--m-move) var(--e-out);
}
.vc-card:hover img { transform: scale(1.05); }

/* Featured lead: full-width horizontal card opening each hub */
.vc-feature {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 22px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20,37,69,0.04), 0 26px 56px -30px rgba(20,37,69,0.5);
  margin: clamp(34px, 5vw, 56px) 0 clamp(8px, 1.4vw, 16px);
  transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.28s ease;
}
@media (min-width: 760px) { .vc-feature { grid-template-columns: 1.08fr 1fr; } }
.vc-feature .vc-feature-media { overflow: hidden; }
.vc-feature .vc-feature-media img {
  display: block; width: 100%; height: 100%; min-height: clamp(220px, 30vw, 440px);
  object-fit: cover; background: #e7e0cd;
  transition: transform var(--m-move) var(--e-out);
}
.vc-feature:hover .vc-feature-media img { transform: scale(1.04); }
.vc-feature .vc-body {
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.vc-feature h2 {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -0.022em; line-height: 1.05;
  margin: 0; text-wrap: balance;
}
.vc-feature p { margin: 0; color: var(--ink-70); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; max-width: 44ch; }
.vc-feature .vc-go { margin-top: 6px; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--ink); }
.vc-feature .vc-go { border-bottom: 1.5px solid var(--sun); padding-bottom: 5px; align-self: flex-start; }
.vc-feature:hover { transform: translateY(-4px); box-shadow: 0 2px 5px rgba(20,37,69,0.06), 0 36px 70px -32px rgba(20,37,69,0.55); }
.vc-feature:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vc-feature, .vc-feature .vc-feature-media img { transition: none; } .vc-feature:hover .vc-feature-media img { transform: none; } }
.vc-card .vc-body {
  padding: clamp(18px, 2.2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.vc-card h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 23px);
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 0;
}
.vc-card p {
  margin: 0;
  color: rgba(20,37,69,0.66);
  font-size: 15px;
  line-height: 1.55;
}
.vc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 5px rgba(20,37,69,0.06), 0 32px 62px -30px rgba(20,37,69,0.52);
}
.vc-card:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .vc-card { transition: none; }
}

footer.site { border-top: 1px solid var(--hairline); background: linear-gradient(180deg, transparent, rgba(20,37,69,0.025)); }
.foot { max-width: 1400px; margin: 0 auto; padding: clamp(48px,6vw,84px) clamp(20px,5vw,48px); display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(28px,5vw,64px); flex-wrap: wrap; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; }
.foot .fwm img { display: block; height: clamp(22px,1.8vw,30px); width: auto; margin-left: clamp(-11px,-0.66vw,-8px); }
.foot-tag { font-family: var(--display); font-weight: 300; font-size: clamp(16px,1.3vw,20px); letter-spacing: -0.01em; color: var(--ink-70); }
.foot-soon { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--ink-55); }
.foot .flinks { display: flex; gap: clamp(12px,1vw,16px) clamp(22px,1.9vw,36px); flex-wrap: wrap; max-width: clamp(360px,34vw,580px); justify-content: flex-end; }
.foot a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(11px,0.78vw,12.5px); color: var(--ink-55); text-decoration: none; transition: color 0.2s ease; padding: 11px 2px; margin-block: -11px; }
.foot a:hover { color: var(--ink); }
@media (max-width: 560px) { .foot { flex-direction: column; gap: 28px; } .foot .flinks { max-width: none; justify-content: flex-start; gap: 14px 22px; } }

/* ── App page: device-framed showcase ─────────────────── */
.app-hero { text-align: left; max-width: none; margin: 0; padding: clamp(48px,7vw,92px) clamp(20px,5vw,48px) clamp(4px,1vw,16px); }
.app-hero .wrap { max-width: 1400px; margin: 0 auto; }
.app-hero h1 { margin: 14px 0 0; max-width: 14ch; }
.app-hero .lede { margin: 22px 0 0; max-width: 56ch; font-size: clamp(18px,1.9vw,22px); }
.showcase { max-width: 1320px; margin: 0 auto; padding: clamp(48px,8vw,100px) clamp(20px,5vw,48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: clamp(30px,3.5vw,52px) clamp(24px,2.5vw,40px); align-items: start; }
.feature { display: flex; flex-direction: column; }
.feature-media { display: flex; justify-content: flex-start; margin-bottom: clamp(20px,2.2vw,30px); }
.feature-copy { max-width: none; }
.feature-copy .fnum { display: block; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--ink-55); margin-bottom: 10px; }
.feature-copy h2 { font-family: var(--display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.12; font-size: clamp(20px,1.7vw,25px); margin: 0 0 9px; }
.feature-copy p { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 0; max-width: none; }
.device { width: 100%; max-width: 250px; padding: 7px; background: linear-gradient(165deg,#1c2942,#0d1422); border-radius: 36px; box-shadow: 0 26px 56px -30px rgba(20,37,69,0.5), inset 0 0 0 1px rgba(255,255,255,0.07); }
.device img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: top; border-radius: 30px; }

/* ── Blog ─────────────────────────────────────────────── */
.post-hero { width: min(860px, 100%); margin: clamp(18px,3vw,26px) 0 clamp(26px,4vw,40px); }
.post-hero img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 1px 2px rgba(20,37,69,0.06), 0 26px 50px -32px rgba(20,37,69,0.5); }
.post-hero figcaption { margin-top: 10px; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--ink-55); }
/* full-bleed editorial image hero (title set over the image) */
.imghero { position: relative; width: 100%; min-height: clamp(420px, 72vh, 720px); display: flex; align-items: stretch; overflow: hidden; background: #142545; }
.imghero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imghero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,37,69,0.80) 0%, rgba(20,37,69,0.32) 38%, rgba(20,37,69,0.10) 60%, rgba(20,37,69,0.34) 100%); }
.imghero .wrap { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: clamp(28px,4vw,52px) clamp(20px,5vw,48px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.imghero .eyebrow { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: rgba(250,241,218,0.82); }
.imghero h1 { font-family: var(--display); font-weight: 200; font-size: clamp(38px,6.6vw,86px); letter-spacing: -0.03em; line-height: 1.0; color: var(--cream); margin: 14px 0 0; max-width: 15ch; text-wrap: balance; }
.imghero .ref { display: inline-block; margin-top: 16px; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: rgba(250,241,218,0.9); }
.article { margin-top: clamp(26px,4vw,38px); }
.article > p { margin: 0 0 18px; font-size: 18px; line-height: 1.75; color: var(--ink-92); }
.article h2 { font-family: var(--display); font-weight: 300; font-size: clamp(22px,2.6vw,28px); letter-spacing: -0.01em; margin: 40px 0 12px; }
.article blockquote { margin: 32px 0; padding: 0; }
.article blockquote::before { content: ""; display: block; width: 42px; height: 1px; background: var(--sun); margin: 0 0 18px; }
.article blockquote p { margin: 0 0 8px; font-family: var(--display); font-weight: 300; font-size: clamp(19px,2.2vw,23px); line-height: 1.45; color: var(--ink); }
.article blockquote cite { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--ink-55); font-style: normal; }
/* verse-card grid: a set of scripture cards that uses the screen width */
.verse-cards { width: min(1340px, 92vw); margin: clamp(30px,4vw,46px) 0; margin-left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(16px,1.8vw,24px); }
.verse-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--hairline); border-radius: 18px; padding: clamp(24px,3vw,34px); box-shadow: 0 1px 2px rgba(20,37,69,0.04), 0 18px 40px -26px rgba(20,37,69,0.4); }
.verse-card p { font-family: var(--display); font-weight: 300; font-size: clamp(18px,1.9vw,22px); line-height: 1.46; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.verse-card cite { margin-top: auto; padding-top: 18px; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--ink-55); font-style: normal; }
.article ul { margin: 0 0 18px; padding-left: 22px; }
.article li { margin-bottom: 8px; color: var(--ink-92); }
.post-note { margin: clamp(40px,6vw,60px) 0 0; padding: 24px 26px; background: rgba(255,255,255,0.5); border: 1px solid var(--hairline); border-radius: 14px; }
.post-note p { margin: 0 0 14px; color: var(--ink-70); }
.post-note a { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--sun); padding-bottom: 5px; }
.post-list { margin: clamp(36px,6vw,52px) 0 0; border-top: 1px solid var(--hairline); }
.post-list a { display: block; padding: 24px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
.post-list a:hover h2 { color: var(--sun); }
.post-list h2 { font-family: var(--display); font-weight: 300; font-size: clamp(21px,2.4vw,26px); letter-spacing: -0.01em; margin: 0 0 6px; transition: color 0.15s ease; }
.post-list p { margin: 0; color: var(--ink-70); font-size: 15px; max-width: 72ch; }

/* ── Reveals (shared) ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--m-move) var(--e-out), transform var(--m-move) var(--e-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal].s1 { transition-delay: 70ms; }
[data-reveal].s2 { transition-delay: 140ms; }
[data-reveal].s3 { transition-delay: 210ms; }
[data-reveal].s4 { transition-delay: 280ms; }
[data-reveal].s5 { transition-delay: 350ms; }
[data-reveal].s6 { transition-delay: 420ms; }
.arrow { display: inline-block; transition: transform var(--m-quick) var(--e-out); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

/* ── Living-sky hero / band (any page) ────────────────────── */
.skyband { position: relative; overflow: hidden; background: linear-gradient(180deg,#6e6a8a 0%,#8e7486 36%,#b07c77 68%,#cb7747 100%); }
.skyband > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--e-out); }
.skyband > img.skyphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skyband.photo::after { background: linear-gradient(180deg, rgba(20,37,69,0.50) 0%, rgba(20,37,69,0.30) 48%, rgba(20,37,69,0.48) 100%); }
.skyband::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,37,69,0.26) 0%, rgba(20,37,69,0.08) 45%, rgba(20,37,69,0.24) 100%); }
.skyband > .wrap { position: relative; z-index: 2; }
.skyband .eyebrow { color: rgba(250,241,218,0.8); }
.skyband h1, .skyband h2 { color: var(--cream); }
.skyband .lede { color: rgba(250,241,218,0.9); }

/* monumental scripture (hymn-board) */
.scripture-monument { text-align: center; padding: var(--sect) clamp(24px,6vw,48px); }
.scripture-monument .wrap { max-width: 1060px; margin: 0 auto; }
.scripture-monument .sm-date { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; color: rgba(250,241,218,0.8); }
.scripture-monument .sm-verse { font-family: var(--display); font-weight: 200; font-size: clamp(34px,5.6vw,78px); line-height: 1.1; letter-spacing: -0.025em; color: var(--cream); margin: clamp(24px,3.4vw,38px) auto 0; max-width: 18ch; text-wrap: balance; }
.scripture-monument .sm-verse.vm { font-size: clamp(28px,4.4vw,58px); max-width: 24ch; line-height: 1.16; }
.scripture-monument .sm-verse.vl { font-size: clamp(22px,3.2vw,40px); max-width: 32ch; line-height: 1.3; }
.scripture-monument .sm-ref { display: block; font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; color: rgba(250,241,218,0.88); margin: clamp(24px,3vw,34px) 0 0; }
.scripture-monument .sm-ref::before { content: ""; display: block; width: 44px; height: 1px; background: rgba(250,241,218,0.5); margin: 0 auto 18px; }
.scripture-monument .sm-cta { display: inline-block; margin-top: clamp(30px,4vw,44px); font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: #142545; background: #f5c66b; padding: 13px 26px; border-radius: 999px; text-decoration: none; transition: background var(--m-quick) var(--e-soft), transform var(--m-quick) var(--e-soft); }
.scripture-monument .sm-cta:hover { background: #f7d089; transform: translateY(-1px); }
.scripture-monument .sm-cta:active { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .skyband > canvas { opacity: 1 !important; transition: none; }
  .vc-card:hover img, a:hover .arrow, button:hover .arrow { transform: none !important; }
  .arrow, .vc-card img, .scripture-monument .sm-cta { transition: none !important; }
}