/* ================================================================
   Aramb editorial blog — design system v2
   Warm editorial canvas · Fraunces display · Inter text
   Drop-in compatible with v1 class names.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#1b1a18;
  --ink-soft:#3d3a36;
  --muted:#6f6b64;
  --faint:#9a958c;
  --accent:#4f46e5;
  --accent-ink:#3730a3;
  --accent-wash:#f0eefb;
  --bg:#fbfaf7;
  --surface:#ffffff;
  --surface-2:#f6f4ef;
  --line:#e8e4dc;
  --line-strong:#d9d4c9;
  --good:#15803d;
  --good-wash:#eef7f0;
  --bad:#c2410c;
  --warn:#b45309;
  --warn-wash:#fdf7ec;
  --shadow:0 1px 2px rgba(30,25,15,.04), 0 8px 24px -12px rgba(30,25,15,.10);
  --shadow-sm:0 1px 2px rgba(30,25,15,.05);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --measure:44rem;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.135rem;
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent-wash); color:var(--accent-ink); }

.wrap{ max-width:var(--measure); margin:0 auto; padding:64px 24px 120px; }
@media(max-width:640px){ .wrap{ padding:36px 20px 80px; } body{ font-size:1.06rem; } }

/* ---------- breadcrumb ---------- */
.crumb{ font-size:.9rem; margin-bottom:2.2rem; font-family:var(--sans); }
.crumb a{
  color:var(--muted); border:none; font-weight:500;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .7rem; border-radius:999px; background:var(--surface-2);
  transition:background .15s,color .15s;
}
.crumb a:hover{ background:var(--accent-wash); color:var(--accent-ink); }

/* ---------- headings ---------- */
h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.3rem,5.2vw,3.15rem);
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:0 0 1rem;
  font-optical-sizing:auto;
}
h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.55rem,3vw,1.9rem);
  line-height:1.2;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:3.2rem 0 .9rem;
  scroll-margin-top:1.5rem;
}
h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:1.18rem;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:1.8rem 0 .5rem;
}

/* ---------- text ---------- */
p{ margin:0 0 1.25rem; }
.lead{
  font-family:var(--sans);
  font-size:1.3rem;
  line-height:1.6;
  color:var(--ink);
  font-weight:400;
  margin-bottom:1.5rem;
}
strong{ color:var(--ink); font-weight:600; }
em{ color:var(--ink-soft); }
a{
  color:var(--accent-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(79,70,229,.32);
  transition:border-color .15s,background .15s;
}
a:hover{ border-bottom-color:var(--accent); background:rgba(79,70,229,.06); }

ul,ol{ margin:0 0 1.4rem; padding-left:1.35rem; }
li{ margin:.5rem 0; padding-left:.25rem; }
li::marker{ color:var(--faint); }

.meta{
  color:var(--muted); font-size:.98rem; line-height:1.6;
  margin:0 0 1.6rem;
}

/* ---------- byline ---------- */
.byline{
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 2.6rem; padding-bottom:1.8rem;
  border-bottom:1px solid var(--line);
  font-size:.92rem; color:var(--muted); line-height:1.5;
}
.byline .av{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(140deg,#4f46e5,#7c3aed);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; flex:0 0 auto; font-family:var(--sans);
  box-shadow:0 2px 8px -2px rgba(79,70,229,.5);
}
.byline b{ color:var(--ink); font-weight:600; }

/* ---------- TL;DR / key takeaways ---------- */
.tldr{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.5rem 1.7rem;
  margin:0 0 2.8rem;
  box-shadow:var(--shadow);
  position:relative;
}
.tldr::before{
  content:"KEY TAKEAWAYS";
  position:absolute; top:-.7rem; left:1.5rem;
  background:var(--accent); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.09em;
  padding:.22rem .6rem; border-radius:999px; font-family:var(--sans);
}
.tldr p{ margin:.5rem 0; font-size:1.02rem; line-height:1.6; }
.tldr p:first-of-type{ margin-top:.3rem; }
.tldr ul{ margin:.4rem 0 0; }

/* ---------- figures ---------- */
.fig{
  margin:2.4rem 0;
  padding:1.8rem 1.8rem 1.3rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.fig svg{ display:block; width:100%; height:auto; }
.fig figcaption{
  color:var(--muted); font-size:.9rem; line-height:1.5;
  text-align:center; margin-top:1.1rem;
  padding-top:1rem; border-top:1px solid var(--line);
}
.fig figcaption em{ color:var(--ink-soft); }

/* ---------- stat grid ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem; margin:2.2rem 0 2.4rem;
}
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:1.3rem 1.35rem;
  box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s;
}
.stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.stat .n{
  font-family:var(--serif); font-size:2.1rem; font-weight:600;
  color:var(--accent-ink); line-height:1; letter-spacing:-.02em;
}
.stat .l{ font-size:.86rem; color:var(--muted); margin-top:.5rem; line-height:1.45; }

/* ---------- case study card ---------- */
.case{
  margin:1.5rem 0; padding:1.3rem 1.5rem;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.case b{ display:block; margin-bottom:.35rem; color:var(--ink); font-size:1.03rem; }
.case .src{ font-size:.84rem; color:var(--faint); margin-top:.5rem; }

/* ---------- callout ---------- */
.callout{
  margin:2.2rem 0; padding:1.4rem 1.6rem;
  background:var(--warn-wash); border:1px solid #f0e2c4;
  border-left:3px solid var(--warn); border-radius:12px;
}
.callout strong{ color:var(--warn); }
.callout p{ margin:0; }

/* ---------- pull quote ---------- */
blockquote, .pull{
  margin:2.4rem 0; padding:.2rem 0 .2rem 1.6rem;
  border-left:3px solid var(--accent);
  font-family:var(--serif); font-size:1.4rem; line-height:1.4;
  font-weight:500; color:var(--ink); font-style:normal;
}
blockquote p{ margin:0; }

/* ---------- tables ---------- */
table{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:1.8rem 0 2rem; font-size:1rem;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
th,td{ text-align:left; padding:.85rem 1.05rem; border-bottom:1px solid var(--line); vertical-align:top; }
thead th{
  background:var(--surface-2); font-weight:600; color:var(--ink);
  font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even){ background:#faf8f4; }
td:first-child{ font-weight:500; color:var(--ink); }
.yes{ color:var(--good); font-weight:600; }
.no{ color:var(--bad); font-weight:600; }

/* ---------- CTA ---------- */
.cta{
  margin:3rem 0; padding:1.7rem 1.8rem;
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  border-radius:16px; color:#e7e5f7;
  box-shadow:0 12px 30px -14px rgba(49,46,129,.6);
}
.cta p{ margin:0; color:#e7e5f7; }
.cta strong,.cta b{ color:#fff; }
.cta a{ color:#c7d2fe; border-bottom-color:rgba(199,210,254,.5); }
.cta a:hover{ color:#fff; border-bottom-color:#fff; background:transparent; }

/* ---------- FAQ ---------- */
.faq h3{ margin-top:1.7rem; color:var(--ink); }
.faq h3::before{ content:"Q "; color:var(--accent); font-weight:700; }

/* ---------- references ---------- */
.refs{ font-size:.95rem; color:var(--muted); }
.refs li{ margin:.55rem 0; }
.refs a{ color:var(--accent-ink); }

/* ---------- misc ---------- */
hr{ border:none; border-top:1px solid var(--line); margin:3.4rem 0; }
.note{ color:var(--muted); font-style:italic; font-size:.96rem; }
code{ background:var(--surface-2); padding:.12rem .4rem; border-radius:5px; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
sup a{ border:none; font-size:.7em; padding:0 .1em; font-weight:700; background:none; }
sup a:hover{ background:none; }

/* ---------- reading progress ---------- */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,#4f46e5,#7c3aed); z-index:99;
  transition:width .1s linear;
}

/* ---------- editorial kicker ---------- */
.kicker{
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:var(--accent);
  margin:0 0 .9rem;
}