:root{
    --bg:#0b0b0c;
    --bg-raised:#151517;
    --bg-raised-2:#1d1d20;
    --line:#2a2a2d;
    --text:#f3f1ec;
    --text-dim:#a8a6a1;
    --text-faint:#6c6a67;
    --accent:#f0c419;
    --accent-ink:#1a1400;
    --shadow: 0 20px 50px -20px rgba(0,0,0,.6);
    font-size: 16px;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}

  h1,h2,h3{
    font-family:"Anton","Archivo Black", sans-serif;
    text-transform:uppercase;
    letter-spacing:.01em;
    text-wrap:balance;
    margin:0;
    line-height:.95;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:24px;
  }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:50;
    background:rgba(11,11,12,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-block:14px;
    gap:16px;
  }
  .nav-logo,
  .nav-links a{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    text-decoration:none;
    color:var(--text-dim);
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    font-family:"Archivo",sans-serif;
    white-space:nowrap;
    transition:color .15s ease;
  }
  .nav-logo:hover, .nav-logo:focus-visible,
  .nav-links a:hover, .nav-links a:focus-visible{color:var(--accent);}
  .nav-links{
    display:flex;
    gap:28px;
    list-style:none;
    margin:0;
    padding:0;
    flex-wrap:wrap;
  }

  /* ---------- MOBILE NAV TOGGLE ---------- */
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:32px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
  }
  .nav-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--text);
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media (max-width:640px){
    .nav-toggle{display:flex;}
    .nav-links{
      position:absolute;
      top:100%;
      left:0;
      right:0;
      flex-direction:column;
      gap:0;
      background:var(--bg);
      border-bottom:1px solid var(--line);
      max-height:0;
      overflow:hidden;
      transition:max-height .25s ease;
    }
    .nav-links.is-open{max-height:320px;}
    .nav-links li{border-top:1px solid var(--line);}
    .nav-links a{display:block;padding:16px 24px;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    isolation:isolate;
  }
  .hero-media{
    position:relative;
    width:100%;
    line-height:0;
    border-bottom:1px solid var(--line);
  }
  .hero-media picture{display:block;}
  .hero-media img{
    width:100%;height:auto;display:block;
    filter:grayscale(1) contrast(1.08);
  }

  /* ---------- SECTIONS ---------- */
  section{padding-block:76px;}
  .eyebrow{
    font-size:12px;
    font-weight:800;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 10px;
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:24px;
    margin-bottom:40px;
    flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(1.9rem,4.5vw,3rem);}
  .section-head .rule{
    flex:1;
    height:1px;
    background:var(--line);
    min-width:60px;
  }

  /* ---------- STORY ---------- */
  .story{
    background:var(--bg-raised);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .story-grid{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:56px;
    align-items:start;
  }
  .story p{
    font-size:1.05rem;
    line-height:1.7;
    color:var(--text-dim);
    max-width:62ch;
    margin:0 0 20px;
  }
  .story p:last-child{margin-bottom:0;}
  .story p strong{color:var(--text);font-weight:700;}
  .story-facts{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .fact{
    border-left:3px solid var(--accent);
    padding-left:18px;
  }
  .fact .num{
    font-family:"Anton",sans-serif;
    font-size:2.1rem;
    display:block;
    color:var(--text);
  }
  .fact .lbl{
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-faint);
  }

  /* ---------- BAND / FOTO ---------- */
  .band-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .member{
    position:relative;
    border-radius:2px;
    overflow:hidden;
    background:var(--bg-raised);
    border:1px solid var(--line);
  }
  .member .photo{
    aspect-ratio:3/4;
    overflow:hidden;
  }
  .member .photo img{
    width:100%;height:100%;object-fit:cover;
    filter:grayscale(1) contrast(1.05);
    transition:filter .35s ease, transform .35s ease;
  }
  .member:hover .photo img{filter:grayscale(0) contrast(1.05);transform:scale(1.03);}
  .member .meta{
    padding:16px 16px 18px;
  }
  .member .name{
    font-family:"Anton",sans-serif;
    font-size:1.2rem;
    letter-spacing:.02em;
  }
  .member .role{
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent);
    margin-top:4px;
  }

  /* ---------- KONCERTY ---------- */
  .gigs{
    background:var(--bg-raised);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .gig-layout{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:48px;
    align-items:center;
  }
  .poster-frame{
    position:relative;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .poster-frame img{width:100%;}
  .gig-copy .status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--accent);
    color:var(--accent-ink);
    font-weight:800;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:100px;
    margin-bottom:18px;
  }
  .gig-copy h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px;}
  .gig-copy p{
    color:var(--text-dim);
    line-height:1.7;
    font-size:1.02rem;
    max-width:44ch;
  }
  .gig-list{
    margin-top:26px;
    display:flex;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--line);
  }
  .gig-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding-block:14px;
    border-bottom:1px solid var(--line);
    font-size:.95rem;
  }
  .gig-row .venue{font-weight:700;}
  .gig-row .place{color:var(--text-faint);}
  .gig-row .tag{
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    align-self:center;
  }

  /* ---------- SHOP ---------- */
  .shop-band{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    padding:36px;
    background:repeating-linear-gradient(135deg, var(--bg-raised) 0 22px, var(--bg-raised-2) 22px 44px);
    border:1px solid var(--line);
    border-radius:2px;
  }
  .shop-band h2{font-size:clamp(1.6rem,4vw,2.3rem);}
  .shop-band p{color:var(--text-dim);margin:8px 0 0;max-width:46ch;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--accent);
    color:var(--accent-ink);
    font-weight:800;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:14px 24px;
    border-radius:2px;
    text-decoration:none;
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(240,196,25,.5);}

  /* ---------- KONTAKT ---------- */
  .contact{
    text-align:left;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    align-items:start;
  }
  .contact h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:16px;}
  .contact p.lede{color:var(--text-dim);font-size:1.05rem;max-width:40ch;line-height:1.6;}
  .contact-card{
    background:var(--bg-raised);
    border:1px solid var(--line);
    border-radius:2px;
    padding:32px;
  }
  .contact-card .row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding-block:14px;
    border-bottom:1px solid var(--line);
  }
  .contact-card .row:last-child{border-bottom:none;padding-bottom:0;}
  .contact-card .row .k{
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-faint);
  }
  .contact-card .row .v{
    font-weight:700;
    font-size:1.05rem;
    text-align:right;
  }
  .contact-card .row .v a{text-decoration:none;}
  .contact-card .row .v a:hover{color:var(--accent);}

  /* ---------- FOOTER ---------- */
  footer{
    background:#000;
    border-top:1px solid var(--line);
    padding-block:32px;
    padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));
  }
  .foot-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  .socials{
    display:flex;
    gap:14px;
  }
  .social{
    width:42px;height:42px;
    border-radius:50%;
    background:var(--bg-raised);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--text);
    transition:background .15s ease, color .15s ease;
  }
  .social:hover{background:var(--accent);color:var(--accent-ink);}
  .social svg{width:18px;height:18px;fill:currentColor;}
  footer .copy{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-faint);
  }

  @media (max-width:860px){
    .story-grid, .gig-layout, .contact-grid{grid-template-columns:1fr;}
    .band-grid{grid-template-columns:repeat(2,1fr);}
    section{padding-block:56px;}
    .contact-card .row .v{text-align:left;}
    .contact-card .row{flex-direction:column;align-items:flex-start;gap:4px;}
  }
  @media (max-width:520px){
    .band-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
    .nav-links{gap:16px;}
    .nav-links a{font-size:11px;}
  }