/**
 * About page — Figma 1379:7319 desktop / 1379:7523 mobile / history 1379:7784.
 */

/* Hero title only — do not reuse for other --font-serif headings */
@font-face {
	font-family: "Bethany Elingston Title";
	src:
		url("../fonts/bethany/BethanyElingston-Regular.woff2") format("woff2"),
		url("../fonts/bethany/BethanyElingston-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bethany Elingston Title";
	src:
		url("../fonts/bethany/BethanyElingston-Italic.woff2") format("woff2"),
		url("../fonts/bethany/BethanyElingston-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

.about-page {
    background-color: var(--color-white);
}

/* Hero — 1379:7321 */
.about-hero {
    background-color: var(--color-white);
    overflow: hidden;
}

.about-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.75rem; /* 60px */
    width: 100%;
    max-width: 46.875rem; /* 750px */
    margin: 0 auto;
    padding: 5rem var(--space-inline) 5rem; /* 80px */
}

.about-hero__media {
    flex-shrink: 0;
    width: 24.8125rem; /* 397px */
    max-width: 100%;
    height: 16.5rem; /* 264px */
}

.about-hero__illustration {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.about-hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem; /* 40px */
    width: 100%;
    text-align: center;
    color: var(--color-dark);
}

.about-hero__title {
    margin: 0;
    font-family: "Bethany Elingston", "Cormorant Garamond", "Times New Roman", serif;
    font-size: 6.25rem; /* 100px */
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.1875rem; /* -3px — Figma 1379:7326 */
    text-transform: none;
    color: var(--color-dark);
    font-feature-settings: "liga" 0;
    font-variant-ligatures: none;
}

/* Ornate caps only — Bethany Title / salt (Figma Section 01) */
.about-hero__title-cap {
    font-family: "Bethany Elingston Title", "Bethany Elingston", serif;
    font-weight: 400;
    font-style: normal;
    font-feature-settings: "salt" 1, "swsh" 1, "ss01" 1, "liga" 0;
    font-variant-ligatures: none;
}

.about-hero__intro {
    margin: 0;
    max-width: 28rem; /* 448px */
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--line-height-ui);
    text-transform: uppercase;
    color: var(--color-dark);
}

.about-hero__cta {
    flex-shrink: 0;
}

/* History — 1379:7329 / 1379:7659 */
.about-history-pin {
    position: relative;
}

.about-history {
    background-color: var(--color-dark);
    color: var(--color-white);
    overflow: hidden;
}

@media (min-width: 75.0625rem) {
    .about-history {
        position: sticky;
        top: 5.25rem; /* clear the sticky header */
        z-index: 2;
    }

    .admin-bar .about-history {
        top: calc(5.25rem + var(--wp-admin--admin-bar--height, 32px));
    }
}

.about-history__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 56.25rem; /* 900px */
    padding: 3.75rem 0 0; /* 60px top */
}

.about-history__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-inline);
}

.about-history__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 3rem; /* 48px */
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-white);
}

.about-history__cta {
    border-color: var(--color-white);
    color: var(--color-white);
    min-width: 12.25rem;
}

.about-history__cta-label--mobile {
    display: none;
}

.about-history__cta:hover {
    color: var(--color-white);
    opacity: 0.75;
}

.about-history__viewport {
    width: 100%;
    margin-top: 3.75rem; /* 60px — Figma head → stories */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}

.about-history__viewport.is-dragging {
    cursor: grabbing;
}

.about-history__viewport::-webkit-scrollbar {
    display: none;
}

.about-history__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.25rem; /* 20px */
    width: max-content;
    padding: 0 0 5rem;
}

.about-history__story {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.25rem;
    flex: 0 0 auto;
    width: 65.4375rem; /* 1047px */
    height: 27.375rem; /* 438px */
}

.about-history__year-wrap {
    display: flex;
    align-items: flex-start;
    flex: 0 0 33.3125rem; /* 533px */
    height: 100%;
    padding: 5.5rem 2.5rem 0; /* 88px 40px */
    box-sizing: border-box;
}

.about-history__year {
    margin: 0;
    width: 100%;
    font-family: var(--font-serif);
    font-size: 12.5rem; /* 200px — Figma story years */
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.125rem; /* 2px */
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
    opacity: 0.4;
    transition: opacity 0.35s ease;
}

.about-history__story.is-active .about-history__year {
    opacity: 1;
}

.about-history__story--year-only {
    width: 33.3125rem; /* 533px — Figma story 07 */
}

.about-history__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem; /* 40px */
    flex: 0 0 30.875rem; /* 494px */
    width: 30.875rem;
    height: 100%;
}

.about-history__photo {
    flex-shrink: 0;
    width: 100%;
    height: 20.5rem; /* 328px */
}

.about-history__image,
.about-history__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: none;
    box-shadow: none;
    object-fit: contain;
    object-position: center;
    background: transparent !important;
    transform: none !important;
}

.about-history__image-placeholder {
    background-color: #564d3b !important;
}

/* No CSS polaroid plate / tilt - images are pre-composited */
.about-history__photo::before,
.about-history__photo::after {
    content: none !important;
    display: none !important;
}

.about-history__story:nth-child(even) .about-history__image,
.about-history__story:nth-child(odd) .about-history__image {
    transform: none !important;
}

.about-history__text {
    margin: 0;
    max-width: 28.5rem; /* 456px */
    font-family: var(--font-sans);
    font-size: var(--text-link);
    font-weight: 500;
    line-height: var(--line-height-ui);
    letter-spacing: var(--letter-spacing-link);
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
}

.about-history__timeline {
    width: calc(100% - (var(--space-inline) * 2));
    max-width: 95rem; /* 1520px */
    height: 3rem; /* 48px — Figma 1569:6720 */
    margin: auto auto 0;
    padding: 0;
}

.about-history__timeline-track {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.about-history__timeline-tick {
    flex: 0 0 0.0625rem; /* 1px */
    width: 0.0625rem;
    height: 0.5rem; /* 8px — inactive */
    background-color: rgba(251, 250, 247, 0.25);
    transition: height 0.25s ease, background-color 0.25s ease;
}

.about-history__timeline-tick.is-in-cluster {
    height: calc(0.75rem + var(--tick-level) * 0.25rem); /* 12px → 32px */
    background-color: rgba(251, 250, 247, calc(0.35 + var(--tick-level) * 0.09));
}

.about-history__timeline-tick.is-center {
    background-color: rgba(251, 250, 247, 0.85);
}

/* What we do — 1379:7454 */
.about-what {
    background-color: var(--color-white);
    overflow: hidden;
}

.about-what__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 7.5rem var(--space-inline);
}

.about-what__title {
    margin: 0;
    max-width: 53.1875rem;
    font-family: var(--font-serif);
    font-size: 6.25rem; /* 100px */
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.0625rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-dark);
}

.about-what__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 38.875rem)); /* 622px */
    gap: 1.25rem;
    justify-content: center;
    width: 100%;
    max-width: 79rem; /* 1264px */
}

.about-what__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.625rem; /* 90px */
    box-sizing: border-box;
    width: 100%;
    padding: 4.375rem 1.875rem 1.875rem; /* 70 30 30 */
    border: 0.0625rem solid rgba(39, 43, 52, 0.1);
    background-color: var(--color-white);
    overflow: hidden;
}

.about-what__media {
    position: relative;
    width: 16.5rem; /* ~264px */
    height: 14rem; /* ~224px */
}

.about-what__image,
.about-what__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border: 0;
    transform: none;
    background-color: transparent;
}

.about-what__image-placeholder {
    background-color: #564d3b;
}

.about-what__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem; /* 30px */
    width: 100%;
}

.about-what__copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    text-transform: uppercase;
    color: var(--color-dark);
}

.about-what__card-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.875rem; /* 30px */
    font-weight: 400;
    line-height: 1.1;
}

.about-what__card-subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-link);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-link);
}

/* Estate galleries — 1379:7461 / 1379:7473 */
.about-estate {
    overflow: hidden;
}

.about-estate--dark {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.about-estate--light {
    background-color: var(--color-white);
    color: var(--color-dark);
}

.about-estate__inner {
    display: flex;
    flex-direction: column;
    gap: 5rem; /* 80px */
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 7.5rem var(--space-inline); /* 120px 40px */
}

.about-estate__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
}

.about-estate__copy {
    display: flex;
    flex-direction: column;
    gap: 1.875rem; /* 30px */
    max-width: 68rem;
    text-transform: uppercase;
}

.about-estate__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 3rem; /* 48px */
    font-weight: 400;
    line-height: 1.1;
}

.about-estate__subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.1;
}

.about-estate__nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.625rem; /* 10px */
}

.about-estate__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 3.375rem; /* 54px */
    height: 3.375rem;
    padding: 0;
    border: 0.0625rem solid transparent;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.about-estate__nav-btn:hover {
    opacity: 0.75;
}

.about-estate--dark .about-estate__nav-btn--prev {
    border-color: #474d5c;
    background: transparent;
    color: rgba(251, 250, 247, 0.4);
}

.about-estate--dark .about-estate__nav-btn--next {
    border-color: transparent;
    background-color: #474d5c;
    color: var(--color-white);
}

.about-estate--light .about-estate__nav-btn--prev {
    border-color: var(--color-stroke);
    background: transparent;
    color: rgba(39, 43, 52, 0.4);
}

.about-estate--light .about-estate__nav-btn--next {
    border-color: transparent;
    background-color: var(--color-stroke);
    color: var(--color-dark);
}

.about-estate__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.about-estate__viewport.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.about-estate__viewport::-webkit-scrollbar {
    display: none;
}

.about-estate__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.25rem; /* 20px */
    width: max-content;
}

.about-estate__slide {
    position: relative;
    flex: 0 0 30.8125rem; /* 493px */
    width: 30.8125rem;
    height: 35.125rem; /* 562px */
    margin: 0;
    overflow: hidden;
    background-color: #564d3b;
}

.about-estate__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.about-estate__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #564d3b;
}

/* Mobile — Figma 1379:7523 / History 1379:7784 */
@media (max-width: 75rem) {
    /* Hero — Section 01 */
    .about-hero__inner {
        gap: 2.5rem; /* 40px */
        max-width: none;
        padding: 3.75rem var(--space-inline) 3.75rem; /* 60 / 20 */
    }

    .about-hero__media {
        width: 16.5625rem; /* 265px */
        height: 11rem; /* 176px */
    }

    .about-hero__text {
        gap: 1.875rem; /* 30px — title → intro */
    }

    .about-hero__title {
        font-size: 3rem; /* 48px */
        letter-spacing: -0.09rem; /* -1.44px */
        line-height: 1;
    }

    .about-hero__intro {
        max-width: none;
        font-size: 1rem; /* 16px */
        line-height: 1.1;
    }

    /* History — Section 02 / 1379:7784 */
    .about-history__inner {
        min-height: 50.75rem; /* 812px */
        padding-top: 1.875rem; /* 30px */
        padding-bottom: 0;
    }

    .about-history__head {
        max-width: none;
        align-items: center;
    }

    .about-history__title {
        font-size: 1.875rem; /* 30px */
        line-height: 1.1;
    }

    .about-history__cta {
        box-sizing: border-box;
        min-width: 7.5rem; /* 120px */
        width: 7.5rem;
        max-width: 100%;
        height: 3.375rem; /* 54px */
        padding: 0;
        white-space: nowrap;
    }

    .about-history__cta-label--desktop {
        display: none;
    }

    .about-history__cta-label--mobile {
        display: inline;
    }

    .about-history__viewport {
        margin-top: 1.875rem; /* 30px — head → stories */
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-inline);
    }

    .about-history__track {
        align-items: flex-start;
        gap: 7.5rem; /* 120px between stories */
        padding: 0 var(--space-inline) 4rem; /* bottom room for timeline */
    }

    .about-history__story {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        box-sizing: border-box;
        /* Figma 390→350; scales on smaller phones so year stays viewport-centered */
        width: calc(100vw - (var(--space-inline) * 2));
        max-width: 21.875rem; /* 350px */
        height: auto;
        min-height: 0;
        scroll-snap-align: start;
    }

    .about-history__story--year-only {
        width: calc(100vw - (var(--space-inline) * 2));
        max-width: 21.875rem;
        justify-content: center;
        /* Figma mobile History ends at 2026 — no year-only end marker */
        display: none;
    }

    .about-history__year-wrap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 1.75rem 0; /* 28px — equal sides → true center */
    }

    .about-history__year {
        width: 100%;
        font-size: 6.25rem; /* 100px */
        letter-spacing: 0.0625rem; /* 1px */
        line-height: 1;
        text-align: center;
    }

    .about-history__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        gap: 1.875rem; /* 30px */
    }

    .about-history__photo {
        flex-shrink: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: 21.4375rem; /* 343px */
        height: 16.25rem; /* 260px */
    }

    .about-history__image,
    .about-history__image-placeholder {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .about-history__text {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: 0.875rem; /* 14px */
        line-height: 1.1;
        letter-spacing: -0.0175rem; /* -0.28px */
        text-align: center;
    }

    .about-history__timeline {
        width: calc(100% - (var(--space-inline) * 2));
        max-width: none;
        height: 3rem; /* 48px */
        margin: 0 auto;
    }

    /* What we do — Section 03 */
    .about-what__inner {
        gap: 3.75rem; /* 60px */
        padding: 3.75rem var(--space-inline); /* 60 / 20 */
    }

    .about-what__title {
        font-size: 3rem; /* 48px */
        letter-spacing: 0;
        line-height: 1.1;
        max-width: none;
    }

    .about-what__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem; /* 20px */
        max-width: 21.875rem; /* 350px */
        margin: 0 auto;
    }

    .about-what__card {
        gap: 5rem; /* 80px */
        padding: 3.125rem 1.25rem 1.875rem; /* 50 20 30 */
    }

    .about-what__media {
        width: 14.75rem; /* ~236px stack */
        height: 11.5rem; /* ~184px */
    }

    .about-what__card-title {
        font-size: 1.375rem; /* 22px */
        line-height: 1.1;
    }

    .about-what__card-subtitle {
        font-size: 0.875rem; /* 14px */
        letter-spacing: -0.0175rem;
    }

    /* Estate — Sections 04 / 07 */
    .about-estate__inner {
        gap: 2.5rem; /* 40px */
        padding: 3.75rem var(--space-inline); /* 60 / 20 */
        max-width: none;
    }

    .about-estate__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem; /* 40px — copy → nav */
    }

    .about-estate__copy {
        gap: 1.25rem; /* 20px */
        max-width: none;
        width: 100%;
    }

    .about-estate--light .about-estate__copy {
        gap: 1.875rem; /* 30px — Castelnuovo */
    }

    .about-estate__title {
        font-size: 1.875rem; /* 30px */
        line-height: 1.1;
    }

    .about-estate__subtitle {
        font-size: 0.875rem; /* 14px */
        letter-spacing: -0.0175rem;
        line-height: 1.1;
    }

    .about-estate__track {
        gap: 1.25rem; /* 20px */
    }

    .about-estate__slide {
        flex-basis: 15.8125rem; /* 253px */
        width: 15.8125rem;
        height: 18rem; /* 288px */
    }
}