/* CFC Brisbane: the Vine design, Vineyard palette (docs/ARCHITECTURE.md → Design system).
   Hand-written, no build step. The CSP allows no inline styles, so everything lives here. */

/* Fonts, served from our own site (the CSP allows no font CDN). Latin subsets, SIL OFL. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2");
}

/* Tokens --------------------------------------------------------------- */

:root {
  /* Light only, by the maintainer's choice (2026-10-16). `only` also asks browsers not to darken it */
  color-scheme: only light;

  /* Colour: near-white page, grape accent, olive leaves, deep vine-leaf green footer */
  --paper: #f6f5f0;
  --wash: #e8ece6;
  --ink: #22231f;
  --ink-soft: #4f514a;
  --accent: #4e2f5c;
  --accent-deep: #3a2146;
  --on-accent: #f6f5f0;
  --rule: #d9dcd3;
  --vine: #5a4636;
  --leaf: #5a7150;
  --leaf-2: #8b9a72;
  --grape: #5b3a6e;
  --wheat: #b08a3e;
  --wheat-light: #e8d3a2;
  --wheat-dark: #7d5f26;
  --foot: #2e3a2a;
  --foot-ink: #f1ede2;
  --foot-accent: #d8c6e2;
  --logo-cross: var(--accent);

  /* Type */
  --display: "Cormorant Garamond", Garamond, Georgia, serif;
  --text: "Source Serif 4", Georgia, serif;

  /* Space: one scale for the whole site */
  --gutter: 1.25rem;
  --section: clamp(3rem, 6vw, 4.5rem);
  --gap: clamp(2rem, 4vw, 3.5rem);
  --block: 1.5rem;
  --card-pad: clamp(1.5rem, 4vw, 2.25rem);
  --wrap: 68rem;
  --narrow: 40rem;
}

/* Base ------------------------------------------------------------------ */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  font-optical-sizing: auto;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

.skip {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 50;
  padding: .5rem 1rem;
  background: var(--paper);
  color: var(--accent);
}

.skip:focus { top: 1rem; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sc {
  font-family: var(--text);
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
}

.wrap { max-width: var(--wrap); margin: 0 auto; }
.narrow { max-width: var(--narrow); margin: 0 auto; }
/* Inside .wrap: starts at the page heading's left edge, each block at a readable width */
.prose > * { max-width: var(--narrow); }

/* The logo: a grain of wheat laid at the foot of the cross */
.lg-cross { fill: none; stroke: var(--logo-cross); stroke-width: 3.2; stroke-linecap: round; }
.lg-stalk { fill: none; stroke: var(--wheat); stroke-width: 1.7; stroke-linecap: round; }
.lg-wheat { fill: var(--wheat); }
.lg-light { fill: var(--wheat-light); opacity: .75; }
.lg-dark { fill: none; stroke: var(--wheat-dark); stroke-width: .6; stroke-linecap: round; }

/* The vine */
.v-stem { fill: none; stroke: var(--vine); stroke-linecap: round; stroke-linejoin: round; }
.v-thick { stroke-width: 6; }
.v-thin { stroke-width: 3.6; }
.v-branch { stroke-width: 2.4; }
.v-tendril { fill: none; stroke: var(--vine); stroke-width: 1.5; stroke-linecap: round; }
.lf-1 { fill: var(--leaf); }
.lf-2 { fill: var(--leaf-2); }
.leaf-vein { fill: none; stroke: var(--paper); stroke-width: 1.3; stroke-linecap: round; opacity: .5; }
.grape { fill: var(--grape); }
.grape-shine { fill: var(--paper); opacity: .35; }

/* Header ---------------------------------------------------------------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  min-height: 4.75rem;
  margin-inline: auto;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  text-decoration: none;
}

.mark { width: 2.6rem; height: 2.6rem; flex: none; }

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.nav-burger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .25rem;
  font-family: var(--text);
  font-size: 1.15rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
  cursor: pointer;
}

.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--accent); outline-offset: 3px; }

.nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  padding-bottom: 1rem;
}

.nav-toggle:checked ~ .nav { display: flex; }

.nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 1.15rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
  text-decoration: none;
}

.nav a.is-active { color: var(--accent); }
.nav a:last-child { color: var(--accent); font-weight: 600; }

@media (min-width: 50rem) {
  .nav-burger { display: none; }

  .nav {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    gap: 1.6rem;
    padding: 0;
  }

  .nav a {
    position: relative;
    min-height: 44px;
    border: 0;
  }

  .nav a.is-active::after,
  .nav a:hover::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: .55rem;
    left: 0;
    height: 1px;
    background: currentColor;
  }

  /* Contact, the visit action, is the last link and stands out */
  .nav a:last-child {
    padding: 0 1.1rem;
    border: 1px solid var(--accent);
  }

  .nav a:last-child:hover { background: var(--accent); color: var(--on-accent); }
  .nav a:last-child::after { display: none; }
}

/* Home: the vine beside the name ------------------------------------------- */

.hero { padding: clamp(2rem, 5vw, 3.5rem) var(--gutter); }

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
  max-width: 56rem;
  margin: 0 auto;
}

.vine { flex: none; width: clamp(4.75rem, 15vw, 11.5rem); height: auto; }

@media (max-width: 40rem) { .hero-inner { align-items: flex-start; } }

.hero-text { min-width: 0; }

.pre {
  display: block;
  margin-bottom: .6rem;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .3em;
}

.name {
  display: block;
  font-size: clamp(2.1rem, 5.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.005em;
}

.name strong { color: var(--accent); font-weight: 600; }

.city {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .45rem;
  color: var(--accent);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-style: italic;
  font-weight: 500;
}

.city::after {
  content: "";
  flex: 0 1 7rem;
  height: 1px;
  background: var(--rule);
}

/* Wide enough for John 12:24 to sit on two lines on a desktop screen */
.tagline {
  max-width: 44rem;
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-style: italic;
  line-height: 1.5;
}

/* Inner pages: a smaller vine beside the page title ------------------------- */

.page-head {
  padding: clamp(2rem, 5vw, 3rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.page-head-inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 1.5rem);
  max-width: var(--wrap);
  margin: 0 auto;
}

.page-head .vine { width: clamp(3.25rem, 7vw, 5rem); }

.page-head h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }

.page-head .lede {
  max-width: 40rem;
  margin: .75rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-style: italic;
  line-height: 1.5;
}

/* Sections ---------------------------------------------------------------- */

.section { padding: var(--section) var(--gutter); }
.section + .section,
.hero + .section { border-top: 1px solid var(--rule); }
.section.wash { background: var(--wash); border-top: 0; }
.section.wash + .section { border-top: 0; }
/* Follows a section on the same background: one gap between them, not two, and no rule */
.section.tight-top { padding-top: 0; border-top: 0; }

.title {
  margin-bottom: var(--block);
  font-size: clamp(2.2rem, 4.5vw, 2.8rem);
}

.center { text-align: center; }

.split {
  display: grid;
  gap: var(--gap);
  max-width: var(--wrap);
  margin: 0 auto;
}

@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.stack { display: grid; gap: var(--gap); }

/* A framed card with a double rule, like a printed programme */
.card {
  padding: var(--card-pad);
  border: 4px double var(--rule);
  background: var(--paper);
}

.card-title {
  margin-bottom: 1rem;
  color: var(--accent);
  font-family: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: .26em;
  text-align: center;
}

.card .statement {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.38;
}

.card > :last-child { margin-bottom: 0; }

.actions { margin: var(--block) 0 0; text-align: center; }

.outline {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .4rem 1.3rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--text);
  font-size: 1.05rem;
  text-decoration: none;
}

.outline:hover { background: var(--accent); color: var(--on-accent); }

.button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: .5rem 1.5rem;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.button:hover { background: var(--accent-deep); }

.opening::first-letter {
  float: left;
  margin: .04em .12em 0 0;
  color: var(--accent);
  font-family: var(--display);
  font-size: 4.2em;
  font-weight: 600;
  line-height: .78;
}

/* Scripture quoted in the text */
.verses { margin: var(--block) 0; }

.verses p {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}

.verses p + p { margin-top: var(--block); }

.ref {
  display: block;
  margin-top: .35rem;
  color: var(--ink-soft);
  font-family: var(--text);
  font-size: 1.05rem;
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
}

/* Home: About Zac Poonen, the photo as tall as the text ---------------------- */

.zac {
  --pw: 7rem;
  display: grid;
  grid-template-columns: var(--pw) minmax(0, 1fr);
  grid-template-areas: "photo head" "text text";
  gap: var(--block) 1.25rem;
  align-items: end;
}

@media (min-width: 48rem) {
  .zac {
    --pw: 17rem;
    grid-template-columns: var(--pw) minmax(0, 44rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "photo head" "photo text";
    gap: 1rem 2.5rem;
    align-items: stretch;
    justify-content: center;
  }
}

.portrait {
  grid-area: photo;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: calc(var(--pw) / 2) calc(var(--pw) / 2) .75rem .75rem;
  background: var(--paper);
}

@media (min-width: 48rem) { .portrait { aspect-ratio: auto; min-height: 18rem; } }

.portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.zac-head { grid-area: head; font-size: clamp(2rem, 4.5vw, 2.8rem); }
.zac-text { grid-area: text; align-self: start; margin: 0; }

.ministry-strip {
  display: grid;
  gap: 1rem;
  max-width: 63.5rem;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 48rem) {
  .ministry-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    text-align: left;
  }
}

.ministry-strip p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.38;
}

/* A centred statement: What we believe on the home page, the error pages */
.statement-block p {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.45;
}

/* Meetings: the times set like a printed programme -------------------------- */

.programme { max-width: var(--narrow); margin: 0 auto; text-align: center; }

.programme .card-title { letter-spacing: .3em; }

.leaders { margin: 0 0 var(--block); text-align: left; }

.leaders div { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.leaders div:first-child { border-top: 1px solid var(--rule); }

.leaders dt {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.2;
}

.leaders dd { margin: 0; color: var(--ink-soft); font-variant-numeric: oldstyle-nums; }

@media (min-width: 36rem) {
  .leaders div {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .35rem 0;
    border: 0;
  }

  .leaders div:first-child { border: 0; }

  .leaders dt {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: .75rem;
  }

  .leaders dt::after {
    content: "";
    flex: 1;
    min-width: 1rem;
    border-bottom: 2px dotted var(--rule);
    transform: translateY(-.3rem);
  }
}

.where {
  max-width: 30rem;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1rem;
}

.cards {
  display: grid;
  gap: var(--gap);
  max-width: var(--wrap);
  margin: 0 auto;
}

@media (min-width: 56rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cards .card { text-align: left; }
.cards .card-title { text-align: left; }
.cards .card p { color: var(--ink-soft); font-size: 1rem; }

/* Beliefs: the statement of faith, numbered --------------------------------- */

ol.beliefs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: belief;
}

ol.beliefs li {
  position: relative;
  padding-left: 2.5rem;
  counter-increment: belief;
}

ol.beliefs li + li { margin-top: 1.1rem; }

ol.beliefs li::before {
  content: counter(belief);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  /* The body line height (1.0625rem × 1.65), so the number sits on the first line */
  line-height: 1.753rem;
}

.after-list { margin-top: var(--gap); color: var(--ink-soft); }

/* Resources: links to CFC India's reading material ------------------------- */

@media (min-width: 48rem) { .cards.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.resource-title {
  margin-bottom: .6rem;
  font-size: clamp(1.7rem, 3vw, 2rem);
}

.resource-title a,
.link-list a { text-decoration: none; }

.resource-title a:hover,
.link-list a:hover { text-decoration: underline; }

.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li + li { margin-top: 1.1rem; }

.link-list a {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.cards .link-list p { margin: .15rem 0 0; }

/* Contact ----------------------------------------------------------------- */

.contact-card { max-width: var(--narrow); margin: 0 auto; text-align: center; }
.contact-card .mail { margin: var(--block) 0; }

/* Footer ------------------------------------------------------------------ */

.site-footer {
  --logo-cross: var(--foot-accent);
  --wheat: #d9b46a;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter);
  background: var(--foot);
  color: var(--foot-ink);
  text-align: center;
}

.footer-mark { display: block; width: 3rem; height: 3rem; margin: 0 auto .9rem; }

.site-footer p { margin: 0 0 .35rem; }

.footer-name {
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: .2em;
}

.site-footer .footer-mail { margin-top: 1rem; }

.site-footer a { color: var(--foot-accent); }
/* The grape outline all but vanishes on the dark green (1.07:1). The lilac shows (7.5:1) */
.site-footer :focus-visible { outline-color: var(--foot-accent); }