/* treuo.app: Slate & Linen tokens by value from frontend/src/index.css (site/tests/pages.test.mjs
   checks they match by role), the UX spec's type scale in rem and its 8 px spacing. Layout: a navy
   header and hero, then each section a white card on Ground (owner, 2026-11-03). */

:root {
  --ground: #f2f3f5;
  --surface: #ffffff;
  --ink: #1b2024;
  --muted: #666e7a;
  --accent: #3b5168;
  --border: #dde1e6;
  --ring: #3b5168;
  --error: #b33232;
  --tint: #e4e9ef; /* the app's --accent, a pale navy; Ink or Accent text only (Muted is 4.2:1 on it) */

  /* Navy surfaces (hero, header, CTA): derived, not app tokens. */
  --on-navy: #f2f3f5; /* 7.4:1 on Accent */
  --on-navy-muted: #c9d3de; /* 5.4:1 on Accent */

  --font-serif: "Gentium Book Plus", ui-serif, Georgia, serif;
  --font-sans: "Libre Franklin", ui-sans-serif, system-ui, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --header-h: 4.5rem;
  --name-tracking: 0.05em;
}

/* Latin subsets, plus Gentium's Greek so λατρεύω renders in the serif (Fontsource 5.3.0). */
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gentium-book-plus-latin-400-normal.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: "Gentium Book Plus";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gentium-book-plus-latin-400-italic.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: "Gentium Book Plus";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/gentium-book-plus-latin-700-normal.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: "Gentium Book Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gentium-book-plus-greek-400-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Polytonic Greek (the accents in λογικὴν) sits in Greek Extended, a separate subset. */
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gentium-book-plus-greek-ext-400-normal.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/libre-franklin-latin-wght-normal.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;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* Type scale (UX spec): H1–H2 in the serif, H3 in the sans. */
h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
}

h1 {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.2;
}

/* Home's hero name is the wordmark, outside the type scale (owner, 2026-11-03): lowercase, bold,
   tracked, sized to the viewport. */
#name h1 {
  margin-bottom: var(--space-2);
  font-size: clamp(4.5rem, 12vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--name-tracking);
  text-transform: lowercase;
}

h2 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--accent);
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
}

p {
  margin: 0 0 var(--space-3);
}

/* Links in running text keep an underline: Accent against Ink is 2.0:1, so color alone can't mark
   them. Only the wordmark and the button-styled CTA drop it. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wordmark,
.cta {
  text-decoration: none;
}

/* Full-opacity ring; the offset clears Accent fills. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* The Accent ring vanishes on navy; the navy surfaces ring in light. */
header :focus-visible,
#name :focus-visible,
#early-access :focus-visible {
  outline-color: var(--on-navy);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
}

.skip-link:focus {
  top: var(--space-2);
}

/* Inset, so the Accent ring sits on the link's own Surface box whatever lies behind it. */
.skip-link:focus-visible {
  outline-offset: -4px;
}

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

/* Greek in the serif, whose subsets cover it; the sans has no Greek glyphs. Upright even inside an
   italic quote: only the upright Greek faces are vendored, so italic would be synthesized. */
[lang="grc"] {
  font-family: var(--font-serif);
  font-style: normal;
}

/* A centered 56rem column that reflows down to 320 px. main spans the page so Home's hero can run
   edge to edge without overflow (100vw would add the scrollbar's width). */
header,
footer {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

main {
  padding: 0 var(--space-3);
}

main > :not(#name) {
  max-width: 56rem;
  margin-inline: auto;
}

main > h1 {
  margin-top: var(--space-5);
}

/* The header is a navy bar; box-shadow paints it full-bleed without wrapper elements or overflow.
   It stacks above Home's hero on its own, so a browser without :has() keeps a solid bar. */
header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--header-h);
  background: var(--accent);
  box-shadow: 0 0 0 100vmax var(--accent);
  clip-path: inset(0 -100vmax);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.wordmark img {
  display: block;
  width: 1.75rem;
  height: 2.375rem;
}

/* A light forced-colors theme swaps the navy behind the mark for its Canvas; the image keeps #f2f3f5.
   ponytail: assumes prefers-color-scheme tracks the forced-colors Canvas (Chromium derives it);
   inline the mark with fill="currentColor" if a UA mismatches. */
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .wordmark img {
    filter: invert(1);
  }
}

.status {
  margin: 0;
  color: var(--on-navy-muted);
  font-size: 0.8125rem;
}

/* Every section is a white card on Ground. */
section {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgb(27 32 36 / 6%),
    0 6px 20px rgb(27 32 36 / 5%);
}

/* Home's hero: navy with the sanctuary photo blended in, painted behind the header too so the two
   read as one. Header + hero match the photo's 16:9, so it shows whole (windows and cross to pulpit)
   on desktop; capped at 50rem, and at least 30rem so phones keep the cross above the name and the
   pulpit below. */
body:has(#name) header {
  background: none;
  box-shadow: none;
}

#name {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(calc(min(56.25vw, 50rem) - var(--header-h)), 30rem);
  margin: 0 calc(-1 * var(--space-3));
  padding: var(--space-6) var(--space-3) calc(var(--space-6) + var(--space-4));
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  color: var(--on-navy);
}

#name::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--header-h)) 0 0;
  z-index: -2;
  background: var(--accent);
}

#name .hero-image {
  position: absolute;
  top: calc(-1 * var(--header-h));
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(100% + var(--header-h));
  object-fit: cover;
  opacity: 0.2;
  mix-blend-mode: luminosity;
}

/* Navy fades the photo out behind the header, so the small status text keeps 4.5:1. */
#name::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--header-h));
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(var(--header-h) + var(--space-5));
  background: linear-gradient(var(--accent) 55%, transparent);
}

.tagline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.25;
}

/* The first card rides up over the hero's bottom edge. */
#name + section {
  position: relative;
  margin-top: calc(-1 * var(--space-6));
}

ol,
ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
}

figure {
  margin: 0 0 var(--space-3);
}

blockquote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
}

figcaption {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* The need: the questions a worship leader carries, then the answer on its own, no tile. */
.questions {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--accent);
}

/* 35rem sets every question in two lines; the tightest has 74px to spare (Windows renders wider);
   pretty keeps a lone word off a question's last line. */
.questions li {
  max-width: 35rem;
  text-wrap: pretty;
}

/* The questions alternate sides and fade in as the reader scrolls to them, like a mind turning a
   worry over (owner, 2026-11-04). Scroll-linked, so nothing moves on its own. */
.questions li:nth-child(even) {
  justify-self: end;
  text-align: right;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@supports (animation-timeline: view()) {
  .questions li {
    animation: fade-in linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }
}

.pull {
  margin: var(--space-5) 0 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
}

/* Pillars and features: grids of Ground cards inside their section's card. */
.pillars,
.features {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.pillars {
  margin-bottom: 0;
  counter-reset: pillar;
}

.pillars li,
.feature {
  padding: var(--space-4);
  border-radius: 0.5rem;
}

/* What we're building (owner, 2026-11-05): navy tiles in the white section card. The tiles hold no
   link, so no ring lands on them. Each closing note is a serif statement under a thin
   rule, at full on-navy, so it reads as Treuo's promise rather than a footnote. */
.feature {
  background: var(--accent);
  color: var(--on-navy);
}

.feature h3 {
  color: var(--on-navy);
}

.feature .trust,
.feature .principle {
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--on-navy-muted);
  border-left: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--on-navy);
}

/* The tile in focus (owner, 2026-11-05): #features' tiles snap to the row's center, and the first
   starts there. The section is the size container, so the padding that centers the end tiles and the
   tile width share one formula. site.js marks the off-center tiles .is-receded: the pale Tint with
   Accent text (6.7:1), a little smaller, so every tile stays readable. Without the script none recedes. */
#features {
  container-type: inline-size;
}

#features .carousel {
  padding-inline: calc((100cqi - min(80cqi, 19rem)) / 2);
}

#features .carousel > .features {
  grid-auto-columns: min(80cqi, 19rem);
  width: max-content;
}

#features .features > * {
  scroll-snap-align: center;
}

.feature {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.feature.is-receded {
  transform: scale(0.94);
}

.feature.is-receded:not(.feature-more) {
  background: var(--tint);
  color: var(--accent);
}

.feature.is-receded h3,
.feature.is-receded .trust,
.feature.is-receded .principle {
  color: var(--accent);
}

.feature.is-receded .trust,
.feature.is-receded .principle {
  border-top-color: var(--border);
}

.pillars li {
  counter-increment: pillar;
  background: var(--ground);
}

.pillars li::before {
  content: counter(pillar);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-navy);
  font-weight: 600;
}

.feature > :last-child {
  margin-bottom: 0;
}

/* What we're building and who sees the aggregate: a row of tiles that scrolls sideways, snapping
   tile by tile; the next tile peeks in. Swipe, trackpad, the scrollbar and the keyboard (the region
   takes focus) move it in every browser. The arrows are secondary: site.js shows them and moves the
   row one tile per press (owner, 2026-11-04). */
.carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--muted) transparent;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  padding-bottom: var(--space-2);
}

.carousel > .features,
.carousel > .wider-who {
  display: grid;
  grid-auto-columns: min(80%, 19rem);
  grid-auto-flow: column;
  gap: var(--space-3);
  margin: 0;
}

.carousel > * > * {
  scroll-snap-align: start;
}

.carousel-nav:not([hidden]) {
  display: flex;
  gap: var(--space-2);
}

.carousel-nav button {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Dim the glyph, not the element, so the focus ring stays at full strength: Accent at 40% on Surface
   is the look opacity 0.4 gave (2.0:1 on Surface, 4.1:1 from the live arrow). Forced colors replaces
   the colour with ButtonText, and only :disabled gets GrayText on its own. */
.carousel-nav button[aria-disabled="true"] {
  color: color-mix(in srgb, var(--accent) 40%, var(--surface));
  cursor: default;
}

@media (forced-colors: active) {
  .carousel-nav button[aria-disabled="true"] {
    color: GrayText;
  }
}

/* The arrows sit right under the row; #wider-church's footnote shares their line on desktop and
   wraps below them on a phone. */
#features .carousel-nav,
.carousel-foot {
  margin-top: var(--space-2);
}

#features .carousel-nav {
  justify-content: flex-end;
}

.carousel-foot {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-5);
}

.footnote {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.feature-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 2px dashed var(--border);
  background: none;
  color: var(--accent);
}

/* Serving the wider church: the intro, who sees the aggregate as Ground tiles in a carousel like
   the features', and the sharing facts in a 2x2 grid under a navy rule (owner, 2026-11-04). */
.wider-lede {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.55;
}

.wider-lead {
  margin-bottom: var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent);
}

.wider-who > div {
  padding: var(--space-3) var(--space-4);
  border-radius: 0.5rem;
  background: var(--ground);
}

.wider-who dt {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--accent);
}

dd {
  margin: var(--space-1) 0 0;
}

.wider-who dd {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.wider-facts {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--accent);
}

.wider-facts dt {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wider-facts dd {
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (min-width: 48rem) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }

  .wider-facts {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

/* Home's trust lines; .principle is the one beside service planning. */
.principle,
.trust {
  color: var(--ink);
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 0.375rem 0.375rem 0;
  background: var(--surface);
}

#promise .trust {
  margin-top: var(--space-4);
}

#status {
  background: var(--tint);
  box-shadow: none;
}

#early-access {
  background: var(--accent);
  color: var(--on-navy);
  text-align: center;
}

#early-access h2 {
  color: var(--on-navy);
}

.cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 2px solid transparent;
  border-radius: 0.625rem;
  background: var(--on-navy);
  color: var(--accent);
  font-weight: 600;
}

.notice-version {
  color: var(--muted);
  font-size: 0.8125rem;
}

.cta-fallback,
.cta-note {
  color: var(--on-navy-muted);
  font-size: 0.8125rem;
}

.cta-note a {
  color: var(--on-navy);
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

footer p {
  margin: 0;
}

/* The LSB's required notice (lsbible.org permission to quote) on every page's footer. Its link sits in
   a sentence, so it keeps an inline box (WCAG 2.5.5's inline exception). */
footer .credit {
  flex-basis: 100%;
  margin-top: var(--space-1);
  font-size: 0.75rem;
}

footer .credit a {
  display: inline;
  min-height: 0;
}

/* Last, so it overrides every motion rule above it. */
@media (prefers-reduced-motion: reduce) {
  .questions li {
    animation: none;
  }

  .carousel {
    scroll-behavior: auto;
  }

  .feature {
    transition: none;
  }
}