/* COSIMO dark nav for subpages. Same bar as the homepage, lifted from cosimo-site/styles.css. */
:root {
  --card: #050b18; --ink: #ffffff; --ink-dim: #a8c0db; --ink-faint: #6f83a0; --accent: #7ec8e8;
  --rule: rgba(238,241,246,.10); --nav-h: 90px;
}
/* Subpages have no hero photo under the bar, so the bar is solid from the start and the page
   starts below it. The homepage keeps its own copy of these rules in home.css. */
body.subpage { padding-top: var(--nav-h); }
body.subpage .nav { background: rgba(5,11,24,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  /* readable from the first pixel: a dark gradient behind the bar over any photo */
  background: linear-gradient(to bottom, rgba(5,11,24,.82) 0%, rgba(5,11,24,.45) 60%, rgba(5,11,24,0) 100%);
  transition: background .5s ease, backdrop-filter .5s ease;
}
.nav.scrolled { background: rgba(5,11,24,.80); backdrop-filter: blur(10px); }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.nav-brand img { height: 34px; width: auto; display: block; border-radius: 7px; }
.nav-brand span {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; font-size: 23px;
  letter-spacing: .08em; text-transform: uppercase;
}
.nav-links { display: flex; gap: clamp(18px, 3vw, 40px); }
.nav-links a {
  color: var(--ink); text-decoration: none;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400;
  text-shadow: 0 1px 14px rgba(0,0,0,.7);
  transition: color .3s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-brand span { text-shadow: 0 1px 14px rgba(0,0,0,.7); }
.nav-toggle {
  display: none;
  width: 40px; height: 40px; padding: 9px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 860px) {
  :root { --nav-h: 82px; }
  .nav { padding: 0 20px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h); right: 0; left: 0;
    flex-direction: column; gap: 0;
    background: rgba(5,11,24,.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
    padding: 8px 20px 18px;
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
  }
  .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a {
    padding: 15px 0; font-size: 13px; letter-spacing: .22em;
    border-bottom: 1px solid rgba(238,241,246,.06);
  }
}