/* ==========================================================================
albertgajsak.com
Dark editorial. One electric accent. Photography does the talking.
========================================================================== */
/* ---- self-hosted variable faces (no third-party request, no consent banner) ---- */
@font-face {
font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
src: url('../fonts/grotesk-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
src: url('../fonts/grotesk-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('../fonts/mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('../fonts/mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* ink */
--ink: #08080a;
--ink-raise: #0e0f13;
--ink-card: #14161b;
--ink-hi: #1b1e25;
/* type */
--text: #f4f3f0; /* 18.0:1 */
--text-mid: #b3b1ab; /* 9.3:1 */
--text-dim: #a09e97; /* 7.4:1 ground, 6.3:1 card */
--text-faint: #8c8a84; /* 5.8:1 ground, 4.9:1 card — was #5f5e5a at 3.08:1 */
/* accent — picked off the tungsten lamp in the workshop photos */
--amber: #ffc53d;
--amber-glow: rgba(255, 197, 61, 0.14);
--mint: #4fe3c1;
/* lines */
--line: rgba(255, 255, 255, 0.09);
--line-soft: rgba(255, 255, 255, 0.055);
--line-hard: rgba(255, 255, 255, 0.16);
/* type scale */
--f-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Display",
"Segoe UI", Inter, Roboto, system-ui, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
Consolas, "Liberation Mono", monospace;
/* metrics */
--wrap: 1180px;
--gut: clamp(1.25rem, 4vw, 3.5rem);
--sec-y: clamp(5rem, 11vw, 9.5rem);
--r: 14px;
--r-lg: 22px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* one heading-to-body gap, so the gallery hint stops colliding with its heading */
--stack: clamp(1.4rem, 2.2vw, 2.2rem);
}
/* --------------------------------------------------------------- reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scrollbar-gutter: stable; /* lightbox open no longer shifts the page */
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
body {
margin: 0;
background: var(--ink);
color: var(--text);
font-family: var(--f-display);
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
line-height: 1.68;
font-weight: 400;
letter-spacing: -0.003em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 3px;
}
.btn--fill:focus-visible, .skip:focus-visible {
outline-color: var(--ink);
box-shadow: 0 0 0 5px var(--amber);
}
/* negative offset so an overflow:auto rail cannot clip the ring */
.gal img:focus-visible, .recog__grid img:focus-visible,
.tl__shots img:focus-visible, .figure img:focus-visible {
outline-offset: -3px;
}
::selection { background: var(--amber); color: #0a0a0a; }
/* ------------------------------------------------------------- page ground */
/* faint PCB traces + a warm bloom, fixed so it reads as substrate not content */
.substrate {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(120% 70% at 78% -8%, var(--amber-glow), transparent 62%),
radial-gradient(70% 50% at 8% 12%, rgba(79, 227, 193, 0.05), transparent 60%);
}
.substrate::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M20 0v70l40 40v150'/%3E%3Cpath d='M130 260V150l-40-40V0'/%3E%3Cpath d='M0 200h90l40-40h130'/%3E%3Cpath d='M260 60H190l-30 30H60'/%3E%3Cpath d='M215 260v-80l45-45'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='70' r='2.5'/%3E%3Ccircle cx='60' cy='110' r='2.5'/%3E%3Ccircle cx='130' cy='160' r='2.5'/%3E%3Ccircle cx='90' cy='110' r='2.5'/%3E%3Ccircle cx='190' cy='60' r='2.5'/%3E%3Ccircle cx='160' cy='90' r='2.5'/%3E%3Ccircle cx='215' cy='180' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 45%, transparent 85%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 45%, transparent 85%);
}
/* ------------------------------------------------------------------ layout */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gut);
}
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
/* ------------------------------------------------------------- skip / nav */
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--amber);
color: #0a0a0a;
padding: 0.75rem 1.15rem;
font: 600 0.90rem/1 var(--f-mono);
border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.85rem var(--gut);
background: rgba(8, 8, 10, 0);
border-bottom: 1px solid transparent;
transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
backdrop-filter 0.4s var(--ease);
}
.nav.is-stuck {
background: rgba(8, 8, 10, 0.82);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
border-bottom-color: var(--line-soft);
}
.nav__mark {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font: 700 0.94rem/1 var(--f-mono);
letter-spacing: 0.02em;
margin-right: auto;
white-space: nowrap;
}
.nav__mark .mark {
width: 30px; height: 30px; flex: none;
border-radius: 8px;
filter: drop-shadow(0 2px 8px rgba(255, 197, 61, 0.28));
transition: transform 0.4s var(--ease-out), filter 0.4s var(--ease);
}
.nav__mark:hover .mark {
transform: rotate(-6deg) scale(1.06);
filter: drop-shadow(0 3px 14px rgba(255, 197, 61, 0.5));
}
.nav__mark span { color: var(--text-dim); font-weight: 400; }
.nav__links {
display: flex;
gap: 0.35rem;
list-style: none;
margin: 0; padding: 0;
}
.nav__links a {
display: block;
padding: 0.45rem 0.7rem;
border-radius: 8px;
font: 500 0.86rem/1.2 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
/* "true" is what the homepage scroll-spy writes; "page" is what the standalone
pages mark statically, and is the correct value for a link to the current page */
.nav__links a[aria-current="true"],
.nav__links a[aria-current="page"] { color: var(--amber); }
.nav__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1rem;
border: 1px solid var(--line-hard);
border-radius: 999px;
font: 600 0.86rem/1 var(--f-mono);
letter-spacing: 0.06em;
transition: border-color 0.25s, background 0.25s, color 0.25s;
white-space: nowrap;
}
.nav__cta:hover { border-color: var(--amber); color: var(--amber); background: rgba(255,197,61,0.07); }
.nav__burger {
display: none;
flex: none;
width: 40px; height: 36px;
border: 1px solid var(--line-hard);
border-radius: 9px;
background: transparent;
cursor: pointer;
position: relative;
}
.nav__burger i {
position: absolute;
left: 10px; right: 10px;
height: 1.5px;
background: var(--text);
transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav__burger i:nth-child(1) { top: 13px; }
.nav__burger i:nth-child(2) { bottom: 13px; }
.nav.is-open .nav__burger i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
/* --------------------------------------------------------------- eyebrows */
.eyebrow {
display: flex;
align-items: center;
gap: 0.8rem;
font: 500 0.82rem/1 var(--f-mono);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 1.6rem;
}
.eyebrow::before {
content: "";
width: 7px; height: 7px;
background: var(--amber);
flex: none;
transform: rotate(45deg);
}
.eyebrow::after {
content: "";
height: 1px;
flex: 1;
background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}
.eyebrow em {
font-style: normal;
color: var(--amber);
letter-spacing: 0.14em;
}
/* ---------------------------------------------------------------- headings */
h1, h2, h3, h4 {
margin: 0;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.03;
text-wrap: balance;
}
.h-sec {
font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem);
max-width: 22ch;
}
.h-sub {
font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem);
letter-spacing: -0.028em;
line-height: 1.16;
}
.lede {
font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.34rem);
line-height: 1.6;
color: var(--text-mid);
letter-spacing: -0.012em;
max-width: 62ch;
text-wrap: pretty;
}
.prose { max-width: 46ch; color: var(--text-mid); } /* ~66 chars; 64ch rendered 74 */
.h-sec + *, .h-mid + *, .h-sub + * { margin-top: var(--stack); }
.h-sec + .lede, .h-mid + .lede { margin-top: calc(var(--stack) * 0.6); }
/* mid-rank heading: speaking and gallery were opening at 27px against 62px elsewhere */
.h-mid {
font-size: clamp(1.6rem, 1.15rem + 1.75vw, 2.6rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.12;
max-width: 30ch;
text-wrap: balance;
}
.prose p { margin: 0 0 1.2em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a {
color: var(--text);
border-bottom: 1px solid rgba(255,197,61,0.5);
transition: border-color 0.2s, color 0.2s;
}
.prose a:hover { color: var(--amber); border-bottom-color: var(--amber); }
/* ------------------------------------------------------------------- hero */
.hero {
position: relative;
padding-top: clamp(7rem, 14vh, 10rem);
padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.hero__name {
font-size: clamp(3.1rem, 1.1rem + 9.4vw, 8.2rem);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 0.87;
margin: 0 0 1.35rem;
}
.hero__name span { display: block; }
.hero__name .l2 { color: var(--text); position: relative; display: inline-block; }
/* hand-drawn solder trace under the surname */
.hero__trace {
display: block;
width: min(100%, 26rem);
height: auto;
margin: -0.15rem 0 1.5rem;
overflow: visible;
}
.hero__trace path {
fill: none;
stroke: var(--amber);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: var(--len, 404);
stroke-dashoffset: var(--len, 404);
animation: trace 0.95s 0.25s cubic-bezier(0.25, 0.8, 0.3, 1) forwards;
}
.hero__trace circle { fill: var(--amber); opacity: 0; animation: pad 0.4s 1.1s ease forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes pad { to { opacity: 1; } }
.hero__role {
font: 500 0.88rem/1.5 var(--f-mono);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 1.4rem;
}
.hero__role b { color: var(--text); font-weight: 500; }
.hero__role i { color: var(--amber); font-style: normal; }
.hero__lede { margin: 0 0 2.2rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.4rem;
border-radius: 999px;
font: 600 0.90rem/1 var(--f-mono);
letter-spacing: 0.04em;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s,
color 0.25s, box-shadow 0.25s;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--fill {
background: var(--amber);
color: #0a0a0a;
box-shadow: 0 8px 30px -12px rgba(255,197,61,0.6);
}
.btn--fill:hover { background: #ffd469; transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-hard); color: var(--text); }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }
/* hero portrait */
.hero__figure {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 50px 90px -50px rgba(0,0,0,0.95);
}
.hero__figure img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
/* square keeps the whole CircuitMess wordmark; 4:5 cut it mid-letter */
object-position: 58% 22%;
}
.hero__figure::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(200deg, rgba(255,197,61,0.10), transparent 42%),
linear-gradient(0deg, rgba(8,8,10,0.55), transparent 45%);
pointer-events: none;
}
.hero__tag {
position: absolute;
left: 0.9rem; bottom: 0.9rem;
z-index: 2;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.8rem;
border-radius: 999px;
background: rgba(8,8,10,0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line);
font: 500 0.81rem/1 var(--f-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-mid);
}
.hero__tag::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 3px rgba(79,227,193,0.18);
}
/* ------------------------------------------------------------- stat strip */
.strip {
border-block: 1px solid var(--line-soft);
background: rgba(255,255,255,0.014);
overflow: hidden;
}
.strip__track {
display: flex;
gap: 0;
width: max-content;
animation: slide 46s linear infinite;
}
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.strip__set { display: flex; flex: none; }
.strip__item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 1.05rem 1.9rem;
font: 500 0.86rem/1 var(--f-mono);
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--text-dim);
white-space: nowrap;
}
.strip__item b { color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
.strip__item::after {
content: "";
width: 4px; height: 4px;
border-radius: 50%;
background: var(--amber);
opacity: 0.55;
margin-left: 0.5rem;
}
/* ------------------------------------------------------------------ about */
.about__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.about__media { display: grid; gap: 1rem; position: sticky; top: 6rem; }
.figure {
position: relative;
border-radius: var(--r);
overflow: hidden;
border: 1px solid var(--line-soft);
background: var(--ink-card);
}
.figure img { width: 100%; object-fit: cover; }
.figure figcaption {
padding: 0.7rem 0.9rem;
font: 400 0.82rem/1.45 var(--f-mono);
letter-spacing: 0.03em;
color: var(--text-faint);
border-top: 1px solid var(--line);
background: none; /* 1.5% white measured 1.02:1 — invisible, so noise */
}
.quote {
margin: 2.6rem 0 0;
padding: 1.6rem 0 0.2rem 0;
border-top: 1px solid var(--line);
position: relative;
}
.quote blockquote {
margin: 0;
font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
line-height: 1.34;
letter-spacing: -0.024em;
font-weight: 500;
color: var(--text);
text-wrap: pretty;
}
.quote blockquote::before {
content: "\201C";
color: var(--amber);
margin-right: 0.06em;
}
.quote blockquote::after { content: "\201D"; color: var(--amber); }
.quote cite {
display: block;
margin-top: 0.9rem;
font: 400 0.84rem/1.5 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
font-style: normal;
}
/* ------------------------------------------------------------- circuitmess */
.cm { background: var(--ink-raise); border-block: 1px solid var(--line-soft); }
.cm__head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(1.5rem, 4vw, 4rem);
align-items: end;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cm__logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.2rem;
font: 700 1.05rem/1 var(--f-display);
letter-spacing: -0.02em;
}
.cm__logo svg { width: 34px; height: 34px; flex: none; color: #fff; }
.cm__banner {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--line);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cm__banner img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cm__banner::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(8,8,10,0.85));
}
.cm__banner figcaption {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
padding: clamp(1rem, 3vw, 2rem);
font: 400 0.86rem/1.5 var(--f-mono);
letter-spacing: 0.04em;
color: var(--text-mid);
border: 0;
background: none;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
overflow: hidden;
}
.stat {
background: var(--ink);
padding: 1.6rem 1.4rem;
transition: background 0.3s;
}
.stat:hover { background: var(--ink-card); }
.stat b {
display: block;
font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 1;
color: var(--text);
margin-bottom: 0.55rem;
}
.stat b i { font-style: normal; color: var(--amber); }
.stat span {
display: block;
font: 400 0.84rem/1.5 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
/* ---------------------------------------------------------------- products */
.prod__head {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 3rem;
align-items: flex-end;
justify-content: space-between;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.prod__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: clamp(0.7rem, 1.4vw, 1.1rem);
}
.prod {
position: relative;
display: flex;
flex-direction: column;
padding: 1.15rem;
border: 1px solid var(--line);
border-radius: var(--r);
background:
radial-gradient(140% 55% at 50% -12%, rgba(255,236,205,0.055), transparent 66%),
var(--ink-card);
box-shadow: inset 0 1px 0 rgba(255,240,214,0.10);
overflow: hidden;
transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.4s;
}
.prod::before {
content: "";
position: absolute;
inset: -40% 30% auto -30%;
height: 90%;
background: radial-gradient(closest-side, var(--amber-glow), transparent);
opacity: 0;
transition: opacity 0.45s var(--ease);
pointer-events: none;
}
.prod:hover {
transform: translateY(-5px);
border-color: rgba(255,197,61,0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 22px 45px -25px rgba(0,0,0,0.9);
}
.prod:hover::before { opacity: 1; }
.prod__shot {
position: relative;
display: grid;
place-items: center;
/* An auto-sized implicit row grows to the image's intrinsic height, so
`max-height: 100%` had nothing definite to resolve against and 7 of 14
shots spilled over their own titles. Pin the row to the box. */
grid-template-rows: 100%;
height: 150px;
margin-bottom: 1.1rem;
}
/* promote the siblings, which then claim
their own implicit grid row — pin the img to row 1 and take the sources out. */
.prod__shot picture { display: contents; }
.prod__shot source { display: none; }
.prod__shot img {
grid-area: 1 / 1;
max-height: 100%;
width: auto;
max-width: 88%;
object-fit: contain;
filter: drop-shadow(0 14px 22px rgba(0,0,0,0.6));
transition: transform 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.prod:hover .prod__shot img { transform: scale(1.045) translateY(-3px); }
}
.prod__name {
font-size: 1.08rem;
font-weight: 600; /* 650 only resolves on SF Pro; elsewhere it snapped to 700 */
line-height: 1.25; /* was inheriting 1.03 from the heading rule */
letter-spacing: -0.02em;
margin-bottom: 0.3rem;
}
.prod__desc {
font-size: 0.89rem;
line-height: 1.5;
color: var(--text-dim);
margin: 0;
text-wrap: pretty;
}
.prod__meta {
margin-top: auto; /* bottom-aligns the hairline row across a wrapped grid */
padding-top: 0.7rem;
border-top: 1px solid var(--line-soft);
font: 500 0.81rem/1.45 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
.prod__meta i { font-style: normal; color: var(--amber); opacity: 0.9; }
.prod--wide { grid-column: span 2; }
.prod--wide .prod__shot { height: 168px; }
.note {
margin-top: 1.8rem;
max-width: 70ch; /* mono ~68 chars; was uncapped at 138 */
font: 400 0.86rem/1.6 var(--f-mono);
letter-spacing: 0.02em;
color: var(--text-faint);
}
.note a { color: var(--text-mid); border-bottom: 1px solid var(--line-hard); }
.note a:hover { color: var(--amber); border-bottom-color: var(--amber); }
/* --------------------------------------------------------------- timeline */
.tl { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.tl::before {
content: "";
position: absolute;
left: 7px; top: 6px; bottom: 6px;
width: 1px;
background: linear-gradient(180deg, var(--amber) 0%, var(--line) 22%, var(--line) 78%, transparent 100%);
}
.tl__item {
position: relative;
padding: 0 0 clamp(2.2rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3rem);
}
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 15px; height: 15px;
border-radius: 50%;
background: var(--ink);
border: 1px solid var(--line-hard);
transition: border-color 0.3s, box-shadow 0.3s;
}
.tl__item::after {
content: "";
position: absolute;
left: 5px; top: 11px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--text-faint);
transition: background 0.3s;
}
.tl__item:hover::before { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255,197,61,0.1); }
.tl__item:hover::after { background: var(--amber); }
.tl__year {
font: 600 0.85rem/1 var(--f-mono);
letter-spacing: 0.14em;
color: var(--amber);
margin-bottom: 0.6rem;
}
.tl__title {
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
font-weight: 600;
letter-spacing: -0.026em;
line-height: 1.22;
margin-bottom: 0.5rem;
}
.tl__body {
font-size: 0.97rem;
line-height: 1.62;
color: var(--text-dim);
max-width: 45ch; /* ~62 chars; 58ch rendered 79 */
margin: 0;
text-wrap: pretty;
}
.tl__shots {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.1rem;
}
.tl__shots img {
width: clamp(96px, 15vw, 148px);
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 9px;
border: 1px solid var(--line-soft);
cursor: zoom-in;
transition: transform 0.35s var(--ease), border-color 0.3s;
}
.tl__shots img:hover { transform: scale(1.04); border-color: var(--line-hard); }
/* ------------------------------------------------------------ recognition */
.awards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
gap: clamp(0.7rem, 1.5vw, 1.05rem);
}
.award {
padding: 1.5rem 1.4rem;
border: 1px solid var(--line);
border-radius: var(--r);
background:
radial-gradient(140% 55% at 50% -12%, rgba(255,236,205,0.055), transparent 66%),
var(--ink-card);
box-shadow: inset 0 1px 0 rgba(255,240,214,0.10);
transition: border-color 0.3s, transform 0.35s var(--ease);
}
.award__title { font-weight: 600; }
.award__by { margin-top: auto; }
.award:hover { border-color: var(--line-hard); transform: translateY(-3px); }
.award__year {
font: 600 0.81rem/1 var(--f-mono);
letter-spacing: 0.13em;
color: var(--amber);
margin-bottom: 0.85rem;
}
.award__title {
font-size: 1.02rem;
font-weight: 600;
letter-spacing: -0.022em;
line-height: 1.28;
margin-bottom: 0.45rem;
}
.award__by {
font-size: 0.90rem;
line-height: 1.5;
color: var(--text-dim);
margin: 0;
}
.recog__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0.8rem;
margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
/* six photos: three across gives two even rows and legible thumbnails,
instead of auto-fit's four-plus-an-orphan */
@media (min-width: 1001px) {
.recog__grid { grid-template-columns: repeat(3, 1fr); }
}
.recog__grid img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 11px;
border: 1px solid var(--line-soft);
cursor: zoom-in;
transition: transform 0.4s var(--ease), border-color 0.3s;
}
.recog__grid img:hover { transform: scale(1.02); border-color: var(--line-hard); }
/* --------------------------------------------------------------- speaking */
.speak__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(2rem, 4.5vw, 4rem);
align-items: center;
}
.talklist { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.talklist li {
display: grid;
/* fixed first column so the year gutter lines up down the whole list */
grid-template-columns: 6.5rem 1fr;
gap: 0.35rem 1.1rem;
padding: 1rem 0;
align-items: baseline; /* the year sat ~6px above its title in every row */
border-top: 1px solid var(--line-soft);
}
.talklist li:last-child { border-bottom: 1px solid var(--line-soft); }
.talklist dfn {
font: 500 0.82rem/1.7 var(--f-mono);
letter-spacing: 0.1em;
color: var(--text-faint);
font-style: normal;
}
.talklist b { font-weight: 600; letter-spacing: -0.018em; }
.talklist span { grid-column: 2; font-size: 0.92rem; color: var(--text-dim); max-width: 44ch; }
.talklist { margin: var(--stack) 0 0; }
/* ---------------------------------------------------------------- gallery */
.gal {
--rail-inset: calc((100% - min(100%, var(--wrap))) / 2 + var(--gut));
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(220px, 30vw, 340px);
gap: 0.8rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--gut);
padding: 0.25rem var(--gut) 1.5rem var(--rail-inset);
scrollbar-width: thin;
scrollbar-color: var(--line-hard) transparent;
}
.gal::-webkit-scrollbar { height: 8px; }
.gal::-webkit-scrollbar-thumb { background: var(--line-hard); border-radius: 99px; }
.gal::-webkit-scrollbar-track { background: transparent; }
.gal figure {
align-self: start;
scroll-snap-align: start;
border-radius: var(--r);
overflow: hidden;
border: 1px solid var(--line);
background: var(--ink-card);
}
.gal img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
cursor: zoom-in;
transition: transform 0.5s var(--ease);
}
/* the one portrait frame in the strip — 3:2 was cropping his head off */
.gal figure.gal--portrait img { aspect-ratio: 2 / 3; }
.gal figure:hover img { transform: scale(1.03); }
.gal figcaption {
padding: 0.65rem 0.85rem;
font: 400 0.82rem/1.45 var(--f-mono);
letter-spacing: 0.03em;
color: var(--text-faint);
border-top: 1px solid var(--line);
}
.gal__hint {
font: 400 0.82rem/1 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-top: var(--stack); /* measured 6px before — near-collision with the heading */
}
/* ----------------------------------------------------------------- contact */
.contact { border-top: 1px solid var(--line-soft); background: var(--ink-raise); }
.contact__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: clamp(2.5rem, 5vw, 4.5rem);
align-items: start;
}
.mailto {
display: inline-flex;
align-items: center;
gap: 0.9rem;
margin: 1.8rem 0 0;
font-size: clamp(1.15rem, 0.95rem + 1.5vw, 2.15rem);
font-weight: 600;
letter-spacing: -0.035em;
color: var(--text);
word-break: break-word;
transition: color 0.25s;
}
.mailto:hover { color: var(--amber); }
.mailto svg {
width: 0.85em; height: 0.85em;
flex: none;
color: var(--amber);
transition: transform 0.35s var(--ease);
}
.mailto:hover svg { transform: translate(3px, -3px); }
.copy-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.2rem; flex-wrap: wrap; }
.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 44px;
padding: 0.5rem 1rem;
border: 1px solid var(--line-hard);
border-radius: 999px;
background: transparent;
cursor: pointer;
font: 500 0.82rem/1 var(--f-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
transition: border-color 0.25s, color 0.25s;
}
.copy-btn:hover { border-color: var(--amber); color: var(--amber); }
.copy-btn[data-done="1"] { border-color: var(--mint); color: var(--mint); }
.socials {
display: grid;
/* an auto track takes its min-content width from the nowrap handles inside,
which pushed the panel 9px past a 320px viewport — cap it so the
text-overflow: ellipsis can actually do its job */
grid-template-columns: minmax(0, 1fr);
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
overflow: hidden;
}
.social {
display: flex;
align-items: center;
gap: 0.95rem;
padding: 1rem 1.2rem;
background: var(--ink);
transition: background 0.25s, padding-left 0.25s var(--ease);
}
.social:hover { background: var(--ink-card); padding-left: 1.45rem; }
.social svg { width: 19px; height: 19px; flex: none; color: var(--text-dim); transition: color 0.25s; }
.social:hover svg { color: var(--amber); }
.social__txt { min-width: 0; }
.social__txt b { display: block; font-size: 0.97rem; font-weight: 600; letter-spacing: -0.018em; }
.social__txt span {
display: block;
font: 400 0.82rem/1.4 var(--f-mono);
color: var(--text-faint);
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.social__arw { margin-left: auto; color: var(--text-faint); flex: none; transition: transform 0.25s var(--ease), color 0.25s; }
.social:hover .social__arw { transform: translate(3px, -3px); color: var(--amber); }
.socials__label {
padding: 0.7rem 1.2rem;
background: var(--ink-raise);
font: 500 0.80rem/1 var(--f-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-faint);
}
/* ------------------------------------------------------------------ footer */
.foot {
border-top: 1px solid var(--line-soft);
padding-block: 2.2rem;
display: flex;
flex-wrap: wrap;
gap: 0.8rem 2rem;
align-items: center;
justify-content: space-between;
font: 400 0.84rem/1.6 var(--f-mono);
letter-spacing: 0.05em;
color: var(--text-faint);
}
.foot a {
color: var(--text-dim);
display: inline-flex;
align-items: center;
min-height: 24px; /* WCAG 2.5.8 minimum; these are standalone, not inline */
}
.foot a:hover { color: var(--amber); }
.foot__top { display: inline-flex; align-items: center; gap: 0.5rem; }
/* --------------------------------------------------------------- lightbox */
.lb {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(4, 4, 6, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.lb[data-open="1"] { opacity: 1; visibility: visible; }
.lb img {
max-width: 100%;
max-height: 84vh;
width: auto;
border-radius: 10px;
border: 1px solid var(--line);
transform: scale(0.97);
transition: transform 0.35s var(--ease-out);
}
.lb[data-open="1"] img { transform: scale(1); }
.lb__cap {
margin-top: 1rem;
max-width: 62ch;
text-align: center;
font: 400 0.87rem/1.6 var(--f-mono);
letter-spacing: 0.03em;
color: var(--text-dim);
}
.lb__x {
position: absolute;
top: clamp(0.8rem, 2vw, 1.6rem);
right: clamp(0.8rem, 2vw, 1.6rem);
width: 44px; height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--line-hard);
border-radius: 50%;
background: rgba(255,255,255,0.04);
cursor: pointer;
transition: border-color 0.25s, color 0.25s;
}
.lb__x:hover { border-color: var(--amber); color: var(--amber); }
/* ----------------------------------------------------------- scroll reveal */
/* An animation, not a transition: `.rv.in { transform: none }` has the same
specificity as `.prod:hover` and came later in the file, so it was silently
killing the lift on 14 product cards, 12 award cards and 6 thumbnails. */
.rv { opacity: 0; }
.rv.in { animation: rise 0.58s var(--ease-out) both; }
@keyframes rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
.hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.hero__figure { max-width: 26rem; }
.about__grid,
.cm__head,
.speak__grid,
.contact__grid { grid-template-columns: 1fr; }
.about__media { position: static; grid-template-columns: 1fr 1fr; }
.prod--wide { grid-column: span 1; }
}
@media (max-width: 720px) {
.about__media { grid-template-columns: 1fr; }
.hero__name { letter-spacing: -0.045em; }
.prod__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.prod__shot { height: 118px; }
.stat { padding: 1.25rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
.rv, .rv.in { opacity: 1; animation: none; }
.gal { scroll-snap-type: none; }
.hero__trace path { stroke-dashoffset: 0; }
.hero__trace circle { opacity: 1; }
.strip__track { animation: none; }
}
/* ==========================================================================
Audit fixes — placed last so they win the cascade deliberately.
========================================================================== */
@media (min-width: 1001px) {
/* The timeline left ~45% of its width empty for 3,200px while the thumbnails
were squeezed to 148px. Moving them into that column pays for enlarging them. */
.tl__item {
display: grid;
grid-template-columns: minmax(0, 45ch) minmax(0, 1fr);
column-gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
.tl__year, .tl__title, .tl__body { grid-column: 1; }
.tl__body { max-width: none; }
.tl__shots {
grid-column: 2;
grid-row: 1 / span 4;
margin-top: 0.35rem;
}
/* 230*2 + 9.6 gap = 469.6, inside the 476.6px column, so two per row
instead of wrapping and doubling the section height */
.tl__shots img { width: clamp(150px, 16vw, 230px); aspect-ratio: 4 / 3; }
/* speaking: align the figure to the first list rule instead of floating it
in ~180px of dead centring */
.speak__grid { align-items: start; }
.speak__grid .figure { margin-top: 3.4rem; }
.speak__grid .figure img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 44% 34%;
}
/* contact left column was a 311px block beside an 1,155px list */
.contact__grid > div:first-child { position: sticky; top: 6rem; }
}
/* the one portrait frame in the timeline */
.tl__shots img[data-full*="award-trophy"] { aspect-ratio: 3 / 4; object-position: 50% 20%; }
/* 2:3 source in a 3:2 cell kept only 44% of the height */
.recog__grid img[data-full*="pcb-portrait"] { object-position: 50% 29%; }
@media (max-width: 720px) {
/* --- recognition was 3,709px: 20% of the whole mobile page ---------------- */
.awards { display: block; border-top: 1px solid var(--line-soft); }
.award {
display: grid;
grid-template-columns: 4.25rem minmax(0, 1fr);
column-gap: 0.9rem;
padding: 0.9rem 0;
border: 0;
border-bottom: 1px solid var(--line-soft);
border-radius: 0;
background: none;
box-shadow: none;
}
.award:hover { transform: none; }
.award__year { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; line-height: 1.65; }
.award__title { grid-column: 2; grid-row: 1; font-size: 1.0rem; margin-bottom: 0.15rem; }
.award__by { grid-column: 2; grid-row: 2; font-size: 0.88rem; margin-top: 0; }
.recog__grid {
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 70vw;
gap: 0.6rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding: 0 var(--gut) 0.9rem;
margin-inline: calc(-1 * var(--gut));
scrollbar-width: thin;
scrollbar-color: var(--line-hard) transparent;
}
.recog__grid > picture { scroll-snap-align: start; }
/* --- products was 3,286px, with descriptions wrapping to a 19-char measure -- */
.prod__grid {
grid-auto-flow: column;
grid-template-columns: none;
grid-template-rows: repeat(2, auto);
grid-auto-columns: 62vw;
gap: 0.7rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding: 0.25rem var(--gut) 1rem;
margin-inline: calc(-1 * var(--gut));
scrollbar-width: thin;
scrollbar-color: var(--line-hard) transparent;
}
.prod { scroll-snap-align: start; }
.prod--wide { grid-column: auto; }
.prod__grid, .recog__grid { scroll-padding-inline: var(--gut); }
.prod--wide .prod__shot { height: 118px; }
/* --- timeline rail and thumbnails at 390px -------------------------------- */
.tl__item { padding-left: 1.6rem; }
.tl::before { left: 5px; }
.tl__item::before { width: 11px; height: 11px; }
.tl__item::after { left: 3px; top: 9px; }
.tl__shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
.tl__shots img { width: 100%; aspect-ratio: 3 / 2; }
/* --- the drawer moved depending on scroll position ------------------------
backdrop-filter on .nav.is-stuck made .nav a containing block for its own
position:fixed panel, so the menu anchored to the viewport at scrollY 0 and
to the nav after 12px. Anchor it to the nav always, and make it unfocusable
when closed. */
/* --- misc ---------------------------------------------------------------- */
.prose { line-height: 1.58; }
.talklist li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 0.85rem 0; }
.talklist span { grid-column: 1; }
/* the banner scrim was built for a 988px image; at 270px the caption sat
across his shoulder. Use the .figure caption treatment instead. */
.cm__banner::after { display: none; }
.cm__banner figcaption {
position: static;
padding: 0.7rem 0.9rem;
font-size: 0.82rem;
border-top: 1px solid var(--line-soft);
color: var(--text-faint);
}
.hero__trace { width: min(100%, 15rem); }
}
/* --- elements introduced by the audit pass ------------------------------- */
/* two-up figure row, reusing the .figure treatment */
.pair {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(0.7rem, 1.5vw, 1.05rem);
margin-top: clamp(2rem, 4vw, 3rem);
}
.pair--lead { margin-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pair .figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* the swipe cue above the mobile rails — desktop does not need it */
.gal__hint--rail { display: none; }
@media (max-width: 720px) {
.gal__hint--rail { display: block; margin-top: 0; margin-bottom: 0.9rem; }
}
/* attribution required by the CC BY licence on the EC portrait */
.credit {
display: block;
margin-top: 0.45rem;
font-size: 0.78rem;
line-height: 1.5;
color: var(--text-faint);
}
.credit a { color: var(--text-dim); border-bottom: 1px solid var(--line-hard); }
.credit a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.tl__credit {
margin: 0.75rem 0 0;
font: 400 0.80rem/1.5 var(--f-mono);
letter-spacing: 0.02em;
color: var(--text-faint);
}
@media (min-width: 1001px) {
/* the last track must be flexible: a spanning item is excluded from
intrinsic sizing only if the tracks it spans include a flexible one */
.tl__item { grid-template-rows: auto auto auto 1fr; }
.tl__credit { grid-column: 2; grid-row: 5; margin-top: 0.55rem; }
/* must out-specify .speak__grid .figure img, which otherwise wins on
specificity regardless of source order */
.speak__grid .figure.speak__ec { margin-top: clamp(0.7rem, 1.5vw, 1.05rem); }
.speak__grid .figure.speak__ec img {
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: 50% 42%;
}
}
/* the Nevera thumbnail is a transparent cut-out — contain it rather than crop */
.tl__shots img[data-full*="cm-nevera"] {
object-fit: contain;
background: #0f1116;
}
/* The nav row's min-content width is ~1342px with Space Grotesk + JetBrains Mono
(it was ~1118px on the old system stack — the custom faces are wider and the
label sizes went up, and the Writing link added ~68px), so the burger has to
appear well above the 720px content breakpoint — below that the last links and
the CTA ran off the edge with no fallback (a fixed element never widens
scrollWidth, which is why every overflow sweep missed it).
Re-measure this if you add or rename a nav link. */
@media (max-width: 1349px) {
.nav__burger { display: block; }
.nav__cta { display: none; }
.nav > nav { position: static; }
.nav__links {
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
gap: 0;
padding: 0.5rem var(--gut) 1.2rem;
background: rgba(8, 8, 10, 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
transform: translateY(-104%);
visibility: hidden;
transition: transform 0.34s var(--ease), visibility 0s 0.34s;
}
.nav.is-open .nav__links {
transform: none;
visibility: visible;
transition: transform 0.34s var(--ease), visibility 0s 0s;
}
.nav__links a { padding: 0.95rem 0; border-radius: 0; }
.nav__links li:last-child a { border-bottom: 0; }
.nav__burger { width: 44px; height: 44px; }
.nav__burger i:nth-child(1) { top: 16px; }
.nav__burger i:nth-child(2) { bottom: 16px; }
.nav__mark { padding-block: 0.45rem; }
}
@media (max-width: 380px) {
.nav__mark span { display: none; } /* the " · Zagreb" suffix, ~85px */
}
/* Below 360px the 62vw rail left a 21.5-character measure. A wider card buys
~27 characters and drops the 5-line wraps from 7 cards to 1. */
@media (max-width: 359px) {
.prod__grid { grid-auto-columns: 76vw; }
}
@media print {
.substrate, .nav, .lb, .gal, .strip { display: none !important; }
body { background: #fff; color: #111; }
}
/* ============================================================== FAQ
Answer-shaped Q&A. Visible on the page because FAQPage structured data
must reflect content the visitor can actually read. */
.faq__list {
margin-top: var(--stack);
border-top: 1px solid var(--line);
}
.faq__item {
border-bottom: 1px solid var(--line);
}
.faq__item summary {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.35rem 0;
cursor: pointer;
list-style: none;
transition: color 0.3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 {
margin: 0;
flex: 1;
font: 600 clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem)/1.35 var(--f-display);
letter-spacing: -0.015em;
color: var(--text);
}
.faq__item summary i {
flex: none;
position: relative;
width: 20px; height: 20px;
transition: transform 0.4s var(--ease-out);
}
.faq__item summary i::before,
.faq__item summary i::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 2px;
border-radius: 2px;
background: var(--amber);
transform: translateY(-50%);
}
.faq__item summary i::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] summary i { transform: rotate(135deg); }
.faq__item summary:hover h3 { color: var(--amber); }
.faq__a {
padding: 0 3rem 1.6rem 0;
max-width: 74ch;
}
.faq__a p {
margin: 0;
color: var(--text-mid);
font-size: 1.0rem;
line-height: 1.72;
}
@media (max-width: 720px) {
.faq__a { padding-right: 0; }
}
/* ========================================================== PRESS KIT
Mixed orientations in one grid. Every frame sits in a 3:2 box on the page
ground with object-fit: contain, so nothing is cropped and every caption
still starts on the same baseline. `.press__grid .figure img` is (0,2,1),
which is what beats `.figure img`'s `cover` — the same specificity trap
that once leaked the stage photo's 4:5 crop onto the Commission portrait,
used deliberately here. */
.press__actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: var(--stack);
}
.press__actions .btn {
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
border-radius: var(--r);
padding: 0.85rem 1.35rem;
}
.press__actions .btn span {
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.07em;
color: var(--text-faint);
}
.press__actions .btn--fill span { color: rgba(8, 8, 10, 0.62); }
.press__tier {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 3.4rem 0 0;
font: 500 0.80rem/1 var(--f-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
}
.press__tier::before {
content: "";
width: 7px; height: 7px;
flex: none;
transform: rotate(45deg);
background: var(--mint);
}
.press__tier--credit::before { background: var(--amber); }
.press__note {
margin: 0.85rem 0 0;
max-width: 70ch;
font-size: 0.95rem;
line-height: 1.62;
color: var(--text-mid);
}
.press__note em { font-style: normal; color: var(--text); }
.press__grid {
list-style: none;
margin: 1.7rem 0 0;
padding: 0;
display: grid;
gap: 1.1rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.press__item { min-width: 0; }
.press__grid .figure { display: flex; flex-direction: column; height: 100%; }
.press__grid .figure img {
aspect-ratio: 3 / 2;
width: 100%;
height: auto;
object-fit: contain;
background: var(--ink);
}
.press__grid .figure figcaption {
display: flex;
flex-direction: column;
gap: 0.55rem;
flex: 1;
font-family: var(--f-display);
letter-spacing: normal;
}
.press__cap {
font-size: 0.855rem;
line-height: 1.5;
color: var(--text-mid);
}
.press__by {
font: 500 0.72rem/1.4 var(--f-mono);
letter-spacing: 0.04em;
color: var(--amber);
}
.press__row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: auto;
padding-top: 0.55rem;
border-top: 1px solid var(--line);
}
.press__spec {
font: 400 0.70rem/1 var(--f-mono);
letter-spacing: 0.03em;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.press__dl {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
padding: 0.42rem 0.7rem;
border: 1px solid var(--line);
border-radius: 999px;
font: 500 0.74rem/1 var(--f-mono);
letter-spacing: 0.05em;
color: var(--text);
text-decoration: none;
transition: background 0.2s var(--ease), border-color 0.2s, color 0.2s;
}
.press__dl svg { width: 13px; height: 13px; flex: none; }
.press__dl:hover,
.press__dl:focus-visible { background: var(--amber); border-color: var(--amber); color: var(--ink); }
@media (max-width: 520px) {
.press__actions .btn { width: 100%; }
.press__grid { grid-template-columns: 1fr; }
}
/* ========================================================= CAMPAIGN BAND
Deliberate stylistic break: this band borrows the Kickstarter campaign's
own synthwave key art (neon magenta/cyan on deep violet, striped sun,
perspective floor) so it reads as campaign artwork rather than as part of
the biography. Its palette is scoped to .ks and never touches the site
tokens. The scene is CSS + inline SVG — no new raster assets, and none of
the campaign's own imagery is rehosted. */
.ks {
--ks-ground: #0a0418;
--ks-deep: #170a2c;
--ks-magenta:#ff2d95;
--ks-cyan: #22e3ff;
--ks-violet: #8b3dff;
--ks-sun-a: #ffc857;
--ks-sun-b: #ff4d6d;
position: relative;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(120% 90% at 50% 6%, rgba(139, 61, 255, 0.42) 0%, transparent 62%),
linear-gradient(180deg, var(--ks-deep) 0%, var(--ks-ground) 72%);
border-block: 1px solid rgba(255, 45, 149, 0.28);
padding-block: clamp(3.4rem, 7vw, 6rem);
color: #f6f2ff;
}
/* ---- scene */
.ks__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ks__sun {
position: absolute;
left: 50%;
top: clamp(-40px, 1vw, 10px);
width: clamp(300px, 42vw, 620px);
aspect-ratio: 1;
transform: translateX(-50%);
border-radius: 50%;
background: linear-gradient(180deg, var(--ks-sun-a) 0%, var(--ks-sun-b) 78%);
opacity: 0.5;
filter: blur(0.4px);
}
/* the outrun sun: bars in the ground colour eat the lower half of the disc */
.ks__sun::after {
content: "";
position: absolute;
inset: 42% 0 0;
background: repeating-linear-gradient(
180deg,
transparent 0 7px,
var(--ks-deep) 7px 13px);
}
.ks__floor {
position: absolute;
left: 50%;
bottom: -6%;
width: min(1600px, 148%);
height: 46%;
transform: translateX(-50%);
opacity: 0.5;
}
.ks__tri {
position: absolute;
left: 50%;
top: 8%;
width: clamp(230px, 30vw, 420px);
transform: translateX(-50%);
opacity: 0.42;
filter: drop-shadow(0 0 14px rgba(255, 45, 149, 0.85));
}
/* ---- layout */
.ks__inner {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(1.6rem, 4vw, 4rem);
align-items: center;
}
/* ---- copy */
.ks__status {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 1.4rem;
padding: 0.45rem 0.9rem 0.45rem 0.7rem;
border: 1px solid rgba(34, 227, 255, 0.45);
border-radius: 999px;
background: rgba(10, 4, 24, 0.55);
/* line-height 1 crushed the two wrapped lines together once the status line
grew from "Launching soon" to the funded copy */
font: 500 0.74rem/1.45 var(--f-mono);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ks-cyan);
}
.ks__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ks-cyan);
box-shadow: 0 0 9px var(--ks-cyan);
}
.ks__status i { font-style: normal; opacity: 0.55; margin-inline: 0.1rem; }
/* ---- funded / countdown / deadline -----------------------------------------
Three figures, not a live feed: only the middle one moves, and it is computed
from the deadline in `data-deadline` — the page still makes zero network
requests, so there is nothing to consent to and nothing to break offline. */
.ks__stats {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0 0 1.7rem;
padding: 0;
}
.ks__stat {
flex: 1 1 8.5rem;
min-width: 0;
padding: 0.85rem 1rem 0.9rem;
border: 1px solid rgba(34, 227, 255, 0.22);
border-radius: 12px;
background: rgba(10, 4, 24, 0.5);
}
.ks__stat dt {
margin: 0 0 0.4rem;
font: 500 0.66rem/1.2 var(--f-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a396c4;
}
/* wrap, do not nowrap the whole line: three cards on one row leaves ~120px of
content each at 521px, and "10 Oct 16:59 CEST" spilled 54px past the border.
The number and the label each stay unbroken; the label drops to its own line
when it has to, and the row's default stretch keeps all three cards level. */
.ks__stat dd {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.1rem 0.34rem;
}
.ks__stat dd b {
font: 700 1.85rem/1.06 var(--f-display);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: #fff;
}
.ks__stat dd b time { font: inherit; letter-spacing: inherit; }
.ks__stat dd span {
font: 500 0.74rem/1.3 var(--f-mono);
letter-spacing: 0.06em;
white-space: nowrap;
color: #cdc2e4;
}
.ks__stat--clock {
border-color: rgba(255, 45, 149, 0.45);
box-shadow: 0 0 22px -10px rgba(255, 45, 149, 0.9) inset;
}
.ks__stat--clock dd b { color: var(--ks-magenta); }
/* once the deadline passes the counter would read "0 days" for ever */
.ks__stats[data-ended] .ks__stat--clock dd span { display: none; }
.ks__stats[data-ended] .ks__stat--clock dd b { font-size: 1.35rem; }
/* ---- thank-you band */
.ks__thanks {
margin-top: clamp(2.2rem, 4vw, 3.4rem);
padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.3rem, 3vw, 2.6rem);
border: 1px solid rgba(255, 45, 149, 0.32);
border-radius: var(--r-lg);
/* an opaque base under the tint: without it the perspective floor lines read
straight through the panel and cut across the copy */
background:
linear-gradient(100deg, rgba(255, 45, 149, 0.14), rgba(34, 227, 255, 0.09) 68%, transparent),
rgba(9, 4, 22, 0.88);
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2.6rem);
align-items: start;
}
.ks__thanks-k {
margin: 0;
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(1.7rem, 0.9rem + 3vw, 3.1rem);
line-height: 0.95;
letter-spacing: -0.03em;
text-transform: uppercase;
max-width: 5ch;
background: linear-gradient(96deg, var(--ks-cyan) 0%, #ffffff 44%, var(--ks-magenta) 96%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ks__thanks-b { color: #ded4f2; max-width: 62ch; }
.ks__thanks-b p { margin: 0 0 0.9rem; font-size: 0.97rem; line-height: 1.62; }
.ks__thanks-b p:last-child { margin-bottom: 0; }
.ks__thanks-b b { color: #fff; font-weight: 600; }
.ks__h {
margin: 0 0 1.15rem;
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.1rem);
line-height: 0.98;
letter-spacing: -0.028em;
text-transform: uppercase;
}
.ks__h span { display: block; }
.ks__h span:first-child {
background: linear-gradient(96deg, #ffffff 4%, #ffd9f0 34%, var(--ks-magenta) 72%, var(--ks-violet) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ks__h span:last-child {
background: linear-gradient(96deg, var(--ks-cyan) 0%, #b9f4ff 46%, #ffffff 92%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ks__lede {
margin: 0 0 1.5rem;
max-width: 54ch;
font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
line-height: 1.62;
color: #ded4f2;
}
.ks__lede b { color: #fff; font-weight: 600; }
.ks__facts {
list-style: none;
margin: 0 0 1.9rem;
padding: 0;
display: grid;
gap: 0.7rem;
max-width: 58ch;
}
.ks__facts li {
position: relative;
padding-left: 1.5rem;
font-size: 0.925rem;
line-height: 1.55;
color: #cdc2e4;
}
.ks__facts li::before {
content: "";
position: absolute;
left: 0; top: 0.52em;
width: 8px; height: 8px;
transform: rotate(45deg);
background: var(--ks-magenta);
box-shadow: 0 0 8px rgba(255, 45, 149, 0.9);
}
.ks__facts b { color: #fff; font-weight: 600; }
/* ---- buttons */
.ks__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.ks__btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.95rem 1.5rem;
border-radius: 999px;
border: 1px solid transparent;
font: 600 0.92rem/1 var(--f-mono);
letter-spacing: 0.04em;
text-decoration: none;
color: #16031f;
background: linear-gradient(100deg, var(--ks-cyan), #ffffff 52%, var(--ks-magenta));
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 12px 34px -12px rgba(255, 45, 149, 0.8);
transition: transform 0.24s var(--ease), box-shadow 0.24s, filter 0.24s;
}
.ks__btn svg { width: 15px; height: 15px; flex: none; }
.ks__btn:hover, .ks__btn:focus-visible {
transform: translateY(-2px);
filter: saturate(1.15);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 18px 44px -12px rgba(255, 45, 149, 0.95);
}
.ks__btn--ghost {
color: #eae2ff;
background: rgba(10, 4, 24, 0.45);
border-color: rgba(234, 226, 255, 0.28);
box-shadow: none;
}
.ks__btn--ghost:hover, .ks__btn--ghost:focus-visible {
border-color: var(--ks-cyan);
color: #fff;
box-shadow: 0 0 0 1px rgba(34, 227, 255, 0.35);
}
.ks__btn:focus-visible, .ks__btn--ghost:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ks__fine {
margin: 1.4rem 0 0;
max-width: 56ch;
font-size: 0.82rem;
line-height: 1.55;
color: #a396c4;
}
/* ---- product */
.ks__art { display: flex; justify-content: center; align-items: center; position: relative; }
.ks__art::before {
content: "";
position: absolute;
width: 78%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 45, 149, 0.5) 0%, rgba(139, 61, 255, 0.22) 44%, transparent 72%);
filter: blur(14px);
}
.ks__art img {
position: relative;
width: auto;
max-width: 100%;
max-height: clamp(320px, 42vw, 520px);
height: auto;
filter: drop-shadow(0 26px 44px rgba(4, 0, 12, 0.85));
}
@media (max-width: 880px) {
.ks__inner { grid-template-columns: 1fr; }
.ks__art { order: -1; }
.ks__art img { max-height: 300px; }
.ks__floor { height: 34%; }
}
@media (max-width: 620px) {
.ks__thanks { grid-template-columns: 1fr; }
.ks__thanks-k { max-width: none; }
}
@media (max-width: 520px) {
.ks__cta .ks__btn { width: 100%; justify-content: center; }
/* three 8.5rem cards need 25.5rem + gaps; below that they wrap 2 + 1 ragged */
.ks__stats { display: grid; grid-template-columns: 1fr 1fr; }
.ks__stat:last-child { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
.ks__btn { transition: none; }
}
/* The chrome wordmark relies on background-clip:text with a transparent
colour. Without that pairing the heading would render invisible, so give
any engine that lacks it a solid colour instead. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.ks__h span:first-child { color: #ff8dc7; background: none; }
.ks__h span:last-child { color: #9df0ff; background: none; }
.ks__thanks-k { color: #ff8dc7; background: none; }
}
/* ==========================================================================
WRITING — the homepage teaser, /blog/ and the article pages
Same ink, same amber, same measure as the rest of the site. No new fonts,
no new colours, no new JS beyond what main.js already ships.
========================================================================== */
/* ---- slim nav -------------------------------------------------------------
The homepage nav carries eight section anchors and needs the drawer from
1349px down. The standalone pages carry four links and a CTA, so they opt
back out of the drawer — but only from 800px up: measured min-content is
793px at that gutter, and opting out at 720px put 72px of the row off-screen
with no hamburger to fall back to. Same failure mode as the homepage nav in
§9 of CONTENT-NOTES, and just as invisible to a scrollWidth sweep.
This has to sit after the max-width:1349px block to win. */
@media (min-width: 800px) and (max-width: 1349px) {
.nav--slim .nav__burger { display: none; }
.nav--slim .nav__cta { display: inline-flex; }
.nav--slim > nav { position: static; }
.nav--slim .nav__links {
position: static;
flex-direction: row;
gap: 0.35rem;
padding: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 0;
transform: none;
visibility: visible;
transition: none;
}
.nav--slim .nav__links a { padding: 0.45rem 0.7rem; border-radius: 8px; }
}
/* Standalone pages have no hero, so the fixed nav would sit on top of the first
thing in . The nav measures 73px tall at every width, and the old
clamp bottomed out at 4.5rem = 72px — the eyebrow's top edge landed 1px
*behind* the nav on a phone. The floor is now 6.5rem, which clears it with
room to breathe at 320px and up. */
.page-top { padding-top: clamp(6.5rem, 5rem + 6vw, 9rem); }
/* ---- the entry list (identical markup on the homepage and on /blog/) */
.wr__list {
list-style: none;
margin: var(--stack) 0 0;
padding: 0;
border-top: 1px solid var(--line-soft);
}
.wr__item { border-bottom: 1px solid var(--line-soft); }
.wr__link {
display: grid;
grid-template-columns: 13rem minmax(0, 1fr);
gap: clamp(0.9rem, 3vw, 2.5rem);
align-items: start;
padding: clamp(1.4rem, 2.6vw, 2.15rem) clamp(0.6rem, 1.4vw, 1.1rem);
margin-inline: clamp(-1.1rem, -1.4vw, -0.6rem);
border-radius: var(--r);
transition: background 0.25s var(--ease);
}
.wr__link:hover, .wr__link:focus-visible { background: rgba(255, 255, 255, 0.035); }
.wr__meta {
margin: 0;
font: 500 0.76rem/1.5 var(--f-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-faint);
}
.wr__meta i { font-style: normal; opacity: 0.5; margin-inline: 0.35rem; }
.wr__meta b { color: var(--amber); font-weight: 500; }
.wr__title {
margin: 0 0 0.55rem;
font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
font-weight: 600;
line-height: 1.22;
letter-spacing: -0.025em;
text-wrap: balance;
transition: color 0.2s;
}
.wr__link:hover .wr__title, .wr__link:focus-visible .wr__title { color: var(--amber); }
.wr__excerpt {
margin: 0;
max-width: 52ch;
color: var(--text-mid);
font-size: 0.97rem;
line-height: 1.6;
text-wrap: pretty;
}
.wr__more {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.9rem;
font: 600 0.78rem/1 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
transition: color 0.2s, gap 0.25s var(--ease);
}
.wr__more svg { width: 13px; height: 13px; flex: none; }
.wr__link:hover .wr__more, .wr__link:focus-visible .wr__more { color: var(--amber); gap: 0.75rem; }
/* the "everything else" link under the homepage teaser */
.wr__all { margin-top: 2rem; }
.wr__empty {
margin: var(--stack) 0 0;
padding: 2rem 1.4rem;
border: 1px dashed var(--line);
border-radius: var(--r);
color: var(--text-dim);
text-align: center;
}
@media (max-width: 720px) {
.wr__link { grid-template-columns: 1fr; gap: 0.7rem; }
}
/* ---- article page */
/* padding-bottom, not padding-block: the shorthand would reset the padding-top
.page-top sets above and drop the article title under the fixed nav */
.art { padding-bottom: var(--sec-y); }
.art__wrap {
width: 100%;
max-width: 46rem;
margin-inline: auto;
padding-inline: var(--gut);
}
.art__back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
font: 500 0.76rem/1 var(--f-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
transition: color 0.2s, gap 0.25s var(--ease);
}
.art__back svg { width: 13px; height: 13px; flex: none; }
.art__back:hover { color: var(--amber); gap: 0.75rem; }
.art__head { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line-soft); }
.art__title {
margin: 0.9rem 0 0;
font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.038em;
text-wrap: balance;
}
.art__standfirst {
margin: 1.1rem 0 0;
font-size: clamp(1.03rem, 0.98rem + 0.4vw, 1.2rem);
line-height: 1.55;
color: var(--text-mid);
text-wrap: pretty;
}
/* ---- article body */
.art__body { margin-top: clamp(2rem, 4vw, 3rem); color: var(--text-mid); }
.art__body > :first-child { margin-top: 0; }
.art__body p { margin: 0 0 1.35em; line-height: 1.72; text-wrap: pretty; }
.art__body strong { color: var(--text); font-weight: 600; }
.art__body em { color: var(--text-mid); }
.art__body h2 {
margin: 2.6em 0 0.7em;
font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.72rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.028em;
color: var(--text);
text-wrap: balance;
}
.art__body h3 {
margin: 2.1em 0 0.6em;
font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.art__body a {
color: var(--text);
border-bottom: 1px solid var(--line-hard);
transition: color 0.2s, border-color 0.2s;
}
.art__body a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.art__body ul, .art__body ol { margin: 0 0 1.35em; padding-left: 1.35em; }
.art__body li { margin-bottom: 0.55em; line-height: 1.66; }
.art__body li::marker { color: var(--amber); }
.art__body blockquote {
margin: 1.9em 0;
padding: 0.15em 0 0.15em 1.35em;
border-left: 2px solid var(--amber);
color: var(--text);
font-size: 1.06rem;
line-height: 1.62;
}
.art__body blockquote p:last-child { margin-bottom: 0; }
.art__body hr { height: 1px; border: 0; background: var(--line-soft); margin: 2.6em 0; }
.art__body figure { margin: 2em 0; }
.art__body figure img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.art__body figcaption {
margin-top: 0.7rem;
font: 400 0.8rem/1.55 var(--f-mono);
letter-spacing: 0.02em;
color: var(--text-faint);
}
/* numbers tables — the campaign figures post lives or dies on this reading well */
.art__table { overflow-x: auto; margin: 2em 0; }
.art__table table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.art__table th, .art__table td {
padding: 0.7rem 0.9rem;
text-align: left;
border-bottom: 1px solid var(--line-soft);
font-size: 0.9rem;
line-height: 1.45;
}
.art__table th {
font: 500 0.72rem/1.4 var(--f-mono);
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--text-faint);
white-space: nowrap;
}
.art__table td:first-child { color: var(--text); font-weight: 600; }
.art__table td.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a row of headline figures inside a post — auto-fit so 3 or 4 both sit well,
and the numbers are tabular so a column of them lines up */
.art__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: 0.7rem;
margin: 2.2em 0;
}
.art__stat {
padding: 1.1rem 1.15rem 1.2rem;
border: 1px solid var(--line);
border-radius: var(--r);
background: rgba(255, 255, 255, 0.02);
}
.art__stat b {
display: block;
font: 700 1.75rem/1.05 var(--f-display);
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
color: var(--amber);
}
.art__stat span {
display: block;
margin-top: 0.45rem;
font: 500 0.68rem/1.4 var(--f-mono);
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--text-faint);
}
/* a pulled-out note — used for the "these are snapshot figures" caveats */
.art__note {
margin: 2em 0;
padding: 1.15rem 1.3rem;
border: 1px solid var(--line);
border-left: 2px solid var(--amber);
border-radius: 0 var(--r) var(--r) 0;
background: rgba(255, 197, 61, 0.035);
font-size: 0.92rem;
line-height: 1.62;
color: var(--text-mid);
}
.art__note p { margin: 0 0 0.8em; }
.art__note p:last-child { margin-bottom: 0; }
/* ---- article footer */
.art__foot {
margin-top: clamp(2.6rem, 5vw, 4rem);
padding-top: clamp(1.6rem, 3vw, 2.2rem);
border-top: 1px solid var(--line-soft);
display: flex;
flex-wrap: wrap;
gap: 0.8rem 1.4rem;
align-items: center;
justify-content: space-between;
}
.art__foot p { margin: 0; color: var(--text-dim); font-size: 0.9rem; max-width: 42ch; }
/* ---- RSS chip, used on /blog/ and in the article footer */
.rss {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.95rem;
border: 1px solid var(--line-hard);
border-radius: 999px;
font: 600 0.76rem/1 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.rss svg { width: 13px; height: 13px; flex: none; }
.rss:hover { border-color: var(--amber); color: var(--amber); background: rgba(255, 197, 61, 0.07); }
/* for on the figure tables: named for screen readers, off-screen for
everyone else. Not `display:none`, which would drop it from the a11y tree. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
SUBSCRIBE
One component, four placements: the site footer, the homepage Writing
section, /blog/ and the foot of each post. It is a real