/* ============================================================
   Third Person Church — site styles
   Design system: Warm Pacific Naturalism
   You should not need to edit this file to change words on the site.
   ============================================================ */

:root {
  --canvas:  #FAF8F5;   /* page background (warm alabaster) */
  --ink:     #102A30;   /* primary text (deep spruce) */
  --river:   #5C6B6E;   /* secondary text (river stone) */
  --cascade: #4D6D7D;   /* accent: mountains & sky */
  --sage:    #6B8B77;   /* accent: evergreen */
  --chalk:   #FFFFFF;   /* card surfaces */
  --oat:     #E8E4DC;   /* hairline borders */
  --ink-hover: #1B3F47;
  --error:   #9B4B3F;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --site: 1200px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding-left: 0; }
[hidden] { display: none !important; }
::selection { background: rgba(77, 109, 125, 0.22); }
:focus-visible { outline: 2px solid var(--cascade); outline-offset: 2px; border-radius: 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; }
.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 60; transform: translateY(-300%); background: var(--ink); color: var(--canvas); padding: .5rem 1rem; border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip-link:focus { transform: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--site); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.section { padding: 5rem 0; scroll-margin-top: 6rem; }
.section--line { border-top: 1px solid var(--oat); }
.section--chalk { background: var(--chalk); border-top: 1px solid var(--oat); border-bottom: 1px solid var(--oat); }
.split { display: grid; gap: 3rem 2rem; }
.measure-sm { max-width: 42ch; } .measure { max-width: 50ch; } .measure-lg { max-width: 58ch; }
.center-sm { max-width: 28rem; margin-left: auto; margin-right: auto; width: 100%; }
@media (min-width: 640px) { .container { padding-left: 2rem; padding-right: 2rem; } .section { padding: 6rem 0; } }
@media (min-width: 1024px) {
  .container { padding-left: 3rem; padding-right: 3rem; }
  .section { padding: 8rem 0; }
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .split > * { grid-column: span 12; }
  .split--5-7 > :first-child { grid-column: span 5; } .split--5-7 > :last-child { grid-column: span 7; }
  .split--7-5 > :first-child { grid-column: span 7; } .split--7-5 > :last-child { grid-column: span 5; }
  .split--7-4 > :first-child { grid-column: span 7; } .split--7-4 > :last-child { grid-column: 9 / span 4; }
  .split--6-5 > :first-child { grid-column: span 6; } .split--6-5 > :last-child { grid-column: 8 / span 5; }
  .split--4-7 > :first-child { grid-column: span 4; } .split--4-7 > :last-child { grid-column: 6 / span 7; }
  .sticky { position: sticky; top: 7rem; }
  .center-sm { max-width: none; }
}

/* ---------- Spacing helpers ---------- */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem} .mt-7{margin-top:1.75rem} .mt-8{margin-top:2rem} .mt-10{margin-top:2.5rem} .mt-12{margin-top:3rem}
.mt-16{margin-top:4rem} .text-center{text-align:center} .ink{color:var(--ink)}

/* ---------- Type ---------- */
.tag { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.tag--river { color: var(--river); } .tag--sage { color: var(--sage); }
.tag--pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(107,139,119,.5); border-radius: 999px; padding: .25rem .75rem; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--sage); flex: none; }
.heading { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; letter-spacing: -.02em; line-height: 1.08; font-size: 2.25rem; }
.heading--hero { font-size: 2.75rem; line-height: 1.04; max-width: 15ch; }
.heading--page { font-size: 2.75rem; max-width: 16ch; }
.h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; font-size: 1.45rem; }
.h3--lg { font-size: 1.65rem; line-height: 1.2; }
.h3--md { font-size: 1.35rem; }
.h3--xl { font-size: 1.875rem; }
.h3--sans { font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.lead { font-size: 17px; line-height: 1.65; color: var(--river); }
.lead--lg { font-size: 18px; line-height: 1.6; }
.body { font-size: 15.5px; line-height: 1.65; color: var(--river); }
.small { font-size: 14px; line-height: 1.6; color: var(--river); }
.tiny { font-size: 13px; line-height: 1.5; color: var(--river); }
.strong { font-weight: 500; color: var(--ink); }
@media (min-width: 640px) {
  .heading { font-size: 3rem; } .heading--hero, .heading--page { font-size: 3.75rem; } .lead--lg { font-size: 20px; }
}
@media (min-width: 1024px) { .heading--hero { font-size: 4.5rem; } .heading--page { font-size: 4rem; } }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .875rem 1.5rem; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.25; transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.btn--primary { background: var(--ink); color: var(--canvas); }
.btn--primary:hover { background: var(--ink-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(16,42,48,.2); }
.btn--ghost:hover { border-color: rgba(16,42,48,.6); background: var(--chalk); }
.btn--sm { padding: .5rem 1rem; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: default; }
.btn-row { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .btn-row { flex-direction: row; } .btn-row--fit .btn { width: auto; } }
.text-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--oat); text-underline-offset: 4px; transition: text-decoration-color .2s ease-in-out; }
.text-link:hover { text-decoration-color: var(--ink); }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--oat); background: rgba(250,248,245,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; }
.nav__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; border-radius: 6px; }
.nav__brand img { height: 40px; width: auto; }
.nav__wordmark { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--ink); }
.nav__loc { display: none; }
.nav__links { display: none; align-items: center; gap: 1.75rem; }
.nav__links > a:not(.btn) { font-size: 15px; font-weight: 500; color: var(--river); text-decoration: none; transition: color .2s ease-in-out; }
.nav__links > a:not(.btn):hover { color: var(--ink); }
.nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s ease-in-out; }
.nav__toggle:hover { background: var(--chalk); }
.nav__menu { border-top: 1px solid var(--oat); background: var(--canvas); }
.nav__menu .container { display: flex; flex-direction: column; padding-top: .75rem; padding-bottom: .75rem; }
.nav__menu a:not(.btn) { padding: .75rem .25rem; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; transition: color .2s ease-in-out; }
.nav__menu a:not(.btn):hover { color: var(--river); }
.nav__menu .btn { margin: .5rem 0; }
@media (min-width: 768px) { .nav__links { display: flex; } .nav__toggle, .nav__menu { display: none !important; } }
@media (min-width: 1024px) { .nav__loc { display: block; } }

/* ---------- Hero & page intros ---------- */
.hero { position: relative; overflow: hidden; }
.hero__grid { position: relative; z-index: 10; display: grid; gap: 0 2rem; padding-top: 4rem; padding-bottom: 6rem; }
.hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; color: var(--sage); }
.hero__mark { display: flex; align-items: flex-end; justify-content: center; margin-top: 3.5rem; }
.hero__mark-inner { transform: translateY(3.5rem); }
.hero__mark img { width: 9rem; }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 10rem; pointer-events: none; }
.horizon--sm { height: 6rem; }
.page-intro { position: relative; overflow: hidden; border-bottom: 1px solid var(--oat); }
.page-intro .container { position: relative; z-index: 10; padding-top: 3.5rem; padding-bottom: 6rem; }
@media (min-width: 640px) {
  .hero__grid { padding-top: 6rem; } .hero__mark img { width: 11rem; } .horizon { height: 12rem; } .horizon--sm { height: 8rem; }
  .page-intro .container { padding-top: 5rem; }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 7fr 5fr; padding-top: 7rem; padding-bottom: 10rem; }
  .hero__mark { margin-top: 0; justify-content: flex-end; } .hero__mark-inner { transform: translateY(6rem); } .hero__mark img { width: 15rem; }
  .horizon { height: 16rem; } .horizon--sm { height: 8rem; }
  .page-intro .container { padding-bottom: 8rem; }
}
@media (min-width: 1280px) { .hero__mark img { width: 17rem; } }
.hero-in { opacity: 0; transform: translateY(14px); animation: settle .9s cubic-bezier(.2,.7,.2,1) .05s forwards; }
.hero-in--late { animation-delay: .28s; }
@keyframes settle { to { opacity: 1; transform: none; } }

/* ---------- Cards, lists, quotes ---------- */
.card { background: var(--chalk); border: 1px solid var(--oat); border-radius: 1rem; padding: 1.75rem; }
.card--canvas { background: var(--canvas); }
.cards { display: grid; gap: 1rem; }
.cards .card { display: flex; flex-direction: column; }
.cards .h3 { margin-top: 2.5rem; }
.rule-list { border-top: 1px solid var(--oat); border-bottom: 1px solid var(--oat); }
.rule-list > * { border-top: 1px solid var(--oat); }
.rule-list > :first-child { border-top: 0; }
.rule-list--pairs > * { display: grid; gap: .75rem; padding: 2rem 0; }
.rule-list--stack > * { padding: 1rem 0; }
.rule-list--faq > * { padding: 1.5rem 0; }
.rule-list--dots > li { display: flex; gap: 1rem; padding: 1.25rem 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.rule-list--dots .dot { margin-top: 11px; }
.rule-list--done > li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; font-size: 15px; color: var(--ink); }
.grid-2 { display: grid; gap: 2rem; }
.grid-2 > li { border-top: 1px solid var(--oat); padding-top: 2rem; }
.grid-3 { display: grid; gap: 2rem; }
.grid-3 > li { border-top: 1px solid var(--oat); padding-top: 1.5rem; }
.prose-display { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.65; color: var(--ink); max-width: 58ch; }
.prose-display > p + p { margin-top: 1.5rem; }
.pull { margin-top: 5rem; border-left: 2px solid var(--sage); padding-left: 1.5rem; }
.pull blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.35; letter-spacing: -.01em; max-width: 44ch; }
.signature { margin-top: 2.5rem; border-top: 1px solid var(--oat); padding-top: 1.5rem; }
.signature__name { font-family: var(--font-display); font-style: italic; font-size: 1.875rem; line-height: 1; letter-spacing: -.02em; }
.details { border-top: 1px solid var(--oat); border-bottom: 1px solid var(--oat); }
.details > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--oat); }
.details > div:first-child { border-top: 0; }
.details dd .strong { font-size: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
@media (min-width: 640px) {
  .card--lg { padding: 2.5rem; }
  .cards--3 .h3 { margin-top: 2.5rem; }
  .rule-list--pairs > * { grid-template-columns: minmax(0, 15rem) 1fr; gap: 2rem; }
  .rule-list--pairs.narrow-14 > * { grid-template-columns: minmax(0, 14rem) 1fr; }
  .rule-list--pairs.narrow-12 > * { grid-template-columns: minmax(0, 12rem) 1fr; }
  .rule-list--pairs.narrow-11 > * { grid-template-columns: minmax(0, 11rem) 1fr; }
  .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose-display { font-size: 1.3rem; }
  .pull { margin-top: 6rem; padding-left: 2rem; } .pull blockquote { font-size: 1.85rem; }
}
@media (min-width: 768px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .card--lg { padding: 3rem; } .cards--3 .card { padding: 2rem; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pull { margin-left: 41.67%; }
  .bio { padding-top: 4.75rem; }
}

/* ---------- Portrait (pastor photo) ---------- */
.portrait { position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; border-radius: 1rem; border: 1px solid var(--oat); background: var(--chalk); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__empty { display: none; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; text-align: center; }
.portrait__empty img { height: 3.5rem; width: auto; opacity: .6; }
.portrait.is-empty .portrait__empty { display: flex; }

/* ---------- Form ---------- */
.form { border: 1px solid var(--oat); border-radius: 1rem; background: var(--canvas); }
.form__intent { display: none; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--oat); padding: .75rem 1.5rem; }
.form.has-intent .form__intent { display: flex; }
.form__intent button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--river); cursor: pointer; transition: color .2s ease-in-out; }
.form__intent button:hover { color: var(--ink); }
.form__body { padding: 1.5rem; }
.fields { display: grid; gap: 1.25rem; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 500; color: var(--ink); }
.field label .opt { font-size: 12px; font-weight: 400; color: var(--river); }
.field input { margin-top: .5rem; width: 100%; border: 1px solid var(--oat); border-radius: .75rem; background: var(--chalk); padding: .75rem 1rem; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out; }
.field input::placeholder { color: rgba(92,107,110,.6); }
.field input:focus { outline: none; border-color: var(--cascade); box-shadow: 0 0 0 3px rgba(77,109,125,.25); }
.field.is-error input { border-color: var(--error); }
.field__error { display: none; margin-top: .375rem; font-size: 13.5px; color: var(--error); }
.field.is-error .field__error { display: block; }
fieldset { border: 0; padding: 0; margin: 2rem 0 0; min-width: 0; }
legend { padding: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.checks { display: grid; gap: .625rem; margin-top: .75rem; }
.check { display: flex; align-items: flex-start; gap: .75rem; border: 1px solid var(--oat); border-radius: .75rem; background: var(--chalk); padding: .875rem 1rem; cursor: pointer; transition: border-color .2s ease-in-out; }
.check:hover, .check:has(input:checked) { border-color: rgba(77,109,125,.6); }
.check input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--ink); }
.check span { font-size: 15px; line-height: 1.4; color: var(--ink); }
.form__alert { display: none; margin-top: 1.5rem; border: 1px solid var(--error); color: var(--error); border-radius: .75rem; padding: .75rem 1rem; font-size: 14px; line-height: 1.5; }
.form__alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form__alert.is-visible { display: block; }
.form__footer { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.form__done { display: none; }
.form.is-sent { background: var(--chalk); }
.form.is-sent .form__main, .form.is-sent .form__intent { display: none; }
.form.is-sent .form__done { display: block; padding: 1.75rem; }
.check-icon { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(107,139,119,.15); color: var(--sage); }
.form__done button { border: 0; background: none; font: inherit; padding: 0; cursor: pointer; }
@media (min-width: 640px) {
  .form__body { padding: 2rem; } .form__intent { padding-left: 2rem; padding-right: 2rem; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__footer { flex-direction: row; align-items: center; justify-content: space-between; } .form__footer .btn { min-width: 12rem; }
  .form.is-sent .form__done { padding: 2.5rem; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--canvas); }
.footer .container { padding-top: 4rem; padding-bottom: 4rem; }
.footer__grid { display: grid; gap: 3rem 2rem; }
.footer__cols { display: grid; gap: 2.5rem; }
.footer__lockup { width: 9rem; }
.footer p, .footer a, .footer li { font-size: 14px; line-height: 1.65; }
.footer__muted { color: rgba(250,248,245,.75); }
.footer__label { font-weight: 500; }
.footer ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.footer li + li { margin-top: .5rem; }
.footer a { color: rgba(250,248,245,.75); text-decoration: none; transition: color .2s ease-in-out; }
.footer a:hover { color: var(--canvas); }
.footer a.u { text-decoration: underline; text-decoration-color: rgba(250,248,245,.25); text-underline-offset: 4px; }
.footer a.u:hover { text-decoration-color: var(--canvas); }
.footer a:focus-visible { outline-color: rgba(250,248,245,.6); }
.footer__bottom { margin-top: 3.5rem; border-top: 1px solid rgba(250,248,245,.15); padding-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; font-size: 13px; color: rgba(250,248,245,.6); }
@media (min-width: 640px) {
  .footer .container { padding-top: 5rem; padding-bottom: 5rem; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: 4fr 8fr; } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-in { opacity: 1; transform: none; animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}