/* Julie Kahn Communications — Milestone 1 foundation */

:root {
    color-scheme: light;
    --color-burgundy: #a21e35;
    --color-burgundy-deep: #811628;
    --color-rose: #c67479;
    --color-rose-light: #f2d4d7;
    --color-ink: #1c1b19;
    --color-text: #66635f;
    --color-warm-white: #fffefa;
    --color-frame: #e9e1d7;
    --color-tan: #f3f1ed;
    --color-footer: #292320;
    --color-footer-text: #e7ddd4;
    --color-focus: #f6bf58;
    --header-height: 5.1875rem;
    --header-height-compact: 3.5625rem;
    --header-bg: rgb(162 30 53 / 90%);
    --header-bg-compact: rgb(129 22 40 / 96%);
    --hero-height-home: 50rem;
    --hero-height-page: 25.3125rem;
    --content-width: 78.5rem;
    --content-overlap: 6.25rem;
    --content-footer-overlap: 5.875rem;
    --content-border-width: 0.9375rem;
    --content-padding-inline: 3.9375rem;
    --content-padding-block: 4rem;
    --page-gutter: clamp(1rem, 4vw, 3rem);
    --transition-quick: 180ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 17.5rem;
    background: var(--color-tan);
    color: var(--color-text);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
}

body,
button {
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-burgundy);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.08em;
}

a:hover {
    color: var(--color-burgundy-deep);
}

a:focus-visible,
button:focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--color-warm-white);
    color: var(--color-ink);
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform var(--transition-quick);
}

.skip-link:focus {
    transform: translateY(0);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Header and primary navigation */

.site-header {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto;
    height: var(--header-height);
    background: var(--header-bg);
    box-shadow: 0 0.125rem 0.75rem rgb(28 27 25 / 10%);
    transition:
        height 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}

.site-header.is-compact {
    height: var(--header-height-compact);
    background: var(--header-bg-compact);
    box-shadow: 0 0.25rem 1rem rgb(28 27 25 / 22%);
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: 5.625rem;
    padding-left: 2.8125rem;
}

.site-logo {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    height: 100%;
    min-width: 0;
    color: #fff;
}

.site-logo__desktop {
    display: block;
    width: auto;
    height: 100%;
    transition: height 220ms ease;
}

.site-logo__desktop img,
.site-logo__mobile img {
    width: auto;
    height: 100%;
    max-width: none;
}

.site-logo__mobile {
    display: none;
}

.site-header.is-compact .site-logo__desktop {
    width: auto;
}

.desktop-nav {
    position: absolute;
    top: 0;
    right: 5.625rem;
    bottom: 0;
    align-self: stretch;
}

.nav-list,
.mobile-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.nav-list li {
    position: relative;
    display: flex;
}

.nav-list li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0.0625rem;
    height: 1.0625rem;
    background: #534741;
    content: "";
    transform: translateY(-50%);
}

.nav-list a {
    display: flex;
    align-items: center;
    padding: 0 1.1875rem;
    color: #fff;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.0625rem;
    line-height: 1.0625rem;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
    color: var(--color-rose);
}

.mobile-navigation {
    display: none;
    flex: 0 0 auto;
}

/* Homepage carousel and interior hero system */

.home-carousel,
.page-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: clip;
    background: var(--color-ink);
}

.home-carousel,
.home-carousel__viewport,
.home-carousel__slides {
    height: var(--hero-height-home);
}

.home-carousel__viewport,
.home-carousel__slides {
    position: relative;
    width: 100%;
}

.home-carousel__slide {
    position: absolute;
    z-index: 0;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s linear 800ms;
}

.home-carousel__slide.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.home-carousel__slide img {
    width: 100%;
    height: 110%;
    max-width: none;
    object-fit: cover;
    object-position:
        var(--slide-position-desktop-x, 50%)
        calc(var(--slide-position-desktop-y, 0%) - var(--hero-parallax-y, 0px));
}

.home-carousel::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgb(28 27 25 / 14%) 0%,
            transparent 46%,
            rgb(28 27 25 / 30%) 100%
        );
    content: "";
    pointer-events: none;
}

.home-carousel__controls {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
}

.no-js .home-carousel__controls {
    display: none;
}

.home-carousel__arrow,
.home-carousel__dot {
    border: 0;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
}

.home-carousel__arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 0.0625rem solid rgb(255 255 255 / 68%);
    border-radius: 50%;
    background: rgb(28 27 25 / 36%);
    transform: translateY(-50%);
    transition:
        background-color var(--transition-quick),
        border-color var(--transition-quick),
        transform var(--transition-quick);
}

.home-carousel__arrow:hover {
    border-color: #fff;
    background: rgb(129 22 40 / 86%);
    transform: translateY(-50%) scale(1.05);
}

.home-carousel__arrow--previous {
    left: clamp(1rem, 3.5vw, 3.5rem);
}

.home-carousel__arrow--next {
    right: clamp(1rem, 3.5vw, 3.5rem);
}

.home-carousel__dots {
    position: absolute;
    right: 50%;
    bottom: calc(var(--content-overlap) + 1.25rem);
    display: flex;
    gap: 0.7rem;
    transform: translateX(50%);
    pointer-events: auto;
}

.home-carousel__dot {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
}

.home-carousel__dot::before {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0.72rem;
    height: 0.72rem;
    border: 0.125rem solid #fff;
    border-radius: 50%;
    background: rgb(28 27 25 / 24%);
    content: "";
    transform: translate(-50%, -50%);
    transition:
        background-color var(--transition-quick),
        transform var(--transition-quick);
}

.home-carousel__dot:hover::before,
.home-carousel__dot[aria-current="true"]::before {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.18);
}

.page-hero {
    display: block;
}

.page-hero--interior {
    height: var(--hero-height-page);
}

.page-hero__media,
.page-hero__shade {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.page-hero__media {
    background-image: var(--hero-image);
    background-position:
        var(--hero-position-x, 50%)
        calc(var(--hero-position-y, 50%) + var(--hero-parallax-y, 0px));
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.015);
}

.page-hero__shade {
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgb(28 27 25 / 22%) 0%,
            rgb(28 27 25 / 16%) 46%,
            rgb(28 27 25 / 48%) 100%
        );
}

.page-hero__content {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    width: min(calc(100% - (2 * var(--page-gutter))), var(--content-width));
    margin-inline: auto;
    padding: 0 0 1.6875rem;
    text-align: center;
}

.page-hero--interior h1 {
    max-width: none;
    margin: 0 auto;
    color: #fff;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 3.4375rem;
    font-weight: 400;
    letter-spacing: 0.5rem;
    line-height: 4.6875rem;
    text-shadow: 0 0.16rem 0.2rem rgb(28 27 25 / 80%);
    text-transform: uppercase;
    text-wrap: wrap;
}

.page-hero--interior .page-hero__content.is-entrance-ready {
    opacity: 0;
    transform: translateX(7.5rem);
}

.page-hero--interior .page-hero__content.is-entrance-ready.is-entered {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating content frame and page field */

.site-main {
    position: relative;
    z-index: 10;
}

.page-middle {
    display: flow-root;
    padding: 0 1rem;
    background: var(--color-tan);
}

.content-frame {
    position: relative;
    z-index: 2;
    width: min(100%, var(--content-width));
    min-height: 19rem;
    margin: calc(-1 * var(--content-overlap)) auto calc(-1 * var(--content-footer-overlap));
    border: var(--content-border-width) solid var(--color-frame);
    background: var(--color-warm-white);
}

.content-frame.is-entrance-ready {
    opacity: 0.72;
    transform: translateY(3.625rem);
}

.content-frame.is-entrance-ready.is-entered {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.content-frame__inner {
    padding: var(--content-padding-block) var(--content-padding-inline)
        calc(var(--content-padding-block) + 0.5rem);
}

.content-section {
    max-width: 57rem;
    margin-inline: auto;
}

.content-section + .content-section {
    margin-top: clamp(3rem, 7vw, 5.5rem);
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    border-top: 0.0625rem solid #ded6ce;
}

.content-section--intro {
    text-align: center;
}

.content-section--preview {
    max-width: 49rem;
    text-align: center;
}

.content-title {
    max-width: 19ch;
    margin: 0 auto 1.75rem;
    color: var(--color-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 5vw, 3.65rem);
    font-weight: 400;
    letter-spacing: 0.035em;
    line-height: 1.18;
    text-wrap: balance;
}

.eyebrow {
    margin: 0 0 0.7rem;
    color: var(--color-burgundy);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

h2 {
    margin: 0 0 1.25rem;
    color: var(--color-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.85rem, 3.7vw, 2.65rem);
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.25;
    text-wrap: balance;
}

p {
    margin: 0 0 1.25rem;
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    color: #4f4c48;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    line-height: 1.7;
}

.text-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Milestone 2 editorial content and homepage components */

[id] {
    scroll-margin-top: calc(var(--header-height-compact) + 1rem);
}

.home-intro .content-title {
    max-width: none;
    margin-bottom: 1.25rem;
    font-size: clamp(2rem, 3vw, 2.45rem);
    line-height: 1.35;
}

.home-intro .content-title span,
.about-copy h2 span {
    display: block;
}

.home-intro > h2,
.home-services > h2,
.home-clients > h2 {
    text-align: center;
}

.home-intro > p,
.about-copy > p,
.bio-profile > p,
.services-editorial > p {
    text-align: left;
}

.rare {
    width: min(100%, 34rem);
    margin: 2.75rem auto 0;
    border-block: 0.0625rem solid #ded6ce;
    padding: 1.75rem 1rem;
    text-align: center;
}

.rare h3 {
    margin: 0 0 1rem;
    color: var(--color-burgundy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1;
}

.rare ul {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rare li {
    color: #4f4c48;
    font-family: Georgia, "Times New Roman", serif;
}

.rare strong {
    color: var(--color-burgundy);
    font-size: 1.2em;
}

.home-services,
.home-clients {
    max-width: 68.75rem;
}

.section-subtitle {
    margin: -0.65rem 0 2.25rem;
    color: #5d5955;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
    font-style: italic;
    text-align: center;
}

.service-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}

.service-highlight {
    text-align: center;
}

.service-highlight img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.service-highlight h3,
.bio-profile h3,
.services-editorial h3,
.video-library h2 {
    color: var(--color-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.service-highlight h3 {
    margin: 1rem 0 0;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.3;
}

.service-highlight .text-link {
    margin-top: 0.7rem;
}

.client-carousel__viewport {
    width: 100%;
}

.client-carousel__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.client-carousel__item {
    display: grid;
    min-height: 10.5rem;
    place-items: center;
    padding: 0.75rem;
}

.client-carousel__item img {
    width: auto;
    max-height: 9rem;
    object-fit: contain;
}

.client-carousel__footer {
    display: none;
}

.js .client-carousel__viewport {
    overflow: hidden;
}

.js .client-carousel__track {
    display: flex;
    gap: 0;
    transform: translate3d(0, 0, 0);
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.js .client-carousel__item {
    flex: 0 0 calc(100% / var(--client-visible, 5));
}

.js .client-carousel__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.client-carousel__button {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    border: 0.0625rem solid #cfc5bc;
    border-radius: 50%;
    padding: 0;
    place-items: center;
    background: transparent;
    color: var(--color-burgundy);
    cursor: pointer;
    transition:
        border-color var(--transition-quick),
        background-color var(--transition-quick);
}

.client-carousel__button:hover {
    border-color: var(--color-burgundy);
    background: var(--color-rose-light);
}

.about-copy h2 {
    text-align: center;
}

.bio-profile__intro,
.services-editorial__intro {
    display: grid;
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
    margin-bottom: 1.75rem;
}

.bio-profile__intro {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bio-profile__portrait {
    width: 14.875rem;
    height: auto;
    border: 0.5rem solid var(--color-frame);
}

.bio-profile__role,
.bio-profile__lede {
    color: #4f4c48;
    font-family: Georgia, "Times New Roman", serif;
}

.bio-profile__role {
    margin-top: -0.65rem;
    font-size: 1.15rem;
}

.bio-profile__lede {
    color: var(--color-burgundy);
    font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.bio-profile h3,
.services-editorial h3 {
    margin: 2.5rem 0 0.85rem;
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
}

.bio-profile ul,
.services-editorial ul {
    padding-left: 1.35rem;
}

.bio-profile li,
.services-editorial li {
    margin-bottom: 0.35rem;
    padding-left: 0.25rem;
}

.bio-profile li::marker,
.services-editorial li::marker {
    color: var(--color-burgundy);
}

.services-editorial__intro {
    grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.8fr);
}

.services-editorial__intro img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.video-library {
    display: grid;
    gap: clamp(3rem, 7vw, 5rem);
    max-width: 62rem;
}

.video-library__item h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.video-embed {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-ink);
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Footer */

.site-footer {
    position: relative;
    z-index: 1;
    min-height: 28.0625rem;
    padding: calc(8.5rem + var(--content-footer-overlap)) var(--page-gutter) 5rem;
    background-color: var(--color-footer);
    background-image: url("/assets/images/backgrounds/footer-bg.jpg");
    background-position: center top;
    background-repeat: repeat-x;
    background-size: auto;
    color: var(--color-footer-text);
    text-align: center;
}

.site-footer__inner {
    width: min(100%, 52rem);
    margin-inline: auto;
}

.site-footer__copyright {
    margin: 0;
    color: #958b82;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

/* Mobile navigation and responsive layout */

@media (max-width: 100rem) {
    :root {
        --hero-height-home: 37.5rem;
    }
}

@media (max-width: 81.25rem) {
    :root {
        --hero-height-home: 30rem;
    }

    .page-middle {
        padding-inline: 0;
    }
}

@media (max-width: 62.5rem) {
    :root {
        --header-height: 4.375rem;
        --header-height-compact: 3.75rem;
        --hero-height-home: 30rem;
        --hero-height-page: 23rem;
        --content-overlap: 5.25rem;
        --content-footer-overlap: 4rem;
        --content-padding-inline: clamp(1.75rem, 6vw, 3rem);
        --content-padding-block: clamp(2.75rem, 7vw, 3.75rem);
    }

    .desktop-nav,
    .site-logo__desktop {
        display: none;
    }

    .site-header__inner {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
    }

    .page-middle {
        padding-inline: var(--page-gutter);
    }

    .site-logo__mobile {
        display: block;
        width: clamp(10rem, 42vw, 12.75rem);
        height: auto;
        transition: width 220ms ease;
    }

    .site-logo__mobile img {
        width: 100%;
        height: auto;
    }

    .site-header.is-compact .site-logo__mobile {
        width: clamp(9rem, 38vw, 11.25rem);
    }

    .mobile-navigation {
        display: block;
        flex-basis: 5.75rem;
        width: 5.75rem;
        height: 100%;
        margin-left: auto;
    }

    .menu-toggle {
        display: none;
        align-items: center;
        justify-content: flex-end;
        gap: 0.65rem;
        width: 100%;
        height: 100%;
        min-width: 3rem;
        border: 0;
        padding: 0 0.25rem;
        background: transparent;
        color: #fff;
        cursor: pointer;
        font: inherit;
        font-size: 0.75rem;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .js .menu-toggle {
        display: flex;
    }

    .menu-toggle__icon {
        display: grid;
        width: 1.55rem;
        gap: 0.3rem;
    }

    .menu-toggle__icon span {
        display: block;
        width: 100%;
        height: 0.125rem;
        border-radius: 999px;
        background: currentcolor;
        transform-origin: center;
        transition:
            transform var(--transition-quick),
            opacity var(--transition-quick);
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child {
        transform: translateY(0.425rem) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child {
        transform: translateY(-0.425rem) rotate(-45deg);
    }

    .mobile-nav-panel {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        border-top: 0.0625rem solid rgb(255 255 255 / 25%);
        background: var(--color-burgundy-deep);
        box-shadow: 0 0.75rem 1.5rem rgb(28 27 25 / 24%);
    }

    .js .mobile-nav-panel {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-0.5rem);
        transition:
            opacity var(--transition-quick),
            transform var(--transition-quick),
            visibility 0s linear 180ms;
    }

    .js .mobile-nav-panel.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }

    .mobile-nav-list {
        width: min(100% - 2rem, 38rem);
        margin-inline: auto;
        padding-block: 0.5rem 0.75rem;
    }

    .mobile-nav-list a {
        display: block;
        min-height: 3rem;
        border-bottom: 0.0625rem solid rgb(255 255 255 / 12%);
        padding: 0.7rem 0.65rem;
        color: #fff;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.5;
        text-decoration: none;
        text-transform: uppercase;
    }

    .mobile-nav-list li:last-child a {
        border-bottom: 0;
    }

    .mobile-nav-list a:hover,
    .mobile-nav-list a[aria-current="page"] {
        background: rgb(255 255 255 / 10%);
        color: #fff;
    }

    .mobile-nav-list a[aria-current="page"] {
        box-shadow: inset 0.2rem 0 var(--color-rose-light);
    }

    .service-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.999rem) {
    :root {
        --hero-height-home: 22.5rem;
        --hero-height-page: 21rem;
        --content-overlap: 3rem;
        --content-footer-overlap: 2rem;
        --content-border-width: 0.625rem;
        --page-gutter: clamp(0.75rem, 4vw, 1.25rem);
    }

    .page-hero--interior h1 {
        font-size: clamp(1.71875rem, 7.5vw, 2.0625rem);
        letter-spacing: 0.12em;
        line-height: 1.35;
    }

    .home-carousel__slide img {
        object-position:
            var(--slide-position-mobile-x, var(--slide-position-desktop-x, 50%))
            var(--slide-position-mobile-y, var(--slide-position-desktop-y, 0%));
    }

    .page-hero--interior .page-hero__content.is-entrance-ready {
        transform: translateX(4rem);
    }

    .page-hero--interior .page-hero__content.is-entrance-ready.is-entered {
        transform: translateX(0);
    }

    .content-frame.is-entrance-ready {
        transform: translateY(2.75rem);
    }

    .content-frame.is-entrance-ready.is-entered {
        transform: translateY(0);
    }

    .home-carousel__arrow {
        width: 2.8rem;
        height: 2.8rem;
    }

    .home-carousel__arrow--previous {
        left: 0.75rem;
    }

    .home-carousel__arrow--next {
        right: 0.75rem;
    }

    .content-frame {
        min-height: 16rem;
    }

    .content-frame__inner {
        padding: 2.5rem clamp(1.25rem, 6vw, 2rem) 3rem;
    }

    .service-highlights,
    .bio-profile__intro,
    .services-editorial__intro {
        grid-template-columns: 1fr;
    }

    .bio-profile__portrait {
        grid-row: 1;
        margin-inline: auto;
    }

    .services-editorial__intro img {
        width: min(100%, 25rem);
        margin-inline: auto;
    }

    .site-footer {
        min-height: 22rem;
        padding-top: calc(6rem + var(--content-footer-overlap));
        padding-bottom: 3.5rem;
    }
}

@media (max-width: 24rem) {
    .mobile-navigation {
        flex-basis: 3rem;
        width: 3rem;
    }

    .menu-toggle__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .content-frame__inner {
        padding-inline: 1rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .home-carousel,
    .page-hero {
        --hero-parallax-y: 0px !important;
    }
}

/* Press archive and shared long-form article */

.press-index {
    max-width: none;
}

.press-index > .eyebrow,
.press-index > h2 {
    text-align: center;
}

.press-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: 3rem;
}

.press-card {
    overflow: hidden;
    border: 0.0625rem solid rgb(129 22 40 / 14%);
    background: var(--color-warm-white);
    box-shadow: 0 0.75rem 2rem rgb(41 35 32 / 8%);
}

.press-card__image-link {
    display: block;
    background: #fff;
}

.press-card__image-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 216;
    object-fit: cover;
}

.press-card__content {
    padding: clamp(1.35rem, 3vw, 2rem);
}

.press-card__meta,
.press-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    color: #7b746e;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.press-card__meta span {
    margin-left: auto;
}

.press-card h3 {
    margin: 0.8rem 0 0.85rem;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.35;
}

.press-card h3 a {
    color: var(--color-ink);
    text-decoration-color: rgb(162 30 53 / 35%);
}

.press-card p {
    margin: 0;
}

.page-hero--article .page-hero__content {
    width: min(100% - 2rem, 76rem);
}

.page-hero--article h1 {
    max-width: 72rem;
    font-size: clamp(2rem, 4vw, 3.65rem);
    letter-spacing: 0.06em;
    line-height: 1.18;
}

.page-hero--long-title {
    min-height: 31rem;
    height: auto;
}

.page-hero--long-title .page-hero__media,
.page-hero--long-title .page-hero__shade {
    min-height: 31rem;
}

.press-article {
    max-width: 58rem;
    margin-inline: auto;
}

.press-article__header {
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.press-article__meta {
    justify-content: center;
    margin-bottom: 1.25rem;
}

.press-article__banner {
    width: 100%;
    height: auto;
    border: 0.0625rem solid rgb(28 27 25 / 8%);
}

.press-article__body {
    font-size: 1.0625rem;
}

.press-article__body p,
.press-article__body ul,
.press-article__body ol,
.press-article__body blockquote {
    margin-block: 0 1.35rem;
}

.press-article__body h2,
.press-article__body h3,
.press-article__body h4 {
    margin-block: 2.2rem 0.8rem;
    color: var(--color-ink);
    line-height: 1.3;
}

.press-article__body img {
    width: auto;
    height: auto;
    max-height: 48rem;
    margin: 2rem auto;
}

.press-article__body blockquote {
    border-left: 0.3rem solid var(--color-rose);
    padding-left: 1.25rem;
    color: #4d4844;
    font-style: italic;
}

.press-article__source,
.press-article__back {
    margin-top: 2.5rem;
    border-top: 0.0625rem solid rgb(28 27 25 / 14%);
    padding-top: 1.25rem;
}

.press-article__back {
    margin-top: 1rem;
}

@media (max-width: 47.999rem) {
    .press-grid {
        grid-template-columns: 1fr;
    }

    .page-hero--article,
    .page-hero--long-title,
    .page-hero--long-title .page-hero__media,
    .page-hero--long-title .page-hero__shade {
        min-height: 27rem;
    }

    .page-hero--article h1 {
        font-size: clamp(1.55rem, 6.5vw, 2.35rem);
        letter-spacing: 0.04em;
        line-height: 1.22;
    }

    .press-card__meta span {
        width: 100%;
        margin-left: 0;
    }

    .press-article__body {
        font-size: 1rem;
    }
}