.homepage {
    --section-space: clamp(3.5rem, 6vw, 6rem);
}

.homepage .hero {
    margin-top: 50px;
    padding-top: 7.75rem;
}

.homepage .hero h1 {
    font-size: clamp(3rem, 8.8vw, 8.5rem);
    line-height: .84;
    letter-spacing: -.08em;
}

.homepage .hero h1 span {
    white-space: nowrap;
}

.homepage .hero h1 span,
.homepage .hero h1 em {
    display: block;
    margin-left: 0 !important;
}

.homepage .hero h1 em {
    white-space: nowrap;
}

.homepage .hero h1 span:nth-child(2),
.homepage .hero h1 span:nth-child(3) {
    margin-left: 3vw;
}

.homepage .hero h1 span:nth-child(3) {
    margin-left: 9vw;
}

.homepage .hero-programs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homepage .hero-program {
    min-width: 0;
    --hero-image-scale: 1;
    --hero-image-hover-scale: 1.025;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background: var(--cream);
}

/* Tune only the third hero artwork here without changing the other two. */
.homepage .hero-program--third {
    --hero-image-scale: .8;
    --hero-image-hover-scale: .82;
}

.homepage .hero-program:not(:last-child) {
    border-right: 1px solid var(--ink);
}

.homepage .hero-program figure {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
}

.homepage .hero-program img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transform: scale(var(--hero-image-scale));
    transition: transform .6s var(--ease);
}

.homepage .hero-program:hover img,
.homepage .hero-program:focus-visible img {
    transform: scale(var(--hero-image-hover-scale));
}

.homepage .hero-program__copy {
    position: relative;
    min-height: 18rem;
    padding: clamp(1.4rem, 2.2vw, 2.25rem);
    display: flex;
    flex-direction: column;
}

.homepage .hero-program__copy>span {
    font: 700 clamp(.85rem, 1.2vw, 1.05rem)/1.2 var(--sans);
}

.homepage .hero-program h2 {
    margin: auto 0 1rem;
    font-size: clamp(2rem, 3vw, 3.5rem);
    line-height: .92;
    letter-spacing: -.065em;
}

.homepage .hero-program p {
    margin: 0;
    font: 400 .68rem/1.6 var(--mono);
}

.homepage .hero-program b {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    width: 2.6rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 400;
    transition: transform .35s var(--ease);
}

.homepage .hero-program:hover b,
.homepage .hero-program:focus-visible b {
    transform: rotate(45deg);
}

.homepage .hero-sketch {
    right: 1.4rem;
}

.homepage .hero-sketch,
.homepage .sketch {
    width: min(100%, 430px);
    aspect-ratio: 430 / 343;
    display: flex;
    flex-direction: column;
}

.homepage .hero-sketch img,
.homepage .sketch img {
    height: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    object-fit: contain;
}

.homepage .hero-sketch,
.homepage .hero-sketch.is-visible,
.homepage .hero-sketch.is-visible:hover,
.homepage .sketch,
.homepage .sketch.is-visible,
.homepage .sketch.is-visible:hover {
    transform: none;
}

.homepage .hero__bottom {
    border-top: 0;
}

.homepage .hero::after,
.homepage .manifesto::after {
    display: none;
}

.homepage .hero-sketch figcaption,
.homepage .sketch figcaption,
.homepage .paper-label {
    font: 400 .8rem/1.65 var(--mono);
    text-transform: none;
}

.homepage .manifesto {
    min-height: clamp(20rem, 48svh, 34rem);
    padding: var(--section-space) 1.4rem;
    grid-template-columns: 1fr;
}

.homepage .manifesto__body {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    font-family: var(--sans);
}

.homepage .manifesto h2 {
    max-width: none;
    margin: 0;
    font-size: clamp(1rem, 5.5vw, 6rem);
    line-height: .88;
    letter-spacing: -.075em;
}

.homepage .manifesto h2 span {
    display: block;
    white-space: nowrap;
    font-weight: 700;
}

.homepage .manifesto h2 em {
    color: inherit;
    font-style: normal;
}

.homepage .learning {
    padding-block: var(--section-space);
    background-color: var(--white);
    border-bottom: 0;
}

.homepage .learning__header {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .42fr);
}

.homepage .learning__header h2 {
    max-width: 10ch;
}

.homepage .principles--founder {
    padding-bottom: 0;
    color: var(--ink);
    background: var(--white);
    border-bottom: 1px solid var(--ink);
}

.homepage .principles__lead--founder {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .38fr);
    gap: 3rem;
    align-items: end;
    padding-block: var(--section-space);
}

.homepage .principles__lead--founder h2 {
    max-width: 10ch;
    margin: 0;
    font-size: clamp(4rem, 7.8vw, 8rem);
    line-height: .85;
    letter-spacing: -.08em;
}

.homepage .principles__lead--founder p {
    max-width: 32rem;
    margin: 0;
    font: 400 .72rem/1.65 var(--mono);
}

.homepage .principles--founder .principles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-color: var(--ink);
}

.homepage .founder-note {
    position: relative;
    min-height: clamp(20rem, 24vw, 25rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--cream);
    transition: color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}

.homepage .founder-note__body {
    min-height: 0;
    padding: clamp(1.4rem, 2.2vw, 2.25rem);
    display: flex;
    flex: 1;
    flex-direction: column;
}

.homepage .founder-note:not(:last-child) {
    border-right: 1px solid var(--ink);
}

.homepage .founder-note:nth-child(odd):hover,
.homepage .founder-note:nth-child(odd):focus-visible {
    color: var(--paper);
    background: var(--ink);
}

.homepage .founder-note:nth-child(2):hover,
.homepage .founder-note:nth-child(2):focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.homepage .founder-note__meta {
    font: 500 .56rem var(--mono);
    text-transform: uppercase;
}

.homepage .founder-note h3 {
    margin: auto 0 1.5rem;
    font-size: clamp(2.3rem, 3.5vw, 4rem);
    line-height: .9;
    letter-spacing: -.075em;
}

.homepage .founder-note p {
    max-width: 31rem;
    margin: 0;
    font: 400 .72rem/1.6 var(--mono);
}

.homepage .founder-note__arrow {
    position: absolute;
    top: clamp(1.4rem, 2.2vw, 2.25rem);
    right: clamp(1.4rem, 2.2vw, 2.25rem);
    width: 3rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid;
    border-radius: 50%;
    background: transparent;
    font-size: 1.4rem;
    transition: color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}

.homepage .founder-note:hover .founder-note__arrow,
.homepage .founder-note:focus-visible .founder-note__arrow {
    color: var(--ink);
    background: var(--yellow);
    transform: rotate(45deg);
}

.homepage .founder-note:nth-child(odd):hover .founder-note__arrow,
.homepage .founder-note:nth-child(odd):focus-visible .founder-note__arrow {
    color: var(--paper);
    background: var(--ink);
}

.homepage .visit h2 {
    max-width: 10ch;
    font-size: clamp(5.4rem, 11vw, 11rem);
    line-height: .76;
}

.homepage .pathways--programs {
    border-top: 0;
    padding: 0;
    background: var(--white);
    border-bottom: 0;
}

.homepage .pathways__intro {
    margin: 0 1.4rem;
    padding: var(--section-space) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .38fr);
    gap: 3rem;
    align-items: end;
}

.homepage .pathways__intro h2 {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(4rem, 7.8vw, 8rem);
    line-height: .85;
    letter-spacing: -.08em;
}

.homepage .pathways__intro p {
    max-width: 32rem;
    margin: 0;
    font: 400 .72rem/1.65 var(--mono);
}

.homepage .pathways--programs .pathways__list {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.homepage .pathways--programs .pathway {
    position: relative;
    min-width: 0;
    min-height: clamp(24rem, 30vw, 30rem);
    padding: clamp(1.4rem, 2.2vw, 2.25rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 0;
    background: var(--cream);
    transition: color .35s var(--ease), background-color .35s var(--ease);
}

.homepage .pathways--programs .pathway:not(:last-child) {
    border-right: 1px solid var(--ink);
}

.homepage .pathways--programs .pathway:nth-child(odd):hover,
.homepage .pathways--programs .pathway:nth-child(odd):focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.homepage .pathways--programs .pathway:nth-child(2):hover,
.homepage .pathways--programs .pathway:nth-child(2):focus-visible {
    color: var(--paper);
    background: var(--ink);
}

.homepage .pathway__stage {
    width: max-content;
    max-width: 100%;
    padding-bottom: .45rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 2px solid currentColor;
    letter-spacing: -.04em;
    text-transform: none;
}

.homepage .pathway__stage strong {
    font: 700 clamp(1rem, 1.55vw, 1.35rem)/1.15 var(--sans);
}

.homepage .pathway__stage small {
    margin-top: .3rem;
    font: 500 .62rem/1.2 var(--mono);
    letter-spacing: .02em;
}

.homepage .pathways--programs .pathway>div {
    margin: auto 0 0;
}

.homepage .pathways--programs .pathway h3 {
    font-size: clamp(2.3rem, 3vw, 3.5rem);
    line-height: .9;
    text-wrap: balance;
}

.homepage .pathways--programs .pathway p {
    margin-top: 1.5rem;
    font: 400 .72rem/1.6 var(--mono);
}

.homepage .pathways--programs .pathway b {
    position: absolute;
    top: clamp(1.4rem, 2.2vw, 2.25rem);
    right: clamp(1.4rem, 2.2vw, 2.25rem);
    width: 3rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 400;
    transition: transform .35s var(--ease);
}

.homepage .pathways--programs .pathway:hover b,
.homepage .pathways--programs .pathway:focus-visible b {
    transform: rotate(45deg);
}

.homepage .visit--midpage {
    min-height: min(80svh, 52rem);
    margin: clamp(1rem, 2vw, 2rem) 1.4rem;
    padding-block: var(--section-space);
    border-radius: clamp(1.25rem, 3vw, 3rem);
}

@media (min-width: 1101px) and (max-width: 1280px) {
    .homepage .hero h1 {
        font-size: 6vw;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .homepage .hero h1 {
        font-size: 5vw;
    }
}

@media (max-width: 900px) {
    .homepage .hero {
        min-height: 48rem;
        gap: 1.5rem;
    }

    .homepage .hero h1 {
        margin-block: 2rem;
        font-size: clamp(2.6rem, 6.2vw, 6.5rem);
    }

    .homepage .hero-sketch {
        top: 26rem;
        right: 1.5rem;
    }

    .homepage .manifesto {
        min-height: 0;
        padding-block: var(--section-space);
    }

    .homepage .manifesto h2 {
        margin: 0;
    }

    .homepage .learning {
        padding-block: var(--section-space);
    }

    .homepage .learning__header,
    .homepage .principles__lead--founder {
        grid-template-columns: 1fr;
    }

    .homepage .learning__header {
        gap: 1.5rem;
        margin-bottom: 3.5rem;
    }

    .homepage .moment {
        gap: 2.5rem;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .homepage .moment__copy h3 {
        margin-bottom: 1.25rem;
    }

    .homepage .principles__lead--founder {
        gap: 1.5rem;
        padding-block: var(--section-space);
    }

    .homepage .principles--founder .principles__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .homepage .founder-note {
        min-height: 22rem;
        padding: 0;
    }

    .homepage .founder-note__body {
        padding: 1.4rem;
    }

    .homepage .founder-note h3 {
        margin: auto 0 1rem;
        font-size: clamp(1.85rem, 4.2vw, 2.6rem);
    }

    .homepage .founder-note__arrow {
        top: 1.25rem;
        right: 1.25rem;
        width: 2.5rem;
    }

    .homepage .visit--midpage {
        min-height: 0;
        padding: var(--section-space) 2rem;
    }

    .homepage .visit--midpage h2 {
        margin-block: 2.5rem;
        font-size: clamp(4.8rem, 12vw, 7rem);
    }

    .homepage .visit--midpage .visit__bottom {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2.5rem;
    }

    .homepage .visit--midpage .visit__bottom>div {
        justify-self: start;
        text-align: left;
    }

    .homepage .pathways--programs .pathway {
        min-height: 22rem;
    }
}

@media (max-width: 640px) {
    .homepage .hero {
        min-height: 46rem;
        padding-top: 6.8rem;
    }

    .homepage .manifesto {
        padding: 2.25rem 1.2rem;
    }

    .homepage .hero-programs {
        grid-template-columns: 1fr;
    }

    .homepage .hero-program:not(:last-child) {
        border-right: 0;
    }

    .homepage .hero-program figure {
        aspect-ratio: 16 / 10;
    }

    .homepage .hero-program__copy {
        min-height: 15rem;
    }

    .homepage .hero h1 {
        margin: 2rem 0 15rem;
        font-size: 9vw;
    }

    .homepage .hero-sketch {
        top: auto;
        position: absolute;
        right: 1.2rem;
        bottom: 6.8rem;
        width: min(calc(90vw - 2.16rem), 380px);
    }

    .homepage .sketch,
    .homepage .sketch--group {
        width: min(90%, 380px) !important;
        padding: .7rem;
    }

    .homepage .hero-sketch {
        padding: .7rem;
    }

    .homepage .principles__lead--founder h2 {
        font-size: clamp(3.7rem, 15vw, 5rem);
    }

    .homepage .pathways__intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-inline: 1.2rem;
    }

    .homepage .pathways__intro h2 {
        font-size: clamp(3.7rem, 15vw, 5rem);
    }

    .homepage .principles--founder .principles__grid {
        grid-template-columns: 1fr;
    }

    .homepage .founder-note {
        min-height: 20rem;
    }

    .homepage .founder-note:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--ink);
    }

    .homepage .pathways--programs .pathways__list {
        grid-template-columns: 1fr;
    }

    .homepage .pathways--programs .pathway:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--ink);
    }

    .homepage .visit--midpage h2 {
        max-width: none;
        margin-block: 2rem;
        font-size: clamp(2.4rem, 14.3vw, 5.3rem);
        line-height: .82;
        letter-spacing: -.085em;
        white-space: nowrap;
    }

    .homepage .visit--midpage {
        min-height: 0;
        margin-inline: .65rem;
        padding: var(--section-space) 1.1rem;
    }

    .homepage .visit--midpage .visit__bottom {
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .homepage .visit--midpage .visit__bottom>a {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 420px) {
    .homepage .hero h1 span,
    .homepage .hero h1 em {
        white-space: normal;
    }

    .homepage .visit--midpage {
        min-height: 0;
        margin-inline: .4rem;
        padding-inline: .9rem;
        border-radius: 1rem;
    }
}

@media (max-width: 380px) {

    .homepage .learning__header h2,
    .homepage .principles__lead--founder h2 {
        font-size: 13.5vw;
    }

    .homepage .moment__copy h3 {
        font-size: 11.5vw;
    }
}

/* Optional typing effect: remove .typing-effect from the heading to disable. */
.typing-character {
    font-style: inherit;
}

.typing-effect .typing-character {
    transition: color 260ms ease-out;
}

.typing-effect .typing-character[data-pending] {
    color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .typing-effect .typing-character[data-pending] {
        color: inherit;
    }
}

/* UX spacing and readability refinements. */
.homepage .pathways__intro h2, .homepage .pathways--programs .pathway h3,
.homepage .founder-note h3 { line-height: .98; letter-spacing: -.05em; }
@media (max-width: 640px) {
    .homepage .pathways--programs .pathway, .homepage .founder-note { min-height: 0; }
    .homepage .pathways--programs .pathway > div { margin-top: 2rem; }
    .homepage .pathways--programs .pathway h3 { margin-top: 0; font-size: clamp(2rem, 9vw, 2.6rem); }
    .homepage .founder-note h3 { margin-top: 2rem; }
    .homepage .pathways--programs .pathway p { font-size: .875rem; margin-top: 1rem; }
}

.homepage .visit__bottom > p { font-size: .875rem; }


.adjust-margin {
    margin-top: 40px;
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .adjust-margin {
        margin-top: 0;
        margin-bottom: 0;
    }
}