/* ═══════════════════════════════════════════════════════════════════
   Neiron Technology — Digital Blog
   Loads AFTER /digital/styles.css (shared site chrome: nav, footer,
   buttons, tokens). This file adds ONLY: self-hosted @font-face (so the
   blog renders in Rubik/DM Sans regardless of load order), the listing,
   and long-form article typography. Absolute path → locale/depth safe.
   ═══════════════════════════════════════════════════════════════════ */

/* Self-hosted variable fonts (mirrors main styles.css — digital/styles.css
   omits these, so declare them here to guarantee the blog is on-brand). */
@font-face{
  font-family:'DM Sans';
  src:url('/fonts/dm-sans-var.woff2') format('woff2-variations'),
      url('/fonts/dm-sans-var.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
  unicode-range:U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2190-21FF;
}
@font-face{
  font-family:'Rubik';
  src:url('/fonts/rubik-var.woff2') format('woff2-variations'),
      url('/fonts/rubik-var.woff2') format('woff2');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

/* ─── Blog-scoped tokens (inherit the site palette) ─────────────────── */
.blog-body{
  --ink:#182430;         /* body text, slightly warmer than pure navy-black */
  --ink-soft:#41505d;    /* secondary text */
  --line:#e7eaee;        /* hairlines */
  --paper:#fff;
  --paper-2:#f6f8fa;     /* alt surface */
  background:var(--paper);
}

/* ═══ LISTING ══════════════════════════════════════════════════════ */

/* Compact hero for the index (reuses navy treatment of digital hero) */
.blog-hero{
  position:relative;overflow:hidden;background:#04243F;
  padding:132px 5% 64px;
}
.blog-hero .hero-bg{position:absolute;inset:0;background:url('/img/hero-bg-1280.webp') center/cover;opacity:.14}
.blog-hero .hero-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(4,36,63,.97) 0%,rgba(21,101,192,.7) 60%,rgba(0,105,92,.55) 100%)}
.blog-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}

.blog-hero h1{font-family:'Rubik',sans-serif;font-size:clamp(30px,4.6vw,52px);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.6px;max-width:16ch}
.blog-hero p{font-size:clamp(16px,2vw,19px);color:rgba(255,255,255,.76);max-width:52ch;margin-top:18px;line-height:1.7;font-weight:300}

/* Breadcrumb — neutralise the site's broad `nav{position:fixed}` rule
   (these are <nav> elements too, so they inherit the header chrome). */
.crumb,.art-crumb{position:static;height:auto;display:block;background:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;border:none;z-index:auto;
  justify-content:normal;align-items:normal;inset:auto}
.crumb{max-width:1200px;margin:0 auto;padding:20px 5% 0;font-size:13px;color:var(--ink-soft)}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb span{color:#aab4bd;margin:0 8px}

/* Featured article — editorial split, NOT a stock-photo card */
.blog-wrap{max-width:1200px;margin:0 auto;padding:64px 5% 40px}
.feat-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--blue);margin-bottom:20px}
.feat{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px -30px rgba(4,36,63,.35);transition:box-shadow .3s,transform .3s;
}
.feat:hover{box-shadow:0 26px 64px -30px rgba(4,36,63,.45);transform:translateY(-3px)}
.feat-text{padding:44px 42px}
.feat-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.4px;color:var(--blue);background:var(--blue-lt);padding:5px 12px;border-radius:20px}
.feat-text h2{font-family:'Rubik',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.16;letter-spacing:-.5px;color:var(--navy)}
.feat-text h2 a{color:inherit;text-decoration:none}
.feat-text h2 a:hover{color:var(--blue)}
.feat-dek{font-size:16px;color:var(--ink-soft);line-height:1.7;margin-top:16px;max-width:52ch}
.feat-meta{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:13px;color:var(--muted)}
.feat-meta .dot{width:3px;height:3px;border-radius:50%;background:#c2ccd4}
.feat-read{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:700;font-size:14px;color:var(--blue);text-decoration:none}
.feat-read .arr{transition:transform .2s}
.feat:hover .feat-read .arr{transform:translateX(4px)}

/* Module-map visual side (CSS, communicates "one system") */
.feat-map{background:linear-gradient(150deg,#04243F 0%,#0d3a5f 100%);padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:12px;position:relative}
.feat-map-label{font-family:'Rubik',sans-serif;font-size:10px;font-weight:700;letter-spacing:2.5px;color:rgba(79,195,247,.75);text-transform:uppercase}
.mods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mod{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:13px 14px;font-family:'Rubik',sans-serif;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.2px}
.mod span{display:block;font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:400;color:rgba(255,255,255,.55);margin-top:3px;letter-spacing:.3px}

/* Roadmap — plain typographic list (not cards) */
.roadmap{max-width:1200px;margin:0 auto;padding:28px 5% 96px}
.roadmap h3{font-family:'Rubik',sans-serif;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.2px;margin-bottom:6px}
.roadmap-note{font-size:14px;color:var(--muted);margin-bottom:26px}
.rm-list{list-style:none;border-top:1px solid var(--line)}
.rm-item{display:flex;align-items:baseline;gap:18px;padding:17px 4px;border-bottom:1px solid var(--line)}
.rm-idx{font-family:'Rubik',sans-serif;font-size:13px;font-weight:700;color:#5b6b78;min-width:26px}
.rm-title{font-size:15.5px;color:var(--ink);font-weight:500;line-height:1.5}
.rm-soon{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);white-space:nowrap;align-self:center}

/* ═══ ARTICLE ══════════════════════════════════════════════════════ */
.art-head{position:relative;overflow:hidden;background:#04243F;padding:120px 5% 56px}
.art-head .hero-bg{position:absolute;inset:0;background:url('/img/hero-bg-1280.webp') center/cover;opacity:.14}
.art-head .hero-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(4,36,63,.97) 0%,rgba(21,101,192,.7) 60%,rgba(0,105,92,.55) 100%)}
.art-head-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.art-crumb{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:22px}
.art-crumb a{color:rgba(255,255,255,.6);text-decoration:none}
.art-crumb a:hover{color:#fff}
.art-crumb span{margin:0 8px;color:rgba(255,255,255,.3)}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.art-tags .tag{color:#4FC3F7;background:rgba(79,195,247,.12)}
.art-head h1{font-family:'Rubik',sans-serif;font-size:clamp(28px,4.4vw,46px);font-weight:800;color:#fff;line-height:1.13;letter-spacing:-.7px}
.art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.68)}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
.art-meta strong{color:#fff;font-weight:600}

/* Reading progress bar */
.read-bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#1565C0,#4FC3F7);z-index:1200;transition:width .1s linear}

/* Prose column — measure ~68ch */
.prose{max-width:42rem;margin:0 auto;padding:60px 5% 20px;font-size:19px;line-height:1.78;color:var(--ink)}
.prose>.lead{font-size:22px;line-height:1.6;color:var(--ink-soft);font-weight:400;margin-bottom:8px}
.prose h2{font-family:'Rubik',sans-serif;font-size:clamp(21px,2.7vw,28px);font-weight:800;color:var(--navy);line-height:1.22;letter-spacing:-.4px;margin:2.2em 0 .55em}
.prose h2:first-of-type{margin-top:1.3em}
.prose h3{font-family:'Rubik',sans-serif;font-size:19px;font-weight:700;color:var(--navy);margin:1.8em 0 .5em}
.prose p{margin-bottom:1.25em}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--navy)}
.prose strong{font-weight:700;color:var(--navy)}
.prose ul{list-style:none;margin:0 0 1.5em;display:flex;flex-direction:column;gap:11px}
.prose ul li{position:relative;padding-left:26px;line-height:1.65}
.prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--blue-lt);border:2px solid var(--blue)}

/* Key-line callout — full background tint, NO side-stripe */
.callout{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:26px 30px;margin:2em 0;font-family:'Rubik',sans-serif;font-size:clamp(18px,2.4vw,23px);font-weight:700;line-height:1.4;color:var(--navy);letter-spacing:-.3px}

/* Module chips inside article */
.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin:1.4em 0 1.8em}
.chip{font-size:13px;font-weight:600;color:var(--navy);background:#eef2f6;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-family:'Rubik',sans-serif;letter-spacing:.2px}

/* In-article CTA panel */
.art-cta{max-width:42rem;margin:56px auto 0;padding:0 5%}
.art-cta-inner{background:linear-gradient(135deg,#04243F 0%,#0d3a5f 100%);border-radius:18px;padding:44px 40px;text-align:center;color:#fff}
.art-cta-inner h2{font-family:'Rubik',sans-serif;font-size:clamp(22px,3vw,30px);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.4px;margin-bottom:12px}
.art-cta-inner p{font-size:16px;color:rgba(255,255,255,.76);max-width:46ch;margin:0 auto 26px;line-height:1.65}
.art-cta-inner .btn-pri{background:#1976D2}
.art-cta-inner .btn-pri:hover{background:#4FC3F7;color:#04243F}

/* FAQ (matches <details> pattern of the main site) */
.art-faq{max-width:42rem;margin:56px auto 0;padding:0 5%}
.art-faq h2{font-family:'Rubik',sans-serif;font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--navy);margin-bottom:20px;letter-spacing:-.3px}
.art-faq details{border-bottom:1px solid var(--line);padding:6px 0}
.art-faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 2px;font-family:'Rubik',sans-serif;font-weight:700;font-size:16px;color:var(--navy);position:relative}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--blue);transition:transform .2s}
.art-faq details[open] summary::after{content:'\2212'}
.art-faq details p{padding:0 2px 18px;font-size:15.5px;line-height:1.7;color:var(--ink-soft)}

/* Article footer nav */
.art-foot{max-width:42rem;margin:56px auto 0;padding:36px 5% 0;border-top:1px solid var(--line)}
.art-back{display:inline-flex;align-items:center;gap:8px;padding:8px 2px;font-weight:700;font-size:14px;color:var(--blue);text-decoration:none}
.art-back:hover{color:var(--navy)}
/* Snappier taps on touch (no 300ms delay, no grey flash) */
.feat-read,.art-back,.chip,.tag,.art-faq summary,.rm-item{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.art-spacer{height:96px}

/* Reveal-on-scroll — progressive enhancement: content is fully visible by
   default; only once blog.js sets `.rv-on` on <html> do we hide-then-reveal.
   So if JS never runs, nothing is stuck at opacity:0. */
.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv-on .rv.in{opacity:1;transform:none}

/* ─── Responsive ───────────────────────────────────────────────────── */
@media(max-width:820px){
  .feat{grid-template-columns:1fr}
  .feat-map{padding:32px 30px}
  .feat-text{padding:34px 28px}
  .blog-hero{padding:112px 5% 52px}
  .art-head{padding:104px 5% 44px}
  .prose{font-size:18px;padding:44px 6% 20px}
  .prose>.lead{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .read-bar{transition:none}
  .feat,.feat-read .arr{transition:none}
}