/* ============================================================
   VloggingPro shared stylesheet: navigation + site-wide design layer
   (heroes, eyebrows, stat rows, chips, cards, hero search).
   Linked from every page at the end of <head>, after the page's own <style>,
   so it keeps the same cascade position the old nav.js-injected <style> had.
   Nav markup lives in partials/nav.html; behaviour in nav.js.
   Re-stamp pages with: python3 update-nav.py
   ============================================================ */

/* ── Navigation ── */
.nav{position:sticky;top:0;z-index:100;background:rgba(248,247,243,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border,#E0DED5)}
.nav-inner{display:flex;align-items:center;height:60px}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-right:auto;text-decoration:none}
.logo-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ink,#0D0D0D);border-radius:var(--r-sm,3px);flex-shrink:0}
.logo-word{font-family:"DM Sans",sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.3px;color:var(--ink,#0D0D0D)}
.logo-word span{color:var(--blue,#0055FF)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-group{position:relative}
.nav-group-btn{display:flex;align-items:center;gap:4px;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;color:var(--ink2,#444440);padding:6px 11px;border-radius:var(--r-sm,3px);cursor:pointer;background:none;border:none;white-space:nowrap;transition:background .15s,color .15s}
.nav-group.open .nav-group-btn,.nav-group:focus-within .nav-group-btn{background:var(--bg2,#F0EFE9);color:var(--ink,#0D0D0D)}
.nav-group-btn{padding:10px 13px}
.nav-group-chevron{transition:transform .15s;flex-shrink:0}
.nav-group.open .nav-group-chevron,.nav-group:focus-within .nav-group-chevron{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--white,#fff);border:1px solid var(--border,#E0DED5);border-radius:var(--r-lg,6px);box-shadow:0 8px 24px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.05);padding:6px;min-width:210px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s,transform .15s;z-index:200}
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-group.open .nav-dropdown,.nav-group:focus-within .nav-dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-dropdown a{padding:9px 12px;font-size:13.5px}
.nav-dropdown.right{left:auto;right:0}
.nav-dropdown a{display:block;padding:7px 11px;font-size:13px;font-weight:500;color:var(--ink2,#444440);border-radius:var(--r-sm,3px);white-space:nowrap;text-decoration:none;transition:background .12s,color .12s}
.nav-dropdown a:hover{background:var(--bg2,#F0EFE9);color:var(--ink,#0D0D0D)}
.nav-drop-divider{height:1px;background:var(--border,#E0DED5);margin:5px 0}
.nav-drop-label{display:block;padding:5px 11px 2px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3,#888880)}
.nav-mega{width:640px;min-width:640px;padding:14px 16px}
.nav-mega-all{display:block;font-family:"DM Sans",sans-serif;font-size:13px;font-weight:600;color:var(--blue,#0055FF);padding:6px 8px 10px;text-decoration:none;border-bottom:1px solid var(--border,#E0DED5);margin-bottom:8px}
.nav-mega-all:hover{text-decoration:underline}
.nav-mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px}
.nav-mega-wide{width:860px;min-width:860px}
.nav-mega-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.nav-mega-wide{width:640px;min-width:640px}
.nav-mega-grid-4{grid-template-columns:repeat(2,1fr)}}
.nav-mega.nav-mega-charts .nav-mega-grid{grid-template-columns:repeat(3,1fr)}
.nav-mega-col{display:flex;flex-direction:column;gap:1px}
.nav-mega-col .nav-drop-label{padding:2px 8px 4px}
@media(max-width:900px){.nav-mega{width:520px;min-width:520px}}
.nav-cta{margin-left:10px;padding:7px 15px;background:var(--ink,#0D0D0D);color:#fff;border-radius:var(--r-sm,3px);font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;flex-shrink:0;transition:background .15s}
.nav-cta:hover{background:#333;color:#fff}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--ink,#0D0D0D)}
.nav-mobile{display:none;border-top:1px solid var(--border,#E0DED5);background:var(--bg,#F8F7F3);padding-bottom:8px}
.nav-mobile.open{display:block}
.nav-mobile-cta{display:block;margin:6px 12px 12px;padding:11px 16px;background:var(--ink,#0D0D0D);color:#fff;border-radius:var(--r-sm,3px);font-size:15px;font-weight:600;text-align:center;text-decoration:none}
.nav-acc{border-bottom:1px solid var(--border,#E0DED5)}
.nav-acc:last-child{border-bottom:none}
.nav-acc-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 20px;background:none;border:none;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;color:var(--ink2,#444440);cursor:pointer;text-align:left}
.nav-acc-chevron{transition:transform .2s}
.nav-acc.open .nav-acc-chevron{transform:rotate(180deg)}
.nav-acc-panel{display:none;padding:2px 12px 10px}
.nav-acc.open .nav-acc-panel{display:block}
.nav-acc-panel a{display:block;padding:8px 12px;font-size:14px;color:var(--ink2,#444440);border-radius:var(--r-sm,3px);text-decoration:none;transition:background .12s,color .12s}
.nav-acc-panel a:hover{background:var(--bg2,#F0EFE9);color:var(--ink,#0D0D0D)}
@media(max-width:768px){.nav-links{display:none}
.nav-cta{display:none}
.nav-toggle{display:flex}}

.hero,.article-hero,.vp-hero,.setup-hero{position:relative;background:#fff}
.hero::after,.article-hero::after,.vp-hero::after,.setup-hero::after{content:"";position:absolute;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width=%2722%27 height=%2722%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%271%27 fill=%27%23000%27 fill-opacity=%270.1%27/%3E%3C/svg%3E");background-size:22px 22px;-webkit-mask-image:linear-gradient(to right,transparent 40%,rgba(0,0,0,.6) 75%,rgba(0,0,0,.9) 100%);mask-image:linear-gradient(to right,transparent 40%,rgba(0,0,0,.6) 75%,rgba(0,0,0,.9) 100%);pointer-events:none}
.hero>.container,.article-hero>.container,.vp-hero>.container,.setup-hero>.container{position:relative;z-index:1}
.article-hero,.vp-hero{padding-top:52px}
.hero .badge,.article-hero .badge,.vp-hero .badge,.setup-hero .badge,.hero .eyebrow,.hero .hero-eyebrow{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:3px;margin-bottom:16px;width:fit-content}
.hero .eyebrow{background:var(--blue-lt,#EBF0FF);color:var(--blue,#0055FF)}
.hero .badge::before,.article-hero .badge::before,.vp-hero .badge::before,.setup-hero .badge::before,.hero .eyebrow::before,.hero .hero-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:vpPulse 2s infinite;flex-shrink:0}
@keyframes vpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero h1,.article-h1,.vp-title,.setup-name,.hero .h1{font-family:"DM Serif Display",serif;font-size:clamp(34px,4.4vw,54px);font-weight:400;line-height:1.06;letter-spacing:-.6px;color:var(--ink,#0D0D0D);max-width:820px}
.hero h1 em,.article-h1 em,.vp-title em,.setup-name em,.hero .h1 em{font-style:normal;color:var(--blue,#0055FF)}
.hero-sub,.article-intro,.vp-sub,.setup-tagline,.hero .intro{font-size:17px;color:var(--ink2,#444440);line-height:1.6;max-width:560px}
.meta-chip{font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;color:var(--ink2,#444440);background:#fff;border:1px solid var(--border,#E0DED5);border-radius:999px;padding:4px 11px;gap:6px;transition:border-color .15s,color .15s}
a.meta-chip:hover{border-color:var(--ink3,#888880);color:var(--ink,#0D0D0D)}
.setup-hero-inner{grid-template-columns:1fr!important;gap:0!important}
.setup-hero-inner.has-avatar{grid-template-columns:auto 1fr!important;column-gap:24px!important;align-items:start}
.setup-hero-inner.has-avatar .setup-avatar{margin-top:0!important;align-self:start}
.setup-hero-inner.has-avatar .setup-stats{grid-column:1/-1}
@media(max-width:640px){.setup-hero-inner.has-avatar{grid-template-columns:auto 1fr!important;column-gap:16px!important}.setup-hero-inner.has-avatar .setup-avatar{width:64px;height:64px}}
.setup-stats{flex-direction:row!important;flex-wrap:wrap;gap:10px 34px!important;border-top:1px solid var(--border,#E0DED5);padding-top:22px;margin-top:6px;max-width:640px}
.stat-box{background:none!important;border:0!important;padding:0!important;text-align:left!important;min-width:0!important}
.stat-box-n,.vp-stat b{font-family:"DM Serif Display",serif!important;font-size:28px!important;font-weight:400!important;letter-spacing:-.5px!important;line-height:1}
.stat-box-l,.vp-stat span{margin-top:5px!important;letter-spacing:1.5px!important}
.vp-stats{gap:10px 34px!important;border-top:1px solid var(--border,#E0DED5);padding-top:22px;margin-top:26px!important;max-width:640px}
.vp-stat{background:none!important;border:0!important;padding:0!important;min-width:0!important}
.card,.vp-tile,.cht,.gear-item,.vp-item,.tool-card,.gear-card,.list-card{border-radius:8px}
.vp-cardavatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--bg3,#E8E6DE);flex-shrink:0}
.search-input{height:46px!important;padding:0 14px 0 42px!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 fill=%27none%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%275.5%27 stroke=%27%23888880%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M12.2 12.2L16 16%27 stroke=%27%23888880%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") 14px center/16px 16px no-repeat!important;border:1.5px solid var(--ink,#0D0D0D)!important;border-radius:6px!important;font-size:15px!important;font-weight:500;min-width:300px!important;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .15s,border-color .15s}
.search-input:focus{border-color:var(--blue,#0055FF)!important;box-shadow:0 0 0 4px var(--blue-lt,#EBF0FF),0 2px 10px rgba(0,0,0,.06)}
.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-decoration{-webkit-appearance:none}
.hs{position:relative;z-index:5}
.hs:focus-within{z-index:40}
.hs.hs-inline{display:inline-block}
.hs.hs-inline .hs-panel{min-width:420px;max-width:calc(100vw - 40px)}
.hs.hs-hub{margin-top:24px;max-width:600px}
@media(max-width:640px){.hs-box{height:52px;padding-left:14px;gap:8px}.hs-submit{padding:0 14px}.hs.hs-inline .hs-panel{min-width:0;left:0;right:0}}
.hs:focus-within{z-index:40}
.hs-box{display:flex;align-items:center;gap:10px;height:58px;padding:0 8px 0 18px;background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-lg);box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .15s,border-color .15s}
.hs-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-lt),0 2px 10px rgba(0,0,0,.06)}
.hs-box > svg{flex-shrink:0;color:var(--ink3)}
.hs-input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:500 16px/1 'DM Sans',sans-serif;color:var(--ink)}
.hs-input::placeholder{color:var(--ink3);font-weight:400}
.hs-input::-webkit-search-cancel-button,.hs-input::-webkit-search-decoration{-webkit-appearance:none}
.hs-submit{height:42px;padding:0 18px;background:var(--ink);color:var(--white);border:0;border-radius:var(--r-md);font:600 14px 'DM Sans',sans-serif;cursor:pointer;flex-shrink:0;transition:background .15s}
.hs-submit:hover{background:#262626}
.hs-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.05);padding:8px;z-index:80;display:none;max-height:min(520px,62vh);overflow-y:auto;text-align:left}
.hs-panel.open{display:block}
.hs-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);padding:8px 10px 4px}
.hs-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-md);color:inherit;text-decoration:none;cursor:pointer}
.hs-row:hover,.hs-row[aria-selected="true"]{background:var(--bg2)}
.hs-av{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--ink2);flex-shrink:0}
.hs-av.sq{border-radius:var(--r-sm);background:var(--bg2)}
.hs-av.sq svg{width:18px;height:18px}
.hs-t{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-t small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:6px}
.hs-m{display:block;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hs-m b{font-weight:500;color:var(--ink3)}
.hs-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);background:var(--bg2);padding:3px 7px;border-radius:3px;white-space:nowrap}
.hs-k.v{background:var(--teal-lt);color:var(--teal)}
.hs-empty{padding:18px 12px;font-size:14px;color:var(--ink2);line-height:1.5}
.hs-empty a{color:var(--blue);font-weight:500}
.hs-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 10px 4px;border-top:1px solid var(--border);margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3)}
.hs-foot a{color:var(--blue);font-weight:500}
.hs-foot a:hover{text-decoration:underline}
.hs-foot kbd{font:inherit;background:var(--bg2);padding:1px 5px;border-radius:3px}

/* ── No-JS / late-JS safety: .reveal cards are hidden until an IntersectionObserver adds .visible.
   This animation forces them visible 1.5s after load regardless, so content never stays blank. ── */
.reveal{animation:vpRevealFallback .01s linear 1.5s forwards}
@keyframes vpRevealFallback{to{opacity:1;transform:none}}
