:root{
  --background:#ffffff;  --foreground:#0a0a0a;
  --brand:#ffb200;       --brand-deep:#ffc200;
  --brand-light:#facc15; --accent-teal:#b45309;
  --surface:#faf6ea;     --surface-card:#ffffff;
  --ink:#0a0a0a;         --ink-soft:#71695a;
  --ghost:#e8dfc7;       --hairline:#ece4d0;
  --on-brand:#ffffff;
  --radius-card:1.5rem;  --radius-card-lg:2rem; --radius-pill:62.5rem;

  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart: cubic-bezier(0.25,1,0.5,1);
  --ease-in-out-cubic: cubic-bezier(0.65,0,0.35,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* ---------- dark mode (explicit toggle via the reading toolbar, persisted in localStorage) ---------- */
html[data-theme="dark"]{
  --background:#141210;   --foreground:#f3ede1;
  --surface:#1c1a17;      --surface-card:#221f1b;
  --ink:#f3ede1;          --ink-soft:#a89e8c;
  --ghost:#3a352c;        --hairline:#332f28;
  --on-brand:#141210;
}
html[data-theme="dark"] body{ background:var(--background); color:var(--foreground); }
html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-content li{ color:#e8e1d2; }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; }
@media (max-width:1920px){ html{ font-size:0.833333vw; } }
@media (max-width:1440px){ html{ font-size:1.111111vw; } }
@media (max-width:1024px){ html{ font-size:1.5625vw; } }
@media (max-width:639px){ html{ font-size:4.444444vw; } }

html.lock, html.lock body{ position:relative; overflow:hidden; height:100%; }

body{
  min-height:100vh;
  background:var(--surface);
  color:var(--foreground);
  font-family:"Onest", system-ui, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
button{ cursor:pointer; font-family:inherit; color:inherit; background:none; border:none; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
:focus-visible{ outline:2px solid var(--brand-light); outline-offset:2px; }

main{ width:100%; overflow-x:clip; padding:0.5rem; }
@media (min-width:640px){ main{ padding:0.75rem; } }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- text-reveal primitives ---------- */
.mask{ display:block; overflow:hidden; }
.mask-line{ padding-bottom:0.14em; }
.mask-word{ padding-bottom:0.12em; display:inline-block; }
.mask-inner{
  display:block;
  transform:translateY(115%);
  opacity:0;
  transition:transform 0.95s var(--ease-out-expo), opacity 0.95s var(--ease-out-expo);
  will-change:transform,opacity;
}
.mask-word .mask-inner{ display:inline-block; }
.is-in .mask-inner{ transform:translateY(0); opacity:1; }

[data-inview="rise"]{ opacity:0; transform:translateY(28px); transition:opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring); }
[data-inview="rise"].is-in{ opacity:1; transform:translateY(0); }

/* ---------- header / pill nav ---------- */
header.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  display:flex; justify-content:center;
  padding:1rem 1rem 0;
  pointer-events:none;
  font-size:0.75rem;
}
@media (min-width:640px){ header.site-header{ padding:1.5rem 1.5rem 0; } }

.pill-nav{
  pointer-events:auto;
  width:100%; max-width:64rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius:var(--radius-pill);
  background:rgba(20,18,10,0.28);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 1rem 2.5rem rgba(0,0,0,0.18);
  color:#fff;
}
/* on-light: for pages with no full-bleed dark/brand hero behind the header —
   the glass-on-dark treatment above goes illegible over a plain white/cream page. */
.pill-nav.on-light{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-color:rgba(10,10,10,0.08);
  box-shadow:0 1rem 2.5rem rgba(10,10,10,0.08);
  color:var(--ink);
}
.pill-nav.on-light .pill-brand{ color:var(--ink); }
.pill-nav.on-light .pill-brand-mark{ background:var(--surface); }
.pill-nav.on-light .pill-links{ color:var(--ink-soft); }
.pill-nav.on-light .pill-links a:hover{ color:var(--ink); }
.pill-nav.on-light .pill-cta{ background:var(--ink); color:#fff; }
.pill-nav.on-light .pill-cta:hover{ background:var(--brand-deep); color:var(--ink); }
.pill-nav.on-light .burger-btn{ background:var(--surface); }
.pill-nav.on-light .burger-btn:hover{ background:var(--ghost); }
.pill-nav.on-light .burger-btn span{ background:var(--ink); }

.pill-brand{ display:flex; align-items:center; gap:0.6rem; flex:none; background:none; border:none; color:#fff; }
.pill-brand-mark{
  width:2.25rem; height:2.25rem; border-radius:var(--radius-pill); background:#fff;
  display:grid; place-items:center; flex:none; overflow:hidden;
}
.pill-brand-mark img{ width:68%; height:68%; object-fit:contain; }
.pill-brand-label{ font-size:0.95rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.pill-links{ display:none; align-items:center; gap:1.1rem; font-size:0.72rem; font-weight:500; color:rgba(255,255,255,0.65); white-space:nowrap; }
@media (min-width:1280px){ .pill-links{ display:flex; } }
@media (min-width:1536px){ .pill-links{ gap:1.5rem; font-size:0.8rem; } }
.pill-links a{ transition:color 0.25s; }
.pill-links a:hover, .pill-links a[aria-current="page"]{ color:#fff; }
.pill-actions{ display:flex; align-items:center; gap:0.5rem; }
.pill-cta{
  display:none; font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.7rem 1.375rem; border-radius:var(--radius-pill);
  background:#fff; color:var(--ink); transition:background 0.25s;
}
.pill-cta:hover{ background:var(--brand-light); }
@media (min-width:640px){ .pill-cta{ display:inline-block; } }
.brand{ display:inline-flex; align-items:center; gap:0.5rem; font-size:1rem; font-weight:500; text-transform:uppercase; letter-spacing:0.2em; color:#fff; background:none; border:none; }
.brand-mark{ height:1.5rem; width:auto; flex:none; display:block; }
.burger-btn{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:var(--radius-pill); background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); transition:background 0.25s; flex:none; }
.burger-btn:hover{ background:rgba(255,255,255,0.25); }
.burger-btn span{ display:block; width:1rem; height:1px; background:#fff; }
.burger-lines{ display:flex; flex-direction:column; gap:5px; }
.pill-nav.on-light .burger-lines span{ background:var(--ink); }

/* ---------- close button ---------- */
.close-btn{
  width:2.5rem; height:2.5rem; border-radius:var(--radius-pill); background:var(--surface);
  display:grid; place-items:center; transition:background 0.25s; flex:none;
}
.close-btn:hover{ background:var(--hairline); }
.close-btn svg{ width:1rem; height:1rem; transition:transform 0.25s; }
.close-btn:hover svg{ transform:rotate(90deg); }
.close-btn.on-brand{ background:rgba(255,255,255,0.15); color:#fff; }
.close-btn.on-brand:hover{ background:rgba(255,255,255,0.25); }

/* ---------- menu overlay ---------- */
.menu-overlay{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; pointer-events:none; }
.menu-overlay.open{ pointer-events:auto; }
.menu-backdrop{
  position:absolute; inset:0;
  background:rgba(10,9,6,0.38);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  opacity:0; transition:opacity 0.6s var(--ease-out-expo);
}
.menu-overlay.open .menu-backdrop{ opacity:1; }

.menu-panel{
  position:relative; height:100%; display:flex; flex-direction:column; color:#fff;
  padding:0.5rem; opacity:0; transform:translateY(-24px);
  transition:opacity 0.55s var(--ease-spring), transform 0.55s var(--ease-spring);
}
@media (min-width:640px){ .menu-panel{ padding:0.75rem; } }
.menu-overlay.open .menu-panel{ opacity:1; transform:translateY(0); }
.menu-inner{ flex:1; display:flex; flex-direction:column; padding:1.5rem; }
@media (min-width:640px){ .menu-inner{ padding:2.5rem; } }

.menu-top{ display:flex; align-items:center; justify-content:space-between; }
.menu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:0.15rem; overflow-y:auto; padding:0.5rem 0; }
.menu-link{
  display:block; font-size:1.9rem; font-weight:500; letter-spacing:-0.01em; line-height:1.15;
  transition:color 0.25s, opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring);
  opacity:0; transform:translateY(28px);
}
@media (min-width:640px){ .menu-link{ font-size:2.75rem; } }
.menu-overlay.open .menu-link{ opacity:1; transform:translateY(0); }
.menu-link:hover{ color:var(--brand-light); }

.menu-bottom{
  border-top:1px solid rgba(255,255,255,0.15); padding-top:2rem;
  display:flex; flex-direction:column; gap:1.25rem;
}
@media (min-width:640px){ .menu-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }
.social-nav{ display:flex; gap:1rem; font-size:0.875rem; color:rgba(255,255,255,0.7); }
.social-nav a{ display:inline-flex; align-items:center; justify-content:center; }
.social-nav a:hover{ color:#fff; }
.social-nav svg{ width:1.15rem; height:1.15rem; }

@media (prefers-reduced-motion: reduce){
  .menu-panel, .menu-backdrop, .menu-link{ transition-duration:0.01ms !important; }
}

/* ---------- eyebrow / tag / pill-btn ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.22em; }
.eyebrow::before{ content:""; width:0.375rem; height:0.375rem; border-radius:var(--radius-pill); flex:none; }
.eyebrow.dark{ color:var(--ink-soft); }
.eyebrow.dark::before{ background:var(--brand); }
.eyebrow.light{ color:rgba(255,255,255,0.7); }
.eyebrow.light::before{ background:var(--brand-light); }

.tag-pill{
  display:inline-flex; align-items:center; align-self:flex-start; flex:none; font-size:0.65rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--brand-deep);
  background:var(--surface); border-radius:var(--radius-pill); padding:0.4rem 0.85rem;
}

.pill-btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.8rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.9rem 1.5rem; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff;
  transition:background 0.25s, color 0.25s, transform 0.3s var(--ease-spring);
}
.pill-btn:hover{ transform:translateY(-2px); }
.pill-btn.light{ background:#fff; color:var(--brand-deep); }
.pill-btn.light:hover{ background:var(--brand-light); color:var(--brand-deep); }
.pill-btn svg{ width:1rem; height:1rem; }

/* ---------- blog hero (listing page) ---------- */
.blog-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--radius-card-lg);
  background:var(--brand-deep);
  color:#fff;
  padding:8rem 1.5rem 3rem;
  display:flex; flex-direction:column; gap:1.5rem;
}
@media (min-width:640px){ .blog-hero{ padding:9rem 2.5rem 4rem; } }
.blog-hero h1{
  font-size:min(3.4rem, 10vw); font-weight:800; text-transform:uppercase;
  line-height:0.95; letter-spacing:-0.02em; max-width:40rem;
  text-shadow:0 0.15rem 1.5rem rgba(0,0,0,0.2);
}
@media (min-width:640px){ .blog-hero h1{ font-size:min(3.75rem, 5.4vw); } }
.blog-hero p{ max-width:32rem; font-size:1rem; color:rgba(255,255,255,0.85); line-height:1.6; }

/* ---------- featured post ---------- */
.featured{ background:var(--background); border-radius:var(--radius-card-lg); margin-top:0.75rem; padding:1.5rem; }
@media (min-width:640px){ .featured{ padding:2.5rem; } }
.featured-card{
  display:flex; flex-direction:column; gap:1.5rem;
  border-radius:var(--radius-card); overflow:hidden;
}
@media (min-width:900px){ .featured-card{ flex-direction:row; align-items:stretch; } }
.featured-media{ position:relative; border-radius:var(--radius-card); overflow:hidden; flex:none; }
@media (min-width:900px){ .featured-media{ width:44%; } }
.featured-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
@media (min-width:900px){ .featured-media img{ aspect-ratio:auto; } }
.featured-body{ display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:0.5rem 0; }
@media (min-width:900px){ .featured-body{ padding:1.5rem 1rem; } }
.featured-body h2{ font-size:1.75rem; font-weight:500; line-height:1.1; letter-spacing:-0.01em; }
@media (min-width:640px){ .featured-body h2{ font-size:2.25rem; } }
.featured-body p{ font-size:0.95rem; color:var(--ink-soft); line-height:1.7; max-width:34rem; }
.featured-meta{ display:flex; align-items:center; gap:0.75rem; font-size:0.75rem; color:var(--ink-soft); }
.featured-meta .dot{ width:0.25rem; height:0.25rem; border-radius:var(--radius-pill); background:var(--ink-soft); }

/* ---------- post grid (listing page) ---------- */
.post-grid-section{ background:var(--background); border-radius:var(--radius-card-lg); margin-top:0.75rem; padding:3.5rem 1.5rem; }
@media (min-width:640px){ .post-grid-section{ padding:4rem 2.5rem; } }
.post-grid-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.post-grid-head h2{ font-size:2rem; font-weight:500; letter-spacing:-0.01em; margin-top:1rem; }

.filter-row{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.filter-chip{
  font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.08em;
  padding:0.55rem 1rem; border-radius:var(--radius-pill); background:var(--surface); color:var(--ink-soft);
  border:1px solid transparent; transition:background 0.25s, color 0.25s;
}
.filter-chip:hover{ color:var(--ink); }
.filter-chip[aria-current="true"]{ background:var(--brand-deep); color:#1a1400; }

.post-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; }
@media (min-width:640px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .post-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; } }

/* ---------- post card (shared: listing grid + related posts) ---------- */
.post-card{
  display:flex; flex-direction:column; gap:1rem;
  border-radius:var(--radius-card); background:var(--surface-card);
  border:1px solid var(--hairline); overflow:hidden;
  transition:transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
}
.post-card:hover{ transform:translateY(-6px); box-shadow:0 1.5rem 3rem rgba(10,10,10,0.08); }
.post-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease-out-quart); }
.post-card:hover .post-card-media img{ transform:scale(1.06); }
.post-card-tag{ position:absolute; top:0.75rem; left:0.75rem; }
.post-card-body{ display:flex; flex-direction:column; gap:0.6rem; padding:0 1.25rem 1.5rem; }
.post-card-body h3{ font-size:1.1rem; font-weight:500; line-height:1.3; letter-spacing:-0.005em; }
.post-card-body p{ font-size:0.82rem; color:var(--ink-soft); line-height:1.6; }
.post-card-meta{ display:flex; align-items:center; gap:0.6rem; font-size:0.7rem; color:var(--ink-soft); margin-top:0.25rem; }
.post-card-meta .dot{ width:0.2rem; height:0.2rem; border-radius:var(--radius-pill); background:var(--ink-soft); flex:none; }
.post-card-author{ display:flex; align-items:center; gap:0.5rem; }
.post-card-author img{ width:1.5rem; height:1.5rem; border-radius:var(--radius-pill); object-fit:cover; }

/* ---------- pagination ---------- */
.pagination{ display:flex; justify-content:center; align-items:center; gap:0.5rem; margin-top:3rem; }
.page-btn{
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:var(--surface); color:var(--ink-soft);
  font-size:0.8rem; font-weight:500; transition:background 0.25s, color 0.25s;
}
.page-btn:hover{ background:var(--ghost); color:var(--ink); }
.page-btn[aria-current="true"]{ background:var(--ink); color:#fff; }

/* ---------- newsletter cta ---------- */
.blog-newsletter{
  background:var(--ink); color:#fff; border-radius:var(--radius-card-lg); margin-top:0.75rem;
  padding:3.5rem 1.5rem; display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start;
}
@media (min-width:640px){
  .blog-newsletter{ padding:4rem 2.5rem; flex-direction:row; justify-content:space-between; align-items:center; }
}
.blog-newsletter h3{ font-size:1.75rem; font-weight:500; letter-spacing:-0.01em; max-width:26rem; }
.newsletter-form{ display:flex; gap:0.5rem; width:100%; max-width:24rem; }
.newsletter-form input{
  flex:1; min-width:0; font-family:inherit; font-size:0.85rem; color:#fff;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--radius-pill); padding:0.9rem 1.25rem;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,0.5); }
.newsletter-form button{
  flex:none; font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.9rem 1.5rem; border-radius:var(--radius-pill); background:#fff; color:var(--ink); transition:background 0.25s;
}
.newsletter-form button:hover{ background:var(--brand-light); }

/* ---------- article card: header, cover, body and FAQ all live in ONE continuous
   card (no dividers between them) — only the sections after it (related, footer)
   are separate cards. ---------- */
.article-hero{
  background:var(--background); border-radius:var(--radius-card-lg);
  padding:5.25rem 1.5rem 3rem; margin-top:0.75rem;
}
@media (min-width:640px){ .article-hero{ padding:6.5rem 2.5rem 4rem; } }
.article-hero-inner{
  display:flex; flex-direction:column; gap:1.5rem; max-width:64rem; margin:0 auto;
}

.breadcrumb ol{ display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; color:var(--ink-soft); flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--ink); text-decoration:underline; }
.breadcrumb li::after{ content:"/"; margin-left:0.5rem; color:var(--brand-deep); font-weight:700; }
.breadcrumb li:last-child::after{ content:""; }

.article-head{ display:flex; flex-direction:column; gap:1.5rem; }
.article-categories{ display:flex; flex-direction:column; gap:0.5rem; }
.tag-pill:hover{ text-decoration:underline; }
.entity-tags{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.entity-tag{
  display:inline-flex; align-items:center; font-size:0.68rem; font-weight:700;
  background:var(--brand-deep); color:#1a1400; padding:0.2rem 0.6rem; border-radius:var(--radius-pill);
  transition:background 0.2s;
}
.entity-tag:hover{ background:var(--brand); }
.article-head h1{
  font-size:2rem; font-weight:500; line-height:1.08; letter-spacing:-0.01em; color:var(--ink);
}
@media (min-width:640px){ .article-head h1{ font-size:2.75rem; } }
.article-dek{ font-size:1.05rem; color:var(--ink-soft); line-height:1.65; }

.article-meta{ display:flex; align-items:center; gap:0.75rem; font-size:0.8rem; color:var(--ink-soft); flex-wrap:wrap; }
.article-meta .dot{ width:0.25rem; height:0.25rem; border-radius:var(--radius-pill); background:var(--ink-soft); flex:none; }
.article-author{ display:flex; align-items:center; gap:0.6rem; }
.article-author img{ width:2rem; height:2rem; border-radius:var(--radius-pill); object-fit:cover; }
.article-author strong{ color:var(--ink); font-weight:500; }

/* ---------- cover image: lives inside the same card as the hero head, just spaced below it ---------- */
.article-cover{ margin-top:2rem; }
.article-cover figure{ max-width:64rem; margin:0 auto; position:relative; }
.article-cover img{ width:100%; border-radius:var(--radius-card); aspect-ratio:16/9; object-fit:cover; cursor:zoom-in; }
.article-cover figcaption{ font-size:0.75rem; color:var(--ink-soft); margin-top:0.75rem; text-align:center; padding:0 1.5rem; }
.article-cover-expand{
  position:absolute; top:0.75rem; right:0.75rem; width:2.1rem; height:2.1rem;
  display:grid; place-items:center; border-radius:var(--radius-pill);
  background:rgba(10,10,10,0.55); color:#fff; backdrop-filter:blur(2px);
  opacity:0; transition:opacity 0.2s;
}
.article-cover figure:hover .article-cover-expand{ opacity:1; }
.article-cover-expand svg{ width:1rem; height:1rem; }
@media (max-width:639px){
  /* image stays after the category/tag/title block, full-bleed edge to edge, taller so it reads as a real hero */
  .article-cover{ margin-left:-1.5rem; margin-right:-1.5rem; }
  .article-cover figure{ max-width:none; }
  .article-cover img{ border-radius:0; aspect-ratio:4/5; }
  .article-cover-expand{ opacity:1; }
  .article-cover figcaption{ font-size:0.65rem; padding:0 1.25rem; }
}

/* ---------- lightbox: click the cover image to view it full-screen ---------- */
.img-lightbox{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(10,10,10,0.9); padding:1.5rem; cursor:zoom-out;
}
.img-lightbox.is-open{ display:flex; }
.img-lightbox img{ max-width:100%; max-height:100%; border-radius:var(--radius-card); object-fit:contain; }
.img-lightbox-close{
  position:absolute; top:1.25rem; right:1.25rem; width:2.5rem; height:2.5rem;
  display:grid; place-items:center; border-radius:var(--radius-pill); background:rgba(255,255,255,0.12); color:#fff;
}
.img-lightbox-close svg{ width:1.15rem; height:1.15rem; }

/* ---------- share row: plain icons, above and outside the yellow toolbar ---------- */
.share-toolbar{
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  max-width:64rem; margin:0 auto 1rem;
}
.share-toolbar .share-btn{
  position:relative; display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border-radius:var(--radius-pill); color:var(--ink-soft); transition:background 0.2s, color 0.2s;
}
.share-toolbar .share-btn:hover{ background:var(--ghost); color:var(--ink); }
.share-toolbar .share-btn svg{ width:1rem; height:1rem; }

/* ---------- reading toolbar: font family, font size, dark mode — full-bleed brand-yellow band ---------- */
.reading-toolbar-bleed{
  width:100vw; position:relative; left:50%; right:50%;
  margin:0 -50vw 2rem; background:var(--brand-deep);
}
.reading-toolbar{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.75rem 1rem;
  max-width:64rem; margin:0 auto; padding:0.85rem 1.5rem;
}
.reading-toolbar-group{ display:flex; align-items:center; gap:0.35rem; }
.reading-toolbar-divider{ width:1px; height:1.5rem; background:rgba(10,10,10,0.18); flex:none; }
.reading-toolbar-btn{
  position:relative; display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border-radius:var(--radius-pill); color:#3a2c00; font-size:0.78rem; font-weight:600;
  transition:background 0.2s, color 0.2s;
}
.reading-toolbar-btn:hover{ background:rgba(10,10,10,0.1); color:#1a1400; }
.reading-toolbar-btn svg{ width:1rem; height:1rem; }
.font-btn[aria-pressed="true"]{ background:#1a1400; color:var(--brand-deep); }
.font-btn.font-serif-sample{ font-family:Georgia,"Times New Roman",serif; }
/* ---------- read-aloud floating button: mirrors a WhatsApp-style FAB, opposite corner (left) ---------- */
.read-aloud-float{
  position:fixed; left:1.25rem; bottom:1.25rem; z-index:150;
  display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem;
}
.read-aloud-btn-wrap{ position:relative; width:3.5rem; height:3.5rem; }
.read-aloud-ring{
  position:absolute; inset:-0.4rem; width:calc(100% + 0.8rem); height:calc(100% + 0.8rem);
  transform:rotate(-90deg); pointer-events:none;
}
.read-aloud-ring-track{ fill:none; stroke:rgba(10,10,10,0.1); stroke-width:3; }
.read-aloud-ring-progress{
  fill:none; stroke:var(--brand-deep); stroke-width:3; stroke-linecap:round;
  stroke-dashoffset:169.6; opacity:0; transition:stroke-dashoffset 0.12s linear;
}
.read-aloud-fab.is-playing ~ .read-aloud-ring .read-aloud-ring-progress{ opacity:1; }
.read-aloud-fab{
  position:relative; width:3.5rem; height:3.5rem; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-deep); color:#1a1400; box-shadow:0 1rem 2rem rgba(10,10,10,0.28);
  transition:transform 0.2s var(--ease-spring), background 0.2s;
}
.read-aloud-fab:hover{ transform:scale(1.06); }
.read-aloud-fab svg{ width:1.4rem; height:1.4rem; }
.read-aloud-fab .icon-pause{ display:none; }
.read-aloud-fab.is-playing{ background:#1a1400; color:var(--brand-deep); }
.read-aloud-fab.is-playing .icon-play{ display:none; }
.read-aloud-fab.is-playing .icon-pause{ display:block; }
.read-aloud-voice{
  order:-1; font-family:inherit; font-size:0.72rem; font-weight:600; color:var(--ink);
  background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--radius-pill);
  padding:0.5rem 1.9rem 0.5rem 0.9rem; max-width:11rem; box-shadow:0 0.5rem 1.5rem rgba(10,10,10,0.12);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211e17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.7rem center; background-size:0.85rem;
}
@media (max-width:639px){ .read-aloud-float{ left:1rem; bottom:1rem; } }
.reading-toolbar-copy-feedback{
  position:absolute; bottom:120%; left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:var(--surface); font-size:0.68rem; font-weight:500;
  padding:0.3rem 0.6rem; border-radius:0.4rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s;
}
[data-copy-link].is-copied .reading-toolbar-copy-feedback{ opacity:1; transform:translateX(-50%) translateY(0); }
.reading-toolbar-theme{
  display:flex; align-items:center; gap:0.4rem; color:#3a2c00; border-radius:var(--radius-pill); padding:0.3rem 0.5rem;
  transition:color 0.2s;
}
.reading-toolbar-theme:hover{ color:#1a1400; }
.reading-toolbar-theme svg{ width:0.95rem; height:0.95rem; flex:none; }
.reading-toolbar-theme .icon-sun{ color:#1a1400; }
.reading-toolbar-theme-track{
  position:relative; width:2.4rem; height:1.4rem; border-radius:var(--radius-pill);
  background:rgba(10,10,10,0.18); flex:none; transition:background 0.2s;
}
.reading-toolbar-theme-dot{
  position:absolute; top:0.2rem; left:0.2rem; width:1rem; height:1rem; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:transform 0.25s var(--ease-spring);
}
.reading-toolbar-theme[aria-pressed="true"] .reading-toolbar-theme-track{ background:#1a1400; }
.reading-toolbar-theme[aria-pressed="true"] .reading-toolbar-theme-dot{ transform:translateX(1rem); }

/* ---------- article body layout: narrow column + sticky TOC ---------- */
.article-body-section{ margin-top:3rem; }
.article-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; max-width:64rem; margin:0 auto;
}
@media (min-width:1100px){ .article-grid{ grid-template-columns:14rem minmax(0,38rem); justify-content:center; } }

/* ---------- resumir com IA ---------- */
.ai-resume{
  display:flex; flex-direction:column; gap:0.75rem;
  max-width:64rem; margin:0 auto 2rem; padding-bottom:2rem; border-bottom:1px solid var(--hairline);
}
@media (min-width:640px){
  .ai-resume{ flex-direction:row; align-items:center; justify-content:space-between; gap:1.25rem; }
}
.ai-resume-label{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-soft);
  flex:none;
}
.ai-resume-label svg{ width:0.9rem; height:0.9rem; color:var(--brand-deep); flex:none; }
.ai-resume-links{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.ai-btn{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.75rem; font-weight:500; color:var(--ink-soft);
  background:var(--surface); border-radius:var(--radius-pill); padding:0.5rem 0.9rem;
  transition:background 0.25s, color 0.25s;
}
.ai-btn:hover{ background:var(--ghost); color:var(--ink); }
.ai-btn svg{ width:0.85rem; height:0.85rem; flex:none; }
.ai-btn img{ width:0.85rem; height:0.85rem; border-radius:0.2rem; flex:none; display:block; }

.toc{ display:none; }
@media (min-width:1100px){
  .toc{ display:block; position:sticky; top:8rem; align-self:start; }
}
.toc-label{ font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-soft); margin-bottom:1rem; display:block; }
.toc ol{ display:flex; flex-direction:column; gap:0.75rem; border-left:1px solid var(--hairline); }
.toc a{
  display:block; font-size:0.8rem; color:var(--ink-soft); padding-left:1rem; border-left:2px solid transparent;
  margin-left:-1px; transition:color 0.25s, border-color 0.25s;
}
.toc a:hover{ color:var(--ink); }
.toc a[aria-current="true"]{ color:var(--brand-deep); border-left-color:var(--brand-deep); font-weight:500; }

/* ---------- article typography ---------- */
.article-content{ max-width:38rem; color:var(--ink); --reader-scale:1; }
.article-content > * + *{ margin-top:1.5rem; }
.article-content p{ font-size:calc(1.0125rem * var(--reader-scale)); line-height:1.8; color:#211e17; }
.article-content h2{
  font-size:calc(1.5rem * var(--reader-scale)); font-weight:500; letter-spacing:-0.005em; line-height:1.25;
  margin-top:3rem; scroll-margin-top:8rem;
}
.article-content h3{
  font-size:calc(1.15rem * var(--reader-scale)); font-weight:500; letter-spacing:-0.005em; line-height:1.3;
  margin-top:2.25rem; scroll-margin-top:8rem;
}
.article-content ul, .article-content ol{ display:flex; flex-direction:column; gap:0.75rem; padding-left:1.375rem; }
.article-content ul{ list-style:disc; }
.article-content ol{ list-style:decimal; }
.article-content li{ font-size:calc(1.0125rem * var(--reader-scale)); line-height:1.7; color:#211e17; }
.article-content.font-serif{ font-family:Georgia,"Times New Roman",serif; }
.article-content.font-serif h2, .article-content.font-serif h3{ letter-spacing:0; }
.article-content li::marker{ color:var(--brand-deep); }
.article-content strong{ font-weight:500; color:var(--ink); }
.article-content a{ color:var(--brand-deep); text-decoration:underline; text-decoration-color:var(--ghost); text-underline-offset:0.2em; }
.article-content a:hover{ text-decoration-color:currentColor; }

/* ---------- inline figure inside the article body (~1 per 1500 words, placed by hand where it fits) ---------- */
.article-content figure{ margin-top:2rem !important; }
.article-content figure img{ width:100%; border-radius:var(--radius-card); aspect-ratio:16/10; object-fit:cover; }
.article-content figcaption{ font-size:0.8rem; color:var(--ink-soft); margin-top:0.65rem !important; line-height:1.5; }

/* ---------- callout ---------- */
.callout{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--surface); border-left:3px solid var(--brand-deep);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
  padding:1.25rem 1.5rem; margin-top:2rem !important;
}
.callout-icon{
  flex:none; width:2.25rem; height:2.25rem; border-radius:var(--radius-pill);
  background:var(--brand-deep); color:#fff; display:grid; place-items:center;
}
.callout-icon svg{ width:1.1rem; height:1.1rem; }
.callout p{ font-size:0.95rem; line-height:1.65; margin:0; }
.callout strong{ display:block; font-size:1.35rem; font-weight:500; color:var(--ink); margin-bottom:0.15rem; }

/* ---------- stat grid (3+ related numbers, scanned as a dashboard, not read as prose) ---------- */
.stat-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:2rem !important; }
@media (min-width:560px){ .stat-grid{ grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); } }
.stat-card{
  display:flex; flex-direction:column; gap:0.35rem;
  background:var(--surface); border-radius:var(--radius-card); padding:1.25rem;
}
.stat-card .stat-value{ font-size:1.75rem; font-weight:500; color:var(--brand-deep); line-height:1; }
.stat-card .stat-label{ font-size:0.82rem; color:var(--ink); line-height:1.4; }
.stat-grid-source{ display:block; font-size:0.75rem; color:var(--ink-soft); margin-top:0.75rem !important; }

/* ---------- self-check (interactive checklist — reader checks boxes, gets an instant read on where they stand) ---------- */
.self-check{
  background:var(--surface); border-radius:var(--radius-card-lg);
  border:1px solid var(--hairline); box-shadow:0 1rem 2.5rem rgba(10,10,10,0.05);
  padding:1.75rem; margin-top:2.5rem !important;
}
.self-check-eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem; font-size:0.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--brand-deep); margin-bottom:0.85rem;
}
.self-check-eyebrow::before{ content:""; width:0.4rem; height:0.4rem; border-radius:var(--radius-pill); background:var(--brand-deep); flex:none; }
.self-check-head{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.5rem; }
.self-check-head strong{ font-size:1.3rem; font-weight:500; color:var(--ink); letter-spacing:-0.005em; }
.self-check-head p{ font-size:0.88rem; color:var(--ink-soft); margin:0 !important; }
.self-check-list{ display:flex; flex-direction:column; gap:0.6rem; }
.self-check-item{
  display:flex; align-items:center; gap:0.85rem; cursor:pointer;
  background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--radius-card);
  padding:0.9rem 1.1rem; transition:border-color 0.2s, background 0.2s, transform 0.2s;
}
.self-check-item:hover{ border-color:var(--brand-deep); transform:translateX(2px); }
.self-check-item input{
  appearance:none; width:1.25rem; height:1.25rem; flex:none; border-radius:0.35rem;
  border:1.5px solid var(--hairline); background:var(--surface-card); cursor:pointer;
  position:relative; transition:background 0.2s, border-color 0.2s;
}
.self-check-item input:checked{ background:var(--brand-deep); border-color:var(--brand-deep); }
.self-check-item input:checked:after{
  content:""; position:absolute; left:0.36rem; top:0.14rem; width:0.32rem; height:0.62rem;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.self-check-item span{ font-size:0.92rem; color:var(--ink); line-height:1.4; }
.self-check-progress{ font-size:0.75rem; color:var(--ink-soft); margin-top:0.9rem !important; display:block; }
.self-check-result{
  display:none; margin-top:1.25rem; padding:1.25rem 1.4rem; border-radius:var(--radius-card);
  background:var(--ink); color:#fff;
  font-size:0.95rem; font-weight:500; line-height:1.55;
}
.self-check-result.is-visible{ display:flex; align-items:flex-start; gap:0.75rem; animation:selfCheckPop 0.3s var(--ease-spring); }
.self-check-result::before{
  content:"✓"; flex:none; width:1.75rem; height:1.75rem; border-radius:var(--radius-pill);
  background:var(--brand-deep); color:var(--ink); font-weight:700; font-size:0.9rem;
  display:grid; place-items:center;
}
@keyframes selfCheckPop{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .self-check-result.is-visible{ animation:none; } }
@media (max-width:639px){
  .self-check{ padding:1.1rem; }
  .self-check-item{ padding:0.7rem 0.85rem; gap:0.65rem; }
  .self-check-result{ padding:1rem 1.1rem; }
}

/* ---------- FAQ (native <details>, no JS; feeds the FAQPage schema from the same data) ---------- */
.faq-section{ margin-top:3.5rem; padding-top:3rem; border-top:1px solid var(--hairline); }
.faq-list{ margin-top:1rem; display:flex; flex-direction:column; gap:0.75rem; }
.faq-item{ border-radius:var(--radius-card); background:var(--surface); padding:0.25rem 1.25rem; }
.faq-item summary{
  cursor:pointer; padding:1.1rem 0; font-size:0.95rem; font-weight:500; color:var(--ink);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; font-size:1.1rem; color:var(--ink-soft); transition:transform 0.25s;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ font-size:0.85rem; color:var(--ink-soft); line-height:1.65; padding:0 0 1.1rem; margin:0 !important; }

/* ---------- references (discreet, collapsed by default, below the FAQ) ---------- */
.references-section{ margin-top:2.5rem; }
.references-block{
  border-top:1px solid var(--hairline); padding-top:1.25rem;
}
.references-block summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.02em;
}
.references-block summary::-webkit-details-marker{ display:none; }
.references-block summary::after{
  content:"+"; font-size:0.9rem; color:var(--ink-soft); transition:transform 0.25s;
}
.references-block[open] summary::after{ transform:rotate(45deg); }
.references-block summary:hover{ color:var(--ink); }
.references-list{
  margin:1rem 0 0; padding-left:1.15rem; display:flex; flex-direction:column; gap:0.55rem;
}
.references-list li{ font-size:0.78rem; color:var(--ink-soft); line-height:1.6; }
.references-list a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.references-list a:hover{ color:var(--brand-deep); }
.references-note{ display:block; color:var(--ink-soft); opacity:0.75; margin-top:0.15rem; }

/* ---------- comparison table ---------- */
.data-table-wrap{ overflow-x:auto; margin-top:2rem !important; border-radius:var(--radius-card); border:1px solid var(--hairline); }
.data-table{ width:100%; border-collapse:collapse; font-size:0.85rem; min-width:32rem; }
.data-table th, .data-table td{ padding:0.75rem 1rem; text-align:left; border-bottom:1px solid var(--hairline); }
.data-table th{ background:var(--surface); font-weight:500; text-transform:uppercase; font-size:0.7rem; letter-spacing:0.08em; color:var(--ink-soft); }
.data-table tr:last-child td{ border-bottom:none; }
.data-table .level{ display:inline-flex; align-items:center; gap:0.4rem; font-weight:500; }
.data-table .level::before{ content:""; width:0.5rem; height:0.5rem; border-radius:var(--radius-pill); flex:none; }
.data-table .level.critico::before{ background:#c0392b; }
.data-table .level.alto::before{ background:var(--brand-deep); }
.data-table .level.medio::before{ background:#a68a5b; }
.data-table .level.baixo::before{ background:#7a9b6e; }
.table-legend{ font-size:0.78rem; color:var(--ink-soft); margin-top:0.75rem !important; }

/* ---------- decision flow (legal-design style: same text content as a normal list,
   restructured as a scannable if/then flow instead of prose bullets) ---------- */
.decision-flow{ display:flex; flex-direction:column; margin-top:2rem !important; }
.decision-step{ display:flex; flex-direction:column; align-items:center; }
.decision-step:not(:last-child)::after{
  content:""; width:2px; height:1.5rem; background:var(--hairline); margin:0.25rem 0;
}
.decision-question{
  width:100%; max-width:28rem; text-align:center; font-size:0.95rem; font-weight:500; color:var(--ink);
  background:var(--surface); border-radius:var(--radius-card); padding:0.9rem 1.25rem;
}
.decision-branches{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0.75rem;
  width:100%; max-width:32rem; margin-top:0.75rem;
}
@media (min-width:560px){ .decision-branches{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.decision-answer{
  display:flex; flex-direction:column; gap:0.3rem; border-radius:var(--radius-card);
  padding:0.9rem 1.1rem; font-size:0.85rem; line-height:1.5; border:1px solid var(--hairline);
}
.decision-answer .decision-tag{
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
}
.decision-answer.yes{ background:#eef5eb; }
.decision-answer.yes .decision-tag{ color:#4d7a3f; }
.decision-answer.no{ background:var(--surface); }
.decision-answer.no .decision-tag{ color:var(--ink-soft); }

/* ---------- quiz poll (interactive multiple-choice — reader picks an option, gets instant feedback) ---------- */
.quiz-poll{
  background:var(--surface); border-radius:var(--radius-card-lg);
  border:1px solid var(--hairline); box-shadow:0 1rem 2.5rem rgba(10,10,10,0.05);
  padding:1.75rem; margin-top:2.5rem !important;
}
.quiz-poll-eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem; font-size:0.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--brand-deep); margin-bottom:0.85rem;
}
.quiz-poll-eyebrow::before{ content:""; width:0.4rem; height:0.4rem; border-radius:var(--radius-pill); background:var(--brand-deep); flex:none; }
.quiz-poll-head{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.5rem; }
.quiz-poll-head strong{ font-size:1.3rem; font-weight:500; color:var(--ink); letter-spacing:-0.005em; }
.quiz-poll-head p{ font-size:0.88rem; color:var(--ink-soft); margin:0 !important; }
.quiz-poll-options{ display:flex; flex-direction:column; gap:0.6rem; }
.quiz-option{
  display:flex; align-items:center; justify-content:space-between; gap:0.85rem; cursor:pointer;
  width:100%; text-align:left; font:inherit; color:var(--ink);
  background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--radius-card);
  padding:0.9rem 1.1rem; transition:border-color 0.2s, background 0.2s, transform 0.2s;
}
.quiz-option:hover:not(:disabled){ border-color:var(--brand-deep); transform:translateX(2px); }
.quiz-option:disabled{ cursor:default; }
.quiz-option .quiz-option-tag{
  flex:none; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  border-radius:var(--radius-pill); padding:0.2rem 0.6rem; opacity:0; transition:opacity 0.2s;
}
.quiz-option.is-picked .quiz-option-tag{ opacity:1; }
.quiz-option.is-correct{ border-color:#7a9b6e; background:#eef5eb; }
.quiz-option.is-correct .quiz-option-tag{ background:#7a9b6e; color:#fff; }
.quiz-option.is-wrong{ border-color:#c0392b; background:#f7e9e7; }
.quiz-option.is-wrong .quiz-option-tag{ background:#c0392b; color:#fff; }
.quiz-poll-result{
  display:none; margin-top:1.25rem; padding:1.25rem 1.4rem; border-radius:var(--radius-card);
  background:var(--ink); color:#fff; font-size:0.95rem; font-weight:500; line-height:1.55;
  align-items:flex-start; gap:0.75rem;
}
.quiz-poll-result.is-visible{ display:flex; animation:selfCheckPop 0.3s var(--ease-spring); }
.quiz-poll-result::before{
  content:"→"; flex:none; width:1.75rem; height:1.75rem; border-radius:var(--radius-pill);
  background:var(--brand-deep); color:var(--ink); font-weight:700; font-size:0.9rem;
  display:grid; place-items:center;
}
@media (prefers-reduced-motion: reduce){ .quiz-poll-result.is-visible{ animation:none; } }
@media (max-width:639px){
  .quiz-poll{ padding:1.1rem; }
  .quiz-option{ padding:0.7rem 0.85rem; gap:0.65rem; }
  .quiz-poll-result{ padding:1rem 1.1rem; }
}

/* ---------- copy box (content meant to be copied verbatim into another tool — AI chat, WhatsApp, Word, Google Docs) ---------- */
.copy-box{
  background:var(--surface); border-radius:var(--radius-card); border:1px solid var(--hairline);
  padding:1.25rem 1.4rem;
}
.copy-box-head{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.75rem; }
.copy-box-label{ font-size:0.72rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
.copy-box-icons{ display:flex; gap:0.3rem; flex:none; }
.copy-box-icons img{ width:1.1rem; height:1.1rem; border-radius:0.25rem; }
.copy-box-text{ font-size:0.92rem; line-height:1.65; color:var(--ink); font-style:italic; }
.copy-box-btn{
  position:relative; display:inline-flex; align-items:center; gap:0.4rem; margin-top:1rem;
  font-size:0.78rem; font-weight:600; color:var(--ink); background:var(--surface-card);
  border:1px solid var(--hairline); border-radius:var(--radius-pill); padding:0.5rem 1rem;
  transition:background 0.2s, border-color 0.2s;
}
.copy-box-btn:hover{ border-color:var(--brand-deep); }
.copy-box-btn svg{ width:0.9rem; height:0.9rem; }
.copy-box-btn .copy-box-btn-label-done{ display:none; }
.copy-box-btn.is-copied .copy-box-btn-label-default{ display:none; }
.copy-box-btn.is-copied .copy-box-btn-label-done{ display:inline; }
.copy-box + .copy-box{ margin-top:0.75rem !important; }

/* ---------- napkin (generated infographic) ---------- */
.napkin-figure{
  margin-top:2rem !important;
  display:flex; flex-direction:column; align-items:center;
}
.napkin-figure img{ max-width:100%; height:auto; }
.napkin-figure figcaption{ font-size:0.78rem; color:var(--ink-soft); text-align:center; margin-top:0.85rem !important; }

/* ---------- lead magnet (mid-article capture, distinct from the footer newsletter) ---------- */
.lead-magnet{
  display:flex; flex-direction:column; gap:1.25rem;
  background:var(--surface); border-radius:var(--radius-card);
  padding:1.75rem; margin-top:2.5rem !important;
}
@media (min-width:640px){ .lead-magnet{ flex-direction:row; align-items:center; padding:2rem; } }
.lead-magnet-copy{ flex:1; }
.lead-magnet-copy .tag-pill{ margin-bottom:0.5rem; }
.lead-magnet-copy strong{ display:block; font-size:1.15rem; font-weight:500; color:var(--ink); }
.lead-magnet-copy p{ font-size:0.85rem; color:var(--ink-soft); margin-top:0.4rem !important; }
.lead-magnet-form{ display:flex; flex-direction:column; gap:0.6rem; flex:none; width:100%; }
@media (min-width:640px){ .lead-magnet-form{ width:16rem; } }
.lead-magnet-form input{
  font-family:inherit; font-size:0.85rem; color:var(--ink);
  background:var(--surface-card); border:1px solid var(--hairline);
  border-radius:var(--radius-pill); padding:0.75rem 1.1rem;
}
.lead-magnet-form button{
  font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.8rem 1.25rem; border-radius:var(--radius-pill); background:var(--ink); color:#fff; transition:background 0.25s;
}
.lead-magnet-form button:hover{ background:var(--brand-deep); color:var(--ink); }

/* ---------- mid-article CTA ---------- */
.mid-cta{
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
  background:var(--ink); color:#fff; border-radius:var(--radius-card);
  padding:1.75rem 2rem; margin-top:2.5rem !important;
}
@media (min-width:640px){ .mid-cta{ flex-direction:row; align-items:center; justify-content:space-between; } }
.mid-cta p{ font-size:1.05rem; font-weight:500; max-width:24rem; margin:0; color:#fff; }
.mid-cta .pill-btn{ background:#fff; color:var(--ink); flex:none; }
.mid-cta .pill-btn:hover{ background:var(--brand-light); }

/* ---------- share row ---------- */
.share-row{
  display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:3rem !important;
  padding-top:1.5rem; border-top:1px solid var(--hairline);
}
.share-row span{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); }
.share-links{ display:flex; gap:0.5rem; }
.share-links a, .share-links button{
  position:relative; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:var(--radius-pill);
  background:var(--surface); color:var(--ink-soft); transition:background 0.25s, color 0.25s;
}
.share-links a:hover, .share-links button:hover{ background:var(--ghost); color:var(--ink); }
.share-links svg{ width:1rem; height:1rem; }

/* ---------- author bio ---------- */
.author-bio{
  display:flex; gap:1.25rem; align-items:flex-start;
  background:var(--surface); border-radius:var(--radius-card);
  padding:1.75rem; margin-top:2.5rem !important; max-width:38rem;
}
.author-bio img{ width:3.5rem; height:3.5rem; border-radius:var(--radius-pill); object-fit:cover; flex:none; }
.author-bio h4{ font-size:1rem; font-weight:500; color:var(--ink); }
.author-bio p{ font-size:0.85rem; color:var(--ink-soft); line-height:1.6; margin-top:0.35rem !important; }

/* ---------- related posts ---------- */
.related-section{ background:var(--background); border-radius:var(--radius-card-lg); margin-top:0.75rem; padding:3.5rem 1.5rem; }
@media (min-width:640px){ .related-section{ padding:4rem 2.5rem; } }
.related-head{ max-width:64rem; margin:0 auto 2.5rem; }
.related-head h2{ font-size:1.75rem; font-weight:500; letter-spacing:-0.01em; margin-top:0.75rem; }
.related-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; max-width:64rem; margin:0 auto; }
@media (min-width:640px){ .related-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- prev / next post nav ---------- */
.post-pager{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; max-width:64rem; margin:0.75rem auto 0; padding:0 1.5rem 1.5rem; }
@media (min-width:560px){ .post-pager{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (min-width:640px){ .post-pager{ padding:0 2.5rem 2.5rem; } }
.post-pager-link{
  display:flex; flex-direction:column; gap:0.4rem;
  border-radius:var(--radius-card); background:var(--surface); padding:1.25rem;
  transition:background 0.25s;
}
.post-pager-link:hover{ background:var(--ghost); }
.post-pager-link.next{ text-align:right; align-items:flex-end; }
.post-pager-dir{ font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); }
.post-pager-title{ font-size:0.9rem; font-weight:500; color:var(--ink); line-height:1.3; }

/* ---------- footer ---------- */
.site-footer{ background:var(--brand-deep); color:#fff; border-radius:var(--radius-card-lg); margin-top:0.75rem; padding:3.5rem 1.5rem; }
@media (min-width:640px){ .site-footer{ padding:4rem 2.5rem; } }
.footer-columns{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:2rem; row-gap:2.5rem; padding:1.5rem 0 2.5rem; }
@media (min-width:900px){ .footer-columns{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); } }
.footer-brand-mark .brand-mark{ width:100%; height:auto; max-width:16rem; }
.footer-brand p{ font-size:0.875rem; color:rgba(255,255,255,0.65); margin-top:1rem; max-width:none; }
.footer-nav h4{ font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.2em; color:rgba(255,255,255,0.5); margin-bottom:1rem; }
.footer-nav ul{ display:flex; flex-direction:column; gap:0.75rem; font-size:0.875rem; color:rgba(255,255,255,0.8); }
.footer-nav a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{
  display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start;
  font-size:0.8rem; color:rgba(255,255,255,0.65); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.15);
}
@media (min-width:640px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }
.social-nav{ display:flex; gap:1.25rem; }
.social-nav a:hover{ color:#fff; }
.social-nav svg{ width:1.1rem; height:1.1rem; }

@media (prefers-reduced-motion: reduce){
  .mask-inner, [data-inview="rise"]{ transition-duration:0.01ms !important; }
}