/* decalogue.ai: one-page static site.
   The page opens on a light theme (warm white paper, basalt ink, burnt orange accent), moves through one
   burnt orange section for Sinai (the fire on the mountain, Exod. 19:18), and finishes on a dark theme.
   The accent is #A8400D on light backgrounds because the brief's #BF5700 reaches only about 3.9:1
   on the paper color, below the 4.5:1 that WCAG AA needs for small text. Change --accent to try it. */

:root {
  color-scheme: light;

  /* light theme (default) */
  --paper: #FCFBF8;
  --paper-alt: #F4F2ED;
  --card: #FFFFFE;
  --card-head: #F4F2ED;
  --ink: #26302F;
  --muted: #55605D;
  --accent: #A8400D;
  --on-accent: #FFFFFF;
  --tint: #F2DFD2;
  --line: rgba(38, 48, 47, 0.2);
  --focus: #A8400D;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h: 4.25rem;
}

.theme-light {
  --paper: #FCFBF8;
  --paper-alt: #F4F2ED;
  --card: #FFFFFE;
  --card-head: #F4F2ED;
  --ink: #26302F;
  --muted: #55605D;
  --accent: #A8400D;
  --on-accent: #FFFFFF;
  --tint: #F2DFD2;
  --line: rgba(38, 48, 47, 0.2);
  --focus: #A8400D;
}

.theme-dark {
  --paper: #1A2120;
  --paper-alt: #212A29;
  --card: #26302F;
  --card-head: #303B3A;
  --ink: #EDEAE1;
  --muted: #A7B0AD;
  --accent: #E8863F;
  --on-accent: #1A2120;
  --tint: #2E2420;
  --line: rgba(237, 234, 225, 0.2);
  --focus: #E8863F;
}

.theme-accent {
  --paper: #A8400D;
  --paper-alt: #A8400D;
  --card: #8F3509;
  --card-head: #8F3509;
  --ink: #FFFFFF;
  --muted: #FFE9DC;
  --accent: #FFE9DC;
  --on-accent: #A8400D;
  --tint: #8F3509;
  --line: rgba(255, 255, 255, 0.4);
  --focus: #FFFFFF;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.7;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  padding: 0.6rem 1rem;
  text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

/* ---------- Header (stays on the light theme) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

.mark { display: block; flex: none; }
.mark .m-l { fill: var(--accent); }
.mark .m-r { fill: var(--ink); }

.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.045em;
  line-height: 1;
}
.wordmark .ai { color: var(--accent); font-weight: 400; }

.nav-wide ul, .nav-menu ul, .site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-wide ul { display: flex; gap: 1.5rem; }

.nav-wide a, .nav-menu a {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-wide a:hover, .nav-menu a:hover { border-bottom-color: var(--accent); }

.nav-menu { display: none; position: relative; }
.nav-menu summary {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: " \25BE"; }
.nav-menu[open] summary::after { content: " \25B4"; }
.nav-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 12rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.nav-menu li + li { border-top: 1px solid var(--line); }
.nav-menu a { display: block; padding: 0.6rem 0; border-bottom: 0; }

/* Seven items need about 1,070px on one line, so the compact menu takes
   over below 1100px rather than letting labels wrap. */
@media (max-width: 1100px) {
  .nav-wide { display: none; }
  .nav-menu { display: block; }
}

/* ---------- Hero (light) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
/* Julius Schnorr von Carolsfeld's engraving of Moses bringing the tablets to
   Israel (The Bible in Pictures; public domain), in the right half of the
   opening section. The composition is baked into the image: Moses and the
   tablets at the centre, the sky above him and the outer edges already
   feathered to white, so multiplying it onto the paper leaves no edge. The
   section needs its own paper background for the multiply to work. */
.hero { background: var(--paper); }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 44%;
  right: 0;
  top: -3rem;
  bottom: 3.25rem;
  background: url("../img/schnorr-hero.webp") center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.62;
}
.hero-credit {
  position: absolute;
  left: 44%;
  right: 0;
  bottom: 1.25rem;
  margin: 0;
  padding: 0 1.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
/* Narrow screens: the text runs full width, so the engraving sits faintly
   behind it and the credit follows the introduction. */
@media (max-width: 959px) {
  .hero::before { left: 0; top: 0; bottom: 0; opacity: 0.12; }
  .hero-credit { position: static; margin: 1.5rem 0 0; padding: 0; text-align: left; }
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}

.hero h1 {
  margin: 0 0 1.75rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero h1 em { display: block; font-style: italic; font-weight: 400; color: var(--accent); }

.intro {
  margin: 0 0 2.25rem;
  max-width: 40rem;
  font-size: clamp(1.1875rem, 2.2vw, 1.375rem);
  line-height: 1.6;
}


/* Section art: the trees in Eden, the tablets at Sinai, the cross beside
   Christ. Each image is an alpha mask (white, with the drawing in the alpha
   channel; see tools/make-art.py), painted with the section's accent so the
   one file follows whichever theme it sits in. */
.art {
  display: block;
  width: 100%;
  background-color: var(--accent);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.art-tree-life { aspect-ratio: 900 / 684; -webkit-mask-image: url("../img/tree-of-life.png"); mask-image: url("../img/tree-of-life.png"); }
.art-tree-knowledge { aspect-ratio: 900 / 684; -webkit-mask-image: url("../img/tree-good-evil.png"); mask-image: url("../img/tree-good-evil.png"); }
.art-tablets { aspect-ratio: 700 / 669; -webkit-mask-image: url("../img/tablets.png"); mask-image: url("../img/tablets.png"); }
.art-cross { aspect-ratio: 562 / 690; -webkit-mask-image: url("../img/cross.png"); mask-image: url("../img/cross.png"); }

.trees-figure,
.tablets-figure { margin: 2rem 0 0; }
.trees-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 22rem;
  text-align: center;
}
.trees-pair p { margin: 0; }
.trees-pair .art { margin-bottom: 0.75rem; }
.t-name { font-family: var(--serif); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.t-word { font-family: var(--serif); font-size: 0.8125rem; font-style: italic; }
.t-ref { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); }

.tablets-figure { text-align: center; }
.art-tablets { max-width: 12rem; margin-inline: auto; }
.aside .art-cross { width: 5.5rem; margin: 0 auto 1.5rem; }

/* ---------- Sections ---------- */

.section {
  --bg: var(--paper);
  background: var(--bg);
  color: var(--ink);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--line);
}
.section.alt { --bg: var(--paper-alt); }

.section-head { margin-bottom: 2rem; }

.section h1,
.section h2 {
  margin: 0;
  max-width: 24ch;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.prose { max-width: 65ch; }
.prose p { margin: 0 0 1.35rem; }
.prose p:last-child { margin-bottom: 0; }
.prose + .sources { margin-top: 2rem; }

/* Layout variations, wide screens only; everything stacks in one column on small screens. */

@media (min-width: 960px) {
  .layout-split .container,
  .layout-split-rev .container {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: 4.5rem;
    align-items: start;
  }
  .layout-split-rev .container { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
  .layout-split-rev .section-head { order: 2; }

  .layout-split .section-head,
  .layout-split-rev .section-head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    margin-bottom: 0;
  }
  .layout-split h1, .layout-split h2, .layout-split-rev h2 {
    font-size: clamp(1.75rem, 2.8vw, 2.4rem);
    max-width: none;
  }

  .layout-aside .section-body {
    display: grid;
    grid-template-columns: minmax(0, 65ch) minmax(0, 25rem);
    justify-content: space-between;
    gap: 4rem;
    align-items: start;
  }
  .layout-aside .aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    padding: 1.75rem 1.75rem 2rem;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
}

.layout-centered .section-head { text-align: center; }
.layout-centered h2 { margin-inline: auto; max-width: 20ch; }
.layout-centered .prose { margin-inline: auto; }

.layout-card .section-head { text-align: center; }
.layout-card h2 { margin-inline: auto; max-width: 22ch; }
.layout-card .prose {
  margin-inline: auto;
  max-width: 38rem;
  padding: 2rem 2.25rem;
  text-align: center;
  font-size: 1.1875rem;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
}

.layout-aside .aside .prose { margin-bottom: 1.75rem; font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 959px) {
  .layout-aside .aside { margin-top: 2rem; }
}

/* ---------- Timeline ---------- */

.timeline {
  list-style: none;
  margin: 0 0 0 0.5rem;
  padding: 0 0 0 2rem;
  border-left: 3px solid var(--accent);
}
.timeline li {
  position: relative;
  padding: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 8.5px);
  top: 0.4rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper-alt);
  border: 3px solid var(--accent);
}
.timeline strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Table ---------- */

.layout-wide .section-head { margin-bottom: 1.5rem; }
.layout-wide .prose { margin-bottom: 2.5rem; }

.table-wrap { width: 100%; }

.law-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  background: var(--card);
  border: 1px solid var(--line);
}
.law-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  background: var(--card-head);
  border-bottom: 2px solid var(--ink);
}
.law-table thead th.ai { background: var(--accent); color: var(--on-accent); border-bottom-color: var(--accent); }

.law-table tbody th,
.law-table tbody td {
  text-align: left;
  vertical-align: top;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}
.law-table tbody th { font-weight: 500; width: 13%; }
.law-table tbody th strong { color: var(--accent); margin-right: 0.15em; }
.law-table td:nth-child(2) { width: 9%; }
/* Duties and sins quote the Larger Catechism, so they run long; the design
   column is the widest because it carries the application. */
.law-table td:nth-child(3) { width: 20%; }
.law-table td:nth-child(4) { width: 19%; }
.law-table td.ai {
  background: var(--tint);
  /* Body text matches the rest of the table; the tint, the larger size and the
     bold lead-in carry the emphasis instead of a second colour. */
  color: var(--ink);
  font-size: 1.0625rem;
}
.law-table td.ai strong { font-weight: 700; }

/* On the dark table the design column is set on paper, so the site's own
   application reads first. The light-theme values are restated here because
   the cell sits inside .theme-dark; #A8400D is the light accent, and #E8863F
   would fall below AA on the paper. */
.theme-dark .law-table td.ai {
  --accent: #A8400D;
  background: #FCFBF8;
  color: #26302F;
}
.theme-dark .law-table td.ai strong { color: var(--accent); }
.theme-dark .law-table td.ai a { color: var(--accent); }
.law-table tbody tr:last-child > * { border-bottom: 0; }

/* The two tables of the law (Larger Catechism 98): each group opens with a
   heading row naming its sum, love to God and love to neighbor. */
.law-table tr.law-divide th {
  padding: 1.1rem 1rem 0.9rem;
  background: var(--paper-alt);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
/* The thead already rules off the first group. */
.law-table thead + tbody.law-group tr.law-divide th { border-top: 0; }
.ld-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin-right: 0.75rem;
  color: var(--accent);
}
.ld-ref {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* On the dark table the group dividers are set on paper, like the design
   column: the group name in burnt orange, its reference in muted ink. */
.theme-dark .law-table tr.law-divide th { background: #FCFBF8; border-top-color: #A8400D; border-bottom-color: rgba(38, 48, 47, 0.2); }
.theme-dark .law-table tr.law-divide .ld-name { color: #A8400D; }
.theme-dark .law-table tr.law-divide .ld-ref { color: #55605D; }
@media screen and (max-width: 860px) {
  .theme-dark .law-table tr.law-divide th { padding: 0.8rem 1rem; border-radius: 6px; }
}

@media screen and (max-width: 860px) {
  .law-table, .law-table tbody, .law-table tr, .law-table th, .law-table td { display: block; width: auto; }
  .law-table { background: none; border: 0; }
  .law-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .law-table tbody tr {
    margin-bottom: 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
  }
  .law-table tbody th {
    width: auto;
    font-size: 1.0625rem;
    font-weight: 600;
    padding: 0.9rem 1rem;
    background: var(--card-head);
    border-bottom: 1px solid var(--line);
  }
  .law-table tbody td {
    width: auto !important;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .law-table tbody td:last-child { border-bottom: 0; }
  .law-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .law-table td.ai::before { color: var(--accent); }
  .law-table tr.law-divide {
    margin: 2rem 0 1rem;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .law-table thead + tbody.law-group tr.law-divide { margin-top: 0; }
  .law-table tr.law-divide th {
    padding: 0.75rem 0 0;
    background: none;
    border-bottom: 0;
  }
  .ld-name { display: block; margin: 0 0 0.25rem; }
}

/* A source credit under the wide table. Smaller and muted so it reads as
   attribution rather than body copy, and set in the sans like the table. */
.credit {
  max-width: none;
  margin: 1.25rem 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Sources ---------- */

.sources { max-width: 65ch; padding-left: 1.25rem; margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.sources li { margin-bottom: 0.9rem; padding-left: 0.25rem; }

/* Future work: each item marked with an accent dot, the filled node of the
   path figure at text size. */
.work-list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.work-list li { position: relative; margin: 0 0 1.1rem; padding-left: 1.75rem; }
.work-list li:last-child { margin-bottom: 0; }
.work-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: calc(0.5lh - 0.35rem);
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 404 ---------- */

.notfound { padding: clamp(4rem, 12vw, 9rem) 0; }
.notfound h1 {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.notfound .prose { margin-bottom: 2rem; }

/* ---------- Footer (deepest dark) ---------- */

.site-footer {
  --accent: #E8863F;
  --ink: #EDEAE1;
  --muted: #A7B0AD;
  --focus: #E8863F;
  background: #121817;
  color: #EDEAE1;
  padding: 3.5rem 0 2.5rem;
  font-family: var(--sans);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.site-footer .brand { color: #EDEAE1; }
.site-footer .tagline {
  margin: 1rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: #EDEAE1;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; max-width: 26rem; }
.site-footer nav a {
  font-size: 0.9375rem;
  color: #EDEAE1;
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 234, 225, 0.35);
}
.site-footer nav a:hover { border-bottom-color: #E8863F; color: #E8863F; }
.copyright {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(237, 234, 225, 0.2);
  font-size: 0.875rem;
  color: #A7B0AD;
}

/* ---------- Essays ---------- */

/* One reading column for the index and each essay: about 70 characters of
   body text, the measure book typography settles on for long reading. */
.essay-col { max-width: 44rem; }

.essay-index,
.essay {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.essay-index h1,
.essay-header h1 {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.essay-index-intro { margin: 0 0 2.5rem; color: var(--muted); }
.essay-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.essay-card { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.essay-card h2 {
  margin: 0.35rem 0 0.35rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.2;
}
.essay-card h2 a { color: var(--ink); text-decoration: none; }
.essay-card h2 a:hover { color: var(--accent); }
.essay-summary { margin: 0.5rem 0 0; }

.essay-meta,
.essay-byline {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}
.essay-author { color: var(--ink); font-weight: 600; }
.essay-dek {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.4;
  color: var(--muted);
}
.essay-card .essay-dek { margin: 0; font-size: 1.125rem; }

.essay-header { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

.essay-body { font-size: 1.1875rem; line-height: 1.75; }
.essay-body p { margin: 0 0 1.4rem; }
.essay-body h2 {
  margin: 2.75rem 0 1rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--accent);
}
.essay-body .footnote-reference { font-family: var(--sans); font-size: 0.7em; line-height: 0; }
.essay-body .footnote-reference a { text-decoration: none; padding: 0 0.1em; }
.essay-body .sdg { margin-top: 2rem; font-style: italic; color: var(--muted); }

/* Notes: smaller, in the sans, ruled off from the essay. Zola writes them as
   an <hr> followed by ol.footnotes-list. */
.essay-body hr { margin: 3rem 0 1.25rem; border: 0; border-top: 1px solid var(--line); }
.essay-body .footnotes-list {
  margin: 0;
  padding-left: 1.25rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}
.essay-body .footnotes-list::before {
  content: "Notes";
  display: block;
  margin: 0 0 0.75rem -1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.essay-body .footnotes-list li { margin-bottom: 0.6rem; }
.essay-body .footnotes-list p { margin: 0; }

.essay-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 0.9375rem; }
.essay-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.essay-pager:empty { display: none; }
.essay-pager a { display: block; color: var(--ink); text-decoration: none; font-family: var(--serif); font-weight: 600; }
.essay-pager a span { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.essay-next { grid-column: 2; text-align: right; }

/* Pull quotes: a sentence lifted from the paragraph that follows, set large
   with an accent rule, as the essays carried them on Substack. */
.essay-body .pullquote {
  margin: 2.25rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--accent);
}
.essay-body .pullquote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  line-height: 1.4;
  color: var(--ink);
}

/* Header image, Substack-style: full column width between the byline and the
   first paragraph. The header's rule moves below the image. */
.essay-hero { margin-top: 0; margin-bottom: 2.5rem; }
.essay-hero img { display: block; width: 100%; height: auto; border-radius: 4px; }
.essay-header:has(+ .essay-hero) { border-bottom: 0; padding-bottom: 0; margin-bottom: 2rem; }
.essay-provenance { margin: 0 0 1.5rem; font-style: italic; color: var(--muted); }

/* Catechism questions and answers quoted in an essay. */
.essay-body .catechism { margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 3px solid var(--accent); }
.essay-body .catechism p { margin: 0 0 0.75rem; }
.essay-body .catechism p:last-child { margin-bottom: 0; }
.essay-body .catechism .cq { margin-bottom: 0.25rem; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--accent); }

/* ---------- Pages ---------- */

/* The heading band that opens a page made of several sections. */
.page-head {
  background: var(--paper-alt);
  color: var(--ink);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.25rem, 5vw, 3.5rem);
}
.page-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.page-intro { max-width: 65ch; margin: 1.25rem 0 0; font-size: 1.1875rem; color: var(--muted); }

/* Home: the guide to the site's pages. */
.start-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 2rem;
}
.start-grid li { position: relative; padding-top: 1rem; border-top: 3px solid var(--line); }
/* The card marked "Start here" carries the accent, wherever it sits. */
.start-grid li:has(.start-label) { border-top-color: var(--accent); }
.start-grid a { display: block; color: var(--ink); text-decoration: none; }
.start-grid a strong { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; }
.start-grid a:hover strong { color: var(--accent); }
.start-grid p { margin: 0.4rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--muted); }
/* "Start here" sits above its card's top rule, outside the card. */
.start-label {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.45rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* A table row's link to its commandment study. */
.law-table .row-study {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
}


/* ---------- The table on paper: colour ---------- */
/* Basalt header band, the commandment number set large in the accent,
   the attribute as an accent tag, a warm stripe on alternate rows, and the
   design column's lead-in in the accent. */
.theme-light .law-table { border-color: rgba(38, 48, 47, 0.18); box-shadow: 0 12px 32px rgba(38, 48, 47, 0.06); }
.theme-light .law-table thead th { background: #26302F; color: #FCFBF8; border-bottom: 0; }
.theme-light .law-table thead th.ai { background: var(--accent); color: #fff; }
.theme-light .law-table tbody th strong {
  display: block;
  margin: 0 0 0.15rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}
.theme-light .law-table tbody th { font-weight: 600; }
.theme-light .law-table td:nth-child(2) {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--accent);
}
.theme-light .law-table tbody tr:not(.law-divide):nth-child(odd) > :not(.ai) { background: #F7F4EE; }
.theme-light .law-table td.ai { background: #FBEEE5; border-left: 3px solid var(--accent); }
.theme-light .law-table td.ai strong { color: var(--accent); }
.theme-light .law-table tr.law-divide th { background: #F1EBE1; border-top: 3px solid var(--accent); }
@media screen and (max-width: 860px) {
  .theme-light .law-table tbody tr:not(.law-divide):nth-child(odd) > :not(.ai) { background: transparent; }
  .theme-light .law-table tbody th strong { display: inline; font-size: 1.25rem; margin-right: 0.3rem; }
  .theme-light .law-table tbody th { background: #26302F !important; color: #FCFBF8; }
  .theme-light .law-table tbody th strong { color: #E8863F; }
  .theme-light .law-table tbody th a.row-study { color: #E8863F; }
  .theme-light .law-table tr.law-divide th { background: #F1EBE1 !important; color: var(--ink); }
  .theme-light .law-table tr.law-divide th .ld-name { color: var(--accent); }
}

/* The reading guide just above the table. */
.table-guide { max-width: 72ch; margin: 0 0 2rem; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Each commandment row has an address (#c1 to #c10); the row a link lands on
   is outlined in the accent, clear of the sticky header. */
.law-table tbody tr[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.law-table tbody tr:target > * { box-shadow: inset 0 3px 0 var(--accent), inset 0 -3px 0 var(--accent); }

/* ---------- Print: the table ---------- */
@media print {
  @page { size: landscape; margin: 1.2cm; }
  .site-header, .site-footer, .skip, .nav-menu, .row-study { display: none !important; }
  body { background: #fff; font-size: 10pt; }
  .section { padding: 0 0 1rem; border: 0; }
  .theme-dark { --paper: #fff; --paper-alt: #fff; --card: #fff; --ink: #26302F; --muted: #55605D; --accent: #A8400D; --line: rgba(38, 48, 47, 0.25); }
  .theme-dark, .theme-light { background: #fff !important; color: #26302F; }
  .law-table { box-shadow: none !important; font-size: 8pt; line-height: 1.4; }
  .law-table td.ai { font-size: 8.5pt !important; }
  .law-table tbody th, .law-table tbody td { padding: 0.45rem 0.55rem; }
  .theme-light .law-table tbody th strong { font-size: 14pt; }
  .container { width: 100%; }
  .law-table thead { display: table-header-group; }
  .law-table tr { break-inside: avoid; page-break-inside: avoid; }
  .law-table tr.law-divide { break-after: avoid; page-break-after: avoid; }
  .theme-light .law-table thead th, .theme-light .law-table thead th.ai,
  .theme-light .law-table td.ai, .theme-light .law-table tr.law-divide th,
  .theme-light .law-table tbody tr > * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .theme-light .law-table tbody tr:not(.law-divide):nth-child(odd) > :not(.ai) { background: #fff; }
  a { color: inherit; text-decoration: none; }
}

/* Home: the guide follows the opening section closely. */
#start { padding-top: clamp(2.5rem, 5vw, 3.75rem); }
.essay-index-status {
  margin: -1.5rem 0 2.5rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Footer logo: the same burnt orange as the header's. Only the right half and
   the wordmark's "decalogue" turn light against the dark footer. */
.site-footer .mark .m-l { fill: #A8400D; }
.site-footer .wordmark .ai { color: #A8400D; }