@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --paper:#eee4c2; --paper-deep:#e2d3a6; --ink:#181813; --green:#40541d; --olive:#71803d; --gold:#b49b65; --line:rgba(24,24,19,.25); --sans:'Space Grotesk', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); overflow-x:hidden; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:radial-gradient(rgba(24,24,19,.34) .45px, transparent .45px); background-size:5px 5px; mix-blend-mode:multiply; z-index:4; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.12; z-index:3; background:linear-gradient(116deg, transparent 0 46%, rgba(255,255,255,.5) 50%, transparent 54%), linear-gradient(25deg, transparent 0 60%, rgba(24,24,19,.14) 61%, transparent 63%); background-size:280px 190px, 210px 150px; mix-blend-mode:soft-light; }
.site-header { min-height:86px; padding:28px clamp(22px,5vw,74px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.wordmark { color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.08em; font-size:clamp(10px,1.1vw,15px); text-transform:uppercase; white-space:nowrap; }.wordmark span { font-family:var(--mono); font-size:8px; vertical-align:top; margin-left:3px; }
nav { display:flex; gap:28px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; } nav a { color:var(--ink); text-decoration:none; transition:color .25s; } nav a:hover, nav a:focus-visible { color:var(--green); }
.header-note { justify-self:end; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--green); }
.section-wrap { width:min(1180px, calc(100% - 44px)); margin:0 auto; }.hero { min-height:calc(100vh - 86px); padding:clamp(60px,10vh,130px) 0 100px; display:grid; grid-template-columns:38% 62%; align-items:center; position:relative; }.hero-copy { align-self:start; padding-top:clamp(20px,9vh,120px); position:relative; z-index:2; }.eyebrow,.kicker,.section-label,.player-topline,.player-bottomline,.site-footer,figcaption { font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:10px; }.eyebrow { display:flex; align-items:center; gap:10px; color:var(--green); }.signal-dot { width:8px; height:8px; display:inline-block; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px rgba(64,84,29,.12); }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(68px,9vw,132px); line-height:.83; letter-spacing:-.08em; margin:50px 0 32px; font-weight:600; text-transform:uppercase; } h1 em,h2 em,.about-lead em { font-family:Georgia,serif; font-weight:400; text-transform:none; letter-spacing:-.08em; } .hero-deck { font-size:clamp(18px,2vw,27px); line-height:1.15; letter-spacing:-.04em; margin-bottom:38px; }
.text-link { color:var(--ink); text-decoration:none; text-transform:uppercase; font-family:var(--mono); font-size:10px; letter-spacing:.11em; border-bottom:1px solid var(--ink); padding-bottom:9px; display:inline-flex; gap:14px; transition:gap .25s,color .25s; }.text-link:hover,.text-link:focus-visible { gap:20px; color:var(--green); }
.artwork-wrap { margin:0; position:relative; z-index:1; transform:rotate(2deg); }.artwork-frame { padding:12px; background:#e6dbb7; box-shadow:14px 16px 0 rgba(64,84,29,.14), 0 20px 50px rgba(52,43,19,.14); }.artwork-frame img { width:100%; display:block; aspect-ratio:1341/1173; object-fit:cover; }.artwork-wrap figcaption { display:flex; justify-content:space-between; margin-top:15px; color:var(--green); transform:rotate(-2deg); }.artwork-wrap figcaption span { color:var(--ink); }.hero-mark { position:absolute; right:2%; bottom:8%; display:grid; gap:9px; }.hero-mark span { display:block; width:15px; height:15px; background:var(--green); }
.record,.demos,.about { padding:130px 0; border-top:1px solid var(--line); }.section-label { display:flex; align-items:center; gap:15px; color:var(--green); }.section-label .rule { width:44px; height:1px; background:var(--green); }.record-grid,.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(55px,10vw,170px); padding:70px 7% 0; }.kicker { color:var(--green); margin-bottom:25px; }.record-intro h2,.demos h2 { font-size:clamp(48px,6.5vw,94px); line-height:.9; letter-spacing:-.08em; font-weight:500; margin-bottom:0; }.large-copy { font-size:clamp(23px,3vw,42px); line-height:1.05; letter-spacing:-.055em; max-width:540px; }.detail-list { border-top:1px solid var(--line); margin-top:55px; }.detail-list div { display:grid; grid-template-columns:35px 1fr; gap:16px; border-bottom:1px solid var(--line); padding:18px 0; font-family:var(--mono); font-size:11px; text-transform:uppercase; line-height:1.35; }.detail-list span { color:var(--green); }
.demos-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding:70px 7% 45px; }.side-note { font-family:var(--mono); font-size:11px; line-height:1.6; text-transform:uppercase; color:var(--green); text-align:right; margin:0 0 5px; }.empty-player { min-height:370px; border:1px solid var(--ink); margin:0 7%; display:flex; flex-direction:column; justify-content:space-between; background:rgba(225,211,166,.27); position:relative; overflow:hidden; }.empty-player:before,.empty-player:after { content:""; position:absolute; border:1px solid rgba(64,84,29,.28); border-radius:50%; width:300px; height:300px; right:-120px; top:-130px; }.empty-player:after { width:430px; height:430px; right:-185px; top:-195px; }.player-topline,.player-bottomline { display:flex; justify-content:space-between; padding:18px 21px; color:var(--green); }.player-center { text-align:center; padding:45px 20px; position:relative; z-index:1; }.botanical-glyph { color:var(--green); font-size:28px; margin-bottom:24px; }.player-title { font-size:clamp(27px,4vw,54px); line-height:.94; letter-spacing:-.06em; margin-bottom:18px; }.player-subtitle { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--green); }.tiny-bars { letter-spacing:2px; color:var(--gold); }
.about-grid { padding-top:65px; align-items:start; }.about-lead { font-size:clamp(42px,6vw,83px); line-height:.88; letter-spacing:-.075em; }.about-copy { max-width:490px; font-size:clamp(19px,2.3vw,29px); line-height:1.18; letter-spacing:-.04em; }.about-copy p + p { margin-top:28px; color:var(--green); }.about-rule { margin:110px 7% 0; height:14px; display:flex; gap:9px; align-items:center; }.about-rule span { width:15px; height:15px; background:var(--green); }.about-rule span:nth-child(2) { width:75px; height:1px; background:var(--ink); }.about-rule span:nth-child(4) { width:40px; height:1px; background:var(--ink); }
.closing { padding:150px 0 170px; border-top:1px solid var(--line); }.closing-inner { max-width:700px; margin:0 auto; text-align:center; }.closing h2 { font-size:clamp(72px,11vw,150px); line-height:.78; letter-spacing:-.09em; text-transform:uppercase; margin:58px 0 37px; }.closing-copy { font-size:18px; color:var(--green); margin-bottom:34px; }.site-footer { border-top:1px solid var(--line); padding:26px 0; display:flex; justify-content:space-between; color:var(--green); }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .8s ease,transform .8s ease; }.reveal.is-visible { opacity:1; transform:none; }.reveal-delay { transition-delay:.16s; }
@media (max-width:760px) { .site-header { grid-template-columns:1fr auto; padding:22px; }.header-note { display:none; } nav { gap:14px; font-size:9px; }.section-wrap { width:calc(100% - 36px); }.hero { display:flex; flex-direction:column; align-items:stretch; padding-top:55px; }.hero-copy { padding:0 5% 56px; }.hero-copy h1 { font-size:clamp(63px,18vw,110px); margin-top:45px; }.artwork-wrap { width:calc(100% - 8px); margin-left:8px; }.hero-mark { display:none; }.record,.demos,.about { padding:90px 0; }.record-grid,.about-grid { grid-template-columns:1fr; gap:48px; padding:55px 5% 0; }.record-intro h2,.demos h2 { font-size:clamp(53px,15vw,86px); }.large-copy { font-size:31px; }.demos-heading { display:block; padding:55px 5% 35px; }.side-note { text-align:left; margin-top:30px; }.empty-player { margin:0 5%; min-height:340px; }.about-lead { font-size:58px; }.about-copy { font-size:25px; }.about-rule { margin:80px 5% 0; }.closing { padding:110px 0 120px; }.closing h2 { font-size:21vw; }.site-footer { width:calc(100% - 36px); font-size:8px; gap:12px; }.site-footer span:nth-child(2) { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.text-link { transition:none; } }