:root {
  --ink: #111318;
  --paper: #f1eee8;
  --signal: #d64545;
  --cream: #f8f6f0;
  --muted: #94959a;
  --line: rgba(17, 19, 24, .18);
  --mono: 'DM Mono', monospace;
  --display: 'Archivo', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.grain { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); }
.site-header { height: 79px; padding: 0 clamp(24px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; width: 100%; z-index: 5; color: white; border-bottom: 1px solid rgba(255,255,255,.18); }
.wordmark { font-weight: 900; font-size: 1.35rem; letter-spacing: -.09em; line-height: 1; }
.wordmark span { color: var(--signal); }
nav { display: flex; gap: clamp(16px, 2.7vw, 42px); margin-left: 6rem; }
nav a, .sound-toggle, footer p, footer button { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; font-weight: 500; }
nav a { opacity: .77; transition: opacity .2s; } nav a:hover { opacity: 1; }
.sound-toggle { border: 0; color: white; background: transparent; padding: .5rem; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sound-toggle span { display:block; width: 8px; height:8px; border-radius:50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(214,69,69,.5); }
body.pulsing .sound-toggle span { animation: pulse 1s infinite; }
.hero { min-height: 795px; height: 100vh; max-height: 960px; background: var(--ink); color: white; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(400px, .91fr); position: relative; overflow: hidden; padding: 79px clamp(24px, 5vw, 76px) 63px; }
.hero:before { content: ''; position: absolute; width: 43vw; height: 43vw; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; top: -25vw; left: -16vw; }
.hero-copy { align-self: center; padding: 2.5rem 0 1.7rem; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 1.7rem; color: #aaa; font: 500 .66rem/1 var(--mono); letter-spacing: .15em; display: flex; align-items: center; gap: 10px; }
.eyebrow span { display: block; width: 25px; height: 1px; background: currentColor; }
.eyebrow.accent { color: var(--signal); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size: clamp(4.5rem, 8.4vw, 9.7rem); line-height: .82; letter-spacing: -.078em; font-weight: 900; margin: 0; position:relative; z-index:1; }
em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.hero h1 em { color: var(--signal); }
.hero-intro { color:#b5b5b9; max-width: 440px; line-height:1.55; font-size: clamp(.95rem, 1.2vw, 1.12rem); margin: 2.1rem 0 2rem 2px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap: 20px; min-height:48px; padding:0 18px; font: 500 .65rem var(--mono); letter-spacing:.09em; text-transform:uppercase; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.button b { font: 1rem/1 var(--display); }
.button-primary { background: var(--signal); color: white; }.button-primary:hover { background:#ec5353; }
.button-ghost { border: 1px solid rgba(255,255,255,.35); color: white; }
.button-ghost:hover { background:white; color:var(--ink); }
.portrait-wrap { position: relative; width: min(100%, 650px); height: min(72vh, 660px); align-self: end; justify-self: end; overflow:hidden; background:#313137; }
.hero-portrait img { height:100%; width:100%; object-fit:cover; object-position: 50% 45%; filter: grayscale(20%) contrast(1.05); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.hero-portrait:hover img { transform:scale(1.04); }
.portrait-overlay { position:absolute; inset:0; background: linear-gradient(180deg,rgba(17,19,24,.35),transparent 34%,rgba(17,19,24,.45)); mix-blend-mode:multiply; }
.portrait-caption { position:absolute; z-index:2; font: 500 .6rem/1.55 var(--mono); letter-spacing:.13em; color: white; }.portrait-caption span { opacity:.62; }.caption-top { top:17px; left:18px; }.caption-bottom { right:18px; bottom:17px; text-align:right; }.caption-bottom i { color:var(--signal); font-size:1.5rem; font-style:normal; vertical-align:middle; margin-left:7px; }
.hero-index { position:absolute; right:clamp(24px,5vw,76px); bottom:23px; display:flex; gap:10px; align-items:center; color:#909095; font: .6rem var(--mono); }.hero-index i { width:52px; height:1px; display:block; background:var(--signal); }
.scroll-cue { position:absolute; left: clamp(24px,5vw,76px); bottom:27px; font: .58rem var(--mono); letter-spacing:.15em; color:#aaa; display:flex; align-items:center; gap:13px; }.scroll-cue i { height:39px; width:1px; background:var(--signal); display:block; }
.section-shell { padding-left: clamp(24px, 9.5vw, 148px); padding-right: clamp(24px, 9.5vw, 148px); }
.profile { padding-top: 132px; padding-bottom: 132px; }
.section-label { font: 500 .63rem var(--mono); letter-spacing:.14em; display:flex; align-items:center; gap:10px; color:#777980; }.section-label span { color:var(--signal); }.section-label i { width:42px; height:1px; background:currentColor; display:block; }.section-label.light { color:#8c8d91; }.section-label.light span { color:var(--signal); }
.profile-grid { display:grid; grid-template-columns: 1.23fr .77fr; gap:clamp(30px, 9vw, 145px); margin-top:55px; align-items:end; }
h2 { font-size:clamp(2.65rem, 5vw, 5.8rem); line-height:.93; letter-spacing:-.07em; font-weight:900; margin:0; }.profile h2 em { color:var(--signal); }
.profile-text { border-left:1px solid var(--line); padding-left: 27px; max-width:430px; }.profile-text p { font-size:1rem; line-height:1.6; color:#4f5157; margin-bottom:1.15rem; }.profile-text p:last-child { margin-bottom:0; }.profile-text strong { font-weight:700; color:var(--ink); }
.facts { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:84px; }.fact { padding:20px 12px 0 0; min-height:76px; border-right:1px solid var(--line); }.fact:not(:first-child) { padding-left:22px; }.fact:last-child { border-right:0; }.fact span { font:.58rem var(--mono); letter-spacing:.1em; display:block; color:#777980; text-transform:uppercase; margin-bottom:7px; }.fact strong { font-size:.87rem; letter-spacing:-.025em; }
.timeline-section { background:var(--ink); color:var(--cream); padding-top:125px; padding-bottom:125px; position:relative; overflow:hidden; }.timeline-section:after { content:'ROA'; position:absolute; top:-.24em; right:-.05em; color:rgba(255,255,255,.025); font-size:clamp(13rem,34vw,39rem); font-weight:900; letter-spacing:-.12em; }
.history-heading { margin: 50px 0 82px; position:relative; z-index:1; }.history-heading .eyebrow { margin-bottom:1.35rem; }.history-heading h2 { font-size:clamp(3rem,6.1vw,7rem); }.history-heading h2 em { color:var(--signal); }.history-heading > p:last-child { margin:1.9rem 0 0; color:#a3a3a6; font-size:1rem; }
.timeline { list-style:none; padding:0; margin:0; position:relative; z-index:1; }.timeline:before { content:''; position:absolute; left:18.8%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.15); }.timeline li { display:grid; grid-template-columns:18.8% 1fr; padding: 0 0 42px; }.timeline li:last-child { padding-bottom:0; }.year { color:var(--signal); font:500 .76rem var(--mono); padding-top:3px; letter-spacing:.06em; }.event { padding-left:clamp(31px,5vw,82px); position:relative; max-width:800px; }.event-mark { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--signal); left:-6px; top:4px; font:0/0 sans-serif; }.event h3 { margin:0 0 9px; font-size:clamp(1.4rem,2vw,2rem); letter-spacing:-.05em; }.event p { color:#a5a5aa; margin:0; max-width:640px; line-height:1.55; font-size:1rem; }.event em { color:white; font-style:normal; }
.music { padding-top:132px; padding-bottom:132px; }.music-heading { margin:51px 0 74px; display:grid; grid-template-columns:1.34fr .66fr; gap:50px; align-items:end; }.music-heading h2 { font-size:clamp(2.75rem,5.3vw,6.05rem); }.music-heading h2 em { color:var(--signal); }.music-heading > p { margin:0; color:#56575c; font-size:.99rem; line-height:1.58; max-width:390px; }
.track-list { border-top:1px solid var(--ink); }.track { min-height:91px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:12% 33% 1fr 32px; align-items:center; gap:10px; transition:background .25s,color .25s,padding .25s; }.track:hover { background:var(--ink); color:white; padding-left:15px; padding-right:15px; }.track-number { color:var(--signal); font:.65rem var(--mono); }.track-name { font-weight:800; font-size:clamp(1.2rem,1.8vw,1.8rem); letter-spacing:-.05em; }.track-name small { display:block; color:#898a8e; font: .53rem var(--mono); letter-spacing:.1em; margin-top:5px; }.track:hover .track-name small,.track:hover .track-note { color:#a7a8ad; }.track-note { color:#6c6d72; font-size:.89rem; }.track-arrow { color:var(--signal); font-size:1.4rem; justify-self:end; }
.status-section { min-height:665px; display:flex; align-items:center; background:var(--signal); color:white; position:relative; overflow:hidden; }.status-section:before { content:''; position:absolute; inset:0; background:linear-gradient(115deg,rgba(0,0,0,.12),transparent 60%); }.status-orb { position:absolute; width: min(63vw,900px); aspect-ratio:1; border:1px solid rgba(255,255,255,.24); border-radius:50%; right:-13vw; top:-11vw; }.status-orb:before,.status-orb:after { content:''; position:absolute; inset:13%; border:1px solid rgba(255,255,255,.18); border-radius:50%; }.status-orb:after { inset:28%; }.status-inner { position:relative; padding-top:112px; padding-bottom:112px; }.status-inner .eyebrow { color:#f6bbbb; }.status-inner h2 { font-size:clamp(3.1rem,6.6vw,7.7rem); max-width:1030px; }.status-inner h2 em { color:var(--ink); }.status-copy { max-width:650px; font-size:1.03rem; line-height:1.6; margin:2.1rem 0 2.3rem; color:#fff4f0; }.button-light { color:var(--ink); background:var(--cream); }.button-light:hover { background:white; }.status-stamp { position:absolute; right:clamp(24px,9.5vw,148px); top:96px; text-align:right; color:var(--ink); font:500 .68rem/1.35 var(--mono); letter-spacing:.12em; }.status-stamp span { color:white; font-size:2.1rem; letter-spacing:-.08em; font-family:var(--display); font-weight:900; }
.sources { padding-top:132px; padding-bottom:45px; }.sources-grid { margin-top:52px; display:grid; grid-template-columns:.83fr 1.17fr; gap:clamp(50px,10vw,160px); }.sources-intro h2 { font-size:clamp(2.7rem,4.75vw,5.45rem); }.sources-intro h2 em { color:var(--signal); }.sources-intro > p:last-child { margin:1.8rem 0 0; max-width:380px; color:#5d5e63; line-height:1.58; font-size:.96rem; }.source-links { border-top:1px solid var(--ink); }.source-links a { min-height:87px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:47px 1fr 34px; grid-template-rows:auto auto; align-content:center; column-gap:12px; transition:padding .2s,background .2s,color .2s; }.source-links a:hover { padding-left:12px; padding-right:12px; background:var(--ink); color:white; }.source-links a span { grid-row:1/3; align-self:center; color:var(--signal); font:.61rem var(--mono); }.source-links strong { letter-spacing:-.035em; font-size:1rem; }.source-links small { color:#74757a; font:.61rem var(--mono); letter-spacing:.02em; margin-top:4px; }.source-links b { grid-column:3; grid-row:1/3; align-self:center; color:var(--signal); font-size:1.1rem; }.image-credit { padding-top:78px; margin:0; color:#85868b; font:.58rem/1.45 var(--mono); letter-spacing:.05em; }
footer { min-height:93px; background:var(--ink); color:white; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; }footer p { margin:0; opacity:.58; } footer button { color:white; border:0; padding:8px 0; background:transparent; cursor:pointer; transition:color .2s; }footer button:hover { color:var(--signal); }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.65,.2,1); }.reveal.is-visible { opacity:1; transform:none; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(214,69,69,0); } }
@media (max-width: 830px) { .site-header { height:66px; }.site-header nav { display:none; }.hero { min-height:800px; max-height:none; height:auto; display:flex; flex-direction:column; padding-top:95px; padding-bottom:70px; }.hero-copy { padding:0; }.hero h1 { font-size:clamp(4.25rem,17.5vw,7.2rem); }.hero-intro { max-width:500px; margin:1.7rem 0; }.portrait-wrap { width:100%; height: min(69vw,510px); margin-top:37px; }.hero-index { display:none; }.scroll-cue { bottom:16px; }.profile,.timeline-section,.music,.sources { padding-top:86px; padding-bottom:86px; }.profile-grid,.music-heading,.sources-grid { grid-template-columns:1fr; gap:32px; }.profile-grid { margin-top:39px; }.profile-text { max-width:570px; }.facts { margin-top:55px; grid-template-columns:repeat(2,1fr); }.fact { border-bottom:1px solid var(--line); padding:14px 12px 14px 0; }.fact:nth-child(2n) { border-right:0; padding-left:16px; }.fact:nth-child(n+3) { border-bottom:0; }.history-heading { margin:43px 0 58px; }.timeline:before { left:0; }.timeline li { grid-template-columns:1fr; padding-left:0; }.year { padding-left:23px; margin-bottom:13px; }.event { padding-left:23px; }.event-mark { left:-6px; top:5px; }.music-heading { margin:39px 0 49px; }.track { grid-template-columns:38px 1fr 26px; padding:14px 0; min-height:83px; }.track-note { display:none; }.status-section { min-height:590px; }.status-inner { padding-top:94px; padding-bottom:94px; }.status-stamp { right:24px; top:31px; }.sources-grid { margin-top:40px; }.source-links a { grid-template-columns:37px 1fr 24px; } }
@media (max-width: 470px) { .hero-actions { display:grid; grid-template-columns:1fr; }.button { width:100%; }.facts { grid-template-columns:1fr; }.fact,.fact:nth-child(2n) { padding:14px 0; border-right:0; border-bottom:1px solid var(--line); }.fact:last-child { border-bottom:0; }.status-inner h2 { font-size:clamp(2.75rem,14vw,4.1rem); }.status-copy { font-size:.94rem; }.portrait-caption { font-size:.52rem; }.caption-bottom { max-width:165px; }.source-links small { font-size:.55rem; } footer p { display:none; } }