:root{
      --bg: #F9F7F2;
      --ink: #4F5256;
      --muted: #5b6b85;
      --blue-1: #0026FF;
      --blue-2: #2563eb;
      --blue-3: #dbeafe;
      --green-1: #0f766e;
      --green-2: #a7f3d0;
      --gold: #c0902e;
      --card: #ffffff;
      --border: #d7dfeb;
      --shadow: 0 8px 24px rgba(10, 28, 65, .08), 0 1px 2px rgba(10, 28, 65, .06);
      --radius: 16px;
      --radius-sm: 12px;
      --container: 1200px;
	  --accent: #2563eb;
	  --text: #1f2937;
	  --muted: #4b5563;
	  --error: #FF0000;
	  --success: #00FF00;
    }

    html,body{height:100%;}
	html {scroll-behavior: smooth;}
    body{margin:0;padding:0;color:var(--ink);background:var(--bg);font:18px/1.55 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
    .container{max-width:var(--container);margin:0 auto;padding:0 20px;}

    .site-header{background:linear-gradient(180deg,#eaf2ff,#ffffff 40%);border-bottom:1px solid var(--border);box-shadow:0 8px 18px rgba(20,60,140,.05);position:relative;}
    .brand-row{display:flex;align-items:center;gap:18px;padding:18px 0 8px;}
    .brand-logo{flex:0 0 20%;max-width:20%;min-width:120px;}
    .brand-logo .logo-box{height:64px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--blue-2),#23a7a2);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;letter-spacing:.5px;box-shadow:var(--shadow);}
    .brand-title{flex:1;}
    .embossed{font-size:clamp(20px,3.2vw,36px);line-height:1.15;margin:0;color:#1d4ed8;text-shadow:0 1px 0 #ffffff,0 2px 0 #e5ecff,0 3px 0 #d7e2ff,0 0 2px rgba(29,78,216,.15),0 0 12px rgba(29,78,216,.08),1px 1px 0 var(--gold),2px 2px 0 rgba(192,144,46,.85);letter-spacing:.3px;}

    .main-nav-wrap{border-top:1px solid var(--border);margin-top:12px;text-align:left;position:relative;}
    .main-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:left;justify-content:left;}
    .main-nav a{position:relative;display:inline-block;padding:12px 14px;text-decoration:none;color:var(--blue-1);font-weight:620;border-radius:8px;transition:background .2s ease,color .2s ease;}
    .main-nav a:hover{background:var(--blue-3);color:#0b3aa2;}
    .main-nav a[aria-current="page"]{color:#fff;background:linear-gradient(180deg,var(--blue-2),#1e40af);}

    /* Fancy centered hamburger */
    .nav-toggle-wrap{display:none;flex-direction:column;align-items:center;margin:10px auto;width:80px;background:blue; border-radius:10px;}
    .nav-label{font-size:14px;color:white;margin-bottom:6px;}
    .nav-toggle{width:36px;height:32px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:4px;}
    .nav-toggle-bar{width:24px;height:3px;background:white;border-radius:2px;transition:all 0.3s ease;}
    .nav-toggle.open .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
    .nav-toggle.open .nav-toggle-bar:nth-child(2){opacity:0;}
    .nav-toggle.open .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
    @media(max-width:600px){.nav-toggle-wrap{display:flex;}.main-nav{display:none;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);margin-top:8px;}.main-nav.open{display:flex;}.main-nav a{border-radius:0;padding:12px 16px;border-top:1px solid var(--border);}}

    .layout{padding:22px 0 40px;}
    .grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;}
    @media(max-width:980px){.grid{grid-template-columns:1fr;}}
    .main{display:grid;gap:16px;}
    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:clip;}
    .card>.pad{padding:18px;}
    .card h2{margin:0 0 8px;font-size:20px;line-height:1.2;}
    .card p{margin:0 0 12px;color:var(--ink);}
    .quote{display:flex;gap:14px;align-items:flex-start;}
    .quote .rule{width:6px;border-radius:4px;background:linear-gradient(180deg,var(--green-2),#66d1c5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);}
    .quote blockquote{margin:0 0 16px 0;font-size:18px;line-height:1.5;color:#083344;font-weight:600;}
    .quote footer{margin-top:6px;color:var(--muted);font-size:14px;}
    .media{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;}
    .media .img{background:linear-gradient(135deg,#dbeafe,#ecfeff);border:1px solid var(--border);height:100%;border-radius:14px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:#1e3a8a;font-weight:700;}
    @media(max-width:1020px){.media{grid-template-columns:1fr;}.media .img{height:180px;}}
    .aside{display:grid;gap:16px;}
    .widget h3{margin:0 0 10px;font-size:16px;color:var(--green-1);}
	.widget h2{margin:0 0 10px;font-size:20px;color:var(--green-1);}
    .widget .list{
		list-style:none;padding:0;margin:0;
	}
    .widget .list li{
		background: url('bullet.webp') no-repeat left center / 20px 20px;
		  padding-left: 8px;
		  padding-left: 24px;
		  margin-bottom: 6px;
		  line-height: 1.5;
	}
    .widget .list a{color:var(--green-1);text-decoration:none;padding:10px 12px;background:#fff;}
    .widget .list a:hover{background:#eef5ff;border-color:#c9dafc;}
    .site-footer{border-top:1px solid var(--border);background:#fff;}
    .site-footer .container{padding:18px 20px;color:var(--muted);font-size:14px;}
	
.ispage__figure {
  display: block;
  background: linear-gradient(180deg, #fff, #faf6f4);
  border: 1px solid #eee;
  border-radius: 14px;
  margin: 0 0 1rem 0;
  overflow: hidden;
}

.imground {
	border-radius: 16px;
}

.leftimg img{margin: 0 16px 6px 0;border-radius: 16px;}
.leftlargeimg img{margin: 0 36px 6px 0;border-radius: 16px;}
.rightimg img{margin: 0 0 6px 16px;border-radius: 16px;}

.onlymobile {
	display: none;
}

.onlypc {
	display: block;
}

.clear {
	clear:both;
}

.logo {
	float:left; 
	width: 16%;
}

.bodyextend {
	float:left; 
	width: 66%;
}


header {
	margin: 0 20px;
	padding:10px 10px 0 10px;
	background: linear-gradient(navy,#0000BF);
	border-radius: 20px;
}

footer {
	padding:10px 10px 0 10px;
	background: linear-gradient(#0000BF,navy);
}



.expanded li {
  margin-bottom: 0.9em; /* adds extra space between bullets */
}

#menu {
	float:left; 
	width: 66%;
}

.menuitem {
	float:left;
	width:15%;
	text-align:center;
	font-size : 16px;
	font-weight: normal;
}

.menuitem a:link, .menuitem a:visited {  
  color: white;
  text-decoration: none;
  font-weight:bold;
} 


.menuitem a:hover {
  color: #EB9C18;
  text-decoration: none;
  font-weight:bold;
} 


.centered {
	text-align:center;
}

.geologica {
  font-family: "Geologica", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size:36px;
  margin: 12px auto 0 auto;
  padding: 0 0 0 26px;
  color:white;
  text-shadow: 2px 2px navy;
}

.subtitle {
	font-weight:normal;
	font-size:28px;
	margin: 12px auto 0 auto;
	color:#EAEAEA;
}

.hint {
	color:var(--muted);
	font-size:10px;
}

@media(max-width:1020px){
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	header {
		padding:4px 4px 0 4px;
		background: linear-gradient(navy,#0000BF);
		border-radius: 0;
		margin: 0;
	}
		
	.onlypc {
		display: none;
	}

	.onlymobile {
		display: block;
	}



	.geologica {
		font-family: "Geologica", sans-serif;
		font-weight: 700;
		font-style: italic;
		font-size:32px;
		color:white;
		margin: 0 auto;
		padding: 0 0 0 12px;
		line-height: 100%;
	}

	.subtitle {
	  font-family: "Poppins", sans-serif;
	  font-weight: 600;
	  font-style: bold;
	  font-size:18px;
	  color:#EAEAEA;
	  margin:0 -30px;
	}
	
	#hamburgtext {
		float:right;
		width: 10%;
	}


	.hamburg {
		display: inline-block;
	}

	.hamburg-content {
		display: none;
		position: absolute;
		left:20px;
		top:20px;
		padding:2px;
		background-color: #f9f9f9;
		min-width: 160px;
		overflow: auto;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		border:2px solid #EB9C18;
	}

	.hamburg-content a {
		color:navy;
		padding: 2px 6px;
		text-decoration: none;
		display: block;
		font-size:18px;
		line-height:200%;
	}

	.hamburg a:hover {background-color: #f1f1f1}

	.showburg {display:block;}

}

.moreinfo {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		height: 0;
		width: 0;
		z-index: -1;
}

/* ===========================
   DESKTOP LAYOUT
   button left, title centered
=========================== */

.audio-header-row {
    display: flex;
    align-items: center;
    justify-content: center;      /* center title */
    width: 100%;
    margin-bottom: 12px;
    position: relative;           /* allows absolute on desktop */
}

/* Put the listen button on the left in desktop mode */
.audio-wrapper {
    position: absolute;
    left: 0;
}

.audio-header-row .page-title {
    margin: 0 auto;
    text-align: center;
    font-size: 1.8rem;
}

/* ===========================
   MOBILE LAYOUT
   stack + left-align
=========================== */
@media (max-width: 1020px) {

    .audio-header-row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: static;         /* turn off absolute positioning */
        gap: 6px;
    }

    .audio-wrapper {
        position: static;         /* button becomes normal block */
    }

    .audio-header-row .page-title {
        text-align: left;
        font-size: 1.4rem;
        margin: 0;
    }
}


.listen-btn {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 14px;
}

.listen-btn:hover {
  background: #1b5e20;
}

/* Hidden drop container */
.audio-drop {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* Style the audio player a bit */
.audio-drop audio {
  width: 250px;
  margin-top: 8px;
  display: block;
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.elegant-btn {
    display: inline-block;

    background: linear-gradient(
        to bottom,
        #eef6f3,
        #d6e8e1
    );

    border: 2px solid #D623FF; /* purplish border */
    border-radius: 7px;

    padding: 9px 18px;

    font-size: 14px;
    font-weight: 600; /* bold but calm */
    letter-spacing: 0.02em;

    color: #2f4f4f; /* deep sage text */

    cursor: pointer;

    /* Subtle embossed feel */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        0 2px 4px rgba(0,0,0,0.08);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.elegant-btn:hover {
    background: linear-gradient(
        to bottom,
        #f4fbf8,
        #e1f0ea
    );
}

.elegant-btn:active {
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.18),
        0 1px 2px rgba(0,0,0,0.05);
    transform: translateY(1px);
}

.elegant-btn:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(127,166,184,0.45),
        inset 0 1px 0 rgba(255,255,255,0.95);
}


/* Page body wrapper */
.index-page-body {
  padding: 2rem 1rem; /* default = mobile & tablet */
  background: #f5f7fa;
}

/* Grid layout */
.index-card-grid {
  max-width: 1400px; /* wider cards on desktop */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Card styling */
.index-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.index-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.index-card p {
  flex: 1;
  line-height: 1.6;
  color: #444;
}

.index-card-action {
  margin-top: 1rem;
  align-self: flex-start;
  text-decoration: none;
  font-weight: 600;
  color: #1a73e8;
}

.index-card-action:hover {
  text-decoration: underline;
}

/* Desktop refinement */
@media (min-width: 1024px) {
  .index-page-body {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .index-card-grid {
    gap: 2.5rem; /* slightly more breathing room vertically */
  }
}

/* Responsive: stack to one column */
@media (max-width: 768px) {
  .index-card-grid {
    grid-template-columns: 1fr;
  }
}