/* ============================================================
   Site navigation — sticky top bar + in-page section scroll-spy
   Shared by index.html and case-study.html. Relies on the design
   tokens (--ink, --paper, --accent, --mono …) defined per page.
   ============================================================ */

html{
  scroll-behavior:smooth;
  scroll-padding-top:104px;        /* keep anchored sections clear of the bar */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

.sitenav{
  position:sticky; top:0; z-index:100;
  background:rgba(251,249,245,.86);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--rule-soft);
}

/* ---- top row: brand · documents · pdf ---- */
.nav-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 22px;
}
.nav-brand{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--ink);
  flex:0 0 auto;
}
.nav-mark{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:8px;
  background:var(--accent); color:var(--paper);
  font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.01em;
}
.nav-name{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2);
  white-space:nowrap;
}

.nav-docs{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.nav-doc{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none;
  padding:7px 13px; border-radius:999px;
  transition:color .16s ease, background .16s ease;
}
.nav-doc:hover{ color:var(--ink); background:var(--bg); }
.nav-doc.is-active{ color:var(--paper); background:var(--accent); }

.nav-pdf{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:6px; padding:7px 13px; border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  border:1px solid var(--rule); background:var(--paper);
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.nav-pdf:hover{ border-color:var(--ink); color:var(--ink); background:var(--bg); }
.nav-pdf .pdf-ic{ font-size:12px; line-height:1; }

/* ---- second row: horizontal section scroll-spy ---- */
.nav-sections{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:stretch; gap:2px;
  padding:0 16px;
  border-top:1px solid var(--rule-soft);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  /* fade the scrollable edges; the 16px padding keeps labels crisp */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.nav-sections::-webkit-scrollbar{ display:none; }
.nav-sec{
  flex:0 0 auto;
  position:relative;
  padding:11px 13px 10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-3); text-decoration:none; white-space:nowrap;
  scroll-snap-align:center;
  transition:color .16s ease;
}
.nav-sec::after{
  content:""; position:absolute; left:13px; right:13px; bottom:0; height:2px;
  background:var(--accent); border-radius:2px 2px 0 0;
  transform:scaleX(0); transform-origin:center;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.nav-sec:hover{ color:var(--ink-2); }
.nav-sec.is-current{ color:var(--ink); }
.nav-sec.is-current::after{ transform:scaleX(1); }

/* ---- responsive ---- */
@media (max-width:680px){
  .nav-inner{ padding:9px 14px; gap:10px; }
  .nav-name{ display:none; }
  .nav-doc{ padding:6px 10px; }
  .nav-pdf{ padding:6px 10px; margin-left:4px; }
  .nav-sections{ padding:0 12px; }
  html{ scroll-padding-top:98px; }
}
@media (max-width:420px){
  .nav-inner{ gap:8px; padding:9px 12px; }
  .nav-doc, .nav-pdf{ font-size:10px; padding:6px 9px; letter-spacing:.03em; }
  .nav-mark{ width:27px; height:27px; }
}

/* ---- print ---- */
@media print{
  .sitenav{ display:none !important; }
}