/* ==========================================================================
   az-nav — canonical site navigation for azizsaif.com
   Single source of truth. Tokens are namespaced (--az-*) so they never
   clobber the per-page :root variables already defined across the site.
   ========================================================================== */
:root{
  --az-cream:#F7F5F1; --az-cream-soft:#EFEADF;
  --az-ink:#1C1914; --az-mute:#6B6558;
  --az-terra:#C47820; --az-terra-d:#9A5E16;
  --az-line:#E4DDD0;
  --az-nav-h:64px; --az-nav-h-m:56px;
  --az-ff-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --az-ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --az-cream:#1E1B17; --az-cream-soft:#242018;
    --az-ink:#E8E3D8; --az-mute:#978F82;
    --az-terra:#E0A85C; --az-terra-d:#D9952A;
    --az-line:#3A3428;
  }
}
html[data-theme="dark"]{
  --az-cream:#1E1B17; --az-cream-soft:#242018;
  --az-ink:#E8E3D8; --az-mute:#978F82;
  --az-terra:#E0A85C; --az-terra-d:#D9952A;
  --az-line:#3A3428;
}

/* --- skip link ---------------------------------------------------------- */
.az-skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--az-ink); color:#fff; font-family:var(--az-ff-body);
  font-size:13px; font-weight:600; padding:10px 16px; border-radius:0 0 6px 0;
  text-decoration:none;
}
.az-skip:focus{ left:0; outline:2px solid var(--az-terra); outline-offset:2px; }

/* --- bar ---------------------------------------------------------------- */
.az-nav{
  position:sticky; top:0; z-index:900;
  background:color-mix(in srgb, var(--az-cream) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--az-line);
  font-family:var(--az-ff-body);
}
@supports not (background:color-mix(in srgb, red, blue)){
  .az-nav{ background:var(--az-cream); }
}
.az-nav-row{
  max-width:1280px; margin:0 auto; padding:0 24px;
  height:var(--az-nav-h); display:flex; align-items:center; gap:22px;
}
.az-brand{
  font-family:var(--az-ff-display); font-weight:700; font-size:19px;
  color:var(--az-ink); letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px;
}
.az-brand::before{
  content:""; width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:url(/images/aziz-portrait.jpg) center/cover no-repeat;
  border:1px solid rgba(0,0,0,.12);
}
.az-brand em{ color:var(--az-terra); font-style:italic; }

.az-menu{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.az-menu a{
  color:var(--az-ink); text-decoration:none; font-size:13px; font-weight:600;
  letter-spacing:.01em; padding:6px 2px; position:relative; white-space:nowrap;
  transition:color .15s ease;
}
.az-menu a:hover{ color:var(--az-terra); }
.az-menu a[aria-current="page"]{ color:var(--az-terra-d); }
.az-menu a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--az-terra); border-radius:2px;
}
.az-menu a.az-cta{
  background:var(--az-ink); color:#fff; padding:8px 16px; border-radius:999px;
  font-weight:700;
}
.az-menu a.az-cta:hover{ background:var(--az-terra); color:#fff; }
.az-menu a.az-cta[aria-current="page"]::after{ display:none; }

/* --- hamburger (hidden on desktop) -------------------------------------- */
.az-burger{
  display:none; margin-left:auto; width:42px; height:42px; padding:9px;
  background:transparent; border:1px solid var(--az-line); border-radius:8px;
  cursor:pointer; flex-direction:column; justify-content:space-between; gap:0;
}
.az-burger-bar{
  display:block; height:2px; width:100%; background:var(--az-ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.az-burger[aria-expanded="true"] .az-burger-bar:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.az-burger[aria-expanded="true"] .az-burger-bar:nth-child(2){ opacity:0; }
.az-burger[aria-expanded="true"] .az-burger-bar:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* --- scrim behind the mobile drawer ------------------------------------- */
.az-scrim{
  position:fixed; inset:0; z-index:880; background:rgba(28,25,20,.45);
  opacity:0; transition:opacity .25s ease;
}
.az-scrim.az-show{ opacity:1; }

/* --- mobile ------------------------------------------------------------- */
@media (max-width:768px){
  .az-nav-row{ height:var(--az-nav-h-m); }
  .az-burger{ display:flex; }
  .az-menu{
    position:fixed; top:0; right:0; bottom:0; z-index:890;
    width:min(82vw,320px); margin:0; padding:calc(var(--az-nav-h-m) + 24px) 26px 32px;
    flex-direction:column; align-items:stretch; gap:6px;
    background:var(--az-cream); border-left:1px solid var(--az-line);
    box-shadow:-16px 0 44px rgba(0,0,0,.18);
    transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.7,.3,1);
    overflow-y:auto;
  }
  .az-menu.az-open{ transform:translateX(0); }
  .az-menu a{ font-size:16px; padding:13px 6px; border-bottom:1px solid var(--az-line); }
  .az-menu a[aria-current="page"]::after{ display:none; }
  .az-menu a[aria-current="page"]{ color:var(--az-terra-d); padding-left:12px; border-left:3px solid var(--az-terra); }
  .az-menu a.az-cta{
    margin-top:14px; text-align:center; border-bottom:none; border-radius:999px;
    color:#fff;
  }
}

/* --- breadcrumbs (JS-rendered on sub-pages) ----------------------------- */
.az-crumbs{
  font-family:var(--az-ff-body); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--az-mute); background:var(--az-cream); border-bottom:1px solid var(--az-line);
  padding:12px 24px; max-width:1280px; margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px;
}
.az-crumbs a{ color:var(--az-mute); text-decoration:none; }
.az-crumbs a:hover{ color:var(--az-terra); }
.az-crumbs [aria-current="page"]{ color:var(--az-ink); }
.az-crumbs span[aria-hidden]{ color:var(--az-line); }

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .az-menu,.az-scrim,.az-burger-bar,.az-menu a{ transition:none !important; }
}