@font-face { font-family:"Oswald"; src:url("/fonts/oswald.woff2") format("woff2"), url("/fonts/oswald.woff") format("woff"); font-weight:200 700; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/plexmono-400.woff2") format("woff2"), url("/fonts/plexmono-400.woff") format("woff"); font-weight:400; font-display:swap; }

:root {
  color-scheme: dark;
  --ink:#0c0c0b; --paper:#151413; --bone:#e6ddcc; --ash:#9b9284; --dim:#6d665c;
  --red:#c1201b; --line:rgba(230,221,204,.16);
  --title:"Oswald","Arial Narrow",sans-serif;
  --mono:"Plex Mono","IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --serif:Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,5vw,72px);
  --max:1374px;

  --wrap:max(var(--gutter), calc((100% - var(--max)) / 2));
  --bar:64px;
  --vh:100vh;
}
@supports (height:100svh) { :root { --vh:100svh; } }

* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; scroll-padding-top:var(--bar); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--ink); color:var(--bone); font:400 17px/1.65 var(--serif); }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
a:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:-80px; z-index:10; padding:.6rem 1rem; background:var(--bone); color:var(--ink); font:400 .8rem var(--mono); }
.skip-link:focus { top:12px; }

.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--bar); padding:0 var(--wrap); background:rgba(12,12,11,.86);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.logo { font:300 1.05rem/1 var(--title); letter-spacing:.32em; text-decoration:none; white-space:nowrap; }
.logo span { color:var(--red); }
.logo.small { font-size:.8rem; }
nav { display:flex; gap:clamp(1rem,3vw,2.4rem); font:400 .72rem var(--mono); letter-spacing:.18em; text-transform:uppercase; }
nav a { color:var(--ash); text-decoration:none; padding:.9rem 0; }
nav a:hover { color:var(--bone); }



.hero, .book { min-height:calc(var(--vh) - var(--bar)); }
.hero { --foot:4.5rem; display:flex; flex-direction:column; }
.hero picture { display:block; will-change:opacity; }
.hero img { width:100%; height:auto; }
.hero-foot { flex:1 0 auto; display:flex; align-items:center; justify-content:flex-end; min-height:var(--foot); padding:0 var(--wrap); }
.continue { font:400 .72rem var(--mono); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ash);
  display:inline-flex; gap:.8rem; align-items:center; padding:.8rem 0; }
.continue i { position:relative; width:9px; height:18px; border-right:1px solid var(--red); }
.continue i::before { content:""; position:absolute; right:0; top:50%; width:9px; border-top:1px solid var(--red); }
.continue:hover { color:var(--bone); }

.tag { font:400 .7rem var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ash); margin:0 0 1.2rem; }
.book { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); align-items:center; align-content:center;
  max-width:var(--max); margin:0 auto; padding:clamp(4rem,10vw,8rem) var(--gutter); }
.book-art { position:relative; }
.book-art::after { content:""; position:absolute; top:-6%; bottom:-6%; left:50%; width:1px; background:var(--red); opacity:.7; }
.book-art img { width:100%; box-shadow:24px 28px 80px rgba(0,0,0,.55); }
.book-text { max-width:560px; }
h1, h2 { margin:0; }
#book-title { font-weight:400; }
.book-name { display:block; font:200 clamp(2.4rem,6vw,4.6rem)/1 var(--title); letter-spacing:.2em; }
.book-name span { color:var(--red); }
.book-text .subtitle { display:block; font:400 1.15rem/1.4 var(--mono); letter-spacing:.06em; color:var(--bone); margin:1.5rem 0 2rem; }
.lead { font:400 .95rem var(--mono); color:var(--bone); }
.body { color:#cfc5b4; }
.book-text p { margin:0 0 1rem; text-wrap:pretty; }
.rule { width:72px; height:1px; background:var(--bone); margin:2rem 0 1.4rem; opacity:.8; }
.note { font:400 .8rem/1.6 var(--mono); color:var(--ash); }

.archive { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(12,12,11,.72),rgba(12,12,11,.9)), url("/assets/band.webp") center 60%/cover no-repeat;
  padding:clamp(4rem,10vw,8rem) var(--wrap); display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; }
.archive h2 { font:400 clamp(1rem,2vw,1.3rem)/1.5 var(--mono); letter-spacing:.04em; margin:0 0 2rem; }
.coords { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:1.2rem 3rem; font-family:var(--mono); }
.coords dt { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.coords dd { margin:.2rem 0 0; font-size:1.05rem; }
.archive-quote { justify-self:end; text-align:right; margin:0; font:400 clamp(1.6rem,3.6vw,2.8rem)/1.25 var(--serif); text-wrap:balance; }

.footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:1.6rem var(--wrap);
  font:400 .66rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }

.not-found { min-height:100vh; min-height:var(--vh); display:grid; place-content:center; text-align:center; gap:1rem; padding:2rem var(--gutter); }
.not-found h1 { font:200 clamp(2rem,6vw,3.5rem)/1.1 var(--title); letter-spacing:.18em; margin:0; }
.not-found a { font:400 .75rem var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ash); }



@media (max-width:760px), (orientation:portrait) {
  .book { grid-template-columns:1fr; }
  .book-art::after { display:none; }
  .coords > div:last-child { grid-column:1 / -1; }
}
@media (orientation:portrait) and (min-width:761px) {
  .book { max-width:880px; }
}



@media (min-width:761px) and (orientation:landscape) {
  .book { --air:clamp(4rem,15vh,10rem); padding-block:var(--air); }
  .book-art { justify-self:center; width:min(100%, max(18rem, calc((var(--vh) - var(--bar) - 2 * var(--air)) * .744))); }
}

@media (max-width:900px) {

  .archive { background-image:linear-gradient(rgba(12,12,11,.72),rgba(12,12,11,.9)), url("/assets/band-900.webp"); }
}

@media (max-width:760px) {
  :root { --bar:56px; }
  body { font-size:16px; }
  .logo { font-size:.9rem; letter-spacing:.24em; }
  .hero { --foot:4rem; }
  .hero-foot { justify-content:center; }
  .book { padding-top:3.5rem; }
  .book-name { letter-spacing:.14em; }
  .archive { grid-template-columns:1fr; }
  .archive-quote { justify-self:start; text-align:left; }
}


@media (orientation:landscape) and (max-height:500px) {
  .topbar { position:relative; }
  html { scroll-padding-top:0; }
  .hero { --foot:3.5rem; }
}


.reveal { opacity:0; transform:translateY(28px); }
.reveal.is-visible { opacity:1; transform:none; transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay:var(--delay,0s); }
.book-text.reveal { --delay:.15s; }
.archive-quote.reveal { --delay:.2s; }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }