:root{
  --tab-bg:#8fb7a5;
  --tab-bg-hover:#61977e;
  --tab-bg-active:#426756;
  --tab-border:#426756;
  --page-bg:#d0d9cd;
  --text:#434040;
  --content-max: 700px;

  --list-width: 160px;
  --col-gap: 20px;

  --audio-bg:#dbe0da;
  --audio-accent:#426756;
  --audio-knob:#426756;
  --audio-text:#434040;
}

* { box-sizing: border-box;}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: "Lora", serif;
  font-size: clamp(15px, 1.1vw + 0.5rem, 18px);
  line-height: 1.6;
  color: var(--text);
  background: var(--page-bg);
}

:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.banner-image{
  position: relative;
  width: 100%;
  background: url('img/banner_v3.jpg') top center / cover no-repeat;
  overflow: hidden;
  top: -2px;
  padding-top: calc(clamp(150px, 18vw, 270px) + 20px);
}

.banner-title {
  position: absolute;
  top: 10rem;
  left: 50%;
  transform: translateX(-50%);
  color: #d0d9cd;
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  word-spacing: 0.5em;
  text-align: center;
  font-weight: 10;
  width: 100%;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.tablist{
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8rem;
  width: min(100%, 1200px);
  margin: 0 auto;
  margin-top: -30px;
}

[role="tab"]{
  position: relative;
  background: none !important;
  border: none;
  color: #9e4242;
  margin: 0;
  padding: .4rem .8rem;
  overflow: visible;
  font-size: clamp(21px, 1.9vw, 19px);
}

.tablist button[role="tab"] {
  color: #d0d9cd;
  background: none;
  border: none;
  font-family: "Lora", serif;
  font-weight: 500;
  cursor: pointer;
  padding: 0.79rem 1rem;
  margin: 0 1.5rem;
  font-size: 1.5rem;
}

.tablist button[role="tab"][aria-selected="true"] {
  color: #c4a234;
}

.tablist button[role="tab"]:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.panels{
  border-radius: 0 0 .0rem .75rem;
  background:#d0d9cd;
  margin: 0 auto 4rem;
  width: min(100%, 1200px);
}

[role="tabpanel"]{
  display: none;
  padding: clamp(12px, 2vw, 24px);
  min-height: 40vh;
}

[role="tabpanel"][data-active="true"]{
  display: block;
}

#panel-info { padding-bottom: 5rem; }

.panel-content{
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  padding-bottom: 2rem;
}

.left-align { text-align: left; }

.panel-content h4{ margin-bottom: 0.9rem; }

ul li.indent { text-indent: 1rem; }

#panel-map .panel-content { max-width: var(--content-max); margin: 0 auto; }

#map-root{ position: relative; z-index: auto;}
#panel-map{ padding-bottom: 40rem; padding-top: 0rem; }

#region-popovers{
  position: relative;
  min-height: 40px;
  z-index: 20;
}

.region-popover{
  position: absolute;
  left: 0;
  width: min(var(--pop-maxw, 720px), 100%);
  max-width: 100%;
  background: var(--pop-bg, #fff);
  color: var(--pop-fg, #202020);
  border: 1px solid var(--pop-border, #ccc);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  padding: var(--pop-pad, 12px 14px);
  font-family: var(--pop-font, "Lora", serif);
  font-size: var(--pop-size, 14px);
  line-height: 1.45;
  z-index: 10;
}

.region-popover .pop-title{ font-weight: 700; margin-bottom: .35rem; }

#geo-map .region-label {
  font-family: "Lora", serif;
  font-weight: 570;
  font-size: 17px;
  fill: #454242;
  pointer-events: none;
}

.macro-panels-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.macro-panel{
  position: absolute !important;
  max-width: 900px;
  width: min(900px, calc(100vw - 48px));
  background: #e7e7de;
  color: #202020;
  border: 4px solid #a2beac;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  padding-left: 40px;
  padding-right: 40px;
  font-family: "Lora", serif;
  font-size: 1rem;
  line-height: 1.3;
  z-index: 999999;
  opacity: 1;
  pointer-events: auto;
  isolation: isolate;
  transform: translateZ(0);
}

.macro-close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.macro-label{ font-weight: 700; font-size: 24px; text-anchor: middle; }

#region-list .region-item{ display: block; padding: 8px 10px; line-height: 1.2; cursor: pointer; border-radius: 6px; white-space: nowrap; }
#region-list .region-item:hover, #region-list .region-item.is-active{ background: rgba(0,0,0,0.06); }

#map-tooltip {
  position: absolute;
  display: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  padding: 10px;
  pointer-events: none;
  z-index: 1000;
  font-size: 14px;
  max-width: 260px;
  border: 1px solid #ccc;
  color: #202020;
  font-family: "Lora", serif;
}

.chart-legend { max-width: 700px; margin: 0 auto; font-size: 16px; padding-bottom: 0px; color:var(--text); }
.chart-instr{ max-width: 610px; margin: 0 auto; font-size: 17px; padding-bottom: 0px; padding-top: 0px; color:#2c2a2a; }
.tuning-svg { width: 80%; max-width: 1100px; display: block; margin: 0 auto; }

#panel-tuning { position: relative; z-index: 0; }

.tuning-icon-header  { top: -30px; left: 240px;}

.tuning-icon-header2 { 
  position: relative;        
  top: -39px;
  left: 250px;
  z-index: 0;
  pointer-events: auto;
}

.audio-player{
  position: fixed;
  top: 10px;
  right: 16px;
  width: 530px;
  background: #d3dbd1;
  border:4px solid #5a7263;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2); 
  z-index: 1500;
  display: none;
  justify-content: center;
}

.audio-inner{ 
  position: relative;
  overflow: visible !important;
  width: 500px;
  max-width: 100%;
}

.audio-close{
  position: absolute;
  top: 10px;
  right: -15px;
  border: none;
  background: none;
  color: var(--player-accent);
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

.audio-now{ 
  font-size: 17px; 
  margin: 0 0 0px 0px; 
  font-weight: 550; 
  color:#434040
}

.audio-border-wrap {
  width: 100%;
  margin-left: .2rem;
  border-radius: 10px;
  padding: 4px 6px;
  display: block;
}

#audio-player-container audio {
  display: none;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #d0d9cd;
  border-radius: 999px;
  padding: 6px 10px;
}

#audio-play {
  border: none;
  background: var(--player-accent);
  color: #d0d9cd;
  border-radius: 999px;
  width:35px;
  height: 35px;
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 14px;
  margin-top: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#audio-play.paused {
  background: color-mix(in srgb, var(--player-accent) 55%, var(--player-accent) 45%);
  margin-top: 1.3rem
}

#audio-time {
  font-size: 0.95rem;
  white-space: nowrap;
  margin-top: 1.3rem
}

#audio-seek { 
  accent-color: var(--player-accent); 
  width: 15.5rem;
  margin-top: 1.23rem; 
  height: 3px;
} 

#audio-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--player-accent);
  width: 19px;
  height: 14px;
  border-radius: 50%;
}

#audio-seek::-moz-range-thumb {
  background: var(--player-accent);
  width: 19px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
}

#now-playing {
  margin-left: 0.5rem;
  margin-bottom: 0;
}

#now-playing-panel{
  margin-left: 0.5rem;
  padding-top: 1rem;
  margin-top: 0rem;
  margin-bottom: -1rem;
  font-size: 1.05rem;
  line-height: 1rem;
  margin-right: 2rem;
}

#now-playing.is-open::after{
  content: "";
}

#now-playing.accordion-header::before{
  content: none !important;
}

#audio-mute{
  border: none;
  background: transparent;
  padding: 0;
  margin-top: 1.3rem;
  line-height: 0;
  cursor: pointer;
  position: relative;
  color: var(--player-accent);
}

#audio-mute svg{
  width: 28px;
  height: 28px;
  display: block;
}

#audio-mute.is-muted::before,
#audio-mute.is-muted::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2.5px;
  background: currentColor;
  transform-origin: center;
}

#audio-mute.is-muted::before{ transform: translate(-50%,-50%) rotate(45deg); }
#audio-mute.is-muted::after { transform: translate(-50%,-50%) rotate(-45deg); }

#audio-volume{
  accent-color: var(--player-accent);
  width: 3.2rem;
  margin-top: 1.3rem;
  height: 3px;
}

#audio-volume::-webkit-slider-thumb{
  -webkit-appearance: none;
  background: var(--player-accent);
  width: 19px;
  height: 14px;
  border-radius: 50%;
}

#audio-volume::-moz-range-thumb{
  background: var(--player-accent);
  width: 19px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
}

#audio-player-container{ z-index: 999999 !important; }

.beige { color: #cd9138; font-size: 20pt; font-weight: bold; }
.green { color: #2e9a78; font-size: 20pt; font-weight: bold; }
.blue  { color: #4562a6; font-size: 20pt; font-weight: bold; }
.pink  { color: #c3679f; font-size: 20pt; font-weight: bold; }

.accordion-block{ 
  margin-top: 0px; 
  font-size: 1.8rem; 
  margin-bottom: 0rem; 
  margin-left: 3.5rem; 
}

.accordion-header{ 
  position: relative; 
  margin-top: 0.1rem;
  margin-left: -1.8rem; 
  font-size: 1.3rem; 
  font-weight: 500;
}

.accordion-header::before{
  content: "▾"; 
  display: inline-block; 
  color: #8fb7a5; 
  margin-right: 6px;
  transition: transform .1s ease; 
  vertical-align: middle; 
  font-size: 1.7rem;
}

.tuning-icon-header::before, .tuning-icon-header2::before { content: none !important; }

#audio-player-container .accordion-header::before { 
  color: currentColor; 
  font-size: 1.9rem; 
  margin-left: 0.2rem;
}

.accordion-header.is-open::before{ transform: rotate(180deg); }

h4.accordion-header{
  text-align: justify; 
  color: #434040; 
  font-size: 1.3rem; 
  bottom: 0rem; 
  left: 0.5rem; 
  top: 1rem;
  font-weight: 400;
}

.accordion-panel{
  max-height: 0; 
  font-size: 1.1rem; 
  overflow: hidden; 
  transition: max-height 0.20s ease, opacity 0.05s ease;
  opacity: 0; 
  padding: 0;
  position: relative;
  z-index: 50;
}

.accordion-panel.is-open{
  max-height: 2000px; 
  opacity: 1; 
  border: 1px solid #3a6040; 
  border-radius: 10px; 
  padding: 15px;
  margin-left: -1.7rem;
  background:#d0d9cd;
  font-size: 1rem;
  z-index: 50;
}

#audio-player-container .accordion-panel.is-open { 
  border: none !important; 
  padding-top: 5px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 15px !important;
  border-radius: 0 !important; 
  margin-top: 0px;
}

#region-description{
  margin-top: -1.3rem;
  line-height: 1rem;
  margin-bottom: 0.5rem;
  margin-right: 2rem;
}

.ka { font-size: 0.85em; font-style: normal; }

.legend-line { position: absolute; height: 1px; background: #444; }
.legend-label { position: absolute; font-size: 16px; color: #6a6464; }

@media (max-width: 480px){
  .banner-image{ padding-top: 40%;position: relative; }
  
  .tablist{
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: min(100%, 1200px);
    margin: 0 auto;
    margin-top: -48px;
  }

  .tablist [role="tab"]{ 
    padding: .55rem .8rem; 
    font-size: 1.8rem; 
    margin: 0 .75rem; 
  }

  .tuning-svg{ width: 94%; }
  #audio-player-container{ width: min(92vw, 520px); right: 4vw; left: 4vw; }
}

@media (min-width:600px) and (max-width:1024px){
  .banner-image{ padding-top: 22%; }
  .tablist{
    left: 50%;
    transform: translateX(-50%);
    justify-content:center;
    gap: .35rem;
  }

  .tuning-svg{ width: 92%; }
  #audio-player-container{ width: 520px; right: 12px; }
  .macro-panel{ font-size: 0.98rem; padding-left: 28px; padding-right: 28px; z-index: 9999;}
}