:root{
  --font-acma: "PP Acma","Times New Roman",Times,serif;
  --font-funnel: "Funnel Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --logo-size: 350px; 
  --btn-rgb: rgb(225,207,205);
  --left-bg: rgb(211,223,226);      /* S2 vasak taust */
  --right-bg: rgb(233,224,200);     /* S2 parem (beež) */
  --contact-right-bg: rgb(225,207,205); /* S4 parem taust */
  --text:#111; --muted:#444; --white:#fff; --black:#000;

  --container:1200px;
  scroll-behavior:smooth;
}

/* reset/baas */
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);background:#faf9f8}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.caps{letter-spacing:.08em;text-transform:uppercase}
body{ font-family: var(--font-funnel); font-weight:400 }

/* Header */
header.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom:1px solid #eee;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px; height:72px}

/* Logo plokk */
.logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;      /* hoiab spani keskel */
  width: var(--logo-size);
  height: var(--logo-size);
  text-decoration:none;
}

/* Logo ise taustapildina; tee on suhteline CSS-faili asukohast */
.logo{
  width: 100%;
  height: 100%;
  display: inline-block;
  background: url("../img/logo.svg") center / contain no-repeat;
}



.brand{font-family:var(--font-acma); font-weight:900; font-size:20px}


nav{position:relative}
nav ul{display:flex;gap:26px; list-style:none; margin:0; padding:0}
nav a{font-family:var(--font-acma); font-weight:900; font-size:16px}
nav a:hover{opacity:.8}
.burger{display:none; background:none; border:0; width:44px; height:44px}
.burger svg{width:28px;height:28px}
@media (max-width: 979px){
  nav ul{
    display:none; position:fixed; right:16px; top:76px;
    background:#fff; border:1px solid #eee;
    padding:10px; width:min(88vw, 320px);
    flex-direction:column; gap:6px; z-index:80;
  }
  header.site-header.nav-open nav ul{ display:flex }
  nav a{ display:block; padding:10px 12px }
  nav a:hover{ background:#f5f5f5 }
  .burger{display:inline-grid; place-items:center}
}

/* HERO (täisbleed, vahe S2-ga puudub) */
.hero{position:relative; min-height:78dvh; display:grid; place-items:center; overflow:hidden; margin-bottom:0}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.2), rgba(0,0,0,.55))}
.hero-inner{position:relative; z-index:2; color:#fff; text-align:center; padding:80px 20px 120px}
.h-top{font-family:var(--font-acma); font-size:48px; margin:.2em 0}
.h-mid{font-family:var(--font-acma); font-size:104px; line-height:.95; margin:.1em 0}
.h-sub{font-family:var(--font-funnel); font-weight:300; font-size:20px; letter-spacing:.12em}
.btn{
  display:inline-block; padding:14px 28px; border-radius:999px; border:2px solid #000;
  background:var(--btn-rgb); color:#000; font-family:var(--font-funnel); font-weight:300; text-transform:uppercase; letter-spacing:.08em;
}
.btn:hover{transform:translateY(-1px)}
@media (max-width: 720px){ .h-top{font-size:34px} .h-mid{font-size:56px} .h-sub{font-size:16px} }

/* === Täisbleed jaotus: .band ======================================= */
.band{
  display:grid;
  grid-template-columns: 1fr;            /* mobiil: 1 veerg */
  align-items:stretch;
  scroll-margin-top:84px;                 /* sticky header kompenseerimine */
}
.band .col{ padding:56px 0 }             /* täisbleed taust; sisu piirab .container */
.band .container{ padding-left:20px; padding-right:20px }

/* ================= S2: Sündmused (70/30) ================== */
.band-events .left{ background: var(--left-bg) }
.band-events .right{ background: var(--right-bg); display:flex; align-items:center }
@media (min-width:980px){
  .band-events{ grid-template-columns: 7fr 3fr }
}

/* S2 sisu */
.head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.mini-logo{width:36px;height:36px;background:#cfd6d9;flex:0 0 auto; display:inline-block}
.title-acma{font-family:var(--font-acma); font-size:30px; font-weight:900; text-transform:uppercase; margin:0}
.events-list{display:grid; gap:18px}
.event{padding:14px 0; border-top:1px solid rgba(0,0,0,.06)}
.event:first-child{border-top:0}
.event .when{font-family:var(--font-acma); font-weight:900; font-size:16px; text-transform:uppercase}
.event .what{font-family:var(--font-funnel); font-weight:300; font-size:18px}
.event .actions{margin-top:8px}

/* S2 parempoolne pilt ≈50% veerust (kompaktsem) */
.photo-wrap{ display:grid; place-items:center }
.photo-wrap img{
  width:50%;
  max-width:420px;
  height:auto;
  object-fit:contain;
}
@media (max-width:479px){
  .photo-wrap img{ width:70% } /* telefonil veidi suurem */
}

/* ================= S3: Muusikamajast (50/50) =============== */
.band-about .left{ background:#000 }                /* pilt üle pinna */
.band-about .right{ background:#fff }
@media (min-width:980px){
  .band-about{ grid-template-columns: 1fr 1fr }
}

/* vasak meedia täis-kattega */
.media{ position:relative; min-height: clamp(220px, 45vw, 420px) }
.media .media-inner{ position:absolute; inset:0 }
.media .media-inner img{ width:100%; height:100%; object-fit:cover }

/* parempoolne tekstiplokk – lõiguvahe + taand */
.about-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.about-title{font-family:var(--font-acma); font-size:28px; font-weight:900; margin:0}
.band-about .about-text{
  font-family:var(--font-funnel);
  font-weight:300; font-size:18px;
  line-height:1.58; color:var(--muted);
  white-space: normal;            /* NB! et p-marginaalid töötaksid */
}
.band-about .about-text p{
  margin: 0 0 6px;
  text-indent: 1.3em;             /* taand igal lõigul... */
}
.band-about .about-text p:first-child{ text-indent:0 }
.band-about .about-text p:last-child{ margin-bottom:0 }

/* ================= S4: Kontakt (30/70) ===================== */
.band-contact .left{ background:#000 }               /* foto üle pinna */
.band-contact .right{ background: var(--contact-right-bg) }
@media (min-width:980px){
  .band-contact{ grid-template-columns: 3fr 7fr }
}
.contact-title{font-family:var(--font-acma); font-size:28px; font-weight:900; text-transform:uppercase; margin:0 0 12px}
.contact-block{margin:16px 0}
.contact-block h4{font-family:var(--font-acma); font-size:18px; font-weight:900; text-transform:uppercase; margin:0 0 6px}
.contact-block p{font-family:var(--font-funnel); font-weight:300; font-size:16px; margin:0}
.map-embed{border:0; width:100%; height:360px}

/* ================= Footer (täisbleed) ====================== */
.site-footer{background:#111; color:#eee}
.footer-inner{padding:56px 0}
.footer-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.footer-head .mini-logo{width:34px;height:34px;background:#555}
.footer-title{font-family:var(--font-acma); font-weight:900; text-transform:uppercase}
.newsletter{display:grid; gap:12px; max-width:720px}
.newsletter p{font-family:var(--font-funnel); font-weight:300; line-height:1.6; color:#ddd}
.input-row{display:flex; gap:10px; flex-wrap:wrap}
.input-row input[type="email"]{ flex:1 1 280px; padding:14px 16px; border-radius:10px; border:1px solid #333; background:#1c1c1c; color:#eee; font-family:var(--font-funnel) }
.checkbox{display:flex; gap:10px; align-items:flex-start; color:#ccc; font-family:var(--font-funnel)}
.checkbox input{margin-top:4px}
.copyright{margin-top:20px; font-size:14px; color:#aaa}

/* Üles-nool */
.to-top{
  position:fixed; right:16px; bottom:16px; width:44px; height:44px;
  display:grid; place-items:center; background:#000; color:#fff; opacity:.85;
}
.to-top:hover{opacity:1}
body.fade-scroll{ transition: opacity .35s ease; opacity:.92 }

/* -------- PP Acma @font-face -------- */
@font-face{
  font-family: "PP Acma";
  src: url("../fonts/PPAcma-Regular.woff2") format("woff2"),
       url("../fonts/PPAcma-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "PP Acma";
  src: url("../fonts/PPAcma-Bold.woff2") format("woff2"),
       url("../fonts/PPAcma-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "PP Acma";
  src: url("../fonts/PPAcma-Black.woff2") format("woff2"),
       url("../fonts/PPAcma-Black.woff") format("woff");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "PP Acma";
  src: url("../fonts/PPAcma-Light.woff2") format("woff2"),
       url("../fonts/PPAcma-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}











/* Päise sisu full-bleed + ilusad dünaamilised äärised */
.site-header .container{
  max-width: none;        /* ära piira laiust */
  width: 100%;
  padding-left: clamp(12px, 3vw, 32px);
  padding-right: clamp(12px, 3vw, 32px);
}

/* Hoia joondus: logo vasakul, nav/burger paremal */
.site-header .nav-wrap{
  justify-content: flex-start;
  gap: 20px;
}
.site-header nav{ margin-left: auto; }

/* (soovi korral) tee päise taust täiesti äärest ääreni ilma “karbi” varjuta */
header.site-header{
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid #eee; /* jäta kui meeldib, muidu eemalda */
}