:root {
    --content-max-width: 1200px;
    --font-stack: Helvetica, Arial, sans-serif;

    --gap-xs: 16px;
    --gap-sm: 24px;
    --gap-lg: 60px;

    --color-dark: #1D1D1D;
    --color-frosted-dark: #e9e9e999;
    --color-frosted-light: #f7f7f780;

    --blur-sm: 4px;
    --blur-md: 6px;
}

body {
    margin: 0;
    font-family: var(--font-stack);
}

main {
    display: flex;
    flex-direction: column;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* Sticky header: sits at a lower z-index than the showcase sections below,
   so their backgrounds scroll up and over it. */
.site-header {
    padding: 40px 24px 100px;
    position: sticky;
    top: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
}

.logo {
    height: 40px;
    width: auto;
}

/* Showcase sections: the two layout shapes used across the page.
   z-index: 1 is what lets these scroll over the sticky header. */
.showcase {
    z-index: 1;
}

/* Below 1200px wide, the vw-based clamps shrink spacing in step with the screen; at 1200px and up they hit the desktop values. */
.showcase--stacked {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: 0 clamp(var(--gap-sm), 5vw, var(--gap-lg)) var(--gap-sm);
}

.showcase--row {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: var(--gap-sm);
    padding: 0 var(--gap-sm) var(--gap-lg);
}

.column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.column--gapped {
    gap: clamp(var(--gap-sm), 5vw, var(--gap-lg));
}

/* Panels: boxed content areas with a background treatment */
.panel {
    display: flex;
    flex: 1;
}

/* Centred with a 70px gap, the images land exactly where 126px side padding put them at full width,
   but on narrower screens the images keep their size and the space around them gives way first. */
.panel--dark {
    flex-direction: row;
    justify-content: center;
    padding: clamp(var(--gap-sm), 4.67vw, 56px) var(--gap-sm);
    gap: clamp(var(--gap-sm), 5.84vw, 70px);
    background-color: var(--color-dark);
}

.panel--frosted-dark {
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--color-frosted-dark);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

/* A grid rather than a flex column: in a padded flex column, Safari works out a percentage-width image's
   height from the panel's outer width, so the images come out too tall. Grid sizes them correctly. */
.panel--frosted-light {
    display: grid;
    padding: clamp(var(--gap-sm), 5.34vw, 64px);
    gap: clamp(var(--gap-sm), 3.34vw, 40px);
    background-color: var(--color-frosted-light);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
}

/* Grid for the same Safari reason as .panel--frosted-light. minmax(0, 1fr) keeps the fixed-width
   document and links from widening the column past the panel. */
.panel--focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 300px 24px 40px 24px;
    gap: 20px;
}

.panel--focus-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 200px 24px 60px 24px;
    gap: 32px;
}

.panel--plain {
    flex-direction: row;
}

/* Panel images */
.panel__image {
    max-width: 100%;
}

/* <picture> only swaps the file on narrow screens; the img inside stays the flex item */
picture {
    display: contents;
}

/* min-width: 0 lets the pair shrink together instead of pushing past the panel */
.panel__image--wide {
    width: 363px;
    min-width: 0;
    height: auto;
    object-fit: contain;
}

.panel__image--tall {
    width: 395px;
    min-width: 0;
    height: auto;
    object-fit: contain;
}

.panel__image--full {
    flex: 1;
    width: 1080px;
    height: auto;
    object-fit: contain;
}

/* Sized by width so they scale with their column and keep their proportions */
.panel__image--short,
.panel__image--medium {
    width: 100%;
    height: auto;
}

/* Standalone images: not inside a panel background */
.standalone-image {
    max-width: 100%;
    width: auto;
}

.standalone-image--tall,
.standalone-image--tallest {
    width: 100%;
    height: auto;
}

.standalone-image--focused {
    width: 700px;
}

/* Holds a focused document. No box on wide screens; on narrow ones it crops and scrolls sideways. */
.focus-frame {
    display: contents;
}

/* actions */
.action-frame {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 32px;
    width: 636px;
    max-width: calc(100% - 64px);
}

.action-frame__link {
    font-family: var(--font-stack);
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    text-decoration: underline;
}

/* Narrow screens (phones, small tablets): everything stacks into one column, no wider than one
   desktop column (564px + gutters), so images stay near their desktop size. Kept last so it wins. */
@media (max-width: 768px) {
    main {
        max-width: calc(564px + 2 * var(--gap-xs));
    }

    /* Driven by width so the wordmark shrinks rather than overflowing a narrow phone.
       331px is its natural width, reached at about 379px of screen and up. */
    .site-header {
        padding-inline: var(--gap-xs);
    }

    .logo {
        width: min(331px, 100%);
        height: auto;
    }

    .showcase--stacked,
    .showcase--row {
        padding: 0 var(--gap-xs) var(--gap-sm);
    }

    .showcase--row {
        flex-direction: column;
    }

    .column--gapped {
        gap: var(--gap-sm);
    }

    .panel--dark,
    .panel--frosted-light {
        padding: var(--gap-sm);
        gap: var(--gap-sm);
    }

    /* grid for the same Safari reason as .panel--frosted-light */
    .panel--dark {
        display: grid;
        justify-items: center;
    }

    .panel__image--wide,
    .panel__image--tall {
        width: 100%;
        max-width: 395px;
    }

    .panel--focus,
    .panel--focus-compact {
        justify-items: stretch;
        padding-inline: 0;
    }

    /* The document stays big enough to read: it runs off the right edge and scrolls sideways,
       bleeding through the gutters so it isn't clipped mid-swipe. The cut-off edge already says
       "there's more", so the scrollbar is hidden. */
    .focus-frame {
        display: flex;
        margin: 0 calc(-1 * var(--gap-xs));
        padding: 0 var(--gap-xs);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    /* same, for browsers older than scrollbar-width (Safari before 18.2) */
    .focus-frame::-webkit-scrollbar {
        display: none;
    }

    .standalone-image--focused {
        flex: none;
        width: max(560px, 100%);
        max-width: none;
    }

    .action-frame {
        width: auto;
        max-width: none;
        margin: 0;
    }
}