:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --ink: #202521;
  --muted: #505952;
  --accent: #9d351b;
  --line: #c8c8bc;
  font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.6; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip { position: absolute; top: .5rem; left: .5rem; padding: .5rem 1rem; background: var(--paper); transform: translateY(-180%); }
.skip:focus { transform: none; }
.frame { width: min(72rem, calc(100% - 3rem)); margin-inline: auto; }

.top, .footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.top { border-bottom: 1px solid var(--line); }
.brand { font: 700 1.35rem ui-monospace, monospace; text-decoration: none; white-space: nowrap; }
.brand span, h1 span { color: var(--accent); }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: .9rem; }
nav a { text-decoration: none; }
nav a:hover, .jump:hover { text-decoration: underline; }

.hero { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 9vw, 8rem); }
.eyebrow, .art-label, .art-date { font: 600 .8rem/1.5 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: var(--accent); margin: 0 0 1rem; }
h1, h2 { font-family: Georgia, serif; font-weight: 400; line-height: 1.04; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.55rem, 6vw, 5.75rem); letter-spacing: -.06em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: -.045em; }
.intro { max-width: 39ch; margin-block: 1.5rem; font-size: 1.12rem; }
.jump { display: inline-flex; gap: .7rem; font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: .25rem; }

.art { padding: clamp(1rem, 3vw, 2rem); color: #f5dfbf; background: #252e29; }
.art-label { display: flex; justify-content: space-between; gap: 1rem; }
.art svg { display: block; width: 100%; height: auto; margin-block: 1rem; }
.grid { stroke: #46544a; }
.wire { stroke: #f5a474; stroke-width: 2; }
.art circle { fill: #f5a474; }
.art-date { display: flex; align-items: baseline; gap: .9rem; }
.art-date strong { font-size: clamp(2rem, 5vw, 4.5rem); letter-spacing: -.07em; line-height: 1; }

.section { border-top: 1px solid var(--line); padding-block: clamp(2rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr 2.2fr; gap: 1rem 2rem; }
.section p:not(.eyebrow), .footer p { color: var(--muted); max-width: 54ch; }
.interests { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.interests li { border-top: 1px solid var(--line); padding-block: .6rem; }
.footer { border-top: 1px solid var(--line); align-items: baseline; }
.footer p { margin: 0; font-size: .85rem; }

@media (max-width: 44rem) {
  .frame { width: calc(100% - 2rem); }
  .hero, .section { grid-template-columns: 1fr; }
  .section .eyebrow { margin-bottom: 0; }
  nav { column-gap: .7rem; }
  .footer { flex-wrap: wrap; }
}