/* ═══════════════════════════════════════════════════════════════════════
   Running head · fixed top bar with brand mark, nav, scroll counter
   mix-blend-difference makes it readable over both light & dark sections.
   ═══════════════════════════════════════════════════════════════════════ */

.runhead{
  position:fixed;
  top:0;left:0;right:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:1.5rem var(--pad);
  z-index:80;
  pointer-events:none;
  mix-blend-mode:difference;
  transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.runhead > *{pointer-events:auto}

/* Frosted glass effect when scrolled — Light mode */
.runhead.is-scrolled{
  mix-blend-mode:normal;
  background:rgba(248,247,245,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(44,44,43,.08);
}
.runhead.is-scrolled .caption{
  color:var(--ink-soft);
}
.runhead.is-scrolled .runhead-nav a{
  color:var(--ink-soft);
}
.runhead.is-scrolled .runhead-nav a:hover,
.runhead.is-scrolled .runhead-nav a[aria-current="page"]{
  color:var(--ink);
}
.runhead.is-scrolled .counter{
  color:var(--accent);
}

/* Frosted glass effect when scrolled — Dark mode */
[data-theme="dark"] .runhead.is-scrolled{
  background:rgba(26,25,24,.88);
  box-shadow:0 1px 0 rgba(240,237,232,.08);
}

.runhead .caption{
  color:rgba(248,247,245,.92);
  font-size:.62rem;
  letter-spacing:.38em;
}

.runhead-left{justify-self:start}

.runhead-nav{
  justify-self:center;
  display:flex;
  gap:2.5rem;
}
.runhead-nav a{
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(248,247,245,.78);
  position:relative;
  transition:color .25s ease;
}
.runhead-nav a:hover{
  color:rgba(248,247,245,.98);
}
.runhead-nav a[aria-current="page"]{
  color:rgba(248,247,245,.98);
}
.runhead-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-6px;
  height:1px;
  background:var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   Theme Toggle · Pill Switch
   ═══════════════════════════════════════════════════════════════════════ */

.theme-toggle{
  position:relative;
  width:52px;
  height:28px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}

.toggle-track{
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
  padding:3px;
  border-radius:100px;
  background:rgba(248,247,245,.15);
  border:1px solid rgba(248,247,245,.2);
  transition:background .3s ease, border-color .3s ease;
}

.toggle-thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#F8F7F5;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .3s var(--ease-archival), background .3s ease;
}

.theme-toggle.is-dark .toggle-thumb{
  transform:translateX(24px);
  background:#1A1918;
}

.toggle-icons{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:0 4px;
  pointer-events:none;
}

.toggle-icon-sun,
.toggle-icon-moon{
  width:12px;
  height:12px;
  transition:opacity .3s ease;
}

.toggle-icon-sun{
  color:#E8B84A;
  opacity:0;
}
.toggle-icon-moon{
  color:#7B8FA3;
  opacity:1;
}

.theme-toggle.is-dark .toggle-icon-sun{
  color:#D4A43A;
  opacity:1;
}
.theme-toggle.is-dark .toggle-icon-moon{
  color:#9BB0C8;
  opacity:0;
}

/* Desktop toggle positioning */
.theme-toggle-desktop{
  justify-self:end;
}

/* Scrolled state */
.runhead.is-scrolled .toggle-track{
  background:rgba(44,44,43,.08);
  border-color:rgba(44,44,43,.15);
}
.runhead.is-scrolled .toggle-thumb{
  background:var(--ink);
}
.runhead.is-scrolled .theme-toggle.is-dark .toggle-thumb{
  background:var(--bg);
}
.runhead.is-scrolled .toggle-icon-sun{
  color:#A07A1A;
}
.runhead.is-scrolled .toggle-icon-moon{
  color:#4A5F73;
}
.runhead.is-scrolled .theme-toggle.is-dark .toggle-icon-sun{
  color:#8A6A15;
}
.runhead.is-scrolled .theme-toggle.is-dark .toggle-icon-moon{
  color:#4A5F73;
}

/* Dark mode scrolled */
[data-theme="dark"] .runhead.is-scrolled .toggle-track{
  background:rgba(240,237,232,.08);
  border-color:rgba(240,237,232,.15);
}

/* Hide desktop toggle on mobile */
@media (max-width:720px){
  .theme-toggle-desktop{
    display:none;
  }
}

@media (max-width: 720px){
  .runhead{grid-template-columns:auto 1fr;}
  .runhead-nav{display:none}
  .runhead-right{justify-self:end}
}