/* saasmarketingexperts.com on top of Source. Loaded after built/screen.css, no build step.
   We draw our own nav, hero, issue list, signup blocks and footer (see the .hbs files), so most of
   Source's look is gone. Rules for the look are in STYLE.md → Brand. In short:
   - Space Grotesk headings, Inter body. Black on white; green for the logo and one phrase per screen.
   - One left edge for everything, 4px corners (no pills). Whitespace separates sections; the only lines
     are between rows of a list and one above the footer.
   - No gray text and no eyebrows (small labels above titles). */

:root {
    --gh-font-heading: "Space Grotesk", Inter, sans-serif;
    --smes-ink: #0e0f12;
    --smes-green: #0e7c5a;
    --smes-soft-rule: #e6e6e6;
    --smes-radius: 4px;
    --container-width: 1080px;                         /* Source's .gh-inner and .gh-canvas use this */
    --color-darker-gray: var(--smes-ink);              /* Source's text colour */
    --color-secondary-text: var(--smes-ink);           /* no gray text */
}
/* Type scale. Space Grotesk: 5.4 (page title) / 3.2 (section) / 2.8 (h2) / 2.2 (h3, list rows). Inter: 1.8 body,
   1.5 secondary, 1.4 fine print. Vertical rhythm in article bodies: 24px between paragraphs, 48px above an h3,
   72px above an h2, 12px under any heading. Sections of a page sit 96-112px apart. */
h1, h2, h3 { text-wrap: balance; }
a:hover { opacity: 1; }   /* Source fades links on hover; ours underline instead */
.gh-outer { padding-inline: var(--container-gap); }   /* same gutter as .gh-canvas, so all left edges line up */
.gh-article { --container-width: 1080px; --content-width: 680px; word-break: normal; }  /* about 75 characters a line */

/* Article column on the left edge of the container instead of centred (wide cards still get the full width). */
.gh-canvas {
    grid-template-columns:
        [full-start] var(--full)
        [wide-start main-start] var(--main) [main-end]
        minmax(0, calc(var(--container-width) - var(--content-width, 680px))) [wide-end]
        var(--full) [full-end];
}

.smes-hl { color: var(--smes-green); }
.gh-button { border-radius: var(--smes-radius); }
.is-title, .gh-article-title { font-weight: 700; letter-spacing: -0.035em; }

/* Logo (partials/logo.hbs), in the nav and footer. */
.smes-logo {
    display: inline-flex; align-items: center; gap: 10px; color: inherit; white-space: nowrap;
    font: 700 2rem/1 var(--gh-font-heading); letter-spacing: -0.03em;
}
.smes-mark { flex: none; width: 30px; height: 30px; }

/* Nav (partials/components/navigation.hbs). */
.smes-nav { height: auto; font-size: 1.5rem; font-weight: 500; }
.smes-nav-inner { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.smes-nav .smes-logo { margin-right: auto; }
.smes-nav-links { display: flex; gap: 28px; }
.smes-nav-links a:hover, .smes-footer-links a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.gh-button:hover { opacity: 0.85; }
.smes-nav .gh-button { padding: 12px 18px; font-size: 1.5rem; }

/* Signup form (partials/email-subscription.hbs): a black-outlined box with the button flush on the right. */
.gh-form, .gh-form:hover {
    max-width: 520px; height: 56px; border-radius: var(--smes-radius);
    background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--smes-ink);
}
.gh-form-input { padding-inline: 18px; border-radius: var(--smes-radius); }
.gh-form-input::placeholder { color: rgb(0 0 0 / 0.5); }  /* the one lighter text: it has to read as a hint */
.smes-consent, .smes-signup .smes-consent { max-width: none; margin: 12px 0 0; font-size: 1.4rem; line-height: 1.4; }
.gh-form .gh-button { right: 0; height: 100%; min-width: 136px; border-radius: 0 var(--smes-radius) var(--smes-radius) 0; }
.smes-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }  /* the Worker's bot trap */
.gh-form.error + .smes-consent { margin-top: 40px; }  /* Source puts the error message right under the form */

/* Home hero (home.hbs). */
.smes-hero { padding-block: clamp(56px, 4rem + 5vw, 120px) clamp(64px, 4rem + 4vw, 112px); }
.smes-hero-title {
    margin: 0 0 44px; font-size: clamp(3.6rem, 1.6rem + 4.4vw, 6.4rem); font-weight: 700;
    line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance;
}
.smes-hero-lead { margin: 48px 0 0; font: 700 2.6rem/1.2 var(--gh-font-heading); letter-spacing: -0.03em; }
.smes-hero-sub { max-width: 560px; margin: 10px 0 0; font-size: 1.9rem; line-height: 1.5; }

/* Issue lists (partials/issue-list.hbs, issue-row.hbs; "More issues" in post.hbs). */
.smes-issues { margin-top: 24px; }
.gh-main ~ .smes-issues { margin-top: 96px; }   /* "More issues" and "More expert takes", under an article */
.smes-section-title {
    margin: 0 0 8px;
    font: 700 clamp(2.6rem, 2rem + 1vw, 3.2rem)/1.15 var(--gh-font-heading); letter-spacing: -0.03em;
}
.smes-issue {
    display: grid; grid-template-columns: 140px 1fr auto; grid-template-areas: "no title date";
    gap: 6px 24px; align-items: baseline; padding: 22px 0; color: inherit;
}
.smes-issue + .smes-issue { border-top: 1px solid var(--smes-soft-rule); }
.smes-issue-no { grid-area: no; font-size: 1.5rem; font-weight: 500; }
.smes-issue-title { grid-area: title; font: 700 2.2rem/1.25 var(--gh-font-heading); letter-spacing: -0.025em; text-wrap: balance; }
.smes-issue-date { grid-area: date; font-size: 1.5rem; white-space: nowrap; }
.smes-issue:hover .smes-issue-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Rows with a line under the title instead of a label and date (partials/entry-list.hbs, the 404 page). */
.smes-issue.smes-entry { grid-template-columns: 1fr; grid-template-areas: "title" "sub"; }
.smes-entry-sub { grid-area: sub; font-size: 1.6rem; line-height: 1.5; }
/* List pages (partials/list-header.hbs): the same title block as an article, then the rows. */
.smes-list-header { margin: clamp(48px, 3rem + 4vw, 96px) 0 0; }
.smes-list-header .gh-article-excerpt { max-width: 680px; }
.smes-list-header + .smes-issues { margin-top: 32px; }

/* Articles: issues (post.hbs), expert profiles (custom-expert.hbs), takes, the directory and plain pages (page.hbs). */
.gh-article-header { margin: clamp(48px, 3rem + 4vw, 96px) 0 48px; }
/* Titles may run wider than the text column, so a long one takes two lines, not three. */
.gh-article-header > .gh-article-title { grid-column: wide-start / wide-end; max-width: 900px; }
.gh-article-title { font-size: clamp(3.4rem, 2rem + 3vw, 5.4rem); line-height: 1.06; }
.gh-article-excerpt { margin-top: 16px; font-size: clamp(1.8rem, 1.7rem + 0.3vw, 2rem); line-height: 1.5; letter-spacing: -0.01em; }

.gh-content { font-size: 1.8rem; line-height: 1.6; }
.gh-content :is(p, li) { text-wrap: pretty; }
.gh-content > * + * { margin-top: 24px; }
.gh-content h2 { font-size: 2.8rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.gh-content h3 { font-size: 2.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.gh-content > h2:not(:first-child) { margin-top: 72px; }
.gh-content > h3:not(:first-child) { margin-top: 48px; }
.gh-content > h2 + h3:not(:first-child) { margin-top: 32px; }
.gh-content > [id] + :is(p, ul, ol) { margin-top: 12px; }
.gh-content :is(ul, ol) { padding-left: 24px; }
.gh-content :is(li + li, li :is(ul, ol)) { margin-top: 10px; }
.gh-content li::marker { font-weight: 600; }
/* Issue sections are split by <hr>: space, not a line. The h2 after it brings the 72px. */
.gh-content > hr { height: 0; margin: 0 !important; background: none; }
.gh-content > hr + * { margin-top: 72px !important; }

/* Source adds 6vw under the last block of a page. The footer brings its own space. */
.page-template .gh-content > *:last-child:not(.kg-width-full) { margin-bottom: 0; }

/* Links in running text: a thin underline that thickens on hover. Linked headings get a lighter line, so they still
   read as headings first; it turns black on hover. */
.gh-content a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.gh-content a:hover { text-decoration-thickness: 2px; }
.gh-content :is(h2, h3) a { text-decoration-thickness: 2px; text-underline-offset: 0.16em; text-decoration-color: rgb(14 15 18 / 0.22); }
.gh-content :is(h2, h3) a:hover { text-decoration-color: currentColor; }
/* "→ Read Kyle's post": a link on its own line inside a tactic (the lines are split by <br>). A little air around it. */
.gh-content p > br + a:has(> strong:only-child) { display: inline-block; margin-block: 6px; }

/* Issues: the week line (ghost.py masthead()) sits right under "Issue #1" and looks like it, then the first section. */
.gh-article-header:has(+ .gh-content > .smes-email-only) { margin-bottom: 4px; }
.gh-content > .smes-email-only + p {
    margin: 0 !important; font-weight: 400 !important;
    font-size: clamp(1.8rem, 1.7rem + 0.3vw, 2rem); line-height: 1.5;
}
.gh-content > .smes-email-only + p + h2 { margin-top: 56px; }

/* Signup blocks: the footer strip (footer.hbs) and the profile one (custom-expert.hbs). */
.smes-signup { margin-top: 112px; }
.smes-signup h2 { margin: 0; font: 700 clamp(2.6rem, 2rem + 1vw, 3.2rem)/1.15 var(--gh-font-heading); letter-spacing: -0.03em; }
.smes-signup p { max-width: 560px; margin: 12px 0 28px; font-size: 1.8rem; line-height: 1.5; text-wrap: pretty; }
/* The footer strip only shows where the page has no signup of its own (issues, directory). */
.home-template .smes-footer-signup, .tag-hash-expert .smes-footer-signup { display: none; }
/* ...nor on the pages from site/pages/: nobody wants a pitch on a privacy policy or a removal page. */
:is(.page-privacy, .page-terms, .page-contact, .page-removal) .smes-footer-signup { display: none; }

/* Footer (partials/components/footer.hbs). */
.gh-footer { margin-top: 0; font-size: 1.5rem; }
.smes-footer-bar { margin-top: 112px; padding-block: 28px 48px; border-top: 1px solid var(--smes-soft-rule); }
.smes-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.smes-footer-row > :first-child { margin-right: auto; }
.smes-footer-bar .smes-logo { font-size: 1.7rem; }
.smes-footer-bar .smes-mark { width: 24px; height: 24px; }
.smes-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 500; }
.smes-footer-fine { margin-top: 20px; font-size: 1.4rem; }
.smes-footer-fine p { margin: 0; }
.smes-footer-fine .smes-footer-links { gap: 8px 20px; font-weight: 400; }
/* Removal-request line under the directory and on profiles. */
.gh-content .smes-small { max-width: 620px; margin-top: 48px; font-size: 1.5rem; line-height: 1.55; }

/* Focus chips: on profiles and the directory filter. */
.smes-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.smes-chip {
    display: inline-block; padding: 2px 10px; border-radius: var(--smes-radius);
    border: 1px solid var(--smes-soft-rule); font-size: 1.3rem; line-height: 1.8;
    color: inherit; background: none; cursor: pointer; text-decoration: none;
}
a.smes-chip:hover, button.smes-chip:hover { border-color: currentColor; }
button.smes-chip.is-active { color: #fff; background: var(--smes-ink); border-color: transparent; }

/* Directory (/experts/), rendered from the HTML card that ghost.py experts writes. It uses the full width of the
   container: name and role on the left, focus chips in the middle, links on the right. One column on phones. */
.gh-content > .smes-directory { grid-column: wide-start / wide-end; }
.smes-directory .smes-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.smes-filters .smes-chip { padding: 4px 12px; font-size: 1.4rem; }
.gh-content .smes-experts { list-style: none; margin: 0; padding: 0; }
.gh-content .smes-experts li {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    grid-template-areas: "name chips links" "role chips links"; gap: 2px 32px; align-items: start;
    margin: 0; padding: 16px 0;
}
.gh-content .smes-experts li + li { border-top: 1px solid var(--smes-soft-rule); }
.smes-experts .smes-name { grid-area: name; justify-self: start; font-weight: 600; line-height: 1.4; }
.smes-experts .smes-role { grid-area: role; font-size: 1.5rem; line-height: 1.45; }
.smes-experts .smes-chips { grid-area: chips; margin-top: 2px; }
.smes-experts .smes-chip { font-size: 1.3rem; padding: 0 8px; cursor: default; }
.smes-experts .smes-links { grid-area: links; justify-self: end; margin-top: 2px; font-size: 1.5rem; line-height: 1.6; text-align: right; }
.gh-content .smes-experts li[hidden] { display: none; }

/* Expert takes: the pages (custom-take.hbs) and the list of questions at /takes/ (ghost.py takes). */
.smes-issue.smes-take-row { grid-template-columns: 1fr; grid-template-areas: "title"; }
.smes-take-all { margin: 20px 0 0; font-weight: 600; }
.smes-take-all a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.smes-take-all a:hover { text-decoration-thickness: 2px; }
.smes-takes-hub h2 { margin: 64px 0 4px; }
.smes-takes-hub h2:first-child { margin-top: 0; }
.gh-content .smes-takes { list-style: none; margin: 0; padding: 0; }
.gh-content .smes-takes li { margin: 0; padding: 16px 0; }
.gh-content .smes-takes li + li { border-top: 1px solid var(--smes-soft-rule); }
.smes-takes a { font: 700 2rem/1.3 var(--gh-font-heading); letter-spacing: -0.02em; text-decoration: none; }
.smes-takes a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.smes-takes .smes-take-count { display: block; margin-top: 2px; font-size: 1.5rem; }

@media (max-width: 767px) {
    .smes-logo { font-size: 1.8rem; gap: 8px; }
    .smes-mark { width: 26px; height: 26px; }
    /* Two rows: the logo with Subscribe on the right, then the three links (they just fit a 360px phone). */
    .smes-nav-inner { flex-wrap: wrap; gap: 12px 10px; min-height: 0; padding-block: 14px 10px; font-size: 1.4rem; }
    .smes-nav-links { order: 3; flex-basis: 100%; gap: 16px; }
    .smes-nav .gh-button { padding: 9px 11px; font-size: 1.4rem; }
    .smes-hero-lead { margin-top: 40px; font-size: 2.4rem; }
    .smes-hero-sub { font-size: 1.8rem; }
    .gh-form .gh-button { min-width: 0; padding-inline: 18px; }
    .smes-issue { grid-template-columns: 1fr auto; grid-template-areas: "no date" "title title"; padding: 20px 0; }
    .smes-issue.smes-take-row { grid-template-columns: 1fr; grid-template-areas: "title"; }
    .smes-issue-title { font-size: 2rem; }
    .smes-issue.smes-entry { grid-template-columns: 1fr; grid-template-areas: "title" "sub"; }
    .smes-signup, .smes-footer-bar { margin-top: 80px; }
    .gh-main ~ .smes-issues { margin-top: 72px; }
    .gh-article-header { margin-bottom: 32px; }
    .gh-content { font-size: 1.7rem; }
    .gh-content h2 { font-size: 2.5rem; }
    .gh-content h3 { font-size: 2.1rem; }
    .gh-content > h2:not(:first-child), .gh-content > hr + * { margin-top: 56px !important; }
    .gh-content > h3:not(:first-child) { margin-top: 40px; }
    .gh-content > h2 + h3:not(:first-child) { margin-top: 28px; }
    .gh-content > .smes-email-only + p + h2 { margin-top: 44px !important; }
    .smes-takes-hub h2 { margin-top: 48px; }
    .smes-takes a { font-size: 1.9rem; }
    .gh-content .smes-experts li { grid-template-columns: 1fr; grid-template-areas: "name" "role" "chips" "links"; gap: 0; padding: 14px 0; }
    .smes-experts .smes-chips { margin-top: 8px; }
    .smes-experts .smes-links { justify-self: start; margin-top: 6px; text-align: left; }
    .smes-footer-links { gap: 8px 20px; }
}

/* The issue's email header (logo and tagline, ghost.py masthead()): the site has its own nav. */
.smes-email-only { display: none; }

/* Soft gate (partials/soft-gate.hbs). The one black panel on the site, with the logo's green on the button, so it can't
   be mistaken for part of the page. On phones it's a bottom sheet, so the article stays in view above it. */
.smes-gate {
    width: min(600px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
    margin: auto; padding: 0; border: 0; border-radius: var(--smes-radius); outline: none;
    color: #fff; background: var(--smes-ink);
}
.smes-gate[open] { animation: smes-gate-in 0.2s ease-out; }
.smes-gate::backdrop { background: rgb(14 15 18 / 0.6); }
@keyframes smes-gate-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .smes-gate[open] { animation: none; } }
.smes-gate-inner { position: relative; padding: 40px; }
.smes-gate-close {
    position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    color: #fff; background: none; border: 0; cursor: pointer;
}
.smes-gate-close svg { width: 18px; height: 18px; }
.smes-gate .smes-mark { display: block; width: 44px; height: 44px; margin: -6px 0 14px -7px; }
.smes-gate h2 { margin: 0; color: #fff; font: 700 3.2rem/1.15 var(--gh-font-heading); letter-spacing: -0.03em; }
.smes-gate-copy { margin: 12px 0 28px; font-size: 1.8rem; line-height: 1.5; }
.smes-gate .gh-form, .smes-gate .gh-form:hover { max-width: none; box-shadow: none; }
.smes-gate .gh-form-input { color: var(--smes-ink); }
.smes-gate .gh-form .gh-button { color: var(--smes-ink); background-color: #2fd39a; }
.smes-gate-sent { display: none; margin: 12px 0 0; font-size: 1.6rem; font-weight: 600; line-height: 1.4; }
.gh-form.success ~ .smes-gate-sent { display: block; }
.smes-gate-skip {
    display: block; margin: 20px 0 0; padding: 0; color: #fff; background: none; border: 0; cursor: pointer;
    font-size: 1.6rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
:is(.smes-gate-close, .smes-gate-skip):focus-visible { outline: 2px solid #2fd39a; outline-offset: 2px; }

@media (max-width: 767px) {
    .smes-gate {
        width: 100%; max-height: 75dvh; margin: auto 0 0; overflow-y: auto;
        border-radius: var(--smes-radius) var(--smes-radius) 0 0;
    }
    .smes-gate::backdrop { background: rgb(14 15 18 / 0.35); }
    .smes-gate-inner { padding: 24px var(--container-gap) 20px; }
    .smes-gate-close { top: 8px; right: 8px; }
    .smes-gate .smes-mark { display: none; }
    .smes-gate h2 { padding-right: 36px; font-size: 2.4rem; }
    .smes-gate-copy { margin: 8px 0 16px; font-size: 1.6rem; line-height: 1.4; }
    .smes-gate .smes-consent { margin-top: 8px; font-size: 1.3rem; }
    .smes-gate-skip { margin-top: 14px; }
}

@media (max-width: 380px) {   /* small phones: the logo and Subscribe still share a row */
    .smes-logo { font-size: 1.6rem; gap: 7px; }
    .smes-mark { width: 24px; height: 24px; }
    .smes-nav-links { gap: 12px; }
    .smes-nav .gh-button { padding: 9px 10px; }
}