/* Refrain, set like an old psalter: one book face (EB Garamond), black ink on warm paper, red ink ("rubric") for
   headings, labels and references, hairline and double rules. Your words are set in italic, Scripture in roman. */
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --ground: #F4EEE2;
  --card: #FBF7EF;
  --ink: #1E1A14;
  --soft: #574E41;
  --line: #CFC3AC;
  --rubric: #9B2A1E;
  --on-ink: #FBF7EF;
  --error: #9B2A1E;
  --serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --measure: 34rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #16120D;
    --card: #1D1812;
    --ink: #EDE4D3;
    --soft: #B6AA95;
    --line: #463C2F;
    --rubric: #E48A74;
    --on-ink: #16120D;
    --error: #FF9C86;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 1.25rem/1.5 var(--serif); font-variant-numeric: oldstyle-nums; }
a { color: var(--ink); text-decoration-color: var(--rubric); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rubric); }
:focus-visible { outline: var(--focus-width) solid var(--rubric); outline-offset: var(--focus-offset); border-radius: 2px; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.12; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lord { font-variant-caps: small-caps; }

/* Rubric: the red small-caps label that heads a section or names a thing. */
.rubric, .kicker, .demo-title, .said-label, .reply-label, .eyebrow, .week-no, .field-label, .ref {
  font-variant-caps: all-small-caps; letter-spacing: 0.09em; color: var(--rubric); font-weight: 500;
}

/* The printer's rule: a hairline either side of a small lozenge. */
.rule { display: flex; align-items: center; gap: 0.75rem; color: var(--rubric); margin: 0; border: 0; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule span { width: 0.4rem; height: 0.4rem; background: currentColor; transform: rotate(45deg); }

main, .top, .foot { width: min(100% - 2rem, 66rem); margin-inline: auto; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.brand-name { font: 500 1.625rem/1 var(--serif); letter-spacing: 0.01em; }
.brand-sub { font-size: 0.9375rem; font-style: italic; color: var(--soft); margin-top: 0.25rem; }
.top-cta { font-size: 1.0625rem; white-space: nowrap; }

/* Hero */
.hero { display: grid; gap: 2.5rem; padding-block: 2.5rem 3.5rem; align-items: start; }
@media (min-width: 60rem) { .hero { grid-template-columns: 1fr 1fr; gap: 4.5rem; padding-block: 4.5rem 5.5rem; } }
.kicker { margin: 0 0 0.75rem; font-size: 1.125rem; }
h1 { font-size: clamp(2.75rem, 9vw, 4.25rem); letter-spacing: -0.01em; }
.lede { font-size: 1.375rem; margin: 1.5rem 0 0; max-width: var(--measure); }
/* A red initial, as a psalter opens each psalm. */
.lede::first-letter { color: var(--rubric); float: left; font-size: 3.6em; line-height: 0.82; margin: 0.06em 0.08em 0 0; font-weight: 500; }
@supports (initial-letter: 2) { .lede::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 0.12em 0 0; initial-letter: 2; } }
.lede-small { margin: 1.25rem 0 0; color: var(--soft); font-style: italic; }
.nowrap { white-space: nowrap; }
@media (max-width: 30rem) {
  .hero { padding-block: 1.75rem 3rem; gap: 2rem; }
  .kicker { font-size: 1rem; }
  .lede { font-size: 1.25rem; margin-top: 1.25rem; }
}

/* The demo: a framed page. */
.demo { background: var(--card); border: 3px double var(--line); padding: 1.25rem 1.25rem 1.5rem; }
.demo-title { font-size: 1.125rem; margin: 0; }
.demo-hint { margin: 0.15rem 0 0; color: var(--soft); font-size: 1rem; font-style: italic; }
.prayers { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; }
.prayer-chip {
  font: italic 1.125rem/1.3 var(--serif); text-align: left; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 2px; padding: 0.55rem 0.9rem; min-height: 44px; cursor: pointer;
  transition: transform var(--motion-duration-hover) var(--motion-easing-standard);
}
.prayer-chip:hover { border-color: var(--rubric); }
.prayer-chip:active { transform: scale(0.98); }
.prayer-chip[hidden] { display: none; }

.thread { list-style: none; margin: 0; padding: 0; }
.exchange { margin-top: 1.5rem; }
.exchange + .exchange { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.said { margin: 0; font-style: italic; font-size: 1.1875rem; }
.said-label, .reply-label { display: block; font-size: 0.9375rem; font-style: normal; margin-bottom: 0.1rem; }

/* The reply: a red rule grows down from what you prayed, then the verse is set phrase by phrase, then its reference. */
.reply { position: relative; margin-top: 1rem; padding-left: 1.125rem; }
.reply::before {
  content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 1.5px;
  background: var(--rubric); transform-origin: top;
}
.verse { font-size: 1.5rem; line-height: 1.38; margin: 0; }
.verse .phrase:not(:first-child) .vn { margin-left: 0.3em; }
.vn { color: var(--rubric); font-size: 0.6em; vertical-align: 0.55em; margin-right: 0.15em; font-variant-numeric: lining-nums; }
.cite { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.ref { font-size: 1.125rem; }
.context { font-size: 1rem; font-style: italic; }

@media (prefers-reduced-motion: no-preference) {
  .exchange.is-arriving .said { animation: rise var(--motion-duration-enter) var(--motion-easing-enter) both; }
  .exchange.is-arriving .reply::before { animation: grow var(--motion-duration-fill) var(--motion-easing-enter) both; animation-delay: var(--listen); }
  .exchange.is-arriving .phrase { animation: fade var(--motion-duration-emphasis) var(--motion-easing-enter) both; animation-delay: var(--at); }
  .exchange.is-arriving .cite, .exchange.is-arriving .reply-label { animation: ink var(--motion-duration-emphasis) var(--motion-easing-enter) both; animation-delay: var(--at); }
}
/* Reduced motion keeps the order (prayer, then reply) without movement: a plain fade. */
@media (prefers-reduced-motion: reduce) {
  .exchange.is-arriving .reply { animation: fade var(--motion-duration-emphasis) linear both; animation-delay: var(--motion-duration-emphasis); }
}
@keyframes rise { from { opacity: 0; transform: translateY(var(--motion-distance-enter)); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes ink { from { opacity: 0; transform: translateY(calc(var(--motion-distance-enter) / 2)); } }
@keyframes fade { from { opacity: 0; } }

.demo-after { margin: 1.5rem 0 0; color: var(--soft); font-style: italic; }

/* Sections, each opened by a printer's rule. */
section h2 { font-size: clamp(2rem, 6vw, 2.75rem); }
.eyebrow { display: block; font-size: 1.125rem; margin-bottom: 0.4rem; }
.section-lede { color: var(--soft); margin: 0.75rem 0 0; max-width: var(--measure); }
.join-section, .how, .promises, .faq, .last, .story { padding-block: 2.5rem 3.5rem; }

/* Waitlist */
.join { margin-top: 1.5rem; max-width: 36rem; }
.field-label { display: block; font-size: 1.0625rem; margin-bottom: 0.3rem; }
.field-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.field-row input {
  flex: 1 1 14rem; min-width: 0; font: 1.1875rem/1.2 var(--serif); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 2px; padding: 0.7rem 0.9rem; min-height: 50px;
}
.field-row input::placeholder { color: var(--soft); font-style: italic; }
.field-row input[aria-invalid="true"] { border-color: var(--error); }
.join-btn, .last-cta {
  font: 500 1.1875rem/1 var(--serif); letter-spacing: 0.01em; color: var(--on-ink); background: var(--ink); border: 0; border-radius: 2px;
  padding: 0 1.4rem; min-height: 50px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  transition: transform var(--motion-duration-hover) var(--motion-easing-standard);
}
.join-btn:hover, .last-cta:hover { color: var(--on-ink); background: var(--rubric); }
.join-btn { flex: 0 0 auto; }
.join-btn:active, .last-cta:active { transform: scale(0.98); }
.join-btn[aria-busy="true"] { cursor: progress; }
.join-msg { min-height: 1.5em; margin: 0.4rem 0 0.5rem; font-size: 1.0625rem; color: var(--soft); }
.join-msg.is-error { color: var(--error); }
.check { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 0.75rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.25rem 0 0; accent-color: var(--rubric); flex: none; }
.check-note { display: block; color: var(--soft); font-size: 1.0625rem; font-style: italic; }
.hp { position: absolute; left: -9999px; }
.joined-line { font-size: 1.75rem; line-height: 1.2; margin: 0; }
.joined-to { margin: 0.5rem 0 0; color: var(--soft); }
.text-btn { font: inherit; font-size: 1.0625rem; color: var(--ink); background: none; border: 0; padding: 0.5rem 0; min-height: 44px; text-decoration: underline; text-decoration-color: var(--rubric); text-underline-offset: 0.2em; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .joined.is-entering { animation: rise var(--motion-duration-enter) var(--motion-easing-enter) both; }
}

/* How it works: numbered like a psalter's sections, in red roman numerals. */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 2rem; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step, upper-roman) "."; display: block; font-size: 1.25rem; color: var(--rubric); margin-bottom: 0.25rem; }
.steps h3 { font-size: 1.625rem; }
.steps p { margin: 0.5rem 0 0; color: var(--soft); }

/* Promises */
.promises .eyebrow { margin-bottom: 1.25rem; }
.promises ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .promises ul { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.promises strong { display: block; font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin-bottom: 0.35rem; color: var(--ink); }
.promises li { color: var(--soft); }

/* Story: four lines in the maker's own words, set as a quiet italic block. */
.story blockquote { margin: 1.25rem 0 0; padding-left: 1.125rem; border-left: 1.5px solid var(--rubric); font-style: italic; font-size: 1.375rem; max-width: var(--measure); }
.story blockquote p { margin: 0 0 0.6rem; }
.story figcaption { margin-top: 0.5rem; color: var(--soft); }

/* The mark: the app icon, a hold (fermata), beside what it means. */
.mark { padding-block: 2.5rem 3.5rem; }
.mark-figure { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; max-width: 44rem; }
.mark-icon { width: 7.5rem; height: 7.5rem; flex: none; }
@media (max-width: 30rem) { .mark-icon { width: 5.5rem; height: 5.5rem; } }
.mark-figure figcaption { flex: 1 1 18rem; }
.mark-figure .eyebrow { margin-bottom: 0.5rem; }
.mark-figure p { margin: 0; font-size: 1.375rem; }

/* FAQ */
.faq h2 { margin-bottom: 1rem; }
.faq details { border-bottom: 1px solid var(--line); max-width: 44rem; }
.faq summary { cursor: pointer; padding: 0.9rem 0; font-size: 1.3125rem; list-style-position: inside; min-height: 44px; }
.faq summary::marker { color: var(--rubric); }
.faq details p { margin: 0 0 1.1rem; color: var(--soft); max-width: var(--measure); }

/* Last call */
.last { text-align: center; padding-block: 3rem 4.5rem; }
.last h2 { font-style: italic; font-weight: 400; }
.last-cta { margin-top: 1.5rem; }

.foot { border-top: 3px double var(--line); padding-block: 2rem 3rem; color: var(--soft); font-size: 1.0625rem; }
.foot p { margin: 0.25rem 0; }

/* Privacy and 404 */
.page { max-width: 40rem; padding-block: 2.5rem 4rem; }
.page h1 { font-size: clamp(2.25rem, 7vw, 3rem); margin-bottom: 1.5rem; }
.page h2 { font-size: 1.5rem; margin-top: 2rem; }
.page p, .page li { color: var(--soft); }

/* Small-group page (/group): the plan, the join form and the leader guide, printable. */
.print-url { display: none; }
.group-hero { padding-block: 2.5rem 3rem; max-width: 46rem; }
.group-hero h1 { font-size: clamp(2.125rem, 7vw, 3.25rem); }
.group-brand { display: flex; flex-direction: column; margin: 1.25rem 0 0; }
.group-brand-name { font-size: 1.75rem; line-height: 1.1; font-weight: 500; }
.group-brand-sub { color: var(--soft); font-style: italic; }
.jump { margin: 1.25rem 0 0; }
.plan, .guide { padding-block: 2.5rem 3.5rem; }
.weeks { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 48rem) { .weeks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .weeks { grid-template-columns: repeat(4, 1fr); } }
.week h3, .guide-page h3 { font-size: 1.625rem; display: flex; flex-direction: column; gap: 0.1rem; }
.week-no { font-size: 1.0625rem; }
.week-theme, .week-days { font-size: 1.0625rem; font-style: italic; font-weight: 400; color: var(--soft); }
.days { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--line); }
.days li { display: flex; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.days li span { color: var(--soft); font-style: italic; min-width: 4.25rem; }
.howto { margin-top: 2.5rem; max-width: var(--measure); }
.howto h3 { font-size: 1.625rem; }
.howto p { margin: 0.5rem 0 0; font-size: 1.3125rem; }
.guide-page { padding-top: 2rem; max-width: 40rem; }
.guide-page + .guide-page { margin-top: 2rem; border-top: 1px solid var(--line); }
.guide-page h4 { font-size: 1.125rem; font-variant-caps: all-small-caps; letter-spacing: 0.09em; color: var(--rubric); font-weight: 500; margin: 1.25rem 0 0.15rem; }
.guide-page p, .guide-page ol { margin: 0.4rem 0 0; }
.guide-page ol { padding-left: 1.4rem; }
.guide-page ol li::marker { color: var(--rubric); }
.guide-page li { margin-top: 0.4rem; }

@media print {
  :root { --ground: #fff; --card: #fff; --ink: #000; --soft: #333; --line: #aaa; --rubric: #8E1F14; --on-ink: #fff; }
  body { font-size: 12pt; background: #fff; color: #000; }
  .top, .jump, .group-join, .screen-only { display: none; }
  .print-url { display: block; }
  main, .foot { width: auto; }
  .group-hero { padding-block: 0 0.75rem; }
  .group-hero h1 { font-size: 24pt; }
  .group-hero .lede { font-size: 12pt; margin-top: 0.4rem; }
  .group-brand { margin-top: 0.4rem; }
  .group-brand-name { font-size: 15pt; }
  .plan, .guide { padding-block: 0.5rem 0; }
  .plan .rule, .guide > .rule { display: none; }
  .plan h2 { font-size: 18pt; }
  .weeks { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; margin-top: 0.5rem; }
  .week { break-inside: avoid; }
  .week h3 { font-size: 14pt; }
  .days { margin-top: 0.3rem; }
  .days li { padding: 0.08rem 0; font-size: 11pt; }
  .howto { margin-top: 0.75rem; break-inside: avoid; }
  .howto h3 { font-size: 14pt; }
  .howto p { font-size: 12pt; }
  .guide { break-before: page; }
  .guide-page { break-inside: avoid; }
  .guide-page + .guide-page { break-before: page; border-top: 0; margin-top: 0; }
  .foot { border-top: 1px solid #aaa; }
  a { color: #000; text-decoration: none; }
}