/* ==========================================================
AWAKE COLLECTIVE · site.css
Shared design system. Every page inherits this file.
Tokens and the hero sequence carry over from the original
single page site. New components are marked NEW.
========================================================== */
/* ---------- Fonts (self hosted, no third party requests) ---------- */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
}
@font-face {
font-family: "Fraunces";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations");
}
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
/* ---------- Tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:root {
--ink: #1A1D26;
--ink-80: #1A1D26cc;
--ink-60: #1A1D2699;
--ink-40: #1A1D2666;
--ink-10: #1A1D261a;
--bone: #F2EBE0;
--bone-2: #E8DFCF;
--bone-3: #DDD2BD;
--bone-80: rgba(242, 235, 224, 0.8);
--bone-60: rgba(242, 235, 224, 0.6);
--dawn: #E4A672;
--dawn-d: #C8884F;
--ember: #A6533A;
--sage: #8B9B85;
--stone: #6E6862;
--serif: "Fraunces", "Times New Roman", serif;
--sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
--italic: "Instrument Serif", Georgia, serif;
--mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
--pad: clamp(20px, 5vw, 80px);
--pad-y: clamp(64px, 9vw, 120px);
--measure: 62ch;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
/* Photographic grain. Sits on top of a photo and under its overlay.
Alpha is baked into the tile at roughly 7 percent, so the layer needs
no opacity of its own and can live inside a background stack. */
--grain: url("data:image/svg+xml;utf8,");
}
/* The hero overlay is driven by two registered numbers so the dawn
animation can interpolate them smoothly. The initial values are the
END state, so if the animation never runs (reduced motion, or a browser
without @property) the hero renders settled rather than stuck at night. */
@property --hero-ov-top {
syntax: "";
inherits: false;
initial-value: 0.92;
}
@property --hero-ov-bottom {
syntax: "";
inherits: false;
initial-value: 0.70;
}
body {
background: var(--bone);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Paper grain */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1000;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* Fixed amber rule down the left edge of every page */
body::after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0;
width: 2px;
background: var(--dawn);
z-index: 999;
pointer-events: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.skip {
position: absolute; left: -999px; top: 8px;
background: var(--ink); color: var(--bone);
padding: 10px 16px; z-index: 2000;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.skip:focus { left: 16px; }
/* ==========================================================
NAV
========================================================== */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px clamp(20px, 3.4vw, 56px) 18px calc(clamp(20px, 3.4vw, 56px) + 6px);
background: rgba(242, 235, 224, 0.84);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ink-10);
transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.nav-dark { background: rgba(26, 29, 38, 0.86); border-bottom-color: rgba(228, 166, 114, 0.18); }
.nav.nav-dark .nav-mark, .nav.nav-dark .nav-links a, .nav.nav-dark .nav-cta { color: var(--bone); }
.nav.nav-dark .nav-cta { border-color: var(--dawn); color: var(--dawn); }
.nav.nav-dark .nav-cta:hover { background: var(--dawn); color: var(--ink); }
.nav.nav-dark .nav-hamburger span { background: var(--bone); }
.nav-mark {
display: flex;
align-items: center;
gap: 12px;
color: var(--ink);
font-family: var(--serif);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
}
.nav-mark svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 380px) { .nav-mark span { display: none; } }
.nav-links {
display: flex;
gap: clamp(13px, 1.6vw, 28px);
align-items: center;
}
.nav-links a:not(.nav-cta) {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-80);
transition: color 0.2s;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
}
.nav-links a:not(.nav-cta):hover { color: var(--ember); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--dawn); }
.nav.nav-dark .nav-links a[aria-current="page"] { border-bottom-color: var(--dawn); }
.nav-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--ink);
color: var(--ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.nav-cta:hover { background: var(--ink); color: var(--bone); }
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-hamburger span { width: 22px; height: 1.5px; background: var(--ink); transition: 0.2s; }
@media (max-width: 1180px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
/* .nav carries backdrop-filter, which makes it a containing block for
position:fixed children. Without dropping it while the menu is open the
full screen panel resolves against the 60px bar instead of the viewport
and centres itself there, pushing the first links off the top. */
.nav.menu-open {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: transparent;
border-bottom-color: transparent;
}
.nav.menu-open .nav-links {
display: flex;
position: fixed;
inset: 0;
overflow-y: auto;
padding: 88px 24px 40px;
background: var(--bone);
flex-direction: column;
justify-content: center;
align-items: center;
gap: clamp(20px, 3.4vh, 32px);
z-index: 499;
}
.nav.menu-open .nav-links a:not(.nav-cta) { font-size: 14px; color: var(--ink); }
.nav.menu-open .nav-cta { font-size: 14px; padding: 12px 24px; border-color: var(--ink); }
.nav.menu-open .nav-hamburger { position: relative; z-index: 501; }
.nav.menu-open .nav-hamburger span { background: var(--ink); }
}
/* ==========================================================
SECTION UTILITIES
========================================================== */
main { display: block; }
section { position: relative; }
.section-pad { padding: var(--pad-y) var(--pad); }
/* ----------------------------------------------------------
HORIZON RULE (NEW)
The section divider is the waterline. A warm glow sits on the line
beside the section number, and a sun disc has its lower half clipped
away by the line itself, so what shows is always a sun AT the horizon,
never a full disc floating above it. Static, no animation.
The homepage hero is the only place on the site where the sun is fully
risen, coloured and in motion. Everything here is pre dawn.
---------------------------------------------------------- */
.section-rule {
border-top: 1px solid var(--ink-40);
position: relative;
}
/* the glow along the waterline */
.section-rule::before {
content: "";
position: absolute;
top: -8px;
left: 0;
width: min(460px, 70vw);
height: 15px;
pointer-events: none;
background: radial-gradient(ellipse 190px 6px at calc(var(--pad) + 7px) 50%,
rgba(228, 166, 114, 0.55) 0%, rgba(228, 166, 114, 0) 72%);
}
/* the sun, lower half clipped by the line */
.section-rule::after {
content: "";
position: absolute;
top: -8px;
left: var(--pad);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--dawn);
clip-path: inset(0 0 50% 0);
pointer-events: none;
}
/* ----------------------------------------------------------
DOORS (NEW)
Three seats, equal weight. The whole block is sized to sit inside one
phone screen at 390x844, so a reader meets all three without scrolling
past one of them.
---------------------------------------------------------- */
.door-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-top: clamp(22px, 3vw, 34px);
}
.door-card {
display: block;
padding: clamp(20px, 2.4vw, 30px);
border: 1px solid var(--ink-40);
background: transparent;
transition: background 0.25s, border-color 0.25s;
}
.door-card:hover { background: rgba(228, 166, 114, 0.07); border-color: var(--ember); }
.door-card h3 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(20px, 2.1vw, 27px);
line-height: 1.1;
letter-spacing: -0.012em;
margin-bottom: 10px;
}
.door-card p {
font-size: 15px;
line-height: 1.55;
color: var(--ink-80);
margin-bottom: 14px;
}
.door-card .link { font-size: 10px; }
@media (max-width: 880px) {
.door-grid { grid-template-columns: 1fr; }
.door-card { padding: 18px 20px; }
.door-card h3 { font-size: 21px; margin-bottom: 6px; }
.door-card p { font-size: 14.5px; line-height: 1.5; margin-bottom: 10px; }
}
/* The three doors moved onto Ink, where the question actually lives.
.door-card was written for Bone and takes its border and its body copy
from the Ink tokens, both of which vanish on an Ink ground. */
.dark .door-card { border-color: rgba(228, 166, 114, 0.28); }
.dark .door-card:hover { background: rgba(242, 235, 224, 0.07); border-color: var(--dawn); }
.dark .door-card h3 { color: var(--bone); }
.dark .door-card p { color: var(--bone-80); }
.dark .door-card .link { color: var(--dawn); }
/* ----------------------------------------------------------
PLACEHOLDER (NEW)
Copy that is deliberately not written yet. It must never be mistaken
for finished text, so it is ruled, mono and plainly marked.
---------------------------------------------------------- */
.placeholder {
font-family: var(--mono);
font-size: 13px;
line-height: 1.6;
letter-spacing: 0.04em;
color: var(--stone);
border: 1px dashed var(--ink-40);
padding: clamp(16px, 2vw, 22px);
margin: 0;
background: rgba(26, 29, 38, 0.025);
}
.dark .placeholder {
color: var(--bone-60);
border-color: rgba(228, 166, 114, 0.4);
background: rgba(242, 235, 224, 0.04);
}
.promise { margin: clamp(32px, 4vw, 52px) 0; max-width: 640px; }
.promise .h { margin-bottom: 14px; }
.voice-slot { margin: clamp(32px, 4vw, 52px) 0; max-width: 640px; }
.voice-slot figcaption {
margin-top: 12px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--stone);
}
.dark .voice-slot figcaption { color: var(--bone-60); }
/* ----------------------------------------------------------
CHAPTER OFFER (NEW)
The transitional call to action, wherever the direct one appears.
---------------------------------------------------------- */
.chapter-offer {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: center;
margin-top: clamp(40px, 5vw, 68px);
padding-top: clamp(30px, 4vw, 44px);
border-top: 1px solid var(--ink-10);
}
.chapter-offer .h { margin-bottom: 10px; }
.chapter-offer .prose { font-size: 15.5px; max-width: 46ch; }
@media (max-width: 880px) { .chapter-offer { grid-template-columns: 1fr; } }
/* ----------------------------------------------------------
THE PLAN (NEW)
Three steps, connected by the horizon rule rather than by numbered
circles. It is a relationship, so it reads as three sentences in a row,
not as a service menu.
---------------------------------------------------------- */
.plan {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: clamp(28px, 4vw, 44px);
}
.plan__step {
position: relative;
padding: clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 34px) clamp(26px, 3vw, 36px) 0;
border-top: 1px solid var(--ink-40);
}
.plan__step::before { /* the same pre dawn sun, on the same waterline */
content: "";
position: absolute;
top: -8px; left: 0;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--dawn);
clip-path: inset(0 0 50% 0);
}
.plan__step::after { /* the glow beside it */
content: "";
position: absolute;
top: -8px; left: 0;
width: 170px; height: 15px;
pointer-events: none;
background: radial-gradient(ellipse 90px 6px at 7px 50%,
rgba(228, 166, 114, 0.5) 0%, rgba(228, 166, 114, 0) 72%);
}
.plan__step h3 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(21px, 2.3vw, 30px);
line-height: 1.12;
letter-spacing: -0.012em;
margin-bottom: 12px;
}
.plan__step p {
font-size: 15.5px; line-height: 1.62; color: var(--ink-80); max-width: 34ch;
}
.dark .plan__step { border-top-color: rgba(228, 166, 114, 0.3); }
.dark .plan__step h3 { color: var(--bone); }
.dark .plan__step p { color: var(--bone-80); }
@media (max-width: 880px) {
.plan { grid-template-columns: 1fr; }
.plan__step { padding-right: 0; }
}
/* ----------------------------------------------------------
PHOTO BAND (NEW)
One image, one sentence, no body copy. The interruption the long pages
lack. The image carries an Ink scrim heavy enough that Bone type clears
contrast at the top of the band, where the sentence sits.
Pre dawn rule: a band may show a horizon, never a risen sun.
---------------------------------------------------------- */
.photo-band {
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp(320px, 42vw, 520px);
padding: clamp(40px, 6vw, 88px) var(--pad);
background-color: var(--ink);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
overflow: hidden;
}
.photo-band::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top,
rgba(26, 29, 38, 0.92) 0%,
rgba(26, 29, 38, 0.74) 45%,
rgba(26, 29, 38, 0.60) 100%);
}
.photo-band > * { position: relative; z-index: 1; }
.photo-band p {
font-family: var(--italic);
font-style: italic;
font-weight: 400;
font-size: clamp(26px, 4vw, 56px);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--bone);
max-width: 24ch;
margin: 0;
}
.photo-band em { font-style: italic; color: var(--dawn); }
/* A line that is NOT a book quotation is set in the display face, never in
the italic the site reserves for verbatim quotation, and carries no cite. */
.photo-band--statement p {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: -0.02em;
max-width: 18ch;
}
.photo-band cite {
display: block;
margin-top: 18px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; font-style: normal; color: var(--bone-60);
}
.photo-band--wall { background-image: url("/images/wall-light.jpg"); }
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.photo-band--wall {
background-image: image-set(url("/images/wall-light.webp") type("image/webp"),
url("/images/wall-light.jpg") type("image/jpeg"));
}
}
@media (max-width: 767px) {
.photo-band--wall { background-image: url("/images/wall-light-m.jpg"); }
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.photo-band--wall {
background-image: image-set(url("/images/wall-light-m.webp") type("image/webp"),
url("/images/wall-light-m.jpg") type("image/jpeg"));
}
}
}
/* ----------------------------------------------------------
STACKED LOCKUP (NEW)
Inlined so it inherits currentColor and the real Fraunces face.
---------------------------------------------------------- */
.lockup { width: clamp(132px, 15vw, 182px); color: var(--ink); margin-bottom: clamp(28px, 4vw, 44px); }
.lockup svg { width: 100%; height: auto; display: block; }
.print-only { display: none; }
/* /sent/ is read once, by someone who has just done a hard thing. It gets
room and a shorter measure than the rest of the site. */
.sent-page { text-align: left; }
.sent-page .hero-title { max-width: 16ch; }
.sent-body { max-width: 56ch; margin-top: clamp(24px, 3vw, 36px); }
.sent-close {
font-size: clamp(22px, 2.8vw, 36px) !important;
max-width: 26ch;
margin-top: clamp(30px, 4vw, 48px);
}
.sent-page .btn-row { margin-top: clamp(28px, 4vw, 44px); }
/* ----------------------------------------------------------
WALL QUESTION (NEW)
The single question the church page turns on. Full bleed inside its Ink
section, set in the italic face at display size, with the dawn wash
rising under it the way .featured does on Bone.
---------------------------------------------------------- */
.wall-question {
margin: clamp(36px, 5vw, 64px) calc(var(--pad) * -1);
padding: clamp(36px, 5vw, 60px) var(--pad) clamp(40px, 5.5vw, 68px);
background: linear-gradient(to top, rgba(228, 166, 114, 0.14) 0%, rgba(228, 166, 114, 0) 70%);
border-top: 1px solid rgba(228, 166, 114, 0.22);
border-bottom: 1px solid rgba(228, 166, 114, 0.22);
}
.wall-question p {
font-family: var(--italic);
font-style: italic;
font-weight: 400;
font-size: clamp(34px, 6vw, 82px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--bone);
max-width: 20ch;
margin: 0;
}
.wall-question em { font-style: italic; color: var(--dawn); }
/* ----------------------------------------------------------
DAWN BAND (NEW)
A slim Ink interruption for long pages, held at the earliest and
darkest stage of the hero gradient. Only the faint warm line along
its bottom edge suggests that morning is coming.
---------------------------------------------------------- */
.dawn-band {
height: clamp(96px, 12vw, 132px);
position: relative;
overflow: hidden;
background:
var(--grain),
linear-gradient(to bottom, #101219 0%, #14171f 58%, #191d27 100%);
background-size: 200px 200px, auto;
border-bottom: 1px solid rgba(228, 166, 114, 0.32);
}
.dawn-band::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 42%;
pointer-events: none;
background: linear-gradient(to top, rgba(228, 166, 114, 0.13), rgba(228, 166, 114, 0));
}
.dawn-band + .section-rule { border-top: 0; }
.dawn-band + .section-rule::before,
.dawn-band + .section-rule::after { display: none; }
.wrap { max-width: 1400px; }
.eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: clamp(32px, 4.5vw, 56px);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--stone);
}
.eyebrow .num { color: var(--ember); }
.eyebrow .rule { flex: 1; max-width: 320px; height: 1px; background: var(--ink-40); }
.eyebrow.tight { margin-bottom: 20px; }
/* Tiny ember dot used in the hero eyebrow */
.eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ember); flex-shrink: 0;
}
.section-title {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(38px, 6vw, 84px);
line-height: 1.0;
letter-spacing: -0.02em;
max-width: 20ch;
margin-bottom: clamp(28px, 4vw, 48px);
color: var(--ink);
}
.section-title em, .h em {
font-family: var(--italic);
font-style: italic;
color: var(--ember);
font-weight: 400;
}
.section-title.sm { font-size: clamp(30px, 3.8vw, 52px); }
/* Sub-heading inside a section (NEW) */
.h {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.08;
letter-spacing: -0.015em;
max-width: 24ch;
margin-bottom: clamp(20px, 2.5vw, 32px);
}
/* Long form prose (NEW). Most of the site is this. */
.prose {
max-width: var(--measure);
font-size: clamp(17px, 1.35vw, 19px);
line-height: 1.62;
color: var(--ink-80);
}
.prose p + p { margin-top: 1.15em; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-family: var(--italic); font-style: italic; font-size: 1.06em; color: var(--ink); }
.prose a:not(.btn):not(.link) { border-bottom: 1px solid var(--dawn); transition: border-color 0.2s, color 0.2s; }
.prose a:not(.btn):not(.link):hover { color: var(--ember); border-bottom-color: var(--ember); }
.prose .btn { margin-top: clamp(24px, 3vw, 36px); }
.prose .btn + .small-note { margin-top: 18px; }
.prose.lg { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: var(--ink); }
.prose.serif {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.42;
color: var(--ink);
letter-spacing: -0.005em;
}
.prose.serif em { font-family: var(--italic); color: var(--ember); font-size: 1em; }
/* Two column prose split (NEW) */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
/* A featured line: the one sentence in a section set large (NEW) */
.featured {
font-family: var(--italic);
font-style: italic;
font-weight: 400;
font-size: clamp(30px, 4.6vw, 64px);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--ember);
/* a dawn wash rising from the bottom edge, under the one big sentence */
background: linear-gradient(to top, rgba(228, 166, 114, 0.16) 0%, rgba(228, 166, 114, 0) 62%);
padding-bottom: clamp(10px, 1.4vw, 18px);
max-width: 22ch;
margin: clamp(28px, 4vw, 48px) 0;
}
.featured.ink { color: var(--ink); }
.featured em { font-style: italic; color: var(--ember); }
.featured.ink em { color: var(--ember); }
.featured.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 26ch; }
/* An offset italic block: the door promises, short excerpts (NEW) */
.offset {
max-width: 44ch;
margin: clamp(32px, 4vw, 56px) 0;
padding-left: clamp(20px, 3vw, 40px);
border-left: 2px solid var(--dawn);
font-family: var(--italic);
font-style: italic;
font-size: clamp(21px, 2.1vw, 28px);
line-height: 1.32;
color: var(--ink);
}
.offset p + p { margin-top: 0.9em; }
.offset .attrib, .pullquote .attrib {
display: block;
margin-top: 20px;
font-family: var(--mono);
font-style: normal;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--stone);
}
.offset.lg { font-size: clamp(26px, 2.8vw, 38px); max-width: 30ch; }
/* Big pull quote, full width editorial moment */
.pullquote {
margin: clamp(60px, 8vw, 96px) auto 0;
padding: clamp(36px, 5vw, 64px) 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
text-align: center;
max-width: 1100px;
}
.pullquote .qm {
display: block;
font-family: var(--italic);
font-style: italic;
color: var(--dawn);
font-size: clamp(64px, 10vw, 120px);
line-height: 0.4;
margin-bottom: 24px;
}
.pullquote .text {
font-family: var(--serif);
font-weight: 300;
font-style: italic;
font-size: clamp(30px, 4.6vw, 64px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 24ch;
margin: 0 auto;
}
.pullquote .text.sm { font-size: clamp(24px, 3vw, 40px); max-width: 30ch; }
.pullquote .attrib { margin-top: 32px; }
/* Small mono caps line (NEW) */
.mono-line {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--stone);
margin-top: 14px;
}
.mono-line .sep { color: var(--ember); margin: 0 6px; }
/* Small quiet note (NEW) */
.small-note {
max-width: 52ch;
font-size: 14px;
line-height: 1.55;
color: var(--stone);
margin-top: 20px;
}
.small-note em { font-family: var(--italic); font-size: 1.05em; color: var(--ink-80); }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px 16px 32px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--bone);
transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
cursor: pointer;
}
.btn:hover { background: var(--ember); border-color: var(--ember); color: var(--bone); transform: translateY(-2px); }
.btn .arrow { transition: transform 0.3s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.btn-dawn { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }
.btn-dawn:hover { background: var(--ember); border-color: var(--ember); color: var(--bone); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 40px); }
/* Text link with arrow (NEW) */
.link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
transition: gap 0.25s;
margin-top: 24px;
}
.link:hover { gap: 14px; }
.link.ink { color: var(--ink); }
/* ==========================================================
HOME HERO (retained sequence)
========================================================== */
.hero {
min-height: 100vh;
padding: 140px var(--pad) 80px;
display: grid;
grid-template-rows: auto 1fr auto;
position: relative;
overflow: hidden;
}
/* ----------------------------------------------------------
.hero-ink is the homepage hero ONLY. Everything below this
marker and above "PAGE HERO" is scoped to it: the Ink ground,
the photograph, the grain, the dawn overlay, the sun and the
Bone type. Nothing here may use a bare .hero-title or
.hero-sub selector, because /about/, /book/, /church/,
/contact/, /leaders/, /partners/, /pastors/, /people/ and
/sent/ all reuse those classes inside .page-hero on Bone.
---------------------------------------------------------- */
.hero-ink {
--hero-photo: url("/images/hero-dawn.jpg");
background-color: var(--ink);
background-image: var(--grain), var(--hero-photo);
background-repeat: repeat, no-repeat;
background-size: 200px 200px, cover;
background-position: top left, center 70%;
background-attachment: scroll, scroll;
color: var(--bone);
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.hero-ink {
--hero-photo: image-set(url("/images/hero-dawn.webp") type("image/webp"),
url("/images/hero-dawn.jpg") type("image/jpeg"));
}
}
@media (max-width: 767px) {
.hero-ink { --hero-photo: url("/images/hero-dawn-m.jpg"); }
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.hero-ink {
--hero-photo: image-set(url("/images/hero-dawn-m.webp") type("image/webp"),
url("/images/hero-dawn-m.jpg") type("image/jpeg"));
}
}
}
/* The overlay. Ink 92 percent at the top down to 70 percent at the bottom,
so only the horizon glow comes through and the headline stays readable.
The two amber radials are the original hero glow, kept underneath it. */
.hero-ink::before {
content: '';
position: absolute;
inset: 0;
--hero-ov-top: 0.92;
--hero-ov-bottom: 0.70;
background:
linear-gradient(to bottom,
rgba(26, 29, 38, var(--hero-ov-top, 0.92)) 0%,
rgba(26, 29, 38, var(--hero-ov-bottom, 0.70)) 100%),
radial-gradient(ellipse 90% 70% at 25% 15%, rgba(228, 166, 114, 0.18) 0%, transparent 55%),
radial-gradient(ellipse 60% 45% at 80% 95%, rgba(166, 83, 58, 0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
animation: hero-dawn 8s cubic-bezier(0.2, 0, 0.1, 1) both;
}
/* Dawn. Starts as night at a flat Ink 96 percent and eases to the settled
gradient over 8 seconds, so the horizon appears from the bottom up.
Runs once. Nothing moves but the overlay. Homepage hero only. */
@keyframes hero-dawn {
from { --hero-ov-top: 0.96; --hero-ov-bottom: 0.96; }
to { --hero-ov-top: 0.92; --hero-ov-bottom: 0.70; }
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
display: flex; align-items: center; gap: 12px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--stone);
opacity: 0;
animation: fadeUp 1s 0.2s var(--ease) forwards;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
align-items: start;
gap: clamp(48px, 6vw, 100px);
padding: clamp(16px, 2vw, 32px) 0 clamp(40px, 5vw, 60px);
max-width: 1400px;
}
.hero-text { display: grid; gap: clamp(28px, 3vw, 44px); }
/* The sun belongs to the photograph. --art-water is where the real
waterline of hero-dawn.jpg falls as a share of hero height at this
breakpoint; the SVG's own waterline (y=100 of 200) is pinned to it.
Measured, not guessed: the horizon sits 51.8% down the source image,
which lands at 50.1% of the hero at 1440px and 51.8% at 390px. */
.hero-ink .hero-art {
position: absolute;
/* Where the photograph's horizon actually lands, derived from the same
`cover` geometry the background uses, so it tracks every viewport
instead of drifting with hero height.
height constrained (portrait): the horizon is 51.77% down the image
width constrained (landscape): 0.7H - 0.1367W, which in CSS units
is calc(70% - 13.67vw)
min() picks whichever regime is live. Verified against the rendered
pixels at 1440 and 390, not estimated. */
--art-water: min(51.77%, calc(70% - 13.67vw));
top: var(--art-water);
right: 12%;
width: 300px;
transform: translateY(-50%);
color: var(--bone);
z-index: 1;
pointer-events: none;
}
.hero-ink .hero-art svg { width: 100%; height: auto; display: block; overflow: hidden; }
/* Sun and reflection ride the same 8 seconds and the same curve as the
dawn overlay, so the light and the sun arrive as one motion. Once only. */
.hero-ink .hero-art .sun-active {
fill: var(--dawn);
animation: sun-rise 8s cubic-bezier(0.2, 0, 0.1, 1) both;
}
.hero-ink .hero-art .ghost {
opacity: var(--ghost-target, 0.16);
animation: ghost-in 8s cubic-bezier(0.2, 0, 0.1, 1) both;
}
@keyframes sun-rise {
from { transform: translateY(78px); } /* fully under the waterline */
to { transform: translateY(0); }
}
@keyframes ghost-in { from { opacity: 0; } to { opacity: var(--ghost-target, 0.16); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 880px) {
.hero-grid { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
/* One column now, so the sun sits clear of the copy on the right edge.
The waterline drifts slightly lower as the hero gets taller. */
.hero-ink .hero-art { width: 220px; right: 6%; }
}
@media (max-width: 480px) {
/* In portrait the photo is height constrained, so background-position
cannot move the waterline: it is locked at 51.8% of the hero, which is
exactly where the lede sits. There is no room for the sun that does not
cost the copy its measure, so on phones the photograph and the dawn
overlay carry the hero alone. */
.hero-ink .hero-art { display: none; }
}
.hero-title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(38px, 5.6vw, 84px);
line-height: 1.0;
letter-spacing: -0.022em;
color: var(--ink);
max-width: 17ch;
opacity: 0;
animation: fadeUp 1.2s 0.5s var(--ease) forwards;
}
.hero-title em {
font-family: var(--italic);
font-style: italic;
font-weight: 400;
color: var(--ember);
}
.hero-sub {
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.55;
color: var(--ink-80);
max-width: 46ch;
opacity: 0;
animation: fadeUp 1.2s 0.8s var(--ease) forwards;
}
.hero-ctas {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 4px;
opacity: 0;
animation: fadeUp 1.2s 1.0s var(--ease) forwards;
}
.hero-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
border-top: 1px solid var(--ink-40);
padding-top: 24px;
opacity: 0;
animation: fadeUp 1.2s 1.6s var(--ease) forwards;
}
.hero-bottom .sep { color: var(--ember); margin: 0 8px; }
.hero-bottom .scroll-hint { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.hero-bottom .scroll-hint::after {
content: "↓";
font-family: var(--serif);
font-size: 14px;
animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* ----------------------------------------------------------
Short phones. At 360x640 the first screen ran 53px past the fold and
the buttons fell off it. Nothing here touches the headline, the lede
or the photograph: it only tightens hero spacing, which on a 640px
tall screen was budgeted for a desktop. Height is in the query as well
as width so roomier phones keep the generous setting.
---------------------------------------------------------- */
@media (max-width: 420px) and (max-height: 720px) {
.hero { padding-top: 96px; padding-bottom: 44px; }
.hero-grid { padding-top: 4px; padding-bottom: 20px; }
.hero-text { gap: 20px; }
.hero-ctas { gap: 12px; margin-top: 0; }
.hero-bottom { padding-top: 16px; }
}
/* ----------------------------------------------------------
Hero type on Ink. The hero sits on the dark ground now, so
everything in it is set in Bone with the italic accents in Dawn.
---------------------------------------------------------- */
.hero-ink .hero-eyebrow { color: var(--bone-60); }
.hero-ink .hero-eyebrow .dot { background: var(--dawn); }
.hero-ink .hero-title { color: var(--bone); }
.hero-ink .hero-title em { color: var(--dawn); }
.hero-ink .hero-sub { color: rgba(242, 235, 224, 0.78); }
.hero-ink .hero-art { color: var(--bone); }
.hero-ink .hero-bottom {
color: var(--bone-60);
border-top-color: rgba(228, 166, 114, 0.28);
}
.hero-ink .hero-bottom .sep { color: var(--dawn); }
.hero-ink .hero-bottom .scroll-hint { color: var(--bone); }
.hero-ink .btn { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }
.hero-ink .btn:hover { background: transparent; color: var(--dawn); }
.hero-ink .btn-ghost { background: transparent; border-color: var(--bone-60); color: var(--bone); }
.hero-ink .btn-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
/* The homepage hero is solid from first paint: the dawn overlay and the
rising sun are its entrance, so the type does not fade in as well.
The page heroes keep the original fadeUp exactly as deployed. */
.hero-ink .hero-eyebrow,
.hero-ink .hero-title,
.hero-ink .hero-sub,
.hero-ink .hero-ctas,
.hero-ink .hero-bottom { opacity: 1; animation: none; }
/* ==========================================================
PAGE HERO for inner pages (NEW)
========================================================== */
.page-hero {
padding: clamp(150px, 18vw, 220px) var(--pad) clamp(48px, 6vw, 80px);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(228, 166, 114, 0.16) 0%, transparent 55%);
pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero .eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }
.page-hero .hero-title { max-width: 18ch; animation-delay: 0.15s; }
.page-hero .hero-sub { margin-top: clamp(24px, 3vw, 36px); max-width: 56ch; animation-delay: 0.4s; }
.page-hero.quiet::before { display: none; }
/* ==========================================================
CARDS (NEW, descended from the original work cards)
========================================================== */
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.doors .card { min-height: 0; gap: 14px; }
.card-grid.doors .card-title { font-size: clamp(22px, 2vw, 28px); }
.card-grid.doors .card .link { padding-top: 8px; }
@media (max-width: 1100px) { .card-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) { .card-grid, .card-grid.three, .card-grid.four { grid-template-columns: 1fr; } }
.card {
background: var(--bone-2);
padding: clamp(28px, 3.2vw, 44px);
display: flex;
flex-direction: column;
gap: 18px;
min-height: 260px;
position: relative;
color: var(--ink);
transition: background 0.35s;
}
a.card:hover { background: var(--bone-3); }
.card.featured { background: var(--ink); color: var(--bone); }
a.card.featured:hover { background: #232735; }
.card-num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ember);
text-transform: uppercase;
}
.card.featured .card-num { color: var(--dawn); }
.card-title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.08;
letter-spacing: -0.015em;
}
.card-title em { font-family: var(--italic); font-style: italic; color: var(--ember); }
.card.featured .card-title em { color: var(--dawn); }
.card-desc { font-size: 15px; line-height: 1.6; color: var(--ink-80); max-width: 44ch; }
.card-desc em { font-family: var(--italic); font-size: 1.06em; color: var(--ink); }
.card.featured .card-desc { color: var(--bone-80); }
.card .link { margin-top: auto; padding-top: 12px; }
.card.featured .link { color: var(--dawn); }
.card-meta {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
}
.card.featured .card-meta { color: var(--bone-60); }
/* Numbered row list (six moves, values) */
.rows { }
.row {
display: grid;
grid-template-columns: 72px 1fr 2fr;
gap: clamp(20px, 3vw, 48px);
padding: clamp(28px, 4vw, 48px) 0;
border-top: 1px solid var(--ink-40);
align-items: baseline;
}
.row:last-child { border-bottom: 1px solid var(--ink-40); }
.row { transition: background 0.4s; }
.row:hover { background: rgba(228, 166, 114, 0.05); }
.row .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--ember); }
.row .name {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.12;
letter-spacing: -0.01em;
}
.row .name em { font-family: var(--italic); font-style: italic; color: var(--ember); }
.row .desc { font-size: 15.5px; line-height: 1.62; color: var(--ink-80); max-width: 52ch; }
.row .desc em { font-family: var(--italic); font-size: 1.06em; color: var(--ink); }
@media (max-width: 720px) {
.row { grid-template-columns: 56px 1fr; }
.row .desc { grid-column: 1 / -1; padding-top: 12px; }
}
/* ==========================================================
PHOTO ON BONE (NEW)
The window light photograph, used on the homepage For You section
and the /people/ hero. Bone at 82 percent over it, so the window
shadow reads as a faint shape rather than a picture. No animation.
========================================================== */
.photo-bone,
.page-people .page-hero {
--wall-photo: url("/images/wall-light.jpg");
background-color: var(--bone);
background-image:
linear-gradient(rgba(242, 235, 224, 0.82), rgba(242, 235, 224, 0.82)),
var(--grain),
var(--wall-photo);
background-repeat: no-repeat, repeat, no-repeat;
background-size: cover, 200px 200px, cover;
background-position: center, top left, center;
background-attachment: scroll, scroll, scroll;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.photo-bone,
.page-people .page-hero {
--wall-photo: image-set(url("/images/wall-light.webp") type("image/webp"),
url("/images/wall-light.jpg") type("image/jpeg"));
}
}
@media (max-width: 767px) {
.photo-bone,
.page-people .page-hero { --wall-photo: url("/images/wall-light-m.jpg"); }
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.photo-bone,
.page-people .page-hero {
--wall-photo: image-set(url("/images/wall-light-m.webp") type("image/webp"),
url("/images/wall-light-m.jpg") type("image/jpeg"));
}
}
}
/* ==========================================================
PARTNER ROSTER (NEW)
Shared by the homepage and /partners/ via src/partials/roster.html.
Lane on the left, seat status on the right in the mono label style.
========================================================== */
.roster {
margin: clamp(24px, 3vw, 36px) 0 clamp(28px, 3.5vw, 44px);
border-top: 1px solid var(--ink-40);
}
.roster-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: clamp(16px, 3vw, 40px);
padding: clamp(14px, 1.8vw, 20px) 0;
border-bottom: 1px solid var(--ink-10);
}
.roster-row:last-child { border-bottom: 1px solid var(--ink-40); }
.roster-lane {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(17px, 1.9vw, 23px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink);
}
.roster-status {
flex-shrink: 0;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.5;
color: var(--stone);
text-align: right;
}
.roster-status.held,
.roster-status.priority { color: var(--ember); }
@media (max-width: 560px) {
.roster-row { flex-direction: column; gap: 6px; }
.roster-status { text-align: left; }
}
.dark .roster { border-top-color: rgba(228, 166, 114, 0.35); }
.dark .roster-row { border-bottom-color: rgba(242, 235, 224, 0.12); }
.dark .roster-row:last-child { border-bottom-color: rgba(228, 166, 114, 0.35); }
.dark .roster-lane { color: var(--bone); }
.dark .roster-status { color: var(--bone-60); }
.dark .roster-status.held,
.dark .roster-status.priority { color: var(--dawn); }
/* ==========================================================
PORTRAIT BLOCKS (NEW)
========================================================== */
.bio {
display: grid;
grid-template-columns: minmax(240px, 360px) 1fr;
gap: clamp(36px, 6vw, 110px);
align-items: center;
max-width: 1160px;
}
.bio-text { max-width: 56ch; }
.bio-text .h { max-width: none; margin-bottom: clamp(16px, 2vw, 24px); }
.bio-caption {
display: flex; align-items: center; gap: 10px;
margin-top: 16px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone);
}
.bio-caption::before { content: ""; width: 22px; height: 1px; background: var(--dawn); }
@media (max-width: 720px) { .bio { grid-template-columns: 1fr; } .bio .portrait { max-width: 300px; } }
.portrait {
position: relative;
overflow: hidden;
background: var(--bone-3);
}
.portrait img { width: 100%; height: auto; display: block; filter: saturate(0.92); }
.portrait::after {
/* a thin dawn line along the bottom edge, echoing the horizon */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dawn);
}
.portrait.lg { max-width: 560px; }
/* ==========================================================
DARK BLOCK (NEW, descended from the original prodigal section)
========================================================== */
.dark {
background: var(--ink);
color: var(--bone);
padding: clamp(90px, 12vw, 160px) var(--pad);
position: relative;
overflow: hidden;
}
.dark .horizon-deco {
position: absolute; top: 50%; left: 0; right: 0; height: 1px;
background: rgba(228, 166, 114, 0.22); pointer-events: none;
}
.dark .sun-deco {
position: absolute; top: -200px; right: -200px; width: 560px; height: 560px; border-radius: 50%;
background: radial-gradient(circle at center, rgba(228, 166, 114, 0.28) 0%, rgba(228, 166, 114, 0) 65%);
pointer-events: none;
}
.dark > * { position: relative; z-index: 2; }
.dark .eyebrow, .dark .eyebrow .num { color: var(--dawn); }
.dark .eyebrow .rule { background: rgba(228, 166, 114, 0.3); }
.dark .section-title { color: var(--bone); }
.dark .section-title em, .dark .h em, .dark .card-title em { color: var(--dawn); }
.dark .prose { color: var(--bone-80); }
.dark .prose em, .dark .prose strong { color: var(--bone); }
.dark .featured {
color: var(--dawn);
background: linear-gradient(to top, rgba(228, 166, 114, 0.11) 0%, rgba(228, 166, 114, 0) 62%);
}
/* Quote components on Ink. .offset already had these; .pullquote and
.excerpt did not, so their body text stayed Ink and vanished the moment a
section carrying one was converted to a dark ground. The quote mark and the
citation survived because they are Dawn and Stone, which is exactly what
made the failure look like missing content rather than invisible text. */
.dark .pullquote .text { color: var(--bone); }
.dark .pullquote .text em { color: var(--dawn); }
.dark .pullquote .attrib { color: var(--dawn); }
.dark .excerpt { color: var(--bone); }
.dark .excerpt .mono-line { color: var(--bone-60); }
.dark .offset { color: var(--bone); border-left-color: var(--dawn); }
.dark .offset .attrib { color: var(--dawn); }
.dark .small-note, .dark .mono-line { color: var(--bone-60); }
.dark .card { background: rgba(242, 235, 224, 0.05); color: var(--bone); border: 1px solid rgba(228, 166, 114, 0.22); }
.dark a.card:hover { background: rgba(242, 235, 224, 0.09); }
.dark .card-num { color: var(--dawn); }
.dark .card-desc { color: var(--bone-80); }
.dark .card .link { color: var(--dawn); }
/* A bare .link inside an Ink section keeps its Bone side Ember, which is
about 3.2 to 1 on Ink. It had never come up because no Ink section
carried one until the roster moved onto Ink. */
.dark .link { color: var(--dawn); }
.dark .btn { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }
.dark .btn:hover { background: transparent; color: var(--dawn); }
.dark .btn-ghost { background: transparent; border-color: var(--bone-60); color: var(--bone); }
.dark .btn-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.dark .row { border-color: rgba(228, 166, 114, 0.25); }
.dark .row .num { color: var(--dawn); }
.dark .row .desc { color: var(--bone-80); }
.dark .link.ink { color: var(--bone); }
/* ==========================================================
FORMS (NEW). One shared style for every door.
========================================================== */
.form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.form label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: -6px;
}
.form input, .form textarea, .form select {
width: 100%;
padding: 15px 16px;
background: var(--bone);
border: 1px solid var(--ink-40);
border-radius: 0;
font-family: var(--sans);
font-size: 16px;
color: var(--ink);
outline: none;
transition: border-color 0.2s;
appearance: none;
-webkit-appearance: none;
}
.form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.form textarea.tall { min-height: 220px; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--ember); }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-40); }
.form button {
align-self: flex-start;
padding: 16px 28px 16px 32px;
background: var(--ink);
color: var(--bone);
border: 1px solid var(--ink);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s, border-color 0.25s;
margin-top: 8px;
display: inline-flex; align-items: center; gap: 10px;
}
.form button:hover { background: var(--ember); border-color: var(--ember); }
.form .hp { position: absolute; left: -9999px; }
.form .form-msg {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--sage); min-height: 14px;
}
.dark .form input, .dark .form textarea, .dark .form select {
background: rgba(242, 235, 224, 0.06);
border-color: rgba(242, 235, 224, 0.22);
color: var(--bone);
}
.dark .form input::placeholder, .dark .form textarea::placeholder { color: rgba(242, 235, 224, 0.4); }
.dark .form input:focus, .dark .form textarea:focus { border-color: var(--dawn); }
.dark .form label { color: var(--bone-60); }
.dark .form button { background: var(--dawn); color: var(--ink); border-color: var(--dawn); }
.dark .form button:hover { background: var(--ember); color: var(--bone); border-color: var(--ember); }
.form.inline { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.form.inline input { flex: 1 1 240px; }
.form.inline button { margin-top: 0; }
/* Boxed feature block: the guide on /pastors (NEW) */
.box {
border: 1px solid var(--ink);
padding: clamp(32px, 4.5vw, 64px);
max-width: 820px;
margin: 0 auto;
position: relative;
background: #F6F0E6;
}
.box::before {
content: ""; position: absolute; top: -1px; left: -1px; width: 48px; height: 48px;
border-top: 2px solid var(--dawn); border-left: 2px solid var(--dawn);
}
.box .eyebrow { margin-bottom: 20px; }
.box .h { max-width: none; }
.box .featured { font-size: clamp(20px, 2vw, 26px); margin: 0 0 20px; max-width: 40ch; }
/* .box keeps a near white panel ground, which is right on Bone and wrong on
Ink: the .dark text overrides turn its contents Bone and the panel stayed
light, so the whole block went blank. Same class of bug as .pullquote. */
.dark .box {
border-color: rgba(228, 166, 114, 0.35);
background: rgba(242, 235, 224, 0.05);
}
/* Inline children whose parent had a .dark rule but they did not. */
.dark .card-desc em { color: var(--bone); }
.dark .small-note em { color: var(--bone); }
.dark .mono-line .sep { color: var(--dawn); }
/* Crisis footer note (NEW) */
.crisis-note {
padding: clamp(28px, 4vw, 48px) var(--pad);
border-top: 1px solid var(--ink-40);
font-family: var(--italic);
font-style: italic;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.5;
color: var(--ink-80);
max-width: none;
}
.crisis-note p { max-width: 70ch; }
.crisis-note a { border-bottom: 1px solid var(--dawn); }
/* Book page excerpt treatment (NEW) */
.excerpt {
background: #F6F0E6;
padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 80px);
max-width: 780px;
margin: 0 auto;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(18px, 1.55vw, 21px);
line-height: 1.55;
color: var(--ink);
box-shadow: 0 1px 0 var(--bone-3), 0 30px 60px -40px rgba(26, 29, 38, 0.25);
}
.excerpt p + p { margin-top: 1.1em; }
.excerpt p:first-of-type::first-letter {
font-family: var(--serif); font-weight: 300; font-size: 3.2em; line-height: 0.8;
float: left; padding: 0.08em 0.12em 0 0; color: var(--ember);
}
.excerpt .mono-line { margin-top: 36px; }
/* Directory list, contact page (NEW) */
.doors { display: grid; gap: 4px; }
.door {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: clamp(20px, 3vw, 48px);
padding: clamp(28px, 4vw, 48px);
background: var(--bone-2);
align-items: start;
color: var(--ink);
transition: background 0.3s;
}
a.door:hover { background: var(--bone-3); }
.door .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--ember); padding-top: 6px; }
.door .name { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 14px; }
.door .name em { font-family: var(--italic); color: var(--ember); }
.door .desc { font-size: 15px; line-height: 1.6; color: var(--ink-80); max-width: 60ch; }
.door .where { margin-top: 14px; }
.door .link { margin-top: 6px; white-space: nowrap; }
@media (max-width: 720px) {
.door { grid-template-columns: 56px 1fr; }
.door .link { grid-column: 2; }
}
/* Partner card (NEW) */
.partner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(28px, 4vw, 64px);
padding: clamp(32px, 4vw, 56px);
background: var(--bone-2);
border-left: 2px solid var(--ember);
max-width: 1000px;
}
@media (max-width: 720px) { .partner { grid-template-columns: 1fr; } }
.partner .name { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.015em; }
.partner .place { margin-top: 10px; }
.partner .desc { font-size: 15.5px; line-height: 1.62; color: var(--ink-80); }
.partner .desc p + p { margin-top: 1em; }
/* ==========================================================
FOOTER
========================================================== */
.footer {
background: var(--ink);
color: var(--bone);
padding: clamp(80px, 10vw, 140px) var(--pad) 40px;
position: relative;
overflow: hidden;
}
.footer-sun {
position: absolute; top: -160px; right: -180px; width: 480px; height: 480px; border-radius: 50%;
background: radial-gradient(circle at center, rgba(228, 166, 114, 0.35) 0%, rgba(228, 166, 114, 0) 65%);
pointer-events: none;
}
.footer-content {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: clamp(32px, 4vw, 60px);
margin-bottom: 80px;
}
@media (max-width: 880px) { .footer-content { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-content { grid-template-columns: 1fr; } }
.footer-brand .footer-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.footer-brand .footer-mark svg { width: 32px; color: var(--bone); }
.footer-brand .footer-mark span { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: 0.2em; text-transform: uppercase; }
.footer-tag {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: var(--dawn);
max-width: 22ch; margin-bottom: 20px;
}
.footer-tag-sub { font-size: 14px; line-height: 1.6; color: rgba(242, 235, 224, 0.65); max-width: 40ch; }
.footer-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dawn); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-family: var(--sans); font-size: 14px; color: rgba(242, 235, 224, 0.78); transition: color 0.2s; }
.footer-col a:hover { color: var(--dawn); }
.footer-bottom {
position: relative; z-index: 2;
border-top: 1px solid rgba(228, 166, 114, 0.18);
padding-top: 32px;
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(242, 235, 224, 0.55);
}
.footer-bottom .sep { color: var(--dawn); margin: 0 8px; }
.footer-credit {
position: relative; z-index: 2;
margin-top: 18px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(242, 235, 224, 0.62);
}
/* ==========================================================
SCROLL REVEAL (one quiet entrance per block)
========================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.13s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.21s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.29s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.37s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
/* The page heroes still use the original fadeUp, so they must be forced
visible once `animation: none` above strips the timeline, or they stay
stranded at opacity 0. .hero-art is deliberately NOT in this list: its
transform is layout, pinning the sun to the waterline, not motion. */
.reveal, .reveal-stagger > *,
.hero-eyebrow, .hero-title, .hero-sub, .hero-ctas, .hero-bottom {
opacity: 1 !important;
transform: none !important;
}
/* The homepage hero needs nothing further: the sun, its reflection and the
dawn overlay all rest at their end values the moment the timeline goes. */
}
/* Spacing helpers */
.mt-0 { margin-top: 0 !important; }
.mt-lg { margin-top: clamp(48px, 6vw, 80px); }
.mt-xl { margin-top: clamp(64px, 9vw, 120px); }
.mb-lg { margin-bottom: clamp(48px, 6vw, 80px); }
.stack > * + * { margin-top: clamp(48px, 6vw, 80px); }
/* ==========================================================
RESTORED TEXTURE (from the original single page site)
========================================================== */
/* The medication marquee: a slow strip of what people reach for */
.marquee-strip {
border-top: 1px solid var(--ink-40);
border-bottom: 1px solid var(--ink-40);
overflow: hidden;
background: var(--bone);
}
.marquee-track {
list-style: none;
margin: 0; padding: 0;
display: flex;
gap: 0;
width: max-content;
animation: marquee 60s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-track li {
flex-shrink: 0;
padding: 26px clamp(28px, 3vw, 48px);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-80);
position: relative;
display: flex;
align-items: center;
gap: clamp(28px, 3vw, 48px);
transition: color 0.3s;
}
.marquee-track li:hover { color: var(--ember); }
.marquee-track li::after {
content: "";
width: 4px; height: 4px; border-radius: 50%;
background: var(--ember);
opacity: 0.5;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
.marquee-track li[aria-hidden] { display: none; }
}
/* Giant italic display line for the dark set pieces */
.display-italic {
font-family: var(--italic);
font-style: italic;
font-weight: 400;
font-size: clamp(52px, 8.5vw, 120px);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--bone);
max-width: 14ch;
margin-bottom: clamp(20px, 3vw, 32px);
}
.display-italic em, .display-italic .accent { color: var(--dawn); font-style: italic; }
.dark .dark-tag {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.35;
color: var(--dawn);
max-width: 26ch;
margin-bottom: clamp(28px, 4vw, 44px);
}
/* Framed aside with the oversized quote mark */
.aside-box {
align-self: center;
padding: clamp(32px, 4vw, 56px);
border: 1px solid var(--ink-40);
position: relative;
max-width: 560px;
}
.aside-box .aside-quote {
font-family: var(--serif);
font-weight: 300;
font-style: italic;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.3;
color: var(--ink);
margin-bottom: 28px;
}
.aside-box .aside-quote::before {
content: "\201C";
display: block;
font-family: var(--italic);
color: var(--dawn);
font-size: 80px;
line-height: 0.3;
margin-bottom: 24px;
}
.aside-box .aside-attrib {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--stone);
}
.dark .aside-box { border-color: rgba(228, 166, 114, 0.3); }
.dark .aside-box .aside-quote { color: var(--bone); }
.dark .aside-box .aside-attrib { color: var(--dawn); }
.dark-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 8vw, 120px);
position: relative;
z-index: 2;
}
@media (max-width: 880px) { .dark-grid { grid-template-columns: 1fr; } }
/* Launch box: the bordered block from the old newsletter, for the book list */
.launch-box {
background: var(--bone-2);
border-left: 2px solid var(--ember);
padding: clamp(28px, 3.5vw, 44px);
margin-top: clamp(28px, 3.5vw, 44px);
max-width: 480px;
}
.launch-box .prose .btn { margin-top: 0; }
.launch-box p.lead {
font-family: var(--serif);
font-size: clamp(19px, 1.8vw, 24px);
line-height: 1.3;
margin-bottom: 20px;
}
.launch-box p.lead em { font-family: var(--italic); font-style: italic; color: var(--ember); }
/* ==========================================================
PRINT (NEW)
Any page should save cleanly to PDF from the browser, but this
exists for /partners/prospectus/, which Drew hands to programs.
US letter, brand fonts kept, no nav, no footer, no photographs.
========================================================== */
/* ==========================================================
ATMOSPHERE (NEW)
The site is long and it is mostly words. These put weather behind
the words instead of pictures beside them.
One mechanism, two grounds. A photograph is laid in as a masked
::after underneath the content, never as a figure next to it. The
mask dissolves the image upward, so a section opens as flat ground
and only finds a horizon near its foot. Nothing here is ever the
subject of a section; it is the air the section sits in.
Pre dawn rule: every image in this set is blue hour or earlier.
A horizon may glow. No sun appears above it anywhere but the hero.
========================================================== */
.atmos { position: relative; overflow: hidden; }
.atmos > * { position: relative; z-index: 2; }
.atmos::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--atmos);
background-repeat: no-repeat;
background-size: cover;
background-position: var(--atmos-pos, center bottom);
opacity: var(--atmos-strength, 0.22);
-webkit-mask-image: var(--atmos-mask, linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 88%));
mask-image: var(--atmos-mask, linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 88%));
}
/* On Ink the photograph can carry real weight, because everything in a
dark section is Bone or Dawn on near black and has contrast to spare. */
.dark.atmos { --atmos-strength: 0.26; }
/* On Bone it has to stay a rumour, so the strength comes down. The frame
stays anchored to the foot of the block exactly as it is on Ink: one
behaviour everywhere, weather gathering at the bottom of a page and
thinning out before it reaches the words. Anchoring it to the top
instead was tried and reads as a tinted panel rather than as air. */
.page-hero.atmos {
--atmos-strength: 0.34;
/* Steeper than the Ink default. A page hero is short, so the standard
mask was still carrying plate as high as the eyebrow, and the Stone
mono label only has about 4.6 to 1 on clean Bone to begin with. This
puts the plate entirely in the bottom third, where nothing but the
last line of the lede can reach it. */
--atmos-mask: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.34) 30%, transparent 62%);
}
/* A body section on Bone cannot use the ::after mechanism at all, because
.section-rule already owns both pseudo elements: ::before is the glow
along the waterline and ::after is the 14 pixel pre dawn sun clipped by
the rule. A plate written into ::after inherits that width and clip path
and renders as a 14 pixel sliver, which is exactly what happened the
first time. So on Bone the plate goes in as background layers instead,
the same way .photo-bone and .dawn-band--photo already do it.
Layer one is a Bone gradient, opaque above the band and thinning toward
the floor, which does the job the mask does on Ink. Layer two is grain.
Layer three is the photograph, sized to a band at the foot of the
section so a 600 pixel section and a 1600 pixel section get the same
weather rather than the same percentage. */
.section-pad.atmos {
/* The weather gets its own room rather than sitting behind the copy.
Extra bottom padding turns the empty stretch at the foot of a long
Bone section, which was dead space, into the band the plate lives in.
The gradient stops are in pixels from the floor, not percentages, so
the clean zone is the same height on a 600 and a 1600 pixel section:
anything more than 300 pixels above the floor sits on plain Bone. */
padding-bottom: calc(var(--pad-y) + clamp(110px, 12vw, 200px));
background-image:
linear-gradient(to top,
rgba(242, 235, 224, 0.56) 0px,
rgba(242, 235, 224, 0.80) 95px,
rgba(242, 235, 224, 0.96) 200px,
var(--bone) 290px),
var(--grain),
var(--atmos);
background-repeat: no-repeat, repeat, no-repeat;
background-size: cover, 200px 200px, 100% 330px;
background-position: center, top left, center bottom;
}
/* The ::after plate is for Ink sections and page heroes only. Nothing on
Bone should reach it, but if a .section-pad ever picks up .atmos this
keeps the sun on the rule rather than half a photograph. */
.section-pad.atmos::after { background-image: none; opacity: 1; }
@media (max-width: 767px) {
.section-pad.atmos {
padding-bottom: calc(var(--pad-y) + 90px);
background-size: cover, 200px 200px, 100% 210px;
background-image:
linear-gradient(to top,
rgba(242, 235, 224, 0.62) 0px,
rgba(242, 235, 224, 0.86) 62px,
var(--bone) 160px),
var(--grain),
var(--atmos);
}
}
/* A full bleed band can take any plate in the set rather than only the
wall, by reading the same variable the mechanism uses. */
.photo-band--atmos { background-image: var(--atmos); }
/* The slim interruptions become a strip of real horizon rather than a
gradient. .dawn-band already owns ::after for its warm bottom line, so
the photograph goes in as a background layer instead of a pseudo element. */
.dawn-band--photo {
background:
linear-gradient(to bottom, rgba(16, 18, 25, 0.90) 0%, rgba(20, 23, 31, 0.80) 60%, rgba(25, 29, 39, 0.72) 100%),
var(--grain),
var(--atmos);
background-repeat: no-repeat, repeat, no-repeat;
background-size: cover, 200px 200px, cover;
background-position: center, top left, center 62%;
}
/* ---- The images themselves ----------------------------------------
Desktop plate at 2000px, phone plate at 900px, WebP with a JPEG
fallback through image-set. Every file is a background, so none of
them is ever announced to a screen reader or printed.
------------------------------------------------------------------- */
.atmos--tideline { --atmos: url("/images/atmos-tideline.jpg"); }
.atmos--valley { --atmos: url("/images/atmos-valley.jpg"); }
.atmos--ember { --atmos: url("/images/atmos-ember.jpg"); }
.atmos--tree { --atmos: url("/images/atmos-tree.jpg"); }
.atmos--fog { --atmos: url("/images/atmos-fog.jpg"); }
.atmos--clouds { --atmos: url("/images/atmos-clouds.jpg"); }
.atmos--ridge { --atmos: url("/images/atmos-ridge.jpg"); }
.atmos--strata { --atmos: url("/images/atmos-strata.jpg"); }
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.atmos--tideline { --atmos: image-set(url("/images/atmos-tideline.webp") type("image/webp"), url("/images/atmos-tideline.jpg") type("image/jpeg")); }
.atmos--valley { --atmos: image-set(url("/images/atmos-valley.webp") type("image/webp"), url("/images/atmos-valley.jpg") type("image/jpeg")); }
.atmos--ember { --atmos: image-set(url("/images/atmos-ember.webp") type("image/webp"), url("/images/atmos-ember.jpg") type("image/jpeg")); }
.atmos--tree { --atmos: image-set(url("/images/atmos-tree.webp") type("image/webp"), url("/images/atmos-tree.jpg") type("image/jpeg")); }
.atmos--fog { --atmos: image-set(url("/images/atmos-fog.webp") type("image/webp"), url("/images/atmos-fog.jpg") type("image/jpeg")); }
.atmos--clouds { --atmos: image-set(url("/images/atmos-clouds.webp") type("image/webp"), url("/images/atmos-clouds.jpg") type("image/jpeg")); }
.atmos--ridge { --atmos: image-set(url("/images/atmos-ridge.webp") type("image/webp"), url("/images/atmos-ridge.jpg") type("image/jpeg")); }
.atmos--strata { --atmos: image-set(url("/images/atmos-strata.webp") type("image/webp"), url("/images/atmos-strata.jpg") type("image/jpeg")); }
}
@media (max-width: 767px) {
.atmos--tideline { --atmos: url("/images/atmos-tideline-m.jpg"); }
.atmos--valley { --atmos: url("/images/atmos-valley-m.jpg"); }
.atmos--ember { --atmos: url("/images/atmos-ember-m.jpg"); }
.atmos--tree { --atmos: url("/images/atmos-tree-m.jpg"); }
.atmos--fog { --atmos: url("/images/atmos-fog-m.jpg"); }
.atmos--clouds { --atmos: url("/images/atmos-clouds-m.jpg"); }
.atmos--ridge { --atmos: url("/images/atmos-ridge-m.jpg"); }
.atmos--strata { --atmos: url("/images/atmos-strata-m.jpg"); }
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
.atmos--tideline { --atmos: image-set(url("/images/atmos-tideline-m.webp") type("image/webp"), url("/images/atmos-tideline-m.jpg") type("image/jpeg")); }
.atmos--valley { --atmos: image-set(url("/images/atmos-valley-m.webp") type("image/webp"), url("/images/atmos-valley-m.jpg") type("image/jpeg")); }
.atmos--ember { --atmos: image-set(url("/images/atmos-ember-m.webp") type("image/webp"), url("/images/atmos-ember-m.jpg") type("image/jpeg")); }
.atmos--tree { --atmos: image-set(url("/images/atmos-tree-m.webp") type("image/webp"), url("/images/atmos-tree-m.jpg") type("image/jpeg")); }
.atmos--fog { --atmos: image-set(url("/images/atmos-fog-m.webp") type("image/webp"), url("/images/atmos-fog-m.jpg") type("image/jpeg")); }
.atmos--clouds { --atmos: image-set(url("/images/atmos-clouds-m.webp") type("image/webp"), url("/images/atmos-clouds-m.jpg") type("image/jpeg")); }
.atmos--ridge { --atmos: image-set(url("/images/atmos-ridge-m.webp") type("image/webp"), url("/images/atmos-ridge-m.jpg") type("image/jpeg")); }
.atmos--strata { --atmos: image-set(url("/images/atmos-strata-m.webp") type("image/webp"), url("/images/atmos-strata-m.jpg") type("image/jpeg")); }
}
}
/* A phone shows a tall narrow slice of a wide plate, which turns a
horizon into a smear. Pull the strength back and sit the frame higher
so the sky, not the crop, is what carries. */
@media (max-width: 767px) {
.dark.atmos { --atmos-strength: 0.22; }
.page-hero.atmos { --atmos-strength: 0.26; }
}
/* Safari below 15.4 has no mask-image on a pseudo element without the
prefix, and a few engines have neither. Without a mask the plate would
run to the top edge of the section at full strength, so anything that
cannot mask gets a plain scrim fade instead of the dissolve. */
@supports not ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))) {
.atmos::after { opacity: calc(var(--atmos-strength, 0.22) * 0.6); }
}
/* ==========================================================
MEMBERS' ACTIVITY LOG (NEW)
/partners/activity/, generated from src/data/activity.json. A reach
report, not a referral report, so it is built to be scanned: a row of
totals, then a dated list grouped by month. Borrows the roster's rules
and the mono label style rather than inventing a second vocabulary.
========================================================== */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1px;
margin-top: clamp(24px, 3vw, 36px);
background: var(--ink-10);
border: 1px solid var(--ink-10);
}
.stat {
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(20px, 2.4vw, 30px);
background: var(--bone);
}
.stat-num {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.stat-qual {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 7px;
}
.stat-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.5;
color: var(--stone);
}
.log { margin-top: clamp(8px, 1.5vw, 18px); }
.log-pending {
font-family: var(--italic);
font-style: italic;
font-size: clamp(18px, 1.8vw, 23px);
line-height: 1.35;
color: var(--ember);
max-width: 48ch;
margin-bottom: clamp(30px, 4vw, 48px);
}
.log-empty {
font-family: var(--italic);
font-style: italic;
font-size: clamp(20px, 2.4vw, 30px);
line-height: 1.3;
color: var(--stone);
}
.log-month + .log-month { margin-top: clamp(38px, 5vw, 64px); }
.log-month-title {
font-family: var(--mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
padding-bottom: 12px;
border-bottom: 1px solid var(--ink-40);
}
.log-list { list-style: none; margin: 0; padding: 0; }
.log-entry {
display: grid;
grid-template-columns: 110px 1fr;
gap: clamp(14px, 2.4vw, 32px);
padding: clamp(16px, 2vw, 24px) 0;
border-bottom: 1px solid var(--ink-10);
}
.log-entry:last-child { border-bottom: 1px solid var(--ink-40); }
.log-date {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.9;
color: var(--stone);
font-variant-numeric: tabular-nums;
}
.log-name {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink);
}
/* An engagement is a place and a date, not a person, so it is set in the
mono label face to keep the serif line meaning "a pastor". */
.log-entry--engagement .log-name {
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ember);
line-height: 1.5;
}
.log-meta {
margin-top: 7px;
font-size: 14.5px;
line-height: 1.55;
color: var(--stone);
}
.log-meta .sep { color: var(--dawn-d); }
.log-note {
margin-top: 11px;
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-80);
max-width: 62ch;
}
.log-footer {
margin-top: clamp(30px, 4vw, 48px);
max-width: 68ch;
}
@media (max-width: 560px) {
.log-entry { grid-template-columns: 1fr; gap: 6px; }
.log-date { line-height: 1.5; }
}
@media print {
@page { size: letter; margin: 0.7in; }
/* Chrome does not run IntersectionObserver for a print render, so every
.reveal block would otherwise print at opacity 0. This is the rule that
makes the PDF contain anything below the fold at all. */
.reveal, .reveal-stagger > *,
.hero-eyebrow, .hero-title, .hero-sub, .hero-ctas, .hero-bottom,
.hero-art .sun-active, .hero-art .ghost {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
/* Furniture that means nothing on paper */
.nav, .footer, .skip, .hero-art, .marquee-strip,
.sun-deco, .horizon-deco, .scroll-hint, .arrow { display: none !important; }
body::before, body::after { display: none !important; }
html, body {
background: #fff !important;
color: #111 !important;
font-size: 10.5pt;
line-height: 1.45;
overflow: visible !important;
}
/* No photographic grounds, no overlays, no full viewport heroes */
.hero, .hero-ink, .page-hero, .photo-bone, .page-people .page-hero {
background-image: none !important;
background-color: #fff !important;
color: #111 !important;
min-height: 0 !important;
overflow: visible !important;
padding: 0 0 16pt !important;
}
.hero::before, .hero-ink::before, .page-hero::before { display: none !important; }
/* The atmosphere plates are decoration and a page of wet toner. */
.atmos::after { display: none !important; }
.dawn-band, .dawn-band--photo { display: none !important; }
.hero-ink .hero-title, .hero-ink .hero-sub, .hero-ink .hero-eyebrow { color: #111 !important; }
/* The Ink callout becomes a ruled box rather than a full page of toner */
.dark {
background: #fff !important;
color: #111 !important;
border: 1pt solid #111;
padding: 14pt 16pt !important;
break-inside: avoid;
}
.dark .eyebrow, .dark .eyebrow .num, .dark .section-title, .dark .display-italic,
.dark .prose, .dark .prose em, .dark .prose strong, .dark .featured,
.dark .small-note, .dark .mono-line { color: #111 !important; }
.dark .accent, .dark .section-title em { color: var(--ember) !important; }
.dark .eyebrow .rule { background: #999 !important; }
/* Paper rhythm */
.section-pad { padding: 14pt 0 !important; }
.section-rule { border-top: 0.5pt solid #999 !important; }
.split { gap: 18pt !important; }
.mb-lg, .mt-lg, .mt-xl { margin: 0 0 10pt !important; }
.small-note { margin-top: 12pt !important; color: #555 !important; }
.print-only { display: block !important; }
.lockup { width: 108px !important; color: #111 !important; margin-bottom: 14pt !important; }
.featured { background: none !important; padding-bottom: 0 !important; }
.dawn-band { display: none !important; }
.photo-band { background-image: none !important; background-color: #fff !important; min-height: 0 !important; padding: 0 0 14pt !important; }
.photo-band::before { display: none !important; }
.photo-band p { color: #111 !important; font-size: 16pt !important; }
.photo-band em { color: var(--ember) !important; }
.photo-band cite { color: #555 !important; }
.placeholder { color: #555 !important; background: none !important; border-color: #999 !important; }
.section-rule::before, .section-rule::after { display: none !important; }
.roster-lane, .roster-status { color: #111 !important; }
.roster-status.held,
.roster-status.priority { color: var(--ember) !important; }
.roster { border-top-color: #111 !important; }
.roster-row { border-bottom-color: #bbb !important; }
.btn, .btn-ghost, .hero-ink .btn {
background: #fff !important;
color: #111 !important;
border: 1pt solid #111 !important;
}
a { color: inherit !important; text-decoration: none !important; }
/* Keep units whole across page breaks */
h1, h2, h3, .eyebrow, .featured { break-after: avoid; }
.row, .roster-row, .card, blockquote, .partner { break-inside: avoid; }
}