@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

:root{
  --teal:#76A5AF;
  --teal-dark:#5B8A94;
  --grey:#CCCCCC;
  --grey-light:#E8E8E8;
  --white:#FFFFFF;
  --text:#242424;
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--white);color:var(--text);}
a{color:inherit;}

.app{display:flex;height:100vh;overflow:hidden;}
main{flex:1;min-width:0;height:100vh;overflow-y:scroll;overflow-x:hidden;}
.sidebar{
  width:170px;flex-shrink:0;background:var(--teal);
  display:flex;flex-direction:column;
}
.sidebar a{
  display:block;width:100%;text-align:left;padding:16px 18px;
  background:var(--grey);border:none;border-bottom:1px solid #ffffff55;
  font-size:15px;cursor:pointer;color:var(--text);text-decoration:none;
}
.sidebar a.active{background:var(--white);font-weight:bold;}
.sidebar a:hover{background:var(--grey-light);}

.banner{
  position:relative;overflow:hidden;background:var(--teal);
  color:#1c2a2d;padding:38px 30px;min-height:120px;
  display:flex;align-items:center;
}
.banner h1{
  margin:0;position:relative;z-index:2;
  font-family:'Great Vibes','Brush Script MT','Segoe Script',cursive;
  font-size:68px;font-weight:400;letter-spacing:1px;line-height:1.25;
  padding:0 .2em .1em 0;               /* keeps the script flourishes from being clipped */
  /* ombre in the scroll bar colours: black -> blue -> yellow -> brown */
  background:linear-gradient(90deg,#1C2A2D 0%,#5B8A94 28%,#D9A441 60%,#C0603F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* thin cream outline (same cream as the scroll bar lines) so the colours pop on the teal */
  filter:
    drop-shadow(1px 0 0 #F4EBD9) drop-shadow(-1px 0 0 #F4EBD9)
    drop-shadow(0 1px 0 #F4EBD9) drop-shadow(0 -1px 0 #F4EBD9);
}
.banner .icons{
  position:absolute;inset:0;font-size:34px;opacity:.35;
  display:flex;flex-wrap:wrap;align-content:center;gap:10px 26px;
  padding:8px 20px;line-height:1;user-select:none;pointer-events:none;
}

.searchbar{padding:16px 30px 0;}
.searchbar input{
  width:100%;max-width:420px;padding:9px 14px;border-radius:20px;
  border:1px solid var(--grey);font-size:14px;
}

.page-body{padding:24px 30px 50px;}

.split{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;}
.split p{flex:1 1 320px;line-height:1.6;font-size:14.5px;color:#333;}
.placeholder-img{
  flex:0 0 190px;height:260px;border:2px solid #444;position:relative;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #444, transparent calc(50% + 1px)),
    linear-gradient(to top left,  transparent calc(50% - 1px), #444, transparent calc(50% + 1px));
}
.placeholder-img.wide{flex:1 1 320px;height:220px;}
figure{margin:0;}
figcaption{font-size:12px;color:#666;margin-top:6px;text-align:center;}

.culture-row{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px;}
.culture-row .placeholder-img{flex:0 0 90px;height:90px;}
.culture-row p{margin:0;font-size:14px;line-height:1.5;color:#333;}
.ask-btn{
  display:inline-block;margin-top:6px;padding:8px 16px;border-radius:6px;
  background:var(--teal);color:#fff;text-decoration:none;font-size:14px;
  border:1px solid var(--teal-dark);
}
.ask-wrap{text-align:right;}

.headnote{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;margin-top:10px;}
.music-grid{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;}
.track{flex:1 1 150px;max-width:180px;}
.waveform{font-size:20px;letter-spacing:2px;color:#888;margin-bottom:4px;}
.track .placeholder-img{width:100%;height:150px;flex:none;}
.play-badge{
  position:absolute;bottom:6px;right:6px;background:var(--teal);color:#fff;
  border-radius:50%;width:24px;height:24px;display:flex;align-items:center;
  justify-content:center;font-size:12px;
}
.track figcaption{text-align:left;}

.contact-list{margin-top:10px;}
.contact-row{
  display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #eee;
}
.contact-row .ic{font-size:20px;color:var(--teal-dark);width:26px;text-align:center;font-family: Georgia, 'Times New Roman', Times, serif;}
.contact-row a{font-size:14.5px;text-decoration:none;color:#333;font-family: Arial, Helvetica, sans-serif}
.contact-row a:hover{text-decoration:underline;font-family: Arial, Helvetica, sans-serif}

.form-embed{
  margin-top:20px;
}
.form-embed iframe{
  width:100%;
  max-width:1000px;
  height:500px;
  border:none;
  display:block;
}

.modal-overlay{
  display:none;
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  align-items:center;justify-content:center;z-index:50;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff;border-radius:10px;padding:26px;width:90%;max-width:340px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.modal-box h2{margin:0 0 14px;font-size:18px;color:var(--text);}
.modal-box label{display:block;font-size:13px;margin:10px 0 4px;color:#444;}
.modal-box input, .modal-box textarea{
  width:100%;padding:8px 10px;border:1px solid var(--grey);border-radius:6px;
  font-size:14px;font-family:inherit;
}
.modal-box textarea{resize:vertical;min-height:70px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.modal-actions button{
  padding:8px 16px;border-radius:6px;border:1px solid var(--teal-dark);
  font-size:14px;cursor:pointer;
}
.modal-actions .send{background:var(--teal);color:#fff;}
.modal-actions .cancel{background:#fff;color:#444;}

.placeholder-img iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== African fabric scroll bar =====
   Thumb  = kente-style woven bands (teal, gold, cream, terracotta, indigo-black)
   Track  = plain white
   Works in Chrome, Edge and Safari. Firefox can't show patterns,
   so it gets a plain teal bar. */
:root{
  --kente-cream:#F4EBD9;
  --kente-gold:#D9A441;
  --kente-clay:#C0603F;
  --kente-ink:#1C2A2D;
}

/* Firefox fallback. Wrapped in @supports so Chrome/Edge ignore it:
   if these properties apply there, they switch OFF the patterned bar below. */
@supports not selector(::-webkit-scrollbar){
  main{
    scrollbar-width:auto;
    scrollbar-color:var(--teal-dark) var(--white);
  }
}

main::-webkit-scrollbar{width:20px;}

/* Track: completely white */
main::-webkit-scrollbar-track{
  background:var(--white);
}

/* Thumb: kente bands that repeat down the bar */
main::-webkit-scrollbar-thumb{
  border:3px solid var(--white);
  border-radius:6px;
  background-clip:padding-box;
  background-color:var(--teal-dark);
  background-image:repeating-linear-gradient(
    180deg,
    var(--teal-dark)   0    10px,
    var(--kente-cream) 10px 12px,
    var(--kente-gold)  12px 20px,
    var(--kente-cream) 20px 22px,
    var(--kente-ink)   22px 30px,
    var(--kente-cream) 30px 32px,
    var(--kente-clay)  32px 40px,
    var(--kente-cream) 40px 42px
  );
}
main::-webkit-scrollbar-thumb:hover{
  background-image:repeating-linear-gradient(
    180deg,
    var(--teal)        0    10px,
    var(--kente-cream) 10px 12px,
    var(--kente-gold)  12px 20px,
    var(--kente-cream) 20px 22px,
    var(--kente-ink)   22px 30px,
    var(--kente-cream) 30px 32px,
    var(--kente-clay)  32px 40px,
    var(--kente-cream) 40px 42px
  );
}