/* Westlake Bible Fellowship — the public site.

   The brief is the church's own sentence: "gathered together in New
   Testament simplicity". Simplicity here is a conviction and not a
   style, so the restraint has to look deliberate rather than
   unfinished - which is what the first pass looked like, because it
   was two designs at once. The home page was cream and serif; the
   archive underneath it was slate blue (#38506b) with its own greys
   and none of the tokens. Half the site did not know about the other
   half.

   Where the colour comes from: the mark in /brand/mark.svg is two
   figures with their arms raised, drawn in #166432. That green is the
   church's already, so it leads - as a field at the top of the page,
   not as a link colour. The quiet surface beneath it is pulled toward
   the same green rather than toward beige, which is what keeps the
   page off the warm-cream-and-serif look that every other church site
   arrives at. One accent, a brass, and it only ever marks a date.

   Deliberately absent: tracked-out capital labels above every heading,
   meta lines joined with middle dots, and arrows glued to link text.
   All three were here and all three are the reason it read as filler.
*/

/* ------------------------------------------------------------ tokens */
:root{
  --paper:#FFFFFF;
  --paper-2:#F0F3EE;        /* the quiet surface, pulled toward the green */
  --paper-3:#E6EBE3;
  --ink:#16231B;
  --ink-2:#45534A;
  --muted:#6E7A70;
  --line:#DDE3DB;
  --line-2:#C3CDC0;
  --green:#166432;          /* the mark's own green */
  --green-deep:#0C3F20;
  --green-soft:#E4EDE4;
  --wheat:#8C6414;          /* dates and events, nothing else */
  --wheat-soft:#F6EFDF;
  --measure:68ch;

  /* One family, everywhere. Andy, 2026-10-29: the masthead was a serif
     and the navigation beside it was a sans, which read as two fonts
     arguing, and he would rather the whole site were a sans with some
     character in it. Schibsted Grotesk sets tight and confident at
     display size and stays comfortable at 18px, so a heading and a
     paragraph are the same face at different settings rather than two
     faces. --serif is kept pointing at it because a dozen rules below
     still ask for it by name. */
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:var(--sans);

  --ground:var(--paper);    /* kept: older rules still reach for these */
  --surface:var(--paper);
  --surface-2:var(--paper-2);
  --accent:var(--green);
  --accent-soft:var(--green-soft);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#10140F; --paper-2:#191E17; --paper-3:#222820;
    --ink:#E9EDE4; --ink-2:#C2CABB; --muted:#8C9789;
    --line:#2A3127; --line-2:#3A4336;
    --green:#7FB08E; --green-deep:#0A2A16; --green-soft:#17211A;
    --wheat:#D7AE63; --wheat-soft:#241D10;
    --ground:var(--paper); --surface:var(--paper); --surface-2:var(--paper-2);
    --accent:var(--green); --accent-soft:var(--green-soft);
  }
}
:root[data-theme="dark"]{
  --paper:#10140F; --paper-2:#191E17; --paper-3:#222820;
  --ink:#E9EDE4; --ink-2:#C2CABB; --muted:#8C9789;
  --line:#2A3127; --line-2:#3A4336;
  --green:#7FB08E; --green-deep:#0A2A16; --green-soft:#17211A;
  --wheat:#D7AE63; --wheat-soft:#241D10;
  --ground:var(--paper); --surface:var(--paper); --surface-2:var(--paper-2);
  --accent:var(--green); --accent-soft:var(--green-soft);
}

/* -------------------------------------------------------------- base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  font-size:18px; line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.wrap-tight{max-width:760px; margin:0 auto; padding:0 24px}

/* Tight and light rather than big and bold: the elegance in a
   grotesque at display size comes from the tracking, not the weight. */
h1,h2,h3{margin:0; line-height:1.1; text-wrap:balance; font-weight:500;
         letter-spacing:-.03em}
h1{font-size:clamp(2.05rem,4.8vw,3.3rem); letter-spacing:-.035em}
h2{font-size:clamp(1.45rem,2.7vw,2rem)}
h3{font-size:1.15rem; letter-spacing:-.02em}
p{margin:0; max-width:var(--measure)}
p + p{margin-top:.85em}
a{color:var(--green); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:2px}
img{max-width:100%}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden;
         clip:rect(0 0 0 0); white-space:nowrap}

/* Small functional type: navigation, times, filters, counts. Anything a
   person reads a sentence of stays in the serif. */
.ui{font-family:var(--sans); font-size:.86rem; letter-spacing:0}

/* ---------------------------------------------------------- masthead */
header.top{background:var(--paper); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; justify-content:space-between;
        gap:20px; padding:16px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand img{width:87px; height:auto; display:block; flex:0 0 auto}
.brand b{font-weight:500; font-size:1.06rem; letter-spacing:-.01em; display:block}
.brand small{display:block; font-family:var(--sans); font-size:.74rem;
             color:var(--muted); margin-top:1px}
nav.main{display:flex; gap:20px; flex-wrap:wrap; font-family:var(--sans); font-size:.88rem}
nav.main a{text-decoration:none; color:var(--ink-2); padding:3px 0;
           border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current]{color:var(--ink); border-bottom-color:var(--green)}

/* ------------------------------------------------------------- hero

   The green field. Below the invitation, the three meetings set large,
   because "when do you meet and can I just turn up" is the whole of
   what a first-time visitor came to find out, and making them scroll
   for it is the one real failure available on this page. */
.hero{
  background:var(--green-deep); color:#FFFFFF;
  padding:clamp(56px,8vw,104px) 0 0;
}
.hero h1{color:#FFFFFF; max-width:16ch}
.hero .lede{
  color:#D7E4D6; margin-top:20px; max-width:50ch;
  font-size:clamp(1.08rem,1.9vw,1.3rem);
}
.hero a{color:#FFFFFF}

.meets{
  display:grid; gap:0 36px; grid-template-columns:1fr;
  margin-top:clamp(40px,6vw,72px);
  border-top:1px solid rgba(255,255,255,.22);
}
@media(min-width:760px){ .meets{grid-template-columns:repeat(3,1fr)} }
.meets > div{padding:22px 0 26px; border-bottom:1px solid rgba(255,255,255,.12)}
@media(min-width:760px){ .meets > div{border-bottom:0; padding-bottom:clamp(34px,5vw,54px)} }
.meets .day{font-family:var(--sans); font-size:.8rem; color:#A9C4AC; display:block}
.meets .at{
  display:block; font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1.05;
  color:#FFFFFF; font-weight:500; letter-spacing:-.035em;
  margin-top:4px; font-variant-numeric:lining-nums tabular-nums;
}
.meets .what{display:block; margin-top:8px; color:#E4EFE3; font-size:1.02rem}
.meets .sub{display:block; margin-top:3px; color:#9FBCA3; font-size:.9rem; max-width:26ch}

/* Short hero for the inner pages: same field, no notice board. */
.hero.slim{padding-bottom:clamp(40px,6vw,72px)}
.hero.slim .lede{margin-bottom:0}

/* The archive and the directories open straight into `main.wrap` with
   no hero, and had no vertical padding at all, so the heading sat hard
   against the masthead rule. */
main.wrap{padding-top:clamp(34px,5vw,58px); padding-bottom:clamp(48px,7vw,86px)}
main.wrap > h1{margin-bottom:.5rem}
main.wrap > .lede{margin-bottom:1.4rem}

/* ---------------------------------------------------------- sections */
section.band{padding:clamp(44px,6vw,80px) 0}
section.band + section.band{border-top:1px solid var(--line)}
section.band.tinted{background:var(--paper-2); border-top:1px solid var(--line)}
.stack{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.grid{display:grid; gap:28px; grid-template-columns:1fr}
@media(min-width:760px){
  .grid.two{grid-template-columns:1fr 1fr; gap:48px}
  .grid.three{grid-template-columns:repeat(3,1fr)}
}

/* A heading with a rule that runs to the end of the line: the structure
   the capital-letter labels used to carry, without shouting it. */
.rule-head{display:flex; align-items:baseline; gap:18px; margin-bottom:26px}
.rule-head::after{content:""; flex:1; height:1px; background:var(--line)}
.rule-head h2{flex:0 0 auto}
.rule-head .count{font-family:var(--sans); font-size:.86rem; color:var(--muted);
                  flex:0 0 auto; order:3}

.welcome p{font-size:1.08rem; color:var(--ink-2)}
.welcome p:first-child{font-size:1.22rem; color:var(--ink)}

/* ------------------------------------------------------- the conference
   The one place the brass is allowed. A date is the only thing on this
   site worth a second colour. */
.feature{
  background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--wheat); border-radius:3px;
  padding:clamp(22px,3vw,34px);
}
.feature .when{
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  color:var(--wheat); letter-spacing:.01em;
}
.feature h2{margin:8px 0 10px}
.feature .who{color:var(--ink-2)}
.feature .detail{margin-top:14px; color:var(--muted); font-size:.95rem}

/* -------------------------------------------------- search and buttons */
.home-search{display:flex; gap:10px; max-width:36rem; margin:0 0 26px; width:100%}
.home-search input{
  flex:1; font:inherit; font-size:1rem; padding:11px 14px;
  border:1px solid var(--line-2); border-radius:3px;
  background:var(--paper); color:var(--ink);
}
.home-search input::placeholder{color:var(--muted)}
.btn, .home-search button, .filter-actions button,
.chat-ask button, .suggestion button{
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  padding:11px 20px; border:1px solid var(--green); border-radius:3px;
  background:var(--green); color:#FFFFFF; cursor:pointer; text-decoration:none;
  display:inline-block; line-height:1.2;
}
.btn:hover, .home-search button:hover, .filter-actions button:hover{
  background:var(--green-deep); border-color:var(--green-deep); color:#FFFFFF;
}
.btn.ghost{background:transparent; color:var(--green)}
.btn.ghost:hover{background:var(--green-soft); color:var(--green)}

/* ---------------------------------------------------- the sermon list

   The date hangs in the left margin, outside the title's column. This
   is an archive of seven hundred messages across nineteen years, so
   chronology is the structure of the thing and the layout can say so.
   It is also what replaced "29 OCTOBER 2026 · JABE NICHOLSON", which
   put the two facts in one undifferentiated grey string. */
.sermons{list-style:none; margin:0; padding:0; width:100%}
.sermons li{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
@media(min-width:620px){
  .sermons li{grid-template-columns:7.5rem 1fr; gap:0 22px; align-items:baseline}
}
.sermons time{
  font-family:var(--sans); font-size:.82rem; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sermons .ttl{display:block; font-size:1.12rem; color:var(--ink); text-decoration:none}
.sermons .ttl:hover{color:var(--green); text-decoration:underline}
.sermons .who{display:block; font-family:var(--sans); font-size:.84rem;
              color:var(--muted); margin-top:3px}

/* ------------------------------------------------------------- visit */
.visit-addr{font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.3}
.visit-addr a{color:inherit}

.note{border-left:3px solid var(--green); background:var(--green-soft);
      padding:16px 20px; border-radius:0 3px 3px 0}
.note p{color:var(--ink-2); font-size:.95rem}

/* ------------------------------------------------------------ footer */
/* The green again, closing the page the way the hero opens it. It also
   settles an adjacency problem: the last band is tinted too, and a
   tinted footer underneath it just read as one long grey area with a
   line through it. */
footer.foot{
  background:var(--green-deep); border-top:0;
  padding:48px 0 60px; color:#B9CFBB; font-size:.95rem;
}
footer.foot a{color:#FFFFFF}
footer.foot strong{color:#FFFFFF; font-weight:500}
.foot-grid{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:720px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h3{font-size:.86rem; font-family:var(--sans); font-weight:600;
              color:#FFFFFF; margin-bottom:10px}
.foot-mark{width:78px; height:auto; display:block; margin-bottom:18px;
           filter:brightness(0) invert(1); opacity:.85}

/* ==================================================================
   The archive.

   Everything below was written against hard-coded hexes - #38506b for
   every button and link, #eef1f5 behind every chip - which is a second
   palette, from a different site, sitting under the first one. Same
   rules, same structure, tokens instead. */

.lede{color:var(--ink-2); max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.crumb{font-size:.9rem; margin:0 0 .6rem; font-family:var(--sans)}
.empty{padding:2.4rem 0; color:var(--muted)}

.filters{background:var(--paper-2); border:1px solid var(--line);
         border-radius:4px; padding:1rem 1.1rem; margin:1.25rem 0}
.filter-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:.6rem}
.filters label{display:flex; flex-direction:column; gap:.25rem;
               font-family:var(--sans); font-size:.8rem}
.filters label span{color:var(--muted)}
.filters label.grow{flex:1 1 16rem}
.filters label.narrow{width:6.5rem}
.filters label.check{flex-direction:row; align-items:center; gap:.4rem;
                     align-self:flex-end; padding-bottom:.45rem}
.filters label.check span{color:var(--ink-2)}
.filters input,.filters select{
  font:inherit; font-family:var(--sans); font-size:.9rem; padding:.45rem .55rem;
  border:1px solid var(--line-2); border-radius:3px;
  background:var(--paper); color:var(--ink);
}
.filter-actions{display:flex; gap:1rem; align-items:center}
.filter-actions .clear{font-family:var(--sans); font-size:.85rem}

.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 1rem}
.chip{display:inline-block; font-family:var(--sans); font-size:.8rem;
      padding:.22rem .6rem; background:var(--green-soft); border-radius:999px;
      text-decoration:none; color:var(--green)}
.chip span{color:var(--muted); margin-left:.2rem}

.sermon-list{list-style:none; padding:0; margin:1rem 0}
.sermon-list li{padding:.8rem 0; border-bottom:1px solid var(--line)}
.s-title{font-weight:500; text-decoration:none; font-size:1.06rem}
.s-meta{margin:.2rem 0 0; font-family:var(--sans); font-size:.85rem; color:var(--muted)}
.passage{color:var(--green)}
.flag{display:inline-block; width:1.1em; height:1.1em; line-height:1.1em;
      text-align:center; border-radius:50%; background:var(--wheat-soft);
      color:var(--wheat); font-size:.72rem; margin-left:.3rem}

.key-passage{font-size:1.05rem}
.cols{display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:1rem}
.cols section{flex:1 1 18rem}
.tags{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0}
.tag{display:inline-block; font-family:var(--sans); font-size:.83rem;
     padding:.22rem .6rem; border-radius:3px; background:var(--paper-2);
     text-decoration:none; color:var(--ink-2)}
.tag.branch{background:var(--green); color:#FFFFFF}
.tag.form{background:var(--wheat-soft); color:var(--wheat)}
.passages{padding-left:1.2rem}
.passages .is-key{font-weight:600}

.branch-block{margin:1.6rem 0}
.branch-block h2{margin-bottom:.25rem}
.topic-grid{list-style:none; padding:0; display:grid;
            grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.25rem .9rem}
.topic-grid li{display:flex; justify-content:space-between; gap:.5rem; padding:.22rem 0;
               border-bottom:1px solid var(--line); font-size:.95rem}
.count{color:var(--muted); font-family:var(--sans); font-size:.85rem;
       font-variant-numeric:tabular-nums}
.count.strong{color:var(--green); font-weight:600}
.count.zero,.zero .count{color:var(--line-2)}

.book-grid{list-style:none; padding:0; display:grid;
           grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.2rem .9rem}
.book-grid li{display:flex; justify-content:space-between; gap:.4rem; padding:.22rem 0;
              border-bottom:1px solid var(--line); font-size:.93rem}
.book-grid li.zero a{color:var(--muted)}

.chapter-grid{list-style:none; padding:0; display:grid;
              grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr)); gap:.4rem}
.chapter-grid li{border:1px solid var(--line); border-radius:3px; padding:.4rem;
                 text-align:center; font-family:var(--sans); font-size:.85rem}
.chapter-grid li.zero{background:var(--paper-2); color:var(--line-2)}
.chapter-grid a{text-decoration:none; display:block}
.chapter-grid .ch{display:block; font-weight:600}

.form-list,.speaker-list{list-style:none; padding:0}
.form-list li,.speaker-list li{padding:.55rem 0; border-bottom:1px solid var(--line)}
.speaker-list li{display:flex; gap:.6rem; align-items:baseline}

/* ------------------------------------------------------- sermon page */
.sermon-art{width:100%; max-height:320px; object-fit:cover; border-radius:4px;
            margin:.5rem 0 1.1rem; display:block}
#player{width:100%; margin:1rem 0 .5rem}
.seek{font-family:var(--sans); font-size:.78rem; font-variant-numeric:tabular-nums;
      background:var(--green-soft); color:var(--green); border:0; border-radius:3px;
      padding:.12rem .4rem; cursor:pointer}
.seek:hover{background:var(--paper-3)}
.passages{list-style:none; padding:0}
.passages li{padding:.15rem 0}

.transcript-block{margin-top:2rem; border-top:1px solid var(--line); padding-top:1rem}
.transcript{max-height:32rem; overflow-y:auto; padding-right:.5rem;
            border-left:2px solid var(--line); padding-left:.95rem}
.transcript .seg{margin:0 0 .7rem; display:flex; gap:.6rem; align-items:baseline; line-height:1.55}
.transcript .seg span{flex:1}
.transcript .seg.playing{background:var(--wheat-soft); border-radius:3px;
                         box-shadow:0 0 0 .4rem var(--wheat-soft)}
.transcript .seg.playing span{font-weight:500}
.sermon-list .thumb{width:84px; height:56px; object-fit:cover; border-radius:3px; flex:0 0 auto}
.sermon-list li.has-art{display:flex; gap:.85rem; align-items:flex-start}
.sermon-list li.has-art > div{flex:1}

.outline-block{margin-top:1.6rem}
.outline{list-style:none; padding:0; margin:.4rem 0 0; border-left:2px solid var(--line)}
.outline li{display:flex; gap:.7rem; align-items:baseline; padding:.32rem 0 .32rem .9rem}
.outline li span{font-size:.98rem}
.outline li:hover{background:var(--paper-2)}

.sermon-title{margin-bottom:.3rem; line-height:1.2}
.sermon-title .dash{color:var(--line-2); font-weight:400}
.key-ref{font-weight:400}
.all-passages{margin:0 0 .6rem}
.all-passages summary{cursor:pointer; font-family:var(--sans); font-size:.85rem; color:var(--muted)}
.all-passages[open] summary{margin-bottom:.4rem}
.byline{font-size:.95rem}
.inline-tag{white-space:nowrap}
.inline-tag.form{color:var(--wheat)}
.summary{max-width:62ch; margin:.6rem 0 1rem}

.outline-head{display:flex; align-items:baseline; justify-content:space-between;
              gap:1rem; border-bottom:1px solid var(--line)}
.toggle-all{font-family:var(--sans); font-size:.82rem; background:var(--paper);
            border:1px solid var(--line-2); border-radius:3px; padding:.22rem .6rem;
            cursor:pointer; color:var(--ink-2)}
details.movement{border-bottom:1px solid var(--line)}
details.movement > summary{cursor:pointer; padding:.5rem 0; display:flex; gap:.7rem;
                           align-items:baseline; list-style-position:outside}
details.movement > summary .head{font-weight:500}
details.movement[open] > summary{background:var(--paper-2)}
details.movement .transcript{max-height:none; border-left:2px solid var(--line);
                             margin:.2rem 0 .8rem 1.2rem; padding-left:.9rem}

.related{margin-top:2rem}
.related-head{display:flex; align-items:baseline; justify-content:space-between}
.see-all{font-family:var(--sans); font-size:.85rem}
.related-list{list-style:none; padding:0; display:grid;
              grid-template-columns:repeat(auto-fill,minmax(10rem,1fr)); gap:1rem}
.related-list img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px;
                  display:block; margin-bottom:.35rem}
.r-title{display:block; font-size:.95rem; font-weight:500; line-height:1.3}
.r-meta{display:block; font-family:var(--sans); font-size:.8rem; color:var(--muted)}

.chat-block,.archive-chat{
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  padding:1.1rem 1.2rem; margin:1rem 0 1.4rem;
}
.chat-block h2,.archive-chat h2{margin-top:0}
.chat-turns{list-style:none; padding:0; margin:.8rem 0}
.chat-turns li{margin-bottom:.9rem}
.chat-turns .who{font-family:var(--sans); font-size:.78rem; color:var(--muted)}
.chat-turns li.you .said{color:var(--green); font-weight:500}
.chat-turns .said{line-height:1.55}
.chat-turns .at{margin:.25rem 0 0; display:flex; gap:.3rem; flex-wrap:wrap}
.chat-ask{display:flex; gap:.5rem}
.chat-ask input{flex:1; font:inherit; font-size:.95rem; padding:.5rem .65rem;
                border:1px solid var(--line-2); border-radius:3px;
                background:var(--paper); color:var(--ink)}
.chat-ask .clear-btn,.suggestion .clear-btn,.filter-actions .clear{
  background:none; color:var(--muted); border:1px solid var(--line-2);
}
.working{font-family:var(--sans); font-size:.85rem; color:var(--muted); padding-top:.4rem}
.dimmed{opacity:.55; transition:opacity .15s}

.sermon-grid{list-style:none; padding:0; margin:1rem 0; display:grid; gap:1rem;
             grid-template-columns:1fr}
@media(min-width:640px){.sermon-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sermon-grid{grid-template-columns:repeat(3,1fr)}}
.sermon-grid li{position:relative; border-radius:4px; overflow:hidden;
                background:#1B2318; aspect-ratio:4/3}
.sermon-grid a{display:block; height:100%; text-decoration:none}
.sermon-grid img,.sermon-grid .no-art{width:100%; height:100%; object-fit:cover; display:block}
.sermon-grid .no-art{background:linear-gradient(140deg,var(--green-deep),#1B2318)}
.sermon-grid .overlay{position:absolute; inset:auto 0 0 0; padding:2.4rem .85rem .75rem;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.64) 45%,rgba(0,0,0,0) 100%);
  display:flex; flex-direction:column; gap:.15rem}
.sermon-grid .g-title{color:#fff; font-weight:500; line-height:1.25; font-size:1.05rem;
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.9)}
.sermon-grid .g-meta{color:#E2E9DF; font-family:var(--sans); font-size:.8rem;
  text-shadow:0 2px 5px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.9)}
.sermon-grid li:hover img{transform:scale(1.03); transition:transform .25s}

/* Most of the archive has no artwork, and a grid of identical dark
   rectangles tells a visitor nothing about any of them. Those become
   typographic plates instead - the title is the picture - so the wall
   of tiles reads as a shelf where some have sleeves and some do not,
   rather than as a page that failed to load. */
.sermon-grid li.plate{background:var(--green-soft)}
.sermon-grid li.plate .no-art{display:none}
.sermon-grid li.plate .overlay{
  position:absolute; inset:0; background:none; padding:1.1rem 1.2rem;
  justify-content:flex-end;
}
.sermon-grid li.plate .g-title{
  color:var(--green); text-shadow:none; font-size:1.25rem; line-height:1.22;
  font-weight:500; letter-spacing:-.02em;
}
.sermon-grid li.plate .g-meta{color:var(--ink-2); text-shadow:none; margin-top:.35rem}
.sermon-grid li.plate:hover{background:var(--paper-3)}

.subjects-toggle{align-self:flex-end; font-family:var(--sans); font-size:.82rem;
  background:var(--paper); border:1px solid var(--line-2); border-radius:3px;
  padding:.42rem .7rem; cursor:pointer; color:var(--ink-2)}
.subject-picker{margin:.3rem 0 .6rem; max-height:17rem; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:.65rem}
.subject-picker .branch{margin-bottom:.55rem; display:flex; flex-wrap:wrap; gap:.3rem}
.pick{font-family:var(--sans); font-size:.8rem; padding:.18rem .58rem; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; background:var(--paper-2); color:var(--ink-2)}
.pick.branch-pick{font-weight:600; background:var(--green-soft); color:var(--green);
  border-color:var(--green-soft)}
.pick.on{background:var(--green); color:#FFFFFF; border-color:var(--green)}
.pick.branch-pick.on{background:var(--green-deep); color:#FFFFFF; border-color:var(--green-deep)}

.found{list-style:none; padding:.4rem 0 0; margin:0; display:grid; gap:.25rem}
.found li{font-size:.92rem}
.found a{font-weight:500}
.suggestion{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:.55rem .75rem; margin:.5rem 0; font-size:.92rem}
.suggestion button{font-size:.85rem; padding:.3rem .85rem}

/* ----------------------------------------------------- who preached */
.preacher{display:flex; gap:1.2rem; align-items:flex-start; background:var(--paper-2);
  border:1px solid var(--line); border-radius:4px; padding:1.2rem 1.3rem; margin:0 0 1.4rem}
.preacher-face{flex:0 0 auto; width:110px; height:110px; border-radius:50%;
  object-fit:cover; background:var(--paper-3); border:1px solid var(--line)}
.preacher-words{min-width:0}
.preacher-words h2{margin:0; font-size:1.5rem; line-height:1.2}
.preacher-span{margin:.3rem 0 0; color:var(--muted); font-family:var(--sans); font-size:.86rem}
.preacher-bio{margin:.75rem 0 0; max-width:var(--measure); color:var(--ink-2)}
.preacher-bio p{margin:0 0 .6rem}
.preacher-bio p:last-child{margin-bottom:0}
.preacher-edit{margin:.75rem 0 0; font-family:var(--sans); font-size:.85rem}
.preacher-edit a{color:var(--muted)}

@media (max-width:34rem){
  /* The face above the words rather than beside them: at phone width a
     110px portrait leaves the bio about twenty characters wide. */
  .preacher{flex-direction:column; gap:.85rem}
  .preacher-face{width:92px; height:92px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ------------------------------------------------------------ phones
   Six navigation items wrap to two rows at 375px, which is fine and
   needs no JavaScript; it just needs to be tidy rather than sprawling.
   No hamburger: a menu that has to be opened hides the one link most
   visitors came for. */
@media (max-width:700px){
  .top-in{gap:12px; padding:14px 0}
  .brand img{width:69px}
  .brand b{font-size:1rem}
  nav.main{gap:12px 18px; font-size:.86rem; width:100%}
  .hero{padding-top:clamp(40px,8vw,64px)}
  .meets{margin-top:34px}
  .meets > div{padding:18px 0 20px}
}

/* The footer index. Four columns now that it carries the full list of
   pages: the masthead shows five and the footer shows everything,
   Giving included. Giving is a plain line in a plain list on purpose -
   it is here so somebody looking for it can find it, not to ask. */
@media(min-width:900px){ .foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr} }
.foot-nav{list-style:none; margin:0; padding:0}
.foot-nav li{padding:2px 0}

/* ------------------------------------------------------------- forms

   The contact form and the conference registration form share all of
   this. Both are filled in on a phone, often by somebody who does not
   fill in forms often, so: one column, every field labelled above
   itself rather than beside it, nothing that depends on hovering, and
   a touch target that is comfortably over 44px tall. Only two fields
   sit side by side anywhere, and they drop to one column below 560px.

   The green focus ring is deliberate and deliberately visible. A
   keyboard user and anybody whose eyes have lost the cursor both need
   to see where they are, and the default outline disappears against
   the tinted band these forms sit on. */
.form{max-width:40rem}
.form .f{display:block; margin:0 0 20px}
.form .f > span{
  display:block; font-family:var(--sans); font-size:.9rem; font-weight:500;
  color:var(--ink); margin-bottom:6px;
}
.form .f > span em{font-style:normal; font-weight:400; color:var(--muted)}
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="number"], .form input[type="date"],
.form select, .form textarea{
  width:100%; font:inherit; font-size:1rem; padding:12px 14px;
  border:1px solid var(--line-2); border-radius:3px;
  background:var(--paper); color:var(--ink);
}
.form textarea{line-height:1.5; resize:vertical; min-height:9rem}
.form :is(input,select,textarea):focus-visible{
  outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);
}
.form input[aria-invalid="true"]{border-color:#A2371F}

.f-row{display:grid; gap:0 18px; grid-template-columns:1fr}
@media(min-width:560px){ .f-row{grid-template-columns:1fr 1fr} }

.hint{font-family:var(--sans); font-size:.86rem; color:var(--muted);
      margin:-10px 0 22px; max-width:46ch}

/* The tick boxes. A row is one big label so the words are part of the
   target, which on a phone is the difference between tapping it and
   tapping near it. */
.f-checks{border:0; padding:0; margin:4px 0 26px}
.f-checks legend{
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  color:var(--ink); padding:0; margin-bottom:10px;
}
.form .check{
  display:flex; gap:11px; align-items:flex-start;
  padding:9px 0; cursor:pointer;
}
.form .check input{
  flex:0 0 auto; width:1.15rem; height:1.15rem; margin:.18rem 0 0;
  accent-color:var(--green);
}
.form .check span{color:var(--ink-2); font-size:.98rem}
.form .check:hover span{color:var(--ink)}
.form .check input:focus-visible{outline:2px solid var(--green); outline-offset:2px}
/* The one box that changes what we may send. Separated by a rule
   rather than by colour, so it reads as a different kind of question
   instead of a more important one. */
.form .check.join{margin-top:12px; padding-top:18px; border-top:1px solid var(--line)}

/* Off-screen rather than hidden: a form filler that skips display:none
   inputs would skip the trap as well. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.alert{
  border-left:3px solid #A2371F; background:#FBEFEC;
  padding:16px 20px; margin:0 0 26px; border-radius:0 3px 3px 0;
}
.alert ul{margin:.4rem 0 0; padding-left:1.1rem}
.alert li{color:var(--ink-2); font-size:.95rem}

/* What a finished form says back. Large, because it is the only thing
   on the page and because the person is looking for exactly one fact:
   that it worked and they can stop. */
.done h2{font-size:clamp(1.5rem,3.4vw,2.1rem); margin-bottom:14px}
.done p{color:var(--ink-2); max-width:52ch}
.done p + p{margin-top:12px}
.done .after{margin-top:26px}

/* -------------------------------------------------- scripture and tables */
.verse{
  margin:6px 0; padding:4px 0 4px 22px; border-left:2px solid var(--green);
  max-width:56ch;
}
.verse p{font-size:1.1rem; line-height:1.5; color:var(--ink)}
.verse cite{
  display:block; margin-top:8px; font-style:normal; font-family:var(--sans);
  font-size:.84rem; color:var(--muted);
}

table.plain{border-collapse:collapse; width:100%; margin:8px 0 18px}
table.plain th, table.plain td{
  text-align:left; vertical-align:top; padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line);
}
table.plain thead th{
  font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--muted);
  padding-bottom:9px;
}
table.plain tbody th{font-weight:500; color:var(--ink); width:14rem}
table.plain td{color:var(--ink-2)}
@media(max-width:560px){
  table.plain, table.plain tbody, table.plain tr, table.plain th, table.plain td{
    display:block; width:auto;
  }
  table.plain thead{display:none}
  table.plain tr{padding:12px 0; border-bottom:1px solid var(--line)}
  table.plain th, table.plain td{border:0; padding:0}
  table.plain tbody th{margin-bottom:3px}
}

/* ------------------------------------------- the registration form extras

   Name and age side by side, because they are one person: the age
   belongs to the name beside it, which is the whole reason these are
   rows here and were two comma-separated boxes on the old form. */
.guest-row{display:grid; gap:0 12px; grid-template-columns:1fr 5.5rem; margin-bottom:10px}
.guest-row .f{margin:0}
.form .f.short input{max-width:7rem}
.f-head{font-size:1.1rem; margin:30px 0 14px}
.f-checks legend em{font-style:normal; font-weight:400; color:var(--muted)}
.f-checks .hint{margin:-2px 0 10px}

/* The date above a conference title in the hero, in wheat like every
   other date on the site. */
.when-up{
  font-family:var(--sans); font-size:.9rem; color:#C9B27A;
  margin-bottom:8px; letter-spacing:.01em;
}
.readback{margin:26px 0; padding:22px 24px; background:var(--paper-2);
          border-radius:3px; max-width:34rem}
.readback h3{font-size:1rem; margin-bottom:6px}
.readback table.plain{margin-bottom:0}
.readback table.plain tr:last-child th,
.readback table.plain tr:last-child td{border-bottom:0}

.cta-line{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px}
.cta-line .hint{margin:0}

/* ---------------------------------------------- the photograph behind

   Andy's photograph of the building, 29 October, taken from the lawn.
   It goes behind the green rather than instead of it: the three
   meeting times set large over a bright blue sky are unreadable, and
   those times are the one thing a first-time visitor came for. So the
   deep green stays as a scrim and the building shows through it.

   The scrim is heaviest at the top-left, where the headline sits, and
   lightest at the bottom-right, which is lawn. `--green-deep` at 94%
   over the type and 62% over the grass keeps every line of white well
   past the contrast floor while the building stays plainly visible.

   .hero keeps its flat green background underneath, so a page whose
   image has not arrived - or will not load at all - is exactly the
   page it was before the photograph existed. */
.hero.has-photo{position:relative; isolation:isolate; overflow:hidden}
.hero.has-photo > .wrap{position:relative; z-index:2}
.hero.has-photo > picture{position:absolute; inset:0; z-index:0}
.hero-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
}
.hero .hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(105deg,
      rgba(12,63,32,.94) 0%,
      rgba(12,63,32,.88) 42%,
      rgba(12,63,32,.72) 72%,
      rgba(12,63,32,.62) 100%);
}
/* On a phone the text runs the full width, so the gradient has
   nowhere to lighten towards and goes flat and heavy instead. */
@media(max-width:700px){
  .hero .hero-scrim{background:rgba(12,63,32,.9)}
  .hero-photo{object-position:50% 70%}
}

/* A photograph in the run of a page: full width of the measure, and
   its caption underneath in the same small sans as every other note.
   No frame, no shadow, no rounded corner - the picture is the thing. */
figure.shot{margin:4px 0 8px; max-width:46rem}
figure.shot img{
  display:block; width:100%; height:auto; border-radius:3px;
  background:var(--paper-2);
}
figure.shot figcaption{
  font-family:var(--sans); font-size:.88rem; color:var(--muted);
  margin-top:9px; max-width:52ch;
}

/* A clip set like a photograph, because that is what it is: silent,
   seven seconds, no controls. Same frame and caption as figure.shot. */
figure.shot.clip video{
  display:block; width:100%; height:auto; border-radius:3px;
  background:var(--paper-3);
}

/* ----------------------------------------------- a sermon's own files

   The handout and the slides, above the player. Deliberately plain:
   these are three links, not a gallery, and the page already has
   enough furniture. */
.downloads { list-style: none; margin: 14px 0; padding: 0; }
.downloads li { padding: 5px 0; }
.downloads li + li { border-top: 1px solid var(--line-2, #EFEDE6); }
.downloads .muted { font-size: .85em; margin-left: 8px; }

/* A picture written into a summary.

   The office stylesheet says the same thing for the editor, and both
   have to: neither sheet is loaded where the other is, and an image
   that behaves in the box and overflows the column on the public page
   is the exact bug nobody sees until it is live. */
.summary img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: .6em 0;
}