/* =========================================================================
   HoneyBusiness — Blog / long-form article layer
   Extends style.css. Loaded only on article pages.
   ========================================================================= */

/* ---------- Reading progress ---------- */
.read-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--honey-soft),var(--honey),var(--honey-deep));
  box-shadow:0 0 18px rgba(224,168,46,.7);
  transition:width .1s linear;
}

/* ---------- Article hero ---------- */
.article-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(1.5rem,3vw,2.5rem);text-align:center}
.article-hero .eyebrow{justify-content:center}
.article-hero h1{max-width:19ch;margin:1.1rem auto .9rem}
.article-hero .standfirst{
  font-size:clamp(1.1rem,1.9vw,1.35rem);color:var(--ink-2);
  max-width:60ch;margin:0 auto;line-height:1.6;
}
.byline{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:2rem;flex-wrap:wrap;
}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--honey)}
.byline .who{text-align:left;font-family:var(--f-head);font-weight:600;font-size:.95rem}
.byline .who small{display:block;font-family:var(--f-body);font-weight:400;color:var(--ink-3);font-size:.82rem}
.byline .meta{
  display:flex;gap:.5rem;align-items:center;color:var(--ink-3);font-size:.85rem;
  padding-left:1rem;border-left:1px solid var(--line);
}
.byline .meta i{color:var(--honey)}

/* ---------- Layout: article + sticky TOC ---------- */
.article-wrap{
  display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;
  padding-bottom:clamp(3rem,6vw,5rem);
}
@media(min-width:1040px){
  .article-wrap{grid-template-columns:230px minmax(0,1fr);gap:4rem}
}
.toc{display:none}
@media(min-width:1040px){
  .toc{
    display:block;position:sticky;top:96px;align-self:start;
    max-height:calc(100vh - 140px);overflow-y:auto;
  }
}
.toc h4{
  font-family:var(--f-head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1rem;
}
.toc a{
  display:block;padding:.45rem 0 .45rem .9rem;font-size:.9rem;color:var(--ink-3);
  border-left:2px solid var(--line);transition:color .2s,border-color .2s;line-height:1.4;
}
.toc a:hover{color:var(--ink)}
.toc a.active{color:var(--honey);border-left-color:var(--honey)}

/* ---------- Article body typography ---------- */
.article-body{max-width:70ch}
.article-body > p{
  font-size:1.12rem;line-height:1.78;color:#D6DEEA;margin-bottom:1.5rem;
}
.article-body > p strong{color:var(--ink);font-weight:600}
.article-body .intro::first-letter{
  float:left;font-family:var(--f-head);font-weight:800;font-size:4.2rem;line-height:.82;
  padding:.05em .14em 0 0;
  background:linear-gradient(140deg,var(--honey-soft),var(--honey));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.article-body h2{
  font-size:clamp(1.6rem,3vw,2.15rem);margin:3.2rem 0 1.1rem;scroll-margin-top:96px;
}
.article-body h3{margin:2.2rem 0 .8rem;color:var(--ink)}
.article-body ul{margin:0 0 1.6rem 0;padding:0;list-style:none}
.article-body ul li{
  position:relative;padding-left:1.7rem;margin-bottom:.75rem;
  font-size:1.08rem;line-height:1.7;color:#D6DEEA;
}
.article-body ul li::before{
  content:"";position:absolute;left:.15rem;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--honey);transform:rotate(45deg);
}

/* Myth section header with ghost numeral */
.myth{position:relative;margin-top:3.6rem;scroll-margin-top:96px}
.myth-num{
  font-family:var(--f-head);font-weight:800;font-size:clamp(4.5rem,11vw,7.5rem);
  line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(224,168,46,.28);
  display:block;margin-bottom:-.32em;pointer-events:none;user-select:none;
}
.myth-label{
  display:inline-block;font-family:var(--f-head);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--money);
  background:rgba(18,185,129,.1);border:1px solid rgba(18,185,129,.28);
  padding:.3rem .7rem;border-radius:999px;margin-bottom:.7rem;
}
.myth h2{margin-top:.2rem}

/* ---------- Pull quote ---------- */
.pullquote{
  position:relative;margin:2.6rem 0;padding:1.9rem 1.8rem 1.9rem 3.4rem;
  border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(224,168,46,.09),rgba(255,255,255,.02));
}
.pullquote::before{
  content:"\201C";position:absolute;left:1rem;top:.35rem;
  font-family:var(--f-head);font-size:4.6rem;line-height:1;color:var(--honey);opacity:.55;
}
.pullquote p{
  font-family:var(--f-head);font-weight:600;font-size:clamp(1.15rem,2.1vw,1.45rem);
  line-height:1.45;color:var(--ink);letter-spacing:-.01em;
}
.pullquote cite{
  display:block;margin-top:.8rem;font-style:normal;font-size:.85rem;color:var(--ink-3);
}

/* ---------- Figures / charts ---------- */
.figure{
  margin:2.8rem 0;padding:1.6rem;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg-2));
  box-shadow:var(--shadow);
}
.figure-head{margin-bottom:1.2rem}
.figure-kicker{
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--honey);display:block;margin-bottom:.35rem;
}
.figure-head h4{font-family:var(--f-head);font-size:1.12rem;font-weight:700;color:var(--ink)}
.figure svg{width:100%;height:auto;display:block;overflow:visible}
.figure figcaption{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-3);line-height:1.6;
}

/* SVG shared text styles.
   Colour lives on the <svg> so per-element fill="" attributes still win —
   a fill in these classes would override them. */
.figure svg{fill:var(--ink-2)}
.c-label{font-family:var(--f-body);font-size:13px}
.c-label-sm{font-family:var(--f-body);font-size:11px}
.c-value{font-family:var(--f-head);font-size:15px;font-weight:700}
.c-big{font-family:var(--f-head);font-size:22px;font-weight:800}
.c-axis{stroke:rgba(255,255,255,.14);stroke-width:1}

/* Chart reveal animations (main.js adds .in) */
.figure .grow-bar{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.figure.in .grow-bar{transform:scaleX(1)}
.figure .grow-bar:nth-of-type(2){transition-delay:.12s}
.figure .draw-line{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.9s cubic-bezier(.4,0,.2,1)}
.figure.in .draw-line{stroke-dashoffset:0}
.figure .fade-in{opacity:0;transition:opacity .7s ease .8s}
.figure.in .fade-in{opacity:1}
.figure .rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.figure.in .rise{opacity:1;transform:translateY(0)}
.figure.in .rise:nth-of-type(2){transition-delay:.1s}
.figure.in .rise:nth-of-type(3){transition-delay:.2s}

/* Leaking bucket drips */
@keyframes drip{
  0%{opacity:0;transform:translateY(0)}
  15%{opacity:1}
  100%{opacity:0;transform:translateY(46px)}
}
.figure.in .drip{animation:drip 1.9s ease-in infinite}
.figure.in .drip.d2{animation-delay:.55s}
.figure.in .drip.d3{animation-delay:1.1s}
@keyframes pour{
  0%,100%{opacity:.85}
  50%{opacity:1}
}
.figure.in .pour{animation:pour 1.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .figure .grow-bar,.figure .draw-line,.figure .fade-in,.figure .rise{transition:none}
  .figure .grow-bar{transform:none}
  .figure .draw-line{stroke-dashoffset:0}
  .figure .fade-in,.figure .rise{opacity:1;transform:none}
  .figure.in .drip,.figure.in .pour{animation:none;opacity:1}
  .read-progress{transition:none}
}

/* ---------- Takeaway cards ---------- */
.takeaways{
  display:grid;gap:1rem;margin:2.6rem 0;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.takeaway{
  padding:1.4rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:transform .25s ease,border-color .25s ease;
}
.takeaway:hover{transform:translateY(-4px);border-color:rgba(224,168,46,.45)}
.takeaway .n{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(120deg,var(--honey),var(--honey-deep));
  color:#241a03;font-family:var(--f-head);font-weight:800;font-size:.95rem;margin-bottom:.75rem;
}
.takeaway h4{font-family:var(--f-head);font-size:1rem;margin-bottom:.35rem;color:var(--ink)}
.takeaway p{font-size:.92rem;color:var(--ink-2);line-height:1.6}

/* ---------- Callout ---------- */
.callout{
  display:flex;gap:1rem;margin:2.4rem 0;padding:1.3rem 1.4rem;
  border-radius:var(--radius-sm);border:1px solid rgba(18,185,129,.3);
  background:rgba(18,185,129,.07);
}
.callout i{color:var(--money);font-size:1.4rem;flex:none;line-height:1.3}
.callout p{font-size:1rem;color:#D6DEEA;line-height:1.7}
.callout strong{color:var(--ink)}

/* ---------- Share + end matter ---------- */
.article-end{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.share{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.share span{font-size:.85rem;color:var(--ink-3);margin-right:.2rem}
.share a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink-2);
  transition:all .2s ease;font-size:1.05rem;
}
.share a:hover{background:var(--honey);color:#241a03;border-color:var(--honey);transform:translateY(-2px)}

/* ---------- Author box ---------- */
.author-box{
  display:flex;gap:1.3rem;margin-top:2.2rem;padding:1.6rem;
  border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(224,168,46,.07),rgba(255,255,255,.02));
  align-items:flex-start;flex-wrap:wrap;
}
.author-box img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:2px solid var(--honey);flex:none}
.author-box .bio{flex:1;min-width:220px}
.author-box h4{font-family:var(--f-head);font-size:1.05rem;margin-bottom:.3rem}
.author-box p{font-size:.93rem;color:var(--ink-2);line-height:1.65;margin-bottom:.8rem}

@media(max-width:560px){
  .article-body > p{font-size:1.05rem}
  .figure{padding:1.1rem}
  .byline .meta{padding-left:0;border-left:0}
}

/* =========================================================================
   Blog index — featured article card
   ========================================================================= */
.feature-post{
  display:grid;grid-template-columns:1fr;
  border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  box-shadow:var(--shadow);
  transition:transform .25s ease,border-color .25s ease;
}
@media(min-width:880px){ .feature-post{grid-template-columns:1.02fr 1fr} }
.feature-post:hover{transform:translateY(-4px);border-color:rgba(224,168,46,.45)}

.feature-art{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:2rem 1.6rem;min-height:250px;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(224,168,46,.10), transparent 70%),
    linear-gradient(135deg,var(--panel-2),var(--bg));
  border-bottom:1px solid var(--line);
}
@media(min-width:880px){ .feature-art{border-bottom:0;border-right:1px solid var(--line)} }
.feature-art-kicker{
  font-family:var(--f-head);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--honey);
}
.feature-art svg{width:100%;max-width:330px;height:auto;display:block}
.feature-art-caption{
  max-width:300px;text-align:center;font-size:.85rem;line-height:1.5;color:var(--ink-3);
}

.feature-body{padding:clamp(1.4rem,3vw,2.1rem);display:flex;flex-direction:column;justify-content:center}
.feature-flag{
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--honey);background:rgba(224,168,46,.1);border:1px solid rgba(224,168,46,.3);
  padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem;
}
.feature-body h3{
  font-family:var(--f-head);font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.2;
  letter-spacing:-.02em;margin-bottom:.7rem;
}
.feature-post:hover .feature-body h3{color:var(--honey-soft)}
.feature-body .excerpt{color:var(--ink-2);font-size:1rem;line-height:1.65;margin-bottom:1.2rem}
.feature-meta{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:.83rem;color:var(--ink-3);margin-bottom:1.3rem;
}
.feature-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.feature-meta .pill{
  font-family:var(--f-head);font-weight:600;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.25rem .6rem;border-radius:6px;
  background:rgba(18,185,129,.16);color:var(--money);
}

/* Section spacing on the index */
.blog-index{padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,6vw,4.5rem)}
.blog-index .section-head{margin-bottom:1.5rem}
.index-note{
  margin-top:1.4rem;font-size:.9rem;color:var(--ink-3);
  display:flex;align-items:center;gap:.5rem;
}
.index-note i{color:var(--honey)}

/* Older articles — a compact row list, shown once there is more than one post */
.post-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1.6rem}
.post-list-top{margin-top:0}
.pli-latest{
  display:inline-flex;align-items:center;gap:.35rem;margin-bottom:.35rem;
  font-family:var(--f-head);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--honey);
}
.post-list-head{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem;
  font-family:var(--f-head);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.post-list-item{
  position:relative;display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.4rem;
  border-radius:14px;border:1px solid var(--line);overflow:hidden;
  /* --pli-wash is a soft, translucent version of the post's own colour, set inline per row */
  background:
    radial-gradient(130% 160% at 0% 15%, var(--pli-wash, transparent), transparent 65%),
    linear-gradient(180deg,var(--panel),var(--panel-2));
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.post-list-item::before{
  /* pillar-coloured accent, set inline per post via --pli-c */
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pli-c,var(--honey));
}
.post-list-item:hover{transform:translateY(-2px);border-color:rgba(224,168,46,.4);box-shadow:var(--shadow)}
.post-list-item .pli-icon{
  /* background + colour set inline per post, same pattern as .pli-pill (older-browser safe) */
  flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;
}
.post-list-item .pli-date{
  flex:none;width:60px;font-family:var(--f-head);font-weight:600;font-size:.76rem;
  color:var(--ink-3);line-height:1.3;
}
.post-list-item .pli-body{flex:1;min-width:0}
.post-list-item .pli-body h3{
  font-family:var(--f-head);font-size:1.08rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:.3rem;
}
.post-list-item:hover .pli-body h3{color:var(--honey-soft)}
.post-list-item .pli-body p{
  color:var(--ink-3);font-size:.88rem;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.post-list-item .pli-pill{
  /* colour is set inline per post, same pattern as the Knowledge Library tags below */
  flex:none;font-family:var(--f-head);font-weight:600;font-size:.65rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.3rem .6rem;border-radius:6px;
}
.post-list-item .pli-cta{
  flex:none;display:flex;align-items:center;gap:.35rem;
  font-family:var(--f-head);font-weight:600;font-size:.82rem;color:var(--ink-3);
  transition:color .2s ease,gap .2s ease;
}
.post-list-item:hover .pli-cta{color:var(--honey);gap:.55rem}
@media(max-width:640px){
  .post-list-item{flex-direction:column;align-items:flex-start;gap:.6rem}
  .post-list-item .pli-icon{display:none}
  .post-list-item .pli-date{width:auto;align-self:flex-start}
  .post-list-item .pli-pill,.post-list-item .pli-cta{align-self:flex-start}
  .post-list-item .pli-body p{white-space:normal}
}

/* ---------------------------------------------------------------- the weekly-note signup box
   Sits at the foot of every article and on the blog list. Deliberately the same card as the
   sample gate (.gate-card in sample.css) so the two read as one family - panel, hairline
   border, 18px radius, Sora heading. The form rules are copied from sample.css rather than
   shared, because blog pages do not load that stylesheet; keep the two in step by hand.
   Added 25 Oct 2026. */
.hb-note{margin:52px 0 8px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:18px;padding:30px 28px;text-align:center}

.hb-note .hb-note-eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--honey);font-weight:700;display:block;margin-bottom:10px}

.hb-note h3{font-family:var(--f-head,'Sora',sans-serif);font-size:1.3rem;color:#fff;
  margin:0 0 12px}

.hb-note > p{color:var(--ink-2);font-size:.98rem;line-height:1.7;max-width:480px;
  margin:0 auto 18px}

.hb-note-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* A pill, to match the button beside it. It was a 12px rounded rectangle, copied from the
   sample-page gate where the field stands alone - next to a 999px pill button the mismatch is
   what makes the pair look unfinished. */
.hb-note-form input[type=email]{flex:1 1 280px;max-width:340px;padding:14px 22px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);
  font:inherit;font-size:1rem;transition:border-color .16s,box-shadow .16s}

.hb-note-form input[type=email]::placeholder{color:var(--ink-3)}

/* A honey ring rather than the browser's own outline, which sat outside the pill and squared
   its corners off again. */
.hb-note-form input[type=email]:focus{outline:none;border-color:var(--honey);
  box-shadow:0 0 0 3px rgba(224,168,46,.25)}

/* Chrome paints an autofilled field white and ignores background entirely, so a reader whose
   browser knows their address saw a white box against the dark card. The inset shadow is the
   only way to override it. */
.hb-note-form input[type=email]:-webkit-autofill,
.hb-note-form input[type=email]:-webkit-autofill:hover,
.hb-note-form input[type=email]:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--bg-2) inset;
  caret-color:var(--ink)}

/* The confirmation line that replaces the form once an address has been given. Honey wash so
   it reads as a next step and not as an error. */
.hb-note-done{max-width:520px;margin:20px auto 0;padding:14px 18px;
  background:rgba(224,168,46,.14);border:1px solid rgba(224,168,46,.45);border-radius:12px;
  color:var(--ink);font-size:.95rem;line-height:1.65}

.hb-note-done b{color:var(--honey)}

.hb-note-fine{font-size:.84rem;color:var(--ink-3);margin:16px 0 0}

@media (max-width:620px){
  .hb-note{padding:24px 18px}
  .hb-note-form input[type=email]{flex:1 1 100%;max-width:none}
  .hb-note-form button{width:100%}
}

/* ---------------------------------------------------------------- read next
   Internal links between articles. Added 26 Oct 2026: eight articles had sat on the site with
   almost no links between them, which wastes the one SEO lever entirely in his control and
   leaves a reader who has just finished one article with nowhere to go.
   Each block offers the newest other article in the same pillar first, then the newest from
   other pillars, so the suggestions are never all from one book. */
.read-next{margin:44px 0 8px}

.read-next h3{font-family:var(--f-head,'Sora',sans-serif);font-size:1.05rem;color:var(--ink-2);
  margin:0 0 16px;letter-spacing:.02em}

.rn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.rn-card{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line-2);border-top:3px solid var(--rn-c,var(--honey));
  text-decoration:none;transition:transform .16s,border-color .16s}

.rn-card:hover{transform:translateY(-2px)}

.rn-pill{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:var(--rn-wash,rgba(224,168,46,.16));color:var(--rn-c,var(--honey))}

.rn-card h4{font-family:var(--f-head,'Sora',sans-serif);font-size:.98rem;line-height:1.35;
  color:var(--ink);margin:0;font-weight:600}

.rn-card:hover h4{color:#fff}

@media (max-width:860px){
  .rn-grid{grid-template-columns:1fr}
  .rn-card{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;
    border-top:1px solid var(--line-2);border-left:3px solid var(--rn-c,var(--honey))}
  .rn-pill{flex:none}
}