/* =================================================================
   Concrete Beach — style.css
   Recreation of the black + gold identity, built mobile-first.
   ================================================================= */

:root{
  --gold:#F5B301; --gold-deep:#D99900; --gold-soft:rgba(245,179,1,.14);
  --ink:#0C0C0D; --ink-2:#151517; --ink-3:#1F1F24;
  --paper:#FFFFFF; --paper-2:#F5F4F1;
  --text:#17171A; --muted:#6E6E75; --line:rgba(0,0,0,.10);
  --wrap:1120px; --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --ff-display:"Anton",system-ui,sans-serif;
  --ff:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff); color:var(--text);
  background:var(--paper); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.05}

/* ---- Branded image placeholders (swap for <img> when assets land) -- */
.ph{
  position:relative; background:
    repeating-linear-gradient(135deg,rgba(245,179,1,.06) 0 12px,transparent 12px 24px),
    var(--ink-2);
  border:1px dashed rgba(245,179,1,.45); border-radius:var(--radius);
  min-height:120px; display:flex; align-items:center; justify-content:center;
}
.ph::after{
  content:attr(data-ph); color:rgba(245,179,1,.75);
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.4em .7em; text-align:center;
}

/* ---- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:700; font-size:.95rem; padding:.7em 1.15em;
  border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .18s ease, color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold); color:#171100}
.btn--gold:hover{background:var(--gold-deep)}
.btn--ghost{border-color:currentColor;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}

/* ---- Announcement bar --------------------------------------------- */
.announce{
  background:var(--gold); color:#171100; text-align:center;
  font-weight:600; font-size:.86rem; letter-spacing:.01em;
  padding:.55em 1em; display:flex; gap:.5em; justify-content:center; align-items:center;
}
.announce b{font-weight:800}
.announce__dot{color:#B00; font-size:.7em; animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---- Header / nav ------------------------------------------------- */
.site{position:sticky; top:0; z-index:40; background:var(--ink); color:#fff;}
.site__bar{
  max-width:var(--wrap); margin:0 auto; padding:.7em 1em;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6em;
}
.brand{display:flex; align-items:center; gap:.55em; justify-self:center}
.brand__logo{height:40px;width:auto;min-height:0;object-fit:contain;flex:0 0 auto}
.brand__logo--sm{height:56px;width:auto}
.brand__name{font-family:var(--ff-display); font-size:1.15rem; letter-spacing:.02em; color:var(--gold)}
.nav{display:none}
.site__actions{display:flex; align-items:center; gap:.5em; justify-self:end}
.social{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink-3); color:var(--gold); font-size:.9rem; line-height:1;
}
.social:hover{background:var(--gold);color:#171100}
.site__actions .btn{display:none}

.nav-toggle{
  width:40px;height:40px;background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px;justify-self:start
}
.nav-toggle span{height:2px;background:#fff;border-radius:2px;transition:.2s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile dropdown nav */
.nav{
  position:fixed; inset:0 0 auto 0; top:0; background:var(--ink);
  padding:5.2em 1.4em 1.6em; flex-direction:column; gap:.2em;
  transform:translateY(-110%); transition:transform .28s ease; display:flex;
}
body.nav-open .nav{transform:translateY(0)}
.nav a{
  font-family:var(--ff-display); font-size:1.6rem; color:#fff; padding:.45em 0;
  border-bottom:1px solid rgba(255,255,255,.08); letter-spacing:.02em;
}
.nav a[aria-current="page"]{color:var(--gold)}

/* ---- Section rhythm ----------------------------------------------- */
.section{padding:3.2em 1em}
.kicker{
  display:inline-block; font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:.7em;
}

/* ---- Hero --------------------------------------------------------- */
.hero{position:relative; color:#fff; overflow:hidden; background:var(--ink)}
.hero__media{
  position:absolute; inset:0; min-height:0; border:0; border-radius:0;
  background:
    radial-gradient(120% 90% at 70% 0%,rgba(245,179,1,.18),transparent 60%),
    repeating-linear-gradient(135deg,rgba(245,179,1,.05) 0 14px,transparent 14px 28px),
    linear-gradient(180deg,#1a1712,#0a0a0b);
}
.hero__media::after{color:rgba(245,179,1,.45)}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,12,13,.35),rgba(12,12,13,.86))}
.hero__inner{
  position:relative; max-width:var(--wrap); margin:0 auto;
  padding:3.4em 1.2em 3.2em; text-align:center;
}
.hero__eyebrow{color:var(--gold); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin:0 0 .8em}
.hero__title{display:flex; flex-direction:column; gap:.06em; align-items:center; margin:0 0 .5em}
.hero__title-1{font-family:var(--ff-display); font-size:clamp(2.7rem,11vw,5.4rem); letter-spacing:.01em; line-height:.92}
.hero__title-2{font-family:var(--ff-display); font-size:clamp(2rem,8.5vw,4.2rem); color:var(--gold); line-height:.92}
.hero__sub{max-width:34ch; margin:.6em auto 1.8em; color:rgba(255,255,255,.82)}

.listen{margin:0 auto 1.6em}
.listen__label{display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:.7em}
.listen__row{display:flex; gap:.6em; justify-content:center; flex-wrap:wrap}
.listen__btn{
  display:inline-flex; align-items:center; gap:.5em; background:#fff; color:#171100;
  font-weight:600; font-size:.85rem; padding:.55em .95em; border-radius:999px;
  transition:transform .12s ease, box-shadow .18s ease;
}
.listen__btn:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.35)}
.listen__ico{width:16px;height:16px;border-radius:4px;background:var(--ink);display:inline-block}
.ico--spotify{background:#1DB954;border-radius:50%}
.ico--youtube{background:#FF0000;border-radius:4px}
.ico--apple{background:linear-gradient(135deg,#FB5C74,#A44BD3);border-radius:4px}
.hero__rating{margin:.4em 0 0; font-size:.9rem; color:rgba(255,255,255,.8)}
.stars{color:var(--gold); letter-spacing:.12em}

/* ---- Next show ---------------------------------------------------- */
.nextshow{background:var(--ink-2); color:#fff}
.nextshow__inner{max-width:var(--wrap); margin:0 auto}
.nextshow .kicker{color:var(--gold)}
.nextshow__row{display:flex; align-items:center; gap:1.1em; flex-wrap:wrap}
.nextshow__date{
  flex:0 0 auto; width:78px; height:78px; border-radius:14px; background:var(--gold); color:#171100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.nextshow__d{font-family:var(--ff-display); font-size:2rem}
.nextshow__m{font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em}
.nextshow__meta{flex:1 1 220px}
.nextshow__venue{margin:0; font-weight:800; font-size:1.25rem}
.nextshow__where{margin:.15em 0 0; color:rgba(255,255,255,.7)}
.nextshow__note{margin:.35em 0 0; font-size:.85rem; color:var(--gold)}

/* ---- About -------------------------------------------------------- */
.about{background:var(--paper)}
.about__inner{max-width:var(--wrap); margin:0 auto; display:grid; gap:1.6em}
.about__text h2{font-size:clamp(1.7rem,6vw,2.5rem); font-weight:800; margin:.1em 0 .5em}
.about__usp{color:var(--muted)}
.about__text .btn{margin-top:.6em}
.about__media{min-height:240px}

/* ---- Press -------------------------------------------------------- */
.press{background:var(--paper-2)}
.press__inner{max-width:var(--wrap); margin:0 auto}
.press__row{display:grid; gap:1em}
.press__card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1em 1.2em; box-shadow:var(--shadow); transition:transform .14s ease;
}
.press__card:hover{transform:translateY(-3px)}
.press__src{display:block; font-family:var(--ff-display); font-size:1.25rem; color:var(--gold-deep); margin-bottom:.2em}
.press__quote{color:var(--text)}

/* ---- Footer ------------------------------------------------------- */
.foot{background:var(--ink); color:#fff; padding:2.6em 1em 1.2em}
.foot__inner{max-width:var(--wrap); margin:0 auto; display:grid; gap:1.6em}
.foot__brand .brand__logo{margin-bottom:.5em}
.foot__name{font-family:var(--ff-display); font-size:1.3rem; color:var(--gold); margin:0}
.tm{font-size:.6em; vertical-align:super}
.foot__tag{color:rgba(255,255,255,.6); margin:.2em 0 0; font-size:.9rem}
.foot__col h4{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 .6em}
.foot__col a{display:block; color:rgba(255,255,255,.82); padding:.22em 0}
.foot__col a:hover{color:#fff}
.foot__legal{
  max-width:var(--wrap); margin:1.8em auto 0; padding-top:1.1em;
  border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between;
  gap:.8em; flex-wrap:wrap; color:rgba(255,255,255,.55); font-size:.82rem;
}
.foot__top:hover{color:var(--gold)}

/* ---- Focus & motion ----------------------------------------------- */
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ===================================================================
   Tablet / desktop
   =================================================================== */
@media (min-width:760px){
  .section{padding:4.2em 1.4em}
  .nav-toggle{display:none}
  .nav{
    position:static; inset:auto; transform:none; display:flex; flex-direction:row;
    background:transparent; padding:0; gap:1.4em; justify-self:center;
  }
  .nav a{
    font-family:var(--ff); font-size:.98rem; font-weight:600; color:rgba(255,255,255,.85);
    border:0; padding:.2em 0; position:relative;
  }
  .nav a:hover{color:#fff}
  .nav a[aria-current="page"]{color:var(--gold)}
  .nav a[aria-current="page"]::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold);
  }
  .site__bar{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start}
  .site__actions .btn{display:inline-flex}

  .about__inner{grid-template-columns:1.05fr .95fr; align-items:center; gap:2.4em}
  .press__row{grid-template-columns:1fr 1fr}
  .foot__inner{grid-template-columns:1.4fr 1fr 1fr; gap:2em}
}

@media (min-width:1000px){
  .hero__inner{padding:5em 1.2em 4.4em}
}

/* ===================================================================
   Interior pages: Meet the Band + Contact
   =================================================================== */
.pagehead{background:var(--ink); color:#fff; padding:2.6em 1em 2.2em}
.pagehead__inner{max-width:var(--wrap); margin:0 auto}
.pagehead .kicker{color:var(--gold)}
.pagehead h1{font-family:var(--ff-display); font-size:clamp(2.2rem,9vw,3.6rem); letter-spacing:.01em}
.pagehead p{color:rgba(255,255,255,.72); margin:.5em 0 0}

.story{background:var(--paper)}
.story__inner{max-width:760px; margin:0 auto}
.story__inner p{margin:0 0 1em; color:var(--text)}

.members{background:var(--paper-2)}
.members__inner{max-width:var(--wrap); margin:0 auto}
.members__grid{display:grid; gap:1.4em; grid-template-columns:1fr}
.member{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.1em; box-shadow:var(--shadow)}
.member__photo{aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; border-radius:calc(var(--radius) - 4px); margin-bottom:.9em}
.member__name{font-size:1.3rem; font-weight:800}
.member__role{color:var(--gold-deep); font-weight:700; margin:.15em 0 0; font-size:.9rem}
.member__meta{color:var(--muted); font-size:.82rem; margin:.15em 0 .6em}
.member__bio{color:var(--text); font-size:.95rem; margin:0}

.disco{background:var(--paper)}
.disco__inner{max-width:760px; margin:0 auto}
.disco__list{list-style:none; margin:0; padding:0}
.disco__item{display:grid; grid-template-columns:auto 1fr; gap:.2em 1em; padding:1em 0; border-bottom:1px solid var(--line)}
.disco__year{font-family:var(--ff-display); color:var(--gold-deep); font-size:1.2rem; grid-row:span 2}
.disco__title{font-weight:800; font-size:1.1rem}
.disco__note{color:var(--muted); font-size:.9rem}

.thanks{background:var(--ink); color:#fff}
.thanks__inner{max-width:760px; margin:0 auto}
.thanks .kicker{color:var(--gold)}
.thanks p{color:rgba(255,255,255,.8); margin:0}

.contact{background:var(--paper)}
.contact__inner{max-width:var(--wrap); margin:0 auto; display:grid; gap:1.6em}
.contact__card,.contact__shows{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.4em}
.contact__card h2,.contact__shows h2{font-size:1.4rem; font-weight:800; margin:0 0 .5em}
.contact__card .btn{margin:.4em 0}
.contact__email{margin:.6em 0 0}
.contact__email a{color:var(--gold-deep); font-weight:600}
.contact__social{display:flex; gap:1em; margin-top:.9em; flex-wrap:wrap}
.contact__social a{color:var(--text); font-weight:600; border-bottom:2px solid var(--gold)}
.showlist{list-style:none; margin:0; padding:0}
.showlist__item{display:flex; flex-direction:column; padding:.8em 0; border-bottom:1px solid var(--line)}
.showlist__date{font-family:var(--ff-display); color:var(--gold-deep); font-size:1.1rem}
.showlist__venue{font-weight:700}
.showlist__time{color:var(--muted); font-size:.88rem}

@media (min-width:760px){
  .members__grid{grid-template-columns:repeat(3,1fr)}
  .contact__inner{grid-template-columns:1.1fr .9fr; align-items:start}
  .disco__item{grid-template-columns:auto 1fr auto; align-items:baseline}
  .disco__note{text-align:right}
}
@media (min-width:1000px){
  .members__grid{grid-template-columns:repeat(5,1fr)}
  .members .member__bio{font-size:.88rem}
}