/* ============================================================
   anyhow.at — "Night Ledger"
   dark blue/violet night gradient · animated grain ·
   Instrument Serif display · IBM Plex Mono ledger
   ============================================================ */

/* Fonts (self-hosted, OFL) */
@font-face {
    font-family: 'Instrument Serif';
    src: url('fonts/instrument-serif-v5-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('fonts/instrument-serif-v5-latin_latin-ext-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Tokens */
:root {
    --grain-dark: 0.05;
    --night: #2f2ba4;
    --radius: 8px;
    --ink: #fff8e8;
    --body: #efe9d8;
    --secondary: #d9d2c0;
    --dim: #b8b2d2;
    --accent: #ff5a13;
    --tag-notes: #8fd4a8;
    --tag-warm: #ffb08a;
    --rule-strong: rgba(255, 248, 232, 0.85);
    --hairline: rgba(239, 233, 216, 0.22);
    --img-border: rgba(239, 233, 216, 0.28);
    --serif: 'Instrument Serif', Georgia, serif;
    --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* <picture> is only a format switch — the <img> keeps every layout rule.
   display:contents hoists the children, so <source> would otherwise occupy
   a grid cell / flex slot of its own. */
picture { display: contents; }
picture > source { display: none; }

html {
    font-size: 15px;
}

body {
    font-family: var(--mono);
    font-weight: 400;
    line-height: 1.9;
    color: var(--body);
    min-height: 100vh;
    background:
        radial-gradient(120% 90% at 8% 100%, #2022a4 0%, rgba(74, 92, 255, 0) 55%),
        /*radial-gradient(120% 90% at 8% 100%, #4a5cff 0%, rgba(74, 92, 255, 0) 55%),*/
        radial-gradient(90% 70% at 96% 4%, #885bd9 0%, rgba(158, 72, 51, 0) 100%),
        /*radial-gradient(90% 70% at 96% 4%, #9e4833 0%, rgba(158, 72, 51, 0) 55%),*/
        radial-gradient(100% 100% at 50% 40%, #4695da 0%, #002ba4 75%);
        /*radial-gradient(100% 100% at 50% 40%, #3b37bd 0%, #2f2ba4 75%);*/
    background-attachment: fixed;
    background-color: var(--night);
    overflow-x: hidden;
}

::selection {
    background: var(--accent);
    color: var(--night);
}

/* Top edge rule — a flat cream hairline, the ledger's top line.
   (The torn orange tape bar it replaces lives in git history.) */
.edgebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--rule-strong);
    z-index: 30;
}

/* Grain — above the gradient, below all content.
   320px seamless tile (random noise has no seam by construction), jittered
   by a fixed set of irregular pixel offsets with steps(1): each frame is a
   fresh reshuffle, so nothing drifts or orbits. Offsets stay under 64px,
   hence the small inset slack instead of a 250%-sized layer. */
.grain {
    position: fixed;
    inset: -80px;
    background-image: url('noise.png');
    background-size: 320px 320px;
    opacity: var(--grain-dark);
    animation: grain 0.7s steps(1) infinite;
    will-change: transform;
    pointer-events: none;
    z-index: -1;
}

@keyframes grain {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-23px, 41px); }
    20%  { transform: translate(37px, -19px); }
    30%  { transform: translate(-51px, -13px); }
    40%  { transform: translate(17px, 57px); }
    50%  { transform: translate(-39px, -47px); }
    60%  { transform: translate(59px, 9px); }
    70%  { transform: translate(-7px, -61px); }
    80%  { transform: translate(43px, 29px); }
    90%  { transform: translate(-61px, 23px); }
}

@media (prefers-reduced-motion: reduce) {
    .grain { animation: none; }
}

/* Content sits above the grain. No z-index on purpose: a stacking context
   here would isolate mix-blend-mode (the home band) from the body background;
   the grain sits at z-index -1 instead, still above the canvas gradient */
.page {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------
   Header (inner pages)
   ------------------------------------------------------------ */
header.site {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 38px 56px 0;
}

.wordmark {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.wordmark .dot {
    font-style: italic;
    color: var(--accent);
}

nav.site {
    display: flex;
    gap: 26px;
    font-size: 13px;
    letter-spacing: 0.1em;
}

nav.site a {
    color: var(--secondary);
    text-decoration: none;
}

nav.site a:hover { color: var(--ink); }
nav.site a[aria-current="page"] { color: var(--accent); }

/* Mobile menu */
#nav-toggle { display: none; }
label.menu-btn { display: none; }
.nav-overlay { display: none; }

/* Home top bar — mobile only */
header.site.home-only { display: none; }

.byline {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--secondary);
}

/* ------------------------------------------------------------
   Home — huge wordmark + ledger
   ------------------------------------------------------------ */
.home-head {
    padding: 50px 56px 0;
}

/* home band (index.html, section.extra.head_glow): a strip of light-only
   video tiles between the header and the ledger, framed by two rules.
   Screened onto the background, so its black is see-through */
.home-band {
    padding: 14px 56px 0;
}

.home-band video {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: screen;
}

.home-band .rule-strong { margin-top: 14px; }

.home-head .row {
    display: flex;
    align-items: flex-end;
    gap: 44px;
}

.home-wordmark {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 130px;
    line-height: 0.9;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.home-wordmark .dot { color: var(--accent); }

.home-wordmark a {
    color: inherit;
    text-decoration: none;
}

/* round portrait at the far right, after the nav; links to about */
.home-portrait {
    flex: none;
    width: 98px;
    height: 98px;
    margin: 0 8px 14px 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--hairline);
}

.home-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

.home-intro {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--secondary);
    max-width: 360px;
}

.home-intro p { margin: 0; }

.home-intro em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--ink);
}

nav.home-nav {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-align: right;
    padding-bottom: 12px;
}

nav.home-nav a {
    color: var(--secondary);
    text-decoration: none;
}

nav.home-nav a:hover { color: var(--ink); }
nav.home-nav a[aria-current="page"] { color: var(--accent); }

.rule-strong {
    border-bottom: 2px solid var(--rule-strong);
    margin-top: 28px;
}

/* Ledger */
.ledger {
    flex: 1;
    padding: 8px 56px 40px;
    display: flex;
    flex-direction: column;
    list-style: none;
}

.ledger li { display: block; }

.ledger a {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
}

.ledger a:hover .title {
    text-shadow: 1.5px 0 rgba(255, 90, 19, 0.6), -1.5px 0 rgba(0, 220, 255, 0.45);
}

.ledger .date {
    color: var(--dim);
    font-size: 12px;
    width: 96px;
    flex: none;
}

.ledger .type {
    font-size: 12px;
    width: 108px;
    flex: none;
    color: var(--secondary);
}

.type-project { color: var(--accent) !important; }
.type-notes { color: var(--tag-notes) !important; }
.type-fotos { color: var(--secondary) !important; }
.type-tv, .type-credit { color: var(--tag-warm) !important; }

.ledger .title {
    font-family: var(--serif);
    font-size: 24px;
    line-height: 1.1;
    color: var(--ink);
}

.ledger .note {
    color: var(--dim);
    margin-left: auto;
    font-size: 12px;
    text-align: right;
    flex: none;
    max-width: 34%;
}

/* row thumb: still from the work (loop poster / hero / first image); blog rows keep the slot empty so titles align */
.ledger .thumb {
    width: 114px;
    height: 64px;
    flex: none;
    align-self: center;
}

.ledger .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

/* hover preview (preview.js): one floating player, clean picture, grain + timecode as the only frame */
.loop-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 560px;
    max-width: 44vw;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.loop-preview.on { opacity: 1; }

.loop-preview .frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 18px 50px rgba(8, 6, 40, 0.45);
}

.loop-preview video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* same tile, jitter and timing as the page grain (.grain), a touch stronger on picture */
.loop-preview .g {
    position: absolute;
    inset: -80px;
    background-image: url('noise.png');
    background-size: 320px 320px;
    opacity: 0.056;
    animation: grain 0.7s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .loop-preview .g { animation: none; }
}

.loop-preview .tc {
    display: block;
    padding-top: 8px;
    font-size: 11px;
    color: var(--dim);
    text-align: right;
    letter-spacing: 0.06em;
}

.ledger-foot {
    margin-top: auto;
    padding: 24px 56px 40px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.08em;
}

.ledger-foot a {
    color: var(--dim);
    text-decoration: none;
}

.ledger-foot a:hover { color: var(--accent); }
.ledger-foot .mail { color: var(--secondary); }

/* Section pages (blog / projects indexes) reuse ledger; header block */
.section-head {
    padding: 40px 56px 8px;
    display: flex;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
}

.section-head h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 58px;
    line-height: 1;
    color: var(--ink);
}

.section-head .sub {
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.1em;
}

/* ------------------------------------------------------------
   Article pages (blog + project)
   ------------------------------------------------------------ */
.meta-line {
    display: flex;
    align-items: baseline;
    gap: 20px;
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.1em;
}

.meta-line .type-project, .meta-line .type-notes { letter-spacing: 0.1em; }

/* Project page */
.project-head {
    padding: 44px 56px 0;
}

.project-head .meta-line { margin-bottom: 14px; }

.project-head h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 76px;
    line-height: 1;
    letter-spacing: -0.01em;
    max-width: 860px;
    color: var(--ink);
}

.hero {
    padding: 36px 56px 0;
}

.hero img, .hero video {
    border-radius: var(--radius);
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    border: 1px solid var(--img-border);
}

.figcap {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dim);
    padding-top: 10px;
}

/* sound toggle under a hero video (hero-video.js) */
/* hero_film: the film at its own shape (no crop), a play button on the poster */
.hero-media { position: relative; }
.hero video.hero-film { max-height: none; object-fit: contain; background: #000; }
.hero-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 13px var(--mono);
    letter-spacing: 0.06em;
    color: var(--ink);
    background: rgba(12, 11, 30, 0.72);
    border: 1px solid var(--img-border);
    border-radius: 999px;
    padding: 12px 22px;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.hero-play:hover { color: var(--accent); border-color: var(--accent); }

.hero-sound {
    font: inherit;
    color: var(--dim);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    letter-spacing: 0.04em;
}
.hero-sound::before { content: '\25CB  '; }
.hero-sound:hover { color: var(--ink); }
.hero-sound[aria-pressed="true"] { color: var(--accent); }
.hero-sound[aria-pressed="true"]::before { content: '\25CF  '; }

.project-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    padding: 44px 56px 0;
}

.project-body.no-facts { grid-template-columns: 1fr; max-width: 860px; }

.essay {
    font-size: 15px;
    line-height: 1.9;
    color: var(--body);
    min-width: 0;
}

.facts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 13px;
    border-left: 1px solid var(--hairline);
    padding-left: 24px;
    height: fit-content;
}

.facts div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.facts .k { color: var(--dim); }
.facts .v { color: var(--ink); text-align: right; }

/* widgets under the facts (project.html; the script lives in the page's folder) */
.widget {
    --on: var(--ink);
    --off: #0c0b1e;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.widget canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    border: 1px solid var(--img-border);
}
.widget figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--dim); }
.widget b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.widget sup { font-size: 0.75em; }

/* columns like the in-text galleries: every image at its true aspect ratio */
.project-grid {
    padding: 48px 56px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 18px;
}

.project-grid figure {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.project-grid img {
    border-radius: var(--radius);
    width: 100%;
    height: auto;
    border: 1px solid var(--img-border);
}

/* grid_ratio: all images in one shape, cropped (anchor = which part stays) */
.project-grid.fixed-ratio img { aspect-ratio: var(--grid-ratio); object-fit: cover; object-position: var(--anchor, center); }

/* wide = spans the whole row (an establishing shot above the details) */
.project-grid figure.wide { grid-column: 1 / -1; }

.project-grid figcaption {
    font-size: 11px;
    color: var(--dim);
}

/* grid items with a url (e.g. the FM4 sessions index) link out */
.project-grid .grid-link { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.project-grid .grid-link img { transition: opacity 0.2s; }
.project-grid .grid-link:hover img { opacity: 0.8; }
.project-grid .grid-link:hover figcaption { color: var(--ink); }
.project-grid .ext { color: var(--accent); }

/* prev / next */
.pn {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 56px 52px;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.pn a { text-decoration: none; }
.pn .prev { color: var(--dim); }
.pn .next { color: var(--accent); margin-left: auto; }
.pn a:hover { color: var(--ink); }

/* Blog post — centered reading column */
.post {
    max-width: 720px;
    margin: 0 auto;
    padding: 52px 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.post h1.post-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Notes — every note in full, one under the other, in the post's reading column */
.notes .section-head { max-width: 720px; margin: 0 auto; padding: 52px 40px 0; }
.notes .post { padding-top: 44px; padding-bottom: 44px; }
.notes .post + .post { border-top: 1px solid var(--hairline); }
.notes h2.post-title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--ink); }
.notes h2.post-title a { color: inherit; text-decoration: none; }
.notes h2.post-title a:hover { color: var(--accent); }

.prose > * + * { margin-top: 24px; }

.prose p {
    font-size: 15px;
    line-height: 1.95;
    color: var(--body);
}

.prose h2, .prose h3 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    font-size: 30px;
    line-height: 1.2;
    margin-top: 12px;
}

.prose h3 { font-size: 24px; }

.prose a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 90, 19, 0.4);
}

.prose a:hover { border-bottom-color: currentColor; }

.prose strong { color: var(--ink); font-weight: 500; }

.prose em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15em;
    color: var(--ink);
}

.prose blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 30px;
    line-height: 1.4;
    color: var(--ink);
    border-left: 2px solid var(--accent);
    padding-left: 26px;
}

.prose blockquote p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.prose cite {
    font-family: var(--mono);
    font-style: normal;
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.08em;
}

.prose ul, .prose ol { padding-left: 1.6em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--accent); }

.prose img, .prose video {
    border-radius: var(--radius);
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--img-border);
}

.prose figure { display: flex; flex-direction: column; gap: 8px; }

.prose figcaption, .prose .figcap {
    font-size: 11px;
    color: var(--dim);
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: 12px 0;
}

.prose pre {
    border-radius: var(--radius);
    overflow-x: auto;
    padding: 18px 22px;
    border: 1px solid var(--hairline);
    background: rgba(18, 14, 70, 0.5) !important;
    font-size: 13px;
    line-height: 1.7;
}

.prose code { font-family: var(--mono); font-size: 0.95em; }

.prose p code, .prose li code {
    border: 1px solid var(--hairline);
    padding: 0.05em 0.35em;
    color: var(--ink);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    font-size: 13px;
}

.prose th, .prose td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
}

.prose th { color: var(--dim); font-weight: 400; letter-spacing: 0.08em; }

.prose .box {
    border: 1px solid var(--hairline);
    padding: 10px 16px;
    font-size: 12px;
    color: var(--dim);
}

/* Legacy shortcode support */
.prose img.left { max-width: 45%; float: left; margin: 6px 24px 12px 0; }
.prose img.right { max-width: 45%; float: right; margin: 6px 0 12px 24px; }
.prose img.small { max-width: 200px; }
.prose img.sketch { border: 0; filter: invert(1) opacity(0.9); mix-blend-mode: screen; }
.clearfix::after { content: ""; display: table; clear: both; }

.gallery, .masonry { gap: 16px; margin: 12px 0; }
.gallery { display: grid; }
.gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gallery p, .masonry p { display: contents; }
.gallery img { width: 100%; height: auto; margin: 0; border-radius: var(--radius); }
.gallery .gallery-wide { grid-column: 1 / -1; }
.masonry { column-gap: 16px; }
.masonry-cols-2 { columns: 2; }
.masonry-cols-3 { columns: 3; }
.masonry-cols-4 { columns: 4; }
.masonry img { width: 100%; height: auto; margin: 0 0 16px; break-inside: avoid; border-radius: var(--radius); }

.post .pn { padding: 22px 0 0; border-top: 1px solid var(--hairline); }

/* ------------------------------------------------------------
   Fotos
   ------------------------------------------------------------ */
.album {
    padding: 40px 56px 8px;
    display: flex;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
}

.album h1, .album h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 58px;
    line-height: 1;
    color: var(--ink);
}

.album h2 { font-size: 44px; }

.album a { color: inherit; text-decoration: none; }

.album .sub {
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.1em;
}

/* Justified rows: equal height per row, true aspect ratios, no cropping.
   Each figure's flex-grow/basis is proportional to its aspect ratio
   (set inline from image metadata at build time). */
.foto-grid {
    padding: 26px 56px 52px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.foto-grid figure {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* keeps the last row from stretching to fill the full width */
.foto-grid .grid-spacer { flex-grow: 1000000; }

.foto-grid img {
    border-radius: var(--radius);
    width: 100%;
    height: auto;
    border: 1px solid var(--img-border);
    cursor: pointer;
}

.foto-grid figcaption {
    font-size: 11px;
    color: var(--dim);
}

.loadmore {
    display: flex;
    justify-content: center;
    padding: 34px 56px 52px;
}

.loadmore button {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.1em;
    border: 1px solid rgba(239, 233, 216, 0.4);
    padding: 10px 22px;
    background: transparent;
    color: var(--body);
    cursor: pointer;
}

.loadmore button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.foto-grid figure.hidden { display: none; }

/* ------------------------------------------------------------
   About
   ------------------------------------------------------------ */
.about-top {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 56px;
    padding: 52px 56px 0;
}

.about-portrait {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-portrait img {
    border-radius: var(--radius);
    width: 100%;
    height: 470px;
    object-fit: cover;
    border: 1px solid var(--img-border);
}

.about-portrait > span {
    font-size: 11px;
    color: var(--dim);
}

.about-bio {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.about-bio h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 58px;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Rotating headline word (about page).
   All words are stacked in one inline-grid cell, so the slot is always as
   wide as the widest word and the headline never rewraps. */
.rotator {
    display: inline-grid;
    white-space: nowrap;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
}

.rotator-word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(0.35em);
    text-shadow: 1.5px 0 rgba(255, 90, 19, 0.6), -1.5px 0 rgba(0, 220, 255, 0.45);
    transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
        text-shadow 0.7s ease;
}

.rotator-word.is-active {
    opacity: 1;
    transform: none;
    text-shadow: 1.5px 0 rgba(255, 90, 19, 0), -1.5px 0 rgba(0, 220, 255, 0);
    transition-delay: 0.1s;
}

.rotator-word.is-out {
    opacity: 0;
    transform: translateY(-0.35em);
    transition-duration: 0.35s;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .rotator-word { transition: none; }
}

.about-bio p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--body);
    max-width: 560px;
}

/* availability + mail, under the portrait */
.open-for {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.open-for .status {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--dim);
}

.open-for .mail {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.15;
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.open-for .mail .arr { transition: margin 0.2s; }
.open-for .mail:hover { color: var(--accent); }
.open-for .mail:hover .arr { margin-left: 6px; }

.daynight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 48px 56px 0;
}

.daynight section {
    border-top: 1px solid var(--hairline);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.daynight .label {
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 6px;
}

.daynight .kv {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.daynight .k { color: var(--dim); }
.daynight .v { color: var(--ink); text-align: right; }

.credits-block { padding: 52px 56px 0; }

.credits-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    border-bottom: 2px solid var(--rule-strong);
    padding-bottom: 14px;
    flex-wrap: wrap;
}

.credits-head h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    color: var(--ink);
}

.credits-head span {
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.1em;
}

.credit {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 14px 14px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
}

.credit:hover { background: rgba(239, 233, 216, 0.06); }

/* thumbs come in mixed ratios (1:1, 4:3, 16:9) — fixed slot, no crop, no border */
.credit img, .credit .thumb {
    border-radius: var(--radius);
    width: 114px;
    height: 64px;
    flex: none;
    object-fit: contain;
    object-position: left center;
    border: 0;
}

.credit .thumb { border: 1px dashed var(--hairline); }

.credit .title {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink);
}

.credit .type { font-size: 12px; color: var(--secondary); white-space: nowrap; }
.credit .type-podcast { color: var(--tag-notes); }
.credit .type-tv, .credit .type-tv-show, .credit .type-tv-broadcast, .credit .type-tv-live-broadcast, .credit .type-concert-film { color: var(--tag-warm); }

.credit .note {
    font-size: 12px;
    color: var(--dim);
    margin-left: auto;
    text-align: right;
}

.contact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 44px 56px 48px;
    font-size: 13px;
    letter-spacing: 0.08em;
    flex-wrap: wrap;
}

.contact .sayhi {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    letter-spacing: 0;
    color: var(--ink);
}

.contact nav { display: flex; gap: 26px; flex-wrap: wrap; }

.contact a {
    color: var(--secondary);
    text-decoration: none;
}

.contact a.mail { color: var(--accent); }
.contact a:hover { color: var(--ink); }

/* ------------------------------------------------------------
   Simple pages (impressum / privacy / blogroll)
   ------------------------------------------------------------ */
.plain {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    padding: 52px 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.plain h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.08;
    color: var(--ink);
}

/* ------------------------------------------------------------
   Blogroll — grouped links, read like a page not a table
   ------------------------------------------------------------ */
.blogroll-intro {
    padding: 6px 56px 10px;
    max-width: 700px;
    color: var(--body);
}

.linkgroup {
    padding: 34px 56px 0;
    max-width: 760px;
}

.linkgroup-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.linkgroup-head h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    color: var(--ink);
}

.linkgroup-head span {
    font-size: 11px;
    color: var(--dim);
    letter-spacing: 0.1em;
}

.link { padding: 24px 0 4px; }

.link-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* underline via text-decoration, not border — it skips the serif descenders */
.link-head a {
    font-family: var(--serif);
    font-size: 24px;
    line-height: 1.2;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(255, 90, 19, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.link-head a:hover {
    text-decoration-color: currentColor;
    text-shadow: 1.5px 0 rgba(255, 90, 19, 0.5), -1.5px 0 rgba(0, 220, 255, 0.4);
}

.link-head .host {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--dim);
}

.link .note {
    margin-top: 4px;
    max-width: 62ch;
    color: var(--body);
}

/* Quiet legal row */
.legal {
    padding: 20px 56px 30px;
    display: flex;
    gap: 18px;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--dim);
}

.legal a { color: var(--dim); text-decoration: none; }
.legal a:hover { color: var(--secondary); }

/* ------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(18, 14, 70, 0.9);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lightbox.active { display: flex; opacity: 1; }

.lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border: 1px solid var(--img-border);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--ink);
    font-size: 1.6rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
}

.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------
   Mobile (≤700px)
   ------------------------------------------------------------ */
@media (max-width: 700px) {

    header.site {
        padding: 26px 24px 0;
        align-items: center;
    }

    header.site.home-only {
        display: flex;
        justify-content: space-between;
    }

    .wordmark { font-size: 26px; }

    /* menu button + overlay */
    label.menu-btn {
        display: block;
        color: var(--accent);
        border: 1px solid rgba(255, 90, 19, 0.5);
        padding: 8px 14px;
        font-size: 12px;
        letter-spacing: 0.1em;
        cursor: pointer;
    }

    nav.site {
        display: none;
    }

    #nav-toggle:checked ~ .nav-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 40;
        background:
            radial-gradient(120% 90% at 8% 100%, #4a5cff 0%, rgba(74, 92, 255, 0) 55%),
            radial-gradient(100% 100% at 50% 40%, #3b37bd 0%, #2f2ba4 75%);
        background-color: var(--night);
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 24px;
    }

    .nav-overlay { display: none; }

    .nav-overlay a {
        font-family: var(--serif);
        font-size: 44px;
        line-height: 1.3;
        color: var(--ink);
        text-decoration: none;
    }

    .nav-overlay a[aria-current="page"] { color: var(--accent); }

    .nav-overlay label {
        position: absolute;
        top: 26px;
        right: 24px;
        color: var(--accent);
        border: 1px solid rgba(255, 90, 19, 0.5);
        padding: 8px 14px;
        font-size: 12px;
        letter-spacing: 0.1em;
        cursor: pointer;
    }

    .home-head { padding: 34px 24px 0; }
    .home-band { padding: 10px 24px 0; }
    .home-head .row { flex-direction: column; align-items: stretch; gap: 0; }
    .home-wordmark { font-size: 76px; }
    .home-head .row { position: relative; }
    .home-portrait { position: absolute; top: 0; right: 0; width: 72px; height: 72px; margin: 0; }
    .home-intro { margin: 18px 0 0; font-size: 13px; }
    .home-intro em { font-size: 16px; }
    nav.home-nav { display: none; }
    .rule-strong { margin-top: 24px; }

    .ledger { padding: 6px 24px 30px; }

    /* phone: thumb on the left, date + kind above the title on the right */
    .ledger a {
        display: grid;
        grid-template-columns: 104px auto 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        gap: 6px 12px;
        padding: 14px 0;
    }

    .ledger .thumb { grid-column: 1; grid-row: 1 / 3; width: 104px; height: 58px; }
    .ledger .date, .ledger .type { width: auto; font-size: 11px; align-self: end; }
    .ledger .title { grid-column: 2 / 4; font-size: 21px; line-height: 1.15; }
    .ledger .note { display: none; }

    .ledger-foot { padding: 20px 24px 30px; }

    .section-head { padding: 30px 24px 8px; }
    .section-head h1 { font-size: 42px; }

    .project-head { padding: 30px 24px 0; }
    .project-head h1 { font-size: 40px; line-height: 1.05; }

    /* full-bleed stills, captions inset */
    .hero { padding: 24px 0 0; }
    .hero img, .hero video { border-left: 0; border-right: 0; }
    .hero .figcap { padding: 8px 24px 0; font-size: 10px; }

    .project-body { grid-template-columns: 1fr; gap: 26px; padding: 26px 24px 0; }
    .facts {
        border-left: 0;
        padding-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 12px;
    }
    .facts div { gap: 6px; }
    .facts .widget { flex-basis: 100%; }
    .widget canvas { max-width: 288px; }

    .project-grid { grid-template-columns: 1fr !important; gap: 18px; padding: 26px 0 0; }
    .project-grid img { border-left: 0; border-right: 0; }
    .project-grid figcaption { padding: 0 24px; font-size: 10px; }

    .pn { padding: 30px 24px 34px; font-size: 12px; }

    .post { padding: 30px 24px 40px; gap: 22px; }
    .post h1.post-title { font-size: 38px; }
    .notes .section-head { padding: 30px 24px 0; }
    .notes h2.post-title { font-size: 30px; }
    .prose blockquote { font-size: 24px; padding-left: 20px; }

    .album { padding: 30px 24px 8px; }
    .album h1 { font-size: 42px; }
    .album h2 { font-size: 34px; }

    .foto-grid {
        padding: 20px 24px 40px;
    }
    /* single column, full width, still uncropped */
    .foto-grid figure { flex-basis: 100% !important; }

    .about-top { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px 0; }
    .about-portrait img { height: 380px; }
    /* phone: the mail block moves below the bio, the portrait's parts join the grid */
    .about-portrait { display: contents; }
    .about-portrait > span { margin-top: -22px; }
    .open-for { order: 1; margin-top: 0; }
    .about-bio h1 { font-size: 38px; }

    .daynight { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px 0; }

    .credits-block { padding: 40px 24px 0; }
    /* phone: thumb on the left, title / kind / role stacked on the right */
    .credit {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 2px 14px;
        align-content: center;
        padding: 14px 0;
    }

    .credit picture, .credit > .thumb { grid-column: 1; grid-row: 1 / 4; align-self: center; display: block; line-height: 0; }
    .credit img { display: block; }
    .credit .title, .credit .type, .credit .note { grid-column: 2; }
    .credit img, .credit .thumb { width: 96px; height: 54px; }
    .credit .title { font-size: 19px; line-height: 1.15; }
    .credit .type { font-size: 11px; line-height: 1.4; white-space: normal; margin-top: 2px; }
    .credit .note { margin-left: 0; text-align: left; font-size: 11px; line-height: 1.4; }

    .contact { padding: 36px 24px 40px; flex-direction: column; align-items: flex-start; }

    .blogroll-intro { padding: 6px 24px 4px; }
    .linkgroup { padding: 28px 24px 0; }
    .linkgroup-head h2 { font-size: 24px; }
    .link { padding: 16px 0 4px; }
    .link-head { gap: 8px; }
    .link-head a { font-size: 21px; }

    .plain { padding: 30px 24px 40px; }
    .plain h1 { font-size: 38px; }

    .legal { padding: 16px 24px 26px; flex-wrap: wrap; }

    .gallery-cols-3, .gallery-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .masonry-cols-3, .masonry-cols-4 { columns: 2; }
    .prose img.left, .prose img.right { float: none; max-width: 100%; margin: 12px 0; }
}

@media (min-width: 701px) and (max-width: 1000px) {
    .home-wordmark { font-size: 96px; }
    /* tablet: wordmark, nav and portrait on one line, the intro below */
    .home-head .row { flex-wrap: wrap; gap: 24px 20px; }
    .home-intro { order: 1; flex-basis: 100%; max-width: 520px; margin: 0; }
    .home-portrait { width: 66px; height: 66px; margin-bottom: 12px; }
    /* one line, centred on the portrait: 12px margin + half of 66px = 45px above the row's bottom */
    nav.home-nav { flex-direction: row; gap: 16px; line-height: 20px; padding-bottom: 35px; }
    .project-head h1 { font-size: 56px; }
    .project-body { grid-template-columns: 1fr; }
    .facts { border-left: 0; padding-left: 0; flex-direction: row; flex-wrap: wrap; gap: 20px; }
    .about-top { grid-template-columns: 300px 1fr; gap: 36px; }
}

/* narrow tablet: a smaller wordmark keeps wordmark, nav and portrait on one line */
@media (min-width: 701px) and (max-width: 820px) {
    .home-wordmark { font-size: 84px; }
}

/* ---------- 404 / no signal ---------- */

.notfound { padding-top: 96px; }

.nf-slate {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0 0 14px;
}

.notfound h1 { font-size: 88px; margin: 0 0 36px; }

.nf-dot { color: var(--accent); }

/* the one place the retro is allowed to shout: SMPTE bars */
.nf-bars {
    display: flex;
    height: 64px;
    margin: 0 0 36px;
    border: 1px solid var(--img-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.nf-bars span { flex: 1; }
.nf-bars span:nth-child(1) { background: #b9b9b9; }
.nf-bars span:nth-child(2) { background: #b9b940; }
.nf-bars span:nth-child(3) { background: #40b9b9; }
.nf-bars span:nth-child(4) { background: #40b940; }
.nf-bars span:nth-child(5) { background: #b940b9; }
.nf-bars span:nth-child(6) { background: #b94040; }
.nf-bars span:nth-child(7) { background: #4040b9; }

.nf-links {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-top: 28px;
}
.nf-links a { color: var(--accent); text-decoration: none; }
.nf-links a:hover { text-decoration: underline; }

.nf-tc {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--dim);
}

@media (max-width: 700px) {
    .notfound { padding-top: 48px; }
    .notfound h1 { font-size: 56px; }
    .nf-bars { height: 44px; }
}