/* Page shell: navigation, section rhythm, footer. */

.site-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  /* --ground-tint, not --ground. At only 8% transparent the bar cannot pick the
     wash up from behind it, so mixing from the flat ground laid a pale strip
     across the tinted hero — the exact seam the wash exists to avoid. */
  background: color-mix(in srgb, var(--ground-tint) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--rule-width) solid var(--rule);
}

.site-nav {
  /* A nav bar is chrome, not prose: it gets its own measure rather than
     the reading column's, so its five links and two controls have room
     to sit on one line at normal desktop widths. */
  max-width: var(--measure-nav);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: var(--text-sm);
}
/* A square canvas, because the favicon slots require one; the half-face inside
   is tall and narrow and leaves transparent columns either side, which is the
   subject, not a packing bug. Set the height and let the width follow. */
.nav-mark-icon {
  height: 2.25rem;
  width: auto;
}
.nav-mark-name { white-space: nowrap; }

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-list {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-meta);
  font-size: var(--text-sm);
}
.nav-list a {
  color: var(--ink-muted);
  text-decoration: none;
}
.nav-list a:hover { color: var(--accent); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0;
  background: none;
  border: var(--rule-width) solid var(--rule);
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

.cv-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--rule-width) solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-meta);
  font-size: var(--text-sm);
  font-weight: 500;
}
.cv-button:hover {
  background: var(--ink);
  color: var(--ground);
}
.cv-button svg { width: 1rem; height: 1rem; }
.cv-button span { white-space: nowrap; }

.nav-menu-toggle { display: none; }

/* The toggle is a sibling of .nav-links in the markup so it survives the mobile
   drawer collapse. Above 46rem it is reordered back to the right of the CV
   button, which keeps the bar reading mark ... links, CV, theme. */
.nav-mark { order: 1; }
.nav-links { order: 2; }
.theme-toggle { order: 3; margin-left: var(--space-3); }

main {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Every section opens on a hairline, the first one included. The rule used to
   be `.section + .section`, so About began with nothing above it and the hero
   ran into it — the one boundary on the page that was not marked. */
.section { padding-block: var(--space-section); border-top: var(--rule-width) solid var(--rule); }

/* Section headings are the load-bearing accent: six or seven of them down a
   very long page put the colour on every screenful without putting it on
   anything Ahmed wrote. They are wayfinding — words that would still be there
   if the JSON belonged to someone else — which is the content/interface line
   CLAUDE.md already draws. --accent rather than --accent-strong: the deeper
   value read as dark navy ink, which made the change invisible. */
.section-heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
  color: var(--accent);
}

.section-note {
  font-family: var(--font-meta);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: calc(var(--space-6) * -1 + var(--space-2));
  margin-bottom: var(--space-8);
}

.prose { max-width: var(--measure-prose); }

.site-footer {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-16);
  border-top: var(--rule-width) solid var(--rule);
  font-family: var(--font-meta);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* Below 46rem the navigation collapses behind a toggle. */
@media (max-width: 46rem) {
  /* Theme first, then hamburger, then the drawer on its own line. A preference
     control that costs two taps because it sits inside a drawer is a control
     people stop using. */
  .theme-toggle { order: 2; margin-left: auto; }
  .nav-menu-toggle { order: 3; margin-left: var(--space-2); }
  .nav-links { order: 4; }

  .nav-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.25rem; height: 2.25rem;
    padding: 0;
    background: none;
    border: var(--rule-width) solid var(--rule);
    cursor: pointer;
  }
  .nav-menu-bar {
    display: block;
    width: 1rem; height: 1.5px;
    margin-inline: auto;
    background: var(--ink);
  }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
    margin: 0;
    padding: var(--space-4) 0 var(--space-2);
  }
  .nav-links.is-open { display: flex; }
  .site-nav { flex-wrap: wrap; }
  .nav-list { flex-direction: column; gap: var(--space-3); font-size: var(--text-base); }

  /* js/main.js toggles this on <body> while the mobile menu is open; lock
     background scroll so the page behind the open menu doesn't move. Scoped
     to this same breakpoint: the toggle only exists below 46rem, and
     js/main.js has no resize handler to clear the class if the viewport
     grows past it while open, so the rule must not apply above 46rem. */
  body.nav-open { overflow: hidden; }
}