/* AskVio v2 — shared site chrome (announcement bar, nav, footer) + blog components */

/* ── Announcement bar ── */
.annbar{position:fixed;top:0;left:0;right:0;z-index:22;background:var(--dark);color:var(--on-dark);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px clamp(16px,4vw,32px);font-size:.82rem;line-height:1.4;text-align:center}
.ann-tag{background:var(--pine);color:#fff;font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);white-space:nowrap;flex-shrink:0}
.annbar span.txt{color:var(--on-dark-muted)}
.annbar a{color:#9dbcf5;font-weight:500;white-space:nowrap}
.annbar a:hover{color:#c9d9fb}
@media(max-width:640px){.annbar{flex-wrap:nowrap;gap:10px;padding:8px 16px}.annbar span.txt{display:none}}

/* ── Nav ── */
.nav-wrap{position:fixed;top:var(--annh,42px);left:0;right:0;z-index:20;display:flex;justify-content:center;padding:18px clamp(16px,4vw,32px);pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid var(--hairline);border-radius:14px;padding:8px 8px 8px 18px;box-shadow:0 1px 2px rgba(20,22,26,.04),0 18px 44px -20px rgba(20,22,26,.24);transition:box-shadow .6s var(--ease),background .6s var(--ease)}
.nav.scrolled{background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(20,22,26,.05),0 24px 56px -22px rgba(20,22,26,.3)}
.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:7px 11px;border-radius:var(--r-sm);font-size:.9rem;font-weight:450;color:var(--ink-soft);transition:background .45s var(--ease),color .45s var(--ease)}
.nav-links a:hover{background:rgba(20,22,26,.05);color:var(--ink)}
.nav-links a[aria-current]{background:var(--pine-soft);color:var(--pine-deep)}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-login{padding:8px 13px;border-radius:var(--r-sm);font-size:.9rem;font-weight:450;color:var(--ink-soft);transition:background .45s var(--ease)}
.nav-login:hover{background:rgba(20,22,26,.05);color:var(--ink)}
.burger{display:none;width:36px;height:36px;border:none;background:var(--surface-3);border-radius:var(--r-md);cursor:pointer;position:relative;flex-shrink:0}
.burger span{position:absolute;left:11px;width:16px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .55s var(--ease),opacity .35s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21px}
.burger.open span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:19;background:rgba(247,248,250,.86);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:2px;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.sheet.open{opacity:1;pointer-events:auto}
.sheet a{font-size:1.9rem;font-weight:450;letter-spacing:-.03em;color:var(--ink);padding:9px 0;opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.sheet.open a{opacity:1;transform:none}
.sheet.open a:nth-child(1){transition-delay:.06s}.sheet.open a:nth-child(2){transition-delay:.11s}.sheet.open a:nth-child(3){transition-delay:.16s}.sheet.open a:nth-child(4){transition-delay:.21s}.sheet.open a:nth-child(5){transition-delay:.26s}.sheet.open a:nth-child(6){transition-delay:.31s}.sheet.open a:nth-child(7){transition-delay:.36s}
@media(max-width:1000px){.nav-links{display:none}.burger{display:block}.nav{width:100%;justify-content:space-between}}
.nav .btn.sm{white-space:nowrap}
@media(max-width:520px){.nav{gap:8px;padding-left:12px}.nav-right{gap:4px}.nav-login{padding:8px 8px}}
@media(max-width:400px){.nav .btn.sm{padding:9px 13px}.nav .btn.sm .cap{display:none}}
@media(max-width:340px){.nav-login{display:none}}

/* ── Footer ── */
footer{background:var(--surface);border-top:1px solid var(--hairline);padding:clamp(52px,5.5vw,76px) 0 34px}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:38px;border-bottom:1px solid var(--hairline-soft)}
.f-nav{display:flex;gap:clamp(32px,5vw,72px);flex-wrap:wrap}
.f-col{display:flex;flex-direction:column;gap:11px}
.f-col h4{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0 0 3px}
.f-col a{font-size:.89rem;color:var(--ink-soft)}
.f-col a:hover{color:var(--pine)}
.f-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.82rem;color:var(--faint)}
.f-bot a{color:var(--faint)}
.f-bot a:hover{color:var(--ink)}

/* ── Blog: shared bits ── */
.page-top{padding:calc(var(--annh,42px) + clamp(104px,12vh,150px)) 0 0}
.tag{display:inline-flex;align-items:center;font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--muted);border:1px solid var(--hairline)}
.tag.blue{background:var(--pine-soft);color:var(--pine-deep);border-color:rgba(46,107,230,.14)}
.tag.violet{background:var(--clay-soft);color:var(--clay);border-color:#e4e0fb}
.tag.amber{background:var(--ochre-soft);color:var(--ochre);border-color:#fbeccb}
.tag.green{background:var(--green-soft);color:var(--green);border-color:#cbeedb}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.meta{display:flex;align-items:center;gap:9px;font-family:'Geist Mono',monospace;font-size:.75rem;color:var(--faint)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--hairline);flex-shrink:0}