/* ===========================================================================
   Things Exist — site.css
   Static rebuild, 2026-09-17. One stylesheet for six pages.

   Consolidated from globals.css + pages.css + home.css. Dead rules removed:
   landing-split.css entirely (0 of 4 classes used), the previous homepage
   design in globals.css (30 of 36 unused), the /watch and /faces styles in
   pages.css, and the subscribe-form styles. Tailwind import dropped — nothing
   used it. Duplicated override blocks flattened; last-wins order preserved.

   Type: Georgia carries the design. Body sans is a system stack — the old
   build pulled Geist from Google Fonts, which was an external request doing
   almost no visible work.
   =========================================================================== */

:root{
  /* TYPE, 2026-10-04. Fewer sizes, each with one job.
     Headings: three ranks (d1, d3, d5) plus one exception (d2).
     Text: one reading size (t1) for every paragraph on the site, cards and
     story included, and one step up (d6) for lists, quotes and setup lines.
     If a new element seems to need its own size, it doesn't. */
  --d1:clamp(62px,8.6vw,132px);  /* page headline. EXACTLY ONE PER PAGE. */
  --d2:clamp(52px,7vw,104px);    /* ONE use only: the plot-twist line on the homepage */
  --d3:clamp(40px,5.6vw,82px);   /* section heading */
  --d5:clamp(27px,3vw,44px);     /* card heading, lead line, the three premises */
  --d6:clamp(21px,1.9vw,27px);   /* one step above reading: lists, quotes, setup lines */

  --t1:clamp(19px,1.55vw,22px);  /* READING. Every paragraph. */
  --t2:18px;                     /* footer tagline only */
  --t3:15px;                     /* card numerals */
  --t4:13px;                     /* footer links, UI */
  --t5:11px;                     /* micro label, letter-spaced */

  --sec:clamp(78px,9vw,120px);   /* section vertical rhythm - one value, everywhere */
  --gut:clamp(20px,6.5vw,100px); /* section gutter - one value, so left edges line up */

  --paper:#f1eee4;
  --ink:#171713;
  --rust:#c85135;                /* accent on PAPER only: h1 tails, card quotes */
  --brick:#a3412a;               /* ground for the Jesus bands. Paper on brick 5.4:1.
                                    Never put ochre on brick or rust (2.6:1). */
  --ochre:#e1c45a;
  --line:#b9b1a5;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Reading prose is the serif. Sans is for chrome only: nav, footer links,
   buttons, letter-spaced labels, and the two muted setup lines that are told
   apart from their neighbours by face (.heck-question__lead,
   .gospel-first-steps>p). 2026-10-03. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif)}
h1,h2,h3,blockquote{text-wrap:balance}
/* One accent, not a formula. The coloured italic tail belongs to each page's
   h1 and to the plot-twist line - nowhere else. 2026-10-03. */
h2 em{font-style:normal;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* --------------------------------------------------------------- chrome -- */

.wordmark{display:block;width:132px;flex:0 0 auto;line-height:0}
.wordmark img{display:block;width:100%;height:auto}

/* Header, 2026-10-04. Sticky, so the way around is always one glance away.
   Nav at reading size (17px), not caption size. Primary pages left of a rule,
   the two places that leave the site right of it, marked with the external
   arrow. Where the browser supports scroll-driven animation, the logo starts
   large and settles to a compact size once you scroll; elsewhere it sits at
   the compact size and nothing moves. */
html{scroll-padding-top:120px}
.site-header{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo main out";
  align-items:center;column-gap:clamp(24px,3vw,40px);
  padding:14px clamp(22px,5vw,72px);
  background:var(--paper);border-bottom:1px solid var(--line);
  font:500 17px/1.2 var(--sans);
}
.site-header .wordmark{grid-area:logo;width:116px}
.site-header nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.site-header nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.site-header nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.site-header .nav-main{grid-area:main;justify-self:end}
.site-header .nav-out{grid-area:out;padding-left:clamp(18px,2.4vw,34px);border-left:1px solid var(--line);color:#171713c7}
.site-header nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}

@supports (animation-timeline: scroll()){
  .site-header{animation:hdr-settle linear both;animation-timeline:scroll(root);animation-range:0 180px}
  .site-header .wordmark{width:156px;animation:logo-settle linear both;animation-timeline:scroll(root);animation-range:0 180px}
}
@keyframes hdr-settle{from{padding-block:22px}to{padding-block:10px}}
@keyframes logo-settle{to{width:104px}}

.button{display:inline-flex;align-items:center;gap:15px;border-radius:4px;padding:14px 19px;font:700 16px/1.2 var(--sans)}
.button--ink{background:var(--ink);color:var(--paper)}
.button--paper{background:var(--paper);color:var(--ink)}

footer{
  min-height:240px;padding:45px clamp(24px,5vw,72px);gap:40px;
  display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid var(--line);font:var(--t4)/1.5 var(--sans);
}
footer>p{font:italic var(--t2)/1.4 var(--serif)}
footer>div{display:flex;flex-direction:column;gap:10px;text-align:right}

/* Narrow screens: two rows. Logo and the two outside links on top, the three
   pages across the full width beneath. Nothing hidden behind a menu button. */
@media(max-width:820px){
  html{scroll-padding-top:130px}
  .site-header{grid-template-columns:auto 1fr;grid-template-areas:"logo out" "main main";row-gap:4px;padding:10px 18px 4px;font-size:16px}
  .site-header .wordmark,.site-header .wordmark{width:78px}
  .site-header .nav-main{justify-self:stretch;justify-content:space-between}
  .site-header .nav-out{justify-self:end;border-left:0;padding-left:0;gap:18px;font-size:15px}
}
@supports (animation-timeline: scroll()){
  @media(max-width:820px){
    .site-header .wordmark{width:88px;animation-name:logo-settle-sm}
    .site-header{animation-name:hdr-settle-sm}
  }
}
@keyframes logo-settle-sm{to{width:62px}}
@keyframes hdr-settle-sm{from{padding-top:14px}to{padding-top:8px}}
@media(max-width:520px){
  footer{align-items:flex-start;flex-direction:column;gap:30px}
  footer>div{text-align:left}
}

/* ================================================================= HOME == */

.story-opening{padding:var(--sec) var(--gut);background:var(--paper)}
.story-opening__copy h1{margin:0;font:var(--d1)/.85 var(--serif);letter-spacing:-.065em}
.story-opening__copy h1 em{display:block;color:var(--rust)}
/* The hero photograph is no longer full width. The lead line holds the left
   spine with every other section; the picture takes the right column at a bit
   under half the area it used to have. */
/* 2026-10-03: the old second section ("Let me tell you what happened") is
   folded in here. The story runs down the left beside the photograph, which
   holds in view while it is read. */
.story-opening__lower{
  margin-top:clamp(34px,4.5vw,58px);display:grid;
  grid-template-columns:1.15fr 1fr;grid-template-rows:auto 1fr;
  grid-template-areas:"lead image" "told image";
  column-gap:clamp(28px,4.5vw,64px);row-gap:clamp(26px,3vw,40px);align-items:start;
}
.story-opening__lead{grid-area:lead;max-width:15em;margin:0;font:italic var(--d5)/1.15 var(--serif)}
.story-opening__told{grid-area:told;max-width:730px}
.story-opening__told p{margin:0 0 .9em;font:var(--t1)/1.6 var(--serif)}
.story-opening__told p:last-child{margin-bottom:0}
.story-opening__image{grid-area:image;position:sticky;top:128px;margin:0;overflow:hidden;background:var(--ink);aspect-ratio:4/3}
.story-opening__image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}

.video-story__frame{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--ink);color:var(--paper);box-shadow:0 24px 60px #332d251f}
.video-story__frame:before{content:"";position:absolute;inset:18px;border:1px solid #f3eee433;pointer-events:none}
.video-story__play{width:clamp(74px,8vw,112px);height:clamp(74px,8vw,112px);display:grid;place-items:center;padding-left:8px;border:1px solid var(--ochre);border-radius:50%;color:var(--ochre);font-size:var(--d5)}
.video-story__frame p{margin:28px 0 9px;font:700 var(--t5) var(--sans);letter-spacing:.18em}
.video-story__frame small{font:italic var(--t3) var(--serif);color:#f3eee499}

.common-ground{padding:var(--sec) var(--gut) 0;background:var(--ink);color:var(--paper)}
.common-ground__intro{margin-bottom:70px}
.common-ground__intro h2{margin:0;font:var(--d3)/.95 var(--serif);letter-spacing:-.055em}
.common-ground__intro>p:last-child{margin:22px 0 0;font:italic var(--d6)/1.35 var(--serif);color:#f3eee4b8}

.argument-list{border-top:1px solid #f3eee45c;border-bottom:1px solid #f3eee45c}
.argument-list p{
  min-height:120px;margin:0;padding:26px 0;
  display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;
  font:var(--d5)/1.12 var(--serif);letter-spacing:-.03em;
}
.argument-list p+p{border-top:1px solid #f3eee433}
.argument-list .argument-number{align-self:start;padding-top:9px;font:italic var(--t1) var(--serif);color:var(--ochre)}
.argument-list .argument-copy{align-self:auto;padding:0;font:inherit;letter-spacing:inherit;color:inherit}
.argument-list em{color:inherit}

/* Two quiet lines bracketing one loud one: setup and pivot share rank d6 and
   are told apart by colour and face (setup italic and muted, pivot roman),
   not by another size. All three setup lines on the site share one style. Cadence carries the
   grouping - small gap under the setup (it leads INTO the question), large gap
   under the question, tight leading inside the closing pair so it reads as one
   aside. Brief Rev 02 §7: the pivot opens the category of personhood without
   asserting it. Provocation, not declaration - so it never grows. */
.heck-question{padding:88px 0 100px}
.heck-question p{margin:0}
.heck-question__lead{max-width:34em;font:italic var(--d6)/1.35 var(--serif);color:#f3eee4b8}
.heck-question__ask{margin-top:26px!important;font:var(--d3)/1 var(--serif);letter-spacing:-.045em;color:var(--ochre)}
.heck-question p.heck-question__pivot{margin-top:64px!important;font:var(--d6)/1.18 var(--serif);letter-spacing:-.015em;color:var(--paper)}

.open-questions{padding:var(--sec) var(--gut);background:var(--paper)}
.open-questions header{}
.open-questions h2{margin:0;font-size:var(--d3);font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.05em}
/* SHARED COMPONENT. Same numeral treatment as the argument list above: t1
   italic numeral, one step down in the copy. Also used by .gospel-first-steps.
   Two lists anywhere on this site should not look like two systems. */
.question-list{margin-top:64px;border-top:1px solid var(--ink)}
.question-list article{min-height:112px;padding:22px 0;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;border-bottom:1px solid var(--ink)}
.question-list span{align-self:start;padding-top:7px;font:italic var(--t1) var(--serif)}
.question-list p{margin:0;font:var(--d6)/1.3 var(--serif);letter-spacing:-.02em}

.jesus-invitation{padding:var(--sec) var(--gut);background:var(--brick);color:var(--paper)}
.jesus-invitation__bridge{max-width:1080px;margin:32px 0 0;font:var(--d5)/1.14 var(--serif);letter-spacing:-.03em}
.jesus-invitation__bridge em{font-style:italic}
.jesus-invitation__bridge+blockquote{margin-top:30px}
.jesus-invitation>blockquote{max-width:1380px;margin:35px 0 80px;font:var(--d2)/.88 var(--serif);letter-spacing:-.06em}
.jesus-invitation>blockquote em{font-style:italic}
.jesus-invitation__body{max-width:690px;margin-left:auto}
.jesus-invitation__body p{font-size:var(--t1);line-height:1.6}
.jesus-invitation__body .button{margin-top:22px}

.keep-talking{padding:var(--sec) var(--gut);display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:end}
.keep-talking h2{margin:24px 0 0;font:var(--d3)/.86 var(--serif);letter-spacing:-.06em}
.keep-talking__form>p{max-width:640px;margin:0 0 35px;font-size:var(--t1);line-height:1.6}

@media(max-width:900px){
  .keep-talking{grid-template-columns:1fr}
  .story-opening__lower{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"lead" "image" "told";row-gap:38px}
  .story-opening__image{position:static}
  .story-opening__lead{max-width:22em}
  .jesus-invitation__body{margin-left:0}
}
@media(max-width:560px){
  .video-story__frame:before{inset:10px}
  .argument-list p{min-height:104px;grid-template-columns:46px 1fr;gap:14px}
  .heck-question p.heck-question__pivot{margin-top:40px}
  .question-list article{min-height:96px;grid-template-columns:46px 1fr;gap:14px}
}

/* ======================================================= SHARED PAGE INTRO == */
/* Start Here and the long-form essay were removed 2026-09-20 (they restated
   the homepage). Their styles went with them. .page-intro stays: about.html
   uses it. */

.page-intro{min-height:650px;padding:var(--sec) var(--gut);display:flex;flex-direction:column;justify-content:center}
.page-intro h1{max-width:1200px;margin:24px 0 35px;font:var(--d1)/.86 var(--serif);letter-spacing:-.065em}
.page-intro h1 em{color:var(--rust)}
.page-intro>p:last-child{max-width:700px;margin-left:auto;font-size:var(--t1);line-height:1.55}

/* =============================================================== JESUS === */

.jesus-page__hero{min-height:680px;padding:var(--sec) var(--gut);display:flex;flex-direction:column;justify-content:center}
.jesus-page__hero h1{margin:25px 0 42px;font:var(--d1)/.84 var(--serif);letter-spacing:-.065em}
.jesus-page__hero h1 em{display:block;color:var(--rust)}
.jesus-page__hero>p:last-child{max-width:700px;margin-left:auto;font:var(--t1)/1.6 var(--serif)}

.jesus-page__opening{padding:var(--sec) var(--gut);display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;background:var(--ink);color:var(--paper)}
.jesus-page__opening blockquote{margin:0;font:var(--d3)/.92 var(--serif);letter-spacing:-.05em;color:var(--ochre)}
.jesus-page__opening>div{max-width:620px;font-size:var(--t1);line-height:1.65}

.jesus-page__questions{padding:var(--sec) var(--gut)}
.jesus-page__questions>header{display:block}
.jesus-page__questions h2{margin:0;font:var(--d3)/.88 var(--serif);letter-spacing:-.055em}
.jesus-page__questions>div{display:grid;grid-template-columns:repeat(2,1fr);margin-top:80px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.jesus-page__questions article{min-height:390px;padding:32px;display:flex;flex-direction:column;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.jesus-page__questions article>span{font:italic var(--t3) var(--serif)}
.jesus-page__questions h3{margin:60px 0 22px;font:var(--d5)/1.02 var(--serif);letter-spacing:-.03em}
.jesus-page__questions article>p{max-width:540px;margin-top:auto;font-size:var(--t1);line-height:1.6}

.jesus-page__claims article{min-height:445px}
.jesus-page__claims h3{margin-top:45px;margin-bottom:0}
.jesus-page__claims article blockquote{margin:24px 0 0;font:italic var(--d6)/1.18 var(--serif);letter-spacing:-.02em;color:var(--brick)}  /* brick, not rust: passes at phone size */
.jesus-page__claims article blockquote cite{display:block;margin-top:12px;font:700 var(--t5)/1 inherit;font-style:normal;letter-spacing:.17em;color:var(--ink);opacity:.72}
.jesus-page__claims article>p{margin-top:24px}
.jesus-page__claims>p.claims-after{max-width:760px;margin:60px 0 0 auto;font-size:var(--t1);line-height:1.65}
.jesus-page__listen{padding:var(--sec) var(--gut);display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;background:var(--brick);color:var(--paper)}
.jesus-page__listen h2{margin:24px 0 0;font:var(--d3)/.9 var(--serif);letter-spacing:-.05em}
.jesus-page__listen>div:last-child{max-width:680px;font-size:var(--t1);line-height:1.65}
.jesus-page__listen .button{margin-top:25px}

@media(max-width:900px){
  .jesus-page__opening,.jesus-page__listen{grid-template-columns:1fr}
  .jesus-page__claims>p.claims-after{margin-left:0}
  .jesus-page__hero>p:last-child{margin-left:0}
  .jesus-page__questions>div{grid-template-columns:1fr}
  .jesus-page__opening{gap:50px}
}
@media(max-width:560px){
  .jesus-page__hero{min-height:570px}
  .jesus-page__questions>div{margin-top:55px}
  .jesus-page__questions article{min-height:340px;padding:25px 20px}
  .jesus-page__claims article{min-height:400px}
  .jesus-page__questions h3{margin-top:55px}
}

/* ============================================================== GOSPEL === */

.gospel-hero{min-height:720px;padding:var(--sec) var(--gut);display:flex;flex-direction:column;justify-content:center}
.gospel-hero h1{margin:25px 0 40px;font:var(--d1)/.83 var(--serif);letter-spacing:-.07em}
.gospel-hero h1 em{display:block;color:var(--rust)}
.gospel-hero>p:last-child{max-width:700px;margin-left:auto;font:var(--t1)/1.6 var(--serif)}

.gospel-opening{padding:var(--sec) var(--gut);background:var(--ink);color:var(--paper)}
.gospel-opening blockquote{margin:35px 0 60px;font:var(--d3)/.9 var(--serif);letter-spacing:-.05em;color:var(--ochre)}
.gospel-opening>p:last-child{max-width:660px;margin-left:auto;font-size:var(--t1);line-height:1.65}

.gospel-movements{display:grid;grid-template-columns:repeat(2,1fr)}
.gospel-movements article{min-height:500px;padding:52px var(--gut);display:flex;flex-direction:column;border:1px solid var(--line)}
.gospel-movements span{font:700 var(--t5) var(--sans);letter-spacing:.15em}
.gospel-movements h2{margin:70px 0 22px;font:var(--d5)/1.02 var(--serif);letter-spacing:-.03em}
.gospel-movements p{max-width:580px;margin-top:auto;font-size:var(--t1);line-height:1.6}

.gospel-response{padding:var(--sec) var(--gut);display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;background:var(--brick);color:var(--paper)}
.gospel-response h2{margin:25px 0;font:var(--d3)/.9 var(--serif);letter-spacing:-.05em}
.gospel-response>div:last-child{max-width:700px}
.gospel-response>div:last-child>p{font:var(--t1)/1.65 var(--serif)}
.gospel-response blockquote{margin:45px 0;padding:35px;border-left:5px solid var(--ochre);background:var(--paper);color:var(--ink);font:italic var(--d6)/1.3 var(--serif)}

/* The page used to end on a prayer and then a newsletter link. Someone who
   just prayed that needs somewhere to put their feet. */
.gospel-first-steps{padding:var(--sec) var(--gut);background:var(--paper)}
.gospel-first-steps h2{margin:0;font:var(--d3)/.95 var(--serif);letter-spacing:-.05em}
.gospel-first-steps>p{max-width:34em;margin:22px 0 0;font:italic var(--d6)/1.35 var(--serif);color:#171713bd}
.gospel-first-steps .question-list{margin-top:48px}
.gospel-first-steps>p.first-steps-after{max-width:34em;margin:40px 0 0;font:var(--t1)/1.6 var(--serif);color:var(--ink)}
.first-steps-after a{border-bottom:1px solid}

.gospel-next{padding:var(--sec) var(--gut);display:grid;grid-template-columns:.85fr 1.15fr;gap:75px;align-items:end}
.gospel-next h2{margin:23px 0 0;font:var(--d3)/.88 var(--serif);letter-spacing:-.055em}
.gospel-next>div:last-child>p{max-width:640px;margin:0 0 30px;font-size:var(--t1);line-height:1.6}

@media(max-width:900px){
  .gospel-response,.gospel-next{grid-template-columns:1fr}
  .gospel-movements{grid-template-columns:1fr}
  .gospel-movements article{min-height:390px}
  .gospel-hero>p:last-child,.gospel-opening>p:last-child{margin-left:0}
}
@media(max-width:560px){
  .gospel-hero,.gospel-opening,.gospel-response,.gospel-next{padding-left:18px;padding-right:18px}
  .gospel-hero{min-height:600px}
  .gospel-movements article{min-height:440px;padding:38px 20px}
  .gospel-movements h2{margin-top:60px}
}

/* =============================================================== ABOUT === */

.about-body{padding:var(--sec) var(--gut);display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}
.about-body h2{margin-top:0;font:var(--d5)/1.02 var(--serif);letter-spacing:-.03em}
.about-body div p{font:var(--t1)/1.65 var(--serif)}
.about-portrait{aspect-ratio:4/5;margin:0;overflow:hidden;background:var(--line)}
.about-portrait img{width:100%;height:100%;display:block;object-fit:cover}

.why-jesus{padding:var(--sec) var(--gut);background:var(--brick);color:var(--paper)}
.why-jesus blockquote{margin:30px 0;font:var(--d3)/.92 var(--serif);letter-spacing:-.05em}
.why-jesus blockquote em{font-style:italic}
.why-jesus>p{max-width:690px;margin-left:auto}
.why-jesus__lead{font-size:var(--t1);line-height:1.6}

/* ---------------------------------------------- shared page breakpoints -- */

@media(max-width:850px){
  .about-body{grid-template-columns:1fr}
  .page-intro>p:last-child{margin-left:0}
}