/* ==========================================================================
   Söūp — soupband.net
   Direction: a sailor's almanac, printed in a Jersey basement.
   Midnight sky and gold engraving alternating with aged flyer paper.
   Everything looks printed: letterpress bite, halftone, tape, torn edges.

   ⛔ NOTHING IN HERE ANIMATES ON A LOOP. Scroll effects are a pure function
      of scrollY; reveals fire once and settle. Perpetual motion is banned.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root{
  /* night */
  --ink:        #080c22;
  --night:      #101736;
  --night-2:    #1a2350;
  --night-3:    #26315f;

  /* the Mariner Martyr sea */
  --sea:        #12606c;
  --sea-lit:    #2e9aa6;
  --sea-pale:   #8fcbd2;

  /* engraving */
  --gold:       #dda94e;
  --gold-lit:   #f4ddaa;
  --gold-deep:  #a97a2c;

  /* the logo's own colours */
  --plum:       #6d1f45;
  --plum-lit:   #a4386c;
  --crimson:    #b8241f;

  /* paper */
  --paper:      #f4f1ea;
  --paper-2:    #e8e1d1;
  --paper-3:    #d8cfba;
  --paper-ink:  #1e1a15;
  --paper-mute: #6b6154;

  --measure: 64ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1240px;

  --display: 'Sancreek', 'Bevan', serif;
  --body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --type:    'Special Elite', 'Courier New', Courier, monospace;

  --r-sm: 2px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ transition-duration:.01ms !important }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(1.06rem,.99rem + .34vw,1.24rem);
  line-height:1.62;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }

::selection{ background:var(--gold); color:var(--ink) }

/* ⭐ The `hidden` attribute only sets `display:none` at the very bottom of the
   cascade, so ANY later `display:` rule silently beats it. That is not a
   theoretical risk: the sign-in box on /admin is `display:grid`, and it went on
   showing underneath the signed-in page. Every panel on this site is shown and
   hidden with `el.hidden`, so the attribute has to win. */
[hidden]{ display:none !important }

/* --- printed textures ----------------------------------------------------- */
/* Paper grain and halftone are drawn, not photographed — they sit OVER real
   photographs, they never stand in for one. */
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.halftone::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.16; mix-blend-mode:multiply;
  background-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 31%);
  background-size:3.5px 3.5px;
}

/* --- grounds -------------------------------------------------------------- */
.night{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--night-2) 0%, var(--night) 42%, var(--ink) 100%);
  color:var(--paper);
}
.night-deep{ background:var(--ink) }

/* Their own star plate, scaled to the section and held still.
   It dissolves at the top and bottom so a section join never shows as a hard
   band of sky, and it sits behind the text rather than competing with it. */
.starplate{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('../assets/img/stars.jpg?v=tkg5xa');
  background-size:cover; background-position:center 20%;
  opacity:.44; mix-blend-mode:screen;
  will-change:transform;
  transform:translate3d(0, var(--par, 0px), 0);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 78%, transparent 100%);
}

.paper{
  position:relative;
  background:var(--paper);
  color:var(--paper-ink);
}
.paper::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.32; mix-blend-mode:multiply;
}
.paper > *{ position:relative; z-index:1 }

/* torn paper edge — a slow wander with fibre noise, never a zigzag.
   The strip is the colour of what is BELOW; the drawn shape is what is ABOVE. */
.torn{
  position:relative; z-index:4; height:30px; margin:-1px 0;
  background-color:var(--paper);
  background-image:url('../assets/img/torn-from-night.svg?v=tkg5xa');
  background-repeat:repeat-x; background-position:top left;
}
.torn--up{
  background-color:var(--ink);
  background-image:url('../assets/img/torn-from-paper.svg?v=tkg5xa');
}

/* --- layout --------------------------------------------------------------- */
.shell{ width:min(100% - var(--gutter)*2, var(--shell)); margin-inline:auto }
.shell--wide{ width:min(100% - var(--gutter)*2, 1480px) }
.shell--tight{ width:min(100% - var(--gutter)*2, 800px) }

section{ position:relative }
.band{ padding-block:clamp(4rem,9vw,8.5rem) }
.band--tight{ padding-block:clamp(2.75rem,5vw,4.5rem) }

/* --- type ----------------------------------------------------------------- */
.display{
  font-family:var(--display); font-weight:400; line-height:.98;
  letter-spacing:.005em; text-transform:none;
}
h1,h2,h3{ margin:0 0 .5em }

.h-poster{
  font-family:var(--display);
  font-size:clamp(2.5rem,1.4rem + 5.2vw,5.6rem);
  line-height:.96; letter-spacing:.004em;
}
.h-sec{
  font-family:var(--display);
  font-size:clamp(2rem,1.2rem + 3.3vw,3.85rem);
  line-height:1.02; margin-bottom:.42em;
}
.h-sub{
  font-family:var(--body); font-weight:600; font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  line-height:1.2; letter-spacing:.005em;
}

/* gold letterpress on the night ground */
.gilt{
  color:var(--gold-lit);
  text-shadow:
    0 1px 0 var(--gold-deep),
    0 2px 1px rgba(0,0,0,.55),
    0 0 26px rgba(221,169,78,.30);
}
/* ink pressed into paper */
.pressed{
  color:var(--paper-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.12);
}
.plum{ color:var(--plum) }
.sea{ color:var(--sea-lit) }

.lede{
  font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem);
  line-height:1.5; max-width:38ch;
}
.prose{ max-width:var(--measure) }
.prose p{ margin:0 0 1.1em }

/* typewriter — used only where it means something:
   dates, venues, prices, catalogue numbers, setlists. */
.typed{
  font-family:var(--type); font-size:.82em; letter-spacing:.02em;
  text-transform:uppercase;
}
.slug{
  font-family:var(--type); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); display:inline-block;
}
.paper .slug{ color:var(--plum) }

/* photo captions — small italic serif */
figcaption{
  font-family:var(--body); font-style:italic; font-size:.92rem;
  line-height:1.4; margin-top:.6rem; color:var(--sea-pale);
}
.paper figcaption{ color:var(--paper-mute) }

/* hand-drawn rule */
.rule{
  height:9px; border:0; margin:2.2rem 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 5.2C42 3.1 74 6.4 118 4.6s72 2.9 116 1.1 84-3 166-1.3' fill='none' stroke='%23dda94e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/400px 9px;
  opacity:.75;
}
.paper .rule{ filter:hue-rotate(0deg) saturate(.6) brightness(.55) }

/* engraved star, lifted from the record sleeve */
.starmark{
  display:block; width:74px; height:80px; margin:0 auto 1.2rem;
  background:url('../assets/img/compass.png?v=tkg5xa') center/contain no-repeat;
  filter:drop-shadow(0 2px 10px rgba(8,12,34,.9));
}
.starmark--sm{ width:64px; height:69px; margin:1.6rem 0 0; opacity:1 }
/* the wordmark standing in for a photograph on the booking page */
.mark-ink{ display:block; width:min(320px,72%); height:auto; margin:2.6rem auto 0; opacity:.9 }
.paper .starmark{ background-image:url('../assets/img/compass-ink.png?v=tkg5xa'); opacity:.78; filter:none }
.paper .starmark--sm{ opacity:.85 }


/* --- buttons -------------------------------------------------------------- */
.btn{
  --bg:var(--gold); --fg:var(--ink); --bd:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.82em 1.5em; border:2px solid var(--bd); border-radius:var(--r-sm);
  background:var(--bg); color:var(--fg);
  font-family:var(--type); font-size:.86rem; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.42);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .15s;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(0,0,0,.5) }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.5) }
.btn:focus-visible{ outline:3px solid var(--sea-lit); outline-offset:3px }

.btn--plum{ --bg:var(--plum); --fg:var(--paper); --bd:#4a1330 }
.btn--sea{ --bg:var(--sea); --fg:var(--paper); --bd:#0a3d45 }
.btn--ghost{
  --bg:transparent; --fg:var(--gold-lit); --bd:var(--gold);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(221,169,78,.14); box-shadow:none; transform:translateY(-1px) }
.paper .btn--ghost{ --fg:var(--plum); --bd:var(--plum) }
.btn--lg{ padding:1em 1.9em; font-size:.95rem }
.btn--sm{ padding:.5em 1em; font-size:.72rem }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none }

/* --- header --------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(8,12,34,.82);
  backdrop-filter:blur(9px) saturate(1.2);
  border-bottom:1px solid rgba(221,169,78,.22);
}
.site-head__in{
  display:flex; align-items:center; gap:1.25rem;
  min-height:72px; padding-block:.55rem;
}

.brand{ display:flex; align-items:center; flex:none; text-decoration:none }
.brand img{ height:58px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.15rem }
.nav a{
  font-family:var(--type); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--paper); padding:.55rem .72rem; border-radius:var(--r-sm);
  position:relative; white-space:nowrap;
}
.nav a:hover{ color:var(--gold-lit) }
.nav a[aria-current="page"]{ color:var(--gold) }
.nav a[aria-current="page"]::after{
  content:''; position:absolute; left:.72rem; right:.72rem; bottom:.28rem; height:2px;
  background:var(--gold);
}
.head-actions{ display:flex; align-items:center; gap:.5rem; flex:none }

.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; border:2px solid var(--gold); border-radius:var(--r-sm);
  color:var(--gold-lit); padding:.45rem .7rem; cursor:pointer;
  font-family:var(--type); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
}
.cart-btn:hover{ background:rgba(221,169,78,.14) }
.cart-btn__n{
  min-width:1.35em; padding:0 .3em; border-radius:99px;
  background:var(--crimson); color:#fff; font-size:.72rem; line-height:1.45em; text-align:center;
}
.cart-btn__n[data-empty="1"]{ background:rgba(255,255,255,.22) }

.burger{
  display:none; width:44px; height:40px; border:2px solid var(--gold); border-radius:var(--r-sm);
  background:transparent; cursor:pointer; padding:0; place-items:center;
}
.burger span{ display:block; width:20px; height:2px; background:var(--gold-lit); position:relative }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:var(--gold-lit);
}
.burger span::before{ top:-6px } .burger span::after{ top:6px }

@media (max-width:1080px){
  .burger{ display:grid }
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:2px solid var(--gold);
    padding:.5rem var(--gutter) 1.5rem; margin:0;
    max-height:calc(100dvh - 72px); overflow:auto;
    transform:translateY(-120%); transition:transform .28s var(--ease); visibility:hidden;
  }
  .nav[data-open="1"]{ transform:translateY(0); visibility:visible }
  .nav a{ padding:.95rem .2rem; font-size:1rem; border-bottom:1px solid rgba(221,169,78,.18) }
  .nav a[aria-current="page"]::after{ display:none }
}

/* --- hero ----------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px, 86svh, 900px);
  display:grid; align-items:end;
  overflow:hidden; background:var(--ink);
}
.hero__pic{ position:absolute; inset:0; z-index:0 }
.hero__pic img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:saturate(.94) contrast(1.04);
  transform:translate3d(0, var(--par,0px), 0) scale(1.06);
  will-change:transform;
}
/* heavy scrim under the text, light everywhere else — never a flat black wash */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(8,12,34,.94) 0%, rgba(8,12,34,.72) 26%, rgba(8,12,34,.18) 58%, rgba(8,12,34,.34) 100%),
    radial-gradient(72% 62% at 50% 76%, rgba(8,12,34,.74) 0%, transparent 66%);
}
.hero__stars{
  position:absolute; inset:-10% 0 auto; height:70%; z-index:1;
  background:url('../assets/img/stars.jpg?v=tkg5xa') center/cover;
  opacity:.42; mix-blend-mode:screen;
  transform:translate3d(0, var(--par2,0px), 0);
  will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
}
.hero__in{
  position:relative; z-index:2; text-align:center;
  padding-block:clamp(2.5rem,6vw,5rem) clamp(3.5rem,7vw,6rem);
}
.hero__mark{
  width:min(440px,74vw); margin:0 auto 1.4rem;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.7));
}
.hero__tag{
  font-family:var(--body); font-style:italic;
  font-size:clamp(1.2rem,1rem + 1vw,1.75rem); line-height:1.35;
  max-width:32ch; color:var(--paper); margin:0 auto 1.1rem;
  text-shadow:0 2px 14px rgba(8,12,34,.9);
}
.hero__meta{
  font-family:var(--type); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-lit); margin:0 0 1.9rem;
  text-shadow:0 2px 10px rgba(8,12,34,.95);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center }
.hero__cta--start{ justify-content:flex-start }

/* the short sign-off on the pages that do not need the whole booking pitch */
.contact{ padding-block:clamp(2.4rem,5vw,3.6rem) }
.contact__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.6rem 2.5rem;
}
.contact .h-sec{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem) }
@media (max-width:640px){ .contact__in{ flex-direction:column; align-items:flex-start } }

/* --- the record --------------------------------------------------------- */
.record{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center;
         grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
@media (max-width:900px){ .record{ grid-template-columns:1fr } }

.sleeve{ position:relative; max-width:520px; justify-self:center; width:100% }
.sleeve__art{
  position:relative; z-index:2; border:1px solid rgba(221,169,78,.35);
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.06) inset;
  transform:rotate(-1.2deg);
}
/* the 45 slides out as you scroll past — pure function of scrollY, still when you are */
.sleeve__disc{
  position:absolute; z-index:1; top:6%; right:0; width:88%; aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #d9cba4 0 8.5%, #1c1b1a 8.6% 12%, #14140f 12% 100%),
    #14140f;
  box-shadow:0 18px 44px rgba(0,0,0,.7);
  transform:translateX(calc(var(--slide,0) * 34%)) rotate(calc(var(--slide,0) * 42deg));
  will-change:transform;
}
.sleeve__disc::after{
  content:''; position:absolute; inset:12%; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, transparent 1px 3px);
}
.tape{
  position:absolute; z-index:5; width:120px; height:34px;
  background:linear-gradient(102deg, rgba(238,226,196,.62), rgba(222,205,168,.72) 45%, rgba(238,226,196,.58));
  border-left:1px dashed rgba(120,100,60,.3); border-right:1px dashed rgba(120,100,60,.3);
  box-shadow:0 2px 7px rgba(0,0,0,.28); mix-blend-mode:screen;
}
.tape--tl{ top:-14px; left:-22px; transform:rotate(-24deg) }
.tape--tr{ top:-14px; right:-22px; transform:rotate(24deg) }
.tape--br{ bottom:-14px; right:-20px; transform:rotate(-20deg) }
/* on a phone the sleeve sits in the gutter — pull the tape in so nothing hangs off */
@media (max-width:560px){
  .tape{ width:92px; height:26px }
  .tape--tl{ top:-10px; left:-10px }
  .tape--tr{ top:-10px; right:-10px }
  .tape--br{ bottom:-10px; right:-10px }
}

.listen{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem }

/* --- editorial pair (bio) ------------------------------------------------- */
.pair{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center;
       grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) }
.pair--flip > :first-child{ order:2 }
@media (max-width:900px){
  .pair{ grid-template-columns:1fr }
  .pair--flip > :first-child{ order:0 }
}
.snap{ position:relative; background:var(--paper); padding:12px 12px 52px; box-shadow:0 18px 44px rgba(0,0,0,.34);
       transform:rotate(-1.4deg) }
.snap img{ width:100% }
.snap__cap{
  position:absolute; left:0; right:0; bottom:12px; text-align:center;
  font-family:var(--type); font-size:.8rem; letter-spacing:.05em; color:#4b4237; text-transform:uppercase;
}
.snap--r{ transform:rotate(1.6deg) }

/* numbered editorial list, not another grid of cards */
.roster{ list-style:none; margin:2rem 0 0; padding:0; counter-reset:r }
.roster > li{
  counter-increment:r; position:relative;
  padding:1.5rem 0 1.5rem 4.2rem;
  border-top:1px solid rgba(30,26,21,.16);
}
.night .roster > li{ border-top-color:rgba(221,169,78,.24) }
.roster > li:last-child{ border-bottom:1px solid rgba(30,26,21,.16) }
.night .roster > li:last-child{ border-bottom-color:rgba(221,169,78,.24) }
.roster > li::before{
  content:counter(r,decimal-leading-zero);
  position:absolute; left:0; top:1.45rem;
  font-family:var(--type); font-size:1.5rem; color:var(--plum); opacity:.75;
}
.night .roster > li::before{ color:var(--gold); opacity:.9 }
.roster h3{ margin:0 0 .2em; font-family:var(--display); font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); line-height:1 }
.roster p{ margin:0; font-size:1.02em }
.roster .typed{ display:block; margin-bottom:.35rem; color:var(--sea); font-size:.74rem; letter-spacing:.14em }
.night .roster .typed{ color:var(--sea-lit) }

/* the instruments each of them plays, set as an engraved row */
.kit{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 0; margin:.45rem 0 0; padding:0 }
.kit li{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--type); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sea);
}
.kit li + li{ padding-left:.85rem }
.kit li + li::before{
  content:''; flex:none; width:5px; height:5px;
  transform:rotate(45deg); background:currentColor; opacity:.6;
}
.night .kit li, .night-deep .kit li{ color:var(--gold-lit) }

/* home: names and instruments only — the descriptions live on the band page */
.roster--brief > li{ padding-block:1.15rem }

/* the band page: a column each, with her own portrait */
.duo{
  display:grid; gap:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr 1fr; margin-top:2.6rem;
}
@media (max-width:720px){ .duo{ grid-template-columns:1fr; gap:3.2rem } }
.duo__one > figure{ margin:0 0 1.6rem }
.duo__one h3{
  margin:0; font-family:var(--display); line-height:1;
  font-size:clamp(1.7rem,1.3rem + 1.5vw,2.6rem);
}
.duo__one p{ margin:1rem 0 0; font-size:1.05em; max-width:32ch }

/* --- ticket stubs (shows) ------------------------------------------------- */
.stubs{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)) }
.stub{
  position:relative; display:grid; grid-template-columns:150px 1fr; min-height:132px;
  background:var(--paper); color:var(--paper-ink);
  border:1px solid rgba(30,26,21,.2);
  box-shadow:0 12px 28px rgba(0,0,0,.34);
  overflow:hidden; text-decoration:none;
}
.stub__pic{ position:relative; overflow:hidden; background:var(--night) }
.stub__pic img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.55) contrast(1.12) sepia(.22) }
.stub__body{ padding:1.05rem 1.15rem 1.6rem; min-width:0; display:flex; flex-direction:column; justify-content:center }
.stub__venue{ font-family:var(--display); font-size:1.32rem; line-height:1.08; margin:0 0 .3rem }
.stub__where{ font-family:var(--type); font-size:.79rem; letter-spacing:.03em; color:var(--paper-mute);
              text-transform:uppercase; margin:0; overflow-wrap:anywhere }
/* perforation between the counterfoil and the body */
.stub::before{
  content:''; position:absolute; left:150px; top:0; bottom:0; width:2px; z-index:2;
  background-image:linear-gradient(var(--paper-3) 50%, transparent 0);
  background-size:2px 9px;
}
.stub--star{ border:2px solid var(--plum); box-shadow:0 16px 36px rgba(0,0,0,.45) }
.stub--star .stub__venue{ color:var(--plum) }
/* keep the title clear of the rubber stamp */
.stub--star .stub__body{ padding-right:6.2rem }

/* On a phone there is no room beside the title for a stamp, so it stops being
   absolute and simply sits above it. Same object, less crowding. */
@media (max-width:560px){
  .stub{ grid-template-columns:112px 1fr; min-height:120px }
  .stub::before{ left:112px }
  .stub__venue{ font-size:1.14rem }
  .stub__body{ padding:.9rem 1rem 1.5rem }
  .stub--star .stub__body{ padding-right:1rem }
  .stamp{ position:static; display:inline-block; margin:0 0 .4rem; transform:rotate(-4deg) }
}
.stamp{
  position:absolute; right:.6rem; top:.6rem; z-index:3;
  font-family:var(--type); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--crimson); border:2px solid var(--crimson); padding:.18em .45em;
  transform:rotate(-9deg); opacity:.82;
}

/* --- a date on the board -------------------------------------------------- */
/* ⭐ An upcoming show IS a ticket stub. The counterfoil that carries a
   photograph on the wall of rooms carries the DATE here, printed the way a
   box office prints one. Same grid, same perforation, no second kind of card —
   which is why a page of dates and a page of rooms read as one thing. */
.stub--date .stub__cf{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1rem; padding:.9rem .5rem; text-align:center;
  background:var(--night); color:var(--gold-lit);
  background-image:
    repeating-linear-gradient(45deg, rgba(221,169,78,.05) 0 6px, transparent 6px 12px);
}
.stub__mon{ font-family:var(--type); font-size:.72rem; letter-spacing:.22em;
            text-transform:uppercase; color:var(--gold) }
.stub__day{ font-family:var(--display); font-size:2.6rem; line-height:.9; color:var(--gold-lit) }
.stub__dow{ font-family:var(--type); font-size:.66rem; letter-spacing:.18em;
            text-transform:uppercase; color:rgba(244,221,170,.62) }

.stub--date .stub__body{ padding-block:1.1rem 1.25rem }
.stub__doors{ font-family:var(--type); font-size:.74rem; letter-spacing:.06em;
              color:var(--paper-mute); margin:.3rem 0 0 }
.stub__note{ font-family:var(--body); font-size:.92rem; font-style:italic;
             color:var(--paper-mute); margin:.45rem 0 0 }
.stub__act{ margin:.9rem 0 0 }

/* A cancelled show is kept on the board, struck through rather than removed.
   People who already saw it come back to check, and a card that vanished
   answers nobody. */
.stub--off{ opacity:.72 }
.stub--off .stub__venue{ text-decoration:line-through; text-decoration-thickness:1px }
.stub__cancelled{
  font-family:var(--type); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crimson); border:2px solid var(--crimson); display:inline-block;
  padding:.16em .5em; margin:.6rem 0 0; transform:rotate(-2deg);
}
.stamp--tonight{ color:var(--plum); border-color:var(--plum); opacity:1 }

/* --- a room with no photograph -------------------------------------------- */
/* Joseph, 2026-08-28: a room they really played joins the wall whether or not
   anybody has sent a picture of it. Without a counterfoil the stub is all body,
   so the perforation would land in the middle of the words — it is moved to the
   edge and becomes the torn side of a stub instead. */
.stub--noimg{ grid-template-columns:1fr }
.stub--noimg::before{ left:0 }
.stub--noimg .stub__body{ padding-left:1.6rem }

/* When they were last in the room. */
.stub__played{
  font-family:var(--type); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--plum); margin:.55rem 0 0;
}

/* --- Söūp HQ (the band's own page) ---------------------------------------- */
/* Built from the same parts as the rest of the site — flyer paper, typewriter
   labels, ticket-stub edges — because a tool the band uses every week should
   not feel like somebody else's software bolted onto their record sleeve. */

.adm__wait{ font-family:var(--type); font-size:.8rem; letter-spacing:.1em;
            text-transform:uppercase; color:var(--paper-mute); text-align:center;
            padding:3rem 0 }

.adm__gate{ display:grid; gap:.55rem; max-width:22rem; margin:1.5rem auto 3rem }
.adm__gate label,.adm__add label{
  font-family:var(--type); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--plum);
}
.adm__gate input,.adm__add input{
  font-family:var(--body); font-size:1.05rem; width:100%;
  background:rgba(255,255,255,.72); color:var(--paper-ink);
  border:1.5px solid rgba(30,26,21,.28); border-radius:var(--r-sm);
  padding:.7em .8em;
}
.adm__gate input:focus,.adm__add input:focus{
  outline:0; border-color:var(--plum); box-shadow:0 0 0 3px rgba(109,31,69,.18);
}
.adm__gate .btn{ margin-top:.5rem; justify-content:center }
.adm__err{ font-family:var(--body); font-size:.92rem; color:var(--crimson); margin:.4rem 0 0 }
.adm__hint{ font-family:var(--body); font-size:.88rem; font-style:italic;
            color:var(--paper-mute); margin:.35rem 0 .6rem }
.adm__empty{ font-family:var(--body); font-size:.96rem; color:var(--paper-mute);
             border:2px dashed rgba(30,26,21,.2); padding:1.4rem; text-align:center; margin:0 }

/* --- tabs, drawn as tabs on a card index --------------------------------- */
.adm__tabs{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
            border-bottom:2px solid rgba(30,26,21,.18); margin-bottom:1.6rem }
.adm__tab{
  font-family:var(--type); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; border:0; border-bottom:3px solid transparent;
  color:var(--paper-mute); padding:.8em .9em; cursor:pointer; margin-bottom:-2px;
}
.adm__tab[aria-selected="true"]{ color:var(--plum); border-bottom-color:var(--plum) }
.adm__tab:focus-visible{ outline:3px solid var(--sea-lit); outline-offset:2px }
.adm__out{ margin-left:auto }

/* --- add a date ----------------------------------------------------------- */
.adm__add{ border:1px solid rgba(30,26,21,.2); background:var(--paper-2); padding:0 }
.adm__add > summary{
  font-family:var(--type); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--plum); padding:1em 1.1em; cursor:pointer; list-style:none;
}
.adm__add > summary::-webkit-details-marker{ display:none }
.adm__add > summary::before{ content:'+ '; font-weight:700 }
.adm__add[open] > summary::before{ content:'– ' }
.adm__add form{ display:grid; gap:.25rem; padding:0 1.1rem 1.3rem }
.adm__add form .btn{ justify-content:center; margin-top:.9rem }
.adm__add label{ margin-top:.7rem }
.adm__add .opt{ text-transform:none; letter-spacing:0; color:var(--paper-mute) }
.adm__two{ display:grid; gap:.25rem 1rem; grid-template-columns:1fr 1fr }
@media (max-width:560px){ .adm__two{ grid-template-columns:1fr } }

/* --- a row, which is a stub with the perforation down the left ----------- */
.adm__list{ display:grid; gap:.7rem; margin-top:1rem }
.adm__row{
  position:relative; display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;
  background:var(--paper); border:1px solid rgba(30,26,21,.2);
  padding:1rem 1.1rem 1rem 1.5rem;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.adm__row::before{
  content:''; position:absolute; left:.5rem; top:0; bottom:0; width:2px;
  background-image:linear-gradient(var(--paper-3) 50%, transparent 0);
  background-size:2px 9px;
}
.adm__row-main{ flex:1 1 16rem; min-width:0 }
.adm__row h3{ font-family:var(--display); font-size:1.28rem; line-height:1.1; margin:.1rem 0 .25rem }
.adm__when{
  font-family:var(--type); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--plum); margin:0;
}
.adm__sub{ font-family:var(--body); font-size:.94rem; color:var(--paper-mute);
           margin:.2rem 0 0; overflow-wrap:anywhere }
.adm__row-acts{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:flex-start }
/* A played show, a collected order — done, and quieter for it. */
.adm__row--off{ opacity:.66 }
.adm__row--off h3{ text-decoration:line-through; text-decoration-thickness:1px }
.adm__row--order h3{ font-family:var(--type); font-size:1.4rem; letter-spacing:.04em }
/* Removing something is the one button that should never be pressed by accident. */
.adm__del{ --fg:var(--crimson); --bd:var(--crimson) }
.paper .adm__del{ --fg:var(--crimson); --bd:var(--crimson) }

/* --- bootleg wall (live video) ------------------------------------------- */
.wall{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
/* the home page leads with three, so they get to be big */
.wall--few{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; max-width:1060px; margin-inline:auto }
@media (max-width:760px){ .wall--few{ grid-template-columns:1fr; max-width:400px } }
.reel{
  position:relative; margin:0; background:#07091a; overflow:hidden;
  border:1px solid rgba(221,169,78,.28);
  box-shadow:0 16px 34px rgba(0,0,0,.5);
  aspect-ratio:9/13;
}
.reel:nth-child(3n){ transform:rotate(.7deg) }
.reel:nth-child(4n){ transform:rotate(-.8deg) }
.reel video,.reel img{ width:100%; height:100%; object-fit:cover; display:block }
.reel__btn{
  position:absolute; inset:0; z-index:3; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.reel__btn::after{
  content:''; width:62px; height:62px; border-radius:50%;
  border:2px solid var(--gold-lit); background:rgba(8,12,34,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23f4ddaa'/%3E%3C/svg%3E");
  background-size:26px; background-repeat:no-repeat; background-position:56% 50%;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:transform .14s var(--ease), background-color .14s;
}
.reel__btn:hover::after{ transform:scale(1.08) }
.reel[data-playing="1"] .reel__btn{ opacity:0 }
.reel[data-playing="1"] .reel__btn:focus-visible{ opacity:1 }
.reel__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.4rem .8rem .7rem;
  background:linear-gradient(to top, rgba(8,12,34,.92), transparent);
  font-family:var(--type); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-lit); pointer-events:none;
}

/* --- merch ---------------------------------------------------------------- */
.goods{ display:grid; gap:clamp(1.25rem,3vw,2.2rem);
        grid-template-columns:repeat(auto-fill,minmax(258px,1fr)) }
/* the home page leads with three — hold them centred instead of letting
   auto-fill open a fourth empty column on the right */
.goods--three{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:960px; margin-inline:auto }
@media (max-width:820px){ .goods--three{ grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); max-width:none } }
.good{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); color:var(--paper-ink);
  border:1px solid rgba(30,26,21,.18);
  box-shadow:0 14px 32px rgba(0,0,0,.3);
}
.good__pic{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-2) }
.good__pic img{ width:100%; height:100%; object-fit:cover }
.good__body{ padding:1rem 1.05rem 1.15rem; display:flex; flex-direction:column; gap:.5rem; flex:1 }
.good__name{ font-family:var(--display); font-size:1.24rem; line-height:1.12; margin:0 }
.good__price{ font-family:var(--type); font-size:1rem; color:var(--plum) }
.good__note{ font-size:.94rem; color:var(--paper-mute); margin:0; line-height:1.4 }
.good__foot{ margin-top:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.sizes{ display:flex; gap:.3rem; flex-wrap:wrap }
.sizes input{ position:absolute; opacity:0; pointer-events:none }
.sizes label{
  font-family:var(--type); font-size:.72rem; letter-spacing:.06em;
  border:1.5px solid rgba(30,26,21,.35); padding:.34em .6em; cursor:pointer; border-radius:var(--r-sm);
}
.sizes input:checked + label{ background:var(--plum); color:var(--paper); border-color:var(--plum) }
.sizes input:focus-visible + label{ outline:2px solid var(--sea); outline-offset:2px }

/* --- cart drawer ---------------------------------------------------------- */
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,100vw); z-index:100;
  background:var(--paper); color:var(--paper-ink);
  border-left:3px solid var(--plum);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
  transform:translateX(101%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; visibility:hidden;
}
.drawer[data-open="1"]{ transform:none; visibility:visible }
.drawer__head{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.2rem;
  border-bottom:1px solid rgba(30,26,21,.18);
}
.drawer__head h2{ font-family:var(--display); font-size:1.5rem; margin:0 }
.drawer__close{
  margin-left:auto; background:transparent; border:2px solid rgba(30,26,21,.3);
  width:38px; height:38px; cursor:pointer; font-size:1.15rem; line-height:1; border-radius:var(--r-sm);
}
.drawer__close:hover{ border-color:var(--plum); color:var(--plum) }
.drawer__body{ flex:1; overflow:auto; padding:.5rem 1.2rem }
.drawer__foot{ padding:1.1rem 1.2rem; border-top:1px solid rgba(30,26,21,.18); background:var(--paper-2) }

.line{ display:grid; grid-template-columns:64px 1fr auto; gap:.8rem; align-items:center;
       padding:.9rem 0; border-bottom:1px dashed rgba(30,26,21,.2) }
.line img{ width:64px; height:64px; object-fit:cover }
.line__n{ font-family:var(--body); font-weight:600; line-height:1.2; font-size:1rem }
.line__v{ font-family:var(--type); font-size:.68rem; color:var(--paper-mute); text-transform:uppercase }
.qty{ display:inline-flex; align-items:center; border:1.5px solid rgba(30,26,21,.3); border-radius:var(--r-sm) }
.qty button{ width:28px; height:28px; background:transparent; border:0; cursor:pointer; font-size:1rem; line-height:1 }
.qty button:hover{ color:var(--plum) }
.qty span{ min-width:1.8em; text-align:center; font-family:var(--type); font-size:.85rem }
.line__x{ background:none; border:0; cursor:pointer; color:var(--paper-mute); font-size:.72rem;
          font-family:var(--type); text-transform:uppercase; letter-spacing:.06em; padding:.2rem }
.line__x:hover{ color:var(--crimson) }

.totals{ display:flex; justify-content:space-between; font-family:var(--type); font-size:.9rem;
         margin-bottom:.9rem }
.totals strong{ font-size:1.1rem }
.drawer__note{ font-size:.86rem; color:var(--paper-mute); margin:.7rem 0 0; line-height:1.4 }

/* --- how you want it, and reserving it ------------------------------------ */
/* The drawer sits on flyer paper, so everything below is ink-on-paper. It is
   deliberately the SAME components as the booking form — a band's merch table
   and a band's booking form should not look like two different companies. */

.ways{ border:0; padding:0; margin:0 0 1rem }
.ways > legend{
  font-family:var(--type); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--plum); padding:0 0 .5rem;
}
.ways__row{ display:grid; gap:.5rem }
.ways__row input{ position:absolute; opacity:0; width:0; height:0 }
.ways__row label{
  display:block; cursor:pointer; padding:.6rem .8rem;
  border:1.5px solid rgba(30,26,21,.24); border-radius:var(--r-sm);
  background:rgba(255,255,255,.55);
}
.ways__row label strong{ display:block; font-family:var(--body); font-size:.98rem; color:var(--paper-ink) }
.ways__row label span{
  display:block; font-family:var(--type); font-size:.68rem; letter-spacing:.06em;
  color:var(--paper-mute); margin-top:.15rem;
}
.ways__row input:checked + label{
  border-color:var(--plum); background:rgba(109,31,69,.07);
  box-shadow:inset 3px 0 0 var(--plum);
}
.ways__row input:focus-visible + label{ outline:3px solid var(--sea-lit); outline-offset:2px }

/* ⚠️ The drawer is flyer paper but it is NOT inside a .paper section, so it
   never picked up the rule that turns a ghost button plum. Gold on cream is
   almost invisible, and "Back to the basket" was effectively a blank rectangle. */
.drawer .btn--ghost{ --fg:var(--plum); --bd:var(--plum) }
.drawer .btn--ghost:hover{ background:rgba(109,31,69,.1) }

.reserve{ display:grid; gap:.3rem; margin-top:.4rem }
.reserve label{
  font-family:var(--type); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--plum); margin-top:.55rem;
}
.reserve .opt{ text-transform:none; letter-spacing:0; color:var(--paper-mute) }
.reserve input,.reserve textarea{
  font-family:var(--body); font-size:1rem; width:100%;
  background:rgba(255,255,255,.7); color:var(--paper-ink);
  border:1.5px solid rgba(30,26,21,.28); border-radius:var(--r-sm);
  padding:.6em .75em;
}
.reserve textarea{ resize:vertical }
.reserve input:focus,.reserve textarea:focus{
  outline:0; border-color:var(--plum); box-shadow:0 0 0 3px rgba(109,31,69,.18);
}
#res-error{ color:var(--crimson) }

/* ⭐ The reference, printed like something torn off a pad — because it is the
   thing they read out at the merch table, and it has to survive being
   screenshotted, half-remembered and shouted across a room. */
.reserve__done{ text-align:center; padding:.4rem 0 .2rem }
.reserve__ref{
  font-family:var(--type); font-size:1.5rem; letter-spacing:.16em;
  color:var(--plum); margin:.2rem 0 .6rem;
  border:2px dashed rgba(109,31,69,.45); padding:.5em .4em;
}

.scrim{
  position:fixed; inset:0; z-index:99; background:rgba(8,12,34,.66);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease);
  backdrop-filter:blur(2px);
}
.scrim[data-open="1"]{ opacity:1; visibility:visible }

/* --- forms ---------------------------------------------------------------- */
.form{ display:grid; gap:1.05rem }
.field{ display:grid; gap:.35rem }
.field > label{
  font-family:var(--type); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}
.paper .field > label{ color:var(--plum) }
.field input,.field textarea,.field select{
  font-family:var(--body); font-size:1.02rem;
  background:rgba(244,241,234,.06); color:var(--paper);
  border:1.5px solid rgba(221,169,78,.4); border-radius:var(--r-sm);
  padding:.72em .85em; width:100%;
}
.paper .field input,.paper .field textarea,.paper .field select{
  background:rgba(255,255,255,.7); color:var(--paper-ink); border-color:rgba(30,26,21,.28);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(221,169,78,.24);
}
.field textarea{ min-height:130px; resize:vertical }
.field small{ font-size:.84rem; opacity:.72 }
.row2{ display:grid; gap:1.05rem; grid-template-columns:1fr 1fr }
@media (max-width:640px){ .row2{ grid-template-columns:1fr } }

.notice{
  border-left:3px solid var(--gold); padding:.85rem 1rem; margin:1rem 0;
  background:rgba(221,169,78,.1); font-size:.96rem;
}
.notice--bad{ border-color:var(--crimson); background:rgba(184,36,31,.12) }
.notice--good{ border-color:var(--sea-lit); background:rgba(46,154,166,.13) }
.paper .notice{ background:rgba(109,31,69,.07); border-color:var(--plum) }

/* --- footer --------------------------------------------------------------- */
.site-foot{ background:var(--ink); border-top:1px solid rgba(221,169,78,.24); position:relative; overflow:hidden }
/* the compass rose, stamped faintly into the footer cloth */
.site-foot::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-6%; top:50%; width:min(420px,52vw); aspect-ratio:1/1.086; transform:translateY(-50%);
  background:url('../assets/img/compass.png?v=tkg5xa') center/contain no-repeat;
  opacity:.07;
}
.site-foot > *{ position:relative; z-index:1 }
.foot-grid{
  display:grid; gap:2rem; padding-block:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));
}
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr } .foot-grid > :first-child{ grid-column:1/-1 } }
@media (max-width:480px){ .foot-grid{ grid-template-columns:1fr } }
.foot-grid img{ width:210px; margin-bottom:1rem }
.foot-grid h4{ font-family:var(--type); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
               color:var(--gold); margin:0 0 .8rem }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.foot-grid a{ text-decoration:none; opacity:.86 }
.foot-grid a:hover{ opacity:1; color:var(--gold-lit); text-decoration:underline }
.colophon{
  border-top:1px solid rgba(221,169,78,.18); padding-block:1.2rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; align-items:center;
  font-family:var(--type); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,241,234,.5);
}

/* --- reveal (fires once, then settles — no loop) -------------------------- */
[data-rise]{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
[data-rise][data-in="1"]{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ [data-rise]{ opacity:1; transform:none } }

/* --- helpers -------------------------------------------------------------- */
.center{ text-align:center }
.center .lede,.center .prose{ margin-inline:auto }
.stack > * + *{ margin-top:1.1rem }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:.7rem 1.1rem; font-family:var(--type);
}
.skip:focus{ left:.5rem; top:.5rem }
.wrapline{ text-wrap:balance }