/* progress rail */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;z-index:1000}

/* nav */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;padding:16px var(--pad-x);background:var(--matte);color:var(--matte-ink);transition:box-shadow .25s ease,background-color .35s ease,color .35s ease}
.nav.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.nav-brand{font-family:var(--font-heading);font-weight:800;font-size:18px;letter-spacing:-.01em;margin-right:auto;white-space:nowrap;flex-shrink:0}
.nav-brand-dot{color:var(--color-accent)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links-inner{display:contents}
.nav-links a{font:14px/20px var(--font-body);color:color-mix(in srgb,var(--matte-ink) 72%,transparent);text-decoration:none;transition:color .15s ease}
.nav-links a:hover{color:var(--matte-ink)}
.nav .btn{margin-left:8px}
.nav-cta-mobile.btn{display:none}

/* mobile menu button */
.nav-menu-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:32px;height:32px;flex:none;background:transparent;border:0;cursor:pointer;padding:0;color:inherit}
.nmb-bar{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.nav-menu-btn[aria-expanded="true"] .nmb-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-menu-btn[aria-expanded="true"] .nmb-bar:nth-child(2){opacity:0}
.nav-menu-btn[aria-expanded="true"] .nmb-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* theme toggle */
.theme-toggle{display:inline-flex;align-items:center;gap:9px;margin-left:6px;background:transparent;border:0;padding:6px 2px;cursor:pointer;color:inherit;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:.01em}
.theme-toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:999px}
.tt-track{position:relative;width:42px;height:23px;border-radius:999px;flex:none;background:color-mix(in srgb,currentColor 22%,transparent);border:1.5px solid color-mix(in srgb,currentColor 55%,transparent);transition:background .3s ease,border-color .3s ease}
.theme-toggle:hover .tt-track{background:color-mix(in srgb,currentColor 34%,transparent)}
.tt-thumb{position:absolute;top:1.5px;left:1.5px;width:17px;height:17px;border-radius:50%;background:currentColor;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.22,1,.36,1)}
html[data-theme="dark"] .tt-thumb{transform:translateX(19px)}
.tt-icon{position:absolute;width:11px;height:11px;color:var(--matte);transition:opacity .3s ease,transform .35s ease}
.tt-sun{opacity:1;transform:rotate(0deg) scale(1)}
.tt-moon{opacity:0;transform:rotate(-60deg) scale(.4)}
html[data-theme="dark"] .tt-sun{opacity:0;transform:rotate(60deg) scale(.4)}
html[data-theme="dark"] .tt-moon{opacity:1;transform:rotate(0deg) scale(1)}
@media (prefers-reduced-motion:reduce){.tt-thumb,.tt-icon{transition:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:800;font-size:14px;line-height:1.2;padding:11px 22px;border:1.5px solid transparent;border-radius:999px;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--color-accent);color:var(--paper)}
.btn-primary:hover{background:var(--color-accent-700);color:var(--paper)}
.btn-ghost{color:inherit;border-color:currentColor;background:transparent}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 10%,transparent);color:inherit}
.btn-block{width:100%;justify-content:center}

@media (max-width:900px){
  .nav{gap:10px;position:relative}
  .nav-menu-btn{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    display:grid;grid-template-rows:0fr;
    background:var(--matte);
    opacity:0;
    pointer-events:none;
    box-shadow:0 16px 24px rgba(0,0,0,.2);
    transition:grid-template-rows .35s ease,opacity .25s ease;
  }
  .nav-links.open{grid-template-rows:1fr;opacity:1;pointer-events:auto}
  .nav-links-inner{display:flex;flex-direction:column;overflow:hidden;min-height:0}
  .nav-links a{padding:15px var(--pad-x);border-top:1px solid color-mix(in srgb,var(--matte-ink) 14%,transparent)}
  .nav-links a.nav-cta-mobile{display:flex;justify-content:center;color:var(--paper);text-decoration:none;border-top:0;margin:16px var(--pad-x) 4px}
  .nav-cta-desktop{display:none}
  .tt-label{display:none}
  .theme-toggle{gap:0;margin-left:0}
}