/* Keep header layout and its JavaScript breakpoint in sync via computed display. */
.site-nav { padding: 0; min-height: 4rem; }
.site-nav-inner { display: flex; align-items: center; gap: .5rem; width: 100%; max-width: 90rem; margin: auto; padding: .5rem 1rem; }
.site-brand { margin-right: auto; white-space: nowrap; }
.desktop-navigation, .desktop-check { display: none; }
.theme-toggle, .mobile-menu-trigger { min-height: 44px; }
.theme-toggle { min-width: 44px; }
.site-nav button { color: var(--color-base-content); }
[data-theme="dark"] .site-brand, [data-theme="dark"] .mobile-nav-header > a { color: #a5b4fc; }
.mobile-menu-trigger { padding: 0 .5rem; gap: .35rem; }
.nav-group { position: relative; }
.nav-group-heading, .mobile-nav-heading { display: flex; align-items: stretch; border-radius: .5rem; }
.nav-group-heading a { display: flex; align-items: center; padding: .5rem 0 .5rem .65rem; white-space: nowrap; }
.nav-group-heading button { display: grid; place-items: center; min-width: 32px; min-height: 44px; cursor: pointer; }
.nav-group-heading:hover, .nav-dropdown a:hover, .mobile-nav-heading:hover, .mobile-submenu a:hover { background: var(--color-base-200); }
.site-nav .is-active, .nav-dropdown a[aria-current="page"], .mobile-submenu a[aria-current="page"] { background: var(--color-base-200); font-weight: 600; }
.nav-group-heading.is-active { box-shadow: inset 0 -3px var(--color-primary); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.nav-dropdown { position: absolute; top: calc(100% + .5rem); left: 0; width: 19rem; padding: .5rem; border: 1px solid var(--color-base-300); border-radius: .75rem; background: var(--color-base-100); box-shadow: 0 12px 30px #0002; max-height: calc(100dvh - 6rem); overflow-y: auto; }
.nav-group:last-child .nav-dropdown { left: auto; right: 0; }
.nav-dropdown a { display: flex; align-items: center; min-height: 44px; padding: .65rem .75rem; border-radius: .4rem; }
.nav-dropdown li:first-child { border-bottom: 1px solid var(--color-base-300); margin-bottom: .25rem; font-weight: 600; }
.site-nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav .mobile-menu-trigger svg { transform: none; }
.nav-backdrop { position: fixed; inset: 0; z-index: 55; background: #0009; }
.mobile-nav-panel { position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(92vw, 24rem); height: 100dvh; display: flex; flex-direction: column; background: var(--color-base-100); box-shadow: -12px 0 40px #0003; padding-bottom: env(safe-area-inset-bottom); }
.mobile-nav-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: .5rem 1rem; border-bottom: 1px solid var(--color-base-300); }
.mobile-nav-header > a { display: flex; align-items: center; min-height: 44px; }
.mobile-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0 1rem; }
.mobile-nav-heading a { display: flex; flex: 1; align-items: center; min-height: 56px; padding: .75rem 1rem; }
.mobile-nav-heading button { display: grid; place-items: center; width: 56px; flex-shrink: 0; cursor: pointer; }
.mobile-nav-heading.is-active { box-shadow: inset 4px 0 var(--color-primary); }
.mobile-submenu { background: var(--color-base-200); padding: .25rem .5rem; }
.mobile-submenu a { display: flex; align-items: center; min-height: 48px; padding: .65rem 1.25rem; border-radius: .4rem; }
.mobile-nav-start { margin: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-base-300); }
.mobile-nav-start p { margin-top: .75rem; font-size: .875rem; }
.mobile-secondary-link { display: flex; align-items: center; min-height: 48px; margin: 0 1rem; text-decoration: underline; text-underline-offset: .2em; }
.site-nav :is(a, button):focus-visible, .task-link:focus-visible, .hub-card a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.skip-link { position: fixed; top: .5rem; left: .5rem; transform: translateY(-160%); z-index: 100; padding: .75rem 1rem; background: var(--color-base-100); color: var(--color-base-content); border: 2px solid currentColor; border-radius: .5rem; }
.skip-link:focus { transform: none; }
main, [id] { scroll-margin-top: 5rem; }

.home-entry { padding: 3rem 0; }
.home-entry-inner { max-width: 72rem; margin: auto; padding: 0 1rem; }
.home-entry h1 { max-width: 20ch; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; font-weight: 700; text-wrap: balance; }
.home-entry-lead { max-width: 44rem; margin-top: 1rem; font-size: 1.125rem; }
.home-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.task-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-100); }
.task-link:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px #0001; }
.task-link strong { display: block; font-size: 1.125rem; }
.task-link small { display: block; margin-top: .3rem; font-size: .875rem; }
.home-check { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.home-check p { margin: 0; }
.home-entry-proof { margin-top: 1.5rem; font-size: .875rem; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.hub-card { min-width: 0; padding: 1.5rem; border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-100); }
.hub-card h2 { font-size: 1.25rem; font-weight: 700; }
.hub-card p { margin: .5rem 0 1rem; }
.hub-card a { display: flex; align-items: center; min-height: 44px; padding: .5rem 0; text-decoration: underline; text-underline-offset: .2em; }
.site-footer a { min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere; }
@media (min-width: 80rem) {
  .desktop-navigation { display: flex; align-items: center; gap: .35rem; font-size: .875rem; }
  .desktop-check { display: inline-flex; margin-left: .5rem; }
  .mobile-navigation { display: none; }
}
@media (max-width: 47.99rem) {
  .home-entry { padding: 1.5rem 0; }
  .home-entry-lead { font-size: 1rem; margin-top: .75rem; }
  .home-tasks { grid-template-columns: 1fr; gap: .65rem; margin-top: 1.25rem; }
  .task-link { padding: 1rem; }
  .home-check { align-items: stretch; flex-direction: column; }
  .hub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 22rem) {
  .site-nav-inner { padding-inline: .5rem; gap: .25rem; }
  .site-brand { font-size: 1.125rem; }
}
@media print {
  .site-nav, .skip-link { display: none; }
}