/* case-nav.css — Case Studies "Glass" Navigation System (global) */
:root{
  --accent:#F96F6E; /* accent only */
  --ink:#EDEDED;
  --ink-dim:#C9C9C9;
  --glass-bg:rgba(255,255,255,.08);
  --glass-bg-strong:rgba(255,255,255,.12);
  --glass-border:rgba(255,255,255,.18);
  --shadow:0 8px 24px rgba(0,0,0,.35);
}
.read-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
  z-index:1000; transition:width .15s linear; box-shadow:0 1px 0 rgba(255,255,255,.12);
}
.case-toc{
  position:sticky; top:96px; display:flex; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--glass-border); margin:24px 0 32px;
}
.case-toc button{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  padding:8px 12px; cursor:pointer; border-radius:999px;
  font:500 13px/1 "General Sans",system-ui; color:var(--ink-dim);
  backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.case-toc button:hover{ transform:translateY(-1px); color:var(--ink); background:var(--glass-bg-strong); }
.case-toc button.is-active{ color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.16); }
.next-section{
  position:fixed; right:18px; bottom:22px; z-index:900;
  background:var(--glass-bg-strong); color:#fff; border:1px solid var(--glass-border);
  padding:10px 14px; border-radius:999px; font:500 13px/1 "General Sans",system-ui;
  backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow); display:none;
}
.next-section:hover{ background:rgba(255,255,255,.18); }
.case-mobilebar{
  position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px;
  justify-content:space-between; align-items:center;
  padding:10px 14px; background:var(--glass-bg-strong);
  backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--glass-border); box-shadow:var(--shadow);
  z-index:999; transform:translateY(100%); transition:transform .25s ease;
}
.case-mobilebar.show{ transform:translateY(0); }
.case-mobilebar button{ background:transparent; border:0; font:600 14px/1 "General Sans"; color:var(--ink); }
.case-mobilebar .progress-read{ font:700 14px/1 "General Sans"; color:#fff; }
@media (min-width: 980px){ .case-mobilebar{ display:none; } }
@media (max-width: 979px){
  .case-toc{ position:static; overflow-x:auto; white-space:nowrap; border-bottom:0; }
}
[id]::before{ content:""; display:block; height:96px; margin-top:-96px; visibility:hidden; }
.section-peek{ color:var(--ink-dim); font:400 13px/1.45 "Inter"; margin:-6px 0 18px; text-align:center; }
.article-header{
  position:sticky; top:0; z-index:1100; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0)); backdrop-filter:blur(6px);
}
.article-header .brandmark img{ display:block; height:22px; padding:16px 0; }
.hamburger{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:flex; flex-direction:column; justify-content:center; gap:5px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); border-radius:10px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hamburger span{ display:block; height:2px; width:18px; margin:0 auto; background:#fff; border-radius:2px; }
.mobile-menu{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; z-index:1200; }
.mobile-menu.open{ display:block; }
.mobile-menu-close{
  position:absolute; top:24px; right:24px; background:none; border:none;
  color:#fff; cursor:pointer; padding:12px; border-radius:8px;
  transition:background-color .2s ease, color .2s ease;
}
.mobile-menu-close:hover{ background:rgba(255,255,255,.1); color:#FF6B6B; }
.mobile-menu ul{
  list-style:none; margin:0; padding:120px 24px 24px;
  display:flex; flex-direction:column; gap:56px; align-items:center;
  min-height:100vh; justify-content:center;
}
.mobile-menu a{
  color:#fff; text-decoration:none; font:600 56px/1.15 "Big Shoulders Display", system-ui;
  letter-spacing:.2px; transition:opacity .2s ease, transform .2s ease, color .2s ease;
}
.mobile-menu a:hover{ opacity:.85; transform:translateY(-1px); }
.mobile-menu a[href="myexperience.html"]{ color:#FF6B6B; }
.mobile-menu a[href="myexperience.html"]:hover{ color:#ff5252; opacity:1; }
@media (min-width: 980px){ .article-header, .mobile-menu{ display:none; } }