@charset "UTF-8";

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
    }

	path { fill: #F8F7EC; }
	
	html {background: radial-gradient(ellipse at 28% 50%, #FFCC81 0%, #8B6A28 55%, #0B0A1A
       100%);
       min-height: 100dvh;
       }

    body {
      
      background-attachment: fixed;
      min-height: 100dvh;
      font-family: Georgia, serif;
      color: rgba(255,255,255,0.9);
    }
	
	a:link      { /* unvisited */ 
		color: #44445B;
		text-decoration: none;}
	a:visited   { /* already visited */ 
		color: #352D13}
	a:hover     { /* mouse over */ 
		text-shadow: 0px 0px 5px #44445B}
	a:active    { /* being clicked right now */ }
    /* ── Header ── */
    .header {
      width: 100%;
      padding: 15px 56px 24px;
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .content-section {font-family: "embury-text", serif;
font-weight: 200;
font-style: normal;}

    /* ── Logo ── */
    .logo-wrap {
      flex-shrink: 0;
    }

	.logo-mobile { 
	display: none; 
	}  /* hidden by default */

    .logo-wrap svg {
      height: 180px;
      width: auto;
      display: block;
    }

    /* ── Name ── */
    .site-name {
      flex: 1;
    }

    .site-name .name {
      display: block;
      font-family: Georgia, serif;
      font-size: 28px;
      letter-spacing: 0.18em;
      font-weight: 400;
      text-transform: uppercase;
      color: rgba(255,255,255,0.92);
    }

    .site-name .discipline {
      display: block;
      margin-top: 4px;
      font-family: Georgia, serif;
      font-size: 13px;
      letter-spacing: 0.32em;
      font-weight: 400;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }

    /* ── Rule ── */
    .rule {
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.12) 20%,
        rgba(255,255,255,0.12) 80%,
        transparent
      );
    }

    /* ── Sub nav / menu ── */
    .subnav {
      padding: 14px 56px;
      position: relative;
      z-index: 200;
    }

    .menu-toggle {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0;
    }

    .menu-toggle span {
      font-family: Georgia, serif;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }

    .menu-toggle svg {
      transition: transform 0.25s ease;
    }

    .menu-toggle.open svg {
      transform: rotate(180deg);
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 42px;
      left: 56px;
      background: rgba(11, 10, 50, 0.97);
      border: 0.5px solid rgba(255,255,255,0.1);
      padding: 8px 0;
      min-width: 200px;
      z-index: 100;
    }

    .dropdown.open {
      display: block;
    }

    .dropdown a {
      display: block;
      padding: 10px 24px;
      font-family: Georgia, serif;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      color: rgba(255,255,255,0.55);
      transition: color 0.15s ease;
      z-index: 100;
    }

    .dropdown a:first-child {
      color: rgba(255,255,255,0.85);
    }

    .dropdown a:hover {
      color: rgba(255,255,255,0.9);
    }

    .content {
      padding: 60px 56px;
      z-index: 50;
    }

    /* Override browser autofill dark text in form fields */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill {
      -webkit-text-fill-color: #0B0A1A !important;
      -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
      caret-color: #F8F7EC;
      transition: background-color 5000s ease-in-out 0s;
    }
	/* Hide all sections by default */
	.content-section {
	  display: none;
					}

/* Only show the section that has the 'is-active' class */
	.content-section.is-active {
 	 display: block;
}

/* Optional: Add a simple fade-in effect */
.is-active {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bottom-left-badge {
  position: fixed;
  opacity: .5;
  bottom: 0px;
  left: 0px;
  width: 600px;  /* or whatever size you want */
  height: auto;
  z-index: 40;  /* keeps it on top of other content */
}