/* The Tekton Foundation — a stylesheet of its own.
   Nothing is shared with ironcross.org: that site is condensed, uppercase and
   industrial; this one follows the logo, which is a Roman serif with
   letterspaced small caps. Type-led rather than photo-led, hairline rules
   rather than blueprint corner ticks, paper rather than white. */

:root {
  --charcoal:  #33322F;
  --gold:      #A9741B;   /* on paper */
  --gold-lift: #D9A94E;   /* on charcoal */
  --paper:     #F7F6F2;
  --stone:     #EEE6D8;   /* paper carrying ~12% of the brand gold — a warm
                            parchment, so the band reads as part of the
                            palette rather than a neutral grey */
  --rule:      rgba(51, 50, 47, 0.18);
  --rule-dark: rgba(247, 246, 242, 0.22);
  --muted:     rgba(51, 50, 47, 0.68);

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Spectral", Georgia, serif;
  --caps:    "Spectral", Georgia, serif;

  --measure: 60ch;
  --gutter:  clamp(22px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.75;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }

/* letterspaced small caps, the logo's own device */
.caps {
  font-family: var(--caps);
  font-weight: 400;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: 0.01em; margin: 0; }
h1 { font-size: clamp(44px, 7vw, 86px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
p  { margin: 0; max-width: var(--measure); }
em { font-style: italic; }

/* ---------- masthead: paper, not a black bar ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead-in {
  max-width: 1120px; margin: 0 auto; padding: clamp(20px, 2.6vw, 30px) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.masthead a.mark { display: block; flex: 0 0 auto; }
.masthead a.mark img { height: clamp(40px, 3.8vw, 52px); width: auto; }
/* The links wrap as whole items rather than mid-label: "Ministries &
   Projects" is long enough to break across two lines on a phone otherwise. */
.masthead nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(20px, 3vw, 40px); }
.masthead nav a { white-space: nowrap; }
.masthead nav a { color: var(--charcoal); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.masthead nav a:hover { border-bottom-color: var(--gold); }

/* ---------- the opening: the lockup over the Blue Ridge ----------
   Greyscale is baked into the webp rather than applied with a CSS filter, so
   it costs nothing to paint and cannot flash in colour before styles land. */
.opening { position: relative; overflow: hidden; background: var(--charcoal);
           padding: clamp(30px, 3.6vw, 54px) 0 clamp(54px, 7.5vw, 104px); text-align: center; }
.opening-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.opening-veil { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(51,50,47,0.42) 0%, rgba(51,50,47,0.66) 55%, rgba(51,50,47,0.86) 100%); }
.opening .wrap { position: relative; }
.opening h1 { margin: 0; }
.opening-logo { height: clamp(150px, 19vw, 250px); width: auto; margin: 0 auto; }
.rule-short { width: 64px; height: 1px; background: var(--gold-lift); margin: clamp(32px, 4vw, 44px) auto 0; border: 0; }
/* The colophon's divider, reused: a hairline inset to the content column
   rather than a full-bleed section border. */
.rule-wide { border: 0; height: 1px; background: var(--gold); margin: clamp(40px, 5vw, 60px) 0 0; }
/* Above the cards rather than below: one continuous rule across the row,
   instead of a gold segment capping each card separately. */
.rule-wide--top { margin: 0 0 clamp(26px, 3.2vw, 40px); }
.opening-verse { margin: clamp(30px, 3.6vw, 42px) auto 0; max-width: 34ch;
                 font-family: var(--display); font-style: italic;
                 font-size: clamp(21px, 2.4vw, 31px); line-height: 1.32;
                 color: rgba(247, 246, 242, 0.92); }
.opening-cite { display: block; margin-top: clamp(16px, 1.9vw, 22px); color: var(--gold-lift); }

/* ---------- the work: a list set in rules, not boxes ---------- */
.band { padding: clamp(60px, 9vw, 112px) 0; }

.band--ruled { border-top: 1px solid var(--rule); }
/* Ministries and About sit directly against each other, so the padding
   either side of the colour change comes in — full band spacing left a
   237px gap between the cards and the About heading. */
.band--ruled { padding-bottom: clamp(34px, 4.2vw, 56px); }
.band--stone { padding-top: clamp(38px, 4.6vw, 62px); }
/* A tonal band, not a rule: the colour change does the separating, so no
   hairline is needed above it. */
.band--stone { background: var(--stone); }
.band > .wrap > .caps { color: var(--gold); display: block; margin-bottom: 14px; }
.band h2 { margin-bottom: clamp(34px, 4.4vw, 56px); }

/* Two abreast. Cards are paper-on-paper with a hairline rule rather than
   filled boxes — the page is a document, not a dashboard. A gold rule across
   the top carries the numeral.
   With four ministries a 260px floor packs three into the row and leaves the
   fourth alone underneath; 340px holds the row to two, so the four read as a
   square block. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
         gap: clamp(20px, 2.6vw, 36px); align-items: stretch; }
.card { display: flex; flex-direction: column; background: #FFFFFF;
        border: 1px solid var(--rule);
        padding: clamp(26px, 2.8vw, 38px); }
/* Each ministry carries its own mark in place of a set title. A fixed band
   keeps the descriptions aligned across the row even though the four
   lockups differ in proportion (3.7:1, 2.5:1, 5.9:1 and 3.1:1); wide marks
   hit max-width first, tall ones max-height, so they land at similar optical
   weight rather than identical pixel height. */
.card-brand { margin: 0 0 18px; height: 56px; display: flex; align-items: center; }
.card-brand a { display: inline-flex; align-items: center; max-width: 100%;
                transition: opacity 140ms ease; }
.card-brand a:hover { opacity: 0.68; }
.card-brand img { max-height: 52px; max-width: 100%; width: auto; height: auto; }
.card p { color: var(--muted); max-width: none; }
.card .go { align-self: flex-start; margin-top: auto; padding-top: 22px;
            color: var(--gold); text-decoration: none; }
.card .go span, .card .go { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.card .go:hover { color: var(--charcoal); }

/* ---------- scripture ---------- */
.verse { padding: clamp(60px, 9vw, 116px) 0; text-align: center; border-top: 1px solid var(--rule); }
.verse p { margin-inline: auto; max-width: 30ch; font-family: var(--display); font-style: italic;
           font-size: clamp(26px, 3.4vw, 42px); line-height: 1.3; }
.verse .caps { display: block; margin-top: clamp(22px, 2.6vw, 30px); color: var(--gold); }

/* ---------- about ---------- */
.prose p + p { margin-top: 1.25em; }

/* ---------- colophon ---------- */
.colophon { background: var(--charcoal); color: rgba(247, 246, 242, 0.62); padding: 0 0 clamp(40px, 6vw, 64px); }
/* Only the first row is the column grid; the copyright line below it is a
   plain block. Giving both the border-top ran a rule through the logo. */
.colophon .wrap:first-child {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--rule-dark);
}
.colophon .wrap:last-child { border-top: 1px solid var(--rule-dark); padding-top: 22px; }
.colophon img { height: 96px; width: auto; align-self: start; }
.colophon .caps { color: var(--gold-lift); display: block; margin-bottom: 12px; }
.colophon p, .colophon a { font-size: 15px; line-height: 1.7; color: rgba(247, 246, 242, 0.7); }
.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--paper); text-decoration: underline; }
.colophon .fine { margin-top: clamp(32px, 4vw, 48px); font-size: 13px; color: rgba(247, 246, 242, 0.45); }

@media (max-width: 640px) {
  .card { padding: 24px; }
}

/* Standalone text pages (Privacy). */
.page-text p { max-width: 65ch; margin: 0 0 1.2em; }