/* ============================================================
   Tal m3Dical - Articles (knowledge series)
   Light clinical system · shared by /articles + each article page
   ============================================================ */

:root{
  --bg:#f5f8fb; --bg-2:#ffffff; --bg-3:#eef3f8; --surface:#ffffff;
  --ink:#14202c; --ink-2:#38485a; --muted:#6a7888; --faint:#93a1b1;
  --line:#e0e7ef; --line-2:#d2dbe6;
  --accent:#1591cf; --accent-deep:#0b6699; --accent-soft:#e6f3fb;
  --glow:rgba(33,160,224,.50);
  --display:"Space Grotesk", system-ui, sans-serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --maxw:1240px; --readw:74ch; --pad:clamp(20px,5vw,64px); --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent-deep); font-weight:500;
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.1; letter-spacing:-.02em; margin:0; color:var(--ink); }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:rgba(245,248,251,.7);
  backdrop-filter:saturate(135%) blur(12px); -webkit-backdrop-filter:saturate(135%) blur(12px);
  border-bottom:1px solid rgba(224,231,239,.6);
  transition:background .35s var(--ease), border-color .35s;
}
.site-header.scrolled{ background:rgba(247,250,252,.85); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:28px; height:70px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand img{ height:36px; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:.92rem; color:var(--ink-2); font-weight:500; position:relative; padding:6px 0; transition:color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--accent-deep); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); border-radius:2px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
  font-size:.92rem; font-weight:600; padding:11px 18px; border-radius:10px;
  border:1px solid transparent; transition:transform .15s var(--ease), background .2s, box-shadow .2s;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 4px 14px var(--glow); }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-ghost{ background:transparent; color:var(--accent-deep); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--accent-soft); border-color:var(--accent); }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); padding:6px; }

/* ---------- articles hub ---------- */
.hub-hero{ padding:130px 0 40px; }
.hub-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin:.35em 0 .25em; }
.hub-hero .lead{ color:var(--ink-2); font-size:clamp(1.02rem,1.4vw,1.18rem); max-width:60ch; }
.card-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); padding-bottom:90px; }
.art-card{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 26px 22px; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.art-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,32,44,.09); border-color:var(--line-2); }
.art-card .topic{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); }
.art-card h2{ font-size:1.35rem; margin:.5em 0 .4em; line-height:1.18; }
.art-card p{ color:var(--ink-2); font-size:.96rem; margin:0 0 18px; }
.art-card .more{ margin-top:auto; font-weight:600; color:var(--accent-deep); font-size:.92rem; }

/* ---------- single article ---------- */
.article-head{ padding:120px 0 8px; }
.crumbs{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--faint); margin-bottom:18px; }
.crumbs a:hover{ color:var(--accent-deep); }
.article-head h1{ font-size:clamp(1.9rem,4.2vw,3rem); margin:.3em 0 .5em; max-width:20ch; }
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; color:var(--muted); font-size:.86rem; font-family:var(--mono); }
.byline .dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); }
.article-body{ max-width:var(--readw); margin:34px auto 0; padding-bottom:30px; }
.article-body p, .article-body li{ font-size:1.06rem; color:var(--ink-2); }
.article-body p{ margin:0 0 1.15em; }
.article-body h2{ font-size:1.6rem; margin:1.9em 0 .5em; padding-top:.3em; }
.article-body h3{ font-size:1.18rem; margin:1.5em 0 .35em; color:var(--ink); }
.article-body ul{ margin:0 0 1.2em; padding-inline-start:1.3em; }
.article-body li{ margin:.3em 0; }
.article-body strong{ color:var(--ink); font-weight:600; }
.article-body a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.article-body a:hover{ text-decoration-color:var(--accent); }
.lede{ font-size:1.18rem !important; color:var(--ink) !important; font-weight:400; }
.value{ color:var(--accent-deep); font-family:var(--mono); font-size:.92rem; letter-spacing:.01em; }
.pull{
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:1.6em 0;
  font-family:var(--display); font-size:1.3rem; line-height:1.35; color:var(--ink); font-weight:500;
}
.compare{ display:grid; gap:18px; grid-template-columns:1fr 1fr; margin:1.4em 0 1.6em; }
.compare .col{ background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.compare h3{ margin:0 0 .5em; font-size:1.05rem; }
.compare .label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.8em; }
.compare ul{ margin:.3em 0 0; }
.compare li{ font-size:.96rem; }

.cta-band{ background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px; margin:46px auto; max-width:var(--readw); }
.cta-band h3{ font-size:1.35rem; margin:0 0 .35em; }
.cta-band p{ color:var(--ink-2); margin:0 0 18px; font-size:1rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:48px 0 40px; margin-top:30px; }
.footer-inner{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.footer img{ height:34px; }
.footer .links{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer .links a{ color:var(--ink-2); font-size:.9rem; }
.footer .links a:hover{ color:var(--accent-deep); }
.footer .copy{ color:var(--muted); font-size:.84rem; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav .btn-primary{ display:none; }
  .compare{ grid-template-columns:1fr; }
  .article-body p, .article-body li{ font-size:1.02rem; }
}

/* article inline figures (images ported from LinkedIn) */
.article-figure{ margin:2rem 0; }
.article-figure img{ display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid rgba(0,0,0,.08); background:#eef1f4; }
.article-figure figcaption{ margin-top:.55rem; font-size:.82rem; color:#6b7280; text-align:center; }