/* masthead.css — gf.cx portfolio editorial-masthead primitive
*
* A full-bleed gradient band carrying an oversized Newsreader serif title, an
* uppercase kicker, a subtitle, and an optional row of stat "barometers".
* Distilled from home.gf.cx's Almanac masthead into a STATIC, reusable form —
* no weather, no day/night paint JS, no countdown logic. Any surface that wants
* the "front-page" editorial treatment (vs the plain page-header) uses this.
*
* It composes with the rest of the house system: it sets no fonts or colours of
* its own beyond the band, reading the design-system tokens (each with a hex
* fallback) so it inherits whatever :root the surface already defines.
*
* ── Markup ──────────────────────────────────────────────────────────────
*
*
*
* surface.gf.cxcenter of excellence
*
*
SEO — a Center of Excellence
*
The playbooks we actually run — used, not admired.
*
*
3
* domains tracked
*
1
* playbook live
*
4
* pillars
*
*
*
*
* .masthead the full-bleed gradient band
* .masthead__inner the centred column (matches the page's measure)
* .masthead__kicker uppercase letterspaced label; .where = muted 2nd clause
* .masthead__title oversized Newsreader serif; = italic accent
* .masthead__sub one muted subtitle line
* .masthead__stats the "barometer" row — flex-wrap of .stat
* .stat__val / __lbl big serif number · uppercase label
*
* ── Variants ────────────────────────────────────────────────────────────
* .masthead--warm sage→paper gradient (default is the cool Almanac sky)
* .masthead--dark for DARK surfaces: top stop is a subtle cool lift off --bg (no light wash)
* .masthead--tight smaller title clamp for shorter surfaces
* .masthead--compact slim band (height + title) for 2nd-level record pages
* .masthead__title.upright serif UPRIGHT (not italic) — restrained voice
*
* ── Tokens referenced (hex fallbacks baked in) ──────────────────────────
* --serif --sans --accent --ink --ink-soft --line --bg
* --mh-top / --mh-bot band gradient stops (override per surface)
* --mh-min-h min band height (default 0) — a blunt band-height floor
* --mh-sub-lines reserve the subtitle to N lines (default 0) — the BETTER
* way to equalise a SET of mastheads: it equalises the
* CONTENT height, so bands match AND content fills each
* band (no page floats high with a gap below the stats)
* --mh-title-lines reserve the TITLE to N lines (default 0) — the sibling
* of --mh-sub-lines for when titles ALSO vary in wrap
* across the set (a 1-line title page vs a 2-line one).
* Set both to the set's max; together they equalise the
* whole content column so the rail aligns page-to-page.
*/
.masthead {
--mh-serif: var(--serif, 'Newsreader', 'Times New Roman', Georgia, serif);
--mh-sans: var(--sans, 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif);
--mh-ink: var(--ink, #1a1816);
--mh-ink-soft: var(--ink-soft, #5a544d);
--mh-accent: var(--accent, #2c4a3a);
--mh-line: var(--line, rgba(26, 24, 22, 0.12));
--mh-top: #cdd9df; /* cool Almanac sky by default */
--mh-bot: var(--bg, #f7f3ec); /* melt into the page */
position: relative;
/* Full-bleed: a 100vw band centred on the viewport. The gutter lives on
* .masthead__inner, so the band needs NO horizontal padding. (v0.2.0 — was
* `margin:0 -100vw` + `padding:… 100vw …`, which laid the box out at ~300vw;
* overflow-x:clip hid it for viewers, but full-page capture tools that ignore
* `clip` saw the 3×-viewport box as phantom width. 100vw lays out at exactly
* one viewport.) Host still needs overflow-x:clip (the 100vw ignores the
* scrollbar gutter). */
width: 100vw;
margin: 0 calc(50% - 50vw) 2.2rem;
padding: 2.4rem 0 2rem;
background: linear-gradient(180deg, var(--mh-top) 0%, var(--mh-bot) 100%);
border-bottom: 1px solid var(--mh-line);
/* --mh-min-h: floor the band height so a SET of mastheads (e.g. a pillar
* group) stays the same height whatever the title line-count — otherwise a
* shorter title makes a shorter band and anything below it (a sticky left
* rail) lands at a different Y page-to-page. Default 0 = off (no-op). */
min-height: var(--mh-min-h, 0);
}
/* ── rail variant — v0.5.0 (2026-11-12) — masthead INSIDE a rail content column ─
* For surfaces with a fixed LEFT RAIL (assets.gf.cx/rail) where the masthead
* lives INSIDE .rail-main (directly above ), NOT before the rail. The
* base band's `width:100vw; margin:0 calc(50% - 50vw)` breaks out to the
* VIEWPORT centre — wrong in a rail column: under a 196px rail it starts
* mid-rail and overflows the viewport to the right. This variant drops the
* viewport breakout so the band fills its CONTAINER (.rail-main) instead:
* · desktop (rail is a flex sibling) → band is full-bleed to the RIGHT of
* the rail, flush to the viewport's right edge;
* · mobile <900px (rail is a sticky top sheet, .rail-layout is block) →
* .rail-main is full width, so the band is full-bleed to the viewport.
* No 100vw, so NO horizontal overflow at any width.
*
* ALIGNMENT: the band fills .rail-main and its .masthead__inner centres on
* --mh-measure, exactly as centres on its own max-width in
* the SAME .rail-main. Set --mh-measure to the page's .page max-width (e.g.
* style="--mh-measure:820px") and the title/kicker/lede left-edge lands on the
* content column's left-edge. Composes with --compact / --warm (they touch only
* band height, padding, colour — not width or side margins).
* Born brand.gf.cx (rail-masthead misalignment + per-page rail-Y jump fix). */
.masthead--rail {
width: auto;
margin-left: 0;
margin-right: 0;
}
/* warm sage variant — distinct from home's cool sky */
.masthead--warm { --mh-top: #dbe3da; }
/* solid variant — for SPARSE mastheads (kicker + a short title, no stat row).
* The base gradient melts --mh-top → --mh-bot across the FULL band height, which
* assumes rich content filling the band; on a sparse band the title floats in
* the faded lower half under a top-concentrated colour stripe (reads "weird").
* --solid holds the tint for the upper two-thirds, then melts only at the foot,
* so the (short) content sits ON the colour and the band reads as one cohesive
* tinted panel. Tune the hold-point here once; every sparse surface inherits it.
* NB: a bare-% interpolation HINT (not a second colour stop) biases the melt
* low with a SMOOTH curve — the old two-stop form kinked at 64% and Mach-banded
* a visible horizontal seam across wide bands (data.gf.cx, 2026-11-11). */
.masthead.masthead--solid {
background: linear-gradient(180deg,
var(--mh-top) 0%, 70%, var(--mh-bot) 100%);
/* The band already melts to --bg; a crisp 1px bottom rule cutting across that
* fade reads as a visible header seam (data.gf.cx, 2026-11-11). On the melt
* variant the dissolve IS the edge — drop the line. (Rich editorial mastheads
* with a stat row keep the base border to separate band from content.) */
border-bottom: 0;
}
/* bare variant — title typography on PAPER, NO tinted band. For a bespoke title
* page whose masthead IS the page heading (data.gf.cx) and where ANY coloured
* band reads as an unwanted header bar bolted over the content. Keeps the
* masthead type treatment + --mh-measure alignment; drops the wash and the rule
* entirely. The structural header/band markers still resolve via .masthead, so
* the surface stays almanac-done on its typography, not a decorative strip.
* (Born 2026-11-11: Dan — the sage band "reads as a visible header", REMOVE it.) */
.masthead.masthead--bare {
background: none;
border-bottom: 0;
}
/* dark variant — for surfaces whose --bg is dark. The default --mh-top is a
* LIGHT sky stop; over a dark page that paints a pale wash. Here the top stop
* is the page bg lifted toward a cool slate, so the band reads as a gentle
* glow that melts into --bg. Inks adapt via the surface's own tokens. */
.masthead--dark {
--mh-top: color-mix(in srgb, var(--bg, #0f1211) 78%, #4a5d66);
--mh-line: rgba(255, 255, 255, 0.10);
}
.masthead__inner {
max-width: var(--mh-measure, 760px);
margin: 0 auto;
padding: 0 1.5rem;
}
.masthead__kicker {
font-family: var(--mh-sans);
font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
font-weight: 700; color: var(--mh-accent);
margin-bottom: 1.1rem;
display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
}
.masthead__kicker .where { color: var(--mh-ink-soft); letter-spacing: 1.6px; font-weight: 700; }
.masthead__kicker .where::before { content: "·"; margin-right: .55rem; color: var(--mh-ink-soft); }
.masthead__title {
font-family: var(--mh-serif); font-weight: 400;
line-height: 1.02; letter-spacing: -0.6px;
font-size: clamp(2.3rem, 6.2vw, 4rem);
color: var(--mh-ink);
/* reserve N title lines so a SET of mastheads whose titles wrap differently
* (1-line vs 2-line) still fills to equal height; 0 = off. 1lh honours the
* title's own line-height (1.02). Sibling of --mh-sub-lines. */
min-height: calc(var(--mh-title-lines, 0) * 1lh);
}
.masthead--tight .masthead__title { font-size: clamp(2rem, 5vw, 3rem); }
.masthead__title em { font-family: var(--mh-serif); font-style: italic; color: var(--mh-accent); font-weight: 400; }
.masthead__title.upright { font-style: normal; }
.masthead__title.upright em { font-style: normal; }
/* compact — slim band for second-level RECORD pages: pulls in the band height
* and title so a deep page gets a titled header without a landing's full weight
* (you page through many records; the big band belongs to the landing). Composes
* with --warm. */
.masthead--compact { margin-bottom: 1.4rem; padding-top: 1.3rem; padding-bottom: 1.1rem; }
.masthead--compact .masthead__kicker { margin-bottom: .55rem; }
.masthead--compact .masthead__title { font-size: clamp(1.65rem, 4vw, 2.4rem); }
.masthead--compact .masthead__sub { margin-top: .45rem; font-size: 14px; }
.masthead__sub {
margin-top: .6rem; max-width: 46ch;
font-family: var(--mh-sans); font-size: 15px; line-height: 1.5;
color: var(--mh-ink-soft);
/* reserve N subtitle lines so a SET of mastheads fills to equal height; 0 = off */
min-height: calc(var(--mh-sub-lines, 0) * 1lh);
}
/* stat "barometer" row */
.masthead__stats {
margin-top: 1.6rem;
display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; align-items: flex-end;
}
.masthead__stats .stat { display: flex; flex-direction: column; gap: .3rem; min-width: 92px; }
.stat__val {
font-family: var(--mh-serif); font-size: 2rem; line-height: 1;
font-variant-numeric: tabular-nums lining-nums; letter-spacing: -1px;
color: var(--mh-ink);
}
.stat__val .u { font-size: .9rem; color: var(--mh-ink-soft); margin-left: 2px; font-family: var(--mh-sans); letter-spacing: 0; }
.stat__lbl {
font-family: var(--mh-sans);
font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
color: var(--mh-ink-soft); font-weight: 700;
}
/* a stat can carry the accent (e.g. the one that's "live") */
.stat--accent .stat__val { color: var(--mh-accent); }
/* a stat can be a link — v0.1.1 (e.g. the "live specimens" count on assets.gf.cx) */
a.stat, a.stat:visited { text-decoration: none; color: inherit; cursor: pointer; }
a.stat:hover .stat__lbl, a.stat:focus-visible .stat__lbl { color: var(--mh-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
.masthead { padding-top: 1.8rem; padding-bottom: 1.5rem; }
.masthead--compact { padding-top: 1rem; padding-bottom: .9rem; }
.masthead__stats { gap: 1.1rem 1.6rem; }
.masthead__stats .stat { min-width: 78px; }
}
/* ── specimen variant — v0.3.0 (2026-11-09) ───────────────────────────────
* The "specimen-book" identity header (patterns.gf.cx idiom; used by etf.gf.cx
* and the by-example pattern): a volume mark over a bordered identity CARD —
* a heraldic icon beside an uppercase kicker, an oversized serif-ITALIC name,
* and a standfirst. NOT a full-bleed band: --specimen neutralises the band and
* lays the header out as a card inside the page column, so a surface that wears
* the publication idiom still passes the `masthead` marker from one shared
* source (no page-local identity CSS).
*
*
*
*