/* =====================================================================
Pilgrimage Media
Plain CSS. Every value here was measured off the live site with
getComputedStyle at 1920/1440/992/768/390 — see the Obsidian note
"Pilgrimage Media - Brand System" and docs/research/ in this repo.
Safe to hand-edit; there is no build step.
===================================================================== */
/* fonts.css is NOT @import-ed here. An @import cannot begin downloading until
this file has arrived and been parsed, so it serialises the font CSS — and
therefore the fonts themselves — one round trip behind the stylesheet. Every
page links both sheets directly in instead, so they fetch in parallel.
If you add a page, link /css/fonts.css or it will render in Times. */
/* ---------------------------------------------------------------------
Tokens
--------------------------------------------------------------------- */
:root {
--dark: #393939; /* rgb(57,57,57) */
--olive: #696d5e; /* rgb(105,109,94) */
--white: #ffffff;
--black: #000000;
--highlight: #c4aa84; /* hover/highlight accent — Mike's pick, 2026-07-23 */
/* Squarespace Fluid Engine geometry. Gap is a flat 11px at every
viewport; the outer gutter column is (gutter - gap) wide so that
gutter-col + gap lands exactly on the page gutter. */
--fe-gap: 11px;
--fe-gutter: 6vw; /* < 768px */
--fe-row: 24px; /* < 768px, Squarespace's mobile row unit */
--fe-pad-y: 9px; /* .content-wrapper inset, < 768px */
/* Diagonal divider depth: a flat 6vw at every viewport
(23.4px @390 · 46.08 @768 · 59.52 @992 · 86.4 @1440 · 115.2 @1920). */
--divider: 6vw;
/* Fluid type. Between 768 and 1440 every heading level is
`16px + N·vw` — the 16px intercept is identical at every level,
which is why these are calc() and not clamp(). Below 768 the scale
is fixed, and is LARGER than at 768. */
--fs-h1: 48.384px;
--fs-h2: 35.4px;
--fs-h3: 29px;
--fs-em: 22.5px;
--fs-wordmark: 21.4px;
/* Hero top padding = the absolutely-positioned header's own height.
The logo swap made the wordmark taller than the single text line
this was originally measured against — padded out by the delta
(logo height 5.8x minus the ~1.2x line-height it replaced) so hero
content still clears the header at every breakpoint. */
--header-h: calc(37px + 12.011vw + var(--fs-wordmark) * 4.6);
}
@media (min-width: 768px) {
:root {
--fe-gutter: 4vw;
--fe-row: 1.979vw; /* 28.5px @1440 */
--fe-pad-y: 1vw; /* 14.4px @1440 */
--fs-h1: calc(16px + 3.601vw);
--fs-h2: calc(16px + 2.158vw);
--fs-h3: calc(16px + 1.429vw);
--fs-em: calc(16px + 0.729vw);
--fs-wordmark: calc(16px + 0.595vw);
}
}
/* 800px is where the nav un-collapses and the header padding changes.
Recalibrated 2026-07-23: the old formula's 6.11vw term grew faster than
the header itself (header padding is only 2.8vw — 1.4vw top + bottom),
so the dead space below the header widened on large screens (~30px gap
at 1440, ~63px at 2560). This version tracks the header's actual build
— 2.8vw padding + logo height (fs-wordmark * 5.8) + nav row — plus a
flat 6px breathing gap that no longer grows with viewport width. */
@media (min-width: 800px) {
:root { --header-h: calc(40px + 2.8vw + var(--fs-wordmark) * 5.8); }
}
@media (min-width: 1440px) {
:root {
--fs-h1: calc(39.6px + 1.958vw);
--fs-h2: calc(30.3px + 1.167vw);
--fs-h3: calc(25.3px + 0.792vw);
--fs-em: calc(21px + 0.375vw);
--fs-wordmark: calc(19.8px + 0.333vw);
}
}
/* ---------------------------------------------------------------------
Base
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Smooth scrolling only for visitors who haven't asked to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--dark);
color: var(--white);
/* Nunito — the reading voice: body copy, paragraphs, form fields.
Nav/labels/buttons override to Lexend below; headings override to
Gelasio. */
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: "Gelasio", serif;
font-weight: 400;
margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: 1.056; }
h2 { font-size: var(--fs-h2); line-height: 1.114; }
h3 { font-size: var(--fs-h3); line-height: 1.143; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; }
/* ---------------------------------------------------------------------
Fluid Engine grid
26 columns at >=768px (2 gutters + 24 content), 10 below (2 + 8).
Rows are minmax(_, auto) so a row grows when text wraps to more lines
than the reference viewport did — fixed heights collide at in-between
widths. Row COUNT is set per section: the live site declares it
explicitly and includes trailing empty rows that pad section height.
--------------------------------------------------------------------- */
.fe-grid {
display: grid;
position: relative;
gap: var(--fe-gap);
grid-template-columns:
calc(var(--fe-gutter) - var(--fe-gap))
repeat(8, 1fr)
calc(var(--fe-gutter) - var(--fe-gap));
grid-template-rows: repeat(var(--fe-rows, 1), minmax(var(--fe-row), auto));
grid-auto-rows: minmax(var(--fe-row), auto);
}
@media (min-width: 768px) {
.fe-grid {
grid-template-columns:
calc(var(--fe-gutter) - var(--fe-gap))
repeat(24, 1fr)
calc(var(--fe-gutter) - var(--fe-gap));
}
}
.fe-grid > * { min-width: 0; }
/* Squarespace's .content-wrapper vertical inset. Present on hero,
mission, latest-posts and footer — NOT on the two full-bleed-photo
sections (portfolio, services). */
.fe-pad { padding-top: var(--fe-pad-y); padding-bottom: var(--fe-pad-y); }
/* ---------------------------------------------------------------------
Sections + diagonal dividers
The real mechanism: each section holds an absolutely-positioned
background layer, inset -6vw at the top so it BLEEDS UPWARD into the
previous section, clipped at its own bottom by a 6vw diagonal.
Sections then carry DESCENDING z-index (6,5,4,3,auto) so an earlier
section paints OVER the next — the triangle its clip removes is what
reveals the next section's bled-up background. Without the descending
z-index every seam renders flat.
--------------------------------------------------------------------- */
.section { position: relative; padding-bottom: var(--divider); }
.section--no-pad { padding-bottom: 0; }
.section-border {
position: absolute;
inset: calc(-1 * var(--divider)) 0 0;
z-index: 0;
overflow: hidden;
}
/* The hero is first in the document, so it has nothing to bleed into. */
.section-border--flush { inset: 0; }
.section-border > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Inlined (not ![]()
) so it always renders as real vector paths, even
inside this absolutely-positioned, clip-path'd layer — some browsers
rasterize an external SVG referenced via ![]()
to a low-res bitmap once
it sits behind a clip-path, which looked pixelated at hero size.
preserveAspectRatio="xMidYMid slice" is the SVG-native equivalent of
object-fit: cover. */
.hero__topo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Bottom edge drops left→right. */
.divider-down { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--divider))); }
/* Bottom edge rises left→right. */
.divider-up { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--divider)), 0 100%); }
.section-content { position: relative; z-index: 1; }
.bg-dark { background: var(--dark); }
.bg-olive { background: var(--olive); }
.bg-white { background: var(--white); }
.on-dark { color: var(--white); }
.on-light { color: var(--black); }
/* Squarespace's 1px rule block. Colour comes from currentColor so the
same class is white in Portfolio and black in Services. */
.rule { height: 1px; border: 0; margin: 8px 0; background: currentColor; }
/* ---------------------------------------------------------------------
Buttons
Size comes from the grid area, NOT a fixed height: the same button is
212x68 in Portfolio and 323x68 in Latest Posts at 1440, and 59px tall
at 390 — in each case exactly the span of its area.
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 34.736px;
font-family: "Lexend", sans-serif;
font-size: 16px;
font-weight: 500;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
/* Outline, uppercase, 0.1em tracking — the Portfolio CTA. */
.btn-outline {
border: 1px solid var(--white);
background: transparent;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.1em;
transition: background-color 0.1s linear, color 0.1s linear;
}
.btn-outline:hover { background: var(--white); color: var(--black); }
/* Solid olive, mixed case, NORMAL tracking — Services + "More posts". */
.btn-solid {
border: 0;
background: var(--olive);
color: var(--white);
text-transform: none;
letter-spacing: normal;
transition: opacity 0.1s linear;
}
.btn-solid:hover { opacity: 0.8; }
/* ---------------------------------------------------------------------
Header — absolute, transparent, NOT sticky. Computed styles at scroll
0 and 800 are byte-identical on the live site; do not add a scroll
behaviour.
--------------------------------------------------------------------- */
.site-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 10;
width: 100%;
color: var(--white);
}
.site-header__inner { position: relative; padding: 6vw; }
@media (min-width: 800px) { .site-header__inner { padding: 1.4vw 4vw; } }
.wordmark {
display: block;
width: 100%;
text-align: center;
}
.wordmark__logo {
display: inline-block;
height: calc(var(--fs-wordmark) * 5.8);
width: auto;
}
/* Logo art is white-on-transparent; the light-header pages (Contact) need
it inverted to black, matching the text-color flip .header-on-light
already does for the rest of the header. */
.header-on-light .wordmark__logo { filter: invert(1); }
.site-nav { display: none; }
@media (min-width: 800px) {
.site-nav { display: flex; justify-content: center; width: 100%; }
}
.site-nav ul {
display: inline-flex;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li { margin: 0 10.8px; white-space: nowrap; }
.site-nav a {
display: block;
padding: 1.6px 0;
text-align: center;
font-family: "Lexend", sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
transition: color 0.15s linear;
}
.site-nav a:hover { color: var(--highlight); }
.nav-toggle {
position: absolute;
top: 50%;
right: 6vw;
transform: translateY(-50%);
display: flex;
padding: 0;
border: 0;
background: none;
color: var(--white);
cursor: pointer;
}
@media (min-width: 800px) { .nav-toggle { display: none; } }
/* Mobile overlay menu */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
background: var(--dark);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
.mobile-menu a {
font-family: "Lexend", sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
transition: color 0.15s linear;
}
.mobile-menu a:hover { color: var(--highlight); }
.mobile-menu__close {
position: absolute;
top: 6vw;
right: 6vw;
padding: 0;
border: 0;
background: none;
color: var(--white);
cursor: pointer;
}
body.menu-open { overflow: hidden; }
/* ---------------------------------------------------------------------
Hero
--------------------------------------------------------------------- */
.hero { z-index: 6; padding-top: var(--header-h); }
/* Zeroes out the .fe-pad top inset just for the hero, so img-1 (already
pinned to grid row 1, as high as the row system allows) and the heading
sit right at the top of the grid instead of floating fe-pad-y below it.
Bottom padding is untouched — that space still leads into the next
section's divider. */
.hero__grid { --fe-rows: 24; padding-top: 0; }
@media (min-width: 768px) { .hero__grid { --fe-rows: 21; } }
/* object-fit is CONTAIN, not cover — these render at essentially their
natural intrinsic size. cover crops them and is visibly wrong.
The img is absolutely positioned so it contributes NO intrinsic height:
the box is defined purely by its grid area, and the photo letterboxes
inside it. Left in normal flow, `width:100%` scales each photo up to its
column and pushes the rows taller — that alone made the hero 232px too
tall at 1440. */
.hero__figure { position: relative; }
.hero__figure img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* The hero's self-hosted background video. `cover`, not `contain` like the
sibling photos: the clip is 16:9 and this box is not, and cover is what the
old Vimeo background embed did internally. The poster image is cropped the
same way, so the handover from poster to first frame doesn't jump.
No opacity/reveal machinery here any more — a native