*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  /* Layered warm ground for depth: two soft light "leaks" (amber + oxblood),
     a very faint concentric vinyl-groove motif, over a tobacco gradient base. */
  background-color:#2b1911;
  background-image:
    radial-gradient(60% 55% at 80% 8%, rgba(232,154,69,.16), transparent 60%),
    radial-gradient(55% 55% at 6% 92%, rgba(204,58,36,.14), transparent 60%),
    repeating-radial-gradient(circle at 84% 26%, rgba(255,242,224,.03) 0 1px, transparent 1px 15px),
    linear-gradient(160deg, #35211a 0%, #2a1811 48%, #1f110c 100%);
  background-attachment:fixed;
  color:var(--cream);
  font-family:var(--font-display);line-height:1.4;
  min-height:100vh;overflow-x:hidden;
}
img{display:block;max-width:100%}
/* 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}
a{color:inherit;text-decoration:none}
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.2rem 2.4rem;
  /* Was mix-blend-mode:difference, which inverted against whatever scrolled
     under it and turned the nav unpredictable colours over album art. The
     bakery-rustic treatment instead: translucent ground, backdrop blur, one
     hairline. Legible over anything, and the blur keeps the art visible. */
  background:rgba(37,22,16,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-nav a{color:var(--muted);transition:color .2s}
.site-nav a:hover{color:var(--cream)}
.brand{font-weight:800;letter-spacing:.28em;font-size:1.1rem}
.site-nav{display:flex;gap:1.6rem;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}
.site-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:2rem 2.4rem;font-size:.72rem;color:var(--muted);
  border-top:1px solid rgba(233,231,216,.08);letter-spacing:.1em;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;
}

/* 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:.9rem 1.1rem;gap:.6rem}
  .brand{font-size:.86rem;letter-spacing:.14em}
  .site-nav{gap:.85rem;font-size:.66rem;letter-spacing:.08em}
}

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