/* Sticky brand bar — compact, NO h1 */
header.brand-bar {
  background: var(--bg-base);
  border-bottom: 2px solid var(--brand-orange);
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-5);
  position: sticky; top: 0; z-index: 100;
}
header.brand-bar a.brand {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--brand-orange);
  letter-spacing: 0.5px;
  text-decoration: none;
}
/* Main hero */
main.hero {
  flex: 1;
  padding: var(--space-7) var(--space-5) var(--space-6);
  background:
    radial-gradient(ellipse at center top, rgba(247, 108, 0, 0.08) 0%, transparent 60%),
    var(--bg-base);
}
main.hero .hero-inner {
  max-width: 1000px; margin: 0 auto; text-align: center;
}
main.hero .hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 88px);
  color: var(--brand-orange);
  line-height: 1.05;
  text-shadow: 0 0 30px var(--brand-orange-glow);
  margin-bottom: var(--space-5);
}
main.hero .hero-sub {
  display: block;
  font-size: clamp(20px, 3.5vw, 36px);
  color: var(--text-primary);
  margin-top: var(--space-2);
  text-shadow: none;
}
main.hero .rotation-copy {
  font-family: var(--font-body);
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--text-muted);
  max-width: 640px; margin: var(--space-5) auto var(--space-3);
  line-height: 1.6;
}
main.hero .rotation-copy em { color: var(--brand-orange); font-style: normal; font-weight: 600; }
main.hero .visit-tag {
  margin-top: var(--space-6);
  font-size: 14px; color: var(--text-muted);
  letter-spacing: 1px; text-transform: uppercase;
}
main.hero .visit-tag strong { color: var(--brand-red-alt); }

footer.site-foot {
  padding: var(--space-5); text-align: center;
  color: var(--text-muted); font-size: 12px;
  border-top: 1px solid var(--border-subtle);
}
footer.site-foot .foot-cols {
  max-width: 1000px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5);
}
footer.site-foot .tag { color: var(--brand-orange); font-weight: 600; }

/* Simplified header nav — collapsible details/summary (no JS, semantic, works everywhere) */
header.brand-bar details.nav-details { margin-left: auto; position: relative; }
header.brand-bar details.nav-details summary::-webkit-details-marker { display: none; }
header.brand-bar details.nav-details summary { list-style: none; }
header.brand-bar summary.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
header.brand-bar summary.nav-toggle:hover {
  color: var(--brand-orange);
  border-color: var(--brand-orange);
  background: rgba(247, 108, 0, 0.06);
}
header.brand-bar details[open] summary.nav-toggle {
  color: var(--brand-orange);
  border-color: var(--brand-orange);
  background: rgba(247, 108, 0, 0.10);
}
header.brand-bar .nav-toggle-icon {
  display: inline-block; width: 16px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}
header.brand-bar details[open] .nav-toggle-icon {
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}
header.brand-bar nav.site-nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius);
  padding: var(--space-2);
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(247, 108, 0, 0.15);
  z-index: 200;
}
header.brand-bar nav.site-nav a.nav-link {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
}
header.brand-bar nav.site-nav a.nav-link:hover {
  color: var(--brand-orange);
  background: rgba(247, 108, 0, 0.10);
}
header.brand-bar nav.site-nav a.nav-link.current {
  color: var(--brand-orange);
  background: rgba(247, 108, 0, 0.06);
}
