/* --------------------------------------------------------------------------
   0. Fonts, served from this repository
   EB Garamond by Georg Duffner and Octavio Pardo, SIL Open Font License 1.1.
   Self hosted so no reader's browser has to call a third party to read the site.
   These are variable font files, which is why one file covers 400 through 600.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/ebgaramond-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("../fonts/ebgaramond-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-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/ebgaramond-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: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/ebgaramond-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-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Gentle King
   Warm parchment and ink. Minimal, quiet, built to be read.
   No build step. No framework. Edit this file directly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Light, the default. Parchment and ink. */
  --paper:        #fbf8f2;
  --paper-sunk:   #f5f0e6;
  --paper-raised: #fffdf9;
  --ink:          #1c1a17;
  --ink-soft:     #4a453d;
  --ink-faint:    #706859;
  --rule:         #e4dccc;
  --rule-strong:  #d3c8b2;
  --gold:         #7d5f34;
  --gold-soft:    #b1925f;
  --gold-wash:    #f3ecdd;
  --shadow:       0 1px 2px rgba(28, 26, 23, .04), 0 8px 28px -18px rgba(28, 26, 23, .28);
  --shadow-lift:  0 2px 4px rgba(28, 26, 23, .05), 0 18px 44px -22px rgba(28, 26, 23, .34);

  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Charter", "Bitstream Charter", "Iowan Old Style", Georgia, Cambria,
                  "Liberation Serif", "DejaVu Serif", "Times New Roman", serif;
  --font-ui:      ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure:      37rem;   /* prose column */
  --wide:         66rem;   /* full container */
  --gutter:       clamp(1.25rem, 5vw, 2.75rem);

  --step:         clamp(1.05rem, .96rem + .38vw, 1.175rem);
  --lh:           1.72;
  --radius:       3px;
  --ease:         cubic-bezier(.22, .61, .36, 1);
}

/* Dark, honoring the system unless the reader has chosen otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #151310;
    --paper-sunk:   #100f0c;
    --paper-raised: #1d1a15;
    --ink:          #ece6d9;
    --ink-soft:     #b7af9f;
    --ink-faint:    #8a8272;
    --rule:         #2e2a22;
    --rule-strong:  #413b30;
    --gold:         #c9a227;
    --gold-soft:    #d8b955;
    --gold-wash:    #221e16;
    --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px -18px rgba(0, 0, 0, .8);
    --shadow-lift:  0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px -22px rgba(0, 0, 0, .9);
  }
}

:root[data-theme="dark"] {
  --paper:        #151310;
  --paper-sunk:   #100f0c;
  --paper-raised: #1d1a15;
  --ink:          #ece6d9;
  --ink-soft:     #b7af9f;
  --ink-faint:    #8a8272;
  --rule:         #2e2a22;
  --rule-strong:  #413b30;
  --gold:         #c9a227;
  --gold-soft:    #d8b955;
  --gold-wash:    #221e16;
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px -18px rgba(0, 0, 0, .8);
  --shadow-lift:  0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px -22px rgba(0, 0, 0, .9);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step);
  line-height: var(--lh);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; }

::selection { background: var(--gold-wash); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: .85rem;
  letter-spacing: .04em;
  text-decoration: none;
}
.skip-link:focus { left: .75rem; top: .75rem; }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Prose columns sit narrow inside the wide container, while grids, callouts
   and quotes are allowed to breathe a little wider. */
main > .section > p,
main > .section > .lede,
main > .section > h2,
main > .section > h3,
main > .section > h4,
main > .section > .eyebrow,
main > .section > ol,
main > .section > ul,
main > .section > dl {
  max-width: var(--measure);
}

main > .section > blockquote,
main > .section > .callout,
main > .section > .pull {
  max-width: calc(var(--measure) + 4rem);
}

.page-body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 9vw, 6rem); }

.section { margin-block: clamp(2.75rem, 7vw, 4.75rem); scroll-margin-top: 6rem; }
.section:first-of-type { margin-top: 0; }
.section:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.5rem); letter-spacing: -.018em; }
h2 { font-size: clamp(1.65rem, 1.35rem + 1.3vw, 2.2rem); margin-top: 0; }
h3 { font-size: clamp(1.18rem, 1.08rem + .42vw, 1.35rem); margin-bottom: .45em; }
h4 { font-size: 1.03rem; letter-spacing: .01em; }

h2 + p, h2 + .lede, h3 + p { margin-top: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.16rem, 1.06rem + .5vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .85rem;
}

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 1.1rem + 1.05vw, 1.75rem);
  line-height: 1.38;
  color: var(--ink);
  text-wrap: balance;
  margin: 2.25rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
}

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-color .18s var(--ease), color .18s var(--ease);
}
a:hover { text-decoration-color: var(--gold); color: var(--gold); }

strong { font-weight: 600; }
em { font-style: italic; }

/* Lists ------------------------------------------------------------------- */


.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 1.3em;
  padding-left: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.9rem;
  margin-bottom: 1.15em;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .06em;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
}
.steps > li > strong { display: block; font-family: var(--font-display); font-size: 1.08em; }

.deflist { margin: 0 0 1.3em; }
.deflist dt {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.5em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
}
.deflist dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.deflist dd { margin: .4em 0 0; color: var(--ink-soft); }

/* Quotations --------------------------------------------------------------- */

blockquote { margin: 2rem 0; }

.scripture {
  padding: 1.35rem 0 1.35rem 1.6rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink);
}
.scripture p { margin-bottom: .55em; }
.scripture cite {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
}

.confession {
  padding: 1.5rem 1.6rem;
  background: var(--gold-wash);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: .97rem;
  line-height: 1.66;
  color: var(--ink-soft);
}
.confession p { margin-bottom: .6em; }
.confession cite {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold);
}

.callout {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .98rem;
}
.callout p { margin-bottom: .7em; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

.rule {
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
  max-width: calc(var(--measure) + 4rem);
}
.rule::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   5. Grids and cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.1rem;
  margin: 1.9rem 0;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
  padding: 1.5rem 1.55rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  position: relative;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--rule-strong); }
.card h3 { margin-bottom: .3rem; }
.card p { font-size: .96rem; color: var(--ink-soft); margin-bottom: .75em; }
.card p:last-child { margin-bottom: 0; }

.card-meta {
  font-family: var(--font-ui) !important;
  font-size: .78rem !important;
  letter-spacing: .05em;
  color: var(--ink-faint) !important;
  margin-bottom: .8em !important;
}


/* --------------------------------------------------------------------------
   6. Buttons and tags
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.35rem;
  margin: .3rem .55rem .3rem 0;
  font-family: var(--font-ui);
  font-size: .87rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.btn:hover {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold-wash);
}

.btn-primary {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.btn-primary:hover {
  color: var(--paper);
  background: var(--gold);
  border-color: var(--gold);
}


.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin-top: 1.6rem; }


/* --------------------------------------------------------------------------
   7. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
@supports not (backdrop-filter: blur(4px)) {
  .site-header { background: var(--paper); }
}
.site-header.is-stuck { border-bottom-color: var(--rule); }

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 1.55rem; height: 1.55rem; color: var(--gold); flex-shrink: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1;
}
.brand:hover .brand-name { color: var(--gold); }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  padding: .5rem .72rem;
  font-family: var(--font-ui);
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-tools { display: flex; align-items: center; gap: .3rem; margin-left: .5rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.icon-btn:hover { color: var(--gold); border-color: var(--rule); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 62rem) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: 4.4rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem var(--gutter) 1.4rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .nav a {
    padding: .85rem .2rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav a:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% -10%, var(--gold-wash), transparent 70%);
  opacity: .9;
  pointer-events: none;
}
.hero .wrap { position: relative; max-width: 76rem; }

.hero-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
}

.hero h1 { margin-bottom: .35em; }
.hero-deck {
  font-size: clamp(1.14rem, 1.03rem + .55vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.hero-note {
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: 1.15rem;
  max-width: 30rem;
}

/* --------------------------------------------------------------------------
   9. Page header, for interior pages
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.75rem, 7vw, 4.75rem) clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { max-width: 20ch; margin-bottom: .3em; }
.page-deck {
  font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. On this page, built by script from the section headings
   -------------------------------------------------------------------------- */

.toc {
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
  padding: 1.25rem 1.4rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  max-width: calc(var(--measure) + 4rem);
}
.toc-title {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
@media (max-width: 40rem) { .toc ol { columns: 1; } }
.toc li { margin-bottom: .38rem; break-inside: avoid; }
.toc a {
  font-family: var(--font-ui);
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.toc a.is-active { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2.25rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 2.5rem;
}
.footer-verse {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 26rem;
  margin: 0 0 .6rem;
}
.footer-verse-ref {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.footer-head {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .85rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .48rem; }
.footer-links a {
  font-family: var(--font-ui);
  font-size: .88rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-links a:hover { color: var(--gold); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-faint);
}
.footer-base p { margin: 0; }
.footer-base a { color: var(--ink-faint); text-decoration: none; }
.footer-base a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   12. Back to top
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 30;
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .22s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--gold); border-color: var(--gold); }
.to-top svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */

@media print {
  :root { --paper: #fff; --ink: #000; --ink-soft: #333; }
  .site-header, .site-footer, .to-top, .toc, .btn-row, .skip-link { display: none !important; }
  body { font-size: 11pt; }
  .section { margin-block: 1.5rem; page-break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .hero::before { display: none; }
}

.footer-fineprint {
  margin: .9rem 0 0;
  font-family: var(--font-ui);
  font-size: .71rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 58rem;
}

/* --------------------------------------------------------------------------
   15. The on-this-page rail, once the screen is wide enough to hold it
   -------------------------------------------------------------------------- */

/* The mount stays invisible until the script fills it. */
main.has-toc > nav[data-toc]:not(.toc) { display: none; }

@media (min-width: 78rem) {
  main.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12.5rem;
    column-gap: clamp(2.5rem, 4vw, 3.5rem);
  }
  /* Everything but the rail belongs in the reading column, rules included. */
  main.has-toc > * { grid-column: 1; }
  main.has-toc > .toc {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: 6.75rem;
    margin: 0;
    padding: .1rem 0 .1rem 1.15rem;
    max-width: none;
    background: none;
    border: 0;
    border-left: 1px solid var(--rule);
    border-radius: 0;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
  }
  main.has-toc > .toc ol { columns: 1; }
  main.has-toc > .toc li { margin-bottom: .55rem; }
  main.has-toc > .toc a { font-size: .82rem; line-height: 1.4; display: inline-block; }
}


/* The ESV prints the covenant name of God in small capitals. So do we. */
.sc {
  font-variant-caps: small-caps;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   16. Screenshots
   -------------------------------------------------------------------------- */

.shot { margin: 2.25rem 0; }
.shot > a {
  display: block;
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper-sunk);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.shot > a:hover { border-color: var(--gold); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  margin-top: .8rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: var(--measure);
}
.hero-shot { margin: 0; }

/* --------------------------------------------------------------------------
   17. Counts
   A row of headline numbers, not a chart. These count unlike things, so there
   is no shared scale to plot them against. Values wear ink, never an accent,
   and the figures are tabular so the column of digits lines up.
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem;
  margin: 2rem 0;
}
/* Each tile carries its own border. A shared grid background would show through
   as a blank slab whenever the last row came up short, which it does at most
   widths. */
.stat {
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-label {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-ui);
  font-size: .765rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   18. The download block and the plain spec list
   -------------------------------------------------------------------------- */

.get {
  margin: 2.5rem 0;
  padding: 1.7rem 1.8rem 1.55rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: calc(var(--measure) + 4rem);
}
.get h3 { margin-bottom: .3rem; }
.get-meta {
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
  margin: 0 0 1.05rem;
}
.get > p { font-size: .97rem; color: var(--ink-soft); }
.get .btn-row { margin-top: 1.3rem; }

.spec {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .62rem 1.5rem;
  margin: 1.75rem 0;
  max-width: calc(var(--measure) + 4rem);
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.55;
}
.spec dt { color: var(--ink-faint); }
.spec dd { margin: 0; color: var(--ink); }
@media (max-width: 34rem) {
  .spec { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .spec dt { margin-top: .85rem; }
  .spec dt:first-child { margin-top: 0; }
}

/* An address split across data attributes, joined by the script. */
.mail { white-space: nowrap; }

/* Every screenshot opens full size, so say so once here rather than in each caption. */
.shot > a + figcaption::after {
  content: " Click it for the full size image.";
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   19. A page that leads with its own mark
   Two files, one drawn for parchment and one for the dark theme, swapped by
   the same rules the theme toggle uses everywhere else on the site.
   -------------------------------------------------------------------------- */

.page-head-logo {
  padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.page-head-logo .page-deck { margin-inline: auto; }
/* .page-head h1 is capped at 20ch to keep a typeset title from running long.
   A mark is an image, not a line of text, so that cap has to come off or the
   image centres inside a box that is itself off to the left. */
.page-head-logo .brandmark { max-width: none; }

.brandmark {
  margin: 0 0 clamp(1.25rem, 3vw, 1.9rem);
  line-height: 0;
}
.brandmark img {
  width: clamp(13rem, 26vw, 19rem);
  height: auto;
  margin-inline: auto;
}
.brandmark-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brandmark-light { display: none; }
  :root:not([data-theme="light"]) .brandmark-dark { display: block; }
}
:root[data-theme="dark"] .brandmark-light { display: none; }
:root[data-theme="dark"] .brandmark-dark { display: block; }