/* =========================================================
   Page frame shared by every page.
   One content width (1200px) and one side gutter, so the header,
   the home panels, the work page, growth, about, case study heads
   and the footer all line up on the same left and right edges.
   Loaded last on every page so it wins over older page rules.
   ========================================================= */

:root {
    --page-max: 1200px;
    --page-gutter: 24px;
}

@media (max-width: 1000px) {
    :root {
        --page-gutter: 16px;
    }
}

@media (max-width: 640px) {
    :root {
        --page-gutter: 12px;
    }
}

/* Header: logo and buttons sit on the same edges as the content */
.nh-inner {
    max-width: calc(var(--page-max) + 2 * var(--page-gutter));
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* Boxed panels (home, about, contact on work) */
.bw-panel,
.tl-panel {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--page-gutter));
    max-width: var(--page-max);
    margin-left: auto !important;
    margin-right: auto !important;
}

.tl-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Full width sections whose content should sit on the same edges */
.projects-section,
.highlight-project-section,
.view-more-cta-section {
    box-sizing: border-box;
    max-width: calc(var(--page-max) + 2 * var(--page-gutter)) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
}

.gr-wrap,
.csx-hero {
    box-sizing: border-box;
    max-width: calc(var(--page-max) + 2 * var(--page-gutter));
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* Footer: dark band stays full width, its content lines up */
.footer-section {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
}

.footer-content,
.footer-bottom {
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
}

/* Home hero: full width section, content kept on the page edges.
   No max-width here: the side padding is worked out from the screen width, so a capped
   section (styles.css sets 1920px) would squeeze the content to nothing on 2560px+ screens
   and push the mascot over the headline. */
.hero-section {
    max-width: none !important;
    padding-left: max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) !important;
    padding-right: max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) !important;
}

/* Home hero on big screens: title on one line, subtitle in two balanced lines,
   and enough room on the left for the mascot and its floating tags (about 620px) */
@media (min-width: 1280px) {
    .hero-section {
        gap: 40px !important;
    }

    .hero-text-side {
        flex: 0 0 auto;
        width: 560px;
        max-width: none;
    }


    .hero-visual-side {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hero-mascot {
        max-height: 470px;
    }

    .hero-title {
        white-space: nowrap;
    }

    .hero-subtitle {
        max-width: 560px;
        text-wrap: pretty;
    }
}

/* Home hero subtitle: both sentences run on as one paragraph, a size smaller (asked 4 Oct 2026) */
.hero-subtitle .hero-sentence {
    display: inline;
}

.hero-section .hero-subtitle {
    font-size: 15px !important;
}

@media (min-width: 768px) {
    .hero-section .hero-subtitle {
        font-size: 17px !important;
    }
}

/* Home hero title is 28px on phones (asked 4 Oct 2026) */
@media (max-width: 640px) {
    .hero-section .hero-title {
        font-size: 28px !important;
    }

    /* every other page title (Growth, Work, About, case studies) matches it on phones;
       :root raises specificity above type.css and styles.css, which load later */
    :root :is(.gr-hero-title, .csx-title, .about-page .bw-title, h1.bw-title, .work-page #startup .page-title) {
        font-size: 28px !important;
        line-height: 1.05 !important;
    }

    /* the subheading sits 12px under the page title, like the home hero */
    :root :is(.gr-hero-title, .work-page #startup .page-title) {
        margin-bottom: 12px !important;
    }

    /* kickers (small uppercase lines) step down to 11px on phones so they sit quieter
       above the 28px titles; were 12 to 14px */
    :root :is(.gr-eyebrow, .page-eyebrow, .highlight-eyebrow, .ab-eyebrow, .ib-eyebrow,
              .hs-eyebrow, .asknish-kicker, .csx-toc-label, .sw-callout-label, .bm-label) {
        font-size: 11px !important;
        letter-spacing: 0.1em !important;
    }

    /* nothing on a phone is bigger than the 28px hero title: the Ask me title and the
       hand drawn "hi" by the contact letter come down too */
    :root .asknish-headline,
    :root .asknish-modal.has-chat .asknish-headline {
        font-size: 24px !important;
    }

    :root .lt-hi,
    :root .lt-yay {
        font-size: 28px !important;
    }

    /* every CTA in a card or under a section title is full width on phones (asked 5 Oct 2026):
       More case studies cards, the LinkedIn / X pair and Show all posts on home, InlineAI hero.
       Overlay buttons on videos and small tools (Shuffle, On this page) stay as they are. */
    :root .csx-more-go,
    :root .csx-read-cta {
        display: flex !important;
        align-self: stretch;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    :root #talks .tk-links {
        width: 100%;
    }

    :root #talks .tk-links > a {
        flex: 1 1 0;
        justify-content: center;
    }

    :root #talks .tk-more {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    :root .ia-hero-actions > .ia-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Mascot and its tags sit a little further left on wide screens (asked 1 Oct 2026);
   below 1400px the tags would get too close to the screen edge */
@media (min-width: 1400px) {
    .hero-visual-side .hero-content-wrapper {
        transform: translateX(-32px);
    }
}

/* Phone hero: breathing room between the header line and the mascot's banner (asked 4 Oct 2026) */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 32px !important;
    }
}

/* Cream background with a faint, still paper grain on every page (asked 4 Oct 2026; was home only).
   SVG fractal noise tile, no animation and no WebGL, so it costs nothing to scroll.
   Grain size is baseFrequency (0.85, lower = bigger); strength is the opacity inside the SVG (0.11).
   Pages with the fixed #mesh-net-bg layer (home, work, about) show it there, the rest on body. */
body,
#mesh-net-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.2  0 0 0 0 0.14  0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    background-repeat: repeat;
}

/* Tablet hero, 769 to 1279px (asked 6 Oct 2026): the tags sat in rows above and below the mascot
   (769 to 900) or ran off the left edge next to an oversized mascot (901 to 1279). Now, like the
   phone layout, the two tag columns sit on the left and right of the mascot, vertically centred,
   and the mascot is sized to its column. */
@media (min-width: 769px) and (max-width: 1279px) {
    .hero-section {
        gap: 32px !important;
        align-items: center;
    }

    .hero-text-side {
        flex: 0 0 44%;
        max-width: 44%;
        min-width: 0;
    }

    .hero-visual-side {
        flex: 1 1 0;
        min-width: 0;
    }

    .hero-visual-side .hero-content-wrapper {
        flex-direction: row;
        position: relative;
        width: 100%;
    }

    .hero-visual-side .hero-mascot {
        height: min(52vh, 36vw, 440px) !important;
        max-height: none;
    }

    .hero-visual-side .tag-group {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        flex-wrap: nowrap;
        gap: clamp(14px, 2.4vw, 28px);
        width: auto;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    .hero-visual-side .left-tags {
        left: 0;
        right: auto;
        align-items: flex-start;
    }

    .hero-visual-side .right-tags {
        right: 0;
        left: auto;
        align-items: flex-end;
    }

    .hero-visual-side .tag-group .skill-tag {
        font-size: 13px !important;
        padding: 6px 14px;
        margin: 0;
        pointer-events: auto;
    }
}