/* ============================================
   AI Schlep blog — extends 4Trades.ai styles.css
   Uses the existing brand tokens (--orange-primary, --charcoal-black,
   --off-white, --dark-gray, Work Sans). No new design language.
   ============================================ */

/* Clear the fixed site nav */
.schlep-main {
    padding-bottom: 80px;
    min-height: 60vh;
    background-color: var(--pure-white);
    position: relative;
    z-index: 1;       /* below the masthead so the overflowing nail paints over us */
}


/* ---- Masthead: AI Schlep brand banner ------------------------------
   The transparent PNG carries title + tagline + hammer + nail. The
   masthead's LAYOUT box ends at the orange rule (just past the tagline
   / strike face). The image overflows DOWN past the rule, so the nail
   drives into the white page area. Content (.schlep-main) starts at a
   normal distance below the rule — not below the nail. The nail and
   the post text share that vertical band but never collide horizontally
   (nail sits to the right of the centered 720px column).

   --boundary controls how much of the image's height is "dark portion".
   Smaller boundary -> rule sits higher in the image -> more nail extends
   into the page (nail driven deeper).
   -------------------------------------------------------------------- */
.schlep-masthead {
    /* The banner PNG carries band + stripe + hammer + nail all baked in.
       Page-side CSS only provides: (a) edge-to-edge dark behind the band
       (since the image caps at --image-max, the dark fills the side margins
       on wider viewports), and (b) an edge-to-edge orange rule continuing
       the image's stripe out to the viewport edges. */
    --image-max: 2400px;
    /* Wrap aspect ratio targets the BOTTOM EDGE of the baked orange stripe
       (row 696 of 1000 in the source PNG) so the CSS edge-to-edge rule sits
       flush with the image's own stripe — they form one continuous line. */
    --band-aspect: 2400 / 696;
    position: relative;
    z-index: 5;                        /* paints on top of .schlep-main bg */
    overflow: visible;
}

.schlep-navfill {
    height: 92px;
    background: #2b2b2b;
}

.schlep-banner-stage {
    display: block;
    position: relative;
    text-decoration: none;
    background: #2b2b2b;
    border-bottom: 3px solid var(--orange-primary);   /* edge-to-edge rule */
    overflow: visible;
}

/* Wrap matches the BAND portion of the image. Image (absolute, width 100%,
   height auto) renders at its full natural height, so the nail spills past
   the wrap's bottom = past the rule = into the white page.
   Using aspect-ratio (not padding-bottom %) so the wrap's height tracks its
   OWN width — critical when the wrap is narrower than the stage (mobile). */
.schlep-image-wrap {
    position: relative;
    width: 100%;
    max-width: var(--image-max);
    margin: 0 auto;
    aspect-ratio: var(--band-aspect);
    overflow: visible;
}

.schlep-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .schlep-navfill { height: 70px; }   /* matches the actual nav on mobile, no white sliver */
}

/* Compact masthead on phones: image shrinks to ~78% of viewport, dark fills
   the sides edge-to-edge. Reduces the band's vertical footprint without
   changing the artwork's internal proportions. The intro card's calcs use
   100% (parent width), so we mirror the same scale here so the nail still
   lines up correctly with the box's right edge. */
@media (max-width: 600px) {
    /* 50% bigger banner on phones (was 78vw, now 117vw). Image is wider
       than the viewport — the masthead clips the horizontal overflow but
       must keep vertical overflow visible (the nail extends below).
       Using `overflow-x: clip` instead of `hidden` because `hidden`
       implicitly turns overflow-y into `auto` on iOS Safari, clipping
       the nail vertically. */
    .schlep-masthead { --image-max: 100vw; overflow-x: clip; overflow-y: visible; }
    .schlep-image-wrap {
        width: 117vw;             /* explicit width — overrides 100% */
        max-width: none;
        margin-left: -8.5vw;      /* center the wider element */
        margin-right: -8.5vw;
    }
    .schlep-navfill { height: 64px; }
    .schlep-banner-stage {
        padding-top: 10vw;
        overflow-x: clip;         /* clip horizontally; keep nail's Y overflow */
        overflow-y: visible;
    }
}

/* ---- Blog index ------------------------------------------------------ */
.blog-index {
    padding-top: 8px;          /* intro-wrap above handles the top spacing */
}

/* The intro's LEFT edge lines up with the post-list's left edge (so both
   reading columns share an alignment line). The RIGHT edge is anchored at
   a fixed pixel distance from the nail, computed from the image's geometry
   (nail x = image_left + image_width * 0.85). Width is whatever falls out. */
.blog-intro-wrap {
    --nail-buffer: 32px;       /* "specified distance" between box's right edge and nail */
    --image-max: 2400px;
    --nail-x-in-image: 0.808;  /* fraction of image width at the nail's left edge (measured) */
    margin: 56px 0 56px;
    /* The wrap fills the layout viewport (excluding scrollbar). All margin %
       calcs on children resolve against this width — keeps the intro pinned
       to the same horizontal grid as the post list (which also lives in the
       layout viewport, not the 100vw viewport). */
    width: 100%;
}

.blog-intro {
    background: rgba(43, 43, 43, 0.05);
    border-left: 3px solid var(--orange-primary);
    border-radius: 0 8px 8px 0;
    padding: 18px 26px;
    color: var(--dark-gray);
    font-size: 18px;
    line-height: 1.55;
    text-align: left;

    /* Left edge = post-list's left edge.
       post-list is centered at 760px max inside a 1200-max container with
       24px padding. So its left = (parent_width - 760)/2 + (parent_padding).
       For parent at viewport width and post-list-container's structure:
         post-list-left = parent_width/2 - 380px
       Using 50% (= parent width, scrollbar-excluded) gives the correct value. */
    margin-left:  max(24px, calc(50% - 380px));

    /* Right edge = nail_x - buffer.
       nail_x = parent_width/2 + image_w * (nail-x-in-image - 0.5)
       => margin-right = parent_width - nail_x + buffer
                       = parent_width/2 - image_w * (nail-x-in-image - 0.5) + buffer
       For nail-x-in-image = 0.808: factor = 0.308. */
    margin-right: max(24px, calc(
        50%
        - min(100%, var(--image-max)) * 0.308
        + var(--nail-buffer)
    ));
}

.blog-intro p {
    margin: 0;
}

.blog-intro p + p {
    margin-top: 0.6em;          /* paragraph break */
}

@media (max-width: 600px) {
    .blog-intro-wrap { margin: 20px 0 32px; }   /* tighter spacing under the rule on phones */
    .blog-intro { font-size: 16px; padding: 14px 18px; }
    .blog-intro p + p { margin-top: 0.5em; }
}

.post-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-card {
    border-bottom: 1px solid var(--off-white);
}

.post-card-link {
    display: block;
    padding: 28px 8px;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color var(--transition-base);
}

.post-card-link:hover {
    background-color: var(--off-white);
}

.post-card-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: var(--charcoal-black);
    margin-bottom: 8px;
    line-height: 1.2;
}

.post-card-link:hover .post-card-title {
    color: var(--orange-hover);
}

.post-card-dek {
    color: var(--dark-gray);
    font-size: 18px;
    margin-bottom: 10px;
}

.post-card-meta,
.post-meta {
    font-size: 15px;
    color: #6b6b6b;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}

.blog-empty {
    text-align: center;
    color: var(--dark-gray);
    padding: 40px 0;
}

/* ---- Post page ------------------------------------------------------- */
.post.container {
    max-width: 720px;       /* readable measure, overrides 1200px container */
    padding-top: 48px;
}

.breadcrumb {
    font-size: 14px;
    color: #6b6b6b;
    margin-bottom: 24px;
}

.breadcrumb a {
    color: var(--orange-hover);
    text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }

.post-header {
    margin-bottom: 36px;
    border-bottom: 1px solid var(--off-white);
    padding-bottom: 28px;
}

.post-title {
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--charcoal-black);
    margin-bottom: 16px;
}

.post-dek {
    font-size: clamp(19px, 2.4vw, 23px);
    font-style: italic;
    color: var(--orange-hover);
    margin-bottom: 18px;
}

.post-author { font-weight: 600; color: var(--dark-gray); }

/* Target stack / tools — steel-blue token, distinct from orange topic tags */
.post-stack {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-stack li {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    color: var(--steel-blue);
    background-color: rgba(42, 93, 128, 0.08);
    border: 1px solid rgba(42, 93, 128, 0.25);
    padding: 3px 10px;
    border-radius: 4px;
}

/* Reading body */
.post-body {
    font-size: 19px;
    line-height: 1.75;
    color: #232323;
}

.post-body p { margin-bottom: 1.5rem; font-size: inherit; }

.post-body h2 {
    font-size: clamp(24px, 3.2vw, 30px);
    font-weight: 700;
    color: var(--charcoal-black);
    margin: 2.5rem 0 1rem;
    line-height: 1.2;
}

.post-body h3 {
    font-size: clamp(20px, 2.6vw, 24px);
    font-weight: 600;
    color: var(--charcoal-black);
    margin: 2rem 0 0.75rem;
}

.post-body a {
    color: var(--orange-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-body a:hover { color: var(--orange-primary); }

.post-body ul,
.post-body ol { margin: 0 0 1.5rem 1.25rem; }

.post-body li { margin-bottom: 0.5rem; }

.post-body strong { font-weight: 700; color: var(--charcoal-black); }

/* Section divider (the draft's "---") */
.section-rule {
    border: none;
    width: 64px;
    height: 3px;
    background-color: var(--orange-primary);
    opacity: 0.5;
    margin: 2.75rem auto;
    clear: both;          /* drop below a right-floated diagram */
}

/* Pull-quote */
.pull-quote {
    border-left: 4px solid var(--orange-primary);
    margin: 2rem 0;
    padding: 8px 0 8px 24px;
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 600;
    font-style: italic;
    color: var(--charcoal-black);
    line-height: 1.3;
}

/* Standard blockquote (non-pull) */
.post-body blockquote:not(.pull-quote) {
    border-left: 4px solid var(--orange-primary);
    background-color: var(--off-white);
    margin: 1.75rem 0;
    padding: 16px 24px;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: var(--dark-gray);
}

/* Inline code + code blocks */
.post-body code {
    background-color: var(--off-white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.post-body pre {
    background-color: var(--charcoal-black);
    color: var(--off-white);
    padding: 20px 24px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.75rem 0;
}

.post-body pre code { background: none; padding: 0; color: inherit; }

/* TL;DR / key-takeaways box (AEO) */
.post-tldr {
    background-color: var(--off-white);
    border-left: 4px solid var(--orange-primary);
    border-radius: 0 8px 8px 0;
    padding: 20px 28px;
    margin: 0 0 40px;
}

.post-tldr h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--orange-hover);
    margin: 0 0 10px;
}

.post-tldr p { font-size: 17px; line-height: 1.6; margin: 0; color: var(--dark-gray); }

/* ---- Figures / images: alignment, captions, alt ---------------------
   Authoring control Doug wanted. Use:
   <figure class="align-center|align-left|align-right|full-bleed">
     <img src="/blog/assets/.." alt="REQUIRED alt text">
     <figcaption>Caption</figcaption>
   </figure>
   --------------------------------------------------------------------- */
.post-body figure {
    margin: 2rem 0;
    text-align: center;
}

.post-body figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.post-body figcaption {
    font-size: 15px;
    color: #6b6b6b;
    margin-top: 8px;
    font-style: italic;
}

.post-body figure.align-center { margin-left: auto; margin-right: auto; }

.post-body figure.align-left {
    float: left;
    margin: 0.5rem 1.75rem 1rem 0;
    max-width: 48%;
}

.post-body figure.align-right {
    float: right;
    margin: 0.5rem 0 1rem 1.75rem;
    max-width: 48%;
}

.post-body figure.align-left img,
.post-body figure.align-right img { text-align: left; }

.post-body figure.full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
}

.post-body figure.full-bleed img { border-radius: 0; width: 100%; }

/* Clear floats inside the article */
.post-body::after { content: ""; display: block; clear: both; }

/* ---- Flow diagram: reusable HTML/CSS step pipeline ------------------
   Real text (crisp, responsive, SEO/AEO-readable). Use:
   <figure class="flow-figure">
     <ol class="flow">
       <li class="flow-step"><span class="flow-num">1</span>
         <div class="flow-body"><p class="flow-label">Label</p>
           <p class="flow-note">optional.file</p></div></li>
       ... <li class="flow-step is-payoff">...</li>
     </ol>
     <figcaption>Caption.</figcaption>
   </figure>
   --------------------------------------------------------------------- */
.flow-figure { margin: 2.5rem 0; }

/* SVG diagram figure — capped width keeps text legible on mobile */
.diagram-figure { margin: 2.5rem 0; text-align: center; }
.diagram-figure svg { width: 100%; max-width: 420px; height: auto; }

/* On desktop, float it right so body text wraps alongside and the post
   doesn't burn a full screen of vertical space. Full-width on mobile. */
@media (min-width: 769px) {
    .diagram-figure {
        float: right;
        width: 300px;
        margin: 0.25rem 0 1.25rem 2rem;
    }
}

.flow {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 560px;
    text-align: left;
}

.flow-step {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--off-white);
    border-radius: 8px;
    padding: 16px 20px;
}

.flow-step + .flow-step { margin-top: 34px; }

/* connector line + downward chevron between steps */
.flow-step + .flow-step::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 35px;
    width: 2px;
    height: 20px;
    background: var(--orange-primary);
}

.flow-step + .flow-step::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 30px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--orange-primary);
}

.flow-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--orange-primary);
    color: var(--pure-white);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-body { margin: 0; }

.flow-label {
    font-weight: 600;
    color: var(--charcoal-black);
    font-size: 17px;
    line-height: 1.4;
    margin: 4px 0 0;
}

.flow-note {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    color: var(--steel-blue);
    margin: 6px 0 0;
}

/* the payoff step reads as the "aha" */
.flow-step.is-payoff {
    background: rgba(255, 127, 17, 0.10);
    border: 1px solid rgba(255, 127, 17, 0.35);
}

/* Branch: two outcomes after the watch step */
.flow-split-label {
    text-align: center;
    max-width: 520px;
    margin: 26px auto 18px;
    font-weight: 600;
    color: var(--charcoal-black);
    font-size: 16px;
    line-height: 1.5;
}

.flow-branch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 680px;
    margin: 0 auto;
}

.flow-outcome {
    background: var(--off-white);
    border-radius: 8px;
    padding: 18px 20px;
}

.flow-outcome p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dark-gray); }
.flow-outcome p + p { margin-top: 8px; }

.flow-outcome-title {
    font-weight: 700;
    color: var(--charcoal-black) !important;
    font-size: 16px !important;
}

.flow-outcome-title span { font-weight: 400; color: #6b6b6b; font-size: 14px; }

.flow-outcome.is-loop { border-left: 4px solid var(--steel-blue); }

.flow-outcome.is-payoff {
    border-left: 4px solid var(--orange-primary);
    background: rgba(255, 127, 17, 0.10);
}

@media (max-width: 768px) {
    .flow-step { padding: 14px 16px; }
    .flow-branch { grid-template-columns: 1fr; }
}

.post-tags {
    list-style: none;
    padding: 0;
    margin: 36px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tags li {
    background-color: var(--off-white);
    color: var(--dark-gray);
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 999px;
}

.post-footer {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--off-white);
}

/* ---- Draft affordances ---------------------------------------------- */
.draft-banner {
    background-color: #FFF4E6;
    border: 1px solid var(--orange-primary);
    color: #8a4b00;
    text-align: center;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
}

.draft-banner code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; }

.draft-pill,
.post-card-title .draft-pill {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--orange-primary);
    color: var(--pure-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

.nav-links a.nav-active { color: var(--orange-primary); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 768px) {
    /* NOTE: schlep-masthead padding is handled by .schlep-navfill, not here.
       Old 100px/32px padding was a leftover from a pre-restructure layout. */
    .post-body figure.align-left,
    .post-body figure.align-right {
        float: none;
        max-width: 100%;
        margin: 1.5rem 0;
    }
    .post-body { font-size: 18px; }
}

/* ---- Issue kicker ("Issue No. 1" label above the opening graf) ------- */
.post-body .kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-hover);
    margin-bottom: 1.25rem;
}

/* ---- Kit box: free-download callout ---------------------------------- */
.post-body .kit-box {
    background-color: var(--off-white);
    border: 1px solid rgba(43, 43, 43, 0.12);
    border-radius: 10px;
    padding: 22px 26px;
    margin: 1.75rem 0;
}

.post-body .kit-box .kit-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-hover);
    margin-bottom: 0.5rem;
}

.post-body .kit-box p { margin-bottom: 0.9rem; }
.post-body .kit-box p:last-child { margin-bottom: 0; }

.post-body .kit-box .btn {
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    color: var(--pure-white);
    background-color: var(--orange-primary);
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 0.25rem;
}

.post-body .kit-box .btn:hover {
    background-color: var(--orange-hover);
    color: var(--pure-white);
}

/* ---- Mailing list signup band (between main and footer) --------------- */
.signup-band {
    background-color: var(--off-white);
    border-top: 3px solid var(--orange-primary);
    padding: 40px 24px 44px;
}

.signup-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.signup-title {
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 700;
    color: var(--charcoal-black);
    margin: 0 0 6px;
}

.signup-note {
    font-size: 16px;
    color: var(--dark-gray);
    margin: 0 0 18px;
}

.signup-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto;
}

/* Visually hidden, kept for screen readers */
.signup-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.signup-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 16px;      /* >=16px so iOS Safari doesn't zoom on focus */
    color: var(--charcoal-black);
    background: var(--pure-white);
    border: 1px solid rgba(43, 43, 43, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
}

.signup-input:focus {
    outline: 2px solid var(--orange-primary);
    outline-offset: 1px;
    border-color: var(--orange-primary);
}

.signup-btn {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--pure-white);
    background-color: var(--orange-primary);
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    cursor: pointer;
}

.signup-btn:hover { background-color: var(--orange-hover); }

@media (max-width: 480px) {
    .signup-form { flex-direction: column; }
    .signup-btn { width: 100%; }
}

/* Compact signup card: near the top of the index and each post. Same
   design language as .blog-intro / .kit-box (off-white, orange left rule). */
.signup-card {
    background-color: var(--off-white);
    border-left: 3px solid var(--orange-primary);
    border-radius: 0 8px 8px 0;
    padding: 18px 22px;
}

.signup-card-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--charcoal-black);
    margin: 0 0 4px;
}

.signup-card-note {
    font-size: 14.5px;
    color: var(--dark-gray);
    line-height: 1.5;
    margin: 0 0 12px;
}

/* Inside cards the form always stacks (cards are narrow) */
.signup-form-stack {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
}

/* Index: centered card between the intro and the post list */
.signup-card-index {
    max-width: 560px;
    margin: -16px auto 48px;   /* tucks up toward the intro's 56px bottom margin */
}

/* Posts: floated right beside the title's opening grafs on desktop.
   Hidden on phones — there the end-of-page band is the signup surface,
   so the article isn't interrupted before it starts. */
.post-body .signup-card-float { display: none; }

@media (min-width: 769px) {
    .post-body .signup-card-float {
        display: block;
        float: right;
        width: 280px;
        margin: 0.35rem 0 1.5rem 2rem;
    }
}

/* ============================================
   Standalone chrome (Option A, Doug 2026-07-17)
   The blog is served by the Next.js app, where the static site's
   /css/styles.css and /js/script.js do NOT exist. This section carries the
   brand tokens and minimal nav/footer/button chrome so the pages are fully
   styled on their own. Every selector is wrapped in :where() (zero
   specificity), so if the full site stylesheet ever loads on these pages,
   its rules win automatically and this section becomes inert.
   Token values mirror the 4Trades.ai brand (verified against the live site).
   ============================================ */

:where(:root) {
    --orange-primary: #FF7F11;
    --orange-hover: #E46F00;
    --charcoal-black: #1C1C1C;
    --dark-gray: #2E2E2E;
    --off-white: #F5F5F5;
    --pure-white: #FFFFFF;
    --steel-blue: #2A5D80;
    --transition-base: 0.3s ease;
}

:where(body) {
    margin: 0;
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #232323;
    background: var(--pure-white);
}

:where(.container) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Fixed dark nav bar; heights match .schlep-navfill (92 / 70 / 64). */
:where(.nav-bar) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #2b2b2b;
}

:where(.nav-container) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

:where(.nav-logo img.logo-image) { height: 44px; width: auto; display: block; }

:where(.nav-links) { display: flex; align-items: center; gap: 26px; }

:where(.nav-links a) {
    color: var(--pure-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}

:where(.nav-links a:hover) { color: var(--orange-primary); }

:where(.nav-links a.nav-cta) {
    background: var(--orange-primary);
    color: var(--pure-white);
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
}

:where(.nav-links a.nav-cta:hover) { background: var(--orange-hover); color: var(--pure-white); }

/* The hamburger needs /js/script.js; without it, keep it hidden and show a
   compact logo + CTA bar on phones instead. */
:where(.hamburger) { display: none; }

@media (max-width: 768px) {
    :where(.nav-container) { height: 70px; }
    :where(.nav-logo img.logo-image) { height: 36px; }
    :where(.nav-links) { gap: 16px; }
    :where(.nav-links a:not(.nav-cta)) { display: none; }
    :where(.nav-links a.nav-cta) { padding: 9px 14px; font-size: 14px; }
}

@media (max-width: 600px) {
    :where(.nav-container) { height: 64px; padding: 0 16px; gap: 12px; }
    :where(.nav-logo) { min-width: 0; }
    :where(.nav-logo img.logo-image) { height: auto; width: auto; max-width: 44vw; max-height: 30px; }
    :where(.nav-links a.nav-cta) { white-space: nowrap; font-size: 13px; padding: 8px 12px; }
}

/* Buttons (post footer "More from AI Schlep") */
:where(.btn) {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    padding: 12px 22px;
}

:where(.btn.btn-primary) { background: var(--orange-primary); color: var(--pure-white); }
:where(.btn.btn-primary:hover) { background: var(--orange-hover); color: var(--pure-white); }

/* Footer */
:where(.footer) {
    background: var(--charcoal-black);
    color: var(--off-white);
    padding: 48px 0 24px;
}

:where(.footer-content) {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

:where(.footer-logo img.logo-image) { height: 40px; width: auto; }

:where(.footer-tagline) { font-weight: 700; margin: 14px 0 4px; color: var(--pure-white); }

:where(.footer-subtext) { font-size: 14px; color: #b5b5b5; margin: 0; max-width: 340px; }

:where(.footer-links) { display: flex; gap: 48px; flex-wrap: wrap; }

:where(.footer-column h4) {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a8a8a;
    margin: 0 0 10px;
}

:where(.footer a) {
    color: #d9d9d9;
    text-decoration: none;
    display: block;
    margin: 6px 0;
    font-size: 15px;
}

:where(.footer a:hover) { color: var(--orange-primary); }

:where(.footer-bottom) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 36px;
    padding-top: 18px;
    font-size: 13px;
    color: #9a9a9a;
}

:where(.footer-bottom p) { margin: 0; }