/* =========================================================================
blog.css : page-local styles for blog.html and blog/*.html ONLY.
Tokens, fonts, nav, burger, footer, buttons and the ambient TV-static
background all come from styles.css, which this file NEVER edits.
PERF CONTRACT (Mike's mobile crisis, never again):
- No backdrop-filter anywhere in this file. The one inherited from
styles.css (.navmenu) is switched OFF while the menu is closed, so
nothing is compositing a blur over the repainting noise canvas at rest.
- Every entrance animates transform + opacity only. No layout, no filter
on scroll, no box-shadow transitions during entrances.
- One IntersectionObserver, unobserved after it plays. One rAF-coalesced
passive scroll listener for the reading bar (a scaleX transform).
- Infinite loops (the ON AIR dot, the CRT bloom) are gated on a class the
observer only adds when the element is on screen, and they are pure
opacity. No canvases beyond the site's shared 14fps half-res static.
- prefers-reduced-motion: everything lands in its final state instantly.
========================================================================= */
/* styles.css hides the body cursor for app.js's custom cursor, which is not
loaded on these pages. Without this the pointer is invisible. */
body { cursor: auto !important; }
/* PERF: kill the always-on blur behind the closed nav dropdown. */
.navmenu:not(.is-open) { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* DM Serif Display ships one weight. Never let a browser fake-bold it. */
.bp-hero__title, .bp-pillar__title, .bp-pillar__num, .bp-vignette__title,
.bp-fear__title, .bp-quote__text, .bp-practice__title, .bp-signoff__word,
.bp-signoff__title, .bp-h2, .bl-hero__title, .bl-card__title, .bp-figure__fallback b,
.bp-crumb__now, .bp-next__title { font-weight: 400; }
/* =========================================================================
1. SHELL
========================================================================= */
.bp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.bp-measure { max-width: 68ch; margin-left: auto; margin-right: auto; }
/* Reading progress: a hairline rust bar. transform only, GPU, no reflow. */
.bp-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
background: rgba(26,30,46,.06); pointer-events: none;
}
.bp-progress__fill {
height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--accent-rust-d), var(--accent-rust) 60%, #e0803f);
box-shadow: 0 0 10px rgba(196,87,42,.5);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .bp-progress { display: none; } }
/* Shared reveal. styles.css already defines .reveal/.is-in; these are the
blog's own entrances, all transform + opacity.
Every hidden START state on this page is gated on , which the
inline head script sets. With JS off, nothing is ever hidden: the whole essay
renders, it just does not animate. */
.js .bp-rise { opacity: 0; transform: translateY(18px); }
.js .bp-rise.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.25,1); }
/* =========================================================================
2. HERO
========================================================================= */
.bp-hero { padding: 40px 0 8px; }
.bp-crumb {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
color: var(--text-faint); margin-bottom: 34px;
}
.bp-crumb a { color: var(--text-muted); text-decoration: none; }
.bp-crumb a:hover { color: var(--accent-rust); }
.bp-crumb i { font-style: normal; color: var(--accent-rust); opacity: .5; }
.bp-crumb__now { font-family: var(--font-mono); color: var(--ink-navy); }
/* the mono eyebrow, styled as a broadcast slate */
.bp-slate {
display: inline-flex; align-items: center; gap: 0;
border: 1px solid rgba(196,87,42,.35); border-radius: var(--radius-pill);
overflow: hidden; background: rgba(255,255,255,.6);
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
margin-bottom: 22px;
}
.bp-slate span { padding: 7px 13px; color: var(--accent-rust); }
.bp-slate b {
font-weight: 500; padding: 7px 13px; background: var(--accent-rust); color: #fff;
letter-spacing: .2em;
}
.bp-hero__title {
font-family: var(--font-serif);
font-size: clamp(38px, 6.4vw, 74px); line-height: 1.02; letter-spacing: -.025em;
margin: 0 0 22px; max-width: 15ch; color: var(--ink-navy);
}
.bp-hero__title i { font-style: italic; color: var(--accent-rust); }
.bp-hero__deck {
font-size: clamp(17px, 2vw, 21px); line-height: 1.6; font-weight: 300;
color: var(--text-muted); max-width: 60ch; margin: 0 0 34px;
}
/* byline strip */
.bp-byline {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 18px 0; border-top: 1px solid var(--surface-line);
border-bottom: 1px solid var(--surface-line);
}
.bp-byline__pic {
width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
object-fit: cover; object-position: 50% 22%;
border: 1px solid var(--surface-line);
box-shadow: 0 0 0 3px rgba(196,87,42,.12);
background: var(--surface);
}
.bp-byline__who { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.bp-byline__name { font-size: 15px; font-weight: 500; color: var(--ink-navy); }
.bp-byline__role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--text-faint); margin-top: 4px; }
.bp-byline__meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-muted);
}
.bp-byline__meta i { font-style: normal; color: var(--accent-rust); opacity: .55; }
/* =========================================================================
3. HERO IMAGE ("the tube") — now a channel-changing TV
-------------------------------------------------------------------------
Two channels cycle inside one tube, on a 2s loop:
CH 01 assets/blog/hero-ch1-team.jpg the team around the table (LCP)
CH 02 assets/blog/hero-ch2-room.jpg the same room, the work in the air
The CRT/static treatment underneath is NOT dead code: if CH 01 ever fails to
load, the ![]()
onerror handler adds .is-missing to the figure and the static
stands in as a finished-looking frame rather than a broken box.
========================================================================= */
.bp-figure { margin: 44px 0 0; }
.bp-figure__tube {
position: relative; overflow: hidden;
aspect-ratio: 3 / 2;
border-radius: 20px;
background: radial-gradient(120% 110% at 50% 24%, #262a3e, var(--ink-navy) 60%, #0f111a 100%);
border: 1px solid rgba(196,87,42,.28);
box-shadow:
inset 0 0 0 4px #0d0f17,
inset 0 0 70px rgba(0,0,0,.65),
0 30px 70px -30px rgba(26,30,46,.55);
}
@media (min-width: 760px) { .bp-figure__tube { aspect-ratio: 16 / 9; } }
/* -------------------------------------------------------------------------
THE CHANNELS. Two images stacked in the tube, one visible at a time.
Only opacity and transform are ever animated.
------------------------------------------------------------------------- */
.bp-tv { position: absolute; inset: 0; z-index: 2; }
.bp-tv__img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
opacity: 0; transition: opacity .3s ease;
}
.bp-tv__img.is-on { opacity: 1; }
/* Both channels are cool, modern, blue-white stock light, shot in different rooms
on different days. Left alone they read as two unrelated pictures cross-fading.
Graded to the same warm broadcast temperature they read as two channels on the
SAME television, which is the entire point of the hero. The filter is static, so
it rasterizes once per image and costs nothing per frame. Both channels carry
this class now: there is no longer a natively-rust shot to exempt. */
.bp-tv__img--photo { filter: sepia(.58) saturate(1.32) contrast(1.06) brightness(.94); }
/* CRT roll-in: the incoming channel drops into lock the way a tube does. */
.bp-tv__img.is-rolling { animation: bpRoll .56s cubic-bezier(.2,.85,.25,1); }
@keyframes bpRoll {
0% { transform: translateY(-14%) scaleY(.84); opacity: .25; }
55% { transform: translateY(2.5%) scaleY(1.03); opacity: 1; }
78% { transform: translateY(-1%) scaleY(.99); }
100% { transform: none; opacity: 1; }
}
/* the sweep line that rides down the glass as the picture locks */
.bp-tv__sweep {
position: absolute; left: -6%; right: -6%; top: 0; height: 16%; z-index: 4;
pointer-events: none; opacity: 0;
background: linear-gradient(to bottom, rgba(255,232,205,0), rgba(255,242,224,.55) 50%, rgba(255,232,205,0));
}
.bp-figure.is-changing .bp-tv__sweep { animation: bpTvSweep .55s linear; }
@keyframes bpTvSweep {
0% { opacity: .9; transform: translateY(-120%); }
100% { opacity: 0; transform: translateY(640%); }
}
/* the RGB split: two thin chroma bands tear left and right for a beat. Kept to two
small bands rather than duplicating the image, which would double the composited
area of the hero for the length of every flip. */
.bp-tv__tear { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.bp-tv__tear i { position: absolute; left: 0; right: 0; height: 8%; display: block; mix-blend-mode: screen; }
.bp-tv__tear i:first-child { top: 31%; background: linear-gradient(90deg, rgba(0,190,255,.55), rgba(0,190,255,0) 62%); }
.bp-tv__tear i:last-child { top: 60%; background: linear-gradient(270deg, rgba(255,58,92,.5), rgba(255,58,92,0) 62%); }
.bp-figure.is-changing .bp-tv__tear { animation: bpTearFade .42s ease-out; }
.bp-figure.is-changing .bp-tv__tear i:first-child { animation: bpTearL .42s steps(5, end); }
.bp-figure.is-changing .bp-tv__tear i:last-child { animation: bpTearR .42s steps(5, end); }
@keyframes bpTearFade { 0%, 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bpTearL { 0% { transform: translateX(-16px); } 50% { transform: translateX(11px); } 100% { transform: none; } }
@keyframes bpTearR { 0% { transform: translateX(14px); } 50% { transform: translateX(-9px); } 100% { transform: none; } }
/* the static burst. Quarter-res canvas, 14fps, ~420ms, then straight back to 0. */
.bp-tv__noise {
position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
pointer-events: none; opacity: 0; transition: opacity .16s ease;
}
/* the broadcast grade that sits OVER every channel: scanlines, rust wash, tube
falloff. This is the layer that makes a stock photograph look like footage. */
.bp-figure__grade {
position: absolute; inset: 0; z-index: 3; pointer-events: none;
background:
radial-gradient(118% 100% at 50% 44%, rgba(255,186,132,.10), rgba(24,14,8,.44) 80%),
repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px),
linear-gradient(0deg, rgba(196,87,42,.13), rgba(196,87,42,.13));
}
/* the remote */
.bp-remote {
display: flex; align-items: center; justify-content: center; gap: 8px;
flex-wrap: wrap; margin-top: 16px;
}
.bp-remote__label {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
color: var(--text-faint); margin-right: 4px;
}
.bp-remote__btn {
min-height: 44px; min-width: 68px; padding: 0 16px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--surface-line); border-radius: var(--radius-pill);
background: var(--surface-2); color: var(--text-muted); cursor: pointer;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
-webkit-tap-highlight-color: transparent;
}
.bp-remote__btn:hover { transform: translateY(-2px); border-color: rgba(196,87,42,.5); color: var(--ink-navy); }
.bp-remote__btn:active { transform: translateY(0); }
.bp-remote__btn.is-on {
background: var(--accent-rust); border-color: var(--accent-rust); color: #fff;
box-shadow: 0 0 0 3px rgba(196,87,42,.14);
}
.bp-remote__btn:focus-visible { outline: 2px solid var(--accent-rust); outline-offset: 3px; }
/* static + scanlines: one 90px tiled SVG turbulence, rasterized once, never
animated. Cheap on a phone, and it is the brand. */
.bp-figure__static {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background-image:
radial-gradient(58% 52% at 50% 46%, rgba(196,87,42,.30), rgba(196,87,42,0) 72%),
repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, rgba(0,0,0,0) 1px 3px),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 90px 90px;
background-blend-mode: normal, normal, overlay;
opacity: .85;
}
/* one slow scanline sweep, transform only, and only while on screen */
.bp-figure__scan {
position: absolute; left: -4%; right: -4%; top: 0; height: 22%; z-index: 3;
pointer-events: none; opacity: 0;
background: linear-gradient(to bottom, rgba(255,226,198,0), rgba(255,236,214,.14) 48%, rgba(255,244,232,.34) 53%, rgba(255,226,198,.10) 60%, rgba(255,226,198,0));
}
.bp-figure.is-live .bp-figure__scan { animation: bpScan 7s cubic-bezier(.45,0,.35,1) infinite; }
@keyframes bpScan {
0% { transform: translateY(-120%); opacity: 0; }
8% { opacity: 1; }
62% { opacity: 1; }
70%, 100% { transform: translateY(520%); opacity: 0; }
}
/* glass vignette so it reads as a tube, not a rectangle */
.bp-figure__tube::after {
content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
box-shadow: inset 0 0 70px 16px rgba(0,0,0,.45);
border-radius: 20px;
}
/* broadcast tags */
.bp-figure__onair, .bp-figure__ch {
position: absolute; top: 16px; z-index: 5;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
color: rgba(255,214,188,.86); text-shadow: 0 0 8px rgba(196,87,42,.6);
}
.bp-figure__onair { left: 18px; display: inline-flex; align-items: center; gap: 7px; }
.bp-figure__ch { right: 18px; }
.bp-dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--accent-rust);
box-shadow: 0 0 8px 2px rgba(196,87,42,.7); flex: 0 0 auto;
}
.is-live .bp-dot { animation: bpPulse 2s ease-in-out infinite; }
@keyframes bpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* the "no image yet" caption, only drawn when the jpg is absent */
.bp-figure__fallback {
position: absolute; inset: 0; z-index: 5; display: none;
align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.bp-figure.is-missing .bp-figure__fallback { display: flex; }
.bp-figure__fallback b {
display: block; font-family: var(--font-serif); font-size: clamp(20px, 3vw, 30px);
color: #fff4ea; text-shadow: 0 2px 18px rgba(0,0,0,.6), 0 0 30px rgba(196,87,42,.35);
}
.bp-figure__fallback em {
display: block; margin-top: 12px; font-style: normal;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
color: rgba(255,214,188,.7);
}
.bp-figure figcaption {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
color: var(--text-faint); margin-top: 14px; text-align: center;
}
/* =========================================================================
3b. IN-BODY PHOTOGRAPH (one room shot, in AMPLIFY)
Same broadcast frame language as the hero tube, dialled down one stop: the
rust hairline and the scanline glass, but NO animated sweep. The perf
contract on this page allows exactly one infinite animation and the hero
already owns it, so this one is painted once and never touched again.
There is exactly ONE, in AMPLIFY. There used to be two, and they were the same
generated boardroom shot twice with one mirrored to hide it. The page now shows
the better of those two frames, once. .bp-photo--dark and .bp-photo__img--flip
are kept: they cost nothing and the next photo of a genuinely different room
will want them.
The frame carries the 3:2 aspect-ratio, so the box is reserved before the
bytes arrive and a lazy-loaded photo cannot shift the paragraph under it.
========================================================================= */
.bp-photo { margin: 34px 0 0; }
.bp-photo__frame {
position: relative; overflow: hidden;
aspect-ratio: 3 / 2;
border-radius: 16px;
background: var(--ink-navy);
border: 1px solid rgba(196,87,42,.30);
box-shadow:
inset 0 0 0 3px #0d0f17,
0 24px 56px -30px rgba(26,30,46,.55);
}
.bp-photo__img {
position: absolute; inset: 0; z-index: 1;
width: 100%; height: 100%; object-fit: cover; display: block;
}
.bp-photo__img--flip { transform: scaleX(-1); }
/* scanlines + tube vignette, static: it is a still image, it should cost like one */
.bp-photo__glass {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
radial-gradient(72% 62% at 50% 46%, rgba(196,87,42,.10), rgba(196,87,42,0) 76%),
repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
box-shadow: inset 0 0 56px 14px rgba(13,15,23,.5);
opacity: .85;
}
.bp-photo__ch {
position: absolute; top: 14px; right: 16px; z-index: 3;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
color: rgba(255,214,188,.86); text-shadow: 0 0 8px rgba(196,87,42,.6);
}
.bp-photo figcaption {
max-width: 54ch; margin: 14px auto 0;
font-family: var(--font-mono); font-size: 11px; line-height: 1.75; letter-spacing: .02em;
color: var(--text-faint); text-align: center;
}
/* on the navy fear band the cream body colours would disappear */
.bp-photo--dark .bp-photo__frame { border-color: rgba(232,149,95,.34); }
.bp-photo--dark figcaption { color: rgba(255,214,188,.62); }
/* =========================================================================
4. BODY TYPE
========================================================================= */
.bp-body { padding: 20px 0 0; }
.bp-body p {
font-size: 18px; line-height: 1.75; font-weight: 300;
color: var(--text-muted); margin: 0 0 26px;
}
.bp-body p strong { font-weight: 500; color: var(--ink-navy); }
.bp-body p em { font-style: italic; color: var(--ink-navy); }
.bp-body .bp-em { color: var(--accent-rust); font-style: italic; }
/* drop cap on the opening paragraph */
.bp-lede::first-letter {
float: left;
font-family: var(--font-serif);
font-size: 78px; line-height: .78;
color: var(--accent-rust);
padding: 6px 12px 0 0;
}
.bp-lede { font-size: 19px; }
/* a section rule that reads as a channel break */
.bp-rule {
display: flex; align-items: center; gap: 14px; margin: 50px auto 44px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; color: var(--text-faint);
}
.bp-rule::before, .bp-rule::after {
content: ""; height: 1px; flex: 1;
background: linear-gradient(90deg, rgba(26,30,46,0), var(--surface-line), rgba(26,30,46,0));
}
.bp-h2 {
font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 38px);
line-height: 1.12; letter-spacing: -.015em; color: var(--ink-navy);
margin: 0 0 20px;
}
/* The semi-white pull-out with the rust rule. It used to be the last thing in the
section (hence margin-bottom: 0), and it now sits BETWEEN two paragraphs, so it
needs a bottom margin or the next paragraph butts straight into it. Top margin
collapses against the preceding p's 26px, so 34/32 keeps the body rhythm and
still reads as a lift-out rather than another paragraph. */
.bp-setup {
margin: 34px auto 32px; padding: 22px 26px;
border-left: 3px solid var(--accent-rust);
background: rgba(255,255,255,.55);
border-radius: 0 12px 12px 0;
}
.bp-setup p { margin: 0; font-size: 17px; color: var(--ink-soft); }
/* =========================================================================
5. THE THREE PILLARS ("the channels") : the centrepiece
========================================================================= */
.bp-pillars {
position: relative;
overflow-x: clip; /* scaled-up cards must never push the page sideways */
padding: 26px 0 10px;
}
.bp-pillars__head { text-align: center; margin: 0 auto 46px; max-width: 46ch; }
.bp-pillars__head .mono-label { color: var(--accent-rust); }
.bp-pillars__head h2 {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.02em;
margin: 6px 0 0; color: var(--ink-navy);
}
.bp-pillar {
position: relative;
border: 1px solid var(--surface-line);
border-radius: var(--radius);
background: linear-gradient(180deg, var(--surface-2), var(--surface));
box-shadow: var(--shadow-card);
padding: 0 0 34px;
margin: 0 0 26px;
overflow: hidden;
}
/* the channel bar across the top of each pillar: this is the TV chrome */
.bp-pillar__bar {
position: relative;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 13px 24px;
background: linear-gradient(180deg, #23263a, var(--ink-navy));
color: #fff;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
}
.bp-pillar__ch { color: rgba(255,214,188,.9); }
.bp-pillar__live { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,214,188,.6); }
.bp-pillar__word {
margin-left: auto; color: #fff; letter-spacing: .3em;
text-shadow: 0 0 16px rgba(196,87,42,.7);
}
/* the scanline texture on the bar, static, free */
.bp-pillar__bar::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px;
pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.bp-pillar__inner { padding: 30px 26px 0; }
@media (min-width: 860px) { .bp-pillar__inner { padding: 38px 44px 0; } }
.bp-pillar__num {
font-family: var(--font-serif); font-size: 58px; line-height: .9;
color: var(--accent-rust); display: block; margin-bottom: 6px;
}
.bp-pillar__title {
font-family: var(--font-serif);
font-size: clamp(27px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -.02em;
color: var(--ink-navy); margin: 0 0 8px;
}
.bp-pillar__sub {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
color: var(--text-faint); margin: 0 0 24px;
}
.bp-pillar__body { max-width: 64ch; }
.bp-pillar__body p {
font-size: 17px; line-height: 1.72; font-weight: 300; color: var(--text-muted); margin: 0 0 20px;
}
.bp-pillar__body p:last-child { margin-bottom: 0; }
.bp-pillar__kicker {
font-family: var(--font-serif) !important; font-size: 21px !important;
line-height: 1.4 !important; color: var(--ink-navy) !important;
font-weight: 400 !important;
}
.bp-pillar__kicker i { font-style: italic; color: var(--accent-rust); }
/* --- the lens-focus zoom-and-settle, the exact motion from the methodology
cards in styles.css, so the page reads as one language --- */
.js .bp-pillar { opacity: .42; transform: scale(1.06) translateY(14px); }
.js .bp-pillar.is-in { opacity: 1; transform: none; }
.js .bp-pillar.is-zooming {
transition: transform .85s cubic-bezier(.34, 1.4, .64, 1), opacity .6s ease;
will-change: transform, opacity;
}
/* the numeral settles a beat later, from a bigger scale: crafted, not uniform */
.bp-pillar__num { transform-origin: 0 50%; }
.js .bp-pillar__num { opacity: 0; transform: scale(1.25); }
.js .bp-pillar.is-in .bp-pillar__num { opacity: 1; transform: none; }
.js .bp-pillar.is-zooming .bp-pillar__num {
transition: transform .9s cubic-bezier(.34, 1.4, .64, 1) .14s, opacity .5s ease .14s;
will-change: transform, opacity;
}
/* =========================================================================
6. CASE VIGNETTES : the client stories, pulled out of the argument
========================================================================= */
.bp-vignette {
position: relative;
margin: 30px 0 0;
padding: 26px 24px 24px;
border-radius: 14px;
border: 1px solid rgba(196,87,42,.22);
background:
linear-gradient(180deg, rgba(255,244,236,.92), rgba(255,250,246,.92));
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
@media (min-width: 860px) { .bp-vignette { padding: 30px 34px 28px; } }
.bp-vignette::before {
content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
border-radius: 3px; background: linear-gradient(180deg, var(--accent-rust), rgba(196,87,42,.1));
}
.bp-vignette__tag {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
color: var(--accent-rust); margin-bottom: 10px;
}
.bp-vignette__title {
font-family: var(--font-serif); font-size: 22px; line-height: 1.2;
color: var(--ink-navy); margin: 0 0 14px;
}
.bp-vignette p {
font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--text-muted); margin: 0 0 14px;
}
.bp-vignette p:last-child { margin-bottom: 0; }
.bp-vignette__out {
margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(196,87,42,.18);
font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink-navy);
}
.bp-vignette__out b { font-weight: 500; color: var(--accent-rust); }
/* =========================================================================
7. PULL QUOTE as a broadcast lower-third
(evolved from .t-card--b in styles.css: same tube, same sweep, same rule,
scaled up to a full editorial band)
========================================================================= */
.bp-quote {
position: relative; overflow: hidden;
margin: 56px auto; padding: clamp(46px, 7vw, 78px) clamp(24px, 5vw, 62px) clamp(52px, 7vw, 78px);
border-radius: 20px;
background: radial-gradient(120% 120% at 50% 26%, #262a3e, var(--ink-navy) 58%, #10121b 100%);
border: 1px solid rgba(196,87,42,.3);
box-shadow:
inset 0 0 0 4px #0d0f17,
inset 0 0 80px rgba(0,0,0,.7),
0 26px 60px -28px rgba(26,30,46,.6);
}
.bp-quote__crt {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(60% 52% at 50% 46%, rgba(196,87,42,.26), rgba(196,87,42,0) 74%),
repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.bp-quote::after {
content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
box-shadow: inset 0 0 60px 14px rgba(0,0,0,.5);
}
.bp-quote__sweep {
position: absolute; left: -6%; right: -6%; top: 0; height: 26%; z-index: 3;
opacity: 0; pointer-events: none;
background: linear-gradient(to bottom, rgba(255,226,198,0), rgba(255,226,198,.16) 45%, rgba(255,240,225,.5) 52%, rgba(255,226,198,.14) 60%, rgba(255,226,198,0));
}
.bp-quote.is-in .bp-quote__sweep { animation: bpSweep 1.1s cubic-bezier(.35,0,.2,1) .1s 1; }
@keyframes bpSweep {
0% { transform: translateY(-130%); opacity: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { transform: translateY(430%); opacity: 0; }
}
.bp-quote__onair, .bp-quote__ch {
position: absolute; top: 18px; z-index: 5;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
color: rgba(255,214,188,.82); text-shadow: 0 0 8px rgba(196,87,42,.6);
}
.bp-quote__onair { left: 20px; display: inline-flex; align-items: center; gap: 7px; }
.bp-quote__ch { right: 20px; }
/* the quote rising out of the lower-third mask */
.bp-quote__stage { position: relative; z-index: 5; overflow: hidden; padding: 4px 0; }
/* Specificity note: .bp-quote__text is a , and it can land inside .bp-body
or .bp-fear (both of which style THEIR OWN body-copy
at 0,1,1 specificity
via ".bp-body p" / ".bp-fear p"). A bare ".bp-quote__text" is only 0,1,0, so
the ancestor's paragraph rule silently won regardless of source order,
dropping the CRT quote to muted body-text grey/small size. Qualifying with
the .bp-quote ancestor (0,2,0) is what actually wins. */
.bp-quote .bp-quote__text {
margin: 0; font-family: var(--font-serif); font-style: italic;
font-size: clamp(18px, 2.1vw, 27px); line-height: 1.35; letter-spacing: -.01em;
color: #fff6ee; text-align: center;
text-shadow: 0 2px 16px rgba(0,0,0,.5), 0 0 34px rgba(196,87,42,.26);
}
.bp-quote .bp-quote__text::before { content: "\201C"; color: var(--accent-rust); }
.bp-quote .bp-quote__text::after { content: "\201D"; color: var(--accent-rust); }
/* hidden start state is gated on : no JS, no hiding */
.js .bp-quote__text {
transform: translateY(105%); opacity: 0;
transition: transform .68s cubic-bezier(.2,.85,.25,1) .18s, opacity .45s ease .18s;
}
.js .bp-quote.is-in .bp-quote__text { transform: none; opacity: 1; }
/* the documentary rule, drawing left to right under the quote */
.bp-quote__lower {
position: absolute; left: 24px; bottom: 22px; z-index: 5;
height: 2px; width: calc(100% - 48px); border-radius: 2px;
background: linear-gradient(90deg, var(--accent-rust), rgba(196,87,42,0));
transform-origin: left center;
}
.js .bp-quote__lower { transform: scaleX(0); transition: transform .85s cubic-bezier(.2,.85,.25,1) .24s; }
.js .bp-quote.is-in .bp-quote__lower { transform: scaleX(1); }
.bp-quote__attr {
position: relative; z-index: 5; text-align: center; margin: 22px 0 0;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
color: rgba(255,214,188,.6);
}
/* =========================================================================
8. THE FEAR : full-bleed navy band, quieter, more intimate
========================================================================= */
.bp-fear {
position: relative;
margin: 70px 0;
padding: clamp(64px, 9vw, 108px) 0 clamp(56px, 8vw, 96px);
background:
radial-gradient(90% 60% at 50% 0%, rgba(196,87,42,.18), rgba(196,87,42,0) 70%),
linear-gradient(180deg, #1f2333, var(--ink-navy) 55%, #141722);
color: #efe7e0;
}
/* the band is full-bleed even though it lives inside a max-width article */
.bp-fear::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px);
opacity: .55;
}
.bp-fear__inner { position: relative; z-index: 1; max-width: 62ch; margin: 0 auto; padding: 0 24px; }
.bp-fear .mono-label { color: rgba(255,190,150,.85); }
.bp-fear__title {
font-family: var(--font-serif);
font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -.02em;
color: #fff7f0; margin: 8px 0 28px; max-width: 15ch;
}
.bp-fear__title i { font-style: italic; color: #e8955f; }
.bp-fear p {
font-size: 17.5px; line-height: 1.78; font-weight: 300;
color: rgba(239,231,224,.78); margin: 0 0 24px;
}
.bp-fear p strong { color: #fff7f0; font-weight: 400; }
/* the whispered line: the fear itself, said once, in italic serif */
.bp-fear__whisper {
font-family: var(--font-serif) !important; font-style: italic;
font-size: clamp(21px, 2.8vw, 30px) !important; line-height: 1.35 !important;
color: #ffd8bc !important; font-weight: 400 !important;
margin: 34px 0 !important; padding-left: 20px;
border-left: 2px solid rgba(196,87,42,.6);
}
.bp-fear .bp-quote { margin: 46px 0; box-shadow: inset 0 0 0 4px #0d0f17, inset 0 0 80px rgba(0,0,0,.7), 0 26px 60px -28px rgba(0,0,0,.7); }
/* =========================================================================
9. WHAT THIS MEANS IN PRACTICE : the checklist
========================================================================= */
.bp-practice { padding: 20px 0 10px; }
.bp-practice__title {
font-family: var(--font-serif); font-size: clamp(28px, 4vw, 44px);
line-height: 1.08; letter-spacing: -.02em; color: var(--ink-navy); margin: 8px 0 34px;
}
.bp-list { list-style: none; margin: 0; padding: 0; counter-reset: bp; }
.bp-item {
position: relative; counter-increment: bp;
display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
padding: 22px 4px 22px 0;
border-top: 1px solid var(--surface-line);
}
.js .bp-item { opacity: 0; transform: translateY(14px); }
.bp-item:last-child { border-bottom: 1px solid var(--surface-line); }
.js .bp-list.is-in .bp-item { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.85,.25,1); }
.js .bp-list.is-in .bp-item:nth-child(2) { transition-delay: 70ms; }
.js .bp-list.is-in .bp-item:nth-child(3) { transition-delay: 140ms; }
.js .bp-list.is-in .bp-item:nth-child(4) { transition-delay: 210ms; }
.js .bp-list.is-in .bp-item:nth-child(5) { transition-delay: 280ms; }
.bp-item__box {
display: grid; place-items: center;
width: 30px; height: 30px; margin-top: 2px;
border: 1px solid rgba(196,87,42,.4); border-radius: 8px;
background: rgba(196,87,42,.06);
font-family: var(--font-mono); font-size: 12px; color: var(--accent-rust);
}
.bp-item__box::before { content: counter(bp, decimal-leading-zero); }
.bp-item__text { font-size: 17px; line-height: 1.7; font-weight: 300; color: var(--text-muted); }
.bp-item__text b { display: block; font-weight: 500; color: var(--ink-navy); font-size: 17.5px; margin-bottom: 5px; }
/* =========================================================================
10. SIGN-OFF LOCKUP + CTA
========================================================================= */
.bp-signoff {
position: relative; overflow: hidden;
margin: 66px auto 0; padding: clamp(38px, 5vw, 58px) clamp(24px, 4vw, 48px);
border-radius: 20px;
border: 1px solid var(--surface-line);
background: linear-gradient(165deg, var(--surface-2), #fff3e9);
box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.9);
}
.bp-signoff__label {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em;
color: var(--text-faint); text-align: center; display: block; margin-bottom: 26px;
}
.bp-lockup {
display: grid; grid-template-columns: 1fr; gap: 2px;
border: 1px solid rgba(196,87,42,.25); border-radius: 14px; overflow: hidden;
background: rgba(196,87,42,.25);
}
@media (min-width: 720px) { .bp-lockup { grid-template-columns: repeat(3, 1fr); } }
.bp-lockup__cell {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 30px 16px;
background: var(--surface-2);
}
.js .bp-lockup__cell { opacity: 0; transform: scale(1.08); }
.js .bp-lockup.is-in .bp-lockup__cell {
opacity: 1; transform: none;
transition: transform .8s cubic-bezier(.34, 1.4, .64, 1), opacity .5s ease;
}
.js .bp-lockup.is-in .bp-lockup__cell:nth-child(2) { transition-delay: 110ms; }
.js .bp-lockup.is-in .bp-lockup__cell:nth-child(3) { transition-delay: 220ms; }
.bp-lockup__n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; color: var(--text-faint); }
.bp-signoff__word {
font-family: var(--font-serif); font-size: clamp(26px, 4.2vw, 40px); line-height: 1;
letter-spacing: .02em; color: var(--accent-rust);
}
.bp-lockup__gloss { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--text-faint); text-align: center; }
.bp-signoff__line {
max-width: 52ch; margin: 30px auto 0; text-align: center;
font-family: var(--font-serif); font-size: clamp(19px, 2.4vw, 25px);
line-height: 1.35; color: var(--ink-navy);
}
.bp-signoff__line i { font-style: italic; color: var(--accent-rust); }
.bp-close { padding: 8px 0 84px; }
/* =========================================================================
11. BACK / NEXT strip
========================================================================= */
.bp-next {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--surface-line);
}
.bp-next__title { font-family: var(--font-serif); font-size: 20px; color: var(--ink-navy); margin: 0; }
.bp-next__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--text-faint); display: block; margin-bottom: 6px; }
/* =========================================================================
12. BLOG INDEX (blog.html)
========================================================================= */
.bl-hero { padding: 48px 0 44px; text-align: center; }
.bl-hero__title {
font-family: var(--font-serif); font-size: clamp(36px, 6vw, 66px);
line-height: 1.04; letter-spacing: -.025em; margin: 10px auto 18px; max-width: 16ch;
color: var(--ink-navy);
}
.bl-hero__title i { font-style: italic; color: var(--accent-rust); }
.bl-hero p {
max-width: 58ch; margin: 0 auto; font-size: 17.5px; line-height: 1.65;
font-weight: 300; color: var(--text-muted);
}
.bl-grid {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
padding: 10px 0 90px;
}
/* the first (featured) post spans the full row on wide screens */
@media (min-width: 900px) { .bl-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 380px 1fr; } }
.bl-card {
position: relative; display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--surface-line); border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-card);
text-decoration: none; color: var(--ink-navy);
transition: transform .22s cubic-bezier(.2,.85,.25,1), box-shadow .22s ease, border-color .22s ease;
}
.bl-card:hover, .bl-card:focus-visible {
transform: translateY(-3px); border-color: rgba(196,87,42,.4); box-shadow: var(--shadow-float);
outline: none;
}
/* CRT thumbnail: the site's card language */
.bl-card__crt {
position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 190px;
background: radial-gradient(110% 100% at 50% 30%, #262a3e, var(--ink-navy) 60%, #10121b 100%);
border-bottom: 1px solid rgba(196,87,42,.25);
}
@media (min-width: 900px) { .bl-card--feature .bl-card__crt { aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 1px solid rgba(196,87,42,.25); } }
.bl-card__crt::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(56% 50% at 50% 46%, rgba(196,87,42,.32), rgba(196,87,42,0) 72%),
repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.bl-card__crt::after {
content: ""; position: absolute; inset: 0;
box-shadow: inset 0 0 46px 12px rgba(0,0,0,.5);
}
.bl-card__ch {
position: absolute; top: 14px; left: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
color: rgba(255,214,188,.85); text-shadow: 0 0 8px rgba(196,87,42,.6);
}
.bl-card__words {
position: absolute; inset: 0; z-index: 2; display: flex;
flex-direction: column; align-items: center; justify-content: center; gap: 4px;
font-family: var(--font-serif); font-size: clamp(17px, 2vw, 22px);
color: #fff4ea; letter-spacing: .1em;
text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 0 26px rgba(196,87,42,.3);
}
.bl-card__words span:nth-child(2) { color: #ffc79c; }
.bl-card__body { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
@media (min-width: 900px) { .bl-card--feature .bl-card__body { padding: 40px 40px 36px; justify-content: center; } }
.bl-card__meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--text-faint);
}
.bl-card__meta i { font-style: normal; color: var(--accent-rust); opacity: .55; }
.bl-card__title {
font-family: var(--font-serif); font-size: clamp(23px, 2.6vw, 32px);
line-height: 1.12; letter-spacing: -.015em; margin: 0;
}
.bl-card__teaser { font-size: 16px; line-height: 1.65; font-weight: 300; color: var(--text-muted); margin: 0; max-width: 56ch; }
.bl-card__go {
margin-top: auto; padding-top: 6px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--accent-rust);
}
.bl-card:hover .bl-card__go { color: var(--accent-rust-d); }
/* the "more coming" slot, so the grid never looks like it is missing a leg */
.bl-soon {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; min-height: 220px; padding: 30px 24px; text-align: center;
border: 1px dashed rgba(26,30,46,.16); border-radius: var(--radius);
background: rgba(255,255,255,.35);
}
.bl-soon__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--text-faint); }
.bl-soon p { margin: 0; font-family: var(--font-serif); font-size: 20px; color: var(--ink-soft); }
/* =========================================================================
13. RESPONSIVE
========================================================================= */
@media (max-width: 700px) {
.bp-hero { padding: 26px 0 4px; }
.bp-body p { font-size: 17px; }
.bp-lede { font-size: 18px; }
.bp-lede::first-letter { font-size: 62px; padding: 4px 10px 0 0; }
.bp-pillar__num { font-size: 46px; }
.bp-byline__meta { width: 100%; }
.bp-quote { padding: 44px 22px 50px; }
.bp-quote__lower { left: 18px; width: calc(100% - 36px); }
.bp-next { flex-direction: column; align-items: flex-start; }
}
/* =========================================================================
14. REDUCED MOTION : everything lands, nothing moves
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.bp-rise, .bp-pillar, .bp-pillar__num, .bp-item, .bp-lockup__cell,
.js .bp-quote__text, .js .bp-quote__lower {
opacity: 1 !important; transform: none !important; transition: none !important;
}
.bp-figure.is-live .bp-figure__scan,
.bp-quote.is-in .bp-quote__sweep,
.is-live .bp-dot { animation: none !important; }
.bp-figure__scan { display: none; }
/* the channel flip becomes an instant cut: no roll, no sweep, no tear, no static.
JS also stops the auto-cycle. The remote still changes channel. */
.bp-tv__img { transition: none !important; }
.bp-tv__img.is-rolling,
.bp-figure.is-changing .bp-tv__sweep,
.bp-figure.is-changing .bp-tv__tear,
.bp-figure.is-changing .bp-tv__tear i { animation: none !important; }
.bp-tv__sweep, .bp-tv__tear, .bp-tv__noise { display: none; }
.bp-remote__btn { transition: none; }
.bp-remote__btn:hover { transform: none; }
.bl-card { transition: none; }
.bl-card:hover, .bl-card:focus-visible { transform: none; }
}