/* Fonts are loaded via + in each
page's (parallel, non-chained) instead of a render-blocking @import here. */
/* ============================================================
Daily Bread Fellowship, shared stylesheet
Warm oat / wheat • slate blue + wheat gold • Georgia serif heads
WCAG AA contrast • mobile-first • no external dependencies
============================================================ */
/* ---------- Design tokens ---------- */
:root {
/* Backgrounds */
--cream: #F3F1E9; /* page background (oat) */
--wheat: #E8E5D5; /* alternating section background */
--wheat-deep: #DCD8C3; /* deeper band */
--card: #FCFBF4; /* card surface */
/* Ink */
--ink: #20262E; /* primary heading/text (slate ink) */
--ink-soft: #485058; /* secondary text */
--ink-muted: #656D74; /* tertiary / captions (AA on oat) */
/* Brand accents */
--green: #26415E; /* slate blue, primary actions */
--green-deep: #1B2F47; /* darker slate hover */
--green-tint: #E1E8EF; /* soft slate wash */
--gold: #89671C; /* wheat gold accent for text (AA on oat) */
--gold-bright: #C2922E; /* bright wheat gold for fills/decoration */
--gold-soft: #F1E6C7; /* pale gold wash */
/* Lines & shadows */
--line: #DEDAC8;
--shadow-sm: 0 1px 3px rgba(32,38,46,.07), 0 1px 2px rgba(32,38,46,.05);
--shadow-md: 0 6px 20px rgba(32,38,46,.09), 0 2px 6px rgba(32,38,46,.06);
--shadow-lg: 0 18px 50px rgba(32,38,46,.13), 0 6px 16px rgba(32,38,46,.07);
/* Shape & rhythm */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-pill: 999px;
--maxw: 1140px;
--gut: clamp(20px, 5vw, 48px);
/* Type */
--serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
line-height: 1.65;
font-size: 18px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-decoration-color: rgba(38,65,94,.35); text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
:focus-visible {
outline: 3px solid var(--green);
outline-offset: 2px;
border-radius: 4px;
}
/* on dark (oxblood) bands, use the pale gold so focus stays visible */
.section--green :focus-visible, .site-footer :focus-visible {
outline-color: var(--gold-soft);
}
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--serif);
color: var(--ink);
line-height: 1.12;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
p { text-wrap: pretty; }
.eyebrow {
font-family: var(--sans);
font-size: .82rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: .55rem;
}
.eyebrow::before {
content: "";
width: 26px; height: 2px;
background: var(--gold-bright);
border-radius: 2px;
}
.lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--ink-soft); }
/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--wheat { background: var(--wheat); }
.section--wheat-deep { background: var(--wheat-deep); }
.section--green { background: var(--green); color: #F4EFE2; }
.section--green h2, .section--green h3 { color: #FFFDF7; }
.section-head { max-width: 680px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head .lead { margin-top: 18px; }
.scroll-target { scroll-margin-top: 96px; }
/* ---------- Buttons ---------- */
.btn {
--btn-bg: var(--green);
--btn-fg: #FCFBF5;
display: inline-flex;
align-items: center;
gap: .6rem;
font-family: var(--sans);
font-size: 1.02rem;
font-weight: 600;
line-height: 1;
padding: 1rem 1.6rem;
border-radius: var(--r-pill);
background: var(--btn-bg);
color: var(--btn-fg);
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); background: var(--green-deep); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }
.btn--outline {
background: transparent;
color: var(--green);
border-color: rgba(38,65,94,.35);
box-shadow: none;
}
.btn--outline:hover { background: rgba(38,65,94,.06); border-color: var(--green); color: var(--green-deep); }
.btn--on-green { background: var(--gold-bright); color: #3A2A06; }
.btn--on-green:hover { background: #E6BC3C; color: #3A2A06; }
/* ---------- Cards ---------- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(26px, 3vw, 38px);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.icon-badge {
width: 58px; height: 58px;
border-radius: 16px;
display: grid; place-items: center;
background: var(--green-tint);
color: var(--green);
margin-bottom: 22px;
border: 1px solid rgba(38,65,94,.12);
}
.icon-badge svg { width: 30px; height: 30px; }
/* ---------- Header / nav ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(251,246,236,.86);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex; align-items: center; gap: 1rem;
height: 72px;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: var(--serif); font-size: 1.18rem; letter-spacing: -.01em; white-space: nowrap; }
.brand-text span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 3px; font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav-links a {
display: inline-block;
text-decoration: none;
color: var(--ink-soft);
font-weight: 500;
font-size: .96rem;
padding: .5rem .7rem;
border-radius: var(--r-pill);
white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: rgba(46,36,23,.05); }
.nav-links a[aria-current="page"] { color: var(--green); background: var(--green-tint); }
.nav-cta { margin-left: .4rem; }
.nav-toggle {
display: none;
background: transparent; border: 1px solid var(--line);
border-radius: 12px; width: 46px; height: 44px;
cursor: pointer; color: var(--ink);
align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }
@media (max-width: 1080px) {
.nav-toggle { display: inline-flex; }
.nav-links {
position: absolute; top: 72px; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: .2rem;
background: var(--cream);
border-bottom: 1px solid var(--line);
padding: 14px var(--gut) 22px;
box-shadow: var(--shadow-md);
display: none;
}
.nav-links.open { display: flex; }
.nav-links a { padding: .85rem .9rem; font-size: 1.05rem; }
.nav-cta { margin-left: 0; margin-top: .4rem; }
.nav-links .btn { width: 100%; justify-content: center; }
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--ink);
color: #D9CFBC;
padding-block: clamp(48px, 7vw, 80px) 32px;
}
.site-footer a { color: #EBDFC6; }
.site-footer .brand-text b { color: #FFFDF7; }
.site-footer .brand-text span { color: var(--gold-bright); }
.footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(2, 1fr);
gap: clamp(28px, 5vw, 64px);
padding-bottom: 38px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-grid h2 { color: #FFFDF7; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { text-decoration: none; color: #D9CFBC; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-about { color: #C3B89F; max-width: 34ch; margin-top: 16px; font-size: .98rem; }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: 12px 28px;
justify-content: space-between; align-items: center;
padding-top: 26px;
font-size: .85rem; color: #A99C82;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about-col { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
/* ---------- Forms ---------- */
.form-field { display: flex; flex-direction: column; gap: .5rem; }
.form-field > label { font-weight: 600; color: var(--ink); font-size: .96rem; }
.form-field .hint { font-size: .82rem; color: var(--ink-muted); font-weight: 400; }
.req { color: var(--gold); font-weight: 700; }
.input, .textarea {
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--card);
border: 1.5px solid var(--line);
border-radius: var(--r-sm);
padding: .85rem 1rem;
width: 100%;
transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: #A89B82; }
.input:focus, .textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(38,65,94,.14);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.radio-group { display: flex; flex-direction: column; gap: .6rem; }
.radio-row {
display: flex; align-items: center; gap: .7rem;
border: 1.5px solid var(--line);
border-radius: var(--r-sm);
padding: .8rem 1rem;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.radio-row:hover { border-color: #CDBF9F; background: var(--gold-soft); }
.radio-row input { accent-color: var(--green); width: 1.15rem; height: 1.15rem; flex: none; }
.radio-row:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.radio-row span { font-size: .98rem; }
/* visually-hidden honeypot */
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Utilities ---------- */
.grid { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--green); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0; z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }
/* Reveal-on-scroll (progressive enhancement).
Content is ALWAYS fully opaque, the entrance only animates transform,
so even if animations are paused/blocked the text stays readable. */
@media (prefers-reduced-motion: no-preference) {
.reveal.in { animation: db-reveal .65s cubic-bezier(.22,.61,.36,1); }
}
@keyframes db-reveal {
from { transform: translateY(22px); }
to { transform: none; }
}
/* ---------- Long-form prose (privacy, etc.) ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.prose a { font-weight: 600; }
.prose .muted { color: var(--ink-muted); font-size: .92rem; }
/* ---------- FAQ (native disclosure, no JS) ---------- */
.faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; font-size: 1.6rem; line-height: 1; color: var(--gold); font-weight: 400; flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 24px 22px; color: var(--ink-soft); }
.faq details > div p + p { margin-top: .8rem; }
/* ---------- Newsletter band ---------- */
.newsletter-card { max-width: 720px; margin-inline: auto; text-align: center; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.newsletter-form input[type="email"] { flex: 1 1 280px; max-width: 360px; }
.newsletter-card .form-status { max-width: 480px; margin: 18px auto 0; padding: 1rem 1.2rem; border-radius: var(--r-sm); font-weight: 600; display: none; }
.newsletter-card .form-status.ok { display: block; background: var(--green-tint); color: var(--green-deep); border: 1px solid rgba(38,65,94,.2); }
.newsletter-card .form-status.err { display: block; background: #FbeBe8; color: #9A2E24; border: 1px solid rgba(154,46,36,.25); }
@media (max-width: 480px) { .newsletter-form .btn { width: 100%; justify-content: center; } }
/* ============================================================
INK & PAPER SKIN · loaded last, overrides the base theme
Two inks on one paper · Cinzel / EB Garamond · engraving, not color
"One point, called by a thousand names" — now in one color.
============================================================ */
:root {
/* paper & ink (the whole palette) */
--cream:#FAFAF7; --wheat:#F3F3EF; --wheat-deep:#EBEBE6; --card:#FFFFFF;
--ink:#0A0A0A; --ink-soft:#4A4A4A; --ink-muted:#6E6E6E;
/* former "green" (primary/accent) -> pure ink; tint -> soft gray */
--green:#0A0A0A; --green-deep:#000000; --green-tint:#ECECE8;
/* former "gold" (marks/eyebrow/decor) -> ink/black; soft -> light gray */
--gold:#333333; --gold-bright:#000000; --gold-soft:#F0F0EB;
/* new ink-and-paper tokens */
--paper:#FAFAF7; --black:#000000; --band:#0A0A0A;
--line:#D8D8D8; --hair:#111111; --err:#9A2E24;
--r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:7px;
--display:'Cinzel', Georgia, 'Times New Roman', serif;
--serif:'EB Garamond', Georgia, 'Times New Roman', serif;
--sans:'Cinzel', Georgia, serif;
}
/* paper field — EB Garamond 500 (400 reads gray on white) */
body {
font-family: var(--serif);
font-weight: 500;
background-color: var(--paper);
background-image: none;
color: var(--ink);
font-size: 19px;
}
/* inscriptional headings, pure ink */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: .02em; color: var(--ink); }
/* labels, nav, footer headers -> Cinzel small-caps inscription */
.eyebrow, .nav-links a, .footer-grid h2 { font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.eyebrow { color: var(--ink-soft); }
.eyebrow::before { background: var(--black); }
.brand-text b { font-family: var(--display); font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.brand-text span { color: var(--ink-muted); }
.brand .mark { color: var(--black) !important; }
/* engraved (filled-ink) buttons */
.btn { --btn-bg: var(--black); --btn-fg:#FFFFFF; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; font-weight: 600;
border: 1.5px solid var(--black); border-radius: 4px; box-shadow: none; }
.btn:hover { background:#000; color:#fff; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* inverted button — for use on the black punctuation bands */
.btn--on-green { background:#FFFFFF; color:#000000; border-color:#FFFFFF; }
.btn--on-green:hover { background:#E7E7E2; color:#000; }
.nav-links a.btn, a.btn:not(.btn--on-green):not(.btn--outline) { color:#FFFFFF; }
.nav-links a.btn:hover { color:#FFFFFF; background:#000; }
/* hairline-framed cards, no gilt shadow */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.card--lift:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.10); }
/* header: paper with a hairline rule */
.site-header { background: rgba(250,250,247,.88); border-bottom: 1px solid var(--line); }
/* nav inscriptions */
.nav-links a { letter-spacing: .1em; font-size: .78rem; padding: .5rem .55rem; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); background: var(--green-tint); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--green-tint); }
.nav .lang-btn { flex: none; }
/* icon badges -> ink outline on gray */
.icon-badge { background: var(--green-tint); color: var(--ink); border: 1px solid var(--line); }
/* links: ink with a hairline underline */
a { color: var(--ink); text-decoration-color: rgba(0,0,0,.30); }
a:hover { color:#000; }
/* focus ring -> ink (paper on the dark bands) */
:focus-visible { outline-color: var(--ink); }
.section--green :focus-visible, .site-footer :focus-visible { outline-color:#FFFFFF; }
/* black "punctuation" bands (creed, stats) */
.section--green { background: var(--band); color:#E6E6E1; }
.section--green h2, .section--green h3 { color:#FFFFFF; }
/* the Dot goes white on the black bands (it is black on paper) */
.section--green .dot-mark { color:#FFFFFF; }
.section--green .eyebrow { color:#B9B9B9; }
.section--green .eyebrow::before { background:#B9B9B9; }
/* footer = ink band */
.site-footer { background:#0A0A0A; color:#C9C9C9; }
.site-footer a, .footer-grid a { color:#DADADA; }
.footer-grid a:hover { color:#FFFFFF; }
.footer-grid h2 { color:#FFFFFF; }
.site-footer .brand-text b { color:#FFFFFF; }
.site-footer .brand-text span { color:#B0B0B0; }
.footer-about { color:#A9A9A9; }
.footer-bottom { color:#8C8C8C; }
/* forms: ink focus, red only for errors */
.req { color: var(--err); }
.input:focus, .textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
.radio-row:hover { border-color:#BDBDBD; background: var(--green-tint); }
.radio-row input { accent-color:#000; }
.radio-row:has(input:checked) { border-color:#000; background: var(--green-tint); }
.form-status.ok, .newsletter-card .form-status.ok { background: var(--green-tint); color:#0A0A0A; border:1px solid var(--line); }
/* skip link */
.skip-link { background:#000; color:#fff; }
/* illuminated drop cap -> ink */
.dropcap::first-letter {
font-family: var(--display);
float: left; font-size: 3.5em; line-height: .72; padding: .06em .14em 0 0; color: var(--black);
}
/* engraved ornamental divider (span holds a ❦) */
.ornament { display: flex; align-items: center; gap: 1rem; justify-content: center; color: var(--ink-muted); margin: clamp(28px,4vw,44px) auto; max-width: 360px; }
.ornament::before, .ornament::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line)); }
.ornament span { font-size: 1.3rem; line-height: 1; }
/* language toggle -> ink outline */
.lang-btn { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600;
background: transparent; color: var(--ink); border: 1.5px solid var(--hair); border-radius: 4px;
padding: .5rem .7rem; cursor: pointer; white-space: nowrap; line-height: 1; }
.lang-btn:hover { background: var(--ink); color: var(--paper); }
/* ============================================================
PAGE STYLES (moved from index.html inline block) · loaded last
============================================================ */
/* Hero */
.hero { position: relative; background: radial-gradient(120% 90% at 85% -10%, var(--gold-soft) 0%, rgba(243,230,196,0) 55%), linear-gradient(180deg, var(--cream) 0%, var(--wheat) 100%); padding-block: clamp(40px, 7vw, 84px) clamp(70px, 9vw, 120px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy h1 { margin: .35em 0 .5em; }
.hero-copy h1 .hl { color: var(--green); position: relative; z-index: 0; }
.hero-copy h1 .hl::after { content:""; position:absolute; left:0; right:0; bottom:.06em; height:.16em; background: var(--gold-bright); opacity:.55; border-radius:3px; z-index:-1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-figure { margin: 0; position: relative; }
.hero-img { width: 100%; aspect-ratio: 5/6; object-fit: cover; object-position: center; border: 3px solid var(--gold-bright); border-radius: 4px; box-shadow: 0 0 0 1px var(--green-deep), 0 0 0 7px rgba(123,90,30,.12), var(--shadow-md); display: block; }
.hero-quote { position: absolute; left: -8px; bottom: -26px; right: 18%; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold-bright); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow-md); font-family: var(--serif); font-size: 1.05rem; color: var(--ink); line-height: 1.4; }
.hero-quote .q-mark { font-size: 2.4rem; color: var(--gold-bright); line-height: 0; vertical-align: -.35em; margin-right: .1em; }
.hero-quote em { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: .8rem; letter-spacing: .04em; color: var(--ink-muted); }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-figure { max-width: 440px; margin-top: 18px; } .hero-quote { right: 8%; } }
@media (min-width: 561px) and (max-width: 1000px) { .hero-quote { right: 6%; bottom: -18px; } }
@media (max-width: 560px) { .hero-quote { position: static; margin: 14px 0 0; } }
/* Story + stats */
.story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,64px); align-items: center; }
.stats { gap: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); text-align: center; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--green); line-height: 1; }
.stat span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 820px) { .story-grid { grid-template-columns: 1fr; } }
/* The Dot / creed */
.dot-mark { width: clamp(80px,12vw,112px); height: clamp(80px,12vw,112px); color: var(--gold-bright); margin: 0 auto clamp(20px,3vw,32px); display: block; }
.creed { font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.5; color: #FFFDF7; letter-spacing: -.01em; text-wrap: balance; }
.creed + .creed { margin-top: 1rem; }
.creed--accent { color: #C9C9C9; font-style: italic; margin-top: 1.4rem; }
/* Tenets */
.tenets { list-style: none; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 8px; }
.tenet { display: flex; gap: 20px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-md); transition: background .2s ease; }
.tenet:hover { background: var(--gold-soft); }
.tenet-dot { width: 34px; height: 34px; color: var(--gold); flex: none; margin-top: 5px; }
.tenet h3 { margin-bottom: 4px; }
.tenet p { color: var(--ink-soft); }
/* Steps */
.steps { list-style: none; }
.steps .card { position: relative; }
.step-num { font-family: var(--serif); font-size: 2.4rem; color: var(--gold-bright); position: absolute; top: 22px; right: 26px; opacity: .5; font-weight: 700; }
/* Get food */
.getfood-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.welcome-list { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.welcome-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: 1.05rem; color: var(--ink-soft); }
.welcome-list svg { width: 1.3em; height: 1.3em; color: var(--green); flex: none; margin-top: .15em; }
.welcome-list strong { color: var(--ink); }
.distro-card { border-top: 4px solid var(--gold-bright); }
.distro-card h3 { margin-bottom: 8px; }
.distro-list { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; }
.distro-list dt { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: 6px; }
.distro-list dd { margin-left: 2.4rem; color: var(--ink-soft); }
.distro-list dd a { font-weight: 650; }
.distro-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--green-tint); color: var(--green); display: grid; place-items: center; flex: none; }
.distro-ic svg { width: 17px; height: 17px; }
.distro-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-muted); }
@media (max-width: 820px) { .getfood-grid { grid-template-columns: 1fr; } }
/* Involve */
.involve-card { display: flex; flex-direction: column; }
.involve-card .textlink { margin-top: auto; }
.textlink { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; text-decoration: none; color: var(--green); }
.textlink svg { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.textlink:hover svg { transform: translateX(4px); }
.legal-note { display: flex; gap: .6rem; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }
.legal-note strong { color: var(--ink-soft); }
.legal-ic { width: 1.4em; height: 1.4em; color: var(--green); flex: none; margin-top: .1em; }
/* Give / tiers */
.tiers { align-items: stretch; margin-top: clamp(28px,4vw,44px); }
.tier { display: flex; flex-direction: column; position: relative; }
.tier-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.tier-price { margin: 6px 0 4px; color: var(--ink-muted); font-size: .95rem; }
.tier-price .amt { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--green); }
.tier-line { color: var(--ink-soft); font-size: .95rem; min-height: 2.6em; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tier .btn { width: 100%; justify-content: center; margin-top: auto; }
.tier--featured { border-color: var(--gold-bright); box-shadow: var(--shadow-md); }
.tier-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--black); color: #FFFFFF; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .8rem; border-radius: var(--r-pill); white-space: nowrap; }
.give-fineprint { max-width: 640px; margin: clamp(28px,4vw,38px) auto 0; text-align: center; font-size: .92rem; color: #C9C9C9; }
.give-fineprint a { color: var(--gold-bright); }
.give-fineprint strong { color: #FFFDF7; }
/* Volunteer form */
.form-card { padding: clamp(26px,3.4vw,40px); }
.form-intro { color: var(--ink-muted); font-size: .9rem; margin-bottom: 24px; }
.fieldset { border: none; padding: 0; margin: 0 0 30px; }
.fieldset legend { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 700; padding: 0 0 6px; margin-bottom: 18px; width: 100%; border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.06rem; }
.form-foot { margin-top: 20px; font-size: .85rem; color: var(--ink-muted); }
.input.invalid, .textarea.invalid { border-color: #B23A2E; box-shadow: 0 0 0 3px rgba(178,58,46,.12); }
.form-status { margin-top: 18px; padding: 1rem 1.2rem; border-radius: var(--r-sm); font-weight: 600; display: none; }
.form-status.ok { display: block; background: var(--green-tint); color: var(--green-deep); border: 1px solid rgba(38,65,94,.2); }
.form-status.err { display: block; background: #FbeBe8; color: #9A2E24; border: 1px solid rgba(154,46,36,.25); }
/* ---------- Phase 1: hero Dot (static SVG; WebGL scene mounts here in Phase 2) ---------- */
.hero-figure { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vw, 28px); }
.hero-dot { width: min(72%, 360px); aspect-ratio: 1; color: var(--black); display: grid; place-items: center; }
.hero-dot-svg { width: 100%; height: 100%; overflow: visible; }
.hero-dot-svg circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
.hero-dot-svg circle { animation: dot-breathe 4.6s ease-in-out infinite; }
}
@keyframes dot-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.055); opacity: .93; } }
/* the prayer sits below the Dot as an engraved card, not an overlay */
.hero-quote { position: static; inset: auto; margin: 0; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--black); }
/* ============================================================
TERMINAL / HACKER SKIN · appended last, wins the cascade
Ghost in the Shell: near-black field, phosphor-green mono, one signal.
Chakra Petch (display) + JetBrains Mono (everything).
============================================================ */
:root {
/* black-and-white void field */
--paper:#000000; --cream:#000000; --wheat:#050506; --wheat-deep:#08090A; --card:#0C0C0E;
/* cold ash text (brightened) */
--ink:#ECECEC; --ink-soft:#A6A6A6; --ink-muted:#707070;
/* one signal, now bone-white (former green + gold accents all map here) */
--green:#F2F2F0; --green-deep:#FFFFFF; --green-tint:#141416;
--gold:#F2F2F0; --gold-bright:#FFFFFF; --gold-soft:#141416;
--black:#FFFFFF; --band:#000000;
--line:#1E1E20; --hair:#2C2C2E; --acc:#F2F2F0; --err:#C6403C;
/* mono + cyber type */
--display:'Chakra Petch','JetBrains Mono',ui-monospace,monospace;
--serif:'JetBrains Mono',ui-monospace,'Courier New',monospace;
--sans:'JetBrains Mono',ui-monospace,monospace;
}
body { font-family: var(--serif); font-weight: 400; background-color: var(--paper); color: var(--ink); }
::selection { background: rgba(255,255,255,.28); color:#FFFFFF; }
/* headings: Chakra Petch, uppercase HUD */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; letter-spacing:.045em; text-transform: uppercase; color: var(--ink); }
h1 { letter-spacing:.06em; font-weight:700; }
/* labels + nav: wide mono */
.eyebrow, .nav-links a, .footer-grid h2 { font-family: var(--sans); letter-spacing:.2em; font-weight:500; }
.eyebrow { color: var(--acc); }
.eyebrow::before { background: var(--acc); }
.brand-text b { font-family: var(--display); color: var(--ink); letter-spacing:.05em; }
.brand-text span { color: var(--ink-muted); }
.brand .mark { color: var(--acc) !important; }
.site-header { background: rgba(10,14,12,.82); border-bottom: 1px solid var(--line); }
/* links: phosphor green */
a { color: var(--acc); text-decoration-color: rgba(255,255,255,.4); }
a:hover { color:#FFFFFF; }
:focus-visible { outline-color: var(--acc); }
/* buttons: primary = filled green / black; outline = green wireframe */
.btn { --btn-bg: var(--acc); --btn-fg:#000000; font-family: var(--sans); letter-spacing:.14em; border:1.5px solid var(--acc); border-radius:2px; box-shadow:none; }
.btn:hover { background:#FFFFFF; color:#000000; box-shadow:0 0 18px rgba(255,255,255,.35); }
.btn--outline { background:transparent; color:var(--acc); border-color:var(--acc); }
.btn--outline:hover { background:rgba(255,255,255,.12); color:#FFFFFF; border-color:#FFFFFF; }
.nav-links a.btn, a.btn:not(.btn--on-green):not(.btn--outline) { color:#000000; }
.nav-links a.btn:hover { color:#000000; }
.btn--on-green { background:#000000; color:var(--acc); border-color:var(--acc); }
.btn--on-green:hover { background:#141414; color:#FFFFFF; }
/* cards + badges: dark panels */
.card { background: var(--card); border:1px solid var(--line); border-radius:3px; box-shadow:none; }
.card--lift:hover { transform: translateY(-3px); box-shadow:0 0 24px rgba(255,255,255,.12); }
.icon-badge { background: var(--green-tint); color: var(--acc); border:1px solid var(--line); border-radius:4px; }
/* nav dim -> bright */
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--acc); background: var(--green-tint); }
@media (max-width:1080px){ .nav-links { background: var(--paper); border-bottom:1px solid var(--line); } }
/* black "punctuation" bands -> darkest panel with green rules */
.section--green { background: var(--band); color: var(--ink); border-block:1px solid var(--line); }
.section--green h2, .section--green h3 { color:#FFFFFF; }
.section--green .dot-mark { color: var(--acc); }
.section--green .eyebrow { color: var(--acc); }
.section--green .eyebrow::before { background: var(--acc); }
/* footer: deepest */
.site-footer { background:#000000; color:#9A9A9A; border-top:1px solid var(--line); }
.site-footer a, .footer-grid a { color:#BEBEBE; }
.footer-grid a:hover, .footer-grid h2 { color: var(--acc); }
.site-footer .brand-text b { color:#FFFFFF; }
.site-footer .brand-text span { color:#6A6A6A; }
.footer-about { color:#8A8A8A; }
.footer-bottom { color:#6E6E6E; }
/* forms: terminal inputs */
.input, .textarea { background:#0B0B0C; color:var(--ink); border-color:var(--line); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.input::placeholder, .textarea::placeholder { color:#5C5C5C; }
.input:focus, .textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(255,255,255,.18); }
.radio-row { border-color:var(--line); }
.radio-row:hover, .radio-row:has(input:checked) { border-color:var(--acc); background:var(--green-tint); }
.radio-row input { accent-color:var(--acc); }
.req { color:var(--err); }
.form-status.ok, .newsletter-card .form-status.ok { background:var(--green-tint); color:var(--acc); border:1px solid var(--line); }
.lang-btn { color:var(--acc); border:1.5px solid var(--acc); border-radius:2px; }
.lang-btn:hover { background:rgba(255,255,255,.12); color:#FFFFFF; }
.skip-link { background:var(--acc); color:#000000; }
/* creed + hero on the dark field */
.creed { color:#FFFFFF; }
.creed--accent { color: var(--acc); }
.hero { background: radial-gradient(58% 55% at 76% 14%, rgba(255,255,255,.10), rgba(10,14,12,0) 62%), var(--paper); }
.hero-copy h1 .hl { color: var(--acc); }
.hero-copy h1 .hl::after { background: var(--acc); opacity:.45; }
.hero-quote { background: var(--card); border:1px solid var(--line); border-left:3px solid var(--acc); }
.hero-dot { color: var(--acc); filter: drop-shadow(0 0 30px rgba(255,255,255,.5)); }
/* ============================================================
B&W CREEPY layer · animated static, breathing vignette,
flicker, cold bloom
============================================================ */
html { background:#000; }
/* animated analog film-grain / TV static (oversized so it can drift
without ever revealing an edge) */
body::after {
content:""; position:fixed; inset:-60%; z-index:9998; pointer-events:none; opacity:.09;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* vignette: the void closes in on the edges, and slowly breathes */
body::before {
content:""; position:fixed; inset:0; z-index:9997; pointer-events:none;
background: radial-gradient(122% 92% at 50% 42%, transparent 46%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.92) 100%);
}
/* base glow on the creed orb (also for reduced-motion) */
.section--green .dot-mark { filter: drop-shadow(0 0 60px rgba(255,255,255,.4)); }
@media (prefers-reduced-motion: no-preference) {
body::after { animation: static-shift .55s steps(4) infinite; }
body::before { animation: void-breathe 12s ease-in-out infinite; }
/* the Dot is alive: a slow, deep breath — glow swells with it. no flicker. */
.hero-dot-svg circle { animation: none; }
.hero-dot { animation: dot-live 5.6s ease-in-out infinite; }
.section--green .dot-mark { animation: dot-live 8s ease-in-out infinite; }
}
@keyframes static-shift {
0%{transform:translate(0,0)} 25%{transform:translate(-5%,3%)}
50%{transform:translate(4%,-4%)} 75%{transform:translate(-3%,5%)} 100%{transform:translate(0,0)}
}
@keyframes void-breathe { 0%,100%{opacity:.82} 50%{opacity:1} }
@keyframes dot-live {
0%,100% { transform: scale(.92); filter: drop-shadow(0 0 34px rgba(255,255,255,.28)); }
50% { transform: scale(1.05); filter: drop-shadow(0 0 120px rgba(255,255,255,.6)); }
}
/* cold ghostly bloom on display type + creed (brighter) */
.hero-copy h1, .creed { text-shadow: 0 0 30px rgba(255,255,255,.20), 0 0 62px rgba(255,255,255,.07); }
/* ============================================================
TOP HEADER — minimal: just the brand, no menu
============================================================ */
.site-header { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); }
.site-header .nav { justify-content: center; }
.brand { margin-right: 0; }
/* ============================================================
MATRIX RAIN backdrop · white-on-black code running behind
everything (canvas injected by site.js). Content sits above it;
section fills go transparent so the rain shows through.
============================================================ */
#matrix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* cursor tubes: fixed viewport layer so the canvas can't size itself to the whole document */
/* background glow-wave: sits above the cursor tubes, still behind all content */
/* The wave belongs to the opening screen only. It was position:fixed, which
pinned it to the viewport so it followed you down the page and washed out
the creed. Anchored to the top of the DOCUMENT instead, one viewport tall,
so it scrolls away with the Dot. (#cursorLayer stays fixed - the mouse
trail does need to follow the pointer everywhere.) */
#wave-canvas {
position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
z-index: 0; pointer-events: none; display: block;
/* the canvas used to stop dead at 100vh, leaving a visible seam where
its glow met plain black. Fade the bottom third out so it dissolves. */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
}
#cursorLayer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#cursorLayer canvas { display: block; width: 100%; height: 100%; }
main, .site-footer { position: relative; z-index: 1; }
main > .section, main > section { background-color: transparent; }
/* a faint scrim directly behind reading blocks keeps text crisp over the rain */
.creed, .prose, .guide, .faq, .tenets, .tiers, .form-card { position: relative; }
/* ============================================================
FOOTER · neutral black & white (no green), and much smaller
============================================================ */
.site-footer { background:#000; color:#9A9A9A; padding-block: 16px 12px; border-top:1px solid var(--line); }
.site-footer a, .footer-grid a { color:#BEBEBE; }
.footer-grid a:hover { color:#FFFFFF; }
.footer-grid h2, .footer-grid h4 { color:#FFFFFF; font-size:.66rem; margin-bottom:7px; }
.site-footer .brand-text b { color:#FFFFFF; font-size:.85rem; }
.site-footer .brand-text span { color:#6A6A6A; font-size:.58rem; }
.footer-about { display:none; }
.footer-bottom { color:#6E6E6E; font-size:.72rem; padding-top:11px; }
.footer-grid { gap: clamp(14px,2.4vw,30px); padding-bottom:12px; }
.footer-grid ul { gap:4px; }
.footer-grid a, .footer-grid li { font-size:.78rem; }
.site-footer .brand .mark { width:22px; height:22px; }
.footer-about-col .brand { gap:.45rem; }
/* ---------- The Dot: enormous (the opening) ---------- */
#believe .dot-mark, .section--green .dot-mark {
width: clamp(340px, 54vw, 700px);
height: clamp(340px, 54vw, 700px);
margin-bottom: clamp(28px, 4vw, 48px);
/* pure white, to match the glow-wave (which clamps to #FFF) and the
favicon/OG mark. --acc is #F2F2F0, which read as a different white. */
color: #FFFFFF;
}
/* give the opening section room for the giant Dot */
#believe .wrap { max-width: 860px !important; }
/* ---------- Congregation: join form + public name list ---------- */
.join-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.join-form .input { flex: 1 1 280px; max-width: 340px; }
.cong-count { margin-top: 32px; font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.cong-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 16px auto 0; padding: 0; max-width: 720px; }
.cong-list li { font-family: var(--serif); font-size: .95rem; color: var(--ink-soft); }
.cong-list li.is-new { color: #FFFFFF; text-shadow: 0 0 20px rgba(255,255,255,.55); }
@media (max-width: 480px) { .join-form .btn { width: 100%; justify-content: center; } }
/* ---------- Opening title (sits above the Dot; fades out on scroll) ---------- */
.opening-title {
font-family: var(--display); text-transform: uppercase; letter-spacing: .22em;
font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.7rem); color: var(--ink);
text-align: center; line-height: 1.35; margin: 0 auto clamp(26px, 5vw, 56px);
text-shadow: 0 0 30px rgba(255,255,255,.14); will-change: opacity;
}
/* ---------- Giving tiers ---------- */
/* The badge sat on var(--black), which the B&W skin remaps to #FFFFFF,
i.e. white text on a white pill. Make it a white pill with black ink. */
.tier-flag { background:#FFFFFF; color:#000000; }
/* 8 tiers wrap to two rows; give the featured badge room so it never
collides with the card above it. */
.tiers { row-gap: clamp(26px, 3vw, 38px); }
/* ---------- Ambient sound toggle ---------- */
/* A dot that breathes while the sound plays, to echo the big Dot. */
.sound-toggle {
position: fixed; right: 18px; bottom: 18px; z-index: 6;
display: inline-flex; align-items: center; gap: .55rem;
padding: 8px 14px; border-radius: 999px; cursor: pointer;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 1px solid #23232A;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
color: #707070;
transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.sound-toggle:hover { color: #ECECEC; border-color: #3A3A42; background: rgba(0,0,0,.72); }
.sound-toggle .sdot {
width: 8px; height: 8px; border-radius: 50%;
background: transparent; border: 1px solid #707070;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sound-toggle[aria-pressed="true"] { color: #FFFFFF; border-color: #4A4A52; }
.sound-toggle[aria-pressed="true"] .sdot {
background: #FFFFFF; border-color: #FFFFFF;
box-shadow: 0 0 10px rgba(255,255,255,.85);
}
@media (prefers-reduced-motion: no-preference) {
.sound-toggle[aria-pressed="true"] .sdot { animation: sound-pulse 3.2s ease-in-out infinite; }
}
@keyframes sound-pulse {
0%, 100% { opacity: .55; transform: scale(.9); }
50% { opacity: 1; transform: scale(1.18); }
}
@media (max-width: 620px) {
.sound-toggle { right: 12px; bottom: 12px; padding: 7px 12px; font-size: .58rem; }
}
/* "The Dotrin presents" — a title card above the wordmark. Deliberately
smaller and dimmer than .opening-title so it frames the name without
competing with it. Fades on scroll together with the title. */
.presents {
font-family: var(--display); text-transform: uppercase; letter-spacing: .38em;
font-weight: 500; font-size: clamp(.6rem, 1.1vw, .78rem);
color: rgba(255,255,255,.58); text-align: center; line-height: 1.4;
margin: 0 auto clamp(12px, 1.6vw, 18px); text-indent: .38em;
text-shadow: 0 0 24px rgba(255,255,255,.18); will-change: opacity;
}
/* ---------- Background birds (Vanta) ---------- */
/* Anchored to the top of the DOCUMENT exactly like #wave-canvas, so the
flock belongs to the opening screen and scrolls away rather than
following the reader over the creed and the forms. Sits BEFORE the wave
in the DOM, so the wave's additive glow composites over the birds. */
#birds-canvas {
position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
z-index: 0; pointer-events: none; overflow: hidden;
}
#birds-canvas { display: block; }