/* ============================================================
   PACHAKUTI — shared styles (single source for every page)
   Off-white olive background · one grotesque sans throughout.
   ============================================================ */
:root{
  --bg:#eceee1;          /* off-white, very light olive */
  --ink:#111;
  --rule:#111;
  --listen:#e06c00;
  --band:#0a8f3c;
  --insta:#0f7fc4;
  --contact:#d100c8;
  --faint:#6f7268;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-size:1.4rem; line-height:1.34; font-weight:400;
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- left nav (fixed) ---------- */
.side{
  position:fixed; top:0; left:0;
  width:32%; height:100vh; overflow-y:auto;
  padding:2.4rem 4rem 4rem;
}
.side .name{ font-weight:700; display:inline-block; }
.side hr{ border:0; border-top:1px solid var(--rule); margin:1.15rem 0; }
.side ol{ list-style:decimal; padding-left:1.7em; }
.side ol li{ margin:0; }
.side ol li.current > a{ font-style:italic; }
.side ol li.chapter > a{ font-weight:700; }

.links .row{ display:block; }
.l-listen{ color:var(--listen); cursor:pointer; }
.l-band{ color:var(--band); }
.l-insta{ color:var(--insta); }
.l-contact{ color:var(--contact); }
.streams{ display:none; margin:.35rem 0 .5rem; }
.streams.open{ display:flex; gap:.7rem; align-items:center; }
.streams a{ display:inline-flex; color:var(--ink); }
.streams a:hover{ opacity:.55; }
.streams svg{ width:18px; height:18px; display:block; }

/* ---------- top-right menu ---------- */
.topmenu{
  position:fixed; top:2.4rem; right:4rem; z-index:20; text-align:right;
}
.topmenu a{ margin-left:1.5rem; }
.topmenu a.active{ text-decoration:underline; }

/* ---------- right content ---------- */
.content{ margin-left:32%; width:68%; padding:2.4rem 4rem 6rem; }
.content article{ max-width:40em; }

.p-title{ font-size:1.4rem; font-weight:700; line-height:1.34; margin-bottom:1.1rem; }
.p-meta{ margin:0 0 .3rem; }
.p-text{ margin:1.4rem 0; }
.p-text p{ margin:0 0 1.1rem; }
.p-text p:last-child{ margin-bottom:0; }
.tracklist{ margin:1.4rem 0; }
.credits{ margin:1.4rem 0; }

.media{ margin:1.4rem 0; }
figure{ margin:0 0 1.4rem; }
figure img{ display:block; width:100%; height:auto; }
figcaption{ margin-top:.4rem; color:var(--faint); }
.frame{
  border:1px solid var(--rule); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  color:var(--faint); text-align:center; padding:1rem;
}
.embed{ position:relative; padding-bottom:56.25%; height:0; margin-bottom:1.4rem; }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.w-links{ margin:1.4rem 0; }
.w-links a{ margin-right:1.4rem; text-decoration:underline; }
.next{ display:inline-block; margin-top:2rem; }

/* ---------- section pages (about / vinyl / services) ---------- */
.sec + .sec{ margin-top:2.6rem; }
.merch-grid{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:.4rem; }
.merch-item{ width:240px; max-width:100%; }
.merch-item img{ width:100%; height:auto; display:block; }
.merch-item .t{ margin-top:.5rem; }
.svc{ margin:1.4rem 0; }
.svc h3{ font-size:1.4rem; font-weight:700; }
.svc .refs a{ text-decoration:underline; margin-right:1.2rem; }
.book-form{ margin-top:1rem; max-width:34em; }
.book-form input,
.book-form select,
.book-form textarea{
  display:block; width:100%; margin:0 0 .7rem;
  font:inherit; color:var(--ink); background:transparent;
  border:1px solid var(--rule); border-radius:0; padding:.55rem .7rem;
}
.book-form textarea{ min-height:7em; resize:vertical; }
.book-form button{
  font:inherit; cursor:pointer; color:var(--bg); background:var(--ink);
  border:0; border-radius:0; padding:.6rem 1.6rem;
}
.book-form button:hover{ opacity:.8; }

/* ---------- mobile ---------- */
@media (max-width:820px){
  body{ font-size:1.15rem; }
  .side{ position:static; width:100%; height:auto; padding:1.6rem 1.6rem 0; }
  .content{ margin-left:0; width:100%; padding:1.4rem 1.6rem 3rem; }
  .content article{ max-width:none; }
  .topmenu{ position:static; text-align:left; padding:1.2rem 1.6rem 0; }
  .topmenu a{ margin-left:0; margin-right:1.5rem; }
}