/* ============================================================
   Dominion City Oshawa — "First Light"
   Palette   Dominion City brand: navy + white, blue action, gold light.
             navy  #010A20 · #021030 (brand navy, per dominioncity.cc) · #071A44
             paper #FFFFFF · #F2F6FD · #DBE6FB (DC pale blue)
             ink   #0F1729 (per dominioncitybrampton.com)
             blue  #3C83F6 action on navy · #1A4FB8 action on white · #7FA8F7 italic
             gold  #F2BC3D — the light only: horizon rule, eyebrows, lead numeral
   Type      Fraunces (display, optical) + Archivo (body + countdown, width axis)
   Concept   The page begins at night and arrives at morning: brand navy resolving
             to brand white, on a hard cut. The countdown sits on the horizon line,
             lit from below.
   ============================================================ */

:root{
  color-scheme: dark;

  --navy-0:#010A20;
  --navy-1:#021030;
  --navy-2:#0C2D5F;   /* raised: #071A44 sat only 23 units from navy-1 */
  --navy-line:rgba(150,178,232,.18);

  --paper:#FFFFFF;
  --paper-2:#E4ECF9;   /* deepened: #EDF3FC sat only 22 units from white */
  --paper-3:#DBE6FB;
  --paper-line:rgba(15,23,41,.12);

  --ink:#0F1729;
  --haze:#9DB2DC;          /* muted text on night — teal-biased */
  --stone:#5C6880;         /* muted text on bone — warm */

  --gold:#F2BC3D;        /* the light: horizon, eyebrows, lead numeral */
  --gold-soft:#F8D477;
  --blue-bright:#3C83F6; /* primary action on navy */
  --blue-light:#7FA8F7;  /* the italic accent, as Brampton sets it */
  --blue:#1A4FB8;        /* primary action + accents on white */
  --blue-deep:#14398C;

  --display:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --measure:62ch;
  --pad:clamp(1.25rem,5vw,4rem);
  --gutter:min(1180px,100% - var(--pad) * 2);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--navy-1);
  color:#E8EEFA;
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}
[hidden]{display:none !important}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.03;text-wrap:balance;margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0}
p{margin:0}
a{color:inherit}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.day :focus-visible,.devotional :focus-visible,.foot :focus-visible{outline-color:var(--blue)}

.wrap{width:var(--gutter);margin-inline:auto}
section[id],header[id],#believe,#rsvp-form{scroll-margin-top:82px}

/* ---------- shared type roles ---------- */
.eyebrow{
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 92;margin:0;
}
.lede{max-width:var(--measure);font-size:clamp(1.06rem,1rem + .38vw,1.28rem);line-height:1.58}
.muted-navy{color:var(--haze)}
.muted-day{color:var(--stone)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(2,16,48,.86);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(150,178,232,.12);
}
.nav-in{display:flex;align-items:center;gap:1.5rem;min-height:66px}
:root{--nav-h:67px;--mb-h:66px}  /* the sticky nav and the radio bar; the hero subtracts both */
body.mb-away{--mb-h:0px}         /* bar hidden, so the hero gets that height back */
.mark{display:flex;flex-direction:row;align-items:center;gap:.62rem;line-height:1;text-decoration:none;margin-right:auto}
/* Dominion City mark: a heart holding the city skyline. Both fills are
   variables so it reads on the navy header and the pale footer alike. */
.mark-logo{--heart:#FFFFFF;--sky:#003699;width:30px;height:30px;flex:none;display:block}
.foot .mark-logo{--heart:var(--ink);--sky:var(--paper-3)}
.mark-text{display:flex;flex-direction:column;line-height:1}
.mark b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.mark-text > span{
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin-top:.34rem;font-weight:600;font-variation-settings:"wdth" 90;
}
.nav-links{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0}
.nav-links a{
  text-decoration:none;font-size:.83rem;color:var(--haze);
  padding-block:.4rem;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav-links a:hover{color:#E8EEFA;border-bottom-color:var(--gold)}
@media (max-width:1150px){.nav-links{display:none}}

/* ---------- mobile menu ---------- */
.nav-toggle{
  display:none;flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(150,178,232,.3);background:transparent;
  align-items:center;justify-content:center;transition:border-color .18s;
}
.nav-toggle:hover{border-color:var(--gold)}
@media (max-width:1150px){.nav-toggle{display:inline-flex}}
/* below this the wordmark, the button and the toggle stop fitting on one line */
@media (max-width:560px){.nav-in > .btn{display:none}}

.nav-bars{display:block;position:relative;width:18px;height:12px}
.nav-bars i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#E8EEFA;
  transition:transform .28s cubic-bezier(.22,.74,.3,1),opacity .18s;
}
.nav-bars i:nth-child(1){top:0}
.nav-bars i:nth-child(2){top:5px}
.nav-bars i:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-bars i{transition:none}}

.nav-menu{
  position:absolute;left:0;right:0;top:100%;
  /* solid, not translucent: the hero behind it is high-contrast and any
     bleed-through makes the menu hard to read */
  background:var(--navy-1);
  border-bottom:1px solid rgba(150,178,232,.16);
  box-shadow:0 24px 40px -24px rgba(0,0,0,.8);
  padding:.5rem var(--pad) 1.5rem;
  /* visibility, not display, so it can animate and still leave the tab order */
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s,transform .26s cubic-bezier(.22,.74,.3,1),visibility .22s;
  max-height:calc(100vh - 66px);overflow-y:auto;
}
.nav-menu[data-open="true"]{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.nav-menu{transition:none;transform:none}}
@media (min-width:1151px){.nav-menu{display:none}}

.nav-menu ul{list-style:none;margin:0;padding:0}
.nav-menu li a{
  display:block;padding:.95rem .2rem;text-decoration:none;color:#E8EEFA;
  font-size:1.02rem;border-bottom:1px solid rgba(150,178,232,.12);
  transition:color .16s,padding-left .16s;
}
.nav-menu li a:hover{color:var(--gold-soft);padding-left:.5rem}
.nav-menu .btn{width:100%;margin-top:1.2rem}
.nav-menu .menu-contact{
  display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1.1rem;
  font-size:.86rem;color:var(--haze);
}
.nav-menu .menu-contact a{color:var(--gold-soft);text-underline-offset:3px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.9rem;font-weight:600;font-variation-settings:"wdth" 96;
  padding:.82rem 1.5rem;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .16s,background .18s,border-color .18s,color .18s;
}
.btn:active{transform:translateY(1px)}
.btn-blue{background:var(--blue-bright);color:#FFFFFF;border-color:var(--blue-bright)}
.btn-blue:hover{background:#5A97F8;border-color:#5A97F8}
/* Inside a themed event the primary action is that event's colour. The
   house blue stays the default everywhere else on the site. */
[data-ev] .btn-blue{background:var(--ev-accent);color:var(--ev-on);border-color:var(--ev-accent)}
[data-ev] .btn-blue:hover{
  background:color-mix(in srgb,var(--ev-accent) 86%,#FFFFFF);
  border-color:color-mix(in srgb,var(--ev-accent) 86%,#FFFFFF);
}
[data-ev] .btn-ghost:hover{border-color:var(--ev-accent);color:var(--ev-accent)}
.btn-ghost{background:transparent;color:#E8EEFA;border-color:rgba(150,178,232,.42)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:#1B2740}
.btn-navy{background:var(--blue);color:#FFFFFF;border-color:var(--blue)}
.btn-navy:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn-outline-ink{background:transparent;color:var(--ink);border-color:rgba(15,23,41,.25)}
.btn-outline-ink:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:.6rem 1.15rem;font-size:.82rem}
@media (max-width:520px){.btn{width:100%}.nav .btn{width:auto}}

/* ============================================================
   HERO — night, with the horizon under the countdown
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--navy-0);isolation:isolate}
/* One screen, exactly: the sticky nav is in flow, so its height comes off the
   top. svh is the small viewport height — on phones it is the height with the
   browser chrome showing, which is the state the page is first seen in. */
.hero-in{
  --h-gap:clamp(.55rem,1.62svh,1rem);
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--nav-h) - var(--mb-h));
  min-height:calc(100svh - var(--nav-h) - var(--mb-h));
}
.hero-in > .badge{align-self:flex-start}
/* Takes whatever height is left over, so a tall window opens up the gap above
   the countdown instead of leaving a dead band under it. */
.hero-fill{flex:1 1 0;min-height:0}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  opacity:0;transition:opacity 1.4s ease;pointer-events:none;
}
.hero.has-video .hero-video{opacity:1}
.hero::before{ /* night sky falling toward the horizon — opaque until a video is behind it */
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,#000714 0%,#010A20 42%,#021030 100%);
}
.hero.has-video::before{
  /* heavy where the type sits, opening up to the right so the footage actually reads */
  background:
    linear-gradient(100deg,rgba(2,16,48,.95) 0%,rgba(2,16,48,.86) 46%,rgba(3,20,56,.42) 100%),
    linear-gradient(180deg,rgba(0,7,20,.82) 0%,rgba(2,16,48,.26) 34%,rgba(2,16,48,.3) 62%,rgba(2,16,48,.96) 100%);
}
.glow{ /* light breaking at the horizon line */
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:var(--glow-bottom,0);width:min(1500px,150%);height:520px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 100% at 50% 100%,rgba(242,188,61,.28) 0%,rgba(60,131,246,.16) 40%,rgba(2,16,48,0) 74%);
}
@media (prefers-reduced-motion:no-preference){
  .glow{animation:breathe 9s ease-in-out infinite}
}
@keyframes breathe{0%,100%{opacity:.86}50%{opacity:1}}

.hero-in{padding-block:calc(var(--h-gap) * 2.4) calc(var(--h-gap) * .7)}

.badge{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid rgba(242,188,61,.36);border-radius:999px;
  padding:.42rem 1rem .42rem .8rem;color:var(--gold-soft);background:rgba(242,188,61,.08);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

/* The active word sits in flow and sizes the box; the others are stacked on
   top of it. No JS width: driving it from script chased the value a step
   behind, and letting layout do it is exact every time. */
.rotator{
  position:relative;display:inline-block;vertical-align:baseline;text-align:left;
}
.rot-word{
  position:absolute;left:0;top:0;width:max-content;
  color:#FFFFFF;white-space:nowrap;
  opacity:0;transform:translateY(.4em);
  transition:opacity .42s cubic-bezier(.22,.74,.3,1),transform .42s cubic-bezier(.22,.74,.3,1);
}
.rot-word[data-on="true"]{position:relative;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rot-word{transition:none;transform:none}
}
@media (prefers-reduced-motion:no-preference){.dot{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(242,188,61,.45)}50%{opacity:.65;box-shadow:0 0 0 6px rgba(242,188,61,0)}}

.hero h1{
  margin-top:calc(var(--h-gap) * .9);
  font-size:min(clamp(2.6rem,1.4rem + 7.2vw,5.6rem),9.05svh);
  letter-spacing:-.028em;font-weight:600;
}
.hero h1 .hline{display:block;letter-spacing:-.022em}
/* the two brand words, lifted out of the sentence and matched to each other */
.hero h1 .bw{font-style:italic;font-weight:400;color:var(--blue-light)}
/* The city gets its own line on purpose. It is typed and erased a letter at a
   time, so its width changes constantly — with nothing after it on the line,
   no other word on the page moves. */
/* "Durham Region," is nearly twice the width of "Whitby," and will not fit a
   phone at full headline size. This line — and only this line — sizes itself to
   the column, so no name is ever clipped and the rest of the headline is left
   alone. Above about 590px the headline is the smaller of the two and wins. */
.hero h1 .city-rot{display:block;white-space:nowrap;font-size:min(1em,12.6vw - 5.5px)}
.hero h1 .caret{
  display:inline-block;width:.055em;height:.72em;margin-left:.06em;
  vertical-align:baseline;background:var(--blue-light);
}
/* Solid while letters are moving; blinking only in the pause between cities,
   which is how a real cursor behaves. */
.hero h1 .city-rot[data-typing="false"] .caret{animation:caret 1.06s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,99%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hero h1 .caret{display:none}
}
.hero .lede{margin-top:calc(var(--h-gap) * 1.05);color:#C2D0EC}
.hero .lede .when-date{color:var(--gold-soft);font-weight:600;font-style:italic;white-space:nowrap}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:calc(var(--h-gap) * 1.45)}

/* Sits in the space the countdown used to hold, with a flexible spacer above
   and below, so it stays centred there however tall the window is. */
.hero-verse{
  margin:0;max-width:34ch;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem);line-height:1.34;color:#D6E2F7;
}
/* No rule and no gold: the gold left rule belongs to the announcement below,
   and two of them side by side read as the same kind of thing. The reference
   trails the line instead of heading it, which is how a quotation is cited. */
.hero-verse cite{
  font-family:var(--sans);font-style:normal;font-size:.63rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--haze);
  font-weight:600;font-variation-settings:"wdth" 88;white-space:nowrap;
}
.hero-verse cite::before{content:"\2002\2014\2002";letter-spacing:0}

/* Let's Break Bread, promoted under the verse. It is boxed on purpose: the
   verse above is bare italic and the event below is a gold rule, so a third
   shape keeps the three from reading as one list. */
.hero-lbb{
  display:flex;align-items:center;gap:.9rem 1.1rem;flex-wrap:wrap;
  margin-top:calc(var(--h-gap) * .9);max-width:48rem;
  padding:.62rem 1rem;border-radius:14px;text-decoration:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(150,178,232,.22);
  transition:background .2s,border-color .2s,transform .2s cubic-bezier(.22,.74,.3,1);
}
.hero-lbb:hover{background:rgba(255,255,255,.085);border-color:rgba(242,188,61,.5);transform:translateY(-2px)}
.lbb-ico{
  flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--gold);
  background:linear-gradient(140deg,rgba(242,188,61,.22),rgba(60,131,246,.2));
}
.lbb-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Let's Break Bread's own mark. It is drawn wider than tall and at its own
   stroke weight, so the generic icon sizing above must not flatten it. */
.lbb-ico .lbb-mark{width:26px;height:auto;stroke-width:9}
.lbb-copy{display:grid;gap:.15rem;flex:1 1 18rem;min-width:0}
.lbb-kicker{
  font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--gold);
}
.lbb-line{font-size:.9rem;line-height:1.45;color:#C2D0EC}
.lbb-go{flex:none;font-size:.86rem;font-weight:600;color:var(--blue-light);white-space:nowrap}
/* The situation changes every few seconds. It fades rather than types: the
   headline above already types, and two of those at once is noise. */
.lbb-need{color:#F7FAFF;font-weight:600;transition:opacity .45s ease}
.lbb-need[data-out="true"]{opacity:0}
/* Every line fits one row on a laptop. On a phone some must wrap, so two rows
   are held open there and the card never changes height as the lines turn. */
@media (max-width:760px){.lbb-line{min-height:calc(2 * 1.45em)}}
/* On a laptop the hero is sized to one screen and flexible spacers set these
   gaps. A phone hero runs past the screen, the spacers fall to nothing, and the
   verse, the card and the event strip end up touching, so they get fixed room. */
@media (max-width:760px){
  .hero .hero-verse{margin-top:2.4rem}
  .hero .hero-lbb{margin-top:1.5rem}
  .hero .next-up{margin-top:2.1rem}   /* scoped: the base .next-up rule sits later in the file */
}
@media (prefers-reduced-motion:reduce){.lbb-need{transition:none}}
.hero-lbb:hover .lbb-go{color:#A8C5FA}
/* on a phone the whole card is the link, so the trailing label only costs a row */
@media (max-width:560px){
  .lbb-go{display:none}
  .lbb-ico{width:34px;height:34px;border-radius:10px}
  .lbb-copy{flex-basis:0}
}

/* the nearer event, announced under the launch date it precedes */
.next-up{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;
  margin-top:calc(var(--h-gap) * 1.5);
  padding-left:.9rem;border-left:2px solid var(--gold);
  font-size:.88rem;color:var(--haze);
}
/* A marked-up aside, not another pill — the hero already opens with one, and a
   second gold chip down here competed with it. */
.next-up .kicker{
  font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--gold);white-space:nowrap;
}
.next-up .what b{color:#E8EEFA;font-weight:600}
.next-up a{
  color:var(--blue-light);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(127,168,247,.4);
}
.next-up a:hover{color:#A8C5FA;border-bottom-color:currentColor}

/* ---------- a motif, in three places only ----------
   Message us carries dots, Watch play triangles, the footer the skyline from
   inside the logo. Everywhere else the page is cleaner without one. All sit at
   3-4%: texture you feel rather than a pattern you read. */
#watch,#campaign,.foot{position:relative;overflow:hidden}
#watch::before,#campaign::before,.foot::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.04;
}
/* Solid dots read heavier than thin strokes at the same value, so these sit
   a little lower again. */
#campaign::before{opacity:.03}
#watch > .wrap,#campaign > .wrap,.foot > .wrap{position:relative;z-index:1}
#watch::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 66 66'><g fill='none' stroke='%230F1729' stroke-width='2.2'><path d='M24 19v28l23-14z'/></g></svg>") repeat}
#campaign::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='%230F1729'><circle cx='8' cy='8' r='2.6'/><circle cx='28' cy='24' r='2.6'/></g></svg>") repeat}
footer.foot::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='66' viewBox='0 0 110 66'><g fill='%230F1729'><rect x='4' y='34' width='9' height='26'/><rect x='16' y='18' width='12' height='42'/><rect x='31' y='38' width='8' height='22'/><rect x='42' y='6' width='14' height='54'/><rect x='59' y='24' width='10' height='36'/><rect x='72' y='12' width='9' height='48'/><rect x='84' y='32' width='12' height='28'/><rect x='99' y='42' width='7' height='18'/><rect x='0' y='60' width='110' height='6'/></g></svg>") repeat-x bottom left}

/* ---------- persistent media bar ---------- */
body{padding-bottom:66px}
body.mb-away{padding-bottom:0}

.mediabar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  background:rgba(2,16,48,.94);backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid rgba(150,178,232,.18);
  transition:transform .34s cubic-bezier(.22,.74,.3,1);
}
.mediabar[data-away="true"]{transform:translateY(100%)}
.mb-in{display:flex;align-items:center;gap:.9rem;min-height:65px}

.mb-play{
  flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:var(--navy-1);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s,transform .16s;
}
.mb-play:hover{background:var(--gold-soft)}
.mb-play:active{transform:scale(.94)}
.mb-play svg{width:16px;height:16px;fill:currentColor}

.mb-meta{display:flex;flex-direction:column;justify-content:center;min-width:0;margin-right:auto;gap:.2rem}
.mb-kicker{
  display:flex;align-items:center;gap:.5rem;
  font-size:.57rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--gold);
}
.mb-name{
  font-size:.86rem;color:#E8EEFA;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.mb-eq{display:flex;align-items:flex-end;gap:2px;height:9px;width:13px;flex:none}
.mb-eq i{width:2.5px;height:26%;border-radius:1px;background:var(--gold);transform-origin:bottom}
@media (prefers-reduced-motion:no-preference){
  .mediabar.is-playing .mb-eq i{animation:eq .95s ease-in-out infinite}
  .mediabar.is-playing .mb-eq i:nth-child(2){animation-delay:.18s}
  .mediabar.is-playing .mb-eq i:nth-child(3){animation-delay:.36s}
}
@keyframes eq{0%,100%{height:24%}50%{height:100%}}

.mb-vol{display:flex;align-items:center;gap:.55rem;color:var(--haze);flex:none}
.mb-vol svg{width:16px;height:16px;fill:currentColor;flex:none}
.mb-vol input{
  -webkit-appearance:none;appearance:none;width:88px;height:3px;border-radius:2px;
  background:rgba(150,178,232,.3);cursor:pointer;accent-color:var(--gold);
}
.mb-vol input::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);cursor:pointer;
}
.mb-vol input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--gold);cursor:pointer}

.mb-icon{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(150,178,232,.24);
  background:transparent;color:var(--haze);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:color .18s,border-color .18s;
}
.mb-icon:hover{color:#E8EEFA;border-color:rgba(150,178,232,.5)}
.mb-icon svg{width:14px;height:14px;fill:currentColor}

.mb-reopen{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:var(--navy-1);box-shadow:0 10px 28px -10px rgba(0,0,0,.7);
  display:inline-flex;align-items:center;justify-content:center;
  transform:scale(0);transition:transform .28s cubic-bezier(.22,.74,.3,1);
}
.mb-reopen[data-show="true"]{transform:scale(1)}
.mb-reopen svg{width:19px;height:19px;fill:currentColor}

.mb-note{
  position:absolute;left:0;right:0;bottom:calc(100% + .5rem);
  font-size:.8rem;color:var(--haze);background:rgba(2,16,48,.96);
  border:1px solid rgba(150,178,232,.2);border-radius:10px;padding:.6rem .85rem;
}
.mb-note a{color:var(--gold-soft)}

@media (max-width:640px){
  .mb-vol{display:none}
  .mb-in{gap:.7rem}
}

/* page-load sequence — content is visible on its own after ~1s regardless */
/* Entrance moves only — never opacity — so the hero is fully legible in the
   first still frame, in a thumbnail, and wherever animation is paused. */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .85s cubic-bezier(.22,.74,.3,1) backwards}
  .rise-1{animation-delay:.04s}.rise-2{animation-delay:.13s}.rise-3{animation-delay:.22s}
  .rise-4{animation-delay:.31s}.rise-5{animation-delay:.4s}.rise-6{animation-delay:.49s}
  @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
}

/* ============================================================
   NIGHT SECTIONS
   ============================================================ */
.night{background:var(--navy-1);padding-block:clamp(2.5rem,5vw,3.75rem)}
.night-2{background:var(--navy-2)}
.section-head{display:grid;gap:1.2rem;max-width:var(--measure)}
.section-head h2{font-size:clamp(2rem,1.2rem + 3vw,3.4rem);letter-spacing:-.022em}
.section-head .eyebrow{color:var(--gold)}

/* Desktop: one rule across the top of all three columns, a dot per column.
   Mobile: the columns stack, so a single rule overhead stops making sense —
   there each title carries its own rule underneath it instead. */
.ddd{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(2.25rem,4vw,3.25rem);
  border-top:1px solid rgba(242,188,61,.5); /* the horizon rule, again */
}
.ddd > div{padding:1.9rem 1.6rem 0 0;position:relative}
.ddd > div::before{content:"";position:absolute;top:-4.5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.ddd > div + div{padding-left:1.6rem}
.ddd h3{font-size:clamp(1.45rem,1.15rem + 1.2vw,2rem);letter-spacing:-.018em;color:#F7FAFF}
.ddd p{margin-top:.65rem;color:var(--haze);font-size:.95rem;line-height:1.55;max-width:34ch}

/* Stacked, the rule turns on its side: it runs down the left of each step
   rather than cutting between the title and the words it introduces. */
@media (max-width:800px){
  /* The rule belongs to the whole list, not to each step — carried per step it
     broke at every gap. Three dots hang off one unbroken line. */
  .ddd{
    grid-template-columns:1fr;border-top:0;
    padding-left:1.15rem;border-left:2px solid rgba(242,188,61,.5);
  }
  .ddd > div{padding:0}
  .ddd > div + div{padding-left:0;margin-top:2rem}
  .ddd > div::before{top:0;left:calc(-1.15rem - 5px)}
  .ddd p{margin-top:.7rem}
}

.scale-line{
  display:flex;flex-wrap:wrap;gap:.5rem 1.7rem;margin-top:1.7rem;
  font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;color:var(--haze);
  font-weight:600;font-variation-settings:"wdth" 90;
}
.scale-line b{color:var(--gold-soft);font-weight:600}
/* Wrapped onto two rows, free-flowing gaps left the four facts ragged. On a
   phone they sit in a 2 x 2 grid so the second row lines up under the first. */
@media (max-width:800px){
  .scale-line{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:.65rem 1.7rem}
}

.vision-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
@media (max-width:860px){.vision-grid{grid-template-columns:1fr}}
.vision-copy{display:grid;gap:1.15rem;color:#C2D0EC;max-width:var(--measure)}

/* the question the headline asks, answered on its own line */
/* The heading cycles through questions of different lengths. At the default
   62ch the longest wrap to two lines, so the reserved height left a hole under
   the short ones. Give this one heading room to keep them all on one line. */
#foryou .section-head{max-width:none}

/* section-closing buttons finish on the same right edge as the grid above
   them. Buttons inside a panel or card stay left, where their box starts. */
/* Outside the hero there is no --h-gap, so .hero-cta has no top margin of its
   own and each use sets its own. These two sit at the foot of a section, under
   a grid, and need room to read as a conclusion rather than a stray card. */
#expect .hero-cta,
#events .hero-cta{justify-content:flex-end;margin-top:clamp(1.7rem,3.2vw,2.4rem)}
/* A circle of seats seen from above, with one pulled out and still empty.
   The list says who we are expecting; this says a place is already set. */
.foryou-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.foryou-head{grid-template-columns:1fr}}
.foryou-art svg{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto}
.foryou-art .ln{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.foryou-art .seat{fill:none;stroke:var(--blue);stroke-width:2.2;opacity:.45}
.foryou-art .mine{fill:rgba(242,188,61,.22);stroke:var(--gold);stroke-width:2.6}
.foryou-art .path{fill:none;stroke:var(--gold);stroke-width:2;opacity:.6;stroke-dasharray:2 8;stroke-linecap:round}
.foryou-art .cup{fill:none;stroke:var(--blue);stroke-width:2;opacity:.4}

.foryou-close{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem 2.5rem;margin-top:clamp(2rem,4vw,2.6rem);
}
.foryou-close .scripture{margin-top:0;flex:1 1 26ch}
.foryou-close .hero-cta{margin-top:0;justify-content:flex-end}

.answer{display:block;font-style:italic;font-weight:400;color:var(--blue-light);letter-spacing:-.018em}

/* Message us: the invitation and its two actions on one line, then the signs
   as a scroller. A row that runs off the edge says "there is more" in a way a
   tidy three-up grid cannot. */
.campaign-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
@media (max-width:820px){.campaign-head{grid-template-columns:1fr}}
.campaign-intro h2{font-size:clamp(2rem,1.2rem + 3vw,3.4rem);letter-spacing:-.022em}
.campaign-intro h2 em{font-style:italic;font-weight:400;color:var(--blue)}
/* the concept's leading rule, which reads as a pointer into the section */
.tick-eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.tick-eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);flex:none}
.campaign-actions{display:grid;gap:.7rem;justify-items:stretch;min-width:15rem}
.campaign-actions .btn svg{width:18px;height:18px;fill:currentColor;flex:none}
@media (max-width:820px){.campaign-actions{justify-items:start;min-width:0}}
@media (max-width:520px){.campaign-actions{justify-items:stretch}}

.campaign-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.campaign-bar p{font-size:.92rem;color:#4A5773;max-width:52ch}

.campaign-wrap{position:relative;margin-top:1.15rem}
/* edge fades tell you the row keeps going */
.campaign-wrap::before,.campaign-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .25s;
}
.campaign-wrap::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(255,255,255,0))}
.campaign-wrap::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(255,255,255,0))}
.campaign-wrap[data-start="false"]::before{opacity:1}
.campaign-wrap[data-end="false"]::after{opacity:1}

.campaign-track{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(.8rem,1.6vw,1.1rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.campaign-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.campaign-track{scroll-behavior:auto}}
.campaign-track li{flex:0 0 min(370px,78%);scroll-snap-align:start}
.campaign-track img{
  display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;
  border-radius:14px;border:1px solid var(--paper-line);
  box-shadow:0 1px 2px rgba(15,23,41,.04),0 14px 30px -24px rgba(15,23,41,.5);
  transition:transform .22s cubic-bezier(.22,.74,.3,1),box-shadow .22s;
}
.campaign-track img:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,23,41,.05),0 24px 44px -26px rgba(15,23,41,.55)}

/* reasons people come — a card each, with its own icon */
.needs{
  list-style:none;margin:clamp(2rem,4vw,2.75rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem clamp(1.5rem,3vw,2.5rem);
}
@media (max-width:800px){.needs{grid-template-columns:1fr}}
.needs li{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;border-radius:16px;
  background:#FFFFFF;border:1px solid rgba(15,23,41,.1);
  color:#33405C;font-size:.98rem;line-height:1.45;
  box-shadow:0 1px 2px rgba(15,23,41,.03);
  transition:transform .2s cubic-bezier(.22,.74,.3,1),border-color .2s,box-shadow .2s;
}
/* an odd count leaves the last card alone on its row, so it takes the full width */
@media (min-width:801px){.needs li:last-child:nth-child(odd){grid-column:1 / -1}}
.needs li:hover{
  transform:translateY(-2px);border-color:rgba(60,131,246,.4);
  box-shadow:0 1px 2px rgba(15,23,41,.04),0 14px 26px -18px rgba(15,23,41,.4);
}
.needs .ico{
  flex:none;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;color:var(--blue);
  background:linear-gradient(140deg,rgba(60,131,246,.16),rgba(242,188,61,.18));
}
.needs .ico svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* "Is this you?" and "Gatherings" sit on white; these blocks were coloured for
   navy, so their values flip by context rather than being baked in. */
.day .muted-navy{color:var(--stone)}
.day .answer{color:var(--blue)}


.day .info-panel{background:#FFFFFF;border-color:rgba(15,23,41,.12);
  box-shadow:0 1px 2px rgba(15,23,41,.04),0 18px 40px -30px rgba(15,23,41,.45)}
.day .detail{border-bottom-color:var(--paper-line)}
.day .detail dt{color:var(--blue)}
[data-ev] .detail dt{color:var(--ev-accent)}
.day .detail dd{color:var(--ink)}
.day .detail dd small{color:var(--stone)}
.day .inline-link{color:var(--blue)}
.day .inline-link:hover{color:var(--blue-deep)}

/* Oshawa itself. Public-domain photographs of the actual city, so the section
   about why we are here shows the place rather than describing it. */
/* The three were shot in different light and at different times of year, so
   at full strength they read as three stray photographs rather than one band.
   Dimmed and cooled into the section's own navy, they settle. They sit under
   the copy, not above the heading, where they were floating loose. */
.shots{grid-column:1 / -1;margin-top:clamp(2rem,4vw,2.75rem)}
.shots-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:.9rem}
.shots-cap{margin:0;font-size:.88rem;color:var(--haze);max-width:44ch}
@media (max-width:560px){.shots-cap{display:none}.shots-bar{justify-content:flex-end}}
.shots-wrap{position:relative}
/* the fades tell you there is more of the city off the edge of the frame */
.shots-wrap::before,.shots-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(28px,5vw,64px);z-index:2;
  pointer-events:none;opacity:0;transition:opacity .2s;
}
.shots-wrap::before{left:0;background:linear-gradient(90deg,var(--navy-1),rgba(2,16,48,0))}
.shots-wrap::after{right:0;background:linear-gradient(270deg,var(--navy-1),rgba(2,16,48,0))}
.shots-wrap[data-start="false"]::before{opacity:1}
.shots-wrap[data-end="false"]::after{opacity:1}

.city-shots{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(.6rem,1.2vw,.9rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.city-shots::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.city-shots{scroll-behavior:auto}}
.city-shots li{
  flex:0 0 min(320px,76%);scroll-snap-align:start;
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--navy-line);
}
/* The six were shot in different light and at different times of year, so at
   full strength they read as six stray photographs rather than one band.
   Dimmed and cooled into the section's own navy, they settle. */
.city-shots img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  filter:saturate(.7) brightness(.78) contrast(1.04);
}
.city-shots li::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,16,48,.22),rgba(2,16,48,.6));
}
.city-shots figure{margin:0}
.city-shots figcaption{
  position:absolute;left:.85rem;right:.85rem;bottom:.7rem;z-index:1;
  font-size:.78rem;letter-spacing:.02em;color:#E8EEFA;text-shadow:0 1px 10px rgba(2,16,48,.8);
}
.shots-credit{margin:.85rem 0 0;font-size:.74rem;color:var(--haze);opacity:.75}

/* city facts — a plain list with rules, not cards */
.facts{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--navy-line)}
.facts li{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--navy-line);
}
.facts dt,.facts .f-num{
  font-family:var(--sans);font-weight:600;font-variation-settings:"wdth" 72;
  font-variant-numeric:tabular-nums;font-size:1.7rem;line-height:1;color:var(--gold);
}
.facts .f-text{color:var(--haze);font-size:.94rem;line-height:1.5}

/* ---------- the road: a real sequence, so it is numbered ---------- */
.road{display:grid;gap:0;margin-top:clamp(2.5rem,5vw,3.75rem)}
.step{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:1.5rem 2rem;align-items:start;
  padding:clamp(1.6rem,3vw,2.3rem) 0;border-top:1px solid var(--navy-line);
}
.step:last-child{border-bottom:1px solid var(--navy-line)}
.step-n{
  font-family:var(--sans);font-weight:600;font-variation-settings:"wdth" 68;
  font-variant-numeric:tabular-nums;font-size:2.1rem;line-height:1;color:rgba(150,178,232,.45);
}
.step h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);letter-spacing:-.015em}
.step p{margin-top:.6rem;color:var(--haze);max-width:52ch}
.step-when{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 90;color:var(--haze);white-space:nowrap;padding-top:.55rem;
}
.step-now .step-n,.step-now .step-when{color:var(--gold)}
.step-now h3{color:#F7FAFF}
.inline-link{color:var(--gold-soft);text-underline-offset:3px;text-decoration-thickness:1px}
.inline-link:hover{color:var(--gold)}
@media (max-width:720px){
  .step{grid-template-columns:3.2rem minmax(0,1fr);gap:.4rem 1.1rem}
  .step-n{font-size:1.5rem;padding-top:.25rem}
  .step-when{grid-column:2;padding-top:0;order:3}
}

/* ============================================================
   DAYBREAK — the page arrives at morning
   ============================================================ */
.day{background:var(--paper);color:var(--ink);padding-block:clamp(2.5rem,5vw,3.75rem);color-scheme:light}
.foot{color-scheme:light}
.day-2{background:var(--paper-2)}
.day-3{background:var(--paper-3)}
.day .section-head .eyebrow{color:var(--blue)}
.day .section-head h2{font-size:clamp(2rem,1.2rem + 3vw,3.4rem);letter-spacing:-.022em}
.day p{color:#33405C}

/* what a gathering holds — rules, not boxes */
.expect{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--paper-line)}
.expect > div{padding:1.9rem 1.6rem 1.6rem;border-bottom:1px solid var(--paper-line);border-left:1px solid var(--paper-line)}
.expect > div:first-child{border-left:0;padding-left:0}
.expect h3{font-size:1.28rem;letter-spacing:-.012em}
.expect p{margin-top:.65rem;font-size:.95rem;line-height:1.58;color:#4A5773}
.expect .eyebrow{color:var(--blue);margin-bottom:.9rem}
/* A door standing open, a light across the floor, two chairs and a mug someone
   left behind. Drawn in the same weight as the icons, so it reads as part of
   the set rather than an illustration dropped in. */
.expect-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.expect-head{grid-template-columns:1fr}}
.expect-art svg{display:block;width:100%;max-width:460px;height:auto}
.expect-art .ln{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.expect-art .steam{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;opacity:.45}
.expect-art .dot{fill:var(--blue)}
.expect-art .beam{fill:var(--gold);opacity:.16}
.expect-art .beam2{fill:var(--gold);opacity:.14}
.expect-ico{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:.9rem;
  color:var(--blue);background:linear-gradient(140deg,rgba(60,131,246,.16),rgba(242,188,61,.18));
}
.expect-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
  .expect{grid-template-columns:1fr}
  .expect > div{border-left:0;padding-left:0;padding-right:0}
}

/* circle */
.circle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.circle-grid{grid-template-columns:1fr}}
.circle-panel{
  background:var(--ink);color:var(--paper);border-radius:20px;padding:clamp(1.75rem,4vw,2.6rem);
}
.circle-panel h3{font-size:1.5rem;color:var(--paper)}
.circle-panel ul{list-style:none;margin:1.35rem 0 0;padding:0;display:grid;gap:.8rem}
.circle-panel li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;font-size:.94rem;color:#C9D6EE}
.tick{width:18px;height:18px;flex:none;margin-top:.28rem;color:var(--gold)}
.circle-panel .btn{margin-top:1.7rem}

/* watch — the channel's uploads playlist, so it is always the newest message */
.tube-head{display:grid;gap:1.2rem;max-width:var(--measure)}
.tube-frame{
  position:relative;aspect-ratio:16/9;margin-top:clamp(2rem,4vw,2.75rem);
  border-radius:18px;overflow:hidden;background:var(--navy-1);
  border:1px solid rgba(15,23,41,.16);box-shadow:0 18px 50px -28px rgba(15,23,41,.5);
}
.tube-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}
/* Sits behind the player. If the embed is blocked — a strict CSP, a privacy
   extension, an in-app browser — this is what shows instead of a blank box. */
.tube-fallback{
  position:absolute;inset:0;z-index:0;display:grid;place-content:center;justify-items:center;
  gap:1.1rem;padding:2rem;text-align:center;color:var(--paper);
}
.tube-fallback p{color:#C2D0EC;font-size:.92rem;max-width:38ch}
.tube-fallback strong{display:block;font-family:var(--display);font-size:1.3rem;color:#fff;margin-bottom:.4rem}
.tube-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.7rem;margin-top:1.35rem}
.tube-under .btn svg{width:16px;height:16px;fill:currentColor;flex:none}

/* a light panel on the navy half — used for the address block */
.info-panel{
  background:rgba(255,255,255,.055);border:1px solid rgba(150,178,232,.2);
  border-radius:16px;padding:clamp(1.4rem,3vw,2rem);
}
.info-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:820px){.info-grid{grid-template-columns:1fr}}

/* A Wednesday evening on a street in Oshawa: the clock says when, the lit
   house says where, and the light is already on before anyone arrives. */
.gather-art{margin-top:clamp(1.8rem,4vw,2.4rem)}
.gather-art svg{display:block;width:100%;max-width:400px;height:auto}
.gather-art .ln{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gather-art .hand{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round}
.gather-art .glass{fill:var(--gold);opacity:.24}
.gather-art .pool{fill:var(--gold);opacity:.16}
.gather-art .star{fill:var(--gold);opacity:.55}
.gather-art .dot{fill:var(--blue)}

.detail{display:grid;gap:.3rem;padding:.9rem 0;border-bottom:1px solid rgba(150,178,232,.16)}
.detail:first-child{padding-top:0}
.detail:last-child{border-bottom:0;padding-bottom:0}
.detail dt{
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--gold);
}
.detail dd{margin:0;font-size:1rem;color:#E8EEFA;line-height:1.45}
.detail dd small{display:block;font-size:.85rem;color:var(--haze);margin-top:.2rem}

/* events */
/* A row that runs off the edge rather than a grid: a fourth event used to
   wrap onto its own line and leave two empty slots, and the number of events
   is only going to keep changing. Same scroller as the signs and the photos. */
.events-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-top:1.4rem}
.events-bar .lede{margin:0}
@media (max-width:620px){.events-bar{align-items:center}.events-bar .lede{font-size:1rem}}

.events-wrap{position:relative;margin-top:clamp(2rem,4vw,2.75rem)}
.events-wrap::before,.events-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(28px,5vw,64px);z-index:2;
  pointer-events:none;opacity:0;transition:opacity .2s;
}
.events-wrap::before{left:0;background:linear-gradient(90deg,var(--navy-2),rgba(12,45,95,0))}
.events-wrap::after{right:0;background:linear-gradient(270deg,var(--navy-2),rgba(12,45,95,0))}
.events-wrap[data-start="false"]::before{opacity:1}
.events-wrap[data-end="false"]::after{opacity:1}

.events{
  display:flex;gap:1.1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;                      /* room for the cards' hover lift */
}
.events::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.events{scroll-behavior:auto}}
.events > .event{flex:0 0 min(330px,80%);scroll-snap-align:start}

/* ============================================================
   EVENT THEMES
   Craft, KBC and HallowHim each have a page or a site of their own
   with its own palette. An event's card here and its section on the
   events page borrow that palette, so the listing and the thing it
   points at read as one thing rather than two.

   Everything resolves through these five tokens. An event with no
   theme of its own — the Wednesday gathering, Let's Break Bread —
   simply keeps the house colours, which are its colours.
   ============================================================ */
.event,[data-ev]{
  --ev-accent:var(--gold);
  --ev-soft:rgba(242,188,61,.16);
  --ev-on:var(--navy-1);                 /* text ON the accent */
  --ev-badge:linear-gradient(150deg,rgba(242,188,61,.22),rgba(60,131,246,.18));
  --ev-badge-ink:var(--ev-accent);
  --ev-surface:linear-gradient(165deg,rgba(242,188,61,.07),rgba(255,255,255,.045) 58%);
  --ev-wash:none;
}
/* On a light section the house accent is the deep blue, not the gold.
   Every theme below therefore carries a .day twin — a .day[data-ev]
   match would otherwise outrank a bare [data-ev] one. */
.day[data-ev]{
  --ev-accent:var(--blue-deep);--ev-soft:rgba(20,57,140,.1);--ev-on:#FFFFFF;
  --ev-badge:linear-gradient(150deg,rgba(20,57,140,.14),rgba(60,131,246,.1));
}

/* HallowHim — hallowhim.org runs a violet-through-orange-to-magenta
   sweep with a bright gold on top. The badge carries the sweep itself,
   which is why this is the one theme whose numerals go white. */
[data-ev="hallowhim"]{
  --ev-accent:#FFCF2E;--ev-soft:rgba(255,207,46,.18);--ev-on:#0F2C6B;
  --ev-badge:linear-gradient(145deg,#3B2FD1 0%,#FF6A1A 58%,#C4145A 100%);
  --ev-badge-ink:#FFFFFF;
  --ev-surface:linear-gradient(165deg,rgba(99,70,230,.26),rgba(196,20,90,.12) 58%,rgba(255,255,255,.04));
  --ev-wash:radial-gradient(1100px 440px at 10% -12%,rgba(99,70,230,.34),transparent 70%),
            radial-gradient(900px 400px at 92% 2%,rgba(196,20,90,.20),transparent 72%);
}
.day[data-ev="hallowhim"]{
  --ev-accent:#A8104C;--ev-soft:rgba(168,16,76,.1);--ev-on:#FFFFFF;
  --ev-wash:radial-gradient(1000px 420px at 10% -10%,rgba(99,70,230,.16),transparent 70%);
}

/* Craft for Good — /craft: amber on charcoal, lime underneath it. */
[data-ev="craft"]{
  --ev-accent:#F0A832;--ev-soft:rgba(240,168,50,.16);--ev-on:#121212;
  --ev-badge:linear-gradient(150deg,rgba(240,168,50,.28),rgba(214,240,85,.16));
  --ev-surface:linear-gradient(165deg,rgba(240,168,50,.17),rgba(214,240,85,.06) 58%,rgba(255,255,255,.04));
  --ev-wash:radial-gradient(1000px 420px at 10% -12%,rgba(240,168,50,.26),transparent 70%);
}
.day[data-ev="craft"]{
  --ev-accent:#8A5308;--ev-soft:rgba(138,83,8,.1);--ev-on:#FFFFFF;
  --ev-badge:linear-gradient(150deg,rgba(138,83,8,.16),rgba(240,168,50,.16));
  --ev-wash:radial-gradient(1000px 420px at 10% -10%,rgba(240,168,50,.26),transparent 70%),
            radial-gradient(760px 340px at 94% 4%,rgba(214,240,85,.20),transparent 72%);
}

/* Kingdom Business Corner — /kbc: gold on plum. The gold is a near match
   for Craft's amber, and two gold cards side by side in the scroller read
   as one thing, so here the lilac leads and the gold stays in the badge. */
[data-ev="kbc"]{
  --ev-accent:#C3ADF5;--ev-soft:rgba(195,173,245,.16);--ev-on:#19112A;
  --ev-badge:linear-gradient(150deg,rgba(145,106,200,.36),rgba(232,196,74,.2));
  --ev-surface:linear-gradient(165deg,rgba(145,106,200,.26),rgba(232,196,74,.07) 58%,rgba(255,255,255,.04));
  --ev-wash:radial-gradient(1100px 440px at 10% -12%,rgba(145,106,200,.30),transparent 70%);
}
.day[data-ev="kbc"]{
  --ev-accent:#4A2D6B;--ev-soft:rgba(74,45,107,.1);--ev-on:#FFFFFF;
  --ev-badge:linear-gradient(150deg,rgba(74,45,107,.2),rgba(232,196,74,.22));
  --ev-wash:radial-gradient(1000px 420px at 10% -10%,rgba(145,106,200,.26),transparent 70%),
            radial-gradient(760px 340px at 94% 4%,rgba(232,196,74,.22),transparent 72%);
}

/* The event's section is washed in its own colour, over whichever ground
   it sits on. Unthemed sections resolve to `none` and are untouched. */
section[data-ev]{background-image:var(--ev-wash,none)}
section:has(> .ev-art){position:relative;overflow:hidden}

/* The card's drawing again, at section scale: large, bleeding off the left
   so most of it sits in the gutter rather than under the words, and faint
   enough that the body copy keeps its contrast either way. */
section:has(> .ev-art) > .wrap{position:relative;z-index:1}
.ev-art{
  position:absolute;z-index:0;left:-12px;top:50%;
  width:clamp(175px,20vw,290px);height:auto;transform:translateY(-50%);
  color:var(--ev-accent,var(--gold));opacity:.08;pointer-events:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.night .ev-art{opacity:.12}
.day .ev-art{color:var(--ev-accent,var(--blue))}
/* Below the two-column breakpoint there is no gutter left to bleed into:
   the drawing is either a sliver of stray marks or it sits on the words.
   The cards already carry it, so here it simply goes. */
@media (max-width:880px){.ev-art{display:none}}

/* The facts panel picks up the edge and the rail as well, so it belongs to
   the section rather than sitting on it. */
[data-ev] .info-panel{
  position:relative;overflow:hidden;
  border-color:color-mix(in srgb,var(--ev-accent) 28%,transparent);
}
[data-ev] .info-panel::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--ev-badge);opacity:.9;
}
[data-ev] .ev-kicker .chip{
  border-color:color-mix(in srgb,var(--ev-accent) 42%,transparent);
  color:var(--ev-accent);
}

.event{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--ev-surface,rgba(255,255,255,.05));
  border:1px solid color-mix(in srgb,var(--ev-accent,var(--gold)) 22%,rgba(150,178,232,.18));
  border-radius:14px;padding:clamp(1.25rem,2.5vw,1.6rem);
  transition:transform .22s cubic-bezier(.22,.74,.3,1),border-color .22s,box-shadow .22s;
}
/* the rail: the badge's own gradient, drawn along the top edge, so the
   card is identifiable from across the scroller before you read it */
.event::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;z-index:2;
  background:var(--ev-badge,linear-gradient(150deg,rgba(242,188,61,.22),rgba(60,131,246,.18)));
  opacity:.9;
}

/* One drawing per card, in that event's own colour: the lantern, the thing
   being built, the crowned climb, the bowl, the open book. Kept faint and
   tucked into the bottom corner — it is the card's watermark, not its
   picture, and the words have to win. A positioned element paints over its
   static siblings, so the content is lifted above it rather than the art
   being pushed behind with a negative index. */
.event > *{position:relative;z-index:1}
.event > .event-art{
  position:absolute;z-index:0;right:-18px;top:-14px;
  width:clamp(120px,44%,168px);height:auto;
  color:var(--ev-accent,var(--gold));opacity:.15;pointer-events:none;
  fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .28s ease,transform .4s cubic-bezier(.22,.74,.3,1);
}
.event:hover > .event-art{opacity:.26;transform:translateY(4px) rotate(-2deg)}
@media (prefers-reduced-motion:reduce){
  .event > .event-art{transition:opacity .28s ease}
  .event:hover > .event-art{transform:none}
}
@media (max-width:520px){.event > .event-art{width:134px;right:-20px}}
.event:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--ev-accent,var(--gold)) 52%,transparent);
  box-shadow:0 16px 34px -18px color-mix(in srgb,var(--ev-accent,var(--gold)) 55%,transparent);
}
.event-when{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--gold);
}
.event h3{font-size:1.28rem;letter-spacing:-.012em;color:#F7FAFF}
.event .meta{font-size:.86rem;color:#C2D0EC;line-height:1.5}
.event p{font-size:.93rem;color:var(--haze);line-height:1.55}
.event .btn{margin-top:auto;align-self:flex-start}
/* two actions — "save me a seat" here, and the event's own site */
.event-cta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:auto;padding-top:.35rem}
.event-cta .btn{margin-top:0;align-self:auto}
@media (max-width:520px){
  .event .btn{align-self:stretch}
  .event-cta .btn{flex:1 1 100%}
}

/* an event reads faster with a date to anchor it */
.event-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.2rem}
.event-date{
  flex:none;width:60px;border-radius:12px;text-align:center;padding:.45rem 0 .5rem;
  background:var(--ev-badge,linear-gradient(150deg,rgba(242,188,61,.22),rgba(60,131,246,.18)));
  color:var(--ev-badge-ink,var(--gold));display:grid;place-items:center;gap:.1rem;
}
.event-date b{
  font-family:var(--sans);font-weight:600;font-variation-settings:"wdth" 74;
  font-size:1.55rem;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.event-date span{
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;
}
.event-date svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.event-meta{display:grid;gap:.35rem;min-width:0}
.event-when{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--haze);
}
.event-chip{
  justify-self:start;font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--ev-on,var(--navy-1));background:var(--ev-accent,var(--gold));
  padding:.24rem .6rem;border-radius:999px;white-space:nowrap;
}
.event-chip[data-soft="true"]{background:var(--ev-soft,rgba(242,188,61,.16));color:var(--ev-accent,var(--gold))}

/* Hallow(een)Him — the name is the joke, so the copy makes it once, in the
   event's own gold. The struck half is decoration: it is hidden from screen
   readers, which hear the name the event actually goes by. */
.hh-x{text-decoration:line-through;text-decoration-thickness:.09em;opacity:.5}
.hh-in{color:var(--ev-accent,var(--gold));font-weight:600}

/* After an RSVP: the thing they just said yes to, ready to drop into
   whatever calendar they keep. Only appears when a dated event was ticked. */
.cal-add{display:block;margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(15,23,41,.14);font-size:.92rem}
.cal-add b{display:block;margin-bottom:.45rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.cal-ev{display:block;margin-top:.3rem;color:var(--ink)}
.cal-ev a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cal-ev a + a{margin-left:.1rem}
.cal-ev a::before{content:"\00b7";margin:0 .4rem 0 .25rem;color:var(--stone);text-decoration:none;display:inline-block}
.cal-ev a:first-of-type::before{content:"\2014";margin-left:.35rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:clamp(2rem,4vw,2.5rem)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:1.6rem}}
.contact-grid h3{font-size:1.1rem;margin-bottom:.5rem}
.contact-grid p,.contact-grid address{font-style:normal;font-size:.95rem;color:#33405C;line-height:1.6}
.contact-grid a{color:var(--blue);text-underline-offset:3px}

/* what we believe — a carousel, so only a few articles are in view at once */
/* One family in fifty nations, and a pin where this chapter lands.
   The globe carries the story the copy tells, without another paragraph. */
.who-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.who-head{grid-template-columns:1fr}}
.who-art svg{display:block;width:100%;max-width:340px;height:auto;margin-inline:auto}
.who-art .ln{fill:none;stroke:rgba(150,178,232,.6);stroke-width:2.2}
.who-art .grid{fill:none;stroke:rgba(150,178,232,.26);stroke-width:1.8}
.who-art .node{fill:#96B2E8;opacity:.55}
.who-art .link{fill:none;stroke:rgba(150,178,232,.4);stroke-width:1.8;stroke-dasharray:2 7;stroke-linecap:round}
.who-art .here{fill:none;stroke:var(--gold);stroke-width:2;opacity:.75;stroke-linecap:round}
.who-art .pin{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linejoin:round}
.who-art .pindot{fill:var(--gold)}

.believe-head{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:flex-end;justify-content:space-between}
/* Second voice in a combined section: below the h2, above everything else. */
.sub-h2{font-size:clamp(1.65rem,1.1rem + 2vw,2.5rem);letter-spacing:-.02em}
.believe-nav{display:flex;gap:.5rem;flex:none}
.car-btn{
  width:40px;height:40px;border-radius:50%;flex:none;cursor:pointer;
  border:1px solid rgba(15,23,41,.2);background:#FFFFFF;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .18s,color .18s,opacity .18s;
}
.car-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.car-btn:disabled{opacity:.3;cursor:default}
.car-btn svg{width:15px;height:15px;fill:currentColor}

.believe-track{
  display:flex;gap:1rem;margin-top:clamp(1.6rem,3vw,2.2rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.believe-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.believe-track{scroll-behavior:auto}}

.believe-card{
  position:relative;overflow:hidden;
  flex:0 0 min(340px,82%);scroll-snap-align:start;
  background:#FFFFFF;border:1px solid rgba(15,23,41,.1);border-radius:18px;
  padding:clamp(1.4rem,2.6vw,1.8rem);
  box-shadow:0 1px 2px rgba(15,23,41,.04),0 14px 30px -22px rgba(15,23,41,.4);
  transition:transform .24s cubic-bezier(.22,.74,.3,1),box-shadow .24s,border-color .24s;
}
.believe-card:hover{
  transform:translateY(-4px);border-color:rgba(60,131,246,.35);
  box-shadow:0 1px 2px rgba(15,23,41,.05),0 26px 48px -26px rgba(15,23,41,.5);
}
/* the church mark, ghosted into the corner of every card */
.believe-card::after{
  content:"";position:absolute;right:-26px;bottom:-32px;width:132px;height:132px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192%20192%22%3E%3Cpath%20d%3D%22M96%20170C96%20170%2018%20121%2018%2066C18%2039%2040%2020%2066%2020C79%2020%2090%2027%2096%2037C102%2027%20113%2020%20126%2020C152%2020%20174%2039%20174%2066C174%20121%2096%20170%2096%20170Z%22%20fill%3D%22%230F1729%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  opacity:.045;pointer-events:none;
}
.believe-card > *{position:relative;z-index:1}

.bel-icon{
  width:44px;height:44px;border-radius:13px;margin-bottom:1.05rem;
  display:inline-flex;align-items:center;justify-content:center;color:var(--blue);
  background:linear-gradient(140deg,rgba(60,131,246,.16),rgba(242,188,61,.18));
}
.bel-icon svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.believe-card h4{font-size:1.12rem;margin-bottom:.5rem;letter-spacing:-.008em}
.believe-card p{font-size:.94rem;color:#33405C;line-height:1.6}

/* edge fades signal there is more to scroll */
.believe-wrap{position:relative}
.believe-wrap::before,.believe-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:52px;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .25s;
}
.believe-wrap::before{left:0;background:linear-gradient(90deg,var(--paper-2),rgba(237,243,252,0))}
.believe-wrap::after{right:0;background:linear-gradient(270deg,var(--paper-2),rgba(237,243,252,0))}
/* keep the card ground reading against the deeper band behind the devotional */
.believe-wrap[data-start="false"]::before{opacity:1}
.believe-wrap[data-end="false"]::after{opacity:1}

/* The carousel now rides on navy with the rest of Who we are. Cards go from
   paper to a lit pane of the background; the accent goes blue to gold. */
.night .believe-card{background:rgba(255,255,255,.05);border-color:rgba(150,178,232,.2);box-shadow:none}
.night .believe-card:hover{
  border-color:rgba(242,188,61,.45);
  box-shadow:0 22px 42px -26px rgba(0,0,0,.75);
}
.night .believe-card::after{filter:invert(1);opacity:.05}
.night .believe-card p{color:var(--haze)}
.night .bel-icon{color:var(--gold);background:linear-gradient(140deg,rgba(242,188,61,.22),rgba(60,131,246,.2))}
.night .believe-wrap::before{background:linear-gradient(90deg,var(--navy-1),rgba(2,16,48,0))}
.night .believe-wrap::after{background:linear-gradient(270deg,var(--navy-1),rgba(2,16,48,0))}
.night .car-btn{background:transparent;border-color:rgba(150,178,232,.32);color:#E8EEFA}
.night .car-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.night .bel-dot{background:rgba(150,178,232,.32)}
.night .bel-dot:hover{background:rgba(150,178,232,.6)}
.night .bel-dot[aria-current="true"]{background:var(--gold)}

.believe-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem}
.bel-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(15,23,41,.2);
  transition:width .26s cubic-bezier(.22,.74,.3,1),background .22s;
}
.bel-dot:hover{background:rgba(15,23,41,.4)}
.bel-dot[aria-current="true"]{width:26px;background:var(--blue)}

/* live banner — red is semantic here, not the brand accent */
.tube-live{
  display:none;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:clamp(1.5rem,3vw,2rem);padding:.85rem 1.15rem;
  border-radius:12px;background:var(--navy-1);color:var(--paper);
}
.tube-live[data-on="true"]{display:flex}
.tube-live .dot-live{width:8px;height:8px;border-radius:50%;background:#E5484D;flex:none}
@media (prefers-reduced-motion:no-preference){
  .tube-live .dot-live{animation:pulseLive 1.7s ease-in-out infinite}
}
@keyframes pulseLive{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(229,72,77,0)}}
.tube-live .lbl{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#FF6B6E;white-space:nowrap;
}
.tube-live .who{font-size:.92rem;color:#C2D0EC;margin-right:auto;min-width:0}

/* five latest — thumbnails, not paragraphs */
/* 6 thumbnails. Six divides evenly by 6, 3 and 2, so every row is full at
   every width: one row of 6 on desktop, 3+3 on tablet, 2+2+2 on phones. */
.tube-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem;
  margin-top:1.15rem;padding:0;list-style:none;
}
@media (max-width:1000px){.tube-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.tube-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tube-card{
  display:flex;flex-direction:column;gap:.55rem;padding:0;border:0;background:none;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
}
.tube-card img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:10px;
  background:var(--navy-2);border:1px solid rgba(15,23,41,.14);
  transition:transform .2s,border-color .2s;
}
.tube-card:hover img{transform:translateY(-2px);border-color:var(--blue)}
.tube-card span{
  font-size:.8rem;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tube-card[aria-current="true"] img{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.tube-card[aria-current="true"] span{color:var(--blue);font-weight:600}

/* prayer & testimony — one form, two framings */
.pray-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.pray-grid{grid-template-columns:1fr}}

.pray-quote{
  font-family:var(--display);font-style:italic;color:#E8EEFA;
  font-size:clamp(1.2rem,1rem + .9vw,1.55rem);line-height:1.35;
  border-left:2px solid var(--gold);padding-left:1.25rem;margin-top:2rem;max-width:34ch;
}
.pray-quote cite{
  display:block;font-family:var(--sans);font-style:normal;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:.8rem;font-weight:600;
}
.pray-promise{margin-top:1.6rem;font-size:.9rem;line-height:1.6;color:var(--haze);max-width:46ch}

/* a light card on the navy band, so the existing field styles still apply */
.pray-card{
  background:var(--paper);border-radius:20px;padding:clamp(1.5rem,3.5vw,2.4rem);color-scheme:light;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.75);
}
.pray-toggle{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.pray-toggle button{
  flex:1 1 auto;min-width:150px;cursor:pointer;font-family:var(--sans);
  font-size:.88rem;font-weight:600;font-variation-settings:"wdth" 96;
  padding:.75rem 1.1rem;border-radius:999px;
  border:1px solid rgba(15,23,41,.2);background:transparent;color:var(--ink);
  transition:background .18s,border-color .18s,color .18s;
}
.pray-toggle button:hover{border-color:var(--blue)}
.pray-toggle button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#FFFFFF}

/* the daily devotional — an editorial masthead strip, deliberately not a card */
.devotional{background:var(--paper-2);padding-block:clamp(2.5rem,5vw,3.5rem)}
.dev-in{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  gap:1.1rem 2.5rem;align-items:center;
  border-top:2px solid var(--ink);border-bottom:1px solid rgba(15,23,41,.18);
  padding-block:1.6rem;
}
.dev-name{font-family:var(--display);font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.dev-name small{
  display:block;font-family:var(--sans);font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin-bottom:.5rem;
}
.dev-copy{font-size:.94rem;line-height:1.55;color:#4A5773;max-width:52ch}
@media (max-width:820px){
  .dev-in{grid-template-columns:1fr;align-items:start;gap:1.15rem}
}

/* socials */
.socials{display:flex;gap:.6rem;margin-top:1.1rem}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(15,23,41,.2);color:#4A5773;
  transition:color .16s,border-color .16s,background .16s;
}
.socials a:hover{color:var(--blue);border-color:var(--blue);background:rgba(255,255,255,.72)}
.socials svg{width:18px;height:18px}

/* Let's Break Bread */
/* The quote, the copy, the signs and the buttons are four grid items rather
   than two columns, so that stacked on a phone the signs can come between the
   copy and the invitation. On a wide screen they are placed back exactly where
   they read best: the buttons under their own paragraph, the signs full width
   underneath both columns. */
.lbb{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(2rem,5vw,4rem);row-gap:0;align-items:start}
.lbb-aside{grid-column:1;grid-row:1}
.lbb-main{grid-column:2;grid-row:1}
.lbb-cta{grid-column:2;grid-row:2}
.lbb-signs-w{grid-column:1 / -1;grid-row:3;margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:900px){
  .lbb{grid-template-columns:1fr}
  .lbb > *{grid-column:1;grid-row:auto}
  .lbb-signs-w{margin-top:clamp(1.6rem,3vw,2.4rem)}
}
.lbb-quote{
  font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);
  line-height:1.28;letter-spacing:-.015em;color:var(--ink);max-width:22ch;
}
.lbb-cite{margin-top:1rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:600}
.lbb-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chip{
  font-size:.76rem;letter-spacing:.03em;padding:.42rem .85rem;border-radius:999px;
  border:1px solid rgba(15,23,41,.18);color:#4A5773;background:rgba(255,255,255,.6);
}
.night .chip{border-color:rgba(150,178,232,.28);color:var(--haze);background:rgba(255,255,255,.05)}
/* The signs themselves. They already say "a Dominion City Oshawa outreach",
   so they carry the section better than any description of them could. */
.lbb-signs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1rem);
}
@media (max-width:900px){.lbb-signs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lbb-signs-bar{display:none}

/* On a phone eight signs in a grid are eight thumbnails nobody reads. As a
   scroller they are one sign at a time, the size the artwork was drawn for. */
@media (max-width:700px){
  .lbb-signs-bar{display:flex;justify-content:flex-end;margin-bottom:.85rem}
  .lbb-signs-scroll{position:relative}
  .lbb-signs-scroll::before,.lbb-signs-scroll::after{
    content:"";position:absolute;top:0;bottom:0;width:clamp(24px,6vw,48px);z-index:2;
    pointer-events:none;opacity:0;transition:opacity .2s;
  }
  .lbb-signs-scroll::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(255,255,255,0))}
  .lbb-signs-scroll::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(255,255,255,0))}
  .lbb-signs-scroll[data-start="false"]::before{opacity:1}
  .lbb-signs-scroll[data-end="false"]::after{opacity:1}
  .lbb-signs{
    display:flex;gap:.7rem;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .lbb-signs::-webkit-scrollbar{display:none}
  .lbb-signs li{flex:0 0 min(250px,74%);scroll-snap-align:start}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.lbb-signs{scroll-behavior:auto}}
.lbb-signs img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;border:1px solid var(--paper-line);
  transition:transform .2s cubic-bezier(.22,.74,.3,1);
}
.lbb-signs img:hover{transform:translateY(-2px)}

.lbb-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
/* ============================================================
   RSVP
   ============================================================ */
.rsvp-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.rsvp-grid{grid-template-columns:1fr}}

/* A note on its way to us, and a date circled at our end: the two halves of
   "tell us you are coming and we will keep you in the loop". */
.visit-art{margin-top:clamp(1.8rem,4vw,2.6rem)}
.visit-art svg{display:block;width:100%;max-width:420px;height:auto}
.visit-art .ln{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.visit-art .card{fill:var(--paper-2);stroke:var(--blue);stroke-width:2.4;stroke-linejoin:round}
.visit-art .rule{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;opacity:.4}
.visit-art .dot{fill:var(--blue);opacity:.55}
.visit-art .ring{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.visit-art .glow{fill:var(--gold);opacity:.15}
@media (max-width:900px){.visit-art{display:none}}

/* ---------- the drawings, brought to life ----------
   Every illustration is already complete and correct as a still. This is a
   layer on top of it, switched on only when the visitor has not asked for
   less motion and a script is running to say the drawing is on screen:
   .art-on plays the one-off reveal, .art-live carries the loops and comes
   off again when the drawing scrolls away, so nothing animates unseen.
   The reveals all end on the element's own values, so if an animation is
   interrupted the drawing is simply itself again. */
@media (prefers-reduced-motion:no-preference){
  .arts [data-art] .draw{stroke-dasharray:1}
  .arts [data-art]:not(.art-on) .draw{stroke-dashoffset:1}
  .arts [data-art]:not(.art-on) .fade,
  .arts [data-art]:not(.art-on) .lift{opacity:0}
  .arts [data-art].art-on .draw{animation:art-draw 1.15s cubic-bezier(.35,.5,.2,1) var(--d,0s) backwards}
  .arts [data-art].art-on .fade{animation:art-fade .7s ease-out var(--d,0s) backwards}
  .arts [data-art].art-on .lift{animation:art-lift 1s cubic-bezier(.22,.74,.3,1) var(--d,0s) backwards}

  /* What to Expect: the light through the door breathes, the tea is still hot */
  .arts .expect-art.art-live .beam{animation:beam-breathe 7s ease-in-out infinite}
  .arts .expect-art.art-live .beam2{animation:beam2-breathe 7s ease-in-out .8s infinite}
  .arts .expect-art.art-live .steam{animation:steam-rise 3.4s ease-out var(--d,0s) infinite}

  /* Gatherings: the hands sweep round and settle on seven, the stars come out */
  .arts .gather-art .hand{transform-box:view-box;transform-origin:58px 66px}
  .arts .gather-art.art-on .h-min{animation:hand-min 2.4s cubic-bezier(.3,.62,.2,1) .25s backwards}
  .arts .gather-art.art-on .h-hour{animation:hand-hour 2.6s cubic-bezier(.3,.62,.2,1) .25s backwards}
  .arts .gather-art.art-live .star{animation:twinkle 4.2s ease-in-out var(--d,0s) infinite}

  /* Who we are: the routes keep running, and the pin settles where we landed */
  .arts .who-art.art-live .link{animation:march9 3.4s linear var(--d,0s) infinite}
  .arts .who-art.art-live .pin-in{animation:bob 4.6s ease-in-out 3s infinite}

  /* Is this you: the way in keeps drawing, the empty seat keeps its light on */
  .arts .foryou-art.art-live .path{animation:march10 2.6s linear infinite}
  .arts .foryou-art.art-live .mine-in{animation:breathe 5s ease-in-out 2s infinite}

  /* In the Loop: the day is circled last, once the note is out of the envelope */
  .arts .visit-art .ring{transform-box:fill-box;transform-origin:center}
  .arts .visit-art:not(.art-on) .ring{opacity:0}
  .arts .visit-art.art-on .ring{animation:ring-pop .7s cubic-bezier(.3,1.5,.5,1) 1.75s backwards}

  /* The event marks. Each draws itself in when its card or section comes into
     view, then keeps doing the one thing it is there to do: the flame gutters,
     the stars blink, the spark turns, the crown settles, the steam lifts, the
     light over the book breathes. All of it inside the .arts gate, so a still,
     complete drawing is what you get without JS or with reduced motion on. */
  .arts .ev-mark.art-on .draw{animation:art-draw 1.1s cubic-bezier(.35,.5,.2,1) var(--d,0s) backwards}

  .arts .ev-mark .flame{transform-box:view-box;transform-origin:60px 77px}
  .arts .ev-mark.art-live .flame{animation:flame-gutter 2.8s ease-in-out .9s infinite}
  .arts .ev-mark.art-live .star{animation:twinkle 4.2s ease-in-out calc(var(--i,0) * .7s) infinite}
  .arts .ev-mark .spark{transform-box:view-box;transform-origin:88px 62.6px}
  .arts .ev-mark.art-live .spark{animation:spark-turn 11s linear infinite}
  .arts .ev-mark.art-live .bar{stroke-dasharray:6 6;animation:march9 2.8s linear infinite}
  .arts .ev-mark.art-live .trend{stroke-dasharray:5 5;animation:march9 3.6s linear infinite}
  .arts .ev-mark .crown{transform-box:view-box;transform-origin:78px 36px}
  .arts .ev-mark.art-live .crown{animation:bob 4.8s ease-in-out infinite}
  .arts .ev-mark.art-live .ray{animation:ray-breathe 3.8s ease-in-out calc(var(--i,0) * .5s) infinite}
  .arts .ev-mark .steam{transform-box:view-box}
  .arts .ev-mark.art-live .steam{animation:steam-rise 3.6s ease-out calc(var(--i,0) * .9s) infinite}
}
@keyframes art-draw{from{stroke-dashoffset:1}}
@keyframes flame-gutter{
  0%,100%{transform:scaleY(1) scaleX(1);opacity:1}
  30%{transform:scaleY(1.14) scaleX(.93);opacity:.78}
  55%{transform:scaleY(.95) scaleX(1.05);opacity:1}
  78%{transform:scaleY(1.06) scaleX(.97);opacity:.88}
}
@keyframes spark-turn{to{transform:rotate(360deg)}}
@keyframes ray-breathe{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes art-fade{from{opacity:0}}
@keyframes art-lift{from{opacity:0;transform:translateY(34px)}}
@keyframes beam-breathe{0%,100%{opacity:.16}50%{opacity:.26}}
@keyframes beam2-breathe{0%,100%{opacity:.14}50%{opacity:.22}}
@keyframes steam-rise{0%{opacity:0;transform:translateY(8px)}25%{opacity:.45}100%{opacity:0;transform:translateY(-12px)}}
@keyframes hand-min{from{transform:rotate(-360deg)}}
@keyframes hand-hour{from{transform:rotate(-210deg)}}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:.16}}
@keyframes march9{to{stroke-dashoffset:-36}}
@keyframes march10{to{stroke-dashoffset:-40}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes ring-pop{from{opacity:0;transform:scale(.3)}}

form.rsvp{display:grid;gap:1.15rem}
.field{display:grid;gap:.45rem}
.field label,.legend{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 90;color:var(--stone);
}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.98rem;color:var(--ink);
  background:#FFFFFF;border:1px solid rgba(15,23,41,.18);border-radius:11px;
  padding:.78rem .9rem;width:100%;transition:border-color .16s,box-shadow .16s;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,79,184,.16);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

fieldset{border:0;margin:0;padding:0;display:grid;gap:.6rem}
.checks{display:grid;gap:.55rem;margin-top:.15rem}
.check{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-size:.93rem;color:#33405C;cursor:pointer;padding:.7rem .9rem;border-radius:11px;
  border:1px solid rgba(15,23,41,.14);background:rgba(255,255,255,.6);transition:border-color .16s,background .16s;
}
.check:hover{border-color:rgba(26,79,184,.4);background:#FFFFFF}
.check.just-set{border-color:var(--blue);background:#FFFFFF;box-shadow:0 0 0 3px rgba(26,79,184,.16)}
.check input{margin-top:.22rem;accent-color:var(--blue);width:16px;height:16px}
.check span small{display:block;color:var(--stone);font-size:.82rem;line-height:1.45;margin-top:.15rem}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--stone);line-height:1.5}
.form-status{
  display:none;padding:1rem 1.15rem;border-radius:12px;font-size:.92rem;line-height:1.5;
}
.form-status.show{display:block}
.form-status.ok{background:rgba(26,79,184,.08);border:1px solid rgba(26,79,184,.3);color:#123A7A}
.form-status.info{background:rgba(15,23,41,.05);border:1px solid rgba(15,23,41,.16);color:#4A5773}

.scripture{
  border-left:2px solid var(--blue);padding-left:1.25rem;margin-top:2rem;
  font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.5;color:#33405C;max-width:40ch;
}
.scripture cite{display:block;font-family:var(--sans);font-style:normal;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-top:.8rem;font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--paper-3);color:var(--ink);padding-block:clamp(2.75rem,5vw,4rem);
  --stone:#4A5773}  /* the pale footer ground needs a darker muted tone than white does */
.foot-in{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:space-between}
.foot .mark b{color:var(--ink)}
.foot .mark-text > span{color:var(--blue)}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin:0;padding:0}
.foot-links a{font-size:.86rem;text-decoration:none;color:#4A5773;border-bottom:1px solid transparent}
.foot-links a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.branches{margin-top:2.5rem;padding-top:1.9rem;border-top:1px solid rgba(15,23,41,.16)}
.branch-head{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;justify-content:space-between}
.branch-head .eyebrow{color:var(--blue)}
.branch-head a{font-size:.84rem;color:#4A5773;text-decoration:none;border-bottom:1px solid rgba(15,23,41,.22)}
.branch-head a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.branch-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:1.6rem 1.75rem;margin-top:1.5rem;
}
.branch-grid h4{
  margin:0;font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;font-variation-settings:"wdth" 90;color:var(--stone);
}
.branch-grid ul{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.34rem;font-size:.88rem;color:#4A5773}
.branch-grid a{text-decoration:none;color:inherit;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
.branch-grid a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.branch-grid li.here{color:var(--blue);font-weight:600;display:flex;align-items:baseline;gap:.5rem}
.branch-grid li.here em{font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.branch-grid li.soon{color:var(--stone)}

.foot-mail{color:#4A5773;text-decoration:none;border-bottom:1px solid rgba(15,23,41,.28)}
.foot-mail:hover{color:var(--blue);border-bottom-color:var(--blue)}

.foot-base{
  margin-top:2.25rem;padding-top:1.4rem;border-top:1px solid rgba(15,23,41,.16);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.8rem;color:var(--stone);
}

/* ============================================================
   EVENTS PAGE  (/events)
   A second page sharing everything above. Only the pieces the
   landing page has no use for live down here.
   ============================================================ */
.page-head{background:var(--navy-1);padding-block:clamp(2.4rem,5vw,4rem) clamp(1.8rem,3.5vw,2.6rem)}
.page-head h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.2rem,1.3rem + 3.6vw,4rem);letter-spacing:-.025em;line-height:1.02;margin:0;
}
.page-head .eyebrow{color:var(--gold);margin:0 0 1rem}
.page-head .lede{margin-top:1.3rem}

/* the three events as jump links, so the page says what is on it at a glance */
.ev-jump{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding:0}
.ev-jump a{
  display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;
  font-size:.82rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid rgba(150,178,232,.28);color:#E8EEFA;
  transition:border-color .18s,background .18s;
}
.ev-jump a:hover{border-color:var(--gold);background:rgba(242,188,61,.08)}
.ev-jump b{color:var(--gold);font-weight:600;font-variation-settings:"wdth" 88;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}

/* one event: the record on the left, the picture or the detail panel on the right */
.ev{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media (max-width:880px){.ev{grid-template-columns:1fr}}
.ev-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1.1rem}
.ev h2{
  font-family:var(--display);font-weight:600;margin:0;
  font-size:clamp(1.8rem,1.2rem + 2.4vw,2.9rem);letter-spacing:-.022em;line-height:1.06;
}
/* .ev .ev-when, not .ev-when: `.day p` further up is (0,1,1) and would
   otherwise repaint the date line grey on the light sections. */
.ev .ev-when{margin:.9rem 0 0;font-size:1.05rem;color:var(--gold)}
.day .ev-when{color:var(--blue-deep)}
[data-ev] .ev-when{color:var(--ev-accent)}
.ev-body{margin-top:1.3rem;max-width:var(--measure)}
.ev-body p + p{margin-top:.9rem}
.ev-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
.ev-note{margin-top:1.1rem;font-size:.88rem;color:var(--haze)}
.day .ev-note{color:var(--stone)}

/* the flyer, framed rather than bled to the edges */
.ev-flyer{
  display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid rgba(150,178,232,.22);
  box-shadow:0 1px 2px rgba(2,16,48,.2),0 26px 50px -30px rgba(2,16,48,.8);
}
.day .ev-flyer{border-color:var(--paper-line);box-shadow:0 1px 2px rgba(15,23,41,.05),0 26px 50px -30px rgba(15,23,41,.55)}
.ev-flyer-cap{margin:.7rem 0 0;font-size:.78rem;color:var(--haze)}
.day .ev-flyer-cap{color:var(--stone)}

/* a plain list of what to expect, with ticks */
.ev-list{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem}
.ev-list li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.96rem}
.ev-list svg{width:17px;height:17px;margin-top:.22em;flex:none;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.day .ev-list svg{stroke:var(--blue)}
[data-ev] .ev-list svg{stroke:var(--ev-accent)}

/* back to the rest of the site */
.ev-foot{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ============================================================
   WATCH CARD
   A link out to a short clip on Instagram, shaped like the hero's
   Let's Break Bread card so the two read as siblings rather than
   as two unrelated boxes. Used on both pages, on both grounds.
   ============================================================ */
.watch-card{
  display:flex;align-items:center;gap:.85rem 1.1rem;flex-wrap:wrap;
  padding:.72rem 1rem;border-radius:14px;text-decoration:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(150,178,232,.22);
  transition:background .2s,border-color .2s,transform .2s cubic-bezier(.22,.74,.3,1);
}
.watch-card:hover{background:rgba(255,255,255,.085);border-color:rgba(242,188,61,.5);transform:translateY(-2px)}
.day .watch-card{background:rgba(255,255,255,.72);border-color:var(--paper-line)}
.day .watch-card:hover{background:#FFFFFF;border-color:var(--blue)}

.watch-ico{
  flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:var(--gold);background:linear-gradient(140deg,rgba(242,188,61,.22),rgba(60,131,246,.2));
}
.day .watch-ico{color:var(--blue-deep);background:linear-gradient(140deg,rgba(242,188,61,.26),rgba(60,131,246,.16))}
.watch-ico svg{width:21px;height:21px}

.watch-copy{display:grid;gap:.12rem;flex:1 1 11rem;min-width:0}
.watch-kicker{
  font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--gold);
}
.day .watch-kicker{color:var(--blue)}
.watch-line{font-size:.92rem;line-height:1.4;font-weight:600;color:#F7FAFF}
.day .watch-line{color:var(--ink)}
.watch-sub{font-size:.8rem;color:var(--haze)}
.day .watch-sub{color:var(--stone)}
.watch-go{flex:none;font-size:.86rem;font-weight:600;color:var(--blue-light);white-space:nowrap}
.day .watch-go{color:var(--blue)}
.watch-card:hover .watch-go{color:var(--gold-soft)}
.day .watch-card:hover .watch-go{color:var(--blue-deep)}
/* on a phone the whole card is the link, so the trailing label only costs a row */
@media (max-width:560px){.watch-go{display:none}.watch-copy{flex-basis:0}}

/* ============================================================
   CLIP
   A self-hosted video sitting in the slot the watch card holds.
   The card is what ships; the player takes its place only once
   the file is actually there, so a missing or removed video
   degrades to a link rather than to a broken box.
   ============================================================ */
.clip{margin:0}
.clip-frame{
  border-radius:14px;overflow:hidden;background:#02102E;
  border:1px solid rgba(150,178,232,.22);
}
.day .clip-frame{border-color:var(--paper-line)}
/* Phone video is tall. Capping the height keeps a 9:16 clip from running the
   whole column; object-fit then pillarboxes it against the frame's own navy. */
.clip-vid{
  display:block;width:100%;height:auto;background:#02102E;
  max-height:min(62svh,520px);object-fit:contain;
}
.clip-cap{margin:.65rem 0 0;font-size:.8rem;line-height:1.5;color:var(--haze)}
.day .clip-cap{color:var(--stone)}
.clip-cap a{color:var(--gold-soft);text-underline-offset:3px}
.day .clip-cap a{color:var(--blue)}

/* today's devotional, once the feed has been read */
.dev-body{min-width:0}
.dev-today{margin:0;display:grid;gap:.3rem;max-width:var(--measure)}
.dev-today-kicker{
  font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 88;color:var(--blue);
}
.dev-today-title{
  font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);
}
.dev-today-text{font-size:.92rem;line-height:1.55;color:var(--stone)}

/* ============================================================
   EXPERTS
   Where our experts have worked, set as wordmarks rather than
   logos. The monochrome brand glyphs were tried first and did
   not survive the look: at this size an "f" and a "G" read, but
   Quora, Andela and Poe are shapes nobody recognises, and
   Nextdoor's is an illegible smudge. Names in type say the same
   thing and every one of them is legible. It also keeps the row
   from reading as a sponsor wall, which it is not.
   ============================================================ */
.leaders{
  list-style:none;margin:clamp(1.5rem,3vw,2rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem 1.6rem;
}
.leaders li{
  font-family:var(--sans);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;
  line-height:1.2;white-space:nowrap;opacity:.45;
  transition:opacity .2s,color .2s,transform .2s;
}
.leaders li:hover{opacity:1;color:var(--leader-hi,currentColor)}

/* A light runs along the row, one name at a time, so each gets its moment and
   the row reads as a list of people rather than a wall of grey. Same shape as
   the arc and the build window: one keyframe, one delay per item. The resting
   state is visible, not invisible, so a frozen animation costs nothing. */
@media (prefers-reduced-motion:no-preference){
  .leaders li{animation:leader-wave 7.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .28s)}
  .leaders:hover li{animation-play-state:paused}
}
@keyframes leader-wave{
  0%,100%  {opacity:.45;transform:translateY(0)}
  4%       {opacity:1;transform:translateY(-3px);color:var(--leader-hi,currentColor)}
  11%      {opacity:.45;transform:translateY(0)}
}
.leaders-note{margin:1.2rem 0 0;font-size:.82rem;opacity:.68}

/* ============================================================
   PAST EVENTS
   A plain dated list, not a second set of cards: these are
   finished, so they should read as a record rather than compete
   with the things you can still come to.
   ============================================================ */
.past-list{list-style:none;margin:clamp(1.8rem,4vw,2.4rem) 0 0;padding:0;display:grid;
  border-top:1px solid var(--navy-line)}
.past-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.6rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--navy-line);
}
@media (max-width:560px){.past-list li{grid-template-columns:1fr;gap:.3rem}}
.past-when{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;font-variation-settings:"wdth" 88;color:var(--haze);white-space:nowrap;
}
.past-when b{font-size:1.05rem;letter-spacing:-.01em;color:var(--gold);margin-right:.3rem}
.past-what{display:grid;gap:.25rem;min-width:0}
.past-what b{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.015em;color:#F7FAFF}
.past-what small{font-size:.9rem;line-height:1.5;color:var(--haze)}

/* ============================================================
   FIND US
   The map is a third-party iframe, so it is lazy: it does not
   load — and Google is not contacted — until someone scrolls
   this far. The directions link works without it either way.
   ============================================================ */
.find-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.find-grid{grid-template-columns:1fr}}
.find-address{
  font-style:normal;margin-top:1.5rem;
  font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);
  line-height:1.2;letter-spacing:-.02em;color:#F7FAFF;
}
.find-notes{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.55rem;max-width:var(--measure)}
.find-notes li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline;
  font-size:.95rem;color:var(--haze);
}
.find-notes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);transform:translateY(-2px)}
.find-map{
  margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--navy-line);
  box-shadow:0 1px 2px rgba(2,16,48,.3),0 28px 56px -32px rgba(2,16,48,.9);
}
.find-map iframe{display:block;width:100%;height:clamp(300px,42vh,440px);border:0}