/* RELOS blog — shared stylesheet
   Brand: Deep Navy #0B1F3B · Intelligence Teal #2FA4A9 · Brass #B8924A
   Fonts: Jost (display/body) + JetBrains Mono (accents) */

:root{
  --navy:#0B1F3B;--teal:#2FA4A9;--teal-deep:#1F8489;--brass:#B8924A;
  --paper:#F5F7FA;--paper-warm:#FBFCFE;--slate:#5A6B80;--ink:#1c2b40;--ink-soft:#34465E;
  --hair:#E4E9F0;--hair-strong:#D3DBE6;
  --font-display:"Jost",system-ui,sans-serif;
  --font-body:"Jost",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);
  line-height:1.72;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:var(--teal-deep);}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-0.014em;line-height:1.15;color:var(--navy);}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:4px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border-radius:8px;z-index:100;}

/* ---------- header ---------- */
header.bar{position:sticky;top:0;z-index:40;background:rgba(245,247,250,.92);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--hair);}
.bar-row{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,40px);height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.bar-row .logo{height:28px;width:auto;}
.bar-right{display:flex;align-items:center;gap:16px;font-size:.9rem;}
.bar-right a{color:var(--ink-soft);text-decoration:none;}
.bar-right a:hover{color:var(--navy);}
.lang{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  border:1px solid var(--hair-strong);border-radius:8px;padding:.45em .6em;}

/* ---------- layout ---------- */
.wrap{max-width:720px;margin:0 auto;padding-inline:clamp(20px,5vw,32px);}
.wrap-wide{max-width:1080px;margin:0 auto;padding-inline:clamp(20px,5vw,40px);}
article{padding:clamp(30px,5vw,56px) 0 40px;}
.crumb{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--slate);text-transform:uppercase;}
.crumb a{color:var(--slate);text-decoration:none;}
.crumb a:hover{color:var(--navy);}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-deep);display:block;margin:1.6em 0 .6em;}
h1{font-size:clamp(2rem,5vw,3.15rem);margin:0 0 .35em;}
.dek{font-size:1.2rem;color:var(--ink-soft);line-height:1.5;margin:0 0 1.4em;}
.byline{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--slate);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:14px 0;
  display:flex;flex-wrap:wrap;gap:.4em 1.4em;}
.byline time{color:var(--slate);}

article h2{font-size:clamp(1.5rem,3vw,2rem);margin:1.9em 0 .5em;scroll-margin-top:80px;}
article h3{font-size:1.2rem;font-weight:500;margin:1.6em 0 .4em;scroll-margin-top:80px;}
article p{margin:.9em 0;color:var(--ink-soft);}
article strong{color:var(--navy);font-weight:500;}

/* ---------- table of contents (pillar articles) ---------- */
.toc{background:var(--paper-warm);border:1px solid var(--hair);border-radius:12px;
  padding:18px 22px;margin:1.8em 0;}
.toc h2{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:0 0 .7em;font-weight:500;}
.toc ol{margin:0;padding-left:1.1em;color:var(--ink-soft);font-size:.96rem;}
.toc li{margin:.32em 0;}
.toc a{color:var(--ink-soft);text-decoration:none;}
.toc a:hover{color:var(--teal-deep);text-decoration:underline;}

/* ---------- MDX components ---------- */
/* <KeyFindings> */
.lead-list{list-style:none;padding:0;margin:1.2em 0;}
.lead-list li{position:relative;padding:.5em 0 .5em 30px;border-bottom:1px solid var(--hair);color:var(--ink-soft);}
.lead-list li::before{content:"";position:absolute;left:0;top:1.05em;width:14px;height:2px;
  background:var(--teal);border-radius:2px;}

/* <Quote cite="…"> */
blockquote{margin:1.3em 0;padding:.2em 0 .2em 22px;border-left:3px solid var(--teal);
  font-family:var(--font-display);font-size:1.35rem;font-weight:300;color:var(--navy);line-height:1.4;}
blockquote p{margin:0;color:var(--navy);}
blockquote cite{display:block;margin-top:.5em;font-family:var(--font-mono);font-size:.7rem;
  font-style:normal;letter-spacing:.04em;color:var(--slate);}

/* <Callout label="…"> */
.callout{background:#fff;border:1px solid var(--hair);border-left:3px solid var(--brass);
  border-radius:12px;padding:20px 22px;margin:1.6em 0;}
.callout .kt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);}
.callout p{margin:.4em 0 0;color:var(--ink-soft);}

/* ---------- FAQ ---------- */
.faq{margin-top:2.4em;border-top:1px solid var(--hair);padding-top:1.4em;}
.faq h2{margin-top:.3em;}
details{border-bottom:1px solid var(--hair);padding:4px 0;}
summary{cursor:pointer;list-style:none;padding:15px 0;font-family:var(--font-display);
  font-size:1.1rem;color:var(--navy);display:flex;justify-content:space-between;gap:16px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";color:var(--teal-deep);font-family:var(--font-mono);}
details[open] summary::after{content:"\2013";}
details .a{padding:0 0 16px;color:var(--ink-soft);}

/* ---------- CTA ---------- */
.cta{margin:2.6em 0 0;background:var(--navy);border-radius:16px;padding:clamp(26px,4vw,38px);color:#cdd9e8;}
.cta h2,.cta h3{color:#fff;font-size:1.45rem;margin:0 0 .4em;}
.cta p{margin:0 0 1.2em;color:#adbccf;}
.cta a.btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#04121f;
  font-weight:500;text-decoration:none;padding:.75em 1.3em;border-radius:10px;}
.cta a.btn:hover{background:#3fb9bf;}

/* ---------- method note ---------- */
.method{font-size:.92rem;color:var(--slate);background:var(--paper-warm);border:1px solid var(--hair);
  border-radius:12px;padding:18px 20px;margin:2em 0 0;}
.method strong{color:var(--ink);}

/* ---------- related / cluster links ---------- */
.related{margin:2.4em 0 0;border-top:1px solid var(--hair);padding-top:1.2em;}
.related h2{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:0 0 .8em;font-weight:500;}
.related ul{list-style:none;padding:0;margin:0;}
.related li{padding:.45em 0;border-bottom:1px solid var(--hair);}
.related a{color:var(--navy);text-decoration:none;}
.related a:hover{color:var(--teal-deep);}
.related .soon{color:var(--slate);font-size:.92rem;}

/* ---------- blog hub ---------- */
.hub-head{padding:clamp(34px,6vw,64px) 0 8px;}
.hub-head h1{font-size:clamp(2rem,4.6vw,2.9rem);}
.hub-head .dek{max-width:640px;}
.cluster{margin:2.6em 0 0;}
.cluster > h2{font-size:1.35rem;margin:0 0 .2em;}
.cluster > .desc{color:var(--slate);font-size:.95rem;margin:0 0 1em;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
.card{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:22px 24px;
  display:flex;flex-direction:column;gap:.5em;transition:border-color .18s,transform .18s;}
.card:hover{border-color:var(--hair-strong);transform:translateY(-2px);}
.card .tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);}
.card h3{font-size:1.22rem;margin:0;}
.card h3 a{color:var(--navy);text-decoration:none;}
.card h3 a:hover{color:var(--teal-deep);}
.card p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55;}
.card .meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;color:var(--slate);margin-top:auto;padding-top:.4em;}
.card.pending{background:var(--paper-warm);border-style:dashed;}
.card.pending h3{color:var(--slate);}

/* ---------- footer ---------- */
footer.ft{background:var(--navy);color:#9FB2CC;margin-top:44px;}
.ft-in{max-width:720px;margin:0 auto;padding:32px clamp(20px,5vw,32px);font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.ft-in a{color:#B9C8DC;}
.ft-in.wide{max-width:1080px;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}