/* Fonts: Fraunces + DM Mono (SIL Open Font License), self-hosted latin subset */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:200 600;font-display:swap;src:url(/fonts/fraunces-var.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-400.woff2) format('woff2')}

:root{
  --paper:#f4ede3; --paper2:#e9dfd1; --ink:#2b211b; --line:rgba(43,33,27,.18); --terra:#c4613a;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 13px/1.5 'DM Mono',ui-monospace,monospace;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:300;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}

body::after{content:"";position:fixed;inset:-50%;pointer-events:none;opacity:.08;z-index:10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

.page{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);padding:0 var(--pad);max-width:1600px;margin:0 auto}

/* left, sticky */
.left{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:48px 0}
h1,.brand{font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.about{margin-top:14px;max-width:38ch;font-family:'Fraunces',Georgia,serif;font-weight:300;font-variation-settings:"SOFT" 100,"opsz" 24;font-size:clamp(17px,1.35vw,20px);line-height:1.45;opacity:.85}
.lnav{display:flex;flex-direction:column;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.lnav a{width:max-content;transition:color .25s}
.lnav a:hover{color:var(--terra)}

/* right, scrolling */
.right{padding:48px 0 72px;display:flex;flex-direction:column;gap:88px}
.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end}
.cover{display:block;aspect-ratio:1;overflow:hidden;border-radius:2px;
  box-shadow:0 1px 0 rgba(43,33,27,.08),0 22px 44px -26px rgba(43,33,27,.55);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover .cover{transform:translateY(-4px)}
.card:hover .cover img{transform:scale(1.025)}
.card h2{font-size:clamp(32px,3.6vw,54px);line-height:.95;margin-top:10px}
.card .m{margin:12px 0 20px;opacity:.6}
.m a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.m a:hover{color:var(--terra);border-bottom-color:currentColor}
.go a{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:color .25s,padding .25s}
.go a:first-child{border-top:1px solid var(--line)}
.go a:hover{color:var(--terra);padding-left:6px}

.box{background:var(--paper2);padding:clamp(24px,3vw,44px);border-radius:2px}
.box h2{font-size:clamp(28px,3vw,42px);line-height:1;margin-bottom:10px}
.nlsub{opacity:.6;margin-bottom:18px}
form.nl{display:flex;border-bottom:1px solid var(--ink);max-width:480px}
form.nl input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:inherit;padding:12px 0;color:var(--ink)}
form.nl input::placeholder{color:rgba(43,33,27,.45)}
form.nl button{background:transparent;border:0;font:inherit;cursor:pointer;padding:12px 0 12px 16px;color:var(--ink);letter-spacing:.12em;text-transform:uppercase;font-size:11px;transition:color .25s}
form.nl button:hover{color:var(--terra)}
.ok{display:none;padding:12px 0;color:var(--terra)}

.links a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);transition:color .25s,padding .25s}
.links a:hover{color:var(--terra);padding-left:6px}
footer{font-size:11px;letter-spacing:.1em}
footer p:last-child{opacity:.45;margin-top:6px}
.thanks{opacity:.7}

@media (max-width:860px){
  .page{grid-template-columns:1fr;gap:0}
  .left{position:relative;height:auto;gap:28px;padding:36px 0 8px}
  h1{font-size:24px}
  .lnav{flex-wrap:wrap;gap:12px 22px}
  .lnav{flex-direction:row;gap:22px}
  .right{padding-top:48px;gap:64px}
  .card{grid-template-columns:1fr;gap:20px}
}

/* ---- additions for the live site ---- */
h1 a{transition:color .25s}
h1 a:hover{color:var(--terra)}
.card h2 a{transition:color .25s}
.card h2 a:hover{color:var(--terra)}
.more{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;transition:color .25s,opacity .25s}
.more:hover{color:var(--terra);opacity:1}

/* newsletter */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:12px}
.err{display:none;padding:10px 0 0;color:var(--terra);font-size:12px}
.fine{margin-top:16px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.fine a{border-bottom:1px solid currentColor}
form.nl button[disabled]{opacity:.5;cursor:wait}

/* release page */
.rel{display:flex;flex-direction:column;gap:36px}
.rel .cover{max-width:620px}
.prose{max-width:52ch;font-family:'Fraunces',Georgia,serif;font-weight:300;font-variation-settings:"SOFT" 100,"opsz" 24;font-size:clamp(17px,1.35vw,20px);line-height:1.5;opacity:.85}
.prose p+p{margin-top:.8em}
ol.tracks{list-style:none;counter-reset:t;max-width:480px}
ol.tracks li{counter-increment:t;display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
ol.tracks li:first-child{border-top:1px solid var(--line)}
ol.tracks li::before{content:counter(t,decimal-leading-zero);opacity:.45}
ol.tracks a{transition:color .25s}
ol.tracks a:hover{color:var(--terra)}
.go{max-width:480px}
.player{max-width:620px}
.player button{display:flex;justify-content:space-between;width:100%;background:transparent;border:1px solid var(--line);font:inherit;color:inherit;padding:14px 16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .25s,border-color .25s}
.player button:hover{color:var(--terra);border-color:var(--terra)}
.player iframe{display:block;width:100%;border:0;border-radius:12px}
.back{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;transition:color .25s,opacity .25s}
.back:hover{color:var(--terra);opacity:1}

/* on release pages the release title is the h1; the site name is .brand */
.rel h1{font-size:clamp(40px,5vw,72px);line-height:.95;margin-top:10px;white-space:normal}
@media (max-width:860px){.rel h1{font-size:44px}}