/* Page shell and navigation (HCK-U03). Desktop: sticky side nav + content.
   Phone: brand bar with a Menu toggle that opens the nav above the content.
   The toggle is a visually hidden checkbox, so it works without JS. */

.shell { display: flex; flex-wrap: wrap; min-height: 100vh; min-height: 100dvh; }

.main {
  flex: 999 1 560px;
  min-width: 0;
  padding: var(--s-7) var(--page-pad) var(--s-8);
}
.main > * + * { margin-top: var(--s-5); }
.main--narrow { max-width: 760px; }

/* signed-out pages: no nav, centred column */
.no-nav .shell { justify-content: center; }
.no-nav .main { flex: 0 1 640px; padding-top: var(--s-8); }

/* ---- side nav ---- */
.sidenav {
  flex: 0 0 var(--nav-w);
  border-right: 1px solid var(--rule);
  padding: var(--s-6) var(--s-5) var(--s-7);
}
.sidenav-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.brand { display: inline-block; font-size: 1.9rem; font-weight: 900; letter-spacing: -0.045em; line-height: 1; color: var(--ink); text-decoration: none; }
.brand i { font-style: normal; color: var(--gold); }
.tag-line { margin-top: var(--s-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-btn {
  display: none; align-items: center; min-height: 44px; padding: 0 var(--s-4);
  border: 2px solid var(--ink); border-radius: var(--radius);
  font-weight: 800; font-size: var(--text-sm); cursor: pointer; user-select: none;
}
.nav-toggle:focus-visible ~ .sidenav-head .menu-btn { outline: var(--focus); outline-offset: 2px; }

.sidenav-body { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-6); }
.navgrp { display: flex; flex-direction: column; gap: 2px; }
.navlabel { margin: 0 0 var(--s-2) var(--s-3); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.navlink {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  min-height: 40px; padding: 0 var(--s-3);
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: var(--radius);
  background: none; border: 0; font-family: inherit; width: 100%; text-align: left; cursor: pointer;
}
a.navlink:hover, button.navlink:hover { background: var(--paper-2); }
.navlink[aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 800; }
.navlink--soon { color: var(--mute); cursor: default; }
.navlink .soon { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sidenav-foot { display: flex; flex-direction: column; gap: 2px; border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--s-3); }
.sidenav-foot form { margin: 0; }

@media (min-width: 761px) {
  .sidenav { position: sticky; top: 0; align-self: flex-start; max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
}

@media (max-width: 760px) {
  .sidenav { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s-4) var(--page-pad); }
  .menu-btn { display: inline-flex; }
  .sidenav-body { display: none; margin-top: var(--s-4); }
  .nav-toggle:checked ~ .sidenav-body { display: flex; }
  .main { padding-top: var(--s-5); padding-bottom: var(--s-7); }
}

/* ---- page header ---- */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-4) var(--s-5); }
.page-head > :first-child { min-width: 0; }
.page-head .eyebrow { display: block; margin-bottom: var(--s-3); }
.crumbs { font-size: var(--text-sm); font-weight: 700; color: var(--mute); }
.crumbs a { color: inherit; }