/* JA Essence site pages: inherit the template's typography and palette. */
.rosi-hero,
.rosi-section,
.rosi-sitepage {
    color: var(--rosi-text);
}

.layout-landing .t4-section-inner,
.layout-landing #t4-main-body {
    padding-block: 0;
}

.layout-landing #t4-main-top-1 {
    margin-top: 3rem;
}

.layout-landing :is(#t4-main-body, #t4-main-bottom-1, #t4-main-bottom-2) {
    margin-top: 3rem;
}

.layout-landing #t4-main-bottom-2 {
    margin-bottom: 4rem;
}

/* Tapestry pages put their hero in T4's banner position, which the template tints and centres. */
.layout-tapestry-landing .t4-banner {
    background: transparent;
    text-align: start;
}

.rosi-hero,
.rosi-introduction,
.rosi-card,
article.rosi-about {
    background: var(--rosi-panel);
    border-radius: 1rem;
}

.rosi-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem;
}

.rosi-eyebrow {
    font-family: Jost, sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.rosi-hero h1 {
    font-size: clamp(2.25rem, 3.5vw, 3.5rem);
    line-height: 1.12;
    margin: 0 0 1.5rem;
}

.rosi-hero p:not(.rosi-eyebrow) {
    margin-bottom: 1.75rem;
    max-width: 35rem;
}

.rosi-hero figure,
article.rosi-about figure {
    margin: 0;
}

.rosi-hero img,
.rosi-sitepage img,
.rosi-section img {
    display: block;
    width: 100%;
    height: auto;
}

.rosi-hero figcaption,
.rosi-introduction .rosi-portrait figcaption,
article.rosi-about figcaption {
    font-size: 0.875rem;
    margin-top: 0.75rem;
    background: transparent;
    color: var(--rosi-text);
    text-transform: none;
    padding: 0;
    text-align: start;
}

:is(.rosi-sitepage, .rosi-hero, .rosi-section) a:not(.btn) {
    color: var(--rosi-link);
}

.rosi-card h3 a:not(.btn) {
    color: var(--rosi-text);
}

:is(.rosi-sitepage, .rosi-hero, .rosi-section) a:not(.btn):hover {
    color: var(--rosi-link-hover);
}

.rosi-introduction {
    padding: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
}

.rosi-introduction h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.rosi-sitepage .rosi-portrait {
    width: 100%;
    max-width: 20rem;
    margin: 0;
}

.rosi-introduction .rosi-portrait {
    max-width: 11rem;
}

.rosi-sitepage .rosi-portrait-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 25%;
    background: var(--rosi-surface);
    border-radius: 0.75rem;
}

.rosi-section > header {
    margin-bottom: 1.5rem;
}

.rosi-section > header p {
    margin: 0;
}

.rosi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.rosi-card {
    overflow: hidden;
    padding: 1.25rem;
}

.rosi-card .rosi-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16rem;
    margin-bottom: 1.25rem;
}

.rosi-card .rosi-image-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rosi-card h3 {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.rosi-dimensions {
    font-family: Jost, sans-serif;
    color: var(--rosi-text);
}

.rosi-card > a:last-child,
.rosi-introduction a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rosi-section > .rosi-collection-link {
    text-align: center;
    margin: 2rem 0 0;
}

:is(.rosi-sitepage, .rosi-hero, .rosi-section) a:focus-visible {
    outline: 3px solid var(--rosi-link);
    outline-offset: 4px;
}

article.rosi-about {
    padding: 2.5rem;
}

article.rosi-about h1 {
    margin-top: 0;
}

.rosi-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

article.rosi-about a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Text branding also fits the existing mobile and off-canvas headers. */
#t4-header .logo-text .site-name,
.t4-offcanvas .logo-text .site-name {
    font-family: Jost, sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    white-space: nowrap;
}

.rosi-footer-brand {
    font-family: Jost, sans-serif;
    font-size: 1.5rem;
}

@media (max-width: 991.98px) {
    .rosi-hero {
        gap: 1.5rem;
        padding: 1.75rem;
    }

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

    .rosi-about-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    article.rosi-about figure {
        max-width: 36rem;
    }

    article.rosi-about .rosi-portrait {
        order: -1;
        max-width: 16rem;
    }

    .rosi-introduction {
        grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .layout-landing :is(#t4-main-top-1, #t4-main-body, #t4-main-bottom-1, #t4-main-bottom-2) {
        margin-top: 1.5rem;
    }

    .rosi-hero,
    .rosi-introduction,
    .rosi-grid {
        grid-template-columns: 1fr;
    }

    .rosi-hero,
    .rosi-introduction,
    article.rosi-about {
        padding: 1.25rem;
    }

    .rosi-card .rosi-image-link {
        height: 17rem;
    }

    .rosi-about-grid {
        gap: 1.5rem;
    }
}