/* Placeholder palette and type for the first pass, modeled on Banner Seattle's restraint. Not The Well's brand. */
:root {
  --ground: #F5F3EE;
  --ink: #2E2D2A;
  --muted: #6B6A64;
  --line: #DEDAD0;
  --stone: #E8E4DA;
  --water: #CDD8DA;
  --accent: #A64A28;
  --sans: 'Figtree', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --pad: clamp(16px, 5vw, 64px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
h1, h2 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
h2 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 20px; }

.btn { display: inline-block; margin-top: 24px; padding: 14px 26px; border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 600; font-size: 15px; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.btn-light { background: var(--ground); color: var(--ink); }
.btn-quiet { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0 12px; }
.facts a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Nav split around a centered wordmark */
.nav { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px var(--pad); background: var(--ground); border-bottom: 1px solid var(--line); }
.nav-side { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-side a:hover { color: var(--muted); }
.nav-right { justify-content: flex-end; align-items: center; }
.nav-give { padding: 8px 18px; border: 1.5px solid var(--ink); border-radius: 999px; }
/* The lockup: the mark, then the name in one typeface */
.wordmark { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.wordmark .mark svg { width: 40px; height: 40px; display: block; }
.wm { font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }
.nav-side a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.nav-give[aria-current="page"] { background: var(--ink); color: var(--ground); text-decoration: none; }
.nav-toggle { display: none; justify-self: end; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }
.nav-drawer { position: sticky; top: var(--nav-h, 77px); z-index: 9; display: flex; flex-direction: column; background: var(--ground); border-bottom: 1px solid var(--line); padding: 8px var(--pad) 16px; }
.nav-drawer[hidden] { display: none; }
.nav-drawer a { padding: 12px 0; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--line); }

/* On the homepage the nav floats over the video, light on dark, and turns solid once you scroll. */
.has-hero .nav { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; color: var(--ground); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.has-hero .nav .nav-give { border-color: currentColor; }
.has-hero .nav .nav-toggle span { background: currentColor; }
.has-hero .nav .mark.tint .p-stone, .has-hero .nav .mark.tint .p-wave, .has-hero .nav .mark.tint .p-rope, .has-hero .nav .mark.tint .p-bucket { color: var(--ground); transition: color .35s var(--ease); }
.has-hero .nav.is-solid { background: var(--ground); color: var(--ink); border-bottom-color: var(--line); }
.has-hero .nav.is-solid .mark.tint .p-stone { color: var(--c-stone); }
.has-hero .nav.is-solid .mark.tint .p-wave { color: var(--c-water); }
.has-hero .nav.is-solid .mark.tint .p-rope, .has-hero .nav.is-solid .mark.tint .p-bucket { color: var(--ink); }
.has-hero .nav-drawer { position: fixed; left: 0; right: 0; top: var(--nav-h, 77px); }
.has-hero .nav-side a:hover { color: inherit; opacity: .7; }

/* The highlighted word: a running-water underline that draws in after the headline lands */
.hero-title .hl { position: relative; }
.hero-title .hl svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; }
.hero-title .hl path { fill: none; stroke: #8FBCC6; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hl-draw 1.2s var(--ease) 2.4s forwards; }
@keyframes hl-draw { to { stroke-dashoffset: 0; } }

/* Hero: a short mission line over the video. The line is a placeholder until Adam and Tara set theirs. */
.hero { position: relative; min-height: max(620px, 100svh); display: flex; align-items: stretch; overflow: hidden; color: var(--ground); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: rgba(28, 27, 25, .55); }
.hero-shade::after { content: ''; position: absolute; inset: auto 0 0; height: 60%; background: linear-gradient(rgba(20, 24, 26, 0), rgba(20, 24, 26, .5)); }
.hero-shade::before { content: ''; position: absolute; inset: 0 0 auto; height: 180px; background: linear-gradient(rgba(20, 24, 26, .55), rgba(20, 24, 26, 0)); }
/* The mark and headline sit just below center, where the eye lands; the gathering details anchor the bottom.
   Two auto margins split the free space, and the extra top padding nudges the headline a little below center. */
.hero-inner { position: relative; display: flex; flex-direction: column; text-shadow: 0 1px 2px rgba(15, 20, 22, .35), 0 4px 24px rgba(15, 20, 22, .45); padding: calc(var(--nav-h, 77px) + clamp(48px, 10vh, 120px)) var(--pad) clamp(28px, 5vh, 56px); width: 100%; }
.hero-inner > .hero-mark { margin-top: auto; }
.hero-inner > .hero-foot { margin-top: auto; }
.hero-mark { width: clamp(64px, 7vw, 92px); margin-bottom: clamp(20px, 3vh, 36px); --d: .15s; }
.hero-mark svg { width: 100%; height: auto; display: block; }
.hero-title { font-size: clamp(42px, 6.2vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; max-width: 17ch; text-wrap: balance; }
.hero-title em { letter-spacing: -0.01em; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 48px; padding-top: 20px; border-top: 1px solid rgba(245, 243, 238, .28); }
.hero-name { margin: 0; font-weight: 600; }
.hero-facts { display: flex; gap: 40px; flex-wrap: wrap; font-size: 16px; font-weight: 500; }
.hero-facts .label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-bottom: 2px; }
.hero .btn { margin-top: 0; text-shadow: none; }
.split .w { display: inline-block; animation: word-in 1s var(--ease) both; animation-delay: calc(1.25s + var(--i) * 45ms); }
@keyframes word-in { from { opacity: 0; filter: blur(10px); transform: translateY(.25em); } }

/* New here tiles */
.new-here { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tile { display: flex; align-items: center; gap: 18px; padding: 30px var(--pad); border-right: 1px solid var(--line); transition: background .2s; }
.tile:last-child { border-right: 0; }
.tile:hover { background: var(--stone); }
.tile-t { font-size: 20px; font-weight: 700; flex: 1; }
.tile-a { font-size: 20px; }

/* Scripture: each word lights as you read down to it */
.verse { padding: clamp(96px, 14vw, 200px) var(--pad); }
.verse-text { font-size: clamp(32px, 4.6vw, 64px); font-weight: 750; line-height: 1.1; letter-spacing: -0.025em; max-width: 24ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.verse-ref { margin: 28px 0 0; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Headline lines rise into place as they enter */
.rise .w { display: inline-block; }

/* Visit and Kids */
.visit, .kids { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.visit-photo img, .kids-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.visit-copy, .kids-copy { padding: clamp(48px, 7vw, 110px) var(--pad); align-self: center; max-width: 640px; }
.visit-copy p, .kids-copy p { color: var(--muted); }
.kids { background: var(--water); }
.kids .kids-copy p { color: color-mix(in srgb, var(--ink) 78%, var(--water)); }
.facts { display: flex; gap: 40px; margin: 24px 0 0; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; }

/* Connect: a list, read top to bottom */
.connect { padding: clamp(80px, 10vw, 140px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; align-items: start; }
.connect-list { border-top: 1.5px solid var(--ink); }
.connect-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding: 22px 20px; border-bottom: 1px solid var(--line); transition: background .2s; }
.connect-list a:hover { background: var(--stone); }
.c-t { font-size: 22px; font-weight: 700; }
.c-d { color: var(--muted); }

/* Photo strip */
.strip { overflow-x: auto; }
.strip-track { display: flex; gap: 6px; width: max-content; }
.strip img { width: clamp(220px, 24vw, 360px); aspect-ratio: 4 / 5; object-fit: cover; }

/* Sign-off: as it scrolls into view, the bucket goes down into the water */
.signoff { padding: clamp(80px, 12vw, 170px) var(--pad); text-align: center; }
.signoff-mark { width: clamp(120px, 16vw, 200px); margin: 0 auto 40px; }
.signoff-mark svg { width: 100%; height: auto; display: block; }
.signoff p { margin: 0; font-size: clamp(64px, 14vw, 220px); font-weight: 800; line-height: .9; letter-spacing: -0.04em; }
@supports (animation-timeline: view()) {
  .signoff-mark svg * { transform-box: fill-box; }
  .signoff-mark .p-rope { transform-origin: 50% 0; animation: well-rope linear both; animation-timeline: view(); animation-range: entry 25% cover 35%; }
  .signoff-mark .p-bucket { animation: sink linear both; animation-timeline: view(); animation-range: entry 25% cover 40%; }
  .signoff-mark .p-wave { stroke-dasharray: 1; animation: well-draw linear both; animation-timeline: view(); animation-range: entry 35% cover 45%; }
  @keyframes sink { from { transform: translateY(-34px); opacity: 0; } }
}

/* Inner pages: an intro beside the form or the ways to give */
.page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px); padding: clamp(56px, 8vw, 120px) var(--pad) clamp(80px, 10vw, 140px); align-items: start; }
.page-intro { position: sticky; top: 120px; }
.page-intro h1 { font-size: clamp(48px, 6.4vw, 92px); line-height: .98; letter-spacing: -0.035em; margin-bottom: 24px; }
.page-intro > p { color: var(--muted); font-size: 19px; max-width: 40ch; }
.page-mark { width: 120px; margin-top: 40px; }
.page-mark svg { width: 100%; height: auto; display: block; }
.facts.stack { flex-direction: column; gap: 18px; margin-top: 36px; }
.page-aside { margin-top: 28px; font-size: 16px; color: var(--muted); max-width: 40ch; }
.page-aside a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field > legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.field > span { margin-bottom: 0; }
.opt { font-weight: 400; color: var(--muted); margin-left: 6px; }
.field input, .field textarea { font: inherit; color: var(--ink); background: #fff8; border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px; width: 100%; transition: border-color .2s; }
.field textarea { resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #B3261E; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.check input:hover + span { border-color: var(--muted); }
.check input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.check input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.form .btn { justify-self: start; margin-top: 4px; border: 0; cursor: pointer; font-family: inherit; }
.form .btn:disabled { opacity: .55; cursor: progress; }
.form-status:empty { display: none; }
.form-status.is-error { margin: 0; padding: 12px 14px; border-radius: 10px; background: #F6E3E1; color: #8C1D18; font-size: 15px; }
.form-done { display: none; }
.form.is-sent > :not(.form-done) { display: none; }
.form.is-sent .form-done { display: block; outline: none; animation: word-in .8s var(--ease) both; }
.form-done h2 { font-size: clamp(40px, 5vw, 64px); }
.form-done p { color: var(--muted); font-size: 19px; }

.ways { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.way { padding: 28px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px 32px; align-items: start; }
.way h2 { font-size: 30px; margin: 0; }
.way p { margin: 0; color: var(--muted); }
.way .btn, .way .soon { grid-column: 2; margin-top: 12px; justify-self: start; }
.soon { font-weight: 600; color: var(--ink) !important; }
.give-verse { margin-top: 32px; font-size: 19px; line-height: 1.5; max-width: 40ch; }
.give-verse span { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.give-help { grid-column: 2; color: var(--muted); margin: -40px 0 0; }
.give-help a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Footer */
.footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 40px var(--pad); border-top: 1px solid var(--line); }
.legal { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.footer-links { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; flex-wrap: wrap; }
.social { display: inline-flex; padding: 4px; margin: -4px; border-radius: 6px; transition: color .2s; }
.social:hover { color: var(--c-water); }
.social svg { display: block; }

/* CSS scroll motion: the verse is read word by word, photos open like a door, the list rules draw in
   order, and the bucket lowers into running water at the end. The pinned sequences (hero and the photo
   strip) run on GSAP in scroll.js. Browsers without scroll timelines get the static page. */
@supports (animation-timeline: view()) {

  .scrub .w { animation: word-light linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
  @keyframes word-light { from { opacity: .16; } }

  .visit-photo img, .kids-photo img { animation: door-open linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes door-open { from { clip-path: inset(0 50% 0 50%); } }

  .connect-list a { position: relative; border-bottom-color: transparent; }
  .connect-list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform-origin: 0 50%; animation: rule-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
  .connect-list a > span { animation: row-in linear both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
  @keyframes rule-draw { from { transform: scaleX(0); } }
  @keyframes row-in { from { opacity: 0; transform: translateY(14px); } }


  .signoff-mark .p-water { animation: water-run linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
  @keyframes water-run { from { transform: translateX(-14px); } }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .hl path { animation: none; stroke-dashoffset: 0; }
  .split .w, .signoff-mark svg *, .hero-video, .hero-inner, .scrub .w, .visit-photo img, .kids-photo img,
  .connect-list a::after, .connect-list a > span, .strip-track { animation: none !important; }
  .strip { overflow-x: auto; }
}

@media (max-width: 960px) {
  .connect { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-side { display: none; }
  .nav-toggle { display: block; }
  .wm { font-size: 21px; }
  .wordmark .mark svg { width: 34px; height: 34px; }
  .new-here { grid-template-columns: 1fr; }
  .tile { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px var(--pad); }
  .tile:last-child { border-bottom: 0; }
  .visit, .kids { grid-template-columns: 1fr; }
  .kids-photo { order: -1; }
  .visit-photo img, .kids-photo img { min-height: 280px; }
  .connect-list a { grid-template-columns: 1fr; gap: 4px; }
  .page { grid-template-columns: 1fr; }
  .page-intro { position: static; }
  .form-row, .way { grid-template-columns: 1fr; }
  .way .btn, .way .soon, .give-help { grid-column: 1; }
  .give-help { margin: 0; }
  .page-mark { display: none; }
  .strip { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip img { width: 72vw; scroll-snap-align: start; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .facts, .hero-facts { gap: 28px; }
}