/* Christ Church Hilton — one-page site
   Design system: "Christ Church Hilton" (contemporary ecclesiastical archival collage).
   Tokens mirror project/tokens.json in the design system artifact. */

:root {
  color-scheme: light;

  /* Colour: papers, ink, one strong colour */
  --cch-cream: #F5F2EC;
  --cch-vellum: #EDE4D0;
  --cch-stone: #E8E3D8;
  --cch-white: #FFFFFF;
  --cch-ink: #26231F;
  --cch-maroon: #81202F;
  --cch-maroon-deep: #61171F;
  --cch-pine: #33463B;
  --cch-sage: #9FAC97;
  --cch-taupe: #CBBFAC;
  --cch-sepia: #5E4B37;
  --cch-success: #4A6B4F;
  --cch-error: #A03038;
  --cch-warn: #A87834;

  /* Type */
  --cch-font-baskerville: 'Libre Baskerville', Baskerville, Georgia, serif;
  --cch-font-body: 'Marcellus', Georgia, serif;
  --cch-font-blackletter: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  --cch-font-grotesk: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --cch-font-serif: 'Cormorant Garamond', Georgia, serif;
  --cch-font-script: 'Homemade Apple', 'Bradley Hand', cursive;

  --cch-text-xs: 0.75rem;
  --cch-text-sm: 0.875rem;
  --cch-text-base: 1rem;
  --cch-text-lg: 1.25rem;
  --cch-text-xl: 1.563rem;
  --cch-text-2xl: 1.953rem;
  --cch-text-3xl: clamp(2.441rem, 1.8rem + 2.5vw, 3.4rem);
  --cch-measure: 70ch;
  --cch-tracked-caps: 0.12em;

  /* Space, line, motion */
  --cch-space-1: 4px;
  --cch-space-2: 8px;
  --cch-space-3: 16px;
  --cch-space-4: 24px;
  --cch-space-5: 40px;
  --cch-space-6: 64px;
  --cch-space-7: 96px;
  --cch-radius: 3px;
  --cch-rule: 1px solid rgb(38 35 31 / 0.18);
  --cch-rule-on-ink: 1px solid rgb(245 242 236 / 0.22);
  --cch-rule-accent: 1px solid var(--cch-maroon);
  --cch-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cch-motion-base: 300ms;
  --cch-motion-slow: 450ms;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wrap: 1200px;

  /* Torn edges, reused by bands and scraps */
  --torn-scrap: polygon(0 3%, 7% 0, 15% 2.5%, 24% .5%, 33% 3%, 45% 0, 56% 2.5%, 67% .5%, 78% 3%, 89% 0, 100% 2.5%, 99.3% 30%, 100% 62%, 99.4% 97%, 90% 100%, 79% 97.5%, 68% 100%, 56% 97.8%, 44% 100%, 33% 97.5%, 22% 100%, 11% 98%, 0 100%, .7% 66%, 0 34%);
  --torn-strip: polygon(0 8px, 6% 0, 13% 6px, 22% 1px, 31% 7px, 42% 0, 53% 6px, 64% 1px, 75% 7px, 86% 0, 94% 6px, 100% 2px, 100% calc(100% - 6px), 93% 100%, 84% calc(100% - 7px), 73% calc(100% - 1px), 62% calc(100% - 8px), 50% 100%, 39% calc(100% - 6px), 28% calc(100% - 1px), 17% calc(100% - 7px), 8% 100%, 0 calc(100% - 5px));
  --torn-head: polygon(0 18px, 6% 4px, 14% 14px, 24% 2px, 35% 16px, 47% 0, 59% 14px, 71% 2px, 83% 15px, 93% 0, 100% 12px, 100% 100%, 0 100%);
  --torn-foot: polygon(0 0, 100% 0, 100% calc(100% - 14px), 96% calc(100% - 6px), 91% calc(100% - 12px), 85% calc(100% - 3px), 78% calc(100% - 11px), 71% 100%, 63% calc(100% - 10px), 55% calc(100% - 4px), 47% calc(100% - 13px), 40% calc(100% - 2px), 32% calc(100% - 11px), 24% 100%, 16% calc(100% - 10px), 9% calc(100% - 3px), 4% calc(100% - 11px), 0 calc(100% - 5px));
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--cch-cream);
  color: var(--cch-ink);
  font-family: var(--cch-font-body);
  font-size: var(--cch-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cch-maroon); text-underline-offset: 3px; }
a:hover { color: var(--cch-maroon-deep); }

:focus-visible { outline: 2px solid var(--cch-maroon); outline-offset: 2px; }
.band--ink :focus-visible { outline-color: var(--cch-cream); }
.band--ink .paper :focus-visible { outline-color: var(--cch-maroon); }

h1, h2, h3, h4 {
  font-family: var(--cch-font-baskerville);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--cch-ink); color: var(--cch-cream);
  padding: 10px 16px; border-radius: var(--cch-radius);
}
.skip:focus { top: 12px; color: var(--cch-cream); }

/* Placeholder copy still to confirm with the church office */
.tbc {
  background: rgb(168 120 52 / 0.14);
  border-bottom: 1px dashed var(--cch-warn);
  padding: 0 3px;
}
.band--ink .tbc { background: rgb(203 191 172 / 0.18); border-bottom-color: var(--cch-taupe); }

/* ---------- Layout ---------- */

.band {
  position: relative;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  padding-block: var(--cch-space-7);
}
.band--cream { background: var(--cch-cream); }
.band--vellum { background: var(--cch-vellum); }
.band--stone { background: var(--cch-stone); }
.band--sage { background: var(--cch-sage); }
.band--ink { background: var(--cch-ink); color: var(--cch-cream); }
.band--torn { clip-path: var(--torn-head); margin-top: -14px; padding-top: calc(var(--cch-space-7) + 14px); }
.band--clip { overflow: hidden; }

.wrap { position: relative; max-width: var(--wrap); margin: 0 auto; }

.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cch-space-6);
  align-items: flex-start;
}
.split > * { min-width: 0; }
.split--center { align-items: center; }
.split__main { flex: 1 1 440px; }
.split__side { flex: 1 1 340px; }

.lead { font-size: var(--cch-text-lg); line-height: 1.6; max-width: 46ch; }
.prose { max-width: 60ch; }
.prose p + p { margin-top: var(--cch-space-3); }

/* Hymnal staves, once per page (hero) */
.hymnal {
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 7px, rgb(38 35 31 / .08) 7px 8px,
    transparent 8px 15px, rgb(38 35 31 / .08) 15px 16px,
    transparent 16px 23px, rgb(38 35 31 / .08) 23px 24px,
    transparent 24px 31px, rgb(38 35 31 / .08) 31px 32px,
    transparent 32px 39px, rgb(38 35 31 / .08) 39px 40px,
    transparent 40px 72px);
}

/* ---------- Section titles ---------- */

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--cch-font-body);
  font-size: var(--cch-text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.eyebrow::after { content: ""; width: 40px; flex: none; border-top: var(--cch-rule-accent); }
.band--ink .eyebrow { color: var(--cch-sage); }

.kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--cch-font-baskerville);
  font-style: italic;
  font-size: 15px;
  color: var(--cch-maroon);
}
.kicker::after { content: ""; width: 40px; border-top: var(--cch-rule-accent); }

.title { margin-top: 10px; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; }
.title--sm { font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem); }

.section-head { display: flex; flex-direction: column; gap: var(--cch-space-3); margin-bottom: var(--cch-space-5); }

/* Engraving printed in one palette colour through its alpha */
.engraving {
  display: block;
  background: var(--cch-maroon);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.engraving--ink { background: var(--cch-ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--cch-font-grotesk);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: box-shadow var(--cch-motion-base) var(--cch-ease-out), background var(--cch-motion-base) var(--cch-ease-out);
}
.btn--primary { background: var(--cch-maroon); color: var(--cch-cream); }
.btn--primary:hover { background: var(--cch-maroon-deep); color: var(--cch-cream); }
.btn--stamp { background: var(--cch-ink); color: var(--cch-cream); box-shadow: 4px 4px 0 var(--cch-maroon); transform: rotate(-1.5deg); }
.btn--stamp:hover { color: var(--cch-cream); box-shadow: 7px 7px 0 var(--cch-maroon); }
.band--ink .btn--stamp { background: var(--cch-cream); color: var(--cch-ink); }
.band--ink .btn--stamp:hover { color: var(--cch-ink); }
.band--ink .paper .btn--stamp { background: var(--cch-ink); color: var(--cch-cream); }
.btn--scrap {
  background: var(--cch-taupe); color: var(--cch-ink);
  font-family: var(--cch-font-serif); font-style: italic; font-weight: 600;
  font-size: 21px; letter-spacing: 0; text-transform: none;
  transform: rotate(1.5deg);
  clip-path: polygon(0 8%, 6% 0, 40% 5%, 70% 0, 100% 6%, 98% 50%, 100% 94%, 64% 100%, 30% 95%, 3% 100%, 0 55%);
}
.btn--scrap:hover { background: var(--cch-sage); color: var(--cch-ink); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 13px; }

.actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: var(--cch-space-5); }

/* ---------- Collage pieces ---------- */

.scrap {
  position: relative;
  padding: 22px 24px 20px;
  clip-path: var(--torn-scrap);
}
.scrap--vellum { background: var(--cch-vellum); }
.scrap--white { background: var(--cch-white); }
.scrap--sage { background: var(--cch-sage); }
.scrap--taupe { background: var(--cch-taupe); }
.scrap--cream { background: var(--cch-cream); }

/* Straight paper piece with tape: holds content people read in full */
.paper {
  position: relative; isolation: isolate;
  padding: var(--cch-space-5) var(--cch-space-4) var(--cch-space-4);
  color: var(--cch-ink);
}
.paper::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--torn-scrap); }
.paper--cream::before { background: var(--cch-cream); }
.paper--vellum::before { background: var(--cch-vellum); }
.paper--taupe::before { background: var(--cch-taupe); }
.paper--white::before { background: var(--cch-white); }

.mount { position: relative; background: var(--cch-white); padding: 9px; }
.tape {
  position: absolute; top: -4px; width: 64px; height: 18px;
  background: var(--cch-taupe); opacity: 0.85; z-index: 2;
}
.tape--l { left: -14px; transform: rotate(-34deg); }
.tape--r { right: -14px; transform: rotate(34deg); }

.torn-print { clip-path: var(--torn-scrap); }

.scripture { color: var(--cch-ink); }
.scripture p:first-child {
  font-family: var(--cch-font-baskerville);
  font-size: 16px; line-height: 1.6;
}
.scripture sup { font-size: 10px; color: var(--cch-maroon); margin-right: 2px; }
.scripture__ref { margin-top: 10px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; }

.hand { font-family: var(--cch-font-script); font-size: 15px; color: var(--cch-sepia); line-height: 1.7; }

.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(2.5deg); }

/* ---------- Masthead ---------- */

.masthead {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--cch-vellum);
  padding: 12px var(--gutter-r) 26px var(--gutter);
  clip-path: var(--torn-foot);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 21; background: var(--cch-vellum);
}
.masthead__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--cch-space-4);
}
.masthead__logo { display: block; line-height: 0; flex: none; }
.masthead__logo img { height: 48px; width: auto; }
.nav { display: flex; gap: 32px; font-size: var(--cch-text-xs); letter-spacing: 0.24em; text-transform: uppercase; }
.nav a { color: var(--cch-ink); text-decoration: none; padding: 14px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { color: var(--cch-maroon); border-bottom-color: var(--cch-maroon); }

/* Phones: the same five links as a scrolling row under the logo */
.nav-row { display: none; }

/* ---------- Hero ---------- */

.hero { padding-block: var(--cch-space-7) calc(var(--cch-space-7) + 16px); margin-top: -14px; }
.hero__title { margin-top: 22px; }
.hero__black { display: block; font-family: var(--cch-font-blackletter); font-size: clamp(64px, 6vw + 32px, 136px); line-height: 0.85; }
.hero__big { display: block; font-size: clamp(84px, 11vw + 20px, 176px); line-height: 0.9; letter-spacing: -0.045em; }
.hero__strip {
  display: inline-block; margin-top: 10px;
  background: var(--cch-maroon); color: var(--cch-cream);
  padding: 12px 24px 14px;
  clip-path: var(--torn-scrap);
  transform: rotate(-2deg);
  font-family: var(--cch-font-grotesk); font-weight: 800;
  font-size: clamp(18px, 2.2vw, 27px); letter-spacing: 0.04em; text-transform: uppercase;
}
.hero__facts {
  margin-top: var(--cch-space-5);
  padding-top: var(--cch-space-3);
  border-top: 1.5px solid var(--cch-ink);
  max-width: 34rem;
  display: grid; gap: 4px;
  font-family: var(--cch-font-baskerville);
  font-size: 18px;
}
.hero__facts span { font-style: italic; color: var(--cch-maroon); }

/* Three pieces: photo, Psalm scrap, stamp */
.collage { position: relative; min-height: 560px; }
.collage__photo { position: absolute; right: 0; top: 30px; width: 78%; max-width: 460px; transform: rotate(3deg); z-index: 2; }
.collage__photo img { width: 100%; }
.collage__verse { position: absolute; left: 0; bottom: 30px; width: 300px; max-width: 82%; transform: rotate(-5deg); z-index: 3; }
.collage__stamp { position: absolute; right: 0; bottom: 0; transform: rotate(-8deg); z-index: 4; }

/* ---------- Sundays ---------- */

.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cch-space-5); }
.time { display: flex; flex-direction: column; gap: 10px; }
.time__big {
  font-family: var(--cch-font-baskerville); font-style: italic;
  font-size: clamp(4rem, 2.6rem + 5vw, 7.5rem); line-height: 0.9; letter-spacing: -0.03em;
  padding-bottom: var(--cch-space-3);
  border-bottom: 1.5px solid var(--cch-ink);
}
.time h3 { font-size: var(--cch-text-xl); margin-top: 6px; }

.faq { margin-top: var(--cch-space-7); }
.faq h3 { font-size: var(--cch-text-2xl); }
.faq dl { margin: var(--cch-space-4) 0 0; border-top: 1.5px solid var(--cch-ink); }
.faq dl > div {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--cch-space-4);
  padding: 14px 0; border-bottom: var(--cch-rule);
}
.faq dt { font-family: var(--cch-font-baskerville); font-size: 18px; }
.faq dd { margin: 0; }
.faq__photo { max-width: 440px; transform: rotate(2deg); margin-top: var(--cch-space-6); }

.visit { margin-top: var(--cch-space-7); }
.visit__strip { width: 100%; max-width: 280px; margin-top: var(--cch-space-5); transform: rotate(-2deg); }

/* ---------- Forms (ledger) ---------- */

.form {
  background: var(--cch-white);
  padding: 34px 32px 30px;
  clip-path: var(--torn-scrap);
  display: flex; flex-direction: column; gap: 24px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--cch-text-xs); letter-spacing: 0.14em; text-transform: uppercase;
}
.field label::before { content: ""; width: 24px; border-top: var(--cch-rule-accent); }
.field .optional { letter-spacing: 0.08em; text-transform: none; font-size: var(--cch-text-sm); color: var(--cch-sepia); }
.field input, .field select, .field textarea {
  font-family: var(--cch-font-baskerville);
  font-size: 19px;
  color: var(--cch-ink);
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--cch-ink); border-radius: 0;
  padding: 6px 0 8px; min-height: 44px; width: 100%;
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #6b655c; font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 3px solid var(--cch-maroon); }
.field[data-invalid] input { border-bottom-color: var(--cch-error); }
.field__error { font-size: var(--cch-text-sm); color: var(--cch-error); }
.form__note { font-size: var(--cch-text-sm); color: var(--cch-sepia); line-height: 1.55; }
.form__done {
  border-left: 3px solid var(--cch-success);
  padding: 10px 14px;
  background: var(--cch-cream);
  font-family: var(--cch-font-baskerville);
}

/* ---------- Next step (pathway) ---------- */

.road { height: 220px; width: 100%; object-fit: cover; object-position: 50% 70%; clip-path: var(--torn-strip); }

.pathway { position: relative; margin-top: -64px; }
.cord { position: absolute; left: -2%; width: 104%; top: 46px; height: 40px; z-index: 0; pointer-events: none; }
.path { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.path li { display: flex; }
.path a {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: var(--cch-ink);
  padding: 18px 16px 18px;
  clip-path: var(--torn-scrap);
  transition: transform var(--cch-motion-base) var(--cch-ease-out);
}
.path li:nth-child(odd) a { transform: rotate(-1.5deg); }
.path li:nth-child(even) a { transform: rotate(1.5deg) translateY(14px); }
.path a:hover { transform: rotate(0) translateY(-3px); color: var(--cch-ink); }
.path a:focus-visible { outline-color: var(--cch-cream); outline-offset: 4px; }
.path__n { font-family: var(--cch-font-baskerville); font-size: 56px; line-height: 0.9; color: var(--cch-maroon); }
.path__name { font-family: var(--cch-font-baskerville); font-size: 26px; line-height: 1.1; }
.path__for { font-size: var(--cch-text-sm); line-height: 1.45; }

.early { margin-top: var(--cch-space-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cch-space-5); }
.early .paper { display: flex; flex-direction: column; gap: var(--cch-space-3); align-items: flex-start; padding: var(--cch-space-5); }
.early .paper:first-child { transform: rotate(-1deg); }
.early .paper:last-child { transform: rotate(1deg); }
.early h3 { font-size: var(--cch-text-2xl); }

/* ---------- Explore ---------- */

.explore__cross { position: absolute; z-index: 0; right: -110px; top: 40px; width: 460px; height: 460px; }
.explore__text { background: var(--cch-cream); padding: var(--cch-space-4) var(--cch-space-4) var(--cch-space-4) 0; }
.explore__art { position: relative; max-width: 460px; padding-bottom: 90px; }
.explore__art .mount { transform: rotate(-2deg); }
.explore__art .scripture { position: absolute; right: -8px; bottom: 0; width: 300px; max-width: 80%; transform: rotate(3deg); }

/* ---------- Open Scripture ---------- */

.believe__head { position: relative; isolation: isolate; padding-top: var(--cch-space-3); }
.believe__bcp {
  position: absolute; z-index: -1; left: -30px; top: -40px;
  width: 230px; opacity: 0.16;
  clip-path: var(--torn-scrap); transform: rotate(-4deg);
}
.beliefs { display: grid; gap: var(--cch-space-4); margin-top: var(--cch-space-5); }
.beliefs h3 { font-size: var(--cch-text-xl); margin-bottom: 6px; }
.believe__art { position: relative; max-width: 380px; padding-bottom: 70px; }
.believe__bible { width: 100%; max-width: 360px; transform: rotate(2deg); }
.believe__art .scripture { position: absolute; left: -20px; bottom: 0; width: 300px; max-width: 86%; transform: rotate(-4deg); }
.sermons-block { margin-top: var(--cch-space-6); }
.preach { max-width: 240px; transform: rotate(-2deg); margin-bottom: var(--cch-space-4); }
.sermons { margin-top: var(--cch-space-3); border-top: 1.5px solid rgb(245 242 236 / 0.6); }
.sermon {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 16px; align-items: baseline;
  padding: 16px 0; border-bottom: var(--cch-rule-on-ink);
  color: var(--cch-cream); text-decoration: none;
}
.sermon:hover { color: var(--cch-taupe); }
.sermon small { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cch-sage); }
.sermon strong { font-family: var(--cch-font-baskerville); font-weight: 400; font-size: 20px; line-height: 1.3; }
.sermon i { grid-column: 2; font-family: var(--cch-font-baskerville); font-size: 15px; color: var(--cch-taupe); }

/* ---------- Belong ---------- */

.belong__art { position: relative; max-width: 420px; padding-bottom: 80px; }
.belong__photo { width: 100%; max-width: 360px; transform: rotate(-2deg); }
.belong__art .scripture { position: absolute; right: 0; bottom: 0; width: 320px; max-width: 86%; transform: rotate(3deg); }

.stage-area { position: relative; isolation: isolate; margin-top: var(--cch-space-6); }
.belong__rope { position: absolute; z-index: -1; left: -260px; top: 40px; width: 620px; height: 620px; opacity: 0.14; }
.prints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cch-space-5); margin-bottom: var(--cch-space-6); }
.prints figure { margin: 0; }
.prints figure:first-child { transform: rotate(-1.5deg); }
.prints figure:last-child { transform: rotate(1.5deg); }
.prints img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prints figcaption { margin-top: 8px; text-align: center; color: var(--cch-ink); }

.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cch-space-4); }
.stage { display: flex; flex-direction: column; gap: 8px; }
.stage h3 { font-size: var(--cch-text-xl); }
.stage__when {
  align-self: flex-start;
  background: var(--cch-sage); padding: 3px 10px;
  font-family: var(--cch-font-serif); font-style: italic; font-weight: 600; font-size: 16px;
  transform: rotate(-2deg);
}
.stage__next { margin-top: auto; padding-top: 8px; border-top: var(--cch-rule); font-size: var(--cch-text-sm); }

.term h3, .members h3, .care h3 { font-size: var(--cch-text-2xl); }
.term ul { list-style: none; margin: var(--cch-space-3) 0 0; padding: 0; border-top: 1.5px solid var(--cch-ink); }
.term li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: var(--cch-rule); }
.term li span:first-child { font-family: var(--cch-font-baskerville); font-style: italic; }

.members ol { margin: var(--cch-space-3) 0 0; padding-left: 1.3em; display: grid; gap: 6px; }

/* ---------- Serve ---------- */

.serve__art { position: relative; max-width: 480px; padding-bottom: 120px; }
.serve__music { transform: rotate(-2deg); }
.serve__hosp { position: absolute; right: -10px; bottom: 0; width: 56%; transform: rotate(3deg); }

.teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cch-space-6); border-top: 1.5px solid var(--cch-ink); }
.teams li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 4px var(--cch-space-4); padding: 16px 0; border-bottom: var(--cch-rule); }
.teams h3 { font-size: var(--cch-text-lg); }
.teams p { grid-column: 2; }
.teams .team__lead { font-size: var(--cch-text-sm); color: var(--cch-sepia); }

/* ---------- Give ---------- */

.give-details { background: var(--cch-white); border: var(--cch-rule); padding: var(--cch-space-4); }
.give-details dl { margin: 0; display: grid; gap: 0; }
.give-details dl > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: var(--cch-rule); }
.give-details dl > div:last-child { border-bottom: 0; }
.give-details dt { font-size: var(--cch-text-xs); letter-spacing: var(--cch-tracked-caps); text-transform: uppercase; padding-top: 3px; }
.give-details dd { margin: 0; font-family: var(--cch-font-baskerville); font-variant-numeric: tabular-nums; }

/* ---------- Find us ---------- */

.contact-list { margin: var(--cch-space-4) 0 0; font-family: var(--cch-font-baskerville); font-size: 18px; line-height: 1.8; }
.archive {
  margin: 0; background: var(--cch-vellum); padding: 20px 20px 12px;
  box-shadow: inset 0 0 0 1px rgb(94 75 55 / 0.3);
  transform: rotate(2deg); position: relative;
  max-width: 460px;
}
.archive img { width: 100%; }
.archive figcaption { text-align: center; margin-top: 12px; }

/* ---------- Colophon ---------- */

.colophon { padding-block: calc(var(--cch-space-6) + 14px) var(--cch-space-5); }
.colophon__grid { display: flex; flex-wrap: wrap; gap: var(--cch-space-5); }
.colophon__grid > * { flex: 1 1 220px; min-width: 0; }
.colophon__grid > :first-child { flex: 1.4 1 280px; }
.colophon__motto { font-family: var(--cch-font-baskerville); font-size: 28px; line-height: 1.2; max-width: 16ch; }
.colophon__label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cch-sage); margin-bottom: 14px; }
.colophon__list { font-family: var(--cch-font-baskerville); font-size: 16px; line-height: 1.9; }
.colophon__list span { display: inline-block; min-width: 64px; font-style: italic; color: var(--cch-taupe); }
.colophon a { color: var(--cch-cream); }
.colophon a:hover { color: var(--cch-taupe); }
.double-rule { max-width: var(--wrap); margin: var(--cch-space-5) auto 22px; height: 4px; border-top: 2px solid rgb(245 242 236 / .5); border-bottom: 1px solid rgb(245 242 236 / .5); }
.signature { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 12px; letter-spacing: 0.32em; text-align: center; }
.signature::before, .signature::after { content: ""; width: 40px; flex: none; border-top: var(--cch-rule-accent); }
.esv { max-width: 70ch; margin: 22px auto 0; text-align: center; font-size: 11px; line-height: 1.6; color: var(--cch-taupe); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .settle { animation: settle 900ms var(--cch-ease-out) both; }
  .settle--2 { animation-delay: 120ms; }
  .settle--3 { animation-delay: 240ms; }
  @keyframes settle {
    from { opacity: 0.001; translate: 0 10px; rotate: 2deg; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .path { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .path li:nth-child(even) a { transform: rotate(1.5deg); }
  .cord { display: none; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teams { grid-template-columns: minmax(0, 1fr); }
  .explore__cross { width: 340px; height: 340px; right: -110px; opacity: 0.5; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 132px; }
  .nav { display: none; }
  .masthead { padding-bottom: 20px; }
  .nav-row {
    display: flex; gap: 4px;
    max-width: var(--wrap); margin: 8px auto 0;
    overflow-x: auto; scrollbar-width: none;
    font-size: var(--cch-text-xs); letter-spacing: 0.2em; text-transform: uppercase;
  }
  .nav-row::-webkit-scrollbar { display: none; }
  .nav-row a {
    flex: none; display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 12px;
    color: var(--cch-ink); text-decoration: none;
  }
  .nav-row a:first-child { padding-left: 0; }
  .collage { min-height: 520px; }
  .times { grid-template-columns: minmax(0, 1fr); gap: var(--cch-space-5); }
}

@media (max-width: 640px) {
  .band { padding-block: var(--cch-space-6); }
  .band--torn { padding-top: calc(var(--cch-space-6) + 14px); }
  .masthead__logo img { height: 40px; }
  .eyebrow::after { display: none; }
  .collage { min-height: 0; display: flex; flex-direction: column; gap: var(--cch-space-4); }
  .collage__photo, .collage__verse { position: relative; inset: auto; width: 100%; max-width: 360px; }
  .collage__verse { align-self: flex-start; width: 300px; margin-top: -50px; }
  .collage__stamp { display: none; }
  .path, .stages, .early, .prints { grid-template-columns: minmax(0, 1fr); }
  .path { padding-left: 22px; }
  .path::before {
    content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 6px;
    background: repeating-linear-gradient(-35deg, var(--cch-taupe) 0 5px, var(--cch-sepia) 5px 7px);
  }
  .pathway { margin-top: -40px; }
  .road { height: 160px; }
  .faq dl > div, .term li, .give-details dl > div, .teams li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .teams p { grid-column: 1; }
  .sermon { grid-template-columns: minmax(0, 1fr); }
  .sermon i { grid-column: 1; }
  .form { padding: 28px 20px 26px; }
  .explore__cross { width: 240px; height: 240px; right: -90px; top: -20px; opacity: 0.35; }
  .explore__text { padding-right: 0; }
  .belong__rope { width: 420px; height: 420px; left: -220px; }
}