*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  /* Flat newsprint stock. The previous build layered four gradients here and
     the result was a 2%-value-range brown that flattened every album cover on
     the site. Colour now comes from the artwork and one red, nothing else. */
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.02rem;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Paper grain — doctrine 3 L57: feTurbulence over LIGHT sections at ~.05.
   Applied to the body BACKGROUND, not as a fixed overlay across the whole
   viewport. The old build put it at position:fixed;inset:0;z-index:100, which
   laid grain over the album artwork while tokens.css claimed in a comment that
   texture was never applied to photography. The file contradicted itself; this
   is the fix, not a restatement. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);opacity:.05;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Any class carrying its own `display` outranks the browser's default rule for
   [hidden], leaving hidden elements on screen. Restated once, globally. */
[hidden]{display:none !important}

/* ---- Header: paper, one rule, no blur, no gradient ---- */
.site-head{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1rem 2.4rem;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.brand{
  font-family:var(--font-display);
  font-weight:700;font-size:1.35rem;letter-spacing:.02em;
}
.site-nav{display:flex;gap:1.6rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase}
.site-nav a{color:var(--ink-2);padding-bottom:2px;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

.site-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:2.4rem;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);
  border-top:1px solid var(--ink);letter-spacing:.04em;
}

/* At 320px the brand plus three nav links measured 409px against a 320px
   viewport -- body{overflow-x:hidden} was hiding the clip rather than fixing
   it, so "Events" and "About" were simply cut off on the narrowest phones.
   Tighten the type and spacing rather than hiding or stacking the nav.
   Must sit after .brand and .site-nav: same specificity, so source order is
   what decides, and an earlier position silently lost to them. */
@media (max-width:560px){
  .site-head{padding:.8rem 1.1rem;gap:.6rem}
  .brand{font-size:1.05rem}
  .site-nav{gap:.85rem;font-size:.62rem;letter-spacing:.03em}
  .site-foot{padding:1.6rem 1.1rem;font-size:.64rem}
}

@media (prefers-reduced-motion: reduce) {
  *{transition-duration:.001ms !important;animation:none !important}
}