/* Faith and Grind: shared structure (all three style directions).
   Layout, spacing, and behavior live here; the look (fonts, color, surfaces) lives in the
   direction block below it. Type scale from the 2026-10-07 design audit: four steps plus one
   display size for the homepage headline. Spacing runs on an 8px rhythm. */
:root {
  --fs-small: 0.875rem;                      /* 14px labels, meta, nav, footers */
  --fs-body: 1.0625rem;                      /* 17px paragraphs, buttons, inputs */
  --fs-heading: 1.375rem;                    /* 22px h2/h3, taglines, callouts */
  --fs-title: clamp(2.125rem, 6vw, 2.75rem); /* 34 to 44px page titles */
  --fs-display: clamp(2.6rem, 9vw, 4.5rem);  /* homepage headline only (each direction may tune) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 24px;
  --max: 1080px;
  --measure: 640px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-size: var(--fs-body); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 var(--s4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s4); top: var(--s4); z-index: 100; padding: var(--s3) var(--s4); background: #fff; color: #000; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.section { padding: var(--s7) 0; }
.center { text-align: center; justify-content: center; }

/* Header + menu: inline links on wide screens, a no-JavaScript dropdown on phones. */
.site-header { position: relative; z-index: 30; }
.bar { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.brand { text-decoration: none; white-space: nowrap; display: inline-block; padding: 12px 0; }
.nav-inline { display: none; align-items: center; gap: var(--s5); }
.nav-inline a, .menu-panel a { text-decoration: none; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s4); }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: var(--s2) var(--gutter) var(--s4); }
.menu-panel a { display: flex; align-items: center; min-height: 48px; }
@media (min-width: 860px) {
  .nav-inline { display: flex; }
  .menu { display: none; }
}

/* Buttons and links: every tap target is at least 44px tall. */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--s3) var(--s5);
  text-decoration: none; font: inherit; font-size: var(--fs-body); font-weight: 700; line-height: 1.25; text-align: center;
  cursor: pointer; border: 2px solid transparent;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.btn-small { min-height: 44px; padding: var(--s2) var(--s4); font-size: var(--fs-small); }
.text-link { display: inline-block; padding: 10px 0; font-weight: 700; }
@media (max-width: 520px) {
  .hero .cta-row .btn, .today-card .cta-row .btn, .signup .btn, .next-box .btn, .word-nudge .btn, .more-links .btn { width: 100%; }
}

/* Home */
.display br { display: none; }
@media (min-width: 600px) { .display br { display: inline; } }
.paths { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.path { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.path p { flex: 1; }
.who-grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .who-grid { grid-template-columns: 280px 1fr; align-items: center; gap: var(--s7); } }
.study-list { list-style: none; margin: 0; padding: 0; display: grid; }
.study-list a { display: block; text-decoration: none; color: inherit; }
.s-ref, .s-hook { display: block; }
.follow-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.follow-links a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; text-decoration: none; }

/* Inner pages */
.cards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.link-card { display: block; text-decoration: none; color: inherit; }
.pillars { display: grid; gap: var(--s3); }
details.pillar summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
details.pillar summary::-webkit-details-marker { display: none; }
details.pillar summary::after { content: "+"; margin-left: var(--s3); }
details.pillar[open] summary::after { content: "\2212"; }
.about-photo img { object-fit: cover; }

/* Daily Word card: hidden parts take no space until revealed (audit item 5). */
.word-card .reflect, .word-card .nudge, .word-card .journal { display: none; }
.word-card .shown { display: block; }
.reflect:focus { outline: none; }
.reference .label { display: block; }
.reference .ref-num { white-space: nowrap; }
.journal textarea { width: 100%; min-height: 96px; font: inherit; font-size: var(--fs-body); line-height: 1.5; resize: vertical; padding: var(--s3); }
.journal-row { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.journal-status { opacity: 0; transition: opacity 0.2s var(--ease); font-size: var(--fs-small); }
.journal-status.shown { opacity: 1; }
.journal-history-toggle { background: none; border: 0; padding: var(--s3) 0; min-height: 44px; font: inherit; font-size: var(--fs-small); text-decoration: underline; cursor: pointer; color: inherit; }
.journal-history { display: none; flex-direction: column; gap: var(--s3); margin-top: var(--s3); text-align: left; }
.journal-history.shown { display: flex; }
.je-meta, .je-answer { font-size: var(--fs-small); margin: 0; }
.je-answer { white-space: pre-wrap; }
.journal-label, .journal-private-note { text-align: left; }

/* Study pages */
.next-grid { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .next-grid { grid-template-columns: 1fr 1fr; } }
.next-box { display: flex; flex-direction: column; align-items: flex-start; }
.next-box p:not(.next-kicker) { flex: 1; }

/* Footer */
.foot-nav, .social { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: 0; }
.foot-nav a, .social a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* Photos (decorative). Each direction decides where and how they show. */
.media { position: relative; overflow: hidden; }
.media-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.media-shade { position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 900px) {
}
.media .scene { position: absolute; inset: 0; pointer-events: none; }
.media .scene canvas.particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Motion respects people: everything stops under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .btn:focus-visible { transform: none !important; }
}

/* ============================================================
   Direction C: "First Light" (calm sanctuary / devotional)
   Soft cream and sand, a warm dawn gradient, rounded quiet surfaces, and the
   mountain-dawn photo kept as a framed window of light with the drifting motes,
   instead of a dark backdrop behind the text. A thin gold cross marks each section.
   Fonts: Cormorant Garamond (headlines, verses) + Nunito Sans (reading text).
   ============================================================ */
:root {
  --bg: #FBF7F0;
  --sand: #F3E9DA;
  --surface: #FFFDF9;
  --peach: #F6E1CC;
  --text: #3B2E22;        /* 12.3:1 on bg */
  --text-2: #6B5644;      /* 6.5:1 on bg */
  --accent: #8A4822;      /* terracotta: 5.9:1 on bg, 4.6:1 on peach */
  --accent-dark: #6F3819;
  --gold: #C8952F;        /* brand gold, ornaments only */
  --line: rgba(110, 80, 50, 0.16);
  --shadow: 0 12px 32px rgba(110, 80, 40, 0.10), 0 2px 6px rgba(110, 80, 40, 0.06);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 11vw, 5rem);
  --radius: 20px;
  --radius-lg: 28px;
}
body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.7; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; color: var(--text); }
/* Lining numerals so scripture references read clearly (Cormorant defaults to old-style). */
h1, h2, h3, .brand, .today-ref, .s-ref, .reference, .path .num, .verse, .question .q, .closer { font-variant-numeric: lining-nums; }
.label { font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); }
/* The gold cross ornament. */
.section-title, .cross { text-align: center; }
.section-title { font-size: var(--fs-title); margin: 0 0 var(--s6); }
.section-title::before, .verse::before, .question::before { content: ""; display: block; width: 14px; height: 22px; margin: 0 auto var(--s3);
  background: linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) center 32% / 14px 2px no-repeat; }

/* Header: quiet cream bar, italic name, soft pill menu. */
.site-header { background: var(--bg); }
.brand { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 600; color: var(--text); }
.brand .amp { font-style: italic; color: var(--accent); }
.nav-inline a { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s3); border-radius: 999px; }
.nav-inline a:hover { color: var(--text); background: var(--sand); }
.nav-inline a[aria-current="page"] { color: var(--accent); background: var(--sand); }
.menu summary { font-weight: 600; color: var(--text); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.menu[open] summary { background: var(--sand); }
.menu-panel { left: var(--s4); right: var(--s4); top: calc(100% + 4px); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s2) var(--s5); }
.menu-panel a { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current="page"] { color: var(--accent); }

/* Buttons: soft pills. */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary { background: var(--accent); color: #FFF9F0; border-color: var(--accent); box-shadow: 0 6px 18px rgba(138, 72, 34, 0.22); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary { background: transparent; color: var(--accent); border-color: rgba(138, 72, 34, 0.45); border-width: 1.5px; }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--sand); border-color: var(--accent); }
.text-link { color: var(--accent); }
.text-link::after { content: " \2192"; }

/* Hero: the dawn photo as a rounded window of light, the words on a quiet card below it. */
.hero { padding: var(--s2) 0 var(--s7); background: linear-gradient(180deg, var(--bg) 0%, #F8E9D8 55%, var(--bg) 100%); }
.hero .media { height: clamp(280px, 62vw, 520px); margin: 0 var(--s4); border-radius: var(--radius-lg); max-width: calc(var(--max) - 2 * var(--s4)); }
@media (min-width: 1112px) { .hero .media { margin: 0 auto; } }
.hero .media-photo, .page-top .media-photo, .study-head .media-photo { background-position: center 45%; filter: saturate(0.9) brightness(1.08); animation: drift 48s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
.hero .media-shade, .page-top .media-shade, .study-head .media-shade, .word-main .media-shade {
  background: linear-gradient(180deg, rgba(255, 236, 214, 0.18) 0%, rgba(255, 236, 214, 0) 40%, rgba(251, 247, 240, 0.35) 100%); }
.hero-inner.wrap { position: relative; z-index: 2; max-width: 640px; margin: -88px var(--s4) 0; padding: var(--s6) var(--s5);
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; }
@media (min-width: 672px) { .hero-inner.wrap { margin: -96px auto 0; padding: var(--s7) var(--s7) var(--s6); } }
.display { font-size: var(--fs-display); font-weight: 600; line-height: 1.0; letter-spacing: -0.01em; margin: 0 0 var(--s4); }
.display .accent { font-style: italic; color: var(--accent); }
.tagline { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-heading); line-height: 1.4; color: var(--text-2); margin: 0 auto var(--s5); max-width: 28ch; }
.hero .cta-row { justify-content: center; }

/* Today's Daily Word: a warm, quiet card. */
.today-card { background: linear-gradient(160deg, var(--peach) 0%, #FBF1E5 100%); border-radius: var(--radius-lg); padding: var(--s7) var(--s5); text-align: center; border: 1px solid var(--line); }
.today-ref { font-family: var(--serif); font-size: var(--fs-title); font-weight: 600; line-height: 1.1; margin: 0 0 var(--s3); }
.today-note { color: var(--text-2); margin: 0 auto var(--s5); max-width: 36ch; }
.today-card .cta-row { justify-content: center; }

/* Start here */
.path { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s5); border: 1px solid var(--line); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.path:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(110, 80, 40, 0.14); }
.path .num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: var(--accent); font-family: var(--serif); font-weight: 700; font-size: var(--fs-body); }
.path h3 { font-size: var(--fs-heading); font-weight: 700; margin: var(--s3) 0 var(--s2); }
.path p { color: var(--text-2); }
.path .go { font-weight: 700; color: var(--accent); }
.path .go::after { content: " \2192"; }

/* Who I am */
.who-photo { justify-self: center; }
@media (min-width: 760px) { .who-grid { grid-template-columns: 240px 1fr; } }
.who-photo img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: center 25%; box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--line), var(--shadow); }
.who-lede { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-heading); line-height: 1.4; color: var(--text); margin: var(--s3) 0 var(--s4); }
.who-text p { color: var(--text-2); }
.who-text .who-lede { color: var(--text); }
.who .section-title { text-align: inherit; margin-bottom: var(--s2); }
.who .section-title::before { display: none; }

/* Study lists: soft rows. */
.study-list { gap: var(--s3); }
.study-list a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.study-list a:hover { border-color: rgba(138, 72, 34, 0.4); box-shadow: var(--shadow); }
.s-ref { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 700; color: var(--text); }
.s-hook { color: var(--text-2); }
.newest .wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.newest .text-link { margin-top: var(--s4); }

/* Signup */
.signup { background: linear-gradient(160deg, #F4D9BE 0%, #FBEBDA 60%, #FDF6EC 100%); border-radius: var(--radius-lg); padding: var(--s7) var(--s5); text-align: center; border: 1px solid var(--line); }
.signup h2 { font-size: var(--fs-title); margin: 0 auto var(--s4); max-width: 20ch; }
.signup p { color: var(--text); max-width: 44ch; margin: 0 auto var(--s5); }
.signup .label { color: var(--accent-dark); }

.follow { text-align: center; }
.follow-links { justify-content: center; }
.follow-links a { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0 var(--s5); color: var(--text); font-weight: 700; }
.follow-links a span { font-weight: 400; color: var(--text-2); font-size: var(--fs-small); }

/* Footer */
.site-footer { background: var(--sand); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--s7) 0 var(--s6); margin-top: var(--s7); font-size: var(--fs-small); color: var(--text-2); text-align: center; }
.site-footer .foot-nav, .site-footer .social { justify-content: center; }
.site-footer a { color: var(--text); font-weight: 600; }
.site-footer a:hover { color: var(--accent); }
.closer { font-family: var(--serif); font-style: italic; font-size: var(--fs-title); font-weight: 600; color: var(--accent); margin: 0 0 var(--s4); }
.copy { margin: var(--s4) 0 0; }
.esv { margin: 0 auto var(--s4); max-width: 60ch; }

/* Inner page tops: a short window of light, then a centered title. */
.page-top, .study-head { padding: var(--s2) 0 var(--s4); text-align: center; }
.page-top .media, .study-head .media { height: clamp(160px, 34vw, 300px); margin: 0 var(--s4) var(--s6); border-radius: var(--radius-lg); max-width: calc(var(--max) - 2 * var(--s4)); }
@media (min-width: 1112px) { .page-top .media, .study-head .media { margin: 0 auto var(--s6); } }
.title { font-size: var(--fs-title); line-height: 1.1; margin: 0 0 var(--s4); }
.hook { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-heading); line-height: 1.4; color: var(--accent); margin: 0 auto var(--s4); max-width: 34ch; }
.lede { color: var(--text-2); }
.prose p { color: var(--text); }

/* /grind/ */
details.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s5); box-shadow: var(--shadow); }
details.pillar summary { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 700; }
details.pillar summary::after { color: var(--accent); font-family: var(--sans); font-size: var(--fs-heading); }
details.pillar p { color: var(--text-2); }
.page-grind .label, .page-about .label { text-align: center; }
.note { color: var(--text-2); font-style: italic; text-align: center; margin-top: var(--s5); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); }
.link-card { transition: transform 0.2s var(--ease); }
.link-card:hover { transform: translateY(-2px); }
.card .tag { display: inline-block; font-size: var(--fs-small); font-weight: 700; color: var(--accent); background: var(--sand); border-radius: 999px; padding: 2px var(--s3); margin-bottom: var(--s3); }
.card h3 { font-size: var(--fs-heading); font-weight: 700; margin: 0 0 var(--s2); }
.card p { color: var(--text-2); margin: 0; }
.word-nudge { background: var(--sand); border-radius: var(--radius-lg); padding: var(--s6) var(--s5); text-align: center; }
.word-nudge p { font-family: var(--serif); font-style: italic; font-size: var(--fs-heading); margin-bottom: var(--s4); }

/* /about/ */
.about-top .media { display: none; }
.about-top { padding-top: var(--s6); }
.about-photo img { width: 160px; height: 160px; border-radius: 50%; object-position: center 25%; margin: 0 auto var(--s5); box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--line), var(--shadow); }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* /grind/word/: the crosses photo as the window, the card resting over its lower edge. */
.word-main { padding: var(--s2) 0 var(--s7); }
.word-main .media { height: clamp(260px, 60vw, 460px); margin: 0 var(--s4); border-radius: var(--radius-lg); max-width: calc(var(--max) - 2 * var(--s4)); }
@media (min-width: 1112px) { .word-main .media { margin: 0 auto; } }
.word-main .media-photo { background-position: center top; filter: saturate(0.92) brightness(1.04); }
.word-inner { position: relative; z-index: 2; margin-top: -22px; text-align: center; }
.word-inner > .label { display: inline-block; background: var(--surface); border-radius: 999px; padding: var(--s1) var(--s4); box-shadow: var(--shadow); }
.word-h1 { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 700; margin: var(--s4) 0 var(--s5); }
.word-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); padding: var(--s7) var(--s5); text-align: center; }
.reference { font-family: var(--serif); font-size: min(var(--fs-title), 10vw); font-weight: 700; line-height: 1.1; margin: 0 0 var(--s5); }
.reference .label { margin-bottom: var(--s2); font-family: var(--sans); }
.reflect { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: var(--fs-heading); line-height: 1.4; margin: 0 0 var(--s4); padding: var(--s4) var(--s5); background: var(--sand); border-radius: var(--radius); }
.nudge p { font-size: var(--fs-small); color: var(--text-2); margin: 0 0 var(--s2); }
.journal { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.journal-label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s1); }
.journal-private-note { font-size: var(--fs-small); color: var(--text-2); margin: 0 0 var(--s2); }
.journal textarea { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 14px; }
.journal textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.journal-status, .je-meta { color: var(--text-2); }
.journal-entry { border-left: 2px solid var(--gold); padding-left: var(--s3); }
.word-foot { margin-top: var(--s6); font-size: var(--fs-small); color: var(--text-2); }
.word-foot p { margin: 0 0 var(--s2); }

/* Study pages: a devotional reading room. */
.crumbs { margin: 0 0 var(--s2); }
.crumbs a { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); display: inline-flex; min-height: 44px; align-items: center; }
.crumbs a::before { content: "\2190\00a0"; }
.subhead { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-heading); line-height: 1.4; color: var(--accent); margin: 0 auto; max-width: 34ch; }
.verse { margin: var(--s6) 0; background: var(--sand); border-radius: var(--radius-lg); padding: var(--s6) var(--s5); text-align: center; }
.verse blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-heading); line-height: 1.5; color: var(--text); }
.verse figcaption { margin-top: var(--s4); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.body h2 { font-size: var(--fs-heading); font-weight: 700; margin: var(--s7) 0 var(--s3); }
.body h2:first-child { margin-top: 0; }
.body p { color: var(--text); }
.question { display: block; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); padding: var(--s6) var(--s5); margin: var(--s7) 0; text-align: center; }
.question .q { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 700; line-height: 1.35; }
.question .read { color: var(--text-2); margin: 0; }
.related { margin: var(--s7) 0; }
.related .label, .next-steps > .label { text-align: center; }
.next-steps { margin: var(--s7) 0; }
.next-box { padding: var(--s5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.next-box h3 { font-size: var(--fs-heading); font-weight: 700; margin: 0 0 var(--s3); }
.next-box p { color: var(--text-2); }
.next-kicker { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s2); }
.next-plan { background: linear-gradient(160deg, #F4D9BE 0%, #FBEBDA 70%); }
.next-plan p { color: var(--text); }
.next-plan .next-kicker { color: var(--accent-dark); }
.more-links { margin: var(--s6) 0 var(--s2); }

/* ============================================================
   First Light, built out (2026-10-09)
   Hero dawn sequence, a sunrise Daily Word card, photo moments from Dustin's own
   drives plus two Unsplash License photos (assets/img/CREDITS.md), gentle reveals on
   scroll (assets/fx.js), and the restyled 30-day plan, field notes, and 404.
   Every animation below stops under prefers-reduced-motion (rule near the top of
   this file), and nothing depends on JavaScript to be visible.
   ============================================================ */

/* Header: stays with you while you read, soft glass over the cream. */
.site-header { position: sticky; top: 0; background: rgba(251, 247, 240, 0.9); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); transition: box-shadow 0.3s var(--ease); }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 28px rgba(110, 80, 40, 0.08); }
section[id], [id="main"] { scroll-margin-top: 80px; }

/* Hero: first light comes up over the photo, then the card rises in. */
.hero .media { animation: window-open 1.2s var(--ease) both; }
.hero .media-photo { animation: dawn 2.8s var(--ease) both, drift 48s ease-in-out 2.8s infinite alternate; }
.sun { position: absolute; left: 50%; top: 58%; width: min(560px, 120%); aspect-ratio: 1; margin-left: max(-280px, -60%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 232, 186, 0.9) 0%, rgba(255, 206, 140, 0.45) 22%, rgba(255, 190, 120, 0.12) 46%, rgba(255, 190, 120, 0) 66%);
  mix-blend-mode: screen; animation: sunrise 3.4s var(--ease) 0.2s both, breathe 9s ease-in-out 3.6s infinite alternate; }
.hero-inner.wrap { animation: rise 1s var(--ease) 0.55s both; }
.hero .display { animation: rise 0.9s var(--ease) 0.75s both; }
.hero .tagline { animation: rise 0.9s var(--ease) 0.95s both; }
.hero .cta-row { animation: rise 0.9s var(--ease) 1.15s both; }
.display .accent { background: linear-gradient(transparent 66%, rgba(200, 149, 47, 0.32) 66%, rgba(200, 149, 47, 0.32) 90%, transparent 90%) no-repeat 0 0 / 100% 100%; animation: underline 1.1s var(--ease) 1.7s both; padding: 0 0.04em; }
@keyframes window-open { from { opacity: 0; transform: scale(0.97); } }
@keyframes dawn { from { filter: saturate(0.6) brightness(1.6) contrast(0.8); } }
@keyframes sunrise { from { opacity: 0; transform: translateY(22%) scale(0.85); } }
@keyframes breathe { to { opacity: 0.8; transform: scale(1.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes underline { from { background-size: 0% 100%; } }

/* Reveal on scroll (fx.js adds .fx to <html> only when motion is welcome). */
.fx .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.fx .reveal.in { opacity: 1; transform: none; }
@media print { .fx .reveal { opacity: 1 !important; transform: none !important; } }

/* Horizon: a thin gold line with the sun at its center, between sections. */
.horizon { position: relative; height: 24px; max-width: 520px; margin: 0 auto; }
.horizon::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); opacity: 0.7; transform-origin: center; }
.horizon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle, #F5D08A 0%, var(--gold) 55%, rgba(200, 149, 47, 0) 100%); box-shadow: 0 0 18px 6px rgba(231, 182, 92, 0.35); }
.fx .horizon.reveal::before { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.fx .horizon.reveal.in::before { transform: scaleX(1); }

/* Today's Daily Word: a devotional card laid over Dustin's own sunrise sky. */
.today-card { position: relative; overflow: hidden; padding: 104px 12px 12px; border: 0; background: #E9C9A6; box-shadow: 0 24px 60px rgba(110, 70, 30, 0.18), 0 4px 12px rgba(110, 70, 30, 0.08); }
@media (min-width: 900px) { .today-card { padding: 132px 20px 20px; } }
.today-sun { position: absolute; left: 50%; top: 104px; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 238, 200, 0.95) 0%, rgba(255, 214, 150, 0.55) 20%, rgba(255, 200, 130, 0) 62%); animation: breathe 7s ease-in-out infinite alternate; }
@media (min-width: 900px) { .today-sun { top: 132px; } }
.today-panel { position: relative; background: rgba(255, 253, 249, 0.97); border-radius: 20px; padding: var(--s7) var(--s5) var(--s6); box-shadow: 0 -10px 30px rgba(255, 220, 160, 0.35); }
.today-panel::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(200, 149, 47, 0.45); border-radius: 14px; pointer-events: none; }
.today-panel > * { position: relative; }
.today-date { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); margin: calc(-1 * var(--s2)) 0 var(--s4); }
.today-card .today-ref { font-size: min(var(--fs-display), 4rem); line-height: 1.02; margin: 0 0 var(--s4); text-wrap: balance; }
.today-ref .ref-num { white-space: nowrap; }
.today-card .today-note { font-family: var(--serif); font-style: italic; font-size: var(--fs-heading); line-height: 1.4; color: var(--text-2); }
.today-panel .cross-mark { display: block; width: 14px; height: 22px; margin: 0 auto var(--s4);
  background: linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) center 32% / 14px 2px no-repeat; }

/* Photo band: a wide window onto the road at sunrise, one line of Scripture over it. */
.photo-band { position: relative; overflow: hidden; margin: var(--s7) var(--s4); border-radius: var(--radius-lg); min-height: clamp(360px, 96vw, 560px); display: flex; align-items: flex-end; max-width: calc(var(--max) - 2 * var(--s4)); color: #FFF9F0; isolation: isolate; }
@media (min-width: 1112px) { .photo-band { margin-left: auto; margin-right: auto; } }
.band-photo { position: absolute; inset: -10% 0; z-index: -2; background: #3A2A1C; }
.band-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(40, 26, 14, 0) 12%, rgba(40, 26, 14, 0.42) 34%, rgba(34, 22, 12, 0.72) 56%, rgba(30, 19, 10, 0.88) 100%); }
.band-inner { width: 100%; padding-top: var(--s7); padding-bottom: var(--s6); text-align: center; }
.band-verse { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: var(--fs-title); line-height: 1.15; margin: 0 auto var(--s3); max-width: 18ch; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.band-ref { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #F7DDB0; margin: 0 0 var(--s3); }
.band-inner .text-link { color: #FFF9F0; }
@supports (animation-timeline: view()) {
  .band-photo, .window-photo { animation: band-pan linear both; animation-timeline: view(); }
}
@keyframes band-pan { from { transform: translateY(-6%); } to { transform: translateY(6%); } }

/* Signup with the quiet-time photo (open Bible, coffee). */
.signup.with-photo { padding: 0; overflow: hidden; display: grid; text-align: center; }
.signup.with-photo .signup-photo { min-height: 220px; background: #8B7A66; position: relative; }
.signup.with-photo .signup-body { padding: var(--s6) var(--s5) var(--s7); }
@media (min-width: 820px) {
  .signup.with-photo { grid-template-columns: 1fr 1.1fr; text-align: left; align-items: center; }
  .signup.with-photo .signup-photo { min-height: 100%; }
  .signup.with-photo h2, .signup.with-photo p { margin-left: 0; }
}

/* Start here and study lists: a little life on touch and hover. */
.path { position: relative; overflow: hidden; }
.path::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), #E7B65C, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.path:hover::after, .path:focus-visible::after { transform: scaleX(1); }
.study-list a { position: relative; padding-right: calc(var(--s5) + 24px); }
.study-list a::after { content: "\2192"; position: absolute; right: var(--s5); top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 700; transition: transform 0.25s var(--ease); }
.study-list a:hover::after { transform: translate(4px, -50%); }

/* Footer: the sun setting into the sand. */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 50%; top: -70px; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(231, 182, 92, 0.55) 0%, rgba(231, 182, 92, 0.18) 45%, rgba(231, 182, 92, 0) 70%); pointer-events: none; }

/* Inner page windows: which photo each page looks through. */
.media.media-road .media-photo img { object-position: center 65%; }
.media.media-tree .media-photo img { object-position: center 70%; }
.media.media-highway .media-photo img { object-position: center 80%; }
.media.media-bible .media-photo img { object-position: center 82%; }
.media.media-outcrop .media-photo img { object-position: center 45%; }
.media.media-straight .media-photo img { object-position: center 72%; }
.media.media-hero .media-photo img { object-position: 57% 40%; }
@media (min-width: 900px) {
}
.page-top .media, .study-head .media { animation: window-open 1.1s var(--ease) both; }
.page-top .media-photo, .study-head .media-photo { animation: dawn 2.4s var(--ease) both, drift 48s ease-in-out 2.4s infinite alternate; }
.page-top .wrap, .study-head .wrap { animation: rise 0.9s var(--ease) 0.35s both; }

/* Study pages: a reading-progress line of gold under the header. */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40; pointer-events: none; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--accent)); display: none; }
@supports (animation-timeline: scroll()) {
  .read-progress { display: block; animation: read linear both; animation-timeline: scroll(root); }
}
@keyframes read { to { transform: scaleX(1); } }
.verse { position: relative; overflow: hidden; background: linear-gradient(160deg, #F6E1CC 0%, var(--sand) 55%, #F8EEDF 100%); }
.verse::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 196, 0.9), rgba(255, 236, 196, 0) 70%); pointer-events: none; }
.verse > * { position: relative; z-index: 1; }
.question { position: relative; }
.question::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(200, 149, 47, 0.4); border-radius: 22px; pointer-events: none; }

/* /grind/word/: the card glows, the question opens like light through a door. */
.word-card { position: relative; overflow: hidden; }
.word-card::before { content: ""; position: absolute; left: 50%; top: -150px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 170, 0.75) 0%, rgba(255, 226, 170, 0) 65%); pointer-events: none; animation: breathe 8s ease-in-out infinite alternate; }
.word-card > * { position: relative; }
.word-card .reference { font-size: min(var(--fs-display), 4rem); line-height: 1.02; text-wrap: balance; }
.word-date { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); margin: 0 0 var(--s4); }
.reveal-btn { animation: beckon 3s ease-in-out 1.6s infinite; }
@keyframes beckon { 0%, 100% { box-shadow: 0 6px 18px rgba(138, 72, 34, 0.22), 0 0 0 0 rgba(200, 149, 47, 0.45); } 50% { box-shadow: 0 6px 18px rgba(138, 72, 34, 0.22), 0 0 0 10px rgba(200, 149, 47, 0); } }
.word-card .shown { animation: unfold 0.8s var(--ease) both; }
.word-card .reflect.shown { animation: unfold 0.8s var(--ease) both, halo 2.4s ease-out 0.3s both; }
@keyframes unfold { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes halo { from { box-shadow: 0 0 0 0 rgba(231, 182, 92, 0.55); } to { box-shadow: 0 0 0 22px rgba(231, 182, 92, 0); } }

/* /about/: the guide. */
.page-about .hook { color: var(--accent); }
.intro p { font-size: var(--fs-body); }
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: guide; }
.guide > li { counter-increment: guide; }
.guide-item { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s5) var(--s5) var(--s5) calc(var(--s5) + 52px); color: inherit; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
a.guide-item:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(110, 80, 40, 0.14); }
.guide-item::before { content: counter(guide); position: absolute; left: var(--s5); top: var(--s5); width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: var(--accent); font-family: var(--serif); font-weight: 700; font-size: var(--fs-heading); font-variant-numeric: lining-nums; display: flex; align-items: center; justify-content: center; }
.guide-item h3 { font-size: var(--fs-heading); font-weight: 700; margin: 6px 0 var(--s2); }
.guide-item p { color: var(--text-2); margin: 0; }
a.guide-item h3::after { content: " \2192"; color: var(--accent); font-family: var(--sans); font-size: var(--fs-body); }
.guide-start { border-color: rgba(138, 72, 34, 0.35); background: linear-gradient(160deg, #FBEBDA 0%, var(--surface) 70%); }
.guide-follow a { font-weight: 700; padding: 12px 0; }
.why-grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 760px) { .why-grid { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.window { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 260px; box-shadow: var(--shadow); }
.window-photo { position: absolute; inset: -10% 0; background: #6B4A2E; }
.why-text h2 { font-size: var(--fs-title); margin: 0 0 var(--s4); }
.why-text p { color: var(--text); }
.building { text-align: center; }
.building h2 { font-size: var(--fs-title); margin: 0 0 var(--s4); }
.building p { color: var(--text-2); max-width: 52ch; margin: 0 auto var(--s5); }

/* 30 Days: the plan, the signup form, and the thank-you page in First Light. */
.how ol { margin: 0; padding-left: var(--s5); color: var(--text-2); }
.how li { margin-bottom: var(--s2); }
.plan-card h2, .how h2, .deeper h2 { font-size: var(--fs-heading); font-weight: 700; margin: 0 0 var(--s3); }
.progress { font-size: var(--fs-small); color: var(--text-2); margin: var(--s3) 0 0; }
.progress strong { color: var(--accent); }
.stack { display: grid; gap: var(--s4); }
.week h2 span { display: block; font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s1); }
.day { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.week h2 + .day { border-top: 0; }
.day input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 28px; height: 28px; margin: 2px 0 0; border: 1.5px solid rgba(138, 72, 34, 0.5); border-radius: 50%; background: var(--surface); cursor: pointer; display: grid; place-content: center; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.day input[type="checkbox"]::before { content: ""; width: 12px; height: 7px; border: solid #FFF9F0; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 0.2s var(--ease); }
.day input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.day input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.day input[type="checkbox"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.day label { cursor: pointer; flex: 1; min-width: 0; }
.day .num { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.day .ref { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 700; line-height: 1.25; font-variant-numeric: lining-nums; }
.day .theme { color: var(--text-2); font-size: var(--fs-small); font-style: italic; }
.day .q { margin-top: var(--s1); color: var(--text); border-left: 2px solid var(--gold); padding-left: var(--s3); }
.day input:checked + label .ref { color: var(--accent); }
.deeper p { color: var(--text-2); }
.soon { display: inline-block; font-size: var(--fs-small); font-weight: 700; color: var(--accent); background: var(--sand); border-radius: 999px; padding: 2px var(--s3); }
.plan-actions { margin: var(--s6) 0 0; }
.weeks { list-style: none; margin: 0; padding: 0; }
.weeks li { padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--text-2); }
.weeks li:first-child { border-top: 0; }
.weeks span { display: block; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.weeks strong { font-family: var(--serif); font-size: var(--fs-heading); color: var(--text); font-variant-numeric: lining-nums; }
.form-card h2 { font-size: var(--fs-title); text-align: center; margin: 0 0 var(--s5); }
.form-card form .row { display: flex; gap: var(--s3); }
.form-card form .row > div { flex: 1; min-width: 0; }
@media (max-width: 480px) { .form-card form .row { flex-direction: column; gap: 0; } }
.field { margin-bottom: var(--s4); }
label.top { display: block; font-weight: 700; margin-bottom: var(--s2); }
label.top small { font-weight: 400; font-size: var(--fs-small); color: var(--text-2); }
.form-card input[type="text"], .form-card input[type="email"], .form-card select, .form-card textarea { width: 100%; min-height: 48px; background: var(--bg); color: var(--text); border: 1px solid rgba(110, 80, 50, 0.3); border-radius: 14px; padding: var(--s3) var(--s4); font: inherit; font-size: var(--fs-body); }
.form-card textarea { min-height: 96px; resize: vertical; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); color: var(--text-2); min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }
.private { font-size: var(--fs-small); color: var(--text-2); margin: calc(-1 * var(--s2)) 0 var(--s4); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.err { display: none; background: var(--sand); border: 1px solid var(--accent); color: var(--text); border-radius: 14px; padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.form-card .btn { width: 100%; }
.fine { font-size: var(--fs-small); color: var(--text-2); text-align: center; margin: var(--s3) 0 0; }
.page-note { text-align: center; font-size: var(--fs-small); color: var(--text-2); }
@media print {
  .site-header, .site-footer, .page-top .media, .plan-actions, .progress, .read-progress, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .card, .day .q, .day .theme, .how ol, .deeper p { color: #000 !important; }
  .day input[type="checkbox"] { border-color: #000; }
}

/* Field notes (/grind/no-manual/). */
.meta { font-size: var(--fs-small); color: var(--text-2); margin: var(--s3) 0 0; }
.notes h2 { font-size: var(--fs-title); text-align: center; margin: var(--s7) 0 var(--s3); }
.notes .sub { text-align: center; color: var(--text-2); margin: 0 0 var(--s5); }
.fix-card { display: flex; gap: var(--s4); align-items: flex-start; }
.fix-card .num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: var(--accent); font-family: var(--serif); font-weight: 700; font-size: var(--fs-heading); display: flex; align-items: center; justify-content: center; font-variant-numeric: lining-nums; }
.pull-quote { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: var(--fs-heading); line-height: 1.45; text-align: center; color: var(--accent); margin: var(--s7) auto; max-width: 30ch; }
.pull-quote::before { content: "\201C"; display: block; font-size: var(--fs-title); line-height: 0.6; color: var(--gold); margin-bottom: var(--s3); }

/* 404 and the thank-you page: one window, one line, the way home. */
.lost { text-align: center; }
.lost .cta-row { justify-content: center; margin-top: var(--s5); }
.hook, .subhead, .tagline, .who-lede, .today-note, .band-verse, .pull-quote, .word-nudge p { font-variant-numeric: lining-nums; }

/* Image pass (2026-10-10): photos are real <picture> elements (AVIF with JPEG fallback, responsive srcset,
   lazy below the fold). They fill their frames exactly like the old cover backgrounds did. */
.media-photo, .band-photo, .window-photo, .signup-photo, .today-bg { overflow: hidden; }
.media-photo img, .band-photo img, .window-photo img, .signup-photo img, .today-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media-photo img { object-position: center; }
.hero .media-photo img, .page-top .media-photo img, .study-head .media-photo img { object-position: center 45%; }
.word-main .media-photo img { object-position: center top; }
.band-photo img { object-position: center 22%; }
.window-photo img { object-position: center 72%; }
.signup-photo img { object-position: center 55%; }
.today-bg { position: absolute; inset: 0; pointer-events: none; }
.today-bg img { object-position: center 12%; }