/* Public collection card: uses the shared Osa Plants palette and type. */
.plant-detail {
    position: relative;
    padding-block: 24px 70px;
}
.plant-detail-foliage {
    position: absolute;
    top: 0;
    right: -36px;
    width: 190px;
    height: auto;
    opacity: 0.12;
    transform: rotate(110deg);
    pointer-events: none;
}
.plant-back {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
    font-size: 21px;
}
.plant-detail-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 36px;
    align-items: start;
}
.plant-portrait-empty {
    aspect-ratio: 3 / 4;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: radial-gradient(ellipse at top left, var(--green-100), var(--cream) 75%);
}
.plant-portrait-empty img { margin-bottom: 24px; opacity: 0.65; }
.plant-portrait-empty p { max-width: 250px; color: var(--muted); font-size: 24px; }
.plant-portrait-photo { position: relative; margin: 0; min-width: 0; }
.plant-photo-link { display: block; border-radius: 8px; cursor: zoom-in; }
.plant-portrait-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; min-height: 560px; object-fit: cover; border-radius: 8px; }
.plant-photo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plant-photo-gallery figure { margin: 0; min-width: 0; }
.plant-photo-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.plant-portrait-photo figcaption, .plant-photo-gallery figcaption { margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.photo-lightbox-open { overflow: hidden; }
.photo-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: clamp(8px, 2vw, 24px);
    border: 0;
    background: transparent;
    color: var(--ink);
}
.photo-lightbox[open] { display: grid; place-items: center; }
.photo-lightbox:not([open]) { display: none; }
.photo-lightbox::backdrop { background: rgb(16 45 34 / 90%); }
.photo-lightbox-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1100px, 100%);
    height: 100%;
    max-height: 960px;
    min-height: 0;
    min-width: 0;
    gap: 12px;
    padding: clamp(10px, 2vw, 20px);
    border-radius: 8px;
    background: var(--paper);
}
.photo-lightbox-toolbar { display: flex; justify-content: flex-end; }
.photo-lightbox button {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--green-800);
    color: var(--white);
    font: inherit;
    cursor: pointer;
}
.photo-lightbox button:hover { background: var(--green-900); }
.photo-lightbox :focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
.photo-lightbox-figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    min-width: 0;
    margin: 0;
    gap: 8px;
}
.photo-lightbox-figure img { display: block; width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: contain; }
.photo-lightbox-figure figcaption { max-height: 25vh; overflow: auto; overflow-wrap: anywhere; white-space: pre-line; }
.photo-lightbox-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.photo-lightbox-navigation span { margin-inline: auto; }
.plant-detail-content { min-width: 0; }
.plant-detail-intro h1 {
    margin: -8px 0 8px;
    font: 400 clamp(40px, 4.5vw, 70px)/1.05 var(--serif);
    color: var(--ink);
    overflow-wrap: anywhere;
}
.plant-botanical { margin: 0 0 18px; color: var(--muted); font: 30px/1.3 var(--serif); }
.plant-traits { margin: 0 0 18px; }
.plant-traits > div { display: flex; align-items: center; gap: 14px; margin-block: 8px; }
.plant-traits dd { margin: 0; font-size: 21px; }
.plant-trait-icon {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-800);
}
.plant-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.plant-section-nav a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 8px 24px;
    border-radius: 5px;
    background: var(--cream);
    font-size: 20px;
}
.plant-section-nav .plant-nav-primary { background: var(--green-800); color: var(--white); }
.plant-section-nav a:hover { background: var(--green-100); color: var(--green-950); }
.plant-section-nav .plant-nav-primary:hover { background: var(--green-900); color: var(--white); }
.plant-detail a:focus-visible { outline: 2px solid var(--green-700); outline-offset: 5px; }
.plant-detail-section { scroll-margin-top: 24px; }
.plant-description-empty { margin: 16px 0 8px; color: var(--muted); font: 22px/1.4 var(--serif); }
.plant-facts { margin: 0 0 20px; }
.plant-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding-block: 4px; }
.plant-facts dt { color: var(--muted); }
.plant-facts dd { margin: 0; overflow-wrap: anywhere; }
.plant-media-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; }
.plant-media-row h2 { margin: 0 0 10px; font: 400 26px/1.2 var(--serif); color: var(--green-950); }
.plant-section-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--cream);
    text-align: center;
}
.plant-section-empty img { opacity: 0.65; }
.plant-section-empty p { margin: 12px 0; color: var(--muted); font: 21px/1.35 var(--serif); }
.plant-stories-empty { background: var(--green-100); }
.plant-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 900px) {
    .plant-detail-layout { gap: 24px; }
    .plant-portrait-empty { min-height: 480px; padding: 24px; }
    .plant-portrait-photo img { min-height: 480px; }
    .plant-media-row { grid-template-columns: 1fr; }
    .plant-detail-foliage { right: 0; width: 140px; }
}
@media (max-width: 760px) {
    .plant-detail { padding-block: 24px 60px; }
    .plant-detail-layout { grid-template-columns: 1fr; gap: 28px; }
    .plant-portrait-empty { min-height: 0; }
    .plant-portrait-photo img { min-height: 0; }
    .plant-detail-intro h1 { margin-top: 0; font-size: clamp(36px, 8vw, 52px); }
    .plant-botanical { font-size: 26px; }
    .plant-section-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .plant-section-nav a {
        min-width: 0;
        padding-inline: 6px;
        font-size: 16px;
    }
}

:root {
    --green-950: #102d22;
    --green-900: #173b2c;
    --green-800: #234b39;
    --green-700: #315d48;
    --green-100: #edf2ec;
    --cream: #f7f5ef;
    --paper: #fcfbf7;
    --terracotta: #ad5743;
    --ink: #17221c;
    --muted: #68716b;
    --line: #dfe3dc;
    --white: #ffffff;
    --serif: Georgia, "Times New Roman", serif;
    --sans: Arial, Helvetica, sans-serif;
    --shadow: 0 16px 42px rgb(24 48 37 / 10%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1240px, calc(100% - 72px));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    padding: 10px 16px;
    color: var(--white);
    background: var(--green-950);
    transform: translateY(-150%);
}

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

/* Header */

.site-header {
    position: relative;
    z-index: 20;
    height: 98px;
    background: rgb(255 255 255 / 97%);
    border-bottom: 1px solid rgb(26 58 43 / 8%);
}

.header-inner {
    display: grid;
    grid-template-columns: 260px 1fr 170px;
    align-items: center;
    height: 100%;
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 13px;
    font-family: var(--serif);
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--green-950);
}

.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 4vw, 62px);
    font-family: var(--serif);
    font-size: 17px;
}

.main-nav a,
.login-link,
.text-link {
    transition:
        color 160ms ease,
        opacity 160ms ease;
}

.main-nav a:hover,
.login-link:hover,
.text-link:hover {
    color: var(--terracotta);
}

.login-link {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
    font-family: var(--serif);
    font-size: 17px;
}

.login-link svg {
    color: var(--green-800);
}

/* Hero */

.hero {
    position: relative;
    min-height: 550px;
    overflow: hidden;
    background: #f4f3ed;
}

.hero-image {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            #f5f4ee 0%,
            #f5f4ee 25%,
            rgb(245 244 238 / 92%) 36%,
            rgb(245 244 238 / 38%) 52%,
            rgb(245 244 238 / 0%) 68%
        ),
        url("../images/home-hero.316283c3caf8.webp");
    background-position: center, right center;
    background-repeat: no-repeat;
    background-size: cover, auto 100%;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgb(16 45 34 / 12%));
}

.hero-inner {
    position: relative;
    z-index: 2;
    min-height: 550px;
    display: flex;
    align-items: center;
}

.hero-copy {
    width: 570px;
    padding: 52px 0 60px;
}

.eyebrow {
    margin: 0 0 15px;
    color: var(--terracotta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 650px;
    margin: 0;
    color: var(--green-950);
    font-family: var(--serif);
    font-size: clamp(54px, 5.15vw, 78px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.hero-lead {
    margin: 28px 0 32px;
    color: #39443e;
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.45;
}

.button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 0 25px;
    border: 1px solid transparent;
    font-family: var(--serif);
    font-size: 16px;
    transition:
        background 160ms ease,
        transform 160ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: var(--white);
    background: var(--green-800);
}

.button-primary:hover {
    background: var(--green-950);
}

.hero-handwriting {
    position: absolute;
    top: 64px;
    right: 30px;
    margin: 0;
    color: rgb(255 255 255 / 88%);
    font-family: "Segoe Script", "Bradley Hand", cursive;
    font-size: 37px;
    font-style: italic;
    line-height: 1;
    transform: rotate(-7deg);
    text-shadow: 0 2px 12px rgb(0 0 0 / 18%);
}

/* Sections */

.section {
    padding: 86px 0 94px;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 34px;
}

.section-heading h2 {
    margin: 0;
    color: var(--green-950);
    font-family: var(--serif);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-family: var(--serif);
    font-size: 15px;
}

/* Stories */

.stories {
    color: var(--white);
    background: var(--green-950);
}

.stories .eyebrow {
    color: #c98572;
}

.stories .section-heading h2,
.stories .text-link {
    color: var(--white);
}

.story-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.82fr 0.82fr;
    grid-template-rows: repeat(2, 238px);
    gap: 20px;
}

.story-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #294436;
}

.story-card-large {
    grid-row: 1 / span 2;
}

.story-card:last-child {
    grid-column: 2 / span 2;
}

.story-card a {
    position: absolute;
    inset: 0;
}

.story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.story-card:hover img {
    transform: scale(1.035);
}

.story-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgb(8 28 20 / 82%),
        rgb(8 28 20 / 2%) 68%
    );
}

.story-overlay {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 25px 27px;
}

.story-overlay time {
    display: block;
    margin-bottom: 7px;
    color: rgb(255 255 255 / 72%);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.story-overlay h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 400;
}

.story-overlay p {
    max-width: 440px;
    margin: 8px 0 0;
    color: rgb(255 255 255 / 76%);
    font-family: var(--serif);
}

/* About and footer */

.about-strip {
    padding: 70px 0;
    background: var(--cream);
}

.about-strip-inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    gap: 40px;
}

.about-strip-inner > p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--green-950);
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1.3;
}

.site-footer {
    padding: 38px 0;
    color: rgb(255 255 255 / 76%);
    background: #0b241a;
}

.footer-inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}

.footer-inner p {
    margin: 7px 0 0;
    font-size: 13px;
}

.footer-brand {
    color: var(--white);
    font-family: var(--serif);
    font-size: 25px;
    letter-spacing: 0.04em;
}

/* Preliminary responsiveness; detailed mobile layout follows approval */

@media (max-width: 1050px) {
    .header-inner {
        grid-template-columns: 220px 1fr 110px;
    }

    .main-nav {
        gap: 22px;
        font-size: 15px;
    }

}

@media (max-width: 760px) {
    .container {
        width: min(100% - 36px, 620px);
    }

    .site-header {
        height: auto;
    }

    .header-inner {
        grid-template-columns: 1fr auto;
        min-height: 82px;
    }

    .brand {
        font-size: 23px;
    }

    .brand img {
        width: 48px;
        height: 48px;
    }

    .main-nav {
        display: none;
    }

    .hero,
    .hero-inner {
        min-height: 610px;
    }

    /* Mobile hero lower transition */
    .hero {
        margin-bottom: 28px;
        background: #f8f7f2;
    }

    .hero-image {
        background-image:
            linear-gradient(
                to bottom,
                rgb(245 244 238 / 100%) 0%,
                rgb(245 244 238 / 92%) 43%,
                rgb(245 244 238 / 12%) 72%
            ),
            url("../images/home-hero.316283c3caf8.webp");
        background-position: center, center bottom;
        background-size: cover, auto 62%;
    }

    .hero-inner {
        align-items: flex-start;
    }

    .hero-copy {
        width: 100%;
        padding-top: 66px;
    }

    .hero h1 {
        font-size: clamp(45px, 13vw, 62px);
    }

    .hero-handwriting {
        display: none;
    }

    .section {
        padding: 65px 0;
    }

    .section-heading {
        align-items: start;
    }

    .section-heading h2 {
        font-size: 34px;
    }

    .text-link {
        display: none;
    }

    .story-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .story-card,
    .story-card-large,
    .story-card:last-child {
        grid-column: auto;
        grid-row: auto;
        min-height: 270px;
    }

    .about-strip-inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .about-strip-inner > p:last-child {
        font-size: 25px;
    }

    .footer-inner {
        display: block;
    }
}

/* Visual synchronization with the approved public homepage mockup */

@media (min-width: 761px) {
    .container {
        width: 82.4%;
        max-width: 1580px;
    }

    .site-header {
        height: 74px;
    }

    .header-inner {
        grid-template-columns: 285px 1fr 150px;
    }

    .brand {
        gap: 9px;
        font-size: 27px;
    }

    .brand img {
        width: 64px;
        height: 64px;
    }

    .main-nav {
        gap: clamp(42px, 5vw, 82px);
        font-size: 16px;
    }

    .login-link {
        font-size: 16px;
    }

    .hero,
    .hero-inner {
        min-height: 430px;
    }

    .hero {
        background: #f8f7f2;
    }

    .hero-image {
        background-image:
            linear-gradient(
                90deg,
                #f8f7f2 0%,
                #f8f7f2 13%,
                rgb(248 247 242 / 97%) 22%,
                rgb(248 247 242 / 78%) 34%,
                rgb(248 247 242 / 28%) 46%,
                rgb(248 247 242 / 0%) 58%
            ),
            url("../images/home-hero.316283c3caf8.webp");
        background-position: center, right center;
        background-size: 100% 100%, 72% 100%;
    }

    .hero::after {
        display: none;
    }

    .hero-copy {
        width: 650px;
        padding: 30px 0 35px 48px;
    }

    .hero h1 {
        max-width: none;
        font-size: clamp(55px, 4.65vw, 78px);
        line-height: 0.98;
        letter-spacing: -0.035em;
    }

    .hero h1 span {
        display: block;
        white-space: nowrap;
    }

    .hero-lead {
        margin: 20px 0 24px;
        font-size: 20px;
        line-height: 1.35;
        white-space: nowrap;
    }

    .button {
        min-width: 272px;
        min-height: 52px;
        justify-content: space-between;
        padding: 0 24px;
        font-size: 16px;
    }

    .hero-handwriting {
        top: 79px;
        right: 3.5%;
        font-size: 32px;
    }

    .stories {
        padding: 4px 0 70px;
        color: var(--ink);
        background: var(--paper);
    }

    .stories-heading {
        display: flex;
        align-items: center;
        gap: 18px;
        margin: 0 0 10px;
    }

    .stories-heading h2 {
        margin: 0;
        color: var(--green-950);
        font-family: var(--serif);
        font-size: 31px;
        font-weight: 400;
        line-height: 1.2;
    }

    .stories-heading span {
        width: 102px;
        height: 1px;
        background: #adb3ad;
    }

    .story-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 230px;
        gap: 16px;
    }

    .story-card,
    .story-card-large,
    .story-card:last-child {
        position: relative;
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        height: 230px;
        overflow: hidden;
        border-radius: 4px;
        background: #294436;
    }

    .story-card::after {
        display: none;
    }

    .story-card a {
        position: absolute;
        inset: 0;
    }

    .story-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about-strip {
        display: none;
    }
}

/* Typography and brand refinement */

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-cyrillic-400.cb4dba8508e9.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range:
        U+0400-052F,
        U+1C80-1C8A,
        U+20B4,
        U+2DE0-2DFF,
        U+A640-A69F,
        U+FE2E-FE2F;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-latin-400.87d22046a89f.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range:
        U+0000-024F,
        U+1E00-1EFF,
        U+2000-206F,
        U+20A0-20CF,
        U+2100-214F;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-cyrillic-500.5d2fd9430f7f.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range:
        U+0400-052F,
        U+1C80-1C8A,
        U+20B4,
        U+2DE0-2DFF,
        U+A640-A69F,
        U+FE2E-FE2F;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-latin-500.efeea72c7a42.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range:
        U+0000-024F,
        U+1E00-1EFF,
        U+2000-206F,
        U+20A0-20CF,
        U+2100-214F;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-cyrillic-600.e63a7b59857b.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range:
        U+0400-052F,
        U+1C80-1C8A,
        U+20B4,
        U+2DE0-2DFF,
        U+A640-A69F,
        U+FE2E-FE2F;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-latin-600.bf1e09fb81d7.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range:
        U+0000-024F,
        U+1E00-1EFF,
        U+2000-206F,
        U+20A0-20CF,
        U+2100-214F;
}

:root {
    --green-950: #1a382c;
    --green-900: #223f32;
    --green-800: #344f3e;
    --green-700: #4a6350;
    --cream: #f6f4ee;
    --paper: #fbfaf6;
    --terracotta: #a95945;
    --ink: #1b2c23;
    --serif: "Cormorant Garamond", Georgia, serif;
}

body {
    font-family: var(--serif);
    font-size: 18px;
    background: var(--paper);
}

.brand {
    color: var(--green-950);
    font-weight: 500;
}

.main-nav,
.login-link {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
}

.button {
    border-radius: 5px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
}

.button-primary {
    background: var(--green-800);
}

.button-primary:hover {
    background: var(--green-900);
}

.site-footer {
    background: #203b2e;
}

.hero-foliage {
    position: absolute;
    height: auto;
    z-index: 1;
    pointer-events: none;
    opacity: 0.34;
    filter: saturate(0.7);
}

.hero-foliage-top {
    top: -94px;
    left: -41px;
    width: 185px;
    transform: rotate(7deg);
}

.hero-foliage-bottom {
    bottom: -102px;
    left: -67px;
    width: 225px;
    transform: rotate(91deg) scaleX(-1);
    transform-origin: center;
}

.hero h1 {
    font-family: var(--serif);
    font-weight: 500;
}

.hero-lead {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
}

.stories-heading h2 {
    font-family: var(--serif);
    font-weight: 500;
}

@media (max-width: 760px) {
    .hero-foliage {
        display: none;
    }
}

/* Clean non-distorted hero photograph */

@media (min-width: 761px) {
    .hero,
    .hero-inner {
        min-height: 480px;
    }

    .hero-image {
        background-image:
            linear-gradient(
                90deg,
                #f8f7f2 0%,
                #f8f7f2 10%,
                rgb(248 247 242 / 98%) 20%,
                rgb(248 247 242 / 82%) 31%,
                rgb(248 247 242 / 38%) 42%,
                rgb(248 247 242 / 0%) 55%
            ),
            url("../images/home-hero-v2.cffb737bcdba.webp");
        background-position: center, right center;
        background-size: 100% 100%, auto 100%;
        background-repeat: no-repeat;
    }

    .hero-copy {
        padding-top: 39px;
        padding-bottom: 42px;
    }
}

/* Approved visual refinements: assets, scale, palette and hero blend */

:root {
    --green-950: #28352c;
    --green-900: #364238;
    --green-800: #3f4c3f;
    --green-700: #596659;
    --ink: #28352c;
}

.brand {
    font-size: 30px;
}

.brand img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.main-nav,
.login-link {
    font-size: 20px;
}

.button-primary,
.button-primary:hover {
    background: #3f4c3f;
}

.site-footer {
    background: #3f4c3f;
}

.hero-foliage {
    filter: none;
}

.hero-foliage-top {
    top: -56px;
    left: -42px;
    width: 350px;
    opacity: 0.23;
    transform: none;
}

.hero-foliage-bottom {
    bottom: -178px;
    left: -27px;
    width: 390px;
    opacity: 0.25;
    transform: none;
}

@media (min-width: 761px) {
    .hero-image {
        background-image:
            linear-gradient(
                90deg,
                #f8f7f2 0%,
                #f8f7f2 25%,
                rgb(248 247 242 / 99%) 30%,
                rgb(248 247 242 / 95%) 35%,
                rgb(248 247 242 / 83%) 41%,
                rgb(248 247 242 / 64%) 47%,
                rgb(248 247 242 / 43%) 53%,
                rgb(248 247 242 / 24%) 59%,
                rgb(248 247 242 / 11%) 65%,
                rgb(248 247 242 / 4%) 70%,
                rgb(248 247 242 / 0%) 75%
            ),
            url("../images/home-hero-v2.cffb737bcdba.webp");
        background-position: center, right center;
        background-size: 100% 100%, auto 100%;
        background-repeat: no-repeat;
    }

    .hero h1 {
        font-size: clamp(72px, 5vw, 92px);
        line-height: 0.92;
    }

    .hero-lead {
        margin-top: 25px;
        margin-bottom: 27px;
        font-size: 25px;
    }

    .button {
        min-width: 282px;
        min-height: 54px;
        font-size: 20px;
    }

    .stories-heading h2 {
        font-size: 37px;
    }
}

/* Final foliage placement and mobile hero synchronization */

@media (min-width: 761px) {
    .hero-foliage-bottom {
        bottom: -58px;
    }
}

@media (max-width: 760px) {
    .hero,
    .hero-inner {
        min-height: 610px;
    }

    .hero-image {
        background-image:
            linear-gradient(
                to bottom,
                #f8f7f2 0%,
                #f8f7f2 37%,
                rgb(248 247 242 / 98%) 42%,
                rgb(248 247 242 / 88%) 47%,
                rgb(248 247 242 / 68%) 52%,
                rgb(248 247 242 / 43%) 57%,
                rgb(248 247 242 / 20%) 62%,
                rgb(248 247 242 / 6%) 67%,
                rgb(248 247 242 / 0%) 72%,
                rgb(248 247 242 / 0%) 89%,
                rgb(248 247 242 / 12%) 92%,
                rgb(248 247 242 / 35%) 95%,
                rgb(248 247 242 / 70%) 98%,
                #f8f7f2 100%
            ),
            url("../images/home-hero-v2.cffb737bcdba.webp");
        background-position: center, 57% bottom;
        background-size: 100% 100%, auto 64%;
        background-repeat: no-repeat;
    }

    .hero h1 {
        font-size: clamp(52px, 13.5vw, 58px);
        line-height: 0.94;
    }

    .hero-lead {
        font-size: 22px;
        line-height: 1.35;
    }
}

/* Mobile navigation */

.mobile-menu {
    display: none;
}

@media (max-width: 760px) {
    .header-inner {
        position: relative;
        grid-template-columns: minmax(0, 1fr) auto auto;
        column-gap: 12px;
    }

    .mobile-menu {
        display: block;
        justify-self: end;
    }

    .mobile-menu summary {
        display: flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 5px;
        color: #3f4c3f;
        background: transparent;
        cursor: pointer;
        list-style: none;
    }

    .mobile-menu summary::-webkit-details-marker {
        display: none;
    }

    .mobile-menu summary:hover,
    .mobile-menu summary:focus-visible {
        background: rgb(63 76 63 / 8%);
        outline: none;
    }

    .mobile-menu summary:focus-visible {
        outline: 2px solid var(--green-700);
        outline-offset: 3px;
    }

    .menu-icon {
        position: relative;
        display: block;
        width: 24px;
        height: 18px;
    }

    .menu-icon span {
        position: absolute;
        left: 0;
        width: 24px;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition:
            top 180ms ease,
            transform 180ms ease,
            opacity 140ms ease;
    }

    .menu-icon span:nth-child(1) {
        top: 1px;
    }

    .menu-icon span:nth-child(2) {
        top: 8px;
    }

    .menu-icon span:nth-child(3) {
        top: 15px;
    }

    .mobile-menu[open] .menu-icon span:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }

    .mobile-menu[open] .menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu[open] .menu-icon span:nth-child(3) {
        top: 8px;
        transform: rotate(-45deg);
    }

    .mobile-nav {
        position: fixed;
        z-index: 40;
        top: 82px;
        right: 0;
        left: 0;
        display: grid;
        padding: 10px 18px 18px;
        border-top: 1px solid rgb(63 76 63 / 10%);
        background: rgb(251 250 246 / 98%);
        box-shadow: 0 18px 35px rgb(40 53 44 / 14%);
    }

    .mobile-nav a {
        display: flex;
        min-height: 52px;
        align-items: center;
        padding: 0 12px;
        border-bottom: 1px solid rgb(63 76 63 / 12%);
        color: #28352c;
        font-family: var(--serif);
        font-size: 21px;
        font-weight: 500;
    }

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

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible {
        color: #3f4c3f;
        background: rgb(63 76 63 / 6%);
        outline: none;
    }
}

/* Opaque mobile navigation */
@media (max-width: 760px) {
    .mobile-nav {
        background: #f8f7f2;
        opacity: 1;
    }
}

.plant-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: radial-gradient(ellipse at top left, var(--green-800), var(--green-950));
}
.catalog-empty { grid-column: 1 / -1; }

/* Approved catalogue layout, sharing the existing garden imagery and type. */
.main-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
    border-bottom: 2px solid var(--green-800);
    color: var(--green-950);
}

.catalog-hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(90deg, #fcfbf7 12%, rgb(252 251 247 / 94%) 32%,
        rgb(252 251 247 / 60%) 48%, transparent 69%),
        url("../images/home-hero-v2.cffb737bcdba.webp") right center / cover no-repeat;
}
.catalog-foliage {
    position: absolute;
    height: auto;
    z-index: -1;
    left: -50px;
    top: -25px;
    width: 235px;
    opacity: 0.3;
    pointer-events: none;
}
.catalog-hero-inner { padding-block: 32px 22px; padding-left: 64px; }
.catalog-hero h1 {
    margin: 0;
    font: 500 clamp(44px, 5.5vw, 78px)/1.05 var(--serif);
}
.catalog-hero p { margin: 6px 0 18px; font: 26px/1.25 var(--serif); }
.catalog-search { position: relative; max-width: 675px; }
.catalog-search input {
    width: 100%;
    min-height: 46px;
    padding: 9px 54px;
    border: 1px solid #d5d6d1;
    border-radius: 22px;
    background: rgb(255 255 255 / 95%);
    color: var(--ink);
    font: 20px/1.25 var(--serif);
}
.catalog-search button {
    position: absolute;
    inset: 1px auto 1px 4px;
    display: grid;
    place-items: center;
    width: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.catalog-search button:hover { background: var(--green-100); }
.catalog-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.catalog-search input::-ms-clear { display: none; width: 0; height: 0; }
.catalog-search-reset {
    position: absolute;
    top: 1px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ink);
}
.catalog-search-reset:hover { background: var(--green-100); }
.catalog-search-reset:focus-visible {
    outline: 2px solid var(--green-700);
    outline-offset: 2px;
    background: var(--green-100);
}
.catalog-controls { padding-top: 8px; }
.catalog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-left: 64px;
}
.catalog-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: #f0f1ed;
    color: var(--green-900);
    font: 18px/1.2 var(--serif);
}
.catalog-category svg { flex: 0 0 30px; }
.catalog-category:hover { border-color: #a9b9ad; background: var(--green-100); }
.catalog-category.is-active { background: var(--green-800); color: var(--white); }
.catalog-filters {
    min-width: 0;
    padding: 16px 24px 18px;
    border: 1px solid #b7c4bb;
    border-radius: 18px;
    background: rgb(255 255 255 / 96%);
}
.catalog-filters-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 10px; }
.catalog-filters h2 { display: flex; align-items: center; gap: 18px; margin: 0; font: 400 32px/1.15 var(--serif); }
.catalog-filters h2 svg { flex: 0 0 28px; color: var(--green-700); }
.catalog-active-count { color: var(--muted); font: 14px/1.35 var(--sans); }
.catalog-active-count strong { color: var(--green-800); }
.catalog-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-left: auto;
    color: var(--green-700);
    font: 16px/1.25 var(--serif);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
}
.catalog-filter-reset span { font: 26px/1 var(--sans); }
.catalog-filter-reset:hover { color: var(--green-950); text-decoration-color: currentColor; }
.catalog-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; }
.catalog-filter-field { min-width: 0; }
.catalog-filter-field label { display: block; margin-bottom: 6px; color: #35473c; font: 600 15px/1.2 var(--serif); }
.catalog-filter-field select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 30px 9px 14px;
    border: 1px solid #cfd6d0;
    border-radius: 9px;
    background-color: var(--white);
    color: var(--ink);
    font: 14px/1.4 var(--sans);
}
.catalog-filter-field select[multiple] { min-height: 96px; padding: 6px; }
.catalog-filter-field select[multiple] option { padding: 4px 8px; white-space: normal; }
.catalog-filter-hint { display: block; margin-top: 5px; color: var(--muted); font: 12px/1.4 var(--sans); }
.catalog-filter-apply {
    align-self: end;
    min-height: 48px;
    padding: 10px 20px;
    border: 1px solid var(--green-800);
    border-radius: 12px;
    background: var(--green-800);
    color: var(--white);
    font: 600 17px/1.3 var(--sans);
    cursor: pointer;
}
.catalog-filter-apply:hover { background: var(--green-950); }
.catalog-filters-mobile { display: none; }
.catalog-results { padding-block: 16px 36px; }
.catalog-result-count { margin: 0 0 10px; color: #35473c; font: 18px/1.3 var(--serif); }
.catalog-result-count strong { color: var(--green-800); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.catalog-card { min-width: 0; }
.catalog-card > a { display: block; }
.catalog-card .catalog-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 2.5;
    object-fit: cover;
    border-radius: 6px;
    overflow: hidden;
}
.catalog-card .plant-card-placeholder > img { width: 72px; height: 72px; object-fit: contain; opacity: 0.65; }
.catalog-card-caption { display: flex; align-items: center; gap: 12px; padding-block: 7px 0; }
.catalog-card-names { flex: 1; min-width: 0; }
.catalog-card h2 { min-width: 0; margin: 0; font: 500 23px/1.15 var(--serif); overflow-wrap: anywhere; }
.catalog-card-botanical { margin: 4px 0 0; color: var(--muted); font: 400 20px/1.2 var(--serif); overflow-wrap: anywhere; }
.catalog-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border: 1px solid #a1a79f;
    border-radius: 50%;
    font-size: 21px;
    line-height: 1;
}
.catalog-card a:hover .catalog-arrow { background: var(--green-800); color: var(--white); }
.catalog-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; margin-top: 24px; }
.catalog-page { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 2px 8px; border-radius: 50%; background: #f0f0eb; font: 19px/1 var(--serif); }
.catalog-page-arrow { border: 1px solid #d3d6ce; background: transparent; font-size: 27px; }
.catalog-page[aria-current="page"], .catalog-page[href]:hover { background: var(--green-800); color: var(--white); }
.catalog-page[aria-disabled="true"] { opacity: 0.4; }
.catalog-hero :focus-visible, .catalog-controls :focus-visible, .catalog-results :focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; }

@media (min-width: 761px) and (max-width: 1050px) {
    .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(10px, 1.5vw, 18px); }
    .brand { gap: 6px; font-size: 26px; white-space: nowrap; }
    .brand img { width: 56px; height: 56px; }
    .main-nav { min-width: 0; gap: clamp(10px, 1.6vw, 16px); font-size: 18px; }
    .main-nav a { white-space: nowrap; }
    .login-link { gap: 6px; font-size: 18px; white-space: nowrap; }
}

@media (max-width: 1050px) {
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-hero-inner { padding-left: 30px; }
    .catalog-categories { padding-left: 30px; }
    .catalog-category { gap: 8px; padding-inline: 12px; font-size: 17px; }
    .catalog-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
    .catalog-hero p { max-width: 560px; }
}
@media (max-width: 760px) {
    .catalog-hero { background: linear-gradient(90deg, #fcfbf7 0%, rgb(252 251 247 / 87%) 65%, rgb(252 251 247 / 60%)), url("../images/home-hero-v2.cffb737bcdba.webp") center / cover; }
    .catalog-hero-inner { padding: 30px 0 24px; }
    .catalog-hero p { font-size: 22px; }
    .catalog-foliage { width: 140px; left: -35px; opacity: 0.15; }
    .catalog-controls { padding-top: 14px; }
    .catalog-categories { gap: 8px; padding-left: 0; }
    .catalog-category { flex: 1 1 auto; }
    .catalog-filters-desktop { display: none; }
    .catalog-filters-mobile { display: block; padding: 0; }
    .catalog-filters-mobile > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
        padding: 14px 18px;
        border-radius: inherit;
        list-style: none;
        cursor: pointer;
    }
    .catalog-filters-mobile > summary::-webkit-details-marker { display: none; }
    .catalog-mobile-filter-title { grid-column: 1; font: 28px/1.1 var(--serif); }
    .catalog-filters-mobile .catalog-active-count { grid-column: 1; }
    .catalog-filter-chevron { grid-column: 2; grid-row: 1 / 3; align-self: center; transition: transform 150ms; }
    .catalog-filters-mobile[open] .catalog-filter-chevron { transform: rotate(180deg); }
    .catalog-mobile-filter-content { padding: 0 18px 18px; }
    .catalog-mobile-filter-content > .catalog-filter-reset { margin: 0 0 10px; }
    .catalog-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .catalog-filter-field select { font-size: 16px; }
    .catalog-results { padding-top: 20px; }
    .catalog-card h2 { font-size: 22px; }
}
@media (max-width: 540px) {
    .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .catalog-card .catalog-photo { aspect-ratio: 2; }
    .catalog-category { flex-basis: calc(50% - 4px); min-width: 0; padding-inline: 8px; font-size: 16px; }
    .catalog-category:first-child { flex-basis: 100%; }
    .catalog-category svg { flex-basis: 26px; width: 26px; height: 26px; }
    .catalog-filter-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Public collection data blocks */

.collection-data {
    position: relative;
    padding: 104px 0 42px;
    background: #f8f7f2;
}

.collection-composition {
    padding-bottom: 64px;
    background: #f8f7f2;
}

.collection-arrivals {
    padding: 72px 0 96px;
    background: #f8f7f2;
}

.collection-data-heading,
.visitors-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 42px;
}

.section-kicker {
    margin: 0 0 10px;
    color: #8d5c4d;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.17em;
    line-height: 1.2;
    text-transform: uppercase;
}

.collection-data-heading h2,
.visitors-heading h2,
.home-about h2 {
    margin: 0;
    color: #28352c;
    font-family: var(--serif);
    font-size: clamp(44px, 4.2vw, 66px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

.section-note {
    max-width: 310px;
    margin: 0 0 4px;
    color: #6e766f;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    text-align: right;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.metric-card {
    min-height: 255px;
    padding: 32px 32px 30px;
    border: 1px solid rgb(63 76 63 / 12%);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 88%),
            rgb(238 238 229 / 78%)
        );
    box-shadow: 0 18px 45px rgb(40 53 44 / 6%);
}

.metric-value {
    display: block;
    margin-bottom: 30px;
    color: #3f4c3f;
    font-family: var(--serif);
    font-size: clamp(64px, 6vw, 88px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.85;
}

.metric-card h3 {
    margin: 0 0 8px;
    color: #28352c;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.08;
}

.metric-card p {
    max-width: 250px;
    margin: 0;
    color: #747b75;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
}

.insight-panel {
    padding: 36px;
    border: 1px solid rgb(63 76 63 / 12%);
    border-radius: 22px;
    background: rgb(255 255 255 / 72%);
}

.insight-heading {
    padding-bottom: 24px;
    border-bottom: 1px solid rgb(63 76 63 / 13%);
}

.insight-heading h2 {
    margin: 0;
    color: #28352c;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
}

.composition-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.composition-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 61px;
    border-bottom: 1px solid rgb(63 76 63 / 11%);
}

.composition-name {
    color: #364238;
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.25;
    padding: 15px 0;
    overflow-wrap: anywhere;
}

.composition-name:hover {
    color: #8d5c4d;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.composition-count {
    flex: 0 0 auto;
    color: #8d5c4d;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.arrivals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.arrival-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgb(63 76 63 / 12%);
    border-radius: 18px;
    background: rgb(255 255 255 / 72%);
}

.arrival-card > a {
    display: block;
    height: 100%;
}

.arrival-card .arrival-photo {
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

.arrival-card .plant-card-placeholder > img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: 0.65;
}

.arrival-caption {
    padding: 24px;
}

.arrival-caption h3 {
    margin: 0 0 4px;
    color: #364238;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.arrival-card a:hover h3 {
    color: #8d5c4d;
}

.composition-name:focus-visible,
.arrival-card > a:focus-visible {
    outline: 2px solid #8d5c4d;
    outline-offset: -2px;
}

.arrival-caption p {
    margin: 0;
    color: #7b827c;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.4;
}

.collection-empty {
    display: grid;
    min-height: 270px;
    place-content: center;
    justify-items: center;
    padding: 36px;
    color: #788079;
    text-align: center;
}

.collection-empty > span {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    place-items: center;
    border: 1px solid rgb(63 76 63 / 22%);
    border-radius: 50%;
    color: #596659;
    font-family: var(--serif);
    font-size: 27px;
}

.collection-empty p {
    max-width: 360px;
    margin: 0;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.45;
}

.visitors-choice {
    padding: 96px 0 102px;
    color: #f8f7f2;
    background: #3f4c3f;
}

.visitors-choice .section-kicker {
    color: #dfb19f;
}

.visitors-heading h2 {
    color: #f8f7f2;
}

.visitors-choice .section-note {
    color: rgb(248 247 242 / 68%);
}

.popular-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.popular-card {
    display: grid;
    min-height: 150px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid rgb(248 247 242 / 16%);
    border-radius: 18px;
    background: rgb(248 247 242 / 5%);
}

.popular-number {
    color: #dfb19f;
    font-family: var(--serif);
    font-size: 31px;
}

.popular-card h3 {
    margin: 0 0 5px;
    color: #fffdf8;
    font-family: var(--serif);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.15;
}

.popular-card p,
.popular-views {
    margin: 0;
    color: rgb(248 247 242 / 64%);
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.4;
}

.popular-views {
    white-space: nowrap;
}

.popular-empty {
    display: grid;
    min-height: 190px;
    place-items: center;
    padding: 40px;
    border: 1px solid rgb(248 247 242 / 18%);
    border-radius: 20px;
    background: rgb(248 247 242 / 4%);
    text-align: center;
}

.popular-empty p {
    max-width: 490px;
    margin: 0;
    color: rgb(248 247 242 / 72%);
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.45;
}

.home-about {
    padding: 112px 0 118px;
    background: #efeee8;
}

.home-about-inner {
    max-width: 920px;
    text-align: center;
}

.home-about h2 {
    max-width: 780px;
    margin: 0 auto 26px;
}

.home-about-inner > p:last-child {
    max-width: 700px;
    margin: 0 auto;
    color: #667068;
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.55;
}

.section-anchor {
    scroll-margin-top: 100px;
}

@media (max-width: 900px) {
    .collection-data {
        padding: 80px 0 36px;
    }

    .metric-card {
        min-height: 225px;
        padding: 28px 24px;
    }

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

    .popular-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .collection-data {
        padding: 64px 0 24px;
    }

    .collection-composition {
        padding-bottom: 32px;
    }

    .collection-arrivals {
        padding: 40px 0 62px;
    }

    .collection-data-heading,
    .visitors-heading {
        display: block;
        margin-bottom: 30px;
    }

    .collection-data-heading h2,
    .visitors-heading h2,
    .home-about h2 {
        font-size: 45px;
        line-height: 0.98;
    }

    .section-note {
        max-width: none;
        margin-top: 16px;
        text-align: left;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .metric-card {
        display: grid;
        min-height: 0;
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: 18px;
        padding: 22px;
        border-radius: 17px;
    }

    .metric-value {
        grid-row: 1 / span 2;
        align-self: center;
        margin: 0;
        font-size: 56px;
        text-align: center;
    }

    .metric-card h3 {
        align-self: end;
        font-size: 22px;
    }

    .metric-card p {
        align-self: start;
        font-size: 13px;
    }

    .composition-list,
    .arrivals-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .arrivals-grid {
        gap: 20px;
    }

    .insight-panel {
        padding: 25px 22px;
        border-radius: 17px;
    }

    .insight-heading h2 {
        font-size: 31px;
    }

    .composition-list li {
        gap: 16px;
        min-height: 66px;
    }

    .composition-name,
    .arrival-caption h3 {
        font-size: 18px;
    }

    .collection-empty {
        min-height: 220px;
        padding: 24px 8px;
    }

    .visitors-choice {
        padding: 67px 0 70px;
    }

    .popular-card {
        min-height: 132px;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 15px;
        padding: 22px;
        border-radius: 16px;
    }

    .popular-views {
        grid-column: 2;
    }

    .home-about {
        padding: 76px 0 82px;
    }

    .home-about-inner {
        text-align: left;
    }

    .home-about h2 {
        margin-right: 0;
        margin-left: 0;
    }

    .home-about-inner > p:last-child {
        margin-right: 0;
        margin-left: 0;
        font-size: 20px;
    }
}