/* Base styles shared by every page: reset, typography, the manuscript
   ornaments, navigation, footer, and the simple prose layout used by the
   404 and any stub pages. Page-specific styles live in their own sheets
   (home.css, episodes.css). Carried over from the sibling site so the two
   read as kin; the footer is reworked for the podcast. */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-padding-top keeps anchor jumps (#about, #listen) clear of the
   sticky header. It matches the header height, generous enough for the
   slightly taller stacked header on narrow screens. */
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
/* Fluid root sizing: the whole design is set in rem, so scaling the root
   mimics browser zoom. 100% at a 420px viewport, rising to 150% at 1920px
   and capped at both ends. Media-query breakpoints and hairline rules
   stay in px deliberately. */
html {
  font-size: clamp(1rem, .86rem + .533vw, 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  background: var(--vellum);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.65;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }

.smallcaps {
  font-variant: small-caps;
  letter-spacing: .18em;
  font-weight: 500;
}
/* Visually hidden but available to screen readers: used to flag links
   that open in a new tab without cluttering the manuscript surface. */
.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;
}
.rubric-label {
  color: var(--rubric);
  font-size: .95rem;
}

/* ---------- Manuscript ornaments ---------- */
/* One fleur-de-lis silhouette, kept as a mask so each use tints it with a
   background colour (gold on vellum, bright gold on lapis). */
:root {
  --fleur-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 C44 11 39 22 39 34 C39 46 44 53 45 64 L55 64 C56 53 61 46 61 34 C61 22 56 11 50 4 Z M44 66.5 C37.5 62 34 54 33.5 44 C33 35.5 31 29.5 26.5 26 C21 21.5 14.5 20.5 11.5 26.5 C9 31.5 9.5 39 12.5 46.5 C14.5 52 18.5 58 23.5 56.5 C27 55 26.5 50.5 23.5 49 C26.5 52.5 29.5 57 33 61 C35.5 63.5 39.5 65 44 66.5 Z M56 66.5 C60.5 65 64.5 63.5 67 61 C70.5 57 73.5 52.5 76.5 49 C73.5 50.5 73 55 76.5 56.5 C81.5 58 85.5 52 87.5 46.5 C90.5 39 91 31.5 88.5 26.5 C85.5 20.5 79 21.5 73.5 26 C69 29.5 67 35.5 66.5 44 C66 54 62.5 62 56 66.5 Z M30 60 L30 68 L70 68 L70 60 Z M40 63 C36 71 33 80 31 89 C36 86 40 82 42 76 C44 83 46 89 50 96 C54 89 56 83 58 76 C60 82 64 86 69 89 C67 80 64 71 60 63 Z'/%3E%3C/svg%3E");
}
.fleuron {
  display: inline-block;
  width: .9em;
  height: .9em;
  background: currentColor;
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}
/* Rubric labels are bracketed by small gold fleurons. */
.rubric-label::before,
.rubric-label::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  background: var(--gold);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
  vertical-align: -.1em;
}
.rubric-label::before { margin-right: .65em; }
.rubric-label::after { margin-left: .5em; }
/* A short gold rule broken by a central fleuron, for sitting beneath a
   page or section heading. */
.fleuron-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  max-width: 13.75rem;
  margin: 1.375rem auto 0;
  color: var(--gold);
}
.fleuron-rule .fleuron { font-size: 1.05rem; }
.fleuron-rule::before,
.fleuron-rule::after {
  content: "";
  flex: 1;
  height: 1px;
}
.fleuron-rule::before { background: linear-gradient(to left, currentColor, transparent); }
.fleuron-rule::after { background: linear-gradient(to right, currentColor, transparent); }

/* A framed plate: artwork bordered like a plate in a manuscript, with a
   double gold rule. Shared by the home page sections. */
.plate {
  border: 1px solid var(--gold);
  padding: .5rem;
  background: var(--vellum);
  position: relative;
}
.plate::after {
  content: "";
  position: absolute;
  inset: .25rem;
  border: 1px solid rgba(168, 129, 47, .35);
  pointer-events: none;
}
.plate img { display: block; width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--lapis-deep);
  color: var(--vellum);
  padding: .625rem 1.125rem;
}
.skip-link:focus { left: 0; }

/* ---------- Navigation: links split around a central mark ---------- */
/* The header stays in reach down the long home scroll and the long
   archive: sticky, so "Listen" and the section links never scroll away.
   It begins in normal flow above the hero, so the hero's full-bleed lapis
   is undisturbed on load; it only pins once the page scrolls under it. */
header.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--vellum);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav {
  max-width: 72.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 6rem;
}
.nav ul {
  list-style: none;
  display: flex;
  gap: clamp(.875rem, 2.6vw, 2.125rem);
  font-size: .95rem;
}
.nav ul.left { justify-content: flex-end; }
.nav ul.right { justify-content: flex-start; }
.nav ul a {
  font-variant: small-caps;
  letter-spacing: .16em;
  padding: .5rem .4rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}
.nav ul a:hover { border-bottom-color: var(--gold); color: var(--lapis); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--rubric); }
.monogram {
  width: 4rem; height: 4rem;
  border: 1.5px solid var(--gold);
  display: block;
  position: relative;
  background: var(--vellum);
}
.monogram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.monogram::after {
  content: "";
  position: absolute; inset: .25rem;
  border: 1px solid rgba(168, 129, 47, .45);
}
@media (max-width: 820px) {
  /* Keep the sticky bar slim on phones: lay the whole nav out as one
     centred wrapping row (links split around the small monogram, the
     same split as the desktop grid) instead of stacking it into three
     rows. */
  .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .1rem .75rem;
    padding: .4rem 1rem;
    min-height: 0;
  }
  .monogram { width: 2.5rem; height: 2.5rem; }
  .nav ul { flex-wrap: wrap; justify-content: center !important; gap: .4rem .9rem; }
  .nav ul a { padding: .4rem .3rem; }
}

/* ---------- Plain prose pages (404, stubs) ---------- */
.page {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}
.page .rubric-label { margin-bottom: .875rem; }
.page h1 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 1.75rem;
}
.page p { margin-bottom: 1.125rem; color: var(--ink-soft); }
.page a { color: var(--lapis); border-bottom: 1px solid var(--gold); }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--lapis-deep);
  color: rgba(245, 239, 226, .85);
  padding: 3.5rem 1.5rem 2.5rem;
}
.foot-inner {
  max-width: 72.5rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem 2rem;
  align-items: start;
}
@media (max-width: 720px) {
  .foot-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
}
.site-footer .wordmark {
  font-family: 'Cardo', serif;
  font-size: 1.6rem;
  color: var(--vellum);
  line-height: 1.2;
}
.site-footer .wordmark span { color: var(--gold-bright); }
.foot-tie {
  margin-top: .625rem;
  font-style: italic;
  font-size: 1rem;
  color: rgba(245, 239, 226, .7);
}
.foot-tie a { color: var(--gold-bright); border-bottom: 1px solid rgba(201, 162, 39, .5); }
.foot-tie a:hover { border-bottom-color: var(--gold-bright); }
/* Contact, under the brand block. Shows real links once the pastor
   provides them (config [extra]); until then a quiet placeholder so the
   "would love to hear from you" invitation has somewhere to land. */
.foot-contact {
  margin-top: .875rem;
  font-size: 1rem;
}
.foot-contact a {
  display: inline-block;
  padding: .15rem 0;
  color: var(--gold-bright);
  font-variant: small-caps;
  letter-spacing: .12em;
  border-bottom: 1px solid rgba(201, 162, 39, .5);
  transition: border-color .25s;
}
.foot-contact a + a { margin-left: 1.125rem; }
.foot-contact a:hover { border-bottom-color: var(--gold-bright); }
.foot-contact-todo {
  font-style: italic;
  color: rgba(245, 239, 226, .55);
}
.foot-head {
  color: var(--gold-bright);
  font-size: .8rem;
  margin-bottom: .875rem;
}
.site-footer .foot-listen ul,
.site-footer .foot-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: 1rem;
}
@media (max-width: 720px) {
  .site-footer .foot-listen ul,
  .site-footer .foot-nav ul { align-items: center; }
}
.site-footer .foot-listen a,
.site-footer .foot-nav a {
  display: inline-block;
  padding: .2rem 0;
  font-variant: small-caps;
  letter-spacing: .12em;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.site-footer .foot-listen a:hover,
.site-footer .foot-nav a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.site-footer .verse {
  grid-column: 1 / -1;
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 239, 226, .18);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(245, 239, 226, .8);
  text-align: center;
}
/* A bright gold fleuron between the footer rule and the verse. */
.site-footer .verse::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto .875rem;
  background: var(--gold-bright);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}