:root{
  --nav-h: 74px;
  --nav-pad: clamp(12px, 1.6vw, 18px);
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,.78);
  --hair: rgba(255,255,255,.28);
  --brand-pink: #D6B7B5;
}

/* layout */
.nav-glass{ 
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h);
  z-index: 120; /* above body overlay */
  display: grid;
  background: rgba(8,18,24,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 -1px 0 var(--hair);
}
.nav-wrap{
  width: min(1400px, 94vw);
  margin-inline: auto;
  height: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto 1fr 48px;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
}

/* centered brand */
.brand{ justify-self: center; text-decoration: none; }
.brand-text{
  font-family: "Optima", "Trajan Pro", ui-serif, Georgia, serif;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: .35em;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}

/* nav links */
.nav-left, .nav-right{ display:flex; gap: clamp(16px, 2.3vw, 28px); align-items:center; }
.nav-left a, .nav-right a{
  color: var(--ink-dim);
  text-decoration:none; text-transform:uppercase; letter-spacing:.16em;
  font-size: clamp(12px, .95vw, 14px);
  transition: color .2s ease, opacity .2s ease;
}
.nav-left a:hover, .nav-right a:hover{ color: var(--ink); }

/* burger */
.burger{ width: 48px; height: 48px; display:grid; place-items:center; cursor:pointer; }
.burger span{ display:block; width:20px; height:2px; background: var(--ink); margin:3px 0; border-radius:1px; }

/* vertical hairlines (optional, subtle like reference) */
/* push page content */
body{ padding-top: var(--nav-h); }

/* mobile drawer */
.scrim{
  position: fixed; inset:0; background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s;
}
.drawer{
  position: fixed; top:0; bottom:0; left:-320px; width:320px;
  background: rgba(8,18,24,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 88px 20px 20px;
  transition: left .25s ease;
  z-index: 200;
}
.drawer nav{ display:flex; flex-direction:column; gap:14px; }
.drawer a{ color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; font-size:14px; }

/* toggle */
.nav-toggle:checked ~ .nav-glass .scrim{ opacity:1; pointer-events:auto; }
.nav-toggle:checked ~ .nav-glass .drawer{ left:0; }

@media (max-width: 960px){
  .nav-left, .nav-right{ display:none; }
  .nav-wrap{ grid-template-columns: 48px 1fr 48px; }
  .brand{ justify-self:center; }
}


:root{
  --nav-h: 84px; /* a touch taller for large centered brand */
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,.80);
  --hair: rgba(255,255,255,.22);
}

/* glass background lighter & more transparent */
.nav-glass{ 
  background: rgba(8,18,24,.06);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  box-shadow: inset 0 -1px 0 var(--hair);
}

/* ensure brand is visible + centered */
.brand{ justify-self:center; display:block !important; text-decoration:none; }
.brand-text{
  display:block !important;
  font-family: "Optima", "Trajan Pro", ui-serif, Georgia, serif;
  font-size: clamp(26px, 2.3vw, 36px); /* match reference scale */
  letter-spacing: .38em;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 8px rgba(0,0,0,.18);
}

/* balance left/right gutters so brand sits in true middle */
.nav-wrap{ grid-template-columns: 64px 1fr auto 1fr 64px; }

/* scale burger to feel like reference */
.burger{ width:64px; height:64px; }
.burger span{ width:26px; height:2px; margin:4px 0; background: var(--ink); }

/* nav link polish */
.nav-left a, .nav-right a{ letter-spacing:.18em; font-weight: 400; }

@media (max-width: 960px){
  .nav-wrap{ grid-template-columns: 48px 1fr 48px; }
  .brand-text{ font-size: 22px; letter-spacing: .32em; }
}