:root { --paper:#f1ede3; --ink:#171a18; --muted:#656a64; --line:#cfc9bc; --orange:#d7592b; --dark:#242625; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; text-rendering:optimizeLegibility; }
a { color:inherit; }
.site-header { position:absolute; z-index:2; top:0; left:0; width:100%; display:flex; align-items:flex-start; justify-content:space-between; padding:34px clamp(24px,5vw,76px); }
.wordmark { display:inline-flex; flex-direction:column; color:white; font-size:22px; font-weight:800; line-height:.78; letter-spacing:-.08em; text-decoration:none; text-transform:uppercase; }
.site-header nav { display:flex; gap:34px; }
.site-header nav a { color:white; font-size:12px; font-weight:700; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.hero { min-height:100svh; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); background:var(--dark); color:white; }
.hero-copy { align-self:end; padding:160px clamp(28px,7vw,112px) clamp(70px,10vw,142px); }
.eyebrow { margin:0 0 24px; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.hero h1,.section h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(64px,8.2vw,132px); font-weight:400; letter-spacing:-.065em; line-height:.84; }
.hero h1 span { display:block; color:#f29a6b; font-style:italic; }
.hero-intro { max-width:470px; margin:42px 0 30px; color:#d6ddd8; font-family:Georgia,'Times New Roman',serif; font-size:clamp(19px,1.6vw,25px); line-height:1.45; }
.text-link { display:inline-flex; gap:14px; padding-bottom:6px; border-bottom:1px solid #81948b; font-size:12px; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.hero-image-wrap { position:relative; min-height:660px; margin:0; overflow:hidden; padding:clamp(12px,1.6vw,24px); background:#050505; }
.hero-image { width:100%; height:100%; object-fit:contain; object-position:center; filter:saturate(.82) contrast(1.03); }
.hero-image-wrap figcaption { position:absolute; right:24px; bottom:26px; color:white; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; writing-mode:vertical-rl; }
.section { display:grid; grid-template-columns:72px minmax(280px,.8fr) minmax(340px,1.2fr); gap:clamp(30px,5vw,84px); padding:clamp(90px,12vw,180px) clamp(24px,6vw,96px); border-top:1px solid var(--line); }
.section-number { color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.14em; }
.section h2 { font-size:clamp(52px,6.3vw,98px); }
.prose { max-width:680px; }
.prose p { margin:0 0 1.55em; color:#343833; font-family:Georgia,'Times New Roman',serif; font-size:clamp(18px,1.65vw,24px); line-height:1.64; }
.lead-prose p:first-child::first-letter { float:left; margin:.08em .11em 0 0; color:var(--orange); font-size:4.2em; line-height:.68; }
.music { background:#e8e2d5; }
.sticky-heading { align-self:start; position:sticky; top:70px; }
blockquote { margin:56px 0 0; padding:20px 0 0; border-top:1px solid var(--line); color:var(--muted); font-family:Georgia,'Times New Roman',serif; font-size:17px; font-style:italic; line-height:1.5; }
.music-story .opening { color:var(--orange); font-size:clamp(26px,2.5vw,38px); line-height:1.35; }
.music-story a { text-decoration-color:var(--orange); text-decoration-thickness:1px; text-underline-offset:4px; }
.music-story a:hover { color:var(--orange); }
.music-story .signoff { margin-top:70px; color:var(--ink); font-size:clamp(30px,4vw,58px); font-style:italic; }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:28px; padding:70px clamp(24px,6vw,96px); background:var(--dark); color:#d9e0dc; }
.footer-mark { color:#f4eee1; font-size:28px; }
footer p { margin:0; font-family:Georgia,'Times New Roman',serif; font-style:italic; }
footer > a:last-child { justify-self:end; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; } .hero-copy { min-height:80svh; } .hero-image-wrap { min-height:70svh; } .section { grid-template-columns:44px 1fr; } .section .prose { grid-column:2; } .sticky-heading { position:static; } }
@media (max-width:600px) { .site-header { padding-top:26px; } .site-header nav { gap:20px; } .hero-copy { padding-top:140px; } .hero h1 { font-size:clamp(58px,21vw,86px); } .section { grid-template-columns:1fr; gap:26px; } .section-number { margin-bottom:16px; } .section .prose { grid-column:1; } footer { grid-template-columns:1fr; align-items:start; } footer > a:last-child { justify-self:start; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }