.elementor-2776 .elementor-element.elementor-element-386a25a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-79c997a{--display:flex;}.elementor-2776 .elementor-element.elementor-element-d92fcc0{--display:flex;}.elementor-2776 .elementor-element.elementor-element-065197a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-5b97887{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-7809d2b{--display:flex;}.elementor-2776 .elementor-element.elementor-element-949c489{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-c805467{--display:flex;}.elementor-2776 .elementor-element.elementor-element-f0af179{--display:flex;}.elementor-2776 .elementor-element.elementor-element-80925cd{--display:flex;}.elementor-2776 .elementor-element.elementor-element-bce0fd8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-b36a7e9{--display:flex;}.elementor-2776 .elementor-element.elementor-element-aa58ae0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-37e0b04{--display:flex;}.elementor-2776 .elementor-element.elementor-element-35fd9f0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-5640d00{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2776 .elementor-element.elementor-element-056cfe8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-2be0730 *//* =========================================================
   KENYA / MUSIC & RHYTHM
   HERO

   LIVE POSTER / VINYL / NIGHT CITY
========================================================= */

.kmusic-hero{

  --night:#0D1521;
  --blue:#183A5A;

  --red:#A8453F;
  --orange:#D37943;

  --cream:#EEE5D2;
  --gold:#D3AE65;

  --teal:#3C7973;

  position:relative;

  width:100%;

  height:min(100svh,960px);

  min-height:720px;

  overflow:hidden;

  background:
    var(--night);

  color:#fff;

  isolation:isolate;
}


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



/* =========================================================
   MEDIA
========================================================= */

.kmusic-hero__media{

  position:absolute;

  z-index:0;

  inset:0;

  overflow:hidden;
}



/* =========================================================
   PHOTO
========================================================= */

.kmusic-hero__photo{

  position:absolute;

  inset:-3%;

  background-image:

    var(
      --music-hero-image,
      radial-gradient(
        circle at 69% 39%,
        rgba(211,174,101,.34),
        transparent 15%
      )
    ),

    radial-gradient(
      circle at 79% 58%,
      rgba(168,69,63,.34),
      transparent 25%
    ),

    linear-gradient(
      125deg,
      #111A28 0%,
      #29445B 39%,
      #7A5549 68%,
      #D08A55 100%
    );

  background-repeat:no-repeat;

  background-size:cover;

  background-position:center;

  filter:
    saturate(.82)
    contrast(1.12)
    brightness(.76);

  transform:
    scale(
      var(--kmusic-photo-scale,1.04)
    )
    translate3d(
      var(--kmusic-photo-x,0px),
      var(--kmusic-photo-y,0px),
      0
    );

  will-change:transform;
}



/* =========================================================
   SHADE
========================================================= */

.kmusic-hero__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(9,15,25,.94) 0%,
      rgba(9,15,25,.78) 31%,
      rgba(9,15,25,.28) 58%,
      rgba(9,15,25,.06) 100%
    ),

    linear-gradient(
      180deg,
      rgba(5,10,17,.16) 0%,
      rgba(5,10,17,.02) 43%,
      rgba(5,10,17,.79) 100%
    );
}



/* =========================================================
   GRAPHIC PANEL
========================================================= */

.kmusic-hero__panel{

  position:absolute;

  z-index:1;

  right:-7%;
  top:-8%;

  width:43%;
  height:118%;

  background:
    var(--red);

  opacity:.72;

  transform:
    skewX(-11deg);

  mix-blend-mode:multiply;

  pointer-events:none;
}



/* =========================================================
   TOP
========================================================= */

.kmusic-hero__top{

  position:absolute;

  z-index:10;

  top:
    clamp(27px,4vw,58px);

  left:
    clamp(35px,6vw,95px);

  right:
    clamp(35px,6vw,95px);

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;
}


.kmusic-hero__top > div{

  display:flex;

  align-items:center;

  gap:12px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kmusic-hero__top span{
  color:rgba(255,255,255,.48);
}


.kmusic-hero__top strong{
  color:var(--gold);
}


.kmusic-hero__top i{

  width:40px;
  height:1px;

  background:
    rgba(255,255,255,.30);
}



/* =========================================================
   SEO H1
========================================================= */

.kmusic-hero__seo{

  position:absolute;

  z-index:9;

  left:
    clamp(35px,7vw,110px);

  top:
    clamp(110px,13vw,175px);

  margin:0;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  line-height:1.4;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--gold);
}



/* =========================================================
   TITLE
========================================================= */

.kmusic-hero__title{

  position:absolute;

  z-index:8;

  left:
    clamp(35px,7vw,110px);

  right:
    clamp(35px,7vw,110px);

  top:50%;

  transform:
    translateY(-53%);
}



/* =========================================================
   EYEBROW
========================================================= */

.kmusic-hero__eyebrow{

  display:block;

  margin-bottom:17px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.22em;

  color:var(--gold);
}



/* =========================================================
   JAPANESE TITLE
========================================================= */

.kmusic-hero__jp{

  position:relative;

  z-index:4;

  width:
    min(100%,1180px);

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-weight:500;

  letter-spacing:-.06em;

  line-break:strict;

  text-shadow:
    0 5px 26px
    rgba(0,0,0,.25);
}


.kmusic-hero__jp span{

  display:block;

  font-size:
    clamp(58px,6.7vw,102px);

  line-height:1.17;

  white-space:nowrap;
}


.kmusic-hero__jp strong{

  display:block;

  width:max-content;

  max-width:100%;

  margin:
    clamp(28px,3vw,45px)
    0 0
    clamp(85px,9vw,145px);

  font-size:
    clamp(48px,5.4vw,82px);

  line-height:1.22;

  font-weight:500;

  color:
    var(--cream);

  white-space:nowrap;
}



/* =========================================================
   ENGLISH TYPE
========================================================= */

.kmusic-hero__en{

  position:absolute;

  z-index:2;

  left:
    clamp(320px,35vw,560px);

  top:50%;

  transform:
    translateY(-43%)
    rotate(-4deg);

  font-family:
    Arial,
    sans-serif;

  font-weight:900;

  line-height:.76;

  letter-spacing:-.09em;

  opacity:.10;

  pointer-events:none;
}


.kmusic-hero__en span,
.kmusic-hero__en strong{

  display:block;
}


.kmusic-hero__en span{

  font-size:
    clamp(110px,15vw,230px);
}


.kmusic-hero__en strong{

  font-size:
    clamp(140px,18vw,275px);

  color:var(--orange);
}



/* =========================================================
   LEAD
========================================================= */

.kmusic-hero__lead{

  position:absolute;

  z-index:9;

  right:
    clamp(40px,8vw,125px);

  bottom:
    clamp(110px,12vw,165px);

  width:
    min(33vw,470px);

  padding-left:20px;

  border-left:
    2px solid
    var(--orange);
}


.kmusic-hero__lead > span{

  display:block;

  margin-bottom:9px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kmusic-hero__lead p{

  margin:0;

  font-size:12px;

  line-height:2.05;

  color:
    rgba(255,255,255,.68);
}



/* =========================================================
   BEAT BARS
========================================================= */

.kmusic-hero__beat{

  position:absolute;

  z-index:7;

  left:
    clamp(35px,7vw,110px);

  bottom:
    clamp(95px,11vw,150px);

  height:70px;

  display:flex;

  align-items:flex-end;

  gap:5px;
}


.kmusic-hero__beat i{

  display:block;

  width:3px;

  height:
    calc(
      12px +
      var(--beat-height,20px)
    );

  background:
    var(--orange);

  transform-origin:bottom;

  animation:
    kmusicBeat
    var(--beat-speed,1.1s)
    ease-in-out
    infinite alternate;
}


.kmusic-hero__beat i:nth-child(1){
  --beat-height:14px;
  --beat-speed:.9s;
}


.kmusic-hero__beat i:nth-child(2){
  --beat-height:34px;
  --beat-speed:1.2s;
}


.kmusic-hero__beat i:nth-child(3){
  --beat-height:19px;
  --beat-speed:.75s;
}


.kmusic-hero__beat i:nth-child(4){
  --beat-height:49px;
  --beat-speed:1.05s;
}


.kmusic-hero__beat i:nth-child(5){
  --beat-height:25px;
  --beat-speed:.82s;
}


.kmusic-hero__beat i:nth-child(6){
  --beat-height:43px;
  --beat-speed:1.3s;
}


.kmusic-hero__beat i:nth-child(7){
  --beat-height:16px;
  --beat-speed:.72s;
}


.kmusic-hero__beat i:nth-child(8){
  --beat-height:36px;
  --beat-speed:1.05s;
}


.kmusic-hero__beat i:nth-child(9){
  --beat-height:53px;
  --beat-speed:.92s;
}


.kmusic-hero__beat i:nth-child(10){
  --beat-height:21px;
  --beat-speed:1.18s;
}


.kmusic-hero__beat i:nth-child(11){
  --beat-height:39px;
  --beat-speed:.83s;
}


.kmusic-hero__beat i:nth-child(12){
  --beat-height:12px;
  --beat-speed:1.25s;
}


@keyframes kmusicBeat{

  from{
    transform:
      scaleY(.30);
  }

  to{
    transform:
      scaleY(1);
  }

}



/* =========================================================
   DISC
========================================================= */

.kmusic-hero__disc{

  position:absolute;

  z-index:8;

  right:
    clamp(40px,7vw,110px);

  top:
    clamp(100px,12vw,165px);

  width:
    clamp(150px,15vw,225px);

  aspect-ratio:1;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius:50%;

  background:
    rgba(12,20,31,.20);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);

  animation:
    kmusicDiscRotate
    18s linear
    infinite;
}



/* =========================================================
   DISC TEXT RING
========================================================= */

.kmusic-hero__disc-ring{

  position:absolute;

  inset:11px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(211,174,101,.28);

  border-radius:50%;
}


.kmusic-hero__disc-ring span{

  width:78%;

  text-align:center;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  line-height:1.8;

  font-weight:800;

  letter-spacing:.15em;

  color:
    rgba(255,255,255,.35);
}



/* =========================================================
   DISC CENTER
========================================================= */

.kmusic-hero__disc-center{

  position:absolute;

  left:50%;
  top:50%;

  width:43%;

  aspect-ratio:1;

  transform:
    translate(-50%,-50%);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  border-radius:50%;

  background:
    var(--orange);

  color:#fff;
}


.kmusic-hero__disc-center small{

  font-family:
    Georgia,
    serif;

  font-size:12px;

  font-style:italic;
}


.kmusic-hero__disc-center strong{

  margin-top:4px;

  font-family:
    Arial,
    sans-serif;

  font-size:8px;

  letter-spacing:.12em;
}


@keyframes kmusicDiscRotate{

  to{
    transform:
      rotate(360deg);
  }

}



/* =========================================================
   TICKER
========================================================= */

.kmusic-hero__ticker{

  position:absolute;

  z-index:10;

  left:0;
  right:0;
  bottom:0;

  height:43px;

  overflow:hidden;

  display:flex;

  align-items:center;

  background:
    var(--cream);

  color:
    var(--night);
}


.kmusic-hero__ticker-track{

  display:flex;

  align-items:center;

  gap:18px;

  width:max-content;

  white-space:nowrap;

  animation:
    kmusicTicker
    24s linear
    infinite;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:900;

  letter-spacing:.15em;
}


.kmusic-hero__ticker-track i{

  width:5px;
  height:5px;

  flex:none;

  border-radius:50%;

  background:
    var(--red);
}


@keyframes kmusicTicker{

  from{
    transform:
      translateX(0);
  }

  to{
    transform:
      translateX(-40%);
  }

}



/* =========================================================
   SCROLL
========================================================= */

.kmusic-hero__scroll{

  position:absolute;

  z-index:9;

  left:
    clamp(35px,7vw,110px);

  bottom:64px;

  display:flex;

  align-items:center;

  gap:10px;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.39);
}


.kmusic-hero__scroll i{

  width:55px;
  height:1px;

  overflow:hidden;

  background:
    rgba(255,255,255,.16);
}


.kmusic-hero__scroll i::after{

  content:"";

  display:block;

  width:40%;
  height:100%;

  background:
    var(--orange);

  animation:
    kmusicScrollLine
    2s ease-in-out
    infinite;
}


.kmusic-hero__scroll strong{
  color:var(--gold);
}


@keyframes kmusicScrollLine{

  from{
    transform:
      translateX(-120%);
  }

  to{
    transform:
      translateX(320%);
  }

}



/* =========================================================
   TABLET
========================================================= */

@media
(min-width:768px)
and
(max-width:1100px){

  .kmusic-hero__jp span{

    font-size:
      clamp(55px,7vw,75px);
  }


  .kmusic-hero__jp strong{

    font-size:
      clamp(44px,5.5vw,62px);

    margin-left:65px;
  }


  .kmusic-hero__lead{

    width:380px;
  }


  .kmusic-hero__disc{

    width:150px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  .kmusic-hero{

    height:
      min(100svh,840px);

    min-height:700px;
  }



  /* =====================================================
     PHOTO
  ====================================================== */

  .kmusic-hero__photo{

    background-position:
      60% center;
  }


  .kmusic-hero__shade{

    background:

      linear-gradient(
        180deg,
        rgba(7,13,22,.16) 0%,
        rgba(7,13,22,.12) 25%,
        rgba(7,13,22,.56) 58%,
        rgba(7,13,22,.95) 100%
      );
  }


  .kmusic-hero__panel{

    right:-45%;

    width:78%;

    opacity:.54;
  }



  /* =====================================================
     TOP
  ====================================================== */

  .kmusic-hero__top{

    top:22px;

    left:24px;
    right:24px;
  }


  .kmusic-hero__top > div:last-child{
    display:none;
  }



  /* =====================================================
     SEO H1
  ====================================================== */

  .kmusic-hero__seo{

    top:70px;

    left:24px;

    font-size:6px;
  }



  /* =====================================================
     TITLE
  ====================================================== */

  .kmusic-hero__title{

    left:24px;
    right:24px;

    top:auto;

    bottom:230px;

    transform:none;
  }


  .kmusic-hero__eyebrow{

    margin-bottom:11px;

    font-size:6px;
  }


  .kmusic-hero__jp span{

    font-size:
      clamp(39px,10.4vw,50px);

    line-height:1.35;

    white-space:nowrap;
  }


  .kmusic-hero__jp strong{

    width:100%;

    max-width:330px;

    margin:
      17px 0 0;

    font-size:
      clamp(34px,8.8vw,42px);

    line-height:1.55;

    white-space:normal;

    line-break:strict;
  }


  .kmusic-hero__en{

    left:12%;

    top:43%;

    opacity:.06;
  }


  .kmusic-hero__en span{

    font-size:
      clamp(85px,29vw,120px);
  }


  .kmusic-hero__en strong{

    font-size:
      clamp(105px,35vw,150px);
  }



  /* =====================================================
     DISC
  ====================================================== */

  .kmusic-hero__disc{

    top:93px;

    right:-21px;

    width:112px;

    opacity:.82;
  }


  .kmusic-hero__disc-center strong{
    font-size:6px;
  }



  /* =====================================================
     LEAD
  ====================================================== */

  .kmusic-hero__lead{

    left:24px;
    right:24px;

    bottom:88px;

    width:auto;

    padding-left:15px;
  }


  .kmusic-hero__lead p{

    max-width:340px;

    font-size:11px;

    line-height:1.95;
  }



  /* =====================================================
     BEAT
  ====================================================== */

  .kmusic-hero__beat{

    display:none;
  }



  /* =====================================================
     SCROLL
  ====================================================== */

  .kmusic-hero__scroll{
    display:none;
  }



  /* =====================================================
     TICKER
  ====================================================== */

  .kmusic-hero__ticker{

    height:38px;
  }


  .kmusic-hero__ticker-track{

    gap:14px;

    font-size:6px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .kmusic-hero__title{

    bottom:245px;
  }


  .kmusic-hero__jp span{

    font-size:
      clamp(36px,9.7vw,43px);
  }


  .kmusic-hero__jp strong{

    font-size:
      clamp(32px,8.5vw,38px);

    line-height:1.55;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .kmusic-hero__beat i,
  .kmusic-hero__disc,
  .kmusic-hero__ticker-track,
  .kmusic-hero__scroll i::after{

    animation:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49c9b80 *//* =========================================================
   KENYA / MUSIC & RHYTHM
   MUSIC AT A GLANCE

   LINER NOTES / TRACK LIST
========================================================= */

.kmusic-glance{

  --paper:#EEE7D8;
  --paper-light:#F5F0E6;

  --ink:#171E27;
  --muted:#66665F;

  --red:#A8453F;
  --orange:#D37943;

  --blue:#244A67;
  --teal:#3D716B;

  position:relative;

  width:100%;

  overflow:hidden;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(105px,11vw,165px);

  background:
    var(--paper);

  color:
    var(--ink);
}


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



/* =========================================================
   INTRO
========================================================= */

.kmusic-glance__intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;
}



/* =========================================================
   META
========================================================= */

.kmusic-glance__meta{

  display:flex;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    rgba(23,30,39,.17);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kmusic-glance__meta span{
  color:var(--red);
}


.kmusic-glance__meta strong{
  color:rgba(23,30,39,.38);
}



/* =========================================================
   HEADING
========================================================= */

.kmusic-glance__heading{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.38fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,95px);
}


.kmusic-glance__heading
> div:first-child > p{

  margin:
    0 0 14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.2em;

  color:var(--red);
}


.kmusic-glance h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(48px,5.8vw,84px);

  line-height:1.5;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.kmusic-glance h2 span,
.kmusic-glance h2 strong{

  display:block;
}


.kmusic-glance h2 strong{

  color:var(--red);

  font-weight:500;
}



/* =========================================================
   INTRO NOTE
========================================================= */

.kmusic-glance__note{

  padding-left:20px;

  border-left:
    2px solid
    var(--orange);
}


.kmusic-glance__note span{

  display:block;

  margin-bottom:10px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--red);
}


.kmusic-glance__note p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:var(--muted);
}



/* =========================================================
   LISTEN AREA
========================================================= */

.kmusic-listen{

  position:relative;

  width:
    min(
      calc(100% - clamp(60px,8vw,125px)),
      1540px
    );

  margin:
    clamp(90px,10vw,150px)
    auto 0;

  display:grid;

  grid-template-columns:
    clamp(90px,10vw,155px)
    minmax(0,1fr);

  border-top:
    4px solid
    var(--ink);

  border-bottom:
    1px solid
    rgba(23,30,39,.18);
}



/* =========================================================
   LISTEN WORD
========================================================= */

.kmusic-listen__word{

  display:flex;

  justify-content:center;

  align-items:flex-start;

  padding-top:
    clamp(35px,5vw,70px);

  border-right:
    1px solid
    rgba(23,30,39,.17);

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(49px,6vw,89px);

  line-height:.8;

  font-weight:900;

  letter-spacing:-.06em;

  color:
    rgba(23,30,39,.10);

  writing-mode:
    vertical-rl;
}



/* =========================================================
   TRACKS
========================================================= */

.kmusic-listen__tracks{

  min-width:0;
}



/* =========================================================
   TRACK
========================================================= */

.kmusic-track{

  position:relative;

  display:grid;

  grid-template-columns:
    80px
    minmax(120px,.28fr)
    minmax(300px,1fr)
    minmax(120px,.38fr);

  gap:
    clamp(20px,3vw,45px);

  align-items:center;

  min-height:
    clamp(185px,18vw,250px);

  padding:
    clamp(30px,4vw,55px)
    clamp(25px,4vw,60px);

  border-bottom:
    1px solid
    rgba(23,30,39,.17);
}


.kmusic-track:last-child{
  border-bottom:0;
}



/* =========================================================
   TRACK NUMBER
========================================================= */

.kmusic-track__number small{

  display:block;

  margin-bottom:4px;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    rgba(23,30,39,.37);
}


.kmusic-track__number strong{

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(34px,4vw,58px);

  line-height:1;

  font-style:italic;

  font-weight:400;
}



/* =========================================================
   LABEL
========================================================= */

.kmusic-track__label span{

  display:block;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(22px,2.7vw,39px);

  line-height:.95;

  font-weight:900;

  letter-spacing:-.04em;
}


.kmusic-track__label small{

  display:block;

  margin-top:8px;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    rgba(23,30,39,.42);
}



/* =========================================================
   COPY
========================================================= */

.kmusic-track__copy h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(26px,3vw,43px);

  line-height:1.6;

  font-weight:500;

  letter-spacing:-.04em;
}


.kmusic-track__copy p{

  width:
    min(100%,520px);

  margin:
    12px 0 0;

  font-size:11px;

  line-height:1.95;

  color:var(--muted);
}



/* =========================================================
   WAVE
========================================================= */

.kmusic-track__wave{

  height:66px;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:
    clamp(3px,.45vw,6px);
}


.kmusic-track__wave i{

  display:block;

  width:3px;

  height:
    var(--wave,20px);

  background:
    currentColor;
}


.kmusic-track__wave i:nth-child(1){
  --wave:12px;
}

.kmusic-track__wave i:nth-child(2){
  --wave:34px;
}

.kmusic-track__wave i:nth-child(3){
  --wave:21px;
}

.kmusic-track__wave i:nth-child(4){
  --wave:52px;
}

.kmusic-track__wave i:nth-child(5){
  --wave:28px;
}

.kmusic-track__wave i:nth-child(6){
  --wave:43px;
}

.kmusic-track__wave i:nth-child(7){
  --wave:17px;
}

.kmusic-track__wave i:nth-child(8){
  --wave:31px;
}



/* =========================================================
   INDIVIDUAL TRACK COLORS
========================================================= */

.kmusic-track--roots
.kmusic-track__number strong,
.kmusic-track--roots
.kmusic-track__wave{

  color:var(--teal);
}


.kmusic-track--body{

  background:
    var(--red);

  color:#fff;
}


.kmusic-track--body
.kmusic-track__number small,
.kmusic-track--body
.kmusic-track__label small{

  color:
    rgba(255,255,255,.46);
}


.kmusic-track--body
.kmusic-track__number strong,
.kmusic-track--body
.kmusic-track__wave{

  color:
    #F2CD85;
}


.kmusic-track--body
.kmusic-track__copy p{

  color:
    rgba(255,255,255,.67);
}


.kmusic-track--city
.kmusic-track__number strong,
.kmusic-track--city
.kmusic-track__wave{

  color:var(--blue);
}



/* =========================================================
   ENDING
========================================================= */

.kmusic-glance__ending{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin:
    clamp(95px,10vw,150px)
    auto 0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.4fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  padding-top:
    clamp(35px,5vw,60px);

  border-top:
    1px solid
    rgba(23,30,39,.17);
}


.kmusic-glance__ending
> div > span{

  display:block;

  margin-bottom:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--red);
}


.kmusic-glance__ending h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(37px,4.4vw,64px);

  line-height:1.7;

  font-weight:500;

  letter-spacing:-.045em;
}


.kmusic-glance__ending h3 strong{

  color:var(--blue);

  font-weight:500;
}


.kmusic-glance__ending > p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:var(--muted);
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  .kmusic-glance{

    padding:
      78px 0
      90px;
  }


  .kmusic-glance__intro,
  .kmusic-glance__ending{

    width:
      calc(100% - 48px);
  }



  /* =====================================================
     INTRO
  ====================================================== */

  .kmusic-glance__meta strong{
    display:none;
  }


  .kmusic-glance__heading{

    display:block;

    margin-top:42px;
  }


  .kmusic-glance h2{

    font-size:
      clamp(36px,9.4vw,46px);

    line-height:1.67;
  }


  .kmusic-glance__note{

    margin-top:31px;

    padding-left:15px;
  }



  /* =====================================================
     LISTEN
  ====================================================== */

  .kmusic-listen{

    width:100%;

    display:block;

    margin-top:70px;

    border-top-width:3px;
  }


  .kmusic-listen__word{

    display:block;

    padding:
      16px 24px;

    border-right:0;

    border-bottom:
      1px solid
      rgba(23,30,39,.17);

    font-size:50px;

    line-height:1;

    writing-mode:
      horizontal-tb;
  }



  /* =====================================================
     TRACK
  ====================================================== */

  .kmusic-track{

    display:grid;

    grid-template-columns:
      43px
      1fr;

    gap:
      12px 15px;

    min-height:0;

    padding:
      37px 24px
      42px;
  }


  .kmusic-track__number{

    grid-row:
      1 / 4;
  }


  .kmusic-track__number strong{

    font-size:31px;
  }


  .kmusic-track__label span{

    font-size:27px;
  }


  .kmusic-track__copy{

    margin-top:8px;
  }


  .kmusic-track__copy h3{

    font-size:
      clamp(25px,7vw,32px);
  }


  .kmusic-track__copy p{

    font-size:11px;

    line-height:1.95;
  }


  .kmusic-track__wave{

    grid-column:2;

    height:43px;

    justify-content:flex-start;

    margin-top:7px;
  }



  /* =====================================================
     ENDING
  ====================================================== */

  .kmusic-glance__ending{

    display:block;

    margin-top:72px;

    padding-top:31px;
  }


  .kmusic-glance__ending h3{

    font-size:
      clamp(33px,8.8vw,42px);
  }


  .kmusic-glance__ending > p{

    margin-top:31px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .kmusic-glance__intro,
  .kmusic-glance__ending{

    width:
      calc(100% - 40px);
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-276d2ed *//* =========================================================
   KENYA / MUSIC & RHYTHM
   REGIONAL SOUNDS

   PHOTO ESSAY / SOUND ROOTS
========================================================= */

.kroots{

  --ink:#15202B;
  --night:#101725;

  --paper:#ECE4D4;
  --cream:#F4EEE1;

  --red:#A7463E;
  --orange:#CF7741;

  --teal:#316C68;
  --forest:#263C34;

  --indigo:#20243E;

  --gold:#D0AB65;

  position:relative;

  width:100%;

  overflow:hidden;

  background:
    var(--paper);

  color:
    var(--ink);
}


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



/* =========================================================
   PHOTO VARIABLES
========================================================= */

.kroots{

  /*
  --roots-isukuti:url("");
  --roots-strings:url("");
  --roots-coast:url("");
  */

}


.kroots-photo{

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;
}



/* =========================================================
   REVEAL
========================================================= */

[data-kroots-reveal]{

  opacity:0;

  transform:
    translateY(25px);

  transition:
    opacity .85s ease,
    transform 1s cubic-bezier(.2,.8,.2,1);
}


[data-kroots-reveal].is-visible{

  opacity:1;

  transform:none;
}



/* =========================================================
   INTRO
========================================================= */

.kroots-intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(100px,10vw,145px);
}


.kroots-intro__meta{

  display:flex;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(21,32,43,.17);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kroots-intro__meta span{
  color:var(--red);
}


.kroots-intro__meta strong{
  color:rgba(21,32,43,.38);
}



/* =========================================================
   INTRO LAYOUT
========================================================= */

.kroots-intro__layout{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.37fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,95px);
}


.kroots-intro__layout
> div:first-child > p{

  margin:0 0 14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.2em;

  color:var(--red);
}


.kroots-intro h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(47px,5.8vw,84px);

  line-height:1.53;

  font-weight:500;

  letter-spacing:-.055em;
}


.kroots-intro h2 span,
.kroots-intro h2 strong{
  display:block;
}


.kroots-intro h2 strong{

  color:var(--teal);

  font-weight:500;
}


.kroots-intro__note{

  padding-left:19px;

  border-left:
    2px solid var(--orange);
}


.kroots-intro__note span{

  display:block;

  margin-bottom:10px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--red);
}


.kroots-intro__note p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:rgba(21,32,43,.60);
}



/* =========================================================
   ISUKUTI
========================================================= */

.kroots-isukuti{

  position:relative;

  min-height:
    clamp(720px,82vw,980px);

  overflow:hidden;

  color:#fff;

  isolation:isolate;
}



/* =========================================================
   ISUKUTI PHOTO
========================================================= */

.kroots-isukuti__media{

  position:absolute;

  inset:0;
}


.kroots-photo--isukuti{

  position:absolute;

  inset:0;

  background-image:

    var(
      --roots-isukuti,
      linear-gradient(
        120deg,
        #25262A 0%,
        #874F3E 38%,
        #C47542 67%,
        #E1B267 100%
      )
    );

  filter:
    saturate(.88)
    contrast(1.08);
}


.kroots-isukuti__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(16,18,26,.91),
      rgba(16,18,26,.57) 42%,
      rgba(16,18,26,.10)
    ),

    linear-gradient(
      180deg,
      transparent 30%,
      rgba(16,18,26,.76)
    );
}



/* =========================================================
   ISUKUTI TOP
========================================================= */

.kroots-isukuti__top{

  position:absolute;

  z-index:4;

  left:
    clamp(35px,6vw,95px);

  right:
    clamp(35px,6vw,95px);

  top:
    clamp(30px,4vw,58px);

  display:flex;

  justify-content:space-between;

  gap:30px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kroots-isukuti__top span{
  color:var(--gold);
}


.kroots-isukuti__top strong{
  color:rgba(255,255,255,.46);
}



/* =========================================================
   ISUKUTI COPY
========================================================= */

.kroots-isukuti__copy{

  position:absolute;

  z-index:5;

  left:
    clamp(35px,8vw,125px);

  top:50%;

  width:
    min(62%,680px);

  transform:
    translateY(-48%);
}


.kroots-isukuti__copy > span{

  display:block;

  margin-bottom:7px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--gold);
}


.kroots-isukuti__copy h3{

  margin:0;

  font-family:Arial,sans-serif;

  font-size:
    clamp(78px,11vw,170px);

  line-height:.78;

  font-weight:900;

  letter-spacing:-.08em;
}


.kroots-isukuti__jp{

  margin:
    clamp(37px,5vw,65px)
    0 0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(32px,3.6vw,52px);

  line-height:1.7;

  font-weight:500;
}


.kroots-isukuti__text{

  width:
    min(100%,500px);

  margin:
    22px 0 0;

  font-size:12px;

  line-height:2.05;

  color:rgba(255,255,255,.68);
}



/* =========================================================
   DRUMS
========================================================= */

.kroots-isukuti__drums{

  position:absolute;

  z-index:5;

  right:
    clamp(40px,7vw,110px);

  top:50%;

  width:
    clamp(240px,28vw,430px);

  height:
    clamp(310px,35vw,520px);

  transform:
    translateY(-50%);
}


.kroots-drum{

  position:absolute;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(255,255,255,.32);

  border-radius:50%;

  background:
    rgba(168,70,62,.18);

  backdrop-filter:blur(3px);
}


.kroots-drum span{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:rgba(255,255,255,.54);
}


.kroots-drum--large{

  width:67%;
  aspect-ratio:1;

  right:0;
  top:0;
}


.kroots-drum--medium{

  width:47%;
  aspect-ratio:1;

  left:2%;
  top:37%;
}


.kroots-drum--small{

  width:28%;
  aspect-ratio:1;

  right:16%;
  bottom:0;
}



/* =========================================================
   LISTEN
========================================================= */

.kroots-isukuti__listen{

  position:absolute;

  z-index:5;

  left:
    clamp(35px,6vw,95px);

  right:
    clamp(35px,6vw,95px);

  bottom:
    clamp(32px,5vw,65px);

  display:grid;

  grid-template-columns:
    auto auto 1fr
    auto 1fr
    auto;

  gap:12px;

  align-items:center;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;
}


.kroots-isukuti__listen small{
  color:var(--gold);
}


.kroots-isukuti__listen span{
  color:rgba(255,255,255,.46);
}


.kroots-isukuti__listen strong{
  color:#fff;
}


.kroots-isukuti__listen i{

  height:1px;

  background:rgba(255,255,255,.20);
}



/* =========================================================
   BEAT GHOST
========================================================= */

.kroots-isukuti__ghost{

  position:absolute;

  right:-3%;
  bottom:-5%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(170px,28vw,430px);

  line-height:.7;

  font-weight:900;

  letter-spacing:-.1em;

  color:rgba(255,255,255,.03);
}



/* =========================================================
   STRINGS
========================================================= */

.kroots-strings{

  display:grid;

  grid-template-columns:
    minmax(90px,.16fr)
    minmax(0,1.05fr)
    minmax(300px,.62fr);

  min-height:
    clamp(720px,73vw,920px);

  background:
    var(--cream);

  color:var(--ink);
}



/* =========================================================
   TYPE
========================================================= */

.kroots-strings__type{

  display:flex;

  flex-direction:column;

  align-items:center;

  padding:
    clamp(40px,5vw,70px)
    15px;

  border-right:
    1px solid rgba(21,32,43,.15);
}


.kroots-strings__type span{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.17em;

  color:var(--red);
}


.kroots-strings__type strong{

  margin-top:45px;

  font-family:Arial,sans-serif;

  font-size:
    clamp(58px,7vw,105px);

  line-height:.8;

  font-weight:900;

  letter-spacing:-.07em;

  writing-mode:vertical-rl;

  color:rgba(21,32,43,.10);
}



/* =========================================================
   STRING PHOTO
========================================================= */

.kroots-strings__photo-wrap{

  position:relative;

  overflow:hidden;
}


.kroots-photo--strings{

  position:absolute;

  inset:
    clamp(38px,5vw,75px);

  background-image:

    var(
      --roots-strings,
      linear-gradient(
        125deg,
        #182A32,
        #496B68 45%,
        #B59068 72%,
        #D4B978
      )
    );

  filter:
    saturate(.75);
}


.kroots-strings__label{

  position:absolute;

  left:
    clamp(55px,7vw,105px);

  bottom:
    clamp(55px,7vw,105px);

  padding:
    14px 18px;

  background:
    var(--ink);

  color:#fff;
}


.kroots-strings__label span,
.kroots-strings__label strong{

  display:block;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.17em;
}


.kroots-strings__label span{
  color:var(--gold);
}


.kroots-strings__label strong{

  margin-top:5px;

  color:rgba(255,255,255,.55);
}



/* =========================================================
   STRINGS COPY
========================================================= */

.kroots-strings__copy{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    clamp(60px,7vw,105px)
    clamp(42px,6vw,85px);
}


.kroots-strings__copy > span{

  margin-bottom:14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--teal);
}


.kroots-strings__copy h3{

  margin:0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(38px,4.2vw,61px);

  line-height:1.7;

  font-weight:500;
}


.kroots-strings__copy > p{

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:rgba(21,32,43,.61);
}



/* =========================================================
   INSTRUMENTS
========================================================= */

.kroots-instrument{

  margin-top:
    clamp(40px,5vw,65px);

  border-top:
    3px solid var(--ink);
}


.kroots-instrument > div{

  padding:
    18px 0;

  border-bottom:
    1px solid rgba(21,32,43,.16);
}


.kroots-instrument small{

  display:block;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:var(--red);
}


.kroots-instrument strong{

  display:block;

  margin-top:5px;

  font-family:Arial,sans-serif;

  font-size:
    clamp(19px,2vw,28px);

  font-weight:900;
}


.kroots-instrument span{

  display:block;

  margin-top:4px;

  font-size:9px;

  color:rgba(21,32,43,.48);
}



/* =========================================================
   INTERLUDE
========================================================= */

.kroots-interlude{

  display:flex;

  align-items:center;

  gap:15px;

  padding:
    18px
    clamp(30px,6vw,95px);

  background:
    var(--orange);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.19em;

  color:rgba(255,255,255,.64);
}


.kroots-interlude i{

  flex:1;

  height:1px;

  background:rgba(255,255,255,.28);
}


.kroots-interlude strong{
  color:#fff;
}



/* =========================================================
   MWAZINDIKA
========================================================= */

.kroots-mwazindika{

  position:relative;

  min-height:
    clamp(680px,69vw,870px);

  padding:
    clamp(90px,10vw,145px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  display:flex;

  align-items:center;

  overflow:hidden;

  background:
    var(--indigo);

  color:#fff;

  isolation:isolate;
}



/* =========================================================
   RINGS
========================================================= */

.kroots-mwazindika__rings{

  position:absolute;

  right:-6%;
  top:50%;

  width:
    min(55vw,750px);

  aspect-ratio:1;

  transform:
    translateY(-50%);

  display:grid;

  place-items:center;
}


.kroots-mwazindika__rings i{

  position:absolute;

  border:
    1px solid
    rgba(208,171,101,.15);

  border-radius:50%;

  animation:
    krootsPulse
    6s ease-in-out
    infinite alternate;
}


.kroots-mwazindika__rings i:nth-child(1){
  width:100%;
  aspect-ratio:1;
}


.kroots-mwazindika__rings i:nth-child(2){
  width:75%;
  aspect-ratio:1;
  animation-delay:-1s;
}


.kroots-mwazindika__rings i:nth-child(3){
  width:50%;
  aspect-ratio:1;
  animation-delay:-2s;
}


.kroots-mwazindika__rings i:nth-child(4){
  width:25%;
  aspect-ratio:1;
  animation-delay:-3s;
}


@keyframes krootsPulse{

  from{
    transform:scale(.96);
    opacity:.45;
  }

  to{
    transform:scale(1.03);
    opacity:1;
  }

}



/* =========================================================
   UNESCO YEAR
========================================================= */

.kroots-mwazindika__year{

  position:absolute;

  z-index:2;

  right:
    clamp(50px,8vw,125px);

  top:50%;

  transform:
    translateY(-50%);

  display:flex;

  flex-direction:column;

  align-items:center;
}


.kroots-mwazindika__year span,
.kroots-mwazindika__year small{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:rgba(255,255,255,.43);
}


.kroots-mwazindika__year strong{

  margin:
    10px 0;

  font-family:Georgia,serif;

  font-size:
    clamp(65px,9vw,135px);

  font-style:italic;

  font-weight:400;

  color:var(--gold);
}



/* =========================================================
   MWAZINDIKA COPY
========================================================= */

.kroots-mwazindika__copy{

  position:relative;

  z-index:3;

  width:
    min(63%,740px);
}


.kroots-mwazindika__copy > span{

  display:block;

  margin-bottom:9px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kroots-mwazindika__copy h3{

  margin:0;

  font-family:Arial,sans-serif;

  font-size:
    clamp(62px,8vw,120px);

  line-height:.85;

  font-weight:900;

  letter-spacing:-.065em;
}


.kroots-mwazindika__jp{

  margin:
    clamp(35px,5vw,60px)
    0 0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(31px,3.5vw,50px);

  line-height:1.7;
}


.kroots-mwazindika__text{

  width:
    min(100%,500px);

  margin:
    22px 0 0;

  font-size:12px;

  line-height:2.05;

  color:rgba(255,255,255,.65);
}



/* =========================================================
   WORDS
========================================================= */

.kroots-mwazindika__words{

  position:absolute;

  z-index:4;

  left:
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  right:
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  bottom:
    clamp(30px,5vw,62px);

  display:grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto 1fr
    auto;

  gap:12px;

  align-items:center;
}


.kroots-mwazindika__words div{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:rgba(255,255,255,.56);
}


.kroots-mwazindika__words i{

  height:1px;

  background:rgba(255,255,255,.16);
}



/* =========================================================
   COAST / MIJIKENDA
========================================================= */

.kroots-coast{

  position:relative;

  min-height:
    clamp(700px,78vw,930px);

  overflow:hidden;

  color:#fff;

  isolation:isolate;
}


.kroots-coast__media{

  position:absolute;

  inset:0;
}


.kroots-photo--coast{

  position:absolute;

  inset:0;

  background-image:

    var(
      --roots-coast,
      linear-gradient(
        130deg,
        #14241E,
        #3B5948 46%,
        #7B7960 73%,
        #B58A5F
      )
    );

  filter:
    saturate(.65)
    contrast(1.06);
}


.kroots-coast__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(9,17,14,.93),
      rgba(9,17,14,.62) 45%,
      rgba(9,17,14,.10)
    ),

    linear-gradient(
      180deg,
      transparent,
      rgba(9,17,14,.72)
    );
}



/* =========================================================
   COAST NUMBER
========================================================= */

.kroots-coast__number{

  position:absolute;

  z-index:3;

  right:
    clamp(40px,7vw,110px);

  top:
    clamp(35px,6vw,90px);

  font-family:Georgia,serif;

  font-size:
    clamp(75px,11vw,165px);

  font-style:italic;

  color:rgba(216,191,138,.70);
}



/* =========================================================
   COAST COPY
========================================================= */

.kroots-coast__copy{

  position:absolute;

  z-index:4;

  left:
    clamp(35px,8vw,125px);

  top:50%;

  width:
    min(68%,690px);

  transform:
    translateY(-50%);
}


.kroots-coast__copy > span{

  display:block;

  margin-bottom:14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kroots-coast__copy h3{

  margin:0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(45px,5.2vw,76px);

  line-height:1.67;

  font-weight:500;
}


.kroots-coast__copy > p{

  width:
    min(100%,520px);

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:rgba(255,255,255,.66);
}



/* =========================================================
   COAST WORDS
========================================================= */

.kroots-coast__words{

  display:grid;

  grid-template-columns:
    auto 1fr auto 1fr auto;

  align-items:center;

  gap:10px;

  margin-top:
    clamp(40px,5vw,65px);

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:rgba(255,255,255,.44);
}


.kroots-coast__words i{

  height:1px;

  background:rgba(255,255,255,.17);
}


.kroots-coast__words strong{
  color:var(--gold);
}



/* =========================================================
   VOICE
========================================================= */

.kroots-coast__ghost{

  position:absolute;

  right:-3%;
  bottom:-5%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(160px,26vw,400px);

  line-height:.72;

  font-weight:900;

  letter-spacing:-.1em;

  color:rgba(255,255,255,.025);
}



/* =========================================================
   END
========================================================= */

.kroots-end{

  padding:
    clamp(100px,11vw,165px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--paper);

  color:var(--ink);
}


.kroots-end__label{

  display:flex;

  justify-content:space-between;

  gap:25px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(21,32,43,.16);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kroots-end__label span{
  color:var(--red);
}


.kroots-end__label strong{
  color:rgba(21,32,43,.38);
}



/* =========================================================
   END MESSAGE
========================================================= */

.kroots-end__message{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.38fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,95px);
}


.kroots-end__message h3{

  margin:0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(42px,5vw,72px);

  line-height:1.67;

  font-weight:500;
}


.kroots-end__message h3 span,
.kroots-end__message h3 strong{

  display:block;
}


.kroots-end__message h3 strong{

  color:var(--red);

  font-weight:500;
}


.kroots-end__message > p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:rgba(21,32,43,.61);
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  /* INTRO */

  .kroots-intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0
      80px;
  }


  .kroots-intro__meta strong{
    display:none;
  }


  .kroots-intro__layout{

    display:block;

    margin-top:42px;
  }


  .kroots-intro h2{

    font-size:
      clamp(36px,9.4vw,46px);

    line-height:1.67;
  }


  .kroots-intro__note{

    margin-top:31px;

    padding-left:15px;
  }



  /* =====================================================
     ISUKUTI
  ====================================================== */

  .kroots-isukuti{

    min-height:
      min(170vw,790px);
  }


  .kroots-isukuti__top{

    left:24px;
    right:24px;
    top:24px;
  }


  .kroots-isukuti__copy{

    left:24px;
    right:24px;

    top:auto;
    bottom:93px;

    width:auto;

    transform:none;
  }


  .kroots-isukuti__copy h3{

    font-size:
      clamp(64px,19vw,86px);
  }


  .kroots-isukuti__jp{

    margin-top:28px;

    font-size:
      clamp(28px,7.8vw,36px);
  }


  .kroots-isukuti__text{

    font-size:11px;

    line-height:1.95;
  }


  .kroots-isukuti__drums{

    top:93px;

    right:-26px;

    width:190px;
    height:240px;

    transform:none;

    opacity:.72;
  }


  .kroots-isukuti__listen{

    left:24px;
    right:24px;

    bottom:28px;

    grid-template-columns:
      auto 1fr auto;

    font-size:4px;
  }


  .kroots-isukuti__listen small,
  .kroots-isukuti__listen i:nth-of-type(2),
  .kroots-isukuti__listen span:nth-of-type(2){

    display:none;
  }



  /* =====================================================
     STRINGS
  ====================================================== */

  .kroots-strings{

    display:block;

    min-height:0;
  }


  .kroots-strings__type{

    display:flex;

    flex-direction:row;

    justify-content:space-between;

    padding:
      18px 24px;

    border-right:0;

    border-bottom:
      1px solid rgba(21,32,43,.15);
  }


  .kroots-strings__type strong{

    margin:0;

    font-size:34px;

    writing-mode:horizontal-tb;
  }


  .kroots-strings__photo-wrap{

    height:
      min(110vw,520px);
  }


  .kroots-photo--strings{

    inset:24px;
  }


  .kroots-strings__label{

    left:39px;
    bottom:39px;
  }


  .kroots-strings__copy{

    padding:
      62px 24px
      78px;
  }


  .kroots-strings__copy h3{

    font-size:
      clamp(34px,9vw,43px);
  }



  /* INTERLUDE */

  .kroots-interlude{

    padding:
      15px 24px;
  }


  .kroots-interlude i{
    min-width:12px;
  }



  /* =====================================================
     MWAZINDIKA
  ====================================================== */

  .kroots-mwazindika{

    min-height:
      min(158vw,735px);

    padding:
      75px 24px
      95px;

    align-items:flex-end;
  }


  .kroots-mwazindika__copy{

    width:100%;
  }


  .kroots-mwazindika__copy h3{

    font-size:
      clamp(51px,14vw,67px);
  }


  .kroots-mwazindika__jp{

    font-size:
      clamp(28px,7.7vw,36px);
  }


  .kroots-mwazindika__text{

    font-size:11px;
  }


  .kroots-mwazindika__year{

    top:55px;
    right:24px;

    transform:none;
  }


  .kroots-mwazindika__year strong{

    font-size:56px;
  }


  .kroots-mwazindika__rings{

    right:-42%;

    top:25%;

    width:100vw;
  }


  .kroots-mwazindika__words{

    left:24px;
    right:24px;

    bottom:25px;

    font-size:4px;
  }



  /* =====================================================
     COAST
  ====================================================== */

  .kroots-coast{

    min-height:
      min(156vw,725px);
  }


  .kroots-coast__number{

    right:24px;
    top:25px;

    font-size:75px;
  }


  .kroots-coast__copy{

    left:24px;
    right:24px;

    top:auto;
    bottom:43px;

    width:auto;

    transform:none;
  }


  .kroots-coast__copy h3{

    font-size:
      clamp(35px,9.2vw,45px);
  }


  .kroots-coast__copy > p{

    font-size:11px;

    line-height:1.95;
  }


  .kroots-coast__words{

    font-size:4px;
  }



  /* =====================================================
     END
  ====================================================== */

  .kroots-end{

    padding:
      78px 24px
      88px;
  }


  .kroots-end__label strong{
    display:none;
  }


  .kroots-end__message{

    display:block;

    margin-top:45px;
  }


  .kroots-end__message h3{

    font-size:
      clamp(34px,9vw,44px);
  }


  .kroots-end__message > p{

    margin-top:31px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .kroots-intro{

    width:
      calc(100% - 40px);
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  [data-kroots-reveal]{

    opacity:1;

    transform:none;

    transition:none;
  }


  .kroots-mwazindika__rings i{

    animation:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-59c3b22 *//* =========================================================
   KENYA / MUSIC & RHYTHM
   INSTRUMENT LAB

   HIT / PLUCK / BOW
========================================================= */

.kinst{

  --night:#101722;
  --black:#101314;

  --red:#A8463F;
  --orange:#D27A43;

  --blue:#234B68;
  --electric:#537F94;

  --teal:#3E746D;

  --cream:#EEE6D7;
  --paper:#F3ECDD;

  --gold:#D1AE68;

  position:relative;

  width:100%;

  overflow:hidden;

  background:
    var(--night);

  color:#fff;
}


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



/* =========================================================
   PHOTO VARIABLES
========================================================= */

.kinst{

  /*
  --inst-isukuti:url("");
  --inst-nyatiti:url("");
  --inst-orutu:url("");
  */

}



/* =========================================================
   REVEAL
========================================================= */

[data-kinst-reveal]{

  opacity:0;

  transform:
    translateY(25px);

  transition:
    opacity .8s ease,
    transform 1s
    cubic-bezier(.2,.8,.2,1);
}


[data-kinst-reveal].is-visible{

  opacity:1;

  transform:none;
}



/* =========================================================
   INTRO
========================================================= */

.kinst-intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(100px,10vw,150px);
}


.kinst-intro__meta{

  display:flex;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    rgba(255,255,255,.14);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kinst-intro__meta span{
  color:var(--gold);
}


.kinst-intro__meta strong{
  color:rgba(255,255,255,.38);
}



/* =========================================================
   INTRO LAYOUT
========================================================= */

.kinst-intro__layout{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.37fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,95px);
}


.kinst-intro__layout
> div:first-child > p{

  margin:0 0 14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.20em;

  color:var(--orange);
}


.kinst-intro h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(48px,5.8vw,84px);

  line-height:1.55;

  font-weight:500;

  letter-spacing:-.055em;
}


.kinst-intro h2 span,
.kinst-intro h2 strong{
  display:block;
}


.kinst-intro h2 strong{

  color:var(--gold);

  font-weight:500;
}


.kinst-intro__note{

  padding-left:19px;

  border-left:
    2px solid var(--red);
}


.kinst-intro__note span{

  display:block;

  margin-bottom:10px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kinst-intro__note p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(255,255,255,.61);
}



/* =========================================================
   ISUKUTI
========================================================= */

.kinst-isukuti{

  display:grid;

  grid-template-columns:
    minmax(300px,.48fr)
    minmax(0,1fr);

  gap:
    clamp(45px,8vw,120px);

  align-items:center;

  min-height:
    clamp(680px,72vw,900px);

  padding:
    clamp(80px,9vw,135px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--red);

  color:#fff;
}



/* =========================================================
   ISUKUTI COPY
========================================================= */

.kinst-isukuti__copy > span{

  display:block;

  margin-bottom:8px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:#F1D494;
}


.kinst-isukuti__copy h3{

  margin:0;

  font-family:Arial,sans-serif;

  font-size:
    clamp(65px,8vw,122px);

  line-height:.8;

  font-weight:900;

  letter-spacing:-.075em;
}


.kinst-isukuti__jp{

  margin:
    clamp(38px,5vw,65px)
    0 0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(29px,3.4vw,48px);

  line-height:1.75;
}


.kinst-isukuti__text{

  width:min(100%,490px);

  margin:21px 0 0;

  font-size:12px;

  line-height:2.05;

  color:
    rgba(255,255,255,.69);
}



/* =========================================================
   ISUKUTI FACTS
========================================================= */

.kinst-isukuti__facts{

  display:grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto;

  gap:10px;

  align-items:center;

  margin-top:
    clamp(38px,5vw,60px);

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;
}


.kinst-isukuti__facts span{
  color:rgba(255,255,255,.47);
}


.kinst-isukuti__facts strong{
  color:#F3D699;
}


.kinst-isukuti__facts i{

  height:1px;

  background:
    rgba(255,255,255,.22);
}



/* =========================================================
   ISUKUTI VISUAL
========================================================= */

.kinst-isukuti__visual{

  position:relative;

  min-height:
    clamp(500px,50vw,680px);

  overflow:hidden;

  background:
    #6C2C2D;

  isolation:isolate;
}


.kinst-isukuti__photo{

  position:absolute;

  inset:0;

  background-image:

    var(
      --inst-isukuti,
      linear-gradient(
        125deg,
        #5D2C2C,
        #A9533C 45%,
        #D89852 72%,
        #372527
      )
    );

  background-size:cover;

  background-position:center;

  filter:
    saturate(.86)
    contrast(1.08)
    brightness(.78);
}



/* =========================================================
   DRUMS
========================================================= */

.kinst-isukuti__drums{

  position:absolute;

  z-index:3;

  inset:8%;

  pointer-events:none;
}


.kinst-drum{

  position:absolute;

  display:grid;

  place-items:center;

  border:
    2px solid
    rgba(255,231,183,.66);

  border-radius:50%;

  background:
    rgba(168,70,63,.24);

  backdrop-filter:
    blur(2px);

  transition:
    transform .35s ease;
}


.kinst-drum span{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.65);
}


.kinst-drum--01{

  width:53%;
  aspect-ratio:1;

  left:7%;
  top:7%;
}


.kinst-drum--02{

  width:38%;
  aspect-ratio:1;

  right:7%;
  top:32%;
}


.kinst-drum--03{

  width:25%;
  aspect-ratio:1;

  left:33%;
  bottom:4%;
}



/* =========================================================
   PULSE BUTTON
========================================================= */

.kinst-isukuti__pulse{

  position:absolute;

  z-index:6;

  right:25px;
  bottom:25px;

  width:92px;
  aspect-ratio:1;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  border:
    1px solid
    rgba(255,255,255,.43);

  border-radius:50%;

  background:
    rgba(16,23,34,.60);

  color:#fff;

  cursor:pointer;

  appearance:none;

  -webkit-appearance:none;

  transition:
    transform .25s ease,
    background .25s ease;
}


.kinst-isukuti__pulse:hover{

  transform:scale(1.07);

  background:
    rgba(16,23,34,.80);
}


.kinst-isukuti__pulse span{

  font-family:Georgia,serif;

  font-size:10px;

  font-style:italic;

  color:#F2D28C;
}


.kinst-isukuti__pulse strong{

  margin-top:4px;

  font-family:Arial,sans-serif;

  font-size:6px;

  line-height:1.25;

  letter-spacing:.14em;
}



/* =========================================================
   PULSE RING
========================================================= */

.kinst-isukuti__ring{

  position:absolute;

  z-index:5;

  right:25px;
  bottom:25px;

  width:92px;
  aspect-ratio:1;

  border:
    2px solid
    #F2D28C;

  border-radius:50%;

  opacity:0;

  pointer-events:none;
}


.kinst-isukuti.is-hit
.kinst-isukuti__ring{

  animation:
    kinstHit .65s ease-out;
}


.kinst-isukuti.is-hit
.kinst-drum--01{

  transform:scale(1.05);
}


.kinst-isukuti.is-hit
.kinst-drum--02{

  transform:scale(.94);
}


.kinst-isukuti.is-hit
.kinst-drum--03{

  transform:scale(1.09);
}


@keyframes kinstHit{

  0%{
    transform:scale(.9);
    opacity:.9;
  }

  100%{
    transform:scale(2.3);
    opacity:0;
  }

}



/* =========================================================
   TRANSITION
========================================================= */

.kinst-transition{

  display:flex;

  align-items:center;

  gap:16px;

  padding:
    17px
    clamp(30px,6vw,95px);

  background:
    var(--cream);

  color:
    var(--night);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.2em;
}


.kinst-transition i{

  flex:1;

  height:1px;

  background:
    rgba(16,23,34,.18);
}


.kinst-transition strong{
  color:var(--red);
}



/* =========================================================
   NYATITI
========================================================= */

.kinst-nyatiti{

  display:grid;

  grid-template-columns:
    minmax(80px,.15fr)
    minmax(0,1.15fr)
    minmax(300px,.57fr);

  min-height:
    clamp(700px,72vw,900px);

  background:
    var(--paper);

  color:
    var(--night);
}



/* =========================================================
   NYATITI TITLE
========================================================= */

.kinst-nyatiti__title{

  padding:
    clamp(40px,5vw,70px)
    15px;

  display:flex;

  flex-direction:column;

  align-items:center;

  border-right:
    1px solid
    rgba(16,23,34,.14);
}


.kinst-nyatiti__title span,
.kinst-nyatiti__title small{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:var(--red);
}


.kinst-nyatiti__title strong{

  margin-top:45px;

  font-family:Arial,sans-serif;

  font-size:
    clamp(53px,7vw,102px);

  line-height:.8;

  font-weight:900;

  letter-spacing:-.07em;

  writing-mode:vertical-rl;

  color:
    rgba(16,23,34,.13);
}


.kinst-nyatiti__title small{

  margin-top:auto;

  color:
    rgba(16,23,34,.40);
}



/* =========================================================
   NYATITI MEDIA
========================================================= */

.kinst-nyatiti__media{

  position:relative;

  overflow:hidden;

  background:
    var(--blue);
}


.kinst-nyatiti__photo{

  position:absolute;

  inset:
    clamp(35px,5vw,72px);

  background-image:

    var(
      --inst-nyatiti,
      linear-gradient(
        125deg,
        #153449,
        #416D78 42%,
        #C29A69 72%,
        #E3C889
      )
    );

  background-size:cover;

  background-position:center;

  filter:
    saturate(.74);
}



/* =========================================================
   STRINGS
========================================================= */

.kinst-nyatiti__strings{

  position:absolute;

  z-index:3;

  inset:7% 11%;

  display:flex;

  justify-content:space-evenly;

  transform:
    rotate(-16deg);

  transform-origin:center;
}


.kinst-nyatiti__strings i{

  width:1px;

  height:130%;

  background:
    rgba(247,222,165,.64);

  transform-origin:center;

  transition:
    transform .25s ease;
}


.kinst-nyatiti__media:hover
.kinst-nyatiti__strings i:nth-child(odd){

  transform:
    translateX(2px);
}


.kinst-nyatiti__media:hover
.kinst-nyatiti__strings i:nth-child(even){

  transform:
    translateX(-2px);
}



/* =========================================================
   PLUCK
========================================================= */

.kinst-nyatiti__finger{

  position:absolute;

  z-index:4;

  right:
    clamp(30px,4vw,60px);

  bottom:
    clamp(30px,5vw,70px);

  width:
    clamp(80px,8vw,115px);

  aspect-ratio:1;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.35);

  border-radius:50%;

  font-family:Georgia,serif;

  font-size:
    clamp(13px,1.4vw,20px);

  font-style:italic;

  color:#F1D28E;

  background:
    rgba(12,25,35,.25);
}



/* =========================================================
   NYATITI COPY
========================================================= */

.kinst-nyatiti__copy{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    clamp(60px,7vw,105px)
    clamp(42px,6vw,85px);
}


.kinst-nyatiti__copy > span{

  margin-bottom:14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--blue);
}


.kinst-nyatiti__copy h3{

  margin:0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(38px,4.2vw,61px);

  line-height:1.72;

  font-weight:500;
}


.kinst-nyatiti__copy > p{

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(16,23,34,.60);
}


.kinst-nyatiti__listen{

  margin-top:
    clamp(40px,5vw,65px);

  padding-top:17px;

  border-top:
    3px solid
    var(--night);
}


.kinst-nyatiti__listen small{

  display:block;

  margin-bottom:7px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:var(--red);
}


.kinst-nyatiti__listen strong{

  font-family:Arial,sans-serif;

  font-size:
    clamp(13px,1.5vw,20px);

  letter-spacing:.07em;
}



/* =========================================================
   ORUTU
========================================================= */

.kinst-orutu{

  position:relative;

  min-height:
    clamp(700px,78vw,930px);

  overflow:hidden;

  background:
    var(--black);

  color:#fff;

  isolation:isolate;
}



/* =========================================================
   ORUTU MEDIA
========================================================= */

.kinst-orutu__media{

  position:absolute;

  inset:0;
}


.kinst-orutu__photo{

  position:absolute;

  inset:0;

  background-image:

    var(
      --inst-orutu,
      linear-gradient(
        120deg,
        #10171C,
        #254E50 43%,
        #6F624F 67%,
        #B07D53
      )
    );

  background-size:cover;

  background-position:center;

  filter:
    saturate(.67)
    contrast(1.08);
}


.kinst-orutu__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(8,12,14,.94),
      rgba(8,12,14,.66) 43%,
      rgba(8,12,14,.09)
    ),

    linear-gradient(
      180deg,
      transparent,
      rgba(8,12,14,.73)
    );
}



/* =========================================================
   STRING
========================================================= */

.kinst-orutu__string{

  position:absolute;

  z-index:3;

  left:10%;
  right:8%;

  top:53%;

  height:1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #E0C486 12%,
      #E0C486 88%,
      transparent
    );
}



/* =========================================================
   BOW
========================================================= */

.kinst-orutu__bow{

  position:absolute;

  z-index:4;

  left:41%;

  top:35%;

  width:40%;

  height:2px;

  transform:
    rotate(-24deg);

  transform-origin:left center;

  transition:
    transform .8s
    cubic-bezier(.2,.8,.2,1);
}


.kinst-orutu__bow i{

  display:block;

  width:100%;
  height:100%;

  background:
    var(--orange);

  box-shadow:
    0 0 15px
    rgba(210,122,67,.32);
}


.kinst-orutu:hover
.kinst-orutu__bow{

  transform:
    rotate(-8deg)
    translateX(18px);
}



/* =========================================================
   ORUTU COPY
========================================================= */

.kinst-orutu__copy{

  position:absolute;

  z-index:5;

  left:
    clamp(35px,8vw,125px);

  top:50%;

  width:
    min(63%,670px);

  transform:
    translateY(-50%);
}


.kinst-orutu__meta{

  display:flex;

  gap:15px;

  align-items:center;

  margin-bottom:9px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;
}


.kinst-orutu__meta span{
  color:var(--gold);
}


.kinst-orutu__meta strong{
  color:rgba(255,255,255,.42);
}


.kinst-orutu__copy h3{

  margin:0;

  font-family:Arial,sans-serif;

  font-size:
    clamp(85px,12vw,180px);

  line-height:.77;

  font-weight:900;

  letter-spacing:-.085em;
}


.kinst-orutu__jp{

  margin:
    clamp(35px,5vw,60px)
    0 0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(31px,3.5vw,50px);

  line-height:1.7;
}


.kinst-orutu__text{

  width:min(100%,500px);

  margin:21px 0 0;

  font-size:12px;

  line-height:2.05;

  color:
    rgba(255,255,255,.65);
}



/* =========================================================
   ORUTU MOTION
========================================================= */

.kinst-orutu__motion{

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:12px;

  align-items:center;

  margin-top:
    clamp(38px,5vw,60px);

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.43);
}


.kinst-orutu__motion i{

  height:1px;

  background:
    var(--orange);
}


.kinst-orutu__motion strong{
  color:var(--gold);
}



/* =========================================================
   ORUTU GHOST
========================================================= */

.kinst-orutu__ghost{

  position:absolute;

  z-index:2;

  right:-3%;
  bottom:-5%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(150px,24vw,370px);

  line-height:.72;

  font-weight:900;

  letter-spacing:-.1em;

  color:
    rgba(255,255,255,.025);
}



/* =========================================================
   END
========================================================= */

.kinst-end{

  padding:
    clamp(100px,11vw,165px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--cream);

  color:
    var(--night);
}


.kinst-end__label{

  display:flex;

  justify-content:space-between;

  gap:25px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    rgba(16,23,34,.16);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kinst-end__label span{
  color:var(--red);
}


.kinst-end__label strong{
  color:rgba(16,23,34,.38);
}


.kinst-end__main{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.38fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,95px);
}


.kinst-end__main h3{

  margin:0;

  font-family:"Yu Mincho",serif;

  font-size:
    clamp(42px,5vw,72px);

  line-height:1.67;

  font-weight:500;
}


.kinst-end__main h3 span,
.kinst-end__main h3 strong{
  display:block;
}


.kinst-end__main h3 strong{

  color:var(--blue);

  font-weight:500;
}


.kinst-end__main > p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(16,23,34,.61);
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  /* INTRO */

  .kinst-intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0
      82px;
  }


  .kinst-intro__meta strong{
    display:none;
  }


  .kinst-intro__layout{

    display:block;

    margin-top:42px;
  }


  .kinst-intro h2{

    font-size:
      clamp(36px,9.4vw,46px);

    line-height:1.68;
  }


  .kinst-intro__note{

    margin-top:31px;

    padding-left:15px;
  }



  /* =====================================================
     ISUKUTI
  ====================================================== */

  .kinst-isukuti{

    display:flex;

    flex-direction:column-reverse;

    gap:47px;

    min-height:0;

    padding:
      55px 24px
      76px;
  }


  .kinst-isukuti__visual{

    width:100%;

    min-height:
      min(108vw,500px);
  }


  .kinst-isukuti__copy h3{

    font-size:
      clamp(62px,18vw,84px);
  }


  .kinst-isukuti__jp{

    font-size:
      clamp(28px,7.7vw,36px);
  }


  .kinst-isukuti__text{

    font-size:11px;

    line-height:1.95;
  }


  .kinst-isukuti__pulse{

    right:17px;
    bottom:17px;

    width:78px;
  }


  .kinst-isukuti__ring{

    right:17px;
    bottom:17px;

    width:78px;
  }



  /* TRANSITION */

  .kinst-transition{

    padding:
      15px 24px;

    font-size:5px;
  }



  /* =====================================================
     NYATITI
  ====================================================== */

  .kinst-nyatiti{

    display:block;

    min-height:0;
  }


  .kinst-nyatiti__title{

    display:flex;

    flex-direction:row;

    justify-content:space-between;

    padding:
      18px 24px;

    border-right:0;

    border-bottom:
      1px solid
      rgba(16,23,34,.14);
  }


  .kinst-nyatiti__title strong{

    margin:0;

    font-size:31px;

    writing-mode:
      horizontal-tb;
  }


  .kinst-nyatiti__media{

    height:
      min(112vw,520px);
  }


  .kinst-nyatiti__photo{

    inset:24px;
  }


  .kinst-nyatiti__copy{

    padding:
      61px 24px
      76px;
  }


  .kinst-nyatiti__copy h3{

    font-size:
      clamp(34px,9vw,43px);
  }



  /* =====================================================
     ORUTU
  ====================================================== */

  .kinst-orutu{

    min-height:
      min(160vw,740px);
  }


  .kinst-orutu__copy{

    left:24px;
    right:24px;

    top:auto;
    bottom:46px;

    width:auto;

    transform:none;
  }


  .kinst-orutu__copy h3{

    font-size:
      clamp(68px,20vw,90px);
  }


  .kinst-orutu__jp{

    font-size:
      clamp(28px,7.7vw,36px);
  }


  .kinst-orutu__text{

    font-size:11px;

    line-height:1.95;
  }


  .kinst-orutu__bow{

    left:28%;

    top:26%;

    width:60%;
  }



  /* =====================================================
     END
  ====================================================== */

  .kinst-end{

    padding:
      78px 24px
      88px;
  }


  .kinst-end__label strong{
    display:none;
  }


  .kinst-end__main{

    display:block;

    margin-top:45px;
  }


  .kinst-end__main h3{

    font-size:
      clamp(34px,9vw,44px);
  }


  .kinst-end__main > p{

    margin-top:31px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  [data-kinst-reveal]{

    opacity:1;

    transform:none;

    transition:none;
  }


  .kinst-isukuti.is-hit
  .kinst-isukuti__ring{

    animation:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ee3e5c2 *//* =========================================================
   MUSIC JOURNEY SYSTEM
========================================================= */

.kmusic-journey{

  --journey-accent:#D37943;
  --journey-bg:#101722;
  --journey-text:#F2E9D7;

  position:relative;

  z-index:999;
}


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



/* =========================================================
   DESKTOP RAIL
========================================================= */

.kmusic-journey__rail{

  position:fixed;

  z-index:999;

  left:18px;

  top:50%;

  width:48px;

  height:
    min(72vh,620px);

  transform:
    translateY(-50%);

  display:flex;

  flex-direction:column;

  align-items:center;

  padding:
    17px 0;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:30px;

  background:
    rgba(11,18,27,.76);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 12px 40px
    rgba(0,0,0,.14);

  color:#fff;

  transition:
    border-color .45s ease,
    background .45s ease;
}



/* =========================================================
   BRAND
========================================================= */

.kmusic-journey__brand{

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:900;

  letter-spacing:.19em;

  writing-mode:
    vertical-rl;

  color:
    rgba(255,255,255,.40);
}



/* =========================================================
   STATUS
========================================================= */

.kmusic-journey__status{

  flex:1;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:10px;
}


.kmusic-journey__track{

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    var(--journey-accent);

  writing-mode:
    vertical-rl;

  transition:
    color .45s ease;
}


.kmusic-journey__name{

  max-height:120px;

  overflow:hidden;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  line-height:1;

  font-weight:900;

  letter-spacing:.12em;

  writing-mode:
    vertical-rl;

  color:#fff;
}



/* =========================================================
   PROGRESS
========================================================= */

.kmusic-journey__progress{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:10px;
}


.kmusic-journey__line{

  position:relative;

  width:2px;

  height:90px;

  overflow:hidden;

  border-radius:2px;

  background:
    rgba(255,255,255,.14);
}


.kmusic-journey__fill{

  position:absolute;

  left:0;
  right:0;

  bottom:0;

  height:
    var(--journey-progress,0%);

  background:
    var(--journey-accent);

  transition:
    height .15s linear,
    background .45s ease;
}


.kmusic-journey__percent{

  font-family:
    Georgia,
    serif;

  font-size:8px;

  font-style:italic;

  color:
    rgba(255,255,255,.48);
}



/* =========================================================
   SIDE
========================================================= */

.kmusic-journey__side{

  margin-top:15px;

  font-family:
    Arial,
    sans-serif;

  font-size:4px;

  line-height:1;

  font-weight:800;

  letter-spacing:.16em;

  writing-mode:
    vertical-rl;

  color:
    rgba(255,255,255,.25);
}



/* =========================================================
   MOBILE BAR
========================================================= */

.kmusic-journey__mobile{
  display:none;
}



/* =========================================================
   SECTION CHANGE FLASH
========================================================= */

.kmusic-journey::before{

  content:"";

  position:fixed;

  z-index:997;

  inset:0;

  pointer-events:none;

  background:
    var(--journey-accent);

  opacity:0;

  mix-blend-mode:soft-light;
}


.kmusic-journey.is-change::before{

  animation:
    kmusicJourneyFlash
    .55s ease;
}


@keyframes kmusicJourneyFlash{

  0%{
    opacity:0;
  }

  35%{
    opacity:.085;
  }

  100%{
    opacity:0;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  .kmusic-journey__rail{
    display:none;
  }


  .kmusic-journey__mobile{

    position:fixed;

    z-index:999;

    left:50%;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      );

    width:
      min(
        calc(100% - 32px),
        410px
      );

    height:48px;

    transform:
      translateX(-50%);

    display:grid;

    grid-template-columns:
      32px
      auto
      1fr;

    gap:10px;

    align-items:center;

    padding:
      7px 13px
      7px 8px;

    border:
      1px solid
      rgba(255,255,255,.13);

    border-radius:28px;

    background:
      rgba(9,15,23,.84);

    backdrop-filter:
      blur(13px);

    -webkit-backdrop-filter:
      blur(13px);

    box-shadow:
      0 10px 30px
      rgba(0,0,0,.18);

    color:#fff;
  }



  /* DISC */

  .kmusic-journey__mobile-disc{

    position:relative;

    width:32px;

    aspect-ratio:1;

    border:
      1px solid
      rgba(255,255,255,.25);

    border-radius:50%;

    animation:
      kmusicJourneyDisc
      7s linear infinite;
  }


  .kmusic-journey__mobile-disc::before{

    content:"";

    position:absolute;

    inset:5px;

    border:
      1px solid
      rgba(255,255,255,.12);

    border-radius:50%;
  }


  .kmusic-journey__mobile-disc i{

    position:absolute;

    left:50%;
    top:50%;

    width:7px;
    aspect-ratio:1;

    transform:
      translate(-50%,-50%);

    border-radius:50%;

    background:
      var(--journey-accent);

    transition:
      background .45s ease;
  }


  @keyframes kmusicJourneyDisc{

    to{
      transform:rotate(360deg);
    }

  }



  /* COPY */

  .kmusic-journey__mobile-copy{

    min-width:73px;
  }


  .kmusic-journey__mobile-copy span{

    display:block;

    font-family:
      Arial,
      sans-serif;

    font-size:4px;

    font-weight:800;

    letter-spacing:.16em;

    color:
      var(--journey-accent);
  }


  .kmusic-journey__mobile-copy strong{

    display:block;

    max-width:105px;

    margin-top:3px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-family:
      Arial,
      sans-serif;

    font-size:8px;

    font-weight:900;

    letter-spacing:.06em;
  }



  /* MOBILE PROGRESS */

  .kmusic-journey__mobile-line{

    position:relative;

    height:2px;

    overflow:hidden;

    background:
      rgba(255,255,255,.14);
  }


  .kmusic-journey__mobile-line i{

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:
      var(--journey-progress,0%);

    background:
      var(--journey-accent);

    transition:
      width .15s linear,
      background .45s ease;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .kmusic-journey::before,
  .kmusic-journey__mobile-disc{

    animation:none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-232e13c *//* =========================================================
   KENYA / MUSIC & RHYTHM
   DANCE

   BODY / MOTION / CINEMATIC REVEAL
========================================================= */

.kdance{

  --black:#0A0A10;
  --night:#11101A;

  --magenta:#B23C61;
  --red:#B94D55;

  --violet:#493D76;
  --electric:#7A78C8;

  --white:#F3EFE8;
  --silver:#C9C6CD;

  --acid:#E8C66E;

  position:relative;

  width:100%;

  overflow:hidden;

  background:
    var(--black);

  color:#fff;
}


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



/* =========================================================
   PHOTO VARIABLES
========================================================= */

.kdance{

  /*
  --dance-beat:url("");
  --dance-body:url("");
  --dance-together:url("");
  */

}


.kdance-photo{

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}



/* =========================================================
   INTRO
========================================================= */

.kdance-intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(110px,12vw,180px)
    0
    clamp(105px,11vw,165px);
}



/* =========================================================
   INTRO META
========================================================= */

.kdance-intro__meta{

  display:flex;

  justify-content:space-between;

  gap:25px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    rgba(255,255,255,.15);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kdance-intro__meta span{
  color:#E27A99;
}


.kdance-intro__meta strong{
  color:rgba(255,255,255,.38);
}



/* =========================================================
   INTRO MAIN
========================================================= */

.kdance-intro__main{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.38fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,95px);
}


.kdance-intro__main
> div:first-child > p{

  margin:0 0 14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.2em;

  color:#E27A99;
}


.kdance-intro h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(48px,5.9vw,85px);

  line-height:1.55;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.kdance-intro h2 span,
.kdance-intro h2 strong{

  display:block;
}


.kdance-intro h2 strong{

  color:
    #C28AC7;

  font-weight:500;
}



/* =========================================================
   NOTE
========================================================= */

.kdance-intro__note{

  padding-left:19px;

  border-left:
    2px solid
    var(--magenta);
}


.kdance-intro__note span{

  display:block;

  margin-bottom:10px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:#E27A99;
}


.kdance-intro__note p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(255,255,255,.61);
}



/* =========================================================
   COMMON SCENE
========================================================= */

.kdance-scene{

  position:relative;

  width:100%;

  overflow:hidden;

  isolation:isolate;

  --dance-clip:24%;
  --dance-scale:1.14;
  --dance-shift:18px;
}



/* =========================================================
   SCENE 01 / BEAT
========================================================= */

.kdance-scene--beat{

  min-height:
    clamp(720px,82vw,980px);

  background:
    var(--magenta);
}



/* =========================================================
   MEDIA
========================================================= */

.kdance-scene__media{

  position:absolute;

  inset:0;

  overflow:hidden;

  clip-path:
    inset(
      0
      var(--dance-clip)
      0
      var(--dance-clip)
    );

  transition:
    clip-path .08s linear;
}


.kdance-photo--beat{

  position:absolute;

  inset:-3%;

  background-image:

    var(
      --dance-beat,
      linear-gradient(
        125deg,
        #16131C 0%,
        #61374F 38%,
        #AD4A62 63%,
        #D58A79 100%
      )
    );

  filter:
    saturate(.9)
    contrast(1.1)
    brightness(.78);

  transform:
    scale(
      var(--dance-scale)
    )
    translateY(
      var(--dance-shift)
    );

  transition:
    transform .08s linear;
}


.kdance-scene__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(8,7,13,.92),
      rgba(8,7,13,.47) 45%,
      rgba(8,7,13,.08)
    ),

    linear-gradient(
      180deg,
      rgba(8,7,13,.08),
      rgba(8,7,13,.72)
    );
}



/* =========================================================
   NUMBER
========================================================= */

.kdance-scene__number{

  position:absolute;

  z-index:5;

  right:
    clamp(35px,6vw,95px);

  top:
    clamp(30px,5vw,70px);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(80px,12vw,180px);

  line-height:.8;

  font-style:italic;

  color:
    rgba(255,255,255,.24);
}



/* =========================================================
   BEAT WORD
========================================================= */

.kdance-scene__word{

  position:absolute;

  z-index:3;

  right:-4%;
  bottom:-5%;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(180px,30vw,460px);

  line-height:.68;

  font-weight:900;

  letter-spacing:-.11em;

  color:
    rgba(255,255,255,.055);
}



/* =========================================================
   SCENE COPY
========================================================= */

.kdance-scene__copy{

  position:absolute;

  z-index:7;

  left:
    clamp(35px,8vw,125px);

  top:50%;

  width:
    min(65%,650px);

  transform:
    translateY(-50%);
}


.kdance-scene__copy > span{

  display:block;

  margin-bottom:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--acid);
}


.kdance-scene__copy h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(46px,5.4vw,79px);

  line-height:1.65;

  font-weight:500;

  letter-spacing:-.05em;
}


.kdance-scene__copy p{

  width:
    min(100%,480px);

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(255,255,255,.68);
}



/* =========================================================
   PULSE
========================================================= */

.kdance-scene__pulse{

  position:absolute;

  z-index:6;

  right:
    clamp(45px,8vw,125px);

  top:50%;

  width:
    clamp(190px,22vw,320px);

  aspect-ratio:1;

  transform:
    translateY(-50%);

  display:grid;

  place-items:center;

  pointer-events:none;
}


.kdance-scene__pulse i{

  position:absolute;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:50%;

  animation:
    kdancePulse
    3.6s ease-out
    infinite;
}


.kdance-scene__pulse i:nth-child(1){

  width:28%;
  aspect-ratio:1;
}


.kdance-scene__pulse i:nth-child(2){

  width:55%;
  aspect-ratio:1;

  animation-delay:-1.2s;
}


.kdance-scene__pulse i:nth-child(3){

  width:88%;
  aspect-ratio:1;

  animation-delay:-2.4s;
}


@keyframes kdancePulse{

  0%{
    transform:scale(.84);
    opacity:.85;
  }

  100%{
    transform:scale(1.11);
    opacity:.10;
  }

}



/* =========================================================
   SCENE CAPTION
========================================================= */

.kdance-scene__caption{

  position:absolute;

  z-index:7;

  left:
    clamp(35px,6vw,95px);

  right:
    clamp(35px,6vw,95px);

  bottom:
    clamp(30px,5vw,65px);

  display:grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto;

  gap:12px;

  align-items:center;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.44);
}


.kdance-scene__caption i{

  height:1px;

  background:
    rgba(255,255,255,.19);
}


.kdance-scene__caption strong{
  color:var(--acid);
}



/* =========================================================
   DIVIDER
========================================================= */

.kdance-divider{

  display:flex;

  align-items:center;

  gap:15px;

  padding:
    17px
    clamp(30px,6vw,95px);

  background:
    #F0EBE5;

  color:#17131C;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.19em;
}


.kdance-divider i{

  flex:1;

  height:1px;

  background:
    rgba(23,19,28,.18);
}


.kdance-divider strong{
  color:var(--magenta);
}



/* =========================================================
   SCENE 02 / BODY
========================================================= */

.kdance-scene--body{

  min-height:
    clamp(720px,78vw,930px);

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.55fr);

  background:
    #F0EBE5;

  color:
    #17131C;
}



/* =========================================================
   BODY TYPO
========================================================= */

.kdance-body__type{

  position:absolute;

  z-index:0;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:space-around;

  overflow:hidden;

  pointer-events:none;
}


.kdance-body__type span,
.kdance-body__type strong{

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(100px,16vw,240px);

  line-height:.62;

  font-weight:900;

  letter-spacing:-.09em;

  white-space:nowrap;

  color:
    rgba(73,61,118,.065);
}


.kdance-body__type span:nth-child(1){

  transform:
    translateX(
      calc(
        var(--dance-shift) * -1
      )
    );
}


.kdance-body__type strong{

  transform:
    translateX(
      var(--dance-shift)
    );

  color:
    rgba(178,60,97,.075);
}



/* =========================================================
   BODY VISUAL
========================================================= */

.kdance-body__visual{

  position:relative;

  z-index:2;

  margin:
    clamp(50px,6vw,90px)
    0
    clamp(50px,6vw,90px)
    clamp(45px,7vw,110px);

  overflow:hidden;

  clip-path:
    inset(
      0
      var(--dance-clip)
      0
      0
    );

  transition:
    clip-path .08s linear;
}


.kdance-photo--body{

  position:absolute;

  inset:-3%;

  background-image:

    var(
      --dance-body,
      linear-gradient(
        145deg,
        #16121C,
        #493D76 43%,
        #B23C61 72%,
        #E19A91
      )
    );

  filter:
    saturate(.85)
    contrast(1.08);

  transform:
    scale(
      var(--dance-scale)
    );
}



/* =========================================================
   BODY FRAME
========================================================= */

.kdance-body__frame{

  position:absolute;

  z-index:3;

  inset:7%;

  border:
    1px solid
    rgba(255,255,255,.34);

  clip-path:
    polygon(
      7% 0,
      100% 0,
      93% 100%,
      0 100%
    );
}



/* =========================================================
   MOTION TRAILS
========================================================= */

.kdance-body__motion{

  position:absolute;

  z-index:4;

  inset:0;

  pointer-events:none;
}


.kdance-body__motion i{

  position:absolute;

  left:12%;

  width:57%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(232,198,110,.85),
      transparent
    );

  transform:
    rotate(-14deg);
}


.kdance-body__motion i:nth-child(1){
  top:31%;
}


.kdance-body__motion i:nth-child(2){

  top:50%;
  left:25%;
}


.kdance-body__motion i:nth-child(3){

  top:69%;
  left:7%;
}



/* =========================================================
   BODY COPY
========================================================= */

.kdance-body__copy{

  position:relative;

  z-index:3;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    clamp(60px,7vw,105px)
    clamp(42px,6vw,85px);
}


.kdance-body__copy > span{

  margin-bottom:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    var(--magenta);
}


.kdance-body__copy h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(39px,4.4vw,64px);

  line-height:1.72;

  font-weight:500;
}


.kdance-body__copy p{

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(23,19,28,.60);
}



/* =========================================================
   SOUND BODY LINE
========================================================= */

.kdance-body__line{

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:12px;

  align-items:center;

  margin-top:
    clamp(40px,5vw,65px);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.18em;
}


.kdance-body__line i{

  height:1px;

  background:
    var(--magenta);
}


.kdance-body__line strong{
  color:var(--magenta);
}



/* =========================================================
   SCENE 03 / TOGETHER
========================================================= */

.kdance-scene--together{

  min-height:
    clamp(720px,84vw,1000px);

  background:
    var(--violet);

  --dance-clip:20%;
}



/* =========================================================
   TOGETHER MEDIA
========================================================= */

.kdance-together__media{

  position:absolute;

  inset:0;

  overflow:hidden;

  clip-path:
    inset(
      var(--dance-clip)
      var(--dance-clip)
      var(--dance-clip)
      var(--dance-clip)
    );

  transition:
    clip-path .08s linear;
}


.kdance-photo--together{

  position:absolute;

  inset:-3%;

  background-image:

    var(
      --dance-together,
      linear-gradient(
        130deg,
        #15111F,
        #493D76 35%,
        #8D476F 61%,
        #D28382 100%
      )
    );

  filter:
    saturate(.84)
    contrast(1.08)
    brightness(.79);

  transform:
    scale(
      var(--dance-scale)
    );
}


.kdance-together__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(11,8,17,.92),
      rgba(11,8,17,.52) 46%,
      rgba(11,8,17,.08)
    ),

    linear-gradient(
      180deg,
      transparent,
      rgba(11,8,17,.73)
    );
}



/* =========================================================
   CIRCLE
========================================================= */

.kdance-together__circle{

  position:absolute;

  z-index:5;

  right:
    clamp(40px,8vw,125px);

  top:
    clamp(45px,8vw,120px);

  width:
    clamp(155px,18vw,260px);

  aspect-ratio:1;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius:50%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  background:
    rgba(73,61,118,.18);

  backdrop-filter:
    blur(5px);
}


.kdance-together__circle span{

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.55);
}


.kdance-together__circle strong{

  margin:5px 0;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(30px,4vw,55px);

  font-style:italic;

  font-weight:400;

  color:var(--acid);
}



/* =========================================================
   TOGETHER COPY
========================================================= */

.kdance-together__copy{

  position:absolute;

  z-index:6;

  left:
    clamp(35px,8vw,125px);

  bottom:
    clamp(90px,10vw,145px);

  width:
    min(70%,700px);
}


.kdance-together__copy > span{

  display:block;

  margin-bottom:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--acid);
}


.kdance-together__copy h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(45px,5.2vw,76px);

  line-height:1.65;

  font-weight:500;
}


.kdance-together__copy p{

  width:
    min(100%,510px);

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(255,255,255,.68);
}



/* =========================================================
   TOGETHER BOTTOM
========================================================= */

.kdance-together__bottom{

  position:absolute;

  z-index:6;

  left:
    clamp(35px,6vw,95px);

  right:
    clamp(35px,6vw,95px);

  bottom:
    clamp(27px,4vw,55px);

  display:grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto;

  gap:12px;

  align-items:center;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.43);
}


.kdance-together__bottom i{

  height:1px;

  background:
    rgba(255,255,255,.18);
}


.kdance-together__bottom strong{
  color:var(--acid);
}



/* =========================================================
   MWAZINDIKA
========================================================= */

.kdance-mw{

  position:relative;

  display:grid;

  grid-template-columns:
    minmax(220px,.38fr)
    minmax(300px,.72fr)
    minmax(360px,1fr);

  gap:
    clamp(45px,7vw,100px);

  align-items:center;

  padding:
    clamp(100px,11vw,165px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    #291D3C;

  color:#fff;
}



/* =========================================================
   YEAR
========================================================= */

.kdance-mw__year{

  display:flex;

  flex-direction:column;
}


.kdance-mw__year small,
.kdance-mw__year span{

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    rgba(255,255,255,.40);
}


.kdance-mw__year strong{

  margin:
    10px 0;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(75px,10vw,150px);

  line-height:.75;

  font-style:italic;

  font-weight:400;

  color:#DCAFC0;
}



/* =========================================================
   MW COPY
========================================================= */

.kdance-mw__copy > span{

  display:block;

  margin-bottom:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--acid);
}


.kdance-mw__copy h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(38px,4.2vw,61px);

  line-height:1.72;

  font-weight:500;
}


.kdance-mw__copy p{

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(255,255,255,.65);
}



/* =========================================================
   ORBIT
========================================================= */

.kdance-mw__orbit{

  min-height:
    clamp(350px,35vw,480px);

  display:grid;

  grid-template-columns:
    1fr 1px 1fr;

  grid-template-rows:
    1fr 1px 1fr;

  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:50%;
}


.kdance-mw__orbit > div{

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(12px,1.5vw,19px);

  font-weight:900;

  letter-spacing:.05em;
}


.kdance-mw__orbit > div:nth-of-type(1){

  grid-column:1;
  grid-row:1;

  color:#E8C66E;
}


.kdance-mw__orbit > div:nth-of-type(2){

  grid-column:3;
  grid-row:1;

  color:#DCAFC0;
}


.kdance-mw__orbit > div:nth-of-type(3){

  grid-column:1;
  grid-row:3;

  color:#A7A2DA;
}


.kdance-mw__orbit > div:nth-of-type(4){

  grid-column:3;
  grid-row:3;

  color:#fff;
}


.kdance-mw__orbit i:nth-of-type(1){

  grid-column:2;
  grid-row:1 / 4;

  width:1px;
  height:70%;

  background:
    rgba(255,255,255,.14);
}


.kdance-mw__orbit i:nth-of-type(2){

  grid-column:1 / 4;
  grid-row:2;

  width:70%;
  height:1px;

  background:
    rgba(255,255,255,.14);
}


.kdance-mw__orbit i:nth-of-type(3){
  display:none;
}



/* =========================================================
   GENERIC REVEAL
========================================================= */

[data-kdance-reveal]{

  opacity:0;

  transform:
    translateY(25px);

  transition:
    opacity .85s ease,
    transform 1s
    cubic-bezier(.2,.8,.2,1);
}


[data-kdance-reveal].is-visible{

  opacity:1;

  transform:none;
}



/* =========================================================
   END
========================================================= */

.kdance-end{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.38fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  padding:
    clamp(105px,11vw,165px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    #F0EBE5;

  color:
    #17131C;
}


.kdance-end > div > span{

  display:block;

  margin-bottom:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--magenta);
}


.kdance-end h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(42px,5vw,72px);

  line-height:1.67;

  font-weight:500;
}


.kdance-end h3 span,
.kdance-end h3 strong{

  display:block;
}


.kdance-end h3 strong{

  color:
    var(--violet);

  font-weight:500;
}


.kdance-end > p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:
    rgba(23,19,28,.61);
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  /* =====================================================
     INTRO
  ====================================================== */

  .kdance-intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0
      82px;
  }


  .kdance-intro__meta strong{
    display:none;
  }


  .kdance-intro__main{

    display:block;

    margin-top:42px;
  }


  .kdance-intro h2{

    font-size:
      clamp(36px,9.4vw,46px);

    line-height:1.67;
  }


  .kdance-intro__note{

    margin-top:31px;

    padding-left:15px;
  }



  /* =====================================================
     ALL SCENES
     MOBILEではクロップ演出を軽くする
  ====================================================== */

  .kdance-scene{

    --dance-clip:0% !important;
    --dance-scale:1.03 !important;
    --dance-shift:0px !important;
  }



  /* =====================================================
     BEAT
  ====================================================== */

  .kdance-scene--beat{

    min-height:
      min(160vw,745px);
  }


  .kdance-scene__media{

    clip-path:none;
  }


  .kdance-scene__copy{

    left:24px;
    right:24px;

    top:auto;
    bottom:83px;

    width:auto;

    transform:none;
  }


  .kdance-scene__copy h3{

    font-size:
      clamp(36px,9.4vw,46px);
  }


  .kdance-scene__copy p{

    font-size:11px;

    line-height:1.95;
  }


  .kdance-scene__pulse{

    top:95px;
    right:-18px;

    width:160px;

    transform:none;
  }


  .kdance-scene__number{

    top:25px;
    right:24px;

    font-size:70px;
  }


  .kdance-scene__caption{

    left:24px;
    right:24px;

    bottom:25px;

    font-size:4px;
  }



  /* =====================================================
     DIVIDER
  ====================================================== */

  .kdance-divider{

    padding:
      15px 24px;

    font-size:5px;
  }



  /* =====================================================
     BODY
  ====================================================== */

  .kdance-scene--body{

    display:flex;

    flex-direction:column;

    min-height:0;
  }


  .kdance-body__visual{

    width:
      calc(100% - 48px);

    height:
      min(115vw,530px);

    margin:
      45px 24px 0;

    clip-path:none;
  }


  .kdance-body__copy{

    padding:
      58px 24px
      78px;
  }


  .kdance-body__copy h3{

    font-size:
      clamp(35px,9.2vw,44px);
  }


  .kdance-body__type{

    opacity:.55;
  }



  /* =====================================================
     TOGETHER
  ====================================================== */

  .kdance-scene--together{

    min-height:
      min(160vw,745px);
  }


  .kdance-together__media{

    clip-path:none;
  }


  .kdance-together__circle{

    top:24px;
    right:-15px;

    width:125px;
  }


  .kdance-together__copy{

    left:24px;
    right:24px;

    bottom:81px;

    width:auto;
  }


  .kdance-together__copy h3{

    font-size:
      clamp(36px,9.4vw,46px);
  }


  .kdance-together__copy p{

    font-size:11px;

    line-height:1.95;
  }


  .kdance-together__bottom{

    left:24px;
    right:24px;

    bottom:24px;

    font-size:4px;
  }



  /* =====================================================
     MWAZINDIKA
  ====================================================== */

  .kdance-mw{

    display:block;

    padding:
      78px 24px
      88px;
  }


  .kdance-mw__year strong{

    font-size:92px;
  }


  .kdance-mw__copy{

    margin-top:50px;
  }


  .kdance-mw__copy h3{

    font-size:
      clamp(35px,9.2vw,44px);
  }


  .kdance-mw__orbit{

    min-height:330px;

    margin-top:55px;
  }



  /* =====================================================
     END
  ====================================================== */

  .kdance-end{

    display:block;

    padding:
      78px 24px
      88px;
  }


  .kdance-end h3{

    font-size:
      clamp(34px,9vw,44px);
  }


  .kdance-end > p{

    margin-top:31px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .kdance-intro{

    width:
      calc(100% - 40px);
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .kdance-scene{

    --dance-clip:0% !important;
    --dance-scale:1.03 !important;
    --dance-shift:0px !important;
  }


  .kdance-scene__pulse i{

    animation:none;
  }


  [data-kdance-reveal]{

    opacity:1;

    transform:none;

    transition:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ab42860 *//* =========================================================
   KENYA / MUSIC & RHYTHM
   NAIROBI CONTEMPORARY MUSIC

   FULL REPLACEMENT
   NIGHT TRANSMISSION / CITY SIGNAL
========================================================= */

.kcity2{

  --night:#090E17;
  --night-2:#111827;

  --ink:#11151A;

  --blue:#284F69;
  --blue-light:#6A94A7;

  --red:#AC4B4B;
  --coral:#D17259;

  --violet:#4D496D;

  --gold:#E0B65D;
  --cream:#EFE8DA;

  position:relative;

  width:100%;

  overflow:hidden;

  background:var(--night);

  color:#fff;
}


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



/* =========================================================
   PHOTO VARIABLES
========================================================= */

.kcity2{

  /*
  --city-main:url("");
  --city-live:url("");
  */

}


.kcity2-photo{

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}



/* =========================================================
   INTRO
========================================================= */

.kcity2-intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(95px,9vw,140px);
}



/* =========================================================
   INTRO META
========================================================= */

.kcity2-intro__meta{

  display:flex;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.14);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kcity2-intro__meta span{
  color:var(--gold);
}


.kcity2-intro__meta strong{
  color:rgba(255,255,255,.37);
}



/* =========================================================
   INTRO GRID
========================================================= */

.kcity2-intro__grid{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.37fr);

  gap:
    clamp(55px,8vw,120px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,95px);
}


.kcity2-intro__title > p{

  margin:0 0 14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.20em;

  color:var(--gold);
}


.kcity2-intro h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(48px,5.8vw,84px);

  line-height:1.55;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.kcity2-intro h2 span,
.kcity2-intro h2 strong{
  display:block;
}


.kcity2-intro h2 strong{

  color:#83AFC3;

  font-weight:500;
}



/* =========================================================
   LEAD
========================================================= */

.kcity2-intro__lead{

  padding-left:19px;

  border-left:
    2px solid var(--coral);
}


.kcity2-intro__lead span{

  display:block;

  margin-bottom:10px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kcity2-intro__lead p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:rgba(255,255,255,.62);
}



/* =========================================================
   CITY SIGNAL
========================================================= */

.kcity2-signal{

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(380px,.65fr);

  width:
    min(
      calc(100% - clamp(60px,8vw,125px)),
      1540px
    );

  margin-inline:auto;

  min-height:
    clamp(570px,58vw,760px);

  background:#141C2A;
}



/* =========================================================
   SIGNAL PHOTO
========================================================= */

.kcity2-signal__photo{

  position:relative;

  min-height:100%;

  overflow:hidden;
}


.kcity2-photo--main{

  position:absolute;

  inset:0;

  background-image:

    var(
      --city-main,
      linear-gradient(
        125deg,
        #101928 0%,
        #2D526B 41%,
        #714C62 68%,
        #B35D51 100%
      )
    );

  filter:
    saturate(.78)
    contrast(1.1)
    brightness(.76);
}


.kcity2-signal__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(8,13,21,.28),
      rgba(8,13,21,.06)
    ),

    linear-gradient(
      180deg,
      rgba(8,13,21,.08),
      rgba(8,13,21,.72)
    );
}



/* =========================================================
   NAIROBI TYPE
========================================================= */

.kcity2-signal__city{

  position:absolute;

  left:
    clamp(25px,4vw,55px);

  bottom:
    clamp(25px,4vw,55px);

  font-family:Arial,sans-serif;

  font-size:
    clamp(65px,9vw,135px);

  line-height:.78;

  font-weight:900;

  letter-spacing:-.075em;

  color:#fff;

  text-shadow:
    0 8px 30px rgba(0,0,0,.22);
}



/* =========================================================
   CONSOLE
========================================================= */

.kcity2-signal__console{

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding:
    clamp(38px,5vw,70px);

  background:
    #111824;
}



/* =========================================================
   CONSOLE TOP
========================================================= */

.kcity2-console__top{

  display:flex;

  justify-content:space-between;

  gap:20px;

  padding-bottom:14px;

  border-bottom:
    1px solid rgba(255,255,255,.13);

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;
}


.kcity2-console__top span{
  color:var(--gold);
}


.kcity2-console__top strong{
  color:rgba(255,255,255,.40);
}



/* =========================================================
   CONSOLE MAIN
========================================================= */

.kcity2-console__main{

  padding:
    clamp(50px,6vw,85px)
    0;
}


.kcity2-console__main small{

  display:block;

  margin-bottom:8px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--coral);
}


.kcity2-console__main h3{

  margin:0;

  font-family:Arial,sans-serif;

  font-size:
    clamp(55px,6.5vw,94px);

  line-height:.83;

  font-weight:900;

  letter-spacing:-.075em;
}


.kcity2-console__main p{

  width:min(100%,340px);

  margin:28px 0 0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(20px,2vw,28px);

  line-height:1.8;

  color:rgba(255,255,255,.69);
}



/* =========================================================
   TUNER
========================================================= */

.kcity2-tuner{

  padding-top:22px;

  border-top:
    1px solid rgba(255,255,255,.13);
}



/* =========================================================
   LABELS
========================================================= */

.kcity2-tuner__labels{

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:10px;

  align-items:end;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.11em;

  color:rgba(255,255,255,.35);
}


.kcity2-tuner__labels span:nth-child(4),
.kcity2-tuner__labels span:nth-child(5){

  text-align:right;
}


.kcity2-tuner__labels strong{

  text-align:center;

  font-size:7px;

  color:var(--gold);
}



/* =========================================================
   TUNER RAIL
========================================================= */

.kcity2-tuner__rail{

  position:relative;

  height:34px;

  margin-top:13px;
}


.kcity2-tuner__base{

  position:absolute;

  left:0;
  right:0;

  top:16px;

  height:1px;

  background:
    rgba(255,255,255,.18);
}


.kcity2-tuner__active{

  position:absolute;

  left:0;

  top:15px;

  width:50%;

  height:2px;

  background:

    linear-gradient(
      90deg,
      rgba(224,182,93,.08),
      var(--gold)
    );
}


.kcity2-tuner__needle{

  position:absolute;

  left:50%;
  top:7px;

  width:18px;
  height:18px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    var(--gold);

  box-shadow:
    0 0 0 6px
    rgba(224,182,93,.10),
    0 0 22px
    rgba(224,182,93,.30);
}



/* =========================================================
   STATUS
========================================================= */

.kcity2-tuner__status{

  display:flex;

  justify-content:space-between;

  gap:20px;

  margin-top:6px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;
}


.kcity2-tuner__status span{

  color:
    rgba(255,255,255,.32);
}


.kcity2-tuner__status strong{
  color:var(--coral);
}



/* =========================================================
   STREET
========================================================= */

.kcity2-scene--street{

  position:relative;

  min-height:
    clamp(550px,58vw,760px);

  overflow:hidden;

  display:grid;

  grid-template-columns:
    minmax(170px,.25fr)
    minmax(0,1fr);

  gap:
    clamp(45px,8vw,120px);

  align-items:center;

  padding:
    clamp(85px,9vw,135px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--red);

  color:#fff;

  isolation:isolate;
}



/* =========================================================
   STREET INDEX
========================================================= */

.kcity2-scene__index{

  position:relative;

  z-index:3;
}


.kcity2-scene__index span{

  display:block;

  margin-bottom:10px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:#F3D494;
}


.kcity2-scene__index strong{

  display:block;

  font-family:Arial,sans-serif;

  font-size:
    clamp(45px,6vw,90px);

  line-height:.85;

  font-weight:900;

  letter-spacing:-.06em;

  writing-mode:vertical-rl;
}



/* =========================================================
   STREET COPY
========================================================= */

.kcity2-scene__content{

  position:relative;

  z-index:3;

  width:
    min(100%,760px);
}


.kcity2-scene__content > span{

  display:block;

  margin-bottom:14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:#F3D494;
}


.kcity2-scene__content h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(43px,5vw,72px);

  line-height:1.68;

  font-weight:500;
}


.kcity2-scene__content p{

  width:min(100%,530px);

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:rgba(255,255,255,.71);
}



/* =========================================================
   BIG TYPE
========================================================= */

.kcity2-scene__type{

  position:absolute;

  z-index:1;

  right:-4%;
  bottom:-6%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(125px,20vw,310px);

  line-height:.72;

  font-weight:900;

  letter-spacing:-.09em;

  color:rgba(255,255,255,.045);

  pointer-events:none;
}



/* =========================================================
   FLOW
========================================================= */

.kcity2-scene__flow{

  position:absolute;

  z-index:4;

  left:
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  right:
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  bottom:
    clamp(30px,4vw,55px);

  display:grid;

  grid-template-columns:
    auto 1fr auto 1fr auto;

  gap:12px;

  align-items:center;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:rgba(255,255,255,.44);
}


.kcity2-scene__flow i{

  height:1px;

  background:
    rgba(255,255,255,.20);
}


.kcity2-scene__flow strong{
  color:#F3D494;
}



/* =========================================================
   LIVE
========================================================= */

.kcity2-live{

  position:relative;

  min-height:
    clamp(650px,75vw,900px);

  overflow:hidden;

  background:#172838;

  color:#fff;

  isolation:isolate;
}



/* =========================================================
   LIVE MEDIA
========================================================= */

.kcity2-live__media{

  position:absolute;

  inset:0;
}


.kcity2-photo--live{

  position:absolute;

  inset:0;

  background-image:

    var(
      --city-live,
      linear-gradient(
        125deg,
        #101A28,
        #285369 42%,
        #644D67 69%,
        #C37554
      )
    );

  filter:
    saturate(.8)
    contrast(1.1)
    brightness(.73);
}


.kcity2-live__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(8,13,21,.93),
      rgba(8,13,21,.55) 47%,
      rgba(8,13,21,.08)
    ),

    linear-gradient(
      180deg,
      transparent,
      rgba(8,13,21,.72)
    );
}



/* =========================================================
   LIVE COPY
========================================================= */

.kcity2-live__copy{

  position:absolute;

  z-index:4;

  left:
    clamp(35px,8vw,125px);

  top:50%;

  width:
    min(63%,680px);

  transform:
    translateY(-50%);
}


.kcity2-live__copy > span{

  display:block;

  margin-bottom:14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kcity2-live__copy h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(46px,5.4vw,78px);

  line-height:1.68;

  font-weight:500;
}


.kcity2-live__copy p{

  width:min(100%,500px);

  margin:25px 0 0;

  font-size:12px;

  line-height:2.1;

  color:rgba(255,255,255,.68);
}



/* =========================================================
   LIGHT
========================================================= */

.kcity2-live__light{

  position:absolute;

  z-index:2;

  right:-5%;
  top:-20%;

  width:45%;
  height:140%;

  transform:
    rotate(13deg);

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(224,182,93,.08),
      rgba(224,182,93,.17),
      transparent
    );

  filter:blur(5px);

  pointer-events:none;
}



/* =========================================================
   LIVE BOTTOM
========================================================= */

.kcity2-live__bottom{

  position:absolute;

  z-index:5;

  left:
    clamp(35px,6vw,95px);

  right:
    clamp(35px,6vw,95px);

  bottom:
    clamp(30px,4vw,55px);

  display:grid;

  grid-template-columns:
    auto 1fr auto 1fr auto;

  gap:12px;

  align-items:center;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:rgba(255,255,255,.40);
}


.kcity2-live__bottom i{

  height:1px;

  background:
    rgba(255,255,255,.18);
}


.kcity2-live__bottom strong{
  color:var(--gold);
}



/* =========================================================
   DIGITAL
========================================================= */

.kcity2-digital{

  display:grid;

  grid-template-columns:
    minmax(300px,.7fr)
    minmax(340px,.9fr)
    minmax(280px,.55fr);

  gap:
    clamp(45px,7vw,100px);

  align-items:center;

  min-height:
    clamp(620px,65vw,820px);

  padding:
    clamp(90px,10vw,145px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--violet);

  color:#fff;
}



/* =========================================================
   DIGITAL INTRO
========================================================= */

.kcity2-digital__intro > span{

  display:block;

  margin-bottom:14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kcity2-digital__intro h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(39px,4.5vw,64px);

  line-height:1.72;

  font-weight:500;
}



/* =========================================================
   DIGITAL SIGNAL
========================================================= */

.kcity2-digital__signal{

  position:relative;

  width:
    min(100%,490px);

  aspect-ratio:1;

  margin-inline:auto;

  display:grid;

  place-items:center;
}


.kcity2-digital__core{

  position:relative;

  z-index:4;

  width:74px;

  aspect-ratio:1;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    var(--gold);

  color:#202031;

  font-family:Arial,sans-serif;

  font-size:18px;

  font-weight:900;
}



/* =========================================================
   SIGNAL RINGS
========================================================= */

.kcity2-digital__ring{

  position:absolute;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:50%;
}


.kcity2-digital__ring--01{

  width:40%;
  aspect-ratio:1;
}


.kcity2-digital__ring--02{

  width:68%;
  aspect-ratio:1;
}


.kcity2-digital__ring--03{

  width:96%;
  aspect-ratio:1;
}



/* =========================================================
   SIGNAL DOTS
========================================================= */

.kcity2-digital__dot{

  position:absolute;

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--gold);

  box-shadow:
    0 0 0 6px
    rgba(224,182,93,.10);
}


.kcity2-digital__dot--01{

  left:17%;
  top:29%;
}


.kcity2-digital__dot--02{

  right:7%;
  top:48%;
}


.kcity2-digital__dot--03{

  left:39%;
  bottom:7%;
}



/* =========================================================
   DIGITAL COPY
========================================================= */

.kcity2-digital__copy{

  padding-left:18px;

  border-left:
    2px solid
    rgba(224,182,93,.70);
}


.kcity2-digital__copy span{

  display:block;

  margin-bottom:10px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kcity2-digital__copy p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:rgba(255,255,255,.67);
}



/* =========================================================
   END
========================================================= */

.kcity2-end{

  padding:
    clamp(95px,10vw,150px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--cream);

  color:
    var(--ink);
}


.kcity2-end__meta{

  display:flex;

  justify-content:space-between;

  gap:25px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    rgba(17,21,26,.16);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;
}


.kcity2-end__meta span{
  color:var(--red);
}


.kcity2-end__meta strong{
  color:rgba(17,21,26,.38);
}



/* =========================================================
   END MESSAGE
========================================================= */

.kcity2-end__message{

  margin-top:
    clamp(48px,6vw,80px);
}


.kcity2-end__message p{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(40px,5vw,72px);

  line-height:1.67;

  font-weight:500;

  letter-spacing:-.05em;
}


.kcity2-end__message span,
.kcity2-end__message strong{

  display:block;
}


.kcity2-end__message strong{

  color:var(--blue);

  font-weight:500;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  /* =====================================================
     INTRO
  ====================================================== */

  .kcity2-intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0
      74px;
  }


  .kcity2-intro__meta strong{
    display:none;
  }


  .kcity2-intro__grid{

    display:block;

    margin-top:42px;
  }


  .kcity2-intro h2{

    font-size:
      clamp(36px,9.4vw,46px);

    line-height:1.68;
  }


  .kcity2-intro h2 span,
  .kcity2-intro h2 strong{

    display:block;
  }


  .kcity2-intro__lead{

    margin-top:32px;

    padding-left:15px;
  }



  /* =====================================================
     SIGNAL
  ====================================================== */

  .kcity2-signal{

    display:block;

    width:100%;

    min-height:0;
  }


  .kcity2-signal__photo{

    height:
      min(108vw,510px);
  }


  .kcity2-signal__city{

    left:24px;
    bottom:25px;

    font-size:
      clamp(61px,18vw,83px);
  }


  .kcity2-signal__console{

    padding:
      48px 24px
      55px;
  }


  .kcity2-console__main{

    padding:
      48px 0;
  }


  .kcity2-console__main h3{

    font-size:
      clamp(55px,16vw,76px);
  }


  .kcity2-console__main p{

    font-size:
      clamp(19px,5.6vw,25px);
  }



  /* TUNER */

  .kcity2-tuner__labels{

    grid-template-columns:
      repeat(5,max-content);

    justify-content:space-between;

    gap:7px;

    font-size:4px;

    letter-spacing:.06em;
  }


  .kcity2-tuner__labels strong{

    font-size:5px;
  }



  /* =====================================================
     STREET
  ====================================================== */

  .kcity2-scene--street{

    display:block;

    min-height:0;

    padding:
      68px 24px
      93px;
  }


  .kcity2-scene__index{

    display:flex;

    justify-content:space-between;

    align-items:center;
  }


  .kcity2-scene__index span{

    margin:0;
  }


  .kcity2-scene__index strong{

    font-size:36px;

    writing-mode:horizontal-tb;
  }


  .kcity2-scene__content{

    margin-top:55px;
  }


  .kcity2-scene__content h3{

    font-size:
      clamp(35px,9.2vw,44px);
  }


  .kcity2-scene__content p{

    font-size:11px;

    line-height:1.95;
  }


  .kcity2-scene__flow{

    left:24px;
    right:24px;

    bottom:26px;

    font-size:4px;
  }



  /* =====================================================
     LIVE
  ====================================================== */

  .kcity2-live{

    min-height:
      min(158vw,735px);
  }


  .kcity2-live__copy{

    left:24px;
    right:24px;

    top:auto;
    bottom:78px;

    width:auto;

    transform:none;
  }


  .kcity2-live__copy h3{

    font-size:
      clamp(36px,9.4vw,45px);
  }


  .kcity2-live__copy p{

    font-size:11px;

    line-height:1.95;
  }


  .kcity2-live__bottom{

    left:24px;
    right:24px;

    bottom:25px;

    font-size:4px;
  }



  /* =====================================================
     DIGITAL
  ====================================================== */

  .kcity2-digital{

    display:block;

    min-height:0;

    padding:
      75px 24px
      85px;
  }


  .kcity2-digital__intro h3{

    font-size:
      clamp(35px,9.2vw,44px);
  }


  .kcity2-digital__signal{

    width:min(100%,330px);

    margin-top:55px;
  }


  .kcity2-digital__copy{

    margin-top:52px;

    padding-left:15px;
  }



  /* =====================================================
     END
  ====================================================== */

  .kcity2-end{

    padding:
      78px 24px
      88px;
  }


  .kcity2-end__meta strong{
    display:none;
  }


  .kcity2-end__message{

    margin-top:45px;
  }


  .kcity2-end__message p{

    font-size:
      clamp(34px,9vw,44px);
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .kcity2-intro{

    width:
      calc(100% - 40px);
  }


  .kcity2-tuner__labels span:nth-child(2),
  .kcity2-tuner__labels span:nth-child(4){

    display:none;
  }


  .kcity2-tuner__labels{

    grid-template-columns:
      auto 1fr auto;

    align-items:end;
  }


  .kcity2-tuner__labels strong{

    text-align:center;
  }


  .kcity2-tuner__labels span:last-child{

    text-align:right;
  }

}
/* =========================================================
   KCITY2 / MOTION PATCH
========================================================= */

/* PHOTO PARALLAX */

.kcity2-photo--main{
  transform:
    scale(var(--city-main-scale,1.06))
    translate3d(
      0,
      var(--city-main-y,0px),
      0
    );

  will-change:transform;
}


.kcity2-photo--live{
  transform:
    scale(var(--city-live-scale,1.06))
    translate3d(
      0,
      var(--city-live-y,0px),
      0
    );

  will-change:transform;
}



/* =========================================================
   CONSOLE REVEAL
========================================================= */

.kcity2-signal__console{

  opacity:0;

  transform:
    translateX(30px);

  transition:
    opacity .8s ease,
    transform .9s
    cubic-bezier(.2,.8,.2,1);
}


.kcity2-signal.is-visible
.kcity2-signal__console{

  opacity:1;

  transform:none;
}



/* =========================================================
   TUNER NEEDLE
========================================================= */

.kcity2-tuner__needle{

  left:
    var(--city-needle,22%);

  transition:
    left 1.3s
    cubic-bezier(.2,.8,.2,1);
}


.kcity2-tuner__active{

  width:
    var(--city-needle,22%);

  transition:
    width 1.3s
    cubic-bezier(.2,.8,.2,1);
}


.kcity2-signal.is-tuned{

  --city-needle:50%;
}



/* =========================================================
   SIGNAL GLOW
========================================================= */

.kcity2-signal.is-tuned
.kcity2-tuner__needle{

  animation:
    kcityNeedleGlow
    2.2s ease-in-out
    infinite alternate;
}


@keyframes kcityNeedleGlow{

  from{

    box-shadow:
      0 0 0 5px
      rgba(224,182,93,.08),
      0 0 10px
      rgba(224,182,93,.15);

  }

  to{

    box-shadow:
      0 0 0 9px
      rgba(224,182,93,.10),
      0 0 30px
      rgba(224,182,93,.45);

  }

}



/* =========================================================
   SIGNAL STATUS
========================================================= */

.kcity2-tuner__status strong{

  position:relative;
}


.kcity2-tuner__status strong::before{

  content:"";

  display:inline-block;

  width:5px;
  height:5px;

  margin-right:6px;

  border-radius:50%;

  background:currentColor;

  animation:
    kcityOnAir
    1.3s ease-in-out
    infinite alternate;
}


@keyframes kcityOnAir{

  from{
    opacity:.28;
  }

  to{
    opacity:1;
  }

}



/* =========================================================
   STREET
========================================================= */

.kcity2-scene--street{

  --city-type-x:30px;
}


.kcity2-scene__type{

  transform:
    translateX(
      var(--city-type-x)
    );

  will-change:transform;
}


.kcity2-scene__content{

  opacity:0;

  transform:
    translateY(24px);

  transition:
    opacity .75s ease,
    transform .9s ease;
}


.kcity2-scene--street.is-visible
.kcity2-scene__content{

  opacity:1;

  transform:none;
}



/* =========================================================
   LIVE
========================================================= */

.kcity2-live__copy{

  opacity:0;

  transform:
    translateY(calc(-50% + 25px));

  transition:
    opacity .8s ease,
    transform .95s
    cubic-bezier(.2,.8,.2,1);
}


.kcity2-live.is-visible
.kcity2-live__copy{

  opacity:1;

  transform:
    translateY(-50%);
}


.kcity2-live__light{

  transform:
    translateX(
      var(--city-light-x,0px)
    )
    rotate(
      var(--city-light-r,13deg)
    );

  will-change:transform;
}



/* =========================================================
   DIGITAL SIGNAL
========================================================= */

.kcity2-digital__ring{

  opacity:.18;

  transform:scale(.86);
}


.kcity2-digital.is-visible
.kcity2-digital__ring--01{

  animation:
    kcityDigitalWave
    3.5s ease-out
    infinite;
}


.kcity2-digital.is-visible
.kcity2-digital__ring--02{

  animation:
    kcityDigitalWave
    3.5s ease-out
    .8s infinite;
}


.kcity2-digital.is-visible
.kcity2-digital__ring--03{

  animation:
    kcityDigitalWave
    3.5s ease-out
    1.6s infinite;
}


@keyframes kcityDigitalWave{

  0%{

    transform:scale(.72);

    opacity:.48;

  }

  75%{

    opacity:.13;

  }

  100%{

    transform:scale(1.05);

    opacity:0;

  }

}


.kcity2-digital__dot{

  opacity:.25;

  transition:
    opacity .45s ease,
    transform .45s ease;
}


.kcity2-digital.is-visible
.kcity2-digital__dot{

  opacity:1;
}


.kcity2-digital.is-visible
.kcity2-digital__dot--01{

  animation:
    kcityDot
    1.4s ease-in-out
    infinite alternate;
}


.kcity2-digital.is-visible
.kcity2-digital__dot--02{

  animation:
    kcityDot
    1.4s ease-in-out
    .45s infinite alternate;
}


.kcity2-digital.is-visible
.kcity2-digital__dot--03{

  animation:
    kcityDot
    1.4s ease-in-out
    .9s infinite alternate;
}


@keyframes kcityDot{

  from{

    transform:scale(.7);

    opacity:.35;

  }

  to{

    transform:scale(1.2);

    opacity:1;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .kcity2-live__copy{

    transform:
      translateY(24px);
  }


  .kcity2-live.is-visible
  .kcity2-live__copy{

    transform:none;
  }


  .kcity2-photo--main,
  .kcity2-photo--live{

    transform:
      scale(1.03);

  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .kcity2 *,
  .kcity2 *::before,
  .kcity2 *::after{

    animation:
      none !important;

  }


  .kcity2-signal__console,
  .kcity2-scene__content,
  .kcity2-live__copy{

    opacity:1;

    transform:none;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-982e136 *//* =========================================================
   KENYA / MUSIC & RHYTHM
   DAILY LIFE

   DAYLIGHT / RADIO / QUIET INTERLUDE
========================================================= */

.kdaily{

  --sun:#D89B59;
  --gold:#B88A49;

  --sky:#8FA9AE;
  --blue:#4D6870;

  --paper:#EFE8D9;
  --paper-light:#F5F0E7;

  --ink:#172126;
  --muted:#626A68;

  position:relative;

  width:100%;

  min-height:
    clamp(680px,72vw,880px);

  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(420px,.92fr);

  overflow:hidden;

  background:var(--paper);

  color:var(--ink);
}


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



/* =========================================================
   VISUAL
========================================================= */

.kdaily__visual{

  position:relative;

  min-height:100%;

  overflow:hidden;

  background:#8FA9AE;

  isolation:isolate;
}


.kdaily__photo{

  position:absolute;

  inset:-3%;

  background-image:

    var(
      --daily-music-image,
      linear-gradient(
        135deg,
        #758C8E 0%,
        #A9AA91 42%,
        #D0A36D 72%,
        #E5C48B 100%
      )
    );

  background-size:cover;

  background-position:center;

  filter:
    saturate(.72)
    contrast(1.04);

  transform:scale(1.04);
}



/* =========================================================
   SHADE
========================================================= */

.kdaily__shade{

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      180deg,
      rgba(24,31,31,.04),
      rgba(24,31,31,.08) 45%,
      rgba(24,31,31,.54)
    ),

    linear-gradient(
      90deg,
      rgba(24,31,31,.08),
      transparent 50%
    );
}



/* =========================================================
   GHOST
========================================================= */

.kdaily__ghost{

  position:absolute;

  z-index:2;

  left:-2%;
  bottom:-3%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(100px,13vw,200px);

  line-height:.73;

  font-weight:900;

  letter-spacing:-.09em;

  color:
    rgba(255,255,255,.10);

  pointer-events:none;
}



/* =========================================================
   TIME
========================================================= */

.kdaily__time{

  position:absolute;

  z-index:4;

  left:
    clamp(28px,5vw,70px);

  top:
    clamp(28px,5vw,65px);

  display:flex;

  align-items:center;

  gap:14px;
}


.kdaily__time span{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;

  color:
    rgba(255,255,255,.70);
}


.kdaily__time strong{

  font-family:Georgia,serif;

  font-size:
    clamp(38px,4vw,58px);

  line-height:1;

  font-style:italic;

  font-weight:400;

  color:#F3D08E;
}



/* =========================================================
   CONTENT
========================================================= */

.kdaily__content{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    clamp(65px,8vw,115px)
    clamp(45px,7vw,105px);

  background:
    var(--paper-light);
}



/* =========================================================
   META
========================================================= */

.kdaily__meta{

  display:flex;

  justify-content:space-between;

  gap:20px;

  padding-bottom:14px;

  border-bottom:
    1px solid
    rgba(23,33,38,.15);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;
}


.kdaily__meta span{
  color:var(--gold);
}


.kdaily__meta strong{
  color:rgba(23,33,38,.36);
}



/* =========================================================
   COPY
========================================================= */

.kdaily__copy{

  margin-top:
    clamp(50px,6vw,80px);
}


.kdaily__eyebrow{

  margin:0 0 12px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--blue);
}


.kdaily h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(42px,4.8vw,69px);

  line-height:1.6;

  font-weight:500;

  letter-spacing:-.05em;

  line-break:strict;
}


.kdaily h2 span,
.kdaily h2 strong{
  display:block;
}


.kdaily h2 strong{

  color:var(--sun);

  font-size:1.22em;

  font-weight:500;
}



/* =========================================================
   LEAD
========================================================= */

.kdaily__lead{

  width:min(100%,520px);

  margin-top:
    clamp(30px,4vw,48px);
}


.kdaily__lead p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:var(--muted);
}


.kdaily__lead p + p{
  margin-top:14px;
}



/* =========================================================
   DAY SIGNAL
========================================================= */

.kdaily-signal{

  margin-top:
    clamp(45px,6vw,75px);

  padding-top:18px;

  border-top:
    2px solid var(--ink);
}



/* =========================================================
   SIGNAL TOP
========================================================= */

.kdaily-signal__top{

  display:flex;

  justify-content:space-between;

  gap:15px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;
}


.kdaily-signal__top span{
  color:rgba(23,33,38,.44);
}


.kdaily-signal__top strong{
  color:var(--sun);
}



/* =========================================================
   SIGNAL LINE
========================================================= */

.kdaily-signal__line{

  position:relative;

  height:28px;

  margin-top:13px;

  overflow:hidden;
}


.kdaily-signal__base{

  position:absolute;

  left:0;
  right:0;

  top:13px;

  height:1px;

  background:
    rgba(23,33,38,.17);
}


.kdaily-signal__wave{

  position:absolute;

  top:12px;

  width:25%;
  height:2px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--sun),
      transparent
    );

  animation:
    kdailyWave
    5.5s ease-in-out
    infinite;
}


.kdaily-signal__dot{

  position:absolute;

  top:8px;

  left:50%;

  width:11px;
  height:11px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    var(--sun);

  box-shadow:
    0 0 0 5px
    rgba(216,155,89,.10);
}


@keyframes kdailyWave{

  0%{
    transform:translateX(-110%);
  }

  100%{
    transform:translateX(450%);
  }

}



/* =========================================================
   LABELS
========================================================= */

.kdaily-signal__labels{

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:8px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.10em;

  color:
    rgba(23,33,38,.39);
}


.kdaily-signal__labels span:nth-child(4),
.kdaily-signal__labels span:nth-child(5){
  text-align:right;
}


.kdaily-signal__labels strong{

  text-align:center;

  color:var(--sun);
}



/* =========================================================
   NOTE
========================================================= */

.kdaily__note{

  display:grid;

  grid-template-columns:
    95px 1fr;

  gap:25px;

  margin-top:
    clamp(45px,6vw,75px);

  padding-top:
    clamp(25px,3vw,38px);

  border-top:
    1px solid rgba(23,33,38,.14);
}


.kdaily__note > span{

  font-family:"Courier New",monospace;

  font-size:7px;

  font-weight:700;

  letter-spacing:.07em;

  color:var(--blue);
}


.kdaily__note p{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(18px,1.8vw,25px);

  line-height:1.9;

  color:var(--ink);
}


.kdaily__note strong{

  color:var(--blue);

  font-weight:500;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  .kdaily{

    min-height:0;

    display:flex;

    flex-direction:column;
  }



  /* VISUAL */

  .kdaily__visual{

    height:
      min(110vw,500px);

    min-height:0;
  }


  .kdaily__photo{

    inset:0;

    transform:none;
  }


  .kdaily__ghost{

    font-size:
      clamp(78px,24vw,110px);
  }


  .kdaily__time{

    left:24px;
    top:23px;
  }



  /* CONTENT */

  .kdaily__content{

    padding:
      65px 24px
      78px;
  }


  .kdaily__meta strong{
    display:none;
  }


  .kdaily__copy{

    margin-top:42px;
  }


  .kdaily h2{

    font-size:
      clamp(35px,9.1vw,44px);

    line-height:1.68;
  }


  .kdaily__lead{

    margin-top:27px;
  }


  .kdaily__lead p{

    font-size:11px;

    line-height:1.95;
  }



  /* SIGNAL */

  .kdaily-signal{

    margin-top:45px;
  }


  .kdaily-signal__labels{

    font-size:4px;

    letter-spacing:.04em;
  }



  /* NOTE */

  .kdaily__note{

    display:block;

    margin-top:48px;
  }


  .kdaily__note p{

    margin-top:16px;

    font-size:
      clamp(19px,5.4vw,24px);
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .kdaily-signal__labels span:nth-child(2),
  .kdaily-signal__labels span:nth-child(4){
    display:none;
  }


  .kdaily-signal__labels{

    grid-template-columns:
      1fr 1fr 1fr;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .kdaily-signal__wave{
    animation:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ee4fb6a *//* =========================================================
   KENYA / MUSIC & RHYTHM
   ENDING

   FINAL RECORD / LAST GROOVE
========================================================= */

.kmusic-end{

  --navy:#093D52;
  --night:#08151D;

  --cream:#EEE7D8;
  --paper:#F4EFE5;

  --gold:#C7A35C;
  --orange:#BD6637;

  --ink:#172126;

  position:relative;

  width:100%;

  overflow:hidden;

  background:var(--night);

  color:#fff;
}


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



/* =========================================================
   MAIN
========================================================= */

.kmusic-end__main{

  position:relative;

  min-height:
    clamp(680px,75vw,920px);

  padding:
    clamp(85px,10vw,145px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:

    radial-gradient(
      circle at 80% 45%,
      rgba(199,163,92,.10),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #07131B,
      #0A2938 60%,
      #093D52
    );

  isolation:isolate;
}



/* =========================================================
   META
========================================================= */

.kmusic-end__meta{

  display:flex;

  justify-content:space-between;

  gap:25px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(255,255,255,.14);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.kmusic-end__meta span{
  color:var(--gold);
}


.kmusic-end__meta strong{
  color:rgba(255,255,255,.37);
}



/* =========================================================
   GRID
========================================================= */

.kmusic-end__grid{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(390px,.75fr);

  gap:
    clamp(60px,9vw,140px);

  align-items:center;

  margin-top:
    clamp(70px,9vw,125px);
}



/* =========================================================
   COPY
========================================================= */

.kmusic-end__eyebrow{

  margin:0 0 14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.2em;

  color:var(--gold);
}


.kmusic-end h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(47px,5.6vw,82px);

  line-height:1.58;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.kmusic-end h2 span,
.kmusic-end h2 strong{

  display:block;
}


.kmusic-end h2 strong{

  color:#DCC78F;

  font-weight:500;
}



/* =========================================================
   LEAD
========================================================= */

.kmusic-end__lead{

  width:min(100%,560px);

  margin-top:
    clamp(35px,5vw,60px);

  padding-left:20px;

  border-left:
    2px solid var(--orange);
}


.kmusic-end__lead p{

  margin:0;

  font-size:12px;

  line-height:2.1;

  color:rgba(255,255,255,.63);
}


.kmusic-end__lead p + p{
  margin-top:17px;
}



/* =========================================================
   RECORD AREA
========================================================= */

.kmusic-end__record{

  position:relative;

  width:min(100%,500px);

  aspect-ratio:1;

  margin-inline:auto;
}



/* =========================================================
   DISC
========================================================= */

.kmusic-end__disc{

  position:absolute;

  inset:5%;

  border-radius:50%;

  background:

    radial-gradient(
      circle,
      #C69B52 0 7%,
      #1A2226 7.2% 20%,
      #101719 20.3% 100%
    );

  box-shadow:

    0 40px 70px
    rgba(0,0,0,.32),

    inset 0 0 70px
    rgba(255,255,255,.025);

  animation:
    kmusicEndSpin
    24s linear infinite;
}



/* =========================================================
   GROOVES
========================================================= */

.kmusic-end__groove{

  position:absolute;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:50%;
}


.kmusic-end__groove.groove-01{

  width:94%;
  aspect-ratio:1;
}


.kmusic-end__groove.groove-02{

  width:77%;
  aspect-ratio:1;
}


.kmusic-end__groove.groove-03{

  width:61%;
  aspect-ratio:1;
}


.kmusic-end__groove.groove-04{

  width:43%;
  aspect-ratio:1;
}



/* =========================================================
   LABEL
========================================================= */

.kmusic-end__label{

  position:absolute;

  left:50%;
  top:50%;

  width:29%;

  aspect-ratio:1;

  transform:
    translate(-50%,-50%);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  border-radius:50%;

  background:
    var(--orange);

  text-align:center;
}


.kmusic-end__label small{

  font-family:Arial,sans-serif;

  font-size:4px;

  font-weight:800;

  letter-spacing:.18em;
}


.kmusic-end__label strong{

  margin:3px 0;

  font-family:Georgia,serif;

  font-size:
    clamp(22px,3vw,42px);

  font-style:italic;

  font-weight:400;
}


.kmusic-end__label span{

  font-family:Arial,sans-serif;

  font-size:4px;

  line-height:1.3;

  font-weight:900;

  letter-spacing:.11em;
}



/* =========================================================
   NEEDLE
========================================================= */

.kmusic-end__needle{

  position:absolute;

  z-index:5;

  right:0;
  top:6%;

  width:37%;
  height:56%;

  transform:
    rotate(18deg);

  transform-origin:
    83% 5%;
}


.kmusic-end__needle::before{

  content:"";

  position:absolute;

  right:0;
  top:0;

  width:38px;
  height:38px;

  border-radius:50%;

  background:
    var(--gold);

  box-shadow:
    0 0 0 8px
    rgba(199,163,92,.12);
}


.kmusic-end__needle i{

  position:absolute;

  right:18px;
  top:25px;

  width:2px;
  height:88%;

  transform:
    rotate(31deg);

  transform-origin:top;

  background:

    linear-gradient(
      180deg,
      var(--gold),
      rgba(255,255,255,.35)
    );
}



/* =========================================================
   RECORD ROTATION
========================================================= */

@keyframes kmusicEndSpin{

  to{
    transform:rotate(360deg);
  }

}



/* =========================================================
   GROOVE LINE
========================================================= */

.kmusic-end__groove-line{

  display:grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto 1fr
    auto 1fr
    auto;

  gap:12px;

  align-items:center;

  margin-top:
    clamp(70px,8vw,110px);

  padding-top:20px;

  border-top:
    1px solid
    rgba(255,255,255,.13);

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:rgba(255,255,255,.37);
}


.kmusic-end__groove-line i{

  height:1px;

  background:
    rgba(255,255,255,.14);
}


.kmusic-end__groove-line strong{
  color:var(--gold);
}



/* =========================================================
   LAST MESSAGE
========================================================= */

.kmusic-end__last{

  padding:
    clamp(95px,10vw,150px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--paper);

  color:var(--ink);
}


.kmusic-end__last > span{

  display:block;

  margin-bottom:18px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--orange);
}


.kmusic-end__last p{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(41px,5vw,72px);

  line-height:1.7;

  font-weight:500;

  letter-spacing:-.05em;
}


.kmusic-end__last p span,
.kmusic-end__last p strong{

  display:block;
}


.kmusic-end__last p strong{

  color:var(--navy);

  font-weight:500;
}



/* =========================================================
   END NAV
========================================================= */

.kmusic-end-nav{

  display:grid;

  grid-template-columns:
    .72fr
    1.28fr;

  min-height:
    clamp(270px,26vw,370px);
}


.kmusic-end-nav a{

  color:inherit;

  text-decoration:none;
}



/* =========================================================
   BACK
========================================================= */

.kmusic-end-nav__back{

  display:flex;

  align-items:center;

  gap:
    clamp(25px,4vw,55px);

  padding:
    clamp(45px,6vw,85px);

  background:#172126;

  color:#fff !important;

  transition:
    background .35s ease;
}


.kmusic-end-nav__back:hover{
  background:#202D32;
}


.kmusic-end-nav__arrow{

  font-family:Georgia,serif;

  font-size:
    clamp(28px,3vw,44px);

  color:var(--gold);
}


.kmusic-end-nav small,
.kmusic-end-nav span{

  display:block;

  font-family:Arial,sans-serif;
}


.kmusic-end-nav small{

  margin-bottom:8px;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kmusic-end-nav__back strong{

  display:block;

  font-family:Georgia,serif;

  font-size:
    clamp(35px,4vw,59px);

  font-weight:400;
}


.kmusic-end-nav__back span{

  margin-top:10px;

  font-size:10px;

  color:
    rgba(255,255,255,.49);
}



/* =========================================================
   NEXT
========================================================= */

.kmusic-end-nav__next{

  position:relative;

  overflow:hidden;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:35px;

  padding:
    clamp(45px,6vw,85px);

  background:
    var(--navy);

  color:#fff !important;

  transition:
    background .35s ease;
}


.kmusic-end-nav__next:hover{
  background:#0B4B63;
}


.kmusic-end-nav__next::before{

  content:"07";

  position:absolute;

  right:-1%;
  bottom:-32%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(160px,22vw,330px);

  line-height:1;

  font-weight:900;

  letter-spacing:-.12em;

  color:
    rgba(255,255,255,.045);

  pointer-events:none;
}


.kmusic-end-nav__next strong{

  position:relative;

  z-index:2;

  display:block;

  font-family:Arial,sans-serif;

  font-size:
    clamp(31px,4.2vw,63px);

  line-height:1;

  font-weight:900;

  letter-spacing:-.055em;
}


.kmusic-end-nav__next span{

  position:relative;

  z-index:2;

  margin-top:14px;

  font-size:10px;

  color:
    rgba(255,255,255,.58);
}



/* =========================================================
   NEXT ARROW
========================================================= */

.kmusic-end-nav__next-arrow{

  position:relative;

  z-index:3;

  width:
    clamp(52px,5vw,75px);

  height:
    clamp(52px,5vw,75px);

  flex:none;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius:50%;

  font-size:
    clamp(20px,2vw,28px);

  transition:
    transform .35s ease,
    background .35s ease;
}


.kmusic-end-nav__next:hover
.kmusic-end-nav__next-arrow{

  transform:rotate(45deg);

  background:
    rgba(255,255,255,.09);
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  /* MAIN */

  .kmusic-end__main{

    min-height:0;

    padding:
      75px 24px
      82px;
  }


  .kmusic-end__meta strong{
    display:none;
  }


  .kmusic-end__grid{

    display:flex;

    flex-direction:column;

    gap:65px;

    margin-top:48px;
  }


  .kmusic-end h2{

    font-size:
      clamp(35px,9.2vw,45px);

    line-height:1.7;
  }


  .kmusic-end__lead{

    margin-top:31px;

    padding-left:15px;
  }


  .kmusic-end__lead p{

    font-size:11px;

    line-height:1.95;
  }



  /* RECORD */

  .kmusic-end__record{

    width:
      min(100%,330px);
  }


  .kmusic-end__needle{

    right:-5%;
  }



  /* GROOVE LINE */

  .kmusic-end__groove-line{

    grid-template-columns:
      repeat(5,auto);

    justify-content:space-between;

    gap:8px;

    margin-top:55px;

    font-size:4px;
  }


  .kmusic-end__groove-line i{
    display:none;
  }



  /* LAST */

  .kmusic-end__last{

    padding:
      78px 24px
      88px;
  }


  .kmusic-end__last p{

    font-size:
      clamp(34px,9vw,44px);
  }



  /* NAV */

  .kmusic-end-nav{

    display:block;

    min-height:0;
  }


  .kmusic-end-nav__back,
  .kmusic-end-nav__next{

    min-height:195px;

    padding:
      38px 24px;
  }


  .kmusic-end-nav__next strong{

    font-size:
      clamp(32px,9vw,44px);
  }


  .kmusic-end-nav__next-arrow{

    width:52px;
    height:52px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .kmusic-end__groove-line{

    grid-template-columns:
      repeat(3,auto);

    justify-content:flex-start;

    gap:15px 22px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .kmusic-end__disc{
    animation:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-421ef3c *//* =========================================================
   KENYA / COUNTRY SHELL
   GLOBAL HEADER + FULLSCREEN MENU

   PASSPORT NAVIGATION × EDITORIAL MAGAZINE
========================================================= */

.kcountry-header{

  --navy:#093D52;
  --navy-deep:#062A39;

  --gold:#C3A05D;
  --orange:#BD6637;

  --paper:#EEE7D9;
  --ink:#172126;

  position:fixed;

  z-index:9998;

  top:0;
  left:0;

  width:100%;

  color:#fff;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    box-shadow .35s ease;
}


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


/* Elementor admin対策 */

body.elementor-editor-active
.kcountry-header{
  z-index:99999;
}



/* =========================================================
   HEADER STATE
========================================================= */

.kcountry-header.is-scrolled{

  background:
    rgba(9,61,82,.88);

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);

  box-shadow:
    0 8px 35px
    rgba(0,0,0,.10);
}


.kcountry-header.is-hidden{

  transform:
    translateY(-110%);
}


.kcountry-header.is-menu-open{

  transform:
    translateY(0) !important;

  background:transparent;

  box-shadow:none;
}



/* =========================================================
   BAR
========================================================= */

.kcountry-header__bar{

  position:relative;

  z-index:30;

  height:76px;

  display:grid;

  grid-template-columns:
    170px
    1fr
    auto
    105px;

  align-items:center;

  gap:
    clamp(20px,3vw,48px);

  padding:
    0
    clamp(28px,5vw,72px);

  border-bottom:
    1px solid rgba(255,255,255,.14);

  transition:
    height .35s ease;
}


.kcountry-header.is-scrolled
.kcountry-header__bar{

  height:64px;
}



/* =========================================================
   BRAND
========================================================= */

.kcountry-header a{
  text-decoration:none;
}


.kcountry-header__brand{

  display:flex;

  align-items:center;

  gap:6px;

  color:#fff;
}


.kcountry-header__brand span,
.kcountry-header__brand strong{

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.15em;

  white-space:nowrap;
}


.kcountry-header__brand span{
  color:rgba(255,255,255,.65);
}


.kcountry-header__brand strong{
  color:#fff;
}



/* =========================================================
   COUNTRY
========================================================= */

.kcountry-header__country{

  justify-self:start;

  display:flex;

  align-items:center;

  gap:11px;

  color:#fff;
}


.kcountry-header__country span{

  font-family:Georgia,serif;

  font-size:21px;

  font-style:italic;

  letter-spacing:.02em;
}


.kcountry-header__country i{

  width:25px;
  height:1px;

  background:
    var(--gold);
}


.kcountry-header__country small{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    rgba(255,255,255,.48);
}



/* =========================================================
   CURRENT
========================================================= */

.kcountry-header__current{

  display:flex;

  align-items:center;

  gap:17px;
}


.kcountry-header__current-count{

  min-width:45px;

  font-family:Georgia,serif;

  font-size:15px;

  font-style:italic;

  text-align:right;

  color:var(--gold);
}


.kcountry-header__current-name{

  padding-left:16px;

  border-left:
    1px solid
    rgba(255,255,255,.17);
}


.kcountry-header__current-name small{

  display:block;

  margin-bottom:2px;

  font-family:Arial,sans-serif;

  font-size:4px;

  font-weight:800;

  letter-spacing:.16em;

  color:
    rgba(255,255,255,.38);
}


.kcountry-header__current-name strong{

  display:block;

  max-width:220px;

  overflow:hidden;

  text-overflow:ellipsis;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.11em;

  white-space:nowrap;

  color:#fff;
}



/* =========================================================
   MENU BUTTON
========================================================= */

.kcountry-header__menu-button{

  appearance:none;

  border:0;

  padding:0;

  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:13px;

  background:none;

  color:#fff;

  cursor:pointer;
}


.kcountry-header__menu-label{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;
}



/* HAMBURGER */

.kcountry-header__hamburger{

  position:relative;

  width:28px;
  height:18px;
}


.kcountry-header__hamburger i{

  position:absolute;

  left:0;

  width:100%;
  height:1px;

  background:#fff;

  transition:
    top .35s ease,
    transform .35s ease;
}


.kcountry-header__hamburger i:first-child{
  top:5px;
}


.kcountry-header__hamburger i:last-child{
  top:13px;
}


.kcountry-header.is-menu-open
.kcountry-header__hamburger i:first-child{

  top:9px;

  transform:
    rotate(45deg);
}


.kcountry-header.is-menu-open
.kcountry-header__hamburger i:last-child{

  top:9px;

  transform:
    rotate(-45deg);
}



/* =========================================================
   PAGE PROGRESS
========================================================= */

.kcountry-header__progress{

  position:absolute;

  z-index:31;

  left:0;
  right:0;

  bottom:-1px;

  height:2px;

  overflow:hidden;
}


.kcountry-header__progress i{

  display:block;

  width:
    var(--country-page-progress,0%);

  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      #E0C98B
    );

  transform-origin:left;
}



/* =========================================================
   FULLSCREEN MENU
========================================================= */

.kcountry-menu{

  position:fixed;

  z-index:20;

  inset:0;

  height:100svh;

  overflow:hidden;

  visibility:hidden;

  opacity:0;

  pointer-events:none;

  background:
    var(--navy-deep);

  color:#fff;

  clip-path:
    inset(0 0 100% 0);

  transition:
    clip-path .7s
      cubic-bezier(.22,.85,.2,1),
    opacity .25s ease,
    visibility .7s;
}


.kcountry-header.is-menu-open
.kcountry-menu{

  visibility:visible;

  opacity:1;

  pointer-events:auto;

  clip-path:
    inset(0 0 0 0);
}



/* =========================================================
   MENU TOP
========================================================= */

.kcountry-menu__top{

  position:absolute;

  z-index:20;

  left:0;
  right:0;
  top:0;

  height:76px;

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  padding:
    0
    clamp(28px,5vw,72px);

  border-bottom:
    1px solid
    rgba(255,255,255,.13);
}


.kcountry-menu__kenya{

  justify-self:start;

  font-family:Georgia,serif;

  font-size:23px;

  font-style:italic;

  color:#fff;
}


.kcountry-menu__top > span{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.20em;

  color:
    rgba(255,255,255,.42);
}



/* CLOSE */

.kcountry-menu__close{

  appearance:none;

  justify-self:end;

  border:0;

  display:flex;

  align-items:center;

  gap:13px;

  padding:0;

  background:none;

  color:#fff;

  cursor:pointer;
}


.kcountry-menu__close span{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;
}


.kcountry-menu__close i{

  position:relative;

  width:27px;
  height:27px;

  transform:
    rotate(45deg);
}


.kcountry-menu__close i::before,
.kcountry-menu__close i::after{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  background:#fff;

  transform:
    translate(-50%,-50%);
}


.kcountry-menu__close i::before{

  width:100%;
  height:1px;
}


.kcountry-menu__close i::after{

  width:1px;
  height:100%;
}



/* =========================================================
   MENU BODY
========================================================= */

.kcountry-menu__body{

  height:100%;

  display:grid;

  grid-template-columns:
    minmax(520px,55%)
    minmax(0,45%);

  padding-top:76px;
}



/* =========================================================
   NAVIGATION
========================================================= */

.kcountry-menu__navigation{

  min-height:0;

  overflow-y:auto;

  padding:
    clamp(45px,6vw,80px)
    clamp(38px,6vw,90px)
    70px;

  background:
    var(--paper);

  color:var(--ink);

  scrollbar-width:thin;
}



/* =========================================================
   SECTION
========================================================= */

.kcountry-menu__section{

  margin-bottom:
    clamp(42px,5vw,65px);
}


.kcountry-menu__section-label{

  margin:0;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--orange);
}


.kcountry-menu__section-head{

  display:flex;

  justify-content:space-between;

  gap:25px;

  margin-bottom:15px;
}


.kcountry-menu__section-head > span{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.15em;

  color:
    rgba(23,33,38,.34);
}



/* =========================================================
   COUNTRY TOP
========================================================= */

.kcountry-menu__top-link{

  display:grid;

  grid-template-columns:
    45px 1fr auto;

  gap:13px;

  align-items:end;

  margin-top:17px;

  padding:
    22px 0;

  border-top:
    1px solid rgba(23,33,38,.15);

  border-bottom:
    1px solid rgba(23,33,38,.15);

  color:var(--ink);
}


.kcountry-menu__top-link > span{

  font-family:Georgia,serif;

  font-size:18px;

  font-style:italic;

  color:var(--orange);
}


.kcountry-menu__top-link strong{

  font-family:Arial,sans-serif;

  font-size:
    clamp(31px,3vw,46px);

  line-height:.9;

  font-weight:900;

  letter-spacing:-.055em;
}


.kcountry-menu__top-link small{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.16em;

  color:
    rgba(23,33,38,.38);
}



/* =========================================================
   STORIES
========================================================= */

.kcountry-menu__stories{

  border-top:
    1px solid rgba(23,33,38,.16);
}


.kcountry-menu__stories a{

  position:relative;

  display:grid;

  grid-template-columns:
    42px
    minmax(190px,1fr)
    minmax(120px,.55fr)
    25px;

  gap:
    clamp(10px,2vw,23px);

  align-items:center;

  min-height:
    clamp(59px,5vw,73px);

  border-bottom:
    1px solid rgba(23,33,38,.13);

  color:var(--ink);

  transition:
    padding-left .35s ease,
    color .35s ease;
}


.kcountry-menu__stories a::before{

  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:0;

  background:var(--navy);

  transition:
    width .35s
    cubic-bezier(.2,.8,.2,1);
}


.kcountry-menu__stories a:hover,
.kcountry-menu__stories a.is-current{

  padding-left:15px;

  color:var(--navy);
}


.kcountry-menu__stories a:hover::before,
.kcountry-menu__stories a.is-current::before{

  width:3px;
}


.kcountry-menu__stories small{

  position:relative;

  font-family:Georgia,serif;

  font-size:15px;

  font-style:italic;

  color:var(--orange);
}


.kcountry-menu__stories strong{

  position:relative;

  font-family:Arial,sans-serif;

  font-size:
    clamp(13px,1.3vw,18px);

  line-height:1;

  font-weight:900;

  letter-spacing:-.015em;
}


.kcountry-menu__stories span{

  position:relative;

  font-size:9px;

  color:
    rgba(23,33,38,.48);
}


.kcountry-menu__stories i{

  position:relative;

  font-family:Georgia,serif;

  font-size:17px;

  font-style:normal;

  color:
    rgba(23,33,38,.35);

  transition:
    transform .3s ease;
}


.kcountry-menu__stories a:hover i{

  transform:
    translate(3px,-3px);
}



/* CURRENT LABEL */

.kcountry-menu__stories a.is-current
strong::after{

  content:"NOW";

  display:inline-block;

  margin-left:11px;

  padding:
    3px 5px;

  vertical-align:middle;

  background:var(--navy);

  color:#fff;

  font-size:4px;

  letter-spacing:.14em;
}



/* =========================================================
   TRAVEL
========================================================= */

.kcountry-menu__travel{

  margin:
    clamp(55px,6vw,80px)
    0;
}


.kcountry-menu__travel-link{

  position:relative;

  overflow:hidden;

  margin-top:15px;

  padding:
    clamp(30px,4vw,48px);

  background:
    var(--navy);

  color:#fff;
}


.kcountry-menu__travel-link::before{

  content:"TRAVEL";

  position:absolute;

  right:-3%;
  bottom:-28%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(105px,12vw,180px);

  line-height:.8;

  font-weight:900;

  letter-spacing:-.08em;

  color:
    rgba(255,255,255,.045);
}


.kcountry-menu__travel-link > div{

  position:relative;

  z-index:2;
}


.kcountry-menu__travel-link span{

  display:block;

  margin-bottom:8px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.kcountry-menu__travel-link strong{

  display:block;

  font-family:Arial,sans-serif;

  font-size:
    clamp(30px,3.7vw,54px);

  line-height:.92;

  font-weight:900;

  letter-spacing:-.05em;
}


.kcountry-menu__travel-link small{

  display:block;

  margin-top:16px;

  font-size:9px;

  color:
    rgba(255,255,255,.56);
}


.kcountry-menu__travel-link em{

  position:absolute;

  z-index:3;

  right:
    clamp(20px,3vw,38px);

  top:
    clamp(20px,3vw,38px);

  padding:
    7px 9px;

  border:
    1px solid rgba(255,255,255,.24);

  font-family:Arial,sans-serif;

  font-size:5px;

  font-style:normal;

  font-weight:800;

  letter-spacing:.15em;

  color:
    rgba(255,255,255,.57);
}



/* =========================================================
   JAPAN PR DESK
========================================================= */

.kcountry-menu__desk{

  padding-top:
    clamp(40px,5vw,60px);

  border-top:
    1px solid rgba(23,33,38,.15);
}


.kcountry-menu__desk a{

  display:grid;

  grid-template-columns:
    auto 1fr;

  gap:
    2px 13px;

  margin-top:18px;

  color:var(--ink);
}


.kcountry-menu__desk a > span{

  grid-column:1;

  font-family:Georgia,serif;

  font-size:
    clamp(32px,4vw,55px);

  line-height:.9;

  font-style:italic;

  color:var(--orange);
}


.kcountry-menu__desk a strong{

  grid-column:2;

  font-family:Arial,sans-serif;

  font-size:
    clamp(31px,4vw,56px);

  line-height:.9;

  font-weight:900;

  letter-spacing:-.05em;
}


.kcountry-menu__desk a small{

  grid-column:2;

  margin-top:9px;

  font-size:9px;

  color:
    rgba(23,33,38,.47);
}


.kcountry-menu__desk a i{

  position:absolute;

  right:
    clamp(38px,6vw,90px);

  font-family:Georgia,serif;

  font-size:24px;

  font-style:normal;

  color:var(--orange);
}



/* =========================================================
   PREVIEW
========================================================= */

.kcountry-menu__preview{

  position:relative;

  overflow:hidden;

  background:#182E36;

  isolation:isolate;
}


.kcountry-menu__preview-layer{

  position:absolute;

  inset:0;

  opacity:0;

  transform:
    scale(1.05);

  transition:
    opacity .55s ease,
    transform 1s
      cubic-bezier(.2,.8,.2,1);

  background-size:cover;
  background-position:center;

  pointer-events:none;
}


.kcountry-menu__preview-layer::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      180deg,
      rgba(6,27,36,.03),
      rgba(6,27,36,.12) 45%,
      rgba(6,27,36,.87)
    ),

    linear-gradient(
      90deg,
      rgba(6,27,36,.25),
      transparent 60%
    );
}


.kcountry-menu__preview-layer.is-active{

  opacity:1;

  transform:
    scale(1);
}



/* =========================================================
   PREVIEW IMAGES

   写真差し替え時は
   各CSS変数へ url(...) を設定
========================================================= */

.kcountry-menu__preview-layer[data-preview-layer="country"]{

  background-image:

    var(
      --menu-country-image,
      linear-gradient(
        135deg,
        #416658,
        #B28A5B
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="nature"]{

  background-image:

    var(
      --menu-nature-image,
      linear-gradient(
        135deg,
        #465843,
        #B49757
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="nairobi"]{

  background-image:

    var(
      --menu-nairobi-image,
      linear-gradient(
        135deg,
        #263F4D,
        #9B694E
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="coast"]{

  background-image:

    var(
      --menu-coast-image,
      linear-gradient(
        135deg,
        #397B83,
        #D4C18D
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="food"]{

  background-image:

    var(
      --menu-food-image,
      linear-gradient(
        135deg,
        #653E30,
        #D18B4D
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="heritage"]{

  background-image:

    var(
      --menu-heritage-image,
      linear-gradient(
        135deg,
        #665D4B,
        #B7A279
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="music"]{

  background-image:

    var(
      --menu-music-image,
      linear-gradient(
        135deg,
        #3D214D,
        #C65D50
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="people"]{

  background-image:

    var(
      --menu-people-image,
      linear-gradient(
        135deg,
        #405E53,
        #C38B63
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="travel"]{

  background-image:

    var(
      --menu-travel-image,
      linear-gradient(
        135deg,
        #315E70,
        #C8AD70
      )
    );
}


.kcountry-menu__preview-layer[data-preview-layer="desk"]{

  background-image:

    var(
      --menu-desk-image,
      linear-gradient(
        135deg,
        #093D52,
        #A67C37
      )
    );
}



/* =========================================================
   PREVIEW COPY
========================================================= */

.kcountry-preview__copy{

  position:absolute;

  z-index:3;

  left:
    clamp(40px,6vw,90px);

  right:
    clamp(40px,6vw,90px);

  bottom:
    clamp(75px,9vw,130px);

  color:#fff;
}


.kcountry-preview__copy small{

  display:block;

  margin-bottom:13px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--gold);
}


.kcountry-preview__copy strong{

  display:block;

  font-family:Arial,sans-serif;

  font-size:
    clamp(55px,7vw,105px);

  line-height:.78;

  font-weight:900;

  letter-spacing:-.07em;
}


.kcountry-preview__copy span{

  display:block;

  margin-top:22px;

  font-family:Arial,sans-serif;

  font-size:
    clamp(9px,1vw,13px);

  line-height:1.5;

  font-weight:800;

  letter-spacing:.09em;

  color:
    rgba(255,255,255,.62);
}



/* =========================================================
   PREVIEW INDEX
========================================================= */

.kcountry-menu__preview-index{

  position:absolute;

  z-index:10;

  left:
    clamp(40px,6vw,90px);

  right:
    clamp(40px,6vw,90px);

  bottom:
    clamp(30px,4vw,55px);

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:13px;

  align-items:center;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    rgba(255,255,255,.45);
}


.kcountry-menu__preview-index i{

  height:1px;

  background:
    rgba(255,255,255,.24);
}


.kcountry-menu__preview-index strong{
  color:var(--gold);
}



/* =========================================================
   MENU OPEN BODY LOCK
========================================================= */

html.kcountry-menu-open,
body.kcountry-menu-open{

  overflow:hidden !important;
}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  /* HEADER */

  .kcountry-header__bar{

    height:60px;

    grid-template-columns:
      1fr auto 1fr;

    gap:10px;

    padding:
      0 20px;
  }


  .kcountry-header.is-scrolled
  .kcountry-header__bar{

    height:56px;
  }



  /* BRAND */

  .kcountry-header__brand{

    gap:4px;
  }


  .kcountry-header__brand span,
  .kcountry-header__brand strong{

    font-size:5px;

    letter-spacing:.10em;
  }



  /* COUNTRY */

  .kcountry-header__country{

    justify-self:center;
  }


  .kcountry-header__country span{

    font-size:18px;
  }


  .kcountry-header__country i,
  .kcountry-header__country small{

    display:none;
  }



  /* CURRENT */

  .kcountry-header__current{
    display:none;
  }



  /* BUTTON */

  .kcountry-header__menu-button{

    justify-self:end;

    gap:8px;
  }


  .kcountry-header__menu-label{
    display:none;
  }


  .kcountry-header__hamburger{

    width:25px;
  }



  /* MENU */

  .kcountry-menu__top{

    height:60px;

    grid-template-columns:
      1fr auto;

    padding:
      0 20px;
  }


  .kcountry-menu__top > span{
    display:none;
  }


  .kcountry-menu__kenya{

    font-size:19px;
  }


  .kcountry-menu__close span{
    display:none;
  }


  .kcountry-menu__close i{

    width:23px;
    height:23px;
  }



  /* BODY */

  .kcountry-menu__body{

    position:relative;

    display:block;

    padding-top:60px;
  }



  /* PREVIEW = BACKGROUND */

  .kcountry-menu__preview{

    position:absolute;

    z-index:1;

    inset:60px 0 0;

    opacity:.32;
  }


  .kcountry-menu__preview::after{

    content:"";

    position:absolute;

    z-index:8;

    inset:0;

    background:
      rgba(6,31,41,.66);
  }


  .kcountry-preview__copy,
  .kcountry-menu__preview-index{

    display:none;
  }



  /* NAV */

  .kcountry-menu__navigation{

    position:relative;

    z-index:5;

    height:calc(100svh - 60px);

    padding:
      42px 22px
      65px;

    background:
      rgba(7,39,50,.84);

    color:#fff;

    -webkit-backdrop-filter:
      blur(8px);

    backdrop-filter:
      blur(8px);
  }


  .kcountry-menu__section{

    margin-bottom:40px;
  }


  .kcountry-menu__section-label{

    color:var(--gold);
  }


  .kcountry-menu__section-head > span{
    display:none;
  }



  /* TOP */

  .kcountry-menu__top-link{

    color:#fff;

    border-color:
      rgba(255,255,255,.16);
  }


  .kcountry-menu__top-link > span{
    color:var(--gold);
  }


  .kcountry-menu__top-link small{

    color:
      rgba(255,255,255,.42);
  }



  /* STORIES */

  .kcountry-menu__stories{

    border-color:
      rgba(255,255,255,.17);
  }


  .kcountry-menu__stories a{

    grid-template-columns:
      34px 1fr auto;

    min-height:62px;

    color:#fff;

    border-color:
      rgba(255,255,255,.13);
  }


  .kcountry-menu__stories a:hover,
  .kcountry-menu__stories a.is-current{

    padding-left:10px;

    color:#fff;
  }


  .kcountry-menu__stories small{

    color:var(--gold);
  }


  .kcountry-menu__stories strong{

    font-size:
      clamp(13px,4vw,17px);
  }


  .kcountry-menu__stories span{
    display:none;
  }


  .kcountry-menu__stories i{

    color:
      rgba(255,255,255,.46);
  }


  .kcountry-menu__stories a::before{

    background:var(--gold);
  }


  .kcountry-menu__stories a.is-current
  strong::after{

    background:var(--gold);

    color:var(--navy);
  }



  /* TRAVEL */

  .kcountry-menu__travel{

    margin:
      45px 0;
  }


  .kcountry-menu__travel-link{

    padding:
      29px 22px;

    background:
      rgba(9,61,82,.87);

    border:
      1px solid
      rgba(255,255,255,.16);
  }


  .kcountry-menu__travel-link strong{

    font-size:
      clamp(30px,9vw,42px);
  }


  .kcountry-menu__travel-link em{

    top:20px;
    right:20px;
  }



  /* DESK */

  .kcountry-menu__desk{

    border-color:
      rgba(255,255,255,.17);
  }


  .kcountry-menu__desk a{

    color:#fff;
  }


  .kcountry-menu__desk a > span{

    color:var(--gold);
  }


  .kcountry-menu__desk a small{

    color:
      rgba(255,255,255,.50);
  }


  .kcountry-menu__desk a i{

    right:25px;

    color:var(--gold);
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:390px){

  .kcountry-header__bar{

    padding:
      0 17px;
  }


  .kcountry-menu__navigation{

    padding-left:19px;
    padding-right:19px;
  }


  .kcountry-menu__stories a{

    grid-template-columns:
      30px 1fr 20px;
  }


  .kcountry-menu__stories strong{

    font-size:12px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .kcountry-header *,
  .kcountry-header *::before,
  .kcountry-header *::after{

    animation:none !important;

    transition-duration:.01ms !important;
  }

}
/* =========================================================
   FIX / MENU OPEN
   通常ヘッダーとCLOSEの二重表示を防ぐ
========================================================= */

.kcountry-header__bar{
  transition:
    height .35s ease,
    opacity .2s ease;
}


.kcountry-header.is-menu-open
.kcountry-header__bar{

  opacity:0;

  pointer-events:none;
}


.kcountry-header.is-menu-open
.kcountry-header__progress{

  opacity:0;
}/* End custom CSS */