/* ============================================================
   0x14 — shared site theme
   Used by the Deep Dive sub-pages. The homepage (../index.html) keeps
   its own inline copy of the base theme; if you ever change the
   palette, update BOTH this file's :root and index.html's :root.
   ============================================================ */

@font-face { font-family:'Share Tech Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/ShareTechMono-400-latin.woff2) format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/Rajdhani-400-latin.woff2) format('woff2'), url(../fonts/Rajdhani-400-latin-ext.woff2) format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/Rajdhani-600-latin.woff2) format('woff2'), url(../fonts/Rajdhani-600-latin-ext.woff2) format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/Rajdhani-700-latin.woff2) format('woff2'), url(../fonts/Rajdhani-700-latin-ext.woff2) format('woff2'); }

:root{
  --orange:#ff6a00; --orange-dim:#cc5500; --orange-glow:rgba(255,106,0,0.15);
  --green:#4eff82; --green-dim:rgba(78,255,130,0.4);
  --dark:#0a0a0c; --dark-panel:#101014; --dark-border:#1a1a22;
  --text:#c8c8d0; --text-dim:#68687a; --scanline:rgba(0,0,0,0.12);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:'Rajdhani',sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}

/* scanline + vignette overlays (match homepage) */
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);pointer-events:none;z-index:9999;opacity:0.3}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.6) 100%);pointer-events:none;z-index:9998}

/* ── NAV (badge-chip links, matching homepage) ── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,10,12,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--dark-border);padding:0 2rem;height:56px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:'Share Tech Mono',monospace;font-size:1.4rem;color:var(--orange);text-decoration:none;letter-spacing:2px}
.nav-logo .prefix{color:var(--text-dim);font-size:0.85rem;margin-right:2px}
.nav-links{display:flex;gap:0.75rem;list-style:none}
.nav-links a{display:inline-block;color:var(--orange);text-decoration:none;font-family:'Share Tech Mono',monospace;font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--orange-dim);background:var(--orange-glow);padding:4px 14px;transition:border-color .3s,background .3s,color .3s}
.nav-links a:hover{border-color:var(--orange);background:rgba(255,106,0,0.22)}
.nav-links a[aria-current="page"]{border-color:var(--orange);background:rgba(255,106,0,0.22)}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--orange);margin:5px 0;transition:.3s}

/* ── SHARED BITS ── */
.section-label{font-family:'Share Tech Mono',monospace;font-size:0.7rem;color:var(--orange);letter-spacing:4px;text-transform:uppercase;margin-bottom:0.75rem;display:flex;align-items:center;gap:10px}
.section-label::before{content:'';width:20px;height:1px;background:var(--orange)}

footer{border-top:1px solid var(--dark-border);padding:2rem;text-align:center;font-family:'Share Tech Mono',monospace;font-size:0.7rem;color:var(--text-dim);letter-spacing:1px}
footer .footer-hex{color:var(--orange-dim)}

/* page wrapper for sub-pages (offsets the fixed nav) */
.page{max-width:820px;margin:0 auto;padding:8rem 2rem 4rem}

/* back link */
.back-link{display:inline-block;font-family:'Share Tech Mono',monospace;font-size:0.75rem;color:var(--text-dim);text-decoration:none;letter-spacing:1px;text-transform:uppercase;margin-bottom:2rem;transition:color .3s}
.back-link::before{content:'< ';color:var(--orange)}
.back-link:hover{color:var(--orange)}

/* ── ARTICLE (a single HOWTO page) ── */
.article-header{border-bottom:1px solid var(--dark-border);padding-bottom:1.5rem;margin-bottom:2.5rem}
.article-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(2rem,5vw,3.2rem);color:#fff;letter-spacing:-1px;line-height:1.05;margin:0.5rem 0}
.article-meta{display:flex;flex-wrap:wrap;gap:0.75rem;font-family:'Share Tech Mono',monospace;font-size:0.72rem;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;margin-top:1rem}
.article-meta .tag{color:var(--green);border:1px solid rgba(78,255,130,0.2);background:rgba(78,255,130,0.06);padding:2px 8px}

.article{font-size:1.05rem;line-height:1.8;color:var(--text)}
.article h2{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.6rem;color:#fff;margin:2.5rem 0 1rem;letter-spacing:-0.5px}
.article h2::before{content:'// ';color:var(--orange);font-family:'Share Tech Mono',monospace;font-size:0.9rem}
.article h3{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:1.25rem;color:#fff;margin:2rem 0 0.75rem}
.article p{margin-bottom:1.25rem}
.article strong{color:var(--orange);font-weight:600}
.article a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--green-dim)}
.article a:hover{border-color:var(--green)}
.article ul,.article ol{margin:0 0 1.25rem 1.35rem}
.article li{margin-bottom:0.5rem}
.article ul li::marker{color:var(--orange)}
.article blockquote{border-left:3px solid var(--orange);background:var(--dark-panel);padding:1rem 1.25rem;margin:1.5rem 0;color:var(--text-dim);font-style:italic}
.article img{max-width:100%;height:auto;border:1px solid var(--dark-border);display:block;margin:1.5rem 0}
.article figure{margin:1.5rem 0}
.article figcaption{font-family:'Share Tech Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-top:0.5rem;letter-spacing:0.5px}
.article hr{border:none;border-top:1px solid var(--dark-border);margin:2.5rem 0}

/* inline code + code blocks (terminal look) */
.article code{font-family:'Share Tech Mono',monospace;font-size:0.85em;color:var(--green);background:rgba(78,255,130,0.06);border:1px solid rgba(78,255,130,0.15);padding:1px 6px}
.article pre{font-family:'Share Tech Mono',monospace;font-size:0.82rem;line-height:1.6;color:var(--text);background:var(--dark-panel);border:1px solid var(--dark-border);border-left:3px solid var(--orange);padding:1.25rem;overflow-x:auto;margin:1.5rem 0}
.article pre code{color:inherit;background:none;border:none;padding:0;font-size:inherit}

/* callout box (matches the hero badge / service-icon chips) */
.callout{border:1px solid var(--orange-dim);background:var(--orange-glow);padding:1rem 1.25rem;margin:1.5rem 0;font-size:0.95rem}
.callout::before{content:'! ';color:var(--orange);font-family:'Share Tech Mono',monospace;font-weight:700}

/* series disclaimer — subtle, used on articles and the index */
.disclaimer{font-size:0.85rem;line-height:1.65;color:var(--text-dim);border:1px dashed var(--dark-border);border-left:2px solid var(--orange-dim);background:rgba(255,106,0,0.035);padding:0.85rem 1.15rem;margin:1.75rem 0}
.disclaimer .tag{font-family:'Share Tech Mono',monospace;font-size:0.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:0.35rem}
.disclaimer strong{color:var(--text)}

/* draft banner */
.draft-banner{font-family:'Share Tech Mono',monospace;font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--orange);border:1px dashed var(--orange-dim);background:var(--orange-glow);padding:6px 14px;text-align:center;margin-bottom:2rem}

/* ── DEEP DIVE INDEX (post cards) ── */
.deepdive-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:2rem}
.post-card{display:block;text-decoration:none;background:var(--dark-panel);border:1px solid var(--dark-border);padding:1.5rem 1.75rem;transition:border-color .3s,transform .3s;position:relative;overflow:hidden}
.post-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--orange)}
.post-card:hover{border-color:var(--orange-dim);transform:translateY(-2px)}
.post-card .post-date{font-family:'Share Tech Mono',monospace;font-size:0.7rem;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}
.post-card h3{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.35rem;color:#fff;margin:0.4rem 0 0.5rem}
.post-card p{color:var(--text-dim);font-size:0.95rem;line-height:1.6}
.post-card .post-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:0.9rem}
.post-card .post-tags span{font-family:'Share Tech Mono',monospace;font-size:0.62rem;color:var(--green);background:rgba(78,255,130,0.06);border:1px solid rgba(78,255,130,0.15);padding:2px 8px;letter-spacing:0.5px}
.post-card.draft .post-date::after{content:' · DRAFT';color:var(--orange)}

/* ── SIDE-BY-SIDE COMPARISON (wide article variant) ── */
.page.wide{max-width:1060px}
.page.wide .article > *:not(.compare){max-width:820px;margin-left:auto;margin-right:auto}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;align-items:start}
.compare .col{background:var(--dark-panel);border:1px solid var(--dark-border);border-top-width:2px;padding:0 1.25rem 1rem;min-width:0}
.compare .col pre{max-width:100%;white-space:pre-wrap;overflow-wrap:break-word}
.compare .col.a{border-top-color:var(--orange)}
.compare .col.b{border-top-color:var(--green)}
.compare .vendor{font-family:'Share Tech Mono',monospace;font-size:0.68rem;letter-spacing:2px;text-transform:uppercase;display:block;padding:0.7rem 0 0.5rem;border-bottom:1px solid var(--dark-border);margin-bottom:0.75rem}
.compare .col.a .vendor{color:var(--orange)}
.compare .col.b .vendor{color:var(--green)}
.compare .col p{font-size:0.92rem;margin-bottom:0.75rem}
.compare .col pre{margin:0.75rem 0;font-size:0.76rem}
.compare .col ul{margin:0 0 0.5rem 1.1rem}
.compare .col li{font-size:0.9rem;margin-bottom:0.35rem}
@media (max-width:820px){.compare{grid-template-columns:1fr}}

/* fade-in on scroll */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

@media (max-width:700px){
  nav{padding:0 1rem}
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:rgba(10,10,12,0.97);flex-direction:column;padding:1.5rem;gap:0.75rem;border-bottom:1px solid var(--dark-border)}
  .nav-links.open{display:flex}
  .nav-hamburger{display:block}
  .page{padding:6.5rem 1.25rem 3rem}
}