:root { --ink: #172a36; --blue: #366680; --foam: #a8d8cf; --paper: #e8eee7; --sun: #ffb044; --line: rgba(23,42,54,.2); }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
.site-header, footer, .section-label, .index li { display: flex; align-items: center; justify-content: space-between; }
.site-header { border-bottom: 1px solid var(--line); padding: 22px clamp(20px, 6vw, 96px); font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.wordmark { font-weight: 800; letter-spacing: .18em; text-decoration: none; }
nav { display: flex; gap: 24px; } nav a { text-decoration: none; } nav a:hover, nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
main { margin: 0 auto; max-width: 1320px; padding: 0 clamp(20px, 6vw, 96px); }
.intro { min-height: 610px; padding: 110px 0 80px; position: relative; overflow: hidden; }
.eyebrow, .section-label, footer { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { color: var(--blue); margin: 0 0 24px; }
h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(54px, 9vw, 134px); font-weight: 400; letter-spacing: -.06em; line-height: .86; max-width: 900px; position: relative; z-index: 1; }
.lede { font-size: clamp(20px, 2vw, 29px); line-height: 1.25; max-width: 600px; position: relative; z-index: 1; }
.orbit { border: 1px solid var(--blue); border-radius: 50%; height: min(42vw, 550px); position: absolute; right: -8%; top: 3%; transform: rotate(-17deg); width: min(42vw, 550px); }
.orbit::before, .orbit::after { border: 1px solid var(--foam); border-radius: 50%; content: ""; inset: 17%; position: absolute; } .orbit::after { inset: 35%; }
.orbit span, .orbit i, .orbit b { border-radius: 50%; display: block; position: absolute; } .orbit span { background: var(--sun); height: 28px; left: 6%; top: 25%; width: 28px; } .orbit i { background: var(--blue); height: 13px; right: 10%; top: 60%; width: 13px; } .orbit b { background: var(--foam); bottom: 10%; height: 20px; left: 38%; width: 20px; }
.index { border-top: 1px solid var(--line); padding: 28px 0 100px; } .section-label { color: var(--blue); } h2 { font-size: clamp(36px, 5vw, 72px); font-weight: 400; letter-spacing: -.05em; margin: 70px 0 20px; }
ol { border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; } .index li { align-items: baseline; border-bottom: 1px solid var(--line); gap: 20px; padding: 24px 0; } .index-no, .tag { color: var(--blue); font-family: Arial, sans-serif; font-size: 12px; width: 11%; } .index li div { flex: 1; } h3 { font-size: clamp(22px, 3vw, 38px); font-weight: 400; letter-spacing: -.035em; margin-bottom: 5px; } .index li p { color: #41525b; font-size: 17px; margin: 0; } .tag { text-align: right; width: 18%; }
footer { border-top: 1px solid var(--line); color: var(--blue); padding: 24px clamp(20px, 6vw, 96px); }
.page { min-height: calc(100vh - 165px); padding-bottom: 100px; padding-top: 110px; } .page h1 { max-width: 1000px; } .prose { font-size: 20px; line-height: 1.45; margin-left: 27%; max-width: 570px; } .not-found main { min-height: 100vh; padding-top: 25vh; }
.home-link { border-bottom: 1px solid var(--ink); display: inline-block; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .08em; margin-top: 24px; padding-bottom: 5px; text-decoration: none; text-transform: uppercase; }
@media (max-width: 720px) { .intro { min-height: 570px; padding-top: 74px; } .orbit { height: 95vw; opacity: .65; right: -38%; top: 12%; width: 95vw; } h1 { line-height: .92; } .index li { align-items: flex-start; flex-wrap: wrap; } .index-no { width: auto; } .index li div { min-width: 70%; } .tag { text-align: left; width: auto; } .prose { margin-left: 0; } footer { gap: 16px; flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }