/* ==========================================================================
   Founders Arm — shared design system
   Tokens extracted from the live site (design-output/shared-design-system.json).
   Every page loads this file first, then its own stylesheet.
   ========================================================================== */

:root {
    /* ── Color: surfaces ───────────────────────────────────────────────── */
    --c-ink:            #020000;  /* near-black, primary surface + body text */
    --c-ink-soft:       #030000;
    --c-ink-deep:       #0c0c12;  /* darkest panel */
    --c-ink-warm:       #26271b;  /* olive-black, used behind light type */

    --c-bone:           #e4e5dd;  /* page ground, warm off-white */
    --c-bone-light:     #edeee4;
    --c-bone-mid:       #dadccd;
    --c-bone-deep:      #cbccb8;  /* muted band, e.g. the CTA block */
    --c-white:          #ffffff;

    /* ── Color: accent ─────────────────────────────────────────────────── */
    --c-lime:           #cafe14;  /* primary accent — buttons, pills, arrows */
    --c-lime-soft:      #ddf346;  /* secondary accent */

    /* ── Color: text ───────────────────────────────────────────────────── */
    --c-text:           #020000;
    --c-text-muted:     #5a5a5a;  /* body copy on light grounds */
    --c-text-soft:      #212121;
    --c-text-invert:    #ffffff;
    --c-text-invert-70: rgba(255, 255, 255, 0.7);  /* footer links */
    --c-text-invert-80: rgba(255, 255, 255, 0.8);

    /* ── Type families ─────────────────────────────────────────────────── */
    /* Display is a serif; UI and body are a grotesque. Both are licensed
       webfonts on the source site — swap in your own faces here and the
       whole system follows. The fallbacks are deliberate, not placeholders. */
    --font-display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    --font-ui:      "Apfel Grotezk", "Suisse Int'l", system-ui, -apple-system,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ── Type scale ────────────────────────────────────────────────────── */
    --t-xs:    12px;
    --t-sm:    14px;   /* eyebrow labels, captions */
    --t-base:  16px;   /* body */
    --t-md:    18px;
    --t-lg:    20px;
    --t-xl:    24px;
    --t-2xl:   28px;
    --t-3xl:   32px;   /* hero subhead, card titles */
    --t-4xl:   40px;
    --t-5xl:   48px;   /* section headings */
    --t-6xl:   56px;
    --t-7xl:   64px;   /* hero */

    --w-regular: 400;
    --w-medium:  500;

    --lh-tight: 1.1;   /* display type */
    --lh-snug:  1.3;
    --lh-body:  1.55;

    /* ── Spacing (8px base) ────────────────────────────────────────────── */
    --s-1:   4px;
    --s-2:   8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  24px;
    --s-6:  32px;
    --s-7:  40px;
    --s-8:  48px;
    --s-9:  64px;
    --s-10: 80px;   /* section padding-bottom on the source site */
    --s-11: 120px;

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --r-sm:    10px;
    --r-md:    19px;
    --r-lg:    24px;
    --r-xl:    36px;
    --r-2xl:   50px;
    --r-3xl:   80px;   /* large panels */
    --r-pill:  999px;  /* nav bar, buttons, tags */
    --r-round: 100%;   /* circular arrow buttons */

    /* ── Layout ────────────────────────────────────────────────────────── */
    --container:     1440px;  /* design viewport */
    --max-width:     var(--container);
    --container-pad: 40px;
    --gutter:        40px;    /* page side gutter; the spine sits on it */
    --grid-gap:      24px;    /* gap between cards inside a grid */

    /* ── Semantic aliases ──────────────────────────────────────────────── */
    /* Role-named handles over the raw palette above. Components reference
       these, so a re-skin means changing this block and nothing else. */
    --bg-primary:      var(--c-bone);
    --bg-elevated:     var(--c-bone-light);
    --bg-inverse:      var(--c-ink);

    --text-primary:    var(--c-text);
    --text-secondary:  var(--c-text-muted);
    --text-inverse:    var(--c-text-invert);

    --text-muted:      var(--c-text-muted);
    --accent-lime:     var(--c-lime);

    --border-subtle:   rgba(2, 0, 0, 0.10);
    --border-strong:   rgba(2, 0, 0, 0.24);
    --border-color:    var(--border-subtle);

    --bg-pill:         var(--c-bone-mid);   /* the pill sits a shade under the page ground */
    --pill-border:     var(--border-strong);
    --bg-card:         var(--c-bone-light);

    --font-serif:      var(--font-display);

    --header-height:   72px;
    --z-header:        100;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-bone);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: var(--t-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ──────────────────────────────────────────────────────────────────────────
   Page wrapper + vertical spine
   The wrapper is the single content column on every page. Its ::before draws
   a continuous hairline down the left gutter, which is what ties the ruled
   layout together — one line, not a border per section.
   ────────────────────────────────────────────────────────────────────────── */

.page-wrapper {
    position: relative;   /* anchors the spine */
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.page-wrapper::before {
    content: "";
    position: absolute;
    left: var(--gutter);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
    /* Behind the sections: a panel with its own ground covers the line rather
       than being crossed by it, which is how the source reads. */
    z-index: -1;
    pointer-events: none;
}

/* Sections already sit inside the wrapper, so their own container must not
   pad or narrow a second time. */
.page-wrapper .container {
    max-width: none;
    padding-inline: 0;
}

/* Horizontal rule between major sections */
.section-divider {
    width: 100%;
    height: 1px;
    background: var(--border-color);
}

/* Breaks a band out of the wrapper's gutter so it runs edge to edge. */
.bleed {
    margin-inline: calc(var(--gutter) * -1);
}

/* ──────────────────────────────────────────────────────────────────────────
   Pill / tag badge — "/ Team", "/ How We Build", "/ FAQ"
   ────────────────────────────────────────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid var(--pill-border);
    border-radius: 20px;
    background: var(--bg-pill);
    font-size: 13px;
    font-weight: 500;
}

.pill__slash {
    color: var(--text-muted);
}

/* Outline button — same shape as the footer's, available anywhere */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid var(--text-primary);
    border-radius: 20px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
}

.btn-outline:hover {
    background: var(--text-primary);
    color: var(--text-inverse);
}

/* ──────────────────────────────────────────────────────────────────────────
   Page sections shared by Home and About
   ────────────────────────────────────────────────────────────────────────── */

/* Hero — headline and CTA left, supporting claim top-right.
   The claim is a narrow column pinned to the top so it sits level with the
   headline's first line, not marooned beside the button. */
.hero {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 40px;
    align-items: start;
    padding: 60px 0 50px;
}

/* Sized so the headline sets on one line at the design width, as in the
   reference, rather than being broken by a hard <br>. */
.hero__title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1.05;
    text-wrap: balance;
}

.hero__cta {
    margin-top: 28px;
}

.hero__claim {
    font-size: 14px;
    font-weight: 600;
}

.hero__claim-sub {
    margin-top: var(--s-2);
    font-size: 13px;
    color: var(--text-muted);
}

/* Founder note — card floating over a full-width band */
.founder-note {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    /* Placeholder for the wheat/grass field photograph: warm golden-green.
       Swap this one declaration for the image when it is available. */
    background:
        linear-gradient(115deg,
            #b8a24e 0%,
            #cbb865 26%,
            #9fae52 55%,
            #6f8a3c 100%);
    min-height: 620px;
}

.founder-note__card {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: min(460px, calc(100% - 80px));
    padding: var(--s-6);
    border-radius: 16px;
    background: var(--bg-primary);
}

.founder-note__title {
    margin-bottom: var(--s-4);
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
}

.founder-note__body {
    font-size: 13px;
    color: var(--text-muted);
}

/* The card stacks several short paragraphs; the reset zeroes p margins,
   so they need their own rhythm. */
.founder-note__body + .founder-note__body {
    margin-top: var(--s-3);
}

.founder-note__sign {
    margin-top: var(--s-5);
    font-size: 14px;
    font-weight: 600;
}

.founder-note__role {
    font-size: 13px;
    color: var(--text-muted);
}

/* Team */
.team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    margin-top: var(--s-8);
}

.team-member__photo {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
}

.team-member__name {
    margin-top: var(--s-3);
    font-size: 14px;
    font-weight: 600;
}

.team-member__role {
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--s-6);
    }

    .team__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Absolute positioning has nowhere to float once the band is narrow */
    .founder-note {
        min-height: 0;
    }

    .founder-note__card {
        position: static;
        transform: none;
        width: auto;
        margin: 320px var(--s-5) var(--s-5);
    }
}

@media (max-width: 640px) {
    .team__grid {
        grid-template-columns: 1fr;
    }

    .founder-note__card {
        margin: 220px var(--s-4) var(--s-4);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Vetting process — reusable across pages
   A ruled strip of numbered stages. The rules between columns carry the same
   hairline as the page spine, so the funnel reads as part of the frame.
   ────────────────────────────────────────────────────────────────────────── */

.vetting__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    margin-block: var(--s-4) var(--s-7);
}

.vetting__title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 400;
    line-height: 1.1;
}

.vetting__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid var(--border-color);
}

.vetting-step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-9);
    min-height: 190px;
    padding: var(--s-5);
    border-left: 1px solid var(--border-color);
    background: var(--bg-card);
}

.vetting-step:first-child {
    border-left: 0;
}

.vetting-step__num {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1;
}

.vetting-step__label {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.25;
}

@media (max-width: 1024px) {
    .vetting__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vetting-step:nth-child(3) {
        border-left: 0;
    }

    .vetting-step:nth-child(n + 3) {
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 640px) {
    .vetting__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .vetting__grid {
        grid-template-columns: 1fr;
    }

    .vetting-step {
        min-height: 0;
        gap: var(--s-5);
        border-left: 0;
    }

    .vetting-step + .vetting-step {
        border-top: 1px solid var(--border-color);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   CTA banner — reusable across pages
   A photograph with white type centred on it. The scrim is what makes that
   type legible: over the open sky the artwork alone is far too light.
   ────────────────────────────────────────────────────────────────────────── */

/* Its own ground, so the wrapper's gutter spine stops at the section instead
   of running down the left of the picture. */
.cta-section {
    background: var(--bg-primary);
}

/* On the source the picture butts straight onto the FAQ panel - no air
   between them - so the pair closes up where they follow one another. The
   FAQ keeps its own top padding on pages that open with it. Both carry
   .section too, which sets the 80px, so these have to outrank it. */
.section.cta-section {
    padding-block-end: 0;
}

.section.cta-section + .section.faq {
    padding-block-start: 0;
}

/* Where they meet, the two are one block: the source rounds only the outer
   corners, so the join is square and no page ground shows through it. */
.section.cta-section:has(+ .section.faq) .cta-banner {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.section.cta-section + .section.faq .faq-section {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.cta-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 489px;
    padding: var(--s-9) var(--s-6);
    border-radius: var(--r-sm);
    overflow: hidden;
    color: var(--c-white);
    text-align: center;
    background: var(--c-ink-warm);   /* shows while the photograph decodes */
}

.cta-banner__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(2, 0, 0, 0.30) 0%,
        rgba(2, 0, 0, 0.16) 45%,
        rgba(2, 0, 0, 0.34) 100%
    );
}

.cta-banner__eyebrow {
    margin: 0;
    font-size: var(--t-xl);
}

.cta-banner__title {
    margin-block: 64px;
    font-family: var(--font-serif);
    font-size: clamp(32px, 3.9vw, 56px);
    font-weight: var(--w-regular);
    line-height: 1.1;
}

/* ──────────────────────────────────────────────────────────────────────────
   FAQ — reusable across pages
   Heading column left, accordion right. Opening is a class toggle on
   .faq-item; the height transition needs a fixed max-height to animate to,
   so --faq-max is the ceiling an answer may grow to.
   ────────────────────────────────────────────────────────────────────────── */

/* Its own ground, so the wrapper's gutter spine stops at the section rather
   than running past the panel. */
.faq {
    background: var(--bg-primary);
}

/* The whole block sits on one muted panel: heading column left, accordion
   right, 40px in from the panel on every side. */
.faq-section {
    display: grid;
    grid-template-columns: 420fr 819fr;
    gap: 40px;
    padding: 40px;
    border-radius: var(--r-sm);
    background: var(--c-bone-mid);
}

/* The rule and the closing block are pushed to the foot of the column: two
   auto margins split the free height evenly between them. */
.faq-section__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Sans, per design-output: the FAQ heading is the one display-sized line on
   the page set in the UI face rather than the serif. */
.faq-section__heading {
    margin-block: var(--s-4) 0;
    font-family: var(--font-ui);
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: var(--w-regular);
    line-height: 1.1;
    color: var(--c-text-soft);
}

.faq-section__rule {
    width: 200px;
    height: 1px;
    margin-top: auto;
    background: var(--c-text-muted);
}

.faq-section__subtext {
    margin-block: auto 0;
    padding-block-start: var(--s-4);
    font-size: var(--t-md);
    line-height: 1.2;
    color: rgba(90, 90, 90, 0.8);
}

.faq-section__intro .btn-outline {
    margin-block-start: var(--s-4);
}

.faq-item {
    margin-block-end: 25px;
    border-radius: var(--r-sm);
    background: var(--c-bone-deep);
}

.faq-item:last-child {
    margin-block-end: 0;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    width: 100%;
    padding: 20px;
    font-family: var(--font-serif);
    font-size: var(--t-2xl);
    font-weight: var(--w-regular);
    line-height: 1.1;
    color: var(--c-text-soft);
    text-align: left;
    cursor: pointer;
}

.faq-question__toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--c-white);
    font-size: 16px;
    line-height: 1;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer {
    max-height: var(--faq-max, 300px);
}

.faq-answer__inner {
    margin: 0;
    padding: 0 20px 20px;
    font-size: var(--t-lg);
    line-height: 1.25;
    color: rgba(90, 90, 90, 0.7);
}

@media (max-width: 1024px) {
    .faq-section {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
}

.section {
    /* 80px of air above the opening pill and below the last block, measured
       off design-output/home/sections/section-03.png */
    padding-block: var(--s-10);
}

/* Small "/ Pricing" style label that opens each section */
.eyebrow {
    font-size: var(--t-sm);
    color: var(--c-text-soft);
}

.section-title {
    font-size: var(--t-5xl);
    text-align: center;
}

/* ==========================================================================
   Components — shared across pages
   ========================================================================== */

/* One capsule everywhere: 10/16 padding on a 1.2 line box gives the 39px
   height the source uses for every button, nav CTA to card footer. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 10px 16px;
    border-radius: var(--r-lg);
    font-size: var(--t-base);
    font-weight: var(--w-medium);
    line-height: 1.2;
}

.btn--accent {
    background: var(--c-lime);
    color: var(--c-ink);
}

.btn--dark {
    background: var(--c-ink);
    color: var(--c-text-invert);
}

/* ──────────────────────────────────────────────────────────────────────────
   Site header — shared by every page
   Matches the live site: the bar itself has no ground of its own. Whatever is
   behind it shows through — the page cream on the inner pages, the hero
   photograph on the home page. The only painted surface is the nav pill, a
   solid black capsule holding the links and the CTA together on the right.
   Logo and pill colours come from custom properties so the .site-header--over
   variant can flip the logo to white without a second rule.
   ────────────────────────────────────────────────────────────────────────── */

.site-header {
    position: relative;
    z-index: var(--z-header);
    background: transparent;
    /* Respect the notch when the bar sits at the top of a phone screen */
    padding-block-start: env(safe-area-inset-top, 0px);
    --logo-color: var(--c-text);
}

/* Home page: the bar floats over the hero image rather than taking up room
   above it, so the photograph starts at the very top of the viewport. */
.site-header--over {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    --logo-color: var(--c-white);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    min-height: var(--header-height);
    padding-block: var(--s-5);
}

/* The logo is one image — the B mark and the byThursday.ai wordmark together,
   from the brand pack's "By Thursday logo.png", trimmed to its ink and scaled
   down for the web. It is painted as a mask rather than an <img> so the colour
   follows --logo-color: ink on the cream pages, white over the hero. That
   matters here — the supplied artwork is near-black, and an <img> of it would
   be invisible on the dark bar. The <span> keeps the name in the accessibility
   tree and in the page when images fail. */
.site-nav__logo {
    flex: 0 0 auto;
    display: block;
    width: 183px;
    height: 28px;
    background-color: var(--logo-color);
    -webkit-mask: url("../assets/images/logo-bythursday.png") no-repeat center / contain;
    mask: url("../assets/images/logo-bythursday.png") no-repeat center / contain;
}

.site-nav__logo span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The capsule: links and CTA sit inside one black pill, hard right.
   The asymmetric padding (24px leading, 12px trailing) is what lets the lime
   button sit flush inside the capsule's right end. */
.site-nav__pill {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin-inline-start: auto;
    padding: 12px 12px 12px var(--s-5);
    border-radius: var(--r-3xl);
    background: var(--c-ink);
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__links a {
    color: var(--c-text-invert-70);
    font-size: var(--t-base);
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 120ms ease;
}

.site-nav__links a:hover {
    color: var(--c-text-invert);
}

/* The current page is marked in the markup, so the styling has no JS to do.
   .active and aria-current are kept in sync: the class carries the styling,
   the attribute carries the same fact to assistive tech. */
.site-nav__links a.active,
.site-nav__links a[aria-current="page"] {
    color: var(--c-text-invert);
}

.site-nav__cta {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Site footer - shared by every page
   Matches design-output/home/sections/section-08.png: a black band split into
   a main zone and a narrow aside by a vertical rule, with the wordmark set
   large along the bottom.
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--c-ink);
    color: var(--text-inverse);
    /* The rules inside are lighter than the page hairlines: on this ground
       they read at about a third of white. */
    --footer-rule: rgba(255, 255, 255, 0.36);
}

/* Main zone and a narrow aside, ruled at both gutters and between them. */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 251px;
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    min-height: 585px;
    border-inline: 1px solid var(--footer-rule);
}

.site-footer__main,
.site-footer__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

.site-footer__aside {
    border-left: 1px solid var(--footer-rule);
}

.site-footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-6);
    flex-wrap: wrap;
}

/* Two link columns, 170px apart on the source */
.site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0 170px;
}

.footer-col__title,
.footer-col__list a,
.site-footer__copyright {
    font-size: var(--t-base);
    color: var(--c-text-invert-70);
}

.footer-col__title {
    margin: 0 0 var(--s-8);
}

.footer-col__list {
    display: grid;
    gap: var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col__list a:hover {
    color: var(--text-inverse);
}

.site-footer__actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.footer-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--r-lg);
    font-size: var(--t-base);
    font-weight: var(--w-medium);
    line-height: 1.2;
    white-space: nowrap;
}

.footer-btn--outline {
    border: 1px solid var(--text-inverse);
    background: transparent;
    color: var(--text-inverse);
}

.footer-btn--outline:hover {
    background: var(--text-inverse);
    color: var(--c-ink);
}

.footer-btn--accent {
    background: var(--accent-lime);
    color: var(--c-ink);
}

/* The wordmark is the header's artwork set large: the same image carrying both
   the mark and the letters, painted as a mask so it takes the footer's white.
   86px tall fills the main zone, as on the source; the width follows the
   artwork's 6.535:1 ratio so the height is what stays fixed. */
.site-footer__wordmark {
    width: 562px;
    max-width: 100%;
    height: 86px;
    margin: 0;
    background-color: currentColor;
    -webkit-mask: url("../assets/images/logo-bythursday.png") no-repeat left center / contain;
            mask: url("../assets/images/logo-bythursday.png") no-repeat left center / contain;
}

.site-footer__wordmark span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-footer__social-label {
    margin: 0;
    font-size: var(--t-md);
    color: var(--c-text-invert-80);
}

.site-footer__social {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-6);
}

.site-footer__social a {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--c-text-invert-80);
}

.site-footer__social a:hover {
    color: var(--text-inverse);
}

.site-footer__social svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.site-footer__copyright {
    font-size: 13px;
    color: var(--c-text-invert-70);
}

@media (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .site-footer__aside {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-5);
        flex-wrap: wrap;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .site-footer__social {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .site-footer__top {
        flex-direction: column;
    }

    .site-footer__links {
        gap: var(--s-5) var(--s-8);
    }
}

/* ==========================================================================
   Responsive
   The source design is built at 1440px; these are the breakpoints where the
   1440px grid stops working, not a full mobile design.
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --container-pad: 24px;
        --t-7xl: 48px;
        --t-5xl: 36px;
    }
}

@media (max-width: 640px) {
    :root {
        --container-pad: 16px;
        --t-7xl: 36px;
        --t-5xl: 28px;
        --s-10: 48px;
    }

    /* Logo + capsule cannot sit on one 390px row, so the bar wraps into a
       stack and the capsule tightens. A burger menu would replace this once
       there is JS. */
    .site-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--s-3);
        padding-block: var(--s-4);
    }

    .site-nav__pill {
        margin-inline-start: 0;
        gap: var(--s-4);
        padding: 8px 8px 8px var(--s-4);
    }

    .site-nav__links {
        gap: var(--s-4);
    }

    .site-nav__links a {
        font-size: var(--t-sm);
    }

}

/* ──────────────────────────────────────────────────────────────────────────
   Client marks — shared by every page
   A client's logo turns up in six places: the scrolling strip and the mark
   grid, the quote card on the home page, the story cards, the spotlight
   caption, and the rail on a story page. Each arrives in that brand's own
   colours — Taawon red, SimLab gold, iPark's rainbow globe — so without this
   the page reads as a handful of competing brands rather than a list of
   clients. One rule holds them all to a single near-black weight.

   Not brightness(0), which is the obvious way to do it and is wrong here.
   Three of these logos carry their detail as a lighter shape inside a darker
   one — SimLab's gazelle in its hexagon, Taawon's calligraphy in its square,
   Zaha's emblem — and zeroing RGB turns each into a featureless black blob.
   Holding the floor just off zero and pushing contrast keeps those interiors
   legible while everything still reads as black. Alpha is untouched, so each
   logo keeps its own edges and no box appears behind it.

   Every one of these sits on a light ground (the lightest is the quote card
   at #edeee4, the darkest the strip at #dadccd). A client mark on a dark
   panel would need the opposite treatment and must not be added here.
   ────────────────────────────────────────────────────────────────────────── */

.logo-strip__item img,
.mark-row__cell img,
.quote-card__logo,
.story-card__logo,
.spotlight__logo,
.story-rail__logo {
    filter: grayscale(1) brightness(0.35) contrast(1.4);
}