/* ==========================================================================
   THE SATURATION FAMILY OF CHURCHES
   Built to the SFOC Brand Style Guide (April 2026, Micah Lang)

   PRIMARY BLUES        Dark Blue  #385f77   ·  Ocean Blue #21739c
                        Grey Blue  #7fa8b9   ·  Foam Blue  #ddf1f5
   GREYSCALE            #414042 · #58595b · #808285 · #bcbec0
   HEADER / SUBHEADER   League Spartan (Bold / Light), ALL CAPS, tracking 200
   PARAGRAPH            Basic Sans  (Mulish substituted where unlicensed)
   ========================================================================== */

/* ---------- the two families the site is set in, served from here ----------
   They were also being fetched from Google on every page, for fonts already
   sitting on this server: a third-party request, and the visitor's address
   handed over, for nothing. WOFF2 carries them in a third of the weight of
   the TrueType files, which stay as a fallback for very old browsers. */
@font-face{
  font-family:'League Spartan';
  src:url('../fonts/LeagueSpartan-VariableFont_wght.woff2') format('woff2'),
      url('../fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mulish';
  src:url('../fonts/Mulish-Variable.woff2') format('woff2'),
      url('../fonts/Mulish-Variable.ttf') format('truetype-variations');
  font-weight:200 1000; font-style:normal; font-display:swap;
}
/* the roman file has no italics in it, so the quotes and the footer's motto
   would otherwise be slanted by the browser rather than drawn */
@font-face{
  font-family:'Mulish';
  src:url('../fonts/Mulish-Italic-Variable.woff2') format('woff2');
  font-weight:200 1000; font-style:italic; font-display:swap;
}

:root{
  /* brand */
  --dark-blue:#385f77;
  --ocean:#21739c;
  --grey-blue:#7fa8b9;
  --foam:#ddf1f5;

  /* brand-derived neutrals & depths */
  --ink:#0d1f2b;          /* deepest ground, a darkened Dark Blue */
  --ink-2:#122936;
  --ink-3:#1b3d4f;
  --paper:#fbfcfd;
  --paper-2:#eef5f8;

  /* greyscale from the guide */
  --grey-900:#414042;
  --grey-700:#58595b;
  --grey-500:#808285;
  --grey-300:#bcbec0;

  /* text roles */
  --text:#2c3d47;
  --text-mute:#5d6f7a;
  --on-ink:#e8f2f6;
  --on-ink-mute:#9fbccb;
  /* The grey blue is a quiet colour, which on a pale background leaves small
     type at about 2.5:1 — under half of what is readable. This is the same
     hue carried down to 4.9:1, for labels and numbers set in it. */
  --grey-blue-text:#4e7487;

  --head:'League Spartan','Futura','Century Gothic',
         'Trebuchet MS',Helvetica,Arial,sans-serif;
  --body:'Basic Sans','Mulish','Avenir Next','Segoe UI',
         Helvetica,Arial,sans-serif;

  --track:.2em;           /* style-guide tracking 200 */
  --shell:1180px;
  --gutter:clamp(20px,5vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--text);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{
  font-family:var(--head);
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
}
img,svg{max-width:100%;display:block}
a{color:var(--ocean)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--ocean);outline-offset:3px;border-radius:2px;
}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.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;
}

/* ---------- shared type ---------- */
.kicker{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track);font-size:clamp(.68rem,1.4vw,.78rem);
  color:var(--ocean);margin:0 0 1.3rem;
  line-height:1.68;        /* set here so a kicker reads the same as a <p> or an <h2> */
}
.kicker.on-dark{color:var(--grey-blue)}
.section-title{
  font-size:clamp(1.7rem,4.2vw,2.7rem);letter-spacing:.045em;color:var(--dark-blue);
}
.section-title.on-dark{color:#fff}
.lede{font-size:clamp(1rem,1.7vw,1.12rem);color:var(--text-mute)}

/* ---------- reveal-on-scroll (progressive enhancement) ---------- */
.js .reveal{opacity:0;transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}
.js .reveal.d2{transition-delay:.2s}
.js .reveal.d3{transition-delay:.3s}
.js .reveal.d4{transition-delay:.4s}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  /* Matches the gap between the nav links. The Give pill used to be a nav
     child, so the space before it was the nav's gap; now that it sits in its
     own group, the header's gap is what stands in that place. */
  gap:clamp(.9rem,2.4vw,1.9rem);
  padding:.7rem clamp(16px,4vw,44px);
  background:rgba(13,31,43,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(127,168,185,.18);
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
}
.site-header.is-hidden{transform:translateY(-105%);opacity:0}
.site-header .brand{display:flex;align-items:center}
.site-header .brand img{height:38px;width:auto}
/* The header is space-between. With brand and nav it put the nav on the right;
   adding the actions group made three children and space-between spread them,
   stranding the nav in the middle. margin-left:auto keeps nav and actions
   together on the right, where they were. */
.site-nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.9rem);margin-left:auto}
.site-nav a{
  font-family:var(--head);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:.74rem;color:var(--on-ink);
  text-decoration:none;opacity:.86;transition:opacity .2s,color .2s;
}
.site-nav a:hover{opacity:1;color:var(--grey-blue)}
.nav-actions .pill{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.74rem;text-decoration:none;
  background:var(--ocean);color:#fff;opacity:1;
  padding:.5rem 1.15rem;border-radius:999px;
  transition:background .25s,transform .25s;
}
.nav-actions .pill:hover{background:var(--grey-blue);color:var(--ink);transform:translateY(-1px)}
.nav-actions{display:flex;align-items:center;gap:.7rem}

/* ---------- mobile menu ----------
   Below 720px the links used to be set to display:none with nothing behind
   them, so a phone could reach only the logo and Give. The nav becomes a panel
   instead, and the button is the way into it. Give stays out in the bar, since
   it is the one action people arrive wanting and the QR codes point at it. */
.nav-toggle{
  display:none;width:44px;height:44px;padding:0;border:0;background:none;
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s ease,opacity .2s ease;
}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:720px){
  .nav-toggle{display:flex}
  .site-header .brand,.nav-actions{position:relative;z-index:2}
  .site-nav{
    /* The panel is a child of the header, so it stacks inside the header's own
       context: it has to sit under the logo and the buttons but over the page. */
    position:fixed;left:0;right:0;top:0;z-index:1;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:4.6rem 1.4rem 1.6rem;
    background:var(--ink);
    border-bottom:1px solid rgba(127,168,185,.2);
    box-shadow:0 18px 40px rgba(4,12,18,.5);
    transform:translateY(-102%);transition:transform .38s cubic-bezier(.22,.61,.36,1),visibility .38s;
    visibility:hidden;
  }
  .site-nav a{
    font-size:.95rem;letter-spacing:.1em;padding:1rem .2rem;opacity:1;
    border-top:1px solid rgba(127,168,185,.16);
  }
  .site-nav a:first-of-type{border-top:0}
  body.nav-open{overflow:hidden}
  body.nav-open .site-nav{transform:translateY(0);visibility:visible}
  /* the header hides itself on scroll; it must not take an open menu with it */
  body.nav-open .site-header{transform:none;opacity:1}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  /* --veil sets how far the photograph is washed back. Raise it toward .9 for a
     paler, more graphic hero; drop it toward .5 to let more of the city through.
     --veil-mid is the wash directly behind the lockup, where contrast matters. */
  --veil:.55;
  --veil-mid:.72;
  position:relative;min-height:100svh;overflow:hidden;background:var(--paper);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
/* Full-colour aerial over Syracuse toward Onondaga Lake. Swap the url() for
   hero-syracuse-downtown.jpg to use the lower, sharper downtown frame instead. */
/* Every photograph is kept in three formats. A browser takes the first line it
   understands, so a current one reads AVIF at about a third of the JPEG's
   weight, and anything older never sees the image-set and keeps the JPEG above
   it. The phone-sized cuts are further down, in one media query. */
.hero .bg{
  position:absolute;left:0;right:0;top:-10%;height:120%;z-index:0;
  background-image:url('../img/photos/hero-cny-aerial.jpg');
  background-image:image-set(url('../img/photos/hero-cny-aerial.avif') type('image/avif'),
                             url('../img/photos/hero-cny-aerial.webp') type('image/webp'),
                             url('../img/photos/hero-cny-aerial.jpg') type('image/jpeg'));
  background-size:cover;background-position:center 55%;
  filter:saturate(1.12) contrast(1.04);   /* counters the aerial haze */
  will-change:transform;
}
/* A light wash rather than a dark scrim, so the logo and type can carry the
   brand colours at full strength. The photograph stays underneath as texture. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(56% 50% at 50% 44%,
      rgba(255,255,255,var(--veil-mid)), rgba(255,255,255,0) 78%),
    linear-gradient(180deg,
      rgba(238,245,248,calc(var(--veil) - .06)) 0%,
      rgba(255,255,255,var(--veil)) 46%,
      rgba(251,252,253,calc(var(--veil) + .16)) 100%);
}
.hero-inner{position:relative;z-index:2;padding:6rem 1.2rem 5rem;max-width:62rem}
.hero-logo{width:min(272px,52vw);margin:0 auto 2rem}
.hero .place{
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.34em;font-size:clamp(.66rem,1.5vw,.82rem);
  color:var(--ocean);margin-bottom:1.5rem;
}
.tagline{list-style:none}
.tagline li{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.28;
  font-size:clamp(1.25rem,4.2vw,2.35rem);
  color:var(--dark-blue);
  text-shadow:0 1px 16px rgba(255,255,255,.85);
}
.tagline li + li{margin-top:.1em}
.tagline li:last-child{color:var(--ocean)}
.js .hero-line{opacity:0;transform:translateY(34px)}
.js .hero-line.is-in{opacity:1;transform:none;
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.scroll-cue{
  position:absolute;bottom:1.9rem;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.3em;font-size:.64rem;color:var(--grey-blue-text);
}
.scroll-cue::after{
  content:"";width:1px;height:42px;
  background:linear-gradient(var(--ocean),transparent);
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ==========================================================================
   MISSION
   ========================================================================== */
.mission{padding:clamp(5rem,13vh,8.5rem) 0;text-align:center;background:var(--paper)}
.mission .statement{
  font-size:clamp(1.22rem,2.8vw,1.95rem);line-height:1.52;font-weight:300;
  max-width:53rem;margin:0 auto 3.6rem;color:var(--dark-blue);
}
.mission .statement strong{font-weight:700;color:var(--ocean)}
.movements{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1.4rem;max-width:72rem;margin:0 auto;text-align:left;
}
.movement{
  background:#fff;border-top:3px solid var(--ocean);border-radius:0 0 10px 10px;
  padding:1.7rem 1.4rem 1.6rem;
  box-shadow:0 10px 34px rgba(56,95,119,.09);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s;
}
.movement:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(56,95,119,.16)}
.movement .num{
  font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:var(--track);
  color:var(--grey-blue-text);display:block;margin-bottom:.7rem;
}
.movement h3{
  font-size:.94rem;letter-spacing:.13em;color:var(--dark-blue);margin-bottom:.55rem;
}
.movement p{font-size:.92rem;color:var(--text-mute)}
/* the problem this family exists to answer — sets up the mission statement */
.mission .problem{
  font-size:clamp(1rem,1.9vw,1.15rem);color:var(--text-mute);
  max-width:44rem;margin:0 auto 1.8rem;
}

/* ==========================================================================
   HOW WE WORK TOGETHER — what stays local vs what is shared
   ========================================================================== */
.shared{background:var(--paper-2);padding:clamp(4.5rem,12vh,7.5rem) 0}
.shared .intro{text-align:center;max-width:46rem;margin:0 auto 3rem}
.shared .intro .lede{margin-top:.9rem}
.share-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.2rem,3vw,2rem);max-width:68rem;margin:0 auto;
}
.share-col{
  background:#fff;border-radius:14px;padding:2rem 1.8rem;
  box-shadow:0 12px 36px rgba(56,95,119,.09);
  border-top:3px solid var(--grey-blue);
}
.share-col.is-accent{border-top-color:var(--ocean)}
.share-col h3{
  font-size:.86rem;letter-spacing:var(--track);color:var(--dark-blue);
  margin-bottom:1.2rem;
}
.share-col ul{list-style:none}
.share-col li{
  position:relative;padding-left:1.5rem;margin-bottom:.75rem;
  font-size:.95rem;color:var(--text-mute);
}
.share-col li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--grey-blue);
}
.share-col.is-accent li::before{background:var(--ocean)}

/* ==========================================================================
   OUR STORY
   ========================================================================== */
.story{background:var(--paper);padding:clamp(4.5rem,12vh,7.5rem) 0}
.story-head{max-width:46rem;margin:0 auto 3rem;text-align:center}
.story-head .section-title{margin-bottom:1.2rem}
.story-head p{color:var(--text-mute)}
.story-close{
  max-width:46rem;margin:3.5rem auto 0;text-align:center;color:var(--text-mute);
}

/* the timeline: one horizontal track, everything visible at once — no scroll
   in either axis. Seven columns fit the shell; below 760px it stacks. */
.timeline-h{
  list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  position:relative;max-width:64rem;margin:2.6rem auto 0;padding:12rem 0 8rem;
}
.timeline-h li{position:relative;text-align:center;padding:0 .3rem}
/* Each column carries its own piece of track, so the line is drawn from the
   same middle the node is, and the two cannot drift apart when the list's
   padding changes. The first and last pieces start and end on their node
   rather than in space. */
.timeline-h li::after{
  content:"";position:absolute;left:0;right:0;top:50%;margin-top:-1px;
  height:2px;background:rgba(127,168,185,.32);
}
.timeline-h li:first-child::after{left:50%}
.timeline-h li:last-child::after{right:50%}
.timeline-h li::before{           /* node on the track */
  content:"";position:absolute;left:50%;top:50%;
  width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--ocean);box-shadow:0 0 0 4px var(--paper);z-index:1;
}
.timeline-h .stack{position:absolute;left:0;right:0}
.timeline-h li:nth-child(odd) .stack{bottom:calc(50% + 1.35rem)}
.timeline-h li:nth-child(even) .stack{top:calc(50% + 1.35rem)}
/* Church marks are white PNGs used as CSS masks, so one variable sets the
   colour of every one of them. Change --mark-color to restyle the set.

   Images carry a 30 day cache, so a mark that changes needs a new address
   or browsers keep the old one: hence the ?v on a replaced file. */
:root{--mark-color:#58595b}
.glyph{
  display:block;background-color:var(--mark-color);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
/* Covenant in their outline form, which is the one drawn for white
   backgrounds; the marks all sit on white here. */
.g-covenant{-webkit-mask-image:url('../img/logo/churches/mark-covenant.png?v=4');
            mask-image:url('../img/logo/churches/mark-covenant.png?v=4')}
.g-renovation{-webkit-mask-image:url('../img/logo/churches/mark-renovation.png');
              mask-image:url('../img/logo/churches/mark-renovation.png')}
.g-missio{-webkit-mask-image:url('../img/logo/churches/mark-missio.png');
          mask-image:url('../img/logo/churches/mark-missio.png')}
.g-vintage{-webkit-mask-image:url('../img/logo/churches/mark-vintage.png');
           mask-image:url('../img/logo/churches/mark-vintage.png')}

.timeline-h .tl-mark{width:26px;height:26px;margin:0 auto .45rem}
.timeline-h .tl-mark.is-sfoc{width:24px;height:24px}
.timeline-h .year{
  display:block;font-family:var(--head);font-weight:700;font-size:1.1rem;
  color:var(--ocean);margin-bottom:.3rem;letter-spacing:.01em;
}
.timeline-h h3{
  font-size:.78rem;letter-spacing:.035em;color:var(--dark-blue);
  margin-bottom:.15rem;line-height:1.25;
}
.timeline-h .where{font-size:.72rem;color:var(--text-mute);line-height:1.35}
.timeline-h .meta{
  display:block;margin-top:.3rem;font-family:var(--head);font-weight:700;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-blue-text);
}
/* the closing node carries more weight than a planting */
.timeline-h .is-today::before{
  width:17px;height:17px;margin:-8.5px 0 0 -8.5px;background:var(--dark-blue);
}
.timeline-h .is-today .year,.timeline-h .is-today h3{color:var(--ocean)}

@media (max-width:760px){          /* stack rather than scroll sideways */
  .timeline-h{display:block;max-width:26rem;padding:0 0 0 1.4rem;position:relative}
  /* stacked, the track runs down the side instead, as one line for the list */
  .timeline-h li::after{display:none}
  .timeline-h::before{
    content:"";position:absolute;left:5px;top:.5rem;bottom:.5rem;
    width:2px;background:rgba(127,168,185,.32);
  }
  .timeline-h li{text-align:left;padding:0 0 1.4rem}
  .timeline-h li:last-child{padding-bottom:0}
  .timeline-h li::before{left:-1.4rem;top:.55rem;margin:0}
  .timeline-h .is-today::before{left:calc(-1.4rem - 2.5px);top:.45rem}
  .timeline-h .stack{position:static}
  .timeline-h .tl-mark{margin:0 0 .3rem;width:22px;height:22px}
  .timeline-h .year{display:inline-block;font-size:1rem;margin-bottom:.1rem}
  .timeline-h .meta{margin-top:.15rem}
}

/* ==========================================================================
   MAP  —  Onondaga + Madison counties
   ========================================================================== */
.map-section{background:var(--ink);color:var(--on-ink);position:relative}
.map-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 30% 35%,rgba(33,115,156,.18),transparent 70%);
}
.map-head{
  position:relative;text-align:center;max-width:54rem;
  margin:0 auto;padding:clamp(4.5rem,11vh,7rem) var(--gutter) 0;
}
.map-head p.sub{color:var(--on-ink-mute);margin-top:.9rem;max-width:42rem;
  margin-left:auto;margin-right:auto}

/* the pinned stage: a tall track containing a sticky viewport */
.map-track{position:relative}
.map-sticky{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(4rem,9vh,6rem) var(--gutter) clamp(3rem,7vh,4.5rem);
}
/* the frame is capped by height as well as width so the whole map always fits
   the pinned viewport — 1.615 is the viewBox aspect ratio */
.map-frame{
  width:min(1080px,100%,calc((100svh - 200px) * 1.615));
  margin:0 auto;position:relative;
}
.cny-map{width:100%;height:auto;display:block;overflow:visible}

/* geography */
/* neighbouring counties: fill only. Their borders would read as stray lines. */
.cny-map .ctx{fill:rgba(127,168,185,.06);stroke:none}
.cny-map .county{
  fill:rgba(33,115,156,.13);
  stroke:var(--grey-blue);stroke-width:2.2;
  stroke-linejoin:round;stroke-linecap:round;
}
.cny-map .county-fill{fill:rgba(33,115,156,.13);stroke:none}
.cny-map .water{fill:rgba(33,115,156,.62)}
.cny-map .water-edge{fill:none;stroke:rgba(127,168,185,.5);stroke-width:.8}
.cny-map .county-label{
  fill:rgba(160,201,219,.88);font-family:var(--head);font-weight:600;
  font-size:16.5px;letter-spacing:.26em;text-transform:uppercase;
}
.cny-map .town{fill:rgba(127,168,185,.55)}
.cny-map .town-label{
  fill:rgba(127,168,185,.62);font-family:var(--body);font-weight:400;
  font-size:12.5px;letter-spacing:.06em;
}

/* church markers */
.cny-map .reach{fill:rgba(33,115,156,.14)}
.cny-map .ring{fill:none;stroke:rgba(127,168,185,.5);stroke-width:1.2}
.cny-map .mark{
  /* view-box, not fill-box: a <use> resolves fill-box against the referenced
     symbol's own coordinate system, which throws the mark off-position when
     scaled. The per-mark origin is set in user units from JS. */
  transform-box:view-box;
  --mark-a:var(--foam);          /* the cross */
  --mark-b:var(--grey-blue);     /* the surrounding dots */
  filter:drop-shadow(0 2px 5px rgba(6,18,26,.7));
}
.cny-map .pin-label{font-family:var(--head);font-weight:700}
.cny-map .pin-label .nm{
  fill:#fff;font-size:16px;letter-spacing:.05em;text-transform:uppercase;
}
.cny-map .pin-label .ct{
  fill:var(--grey-blue);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;
}
.cny-map .leader{stroke:rgba(127,168,185,.45);stroke-width:1;fill:none}
.cny-map .link-line{
  stroke:rgba(160,205,225,.75);stroke-width:1.8;fill:none;stroke-linecap:round;
}

.map-progress{
  width:min(260px,50vw);height:2px;background:rgba(127,168,185,.12);
  border-radius:2px;margin:2rem auto .2rem;overflow:hidden;
}
.map-progress b{
  display:block;height:100%;width:0;background:rgba(127,168,185,.65);
}

/* --- Option C: guided tour side panel --- */
.tour-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(1.5rem,4vw,3rem);align-items:center;width:min(1180px,100%);
}
.tour-layout > *{min-width:0}
/* inside the tour the frame is bounded by its grid column, not the page, and the
   map pans within a zoomed viewBox — so it has to clip rather than paint outside */
.tour-layout .map-frame{
  width:min(100%,calc((100svh - 300px) * 1.615));
  border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(127,168,185,.16);
}
.tour-layout .cny-map{overflow:hidden}
.tour-panel{position:relative;min-height:240px}
.tour-card{
  position:absolute;inset:0;opacity:0;transform:translateY(22px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.tour-card.is-active{opacity:1;transform:none;pointer-events:auto}
.tour-card .idx{
  font-family:var(--head);font-weight:700;font-size:.72rem;
  letter-spacing:var(--track);color:var(--grey-blue);display:block;margin-bottom:.7rem;
}
.tour-card h3{font-size:1.35rem;color:#fff;letter-spacing:.04em;margin-bottom:.35rem}
.tour-card .where{
  font-family:var(--head);font-weight:500;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-blue);margin-bottom:.9rem;
}
.tour-card p{font-size:.92rem;color:var(--on-ink-mute)}
.tour-card .go{
  display:inline-block;margin-top:1.1rem;font-family:var(--head);font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--foam);text-decoration:none;border-bottom:1.5px solid rgba(221,241,245,.4);
  padding-bottom:.2rem;
}
.tour-card .go:hover{border-color:var(--foam)}
.tour-dots{display:flex;gap:.5rem;margin-top:1.6rem}
.tour-dots b{
  width:26px;height:3px;border-radius:2px;background:rgba(127,168,185,.28);
  transition:background .3s;
}
.tour-dots b.on{background:var(--foam)}
@media (max-width:900px){
  .tour-layout{grid-template-columns:1fr}
  .tour-panel{min-height:210px;order:2}
}

/* numbered pins — the phone stand-in for the labels */
.cny-map .pin-num{
  display:none;font-family:var(--head);font-weight:700;font-size:34px;
  fill:#fff;paint-order:stroke;stroke:rgba(9,26,37,.9);stroke-width:6px;
}
.map-key{
  display:none;list-style:none;max-width:26rem;margin:1.4rem auto 0;
  padding:0 .4rem;
}
.map-key li{display:flex;gap:.7rem;align-items:baseline;margin-bottom:.55rem}
.map-key b{
  flex:0 0 1.35rem;height:1.35rem;border-radius:50%;
  background:var(--foam);color:var(--ink);
  font-family:var(--head);font-weight:700;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
}
.map-key span{font-size:.86rem;color:var(--on-ink);line-height:1.35}
.map-key i{display:block;font-style:normal;font-size:.76rem;color:var(--on-ink-mute)}

@media (max-width:760px){
  .map-sticky{height:auto;position:static;padding-bottom:3rem}
  .map-track{height:auto !important}
  .map-frame{width:100%}
  .cny-map .pin-label,.cny-map .town-label,.cny-map .county-label,
  .cny-map .town,.cny-map .ring{display:none}
  .cny-map .pin-num{display:block}
  .cny-map .mark{transform:scale(1.5)}
  .map-key{display:block}
  .map-progress{display:none}
}

/* ==========================================================================
   PULL QUOTE
   ========================================================================== */
.dna{
  position:relative;overflow:hidden;background:var(--dark-blue);
  padding:clamp(6rem,17vh,10.5rem) 0;text-align:center;color:#fff;
}
.dna .bg{
  position:absolute;left:0;right:0;top:-10%;height:120%;z-index:0;
  background-image:
    linear-gradient(180deg,rgba(56,95,119,.86),rgba(13,31,43,.9)),
    url('../img/photos/neighborhood.jpg');
  background-image:
    linear-gradient(180deg,rgba(56,95,119,.86),rgba(13,31,43,.9)),
    image-set(url('../img/photos/neighborhood.avif') type('image/avif'),
              url('../img/photos/neighborhood.webp') type('image/webp'),
              url('../img/photos/neighborhood.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;will-change:transform;
}
.dna .shell{position:relative;z-index:1}
.dna .big{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.55rem,5vw,3.15rem);line-height:1.22;letter-spacing:.035em;
  max-width:54rem;margin:0 auto 1.5rem;text-shadow:0 2px 24px rgba(8,22,31,.5);
}
.dna .full{
  color:rgba(232,242,246,.88);max-width:44rem;margin:0 auto;
  font-size:clamp(.95rem,1.8vw,1.12rem);font-style:italic;
}
.dna .attrib{
  margin-top:2.1rem;color:var(--foam);font-family:var(--head);font-weight:500;
  font-size:.72rem;letter-spacing:var(--track);text-transform:uppercase;
}

/* ==========================================================================
   CHURCHES
   ========================================================================== */
.churches{background:var(--paper-2);padding:clamp(5rem,13vh,8.5rem) 0}
.churches .intro{text-align:center;max-width:46rem;margin:0 auto 3.4rem}
.churches .intro p{margin-top:.9rem}
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(298px,1fr));
  gap:clamp(1.2rem,2.6vw,2rem);
}
.card{
  background:#fff;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 14px 38px rgba(56,95,119,.11);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(56,95,119,.2)}
.card figure{
  position:relative;height:212px;overflow:hidden;
  background:linear-gradient(140deg,var(--dark-blue),var(--ocean) 62%,var(--grey-blue));
}
/* The frame is the <picture>, not the image inside it. Positioning the image
   itself left the picture a zero-sized inline box, and Chrome then never
   loaded the lazy image within it. */
.card figure picture{
  position:absolute;inset:-8% 0 auto 0;display:block;width:100%;height:116%;
}
.card figure img{
  width:100%;height:100%;object-fit:cover;
  will-change:transform;
  /* "for now", per Justin, so a filter rather than re-exported photographs:
     delete this line and the colour is back */
  filter:grayscale(1);
}
.card figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,31,43,0) 52%,rgba(13,31,43,.42));
}
.card .body{
  position:relative;overflow:hidden;
  padding:1.5rem 1.45rem 1.6rem;display:flex;flex-direction:column;flex:1;
}
/* the congregation's own mark, sitting quietly behind the card's text */
.card-mark{
  position:absolute;right:-14px;bottom:-14px;width:96px;height:96px;
  opacity:.12;pointer-events:none;
}
.card .place{
  font-family:var(--head);font-weight:700;font-size:.68rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ocean);
  margin-bottom:.45rem;
}
.card h3{font-size:1.2rem;letter-spacing:.03em;color:var(--dark-blue);margin-bottom:.45rem}
.card .when{
  font-family:var(--head);font-weight:500;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey-700);
}
/* margin-top:auto keeps the buttons on a shared baseline when a card title wraps */
.card .links{display:flex;justify-content:center;margin-top:auto;padding-top:1.4rem}
.card .links a{
  font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;
  padding:.6rem 1.3rem;border-radius:999px;
  border:1.5px solid var(--ocean);background:var(--ocean);color:#fff;
  transition:background .22s,border-color .22s,transform .22s;
}
.card .links a:hover{
  background:var(--dark-blue);border-color:var(--dark-blue);transform:translateY(-1px);
}

/* ==========================================================================
   CLOSING
   ========================================================================== */
.closing{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;
  min-height:80svh;display:flex;align-items:center;text-align:center;
  padding:clamp(5rem,12vh,8rem) 0;
}
.closing .bg{
  position:absolute;left:0;right:0;top:-10%;height:120%;z-index:0;
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.8),rgba(13,31,43,.9)),
    url('../img/photos/elders.jpg');
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.8),rgba(13,31,43,.9)),
    image-set(url('../img/photos/elders.avif') type('image/avif'),
              url('../img/photos/elders.webp') type('image/webp'),
              url('../img/photos/elders.jpg') type('image/jpeg'));
  background-size:cover;
  /* These bands are far wider than they are tall, so cover scales the photo to
     the width and shows a horizontal slice of it. The heads start about 190px
     down a 1221px image, and at 34% the top of that slice landed below the
     hairlines on wide, short windows. 16% clears them at every viewport shape
     the site is used at, with room left for the parallax shift. */
  background-position:center 16%;will-change:transform;
}
.closing .shell{position:relative;z-index:1}
.closing h2{
  font-size:clamp(1.9rem,5.4vw,3.4rem);letter-spacing:.045em;margin-bottom:1rem;
  text-shadow:0 2px 24px rgba(8,22,31,.5);
}
.closing p.lede{color:rgba(232,242,246,.86);max-width:38rem;margin:0 auto 2.4rem}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* Most buttons here are links, which have no border of their own. The four real
   <button> elements, the three application submits and the brand page unlock,
   were drawing the browser's default border as a pale ring around the fill. */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--head);font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;font-size:.82rem;
  padding:1rem 2.3rem;border-radius:999px;border:0;cursor:pointer;
  transition:transform .25s,background .25s,color .25s,border-color .25s;
}
.btn.solid{background:var(--ocean);color:#fff}
.btn.solid:hover{background:var(--foam);color:var(--ink);transform:translateY(-2px)}
.btn.ghost{border:2px solid rgba(232,242,246,.65);color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:var(--ink);color:var(--on-ink-mute);font-size:.88rem;
  padding:3.6rem 0 2.2rem;
}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1.4fr;gap:2.4rem;margin-bottom:2.6rem;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-logo{width:190px;margin-bottom:1.2rem}
.site-footer h3{
  color:var(--on-ink);font-family:var(--head);font-weight:700;
  font-size:.72rem;letter-spacing:var(--track);margin-bottom:1rem;
}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--on-ink-mute);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:var(--foam)}
.site-footer .motto{font-style:italic;margin-top:.9rem;color:var(--grey-blue)}
.footer-bottom{
  border-top:1px solid rgba(127,168,185,.14);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;font-size:.76rem;
}
.footer-bottom .note{color:var(--grey-blue)}   /* full strength: .55 left it at 3:1 */

/* ==========================================================================
   GIVE PAGE — embedded Breeze form
   Breeze allows no custom CSS inside the frame (colour scheme only, set in
   Breeze: Giving → Settings → Appearance → Colors). Everything here styles
   the surround; the form itself has to be themed on Breeze's side.
   ========================================================================== */
.give-page,.contact-page{
  background:var(--ink);min-height:100svh;padding-bottom:clamp(3rem,8vh,5rem);
}
.give-intro,.subpage-intro{
  max-width:44rem;margin:0 auto;text-align:center;
  padding:clamp(6.5rem,14vh,9rem) var(--gutter) clamp(2rem,5vh,3rem);
}
.give-intro h1,.subpage-intro h1{
  font-size:clamp(1.9rem,5vw,3rem);letter-spacing:.045em;color:#fff;margin-bottom:1rem;
}
.give-intro .lede,.subpage-intro .lede{color:var(--on-ink-mute)}

/* ---------- contact cards ---------- */
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.2rem,3vw,1.8rem);
  max-width:56rem;margin:0 auto;padding:0 var(--gutter);
}
.contact-card{
  background:rgba(127,168,185,.07);border:1px solid rgba(127,168,185,.2);
  border-radius:14px;padding:2rem 1.8rem;
}
.contact-card .label{
  font-family:var(--head);font-weight:700;font-size:.7rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--grey-blue);
  margin-bottom:.9rem;
}
.contact-card .value{
  font-family:var(--head);font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.35;color:#fff;
  letter-spacing:.01em;word-break:break-word;
}
.contact-card .value.addr{font-weight:500;letter-spacing:.02em}
.contact-card .value a{color:var(--foam);text-decoration:none;
  border-bottom:1.5px solid rgba(221,241,245,.4)}
.contact-card .value a:hover{border-color:var(--foam)}
.contact-card .sub{
  margin-top:1rem;font-size:.88rem;color:var(--on-ink-mute);line-height:1.6;
}
.contact-card .sub a{color:var(--grey-blue);text-decoration:none;
  border-bottom:1px solid rgba(127,168,185,.4)}
.contact-card .sub a:hover{color:var(--foam);border-color:var(--foam)}
.contact-foot{
  max-width:44rem;margin:clamp(2rem,5vh,3rem) auto 0;padding:0 var(--gutter);
  text-align:center;font-size:.88rem;color:var(--on-ink-mute);
}
.contact-foot a{color:var(--foam);text-decoration:none;
  border-bottom:1px solid rgba(221,241,245,.35)}
.contact-foot a:hover{border-color:var(--foam)}
.give-note{
  margin-top:1.4rem;font-size:.88rem;color:var(--grey-blue);
}
.give-note a{color:var(--foam);text-decoration:none;border-bottom:1px solid rgba(221,241,245,.4)}
.give-note a:hover{border-color:var(--foam)}

.give-frame-wrap{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.give-frame{
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 20px 60px rgba(6,18,26,.45);
}
/* Height is deliberately generous. The form grows on the card-details step,
   and a cropped frame hides fields instead of scrolling to them. */
.give-embed{
  display:block;width:100%;height:1000px;border:0;background:#fff;
}
@media (max-width:720px){
  .give-embed{height:1180px}   /* fields stack, so the form runs taller */
}
.give-fallback{
  text-align:center;margin-top:1.4rem;font-size:.9rem;color:var(--on-ink-mute);
}
.give-fallback a{color:var(--foam);text-decoration:none;border-bottom:1px solid rgba(221,241,245,.4)}
.give-fallback a:hover{border-color:var(--foam)}
/* The Tithe.ly button sits inside the fallback line, so it wants to read as a
   control rather than as another paragraph. Smaller than a hero button. */
.give-alt{
  font-size:.72rem;padding:.6rem 1.4rem;margin-left:.5rem;vertical-align:middle;
}
.give-secure{
  text-align:center;margin-top:.7rem;font-size:.78rem;color:rgba(127,168,185,.65);
  max-width:34rem;margin-left:auto;margin-right:auto;line-height:1.6;
}

/* ==========================================================================
   MAP OPTIONS PAGE
   ========================================================================== */
.opt-hero{
  background:var(--ink);color:#fff;padding:7.5rem 0 3.4rem;text-align:center;
}
.opt-hero h1{font-size:clamp(1.7rem,4.2vw,2.6rem);letter-spacing:.045em;margin-bottom:.9rem}
.opt-hero p{color:var(--on-ink-mute);max-width:44rem;margin:0 auto}
.opt-hero .back{
  display:inline-block;margin-top:1.6rem;font-family:var(--head);font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--foam);text-decoration:none;border-bottom:1.5px solid rgba(221,241,245,.4);
  padding-bottom:.2rem;
}
.opt-block{border-top:1px solid rgba(127,168,185,.14)}
.opt-meta{
  background:var(--ink);color:#fff;padding:3.2rem var(--gutter) 0;
  max-width:var(--shell);margin:0 auto;
}
.opt-meta .tag{
  display:inline-block;font-family:var(--head);font-weight:700;font-size:.68rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);
  background:var(--foam);padding:.34rem .8rem;border-radius:999px;margin-bottom:1rem;
}
.opt-meta h2{font-size:clamp(1.4rem,3.2vw,2rem);letter-spacing:.045em;margin-bottom:.7rem}
.opt-meta p{color:var(--on-ink-mute);max-width:46rem}
.opt-meta .how{
  margin-top:1rem;font-size:.84rem;color:var(--grey-blue);
  border-left:2px solid rgba(127,168,185,.35);padding-left:1rem;
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal,.js .hero-line{opacity:1 !important;transform:none !important}
  .map-sticky{position:static;height:auto}
  .map-track{height:auto !important}
}

/* ==========================================================================
   PASTORAL RESIDENCY
   Content from the July 2026 Recruiting Book. Where the recruiting and
   fundraising books disagree, the recruiting figures are used — see README.
   ========================================================================== */
.res-hero{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(8rem,20vh,11rem) 0 clamp(4rem,10vh,6rem);text-align:center;
}
.res-hero .bg{
  position:absolute;left:0;right:0;top:-10%;height:120%;z-index:0;
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.86),rgba(13,31,43,.93)),
    url('../img/photos/hero-cny-aerial.jpg');
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.86),rgba(13,31,43,.93)),
    image-set(url('../img/photos/hero-cny-aerial.avif') type('image/avif'),
              url('../img/photos/hero-cny-aerial.webp') type('image/webp'),
              url('../img/photos/hero-cny-aerial.jpg') type('image/jpeg'));
  background-size:cover;background-position:center 55%;will-change:transform;
}
.res-hero .shell{position:relative;z-index:1;max-width:52rem}
.res-hero h1{
  font-size:clamp(1.9rem,5vw,3.1rem);letter-spacing:.04em;margin-bottom:1.1rem;
  text-shadow:0 2px 24px rgba(8,22,31,.5);
}
.res-hero .lede{color:var(--on-ink-mute);max-width:40rem;margin:0 auto 2.2rem}

/* ---------- the place ---------- */
.res-place{background:var(--paper);padding:clamp(4.5rem,12vh,7.5rem) 0}
.res-place .intro{text-align:center;max-width:46rem;margin:0 auto 3rem}
.res-place .intro .lede{margin-top:.9rem}
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.2rem,3vw,2.4rem);max-width:56rem;margin:0 auto 3rem;
}
.stat{text-align:center}
.stat .fig{
  display:block;font-family:var(--head);font-weight:700;
  font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--ocean);
  letter-spacing:.01em;margin-bottom:.7rem;
}
.stat .cap{display:block;font-size:.9rem;color:var(--text-mute);max-width:22rem;margin:0 auto}
.faith-split{max-width:38rem;margin:0 auto}
.split-title{
  font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--grey-blue);text-align:center;margin-bottom:1.4rem;
}
.bars{list-style:none}
.bars li{display:grid;grid-template-columns:11rem 1fr 3rem;gap:.9rem;
  align-items:center;margin-bottom:.7rem}
.bar-label{font-size:.88rem;color:var(--text-mute)}
.bar{display:block;height:10px;border-radius:999px;background:rgba(127,168,185,.22)}
.bar b{display:block;height:100%;border-radius:999px;background:var(--grey-blue)}
.bars li:first-child .bar b{background:var(--ocean)}
.bar-val{font-family:var(--head);font-weight:700;font-size:.9rem;color:var(--dark-blue)}
@media (max-width:560px){
  .bars li{grid-template-columns:1fr 2.6rem;gap:.4rem .8rem}
  .bar-label{grid-column:1/-1}
  .bar{grid-column:1}
}

/* ---------- what ---------- */
.res-what{background:var(--ink);color:var(--on-ink);padding:clamp(4.5rem,12vh,7.5rem) 0}
.res-what .intro{text-align:center;max-width:46rem;margin:0 auto 3rem}
.res-what .intro .lede{color:var(--on-ink-mute);margin-top:.9rem}
.form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.2rem,3vw,1.8rem);max-width:62rem;margin:0 auto;
}
.form-card{
  background:rgba(127,168,185,.07);border:1px solid rgba(127,168,185,.2);
  border-radius:14px;padding:1.9rem 1.6rem;
}
.form-card .n{
  font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:var(--track);
  color:var(--grey-blue);display:block;margin-bottom:.9rem;
}
.form-card h3{font-size:1rem;letter-spacing:.05em;color:#fff;margin-bottom:.6rem}
.form-card p{font-size:.92rem;color:var(--on-ink-mute)}

/* ---------- how ---------- */
.res-how{background:var(--paper-2);padding:clamp(4.5rem,12vh,7.5rem) 0}
.res-how .intro{text-align:center;max-width:46rem;margin:0 auto 2.6rem}
.res-how .intro .lede{margin-top:.9rem}
.rhythm{list-style:none;max-width:48rem;margin:0 auto}
.rhythm li{
  display:flex;gap:1.5rem;align-items:baseline;justify-content:space-between;
  background:#fff;border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:.8rem;
  box-shadow:0 8px 26px rgba(56,95,119,.07);
}
.rhythm h3{font-size:.98rem;letter-spacing:.045em;color:var(--dark-blue);margin-bottom:.3rem}
.rhythm p{font-size:.9rem;color:var(--text-mute)}
.rhythm .r-freq{
  font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ocean);white-space:nowrap;
}
@media (max-width:560px){
  .rhythm li{flex-direction:column;gap:.7rem}
  .rhythm .r-freq{align-self:flex-start}
}

/* ---------- who ---------- */
.res-who{background:var(--paper);padding:clamp(4.5rem,12vh,7.5rem) 0}
.who-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2rem,5vw,3.5rem);max-width:66rem;margin:0 auto;align-items:start;
}
.who-body .section-title{margin-bottom:1.2rem}
.who-body p{color:var(--text-mute);margin-bottom:1.1rem}
.checks{list-style:none}
.checks li{
  position:relative;padding-left:1.7rem;margin-bottom:.65rem;
  font-size:.94rem;color:var(--text-mute);
}
.checks li::before{           /* a tick needs unequal sides — right+bottom, +45deg */
  content:"";position:absolute;left:3px;top:.28em;width:6px;height:11px;
  border:2px solid var(--ocean);border-top:0;border-left:0;
  transform:rotate(45deg);
}
.testimonial{
  background:var(--paper-2);border-left:3px solid var(--ocean);
  border-radius:0 12px 12px 0;padding:2rem 1.9rem;
}
.testimonial blockquote p{font-size:.95rem;color:var(--text);margin-bottom:1rem;font-style:italic}
.testimonial figcaption{
  margin-top:1.4rem;display:flex;align-items:center;gap:.9rem;
}
.testimonial figcaption img{
  width:60px;height:60px;border-radius:50%;object-fit:cover;
  object-position:center 30%;flex:0 0 60px;
  box-shadow:0 0 0 3px #fff,0 3px 12px rgba(56,95,119,.25);
}
.testimonial figcaption .who{
  font-family:var(--head);font-weight:700;font-size:.86rem;
  letter-spacing:.06em;color:var(--dark-blue);
}
.testimonial figcaption .who span{
  display:block;font-weight:500;font-size:.68rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ocean);margin-top:.25rem;
}

/* ---------- support ---------- */
.res-support{background:var(--dark-blue);color:#fff;padding:clamp(4.5rem,12vh,7.5rem) 0}
.res-support .intro{text-align:center;max-width:48rem;margin:0 auto 2.6rem}
.res-support .intro .lede{color:rgba(232,242,246,.85);margin-top:.9rem}
.fund-split{
  display:grid;grid-template-columns:3fr 1fr;gap:.6rem;
  max-width:44rem;margin:0 auto 3rem;
}
.fund{border-radius:12px;padding:1.4rem 1.3rem;text-align:center}
.fund.fam{background:rgba(255,255,255,.16)}
.fund.res{background:var(--foam);color:var(--dark-blue)}
.fund .amt{
  display:block;font-family:var(--head);font-weight:700;
  font-size:clamp(1.2rem,3vw,1.7rem);letter-spacing:.01em;margin-bottom:.35rem;
}
.fund .who{display:block;font-size:.78rem;line-height:1.4;opacity:.9}
@media (max-width:520px){.fund-split{grid-template-columns:1fr}}
.why-raise{
  max-width:44rem;margin:0 auto;background:rgba(13,31,43,.28);
  border-radius:14px;padding:2rem 1.9rem;
}
.why-raise h3{font-size:1rem;letter-spacing:.05em;color:var(--foam);margin-bottom:.9rem}
.why-raise p{font-size:.92rem;color:rgba(232,242,246,.82);margin-bottom:.9rem}
.why-raise p:last-child{margin-bottom:0}

/* ---------- after ---------- */
.res-after{background:var(--paper-2);padding:clamp(4.5rem,12vh,7.5rem) 0}
.res-after .intro{text-align:center;max-width:44rem;margin:0 auto 2.8rem}
.res-after .intro .lede{margin-top:.9rem}
.path-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.2rem,3vw,1.8rem);max-width:62rem;margin:0 auto;
}
.path{
  background:#fff;border-top:3px solid var(--ocean);border-radius:0 0 12px 12px;
  padding:1.7rem 1.5rem;box-shadow:0 10px 30px rgba(56,95,119,.08);
}
.path h3{font-size:1rem;letter-spacing:.05em;color:var(--dark-blue);margin-bottom:.5rem}
.path p{font-size:.92rem;color:var(--text-mute)}
.after-close{
  max-width:36rem;margin:2.6rem auto 0;text-align:center;
  font-family:var(--head);font-weight:700;font-size:clamp(1rem,2.2vw,1.2rem);
  letter-spacing:.03em;color:var(--dark-blue);
}

/* ---------- next steps ---------- */
.res-apply{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(5rem,13vh,8rem) 0;text-align:center;
}
.res-apply .bg{
  position:absolute;left:0;right:0;top:-10%;height:120%;z-index:0;
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.82),rgba(13,31,43,.9)),
    url('../img/photos/elders.jpg');
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.82),rgba(13,31,43,.9)),
    image-set(url('../img/photos/elders.avif') type('image/avif'),
              url('../img/photos/elders.webp') type('image/webp'),
              url('../img/photos/elders.jpg') type('image/jpeg'));
  background-size:cover;
  /* These bands are far wider than they are tall, so cover scales the photo to
     the width and shows a horizontal slice of it. The heads start about 190px
     down a 1221px image, and at 34% the top of that slice landed below the
     hairlines on wide, short windows. 16% clears them at every viewport shape
     the site is used at, with room left for the parallax shift. */
  background-position:center 16%;will-change:transform;
}
.res-apply .shell{position:relative;z-index:1}
.res-apply h2{
  font-size:clamp(1.8rem,5vw,3rem);letter-spacing:.045em;margin-bottom:1rem;
  text-shadow:0 2px 24px rgba(8,22,31,.5);
}
.res-apply .lede{color:rgba(232,242,246,.85);margin-bottom:2.6rem}
/* Four cards at a 230px minimum need 968px once the gaps are counted, and the
   grid was capped at 960, so the umbrella page's fourth step wrapped onto a
   line of its own. 64rem clears it. The three-step pages simply run wider. */
.step-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;max-width:64rem;margin:0 auto;
}
.step{
  display:block;text-decoration:none;text-align:left;
  background:rgba(127,168,185,.1);border:1px solid rgba(127,168,185,.28);
  border-radius:14px;padding:1.5rem 1.4rem;
  transition:background .25s,transform .25s,border-color .25s;
}
.step:hover{background:rgba(127,168,185,.2);transform:translateY(-3px)}
.step.is-primary{background:var(--ocean);border-color:var(--ocean)}
.step.is-primary:hover{background:var(--grey-blue)}
.step .s-n{
  font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:var(--track);
  color:var(--grey-blue);display:block;margin-bottom:.8rem;
}
.step.is-primary .s-n{color:rgba(255,255,255,.75)}
.step .s-t{
  display:block;font-family:var(--head);font-weight:700;font-size:1rem;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.45;
}
/* The verb is the thing being offered, so it carries the colour and the name
   of the pathway sits on its own line underneath rather than wrapping wherever
   the card happens to run out of room. */
.step .s-do{color:var(--grey-blue)}
.step .s-obj{display:block}
/* On the filled card the object is white, and Foam sits only 4.50 against the
   Ocean fill where white sits 5.25, so the two were near indistinguishable.
   Ink goes the other way, dark against mid, which is the widest separation any
   palette colour gives here. */
.step.is-primary .s-do{color:var(--ink)}

/* ---------- homepage band ---------- */
.res-band{
  position:relative;overflow:hidden;background:var(--dark-blue);color:#fff;
  padding:clamp(4rem,10vh,6rem) 0;
}
.band-grid{
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;max-width:var(--shell);
}
.band-grid h2{font-size:clamp(1.5rem,3.6vw,2.2rem);letter-spacing:.045em;margin:.6rem 0 .8rem}
.band-grid p{color:rgba(232,242,246,.85);max-width:38rem}
@media (max-width:720px){.band-grid{grid-template-columns:1fr}}

/* ==========================================================================
   RESIDENCY APPLICATION (draft form)
   ========================================================================== */
.apply-page{background:var(--ink);padding-bottom:clamp(3rem,8vh,5rem)}
.apply-wrap{max-width:52rem;margin:0 auto;padding:0 var(--gutter)}
.draft-note{
  background:rgba(214,158,46,.14);border:1px solid rgba(214,158,46,.4);
  color:#f0d9a8;border-radius:12px;padding:1rem 1.2rem;font-size:.88rem;
  margin-bottom:1.8rem;line-height:1.6;
}
.draft-note strong{color:#ffd98a}

.apply-form fieldset{
  border:0;background:rgba(127,168,185,.07);
  border:1px solid rgba(127,168,185,.18);border-radius:14px;
  padding:1.8rem 1.6rem;margin-bottom:1.2rem;
}
.apply-form legend{
  font-family:var(--head);font-weight:700;font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;padding:0 .6rem;margin-left:-.6rem;
  display:flex;align-items:center;gap:.7rem;
}
.apply-form legend .step{
  font-size:.66rem;letter-spacing:.14em;color:var(--ink);
  background:var(--grey-blue);padding:.25rem .55rem;border-radius:999px;
}
.apply-form fieldset.inner{
  background:rgba(13,31,43,.35);border-color:rgba(127,168,185,.14);
  margin:1.2rem 0 0;padding:1.2rem 1.2rem 1rem;
}
.apply-form fieldset.inner legend{
  font-size:.74rem;letter-spacing:.12em;color:var(--grey-blue);
}
.apply-form label{
  display:block;margin-top:1.1rem;font-size:.86rem;color:var(--on-ink);
  font-weight:600;letter-spacing:.01em;
}
.apply-form legend + label,.apply-form .grid-2 label,.apply-form .grid-3 label{margin-top:0}
.apply-form .req{color:var(--grey-blue);font-weight:400}
.apply-form small{
  display:block;margin-top:.4rem;font-size:.76rem;font-weight:400;
  color:var(--on-ink-mute);line-height:1.5;
}
.apply-form .fs-note{margin-top:1rem;font-size:.85rem;color:var(--on-ink-mute)}
.apply-form input[type=text],.apply-form input[type=email],.apply-form input[type=tel],
.apply-form input[type=date],.apply-form input[type=month],
.apply-form select,.apply-form textarea{
  display:block;width:100%;margin-top:.45rem;
  background:rgba(13,31,43,.5);border:1px solid rgba(127,168,185,.3);
  border-radius:9px;padding:.7rem .85rem;
  font-family:var(--body);font-size:.94rem;font-weight:400;color:#fff;
  transition:border-color .2s,background .2s;
}
.apply-form textarea{resize:vertical;line-height:1.6}
.apply-form input:focus,.apply-form select:focus,.apply-form textarea:focus{
  outline:none;border-color:var(--grey-blue);background:rgba(13,31,43,.75);
}
.apply-form ::placeholder{color:rgba(159,188,203,.55)}
.apply-form select option{background:var(--ink);color:#fff}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.1rem;margin-top:1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;margin-top:1.1rem;padding-bottom:1.1rem;
  border-bottom:1px solid rgba(127,168,185,.14)}
.grid-3:last-of-type{border-bottom:0;padding-bottom:0}
.apply-form label.check{
  display:flex;gap:.7rem;align-items:flex-start;font-weight:400;
  font-size:.9rem;color:var(--on-ink-mute);margin-top:.8rem;line-height:1.55;
}
.apply-form label.check input{
  flex:0 0 auto;margin-top:.28rem;width:16px;height:16px;accent-color:var(--ocean);
}
.apply-actions{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  margin-top:2rem;text-align:center;
}
.apply-actions .btn{border:0;cursor:pointer;font-size:.88rem}
.apply-actions .privacy{font-size:.8rem;color:var(--on-ink-mute);max-width:30rem}
.form-result{
  margin-top:1.4rem;text-align:center;background:rgba(33,115,156,.18);
  border:1px solid rgba(127,168,185,.35);border-radius:12px;
  padding:1rem 1.2rem;color:var(--foam);font-size:.9rem;
}

/* draft-saving status strip on the application form */
/* The live draft status lives inside the note now, one box instead of two:
   a quiet second row under the standing explanation, not its own pill. */
.draft-note p{margin:0}
.draft-bar[hidden]{display:none}
.draft-bar{
  display:flex;align-items:center;gap:.6rem;
  border-top:1px solid rgba(214,158,46,.35);
  padding:.75rem 0 0;margin-top:.85rem;
  font-size:.82rem;color:var(--foam);
}
.draft-bar .dot{
  width:7px;height:7px;border-radius:50%;background:var(--grey-blue);flex:0 0 7px;
}
.draft-bar button{
  margin-left:auto;background:none;border:0;cursor:pointer;
  font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-blue);padding:.2rem .1rem;
}
.draft-bar button:hover{color:var(--foam);text-decoration:underline}

/* ==========================================================================
   EMERGING LEADERS (umbrella page)
   The mark was recoloured into the SFOC palette: Grey Blue over Ocean Blue,
   light on mid, the same move the SFOC wordmark makes on a dark ground. It
   therefore reads on the hero unaided, and the white card the red version
   needed underneath it is gone.
   The mark's own two colours live inside the SVG, not here: a file loaded
   through <img> is its own document and cannot see this stylesheet. It reads
   --el-light and --el-dark with the palette values as fallbacks, so it is
   correct standing alone and still tintable if it is ever inlined.
   --el-accent below is the knob for everything around it.
   ========================================================================== */
:root{--el-accent:var(--ocean)}

.el-hero{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(7.5rem,18vh,10rem) 0 clamp(3.5rem,9vh,5.5rem);text-align:center;
}
.el-hero .bg{
  position:absolute;left:0;right:0;top:-10%;height:120%;z-index:0;
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.88),rgba(13,31,43,.94)),
    url('../img/photos/hero-cny-aerial.jpg');
  background-image:
    linear-gradient(180deg,rgba(13,31,43,.88),rgba(13,31,43,.94)),
    image-set(url('../img/photos/hero-cny-aerial.avif') type('image/avif'),
              url('../img/photos/hero-cny-aerial.webp') type('image/webp'),
              url('../img/photos/hero-cny-aerial.jpg') type('image/jpeg'));
  background-size:cover;background-position:center 55%;will-change:transform;
}
/* Wide enough that the heading breaks in two, which it misses by a hair at
   52rem once the shell's padding opens up on a large screen. */
.el-hero .shell{position:relative;z-index:1;max-width:54rem}
.el-logo{
  width:min(190px,42vw);height:auto;margin:0 auto 2.1rem;display:block;
}
.el-hero h1{
  font-size:clamp(1.6rem,4.2vw,2.5rem);letter-spacing:.04em;margin-bottom:1.1rem;
  text-shadow:0 2px 24px rgba(8,22,31,.5);text-wrap:balance;
}
.el-hero .lede{color:var(--on-ink-mute);max-width:42rem;margin:0 auto 2.2rem}

/* ---------- the comparison ---------- */
.el-compare{background:var(--paper);padding:clamp(4.5rem,12vh,7.5rem) 0}
.el-compare .intro{text-align:center;max-width:46rem;margin:0 auto 2.6rem}
.el-compare .intro .lede{margin-top:.9rem}
.cmp-wrap{overflow-x:auto;padding-bottom:.4rem}
table.cmp{
  border-collapse:collapse;width:100%;min-width:46rem;background:#fff;
  border-radius:12px;overflow:hidden;box-shadow:0 12px 34px rgba(56,95,119,.1);
}
table.cmp th,table.cmp td{
  padding:.8rem 1rem;text-align:left;font-size:.88rem;vertical-align:top;
  border-bottom:1px solid rgba(127,168,185,.2);
}
/* All three columns carry the same header. The table is there to help someone
   find the pathway that fits them, so singling one out with a second colour
   argued for it before they had finished reading. */
table.cmp thead th{
  background:var(--dark-blue);color:#fff;font-family:var(--head);font-weight:700;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
table.cmp tbody th{
  font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dark-blue);background:var(--paper-2);
  white-space:nowrap;width:1%;
}
table.cmp td{color:var(--text-mute)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}

/* ---------- one band per pathway ---------- */
/* The three bands alternate light and lighter, and nothing more. The pastoral
   band used to run on the dark ink ground, which read as the real one with two
   warm-ups in front of it. They are three doors, not a ladder. */
.path-band{background:var(--paper);padding:clamp(3.5rem,9vh,5.5rem) 0}
.path-band.is-alt{background:var(--paper-2)}
.pb-grid{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,3.5rem);max-width:62rem;margin:0 auto;align-items:start;
}
.pb-mark{
  text-align:right;padding-right:clamp(1rem,2.5vw,2rem);
  border-right:2px solid rgba(127,168,185,.35);
}
.pb-n{
  display:block;font-family:var(--head);font-weight:700;
  font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;color:var(--el-accent);
}
.pb-dur{
  display:block;margin-top:.5rem;font-family:var(--head);font-weight:700;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);
}
.pb-body > p{color:var(--text-mute);margin-bottom:1.3rem}
.pb-body .section-title{margin-bottom:1rem}
.pb-facts{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:.92rem}
.pb-facts dt{
  font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--el-accent);padding-top:.2rem;
}
.pb-facts dd{color:var(--text-mute)}
.pb-go{
  display:inline-block;margin-top:1.4rem;font-family:var(--head);font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--el-accent);text-decoration:none;
  border-bottom:1.5px solid rgba(33,115,156,.35);padding-bottom:.2rem;
}
.pb-go:hover{border-color:var(--el-accent)}
/* on the ink band the accent has too little contrast, so the link goes foam */
@media (max-width:720px){
  .pb-grid{grid-template-columns:1fr}
  .pb-mark{
    text-align:left;border-right:0;padding-right:0;
    border-left:2px solid rgba(127,168,185,.35);padding-left:1rem;
    display:flex;align-items:baseline;gap:.9rem;
  }
  .pb-n{font-size:2rem}
  .pb-dur{margin-top:0}
}

/* ---------- pathway pages: breadcrumb, glance strip, onward card ---------- */
.pathway-crumb{
  font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-blue);margin-bottom:1.1rem;
}
.pathway-crumb a{color:var(--foam);text-decoration:none;
  border-bottom:1px solid rgba(221,241,245,.35)}
.pathway-crumb a:hover{border-color:var(--foam)}
.pathway-crumb span{margin:0 .4rem;opacity:.6}

.glance{background:var(--paper-2);padding:clamp(2.5rem,7vh,4rem) 0}
.glance-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1.2rem,3vw,2.4rem);max-width:56rem;margin:0 auto;text-align:center;
}
.g-fig{
  display:block;font-family:var(--head);font-weight:700;
  font-size:clamp(1.9rem,4.6vw,2.8rem);line-height:1;color:var(--el-accent);
  margin-bottom:.5rem;
}
.g-cap{display:block;font-size:.88rem;color:var(--text-mute);max-width:15rem;margin:0 auto}

.next-step{
  background:var(--paper-2);border-left:3px solid var(--el-accent);
  border-radius:0 12px 12px 0;padding:1.9rem 1.8rem;
}
.next-step .ns-label{
  font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--grey-blue);margin-bottom:.6rem;
}
.next-step h3{font-size:1.15rem;letter-spacing:.05em;color:var(--dark-blue);
  margin-bottom:.7rem}
.next-step p{font-size:.92rem;color:var(--text-mute);margin-bottom:1rem}

/* ==========================================================================
   BRAND RESOURCES (/branding)
   Gated page. The lock is the ordinary subpage intro with a form in it, and
   the unlocked half is injected below it, so both halves inherit the site.
   ========================================================================== */
.branding-page{background:var(--paper)}
/* The gate is dark like every other subpage intro; what replaces it is light
   like an ordinary content page. So the dark ground belongs to the gate, not
   to the page, and leaves with it. */
.branding-lock{background:var(--ink);min-height:100svh}
.lock-form{
  display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;
  margin:1.8rem auto 0;max-width:26rem;
}
.lock-form input{
  flex:1 1 12rem;min-width:11rem;padding:.85rem 1.1rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:#fff;
  font:400 .95rem/1 Mulish,MulishLocal,sans-serif;
}
.lock-form input::placeholder{color:rgba(255,255,255,.45)}
.lock-form input:focus{
  outline:none;border-color:var(--grey-blue);background:rgba(255,255,255,.12);
}
.lock-form .btn{flex:0 0 auto}
.lock-error{
  margin:1rem auto 0;max-width:32rem;color:#ffc9c2;font-size:.9rem;line-height:1.6;
}
.lock-error a{color:#fff}

.brand-sec{padding:clamp(3.4rem,8vh,5.2rem) 0;background:var(--paper)}
.brand-sec.alt{background:var(--paper-2)}
.brand-sec .kicker{margin-bottom:.5rem}
.brand-sec .section-title{margin-bottom:.9rem}
.brand-lede{
  max-width:44rem;color:var(--text-mute);line-height:1.75;margin-bottom:1.6rem;
}
.brand-lede + .brand-lede{margin-top:-.6rem}

/* the style guide, given its own weight */
/* asset tiles: a preview, a name, and the formats it comes in */
.asset-grid{
  display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.asset{margin:0;border:1px solid #dce7ee;border-radius:12px;overflow:hidden;background:#fff}
.a-stage{
  display:flex;align-items:center;justify-content:center;padding:1.3rem 1.1rem;min-height:112px;
}
.a-stage.light{background:#fff}
.a-stage.dark{background:var(--ink)}
.a-stage img{max-width:100%;max-height:70px;width:auto;height:auto;display:block}
/* The family lockups are wide and the Emerging Leaders mark is portrait, so a
   single height cap either shrinks that one to nothing or lets it tower over
   the row. It gets its own cap and the tile keeps the same footprint. */
.a-stage.tall img{max-height:104px}
/* Every other mark ships a separate file per ground, so its tile says which
   one it is for. Emerging Leaders is a single file that reads on both, which
   was the whole reason for the colours it has. Splitting the stage shows that
   in one tile, rather than implying a second download that does not exist. */
.a-stage.split{background:linear-gradient(90deg,#fff 0 50%,var(--ink) 50% 100%)}
.asset figcaption{
  padding:.65rem .85rem .8rem;border-top:1px solid #eef4f8;
  display:flex;flex-direction:column;gap:.45rem;
}
.a-name{
  font-family:'League Spartan',SpartanLocal,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;font-size:.68rem;color:var(--ink);
  line-height:1.35;
}
.a-sub{font-size:.72rem;color:var(--text-mute);line-height:1.4;margin-top:-.2rem}
.a-links{display:flex;gap:.4rem}
.a-links a{
  flex:1;text-align:center;text-decoration:none;padding:.35rem .2rem;border-radius:6px;
  background:var(--paper-2);color:var(--ocean);
  font:700 .66rem/1 'League Spartan',SpartanLocal,sans-serif;letter-spacing:.1em;
}
.a-links a:hover{background:var(--ocean);color:#fff}

/* download tiles */
.dl-row{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.dl-row.two{grid-template-columns:repeat(auto-fit,minmax(255px,1fr));max-width:44rem}
.dl{
  display:flex;flex-direction:column;gap:.3rem;text-decoration:none;
  padding:1.1rem 1.2rem 1.2rem;border-radius:14px;background:#fff;
  border:1px solid #dce7ee;transition:border-color .2s ease,transform .2s ease;
}
a.dl:hover{border-color:var(--ocean);transform:translateY(-2px)}
.dl-k{
  font:700 .64rem/1 'League Spartan',SpartanLocal,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ocean);
}
.dl-t{
  font-family:'League Spartan',SpartanLocal,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--ink);
}
.dl-s{font-size:.82rem;color:var(--text-mute);line-height:1.55}
.dl.is-note{background:transparent;border-style:dashed}
.dl.is-note .dl-k{color:var(--grey-700)}

/* colour swatches */
.sw-head{
  font:700 .7rem/1 'League Spartan',SpartanLocal,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey-700);margin:1.6rem 0 .8rem;
}
.sw-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.sw{display:flex;flex-direction:column;gap:.15rem}
.sw .chip{
  display:block;height:76px;border-radius:12px;margin-bottom:.55rem;
  box-shadow:inset 0 0 0 1px rgba(13,31,43,.1);
}
.sw-n{
  font-family:'League Spartan',SpartanLocal,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--ink);
}
.sw-h{font-size:.82rem;color:var(--text-mute);font-variant-numeric:tabular-nums}
.sw-c{font-size:.74rem;color:var(--grey-500)}

/* type specimens */
@media(max-width:560px){
  /* Stacking flips the main axis, which turns the input's flex-basis from a
     width into a height and lets flex-grow stretch it. Both have to go. */
  .lock-form{flex-direction:column}
  .lock-form input{flex:0 0 auto;width:100%}
  .lock-form .btn{width:100%}
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound{
  background:var(--ink);color:#fff;min-height:100svh;
  display:flex;align-items:center;text-align:center;
  padding:clamp(7rem,16vh,10rem) 0 clamp(3rem,8vh,5rem);
}
.notfound .shell{max-width:60rem}
.notfound h1{
  font-size:clamp(1.9rem,5.4vw,3.2rem);letter-spacing:.045em;margin:.4rem 0 1rem;
}
.notfound .lede{color:var(--on-ink-mute);max-width:34rem;margin:0 auto 2.6rem}
.nf-grid{
  display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));
  max-width:56rem;margin:0 auto;text-align:left;
}
.nf-card{
  display:block;text-decoration:none;padding:1.3rem 1.3rem 1.4rem;border-radius:14px;
  background:rgba(127,168,185,.1);border:1px solid rgba(127,168,185,.28);
  transition:background .25s,transform .25s,border-color .25s;
}
.nf-card:hover{background:rgba(127,168,185,.2);transform:translateY(-3px)}
.nf-t{
  display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.95rem;color:#fff;margin-bottom:.4rem;
}
.nf-d{display:block;font-size:.84rem;line-height:1.5;color:var(--on-ink-mute)}
.nf-help{margin-top:2.4rem;font-size:.9rem;color:var(--on-ink-mute)}
.nf-help a{color:var(--foam)}

/* The honeypot must be reachable by a bot parsing the HTML and invisible to a
   person, including to a screen reader, hence off-screen rather than display:none
   (some bots skip what is hidden outright). */
.apply-form .hp{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}
.form-result.is-ok{
  border-left:3px solid var(--ocean);background:rgba(33,115,156,.12);color:var(--foam);
}
.form-result.is-warn{
  border-left:3px solid #e0a03a;background:rgba(224,160,58,.12);color:#ffe2b8;
}
.form-result{padding:1rem 1.2rem;border-radius:10px;line-height:1.6;margin-top:1rem}
.form-result a{color:#fff}

/* The hosted-page button exists for phones, where Apple Pay is available on
   Tithe.ly's page and never in the embed. On desktop the embed is the better
   first experience, so the button stays out of the way. */
.give-hosted-cta{display:none}
.give-hosted-note{display:none}
@media (max-width:720px){
  .give-hosted-cta{
    display:flex;align-items:center;justify-content:center;gap:.55em;
    margin:0 0 .6rem;
  }
  .give-hosted-note{
    display:block;text-align:center;font-size:.8rem;color:var(--on-ink-mute);
    margin:0 0 1.6rem;
  }
}

/* Apple's white payment badge, recreated at its official proportions (about
   1.56:1, corners near 10% of height; the plain white variant, since the
   outlined one is for white grounds). The button becomes a centred flex row
   so the words sit on the badge's optical centre line rather than on a text
   baseline the taller badge would drag around. */
.give-hosted-cta .ap-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:#fff;border-radius:5.5px;height:2.1em;width:3.3em;
}
.give-hosted-cta .ap-badge svg{width:.85em;height:1.06em;fill:#000;
  margin:-.07em .16em 0 0}
.give-hosted-cta .ap-badge b{
  color:#000;font:600 1.1em/1 -apple-system,'Helvetica Neue','Segoe UI',sans-serif;
  letter-spacing:0;text-transform:none;
}

/* ── What We Believe ─────────────────────────────────────────────────────
   The reading page behind the application checkbox. Same dark ground as the
   other subpages; the accordion is native details/summary so it works with
   no script and prints expanded. */
.beliefs-page{background:var(--ink);padding-bottom:clamp(4rem,9vh,7rem)}
.beliefs-wrap{max-width:46rem;margin:0 auto;padding:0 1.4rem}
.b-section{margin-top:clamp(3rem,7vh,4.6rem)}
.b-statement{
  font-family:var(--head);font-weight:500;color:#fff;
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.5;margin:.9rem 0 0;
}
.b-statement strong{color:var(--grey-blue);font-weight:700}
.b-lede{color:var(--on-ink-mute);font-size:1.02rem;margin:.7rem 0 1.4rem}
.b-cards{display:grid;gap:1rem}
@media (min-width:700px){
  .b-cards{grid-template-columns:repeat(3,1fr)}
  .b-cards-2{grid-template-columns:repeat(2,1fr)}
}
.b-card{
  background:rgba(127,168,185,.08);border:1px solid rgba(127,168,185,.18);
  border-radius:12px;padding:1.25rem 1.3rem 1.35rem;
}
.b-card h3{
  font-family:var(--head);font-weight:700;font-size:.95rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-blue);margin:0 0 .55rem;
}
.b-card p{color:#cfdde5;font-size:.95rem;line-height:1.7;margin:0}
.b-refs,.acc-refs{
  color:var(--g4,#8fa5b1);font-size:.78rem;line-height:1.6;margin:.7rem 0 0!important;
  color:rgba(207,221,229,.55);
}
.accordion{border-top:1px solid rgba(127,168,185,.22)}
.accordion details{border-bottom:1px solid rgba(127,168,185,.22)}
.accordion summary{
  cursor:pointer;list-style:none;position:relative;
  font-family:var(--head);font-weight:700;font-size:1.02rem;color:#fff;
  padding:1rem 2.2rem 1rem 0;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  color:var(--grey-blue);font-weight:400;font-size:1.35rem;
}
.accordion details[open] summary::after{content:"\2212"}
.accordion .acc-body{padding:0 0 1.2rem}
.accordion .acc-body p{color:#cfdde5;font-size:.95rem;line-height:1.75;margin:0 0 .8rem}

/* ── Events ──────────────────────────────────────────────────────────────
   The list and each event's page. Both are drawn by script from /api/events,
   on the same dark ground as the other subpages. */
.events-page{background:var(--ink);padding-bottom:clamp(4rem,9vh,7rem);min-height:60vh}
.ev-wrap{max-width:86rem;margin:0 auto;padding:0 1.4rem}
.ev-detail{max-width:48rem;margin:0 auto;padding:0 1.4rem}
.ev-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.ev-filters[hidden]{display:none}
.ev-chip{
  font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--on-ink-mute);border:1px solid rgba(127,168,185,.35);
}
.ev-chip:hover{color:#fff;border-color:var(--grey-blue)}
.ev-chip.is-on{background:var(--ocean);border-color:var(--ocean);color:#fff}
/* Cards in the shape the churches around us use: the graphic leads, with the
   date sitting on it, and the text underneath. Two to a row on a desktop,
   deliberately larger than Missio's three-up. */
.ev-list{
  display:grid;gap:clamp(1rem,2.2vw,1.5rem);align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr));
}
.ev-loading,.ev-empty{color:var(--on-ink-mute);text-align:center;padding:2rem 0;grid-column:1/-1}
.ev-empty-h{font-family:var(--head);font-weight:700;color:#fff;font-size:1.15rem;margin:0 0 .4rem}
.ev-empty a{color:#fff}
.ev-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(127,168,185,.07);border:1px solid rgba(127,168,185,.18);
  border-radius:18px;color:inherit;text-decoration:none;
  transition:border-color .2s,background .2s,transform .2s;
}
.ev-card:hover{border-color:rgba(127,168,185,.5);background:rgba(127,168,185,.12);transform:translateY(-3px)}
/* Every graphic gets the same frame and fills it. The exception is artwork
   much wider than the frame, like Missio's Youth315 wordmark at 2.25:1,
   where filling would slice the lettering off the sides: that sits whole on
   white instead, which also carries a see-through PNG. */
.ev-art{position:relative;background:#fff;overflow:hidden;line-height:0;aspect-ratio:16/9}
.ev-art > img{width:100%;height:100%;object-fit:cover;display:block}
.ev-art.is-fit > img{object-fit:contain;padding:.9rem}
/* No graphic yet: the family mark on the brand gradient, so a row of cards
   keeps one rhythm whether or not anyone has uploaded art. */
.ev-art.is-empty{
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  background:linear-gradient(140deg,var(--dark-blue),var(--ocean) 62%,var(--grey-blue));
}
.ev-art.is-empty > img{width:auto;height:38%;opacity:.5}
.ev-date{
  position:absolute;top:.75rem;left:.75rem;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:3.5rem;padding:.45rem .6rem .5rem;line-height:1;border-radius:12px;
  background:rgba(13,31,43,.88);border:1px solid rgba(127,168,185,.3);
  backdrop-filter:blur(2px);
}
.ev-date.is-range .d{font-size:1.25rem;letter-spacing:-.01em}
.ev-date.is-span{padding:.5rem .7rem}
.ev-date.is-span .r{font-family:var(--head);font-weight:800;font-size:.92rem;color:#fff}
.ev-date.is-span .r.to{font-weight:700;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-blue);margin:.18rem 0}
.ev-date .m{font-family:var(--head);font-weight:700;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-blue)}
.ev-date .d{font-family:var(--head);font-weight:800;font-size:1.5rem;color:#fff;margin-top:.22rem}
.ev-body{padding:1.35rem 1.4rem 0;display:flex;flex-direction:column;flex:1;overflow:hidden}
.ev-tags{margin:0 0 .45rem;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline}
.ev-tag{font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-blue)}
.ev-host{font-size:.78rem;color:var(--on-ink-mute)}
.ev-title{font-family:var(--head);font-weight:700;font-size:clamp(1.2rem,2vw,1.45rem);
  color:#fff;margin:0;letter-spacing:.01em;line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(2 * 1.22em);}
.ev-when{margin:.5rem 0 0;font-size:.95rem;color:var(--on-ink)}
.ev-where{margin:.18rem 0 0;font-size:.9rem;color:var(--on-ink-mute);height:1.5em;overflow:hidden}
.ev-sum{margin:.65rem 0 .2rem;font-size:.92rem;line-height:1.55;color:var(--on-ink-mute);
  height:calc(2 * 1.55em);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The call to action is a bar across the foot of the card rather than a
   pill, so every card ends on the same line and the whole width is the
   target. */
.ev-foot{margin:2.4rem -1.4rem 0;padding:0;display:block}
.ev-status{
  display:block;text-align:center;font-family:var(--head);font-weight:700;
  font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1rem 1.2rem;border:0;border-top:1px solid rgba(127,168,185,.22);
  color:var(--on-ink);background:rgba(127,168,185,.08);
  border-radius:0 0 17px 17px;transition:background .2s,color .2s;
}
.ev-status .arw{display:inline-block;margin-left:.45rem;transition:transform .2s}
.ev-card:hover .ev-status .arw{transform:translateX(4px)}
.ev-card:hover .ev-status,.ev-status:hover{background:rgba(127,168,185,.18);color:#fff}
.ev-card:hover .ev-status.is-open,.ev-status.is-open:hover{background:var(--dark-blue)}
.ev-status.is-open{background:var(--ocean);border-top-color:var(--ocean);color:#fff}
.ev-status.is-shut{color:var(--on-ink-mute)}
@media (max-width:560px){
  .ev-body{padding:1.15rem 1.15rem 0}
  .ev-foot{margin:2.2rem -1.15rem 0}
  .ev-art{aspect-ratio:16/9}
}

.ev-head{padding-bottom:1.6rem}
.ev-back{display:inline-block;margin-bottom:1.4rem;font-size:.85rem;color:var(--on-ink-mute);
  text-decoration:none}
.ev-back:hover{color:#fff}
.ev-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.7rem 1.4rem;
  margin:0;padding:1.3rem 1.4rem;background:rgba(127,168,185,.07);
  border:1px solid rgba(127,168,185,.18);border-radius:14px}
.ev-facts dt{font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-blue);padding-top:.2rem}
.ev-facts dd{margin:0;color:#fff;font-size:.98rem;line-height:1.5}
.ev-facts a{color:#fff}
.ev-cal{margin:.9rem 0 0;font-size:.85rem;color:var(--on-ink-mute)}
.ev-cal a,.ev-linkbtn{color:var(--on-ink);text-decoration:underline;text-underline-offset:3px}
.ev-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.ev-desc{margin-top:2rem}
.ev-desc p{color:#cfdde5;font-size:1rem;line-height:1.8;margin:0 0 1rem}
.ev-signup{margin-top:2.4rem}
.ev-sub{font-family:var(--head);font-weight:700;font-size:.95rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 1rem}
.ev-note{color:var(--on-ink-mute);margin:0 0 1rem}
.ev-form .grid-2{margin-top:0}
.ev-form .apply-actions{margin-top:1.4rem}
.apply-form input[type=number],.apply-form input[type=time],.apply-form input[type=url],
.apply-form input[type=password]{
  display:block;width:100%;margin-top:.45rem;
  background:rgba(13,31,43,.5);border:1px solid rgba(127,168,185,.3);
  border-radius:9px;padding:.7rem .85rem;
  font-family:var(--body);font-size:.94rem;font-weight:400;color:#fff;
}
.apply-form input[type=radio]{accent-color:var(--ocean)}
.apply-form fieldset[disabled]{opacity:.6}

/* ── Events admin ────────────────────────────────────────────────────────
   A working tool for two or three people, not a public page: plainer,
   denser, and kept out of search by robots.txt and its own meta tag. */
.adm-page{background:var(--ink);color:var(--on-ink);min-height:100vh}
.adm-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.4rem;
  border-bottom:1px solid rgba(127,168,185,.18)}
.adm-header .brand img{height:30px;display:block}
.adm-header-label{font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-blue)}
.adm{max-width:56rem;margin:0 auto;padding:2rem 1.4rem 5rem}
.adm h1{font-family:var(--head);font-weight:800;font-size:1.8rem;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;margin:0 0 .4rem}
.adm-lock{max-width:24rem;margin:3rem auto}
.adm-lock p{color:var(--on-ink-mute);font-size:.92rem}
.adm-lock .btn{margin-top:1.2rem;border:0;cursor:pointer}
.adm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.4rem}
.adm-top-acts{display:flex;gap:.6rem;align-items:center}
.adm-top .btn{border:0;cursor:pointer}
.adm-env{margin:0;font-size:.85rem;color:#ffd98a}
.adm-env.is-live{color:var(--on-ink-mute)}
.adm-h2{font-family:var(--head);font-weight:700;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-blue);margin:1.8rem 0 .6rem}
.adm-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.9rem 0;border-top:1px solid rgba(127,168,185,.16)}
.adm-row.is-past{opacity:.65}
.adm-title{margin:0;font-weight:700;color:#fff}
.adm-line{margin:.2rem 0 0;font-size:.85rem;color:var(--on-ink-mute)}
.adm-badge{display:inline-block;margin-left:.6rem;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:6px;
  background:rgba(224,160,58,.16);color:#ffd98a;vertical-align:middle}
.adm-acts{display:flex;gap:.4rem;flex-wrap:wrap}
.adm-btn{font:600 .8rem/1 var(--body);padding:.55rem .8rem;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--on-ink);border:1px solid rgba(127,168,185,.35);
  text-decoration:none;display:inline-block}
.adm-btn:hover{border-color:var(--grey-blue);color:#fff}
.adm-empty{color:var(--on-ink-mute)}
.adm-flash{position:sticky;top:.6rem;z-index:5;margin:0 0 1rem;padding:.8rem 1rem;
  border-radius:10px;background:rgba(33,115,156,.25);border:1px solid rgba(127,168,185,.4);color:#fff}
.adm-flash.is-bad{background:rgba(224,160,58,.18);border-color:rgba(224,160,58,.5);color:#ffe2b8}
.adm-form-acts{display:flex;gap:.8rem;align-items:center;margin-top:1.2rem}
.adm-form-acts .btn{border:0;cursor:pointer}
#admOnsite[hidden],#admLink[hidden]{display:none}
#admRoster h1{margin-top:1rem}
.adm-scroll{overflow-x:auto;border:1px solid rgba(127,168,185,.18);border-radius:10px}
.adm-table{border-collapse:collapse;width:100%;font-size:.85rem}
.adm-table th,.adm-table td{padding:.6rem .8rem;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(127,168,185,.14)}
.adm-table th{font-family:var(--head);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-blue);white-space:nowrap}
.adm-table td{color:var(--on-ink)}

.ev-desc a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Events list header: the page title carries the page, so it is larger than
   other subpages and the one-line description sits directly under it. */
.ev-intro{max-width:56rem;padding-bottom:clamp(1.6rem,4vh,2.4rem)}
.ev-intro h1{font-size:clamp(2.4rem,7vw,4.2rem);margin-bottom:.6rem}
.ev-intro-line{font-size:clamp(.95rem,1.6vw,1.1rem);margin:0}

.ev-hero{margin:0 0 1.6rem;border-radius:14px;overflow:hidden;background:#fff;
  line-height:0;aspect-ratio:16/9}
.ev-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ev-hero.is-fit img{object-fit:contain;padding:1.3rem}

/* Graphic picker in the admin editor */
.adm-art{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-top:1rem}
.adm-art-preview{width:11rem;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:rgba(13,31,43,.5);border:1px dashed rgba(127,168,185,.35);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
  color:var(--on-ink-mute);text-align:center;padding:.5rem}
.adm-art-preview img{width:100%;height:100%;object-fit:cover}
.adm-art-side{flex:1 1 14rem;min-width:12rem}
.adm-art-side p{font-size:.8rem;color:var(--on-ink-mute);margin:.6rem 0 0;line-height:1.5}
.adm-art input[type=file]{font:inherit;font-size:.85rem;color:var(--on-ink)}

/* ── The event pop-up ────────────────────────────────────────────────────
   Opening an event on the list keeps you on the list: closing it puts the
   other events straight back in front of you. */
body.ev-locked{overflow:hidden}
.ev-modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(1rem,4vh,3rem) 1rem;overflow-y:auto;
  background:rgba(6,15,21,.78);backdrop-filter:blur(3px);
  animation:evFade .16s ease-out;
}
.ev-modal[hidden]{display:none}
@keyframes evFade{from{opacity:0}to{opacity:1}}
.ev-panel{
  position:relative;width:min(58rem,100%);margin:auto;
  background:var(--ink-2);border:1px solid rgba(127,168,185,.24);border-radius:18px;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:evRise .2s ease-out;
}
@keyframes evRise{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}
.ev-panel-head{text-align:center;max-width:42rem;margin:0 auto 1.8rem;padding:0 2rem}
.ev-panel-head h2{
  font-family:var(--head);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);
  letter-spacing:.03em;text-transform:uppercase;color:#fff;margin:.5rem 0 .6rem;line-height:1.1;
}
.ev-panel-head .lede{color:var(--on-ink-mute);margin:0;font-size:1rem}
.ev-panel-head .lede[hidden]{display:none}
.ev-panel-body .ev-hero{max-width:100%}
.ev-close{
  position:absolute;top:.9rem;right:1rem;z-index:2;
  width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;
  background:rgba(13,31,43,.7);border:1px solid rgba(127,168,185,.3);
  color:#fff;font-size:1.5rem;line-height:1;padding:0;
}
.ev-close:hover{background:var(--ocean);border-color:var(--ocean)}
.ev-panel-nav{
  display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;
  padding-top:1.2rem;border-top:1px solid rgba(127,168,185,.18);
}
.ev-nav{
  font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.7rem 1.1rem;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--on-ink);border:1px solid rgba(127,168,185,.35);
}
.ev-nav:hover:not(:disabled){border-color:var(--grey-blue);color:#fff}
.ev-nav:disabled{opacity:.35;cursor:default}
@media (max-width:560px){
  .ev-modal{padding:0}
  .ev-panel{border-radius:0;min-height:100%;padding:1.4rem 1.1rem 2rem}
  .ev-panel-head{padding:0 2.2rem}
}

/* ==========================================================================
   PHOTOGRAPHS ON SMALL SCREENS
   Only the one that genuinely helps. These bands are tall on a phone, so
   `cover` scales the picture by its height rather than its width: a 1000px
   cut of the aerial had to be enlarged by nearly half to fill the hero, and
   the elders by 15%, which is what softened the faces. Those two keep their
   full-size files, which are small enough as AVIF. The neighborhood band is
   shallow, so its cut is used at 0.79 and never stretched.
   ========================================================================== */
@media (max-width:900px){
  .dna .bg{
    background-image:
      linear-gradient(180deg,rgba(56,95,119,.86),rgba(13,31,43,.9)),
      image-set(url('../img/photos/neighborhood-1000.avif') type('image/avif'),
                url('../img/photos/neighborhood-1000.webp') type('image/webp'),
                url('../img/photos/neighborhood.jpg') type('image/jpeg'));
  }
}