/* Hero LAYOUT now lives in site.css (.hero). Removed 15 Aug — five parallel copies had
drifted apart and every fix had to be made five times. This file keeps type/colour only. */
/* =============================================================================
page-blog.css — /blog/ ONLY
-----------------------------------------------------------------------------
Everything shared (container, bands, buttons, arrowlink, cards, marquee, head,
foot, type scale) lives in site.css and is used here by its existing class
names. This file holds only the geometry that is unique to the Blog page.
Every number is from notes/spec-blog.md (mockup 3204px wide = @2x, so raw
pixels are halved). Section map, CSS px:
header 0 – 112
hero 112 – 532 (h 420)
marquee 532 – 578 (h 46)
featured-post 578 – 1003.5 (h 425.5; card 1168×361.5 at y642)
[empty band] 1003.5– 2194 ← unfinished comp, filled — see blog.html
footer 2194 – 2552.5
========================================================================== */
/* ------------------------------------------------------------------ hero --- *
Ink targets (mockup CSS px): script 197.0→225.0 · "The" 255.0→320.0 ·
"Journal." 339.0→404.5 (pitch 84) · intro 448.5→463.5 · marquee top rule 532.
H1 SIZE — re-solved against Young Serif, three independent ways:
cap('T') ink 61.00 CSS ÷ 0.764 (YS cap ratio) = 79.8px
ink width "The" 153.50 ÷ 1.920 (YS ink/px @100) = 79.9px
ink width "Journal." 325.00 ÷ 4.063 = 80.0px
-> 80px / 84px / letter-spacing 0. It is NOT .t-display-l (68/72): that tier
was measured off Services. The old 88px came from Fraunces' 0.70 cap ratio;
Young Serif's is 0.764, which is the whole drift. Weight is 400 — Young Serif
ships ONE weight and `font-weight: 700` was synthesising a fake bold.
Paddings below are solved, not tuned: YS strut = 1.05em asc / 0.37em desc, so
at 80/84 the first ink row sits boxTop + 5.2 and the second boxTop + 89.2. */
.blog-hero__eyebrow { margin: 0; }
.blog-hero__title {
margin: 14.5px 0 0;
font-size: clamp(42px, 5vw, 80px);
line-height: 84px;
letter-spacing: 0;
}
/* inherits the shared 14px/27px body — the old 16px-era override is gone */
.blog-hero__intro {
margin: 23.4px 0 0;
max-width: 620px;
color: var(--body);
}
/* CONTENT PASS — the approved copy's page title line and its two intro
paragraphs. Both use the existing scale: the deck is .t-display-sm (the
measured 23px display step) and the paragraphs are the shared 14/27 body on
the same 620px measure as the comp's intro line. No new type, no new colour. */
.blog-hero__deck {
margin: var(--sp-5) 0 0;
max-width: 620px;
}
.blog-hero__lede {
margin: var(--sp-3) 0 0;
max-width: 620px;
color: var(--body);
}
/* -------------------------------------------------------- featured post --- *
Card: 1168 × 361.5, 1px #D8C2A8, radius 0, transparent fill.
Columns: photo 583 · gutter 48.5 · copy (48px padding on the text side).
The card now lives inside .blog-latest as that section's first post — see
blog.html. Its own geometry is unchanged. */
.blog-featured__card {
display: grid;
grid-template-columns: 583px minmax(0, 1fr);
column-gap: 48.5px;
border: 1px solid var(--tan);
}
/* align-self:start is what reproduces the comp's 32px cream strip under the
photo — the image keeps its 1166×656 aspect instead of covering the card. */
.blog-featured__media { align-self: start; }
.blog-featured__media img { height: auto; }
/* Paddings are SOLVED from the mockup's ink rows, not guessed:
top 46.6 -> date ink 692.5–700.2 (mockup 692.5–700.0)
right 48 -> measure 486.5, which is the value that forces the comp's
exact 3-line break (see .blog-featured__title below)
bottom 46.2 -> card bottom 1003.5 (mockup 1003.5)
line-height 1.2 is INHERITED CONTEXT for .arrowlink's line box; every other
child sets its own. */
.blog-featured__body { padding: 46.6px 48px 46.2px 0; line-height: 1.2; }
/* mono 10px confirmed on ink width: "PLANNING" 46.78 + 7x0.5 tracking = 50.28
vs mockup 50.0; "March 12, 2026" 83.02 vs mockup 83.0 at zero tracking. */
.blog-featured__meta {
margin: 0 0 15.2px;
font-family: 'Courier New', Courier, monospace;
font-size: 10px;
line-height: 13px;
}
.blog-featured__cat { color: var(--burgundy); letter-spacing: .05em; text-transform: uppercase; }
/* 14.5, not the 17 the spec quotes: 17 is the INK gap, and "PLANNING" carries a
trailing 0.5px letter-space plus a 0.5px left bearing on the date. */
.blog-featured__date { color: var(--body); margin-left: 14.5px; }
/* 35.25px, not .t-display-s (44/52). Solved on ink width against Young Serif:
"How to Choose the Right" 427.50 CSS / 12.147 = 35.19px
"Wedding Videographer for" 461.00 CSS / 13.086 = 35.23px
Line pitch measured cap-top to cap-top 724.8 -> 810.0 over 2 lines = 42.6.
The spec's 38px came from the old 0.70 cap ratio and is superseded.
No max-width: the 48px right padding gives 486.5, and "…Right Wedding" (593.5)
and "…for Your" (555.2) both overflow it, so the comp's break is forced. */
.blog-featured__title {
margin: 0;
font-size: clamp(26px, 2.3vw, 35.25px);
line-height: 42.5px;
letter-spacing: 0;
}
.blog-featured__title a { text-decoration: none; }
.blog-featured__title a:hover { color: var(--burgundy); }
/* 14px at ls 0 reproduces both mockup lines to within 0.5px:
L1 460.5 vs 461.0 · L2 411.8 vs 412.0. Leading is 26 here, not the site's 27
— measured ink-top to ink-top 867.0 -> 893.0. */
.blog-featured__excerpt {
margin: 14.8px 0 0;
max-width: 487px; /* measured text measure — longest line reaches x1311 */
line-height: 26px;
color: var(--body);
}
.blog-featured__body .arrowlink { margin-top: 24.9px; }
/* site.css now carries `.arrowlink--muted { border-bottom-color: rgba(91,13,26,.25) }`
(= the measured #D0BABA on cream), so only the hover remains page-local.
SHARED-LIBRARY REQUEST: lift this one line next to it — see report. */
.arrowlink--muted:hover { border-bottom-color: var(--burgundy); }
/* ======================================================================== *
Below here: the sections that fill the comp's 1190.5px empty band.
Copy from notes/content/blog.md; components from site.css.
======================================================================== */
/* Everything below inherits the shared 14px/27px body. The explicit
`font-size:14px; line-height:26px` these blocks used to carry was a
compensation for the old 16px body and has been removed throughout. */
/* --------------------------------------------------- section headings --- */
.blog-sechead { max-width: 760px; margin: 0 0 var(--sp-6); }
.blog-sechead__lede { margin: var(--sp-3) 0 0; }
/* -------------------------------------------------------- latest posts --- *
64px top keeps the comp's marquee->card gap on the section; the heading pair
sits in that space. 96px bottom is the page's section rhythm. */
.blog-latest { padding: 64px 0 96px; }
.blog-postlist { margin-top: var(--sp-6); border-top: 1px solid var(--rule-light); }
.blog-post {
padding: 40px 0;
border-bottom: 1px solid var(--rule-light);
}
/* Same component as the featured card's title, so the same measured tier —
35.25/42.5 — not .t-display-s. One post-title size on the page. */
.blog-post__title {
margin: 0;
max-width: 860px;
font-size: clamp(26px, 2.3vw, 35.25px);
line-height: 42.5px;
letter-spacing: 0;
}
.blog-post__title a { text-decoration: none; }
.blog-post__title a:hover { color: var(--burgundy); }
.blog-post__summary {
margin: 14.8px 0 0;
max-width: 720px;
line-height: 26px;
color: var(--body);
}
/* same inherited-line-height context as .blog-featured__body — see note above */
.blog-post { line-height: 1.2; }
.blog-post .arrowlink { margin-top: 23px; }
/* -------------------------------------------------------------- topics --- */
.blog-topics { padding: 0 0 96px; }
.blog-topics__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 72px;
}
.blog-topic__title { margin: 0 0 var(--sp-3); }
.blog-topic__label { margin: 0 0 var(--sp-2); }
.blog-topic__list { margin: 0 0 27px; }
.blog-topic__list li {
position: relative;
padding-left: 28px;
color: var(--body);
}
.blog-topic__list li + li { margin-top: 12px; }
.blog-topic__list li::before {
content: '';
position: absolute;
left: 0;
top: 13.5px; /* mid of the first 27px line box */
width: 14px;
height: 1px;
background: var(--burgundy);
}
/* ------------------------------------------------------- email capture --- */
.blog-signup { padding: 88px 0; }
.blog-signup__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
gap: 72px;
align-items: start;
}
.blog-signup__copy p {
margin: var(--sp-3) 0 0;
max-width: 480px;
}
/* The approved copy runs the "No spam" line straight on from the invitation, so
it sits in the copy column under that paragraph rather than under the field. */
.blog-signup__note {
margin: var(--sp-2) 0 0;
max-width: 480px;
font-size: 12px;
line-height: 22px;
color: var(--body-on-burg);
}
.blog-signup__form { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.blog-signup__input {
/* flex-basis: AUTO, width does the sizing. `flex: 1 1 240px` set the basis on the MAIN axis —
fine in a row, but the form stacks to a column on mobile, where the main axis is vertical, so
the 240px became the input's HEIGHT and it rendered as a huge empty box (Pete, 15 Aug:
"email too big"). Identical failure to the footer hairline earlier today. */
flex: 1 1 auto;
width: 100%;
min-width: 240px;
min-height: 44px;
max-height: 44px;
padding: 0 16px;
border: 1px solid rgba(247, 244, 239, .35);
border-radius: 0;
background: transparent;
color: var(--cream);
font-family: var(--font-body);
font-size: 12px;
font-weight: 300;
letter-spacing: .06em;
}
.blog-signup__input::placeholder { color: var(--body-on-burg); opacity: 1; }
.blog-signup__input:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }
/* ----------------------------------------------------------- closing cta --- */
.blog-cta { padding: 96px 0 112px; }
.blog-cta__body {
margin: var(--sp-3) 0 0;
max-width: 620px;
}
.blog-cta__or { margin-top: var(--sp-5); }
.blog-cta__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 32px;
margin-top: var(--sp-5);
line-height: 1.2; /* .arrowlink context — see note above */
}
/* the second action follows its own connecting line, so it sits closer to it */
.blog-cta__actions--tight { margin-top: var(--sp-4); }
/* ============================================================== responsive ===
No tablet/mobile comps exist; these follow the site-wide 1200/900/600 steps.
========================================================================== */
@media (max-width: 1200px) {
.blog-featured__card { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.blog-topics__grid { gap: 56px; }
}
@media (max-width: 900px) {
.blog-hero__title { margin-top: 12px; }
/* Mobile (Patrick, 24 Jul): drop the forced "The / Journal." line break. On the wide desktop
h1 the
is a deliberate two-line stack, but at the mobile size it opened a ~59px gap
between the words. Suppressing the
lets the title sit on one line with normal leading. */
.blog-hero__title br { display: none; }
.blog-hero__intro { margin-top: 24px; }
.blog-hero__deck { margin-top: var(--sp-4); }
.blog-featured__card { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.blog-featured__media { align-self: stretch; }
.blog-featured__body { padding: 32px; }
.blog-featured__excerpt { max-width: none; }
.blog-latest { padding: 48px 0 72px; }
.blog-topics { padding-bottom: 72px; }
.blog-topics__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.blog-signup { padding: 64px 0; }
.blog-signup__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.blog-cta { padding: 72px 0 88px; }
}
@media (max-width: 600px) {
/* site.css already lifts body to 15/25 here; these two only need their
page-local 26px leading released back to it. */
.blog-featured__excerpt,
.blog-post__summary { font-size: 15px; line-height: 25px; }
.blog-featured__body { padding: 24px; }
.blog-post { padding: 28px 0; }
.blog-cta__actions { gap: 24px; }
.blog-signup__form { flex-direction: column; align-items: stretch; }
}
/* ============================================================ blog cards ===
Rows of three (Pete, 15 Aug: "instead of a list, all other blogs should display in rows of 3
cards for a max of 12 cards with pagination"). Replaces .blog-postlist, which was a stack of
title + one line and carried no image at all.
minmax(0,1fr) not 1fr: a plain 1fr floors at min-content, so one long unbroken title would
widen its column and knock the row out of alignment. */
.blog-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 56px var(--sp-3);
margin: 72px 0 0;
padding: 0;
list-style: none;
}
.blog-card__link { display: block; text-decoration: none; color: inherit; }
.blog-card__media {
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--cream-alt);
margin-bottom: 20px;
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.blog-card__link:hover .blog-card__media img { transform: scale(1.03); }
.blog-card__placeholder { display: block; width: 100%; height: 100%; background: var(--tan); }
.blog-card__meta {
margin: 0 0 10px;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--body);
}
.blog-card__cat { color: var(--burgundy); margin-right: 14px; }
.blog-card__title { margin: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; }
.blog-card__link:hover .blog-card__title { color: var(--burgundy); }
.blog-card__summary { margin: 12px 0 0; }
/* ------------------------------------------------------------- pagination --- */
.blog-pager {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
margin-top: 72px;
}
.blog-pager .page-numbers {
display: grid;
place-items: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border: 1px solid var(--rule-light);
text-decoration: none;
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--body);
transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.blog-pager .page-numbers:hover { border-color: var(--burgundy); color: var(--burgundy); }
.blog-pager .page-numbers.current { background: var(--burgundy); border-color: var(--burgundy); color: var(--cream); }
.blog-pager .page-numbers.dots { border-color: transparent; }
@media (max-width: 900px) { .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px var(--sp-3); } }
@media (max-width: 600px) { .blog-cards { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; } }
/* --------------------------------------------- featured: image fills the cell ---
"Fix the featured blog so the image takes up the entire space" (Pete, 15 Aug). The media
column was align-self:start with height:auto, so a portrait-ish image sat at its natural
height and left cream below it. Now it stretches to the card and crops to fill. */
.blog-featured__media { align-self: stretch; overflow: hidden; }
.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ========================================================== single post ===
Article column capped at 900px (Pete, 15 Aug: "make single blog max width 900px and smaller
h1... ensure text and image same width").
Everything — header, photograph, body — is constrained by the SAME rule rather than each
element carrying its own measure, which is what let the image run to the full 1440 column
while the text below it sat narrower. One width, applied once.
.post lives inside .container, so this is a second cap nested inside the page column; below
~1012px the container's own padding takes over and this becomes a no-op. */
.post .post__head,
.post .post__media,
.post .art-text,
.post .post__body,
.post .post__foot {
max-width: 900px;
margin-inline: auto;
}
/* The h1 was on .t-display-l — the 80px hero tier. An article headline is not a hero: at 80px
in a 900px column it ran three lines before the reader reached any content. */
.post .post__head h1 {
font-size: clamp(30px, 3.4vw, 46px);
line-height: 1.14;
letter-spacing: -.01em;
margin: 0;
}
/* GENEROUS ARTICLE SPACING (Pete, 15 Aug: "fix spacing, be generous").
The header was collapsing: the h1 sat on the eyebrow above it and the date tucked under the
descenders, and the photograph then started immediately after. The cramping came from the
band's own vertical padding being tuned for the archive layout, plus the h1 inheriting a
zero margin — so every element in the header was doing the spacing of its neighbour.
Each gap is now stated explicitly rather than inherited. */
.post .post__head { padding-block: clamp(48px, 7vh, 88px) 0; }
.post .post__head .eyebrow { margin: 0 0 20px; }
.post .post__head .card__meta { margin: 28px 0 0; }
.post .post__media { margin-block: clamp(48px, 7vh, 80px); }
.post .post__media img { width: 100%; height: auto; display: block; }
/* Article body: comfortable measure and a real paragraph rhythm. */
.post .art-text p { margin: 0 0 28px; }
.post .art-text p:last-child { margin-bottom: 0; }
.post .art-text h2 { margin: 48px 0 16px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; }
.post .art-text h3 { margin: 36px 0 12px; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; }
.post .art-text img { width: 100%; height: auto; display: block; margin: 36px 0; }
.post .art-text a { color: var(--burgundy); }
@media (max-width: 600px) { .post .post__media { margin-block: 28px; } }
/* Room around the whole article, and before the closing link, so it never runs into the footer. */
.post { padding-block: 0 clamp(72px, 10vh, 128px); }
.post .art-text { padding-bottom: 8px; }
.post .post__foot { margin-top: clamp(48px, 6vh, 72px); }
/* ============================================================ split hero ===
Copy left / photograph right, matching Home, Films, About and Services. The comp shipped this
hero as a single centred column with no image; IMG_0196 now fills the right half.
Pulled up under the transparent header like the others — which is why the nav needs the light
treatment and a scrim on this page too. */
/* The comp's measures were solved for a narrow one-column hero; in the split they leave the
text stopping well short of the heading above it. */
@media (max-width: 600px) {
/* Stacked: the field spans the row and the button sits under it, both full width. */
.blog-signup__input { min-width: 0; }
}