/* ==========================================================================
   Social Sunday — Champions Night of Worship
   Site styles. Consumes tokens.css; never redefines a brand value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, latin subset, no third-party request at runtime
   -------------------------------------------------------------------------- */

/* Archivo variable. The width axis is the point: display type runs at 125%
   (expanded), which is where the headline identity lives. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* clears the sticky masthead on anchor jumps */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
/* The crimson ring is invisible against the crimson programme block, so that
   one section inverts its focus colour. */
.programme :focus-visible,
.btn--on-accent:focus-visible {
  outline-color: var(--ss-black);
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Layout primitives — the shell and the left spine
   --------------------------------------------------------------------------
   The spine is the editorial device that ties the page together: one thin
   crimson rule running down the left margin, carrying the section numbers.
   Below 900px it folds — the number sits inline above the heading and the
   rule disappears rather than eating a third of a phone screen. */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.band { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }

.band__inner {
  display: grid;
  grid-template-columns: var(--spine-w) minmax(0, 1fr);
  gap: 0;
}

.spine {
  position: relative;
  padding-top: var(--space-2);
}
.spine::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: calc(-1 * clamp(var(--space-16), 9vw, var(--space-32)));
  width: 1px;
  background: var(--color-accent);
  opacity: 0.5;
}
.spine__num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-bold);
  font-size: var(--font-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  background: var(--color-bg);
  display: block;
  padding-block: var(--space-2);
  margin-left: -0.5px;
  padding-left: 0;
  position: relative;
  writing-mode: vertical-rl;
}

@media (max-width: 899px) {
  .band__inner { grid-template-columns: minmax(0, 1fr); }
  .spine::before { display: none; }
  .spine__num {
    writing-mode: horizontal-tb;
    margin: 0 0 var(--space-3);
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-stretch: 125%;              /* the expanded cut — this is the identity */
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.lead {
  font-size: var(--font-lead);
  line-height: var(--leading-snug);
  color: var(--color-text);
  max-width: 46ch;
}

.muted { color: var(--color-text-muted); }

.section-title {
  font-size: var(--font-h2);
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-flat);
  font-family: var(--font-text);
  font-weight: var(--weight-bold);
  font-size: var(--font-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast),
              border-color var(--motion-fast), transform var(--motion-fast);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: var(--border-btn) solid var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text);
  transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: var(--border-btn) solid var(--color-border);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--on-accent {
  background: var(--ss-black);
  color: var(--ss-bone);
  border: var(--border-btn) solid var(--ss-black);
}
.btn--on-accent:hover { background: transparent; color: var(--ss-black); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.link-inline {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.link-inline:hover { color: var(--color-text); text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   6. Masthead — slim, sticky, condenses on scroll
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition: padding var(--motion-mid), border-color var(--motion-mid),
              background-color var(--motion-mid);
  padding-block: var(--space-5);
}
/* No backdrop-filter. The brief bans frosted glass, so the bar simply sits on
   a near-opaque wash of the page colour. */
.masthead[data-condensed='true'] {
  padding-block: var(--space-3);
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-bold);
  font-size: var(--font-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark__mark {
  /* The arch, at wordmark scale. Same shape as the hero and the footer. */
  width: 0.6em;
  height: 0.85em;
  border: 2px solid var(--color-accent);
  border-bottom: 0;
  border-radius: var(--arch-tall);
  align-self: center;
  flex: none;
}
.wordmark:hover .wordmark__mark { background: var(--color-accent); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2vw, var(--space-8));
}
.nav__link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.nav__link:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }

.masthead .btn { padding: var(--space-3) var(--space-5); }

@media (max-width: 767px) {
  .nav__link { display: none; }
  .masthead__inner { gap: var(--space-4); }
}

/* --------------------------------------------------------------------------
   7. Hero — type-led, asymmetric, the arch frames the date
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-16), 11vw, var(--space-32))
                 clamp(var(--space-16), 9vw, var(--space-24));
  border-bottom: var(--border-hair);
}

.hero__headline {
  font-size: var(--font-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  margin-bottom: var(--space-10);
}
.hero__headline span { display: block; }
/* Line 2 is set in the accent and indented — the asymmetry that stops the
   three lines reading as a centred logo lockup. */
.hero__headline span:nth-child(2) {
  color: var(--color-accent);
  margin-left: clamp(0px, 6vw, 5.5rem);
}

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
  align-items: end;
}

.hero__meta { max-width: 42ch; }
.hero__meta p + p { margin-top: var(--space-4); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero__venue {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-hair);
}

/* The arch. Flat crimson outline, hard edge, no gradient and no glow — it
   crops the date block rather than decorating it. */
.arch-date {
  border: var(--arch-stroke-heavy) solid var(--color-accent);
  border-bottom: 0;
  border-radius: var(--arch-tall);
  padding: clamp(var(--space-10), 5vw, var(--space-16))
           clamp(var(--space-6), 3vw, var(--space-10)) var(--space-8);
  text-align: center;
  min-width: clamp(12rem, 22vw, 17rem);
  align-self: end;
}
.arch-date__day {
  font-size: var(--font-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.arch-date__num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-display);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
}
.arch-date__month {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-display);
  font-size: var(--font-lead);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-2);
}
.arch-date__time {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

@media (max-width: 899px) {
  .hero__body { grid-template-columns: minmax(0, 1fr); }
  .arch-date { justify-self: start; margin-top: var(--space-6); }
}

/* On a phone the headline has to give way somewhere, and the variable width
   axis is the right place. "CHAMPIONS" set at 48px / 125% width measures
   370px — 58px wider than the 312px column on a 360px screen. Narrowing the
   axis to 112% buys most of that back while keeping the type large, which is
   a better trade than dropping the size alone. The indent on line two also
   goes, since there is no room left to be asymmetric with. */
@media (max-width: 600px) {
  .hero__headline {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
    font-stretch: 112%;
  }
  .hero__headline span:nth-child(2) { margin-left: 0; }
}

/* Below the brief's 360px floor the masthead is the first thing to break —
   the wordmark and the RSVP button stop fitting side by side. */
@media (max-width: 380px) {
  .masthead .btn { padding: var(--space-2) var(--space-4); }
  .masthead__inner { gap: var(--space-3); }
  .wordmark { font-size: 11px; }
}

/* Upcoming dates strip — renders only when the config holds more than one
   event, so it is absent by default rather than showing invented dates. */
.upcoming {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}
.upcoming__label {
  font-size: var(--font-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.upcoming__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
}
.upcoming__list li {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-medium);
  font-size: var(--font-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   7b. Photography
   --------------------------------------------------------------------------
   Every photograph here is from an actual night. None of them carry text,
   which is why there is no scrim anywhere — the page stays gradient-free and
   the pictures stay unobstructed. */

.ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
  background: var(--color-surface);   /* holds the box before the image lands */
  transition: filter var(--motion-mid);
}

/* Duotone. The image is driven to monochrome by the filter above, then a flat
   sheet of the accent is blended over it in `color` mode — which takes hue
   and saturation from the sheet and luminance from the photograph. The result
   is a two-tone picture built from the same crimson as everything else, so it
   belongs to the page instead of sitting on top of it.

   isolation:isolate keeps the blend inside this box; without it the sheet
   would reach through to whatever is painted behind the element. */
.duo {
  position: relative;
  isolation: isolate;
  background: var(--ss-black);
  overflow: hidden;
}
.duo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  mix-blend-mode: color;
  opacity: var(--photo-tint);
  pointer-events: none;
}
/* Hover lifts the duotone off and the photograph returns to full colour. */
@media (hover: hover) {
  .duo--reveal:hover .ph { filter: var(--photo-grade-focus); }
  .duo--reveal:hover::after { opacity: 0; }
  .duo::after { transition: opacity var(--motion-mid); }
}

/* --------------------------------------------------------------------------
   7c. Cut-out figures
   --------------------------------------------------------------------------
   The two lead photographs have their backgrounds removed, so the people
   stand directly on the page with no frame at all. This is what stops the
   photography reading as pasted-in: there is no rectangle, no edge, nothing
   for the eye to identify as "an image placed here". The figure is simply
   part of the composition, and the brand shape sits behind it. */

/* One component for both cut-outs. There is deliberately nothing behind them
   — no arch, no plinth, no panel. Any shape behind a figure that dissolves
   into the page ends up floating with nothing to hold, and it also reinstates
   exactly the framed-rectangle look the cut-outs exist to avoid. */
.figure-cut { position: relative; display: block; }

/* Accent stroke traced around the silhouette, then the lower half masked away
   so the figure dissolves into the page — see the note in tokens.css. */
.figure-cut__img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter:
    var(--cut-grade)
    drop-shadow(var(--cut-outline-w) 0 0 var(--color-accent))
    drop-shadow(calc(-1 * var(--cut-outline-w)) 0 0 var(--color-accent))
    drop-shadow(0 var(--cut-outline-w) 0 var(--color-accent))
    drop-shadow(0 calc(-1 * var(--cut-outline-w)) 0 var(--color-accent));
  -webkit-mask-image: var(--cut-fade);
  mask-image: var(--cut-fade);
}

/* Cut-outs are never given a fixed height — a container height would crop the
   figure, which is the one thing that must not happen to a silhouette. */
.figure-cut { height: auto; }

/* The room, full width, arch-crowned. Sits directly under the hero so the
   first thing after the headline is the actual gathering. */
.roomband {
  position: relative;
  overflow: hidden;
  border-radius: var(--arch-crown);
  height: clamp(15rem, 38vw, 30rem);
  border-bottom: var(--border-hair);
}
.roomband .ph { object-position: 50% 45%; }

/* A breath between the creed and the forms. Deliberately not arch-crowned —
   the room band above already owns that shape, and repeating it would turn a
   signature into a pattern. Flat band, hard edges, hands only. */
.midband {
  position: relative;
  overflow: hidden;
  height: clamp(11rem, 26vw, 19rem);
  border-block: var(--border-hair);
}
.midband .ph { object-position: 50% 24%; }

/* Arch-cropped photograph. The same shape as the hero date frame and the
   footer, so the crop itself is the brand mark and these need no border. */
.arch-photo {
  overflow: hidden;
  border-radius: var(--arch-tall);
  background: var(--color-surface);
}
.arch-photo--wide { border-radius: var(--arch-crown); }

/* --------------------------------------------------------------------------
   8. Pillars — deliberately NOT three equal cards
   --------------------------------------------------------------------------
   The lead pillar runs full width at display scale with the heaviest arch
   mark. The other two sit in an asymmetric pair, different backgrounds,
   different padding, different mark weights. Hierarchy through variation.

   Each pillar carries its own photograph, and each is framed differently:
   the lead is arch-cropped and tall, the boxed one is a flush rectangle
   inside its panel, the third is a small wide arch under the text. Three
   pillars, three framings — the variation is the point. */

/* The vision opens the section and sets up the three pillars, so it carries
   the section heading and the widest measure. */
.vision {
  max-width: 62ch;
  padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  border-bottom: var(--border-hair);
}
.vision__lead {
  font-size: var(--font-lead);
  line-height: var(--leading-snug);
  max-width: 52ch;
}
.vision__body {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  max-width: 56ch;
}

.pillars__lead {
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-12);
  border-bottom: var(--border-hair);
  max-width: 60ch;
}
.pillars__lead .pillar__title { font-size: var(--font-h2); }
.pillars__lead .pillar__body { font-size: var(--font-lead); max-width: 48ch; }

/* The outcome. A heavy accent rule rather than a hairline — this is the one
   statement on the page that says what all of it is actually for, and it
   should not read as another pillar. */
.outcome {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding-top: var(--space-8);
  border-top: var(--arch-stroke-heavy) solid var(--color-accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: end;   /* the figure stands on the same line the copy ends on */
}
.outcome__copy { max-width: 44ch; padding-bottom: var(--space-4); }
/* The statement says "families". The picture is a mother worshipping with her
   daughter on her hip — it is the sentence, not an illustration of it.
   No fixed height: a cut-out must never be cropped by its container. */
@media (max-width: 767px) {
  .outcome { grid-template-columns: minmax(0, 1fr); }
  .outcome__photo { max-width: 20rem; }
}
.outcome__label {
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.outcome__text {
  font-size: var(--font-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
/* Accent on the near-black ground measures 4.53:1 — legal at any size. */
.outcome__text em {
  font-style: normal;
  color: var(--color-accent);
}

.pillars__pair {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: start;
}
@media (max-width: 767px) {
  .pillars__pair { grid-template-columns: minmax(0, 1fr); }
}

.pillar__mark {
  display: block;
  border: var(--arch-stroke) solid var(--color-accent);
  border-bottom: 0;
  border-radius: var(--arch-crown);
  margin-bottom: var(--space-6);
}
.pillar__mark--lead   { width: 5.5rem; height: 1.75rem; border-width: var(--arch-stroke-heavy); }
.pillar__mark--second { width: 3.5rem; height: 1.15rem; }
.pillar__mark--third  { width: 2.25rem; height: 0.8rem; border-width: 1px; }

.pillar__title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-display);
  font-size: var(--font-h3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.pillar__body { color: var(--color-text-muted); max-width: 42ch; }

/* Lead pillar: copy left, the figure large on the right. With the arch gone
   the picture carries this block on its own, so it takes the wider column and
   the copy sits against its base rather than floating beside its middle. */
.pillars__lead {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: end;
  max-width: none;
}
.pillars__lead .figure-cut { margin-bottom: calc(-1 * var(--space-8)); }
.pillars__lead > div:first-child { padding-bottom: clamp(var(--space-8), 5vw, var(--space-16)); }

@media (max-width: 767px) {
  .pillars__lead { grid-template-columns: minmax(0, 1fr); }
  .pillars__lead > div:first-child { padding-bottom: 0; }
  .pillars__lead .figure-cut { margin-bottom: 0; }
}

.pillar--boxed {
  background: var(--color-surface);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}
/* Flush to the panel edge — the padding is cancelled so the picture reads as
   part of the block rather than a framed inset. */
/* Portrait image here now, so the slot is taller — at the old 15rem it
   rendered as a 240px sliver and the picture read as a texture. */
.pillar--boxed .pillar__photo {
  height: clamp(15rem, 27vw, 22rem);
  margin: calc(-1 * clamp(var(--space-6), 3vw, var(--space-10)))
          calc(-1 * clamp(var(--space-6), 3vw, var(--space-10)))
          clamp(var(--space-6), 3vw, var(--space-8));
  overflow: hidden;
}
.pillar--boxed .pillar__photo .ph { object-position: 50% 30%; }

.pillar--plain { padding-top: var(--space-2); }
.pillar--plain .pillar__photo {
  height: clamp(9rem, 16vw, 12rem);
  margin-top: var(--space-6);
}
.pillar--plain .pillar__photo .ph { object-position: 50% 30%; }

/* The three pillars descend: 64 / 32 / 22px. Without this step the third
   title ("Prophetic Training") reads heavier than the second simply because
   it is a longer phrase, which inverts the order the marks establish. */
.pillar--plain .pillar__title { font-size: var(--font-lead); }

/* --------------------------------------------------------------------------
   9. Programme — the one flat crimson block. Type is near-black (AA).
   -------------------------------------------------------------------------- */

.programme {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--arch-crown);
  margin-top: clamp(var(--space-16), 9vw, var(--space-32));
  padding-block: clamp(var(--space-20), 10vw, var(--space-32))
                 clamp(var(--space-12), 6vw, var(--space-20));
  overflow: hidden;
}
.programme .spine::before { background: var(--ss-black); opacity: 0.35; }
.programme .spine__num { color: var(--ss-black); background: var(--color-accent); }
.programme .eyebrow { color: var(--ss-black); opacity: 0.75; }
.programme .section-title { color: var(--ss-black); }

.programme__intro {
  color: var(--ss-black);
  max-width: 44ch;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  /* 4.9:1 as solid black on crimson. Do not lighten this. */
}

/* Printed-programme styling: time, leader rule, item. */
.programme__list { list-style: none; padding: 0; margin: 0; }

.programme__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: clamp(var(--space-4), 2vw, var(--space-6));
  border-top: 1px solid color-mix(in srgb, var(--ss-black) 28%, transparent);
}
.programme__row:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ss-black) 28%, transparent);
}

.programme__time {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-display);
  font-size: var(--font-programme-time);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ss-black);
}
/* The leader — the dotted rule that runs between a time and its item on a
   printed order of service. A real dotted border, not a patterned gradient:
   the whole page is gradient-free by mandate and it should survive a grep. */
.programme__leader {
  align-self: end;
  height: 0;
  margin-bottom: 0.5em;
  border-bottom: 2px dotted var(--ss-black);
  opacity: 0.4;
}
.programme__item {
  font-size: var(--font-programme-item);
  font-weight: var(--weight-medium);
  color: var(--ss-black);
  text-align: right;
}

@media (max-width: 599px) {
  .programme__row { grid-template-columns: auto 1fr; gap: var(--space-4); }
  .programme__leader { display: none; }
  .programme__item { text-align: right; }
}

/* --------------------------------------------------------------------------
   10. Beliefs — the statement of faith
   --------------------------------------------------------------------------
   Multi-column rather than a grid: the nine entries are very different
   lengths (Jesus runs four sentences, Salvation runs one), and a two-column
   grid would align them into rows and leave ragged holes. Columns pack them
   tight and let the natural variation in height do the work the brief asks
   for — no two entries the same size, without pretending they are cards. */

.beliefs__intro {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  color: var(--color-text-muted);
}

.beliefs {
  columns: 2;
  column-gap: clamp(var(--space-8), 5vw, var(--space-20));
  margin: 0;
}
@media (max-width: 767px) {
  .beliefs { columns: 1; }
}

.belief {
  break-inside: avoid;             /* never split an article of faith mid-sentence */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: var(--border-hair);
}
/* The rule under the final entry in each column is a rule to nowhere. */
.belief:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.belief__term {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-display);
  font-size: var(--font-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.belief__body {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 44ch;
}

/* Scripture sits on the base ground, where the true accent measures 4.53:1
   and is legal at this size. */
.belief__ref {
  margin: var(--space-3) 0 0;
  font-size: var(--font-micro);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10b. The strip — three frames from one night
   --------------------------------------------------------------------------
   Sits immediately before the RSVP forms: the last thing you see before
   deciding is what the room actually looks like. Three deliberately unequal
   frames — different widths, different heights, offset vertically — so it
   reads as a contact sheet rather than a row of matching cards. */

.strip {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: clamp(var(--space-3), 1.5vw, var(--space-5));
  align-items: start;
}
.strip__frame { overflow: hidden; background: var(--color-surface); }
.strip__frame--a { height: clamp(11rem, 22vw, 18rem); }
.strip__frame--b { height: clamp(13rem, 27vw, 22rem); border-radius: var(--arch-tall); }
.strip__frame--c { height: clamp(10rem, 19vw, 15rem); margin-top: clamp(var(--space-4), 3vw, var(--space-10)); }

.strip__frame--a .ph { object-position: 50% 34%; }
.strip__frame--b .ph { object-position: 50% 22%; }
.strip__frame--c .ph { object-position: 50% 40%; }

/* A real hover, not a fade-out: the grading lifts and the picture goes to
   full colour. Nothing is hidden and nothing disappears. */
@media (hover: hover) {
  .strip__frame:hover .ph { filter: var(--photo-grade-focus); }
}

@media (max-width: 767px) {
  .strip { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .strip__frame--c { grid-column: 1 / -1; margin-top: 0; height: clamp(9rem, 40vw, 13rem); }
  .strip__frame--a, .strip__frame--b { height: clamp(10rem, 42vw, 15rem); }
}

.strip__caption {
  margin-top: var(--space-5);
  font-size: var(--font-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.signup__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}
@media (max-width: 899px) {
  .signup__grid { grid-template-columns: minmax(0, 1fr); }
}

/* RSVP is the primary act on this page and is weighted accordingly — filled
   surface, heavier heading, wider column. Volunteer is outlined and quieter. */
.form-panel--primary {
  background: var(--color-surface);
  padding: clamp(var(--space-6), 3.5vw, var(--space-12));
}
.form-panel--secondary {
  border: var(--border-hair);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}
.form-panel--wide {
  background: var(--color-surface-alt);
  padding: clamp(var(--space-6), 3.5vw, var(--space-12));
  border-radius: var(--arch-crown);
}

.form-panel__title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.form-panel--primary .form-panel__title { font-size: var(--font-h3); }
.form-panel--secondary .form-panel__title { font-size: var(--font-lead); }
.form-panel--wide .form-panel__title { font-size: var(--font-h3); }

.form-panel__note {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin-bottom: var(--space-8);
  max-width: 44ch;
}

.field { margin-bottom: var(--space-5); }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.field-row .field { margin-bottom: 0; }

.field__label {
  display: block;
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
/* Panels are lighter than the page, so accent text on them uses the tint —
   see the contrast rule in tokens.css. */
.field__req { color: var(--color-accent-quiet); }

.field__control {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-flat);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-body);
  transition: border-color var(--motion-fast);
}
.form-panel--secondary .field__control { background: var(--color-surface); }
.field__control:hover { border-color: var(--ss-muted); }
.field__control:focus { border-color: var(--color-accent); }
.field__control[aria-invalid='true'] { border-color: var(--color-accent); border-width: 2px; }
textarea.field__control { min-height: 6.5rem; resize: vertical; }

select.field__control {
  appearance: none;
  /* Chevron drawn as a static inline SVG — no emoji, no icon font. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A8580' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.field__error {
  display: block;
  font-size: var(--font-micro);
  color: var(--color-accent-quiet);
  margin-top: var(--space-2);
  font-weight: var(--weight-medium);
}
.field__error:empty { display: none; }

/* Checkbox groups — roles and sponsorship categories */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2) var(--space-5);
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.choice-grid legend {
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding: 0;
}
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-small);
  cursor: pointer;
  padding-block: var(--space-1);
}
.choice input {
  appearance: none;
  width: 1.05rem; height: 1.05rem;
  flex: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.choice input[type='radio'] { border-radius: 999px; }
.choice input:hover { border-color: var(--ss-muted); }
.choice input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.choice:hover { color: var(--color-text); }

/* Honeypot. Clipped rather than display:none, so bots that skip genuinely
   hidden fields still fill it in.

   Deliberately NOT the old left:-9999px trick — a 187px input parked off the
   left edge pushed the document's scrollWidth 34px past the viewport on a
   360px screen, which is a horizontal scrollbar on the smallest phones. This
   pattern occupies a 1px box exactly where it sits. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* An unstyled <input> defaults to roughly 187px wide. Clipped or not, that
   box still counts toward the document's scroll width, so it has to be
   shrunk rather than merely hidden. */
.hp input, .hp label { display: block; width: 1px; overflow: hidden; }

.form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.form__result {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--font-small);
  background: var(--color-bg);
}
.form-panel--secondary .form__result { background: var(--color-surface); }
.form__result--ok { border-left-color: var(--color-accent); }
.form__result--err { border-left-color: var(--ss-muted); }
.form__result p + p { margin-top: var(--space-3); }
.form__result strong { font-weight: var(--weight-bold); }

/* The withheld venue is revealed here, on RSVP success. That reveal is the
   entire reason the address is held back on the public page. */
.reveal-venue {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.reveal-venue__name {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  font-size: var(--font-lead);
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   12. Sponsor
   -------------------------------------------------------------------------- */

.sponsor__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: start;
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}
@media (max-width: 767px) {
  .sponsor__head { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   13. Video slot — present only when the config supplies a source
   -------------------------------------------------------------------------- */

.teaser { border-top: var(--border-hair); }
.teaser__frame {
  border-radius: var(--arch-crown);
  overflow: hidden;
  background: var(--color-surface);
}
.teaser video { width: 100%; }

/* --------------------------------------------------------------------------
   14. Footer — the closing wordmark set inside a full-width arch
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--border-hair);
  padding-block: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-10);
  margin-top: clamp(var(--space-16), 9vw, var(--space-32));
}

.footer-arch {
  border: var(--arch-stroke) solid var(--color-accent);
  border-bottom: 0;
  border-radius: var(--arch-crown);
  padding: clamp(var(--space-10), 6vw, var(--space-20))
           clamp(var(--space-5), 3vw, var(--space-10)) 0;
  text-align: center;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}
.footer-arch__mark {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-display);
  font-size: clamp(1.75rem, 6.2vw, 5rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-hero);
  text-transform: uppercase;
}
.footer-arch__mark em {
  display: block;
  font-style: normal;
  color: var(--color-accent);
}
.footer-arch__sub {
  margin-top: var(--space-5);
  font-size: var(--font-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-8);
  padding-top: var(--space-10);
  border-top: var(--border-hair);
}
.footer-col__title {
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.footer-col p, .footer-col li { font-size: var(--font-small); color: var(--color-text-muted); }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li + li { margin-top: var(--space-2); }
.footer-col a { color: var(--color-text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }

.colophon {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
  font-size: var(--font-micro);
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   15. Motion — four intentional interactions, not a blanket fade-up
   --------------------------------------------------------------------------
   1. the masthead condensing (handled above, on [data-condensed])
   2. the hero arch drawing its stroke once, on load
   3. programme rows arriving on a short stagger, once
   4. real hover/focus states on every control (handled above)
   Nothing else animates. */

@keyframes arch-draw {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.arch-date { animation: arch-draw var(--dur-arch) var(--ease-out) both; }

@keyframes row-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}
.programme__row[data-reveal='pending'] { opacity: 0; }
.programme__row[data-reveal='in'] {
  animation: row-in var(--dur-reveal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
}

/* Nothing may be mid-animation on paper. */
@media print {
  .programme__row[data-reveal='pending'] { opacity: 1 !important; }
  .arch-date { animation: none !important; clip-path: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .arch-date { animation: none; clip-path: none; }
  .programme__row[data-reveal='pending'] { opacity: 1; }
  .programme__row[data-reveal='in'] { animation: none; opacity: 1; transform: none; }
  .btn--primary:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   16. No-JavaScript notice
   -------------------------------------------------------------------------- */

.noscript-note {
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: var(--space-5) var(--page-gutter);
}
.noscript-note p {
  max-width: var(--page-max);
  margin-inline: auto;
  font-size: var(--font-small);
}
.noscript-note a { color: var(--ss-black); }