/* ==========================================================================
   SEO Buddy blog, 2026.

   Layered OVER the theme's compiled style.css rather than replacing it. The
   original is built from SCSS with Grunt, and running a Node build on a 2GB
   box with 395MB free to change some colours is a bad trade. Everything here
   overrides by targeting the markup the templates already emit.

   Tokens are copied from the live 2026 homepage, read out of the browser
   rather than out of the Twig, so the blog and the marketing site cannot
   drift apart on a value somebody retyped.
   ========================================================================== */

:root {
    --brand: #ff691f;
    --brand-soft: #fff2ea;
    --brand-ink: #b8410b;
    --blue: #4078dd;
    --blue-2: #2f5fc4;
    --blue-soft: #eef3fd;
    --ink: #0e1522;
    --ink-2: #26303f;
    --body: #4a5567;
    --muted: #6f7c8f;
    --faint: #98a3b3;
    --line: #e5e9f0;
    --line-2: #f1f4f9;
    --paper: #ffffff;
    --wash: #f7f9fc;
    --good: #0b8a4e;
    --r-sm: 10px;
    --r: 14px;
    --r-lg: 20px;
    --page: 1160px;

    /* Reading measure. The old template ran 932px at 20px, which is 95 to 100
       characters a line; 60 to 75 is where the eye stops losing its place. */
    /* Widened from 720px now the right column is gone. Not full width:
       past ~85 characters the eye loses its place on the return sweep,
       and 820px at 18px Inter is about 80. */
    --measure: 820px;
}

/* --------------------------------------------------------------- type ---- */

body,
body.blog,
body.single,
body.archive {
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--body);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--ink);
    letter-spacing: -0.018em;
}

a { color: var(--blue); }
a:hover { color: var(--blue-2); }

/* --------------------------------------------------------------- header -- */

/* The old header was a white bar with one link and a 4px orange rule under it.
   The rule is gone: it was doing the work a border should do, six times
   louder. */
#header.header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 500;
}

#header.header::after,
#header.header::before { display: none !important; }

#header .container-big {
    /* min(), not a bare value. The theme makes .container-big responsive with
       `width:1344px; max-width:100%`, so a plain `max-width:1160px` REPLACES
       the 100% and pins a phone at 1160px. This bit me exactly that way. */
    max-width: min(100%, var(--page));
    margin: 0 auto;
    padding: 0 24px;
    min-height: 66px;
    gap: 22px;
}

#header .logo img,
#header .custom-logo { height: 30px; width: auto; }

/* The navigation the old header did not have. */
.sb-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.sb-nav a {
    display: inline-block;
    padding: 8px 12px;
    font-size: 14.2px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.sb-nav a:hover { background: var(--wash); color: var(--ink); text-decoration: none; }
.sb-nav a.on { color: var(--brand-ink); background: var(--brand-soft); }

.sb-cta { display: flex; align-items: center; gap: 9px; margin-left: 14px; }

.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 17px;
    border-radius: 9px;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.sb-btn.ghost { color: var(--ink-2); border-color: var(--line); background: var(--paper); }
.sb-btn.ghost:hover { background: var(--wash); color: var(--ink); text-decoration: none; }

.sb-btn.solid { background: var(--brand); color: #fff; }
.sb-btn.solid:hover { background: #f05a10; color: #fff; text-decoration: none; }
.sb-btn.solid:active { transform: translateY(1px); }

/* Burger. The theme ships one and styles it as three bars via ::before and
   ::after on a single div, so those are kept and only recoloured. */
.burger-btn { display: none; }

@media (max-width: 1020px) {
    .sb-nav, .sb-cta { display: none; }
    .burger-btn { display: block; }

    .sb-sheet {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(86vw, 340px);
        background: var(--paper);
        border-left: 1px solid var(--line);
        padding: 78px 22px 30px;
        transform: translateX(100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        z-index: 900;
        overflow-y: auto;
    }

    .sb-sheet.open { transform: none; }

    .sb-sheet a {
        display: block;
        padding: 13px 4px;
        font-size: 16px;
        font-weight: 500;
        color: var(--ink);
        border-bottom: 1px solid var(--line-2);
        text-decoration: none;
    }

    .sb-sheet .sb-btn { display: flex; margin-top: 16px; border-bottom: 0; font-size: 15px; padding: 12px; }
    .sb-sheet .sb-btn.solid { color: #fff; }

    .sb-scrim {
        position: fixed;
        inset: 0;
        background: rgba(14, 21, 34, .42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .26s ease;
        z-index: 890;
    }

    .sb-scrim.open { opacity: 1; pointer-events: auto; }

    .sb-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 34px;
        height: 34px;
        border: 0;
        background: var(--wash);
        border-radius: 9px;
        cursor: pointer;
        font-size: 19px;
        line-height: 1;
        color: var(--ink-2);
    }
}

/* ------------------------------------------------------------ index grid - */

.category-content { background: var(--wash); padding-bottom: 56px; }

.categories-select-wrap { padding: 46px 0 30px; }

.categories-select-wrap .select-text {
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.categories-select-wrap .active-category { color: var(--brand); font-weight: 700; }

.category-drop {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 14px 38px rgba(14, 21, 34, .11);
    padding: 7px;
}

.category-drop li a {
    display: block;
    padding: 9px 13px;
    border-radius: var(--r-sm);
    font-size: 14.6px;
    color: var(--ink-2);
    text-decoration: none;
}

.category-drop li a:hover { background: var(--wash); color: var(--ink); }

/* The cards.

   Class names taken from the rendered page, not guessed: the markup is
   .post-wrap > .post-block > .post-image-wrap + .post-descr-wrap, and my first
   attempt styled .post-item and article, neither of which exists here. That is
   why the first screenshot came back with the old flat cards. */
.posts-wrap-row .post-block {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 21, 34, .04);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    height: 100%;
}

.posts-wrap-row .post-block:hover {
    box-shadow: 0 12px 30px rgba(14, 21, 34, .10);
    transform: translateY(-2px);
    border-color: #d8dfea;
}

.posts-wrap-row .post-image-wrap {
    border-radius: 0 !important;
    background: var(--line-2) !important;
    display: block;
}

.posts-wrap-row .post-descr-wrap { background: var(--paper); padding: 18px 20px 20px; }

.posts-wrap-row .post-category a,
.posts-wrap-row .post-category span,
.posts-wrap-row .post-category {
    font-size: 11.4px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: none;
}

.posts-wrap-row .post-category a {
    display: inline-block;
    background: var(--brand-soft) !important;
    color: var(--brand-ink) !important;
    border-radius: 20px;
    padding: 3px 11px;
    text-decoration: none;
}

.posts-wrap-row .post-category a:hover { background: #ffe4d3 !important; }

.posts-wrap-row .post-title {
    display: block;
    font-size: 18px;
    line-height: 1.38;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.014em;
    margin-top: 10px;
}

.posts-wrap-row .post-title:hover { color: var(--blue-2); }

.posts-wrap-row .meta-left { color: var(--muted); font-size: 12.8px; margin-top: 14px; }
.posts-wrap-row .meta-left img { border-radius: 50%; }

/* ---------------------------------------------------------- the article -- */

.single-content { background: var(--paper); }

.single-content .container-big {
    max-width: min(100%, var(--page));
    margin: 0 auto;
}

/* The measure. This is the single biggest readability change on the page. */
.single-content .post-text-wrap .entry-content,
.single-content .post-text-wrap .post-content,
.single-content .post-left-block .text-block,
.single-content .post-left-block > .content-post {
    max-width: min(100%, var(--measure));
}

.single-content .post-left-block h1 {
    font-size: 42px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.028em;
    margin: 6px 0 18px;
    max-width: 22ch;
    max-width: min(100%, 880px);
}

.single-content .post-left-block p {
    font-size: 18px;
    line-height: 1.72;
    color: var(--body);
    max-width: min(100%, var(--measure));
}

.single-content .post-left-block h2 {
    font-size: 27px;
    line-height: 1.26;
    font-weight: 700;
    margin: 44px 0 14px;
    letter-spacing: -0.021em;
}

.single-content .post-left-block h3 {
    font-size: 20.5px;
    line-height: 1.34;
    font-weight: 700;
    margin: 32px 0 10px;
}

.single-content .post-left-block li {
    font-size: 18px;
    line-height: 1.7;
    color: var(--body);
    margin-bottom: 7px;
}

.single-content .post-left-block ul,
.single-content .post-left-block ol { max-width: min(100%, var(--measure)); }

.single-content .post-left-block a { color: var(--blue); text-decoration: none; }
.single-content .post-left-block a:hover { color: var(--blue-2); text-decoration: underline; }

.single-content .post-left-block img { border-radius: var(--r); }

.single-content blockquote {
    border-left: 3px solid var(--brand);
    background: var(--brand-soft);
    border-radius: 0 var(--r) var(--r) 0;
    padding: 16px 22px;
    margin: 28px 0;
    max-width: min(100%, var(--measure));
}

.single-content blockquote p { margin: 0; font-size: 17.5px; color: var(--ink-2); }

/* The share rail: from three saturated brand-coloured blocks to something
   that does not compete with the headline for attention. */
.share-blog-inner .share-btn a {
    background: var(--wash) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: background .15s ease, border-color .15s ease;
}

.share-blog-inner .share-btn a:hover { background: var(--line-2) !important; border-color: #d8dfea; }
.share-blog-inner .share-btn svg { fill: var(--muted); }
.share-blog-inner .share-btn a:hover svg { fill: var(--ink-2); }
.share-blog-inner .share-li .count { color: var(--ink); font-weight: 700; }

/* The category sidebar. */
.post-right-block .widget-title,
.post-right-block h3,
#sidebar h3 {
    font-size: 12.4px;
    text-transform: uppercase;
    letter-spacing: .55px;
    color: var(--faint);
    font-weight: 700;
}

.post-right-block ul li a,
#sidebar ul li a {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 14.2px;
    font-weight: 500;
    transition: background .15s ease, border-color .15s ease;
}

.post-right-block ul li a:hover,
#sidebar ul li a:hover { background: var(--wash); border-color: #d8dfea; color: var(--ink); }

/* ------------------------------------------------- the things that convert */

/* In-article product block. One per post, after the intro, because a reader
   who has got that far is interested and a reader who has not is not. */
.sb-inline-cta {
    max-width: min(100%, var(--measure));
    background: linear-gradient(180deg, #fff8f4 0%, var(--brand-soft) 100%);
    border: 1px solid #ffd9c4;
    border-radius: var(--r);
    padding: 22px 24px;
    margin: 34px 0;
}

.sb-inline-cta .k {
    font-size: 11.2px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--brand-ink);
    margin-bottom: 7px;
}

.sb-inline-cta h4 {
    font-size: 19.5px;
    line-height: 1.32;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

.sb-inline-cta p {
    font-size: 15.2px !important;
    line-height: 1.62;
    color: var(--ink-2);
    margin: 0 0 15px;
}

.sb-inline-cta .sb-btn.solid { font-size: 14.5px; }

/* Email capture. */
.sb-signup {
    max-width: min(100%, var(--measure));
    background: var(--ink);
    border-radius: var(--r-lg);
    padding: 30px 32px;
    margin: 46px 0 10px;
}

.sb-signup h4 {
    color: #fff;
    font-size: 22px;
    line-height: 1.28;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.sb-signup p {
    color: #b9c2d0 !important;
    font-size: 15px !important;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 52ch;
}

.sb-signup form { display: flex; gap: 9px; flex-wrap: wrap; }

.sb-signup input[type=email] {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #2b3648;
    background: #182234;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
}

.sb-signup input[type=email]::placeholder { color: #75839a; }
.sb-signup input[type=email]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.sb-signup button { border: 0; cursor: pointer; font-family: inherit; padding: 12px 22px; }
.sb-signup .fine { font-size: 12.4px; color: #75839a; margin: 12px 0 0; }

/* Related posts. */
.sb-related { max-width: min(100%, var(--measure)); margin: 48px 0 8px; }

.sb-related > .h {
    font-size: 12.4px;
    text-transform: uppercase;
    letter-spacing: .55px;
    color: var(--faint);
    font-weight: 700;
    margin-bottom: 14px;
}

.sb-related .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.sb-related .r {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-decoration: none;
    background: var(--paper);
    transition: background .15s ease, border-color .15s ease;
}

.sb-related .r:hover { background: var(--wash); border-color: #d8dfea; text-decoration: none; }
.sb-related .r img { width: 74px; height: 56px; object-fit: cover; border-radius: var(--r-sm); flex: 0 0 74px; }

.sb-related .r .t {
    font-size: 14.4px;
    line-height: 1.42;
    font-weight: 600;
    color: var(--ink);
}

.sb-related .r .c { font-size: 11.6px; color: var(--faint); margin-top: 5px; }

@media (max-width: 700px) {
    .sb-related .grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- footer --- */

#footer, .footer { background: var(--ink); color: #9aa5b6; border-top: 0; }
#footer a, .footer a { color: #c3ccd9; text-decoration: none; }
#footer a:hover, .footer a:hover { color: #fff; }
#footer .copyright, .footer .copyright { color: #75839a; font-size: 13px; }

.sb-foot { max-width: min(100%, var(--page)); margin: 0 auto; padding: 46px 24px 34px; }
.sb-foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }

.sb-foot h5 {
    font-size: 11.4px;
    text-transform: uppercase;
    letter-spacing: .55px;
    color: #75839a;
    font-weight: 800;
    margin: 0 0 13px;
}

.sb-foot ul { list-style: none; margin: 0; padding: 0; }
.sb-foot li { margin-bottom: 9px; }
.sb-foot li a { font-size: 14.2px; }
.sb-foot .blurb { font-size: 13.6px; line-height: 1.66; color: #8e99ab; max-width: 34ch; margin: 12px 0 0; }

.sb-foot .base {
    border-top: 1px solid #1e2735;
    margin-top: 34px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #75839a;
}

@media (max-width: 860px) {
    .sb-foot .cols { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 520px) {
    .sb-foot .cols { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- phone --- */

@media (max-width: 780px) {
    .single-content .post-left-block h1 { font-size: 30px; line-height: 1.2; }
    .single-content .post-left-block h2 { font-size: 23px; margin: 34px 0 12px; }
    .single-content .post-left-block h3 { font-size: 19px; }
    .single-content .post-left-block p,
    .single-content .post-left-block li { font-size: 17px; line-height: 1.68; }
    .categories-select-wrap .select-text { font-size: 23px; }
    .categories-select-wrap { padding: 30px 0 22px; }
    .sb-signup { padding: 24px 20px; border-radius: var(--r); }
    .sb-signup h4 { font-size: 19px; }
    .sb-inline-cta { padding: 19px 18px; }
}

/* Grid and flex children default to min-width:auto and will not shrink below
   their content, which is where phone-width overflow comes from. */
.posts-wrap-row > *,
.sb-related .grid > *,
.sb-foot .cols > * { min-width: 0; }

/* ------------------------------------------------------------- tables ---- */

/* Posts contain comparison tables wider than a phone. Rather than squeezing
   the columns until the text is unreadable, the table scrolls inside its own
   box and the page does not. Applies to all 263 posts at once, which is the
   only way to fix content nobody is going to re-edit by hand. */
.single-content .post-left-block table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: 15px;
}

.single-content .post-left-block table th,
.single-content .post-left-block table td {
    border: 1px solid var(--line);
    padding: 9px 12px;
    vertical-align: top;
}

.single-content .post-left-block table th {
    background: var(--wash);
    color: var(--ink);
    font-weight: 600;
    text-align: left;
}

/* Anything else a writer pasted that refuses to shrink. */
.single-content .post-left-block img,
.single-content .post-left-block iframe,
.single-content .post-left-block pre { max-width: 100%; }
.single-content .post-left-block pre { overflow-x: auto; }

/* =================== fixes found by looking at the rendered page ========== */

/* 1. The mobile sheet was rendering on DESKTOP as a plain static block under
      the header. Its fixed positioning lives inside the phone media query, so
      outside that query it was just a div full of links. Hidden by default and
      turned on only where it is meant to exist. */
.sb-sheet, .sb-scrim { display: none; }

@media (max-width: 1020px) {
    .sb-sheet, .sb-scrim { display: block; }
}

/* 2. The theme's own one-item menu ("DISCOVER SEOBUDDY") is still in the
      markup at x=1370 on a 1440 viewport, i.e. off the edge. The 2026 header
      carries real navigation now, so the old wrapper goes. `.menu-overlay` is
      its full-screen scrim and has no job without it. */
#header .header-nav-wrap,
#header .menu-overlay,
#header .header-text-wrapper { display: none !important; }

/* 3. The share icons inherited fill:#fff from the theme, so on the new pale
      button they were white on near-white. They also came through 12x21 - the
      SVGs carry height="512" attributes and no width, so the box was whatever
      the aspect ratio produced. Both fixed here rather than in the markup,
      which 263 posts share. */
.share-blog-inner .share-btn a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
}

.share-blog-inner .share-btn svg,
.share-blog-inner .share-btn a svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--muted) !important;
}

.share-blog-inner .share-btn a:hover svg { fill: var(--ink) !important; }

/* 4. The orange rule under the header is not a border - it is the top edge of
      `main-bg-min.png`, tiled by .main-content-wrap. The 2026 site has no such
      band, and a repeating background image is a request the design no longer
      needs. */
.main-content-wrap { background-image: none !important; background-color: var(--paper); }
.category-content .main-content-wrap { background-color: var(--wash); }

/* 5. The orange rule is an 8px BORDER-TOP on main.main-content-wrap, not a
      background - which is why sweeping for orange backgrounds found nothing
      and removing the background image fixed nothing. */
.main-content-wrap {
    border-top: 0 !important;
    /* The old header was position:fixed, so the page reserved ~57px of empty
       space beneath it. The new one is sticky and takes its own room, leaving
       that reservation as a white gap. */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.breadcrumbs-wrap { padding-top: 18px; }

.breadcrumbs, .breadcrumbs a { font-size: 13px; color: var(--muted); }
.breadcrumbs a:hover { color: var(--blue-2); }

/* 6. The share rail sat 7px from the headline. Give the column room so the
      icons read as a rail beside the article rather than as part of it. */
/* Measured, not guessed: .share-blog-inner is position:fixed and occupies
   left 156 to 206, so the article column needs to clear 206 plus a gap. At
   34px the text started at 190 and the icons sat on top of the headline. */
@media (min-width: 1100px) {
    .single-content .post-left-block { padding-left: 74px; }
}

/* .post-title is an <a>, not a heading, so the h1..h6 family rule never
   reached it and the cards kept the theme's serif. */
.posts-wrap-row .post-title,
.posts-wrap-row .post-category a,
.categories-select-wrap .select-text,
.category-drop li a,
.post-right-block ul li a,
#sidebar ul li a {
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 7. The burger stayed display:none on a phone - the theme hides it with a
      more specific selector than my bare `.burger-btn`, so specificity, not
      the media query, was the problem. */
@media (max-width: 1020px) {
    #header .burger-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-left: auto;
        cursor: pointer;
        border-radius: var(--r-sm);
        background: transparent;
    }

    #header .burger-btn:hover { background: var(--wash); }
    #header .burger-btn > div { width: 20px; height: 2px; background: var(--ink); position: relative; }
    #header .burger-btn > div::before,
    #header .burger-btn > div::after {
        content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
    }
    #header .burger-btn > div::before { top: -6px; }
    #header .burger-btn > div::after { top: 6px; }
}

/* 8. The coloured slivers beside the share icons were the brand-coloured <li>
      showing around the smaller <a>. */
.share-blog-inner .share-btn { background: transparent !important; }

/* 9. On a phone the header wrapped to two lines: the theme's flex container
      allows wrapping and the logo plus burger were being pushed apart by
      justify-content:space-between with a hidden third child still counted. */
@media (max-width: 1020px) {
    #header .container-big {
        flex-wrap: nowrap !important;
        min-height: 58px;
        padding: 0 16px;
    }

    #header .logo { flex: 0 1 auto; }
    #header .logo img, #header .custom-logo { height: 26px; }
}

/* 10. The card title rendered in a SERIF.
       `.post-title` is the ANCHOR; the real title is the <h2 class="h4
       post-min-title"> inside it. The theme's `h4, .h4` rule sets
       `font-family: 'Nunito'` on that h2, and an element's own declaration
       always beats an inherited one - so styling the anchor did nothing.
       Nunito is not loaded any more (Inter is the only font call), and the
       declaration has no fallback tail, so it fell through to the browser's
       default serif.
       Everything else about this title already matches the 2026 card heading -
       17px / 22.95px / 700 / -0.204px - so only the family is set here. */
.posts-wrap-row .post-title,
.posts-wrap-row a.post-title,
.posts-wrap-row .post-descr-wrap a.post-title,
.post-block .post-min-title,
h2.post-min-title,
.post-min-title {
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
}

/* 11. The phone header was 102px because the theme positions .burger-btn
       itself rather than letting it flow, so align-items:center never applied
       to it and it sat below the logo. Positioned explicitly instead of
       fighting the theme's own rules. */
@media (max-width: 1020px) {
    #header .container-big {
        position: relative;
        height: 58px;
        min-height: 58px;
        justify-content: flex-start;
    }

    #header .logo { align-self: center; }

    #header .burger-btn {
        position: absolute !important;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
    }
}


/* =========== the header and footer now come from the marketing site ======= */

/* Everything above that styled #header, .sb-nav, .sb-cta, .sb-sheet and the
   burger is dead: header.php renders /site-chrome instead, which brings the
   site's own markup AND its own CSS. Neutralised rather than deleted so the
   history of what this file used to do stays readable, but nothing here should
   be relied on. */

/* The site chrome uses generic class names - .in, .nav, .wrap, .logo, .cols -
   and so does the blog theme. These re-assert the site's own layout inside the
   header and footer only, so a blog rule cannot reach in. That collision has
   bitten before: `.hdr .in{display:flex}` once also matched a mobile sheet's
   inner `.in`. */
.hdr, .ftr { box-sizing: border-box; }
.hdr *, .ftr *, .hdr *::before, .ftr *::after { box-sizing: border-box; }
.hdr img, .ftr img { max-width: none; }
.hdr ul, .ftr ul { list-style: none; margin: 0; padding: 0; }
.hdr a, .ftr a { text-decoration: none; }

/* The blog's own sticky header is gone, so nothing should be reserving room. */
.main-content-wrap { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

/* ================== the article, now that it has the width ================ */

/* With the right column removed the theme still floats .post-left-block into
   two thirds of the row. Centre it instead. */
.single-content .post-left-block,
.single-content .post-text-wrap {
    float: none !important;
    width: 100% !important;
    max-width: min(100%, 900px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.single-content .post-left-block h1 { max-width: min(100%, 900px); }

/* The X mark, replacing the 2019 Twitter bird in the author box. */
.aw-head-right .x-mark { display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px; background: #0e1522; }
.aw-head-right .x-mark svg { width: 11px; height: 11px; fill: #fff; }

/* The theme lays the page out as a TABLE - .page-holder is display:table, which
   is an old sticky-footer trick. The site footer, dropped in as another child,
   became a second table CELL and rendered as a dark panel beside the article
   rather than beneath it. Normal block flow is all this page needs. */
/* display:block ALONE was not enough, and was actively harmful. The theme sets
   `height:100%; overflow:hidden` on .page-holder, which is harmless on a table
   (there, 100% is a minimum) and fatal on a block (there, it is a hard height).
   The result was a document exactly one viewport tall with everything below the
   fold clipped, and no scrollbar on any blog page. */
.page-holder {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
}

#wrapper {
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* The sticky-footer pair. Height must be free to grow; min-height keeps a short
   page filling the window. */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
}
.ftr { width: 100% !important; display: block; }

/* The article column: the theme still sizes it from the old two-column row. */
.single-content .container-big > .clearfix,
.single-content .post-left-block,
.single-content .post-text-wrap {
    width: 100% !important;
    max-width: min(100%, 900px) !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* The blog theme styles  with an old inline-block whitespace hack:
    above 768px. The site footer has its own
   , so the legal line collapsed to zero height - 54px on the
   homepage, 10px here. Same class name, different components, exactly the
   collision that has bitten this project before.

   Rather than patch one symptom, the site chrome opts out of the blog theme
   entirely for the generic names both of them use. */
.hdr .row, .ftr .row {
    /* Only the horizontal gutter. `margin: 0` here also wiped the site's own
       vertical margin on .legal .row and made the footer 10px shorter than the
       homepage's. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: inherit !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

.hdr .in, .ftr .wrap, .hdr .wrap { letter-spacing: normal; word-spacing: normal; }
.hdr .btn, .ftr .btn { letter-spacing: normal; }


/* ============================ 2026-08-13 round two ======================= */

/* 1. The orange halo under "Create free account". The site CTA is class
      "btn sm" and the BLOG theme styles .btn with an orange glow. The homepage
      renders the same element with box-shadow:none, so this is a leak, not a
      design. */
.hdr .btn, .ftr .btn,
.hdr a.btn, .ftr a.btn,
.hdr .btn:hover, .ftr .btn:hover {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* 5. Align the article to the header's VISIBLE content rather than to its
      container. The two boxes are already concentric on x=720, but the header's
      content stops at the CTA near x=1115 while its container runs to x=1300,
      so the article read as pushed right. Matching the logo's left edge gives
      the page one left margin all the way down. */
.single-content .container-big {
    padding-left: 24px;
    padding-right: 24px;
}

.single-content .post-left-block,
.single-content .post-text-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: min(100%, 900px) !important;
}

/* 2. The breadcrumb, on the same left edge as the article. */
.breadcrumbs-wrap {
    max-width: min(100%, 1160px);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
}

.breadcrumbs { max-width: min(100%, 900px); margin: 0 !important; }

/* 3. Tables scroll inside their own box. The scroller has to be the WRAPPER:
      a display:block table shrinks to its container and there is nothing to
      scroll. */
.sb-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 22px 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.sb-table-scroll table {
    display: table !important;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: 0;
    font-size: 15px;
}

.sb-table-scroll th, .sb-table-scroll td {
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
    padding: 10px 14px;
    vertical-align: top;
}

.sb-table-scroll tr > *:last-child { border-right: 0; }
.sb-table-scroll tr:last-child > * { border-bottom: 0; }
.sb-table-scroll th { background: var(--wash); color: var(--ink); font-weight: 600; text-align: left; }

/* A visible scrollbar, so it is obvious the table CAN move. */
.sb-table-scroll::-webkit-scrollbar { height: 10px; }
.sb-table-scroll::-webkit-scrollbar-track { background: var(--wash); border-radius: 0 0 var(--r) var(--r); }
.sb-table-scroll::-webkit-scrollbar-thumb { background: #c3ccd9; border-radius: 20px; }
.sb-table-scroll::-webkit-scrollbar-thumb:hover { background: #98a3b3; }
.sb-table-scroll { scrollbar-width: thin; scrollbar-color: #c3ccd9 var(--wash); }

/* 4. The author's picture: smaller, and round. */
.single-content .meta-left img,
.single-content .meta-info-wrap img,
.single-content .post-left-block .avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex: 0 0 46px;
}


/* ======================= 2026-08-13, round three ========================= */

/* 1. The gap between the breadcrumb and "I want to learn about" was 62px of
      padding on top of the breadcrumb's own spacing. */
.categories-select-wrap { padding: 22px 0 26px !important; }

@media (max-width: 780px) {
    .categories-select-wrap { padding: 16px 0 20px !important; }
}

/* 2. The in-article CTA measured 1.47:1 - blue text on brand orange. Recolouring
      the text was not enough: white on #ff691f is 2.84:1, still under the 3.0
      floor for large text. So the button becomes the site's own primary blue
      with white text, the same button the reader already met in the header. */
.sb-inline-cta .sb-btn.solid,
.sb-inline-cta a.sb-btn {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.sb-inline-cta .sb-btn.solid:hover,
.sb-inline-cta a.sb-btn:hover {
    background: var(--blue-2) !important;
    border-color: var(--blue-2) !important;
    color: #fff !important;
}

/* 3. The author box. Everything in it was PT Sans at 2019 sizes with a washed
      #818ca1 bio; it now uses Inter and the 2026 palette like the rest of the
      article. */
.author-widget-wrap {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: min(100%, 900px);
    margin: 44px auto 8px;
    padding: 24px 26px;
    background: var(--wash);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.author-widget-wrap .aw-left-col { flex: 0 0 auto; }

.author-widget-wrap .author-avatar img,
.author-widget-wrap .avatar {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
}

.author-widget-wrap .aw-right-col { flex: 1 1 auto; min-width: 0; }

.author-widget-wrap .aw-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.author-widget-wrap .about-the-author {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--faint) !important;
    margin-bottom: 5px;
}

.author-widget-wrap .aw-author {
    font-family: inherit !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    letter-spacing: -0.015em;
}

.author-widget-wrap .aw-team,
.author-widget-wrap .aw-team a {
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: var(--brand-ink) !important;
    margin-top: 3px;
}

.author-widget-wrap .aw-team a { text-decoration: underline; }

.author-widget-wrap .job-position {
    font-family: inherit !important;
    font-size: 13.6px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    margin-top: 2px;
}

.author-widget-wrap .aw-author-bio {
    font-family: inherit !important;
    font-size: 14.6px !important;
    line-height: 1.68 !important;
    color: var(--body) !important;
    margin-top: 12px;
    max-width: 68ch;
}

.author-widget-wrap .aw-head-right { text-align: right; flex: 0 0 auto; }

.author-widget-wrap .aw-head-right > div:first-child {
    font-family: inherit !important;
    font-size: 10.6px !important;
    font-weight: 700 !important;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--faint) !important;
    margin-bottom: 8px;
}

/* 4. The icons. The X was inline-flex on a baseline next to inline images, so
      it sat 6px low and 2px small. One box type, one alignment, and a flex row
      so they cannot drift apart again. */
.author-widget-wrap .aw-head-right ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.author-widget-wrap .aw-head-right li { margin: 0; padding: 0; display: flex; }

.author-widget-wrap .aw-head-right li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--paper);
    border: 1px solid var(--line);
    transition: background .15s ease, border-color .15s ease;
}

.author-widget-wrap .aw-head-right li a:hover { background: var(--line-2); border-color: #d8dfea; }

.author-widget-wrap .aw-ico {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

.author-widget-wrap .aw-ico img,
.author-widget-wrap .aw-ico svg {
    width: 17px !important;
    height: 17px !important;
    display: block;
    object-fit: contain;
    vertical-align: middle;
}

.author-widget-wrap .x-mark { background: none !important; border-radius: 0 !important; }
.author-widget-wrap .x-mark svg { fill: var(--ink); }

@media (max-width: 620px) {
    .author-widget-wrap { flex-direction: column; padding: 20px; }
    .author-widget-wrap .aw-head { flex-direction: column; }
    .author-widget-wrap .aw-head-right { text-align: left; }
    .author-widget-wrap .aw-head-right ul { justify-content: flex-start; }
}


/* ---- author box: avatar beside the name, bio at full width -------------- */

/* Was a two-column flex, so the bio was indented by the avatar's width all the
   way down. Now the wrapper is a plain block and only the HEAD is a row, so the
   bio starts at the container's left edge and gains that width back. */
.author-widget-wrap {
    display: block !important;
}

/* The avatar is lifted out of its column and floated beside the name, taking
   the height of the name plus the job position - the two lines Richard named. */
/* Superseded by round six; the grid places the picture now. */

.author-widget-wrap .aw-right-col { display: block; }

/* Superseded by the round-five block at the end of this file, which carries the
   specificity needed to beat the byline rule. */

/* The head still splits name from the follow icons. */
.author-widget-wrap .aw-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    min-height: 54px;
}

/* The bio clears the floated avatar, so it runs the full width of the box
   rather than starting after it. */
.author-widget-wrap .aw-author-bio {
    clear: both;
    /* Zero, not 14px. The head above already reserves the gap (see the
       round-seven rule at the end of this file); two margins both trying to own
       the same space is what made it 36px - a line and a half. */
    margin-top: 0;
    max-width: none;
    padding-top: 2px;
}

@media (max-width: 620px) {
    .author-widget-wrap .aw-left-col { margin-bottom: 10px; }
    .author-widget-wrap .aw-head { min-height: 0; }
}


/* ======================= 2026-08-13, round five ========================== */
/* "Put the picture next to Author Name (on its left)."
   It was not next to it: the theme gives the column a hard 104px for a 46px
   picture, leaving 58px of nothing between them. */

/* Superseded by round six: the picture moved inside .aw-head-left. */
.author-widget-wrap .author-avatar > img { margin-right: 0; }

/* The theme offsets the bio by -104px to cancel the old 104px column. With the
   column collapsed there is nothing to cancel, and the bio hung off the left of
   the box on mobile. `clear: both` already puts it at the left edge. */
.author-widget-wrap .aw-author-bio { margin-left: 0; }

/* Sized against the two lines it now sits beside - name, then job position.
   Needs .single-content to outrank `.single-content .post-left-block .avatar`,
   which sets the byline avatar to 46px and would otherwise win on specificity. */
/* Sized in the round-six block below, against the two lines it spans. */


/* ======================== 2026-08-13, round six ========================== */
/* The picture under the label, sharing its left edge, spanning the two lines.
   A grid rather than a float: the label spans both columns, so column one's
   left edge IS the label's left edge - the alignment is structural and cannot
   drift as type or spacing changes. */

.author-widget-wrap .aw-head-left {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-content: start;
}

.author-widget-wrap .about-the-author { grid-column: 1 / -1; }

.author-widget-wrap .aw-left-col {
    grid-column: 1;
    grid-row: span 2;      /* the name row and the job-position row */
    align-self: center;
    float: none;
    width: 64px;
    min-width: 0;
    margin: 0;
}

.author-widget-wrap .aw-author,
.author-widget-wrap .job-position { grid-column: 2; }

/* 64px is the measured height of those two lines: 32 + 2 + 31. Fixed, not
   stretched - a stretched item sized by aspect-ratio makes the column width
   circular, and any drift in row height would draw the circle as an ellipse. */
.single-content .author-widget-wrap .author-avatar img,
.single-content .author-widget-wrap .avatar {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* Narrow screens: the name wraps, so the two rows grow past the picture.
   Pinning it to the top of the name keeps it reading as the name's picture
   rather than floating against the middle of a three-line block. */
@media (max-width: 620px) {
    .author-widget-wrap .aw-left-col { align-self: start; margin-top: 2px; }
}


/* ======================= 2026-08-13, round seven ======================== */
/* One line break less between the job position and the bio: the gap was 36px
   (22.4 from the head + 14 from the bio) against a 24.5px bio line. The bio's
   margin is now zero and the head owns the whole gap, at 12px. */
.author-widget-wrap .aw-head-left { margin-bottom: 12px; }