/* =========================================================================
   Shared site chrome (header / menu) - The Name Foundry "Atlas of Worlds" identity.
   Loaded AFTER styles.css so the header renders IDENTICALLY to every other
   page (gold-on-indigo, Cormorant wordmark) regardless of this page's own
   green "Twilight" body theme. The site-wide brand tokens are scoped to
   .site-header so they never leak into the generator UI below.
   ========================================================================= */
.site-header{
  /* site chrome tokens (match assets/css/site.css :root) */
  --bg-2:#0e0e12;
  --surface-2:rgba(255,255,255,.06);
  --solid:#16161b;
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.16);
  --text:#eef0f3; --muted:#a7a8af; --faint:#71727a;
  --brand:#e9b85e; --brand-2:#f5d98f;
  --shadow:0 30px 70px -28px rgba(0,0,0,.78);
  --ease:cubic-bezier(.22,.7,.3,1);
  --font-display:"Cormorant Garamond", Georgia, serif;

  position:sticky;top:0;z-index:90;background:color-mix(in srgb, var(--bg-2) 86%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.site-header .logo{display:inline-flex;align-items:center;gap:11px;color:var(--text)}
.site-header .logo:hover{color:var(--text)}
.site-header .logo-mark{color:var(--brand);flex:none;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--brand) 55%, transparent))}
.site-header .logo-text{font-family:var(--font-display);font-weight:700;font-size:25px;letter-spacing:.005em}
.site-header .logo-img{display:block;height:48px;width:auto;flex:none}
@media (max-width:560px){.site-header .logo-img{height:38px}}
.site-header .nav{display:flex;align-items:center;gap:2px}
.site-header .nav a{padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--muted);transition:.15s var(--ease)}
.site-header .nav a:hover{color:var(--text);background:var(--surface-2)}
.site-header .nav a.active{color:var(--brand)}
.site-header .nav-item{position:relative}
.site-header .nav-link{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit;transition:.15s var(--ease)}
.site-header .nav-link:hover{color:var(--text);background:var(--surface-2)}
.site-header .nav-link svg{transition:transform .2s var(--ease)}
.site-header .nav-dropdown.is-open .nav-link{color:var(--text);background:var(--surface-2)}
.site-header .nav-dropdown.is-open .nav-link svg{transform:rotate(180deg)}
.site-header .dropdown-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:var(--solid);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow);padding:10px;z-index:95;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.site-header .nav-dropdown.is-open .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
.site-header .dropdown-panel.mega{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:6px 14px;width:min(880px,calc(100vw - 28px));left:0;right:0;margin-inline:auto;padding:18px}
.site-header .nav-item:first-child .dropdown-panel.mega{}
.site-header .mega-col{display:flex;flex-direction:column}
.site-header .mega-head{margin:4px 10px 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.site-header .dropdown-link{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);transition:.14s var(--ease)}
.site-header .dropdown-link:hover{background:var(--surface-2);color:var(--text)}
.site-header .dropdown-link.active{color:var(--brand)}
.site-header .dropdown-link.is-soon{color:var(--faint);cursor:default;justify-content:flex-start;gap:8px}
.site-header .dropdown-link.is-soon:hover{background:transparent;color:var(--faint)}
.site-header .soon-tag{flex:none;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:999px;border:1px solid var(--border);color:var(--faint);align-self:center;opacity:.8}
.site-header .mega-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;padding:11px;border-top:1px solid var(--border);border-radius:0 0 9px 9px;font-size:13.5px;font-weight:700;color:var(--brand);transition:.14s var(--ease)}
.site-header .mega-foot:hover{background:var(--surface-2)}
.site-header .mega-foot svg{transition:transform .15s var(--ease)}
.site-header .mega-foot:hover svg{transform:translateX(3px)}
.site-header .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border-2);border-radius:10px;align-items:center;justify-content:center;color:var(--text);background:none;cursor:pointer}
.site-header .nav-toggle .bar,.site-header .nav-toggle .bar::before,.site-header .nav-toggle .bar::after{display:block;width:20px;height:2px;background:currentColor;transition:.2s var(--ease)}
.site-header .nav-toggle .bar{position:relative}
.site-header .nav-toggle .bar::before,.site-header .nav-toggle .bar::after{content:"";position:absolute;left:0}
.site-header .nav-toggle .bar::before{top:-6px}
.site-header .nav-toggle .bar::after{top:6px}
.site-header .nav-toggle[aria-expanded="true"] .bar{background:transparent}
.site-header .nav-toggle[aria-expanded="true"] .bar::before{top:0;transform:rotate(45deg)}
.site-header .nav-toggle[aria-expanded="true"] .bar::after{top:0;transform:rotate(-45deg)}

@media (max-width:720px){
  .site-header .nav{display:none}
  .site-header .nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;top:70px;left:0;right:0;background:var(--solid);border-bottom:1px solid var(--border-2);padding:14px 16px 18px;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .site-header .nav.is-open a{width:100%;padding:13px;font-size:16px}
  .site-header .nav-item{width:100%}
  .site-header .nav-link{width:100%;justify-content:space-between;padding:13px;font-size:16px;border-radius:10px}
  .site-header .dropdown-panel,.site-header .dropdown-panel.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;width:auto;min-width:0;display:none;grid-template-columns:1fr;border:none;border-left:2px solid var(--border-2);border-radius:0;margin:2px 0 6px 14px;padding:2px 0}
  .site-header .nav-dropdown.is-open .dropdown-panel{display:block}
  .site-header .nav-toggle{display:inline-flex}
}

/* ---- shared site footer (matches assets/css/site.css) ------------------- */
.site-footer{
  --bg-2:#0e0e12;
  --border:rgba(255,255,255,.10);
  --muted:#a7a8af; --faint:#71727a;
  --brand:#e9b85e;
  --text:#eef0f3;
  --font:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display:"Cormorant Garamond", Georgia, serif;
  border-top:1px solid var(--border);margin-top:0;padding:58px 0 42px;background:var(--bg-2)
}
.site-footer .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
.site-footer .logo{display:inline-flex;align-items:center;gap:11px;color:var(--text)}
.site-footer .logo:hover{color:var(--text)}
.site-footer .logo-mark{color:var(--brand);flex:none;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--brand) 55%, transparent))}
.site-footer .logo-text{font-family:var(--font-display);font-weight:700;font-size:25px;letter-spacing:.005em}
.site-footer .logo-img{display:block;height:58px;width:auto;flex:none}
.site-footer .footer-about .logo{margin-bottom:13px}
.site-footer .footer-about p{margin:0;color:var(--muted);font-size:14px;max-width:34ch}
.site-footer .footer-col h4{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:15px}
.site-footer .footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-footer .footer-col a,.site-footer .footer-col button{color:var(--muted);font-size:14px;font-weight:600;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.site-footer .footer-col a:hover,.site-footer .footer-col button:hover{color:var(--brand)}
.site-footer .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:42px;padding-top:24px;border-top:1px solid var(--border);color:var(--faint);font-size:13px}

@media (max-width:1000px){
  .site-footer .footer-grid{grid-template-columns:1fr 1fr}
  .site-footer .footer-about{grid-column:1 / -1}
}
@media (max-width:520px){
  .site-footer .footer-grid{grid-template-columns:1fr}
}

/* desktop nav: full-height hover targets + bridged gap, mega anchored to the header container */
@media (min-width:721px){
  .site-header .header-inner{position:relative}
  .site-header .nav{align-self:stretch}
  .site-header .nav-item{align-self:stretch;display:flex;align-items:center}
  .site-header .nav-item{position:static}
  .site-header .dropdown-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
}