/* ==========================================================================
mattburdynowski — site stylesheet
One file, no build step, no CDN, no JS. Link from every page:
Tonebank Afro-Harmonic
Sequencer Founding developer ·
node.audio
Drop the leading em dash and the middot between subtitle and role —
the CSS supplies the separation. Entries with no subtitle can use
.where alone; entries with no role can use .what alone.
3. LESSONS PAGE — add class="lessons" to its . This keeps the site
header and nav but sets the warmer register: larger type, sentence-case
headings, more space.
Nav: mark the current page's link with aria-current="page".
========================================================================== */
:root {
--bg: oklch(0.972 0.018 192); /* full-bleed turquoise tint */
--ink: #14181a; /* body text, rules, buttons */
--ink-soft: #35403f; /* tagline, form labels */
--grey: #566063; /* .sub, descriptions, meta */
--grey-soft: #6b7574; /* .where line, captions */
--faint: #a9b4b3; /* middots, separators */
--rule: #cbd7d6; /* hairlines, hr */
--underline: #aebbba; /* link underline, resting */
--field: #ffffff;
--sans: 'Gill Sans', 'Gill Sans MT', 'Gill Sans Nova', Calibri,
'Trebuchet MS', 'Segoe UI', sans-serif;
--measure: 40rem; /* ~62 characters at the body size */
--page-pad: 2rem;
}
/* --------------------------------------------------------------------------
Reset & page
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
max-width: calc(44rem + var(--page-pad) * 2);
margin: 0 auto;
padding: 3rem var(--page-pad) 5rem;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 1rem;
line-height: 1.6;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* One centred column: itself is the column, so no child rule can
knock an element out of alignment with its neighbours. */
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--ink); color: var(--bg); }
/* --------------------------------------------------------------------------
Links — visible grey underline that darkens on hover (no hover-only reveal)
-------------------------------------------------------------------------- */
a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--underline);
transition: border-color .15s ease;
}
a:hover { border-bottom-color: var(--ink); }
a:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 1px;
}
/* --------------------------------------------------------------------------
Header — name, they/them, tagline with thick rule, nav
-------------------------------------------------------------------------- */
header h1 {
margin: 0;
font-size: clamp(1.75rem, 6vw, 2.25rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.01em;
text-transform: uppercase;
}
/* Pronouns sit inline after the name, in brackets, at reading case.
Lifted off the baseline so they optically centre against the capitals
instead of hanging below them — raise or lower this one value to taste. */
header h1 .pronouns {
font-size: .42em;
font-weight: 400;
letter-spacing: .01em;
text-transform: none;
color: var(--grey);
white-space: nowrap;
vertical-align: .22em; /* just enough that the brackets don't hang below
the name's baseline — not optically centred */
}
.tagline {
margin: .875rem 0 0;
padding-bottom: .625rem;
border-bottom: 3px solid var(--ink);
font-size: .71875rem;
line-height: 1.9; /* room for the caps when it wraps */
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-soft);
overflow-wrap: break-word;
text-wrap: pretty;
}
nav {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.375rem;
margin: 1rem 0 2.5rem;
font-size: .875rem;
}
nav a { border-bottom-color: var(--underline); }
nav a[aria-current="page"] {
border-bottom: 2px solid var(--ink);
padding-bottom: 1px;
}
/* --------------------------------------------------------------------------
Headings & rules
-------------------------------------------------------------------------- */
h1, h2, h3 { text-wrap: balance; }
/* Page titles (Work, Writing, Contact) — thick black underline, CV-style.
inline-block so the rule stops at the word. */
main > h1,
body > h1 {
display: inline-block;
margin: 3rem 0 1.5rem;
padding-bottom: 3px;
border-bottom: 3px solid var(--ink);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
}
h2 {
display: inline-block;
margin: 2.75rem 0 1.375rem;
padding-bottom: 3px;
border-bottom: 3px solid var(--ink);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
}
hr {
margin: 2.25rem 0;
border: none;
border-top: 1px solid var(--rule);
}
p { margin: 0 0 1.0625rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
/* .sub — grey supporting line (page intros, media links, "CV on request") */
.sub {
color: var(--grey);
font-size: .875rem;
line-height: 1.55;
}
.sub a { border-bottom-color: var(--rule); }
/* --------------------------------------------------------------------------
Home — long-form prose with one pulled-out bold line
-------------------------------------------------------------------------- */
body > p {
font-size: 1.0625rem;
line-height: 1.7;
}
body > p > strong:only-child {
display: block;
font-size: 1.125rem;
line-height: 1.55;
}
/* --------------------------------------------------------------------------
Work — dense; single column, images full width of the measure
-------------------------------------------------------------------------- */
article { margin: 0; }
article h3 {
margin: 0;
max-width: var(--measure);
font-size: 1.3125rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.005em;
text-wrap: pretty;
}
/* .role wraps the subtitle + role/company. Subtitle sits at the title's size,
separated only by weight, colour and a hairline. */
.role {
font-size: inherit;
font-weight: 400;
color: var(--grey);
}
.role .what {
font-weight: 400;
color: #58635f;
}
.role .what::before {
content: '|';
color: #b3bebc;
font-weight: 300;
padding: 0 .1875rem 0 0;
}
.role .where {
display: block;
margin-top: .6875rem;
font-size: .65625rem;
font-weight: 400;
letter-spacing: .09em;
line-height: 1.7;
text-transform: uppercase;
color: var(--grey-soft);
}
.role .where a { border-bottom-color: #bfcac9; }
article p { font-size: .90625rem; line-height: 1.6; }
article h3 + p,
article h3 + .sub,
article h3 + .gallery { margin-top: 1.125rem; }
article img { margin: .875rem 0; }
/* Photo grid — uniform tiles so every row lines up and the block ends flush.
Mixed portrait/landscape shots are centre-cropped to fit. No JS. */
/* Mosaic. gallery.js sizes each photo from its own proportions and scales every
row to fill the column exactly — so nothing is cropped, row heights vary, and
the block still ends flush on both edges. The CSS here is only the fallback
for before the script runs (or if it doesn't). */
.gallery {
display: flex;
flex-wrap: wrap;
gap: .375rem;
max-width: var(--measure);
margin: 1.125rem 0 1.375rem;
}
.gallery img {
height: 8rem;
width: auto;
max-width: 100%;
margin: 0;
border-radius: 2px;
cursor: zoom-in;
}
/* once laid out, widths and heights are set inline by the script */
.gallery.is-laid-out img { max-width: none; }
.gallery img:hover,
.gallery img:focus-visible { opacity: .88; }
img.shot { cursor: zoom-in; }
/* Logos and artwork must not be cropped — fit inside the tile instead. */
.gallery img.whole {
object-fit: contain;
background: #fff;
}
@media (max-width: 34rem) {
.gallery img { height: 6.5rem; }
}
/* A single wide image (e.g. a UI screenshot) — shown whole, never cropped. */
.shot {
display: block;
width: 100%;
max-width: var(--measure);
margin: 1.125rem 0 1.375rem;
border-radius: 2px;
}
/* Media links — a labelled list, one per line. Nothing wraps mid-item, so the
separators that used to run the items together are gone. */
.media {
max-width: var(--measure);
margin: 1.375rem 0 0;
}
.media .label {
display: block;
margin-bottom: .4375rem;
font-size: .6875rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--grey-soft);
}
.media ul {
margin: 0;
padding: 0;
list-style: none;
}
.media li {
margin: 0 0 .3125rem;
font-size: .875rem;
line-height: 1.5;
color: var(--grey);
}
.media li:last-child { margin-bottom: 0; }
.media li .role-note { color: var(--grey-soft); }
.media .caption {
margin: .625rem 0 0;
font-size: .8125rem;
line-height: 1.5;
color: var(--grey-soft);
}
/* --------------------------------------------------------------------------
Writing index — ul.essays
-------------------------------------------------------------------------- */
.essays {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
display: flex;
flex-direction: column;
gap: 1.375rem;
}
.essays a {
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.3;
}
.essays p {
margin: .375rem 0 0;
font-size: .9375rem;
line-height: 1.55;
color: var(--grey);
}
/* --------------------------------------------------------------------------
Essay pages — generous. This is where 1,800 words have to stay comfortable.
-------------------------------------------------------------------------- */
h1.essay {
display: block; /* overrides the caps page-title treatment */
margin: 2rem 0 1.5rem;
padding: 0;
border: none;
max-width: 22ch;
font-size: clamp(1.5rem, 5.5vw, 1.875rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
text-transform: none;
}
/* Essay prose is scoped to the article that actually contains h1.essay, so the
Work page's entries keep their denser setting. */
article:has(> h1.essay) > p:not(.back):not(.sub) {
max-width: 38rem;
margin-bottom: 1.125rem;
font-size: 1.1875rem;
line-height: 1.78;
}
em { font-style: italic; }
.back {
margin-top: 2.5rem;
font-size: .875rem;
line-height: 1.55;
color: var(--grey);
}
.back a { border-bottom-color: var(--rule); }
/* --------------------------------------------------------------------------
Quotes & .note
-------------------------------------------------------------------------- */
blockquote {
margin: 0 0 1.625rem;
padding: 0 0 0 1.625rem;
border-left: 2px solid #b9c5c4;
}
blockquote p {
margin: 0;
max-width: 34rem;
font-size: 1.125rem;
line-height: 1.7;
font-style: italic;
color: #232c2b;
text-wrap: pretty;
}
/* .note — attribution under a quote: small caps, upright, so the credit
doesn't read in the same voice as the quote. */
.note {
margin: .625rem 0 0;
padding: 0;
border: none;
font-family: inherit;
font-size: .75rem;
font-style: normal;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--grey);
}
.note::before { content: none; }
/* A .note used outside a blockquote (an aside) keeps a quieter italic form. */
p.note:not(blockquote .note) {
font-size: .875rem;
font-style: italic;
letter-spacing: 0;
text-transform: none;
color: var(--grey-soft);
}
/* --------------------------------------------------------------------------
Lessons — body class="lessons". Full header + nav, warmer register:
bigger type, sentence-case headings, more air.
-------------------------------------------------------------------------- */
/* Scoped with > and to sections so these don't out-specify the shared header
rules (header h1, header .sub, .tagline) once Lessons gets the site header. */
.lessons > h1 {
display: block;
margin: 2.5rem 0 1.25rem;
padding: 0;
border: none;
max-width: 24ch;
font-size: clamp(1.625rem, 6vw, 2.125rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
text-transform: none;
}
.lessons h2 {
display: block;
margin: 2.5rem 0 .875rem;
padding: 0;
border: none;
font-size: 1.375rem;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
}
.lessons section > p {
max-width: 36rem;
font-size: 1.0625rem;
line-height: 1.7;
}
.lessons section { margin: 0; }
.lessons hr { margin: 2.75rem 0; }
/* --------------------------------------------------------------------------
Contact — dense; the only form on the site
-------------------------------------------------------------------------- */
form { max-width: 26rem; margin-top: 1.5rem; }
label {
display: block;
margin: 1.125rem 0 .3125rem;
font-size: .8125rem;
color: var(--ink-soft);
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: .5625rem .6875rem;
font: inherit;
font-size: 1rem; /* 16px — stops iOS zooming on focus */
color: var(--ink);
background: var(--field);
border: 1px solid var(--underline);
border-radius: 2px;
}
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 1px;
border-color: var(--ink);
}
textarea { min-height: 9rem; resize: vertical; }
button {
margin-top: 1.375rem;
padding: .625rem 1.375rem;
font: inherit;
font-size: .8125rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--bg);
background: var(--ink);
border: none;
border-radius: 2px;
cursor: pointer;
transition: background-color .15s ease;
}
button:hover { background: #333c3e; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Confirmation line, hidden until the form round-trips (?sent=1 etc.).
The inline script on contact.html flips this to display:block. */
#sent-note {
display: none;
padding: .75rem 1rem;
border-left: 2px solid var(--ink);
background: rgba(255, 255, 255, .55);
font-size: .9375rem;
}
/* --------------------------------------------------------------------------
Lightbox — full, uncropped view of any photo (lightbox.js)
-------------------------------------------------------------------------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(10, 18, 18, .93);
}
.lightbox[hidden] { display: none; }
.lightbox img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
margin: 0;
border-radius: 2px;
}
.lightbox .lb-btn {
position: absolute;
margin: 0;
padding: .25rem .75rem;
background: none;
border: none;
color: #fff;
opacity: .75;
font-size: 2.25rem;
line-height: 1;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.lightbox .lb-btn:hover { background: none; opacity: 1; }
.lightbox .lb-btn[hidden] { display: none; }
.lb-close { top: .5rem; right: .75rem; }
.lb-prev { left: .25rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .25rem; top: 50%; transform: translateY(-50%); }
/* --------------------------------------------------------------------------
Phones
-------------------------------------------------------------------------- */
@media (max-width: 34rem) {
:root { --page-pad: 1.25rem; }
nav { margin-bottom: 2rem; }
body { padding-top: 2.25rem; padding-bottom: 3.5rem; }
.tagline { letter-spacing: .12em; line-height: 1.85; }
nav { gap: .5rem 1.125rem; }
article:has(> h1.essay) > p:not(.back):not(.sub) { font-size: 1.0625rem; line-height: 1.72; }
blockquote { padding-left: 1.125rem; }
blockquote p { font-size: 1.0625rem; }
}
/* --------------------------------------------------------------------------
Print — plain black on white
-------------------------------------------------------------------------- */
@media print {
body { background: #fff; padding: 0; font-size: 11pt; }
nav, form, .back { display: none; }
a { border-bottom: none; }
article, blockquote { break-inside: avoid; }
h1, h2, h3 { break-after: avoid; }
}
/* --------------------------------------------------------------------------
Motion & contrast preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
@media (prefers-contrast: more) {
:root { --grey: #3d4749; --grey-soft: #495352; --underline: #7d8a89; }
}