/* ═══════════════════════════════════════════════════════════
   The Left Coast Project
   Print, not nightclub: paper ground, ink rules, one vermilion
   signal. A grotesque set with real structure, led by the
   wordmark rather than competing with it.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:   #F4F2ED;
  --paper-2: #EBE8E1;
  --paper-3: #E2DED5;

  --ink:     #14171C;
  --ink-2:   #1D222A;
  --muted:   #6D7480;
  --faint:   #9AA0AA;

  --signal:     #D8391B;
  --signal-lit: #F0532F;

  --rule:   rgba(20,23,28,.16);
  --rule-2: rgba(20,23,28,.30);
  --rule-i: rgba(244,242,237,.20);

  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  --gut:  clamp(1.15rem, 4.5vw, 4.5rem);
  --maxw: 1560px;

  --ease: cubic-bezier(.2,.6,.3,1);
  --slow: cubic-bezier(.16,.84,.44,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(.95rem,.42vw + .85rem,1.02rem);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
::selection{ background:var(--signal); color:var(--paper); }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:200;
  padding:.7rem 1.1rem; background:var(--ink); color:var(--paper);
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
  transform:translateY(-180%);
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:none; }

/* faint press texture, multiplied into the paper */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

/* ── shared ─────────────────────────────────────────────── */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  margin:0;
  font-size:.66rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:""; width:.62rem; height:.62rem;
  background:var(--signal);
  flex:none;
}

.sect{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(2.5rem,5vw,3.75rem) var(--gut);
}
.sect__head{ margin-bottom:clamp(1.4rem,2.6vw,2.2rem); }

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(244,242,237,.88);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border-bottom-color:var(--rule);
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:.85rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__mark{ display:block; line-height:0; }
.nav__mark img{
  width:auto; height:clamp(1.5rem,2.5vw,2.25rem);  /* 2 lines of nav text */
  opacity:0; transition:opacity .4s var(--ease);
}
.nav.is-stuck .nav__mark img{ opacity:1; }

.nav__links{ display:flex; align-items:center; gap:clamp(.85rem,2vw,2.1rem); }
.nav__links a{
  position:relative;
  font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  padding:.3rem 0;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--signal);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
@media (hover:hover){ .nav__links a:hover{ color:var(--signal); } }
@media (hover:hover){ .nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; } }
.nav__links a.is-key{
  background:var(--ink); color:var(--paper);
  padding:.5rem .85rem;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav__links a.is-key::after{ display:none; }
@media (hover:hover){ .nav__links a.is-key:hover{ background:var(--signal); color:var(--paper); } }

@media (max-width:430px){
  .nav__links{ gap:.7rem; }
  .nav__links a{ font-size:.63rem; letter-spacing:.08em; }
  .nav__links a.is-key{ padding:.45rem .6rem; }
}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(6.5rem,13vh,9.5rem) var(--gut) clamp(2rem,4vw,3rem);
}
.hero__wash{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* Only the warm wash at top-right. A second, darker wash used to sit at
     bottom-left, but it was bounded by the hero box and got sliced off at
     its edge, leaving a visible grey seam above the next section. */
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(216,57,27,.09), transparent 70%);
}
.hero__in{ display:flex; flex-direction:column; align-items:flex-start; }

.hero__logo{ margin:clamp(1.1rem,2.5vw,2rem) 0 0; width:100%; }
.hero__logo img{ width:min(100%, 940px); height:auto; }

/* lineup */
.lineup{
  list-style:none; margin:clamp(1.8rem,3.6vw,3rem) 0 0; padding:0;
  width:100%;
  display:flex; flex-wrap:wrap;
  border-top:1px solid var(--rule-2);
}
.lineup li{
  /* basis 0 + grow: the four always share one row, so a middle-size screen
     can never strand a fourth name on its own line (3 + 1). Below 700px the
     rule further down takes over with two up. */
  flex:1 1 0;
  min-width:0;
  display:flex; flex-direction:column; gap:.15rem;
  padding:.95rem 1.1rem .95rem 0;
  border-bottom:1px solid var(--rule);
}
.lineup a{
  font-size:clamp(1.02rem,1.5vw,1.3rem);
  font-weight:600;
  font-stretch:105%;
  letter-spacing:-.005em;
  color:var(--ink); text-decoration:none;
  transition:color .25s var(--ease);
}
@media (hover:hover){ .lineup a:hover{ color:var(--signal); } }
.lineup span{
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}

/* Narrow screens: two up rather than a single tall column. Keeps all four
   players, their instruments and their links, at half the height. */
@media (max-width:700px){
  .lineup li{
    flex:1 1 44%;
    padding:.72rem 1rem .72rem 0;
  }
  .lineup a{ font-size:1rem; }
}

/* ── band ───────────────────────────────────────────────── */
/* This section ends on the small cite line under the testimonial, so a full
   section's bottom padding read as a void. Close it tighter than the others. */
.sect--band{ padding-bottom:clamp(1.25rem,2.6vw,2rem); }

.band-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:start;
}
.band-copy .eyebrow{ margin-bottom:clamp(1rem,2vw,1.6rem); }
.lead{
  margin:0;
  font-size:clamp(1.35rem,2.9vw,2.35rem);
  font-weight:500;
  font-stretch:104%;
  line-height:1.18;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.body{
  margin:clamp(1.1rem,2.2vw,1.7rem) 0 0;
  max-width:36rem;
  color:#3D434C;
  font-size:1rem;
  line-height:1.72;
}

.band-fig{ margin:0; }
.band-fig img{ width:100%; }
.band-fig figcaption{
  margin-top:.7rem;
  font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}

/* pull quote */
.quote{
  margin:clamp(1.9rem,4vw,3.25rem) 0 0;
  padding-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid var(--rule);
}
.quote p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.8rem,5.2vw,4.1rem);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.quote em{ font-style:italic; color:var(--signal); }
.quote cite{
  display:flex; align-items:baseline; gap:.85rem;
  margin-top:clamp(1rem,2vw,1.5rem);
  font-style:normal;
}
.quote cite a{
  font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--signal);
  padding-bottom:.15rem;
  transition:color .25s var(--ease);
}
@media (hover:hover){ .quote cite a:hover{ color:var(--signal); } }
.quote cite span{
  font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}

@media (max-width:820px){
  .band-grid{ grid-template-columns:1fr; }
  .band-fig{ order:-1; }
}

/* ── films ──────────────────────────────────────────────── */
.films{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,3vw,2.6rem);
}
.film__btn{ display:block; width:100%; }
.film__media{
  position:relative; display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--paper-3);
  border:1px solid var(--rule);
}
.film__media img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .5s var(--ease);
}
.film__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,23,28,.04), rgba(20,23,28,.30));
  transition:opacity .45s var(--ease);
}
.film__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(3.2rem,5vw,4.2rem); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--paper); color:var(--ink);
  box-shadow:0 6px 24px -8px rgba(20,23,28,.5);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.film__play svg{ width:40%; height:40%; margin-left:8%; }
.film__btn:focus-visible .film__play{ background:var(--signal); color:var(--paper); }
@media (hover:hover){ .film__btn:hover .film__play{ background:var(--signal); color:var(--paper); } }
@media (hover:hover){ .film__btn:hover .film__veil{ opacity:.4; } }

.film__txt{ padding-top:.95rem; }
.film__t{
  margin:0;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  font-weight:600; font-stretch:104%;
  letter-spacing:-.01em;
}
.film__s{
  margin:.25rem 0 0;
  font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}
.film__media.is-live iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

@media (max-width:720px){ .films{ grid-template-columns:1fr; } }

/* ── gallery ────────────────────────────────────────────── */
/* Bands: tiles in a band share one height while widths vary, so rows stay
   asymmetric with no tile coming up short and leaving a gap. */
.sect--gal{ border-top:1px solid var(--rule); }
.mosaic{
  --mgap:clamp(.4rem,.9vw,.8rem);
  display:flex; flex-direction:column; gap:var(--mgap);
}
.band{ display:flex; gap:var(--mgap); height:var(--bh); }
.band--tall { --bh:clamp(215px,25vw,400px); }
.band--mid  { --bh:clamp(190px,22vw,350px); }
.band--short{ --bh:clamp(140px,17vw,265px); }

.tile{
  margin:0; position:relative;
  flex:var(--f,1) 1 0; min-width:0; height:100%;
  overflow:hidden;
  background:var(--paper-3);
  cursor:zoom-in;
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .5s var(--ease);
}
.tile::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow .35s var(--ease);
  pointer-events:none;
}
@media (hover:hover){ .tile:hover::after{ box-shadow:inset 0 0 0 3px var(--signal); } }

@media (max-width:760px){
  .band{ flex-wrap:wrap; height:auto; }
  .tile{ flex:1 1 calc(50% - var(--mgap)); height:auto; aspect-ratio:3/2; }
}
@media (max-width:480px){ .tile{ flex:1 1 100%; } }

.credit-line{
  margin:clamp(1.1rem,2.2vw,1.7rem) 0 0;
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
  text-align:right;
}
.credit-line a{
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--rule-2);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
@media (hover:hover){ .credit-line a:hover{ color:var(--signal); border-color:var(--signal); } }

/* ── booking (ink block) ────────────────────────────────── */
.booking{
  max-width:none; width:100%;
  background:var(--ink); color:var(--paper);
  padding-block:clamp(2.75rem,6vw,5rem);
}
.booking__in{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
}
.booking .eyebrow{ color:rgba(244,242,237,.6); }
.booking__line{
  margin:clamp(1rem,2vw,1.6rem) 0 clamp(1.2rem,2.4vw,2rem);
  font-size:clamp(1.6rem,4.4vw,3.4rem);
  font-weight:500; font-stretch:104%;
  line-height:1.1; letter-spacing:-.02em;
}
.booking__mail{ margin:0; }
.mailslot,
a.maillink{
  font-size:clamp(1rem,2.4vw,1.9rem);
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--signal-lit);
  text-decoration:none;
  unicode-bidi:bidi-override; direction:rtl;   /* no-JS fallback reads correctly */
}
a.maillink{
  unicode-bidi:normal; direction:ltr;
  border-bottom:2px solid rgba(240,83,47,.45);
  padding-bottom:.12em;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
@media (hover:hover){ a.maillink:hover{ color:var(--paper); border-color:var(--paper); } }

/* ── footer ─────────────────────────────────────────────── */
.foot{
  position:relative; z-index:2;
  background:var(--ink); color:var(--paper);
  border-top:1px solid var(--rule-i);
}
.foot__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(2.2rem,4.5vw,3.6rem) var(--gut);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem 2.5rem;
}
.foot__logo{ width:auto; height:clamp(1.2rem,2.4vw,1.8rem); }
.foot__meta{
  margin:0; flex:1 1 auto;
  font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,242,237,.55);
}
@media (max-width:700px){
  .foot__in{ gap:1rem 1.5rem; padding-block:clamp(1.6rem,4vw,2.4rem); }
  .foot__meta{ flex:1 1 100%; order:3; }
}
.foot__top{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,242,237,.55); text-decoration:none;
  transition:color .3s var(--ease);
}
.foot__top svg{ width:.95rem; height:.95rem; }
@media (hover:hover){ .foot__top:hover{ color:var(--signal-lit); } }

/* ── lightbox ───────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(14,17,21,.95);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__fig{ margin:0; max-width:100%; max-height:100%; }
.lb__fig img{
  max-width:100%; max-height:82vh; width:auto; height:auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb.is-open .lb__fig img{ opacity:1; }

.lb__x,.lb__nav{
  position:absolute; display:grid; place-items:center;
  width:2.9rem; aspect-ratio:1;
  border:1px solid var(--rule-i);
  color:var(--paper); background:rgba(20,23,28,.5);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.lb__x svg,.lb__nav svg{ width:45%; height:45%; }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lb__nav--p{ left:clamp(.6rem,2.5vw,2.2rem); top:50%; transform:translateY(-50%); }
.lb__nav--n{ right:clamp(.6rem,2.5vw,2.2rem); top:50%; transform:translateY(-50%); }
/* Touch has no hover, so give the controls a momentary pressed state
   instead. :active clears on release, unlike :hover which sticks. */
.lb__x:active,.lb__nav:active{ background:var(--signal); border-color:var(--signal); color:var(--paper); }
@media (hover:hover){ .lb__x:hover,
.lb__nav:hover{ background:var(--signal); border-color:var(--signal); } }

.lb__count{
  position:absolute; bottom:clamp(1rem,3vw,2.2rem); left:clamp(1rem,3vw,2.2rem);
  margin:0;
  font-size:.66rem; font-weight:600; letter-spacing:.18em;
  color:rgba(244,242,237,.55);
}
.lb__credit{
  position:absolute; bottom:clamp(1rem,3vw,2.2rem); right:clamp(1rem,3vw,2.2rem);
  margin:0; text-align:right;
  font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,242,237,.55);
}
.lb__credit:empty{ display:none; }
.lb__credit a{
  color:var(--signal-lit); text-decoration:none;
  border-bottom:1px solid rgba(240,83,47,.45);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
@media (hover:hover){ .lb__credit a:hover{ color:var(--paper); border-color:var(--paper); } }
body.lb-open{ overflow:hidden; }

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