/* Homepage mock — Sequoia-ish blocks over fixed photo. Scoped under .home-mock */

body:has(.home-mock) .main-nav,
body:has(.home-mock) header.navbar {
    display: none !important;
}
body:has(.home-mock) {
    padding-top: 0 !important;
}

/*
 * Ban Bootstrap’s click focus ring everywhere in the mock.
 * Source: bootstrap.min.css → a:focus { outline: 5px auto -webkit-focus-ring-color }
 */
.home-mock a:focus,
.home-mock a:focus-visible,
.home-mock a:active,
.home-mock button:focus,
.home-mock button:focus-visible,
.home-mock button:active,
.home-mock [tabindex]:focus,
.home-mock [tabindex]:focus-visible,
.home-mock summary:focus,
.home-mock summary:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.home-mock {
    --hm-max: 1380px;
    --hm-gutter: 1.75rem;
    --hm-wash: rgba(255, 248, 240, 0.92);
    --hm-wash-strong: rgba(255, 248, 240, 0.96);
    --hm-wash-card: rgba(255, 248, 240, 0.65); /* project/link cards at rest */
    --hm-wash-card-solid: rgb(255, 248, 240); /* full on hover / mobile inview */
    --hm-nav: #ffffff;
    --hm-ink: #1a1410;
    --hm-muted: #4a3f36;
    --hm-orange: #d45500;
    --hm-blue: #5f8dd3;
    --hm-logo-sub: #4d4d4d; /* logo SVG grey — a tad lighter than #3a3a3a */
    --hm-logo-sub-soft: rgba(77, 77, 77, 0.65); /* grey checker cards at rest */
    --hm-accent: #d45500;
    --hm-rule: rgba(26, 20, 16, 0.12);
    --hm-font-serif: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --hm-gap: 2rem;
    --hm-head-pad-y: 1.15rem;
    --hm-head-pad-x: 1.5rem;
    --hm-radius: 0.85rem; /* visible soft curve — was too subtle at 0.45rem */
    --hm-section-space: 7rem; /* 2× — air before headings / CTA / after hero */
    /* Sticky nav clearance for in-page #hash jumps — clear bar + visible gap below it */
    --hm-nav-scroll-pad: 12rem;
    --hm-nav-link-size: 1.35rem; /* Our Dreams / Work / … — dates match this */
    color: var(--hm-ink);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* track dynamic mobile viewport when chrome shows/hides */
    font-size: 1.35rem;
    box-sizing: border-box;
}

.home-mock *,
.home-mock *::before,
.home-mock *::after {
    box-sizing: border-box;
}

.home-mock-bg {
    position: fixed;
    inset: 0;
    /* 100lvh = large viewport (URL bar hidden). Avoids a gap when Android/iOS chrome collapses on scroll.
       Fast-scroll chrome animation can still lag a frame — browser limitation. */
    width: 100%;
    height: 100vh;
    height: 100lvh;
    min-height: 100%;
    z-index: 0;
    background-color: #2a221c;
    background-image:
        linear-gradient(180deg, rgba(26, 20, 16, 0.25) 0%, rgba(26, 20, 16, 0.15) 40%, rgba(26, 20, 16, 0.35) 100%),
        var(--hm-photo);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* One rail — nav and content are the same width */
.home-mock-rail {
    position: relative;
    z-index: 1;
    width: min(calc(100% - (2 * var(--hm-gutter))), var(--hm-max));
    max-width: var(--hm-max);
    margin: 0 auto;
    padding: 0.75rem 0 5rem;
}

.home-mock-shell {
    margin: 0;
    padding: 0;
}

.home-mock-wash {
    background: var(--hm-wash);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid var(--hm-rule);
    border-radius: var(--hm-radius);
    padding: 2.25rem 2.5rem;
}

.home-mock-wash-strong {
    background: var(--hm-wash-strong);
}

/* Sticky nav — fade right like hero; Contact sits in the clear zone */
.home-mock-nav {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 2rem; /* white space before hero */
    padding: 0.85rem 1.15rem;
    /* Solid left → invisible right (Contact stays readable as solid white) */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.95) 55%,
        rgba(255, 255, 255, 0.35) 78%,
        rgba(255, 255, 255, 0) 100%
    );
    border: 1px solid var(--hm-rule);
    border-right: none;
    box-shadow: none;
    border-radius: var(--hm-radius) 0 0 var(--hm-radius);
}

.home-mock-nav-brand {
    display: flex;
    align-items: center;
    line-height: 0;
    flex: 0 0 auto;
    margin-right: 0;
    min-width: 0;
}

.home-mock-logo {
    display: block;
    height: 3.75rem; /* taller kangaroo */
    width: auto;
    max-width: 100%;
    /* PNG optically high/right — nudge down ~5px, left ~10px */
    transform: translate(-0.625rem, 0.35rem);
}

/* Mobile: logo + Contact us only — section links not needed */
.home-mock-nav-links {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-mock-nav-links a {
    color: var(--hm-ink);
    text-decoration: none;
    font-size: var(--hm-nav-link-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-mock-nav-links a:hover {
    color: var(--hm-accent);
}

/* Contact us — solid white; ~25% larger; sits in nav fade */
.home-mock-nav-contact {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-block;
    padding: 0.6rem 1.38rem;
    font-size: 1.56rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--hm-orange);
    text-decoration: none;
    background: #fff;
    border: none;
    border-radius: 0.45rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-mock-nav-contact:hover {
    background: var(--hm-orange);
    color: #fff;
}

@media (min-width: 900px) {
    .home-mock-nav {
        flex-wrap: wrap;
        gap: 1rem 2.75rem;
        padding: 1.15rem 1.5rem;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 48%,
            rgba(255, 255, 255, 0.25) 72%,
            rgba(255, 255, 255, 0) 88%
        );
    }

    .home-mock-nav-brand {
        margin-right: 0.75rem;
    }

    .home-mock-logo {
        height: 4.35rem;
        transform: translate(-0.625rem, 0.4rem);
    }

    .home-mock-nav-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 1.75rem;
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .home-mock-nav-contact {
        padding: 0.66rem 1.56rem;
        font-size: 1.86rem;
    }
}

/* In-page nav hashes — land so the section *box* clears the sticky nav (not under it) */
#services,
#work,
#stories,
#opensource,
#topic-data,
#topic-integrations,
#topic-ai,
#topic-lockin,
.home-mock-topic {
    scroll-margin-top: var(--hm-nav-scroll-pad);
}

.home-mock-hero {
    margin: 0 0 var(--hm-section-space);
    padding: 1.75rem 1.5rem 2rem; /* mobile: hug the copy — no tall empty wash */
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: none;
    border-radius: var(--hm-radius);
    background: linear-gradient(
        90deg,
        rgba(255, 248, 240, 0.94) 0%,
        rgba(255, 248, 240, 0.9) 55%,
        rgba(255, 248, 240, 0) 100%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-mock-hero-copy {
    max-width: 100%;
}

.home-mock-hero-stream {
    display: none; /* large screens only */
}

@media (min-width: 1100px) {
    /* Hero size locked — chatterbox stretches inside via margins, does not resize hero */
    .home-mock-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2rem 2.5rem;
        align-items: stretch;
        justify-content: flex-start;
        padding: 3rem 2.5rem 3rem 3rem;
        min-height: 56vh;
        /* hero height driven by copy — chatterbox fills column; do not grow hero for chat */
        border-radius: var(--hm-radius);
        background: linear-gradient(
            90deg,
            rgba(255, 248, 240, 0.94) 0%,
            rgba(255, 248, 240, 0.88) 42%,
            rgba(255, 248, 240, 0.2) 58%,
            rgba(255, 248, 240, 0) 72%
        );
    }

    .home-mock-hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-width: 0;
        min-height: 0;
    }

    .home-mock-hero-stream {
        display: block;
        position: relative;
        min-height: 0;
        min-width: 0;
        align-self: stretch;
        /* Absolute frame below — this column must not grow with typed text */
        overflow: hidden;
        margin: 0;
        padding: 0;
        height: auto;
    }

    .home-mock-hero-stream-frame {
        position: absolute;
        top: 0.85rem;
        bottom: 0.85rem;
        left: 0;
        right: 0;
        overflow: hidden; /* fixed box — no grow */
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: var(--hm-radius);
        background: rgba(0, 0, 0, 0.32); /* slight black tint, still transparent */
        box-shadow: none;
    }

    .home-mock-hero-stream-inner {
        position: absolute;
        inset: 0;
        overflow-x: hidden;
        overflow-y: scroll; /* scroll without visible bar; JS pins to bottom */
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: contain;
        padding: 1.25rem 1.5rem;
        /* Sans-serif for chatterbox — not Lora */
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.725rem; /* 1.15 × 1.5 */
        line-height: 1.45;
        color: #fff;
        background: transparent;
    }

    .home-mock-hero-stream-inner::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .home-mock-hero-stream-inner h1,
    .home-mock-hero-stream-inner h2,
    .home-mock-hero-stream-inner h3 {
        font-family: inherit;
        font-weight: 600;
        margin: 0 0 0.65rem;
        line-height: 1.2;
        color: #fff;
    }

    .home-mock-hero-stream-inner h2 {
        font-size: 2.175rem; /* 1.45 × 1.5 */
    }

    .home-mock-hero-stream-inner p,
    .home-mock-hero-stream-inner ul,
    .home-mock-hero-stream-inner li,
    .home-mock-hero-stream-inner blockquote {
        margin: 0 0 0.85rem;
        padding-left: 0;
        color: #fff;
    }

    .home-mock-hero-stream-inner ul {
        padding-left: 1.25rem;
    }

    .home-mock-hero-stream-inner strong,
    .home-mock-hero-stream-inner em {
        color: #fff;
    }

    /* No fill on code / quoted blocks — text only */
    .home-mock-hero-stream-inner code,
    .home-mock-hero-stream-inner pre,
    .home-mock-hero-stream-inner pre code,
    .home-mock-hero-stream-inner blockquote {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.92em;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        border-radius: 0;
        color: #fff;
    }

    .home-mock-hero-stream-inner pre {
        margin: 0 0 0.85rem;
        white-space: pre-wrap;
    }

    .home-mock-hero-stream-inner blockquote {
        font-family: inherit;
        font-size: inherit;
    }
}

.home-mock-hero .support {
    font-family: var(--hm-font-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    font-weight: 500;
    font-style: italic;
    color: var(--hm-muted);
    margin: 0 0 1.15rem;
    max-width: 52rem;
    line-height: 1.35;
    text-wrap: pretty;
}

.home-mock-hero .exploring {
    font-family: var(--hm-font-serif);
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    font-weight: 500;
    font-style: italic;
    margin: 0;
    max-width: 52rem;
    line-height: 1.35;
    text-wrap: pretty;
}

.home-mock-hero h1 {
    font-size: clamp(3.25rem, 8vw, 7.5rem);
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    max-width: none; /* break is explicit: dream it, / we can build it */
}

/* Section titles — full width on mobile with fade; half on desktop */
.home-mock-lead {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: calc((var(--hm-head-pad-y) * 2) + 1.6em);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--hm-ink);
    margin: 0;
    padding: var(--hm-head-pad-y) var(--hm-head-pad-x);
    line-height: 1.35;
    text-wrap: pretty;
    border: none;
    border-radius: var(--hm-radius) 0 0 var(--hm-radius);
    background: linear-gradient(
        90deg,
        rgba(255, 248, 240, 0.96) 0%,
        rgba(255, 248, 240, 0.94) 72%,
        rgba(255, 248, 240, 0.55) 88%,
        rgba(255, 248, 240, 0) 100%
    );
}

.home-mock-lead-half {
    /* markup alias */
}

.home-mock-lead-solo {
    margin-bottom: 1.5rem;
}

/* Work / Stories / Dreams — brand colour with fade (mobile + desktop) */
.home-mock-lead-orange {
    color: #fff;
    background: linear-gradient(
        90deg,
        var(--hm-orange) 0%,
        var(--hm-orange) 72%,
        rgba(212, 85, 0, 0.55) 88%,
        rgba(212, 85, 0, 0) 100%
    );
}

.home-mock-lead-blue {
    color: #fff;
    background: linear-gradient(
        90deg,
        var(--hm-blue) 0%,
        var(--hm-blue) 72%,
        rgba(95, 141, 211, 0.55) 88%,
        rgba(95, 141, 211, 0) 100%
    );
}

.home-mock-lead-inline {
    display: block;
    width: auto;
    max-width: none;
    min-height: 0;
    margin-bottom: 0.75rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 1.15rem;
    color: var(--hm-muted);
}

/* Title row — mobile: title only; desktop: title + See more beside it */
.home-mock-section-head {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0 0 1.5rem;
}

.home-mock-section-head .home-mock-lead {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.home-mock-more {
    margin: 0;
    font-size: 1.45rem;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Twin See mores: desktop beside title; mobile under the card grid */
.home-mock-more-desktop {
    display: none;
}

.home-mock-more-mobile {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 var(--hm-section-space);
}

.home-mock-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: calc(var(--hm-head-pad-y) + 0.8em);
    padding: calc(var(--hm-head-pad-y) * 0.5) var(--hm-head-pad-x);
    border: none;
    border-radius: var(--hm-radius);
    color: var(--hm-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: inherit;
    line-height: 1.35;
    white-space: nowrap;
    background: rgba(255, 248, 240, 0.92);
}

.home-mock-more-btn:hover {
    color: var(--hm-ink);
    background: rgba(255, 252, 248, 0.96);
}

.home-mock-more-btn-orange {
    color: #fff;
    background: var(--hm-orange);
}

.home-mock-more-btn-orange:hover {
    color: #fff;
    background: var(--hm-orange);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.home-mock-more-btn-blue {
    color: #fff;
    background: var(--hm-blue);
}

.home-mock-more-btn-blue:hover {
    color: #fff;
    background: var(--hm-blue);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (min-width: 900px) {
    .home-mock-lead {
        width: 50%;
        max-width: 50%;
    }

    .home-mock-section-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 1.5rem;
        margin: 0 0 1.5rem;
    }

    .home-mock-section-head .home-mock-lead {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    .home-mock-more-desktop {
        display: flex;
        margin-left: auto;
        width: auto;
        justify-content: flex-start;
    }

    .home-mock-more-mobile {
        display: none;
    }

    .home-mock-more-btn {
        border-radius: 0 var(--hm-radius) var(--hm-radius) 0;
        padding-left: 50px;
        background: linear-gradient(
            90deg,
            rgba(255, 248, 240, 0) 0%,
            rgba(255, 248, 240, 0.88) 45%,
            rgba(255, 248, 240, 0.92) 100%
        );
    }

    .home-mock-more-btn:hover {
        background: linear-gradient(
            90deg,
            rgba(255, 248, 240, 0) 0%,
            rgba(255, 252, 248, 0.9) 45%,
            rgba(255, 252, 248, 0.96) 100%
        );
    }

    .home-mock-more-btn-orange {
        background: linear-gradient(
            90deg,
            rgba(212, 85, 0, 0) 0%,
            rgba(212, 85, 0, 0.88) 45%,
            var(--hm-orange) 100%
        );
    }

    .home-mock-more-btn-orange:hover {
        background: linear-gradient(
            90deg,
            rgba(212, 85, 0, 0) 0%,
            rgba(212, 85, 0, 0.88) 45%,
            var(--hm-orange) 100%
        );
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .home-mock-more-btn-blue {
        background: linear-gradient(
            90deg,
            rgba(95, 141, 211, 0) 0%,
            rgba(95, 141, 211, 0.88) 45%,
            var(--hm-blue) 100%
        );
    }

    .home-mock-more-btn-blue:hover {
        background: linear-gradient(
            90deg,
            rgba(95, 141, 211, 0) 0%,
            rgba(95, 141, 211, 0.88) 45%,
            var(--hm-blue) 100%
        );
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }
}

.home-mock-grid {
    display: grid;
    gap: var(--hm-gap);
    margin-bottom: 1.25rem; /* mobile: sit close above See more */
}

@media (min-width: 900px) {
    .home-mock-grid {
        margin-bottom: var(--hm-section-space);
    }
}

.home-mock-grid-services {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .home-mock-grid-services {
        grid-template-columns: 1fr 1fr;
    }
}

.home-mock-grid-projects {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .home-mock-grid-projects {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    .home-mock-grid-projects {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.home-mock-block h2,
.home-mock-block h3 {
    font-family: var(--hm-font-serif);
    font-size: clamp(1.7rem, 2.4vw, 2.5rem);
    font-weight: 600;
    margin: 0 0 0.85rem;
    line-height: 1.2;
}

.home-mock-block p,
.home-mock-block-summary {
    margin: 0;
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    color: var(--hm-muted);
    line-height: 1.45;
}

/* Homepage project cards: optional app icon — top-left, title shifts right, body wraps (~2 text lines) */
.home-mock-card-app-icon {
    float: left;
    width: calc(2 * 1.45em * 1.45); /* ~two body lines (font-size × line-height × 2) */
    height: auto;
    margin: 0 0.85rem 0.35rem 0;
    border-radius: calc(var(--hm-radius) * 0.45);
    shape-outside: margin-box;
}

.home-mock-block--app-icon .home-mock-card-app-icon {
    font-size: clamp(1.45rem, 2.1vw, 2rem); /* em base = body type size */
}

.home-mock-block--app-icon .home-mock-tags {
    clear: both;
}

.home-mock-block-summary {
    margin-bottom: 0; /* services set their own gaps */
}

.home-mock-grid-services .home-mock-block ul {
    margin: 0;
    padding: 0 0 0 2.25rem;
    list-style: disc;
}

.home-mock-grid-services .home-mock-block li {
    margin: 0 0 0.85rem;
    padding-left: 0.35rem;
    font-size: clamp(1.35rem, 1.95vw, 1.85rem);
    color: var(--hm-ink);
    line-height: 1.45;
}

.home-mock-grid-services .home-mock-block li:last-child {
    margin-bottom: 0;
}

.home-mock-block a {
    color: inherit;
    text-decoration: none;
}

/* Project / story cards are whole-card links — no body underline; title colour + underline only */
a.home-mock-block {
    text-decoration: none;
    cursor: pointer;
}

a.home-mock-block:hover,
a.home-mock-block:hover p,
a.home-mock-block:hover .home-mock-tags,
a.home-mock-block:hover .home-mock-tag {
    text-decoration: none;
}

a.home-mock-block:hover h3 {
    /* Keep title colour — orange-on-blue (and orange-on-orange) reads badly */
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Cards — drop shadow stronger right/bottom, lighter left/top; not on titles/hero */
.home-mock-block {
    border: 1px solid var(--hm-rule);
    border-radius: var(--hm-radius);
    padding: 2.25rem 2.5rem;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow:
        -2px -1px 6px rgba(26, 20, 16, 0.06),
        4px 6px 14px rgba(26, 20, 16, 0.22),
        2px 3px 6px rgba(26, 20, 16, 0.12);
}

/*
 * Project / story / related link cards — slight transparent wash at rest;
 * full opaque on hover (desktop) or .is-inview (mobile scroll-into-view).
 * Not applied to Specialize services tiles.
 */
.home-mock-grid-projects > a.home-mock-block,
.home-mock-grid-stories > a.home-mock-block,
.home-mock-grid-related > a.home-mock-block,
.home-mock-hub-related > a.home-mock-block,
.home-mock-project-card-grid > a.home-mock-block {
    background: var(--hm-wash-card);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
    .home-mock-grid-projects > a.home-mock-block:hover,
    .home-mock-grid-stories > a.home-mock-block:hover,
    .home-mock-grid-related > a.home-mock-block:hover,
    .home-mock-hub-related > a.home-mock-block:hover,
    .home-mock-project-card-grid > a.home-mock-block:hover {
        background: var(--hm-wash-card-solid);
    }
}
@media (hover: none), (pointer: coarse) {
    .home-mock-grid-projects > a.home-mock-block.is-inview,
    .home-mock-grid-stories > a.home-mock-block.is-inview,
    .home-mock-grid-related > a.home-mock-block.is-inview,
    .home-mock-hub-related > a.home-mock-block.is-inview,
    .home-mock-project-card-grid > a.home-mock-block.is-inview {
        background: var(--hm-wash-card-solid);
    }
}

/*
 * Services — solid brand colour, diagonal: logo-sub · blue · blue · logo-sub
 * (ops, docs, mobile, web). Light type on solid colour.
 * Homepage locked — do not flip to wash/grey columns without an explicit homepage ask.
 */
.home-mock-grid-services .home-mock-block {
    padding: 2.5rem 2.75rem 2.75rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-width: 0;
    color: #fff;
}

.home-mock-grid-services .home-mock-block h3 {
    color: #fff;
    margin: 0 0 2.175rem; /* ~1.5 line-heights → summary */
}

.home-mock-grid-services .home-mock-block-summary {
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 2.175rem; /* ~1.5 line-heights → bullets */
}

.home-mock-grid-services .home-mock-block li {
    color: #fff;
}

.home-mock-grid-services .home-mock-block-ops {
    background: var(--hm-logo-sub);
    border-color: var(--hm-logo-sub);
}
.home-mock-grid-services .home-mock-block-docs {
    background: var(--hm-blue);
    border-color: var(--hm-blue);
}
.home-mock-grid-services .home-mock-block-ai {
    background: var(--hm-blue);
    border-color: var(--hm-blue);
}
.home-mock-grid-services .home-mock-block-web {
    background: var(--hm-logo-sub);
    border-color: var(--hm-logo-sub);
}

/* Hub / project solid grey cards (logo-sub) — not homepage checkerboard */
.home-mock-block-solid {
    background: var(--hm-logo-sub);
    border-color: var(--hm-logo-sub);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
}
.home-mock-block-solid h3,
.home-mock-block-solid p {
    color: #fff;
}

/*
 * Work / Dreams checkerboard — wash, grey, wash, grey… (homepage locked).
 * Grey cells use soft alpha at rest; solid on hover / mobile inview.
 */
.home-mock-grid-check > a:nth-child(even) {
    background: var(--hm-logo-sub-soft);
    border-color: var(--hm-logo-sub);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
}
.home-mock-grid-check > a:nth-child(even) h3,
.home-mock-grid-check > a:nth-child(even) p {
    color: #fff;
}
@media (hover: hover) and (pointer: fine) {
    .home-mock-grid-check > a:nth-child(even):hover {
        background: var(--hm-logo-sub);
    }
}
@media (hover: none), (pointer: coarse) {
    .home-mock-grid-check > a:nth-child(even).is-inview {
        background: var(--hm-logo-sub);
    }
}

/* 2-col: wash|grey / grey|wash */
@media (min-width: 640px) and (max-width: 999px) {
    .home-mock-grid-check > a:nth-child(even) {
        background: var(--hm-wash-card);
        border-color: var(--hm-rule);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: var(--hm-ink);
    }
    .home-mock-grid-check > a:nth-child(even) h3 {
        color: var(--hm-ink);
    }
    .home-mock-grid-check > a:nth-child(even) p {
        color: var(--hm-muted);
    }
    .home-mock-grid-check > a:nth-child(4n + 2),
    .home-mock-grid-check > a:nth-child(4n + 3) {
        background: var(--hm-logo-sub-soft);
        border-color: var(--hm-logo-sub);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #fff;
    }
    .home-mock-grid-check > a:nth-child(4n + 2) h3,
    .home-mock-grid-check > a:nth-child(4n + 2) p,
    .home-mock-grid-check > a:nth-child(4n + 3) h3,
    .home-mock-grid-check > a:nth-child(4n + 3) p {
        color: #fff;
    }
    @media (hover: hover) and (pointer: fine) {
        .home-mock-grid-check > a:nth-child(even):hover {
            background: var(--hm-wash-card-solid);
            color: var(--hm-ink);
        }
        .home-mock-grid-check > a:nth-child(4n + 2):hover,
        .home-mock-grid-check > a:nth-child(4n + 3):hover {
            background: var(--hm-logo-sub);
            color: #fff;
        }
    }
    @media (hover: none), (pointer: coarse) {
        .home-mock-grid-check > a:nth-child(even).is-inview {
            background: var(--hm-wash-card-solid);
            color: var(--hm-ink);
        }
        .home-mock-grid-check > a:nth-child(4n + 2).is-inview,
        .home-mock-grid-check > a:nth-child(4n + 3).is-inview {
            background: var(--hm-logo-sub);
            color: #fff;
        }
    }
}

/* Project / story wash cards keep soft tints */
.home-mock-block-ops {
    background:
        linear-gradient(rgba(212, 85, 0, 0.22), rgba(212, 85, 0, 0.22)),
        rgba(255, 248, 240, 0.94);
    border-color: rgba(212, 85, 0, 0.35);
}
.home-mock-block-docs {
    background:
        linear-gradient(rgba(95, 141, 211, 0.24), rgba(95, 141, 211, 0.24)),
        rgba(255, 248, 240, 0.94);
    border-color: rgba(95, 141, 211, 0.4);
}
.home-mock-block-ai {
    background:
        linear-gradient(rgba(212, 85, 0, 0.16), rgba(212, 85, 0, 0.16)),
        rgba(255, 248, 240, 0.94);
    border-color: rgba(212, 85, 0, 0.28);
}
.home-mock-block-web {
    background:
        linear-gradient(rgba(95, 141, 211, 0.18), rgba(95, 141, 211, 0.18)),
        rgba(255, 248, 240, 0.94);
    border-color: rgba(95, 141, 211, 0.32);
}

.home-mock-tags {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Locked: blue tags — never pick up link hover colour */
.home-mock-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1; /* uppercase looks top-heavy with default line-height */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--hm-blue);
    border: none;
    border-radius: calc(var(--hm-radius) * 0.7);
    padding: 0.45rem 0.75rem 0.4rem; /* slight optical vertical balance */
}

a.home-mock-block:hover .home-mock-tag,
a.home-mock-block:focus .home-mock-tag,
a.home-mock-block:active .home-mock-tag {
    color: #fff;
    background: var(--hm-blue);
    text-decoration: none;
}

/* CTA — fade left & right to invisible; no hard border */
.home-mock-cta-break {
    margin: var(--hm-section-space) 0;
    padding: 2.75rem 3rem;
    text-align: center;
    border: none;
    background: linear-gradient(
        90deg,
        rgba(255, 248, 240, 0) 0%,
        rgba(255, 248, 240, 0.94) 18%,
        rgba(255, 248, 240, 0.94) 82%,
        rgba(255, 248, 240, 0) 100%
    );
}

.home-mock-cta-break p {
    margin: 0 0 1.25rem;
    color: var(--hm-muted);
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
}

.home-mock-cta-break a {
    color: var(--hm-accent);
    font-weight: 700;
    font-size: clamp(1.65rem, 2.6vw, 2.5rem);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.home-mock-cta-break a:hover {
    border-bottom-color: var(--hm-accent);
}

.home-mock-grid-stories {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .home-mock-grid-stories {
        grid-template-columns: 1fr 1fr;
    }
}

.home-mock-footer-index {
    margin-top: var(--hm-section-space);
    padding: 2.5rem 2.25rem 2.75rem;
    font-size: 1.45rem;
    color: #fff;
    text-align: center;
    background: var(--hm-blue);
    border: none;
    border-radius: var(--hm-radius);
    box-shadow:
        -2px -1px 6px rgba(26, 20, 16, 0.06),
        4px 6px 14px rgba(26, 20, 16, 0.22),
        2px 3px 6px rgba(26, 20, 16, 0.12);
}

.home-mock-footer-index .home-mock-lead-inline {
    color: #fff;
    text-align: center;
    margin: 0 0 2rem;
    width: 100%;
    max-width: none;
}

/* Mobile: section titles only; Contact last; hide lists + address */
.home-mock-footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1.25rem;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: none;
}

.home-mock-footer-col ul,
.home-mock-footer-address {
    display: none;
}

.home-mock-footer-col-contact {
    grid-column: 1 / -1;
    order: 5;
}

.home-mock-footer-col h3 {
    margin: 0;
    font-family: var(--hm-font-serif);
    font-size: clamp(1.45rem, 3.2vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

.home-mock-footer-col h3 a {
    color: #fff;
    text-decoration: none;
    margin: 0;
    display: inline;
    font-size: inherit;
}

.home-mock-footer-col h3 a:hover {
    text-decoration: underline;
    color: #fff;
}

.home-mock-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-mock-footer-col li {
    margin: 0 0 0.5rem;
    font-weight: 300;
}

.home-mock-footer-col li:last-child {
    margin-bottom: 0;
}

.home-mock-footer-index a {
    color: rgba(255, 255, 255, 0.94);
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.4;
    text-decoration: none;
    display: inline;
}

.home-mock-footer-col ul a,
.home-mock-footer-address,
.home-mock-footer-address a {
    font-family: var(--hm-font-sans, system-ui, sans-serif);
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.home-mock-footer-col a {
    display: block;
}

.home-mock-footer-index a:hover {
    text-decoration: underline;
    color: #fff;
}

.home-mock-footer-address p {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.94);
}

.home-mock-footer-contact-meta a {
    display: inline;
    margin: 0;
    font-size: inherit;
}

.home-mock-footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0.85rem 0 0;
}

.home-mock-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
}

.home-mock-footer-social a:hover {
    opacity: 1;
    filter: brightness(1.08);
}

.home-mock-footer-social img {
    display: block;
    width: 28px;
    height: 28px;
}

.home-mock-footer-social-icon {
    width: 26px;
    height: 26px;
    color: #8ec8ff;
}

.home-mock-footer-index .home-mock-note {
    color: rgba(255, 255, 255, 0.88);
    opacity: 1;
    text-align: center;
}

/* Desktop: five equal columns — Contact in the fifth */
@media (min-width: 900px) {
    .home-mock-footer-cols {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.25rem 1.35rem;
        text-align: left;
        justify-items: stretch;
    }

    .home-mock-footer-col-contact {
        grid-column: auto;
        order: 0;
    }

    .home-mock-footer-col ul,
    .home-mock-footer-address {
        display: block;
    }

    .home-mock-footer-col h3 {
        margin: 0 0 0.9rem;
        font-size: 1.65rem;
    }

    .home-mock-footer-col ul a,
    .home-mock-footer-address,
    .home-mock-footer-address a {
        font-size: 1.3rem;
        font-weight: 300;
    }
}

@media (min-width: 1100px) {
    .home-mock-footer-cols {
        gap: 1.35rem 1.6rem;
    }

    .home-mock-footer-col h3 {
        font-size: 1.8rem;
    }

    .home-mock-footer-col ul a,
    .home-mock-footer-address,
    .home-mock-footer-address a {
        font-size: 1.4rem;
        font-weight: 300;
    }
}

.home-mock-note {
    margin: 1.25rem 0 0;
    font-size: 1.15rem;
    color: var(--hm-muted);
    opacity: 0.85;
}

@media (min-width: 1100px) {
    .home-mock {
        font-size: 1.5rem;
        --hm-gap: 2.25rem;
        --hm-section-space: 8rem; /* 2× of prior 4rem */
        --hm-nav-scroll-pad: 13.5rem; /* taller nav on wide — need more clearance, not less */
        --hm-head-pad-y: 1.35rem;
        --hm-head-pad-x: 1.75rem;
        --hm-nav-link-size: 1.55rem; /* measured Our Dreams — dates use same token */
    }

    .home-mock-rail {
        padding: 1rem 0 7rem;
    }

    .home-mock-wash {
        padding: 2.75rem 3rem;
    }

    .home-mock-nav {
        padding: 1.25rem 2rem;
        margin-bottom: 2.5rem;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 45%,
            rgba(255, 255, 255, 0.2) 70%,
            rgba(255, 255, 255, 0) 85%
        );
    }

    .home-mock-logo {
        height: 5.4rem; /* ~17% taller than prior 4.6rem */
        transform: translate(-0.65rem, 0.4rem);
    }

    .home-mock-nav-links a {
        font-size: var(--hm-nav-link-size);
    }

    .home-mock-nav-contact {
        font-size: 2.1rem;
        padding: 0.84rem 1.86rem;
    }

    .home-mock-hero {
        padding: 4.5rem 4rem;
        min-height: 56vh;
    }

    .home-mock-hero h1 {
        font-size: 8rem;
    }

    .home-mock-hero .support {
        font-size: 2.6rem;
    }

    .home-mock-hero .exploring {
        font-size: 2.3rem;
    }

    .home-mock-lead {
        font-size: 2rem;
    }

    .home-mock-more,
    .home-mock-more-btn {
        font-size: 1.7rem;
    }

    .home-mock-block h3 {
        font-size: 2.6rem;
    }

    .home-mock-block p {
        font-size: 2rem;
    }

    .home-mock-tag {
        font-size: 1.2rem;
    }

    .home-mock-cta-break p {
        font-size: 2.4rem;
    }

    .home-mock-cta-break a {
        font-size: 2.6rem;
    }
}

/* ---- Service hub mock (Operational systems etc.) ---- */

/*
 * Hub chrome: nav + page hero stick as one unit (not two competing stickies).
 * JS fades when each row/card *bottom* crosses under the stick; hash jumps / scroll-spy use the same edge.
 */
.home-mock-hub .home-mock-hub-stick {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
}

.home-mock-hub .home-mock-hub-stick .home-mock-nav {
    position: relative; /* cancel page sticky — parent sticks instead */
    top: auto;
    z-index: auto;
    margin-bottom: 1rem;
}

.home-mock-hub .home-mock-hero-page,
.home-mock-project .home-mock-hero-page {
    position: relative; /* cancel old per-hero sticky */
    top: auto;
    z-index: auto;
    min-height: 0;
    display: block;
    padding: 1.75rem 1.75rem 2rem;
    margin: 0;
    /* Fade wash — open right/bottom so the border doesn’t float over clear photo */
    border: 1px solid var(--hm-rule);
    border-right: none;
    border-bottom: none;
    border-radius: var(--hm-radius) 0 0 var(--hm-radius);
    background: linear-gradient(
        90deg,
        rgba(255, 248, 240, 0.97) 0%,
        rgba(255, 248, 240, 0.95) 42%,
        rgba(255, 248, 240, 0.45) 55%,
        rgba(255, 248, 240, 0) 64%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
}

@media (min-width: 1100px) {
    .home-mock-hub .home-mock-hero-page,
    .home-mock-project .home-mock-hero-page {
        padding: 2.25rem 2.5rem 2.5rem;
        grid-template-columns: none;
        background: linear-gradient(
            90deg,
            rgba(255, 248, 240, 0.97) 0%,
            rgba(255, 248, 240, 0.94) 40%,
            rgba(255, 248, 240, 0.4) 52%,
            rgba(255, 248, 240, 0) 60%
        );
    }

    /* Optional Dreams Bluesky strip — two-column hero when feed has content */
    .home-mock-project .home-mock-hero-page:has(.home-mock-project-bsky:not([hidden])) {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2rem 2.5rem;
        align-items: stretch;
        min-height: 0;
        padding: 2.25rem 2.5rem 2.5rem 2.5rem;
    }

    .home-mock-project .home-mock-hero-page:has(.home-mock-project-bsky:not([hidden])) .home-mock-hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Space below sticky chrome before first topic */
.home-mock-hub .home-mock-shell {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Wrapper only — page scrolls; each row gets opacity from hub.js */
.home-mock-hub-scroll {
    margin: 0;
    padding: 0;
}

.home-mock-hub-scroll .home-mock-split,
.home-mock-hub-scroll .home-mock-grid-related > a,
.home-mock-hub-scroll .home-mock-section-head,
.home-mock-hub-scroll .home-mock-topic-spacer,
.home-mock-hub-scroll .home-mock-cta-break,
.home-mock-hub-scroll .home-mock-footer-index {
    will-change: opacity;
    transition: opacity 0.04s linear;
}

.home-mock-hub-kicker {
    margin: 0 0 0.45rem;
    font-family: var(--hm-font-sans, system-ui, sans-serif);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hm-orange);
}

.home-mock-hub-kicker a {
    color: inherit;
    text-decoration: none;
}

.home-mock-hub-kicker a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Match homepage H1 scale on hubs and project page titles */
.home-mock-hub .home-mock-hero-page h1,
.home-mock-project .home-mock-hero-page h1 {
    margin-bottom: 1.35rem;
}

/* Optional app icon above project H1 (OSS / desktop apps when we have one) */
.home-mock-project-app-icon {
    display: block;
    width: clamp(5.5rem, 12vw, 8.5rem);
    height: auto;
    margin: 0 0 1rem;
    border-radius: calc(var(--hm-radius) * 0.45);
}

.home-mock-hub .home-mock-hero-page .support,
.home-mock-project .home-mock-hero-page .support {
    margin-bottom: 0;
}

.home-mock-hub-jumps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
}

.home-mock-hub-jumps a {
    color: var(--hm-ink);
    font-family: var(--hm-font-serif);
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    font-weight: 500;
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    line-height: 1.3;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.home-mock-hub-jumps a:hover {
    border-bottom-color: currentColor;
}

.home-mock-hub-jumps a:focus,
.home-mock-hub-jumps a:focus-visible,
.home-mock-hub-jumps a:active {
    outline: none;
    box-shadow: none;
    border-color: transparent;
    border-bottom-color: transparent;
}

/* Clicked / scroll-spy current section — orange only, no browser focus ring */
.home-mock-hub-jumps a.is-active,
.home-mock-hub-jumps a.is-active:focus,
.home-mock-hub-jumps a.is-active:focus-visible {
    color: var(--hm-orange);
    border-bottom-color: currentColor;
    outline: none;
    box-shadow: none;
}

/* Hash target — keep the section title obvious under the stick */
.home-mock-hub .home-mock-topic:target .home-mock-split-copy h2,
.home-mock-hub #related:target {
    color: var(--hm-orange);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (min-width: 1100px) {
    .home-mock-hub-jumps a {
        font-size: 2.3rem; /* match homepage .exploring on wide */
    }
}

.home-mock-topic {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
}

/* Ops: air between talking split and the related cards under it */
.home-mock-topic:has(.home-mock-hub-related),
.home-mock-topic:has(.home-mock-grid-related) {
    gap: 1.5rem;
}

.home-mock-topic .home-mock-split {
    margin: 0;
}

.home-mock-topic .home-mock-split-copy h2 {
    font-family: var(--hm-font-serif);
    font-size: clamp(1.7rem, 2.4vw, 2.5rem);
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.2;
    color: var(--hm-ink);
}

.home-mock-grid-related {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

@media (min-width: 720px) {
    .home-mock-grid-related {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.home-mock-topic-spacer {
    height: clamp(3.5rem, 8vw, 6.5rem);
}

/* Consecutive talking blocks — Ops uses topic-spacers; thin hubs override below */
.home-mock-hub-scroll > .home-mock-topic + .home-mock-topic {
    margin-top: 1.75rem;
}

.home-mock-hub-scroll > .home-mock-topic + .home-mock-section-head {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Thin hubs: more air above Related than between talking blocks */
.home-mock-hub-stack .home-mock-hub-scroll > .home-mock-topic + .home-mock-section-head {
    margin-top: var(--hm-section-space);
}

.home-mock-hub-blurb {
    margin-bottom: var(--hm-section-space);
    padding: 1.75rem 1.85rem 1.9rem;
}

.home-mock-hub-blurb.home-mock-block-ops {
    color: #fff;
    background: var(--hm-orange);
    border-color: var(--hm-orange);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-mock-hub-blurb .home-mock-block-summary {
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.35rem;
}

.home-mock-hub-blurb ul {
    margin: 0;
    padding: 0 0 0 2.25rem;
    list-style: disc;
}

.home-mock-hub-blurb li {
    margin: 0 0 0.85rem;
    padding-left: 0.35rem;
    font-size: clamp(1.35rem, 1.95vw, 1.85rem);
    color: #fff;
    line-height: 1.45;
}

.home-mock-hub-blurb li:last-child {
    margin-bottom: 0;
}

/* Hub related work — alternating image / copy rows (not the home card grid) */

.home-mock-splits {
    display: flex;
    flex-direction: column;
    gap: var(--hm-gap);
    margin-bottom: var(--hm-section-space);
}

.home-mock-split {
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 252, 248, 0.92);
    border: 1px solid rgba(40, 30, 20, 0.08);
    border-radius: var(--hm-radius);
    overflow: hidden;
    min-height: 0;
}

@media (min-width: 800px) {
    .home-mock-split {
        grid-template-columns: 1fr 1fr;
        min-height: 16rem;
    }

    .home-mock-split-flip .home-mock-split-media {
        order: 2;
    }

    .home-mock-split-flip .home-mock-split-copy {
        order: 1;
    }
}

.home-mock-split-media {
    min-height: 12rem;
    background-color: rgba(212, 85, 0, 0.18);
    background-image:
        linear-gradient(rgba(20, 12, 8, 0.18), rgba(20, 12, 8, 0.28)),
        var(--split-photo);
    background-size: cover;
    background-position: center;
}

/* No --split-photo yet: solid wash + label — never use stock beach/sunset in cards */
.home-mock-split-media.home-mock-split-media-tbd {
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(90, 45, 10, 0.55);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-mock-split-media.home-mock-split-media-tbd::after {
    content: "Image TBD — project or related";
}

@media (min-width: 800px) {
    .home-mock-split-media {
        min-height: 100%;
    }
}

.home-mock-split-copy {
    padding: 1.75rem 1.85rem 1.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-mock-split-copy h3 {
    font-family: var(--hm-font-serif);
    font-size: clamp(1.7rem, 2.4vw, 2.5rem);
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.2;
    color: var(--hm-ink);
}

.home-mock-split-copy p {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 1.95vw, 1.85rem);
    color: var(--hm-muted);
    line-height: 1.45;
}

/*
 * Hubs: left = media/light, right = solid copy (logo-sub).
 * Flip topics keep copy on the left (wash) — white left, black right.
 * Parent stays transparent (no white frame); media cell keeps its own wash/TBD.
 */
.home-mock-hub .home-mock-split:not(.home-mock-split-flip) {
    background: transparent;
    border: none;
    overflow: hidden;
    border-radius: var(--hm-radius);
}
.home-mock-hub .home-mock-split:not(.home-mock-split-flip) .home-mock-split-media {
    background-color: rgba(255, 248, 240, 0.94);
}
.home-mock-hub .home-mock-split:not(.home-mock-split-flip) .home-mock-split-media-tbd {
    background-color: rgba(255, 248, 240, 0.96);
    background-image: linear-gradient(
        rgba(212, 85, 0, 0.12),
        rgba(212, 85, 0, 0.12)
    );
    color: rgba(90, 45, 10, 0.55);
}
.home-mock-hub .home-mock-split:not(.home-mock-split-flip) .home-mock-split-copy,
.home-mock-hub .home-mock-split-copy-solid {
    background: var(--hm-logo-sub);
    color: #fff;
}
.home-mock-hub .home-mock-split:not(.home-mock-split-flip) .home-mock-split-copy h2,
.home-mock-hub .home-mock-split:not(.home-mock-split-flip) .home-mock-split-copy h3,
.home-mock-hub .home-mock-topic .home-mock-split:not(.home-mock-split-flip) .home-mock-split-copy h2,
.home-mock-hub .home-mock-split-copy-solid h2,
.home-mock-hub .home-mock-split-copy-solid h3,
.home-mock-hub .home-mock-topic .home-mock-split-copy-solid h2 {
    color: #fff;
}
.home-mock-hub .home-mock-split:not(.home-mock-split-flip) .home-mock-split-copy p,
.home-mock-hub .home-mock-split-copy-solid p {
    color: rgba(255, 255, 255, 0.92);
}

/*
 * Hub related cards under a topic — match the talking header:
 *   black header (non-flip) → white, black, white (even = grey)
 *   white header (flip)     → black, white, black (odd = grey)
 * Standalone related strips (Docs etc.) keep black, white, black.
 * Soft alpha at rest; solid on hover / mobile inview.
 */
.home-mock-hub .home-mock-topic:has(.home-mock-split-flip) .home-mock-grid-related > a:nth-child(odd),
.home-mock-hub .home-mock-topic:has(.home-mock-split:not(.home-mock-split-flip)) .home-mock-grid-related > a:nth-child(even),
.home-mock-hub .home-mock-hub-scroll > .home-mock-hub-related > a:nth-child(odd) {
    background: var(--hm-logo-sub-soft);
    border-color: var(--hm-logo-sub);
    border-width: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
}
.home-mock-hub .home-mock-topic:has(.home-mock-split-flip) .home-mock-grid-related > a:nth-child(odd) h3,
.home-mock-hub .home-mock-topic:has(.home-mock-split-flip) .home-mock-grid-related > a:nth-child(odd) p,
.home-mock-hub .home-mock-topic:has(.home-mock-split:not(.home-mock-split-flip)) .home-mock-grid-related > a:nth-child(even) h3,
.home-mock-hub .home-mock-topic:has(.home-mock-split:not(.home-mock-split-flip)) .home-mock-grid-related > a:nth-child(even) p,
.home-mock-hub .home-mock-hub-scroll > .home-mock-hub-related > a:nth-child(odd) h3,
.home-mock-hub .home-mock-hub-scroll > .home-mock-hub-related > a:nth-child(odd) p {
    color: #fff;
}
@media (hover: hover) and (pointer: fine) {
    .home-mock-hub .home-mock-topic:has(.home-mock-split-flip) .home-mock-grid-related > a:nth-child(odd):hover,
    .home-mock-hub .home-mock-topic:has(.home-mock-split:not(.home-mock-split-flip)) .home-mock-grid-related > a:nth-child(even):hover,
    .home-mock-hub .home-mock-hub-scroll > .home-mock-hub-related > a:nth-child(odd):hover {
        background: var(--hm-logo-sub);
    }
}
@media (hover: none), (pointer: coarse) {
    .home-mock-hub .home-mock-topic:has(.home-mock-split-flip) .home-mock-grid-related > a:nth-child(odd).is-inview,
    .home-mock-hub .home-mock-topic:has(.home-mock-split:not(.home-mock-split-flip)) .home-mock-grid-related > a:nth-child(even).is-inview,
    .home-mock-hub .home-mock-hub-scroll > .home-mock-hub-related > a:nth-child(odd).is-inview {
        background: var(--hm-logo-sub);
    }
}

.home-mock-split:hover,
.home-mock-split:focus {
    text-decoration: none;
}

.home-mock-split:hover h3,
.home-mock-split:focus h3 {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.home-mock-split .home-mock-tags {
    margin-top: auto;
}

/*
 * Thin-hub stack (Docs / Mobile / Web) — last in file so border resets stick.
 * .home-mock-topic { gap: 1.5rem } is for Ops (split → related under it).
 * On stack hubs that gap/padding stacks between talking blocks — zero it.
 */
.home-mock-hub-stack .home-mock-topic {
    padding: 0;
    gap: 0;
    margin: 0;
}

.home-mock-hub-stack .home-mock-topic .home-mock-split {
    border: 1px solid var(--hm-rule);
    border-radius: var(--hm-radius);
    background: rgba(255, 252, 248, 0.88);
}

/* Non-flip solid-right topics: no wash frame around the grey copy; media keeps TBD wash */
.home-mock-hub-stack .home-mock-topic .home-mock-split:not(.home-mock-split-flip) {
    background: transparent;
    border: none;
    border-radius: var(--hm-radius);
    overflow: hidden;
}
.home-mock-hub-stack .home-mock-topic .home-mock-split:not(.home-mock-split-flip) .home-mock-split-media,
.home-mock-hub-stack .home-mock-topic .home-mock-split:not(.home-mock-split-flip) .home-mock-split-media-tbd {
    background-color: rgba(255, 248, 240, 0.96);
}

/* Half of the old oversized gap — ~half --hm-section-space, not flush and not full section air */
.home-mock-hub-stack .home-mock-hub-scroll > .home-mock-topic + .home-mock-topic {
    margin-top: calc(var(--hm-section-space) / 2);
    padding-top: 0;
}

/* Rounded blocks — no shared edge rule between topics */
.home-mock-hub-stack .home-mock-hub-scroll > .home-mock-topic + .home-mock-topic .home-mock-split {
    border-top: none;
}

/* ---- Project detail mocks (/project/{id}) ---- */

.home-mock-project .home-mock-hero-page {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Dreams hero — Bluesky posts as separate black cards with air between */
.home-mock-project-bsky {
    display: none;
    min-width: 0;
    align-self: stretch;
}

.home-mock-project-bsky:not([hidden]) {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* Mobile: space above feed when it stacks under the hero copy */
@media (max-width: 1099px) {
    .home-mock-project-bsky:not([hidden]) {
        margin-top: 1.75rem;
        padding-top: 0.25rem;
    }
}

.home-mock-project-bsky-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem; /* white space / photo showing between posts */
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-mock-project-bsky-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    text-decoration: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.32); /* same as homepage chatterbox */
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--hm-radius);
    padding: 0.85rem; /* equal L/T/B — thumb fills that inner height as a square */
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.home-mock-project-bsky-card:hover {
    background: rgba(0, 0, 0, 0.42);
}

.home-mock-project-bsky-card:focus,
.home-mock-project-bsky-card:focus-visible,
.home-mock-project-bsky-card:active {
    outline: none;
    box-shadow: none;
}

.home-mock-project-bsky-thumb {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    min-height: 6.5rem; /* larger square; grows with text block */
    border-radius: calc(var(--hm-radius) * 0.55);
    background: rgba(0, 0, 0, 0.35) center / cover no-repeat;
    align-self: stretch;
    justify-self: start;
}

.home-mock-project-bsky-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 133, 254, 0.85);
    color: #fff;
}

.home-mock-project-bsky-thumb-empty svg {
    width: 1.65rem;
    height: 1.65rem;
}

.home-mock-project-bsky-text {
    margin: 0;
    align-self: center;
    font-size: clamp(1.35rem, 1.85vw, 1.65rem); /* nearer homepage stream type */
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.94);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.home-mock-project-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem 2rem;
    align-items: start;
}

@media (min-width: 960px) {
    .home-mock-project-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .home-mock-project-cta,
    .home-mock-project-layout > .home-mock-footer-index {
        grid-column: 1 / -1;
    }
}

.home-mock-project-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Screenshots / Articles / Related — identical gap above every strip */
.home-mock-project-main .home-mock-section-head,
.home-mock-project-aside .home-mock-section-head {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.home-mock-project-card-grid {
    margin-bottom: 0;
}

/* Left column ~2/3 — 1–2 cols for shot/article cards */
.home-mock-project-main .home-mock-project-card-grid.home-mock-grid-projects,
.home-mock-project-main .home-mock-project-card-grid.home-mock-grid-stories {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .home-mock-project-main .home-mock-project-card-grid.home-mock-grid-projects,
    .home-mock-project-main .home-mock-project-card-grid.home-mock-grid-stories {
        grid-template-columns: 1fr 1fr;
    }
}

/* Section strip titles — keep lead font-size; only shorten the bar height */
.home-mock-project .home-mock-section-head .home-mock-lead {
    min-height: calc((var(--hm-head-pad-y) * 1.1) + 1.35em);
    padding: calc(var(--hm-head-pad-y) * 0.5) var(--hm-head-pad-x);
}

/* Overview — match homepage Operational systems card (solid logo-sub, no glass) */
.home-mock-project-body {
    border: none;
    border-radius: var(--hm-radius);
    background: var(--hm-logo-sub);
    padding: 2.5rem 2.75rem 2.75rem;
    color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        -2px -1px 6px rgba(26, 20, 16, 0.06),
        4px 6px 14px rgba(26, 20, 16, 0.22),
        2px 3px 6px rgba(26, 20, 16, 0.12);
}

.home-mock-project-body p,
.home-mock-project-body li {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
    font-size: clamp(1.45rem, 2.1vw, 2rem); /* match card body */
}

.home-mock-project-body p:last-child,
.home-mock-project-body li:last-child {
    margin-bottom: 0;
}

.home-mock-project-quote {
    margin: 1.15rem 0;
    padding: 0;
    border: none;
    font-style: italic;
}

.home-mock-project-quote p {
    margin: 0;
}

.home-mock-project-ext {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.home-mock-project-ext:hover {
    color: #ffe8d6;
}

/* Screenshot cards — full-bleed image; hover black footer caption (no title) */
.home-mock-project-shot-card {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 500 / 360;
    cursor: zoom-in;
}

.home-mock-project-shot-card .home-mock-project-shot-thumb {
    position: absolute;
    inset: 0;
    margin: 0;
    height: auto;
    border-radius: 0;
    background-color: rgba(26, 20, 16, 0.12);
    background-image: var(--shot-photo);
    background-size: cover;
    background-position: center;
}

.home-mock-project-shot-thumb-tbd {
    background-image: none;
    background-color: rgba(212, 85, 0, 0.18);
}

.home-mock-project-shot-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.35;
    transform: translateY(100%);
    transition: transform 0.18s ease;
}

.home-mock-project-shot-card:hover .home-mock-project-shot-cap,
.home-mock-project-shot-card:focus .home-mock-project-shot-cap {
    transform: translateY(0);
}

/* Article date — match hero “Our Dreams” kicker size (12.5), not nav (15.5); black */
.home-mock-project .home-mock-block p.home-mock-project-article-date {
    margin: -0.35rem 0 0.75rem;
    font-family: var(--hm-font-sans, system-ui, sans-serif);
    font-size: clamp(1rem, 1.4vw, 1.25rem); /* same as .home-mock-hub-kicker */
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--hm-ink);
}

/* About + related — right column (desktop) */
.home-mock-project-aside {
    display: flex;
    flex-direction: column;
    gap: 0; /* Related spacing via section-head only — match left Articles */
    min-width: 0;
}

.home-mock-project-about {
    border: 1px solid var(--hm-rule);
    border-radius: var(--hm-radius);
    background: var(--hm-wash);
    padding: 2.25rem 2.5rem;
}

.home-mock-project-about h2 {
    font-family: var(--hm-font-serif);
    font-size: clamp(1.7rem, 2.4vw, 2.5rem); /* match card h3 */
    font-weight: 600;
    margin: 0 0 1.25rem;
    line-height: 1.2;
    color: var(--hm-ink);
}

.home-mock-project-about a {
    color: var(--hm-orange);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.home-mock-project-about a:hover {
    color: var(--hm-ink);
}

.home-mock-project-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* Label over value — About meta only, not the page layout */
.home-mock-project-meta > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

.home-mock-project-meta dt {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hm-muted);
}

.home-mock-project-meta dd {
    margin: 0;
    font-size: clamp(1.45rem, 2.1vw, 2rem); /* match .home-mock-block p */
    color: var(--hm-ink);
    line-height: 1.45;
}

.home-mock-project-meta-quiet {
    color: var(--hm-muted);
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

.home-mock-project-meta .home-mock-tags {
    margin-top: 0.15rem;
}

.home-mock-project-meta a.home-mock-tag {
    text-decoration: none;
    color: #fff;
}

.home-mock-project-meta a.home-mock-tag:hover {
    color: #fff;
    filter: brightness(1.08);
}

.home-mock-project-gh-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.home-mock-project-gh-links > li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    min-height: 1.4em;
}

.home-mock-project-gh-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: clamp(1.4rem, 1.85vw, 1.7rem); /* under Active/meta values, not tiny */
    line-height: 1.35;
    color: var(--hm-ink);
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.home-mock-project-gh-links a:hover {
    color: var(--hm-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.home-mock-project-gh-links a:focus,
.home-mock-project-gh-links a:focus-visible,
.home-mock-project-gh-links a:active {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.home-mock-project-gh-pair {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
}

.home-mock-project-gh-icon {
    display: block;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    color: var(--hm-ink); /* black mark, not orange */
}

.home-mock-project-bsky-icon {
    color: #1185fe;
}

.home-mock-project-related-grid {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

.home-mock-project-cta {
    margin-top: 1rem;
}

/* Lightbox — mid-size, not full-bleed */
.home-mock-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(10, 8, 6, 0.72);
}

.home-mock-lightbox[hidden] {
    display: none;
}

.home-mock-lightbox-img {
    max-width: min(920px, 92vw);
    max-height: 78vh;
    border-radius: var(--hm-radius);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    background: #1a1410;
}

.home-mock-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.home-mock-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

body.home-mock-lightbox-open {
    overflow: hidden;
}

/* ---- Projects index (/projects) — Work mock; Stories reuses same shape ---- */

.home-mock-projects-index .home-mock-projects-hero {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.home-mock-projects-index .home-mock-projects-hero h1 {
    margin-bottom: 1.25rem;
}

.home-mock-projects-filter {
    margin-top: 0;
    gap: 0.55rem;
}

button.home-mock-projects-filter-tag {
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    opacity: 1;
    transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

button.home-mock-projects-filter-tag:hover {
    filter: brightness(1.06);
}

/* Selected — solid black + white type (not a white ring) */
button.home-mock-projects-filter-tag.is-on,
button.home-mock-projects-filter-tag[aria-pressed="true"] {
    background: var(--hm-logo-sub);
    color: #fff;
    outline: none !important;
    filter: none;
}

.home-mock-projects-grid > a.home-mock-block[hidden] {
    display: none !important;
}

.home-mock-projects-grid .home-mock-projects-card-tag {
    cursor: pointer;
}

.home-mock-projects-empty {
    margin: 1.5rem 0 0;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    color: var(--hm-muted);
    font-style: italic;
}

.home-mock-projects-empty[hidden] {
    display: none;
}

.home-mock-stories-year-filter {
    margin-top: 0.65rem;
}

.home-mock-stories-index .home-mock-projects-grid,
.home-mock-stories-index #stories-grid {
    min-width: 0;
    max-width: 100%;
}

/* Stories index cards — square thumb left (like Bluesky); date uses standard article-date */
a.home-mock-story-card {
    display: grid;
    grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
    padding: 1rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.home-mock-story-card-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: calc(var(--hm-radius) * 0.55);
    background: rgba(0, 0, 0, 0.08) center / cover no-repeat;
    background-image: var(--story-thumb);
}

.home-mock-story-card-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.home-mock-story-card-copy h3 {
    margin: 0 0 0.35rem;
}

.home-mock-stories-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin: 1.75rem 0 0.5rem;
}

.home-mock-stories-pager[hidden] {
    display: none;
}

.home-mock-stories-pager-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-mock-stories-pager-btn,
.home-mock-stories-pager-num {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: clamp(1.25rem, 1.6vw, 1.45rem);
    line-height: 1.2;
    color: var(--hm-ink);
    background: var(--hm-wash);
    border: 1px solid var(--hm-rule);
    border-radius: var(--hm-radius);
    padding: 0.55rem 0.95rem;
}

.home-mock-stories-pager-btn:hover:not(:disabled),
.home-mock-stories-pager-num:hover {
    background: rgba(255, 255, 255, 0.92);
}

.home-mock-stories-pager-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.home-mock-stories-pager-num.is-on,
.home-mock-stories-pager-num[aria-current="page"] {
    background: var(--hm-ink);
    color: #fff;
    border-color: var(--hm-ink);
}

/* ---- Story article (/story/{id}) ---- */

.home-mock-story .home-mock-hero-page {
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Story title — ~half hub/project hero H1 (long article titles) */
.home-mock-story .home-mock-hero-page h1 {
    font-size: clamp(1.625rem, 4vw, 3.75rem);
    margin-bottom: 1rem;
}

@media (min-width: 1100px) {
    .home-mock-story .home-mock-hero-page h1 {
        font-size: 4rem;
    }
}

.home-mock-story-date {
    margin: -0.35rem 0 0;
    font-family: var(--hm-font-sans, system-ui, sans-serif);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--hm-ink);
}

.home-mock-story-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
}

/* Mobile: article → related projects → Images (DOM order). Desktop: projects left. */
@media (min-width: 960px) {
    .home-mock-story-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .home-mock-story-related-projects {
        grid-column: 1;
        grid-row: 1;
    }

    .home-mock-story-body {
        grid-column: 2;
        grid-row: 1;
    }
}

.home-mock-story-related-projects {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Story sidebar: project cards — plain RooJS-height guides the media thumb square */
.home-mock-story-project-cards {
    /* Top pad is the rhythm; left + gap-to-text match it */
    --story-card-pad: 2.25rem; /* same as .home-mock-block vertical */
    /* ~plain no-image card outer height (title + blurb + tags + pad) */
    --story-card-base: 16.5rem;
    --story-thumb-size: calc(var(--story-card-base) - (2 * var(--story-card-pad)));

    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Default: plain wash card (no image) — natural .home-mock-block padding */
a.home-mock-story-project-card {
    display: block;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* With image: square = plain-card height − pad; equal pad/gap around thumb */
a.home-mock-story-project-card--media {
    display: grid;
    grid-template-columns: var(--story-thumb-size) minmax(0, 1fr);
    gap: var(--story-card-pad); /* space between thumb and text = top */
    align-items: start;
    padding: var(--story-card-pad); /* left = top = bottom = right */
    min-height: var(--story-card-base);
    overflow: hidden;
}

.home-mock-story-project-thumb {
    width: var(--story-thumb-size);
    height: var(--story-thumb-size);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: calc(var(--hm-radius) * 0.55);
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.08);
    background-image: var(--story-thumb);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.home-mock-story-project-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 0.35rem;
}

.home-mock-story-project-copy h3 {
    margin: 0;
}

.home-mock-story-project-copy p {
    margin: 0;
}

.home-mock-story-project-copy .home-mock-tags {
    margin-top: 0.25rem;
}

.home-mock-story-body {
    border: none;
    border-radius: var(--hm-radius);
    background: var(--hm-logo-sub);
    padding: 2.5rem 2.75rem 2.75rem;
    color: #fff;
    box-shadow:
        -2px -1px 6px rgba(26, 20, 16, 0.06),
        4px 6px 14px rgba(26, 20, 16, 0.22),
        2px 3px 6px rgba(26, 20, 16, 0.12);
}

.home-mock-story-body p {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.5;
    font-size: clamp(1.45rem, 2.1vw, 2rem); /* restore — match card body */
}

.home-mock-story-body p:last-child {
    margin-bottom: 0;
}

.home-mock-story-body .home-mock-project-ext {
    color: #fff;
}

.home-mock-story-body .home-mock-project-ext:hover {
    color: #ffe8d6;
}

.home-mock-story-embed {
    margin: 1.35rem 0 1.5rem;
    padding: 0;
    border: none;
}

.home-mock-story-embed-shot {
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--hm-radius);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

.home-mock-story-embed-shot .home-mock-project-shot-thumb {
    min-height: 14rem;
}

.home-mock-story .home-mock-section-head {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.home-mock-story-shots {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

@media (min-width: 720px) {
    .home-mock-story-shots {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    .home-mock-story-shots {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.home-mock-story-more {
    margin-bottom: 0;
}