/* B&H STUDIO about page — personal story on the shared magazine system. */
.bh-about-page .bh-hero__nav a.is-active,
.bh-about-page .bh-mag-nav nav a.is-active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.45rem;
}

.bh-about-content {
    background: var(--bh-paper);
    color: var(--bh-ink);
}

.bh-about-intro,
.bh-about-journey,
.bh-about-life,
.bh-about-brand,
.bh-about-proof,
.bh-about-principles {
    border-top: 1px solid var(--bh-ink);
}

.bh-about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(16rem, 0.82fr);
    gap: 28px clamp(28px, 5vw, 80px);
    padding: 9vw 5vw;
}

.bh-about-intro__heading {
    grid-column: 1 / -1;
}

.bh-about-intro__heading h2,
.bh-about-journey__heading h2,
.bh-about-principles > header h2,
.bh-about-life__copy h2,
.bh-about-brand__copy h2,
.bh-about-proof__heading h2,
.bh-about-cta h2 {
    margin-top: 16px !important;
    font-size: clamp(50px, 6vw, 100px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.07em;
}

.bh-about-intro__heading h2 em,
.bh-about-journey__heading h2 em,
.bh-about-principles h2 em,
.bh-about-life__copy h2 em,
.bh-about-brand__copy h2 em,
.bh-about-proof__heading h2 em,
.bh-about-cta h2 em {
    font-family: var(--bh-serif);
    font-style: normal;
}

.bh-about-intro__photo,
.bh-about-life__photo {
    margin: 0;
}

.bh-about-intro__photo img,
.bh-about-life__photo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.bh-photo-placeholder {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    aspect-ratio: 16 / 10;
    border: 1px dashed rgba(23, 27, 32, 0.35);
    background: #e5e3de;
    color: var(--bh-muted);
}

.bh-photo-placeholder span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.bh-photo-placeholder small {
    font-family: var(--bh-serif);
    font-size: 14px;
}

.bh-about-intro__photo img {
    aspect-ratio: auto;
}

.bh-about-intro__photo figcaption {
    margin-top: 8px;
    font-family: var(--bh-serif);
    font-size: 11px;
    line-height: 1.6;
}

.bh-about-intro__copy {
    align-self: end;
    padding-bottom: 8px;
}

.bh-about-intro__copy p,
.bh-about-journey__copy p,
.bh-about-life__copy > p:not(.bh-eyebrow),
.bh-about-brand__copy > p:not(.bh-eyebrow),
.bh-about-cta > p:not(.bh-eyebrow) {
    font-family: var(--bh-serif);
    font-size: 16px;
    line-height: 1.9;
}

.bh-about-intro__copy p + p,
.bh-about-journey__copy p + p,
.bh-about-brand__copy > p + p,
.bh-about-life__copy > p + p {
    margin-top: 18px;
}

.bh-about-journey {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(34px, 7vw, 110px);
    padding: 9vw 5vw;
    background: #fff;
}

.bh-about-journey__heading {
    grid-column: 1 / -1;
}

.bh-about-journey__photo {
    align-self: start;
    margin: 0;
}

.bh-about-journey__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.bh-about-journey__photo figcaption,
.bh-about-life__gallery figcaption {
    margin-top: 9px;
    color: var(--bh-muted);
    font-family: var(--bh-serif);
    font-size: 11px;
    line-height: 1.65;
}

.bh-about-journey__copy {
    align-self: center;
    color: var(--bh-muted);
    max-width: 48rem;
}

.bh-about-journey__timeline {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(34px, 5vw, 70px);
    border-top: 1px solid var(--bh-ink);
    border-left: 1px solid var(--bh-ink);
}

.bh-about-journey__timeline article {
    min-height: 230px;
    padding: 24px;
    border-right: 1px solid var(--bh-ink);
    border-bottom: 1px solid var(--bh-ink);
}

.bh-about-journey__timeline span {
    font-family: var(--bh-serif);
    font-size: 28px;
}

.bh-about-journey__timeline small {
    display: block;
    margin-top: 28px;
    color: var(--bh-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.6;
}

.bh-about-journey__timeline strong {
    display: block;
    margin-top: 12px;
    font-family: var(--bh-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.45;
}

.bh-about-journey__timeline p {
    margin-top: 12px !important;
    color: var(--bh-muted);
    font-family: var(--bh-serif);
    font-size: 13px;
    line-height: 1.7;
}

.bh-about-principles {
    padding: 9vw 5vw;
    background: #ecebe7;
}

.bh-about-principles > header {
    display: grid;
    grid-template-columns: 0.45fr 1.55fr;
    align-items: start;
}

.bh-about-principles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 6vw;
    border-top: 1px solid var(--bh-ink);
    border-left: 1px solid var(--bh-ink);
}

.bh-about-principles__grid article {
    min-height: 290px;
    padding: 25px;
    border-right: 1px solid var(--bh-ink);
    border-bottom: 1px solid var(--bh-ink);
}

.bh-about-principles__grid article:hover,
.bh-about-principles__grid article:focus-within {
    background: #fff;
}

.bh-about-principles__grid span {
    font-family: var(--bh-serif);
    font-size: 30px;
}

.bh-about-principles__grid h3 {
    margin-top: 65px !important;
    font-family: var(--bh-sans) !important;
    font-size: 22px;
    font-weight: 700;
}

.bh-about-principles__grid p {
    margin-top: 18px !important;
    font-family: var(--bh-serif);
    font-size: 14px;
    line-height: 1.75;
}

.bh-about-life {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
    gap: clamp(28px, 6vw, 90px);
    align-items: center;
    padding: 9vw 5vw;
    background: #fff;
}

.bh-about-life__gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(9rem, 0.56fr);
    grid-template-rows: repeat(2, minmax(0, auto));
    column-gap: clamp(18px, 3vw, 44px);
    row-gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.bh-about-life__gallery figure {
    margin: 0;
}

.bh-about-life__gallery figure:first-child {
    grid-row: 1 / 3;
}

.bh-about-life__gallery figure:last-child {
    margin-top: clamp(18px, 3vw, 42px);
}

.bh-about-life__gallery img {
    display: block;
    height: auto;
    width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
}

.bh-about-life__copy {
    max-width: 40rem;
}

.bh-about-life__copy h2 {
    font-size: clamp(50px, 5vw, 82px) !important;
    letter-spacing: -0.055em;
}

.bh-about-life__copy > p:not(.bh-eyebrow) {
    color: var(--bh-muted);
}

.bh-about-brand {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(34px, 8vw, 130px);
    padding: 9vw 5vw;
    background: #181b20;
    color: #fff;
}

.bh-about-brand__mark {
    align-self: start;
    position: sticky;
    top: 120px;
}

.bh-about-brand__mark strong {
    display: block;
    font-family: var(--bh-serif);
    font-size: clamp(82px, 11vw, 170px);
    font-weight: 400;
    letter-spacing: -0.08em;
    line-height: 0.86;
}

.bh-about-brand__mark span {
    display: block;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.bh-about-brand__copy {
    max-width: 52rem;
}

.bh-about-brand__copy > p:not(.bh-eyebrow) {
    color: rgba(255, 255, 255, 0.72);
}

.bh-about-brand__photo-note {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 150px;
    margin-top: clamp(36px, 5vw, 70px);
    padding: 24px;
    border: 1px dashed rgba(255, 255, 255, 0.38);
}

.bh-about-brand__photo-note span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.bh-about-brand__photo-note small {
    color: rgba(255, 255, 255, 0.62);
    font-family: var(--bh-serif);
    font-size: 14px;
}

.bh-about-proof {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(28px, 6vw, 90px);
    padding: 9vw 5vw;
}

.bh-about-proof__list {
    border-top: 1px solid var(--bh-ink);
}

.bh-about-proof__list > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1.55fr);
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--bh-line);
}

.bh-about-proof__list span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.bh-about-proof__list strong {
    font-family: var(--bh-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.bh-about-cta {
    border-top: 1px solid #fff;
    padding: 8vw 5vw 10vw;
    background: #181b20;
    color: #fff;
}

.bh-about-cta h2 {
    max-width: 780px;
}

.bh-about-cta--quote h2 {
    max-width: 1160px;
    font-size: clamp(48px, 5.6vw, 92px) !important;
}

.bh-about-cta--quote h2 span,
.bh-about-cta--quote h2 em {
    display: block;
}

.bh-mobile-break {
    display: none;
}

.bh-about-cta > p:not(.bh-eyebrow) {
    max-width: 38rem;
    margin: 26px 0 34px;
    color: #c7cbd0;
}

.bh-about-cta .bh-action--fill {
    width: max-content;
    color: var(--bh-ink);
}

.bh-about-cta .bh-action--fill:hover,
.bh-about-cta .bh-action--fill:focus-visible {
    color: #fff;
}

@media (max-width: 980px) {
    .bh-about-intro,
    .bh-about-journey,
    .bh-about-life,
    .bh-about-brand,
    .bh-about-proof {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bh-about-intro__heading,
    .bh-about-journey__heading,
    .bh-about-life__gallery,
    .bh-about-life__copy,
    .bh-about-brand__copy,
    .bh-about-proof__heading {
        grid-column: 1 / -1;
    }

    .bh-about-intro__copy {
        align-self: center;
    }

    .bh-about-principles > header {
        grid-template-columns: 0.35fr 1.65fr;
    }

    .bh-about-journey__timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-about-journey__timeline article:nth-child(odd) {
        border-left: 0;
    }

    .bh-about-brand__mark {
        position: static;
    }
}

@media (max-width: 700px) {
    .bh-about-intro,
    .bh-about-journey,
    .bh-about-life,
    .bh-about-brand,
    .bh-about-proof,
    .bh-about-principles {
        padding: 76px 18px;
    }

    .bh-about-intro,
    .bh-about-journey,
    .bh-about-life,
    .bh-about-brand,
    .bh-about-proof,
    .bh-about-principles > header {
        grid-template-columns: 1fr;
    }

    .bh-about-intro__heading,
    .bh-about-journey__heading,
    .bh-about-life__copy,
    .bh-about-brand__copy,
    .bh-about-proof__heading {
        grid-column: auto;
    }

    .bh-about-intro__heading h2,
    .bh-about-journey__heading h2,
    .bh-about-principles > header h2,
    .bh-about-life__copy h2,
    .bh-about-brand__copy h2,
    .bh-about-proof__heading h2,
    .bh-about-cta h2 {
        font-size: clamp(42px, 11vw, 58px) !important;
        line-height: 1 !important;
    }

    .bh-about-principles__grid {
        grid-template-columns: 1fr;
        margin-top: 42px;
    }

    .bh-about-journey__timeline {
        grid-template-columns: 1fr;
    }

    .bh-about-journey__timeline article {
        min-height: auto;
    }

    .bh-about-life__gallery {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.72fr);
    }

    .bh-about-life__gallery figure:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .bh-about-life__gallery figure:nth-child(n + 2) {
        grid-column: auto;
        grid-row: auto;
    }

    .bh-about-life__gallery figure:last-child {
        margin-top: 28px;
    }

    .bh-about-brand__mark strong {
        font-size: clamp(76px, 25vw, 110px);
    }

    .bh-about-principles__grid article {
        min-height: auto;
    }

    .bh-about-principles__grid h3 {
        margin-top: 38px !important;
    }

    .bh-about-proof__list > div {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .bh-about-cta {
        padding: 76px 18px 100px;
    }

    .bh-about-cta--quote h2 {
        font-size: clamp(36px, 10.5vw, 50px) !important;
        line-height: 1.08 !important;
    }

    .bh-mobile-break {
        display: initial;
    }

    .bh-about-cta .bh-action--fill {
        width: 100%;
    }
}