/*
* Documenting Culture — site styles.
* Tokens drawn from the brand foundation (ink/parchment palette,
* Cinzel display + EB Garamond body + IM Fell English Italic for asides,
* Inter for chrome, JetBrains Mono for catalogue). The voice stays plain;
* the type does the carrying. Fonts loaded via in HTML .
*/
:root {
/* ─── Pigments ───────────────────────────────────────────── */
--dc-ink: #0a0907;
--dc-ink-soft: #14110d;
--dc-onyx: #1c1812;
--dc-onyx-2: #261f17;
--dc-parchment: #ebe1c8;
--dc-parchment-soft:#f3eada;
--dc-bone: #d6c8a4;
--dc-silver-100: #efe9d8;
--dc-silver-200: #d4cab1;
--dc-silver-300: #ada48a;
--dc-silver-400: #847c64;
--dc-silver-500: #5a5443;
--dc-vermillion: #b32a1e;
--dc-lapis: #2a4a78;
--dc-gold: #b89a4c;
--dc-gold-deep: #8b6f2c;
/* ─── Semantic (default = ink) ───────────────────────────── */
--bg: var(--dc-ink);
--bg-elevated: var(--dc-onyx);
--fg: var(--dc-parchment);
--fg-strong: var(--dc-silver-100);
--fg-muted: var(--dc-silver-300);
--fg-subtle: var(--dc-silver-400);
--fg-faint: var(--dc-silver-500);
--border: rgba(235, 225, 200, 0.14);
--border-strong: rgba(235, 225, 200, 0.28);
--divider: rgba(235, 225, 200, 0.08);
--accent: var(--dc-gold);
--rubric: var(--dc-vermillion);
--link: var(--dc-gold);
--focus-ring: 0 0 0 2px var(--dc-ink), 0 0 0 4px var(--dc-gold);
/* ─── Type families ──────────────────────────────────────── */
--font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
--font-serif: "EB Garamond", "Garamond", "Adobe Caslon Pro", "Times New Roman", serif;
--font-italic: "IM Fell English", "EB Garamond", "Garamond", serif;
--font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;
/* ─── Spacing (4px base) ────────────────────────────────── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px;
/* ─── Page chrome ───────────────────────────────────────── */
--pad-x: clamp(20px, 5vw, 56px);
--max: 1500px;
/* ─── Custom cursors: magnifier (zoom-in / zoom-out / grab) ─
Brand colours, double-stroke for legibility over any photo.
Hotspot at the centre of the glass (13, 13). */
--cursor-zoom-in: url("data:image/svg+xml;utf8,") 13 13, zoom-in;
--cursor-zoom-out: url("data:image/svg+xml;utf8,") 13 13, zoom-out;
--cursor-grab: url("data:image/svg+xml;utf8,") 16 16, grab;
--cursor-grabbing: url("data:image/svg+xml;utf8,") 16 16, grabbing;
}
/* ─── Reset / defaults ─────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "onum";
min-height: 100dvh;
display: flex;
flex-direction: column;
}
a { color: inherit; text-decoration: none; transition: opacity 120ms ease; }
a:focus-visible, button:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: 2px;
}
/* The brand sits inside the ornate medallion; the square focus ring
would draw a black + gold box around it (and through the FLIP flight).
Pressing Enter on the brand just goes to /, so suppressing the ring
here is a minor a11y trade-off worth the clean look. */
.site-head .brand:focus-visible { box-shadow: none; }
::selection { background: var(--dc-gold); color: var(--dc-ink); }
img { display: block; max-width: 100%; height: auto; }
.skip {
position: absolute; left: -9999px;
background: var(--dc-gold); color: var(--dc-ink);
padding: var(--sp-2) var(--sp-3);
font: 600 11px/1.2 var(--font-sans);
letter-spacing: 0.18em; text-transform: uppercase;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); z-index: 100; }
/* Subtle film grain across the whole page */
body::after {
content: ""; position: fixed; inset: 0;
pointer-events: none; z-index: 100;
opacity: 0.05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ─── Site head (compact: medallion + wordmark + nav) ─────── */
.site-head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-6) var(--pad-x) var(--sp-5);
text-align: center;
}
.brand {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
text-decoration: none;
color: var(--fg);
}
/* Brand mark — alpha-encoded video (VP9 yuva420p / HEVC hvc1 with alpha).
No SVG mask: on iOS Safari the mask + alpha-video combination produced
a ghosted double-render. The colorkeyed alpha is reliable enough on
its own across modern browsers. */
.brand-mark {
display: block;
width: clamp(72px, 9vw, 96px);
aspect-ratio: 1 / 1;
object-fit: contain;
background: transparent;
}
.brand-wordmark {
display: inline-block;
width: clamp(180px, 28vw, 260px);
aspect-ratio: 2738.14 / 455.06;
background: var(--fg);
-webkit-mask: url("/assets/wordmark.svg") center / contain no-repeat;
mask: url("/assets/wordmark.svg") center / contain no-repeat;
}
.site-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(20px, 4vw, 36px);
font: 500 12px/1.4 var(--font-sans);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.site-nav a {
color: var(--fg);
opacity: 0.65;
padding: var(--sp-1) 0;
position: relative;
}
.site-nav a:hover { opacity: 1; }
.site-nav a[aria-current="page"] {
opacity: 1;
}
/* ─── Calendar bar (sticky, holds year tabs + month strip) ─── */
.cal-bar {
position: sticky;
top: 0;
z-index: 30;
background: rgba(10, 9, 7, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* Year tabs */
.year-tabs {
display: flex;
justify-content: center;
align-items: baseline;
gap: clamp(28px, 5vw, 56px);
padding: var(--sp-4) var(--pad-x) var(--sp-3);
border-bottom: 1px solid var(--border);
}
.year-tab {
appearance: none;
background: transparent;
border: 0;
padding: 0 0 var(--sp-2);
cursor: pointer;
position: relative;
color: var(--fg-faint);
transition: color 160ms ease;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2.6vw, 28px);
line-height: 1;
}
.year-tab:hover { color: var(--fg-muted); }
.year-tab[aria-pressed="true"] { color: var(--fg-strong); }
.year-tab[aria-pressed="true"]::after {
content: ""; position: absolute;
left: 50%; bottom: 0; transform: translateX(-50%);
width: 24px; height: 1px; background: var(--accent);
}
/* Month strip */
.month-strip-inner {
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
margin: 0 var(--pad-x);
}
.month-cell {
appearance: none;
background: transparent;
border: 0;
padding: var(--sp-3) 4px var(--sp-2);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
color: var(--fg-faint);
transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
position: relative;
}
.month-cell .mc-label {
font: 600 11px/1.2 var(--font-sans);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.month-cell .mc-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: transparent;
transition: background 160ms ease, transform 160ms ease;
}
.month-cell.has-photos { color: var(--fg-muted); cursor: pointer; }
.month-cell.has-photos .mc-dot { background: var(--fg-faint); }
.month-cell.has-photos:hover { color: var(--fg-strong); }
.month-cell.has-photos:hover .mc-dot { background: var(--fg); transform: scale(1.3); }
.month-cell.is-empty { color: var(--fg-faint); cursor: default; pointer-events: none; opacity: 0.6; }
.month-cell.is-active {
color: var(--fg-strong);
background: rgba(255, 235, 195, 0.04);
border-left-color: rgba(184, 154, 76, 0.4);
border-right-color: rgba(184, 154, 76, 0.4);
}
.month-cell.is-active .mc-dot { background: var(--accent); transform: scale(1.5); }
.month-cell.is-undated { font-style: italic; }
@media (max-width: 720px) {
.month-strip-inner {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(60px, 1fr);
overflow-x: auto;
scrollbar-width: none;
}
.month-strip-inner::-webkit-scrollbar { display: none; }
}
/* ─── Main / feed ──────────────────────────────────────────── */
main { flex: 1; width: 100%; }
.feed {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad-x) var(--sp-9);
}
.loading {
text-align: center;
font-family: var(--font-italic);
font-style: italic;
font-size: 17px;
color: var(--fg-faint);
padding: var(--sp-9) 0;
}
/* Month section */
/* Year section wrapper — separates years with a thin gilt rule */
.year-section {
scroll-margin-top: calc(var(--cal-h, 7rem) + 1rem);
}
.year-section + .year-section {
border-top: 1px solid rgba(184, 154, 76, 0.35);
margin-top: var(--sp-7);
padding-top: var(--sp-7);
}
.month-section {
padding: var(--sp-7) 0 var(--sp-6);
scroll-margin-top: calc(var(--cal-h, 7rem) + 1rem);
}
.month-section + .month-section { border-top: 1px solid var(--border); }
.month-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-5);
margin-bottom: var(--sp-6);
flex-wrap: wrap;
}
.month-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 3.2vw, 38px);
line-height: 1.05;
color: var(--fg-strong);
margin: 0;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.month-count {
font: 500 11px/1.2 var(--font-sans);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-muted);
font-feature-settings: "tnum";
}
/* Photo grid */
.photo-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-7) var(--sp-5);
}
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo {
display: flex;
flex-direction: column;
gap: var(--sp-3);
cursor: var(--cursor-zoom-in);
margin: 0;
}
.photo-img-wrap {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, var(--dc-onyx) 0%, var(--dc-ink) 100%);
border: 1px solid rgba(255, 235, 195, 0.05);
overflow: hidden;
}
.photo-img-wrap::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
box-shadow: 0 0 200px 80px rgba(0, 0, 0, 0.55) inset;
}
.photo-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: opacity 500ms ease, transform 600ms ease;
}
/* LQIP: tiny base64 jpeg, blown up + blurred to fill the tile while the
hi-res image loads on top. scale(1.06) hides the blur bleed at edges. */
.photo-img-wrap img.lqip {
position: absolute; inset: 0;
filter: blur(18px);
transform: scale(1.06);
z-index: 0;
}
.photo-img-wrap img.hi-res {
position: relative;
z-index: 1;
opacity: 0;
}
.photo-img-wrap img.hi-res.loaded { opacity: 1; }
.photo:hover .photo-img-wrap img.hi-res { transform: scale(1.02); }
.photo-cap {
font-family: var(--font-italic);
font-style: italic;
font-size: 15px;
line-height: 1.4;
color: var(--fg-muted);
text-align: center;
margin: 0;
padding: 0 var(--sp-2);
display: flex;
flex-direction: column;
gap: 2px;
}
.photo-note {
font-family: var(--font-italic);
font-style: italic;
font-size: 12.5px;
color: var(--fg-faint);
letter-spacing: 0.01em;
}
/* ─── Static pages (about / contacts / videos) ─────────────── */
.page-main {
flex: 1;
width: 100%;
max-width: 680px;
margin: 0 auto;
align-self: center;
padding: var(--sp-7) var(--pad-x) var(--sp-9);
}
.page-main--centered { text-align: center; }
.page-main--centered p { margin-left: auto; margin-right: auto; }
.page-main h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(28px, 3.5vw, 40px);
line-height: 1.1;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
margin: 0 0 var(--sp-7);
color: var(--fg-strong);
}
.page-main p {
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.6;
color: var(--fg);
margin: 0 0 var(--sp-4);
}
.page-main p em { color: var(--fg-strong); font-style: italic; }
.page-main a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.page-main a:hover { opacity: 0.75; }
.page-list {
list-style: none;
padding: 0;
margin: var(--sp-7) 0 0;
display: flex; flex-direction: column;
gap: var(--sp-3);
text-align: center;
}
.page-list a {
display: inline-block;
font-family: var(--font-italic);
font-style: italic;
font-size: 22px;
color: var(--fg);
border-bottom: 1px solid rgba(184, 154, 76, 0.4);
padding-bottom: 2px;
text-decoration: none;
}
.page-list a:hover { color: var(--accent); }
/* Music videos */
.video-list {
display: grid; grid-template-columns: 1fr;
gap: var(--sp-7);
max-width: var(--max); margin: 0 auto;
padding: var(--sp-7) var(--pad-x) var(--sp-9);
}
@media (min-width: 900px) { .video-list { grid-template-columns: repeat(2, 1fr); } }
.video { display: flex; flex-direction: column; gap: var(--sp-3); }
.video-frame {
position: relative; width: 100%; aspect-ratio: 4/3;
background: var(--bg-elevated);
border: 1px solid var(--border);
overflow: hidden;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cap {
font-family: var(--font-italic);
font-style: italic;
font-size: 15px;
color: var(--fg-muted); text-align: center; margin: 0;
}
/* ─── Lightbox ──────────────────────────────────────────── */
.lightbox {
border: none; padding: 0;
background: rgba(10, 9, 7, 0.96);
color: var(--fg);
width: 100vw; max-width: 100vw;
height: 100dvh; max-height: 100dvh;
margin: 0; inset: 0; overflow: hidden;
}
.lightbox::backdrop {
background: rgba(0, 0, 0, 0.95);
animation: dc-lb-backdrop 240ms ease;
}
.lightbox[open] {
display: flex; align-items: center; justify-content: center;
animation: dc-lb-shell 240ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes dc-lb-backdrop {
from { background: rgba(0, 0, 0, 0); }
to { background: rgba(0, 0, 0, 0.95); }
}
@keyframes dc-lb-shell {
from { opacity: 0; }
to { opacity: 1; }
}
.lb-figure {
margin: 0; padding: var(--sp-7);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--sp-4);
width: 100%; height: 100%;
max-width: 1500px;
}
.lb-figure img {
max-height: calc(100dvh - 9rem);
max-width: 100%; object-fit: contain;
cursor: var(--cursor-zoom-in);
user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
touch-action: none;
transform-origin: center center;
will-change: transform;
transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
}
.lb-figure img.is-zoomed { cursor: var(--cursor-grab); }
.lb-figure img.is-zoomed.is-panning { cursor: var(--cursor-grabbing); }
.lb-cap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
max-width: 60ch;
text-align: center;
user-select: text;
}
.lb-cap-main {
font-family: var(--font-italic);
font-style: italic;
font-size: 16px;
line-height: 1.4;
color: var(--fg);
}
.lb-cap-date {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-faint);
font-feature-settings: "tnum";
}
.lb-cap-note {
font-family: var(--font-italic);
font-style: italic;
font-size: 13px;
line-height: 1.4;
color: var(--fg-faint);
}
@media (prefers-reduced-motion: reduce) {
.lightbox[open],
.lightbox::backdrop,
.lb-figure img { animation: none !important; transition: none !important; }
}
.lb-close, .lb-nav {
position: absolute; appearance: none;
background: transparent; border: 1px solid var(--border-strong);
color: var(--fg);
cursor: pointer;
transition: all 200ms ease;
z-index: 2; border-radius: 50%;
}
.lb-close:hover, .lb-nav:hover { color: var(--dc-ink); background: var(--accent); border-color: var(--accent); }
.lb-close { top: var(--sp-4); right: var(--sp-4); width: 38px; height: 38px; font-size: 22px; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lb-prev { left: var(--sp-4); }
.lb-next { right: var(--sp-4); }
@media (max-width: 640px) { .lb-prev{left:var(--sp-2);} .lb-next{right:var(--sp-2);} .lb-figure{padding:var(--sp-4);} }
/* ─── Footer ───────────────────────────────────────────── */
.site-foot {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-7) var(--pad-x) var(--sp-6);
border-top: 1px solid var(--border);
}
.foot-mark {
display: flex; align-items: center; gap: var(--sp-3);
}
.foot-medallion {
display: inline-block;
width: 32px; height: 32px;
background: var(--fg);
-webkit-mask: url("/assets/medallion.svg") center / contain no-repeat;
mask: url("/assets/medallion.svg") center / contain no-repeat;
opacity: 0.85;
}
.foot-wordmark {
display: inline-block;
width: 140px;
aspect-ratio: 2738.14 / 455.06;
background: var(--fg);
-webkit-mask: url("/assets/wordmark.svg") center / contain no-repeat;
mask: url("/assets/wordmark.svg") center / contain no-repeat;
opacity: 0.85;
}
.foot-social {
display: flex; gap: var(--sp-3);
}
.foot-social a {
display: inline-flex; width: 34px; height: 34px;
border: 1px solid var(--border);
align-items: center; justify-content: center;
color: var(--fg-muted);
transition: all 200ms ease;
}
.foot-social a:hover { color: var(--fg); border-color: var(--accent); }
.foot-copy {
margin: 0;
font: 500 11px/1.5 var(--font-sans);
letter-spacing: 0.06em;
color: var(--fg-faint);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.foot-copy .foot-line { display: block; }
.foot-copy a {
color: var(--fg-muted);
border-bottom: 1px solid transparent;
transition: border-color 200ms ease, color 200ms ease;
}
.foot-copy a:hover { color: var(--fg); border-color: var(--fg-muted); }
.foot-copy #year-roman {
font-family: var(--font-display);
letter-spacing: 0.16em;
color: var(--fg-muted);
font-weight: 500;
}
/* ─── Intro overlay: first-visit splash ──────────────────────
Injected once by common.js. The overlay blurs the page beneath
(backdrop-filter), the medallion fades in with a tiny scale, the
wordmark fades up below. On exit the medallion FLIPs (Web
Animations API) into the navbar's brand-mark slot. */
body.intro-playing { overflow: hidden; }
.intro-overlay {
position: fixed; inset: 0;
z-index: 9999;
display: grid; place-items: center;
cursor: pointer;
}
.intro-overlay.is-leaving { pointer-events: none; }
/* The curtain fades independently from the stage — keeps the flying
medallion fully opaque through the FLIP exit. */
.intro-curtain {
position: absolute; inset: 0;
background: rgba(10, 9, 7, 0.62);
-webkit-backdrop-filter: blur(32px) saturate(120%);
backdrop-filter: blur(32px) saturate(120%);
opacity: 0;
animation: intro-bg-in 380ms cubic-bezier(.4, 0, .2, 1) forwards;
pointer-events: none;
}
/* Curtain + stage fade out together on exit. No transform on the
medallion during this — keeps the video element stable, avoids the
compositor glitches that produced the black frames. The navbar mark
stays visible throughout the intro (covered by the overlay) and is
revealed naturally as the overlay fades. */
.intro-overlay.is-leaving .intro-curtain,
.intro-overlay.is-leaving .intro-stage {
animation: intro-bg-out 520ms cubic-bezier(.4, 0, .2, 1) both;
}
/* Explicit `from` keyframes: when .is-leaving swaps the animation-name,
some browsers compute the implicit `from` from the underlying static
value (opacity: 0) instead of the currently rendered value (1, from
the entrance's forwards fill). Stating it leaves no ambiguity. */
@keyframes intro-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-bg-out { from { opacity: 1; } to { opacity: 0; } }
.intro-stage {
position: relative;
z-index: 1;
display: grid; place-items: center;
width: min(86vmin, 720px);
aspect-ratio: 1;
}
.intro-medallion-wrap {
position: relative;
/* Above the wordmark so the FLIP flight doesn't pass under text */
z-index: 2;
width: clamp(160px, 30vmin, 260px);
aspect-ratio: 1 / 1;
opacity: 0;
transform: scale(0.94);
animation: intro-med-in 780ms cubic-bezier(.2, .7, .2, 1) 100ms forwards;
will-change: transform, opacity;
}
@keyframes intro-med-in {
to { opacity: 1; transform: scale(1); }
}
/* Alpha-encoded video carries its own transparency (colorkeyed bg →
VP9 yuva420p / HEVC alpha). No SVG mask — on iOS Safari masking an
alpha video produced a ghosted double-render. */
.intro-medallion {
display: block;
width: 100%; height: 100%;
object-fit: contain;
background: transparent;
}
.intro-wordmark {
position: absolute;
bottom: 12%;
width: clamp(160px, 24vmin, 300px);
aspect-ratio: 2738.14 / 455.06;
background: var(--fg);
-webkit-mask: url("/assets/wordmark.svg") center / contain no-repeat;
mask: url("/assets/wordmark.svg") center / contain no-repeat;
opacity: 0;
transform: translateY(8px);
animation: intro-word-in 700ms cubic-bezier(.2, .7, .2, 1) 350ms forwards;
}
@keyframes intro-word-in {
to { opacity: 0.92; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
html { scroll-behavior: auto !important; }
}