:root{
  --container: 1200px;

  /* Header sizes */
  --header-h-desktop: 56px;
  --header-h-mobile: 56px;

  /* Header logo sizes */
  --brand-logo-desktop: 24px;
  --brand-logo-mobile: 14px; /* ~40% smaller on mobile */

  /* Colors */
  --fabric-offwhite: #f5f3ec; /* overscroll/top */
  --ink: #1d1d1f;

  /* Hero viewport-relative landing positions */
  --hero-vpos-portrait: 17vh;   /* ~one third from top */
  --hero-vpos-landscape: 50vh;  /* centered */

  /* Current header height and vpos (set per orientation below) */
  --header-h-current: var(--header-h-desktop);
  --hero-vpos: var(--hero-vpos-landscape);
}

/* Base/reset */
*{ box-sizing: border-box; }

/* Overscroll color lives on html; body is transparent so bg image shows */
html{
  margin: 0; padding: 0;
  background: var(--fabric-offwhite);
}
body{
  margin: 0; padding: 0;
  background: transparent;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color: var(--ink);
  line-height: 1.45;
  min-height: 100svh;
}

/* Foreground layer (header + main) sits above the bg image */
.page-layer{ position: relative; z-index: 1; }

/* Container */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 16px; }

/* Fixed, transparent header */
.site-header{
  position: fixed; top:0; left:0; right:0;
  height: var(--header-h-desktop);
  display: flex; align-items: center;
  background: transparent;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; position: relative; }
.brand-logo{ height: var(--brand-logo-desktop); width:auto; display:block; }

/* Menu toggle (in summary) */
.menu-toggle{
  background:transparent; border:none; padding:4px; cursor:pointer; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
}
.menu-icon{ width:18px; height:18px; fill: currentColor; }

/* Hide default <summary> disclosure marker */
.mt-dropdown summary { list-style: none; }
.mt-dropdown summary::-webkit-details-marker { display: none; }

/* Ensure dropdown sits on top and positions from header-right */
.mt-dropdown{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* Dropdown panel */
.mt-menu-panel{
  position: absolute;
  top: calc(100% + 8px); /* below the dots */
  right: 0;
  min-width: 200px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 6px;
  display: none;
  z-index: 9999; /* on top of everything */
}

/* Show panel when <details> is open */
.mt-dropdown[open] .mt-menu-panel { display: block; }

/* Links */
.mt-menu-link{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  line-height: 1.2;
}
.mt-menu-link:hover{ background: rgba(0,0,0,.06); }

/* Indented sub-link under USPPA */
.mt-menu-sub{
  padding-left: 26px;
  opacity: .9;
  font-size: .98em;
}

/* No outer gap; sections handle their own padding */
#content{ padding-top: 0; }

/* ===== Parallax background ===== */
#parallax-bg{
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: auto;
  z-index: 0; /* under content, above html background */
  will-change: transform;
  pointer-events: none; user-select: none;
  image-rendering: -webkit-optimize-contrast;
}

/* ===== HERO SECTION ===== */
.hero{
  position: relative;
  height: 100vh;           /* full viewport */
  overflow: visible;
}

.hero-anchor{
  position: absolute;
  left: 50%;
  top: calc(var(--hero-vpos) + var(--header-h-current)); /* viewport position + header */
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  pointer-events: none; /* logo is decorative; remove if you want it clickable */
}

.hero-logo{
  width: min(92vw, 760px);
  max-width: calc(100% - 32px);
  height: auto; display:block;
}

/* Content sections (examples) */
.section{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
}

/* Copyright section */
.copyright-wrap{
  min-height: 40vh;
  display:flex; align-items:flex-end;
  padding-bottom: 24px;
}
.copyright{
  width: 100%;
  text-align: center;
  color: rgba(0,0,0,0.65);
  margin: 0 auto;
}

/* ----- Orientation & mobile tweaks ----- */
@media (orientation: portrait){
  :root{
    --header-h-current: var(--header-h-mobile);
    --hero-vpos: var(--hero-vpos-portrait);
  }
  .site-header{ height: var(--header-h-mobile); }
  .brand-logo{ height: var(--brand-logo-mobile); }
}

@media (orientation: landscape){
  :root{
    --header-h-current: var(--header-h-desktop);
    --hero-vpos: var(--hero-vpos-landscape);
  }
}

/* iOS safe areas */
@supports(padding:max(0px)){
  .site-header{
    padding-left:max(env(safe-area-inset-left),0);
    padding-right:max(env(safe-area-inset-right),0);
  }
}

/* Small screens: keep panel readable */
@media (max-width: 480px){
  .mt-dropdown{ right: 6px; }
  .mt-menu-panel{ min-width: 180px; }
}