/**
 * Homepage — Bold Modernist.
 *
 * The composition rests on three moves:
 *
 *   1. Display type at 106px, Fraunces Black, line-height 0.84. At that size
 *      the tracking has to come in hard (-0.05em) or the words drift apart.
 *   2. The hero photograph hangs BELOW its row and overlaps the black band,
 *      which is what stops the page reading as stacked boxes.
 *   3. Solid black bands carry the numbers and the footer, so the page has
 *      structure without needing cards or shadows.
 */

.fmr-home {
    --gutter: clamp(20px, 4.5vw, 56px);
    color: var(--fmr-ink-500);
}

.fmr-section {
    padding-block: clamp(48px, 6.5vw, 88px);
}

.fmr-section--tint {
    background: var(--fmr-surface-muted);
    border-top: 2px solid var(--fmr-border-strong);
    border-bottom: 2px solid var(--fmr-border-strong);
}

/* ---- Section headers -------------------------------------------------------- */

.fmr-head {
    margin-bottom: clamp(24px, 3.5vw, 38px);
    max-width: 48rem;
}

.fmr-eyebrow {
    display: inline-block;
    background: var(--fmr-brand-500);
    color: #fff;
    font-family: "Geist", var(--font-sans, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--fmr-track-label);
    text-transform: uppercase;
    padding: 7px 13px;
    margin-bottom: 20px;
}

.fmr-h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fmr-text-2xl);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: var(--fmr-track-head);
    color: var(--fmr-ink-900);
}

.fmr-lede {
    margin: 14px 0 0;
    font-size: var(--fmr-text-md);
    line-height: 1.6;
    color: var(--fmr-ink-500);
}

.fmr-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--fmr-space-6);
    max-width: none;
}

/* ---- Hero --------------------------------------------------------------------- */

.fmr-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(360px, 500px);
    align-items: end;
    gap: clamp(28px, 4vw, 56px);
    padding-block: clamp(40px, 5vw, 68px) 0;
}

.fmr-hero__title {
    margin: 0 0 30px;
    font-family: var(--font-serif);
    font-size: var(--fmr-text-4xl);
    font-weight: 900;
    line-height: .84;
    letter-spacing: var(--fmr-track-display);
    text-transform: uppercase;
    color: var(--fmr-ink-900);
}

/* The last line of the headline carries the accent. */
.fmr-hero__title br+* {
    color: var(--fmr-brand-500);
}

.fmr-hero__sub {
    margin: 0 0 30px;
    font-size: var(--fmr-text-md);
    line-height: 1.6;
    color: var(--fmr-ink-500);
    max-width: 32rem;
    text-wrap: pretty;
}

/* The photograph hangs past its row and sits over the band below. */
.fmr-hero__media {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: visible;
    margin-bottom: clamp(-90px, -6vw, -40px);
    z-index: 2;
}

.fmr-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Caption: a solid strip across the foot of the image, not a floating pill. */
.fmr-hero__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: var(--fmr-surface-dark);
    color: var(--fmr-on-dark);
    padding: 13px 18px;
    font-family: "Geist", var(--font-sans, sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

/* ---- Numbers: a solid black band ------------------------------------------------ */

.fmr-section--dark {
    background: var(--fmr-surface-dark);
    color: var(--fmr-on-dark);
    padding-block: clamp(30px, 4vw, 46px);
    position: relative;
    z-index: 1;
}

.fmr-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 0;
}

.fmr-fact {
    padding: 0;
}

.fmr-fact+.fmr-fact {
    border-left: 1px solid var(--fmr-border-dark);
    padding-left: clamp(22px, 3.4vw, 44px);
}

.fmr-fact__n {
    display: block;
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums;
    font-size: var(--fmr-text-3xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--fmr-track-head);
    color: var(--fmr-on-dark);
}

.fmr-fact:last-child .fmr-fact__n {
    color: var(--fmr-brand-300);
}

.fmr-fact__l {
    display: block;
    margin-top: 10px;
    font-family: "Geist", var(--font-sans, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fmr-track-label);
    text-transform: uppercase;
    color: #a1a1aa;
}

/* ---- Editorial two-column ---------------------------------------------------------- */

.fmr-cols {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: clamp(28px, 4.5vw, 64px);
    align-items: start;
}

.fmr-prose p {
    margin: 0 0 18px;
    font-size: var(--fmr-text-md);
    line-height: 1.72;
    color: var(--fmr-ink-500);
}

.fmr-prose p:last-child {
    margin-bottom: 0;
}

.fmr-aside {
    border: 2px solid var(--fmr-border-strong);
    padding: clamp(20px, 2.8vw, 28px);
    background: var(--fmr-surface);
}

.fmr-aside__title {
    margin: 0 0 16px;
    font-family: "Geist", var(--font-sans, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--fmr-track-label);
    text-transform: uppercase;
    color: var(--fmr-brand-600);
}

.fmr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fmr-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 13px;
    font-size: var(--fmr-text-sm);
    line-height: 1.6;
    color: var(--fmr-ink-500);
}

.fmr-list li:last-child {
    margin-bottom: 0;
}

.fmr-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 9px;
    height: 3px;
    background: var(--fmr-brand-500);
}

.fmr-list strong {
    color: var(--fmr-ink-900);
    font-weight: 700;
}

.fmr-toc a {
    color: var(--fmr-ink-500);
    text-decoration: none;
}

.fmr-toc a:hover {
    color: var(--fmr-brand-600);
}

/* ---- Rails --------------------------------------------------------------------------- */

.fmr-rail {
    display: flex;
    gap: var(--fmr-space-6);
    overflow-x: auto;
    padding-block: 4px 10px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    max-width: 100%;
}

.fmr-rail::-webkit-scrollbar {
    display: none;
}

.fmr-rail>* {
    scroll-snap-align: start;
}

/* ---- Category index -------------------------------------------------------------------- */

.fmr-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    border: 2px solid var(--fmr-border-strong);
}

.fmr-cat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    background: var(--fmr-surface);
    border-right: 1px solid var(--fmr-border);
    border-bottom: 1px solid var(--fmr-border);
    text-decoration: none;
    color: var(--fmr-ink-900);
    font-family: "Geist", var(--font-sans, sans-serif);
    font-size: var(--fmr-text-sm);
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}

.fmr-cat:hover {
    background: var(--fmr-surface-dark);
    color: var(--fmr-on-dark);
}

.fmr-cat span {
    font-variant-numeric: tabular-nums;
    font-size: var(--fmr-text-xs);
    color: var(--fmr-ink-400);
}

.fmr-cat:hover span {
    color: var(--fmr-brand-300);
}

/* ---- Closing CTA ------------------------------------------------------------------------- */

.fmr-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fmr-space-6);
    flex-wrap: wrap;
    border: 2px solid var(--fmr-border-strong);
    padding: clamp(26px, 4vw, 44px);
}

.fmr-cta__title {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: var(--fmr-text-xl);
    font-weight: 700;
    letter-spacing: var(--fmr-track-head);
    color: var(--fmr-ink-900);
}

/* ---- Responsive --------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .fmr-hero,
    .fmr-cols {
        grid-template-columns: 1fr;
    }

    .fmr-hero__media {
        order: -1;
        aspect-ratio: 3 / 2;
        margin-bottom: var(--fmr-space-8);
    }

    .fmr-head--row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .fmr-facts {
        grid-template-columns: 1fr;
        gap: var(--fmr-space-6);
    }

    .fmr-fact+.fmr-fact {
        border-left: 0;
        border-top: 1px solid var(--fmr-border-dark);
        padding-left: 0;
        padding-top: var(--fmr-space-6);
    }
}