.site-header { position: sticky; inset-block-start: 0; z-index: 100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner, .page-shell, .site-footer { max-width: var(--max-content-width); margin-inline: auto; padding-inline: var(--spacing-m); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--spacing-l); padding-block: .75rem; }
.brand { font-weight: 700; text-decoration: none; color: var(--color-text); }
.main-nav { display: flex; justify-content: center; align-items: center; gap: var(--spacing-s); }
.main-nav a, .nav-group summary { text-decoration: none; color: var(--color-text); font-weight: 650; }
.main-nav__direct, .nav-group summary { display: block; padding: .55rem .7rem; border-radius: var(--radius-small); cursor: pointer; }
.main-nav a[aria-current="page"], .nav-group[data-current-group="true"] > summary { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.nav-group { position: relative; }
.nav-group summary { list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: '▾'; margin-inline-start: .35rem; font-size: .75em; }
.nav-group[open] summary::after { content: '▴'; }
.nav-group__items { position: absolute; inset-block-start: calc(100% + .35rem); inset-inline-start: 0; display: grid; min-inline-size: 15rem; max-block-size: min(70vh, 32rem); overflow-y: auto; padding: .45rem; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); box-shadow: var(--shadow-card); }
.nav-group__items a { padding: .55rem .65rem; border-radius: var(--radius-small); }
.nav-group__items a:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.page-shell { padding-block: clamp(1.25rem, 3vw, var(--spacing-xl)); }
.hero { margin-bottom: var(--spacing-xl); max-inline-size: 54rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--content-gap); }
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--spacing-l); color: var(--color-muted); }
.mobile-nav, .mobile-nav-panel { display: none; }

@media (max-width: 64rem) {
  .site-header__inner { grid-template-columns: auto 1fr; }
  .main-nav { display: none; }
  .theme-toggle { justify-self: end; }
  .page-shell { padding-block-end: 6.5rem; }
  .site-footer { padding-block-end: 6.5rem; }
  .mobile-nav { position: fixed; z-index: 120; inset-inline: 0; inset-block-end: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: .35rem max(.35rem, env(safe-area-inset-right)) max(.35rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left)); border-top: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 -.2rem .8rem rgb(31 41 51 / .12); }
  .mobile-nav a, .mobile-nav button { display: grid; justify-items: center; gap: .1rem; min-inline-size: 0; padding: .4rem .15rem; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--color-text); font: inherit; font-size: clamp(.68rem, 2.6vw, .82rem); text-decoration: none; cursor: pointer; }
  .mobile-nav a span:first-child, .mobile-nav button span:first-child { font-size: 1.25rem; line-height: 1; }
  .mobile-nav [aria-current="page"], .mobile-nav [aria-expanded="true"] { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
  .mobile-nav-panel { position: fixed; z-index: 115; inset-inline: .5rem; inset-block-end: calc(4.6rem + env(safe-area-inset-bottom)); display: block; max-block-size: min(70vh, 34rem); overflow-y: auto; padding: var(--spacing-m); border: 1px solid var(--color-border); border-radius: var(--radius-large); background: var(--color-surface); box-shadow: var(--shadow-card); }
  .mobile-nav-panel[hidden] { display: none; }
  .mobile-nav-panel__header { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-m); margin-block-end: var(--spacing-s); }
  .mobile-nav-panel__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mobile-nav-panel__links a { padding: .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); text-decoration: none; }
}

@media (max-width: 32rem) {
  .brand__label { font-size: .95rem; }
  .theme-toggle { padding-inline: .65rem; font-size: .85rem; }
  .mobile-nav-panel__links { grid-template-columns: 1fr; }
  .page-shell { padding-inline: .75rem; }
}