/* Aurelo: the design's direction A · Gilt ("Aurelo design" canvas, frames A · Home and A · Answer, 2026-10-29).
   A printed Bible, made modern: Scripture in EB Garamond, the AI's words in Public Sans, a thin gold rule and
   navy links. Every value below is the frames' own. Red is kept for Jesus' words. The tokens board comes with
   the design's green light; until then these names are only this file's. */

/* The fonts, served by the app (2026-11-05), so a visitor's address doesn't go to Google Fonts. EB Garamond and Public Sans
   come from Google Fonts' own stylesheet, and Figtree from Memento Vivere v2's copy: each is one variable file for its
   alphabet. Licenses (OFL) are beside them in fonts/. */
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url(/static/fonts/ebgaramond-v33-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url(/static/fonts/ebgaramond-v33-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/static/fonts/ebgaramond-v33-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/static/fonts/ebgaramond-v33-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/static/fonts/publicsans-v21-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/static/fonts/publicsans-v21-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/fonts/figtree-v9-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/fonts/figtree-v9-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --gold: #B8913A;          /* the rule at the top, under titles and over the points */
  --gold-dark: #8A6A28;     /* source and verse numbers */
  --gold-soft: #D9CBA6;     /* the line beside "Sources" */
  --gold-underline: #CDBF9F;
  --ink: #1B1A17;           /* headings and Scripture */
  --text: #2E2B26;
  --text-2: #4A463F;
  --muted: #6B655B;
  --line: #E6E1D6;
  --field: #8F887B;
  --navy: #1E3A5F;
  --panel: #FAF8F2;         /* "Read the passage" */
  --mark: #F3E2B3;          /* the quoted words in a passage */
  --red: #A3241B;           /* Jesus' words, when red letters are on */
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Public Sans', system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #FFFFFF; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page {
  display: flex; flex-direction: column; min-height: 100vh;
  background: #FFFFFF; color: var(--text); font-family: var(--sans);
  border-top: 3px solid var(--gold); -webkit-font-smoothing: antialiased;
}
.page :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 2px; background: var(--navy); color: #FFFFFF;
  font-family: var(--sans); font-size: 16px; font-weight: 600; cursor: pointer;
}
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--navy); border-radius: 2px; background: #FFFFFF; color: var(--navy);
  font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-quiet {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 2px; background: #FFFFFF; color: var(--text-2);
  font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer;
}
.btn-quiet[aria-pressed="true"] { border-color: var(--navy); color: var(--navy); }

/* Home */
.home-main { padding: clamp(64px, 10vw, 120px) var(--gutter) 0; }
.hero { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* The sun mark above the wordmark: 0.8 of the wordmark's size wide, a third of it above (67 px and 28 px at 84 px type). */
.mark { display: block; width: clamp(40px, 6.4vw, 67px); height: auto; }
.wordmark-lg {
  margin: clamp(16px, 2.667vw, 28px) 0 0; padding-left: 0.14em; font-family: var(--serif); font-weight: 500;
  font-size: clamp(48px, 8vw, 84px); line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.tagline {
  margin: 24px 0 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.4vw, 27px); line-height: 1.35; color: var(--text);
}
.ask-form { margin-top: clamp(36px, 4.5vw, 48px); width: 100%; text-align: left; }
.ask-box {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 14px 22px;
  background: #FFFFFF; border: 1px solid var(--field); border-radius: 3px;
}
.ask-box textarea {
  display: block; width: 100%; padding: 0; border: 0; outline: none; resize: none; background: transparent;
  font-family: var(--sans); font-size: 18px; line-height: 1.55; color: var(--ink);
}
/* Focus in a question box: its own border turns navy. No ring around it, so it stays one frame. */
.ask-box:focus-within, .follow-box:focus-within { border-color: var(--navy); }
.page .ask-box textarea:focus-visible, .page .follow-box input:focus-visible { outline: none; }
.ask-foot { display: flex; justify-content: flex-end; }
.try { margin-top: 40px; width: 100%; max-width: 560px; }
.try ul { list-style: none; margin: 0; padding: 0; }
.try button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 6px 8px;
  border: 0; background: transparent; cursor: pointer; text-align: center;
  font-family: var(--sans); font-size: 17px; line-height: 1.4; color: var(--navy);
  text-decoration: none; text-decoration-color: var(--gold-underline); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
/* The gold underline shows only on the question pointed at or focused. */
.try button:hover:not(:disabled), .try button:focus-visible { text-decoration-line: underline; }
.try button:disabled { cursor: default; opacity: 0.6; }
/* The engraving is black on transparent; the mask lets it take the gold. */
.engraving { max-width: 560px; margin: clamp(48px, 6vw, 72px) auto 0; }
.engraving span {
  display: block; aspect-ratio: 1120 / 360; background: var(--gold);
  -webkit-mask: url("/static/img/home-engraving.webp") center / contain no-repeat;
  mask: url("/static/img/home-engraving.webp") center / contain no-repeat;
}
.about { max-width: 1040px; margin: clamp(56px, 7vw, 88px) auto 0; }
.about-head { display: flex; align-items: center; gap: 20px; }
.about-head span { flex: 1; height: 1px; background: var(--line); }
.about-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 34px); line-height: 1.2; color: var(--ink); text-align: center; }
.about-lead { max-width: 620px; margin: 18px auto 0; text-align: center; font-size: 18px; line-height: 1.65; color: var(--text); }
/* Four across only where the longest heading fits on one line: it's 240 px wide at 23 px type (measured 2026-11-04), and
   the columns are 242 px at full width, which takes 1160 px with a scrollbar. Narrower, two by two; on a phone, one. */
.points { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }
@media (max-width: 1159px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .points { grid-template-columns: 1fr; } }
.point h3 { width: fit-content; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--gold); font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.25; color: var(--ink); }
.point p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }

/* The conversation */
.bar { border-bottom: 1px solid var(--line); }
.bar-inner { max-width: 1080px; margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark {
  display: inline-flex; align-items: center; min-height: 48px; padding-left: 0.16em; font-family: var(--serif);
  font-weight: 500; font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
/* The small sun mark left of the wordmark, its horizon on the wordmark's baseline. The bar fits it from 367px wide
   (measured 2026-10-30); narrower, the bar shows the wordmark alone. */
.wordmark span { white-space: nowrap; }
.bar-mark { display: inline-block; vertical-align: baseline; width: 30px; height: 18px; margin-right: 12px; }
@media (max-width: 369px) { .bar-mark { display: none; } }
.column { padding: clamp(36px, 5vw, 64px) var(--gutter) 0; }
.column > * { max-width: 700px; margin-left: auto; margin-right: auto; }
.turn { scroll-margin-top: 24px; }
.turn + .turn { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.turn-label { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.question { margin: 0; font-weight: 600; font-size: clamp(25px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.q-rule { display: block; margin-top: 22px; width: 40px; height: 1px; background: var(--gold); }
.answer { margin-top: 24px; font-size: clamp(17px, 1.4vw, 18px); line-height: 1.75; color: var(--text); }
.answer p { margin: 0 0 20px; }
.answer p:last-child { margin-bottom: 0; }
.sq { font-family: var(--serif); font-size: 1.2em; line-height: 1; color: var(--ink); }
.ref-sup { font-size: 0.66em; line-height: 0; margin-left: 2px; }
.ref { font-weight: 600; color: var(--navy); text-decoration: none; }
.pending .status-line { color: var(--muted); font-style: italic; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .pending .status-line { animation: none; } }
.actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.status { font-size: 14px; color: var(--muted); }

.sources { margin-top: 52px; }
.sources-head { display: flex; align-items: center; gap: 16px; }
.sources-head > :first-child { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.sources-head span { flex: 1; height: 1px; background: var(--gold-soft); }
.sources ol { list-style: none; margin: 6px 0 0; padding: 0; }
.source { display: flex; gap: 16px; padding: 22px 0 14px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.source.flash { animation: flash 1.4s ease-out; }
@keyframes flash { from { background: var(--panel); } to { background: transparent; } }
.source .num { flex: none; width: 22px; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.1; color: var(--gold-dark); }
.src-body { flex: 1; min-width: 0; }
.src-meta { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.src-ref { font-weight: 600; color: var(--ink); }
.src-heading { font-family: var(--serif); font-style: italic; font-size: 17px; }
.src-quote { margin: 8px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--ink); }
.vn { font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 0; color: var(--gold-dark); margin-right: 3px; }
.gap { color: var(--muted); }
.passage { margin-top: 6px; }
.passage summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--navy);
}
.passage summary::-webkit-details-marker { display: none; }
.passage .chev { transition: transform 0.15s; }
.passage[open] .chev { transform: rotate(180deg); }
.passage-ref { margin-left: 4px; font-weight: 400; color: var(--muted); }
.passage-body { margin: 4px 0 10px -38px; padding: 22px clamp(16px, 3vw, 30px) 24px; background: var(--panel); border-top: 2px solid var(--gold); }
.passage-heading { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 25px; line-height: 1.25; color: var(--ink); }
.passage-text { font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--ink); }
.passage-text p { margin: 0 0 10px; }
.passage-text p:last-child { margin-bottom: 0; }
.passage-text .ps-title { font-style: italic; }
mark { background: var(--mark); color: inherit; padding: 1px 2px; border-radius: 2px; }

.message p { margin: 0; }
.message-crisis p { color: var(--ink); }

.follow-form { margin-top: 56px; }
.follow-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; background: #FFFFFF; border: 1px solid var(--field); border-radius: 3px; }
.follow-box input {
  flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: none; background: transparent;
  font-family: var(--sans); font-size: 17px; color: var(--ink);
}
.follow-box .btn-primary { flex: none; padding: 0 22px; }
.left { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.limit { margin-top: 56px; font-size: 17px; line-height: 1.6; color: var(--text); }
.disclaimer { margin-top: 14px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Section headings (shown unless off) and red letters (the page sets them on). */
.page[data-headings="off"] .src-heading-wrap,
.page[data-headings="off"] .passage-heading { display: none; }
.page[data-red="on"] .wj { color: var(--red); }

/* The simple pages: about, contact, privacy and terms. The canvas has no frames for them, so they use its type and
   colors. Left and right margins stay with .column, which centers each child. */
.prose { font-size: 17px; line-height: 1.7; color: var(--text); }
.prose h1 {
  margin-top: 0; margin-bottom: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4vw, 42px);
  line-height: 1.15; color: var(--ink);
}
.page-head { margin-bottom: 28px; }
.prose .q-rule { margin-top: 18px; }
.prose h2 {
  margin-top: 40px; margin-bottom: 0; font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.25;
  color: var(--ink);
}
.prose p { margin-top: 14px; margin-bottom: 0; }
.page-head + p { margin-top: 0; }
.prose ul { margin-top: 14px; margin-bottom: 0; padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--navy); text-decoration-color: var(--gold-underline); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--navy); }
.prose code { font-size: 0.9em; }
.prose .updated { font-size: 14px; color: var(--muted); }
.prose .disclaimer { margin-top: 40px; text-align: left; }
.contact-form { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; padding: 12px 14px; background: #FFFFFF; border: 1px solid var(--field); border-radius: 3px;
  font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink);
}
.contact-form textarea { resize: vertical; }
.form-error { margin-top: 0; font-size: 15px; color: #9A3412; }
#contact-success h1:focus { outline: none; }

/* Footer */
.home, .thread, .page-body { flex: 1 0 auto; }
.site-footer {
  margin-top: clamp(80px, 10vw, 128px); padding: 28px var(--gutter) 40px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
.foot { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); text-decoration: none; }
.foot:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold-underline); text-underline-offset: 3px; }
.d2cebl {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid #E1ECFB; border-radius: 999px;
  background: #FAFCFF; text-decoration: none; font-family: Figtree, system-ui, sans-serif; font-size: 13px; line-height: 18px; color: #5B6B7F;
}
.d2cebl-name { font-weight: 700; color: #0565E1; }
.d2cebl-sup { font-size: 0.5em; position: relative; top: -0.85em; }
.copyright { margin: 0; font-size: 13px; color: var(--muted); }

/* Local testing only: the switches for the open choices, and the developer details under each answer. */
.page[data-dev="1"] { padding-bottom: 72px; }
.devbar {
  position: fixed; right: 12px; bottom: 12px; z-index: 10; max-width: calc(100vw - 24px); padding: 4px 10px;
  border: 1px dashed var(--field); border-radius: 4px; background: #FFFFFFF2; font-size: 13px; color: var(--text-2);
  box-shadow: 0 2px 8px rgba(27, 26, 23, 0.08);
}
.devbar summary { min-height: 28px; display: flex; align-items: center; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.devbar-body { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 4px 0 4px; }
.devbar label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.devbar a { color: var(--navy); }
.devhead { margin-bottom: 40px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.devhead a { color: var(--navy); }
.devbox { margin-top: 28px; padding: 10px 14px; border: 1px dashed var(--field); border-radius: 4px; background: #FCFCFB; font-size: 13px; line-height: 1.5; color: var(--muted); }
.devbox summary { cursor: pointer; font-weight: 600; }
.devbox dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0; }
.devbox dt { font-weight: 600; color: var(--ink); }
.devbox dd { margin: 0; overflow-wrap: anywhere; }
.devbox .warn { color: #9A3412; }
.devbox table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.devbox th, .devbox td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.devbox tr.sent td { color: var(--ink); }
.devbox .note { font-size: 12px; color: var(--muted); }

@media (max-width: 600px) {
  .devbox dl { grid-template-columns: 1fr; }
  .devbox table { display: block; overflow-x: auto; }
}