/*
|-------------------------------------------------------------------------------
| Landing
|-------------------------------------------------------------------------------
|
| Standalone stylesheet for the one-page landing (templates/home.twig).
|
| Written by hand and deliberately NOT part of the gulp/Tailwind build: that
| build purges against the Twig templates, and its toolchain (gulp 3 +
| node-sass) no longer installs on current Node versions. main.css is still
| loaded alongside this file for normalize, the @font-face declarations and the
| base element styles; everything landing-specific lives here.
|
| Sizes come from the 1920 x 1078 design. The horizontal gutters and the
| vertical rhythm are expressed as vw so the composition keeps its proportions
| on smaller desktops; body copy stays at a fixed size so it stays readable.
|
*/

:root {
    --landing-olive     : #69695F;
    --landing-sand      : #F5F5F5;
    --landing-ink       : #4D4D46;
    --landing-ink-muted : #6B6864;

    /* Gutters: header 80px, content and footer 175px on a 1920px frame. */
    --landing-gutter      : clamp(1.5rem, 4.17vw, 5rem);
    --landing-gutter-wide : clamp(1.5rem, 9.11vw, 10.9375rem);

    /*
     | One vertical design-pixel. The landing is meant to be read without
     | scrolling, so every vertical measurement is a multiple of this unit: it
     | is 1px on a 1078px-tall viewport (the height of the design frame) and
     | shrinks to half that around 900px, which keeps the whole composition on
     | screen on shorter windows. --landing-v-soft compresses less, for the
     | header and footer bands.
     */
    --landing-v      : clamp(0.3px, calc(0.2809vh - 2.0281px), 1px);
    --landing-v-soft : clamp(0.55px, calc(0.2809vh - 2.0281px), 1px);

    --landing-header-h : calc(104 * var(--landing-v-soft));
    --landing-footer-h : calc(214 * var(--landing-v-soft));

    /* Distance from the header to the first line of copy and to the image. */
    --landing-main-top    : calc(105 * var(--landing-v));
    --landing-main-bottom : calc(78 * var(--landing-v));

    /* Image column: 614 x 809 at x=1228, overlapping the footer by 154px. */
    --landing-media-width   : 31.98%;
    --landing-media-overlap : calc(154 * var(--landing-v));
}

.c-landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--landing-olive);
}


/* ============================================
   HEADER
   ============================================ */

.c-landing__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: var(--landing-header-h);
    padding: 1rem var(--landing-gutter);
}

.c-landing__logo {
    display: block;
    line-height: 0;
}

.c-landing__logo .c-svg {
    display: block;
    width: 182px;
    max-width: 100%;
    height: auto;
    color: #FFFFFF;
    fill: currentColor;
}


/* ============================================
   MAIN
   ============================================ */

.c-landing__main {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    padding: var(--landing-main-top) var(--landing-gutter-wide) var(--landing-main-bottom);
}

.c-landing__eyebrow {
    margin: 0;
    font-family: Gotham-Book, sans-serif;
    font-size: 0.875rem;
    line-height: 1.3125rem;
    color: #FFFFFF;
}

.c-landing__title {
    /* The design's 852px box, which assumes Butler Regular -- now that the real
       Regular cut is loaded the widening compensation for Medium is gone. */
    max-width: 17.75em;
    margin: calc(52 * var(--landing-v)) 0 0;
    font-family: Butler, serif;
    font-weight: 400;
    font-size: clamp(1.625rem, 1.2rem + 1.6vw, 3rem);
    line-height: 1.125;
    color: #FFFFFF;
}

.c-landing__title strong {
    /* Butler Bold, a real cut now, instead of a browser-faked bold. */
    font-weight: 700;
}

.c-landing__text {
    max-width: 48.5rem; /* 776px */
    margin: calc(52 * var(--landing-v)) 0 0;
    font-family: Gotham-Book, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.625rem;
    letter-spacing: 0.4px;
    color: var(--landing-sand);
}

.c-landing__text p {
    margin: 0 0 1.625rem;
}

.c-landing__text p:last-child {
    margin-bottom: 0;
}

.c-landing__text strong {
    font-family: Gotham-Bold, sans-serif;
    font-weight: 400;
}


/* ============================================
   MEDIA
   ============================================ */

.c-landing__media {
    position: absolute;
    z-index: 2;
    top: var(--landing-main-top);
    right: 4.06%; /* 78px on 1920 */
    bottom: calc(var(--landing-media-overlap) * -1);
    width: var(--landing-media-width);
    max-width: 38.375rem; /* 614px */
    overflow: hidden;
}

.c-landing__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.c-landing__slide.is-active {
    opacity: 1;
}

.c-landing__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

@media (prefers-reduced-motion: reduce) {
    .c-landing__slide {
        transition: none;
    }
}


/* ============================================
   FOOTER
   ============================================ */

.c-landing__footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: var(--landing-footer-h);
    padding: 2.5rem var(--landing-gutter-wide);
    background-color: var(--landing-sand);
}

.c-landing__footer-inner {
    display: flex;
    align-items: flex-start;
    gap: 3rem; /* 48px between the monogram and the details */
}

.c-landing__mark .c-svg {
    display: block;
    width: 64px;
    height: auto;
    color: var(--landing-ink);
    fill: currentColor;
}

.c-landing__details {
    display: flex;
    flex-wrap: wrap;
    font-family: Gotham-Book, sans-serif;
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: 0.4px;
    color: var(--landing-ink-muted);
}

.c-landing__details-address {
    flex: 0 0 auto;
    width: 19.6875rem; /* 315px, puts the contact column at x=607 */
    padding-right: 1.5rem;
}

.c-landing__details-title {
    margin: 0 0 0.1875rem;
    font-family: Gotham-Bold, sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.3125rem;
    color: var(--landing-ink);
}

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

.c-landing__details-list a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.c-landing__details-list a:hover,
.c-landing__details-list a:focus {
    color: var(--landing-ink);
}

/* The contact column lines up with the address, not with the brand name. */
.c-landing__details-list--contact {
    padding-top: 1.5rem;
}


/* ============================================
   DESKTOP — cap the heading so the page still fits a short window
   ============================================ */

@media (min-width: 960px) {

    .c-landing__title {
        font-size: min(clamp(1.625rem, 1.2rem + 1.6vw, 3rem), 5vh);
    }
}


/* ============================================
   TABLET AND BELOW — the image moves into the flow
   ============================================ */

@media (max-width: 959px) {

    .c-landing__main {
        padding-bottom: 0;
    }

    .c-landing__title,
    .c-landing__text {
        max-width: none;
    }

    .c-landing__media {
        position: relative;
        z-index: auto;
        inset: auto;
        width: auto;
        max-width: none;
        margin: 3rem calc(var(--landing-gutter-wide) * -1) 0;
        aspect-ratio: 4 / 3;
    }

    .c-landing__footer {
        min-height: 0;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .c-landing__footer-inner {
        gap: 2rem;
    }

    .c-landing__details-address {
        width: auto;
        padding-right: 3rem;
    }
}

@media (max-width: 599px) {

    .c-landing__logo .c-svg {
        width: 140px;
    }

    .c-landing__mark .c-svg {
        width: 48px;
    }

    .c-landing__media {
        aspect-ratio: 3 / 4;
    }

    .c-landing__footer-inner {
        flex-direction: column;
        gap: 1.5rem;
    }

    .c-landing__details {
        gap: 1.25rem 0;
    }

    .c-landing__details-address {
        width: 100%;
        padding-right: 0;
    }

    .c-landing__details-list--contact {
        padding-top: 0;
    }
}