/* My Family Devotion
   ==================

   The design brief in one line: it should look like a well made book that happens
   to be a website, not a website about a book.

   Three decisions carry the whole thing.

   1. White ground, one deep colour, one warm one. The page is white because a
      family reads it in a lit room; the ink is warm near-black rather than #000
      because pure black on pure white is glare. Spruce carries structure. Amber
      carries emphasis and never appears twice on a screen without reason.

   2. Two typefaces doing two jobs. A serif for everything anybody reads as prose,
      because that is what reading at length wants. A sans for labels, references,
      counts and navigation, because those are looked at rather than read, and the
      contrast between the two is most of what makes a page feel designed.

   3. Surfaces, not boxes. Cards sit on a warm tint with a hairline and a generous
      radius rather than a hard border. Depth comes from tone, not from shadow.

   Nothing is fetched from a third party. Hotlinking Google Fonts sends the reader's
   IP to Google on every page view, which a German court has held to be a GDPR
   problem without consent, and this site ships no consent banner. Every glyph is
   either self-hosted or already on the reader's machine, and every icon is inline
   SVG in the markup rather than an icon font.

   To use Literata, drop the two woff2 files into wwwroot/fonts and uncomment. */

/*
@font-face {
    font-family: Literata;
    src: url("/fonts/literata-regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: Literata;
    src: url("/fonts/literata-semibold.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
*/

:root {
    /* Ink */
    --ink:        #14120f;
    --ink-soft:   #3d3833;
    --muted:      #6b645c;
    --faint:      #948c83;

    /* Ground */
    --paper:      #ffffff;
    --tint:       #faf7f2;   /* card surface, barely there */
    --tint-deep:  #f3ede4;   /* scripture panel */
    --rule:       #e8e1d7;
    --rule-soft:  #f0eae1;

    /* Colour. Spruce is structural, amber is emphasis. */
    --spruce:     #0d4f45;
    --spruce-lo:  #10695c;
    --spruce-wash:#e6f0ed;
    --amber:      #b4670f;
    --amber-wash: #fdf3e3;

    --masthead:   4.1rem;

    --measure:    38rem;
    --radius:     14px;
    --radius-sm:  9px;

    --serif: Literata, Charter, "Bitstream Charter", "Iowan Old Style",
             "Palatino Linotype", Palatino, Georgia, serif;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
            "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.72;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 40em) { html { font-size: 19px; } }

a { color: inherit; }

.page {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1.35rem;
}

main.page { flex: 1 0 auto; padding-top: 2.5rem; padding-bottom: 4rem; }

/* Anything that is read as prose is held to a comfortable measure even when the
   container around it is wide. */
.measure { max-width: var(--measure); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ masthead */

/* Anything with an id can be linked to, and the sticky masthead sits over the
   top of the page. Without this a jump to #who puts the heading behind it. */
[id] {
    scroll-margin-top: calc(var(--masthead) + 1.25rem);
}

.masthead {
    border-bottom: 1px solid var(--rule-soft);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.6) blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.masthead .page {
    display: flex;
    align-items: center;
    justify-content: space-between;
        gap: 0.75rem;
    min-height: var(--masthead);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: -0.012em;
    color: var(--ink);
    white-space: nowrap;
}

.wordmark .sigil {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--spruce);
    color: #fff;
    flex: none;
}

.wordmark .sigil svg { width: 1.1rem; height: 1.1rem; }
.wordmark:hover { color: var(--spruce); }

.masthead nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.86rem;
}

.masthead nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.8rem;
    border-radius: 99px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
}

.masthead nav a:hover { background: var(--tint); color: var(--ink); }
.masthead nav a svg { width: 0.95rem; height: 0.95rem; opacity: 0.75; }

/* ---------------------------------------------------------------------- type */

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.018em; margin: 0; }

.eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spruce);
    margin: 0 0 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--rule), transparent);
}

.hero { padding: 1.5rem 0 2.6rem; }

.hero h1 {
    font-size: clamp(2.1rem, 6vw, 3.35rem);
    font-weight: 600;
    max-width: 20ch;
    text-wrap: balance;
}

.hero h1 em {
    font-style: normal;
    color: var(--spruce);
}

.hero .standfirst {
    margin: 1.1rem 0 0;
    max-width: 54ch;
    font-size: 1.06rem;
    line-height: 1.62;
    color: var(--ink-soft);
}

/* The one sentence that answers "what will this cost me tonight". It sits inside
   the standfirst so it reads as the end of that thought, but on its own line and
   at full ink so it is the thing the eye lands on after the headline. */
.hero .standfirst .promise {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.14rem;
    font-weight: 600;
    color: var(--ink);
}

/* The hero is one column until there is genuinely room for two. Below that the
   branch is not shrunk, it is dropped: line art this fine turns to mush at small
   sizes, and the text is the page. */
.hero-figure { display: none; }

@media (min-width: 62em) {
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 17rem;
        align-items: center;
        column-gap: 2.5rem;
    }

    .hero-figure {
        display: block;
        justify-self: end;
        color: var(--spruce);
        opacity: 0.5;
        pointer-events: none;
    }

    .hero-figure svg {
        display: block;
        width: 100%;
        height: auto;
        max-height: 21rem;
    }
}

.page-title {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    font-weight: 600;
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 3rem 0 1.1rem;
}

.section-heading h2 {
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
}

.section-heading .aside {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--faint);
}

p.note, p.muted {
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--muted);
    max-width: var(--measure);
}

/* --------------------------------------------------------------------- cards */

.card {
    display: block;
    text-decoration: none;
    background: var(--tint);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.card:hover {
    border-color: var(--rule);
    background: #fff;
    transform: translateY(-2px);
}

.card .ref {
    display: block;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--spruce);
    margin-bottom: 0.3rem;
}

.card .name {
    display: block;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.01em;
}

.grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Testament headings on the browse list. Quiet: they are a signpost between two
   groups of cards, not a second level of page heading competing with "Browse". */
.testament + .testament { margin-top: 1.9rem; }

.testament h3 {
    margin: 0 0 0.75rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--spruce);
}

/* The devotion of the day. One card on the page allowed to be loud. */
.today {
    display: block;
    position: relative;
    text-decoration: none;
    border-radius: var(--radius);
    padding: 1.9rem 1.8rem 1.7rem;
    background:
        radial-gradient(120% 140% at 100% 0%, #12564b 0%, #0d4f45 45%, #0a3f37 100%);
    color: #f4efe6;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(13, 79, 69, 0.14), 0 12px 28px -14px rgba(13, 79, 69, 0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.today:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(13, 79, 69, 0.16), 0 18px 36px -14px rgba(13, 79, 69, 0.55);
}

.today .kicker {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #f0c489;
    margin-bottom: 0.9rem;
}

.today .kicker svg { width: 0.85rem; height: 0.85rem; }

.today .reference {
    display: block;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(244, 239, 230, 0.72);
    margin-bottom: 0.35rem;
}

.today .devotion-title {
    display: block;
    font-size: clamp(1.5rem, 3.6vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    max-width: 22ch;
}

.today .go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.15rem;
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 600;
    color: #f0c489;
}

.today .go svg { width: 0.9rem; height: 0.9rem; transition: transform 0.15s ease; }
.today:hover .go svg { transform: translateX(3px); }

/* Book cards carry a progress bar, because the corpus is going to sixty-six books
   and "how far in are we" is the question the index exists to answer. */
.book-card { position: relative; }

.book-card .name { font-size: 1.2rem; }

.book-card .meta {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.book-card .bar {
    margin-top: 0.9rem;
    height: 4px;
    border-radius: 99px;
    background: var(--rule);
    overflow: hidden;
}

.book-card .bar span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(to right, var(--spruce-lo), var(--spruce));
}

/* -------------------------------------------------------------------- search */

.search {
    display: flex;
    gap: 0.5rem;
    max-width: 34rem;
    margin: 1.6rem 0 0;
}

.search input {
    flex: 1;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--tint);
    border: 1px solid var(--rule);
    border-radius: 99px;
    padding: 0.68rem 1.1rem;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.search input::placeholder { color: var(--faint); }

.search input:focus {
    background: #fff;
    border-color: var(--spruce);
    box-shadow: 0 0 0 3px var(--spruce-wash);
}

.search button {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: var(--spruce);
    border: 0;
    border-radius: 99px;
    padding: 0.68rem 1.3rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search button:hover { background: var(--spruce-lo); }

.results { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.85rem; }

.snippet {
    display: block;
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0.55rem 0 0;
}

.snippet mark {
    background: var(--amber-wash);
    color: var(--amber);
    font-weight: 600;
    padding: 0.05em 0.15em;
    border-radius: 3px;
}

/* ------------------------------------------------------------------- devotion */

.devotion { max-width: 44rem; }

.devotion-header { margin-bottom: 1.8rem; }

.devotion-header .reference {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--spruce);
    margin: 0 0 0.55rem;
}

.devotion-header h1 {
    font-size: clamp(1.85rem, 5vw, 2.7rem);
    font-weight: 600;
    text-wrap: balance;
}

/* Scripture is set apart from our prose on purpose, and the treatment has to make
   that obvious before anybody reads a word: tinted ground, a spruce rule down the
   side, and verse numbers in the sans so they read as apparatus. */
.passage {
    max-width: 42rem;
    background: var(--tint-deep);
    border-left: 3px solid var(--spruce);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.4rem 1.5rem 1.2rem;
    margin: 0 0 2.4rem;
}

.passage .verse {
    margin: 0 0 0.85rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--ink);
}

.passage .verse:last-child { margin-bottom: 0; }

/* Scripture the leader reads out inside the devotion itself.
   ---------------------------------------------------------
   This exists because a family beta-read Philippians 1:19-26 at their table and
   could not tell where Paul's words stopped and ours began. Read aloud
   reproduces the passage a piece at a time so it can be discussed as it goes,
   which is the right shape, but for its first hundred and sixty-eight devotions
   it did that with no visual difference at all.

   Deliberately the same family of treatment as .passage above, so a reader who
   has seen the panel at the top of the page recognises it instantly, and lighter,
   so it does not compete with the passage it is quoting from. Nobody should ever
   have to read a sentence to work out who is saying it. */
.read-aloud .spoken-scripture {
    margin: 1.4rem 0;
    padding: 0.15rem 0 0.15rem 1.15rem;
    border-left: 3px solid var(--spruce-lo);
    color: var(--ink);
}

/* Named on every devotion, quietly. Observations about wording are claims about
   a translation, and a reader whose Bible reads differently should be able to see
   which one this is without leaving the page. */
.passage .translation {
    margin: 1rem 0 0;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.passage .v {
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--spruce);
    vertical-align: 0.42em;
    margin-right: 0.3em;
    letter-spacing: 0.02em;
}

.devotion section { max-width: var(--measure); }
.devotion section p { margin: 0 0 1.05rem; }

.devotion h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 2.8rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule-soft);
}

.devotion h2 svg { width: 1rem; height: 1rem; color: var(--spruce); flex: none; }

.read-aloud p:first-child::first-letter {
    float: left;
    font-size: 3.1rem;
    line-height: 0.86;
    padding: 0.12em 0.1em 0 0;
    color: var(--spruce);
    font-weight: 600;
}

/* How We Know is evidence, not narration, so it is set on a tinted card. The
   declared type and confidence were shown here as pills until 16 August 2026 and
   as a generated sentence until 18 August. Neither is rendered now, and the note
   states its own reach in its prose. */
.how-we-know {
    background: var(--tint);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem 1.1rem;
    max-width: var(--measure);
}

.how-we-know h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; }
.how-we-know p { font-size: 0.96rem; }
.how-we-know .sources {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--faint);
}

.how-we-know .sources li { margin: 0 0 0.3rem; }

.how-we-know .sources li::before {
    content: "Source";
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

.questions .question {
    border-top: 1px solid var(--rule-soft);
    padding: 1.15rem 0 0.35rem;
}

.questions .question:first-of-type { border-top: 0; padding-top: 0; }

.questions .ask {
    display: flex;
    gap: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.questions .n {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.55rem;
    height: 1.55rem;
    margin-top: 0.12rem;
    border-radius: 99px;
    background: var(--spruce-wash);
    color: var(--spruce);
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
}

/* Answers are visible, but they are the one part never read aloud, so they are set
   apart: indented behind a rule, quieter, labelled. */
.questions .answer {
    color: var(--muted);
    font-size: 0.91rem;
    line-height: 1.62;
    margin: 0 0 0.4rem 2.25rem;
    padding-left: 0.95rem;
    border-left: 2px solid var(--rule);
}

.questions .answer .label {
    display: block;
    font-family: var(--sans);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.prayer {
    background: var(--amber-wash);
    border-radius: var(--radius);
    padding: 1.3rem 1.45rem 1rem;
    max-width: var(--measure);
}

.prayer h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; }
.prayer h2 svg { color: var(--amber); }
.prayer p { color: #4a3a25; }

/* ---------------------------------------------------------------- neighbours */

.neighbours {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-top: 3.5rem;
    max-width: 44rem;
}

.neighbours a {
    display: block;
    text-decoration: none;
    background: var(--tint);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.neighbours a:hover { background: #fff; border-color: var(--rule); }

.neighbours .dir {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 0.4rem;
}

.neighbours .dir svg { width: 0.8rem; height: 0.8rem; }
.neighbours .name { display: block; font-weight: 600; line-height: 1.3; }

.neighbours .ref {
    display: block;
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* ---------------------------------------------------------------- book index */

.chapter { margin-bottom: 2.2rem; }

.chapter h2 {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.85rem;
}

/* --------------------------------------------------------------------- prose */

.prose { max-width: var(--measure); }
.prose h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 2.3rem 0 0.7rem;
    letter-spacing: -0.012em;
}
/* Subheadings inside a prose section. Added for the About page's scripture
   section, which needed one level below h2. Deliberately the same size as body
   text and carried by weight alone, so it separates without competing with the
   h2 above it. Without this rule an h3 inherits margin 0 from the reset at the
   top of the file and collides with the paragraph before it. */
.prose h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.75rem 0 0.55rem;
    letter-spacing: -0.008em;
}
.prose p { margin: 0 0 1.05rem; }
.prose a { color: var(--spruce); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* -------------------------------------------------------------------- footer */

.site-footer {
    flex: none;
    border-top: 1px solid var(--rule-soft);
    background: var(--tint);
    padding: 3rem 0 1.6rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--muted);
}

.site-footer a { text-decoration: none; color: var(--muted); }
.site-footer a:hover { color: var(--spruce); }
.site-footer .sep { opacity: 0.45; margin: 0 0.4rem; }

/* Upper tier: what this is on the left, where to go on the right. */
.site-footer .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
}

.footer-brand { max-width: 22rem; display: grid; gap: 0.55rem; }
.footer-brand .wordmark { font-size: 1.02rem; }

.footer-tagline {
    margin: 0;
    font-family: var(--serif);
    color: var(--ink-soft);
}

.footer-fine { margin: 0; font-size: 0.74rem; color: var(--faint); }

.footer-links { display: flex; gap: 3.2rem; }

.footer-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

/* Sized and spaced as the section headings elsewhere, so the footer reads as
   part of the same system rather than as a different designer's work. */
.footer-group h2 {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 0.6rem;
}

.footer-group a { color: var(--ink-soft); }

/* Lower tier: the small print, held apart by a hairline. */
.footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: 2.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule-soft);
}

.site-footer .copy { color: var(--muted); }
.site-footer .build { color: var(--faint); font-size: 0.74rem; }

/* ------------------------------------------------------------------- details */

table.info {
    width: 100%;
    max-width: 40rem;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 0.85rem;
}

table.info th, table.info td {
    text-align: left;
    padding: 0.5rem 0.7rem 0.5rem 0;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}

table.info th { color: var(--muted); font-weight: 500; width: 14rem; }
table.info td { color: var(--ink); }

/* Phones. The wordmark wrapped to three lines at 390px and pushed the masthead to
   three times its height, which is the first thing anybody sees. */
@media (max-width: 30em) {
    .wordmark { font-size: 0.86rem; gap: 0.45rem; }
    .wordmark .sigil { width: 1.75rem; height: 1.75rem; border-radius: 7px; }
    .wordmark .sigil svg { width: 0.95rem; height: 0.95rem; }
    .masthead nav { gap: 0.1rem; font-size: 0.8rem; }
    .masthead nav a { padding: 0.4rem 0.55rem; }
    .masthead nav a svg { display: none; }
    .page { padding: 0 1rem; }
    main.page { padding-top: 1.75rem; }
    .passage { padding: 1.1rem 1.1rem 0.9rem; }
    .how-we-know, .prayer { padding-left: 1.05rem; padding-right: 1.05rem; }
    .questions .answer { margin-left: 0; }
    /* Two columns of links rather than three, so a group's heading and its links
       are never split across a wrap. */
    .footer-links { gap: 2rem 2.6rem; flex-wrap: wrap; }
    .footer-group { min-width: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
    .card:hover, .today:hover { transform: none; }
}

/* Advertising. The height is reserved before the script runs, so a box that
   loads late cannot push the reading down under somebody already in it. One box
   per page, below the prayer on a devotion and below the book cards at home. */
.ad-slot {
    margin: 2.5rem 0 0.5rem;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ad-slot .ad-label {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ad-slot .adsbygoogle {
    min-height: 250px;
}

@media (max-width: 30em) {
    .ad-slot { margin-top: 1.75rem; }
}

/* ------------------------------------------------------------------- bylines */

/* Who wrote this, on the page rather than only in the footer. Set in the sans at
   apparatus size: it should be findable by somebody looking for it and invisible
   to somebody who is reading. */
.byline {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0.7rem 0 0;
}

.byline a {
    color: var(--muted);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.byline a:hover { color: var(--spruce); }

.devotion-header .byline { margin-top: 0.55rem; }

/* --------------------------------------------------- book page introductions */

/* The prose above a book's chapter grid.

   Separated from the list below it by space and nothing else. A rule was tried
   here and had to go: it is drawn at the prose measure while the card grid runs
   the full container, so it stopped two thirds of the way across and landed on
   the chapter heading underneath it, reading as a stray underline on the heading
   rather than as the foot of the paragraph above. */
.book-intro {
    margin: 1.6rem 0 2.8rem;
}

.book-intro p:first-child { font-size: 1.06rem; }
.book-intro p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- home explainer */

/* Prose, not a feature list. A numbered set of bold lead-ins was tried here and
   read like a product page, which is the one register this site cannot afford on
   its front door. */
.explainer { margin-top: 3rem; }
.explainer p { max-width: var(--measure); margin: 0 0 1.05rem; }
.explainer p:last-child { margin-bottom: 0; }
.explainer a { color: var(--spruce); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ------------------------------------------------------------ contact page */

/* Spaced out to defeat harvesters, so it has to be set as a thing to be read
   carefully rather than as a line of running prose. */
.contact-address {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--spruce);
    background: var(--spruce-wash);
    border-radius: 0.5rem;
    padding: 0.85rem 1.1rem;
    margin: 0 0 1.05rem;
    max-width: var(--measure);
    word-break: break-word;
}