/* ============================================================
   Hairmony — shared BLOG ARTICLE styles
   Linked by every post in /blog/ as: ../assets/css/article.css
   (Font families come from ../assets/fonts/fonts.css — link that too.)
   Edit here once; every article updates.
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  --bg:#E1E9EF; --card:#F3F6F9; --divider:#E5EAEE; --white:#FFFFFF;
  --dark:#2D4264; --med:#5A739E; --soft:rgba(45,66,100,0.78);
  /* --med fails WCAG AA (3.9:1) on --bg for small text; use this darker
     variant wherever --med colors running text (nav/UI chrome keeps --med) */
  --med-text:#52698F;
  --primary:#7B5191; --primary-dark:#6A4480; --accent:#6BC3B3; --pink-deep:#E89BAA;
  --radius-lg:28px; --radius-md:18px;
  --shadow-card:0 8px 32px rgba(45,66,100,0.08);
  --shadow-soft:0 2px 14px rgba(45,66,100,0.06);
  --shadow-lift:0 18px 48px rgba(45,66,100,0.14);
  --font-head:'Sour Gummy', cursive; --font-body:'Nunito', sans-serif;
  --container:1140px; --reading:640px; /* ~72–76 real chars/line at 18px body — top of the 50–75 readability range */
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { background:var(--bg); color:var(--dark); font-family:var(--font-body); font-size:16px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

.container { max-width:var(--container); margin:0 auto; padding:0 32px; }

/* ── Reading-progress bar ───────────────────────────────── */
#progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg, var(--primary), var(--accent)); transition:width .1s linear; }

/* ── Navigation ─────────────────────────────────────────── */
nav.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s, backdrop-filter .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; }
nav.site-nav .nav-inner { max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; }
nav.site-nav.scrolled { background:rgba(225,233,239,0.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--divider); }
.nav-brand { display:flex; align-items:center; gap:11px; }
.nav-brand img { width:38px; height:38px; border-radius:22%; box-shadow:var(--shadow-soft); }
.nav-brand span { font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:var(--primary); }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-link { font-size:.92rem; font-weight:600; color:var(--med); transition:color .2s; }
.nav-link:hover, .nav-link.active { color:var(--dark); }
.nav-cta { display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:var(--white); font-weight:700; font-size:.92rem; padding:10px 20px; border-radius:50px; box-shadow:0 4px 14px rgba(123,81,145,0.25); transition:transform .18s, box-shadow .2s, background .2s; }
.nav-cta:hover { background:var(--primary-dark); transform:translateY(-2px); }

/* ── Article shell ──────────────────────────────────────── */
.article-wrap { padding:130px 0 90px; }
.article { max-width:var(--reading); margin:0 auto; }

/* Breadcrumb */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:var(--soft); margin-bottom:26px; }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .sep { opacity:.5; }
.breadcrumb [aria-current] { color:var(--med); }

.cat-tag { display:inline-block; background:var(--primary); color:var(--white); font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:50px; margin-bottom:18px; }

.article h1 { font-family:var(--font-head); font-weight:700; font-size:clamp(1.9rem, 1.35rem + 2.6vw, 3.1rem); line-height:1.15; letter-spacing:-0.01em; color:var(--dark); margin-bottom:18px; text-wrap:balance; }
.standfirst { font-size:clamp(1.15rem, 1.05rem + .5vw, 1.3rem); line-height:1.5; color:var(--med-text); margin-bottom:30px; font-weight:500; text-wrap:pretty; }

/* Byline */
.byline { display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); margin-bottom:34px; }
.byline .avatar { width:46px; height:46px; border-radius:50%; background:var(--accent); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; flex-shrink:0; object-fit:cover; }
.byline .who { font-weight:700; color:var(--dark); font-size:.95rem; }
.byline .meta { font-size:.85rem; color:var(--soft); font-weight:600; }
.byline .meta .sep { opacity:.5; margin:0 6px; }

/* Hero image */
.hero-figure { margin:0 0 34px; }
.hero-figure img { width:100%; aspect-ratio:1600/1067; height: 400px; object-fit:cover; border-radius:var(--radius-lg); border:1px solid var(--divider); box-shadow:var(--shadow-card); }
.hero-figure figcaption { text-align:center; font-size:.85rem; color:var(--soft); margin-top:12px; }
.hero-figure figcaption .credit { display:block; margin-top:2px; opacity:.85; }
.hero-figure figcaption a { color:var(--med); text-decoration:underline; text-underline-offset:2px; }
.hero-figure figcaption a:hover { color:var(--primary); }

/* ── Inline diagram ─────────────────────────────────────── */
.diagram-figure { margin:32px 0; }
.diagram-figure svg { width:100%; height:auto; display:block; }
.diagram-figure figcaption { text-align:center; font-size:.85rem; color:var(--soft); margin-top:12px; }

/* TL;DR / key takeaways (answer-first box near the top) */
.tldr { background:var(--white); border:1px solid var(--divider); border-left:4px solid var(--accent); border-radius:var(--radius-md); padding:24px 26px; margin-bottom:36px; box-shadow:var(--shadow-soft); }
.tldr h2 { font-family:var(--font-head); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); margin-bottom:12px; }
.tldr ul { margin:0; padding-left:20px; }
.tldr li { color:var(--dark); font-weight:400; margin-bottom:12px; line-height:1.6; }
.tldr li:last-child { margin-bottom:0; }

/* Table of contents */
.toc { background:var(--card); border:1px solid var(--divider); border-radius:var(--radius-md); padding:22px 26px; margin-bottom:40px; }
.toc h2 { font-family:var(--font-head); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--med); margin-bottom:12px; }
.toc ol { margin:0; padding-left:20px; }
.toc li { margin-bottom:12px; font-weight:600; }
.toc a { color:var(--med-text); transition:color .2s; }
.toc a:hover { color:var(--primary); }

/* ── Article body typography ────────────────────────────── */
.body { font-size:1.125rem; line-height:1.7; color:#3c4f70; overflow-wrap:break-word; }
.body > * { scroll-margin-top:100px; }
/* Divider above each TOC-level section: margin+padding split keeps the 64px gap with the line centered */
.body h2 { font-family:var(--font-head); font-weight:600; font-size:clamp(1.5rem, 1.28rem + 1vw, 1.7rem); line-height:1.25; color:var(--dark); margin:32px 0 16px; padding-top:32px; border-top:1px solid rgba(45,66,100,0.14); letter-spacing:-0.01em; text-wrap:balance; }
/* h3 in body font (bold Nunito) so it reads as a sub-level, not a second h2 */
.body h3 { font-family:var(--font-body); font-weight:700; font-size:1.2rem; line-height:1.35; color:var(--dark); margin:36px 0 10px; text-wrap:balance; }
.body p { margin-bottom:20px; color:#3c4f70; font-weight:400; }
.body p, .body li { text-wrap:pretty; }
.body a { color:var(--primary); font-weight:700; border-bottom:1.5px solid rgba(123,81,145,0.3); transition:border-color .2s; }
.body a:hover { border-bottom-color:var(--primary); }
.body ul, .body ol { margin:0 0 22px; padding-left:24px; font-weight:400; }
.body li { margin-bottom:10px; }
.body li::marker { color:var(--primary); }
.body strong { color:var(--dark); font-weight:700; }
.body img { border-radius:var(--radius-md); border:1px solid var(--divider); margin:8px 0; }

/* Callout / tip box */
.callout { display:flex; gap:14px; background:rgba(107,195,179,0.12); border:1px solid rgba(107,195,179,0.4); border-radius:var(--radius-md); padding:20px 22px; margin:28px 0; }
.callout .ic { font-size:1.4rem; line-height:1.4; }
.callout p { margin:0; font-size:.98rem; color:var(--dark); font-weight:600;}
.callout strong { color:var(--primary-dark); }

/* Comparison table */
.table-scroll { overflow-x:auto; margin:28px 0; border-radius:var(--radius-md); border:1px solid var(--divider); box-shadow:var(--shadow-soft); }
table.compare { width:100%; border-collapse:collapse; background:var(--white); font-size:.95rem; min-width:520px; font-weight:400; }
table.compare th, table.compare td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--divider); }
table.compare thead th { background:var(--card); font-family:var(--font-head); font-weight:500; color:var(--dark); font-size:1.1rem; }
table.compare tbody tr:last-child td { border-bottom:none; }
table.compare td:first-child { font-weight:500; color:var(--dark); }

/* Pull-quote */
blockquote { margin:30px 0; padding:6px 0 6px 24px; border-left:4px solid var(--primary); font-family:var(--font-head); font-weight:600; font-size:1.3rem; line-height:1.4; color:var(--dark); }

/* FAQ */
.faq { margin-top:32px; padding-top:32px; border-top:1px solid rgba(45,66,100,0.14); }
.faq h2 { font-family:var(--font-head); font-weight:600; font-size:1.7rem; color:var(--dark); margin-bottom:18px; }
.faq details { background:var(--white); border:1px solid var(--divider); border-radius:var(--radius-md); padding:4px 22px; margin-bottom:12px; box-shadow:var(--shadow-soft); }
.faq summary { list-style:none; cursor:pointer; font-family:var(--font-head); font-weight:600; font-size:1.05rem; color:var(--dark); padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-size:1.5rem; color:var(--primary); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 0 18px; color:var(--med-text); margin:0; }

/* Author bio */
.author-box { display:flex; gap:18px; align-items:flex-start; background:var(--card); border:1px solid var(--divider); border-radius:var(--radius-lg); padding:26px; margin-top:50px; }
.author-box .avatar { width:64px; height:64px; border-radius:50%; background:var(--primary); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem; flex-shrink:0; object-fit:cover; }
.author-box h3 { font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--dark); margin-bottom:2px; }
.author-box .role { font-size:.82rem; color:var(--primary); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.author-box p { font-size:.95rem; color:var(--med-text); margin:0; }

/* In-article CTA */
.article-cta { background:var(--primary); border-radius:var(--radius-lg); padding:40px; text-align:center; margin-top:50px; overflow:hidden; position:relative; }
.article-cta img { width:96px; margin:0 auto 12px; }
.article-cta h2 { font-family:var(--font-head); font-weight:600; color:var(--white); font-size:1.6rem; margin-bottom:8px; }
.article-cta p { color:rgba(255,255,255,0.85); margin-bottom:22px; max-width:420px; margin-inline:auto; }
.article-cta .btn-white { display:inline-flex; align-items:center; gap:9px; background:var(--white); color:var(--primary); font-weight:700; font-size:1rem; padding:14px 28px; border-radius:50px; box-shadow:0 6px 22px rgba(0,0,0,0.12); transition:transform .18s, box-shadow .2s; }
.article-cta .btn-white:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,0.18); }

/* ── Share row ──────────────────────────────────────────── */
.share { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:52px 0 0; padding:18px 24px; background:var(--card); border:1px solid var(--divider); border-radius:var(--radius-md); }
.share-label { font-family:var(--font-head); font-weight:600; font-size:1.05rem; color:var(--dark); }
.share-btns { display:flex; flex-wrap:wrap; gap:10px; }
.share-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; width:44px; padding:0; border-radius:50px; background:var(--white); border:1.5px solid var(--divider); color:var(--med); font-family:var(--font-body); font-weight:700; font-size:.9rem; cursor:pointer; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.share-btn.share-copy { width:auto; padding:0 16px; }
.share-btn svg { width:18px; height:18px; display:block; flex-shrink:0; }
.share-btn:hover { transform:translateY(-2px); border-color:var(--primary); color:var(--primary); box-shadow:var(--shadow-soft); }
.share-btn.copied { border-color:var(--accent); color:var(--accent); }
@media (max-width:560px) { .share { flex-direction:column; align-items:flex-start; } }

/* ── Related articles ───────────────────────────────────── */
.related { margin-top:54px; }
.related > h2 { font-family:var(--font-head); font-weight:600; font-size:1.7rem; color:var(--dark); margin-bottom:20px; }
.related-grid { display:grid; gap:16px; }
.related-card { display:grid; grid-template-columns:200px 1fr; background:var(--white); border:1px solid var(--divider); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.related-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:rgba(107,195,179,0.4); }
.related-thumb { position:relative; overflow:hidden; background:var(--card); min-height:140px; }
.related-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.related-card:hover .related-thumb img { transform:scale(1.05); }
.related-cat { position:absolute; top:12px; left:12px; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); color:var(--primary); font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px; border-radius:50px; box-shadow:var(--shadow-soft); }
.related-body { padding:20px 22px; display:flex; flex-direction:column; justify-content:center; }
.related-body h3 { font-family:var(--font-head); font-weight:600; font-size:1.15rem; line-height:1.25; color:var(--dark); margin-bottom:6px; }
.related-body p { font-size:.92rem; line-height:1.55; color:var(--med); margin:0; }
@media (max-width:560px) { .related-card { grid-template-columns:1fr; } .related-thumb { aspect-ratio:16/10; min-height:0; } }

/* Back link */
.back-link { display:inline-flex; align-items:center; gap:8px; margin-top:44px; font-weight:700; color:var(--primary); }
.back-link:hover { color:var(--primary-dark); }

/* ── Footer ─────────────────────────────────────────────── */
footer { background:var(--dark); color:rgba(255,255,255,0.65); padding:80px 0 32px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:50px; }
.footer-brand-col img { width:44px; height:44px; margin-bottom:14px; border-radius:22%; }
.footer-brand-col h4 { font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:var(--white); margin-bottom:10px; }
.footer-brand-col p { color:rgba(255,255,255,0.55); font-size:.92rem; line-height:1.6; max-width:280px; }
.footer-col h5 { font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--white); letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; }
.footer-col li { margin:0; color:rgba(255,255,255,0.62); font-size:.92rem; }
.footer-col a { color:rgba(255,255,255,0.62); font-size:.92rem; transition:color .2s; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.82rem; color:rgba(255,255,255,0.58); }

@media (max-width:960px) {
  .nav-links { display:none; }
  .article-wrap { padding-left:32px; padding-right:32px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:600px) {
  .container { padding:0 22px; }
  .article-wrap { padding:110px 22px 70px; }
  /* Mobile reading: ~35ch lines want slightly smaller type + tighter leading */
  .body { font-size:1.0625rem; line-height:1.65; }
  .body p { hyphens:auto; }
  .body h2 { margin:26px 0 14px; padding-top:26px; }
  .hero-figure img { height:auto; }
  .tldr { padding:20px 18px; }
  .toc { padding:18px; }
  .callout { padding:16px 18px; }
  blockquote { font-size:1.2rem; padding-left:18px; }
  .article-cta { padding:30px 22px; }
  .footer-grid { grid-template-columns:1fr; gap:36px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  nav.site-nav .nav-inner { padding:14px 22px; }
}