/* ─────────────────────────────────────────────────────────────
   Stepikin Case Shell — UNIFIED header / footer for all cases.
   Each case sets:
     --shell-bg          page background (matches case)
     --shell-fg          primary text color
     --shell-fg-dim      muted text
     --shell-line        hairline border
     --shell-accent      brand accent (different per case)
   Logo is always "STEPI.KIN" — same as portfolio home.
   ───────────────────────────────────────────────────────────── */

.shell-topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 40px;min-height:60px;
  /* shell-nav uses absolute centering — needs relative parent */
  /* (sticky already establishes a positioning context) */
  background:color-mix(in srgb, var(--shell-bg, #0a0a0c) 88%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--shell-line, rgba(255,255,255,0.06));
  font-family:'Inter','SF Pro Display',-apple-system,system-ui,sans-serif;
  color:var(--shell-fg, #f4f1ea);
}
.shell-topbar a{color:inherit;text-decoration:none}
.shell-topbar .shell-brand{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Inter','Geist','SF Pro Display',-apple-system,system-ui,sans-serif;
  font-size:14px;font-weight:500;letter-spacing:-0.005em;
  transition:opacity .2s;
}
.shell-topbar .shell-brand:hover{opacity:.78}
.shell-topbar .shell-back-arrow{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--shell-line, rgba(255,255,255,0.18));
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;color:inherit;
}
.shell-topbar .shell-nav{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--shell-fg-dim, rgba(255,255,255,0.55));
}
.shell-topbar .shell-nav a, .shell-topbar .shell-nav span{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:100px;
  border:1px solid transparent;
  font-size:12px;letter-spacing:0.01em;
  color:var(--shell-fg-dim, rgba(255,255,255,0.55));
  text-decoration:none;transition:color .2s,border-color .2s;
}
.shell-topbar .shell-nav a:hover{color:var(--shell-fg, #f4f1ea)}
/* Optional .shell-pill wrapper for "status badges" — consistent shape */
.shell-topbar .shell-pill{
  border:1px solid var(--shell-line, rgba(255,255,255,0.14));
}
.shell-topbar .shell-pill .dot{
  width:6px;height:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,0.6);
}
.shell-topbar .shell-right{
  display:flex;align-items:center;gap:12px;
}
.shell-topbar .shell-lang{
  font-family:'SF Mono','Geist Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;
  border:1px solid var(--shell-line, rgba(255,255,255,0.14));
  background:transparent;color:var(--shell-fg-dim, rgba(255,255,255,0.55));
  cursor:pointer;transition:all .2s;
}
.shell-topbar .shell-lang:hover{
  color:var(--shell-fg, #f4f1ea);
  border-color:var(--shell-accent, #ff4d00);
}
.shell-topbar .shell-cta{
  font-size:12px;font-weight:500;letter-spacing:.02em;
  padding:8px 18px;border-radius:100px;
  border:1px solid var(--shell-accent, #ff4d00);
  color:var(--shell-accent, #ff4d00);
  transition:all .2s;
}
.shell-topbar .shell-cta:hover{
  background:var(--shell-accent, #ff4d00);
  color:var(--shell-bg, #0a0a0c);
}

/* Footer */
.shell-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 40px;margin-top:60px;
  border-top:1px solid var(--shell-line, rgba(255,255,255,0.06));
  font-family:'Inter','SF Pro Display',-apple-system,system-ui,sans-serif;
  font-size:12px;color:var(--shell-fg-dim, rgba(255,255,255,0.5));
  background:color-mix(in srgb, var(--shell-bg, #0a0a0c) 96%, transparent);
}
.shell-footer .shell-foot-l{
  display:flex;align-items:center;gap:14px;
}
.shell-footer .shell-foot-brand{
  font-family:'Inter','Geist',sans-serif;font-weight:500;
  letter-spacing:-0.005em;
  color:var(--shell-fg, #f4f1ea);font-size:13px;
}
.shell-footer .shell-foot-sep{opacity:.4}
.shell-footer .shell-foot-r{
  display:flex;align-items:center;gap:24px;
}
.shell-footer .shell-foot-r a{
  color:inherit;text-decoration:none;transition:color .2s;
}
.shell-footer .shell-foot-r a:hover{color:var(--shell-fg, #f4f1ea)}

@media (max-width: 720px){
  .shell-topbar{padding:12px 20px}
  .shell-topbar .shell-nav{display:none}
  .shell-footer{flex-direction:column;gap:14px;padding:24px 20px;text-align:center}
}