:root { --ink: #050505; --paper: #ffffe0; --muted: #858577; --rule: #2a2a23; --link: #cbd0ff; --space: clamp(1.25rem, 3vw, 3rem); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Inter, "Segoe UI", sans-serif; font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 500; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--link); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.site-header, main, footer { width: min(100% - (var(--space) * 2), 78rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); font-size: .875rem; }
.brand, nav, footer { display: flex; align-items: center; gap: 1.25rem; }
.brand { font-weight: 700; letter-spacing: -.04em; }
.brand img { width: 1.5rem; height: 1.5rem; }
nav { color: var(--muted); }
.hero { padding-block: clamp(5rem, 14vh, 10rem) clamp(4rem, 9vh, 7rem); }
.eyebrow, .record-meta, .tags, .archive summary, footer { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { display: block; margin: 0 0 1rem; }
h1, h3, p { margin-top: 0; }
h1 { max-width: 13ch; margin-bottom: 1.5rem; font-size: clamp(3rem, 7.2vw, 6.6rem); line-height: .92; letter-spacing: -.075em; }
.intro { max-width: 38rem; margin-bottom: 1.25rem; color: #d1d1bb; font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
.location-line { margin-bottom: 2.75rem; color: var(--muted); }
.skill-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.25rem; margin: 0; color: #d1d1bb; }
.skill-line .eyebrow { margin: 0; }
.resume-section { border-top: 1px solid var(--rule); }
.resume-section > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; }
.resume-section > summary::-webkit-details-marker, .archive summary::-webkit-details-marker { display: none; }
.section-title { font-size: clamp(1.8rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -.065em; }
.section-state::before { content: "+"; color: var(--link); }
.resume-section[open] .section-state::before { content: "−"; }
.section-body { padding-bottom: clamp(3rem, 8vh, 6rem); }
.record-list { margin: 0; padding: 0; list-style: none; }
.record { display: grid; grid-template-columns: minmax(12rem, .9fr) minmax(0, 1.5fr) minmax(10rem, .8fr); gap: 1.5rem; padding: 1.5rem 0 1.5rem 1.4rem; border-top: 1px solid var(--rule); position: relative; }
.record::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1px; background: var(--rule); }
.record-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.035em; }
a.record-title::after, .catalogue-link::after { content: " ↗"; color: var(--link); font-size: .8em; }
.record-note { margin: 0; color: #d1d1bb; }
.record-aside p { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.tags li::before { content: "#"; color: var(--link); }
.archive { border-bottom: 1px solid var(--rule); }
.archive summary { padding: 1.5rem 0; cursor: pointer; list-style: none; }
.archive summary::after { content: "+"; float: right; color: var(--link); font-size: 1.2em; }
.archive[open] summary::after { content: "−"; }
.catalogue-link { display: block; padding: 1.5rem 0 0; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
footer { justify-content: space-between; padding-block: 1.25rem 2rem; border-top: 1px solid var(--rule); }
@media (max-width: 700px) { .site-header, main, footer { width: min(100% - 2.5rem, 78rem); } .site-header { align-items: flex-start; } nav { flex-wrap: wrap; justify-content: flex-end; gap: .75rem; } .hero { padding-top: 5rem; } .record { grid-template-columns: 1fr; gap: .65rem; padding-left: 1rem; } .record-aside { display: flex; flex-wrap: wrap; align-items: baseline; gap: .65rem 1rem; } .tags { margin: 0; } footer { align-items: flex-start; flex-direction: column; gap: .35rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }