/* ==========================================================================
   Basement Bandits — brand foundation

   Monochrome by design. Near-black room, bone-white type, warm grey secondary.
   There is no accent hue anywhere in the UI: every colour on the page comes
   from the band artwork and photographs, so nothing competes with them.

   Type does the shouting instead of colour — a distressed display face for
   page headlines that echoes the painted lettering in the logo, and a heavy
   grotesque for everything structural.

   Loaded by every page. Page-specific layout lives with each page.
   ========================================================================== */

/* Archivo Black + Archivo — SIL OFL 1.1, see /assets/fonts/OFL-Archivo.txt. */
@font-face{
  font-family:"Archivo Black";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/archivo-black.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Archivo;
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/assets/fonts/archivo.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;

  /* Room */
  --ink:#050506;
  --ink-deep:#000000;
  --surface:#0d0d0f;
  --surface-2:#16161a;

  /* Light. Very slightly warm so it sits with the artwork instead of
     going clinical, but with no hue you could name. */
  --bone:#f5f2ea;          /* headlines, primary action, the only "accent" */
  --text:#e4e0d8;          /* body copy — 15.2:1 on --ink */
  --muted:#9b968d;         /* secondary copy — 6.9:1 on --ink */
  --dim:#87837b;           /* small print — 5.4:1 on --ink */

  /* Rules */
  --line:rgba(245,242,234,.13);
  --line-strong:rgba(245,242,234,.30);

  /* The one functional exception to monochrome: form errors. Desaturated far
     enough to read as warm grey at a glance, saturated enough to find fast.
     Error identification never depends on it alone — there is always a
     message and aria-invalid. */
  --alert:#d9a099;

  /* One display voice for the whole site. A textured/distressed headline face
     was tried here and read cheap at size — with the artwork already supplying
     every bit of grit and colour, the type's job is to be confident and get
     out of the way. H1 and H2 share the face and separate on scale and
     tracking instead. */
  --display:"Archivo Black","Helvetica Neue Bold",Helvetica,Arial,sans-serif;
  --head:"Archivo Black","Helvetica Neue Bold",Helvetica,Arial,sans-serif;
  --body:Archivo,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --max:1440px;
  --reading:720px;
  --gutter:clamp(22px,4vw,64px);
  --header:76px;

  /* Vertical rhythm. One scale for the whole site, so the beat between two
     sections is the same beat on every page. Pages used to hand-tune their own
     padding block by block, which is why the scroll felt uneven — the step
     between blocks changed depending on which page you were on.

     --space-section  the standard beat between full sections
     --space-tight    a deliberate half-step, for blocks that belong together
     --space-hero     the opening breath under the header
     --space-block    a heading block to the content it introduces
     --space-stack    items inside a single block */
  --space-section:clamp(58px,6.4vw,92px);
  --space-tight:clamp(38px,4.2vw,60px);
  --space-hero:clamp(56px,6.4vw,96px);
  --space-block:clamp(28px,3.4vw,46px);
  --space-stack:clamp(18px,2.2vw,28px);
}

*{box-sizing:border-box}
[hidden]{display:none!important}

/* overscroll-behavior-y stops the page from scroll-chaining past its own
   bottom edge: on trackpads and touch screens the elastic overscroll kept
   revealing a run of bare page background below the footer, which on a
   near-black site reads as a broken stretch of empty black space. */
html{background:var(--ink);scroll-behavior:smooth;overscroll-behavior-y:none}

body{
  margin:0;
  min-width:320px;
  background:var(--ink);
  color:var(--text);
  font:16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* House light. Neutral white haze, no hue — the room is lit, not tinted. */
body::before{
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -14%,rgba(245,242,234,.055),transparent 62%),
    radial-gradient(80% 45% at 88% 4%,rgba(245,242,234,.03),transparent 60%);
}
/* Film grain. A whisper of monochrome noise so the near-black room has tooth
   instead of reading as flat #050506 on large displays. Sits above content at
   ~3% opacity — far below any perceptible contrast change — and is pure
   texture: no hue, no pointer events, removed under forced colors. */
body::after{
  content:"";
  position:fixed;
  z-index:120; /* above the header so the grain is uniform, below the skip link */
  inset:-40px;
  pointer-events:none;
  opacity:.026;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size:180px 180px;
}
body>*{position:relative;z-index:1}

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

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
img{height:auto}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--bone);
  outline-offset:3px;
  border-radius:2px;
}

/* --- Type ---------------------------------------------------------------- */

/* H1 earns its rank on scale and tighter tracking, not a different face. */
h1,.display{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.025em;
  text-transform:uppercase;
  text-wrap:balance;
  color:var(--bone);
}

h2,h3,h4{
  margin:0;
  font-family:var(--head);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.012em;
  text-transform:uppercase;
  text-wrap:balance;
  color:var(--bone);
}

.eyebrow{
  margin:0 0 18px;
  color:var(--muted);
  font:400 11px/1.4 var(--head);
  letter-spacing:.24em;
  text-transform:uppercase;
}
/* Paw print instead of a bullet — the raccoon signature, at label scale. */
.eyebrow::before{
  content:"";
  display:inline-block;
  width:13px;
  height:13px;
  margin-right:10px;
  vertical-align:-2px;
  background:currentColor;
  -webkit-mask:var(--paw) center/contain no-repeat;
  mask:var(--paw) center/contain no-repeat;
}

:root{
  --paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='43' rx='17' ry='14'/%3E%3Cellipse cx='13' cy='27' rx='7.5' ry='9.5'/%3E%3Cellipse cx='25' cy='16' rx='7' ry='9.5'/%3E%3Cellipse cx='39' cy='16' rx='7' ry='9.5'/%3E%3Cellipse cx='51' cy='27' rx='7.5' ry='9.5'/%3E%3C/svg%3E");
}

/* --- Buttons ------------------------------------------------------------- */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 28px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text);
  font:400 12px var(--head);
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:border-color .22s ease,color .22s ease,background-color .22s ease,box-shadow .3s ease,transform .18s ease;
}
.button:hover{
  border-color:var(--bone);
  color:var(--bone);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(245,242,234,.06),0 10px 28px -14px rgba(0,0,0,.9);
}
.button:active{transform:translateY(1px);transition-duration:.06s;box-shadow:none}

/* Primary is a solid bone block. In a monochrome system, contrast is the only
   emphasis available, so the primary action takes all of it. */
.button.solid{
  border-color:var(--bone);
  background:var(--bone);
  color:var(--ink);
}
/* Monochrome glow: the solid button brightens and casts a faint bone halo —
   light, not colour, doing the emphasis. */
.button.solid:hover{
  background:#fff;
  border-color:#fff;
  color:var(--ink);
  box-shadow:0 0 26px rgba(245,242,234,.16),0 10px 28px -14px rgba(0,0,0,.9);
}

/* Secondary emphasis: the same box as .button, but the outline is drawn in
   full bone white so it reads as a real button beside the solid primary
   without competing with it for weight. The background is opaque ink, not
   transparent: over artwork a see-through button reads as a stray box
   floating on the image instead of a control. */
.button.outline{border-color:var(--bone);color:var(--bone);background:var(--ink)}
.button.outline:hover{background:var(--surface-2)}

.textlink{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--bone);
  font:400 11px var(--head);
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line-strong);
}
/* The resting underline is a hairline; hover draws a full-strength line across
   it left to right, the same wipe the nav uses. */
.textlink::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--bone);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.textlink:hover::after,.textlink:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* --- Shared chrome ------------------------------------------------------- */

.skip,.skip-link{
  position:fixed;
  z-index:999;
  left:12px;
  top:10px;
  padding:13px 18px;
  background:var(--bone);
  color:var(--ink);
  font:400 12px var(--head);
  letter-spacing:.14em;
  text-transform:uppercase;
  transform:translateY(-180%);
}
.skip:focus,.skip-link:focus{transform:none}

.brand{
  display:inline-flex;
  align-items:center;
  gap:13px;
  width:max-content;
  color:var(--bone);
}
.brand-mark{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:50%;
  object-fit:cover;
  background:var(--ink-deep);
  box-shadow:0 0 0 1px var(--line-strong);
  transition:box-shadow .18s;
}
.brand b{
  font:400 13px/1.06 var(--head);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.brand:hover .brand-mark{box-shadow:0 0 0 1px var(--bone)}

/* --- Site header (shared by every page) ---------------------------------- */

.header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:var(--header);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:24px;
  padding:0 var(--gutter);
  border-bottom:1px solid var(--line);
  background:rgba(5,5,6,.78);
  backdrop-filter:blur(18px) saturate(.9);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* Once the page moves, the bar commits: denser ink, a firmer hairline, and a
   breath of shadow so content visibly passes underneath. Set by motion.js;
   without JS the resting state above already holds over any content. */
.header.is-scrolled{
  background:rgba(5,5,6,.92);
  border-bottom-color:rgba(245,242,234,.2);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.85);
}
.brand-mark{width:42px;height:42px}
.nav{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(12px,1.5vw,24px);
}
.nav a{
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--muted);
  font:400 12px var(--head);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .18s;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  height:2px;
  background:var(--bone);
  transform:scaleX(0);
  transform-origin:right; /* leaves to the right… */
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after,.nav a:focus-visible::after{transform-origin:left} /* …enters from the left */
.nav a:hover,.nav a.active,.nav a[aria-current="page"]{color:var(--bone)}
.nav a:hover::after,.nav a.active::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.external-icon{
  width:12px;
  height:12px;
  flex:0 0 auto;
  margin-left:7px;
  background:currentColor;
  -webkit-mask:url('/assets/external-link.svg') center/contain no-repeat;
  mask:url('/assets/external-link.svg') center/contain no-repeat;
}
/* Contact and booking are the two action links in the primary navigation.
   Contact gets a quiet frame; booking takes the full-contrast treatment. */
.nav a.nav-contact,.nav a.nav-book{
  min-height:40px;
  padding-inline:14px;
  border:1px solid var(--line-strong);
}
.nav a.nav-contact{margin-left:2px;background:rgba(245,242,234,.025);color:var(--text)}
.nav a.nav-book{border-color:var(--bone);background:var(--bone);color:var(--ink)}
.nav a.nav-contact::after,.nav a.nav-book::after{display:none}
.nav a.nav-contact:hover,.nav a.nav-contact[aria-current="page"]{
  border-color:var(--bone);
  color:var(--bone);
}
.nav a.nav-book:hover,.nav a.nav-book[aria-current="page"]{
  border-color:#fff;
  background:#fff;
  color:var(--ink);
}
.footer-shop,.footer-site .footer-shop{gap:0}
.footer-shop .external-icon,.footer-site .footer-shop .external-icon{width:11px;height:11px;margin-left:6px}
.menu{
  display:none;
  min-width:44px;
  min-height:44px;
  padding:0 6px;
  border:0;
  background:none;
  color:var(--bone);
  font:400 12px var(--head);
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* --- Site footer (shared by every page) ---------------------------------- */

/* Two tiers. Site pages are navigation and sit up top with the brand; policy
   pages are compliance, not wayfinding, so they get their own quieter row
   below a rule. Mixing them made Privacy read like a destination. */
.footer{
  max-width:var(--max);
  margin:auto;
  padding:0 var(--gutter);
  border-top:1px solid var(--line);
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:28px 48px;
  padding:52px 0 40px;
}
.footer-tagline{
  max-width:34ch;
  margin:14px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 26px}
.footer-nav a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font:400 11px var(--head);
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .18s;
}
.footer-nav a:hover,.footer-nav a[aria-current="page"]{color:var(--bone)}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 28px;
  padding:8px 0 36px;
  border-top:1px solid var(--line);
}
.footer-legal p{margin:0;color:var(--dim);font-size:11.5px;letter-spacing:.02em}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:2px 22px}
.footer-legal a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--dim);
  font-size:11.5px;
  text-decoration:underline;
  text-decoration-thickness:.06em;
  text-underline-offset:.22em;
  transition:color .18s;
}
.footer-legal a:hover,.footer-legal a[aria-current="page"]{color:var(--text)}

@media(max-width:1120px){
  .header{grid-template-columns:1fr auto}
  .nav{
    position:fixed;
    top:var(--header);
    left:0;
    right:0;
    width:auto;
    height:calc(100dvh - var(--header));
    padding:22px var(--gutter) 50px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--ink);
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s,visibility .2s;
  }
  .nav.open{visibility:visible;opacity:1;pointer-events:auto}
  .nav a{min-height:62px;border-bottom:1px solid var(--line);font-size:16px}
  .nav a::after{display:none}
  .nav a.nav-contact,.nav a.nav-book{
    width:100%;
    min-height:56px;
    justify-content:center;
    margin-left:0;
    border:1px solid var(--line-strong);
  }
  .nav a.nav-contact{margin-top:22px}
  .nav a.nav-book{margin-top:12px}
  .menu{display:block}
  .footer-main{grid-template-columns:1fr;gap:24px}
  .footer-nav{justify-content:flex-start}
  .footer-legal{justify-content:flex-start;padding-bottom:28px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media(forced-colors:active){
  body::before,body::after{display:none}
  .button,.brand-mark{border:1px solid CanvasText}
  .eyebrow::before{forced-color-adjust:none}
}