/** ---------------------------------------------------------------------------
FOUNDER PAGE — /founder only.

This file used to be a near-standalone stylesheet: its own reset, its own
`:root` palette, its own copies of the apply drawer, the intake fields, the
footer and the `rise` keyframe. The header comment on that palette explained it
as "this page can't link sitewide" — which stopped being true a long time ago.
founder.html links fonts.css → sitewide.css → founder.css, and sitewide now
carries every one of those systems, including the long-document scroll contract
(`main:not(.pages)`) that names this page by name.

Because founder.css loads last, each of those copies was silently OVERRIDING the
shared system with an older fork of itself — a 28vw drawer where the site had
moved to 34vw, px type where the site had moved to rem, `#000` where the palette
is `--shadow`, and a duplicate `:root` that redefined --graphite and injected
retired aliases (--mint / --violet / --amber / --pank / --cyan / --glow).

So all of it is gone. What remains is only what is genuinely specific to this
page, expressed in the live tokens. Anything you want changed about the drawer,
the fields or the footer is changed in sitewide.css, once, for every page.
--------------------------------------------------------------------------- **/

/* ── Wrapper ──
   <main class="wrapper"> also matches sitewide's `main:not(.pages)`, so the
   scrolling behaviour is inherited; this only sets the page's own inset. */
.wrapper {
    position: relative;
    z-index: 2;
    padding-top: var(--page-top);
    padding-bottom: 6rem;
}

/* ── Founder hero ── */
.founder-hero {
    text-align: center;
    padding: 4rem 2rem 3rem;
}

/* Named a ring, but it never was one: a cyan gradient plate with a 26px glow,
   and founder_headshot.png is a transparent cutout, so that gradient showed
   through the whole frame rather than around its edge. As a circle it passed
   for a portrait medallion. Square, it read as a gradient box — which is what
   it always was. Now a hairline frame and the cutout on the page background:
   no plate, no lighting, nothing simulating a surface that isn't there. */
.founder-photo-ring {
    width: 176px;
    height: 176px;
    border: var(--card-border);
    margin: 0 auto 2.4rem;
    opacity: 0;
    animation: rise 0.7s ease 0.15s forwards;
}

.founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    display: block;
}

/* The eyebrow is the shared .eyebrow primitive in the markup now (Oxanium,
   reserved cyan, 0.2em) rather than a private 0.55em IBM Plex one — it is the
   same element doing the same job as every other eyebrow on the site. Only the
   entrance delay is page-local, so it lands after the portrait. */
.founder-eyebrow {
    margin-bottom: 1rem;
    animation-delay: 0.4s;
}

.founder-name {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 4.4vw + 0.6rem, 3.5rem);
    line-height: 1.06;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ice);
    margin-bottom: 1rem;
    opacity: 0;
    animation: rise 0.7s ease 0.5s forwards;
}

.founder-company {
    font-family: "Oxanium", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    animation: rise 0.6s ease 0.7s forwards;
}

/* .brand is the SHARED wordmark primitive in sitewide.css — the icy 175deg
   gradient clipped to the glyphs, in Horizon. This page had been carrying its
   own private fork of it (a 180deg white→cyan fill), which is why the mark here
   never matched the mark anywhere else. The fork is gone and the primitive is
   inherited; only the size and tracking, which are specific to sitting under a
   name rather than in a nav, are set here.
   Nothing about colour is set: .brand paints through -webkit-text-fill-color:
   transparent, so a `color` declared here would be silently dead anyway. */
.founder-company .brand {
    font-size: clamp(1.05rem, 1.6vw + 0.7rem, 1.35rem);
    letter-spacing: 0.14em;
    display: inline-block;
}

/* ── Bio article ── */
.bio-article {
    max-width: 40rem;
    margin: 0 auto;
    padding: 3rem 2rem 8rem;
}

.bio-hook {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.45rem);
    line-height: 1.52;
    letter-spacing: 0.01em;
    color: var(--ice);
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--hairline);
}

.bio-copy {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ice);
    margin-top: 1.6em;
}

.bio-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}
.bio-link:hover {
    color: var(--accent-hov);
    border-bottom-color: rgba(var(--rgb-accent), 0.45);
}

/* ── Pull quote ── */
.bio-pull {
    margin: 4rem -3.75rem;
    padding: 3rem 3.75rem;
    text-align: center;
    position: relative;
    border: none;
}

.bio-pull::before,
.bio-pull::after {
    content: "";
    position: absolute;
    left: 3.75rem;
    right: 3.75rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(var(--ice-rgb) / 0.12),
        transparent
    );
}
.bio-pull::before {
    top: 0;
}
.bio-pull::after {
    bottom: 0;
}

.bio-pull p {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.85rem);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--soft);
}

/* ── Sign-off ── */
.bio-sign {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    color: var(--soft);
}

.bio-sign-em {
    font-family: "Oxanium", sans-serif;
    font-size: 1.35rem;
    font-style: normal;
    text-align: center;
    font-weight: 600;
    color: var(--ice);
}

/* ── CTAs ──
   The buttons themselves are the shared .btn1 / .btn2 from sitewide. The pair
   of private .cta-primary / .cta-secondary rules that used to sit here were
   retired glow buttons (`--glow: var(--rgb-line)`) that no markup on the site
   referenced any more; they went with .thankyou-* and .btn-primary. */
.bio-ctas {
    margin-top: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bio-ctas .btn1,
.bio-ctas .btn2 {
    min-width: 17.5rem;
    text-align: center;
    text-decoration: none;
}

/* ── Scroll reveal ── (founder.js adds .visible via IntersectionObserver) */
.fade-up {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Skip link ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--umber);
    color: var(--accent);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: 1px solid var(--accent);
}
.skip-link:focus {
    top: 1rem;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .wrapper {
        padding-top: var(--nav-bar-mob);
    }

    .founder-hero {
        padding: 2.5rem 1.5rem 2rem;
    }

    .founder-photo-ring {
        width: 136px;
        height: 136px;
    }

    .bio-pull {
        margin: 3rem -1.5rem;
        padding: 2.5rem 1.5rem;
    }

    .bio-pull::before,
    .bio-pull::after {
        left: 1.5rem;
        right: 1.5rem;
    }

    .bio-article {
        padding: 2rem 1.5rem 6rem;
    }

    .bio-ctas .btn1,
    .bio-ctas .btn2 {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .founder-photo-ring,
    .founder-eyebrow,
    .founder-name,
    .founder-company {
        opacity: 1;
        animation: none;
    }
}