@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Montserrat:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap");

:root {
  /* Both palettes are real, so say so: this is what paints the canvas
     before the CSS lands and what styles the scrollbars and any form
     control. Without it a dark reader gets a white flash and light
     scrollbars framing a dark page. */
  color-scheme: light dark;

  --navy: #082858;
  --blue: #2858b8;
  --blue-light: #88c8d8;
  --red: #a81818;
  --ink: #1c1c19;
  --ink-secondary: #3b3b36;
  --ink-muted: #5c5c54;
  --paper: #fffefb;
  --tint: #eef7fa;
  --hairline-soft: #cfe0ea;

  /* The draft banner is the one filled block in the stylesheet, so it
     needs a background and an ink of its own. --red cannot serve: it is
     an ink colour, picked to be legible *on* paper, and in dark mode it
     lightens to stay that way. White on the lightened red measured
     2.3:1, under the 4.5:1 floor, on the one banner whose whole job is
     to stop an unapproved proof being handed out. */
  --draft-bg: #a81818;
  --draft-ink: #ffffff;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-label: "Montserrat", system-ui, sans-serif;

  --measure: 34rem;
  --track-label: 0.13em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #b8d4f0;
    --blue: #8fb8f0;
    --blue-light: #4a7ba8;
    --red: #ff8a8a;
    --ink: #e8e6e0;
    --ink-secondary: #c4c2bb;
    --ink-muted: #9a978f;
    --paper: #14161a;
    --tint: #1c2129;
    --hairline-soft: #2b3542;

    /* Deep red rather than the lightened ink red: on a dark page a
       #ff8a8a bar is the brightest thing on the screen, and this is
       read on a phone in a pew. 7.9:1. */
    --draft-bg: #8c1414;
    --draft-ink: #ffe4e4;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 46rem; margin: 0 auto; padding-block: 2rem 4rem; padding-inline: 1.25rem; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

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

.masthead {
  border-bottom: 2px solid var(--navy);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
}
.masthead .church {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}
.masthead .church a { color: inherit; text-decoration: none; }
.masthead .church a:hover { text-decoration: underline; }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.05;
  color: var(--navy);
  margin: 0.5rem 0 0.25rem;
}

.meta {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.meta span + span::before { content: " · "; }

.theme {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--blue);
  margin: 1.25rem 0 0;
}

/* --- sections ---------------------------------------------------- */

h2.section {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy);
  padding: 0.4rem 0.7rem;
  margin: 2.5rem 0 1rem;
  border-radius: 2px;
}

h3.subhead {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
  margin: 1.5rem 0 0.35rem;
}

p { margin: 0 0 0.9rem; max-width: var(--measure); }

blockquote.scripture {
  margin: 1.25rem 0;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--blue-light);
  color: var(--ink);
  max-width: var(--measure);
}
blockquote.scripture p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1rem; padding-left: 1.2rem; max-width: var(--measure); }
li { margin-bottom: 0.35rem; }

/* --- the Sunday page --------------------------------------------- */

.lawgospel { margin: 1.5rem 0; }
.lawgospel > div { padding-left: 1.1rem; margin-bottom: 1rem; max-width: var(--measure); }
.lawgospel .law { border-left: 3px solid var(--red); }
.lawgospel .gospel { border-left: 3px solid var(--blue); }
.lawgospel .label {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
}
.lawgospel .law .label { color: var(--red); }
.lawgospel .gospel .label { color: var(--blue); }

.level { margin-bottom: 2rem; }
.level > h3 {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline-soft);
  padding-bottom: 0.35rem;
  margin: 0 0 0.75rem;
}

.pieces { list-style: none; margin: 0; padding: 0; max-width: none; }
.pieces li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.pieces .name { flex: 1 1 14rem; font-size: 1.0625rem; }
.pieces .dl {
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.package {
  background: var(--tint);
  border-left: 3px solid var(--blue);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.5rem;
  max-width: none;
}
.package a {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.package .note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

/* --- grade filter ------------------------------------------------- */
/* Anchors and :target, never script. The site is allowed exactly one
   JavaScript file and it registers the service worker; a second one
   would cost either an inline script or another line in the no-script
   budget, and a link costs neither.
   A browser without :has() drops these two rules and shows every level,
   which is the page exactly as it stood before the filter existed. */

.levelfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 1.5rem;
}
.chip {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--blue);
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
}
.chip:hover, .chip:focus-visible {
  border-color: var(--blue);
  background: var(--tint);
}

/* Both of these are :has() rules, and the second one keeps the prefix on
   purpose. Dropping it reads like a tidy-up and is not: the hide scores
   (0,4,0) and a bare `.levels > .level:target` scores (0,3,0), so the
   hide wins and a filtered page renders with no pieces on it at all. */
.levels:has(> .level:target) > .level { display: none; }
.levels:has(> .level:target) > .level:target { display: block; }

/* --- the Sunday list --------------------------------------------- */

/* max-width: none, because the generic `ul` rule caps lists at the reading
   measure and these rows are full-width dividers, not prose. */
.sundays { list-style: none; margin: 0; padding: 0; max-width: none; }
.sundays li { padding: 1.1rem 0; border-bottom: 1px solid var(--hairline-soft); }
.sundays .day {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1.1;
  display: block;
  text-decoration: none;
  color: var(--navy);
}
.sundays .day:hover { text-decoration: underline; }
.sundays .theme { font-size: 1.0625rem; margin-top: 0.3rem; }

/* --- install ----------------------------------------------------- */
/* Hidden until the browser says the site can actually be installed,
   which is the only moment the offer means anything. With JavaScript
   off, or on iOS where no such event is ever fired, it never appears. */
.install {
  margin: 2rem 0 0;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.install:hover, .install:focus-visible { background: var(--blue); }
.install[hidden] { display: none; }

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

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
footer p { max-width: var(--measure); margin-bottom: 0.6rem; }
footer .colophon {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  word-break: break-all;
}

.draft-banner {
  background: var(--draft-bg);
  color: var(--draft-ink);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1rem;
}

.backlink {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.wrap:has(#level-pre_k:target) .chip[href="#level-pre_k"],
.wrap:has(#level-primary:target) .chip[href="#level-primary"],
.wrap:has(#level-intermediate:target) .chip[href="#level-intermediate"],
.wrap:has(#level-middle_school:target) .chip[href="#level-middle_school"],
.wrap:has(#level-high_school:target) .chip[href="#level-high_school"],
.wrap:has(#level-other:target) .chip[href="#level-other"] {
  color: var(--paper);
  background: var(--navy);
  border-color: var(--navy);
}