/* Sermon and Scripture. Bread and wine: crusty cream paper, burgundy used like a pen. */
:root {
  --paper: #F2E6CE;        /* page: bread crumb, golden cream */
  --paper-deep: #E8D7B5;   /* crust: quote, credit and card surfaces */
  --ink: #1E1512;
  --ink-soft: #4A2A2E;     /* dimmed books, wine-brown, still AA */
  --redletter: #6E1C2C;    /* burgundy wine */
  --hair: rgba(110, 28, 44, 0.30);
  --hair-ink: rgba(110, 28, 44, 0.24);
  --shadow: rgba(70, 20, 30, 0.16);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1012;
    --paper-deep: #261A1D;
    --ink: #F2E6CE;
    --ink-soft: #D9C4B4;
    --redletter: #E3A0AC;
    --hair: rgba(227, 160, 172, 0.34);
    --hair-ink: rgba(242, 230, 206, 0.22);
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  font: 400 17px/1.6 var(--serif);
  overflow-wrap: break-word;
  overflow-x: hidden;
}
@media (max-width: 560px) { body { font-size: 16.5px; } }
@media (prefers-color-scheme: dark) { body { font-weight: 400; } }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, input:focus-visible, .chart-scroll:focus-visible {
  outline: 3px solid var(--redletter); outline-offset: 3px;
}
img, svg { max-width: 100%; height: auto; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 560px) { .wrap { padding: 0 20px; } }

/* header and nav */
.site-header { padding: 26px 0 0; }
.bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 6px 28px; padding-bottom: 14px; border-bottom: 1px solid var(--hair-ink);
}
.site-name {
  font: italic 600 21px/1.2 var(--serif); letter-spacing: -0.005em;
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px;
  font: 500 13px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.site-nav a:hover { color: var(--redletter); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav a:active { transform: translateY(1px); }
.site-nav a.on { color: var(--redletter); }
@media (max-width: 560px) {
  .site-nav a { padding: 0 9px; font-size: 13px; }
  .site-nav ul { margin-left: -9px; }
}

/* shared type */
h1, h2, h3 { color: inherit; font-weight: 400; }
.sec, .eyebrow, .post-item-section, .sermon-credit dt {
  font: 600 13px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; margin: 0;
}
.eyebrow { color: var(--redletter); margin-bottom: 24px; }
.eyebrow a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 5px; }

.site-main { min-height: 50vh; }

/* hero */
.hero { padding: clamp(36px, 6vw, 72px) 0 clamp(32px, 4.5vw, 56px); max-width: 860px; }
.hero h1 {
  font: 400 clamp(32px, 6vw, 50px)/1.08 var(--serif); letter-spacing: -0.025em; margin: 0;
  font-variation-settings: "opsz" 72; hyphens: manual;
}
.hero h1 em { color: var(--redletter); font-style: italic; }
.lede-line { max-width: 48ch; margin: 20px 0 0; font-size: 18px; line-height: 1.55; }

/* page heads */
.page-head { padding: clamp(32px, 5vw, 60px) 0 clamp(20px, 3vw, 32px); max-width: 860px; }
.page-head h1 { font: 400 clamp(29px, 4.6vw, 42px)/1.1 var(--serif); letter-spacing: -0.022em; margin: 0 0 14px; }
.section-intro { margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.55; }
.breadcrumb { margin: 0 0 14px; font: 600 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--redletter); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

/* numbered post list */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: none; }
.post-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 200px; gap: 6px 26px;
  padding: 22px 0; border-bottom: 1px solid var(--hair-ink); align-items: baseline;
}
.post-item .n { font: italic 400 36px/1 var(--serif); color: var(--redletter); font-variant-numeric: tabular-nums; }
.post-item-section { margin-bottom: 10px; }
.post-item-title { font: 500 clamp(20px, 2.4vw, 25px)/1.2 var(--serif); margin: 0 0 6px; letter-spacing: -0.01em; }
.post-item-title a { text-decoration: none; display: inline-block; min-height: 44px; padding: 7px 0; }
.post-item:hover .post-item-title a { text-decoration: underline; text-decoration-color: var(--redletter); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.post-item-summary { margin: 0; font-size: 16px; line-height: 1.5; }
.post-item-passages { margin: 0; font: italic 400 16px/1.4 var(--serif); text-align: right; }
.empty { font-size: 18px; padding: 24px 0; }
@media (max-width: 860px) {
  .post-item { grid-template-columns: 48px minmax(0, 1fr); }
  .post-item-passages { grid-column: 2; text-align: left; }
  .post-item .n { font-size: 30px; }
}
@media (max-width: 560px) {
  .post-item { grid-template-columns: 1fr; padding: 20px 0; gap: 4px; }
  .post-item-passages { grid-column: 1; }
  .post-item .n { font-size: 28px; }
}

/* home sections */
.featured, .latest, .teaser { margin-top: clamp(40px, 5.5vw, 64px); }
.latest { margin-top: 0; }
.featured { margin-bottom: clamp(40px, 5.5vw, 64px); }
.featured .sec { margin-bottom: 14px; }
.featured h3 { font: 500 clamp(22px, 2.8vw, 29px)/1.18 var(--serif); letter-spacing: -0.012em; margin: 0 0 8px; }
.featured h3 a { text-decoration-color: var(--redletter); text-decoration-thickness: 2px; text-underline-offset: 6px; display: inline-block; min-height: 44px; padding: 5px 0; }
.featured p { margin: 0; max-width: 46ch; }
.latest > .sec { margin: 0 0 18px; }
.secrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.secrow a { font: italic 400 17px/1 var(--serif); display: inline-flex; align-items: center; min-height: 44px; color: var(--redletter); }
.teaser-text { margin: 0; max-width: 46ch; }

/* bible index */
.testament { margin-bottom: clamp(40px, 6vw, 72px); }
.testament > .sec { padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.book-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; }
.book {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 400 20px/1.2 var(--serif); padding: 10px 0; min-height: 48px; border-bottom: 1px solid var(--hair-ink);
}
.book a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; flex: 1; }
.book a:hover { color: var(--redletter); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.book .count { font: italic 400 16px/1 var(--serif); color: var(--redletter); font-variant-numeric: tabular-nums; }
.book.no-posts { color: var(--ink-soft); font-style: italic; align-items: center; }
@media (max-width: 960px) { .book-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .book-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .book { font-size: 19px; } }
@media (max-width: 400px) { .book-list { grid-template-columns: 1fr; } }

/* post */
.post { max-width: 720px; margin: 0 auto; padding: clamp(28px, 4.5vw, 56px) 0 20px; }
.post h1 { font: 400 clamp(28px, 3.4vw, 37px)/1.12 var(--serif); letter-spacing: -0.02em; margin: 0 0 14px; }
.passage { font: italic 400 20px/1.35 var(--serif); color: var(--redletter); margin: 0 0 32px; }
.nw { white-space: nowrap; }
.passage a { text-decoration: none; display: inline-block; padding: 9px 0; }
.passage a:hover { text-decoration: underline; text-underline-offset: 5px; }
.post-header .passage:has(+ .post-based-on) { margin-bottom: 10px; }
.post-based-on { font: italic 400 16px/1.4 var(--serif); color: var(--ink); margin: 0 0 32px; }
.post-body { font-size: 17px; line-height: 1.6; color: var(--ink); }
@media (max-width: 560px) { .post-body { font-size: 16.5px; } }
.post-body :where(p, ul, ol, li, div, span, td, th, dd) { font-size: inherit; line-height: inherit; color: inherit; }
.post-body p, .post-body ul, .post-body ol { margin: 0 0 1.1em; max-width: 66ch; }
.post-body > p.long-lead:first-child::first-line { font-variant: small-caps; letter-spacing: 0.05em; }
.post-body h2 { font: 500 24px/1.2 var(--serif); letter-spacing: -0.01em; margin: 1.7em 0 0.5em; }
.post-body h3 { font: italic 500 19px/1.3 var(--serif); margin: 1.4em 0 0.4em; }
.post-body li { margin-bottom: 0.4em; }
.post-body li::marker { color: var(--redletter); }
.post-body a { text-decoration-color: var(--redletter); text-decoration-thickness: 2px; }
.post-body strong { font-weight: 600; }

/* quote block (posts and the verse cards on home and feeling pages) */
.post-body blockquote, .verse-card {
  position: relative; margin: 36px 0; padding: 50px 30px 26px;
  background: var(--paper-deep); border-radius: 2px;
  box-shadow: 0 1px 0 var(--hair-ink), 0 14px 30px var(--shadow);
}
.post-body blockquote::before, .verse-card::before {
  content: "\201C"; position: absolute; left: 24px; top: 6px;
  font: 400 76px/1 var(--serif); color: var(--redletter);
}
.post-body blockquote p, .verse-card p { margin: 0; max-width: none; font: italic 400 clamp(18px, 2.2vw, 21px)/1.45 var(--serif); }
.post-body blockquote p + p, .verse-card p + p { margin-top: 14px; }
.post-body blockquote p:last-child:not(:first-child), .verse-card p:last-child:not(:first-child) {
  font: 600 13px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal;
  color: var(--redletter); margin-top: 20px;
}
.post-body blockquote cite, .verse-card cite { display: block; margin-top: 18px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; color: var(--redletter); }
@media (max-width: 560px) {
  .post-body blockquote, .verse-card { padding: 46px 20px 22px; margin: 30px 0; }
  .post-body blockquote::before, .verse-card::before { left: 14px; }
}

/* callout (gold boxes from imported posts) */
.post-body .callout {
  background: var(--paper-deep); color: var(--ink); border-radius: 2px;
  padding: 18px 22px; margin: 24px 0;
  box-shadow: 0 1px 0 var(--hair-ink), 0 10px 22px var(--shadow);
}
.post-body .callout > :first-child { margin-top: 0; }
.post-body .callout > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .post-body .callout { padding: 18px 18px; } }

/* sermon credit */
.sermon-credit {
  margin: 0 0 32px; padding: 20px 24px; background: var(--paper-deep); border-radius: 2px;
  box-shadow: 0 1px 0 var(--hair-ink), 0 10px 24px var(--shadow);
}
.sermon-credit .sec { color: var(--redletter); margin-bottom: 14px; }
.sermon-credit dl { margin: 0 0 8px; }
.sermon-credit dl > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--hair-ink); align-items: baseline; }
.sermon-credit dt { color: var(--ink); }
.sermon-credit dd { margin: 0; font-size: 18px; }
.sermon-credit p { margin: 12px 0 0; }
.sermon-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration-color: var(--redletter); text-decoration-thickness: 2px; }
@media (max-width: 560px) {
  .sermon-credit { padding: 22px 20px; }
  .sermon-credit dl > div { grid-template-columns: 1fr; }
}

/* chart */
.post-chart { margin: 40px 0 0; }
.chart-scroll { overflow-x: auto; background: var(--paper-deep); border-radius: 2px; padding: 18px 16px; box-shadow: 0 1px 0 var(--hair-ink), 0 10px 24px var(--shadow); }
.chart { display: block; width: 100%; min-width: 640px; height: auto; color: var(--ink); font-family: var(--sans); }
.chart text { fill: var(--ink); font-size: 13px; }
.chart .chart-title { font: 600 15px var(--serif); fill: var(--ink); }
.chart .axis { font-size: 13px; }
.chart .value { font-weight: 600; }
.chart .bar { fill: var(--ink); }
.chart .bar.alt { fill: var(--redletter); }
.chart .tick { stroke: var(--ink); }

/* search */
.search-form { max-width: 760px; margin-bottom: 14px; }
.search-form label { display: block; font: 600 13px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.search-form input {
  width: 100%; min-height: 56px; padding: 10px 16px; font: 400 19px/1.3 var(--serif); color: var(--ink);
  background: var(--paper-deep); border: 1px solid var(--hair-ink); border-radius: 2px;
  box-shadow: inset 0 2px 6px var(--shadow);
}
.search-status { min-height: 1.7em; margin: 0 0 18px; font-style: italic; }
#search-results:empty { border-top: 0; }

/* prose pages */
.prose { max-width: 680px; padding: clamp(32px, 5vw, 60px) 0 20px; }
.prose h1 { font: 400 clamp(29px, 4.6vw, 42px)/1.1 var(--serif); letter-spacing: -0.022em; margin: 0 0 22px; }
.prose h2 { font: 500 clamp(21px, 3vw, 24px)/1.2 var(--serif); margin: 1.6em 0 0.5em; }
.prose p { margin: 0 0 1.1em; max-width: 62ch; }
.prose a { text-decoration-color: var(--redletter); text-decoration-thickness: 2px; display: inline-block; padding: 8px 0; }

/* verse of the day, feelings picker, feeling pages */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --smooth: cubic-bezier(.2, .8, .2, 1); }
.votd { margin: 0 0 clamp(36px, 5vw, 56px); max-width: 880px; }
.votd .verse-card, .feel-card .verse-card, .verse-item .verse-card { margin: 18px 0 0; }
.votd .verse-card { padding-top: 46px; }
.verse-from { margin: 10px 0 0; font: italic 400 17px/1.3 var(--serif); }
.verse-from a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--redletter); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.verse-from[hidden] { display: none; }

.feel { margin: 0 0 clamp(40px, 5.5vw, 64px); max-width: 880px; }
.feel-h { font: 500 clamp(22px, 3vw, 29px)/1.2 var(--serif); letter-spacing: -0.012em; margin: 0 0 16px; }
.feel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.feel-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 84px; padding: 0 18px;
  font: 500 13px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--paper-deep); border: 1px solid var(--hair-ink); border-radius: 2px;
  box-shadow: 0 1px 0 var(--hair-ink), 0 6px 14px var(--shadow);
  transition: transform .28s var(--spring), box-shadow .2s var(--smooth), border-color .2s var(--smooth), background-color .2s var(--smooth), color .2s var(--smooth);
}
.feel-btn:hover { border-color: var(--redletter); transform: translateY(-2px); box-shadow: 0 1px 0 var(--redletter), 0 10px 18px var(--shadow); }
.feel-btn:active { transform: translateY(1px) scale(.96); box-shadow: 0 1px 0 var(--hair-ink); transition-duration: .08s; }
.feel-btn[aria-pressed="true"] { background: var(--redletter); color: var(--paper); border-color: var(--redletter); animation: feel-pop .42s var(--spring); }
.feel-btn:focus-visible { outline: 3px solid var(--redletter); outline-offset: 3px; }
@keyframes feel-pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }

.feel-result { min-height: 0; }
.feel-card { animation: feel-in .38s var(--smooth) both; }
@keyframes feel-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.verse-actions { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 0 24px; font: italic 400 17px/1.3 var(--serif); }
.verse-actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--redletter); text-decoration-thickness: 2px; text-underline-offset: 5px; }

.verse-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.verse-item { margin: 0 0 clamp(28px, 4vw, 44px); }
.verse-item .verse-card p { font-size: clamp(18px, 2.3vw, 21px); }
.feel-more { margin-top: clamp(40px, 6vw, 72px); }
.feel-more .sec { margin-bottom: 14px; }
.verse-credit { margin: 28px 0 0; font-size: 15px; }
.verse-credit a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--redletter); text-decoration-thickness: 2px; }
.feel-index { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 2px solid var(--ink); }
.feel-index li { padding: 18px 0; border-bottom: 1px solid var(--hair-ink); }
.feel-index h2 { font: 500 clamp(20px, 2.6vw, 25px)/1.2 var(--serif); letter-spacing: -0.01em; margin: 0 0 6px; }
.feel-index h2 a { display: inline-block; min-height: 44px; padding: 5px 0; text-decoration-color: var(--redletter); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.feel-index p { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.5; }
@media (max-width: 560px) {
  .feel-list { gap: 8px; }
  .feel-btn { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
  .feel-list li { display: contents; }
  .feel-more .feel-btn { flex: 1 1 calc(50% - 4px); }
}
@media (prefers-reduced-motion: reduce) {
  .feel-card, .feel-btn[aria-pressed="true"] { animation: none !important; }
  .feel-btn:hover, .feel-btn:active { transform: none; }
}

/* footer */
.site-footer { margin-top: 64px; padding: 16px 0 40px; border-top: 1px solid var(--hair-ink); font-size: 15px; }
.site-footer p { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }