/* ===== kwm-depth: SEO depth sections =====
   Ported from the proven inline fix on /about/brandon-kelly (2026-07-29) and
   generalised for the F2 industry pages + the 5 core hub pages.

   Why a separate file: the markup is emitted by seo/_build/inject_static.py and
   inject_react.py, so it is styled by CSS alone (kicker via ::before, numerals
   via counters) and a payload regen can rewrite it without losing the design.
   It is NOT appended to masthead-interior.css on purpose: that sheet is linked
   from ~114 pages and already edge-cached, so a new filename is the only safe
   way to ship a change (see the apex cache-purge rule).

   Note .section / .section-narrow are defined in NO stylesheet on this site, so
   .kwm-depth carries its own column width and gutters rather than relying on
   them. Vars resolve on both page families; --serif carries a literal fallback
   because /about does not define it. */

.kwm-depth{max-width:908px;margin:22px auto 0;padding:44px 24px 0;counter-reset:depth;background:linear-gradient(var(--border),var(--border)) 24px 0/calc(100% - 48px) 1px no-repeat;}
.kwm-depth::before{content:'In depth';display:block;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--green);padding-left:20px;margin:0 0 16px;background:linear-gradient(var(--green),var(--green)) left center/9px 9px no-repeat;}
.kwm-depth > h2{font-family:var(--serif,'Plus Jakarta Sans',sans-serif);font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.12;margin:0 0 20px;max-width:32ch;text-wrap:balance;}
.kwm-depth p{font-size:16.5px;line-height:1.78;color:#3a4152;margin:0 0 18px;}
.kwm-depth > h2 + p,.kwm-depth > div:first-of-type > p:first-child{font-size:19px;line-height:1.66;color:#232c3e;}

/* each h3 becomes a numbered editorial entry — numeral is a CSS counter */
.kwm-depth h3{counter-increment:depth;display:flex;gap:14px;align-items:baseline;font-family:var(--serif,'Plus Jakarta Sans',sans-serif);font-size:22px;font-weight:800;letter-spacing:-.015em;color:var(--navy);line-height:1.22;margin:42px 0 15px;padding-top:27px;border-top:1px solid var(--border);}
.kwm-depth h3::before{content:counter(depth,decimal-leading-zero);flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--green);transform:translateY(-2px);}
.kwm-depth h3 + p{font-size:17px;color:#2c3446;}

/* payload html is <p>, <ul><li>, <strong>, <a> — lists were never styled on the
   about page because that payload happened not to use them; F2 payloads do */
.kwm-depth ul{margin:0 0 20px;padding:0;list-style:none;}
.kwm-depth li{position:relative;font-size:16.5px;line-height:1.72;color:#3a4152;margin:0 0 11px;padding-left:26px;}
.kwm-depth li::before{content:'';position:absolute;left:3px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--green);opacity:.55;}
.kwm-depth li:last-child{margin-bottom:0;}
.kwm-depth li strong,.kwm-depth p strong{font-weight:700;color:var(--navy);}

.kwm-depth a{color:var(--green-dark);font-weight:600;text-decoration:underline;text-decoration-color:rgba(187,52,16,.4);text-underline-offset:2px;transition:text-decoration-color .2s;}
.kwm-depth a:hover{text-decoration-color:var(--green);}

/* trailing link row emitted as a bare <p> of <a> separated by middots */
.kwm-depth > p:last-child{margin-top:30px;padding-top:22px;border-top:1px solid var(--border);font-size:15.5px;color:var(--muted);}

@media(max-width:820px){
  .kwm-depth{padding-top:34px;margin-top:8px;}
  .kwm-depth > h2 + p,.kwm-depth > div:first-of-type > p:first-child{font-size:17.5px;}
  .kwm-depth h3{font-size:20px;margin-top:34px;padding-top:23px;gap:11px;}
  .kwm-depth h3 + p{font-size:16.5px;}
  .kwm-depth li{font-size:16px;}
}