/* Site directory drawer — dakotawilliams.net
   Three tabs: You / Me / Qualifications. Ink + copper, matching the marks. */
:root{
  --nav-ink:#0e1016;
  --nav-panel:#12151d;
  --nav-panel-2:#171b25;
  --nav-line:rgba(255,255,255,.10);
  --nav-copper:#c8763b;
  --nav-copper-2:#e09a5e;
  --nav-text:#e9ecf1;
  --nav-muted:#98a1b0;
}
.nav-toggle{
  position:fixed;top:14px;left:14px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  appearance:none;cursor:pointer;
  padding:10px 15px 10px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,16,24,.70);
  color:#eef1f6;
  font:650 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.nav-toggle:hover{border-color:rgba(200,118,59,.65);color:#fff}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars i{display:block;width:15px;height:2px;border-radius:2px;background:var(--nav-copper-2)}
.nav-toggle[aria-expanded="true"]{background:rgba(200,118,59,.16);border-color:rgba(200,118,59,.55)}

.nav-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(4,6,10,.55);
  opacity:0;pointer-events:none;transition:opacity .26s ease;backdrop-filter:blur(2px);
}
.nav-scrim.open{opacity:1;pointer-events:auto}

.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:80;
  width:min(320px,88vw);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--nav-panel) 0%,var(--nav-panel-2) 100%);
  border-right:1px solid var(--nav-line);
  box-shadow:0 0 70px -20px rgba(0,0,0,.85);
  transform:translateX(-102%);
  transition:transform .3s cubic-bezier(.4,.02,.2,1);
}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--nav-copper),#1f3a5f)}

.nav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:22px 18px 14px;border-bottom:1px solid var(--nav-line)}
.nav-head .kicker{margin:0 0 3px;color:var(--nav-copper-2);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:800}
.nav-head .name{margin:0;font-size:16px;font-weight:800;color:#fbf9f5;letter-spacing:-.01em}
.nav-close{appearance:none;cursor:pointer;flex:none;
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--nav-line);background:rgba(255,255,255,.04);
  color:#cfd4dd;font-size:18px;line-height:1;display:grid;place-items:center;
  transition:border-color .15s,color .15s,background .15s}
.nav-close:hover{border-color:rgba(200,118,59,.6);color:#fff;background:rgba(200,118,59,.12)}

.nav-tabs{display:flex;gap:4px;padding:12px 14px 0}
.nav-tab{
  flex:1;appearance:none;cursor:pointer;
  padding:10px 6px;border-radius:10px 10px 0 0;
  border:1px solid transparent;border-bottom:0;
  background:transparent;color:var(--nav-muted);
  font:700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
  transition:color .13s,background .13s,border-color .13s;
}
.nav-tab:hover{color:#e6e9ef}
.nav-tab.active{color:#fff;background:rgba(255,255,255,.05);border-color:var(--nav-line)}
.nav-tab:focus-visible{outline:2px solid var(--nav-copper);outline-offset:2px}

.nav-body{flex:1;overflow-y:auto;padding:18px}
.nav-panel{display:none}
.nav-panel.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.nav-panel .kicker{margin:0 0 8px;color:var(--nav-copper-2);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.nav-panel h3{margin:0 0 10px;font-size:22px;font-weight:800;color:#fbf9f5;letter-spacing:-.02em}
.nav-panel .line{margin:0 0 18px;color:#c3cad4;font-size:14.5px;line-height:1.55}

.nav-cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:11px 18px;border-radius:11px;font-size:14.5px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--nav-copper),#a95a26);
  box-shadow:0 12px 30px -14px rgba(200,118,59,.95);transition:transform .15s,filter .15s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.nav-cta.ghost{color:#eef1f5;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);box-shadow:none}

.cert-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cert-list li{position:relative;padding:11px 13px 11px 34px;border-radius:10px;
  background:rgba(255,255,255,.035);border:1px solid var(--nav-line);
  color:#e6e9ef;font-size:14px;font-weight:600}
.cert-list li::before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:2px;background:linear-gradient(135deg,var(--nav-copper),#1f3a5f)}
.cert-note{color:var(--nav-muted);font-size:11.5px;line-height:1.5;margin:14px 2px 0}

.nav-foot{padding:15px 18px 20px;border-top:1px solid var(--nav-line)}
.nav-foot a{color:var(--nav-muted);text-decoration:none;font-size:12px;letter-spacing:.03em;
  border-bottom:1px solid rgba(200,118,59,.4)}
.nav-foot a:hover{color:#e6e9ef}

@media print{.nav-toggle,.nav-drawer,.nav-scrim{display:none !important}}
@media (max-width:520px){.nav-toggle{padding:10px 12px}.nav-toggle .txt{display:none}}