/* ==========================================================
   CORE
========================================================== */

:root {
    --paper: #f0ede5;
    --paper-soft: #f8f5ee;

    --ink: #10100e;
    --ink-soft: #272621;

    --muted: #777269;
    --line: rgba(16, 16, 14, 0.16);

    --serif:
        "Iowan Old Style",
        "Baskerville",
        "Times New Roman",
        Georgia,
        serif;

    --sans:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --max: 1560px;
}


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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--ink);
    background: var(--paper);

    font-family: var(--sans);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


body.menu-open {
    overflow: hidden;
}


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


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


button {
    font: inherit;
}


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

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    transition:
        background 0.3s ease,
        backdrop-filter 0.3s ease;
}


.site-header--scrolled {
    background:
        rgba(240, 237, 229, 0.84);

    backdrop-filter: blur(18px);
}


.site-header__inner {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    height: 88px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.site-brand {
    position: relative;

    z-index: 101;

    font-family: var(--serif);

    font-size: 20px;

    letter-spacing: -0.04em;
}


.nav-menu {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;

    gap: 38px;
}


.nav-menu a {
    position: relative;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.19em;

    text-transform: uppercase;
}


.nav-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--ink);

    transition: width 0.3s ease;
}


.nav-menu a:hover::after {
    width: 100%;
}


.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    position: relative;

    z-index: 101;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.menu-toggle span {
    position: absolute;

    left: 8px;

    width: 26px;
    height: 1px;

    background: var(--ink);

    transition:
        transform 0.35s ease,
        top 0.35s ease;
}


.menu-toggle span:first-child {
    top: 16px;
}


.menu-toggle span:last-child {
    top: 25px;
}


.menu-toggle.is-active span:first-child {
    top: 21px;

    transform: rotate(45deg);
}


.menu-toggle.is-active span:last-child {
    top: 21px;

    transform: rotate(-45deg);
}


/* ==========================================================
   HERO
========================================================== */

.art-hero {
    position: relative;

    min-height: 100svh;

    padding:
        115px
        max(
            40px,
            calc(
                (100vw - var(--max)) / 2
            )
        )
        0;

    overflow: hidden;

    border-bottom:
        1px solid var(--line);
}


.art-hero__grain,
.patronage__grain {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(0, 0, 0, 0.018) 4px
        );
}


.art-hero__meta {
    height: 40px;

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    position: relative;

    z-index: 4;

    border-bottom:
        1px solid var(--line);

    font-size: 7px;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.art-hero__meta-center {
    text-align: center;
}


.art-hero__meta > div:last-child {
    text-align: right;
}


.art-hero__canvas {
    position: relative;

    min-height: 760px;

    height: auto;

    padding-bottom: 70px;
}


/* ==========================================================
   GIANT HERO TYPOGRAPHY
========================================================== */

.art-hero__word {
    position: absolute;

    z-index: 1;

    font-family: var(--serif);

    font-weight: 400;

    font-size:
        clamp(
            110px,
            16.5vw,
            280px
        );

    line-height: 0.72;

    letter-spacing: -0.095em;

    white-space: nowrap;

    pointer-events: none;
}


.art-hero__word--first {
    top: 15%;

    left: -1%;
}


.art-hero__word--last {
    right: -1%;

    bottom: 12%;
}
/* ==========================================================
   SINGLE FRAGRANCE
========================================================== */

.fragrance-single {
    background: var(--paper);

    color: var(--ink);
}


/* ==========================================================
   SINGLE FRAGRANCE HERO
========================================================== */

.fragrance-single__hero {
    min-height: 100svh;

    padding:
        125px
        max(
            40px,
            calc(
                (100vw - var(--max)) / 2
            )
        )
        80px;

    overflow: hidden;
}


.fragrance-single__hero-meta {
    min-height: 40px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--line);

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.21em;
}


.fragrance-single__hero-grid {
    min-height:
        calc(
            100svh - 250px
        );

    display: grid;

    grid-template-columns:
        0.9fr
        1.15fr
        0.55fr;

    gap:
        clamp(
            30px,
            5vw,
            90px
        );

    align-items: center;
}


/* ==========================================================
   FRAGRANCE IDENTITY
========================================================== */

.fragrance-single__identity {
    position: relative;

    z-index: 3;
}


.fragrance-single__house {
    margin-bottom: 30px;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.25em;
}


.fragrance-single__identity h1 {
    margin:
        0 0
        45px;

    font-family: var(--serif);

    font-size:
        clamp(
            74px,
            8.5vw,
            145px
        );

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.08em;
}


.fragrance-single__impression {
    max-width: 420px;

    margin:
        0 0
        55px;

    color: var(--muted);

    font-family: var(--serif);

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    font-style: italic;

    line-height: 1.3;
}


.fragrance-single__score {
    display: flex;

    align-items: flex-end;

    gap: 8px;
}


.fragrance-single__score strong {
    font-family: var(--serif);

    font-size:
        clamp(
            55px,
            6vw,
            95px
        );

    font-weight: 400;

    line-height: 0.8;

    letter-spacing: -0.06em;
}


.fragrance-single__score span {
    padding-bottom: 7px;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: 0.12em;
}
/* ==========================================================
   COLLECTION PAGE
========================================================== */

.collection-page {
    background: var(--paper);
}


/* ==========================================================
   COLLECTION HERO
========================================================== */

.collection-hero {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        125px 0
        120px;
}


.collection-hero__meta {
    min-height: 40px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--line);

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.21em;
}


.collection-hero__grid {
    display: grid;

    grid-template-columns:
        0.25fr
        1fr
        0.45fr;

    gap:
        clamp(
            30px,
            6vw,
            100px
        );

    align-items: end;

    padding-top: 100px;
}


.collection-hero__index {
    align-self: start;

    font-family: var(--serif);

    font-size: 13px;
}


.collection-hero__title h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            90px,
            12vw,
            190px
        );

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.085em;
}


.collection-hero__title em {
    font-weight: 400;
}


.collection-hero__copy p {
    max-width: 320px;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.4;
}


/* ==========================================================
   COLLECTION FILTERS
========================================================== */

.collection-controls {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);
}


.collection-filter-form {
    padding:
        35px 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;
}


.collection-filter-group {
    flex: 1;
}


.collection-filter-label {
    display: block;

    margin-bottom: 18px;

    color: var(--muted);

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.22em;
}


.collection-status-links {
    display: flex;

    flex-wrap: wrap;

    gap:
        12px
        28px;
}


.collection-status-links a {
    position: relative;

    padding-bottom: 5px;

    font-family: var(--serif);

    font-size: 18px;
}


.collection-status-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: var(--ink);

    transition:
        width 0.3s ease;
}


.collection-status-links a:hover::after,
.collection-status-links a.is-active::after {
    width: 100%;
}


.collection-selects {
    display: flex;

    align-items: flex-end;

    gap: 20px;
}


.collection-select-field {
    min-width: 170px;
}


.collection-select-field label {
    display: block;

    margin-bottom: 9px;

    color: var(--muted);

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.collection-select-field select {
    width: 100%;

    padding:
        11px
        32px
        11px
        0;

    border: 0;

    border-bottom:
        1px solid var(--ink);

    border-radius: 0;

    outline: 0;

    background: transparent;

    color: var(--ink);

    font-family: var(--serif);

    font-size: 16px;
}


.collection-selects button {
    padding:
        11px 0;

    border: 0;

    border-bottom:
        1px solid var(--ink);

    background: transparent;

    display: flex;

    gap: 25px;

    cursor: pointer;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.18em;
}


/* ==========================================================
   COLLECTION GRID
========================================================== */

.collection-grid-section {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        110px 0
        150px;
}


.collection-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        95px
        34px;
}


.collection-card {
    min-width: 0;
}


.collection-card__visual {
    aspect-ratio: 0.78;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #dad4c9,
            #eee9df
        );
}


.collection-card:nth-child(3n + 2)
.collection-card__visual {
    background:
        linear-gradient(
            145deg,
            #bdb7ae,
            #dcd6cc
        );
}


.collection-card:nth-child(3n)
.collection-card__visual {
    background:
        linear-gradient(
            145deg,
            #e6e0d6,
            #cbc5bb
        );
}


.collection-card__number {
    position: absolute;

    top: 16px;
    left: 17px;

    z-index: 3;

    font-family: var(--serif);

    font-size: 11px;
}


.collection-card__letter {
    position: absolute;

    top: -65px;
    left: -15px;

    font-family: var(--serif);

    font-size:
        clamp(
            170px,
            18vw,
            285px
        );

    line-height: 1;

    opacity: 0.055;
}


.collection-card__bottle {
    width: 74%;
    height: 74%;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.7s
        cubic-bezier(.2,.8,.2,1);
}


.collection-card__image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 28px 25px
            rgba(0,0,0,0.16)
        );

    transition:
        transform 0.7s
        cubic-bezier(.2,.8,.2,1);
}


.collection-card:hover
.collection-card__bottle {
    transform:
        translateY(-10px);
}


.collection-card:hover
.collection-card__image {
    transform:
        scale(1.035);
}


.collection-card__placeholder {
    width: 43%;
    height: 52%;

    position: relative;

    z-index: 2;

    border:
        1px solid
        rgba(0,0,0,0.35);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 7px;

    letter-spacing: 0.2em;
}
/* ==========================================================
   ABOUT PAGE
========================================================== */

.about-page {
    background: var(--paper);
}


/* ==========================================================
   ABOUT HERO
========================================================== */

.about-hero {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        125px 0
        120px;
}


.about-hero__meta {
    min-height: 40px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--line);

    display: flex;

    justify-content: space-between;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.21em;
}


.about-hero__grid {
    display: grid;

    grid-template-columns:
        0.22fr
        1fr
        0.42fr;

    gap:
        clamp(
            30px,
            6vw,
            100px
        );

    align-items: end;

    padding-top: 100px;
}


.about-hero__index {
    align-self: start;

    font-family: var(--serif);

    font-size: 13px;
}


.about-hero__title h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            88px,
            11vw,
            180px
        );

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.085em;
}


.about-hero__title em {
    font-weight: 400;
}


.about-hero__copy p {
    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.4;
}


/* ==========================================================
   ABOUT PROFILE
========================================================== */

.about-profile {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        40px 0
        150px;

    display: grid;

    grid-template-columns:
        0.9fr
        1fr;

    gap:
        clamp(
            50px,
            9vw,
            150px
        );

    align-items: center;
}


.about-profile__image {
    min-height: 760px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #cbc3b7,
            #e9e4da
        );
}


.about-profile__portrait {
    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    filter:
        saturate(0.78)
        contrast(1.04);
}


.about-profile__placeholder {
    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 7px;

    letter-spacing: 0.22em;
}


.about-profile__vertical {
    position: absolute;

    right: 15px;
    bottom: 18px;

    color: white;

    writing-mode: vertical-rl;

    font-size: 6px;

    letter-spacing: 0.25em;
}


.about-profile__eyebrow {
    display: block;

    margin-bottom: 35px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.22em;
}


.about-profile__content h2 {
    margin:
        0 0
        55px;

    font-family: var(--serif);

    font-size:
        clamp(
            65px,
            7vw,
            110px
        );

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.07em;
}


.about-profile__text {
    max-width: 650px;

    color: var(--muted);

    font-family: var(--serif);

    font-size:
        clamp(
            18px,
            1.6vw,
            23px
        );

    line-height: 1.65;
}


.about-profile__text p {
    margin:
        0 0
        1.4em;
}


/* ==========================================================
   PHILOSOPHY
========================================================== */

.about-philosophy {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        145px 0;

    border-top:
        1px solid var(--line);
}


.about-philosophy__grid {
    display: grid;

    grid-template-columns:
        1fr
        0.65fr;

    gap:
        clamp(
            60px,
            10vw,
            170px
        );

    align-items: end;
}


.about-philosophy__statement h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            65px,
            8vw,
            130px
        );

    font-weight: 400;

    line-height: 0.76;

    letter-spacing: -0.075em;
}


.about-philosophy__copy {
    color: var(--muted);

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.5;
}


.about-philosophy__copy p {
    margin:
        0 0
        1.4em;
}


/* ==========================================================
   DETAILS
========================================================== */

.about-details {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        145px 0;

    border-top:
        1px solid var(--line);
}


.about-details__grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    margin-top: 80px;

    border-top:
        1px solid var(--line);
}


.about-detail {
    min-height: 220px;

    padding:
        35px
        35px
        35px
        0;

    border-bottom:
        1px solid var(--line);
}


.about-detail:nth-child(odd) {
    border-right:
        1px solid var(--line);

    padding-right: 50px;
}


.about-detail:nth-child(even) {
    padding-left: 50px;
}


.about-detail span {
    display: block;

    margin-bottom: 55px;

    color: var(--muted);

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.22em;
}


.about-detail strong {
    display: block;

    max-width: 500px;

    font-family: var(--serif);

    font-size:
        clamp(
            28px,
            3vw,
            46px
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.04em;
}


/* ==========================================================
   ABOUT LINKS
========================================================== */

.about-links {
    padding:
        130px
        max(
            40px,
            calc(
                (100vw - var(--max)) / 2
            )
        )
        150px;

    color: var(--paper);

    background: var(--ink);
}


.about-links__title span {
    font-size: 7px;

    letter-spacing: 0.2em;
}


.about-links__title h2 {
    max-width: 900px;

    margin:
        55px 0
        100px;

    font-family: var(--serif);

    font-size:
        clamp(
            75px,
            10vw,
            155px
        );

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.08em;
}


.about-links__items {
    border-top:
        1px solid
        rgba(255,255,255,0.18);
}


.about-link {
    padding:
        30px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.18);

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.about-link strong {
    font-size: 22px;

    font-weight: 400;

    transition:
        transform 0.3s ease;
}


.about-link:hover strong {
    transform:
        translate(
            5px,
            -5px
        );
}


/* ==========================================================
   ABOUT TABLET
========================================================== */

@media (max-width: 1100px) {

    .about-hero__grid {
        grid-template-columns:
            0.18fr
            1fr;
    }


    .about-hero__copy {
        grid-column: 2;
    }


    .about-profile {
        grid-template-columns:
            0.85fr
            1fr;
    }


    .about-profile__image {
        min-height: 650px;
    }


    .about-philosophy__grid {
        grid-template-columns:
            1fr;
    }


    .about-philosophy__copy {
        max-width: 650px;

        margin-left: auto;
    }

}


/* ==========================================================
   ABOUT MOBILE
========================================================== */

@media (max-width: 760px) {

    .about-hero,
    .about-profile,
    .about-philosophy,
    .about-details {
        width:
            calc(100% - 36px);
    }


    .about-hero {
        padding:
            95px 0
            80px;
    }


    .about-hero__grid {
        display: block;

        padding-top: 65px;
    }


    .about-hero__index {
        margin-bottom: 30px;
    }


    .about-hero__title h1 {
        font-size:
            clamp(
                72px,
                24vw,
                110px
            );
    }


    .about-hero__copy {
        width: 82%;

        margin:
            40px 0
            0 auto;
    }


    .about-profile {
        display: block;

        padding:
            20px 0
            100px;
    }


    .about-profile__image {
        width: 90%;

        min-height: 560px;

        margin-left: auto;

        margin-bottom: 65px;
    }


    .about-profile__content h2 {
        font-size:
            clamp(
                62px,
                20vw,
                92px
            );
    }


    .about-profile__text {
        font-size: 19px;
    }


    .about-philosophy,
    .about-details {
        padding:
            100px 0;
    }


    .about-philosophy__grid {
        display: block;
    }


    .about-philosophy__statement h2 {
        font-size:
            clamp(
                62px,
                20vw,
                95px
            );
    }


    .about-philosophy__copy {
        width: 84%;

        margin:
            60px 0
            0 auto;

        font-size: 19px;
    }


    .about-details__grid {
        display: block;

        margin-top: 60px;
    }


    .about-detail,
    .about-detail:nth-child(odd),
    .about-detail:nth-child(even) {
        min-height: 0;

        padding:
            30px 0
            45px;

        border-right: 0;
    }


    .about-detail span {
        margin-bottom: 30px;
    }


    .about-detail strong {
        font-size:
            clamp(
                31px,
                10vw,
                44px
            );
    }


    .about-links {
        padding:
            95px 18px
            110px;
    }


    .about-links__title h2 {
        margin-bottom: 70px;

        font-size:
            clamp(
                70px,
                23vw,
                110px
            );
    }

}


/* ==========================================================
   ABOUT SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .about-hero__title h1 {
        font-size: 67px;
    }


    .about-profile__image {
        width: 100%;

        min-height: 500px;
    }


    .about-profile__content h2,
    .about-philosophy__statement h2 {
        font-size: 62px;
    }


    .about-links__title h2 {
        font-size: 68px;
    }

}
/* ==========================================================
   ARTICLE SINGLE
========================================================== */

.article-single {
    background: var(--paper);
}


.article-single__hero {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        125px 0
        110px;
}


.article-single__meta {
    min-height: 40px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--line);

    display: flex;

    justify-content: space-between;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.21em;
}


.article-single__hero-grid {
    display: grid;

    grid-template-columns:
        0.22fr
        1fr
        0.35fr;

    gap:
        clamp(
            30px,
            6vw,
            100px
        );

    align-items: end;

    padding-top: 100px;
}


.article-single__number {
    align-self: start;

    font-family: var(--serif);

    font-size: 13px;
}


.article-single__title-wrap h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            72px,
            10vw,
            160px
        );

    font-weight: 400;

    line-height: 0.76;

    letter-spacing: -0.08em;
}


.article-single__dek {
    max-width: 720px;

    margin:
        50px 0
        0;

    color: var(--muted);

    font-family: var(--serif);

    font-size:
        clamp(
            20px,
            2vw,
            28px
        );

    line-height: 1.4;
}


.article-single__side {
    align-self: end;

    padding-bottom: 10px;
}


.article-single__side span {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.article-single__side strong {
    font-family: var(--serif);

    font-size: 18px;

    font-weight: 400;
}


/* ==========================================================
   ARTICLE FEATURED IMAGE
========================================================== */

.article-single__image {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;
}


.article-single__featured-image {
    width: 100%;

    max-height: 820px;

    object-fit: cover;

    filter:
        saturate(0.82)
        contrast(1.02);
}


/* ==========================================================
   ARTICLE BODY
========================================================== */

.article-single__body {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        140px 0
        160px;

    display: grid;

    grid-template-columns:
        0.3fr
        1fr;

    gap:
        clamp(
            40px,
            9vw,
            160px
        );
}


.article-single__body-index {
    position: sticky;

    top: 130px;

    align-self: start;

    display: flex;

    flex-direction: column;

    gap: 12px;

    color: var(--muted);

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.article-single__content {
    max-width: 780px;

    font-family: var(--serif);

    font-size:
        clamp(
            19px,
            1.7vw,
            24px
        );

    line-height: 1.7;
}


.article-single__content > *:first-child {
    margin-top: 0;
}


.article-single__content p {
    margin:
        0 0
        1.55em;
}


.article-single__content h2 {
    margin:
        2em 0
        0.7em;

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.article-single__content h3 {
    margin:
        2em 0
        0.7em;

    font-size:
        clamp(
            30px,
            3.2vw,
            45px
        );

    font-weight: 400;

    line-height: 1;
}


.article-single__content blockquote {
    margin:
        75px 0;

    padding:
        0 0
        0 30px;

    border-left:
        1px solid var(--ink);

    font-size:
        clamp(
            30px,
            3.5vw,
            48px
        );

    font-style: italic;

    line-height: 1.2;
}


.article-single__content img {
    width: 100%;

    height: auto;

    margin:
        55px 0;
}


.article-single__content figure {
    margin:
        55px 0;
}


.article-single__content figcaption {
    margin-top: 10px;

    color: var(--muted);

    font-family: var(--sans);

    font-size: 7px;

    letter-spacing: 0.12em;
}


.article-single__content a {
    border-bottom:
        1px solid var(--ink);
}


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

.article-single__footer {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        40px 0
        90px;

    border-top:
        1px solid var(--line);

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.article-single__footer-left {
    color: var(--muted);

    font-size: 6px;

    letter-spacing: 0.2em;
}


.article-back-link {
    display: flex;

    align-items: center;

    gap: 18px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.18em;
}


/* ==========================================================
   JOURNAL ARCHIVE
========================================================== */

.journal-archive {
    background: var(--paper);
}


.journal-archive__hero {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        125px 0
        120px;
}


.journal-archive__meta {
    min-height: 40px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--line);

    display: flex;

    justify-content: space-between;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.21em;
}


.journal-archive__heading {
    display: grid;

    grid-template-columns:
        0.22fr
        1fr
        0.4fr;

    gap:
        clamp(
            30px,
            6vw,
            100px
        );

    align-items: end;

    padding-top: 100px;
}


.journal-archive__index {
    align-self: start;

    font-family: var(--serif);

    font-size: 13px;
}


.journal-archive__heading h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            85px,
            11vw,
            175px
        );

    font-weight: 400;

    line-height: 0.74;

    letter-spacing: -0.085em;
}


.journal-archive__heading em {
    font-weight: 400;
}


.journal-archive__heading p {
    max-width: 320px;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.4;
}


/* ==========================================================
   JOURNAL ARCHIVE POSTS
========================================================== */

.journal-archive__posts {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding-bottom: 150px;
}


.journal-archive-card {
    border-top:
        1px solid var(--line);
}


.journal-archive-card:last-of-type {
    border-bottom:
        1px solid var(--line);
}


.journal-archive-card__link {
    min-height: 190px;

    padding:
        36px 0;

    display: grid;

    grid-template-columns:
        65px
        120px
        1fr
        180px
        40px;

    gap: 20px;

    align-items: center;

    transition:
        padding-left 0.35s ease;
}


.journal-archive-card:hover
.journal-archive-card__link {
    padding-left: 12px;
}


.journal-archive-card__number {
    font-family: var(--serif);

    font-size: 12px;
}


.journal-archive-card__category {
    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.journal-archive-card__main h2 {
    margin:
        0 0
        13px;

    font-family: var(--serif);

    font-size:
        clamp(
            36px,
            4.5vw,
            68px
        );

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.055em;
}


.journal-archive-card__main p {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 14px;

    line-height: 1.45;
}


.journal-archive-card__image {
    height: 125px;

    overflow: hidden;
}


.journal-archive-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.78);
}


.journal-archive-card__arrow {
    text-align: right;

    font-size: 20px;
}


/* ==========================================================
   JOURNAL PAGINATION
========================================================== */

.journal-archive__pagination {
    margin-top: 100px;

    padding-top: 35px;

    border-top:
        1px solid var(--line);

    display: flex;

    justify-content: center;

    gap: 10px;
}


.journal-archive__pagination
.page-numbers {
    min-width: 38px;
    height: 38px;

    padding:
        0 10px;

    border:
        1px solid var(--line);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 7px;
}


.journal-archive__pagination
.current,
.journal-archive__pagination
.page-numbers:hover {
    color: var(--paper);

    background: var(--ink);
}


/* ==========================================================
   JOURNAL EMPTY
========================================================== */

.journal-archive__empty {
    padding:
        100px 0;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);
}


.journal-archive__empty span {
    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.journal-archive__empty h2 {
    max-width: 800px;

    margin-top: 30px;

    font-family: var(--serif);

    font-size:
        clamp(
            55px,
            8vw,
            110px
        );

    font-weight: 400;

    line-height: 0.8;

    letter-spacing: -0.07em;
}


/* ==========================================================
   ARTICLE + JOURNAL TABLET
========================================================== */

@media (max-width: 1100px) {

    .article-single__hero-grid,
    .journal-archive__heading {
        grid-template-columns:
            0.18fr
            1fr;
    }


    .article-single__side,
    .journal-archive__heading p {
        grid-column: 2;
    }


    .journal-archive-card__link {
        grid-template-columns:
            50px
            100px
            1fr
            120px
            30px;
    }

}


/* ==========================================================
   ARTICLE + JOURNAL MOBILE
========================================================== */

@media (max-width: 760px) {

    .article-single__hero,
    .article-single__image,
    .article-single__body,
    .article-single__footer,
    .journal-archive__hero,
    .journal-archive__posts {
        width:
            calc(100% - 36px);
    }


    .article-single__hero,
    .journal-archive__hero {
        padding:
            95px 0
            85px;
    }


    .article-single__hero-grid,
    .journal-archive__heading {
        display: block;

        padding-top: 65px;
    }


    .article-single__number,
    .journal-archive__index {
        margin-bottom: 30px;
    }


    .article-single__title-wrap h1,
    .journal-archive__heading h1 {
        font-size:
            clamp(
                70px,
                23vw,
                108px
            );
    }


    .article-single__dek {
        width: 88%;

        font-size: 21px;
    }


    .article-single__side,
    .journal-archive__heading p {
        width: 78%;

        margin:
            40px 0
            0 auto;
    }


    .article-single__body {
        display: block;

        padding:
            95px 0
            120px;
    }


    .article-single__body-index {
        position: static;

        margin-bottom: 55px;

        flex-direction: row;

        justify-content: space-between;
    }


    .article-single__content {
        font-size: 19px;
    }


    .article-single__content h2 {
        font-size: 42px;
    }


    .article-single__content h3 {
        font-size: 31px;
    }


    .article-single__content blockquote {
        margin:
            50px 0;

        padding-left: 20px;

        font-size: 30px;
    }


    .article-single__footer {
        padding:
            35px 0
            70px;
    }


    .journal-archive-card__link {
        min-height: 0;

        grid-template-columns:
            31px
            1fr
            25px;

        gap: 12px;

        padding:
            30px 0;
    }


    .journal-archive-card__category,
    .journal-archive-card__image {
        display: none;
    }


    .journal-archive-card__main h2 {
        font-size:
            clamp(
                33px,
                11vw,
                48px
            );
    }


    .journal-archive-card__main p {
        font-size: 13px;
    }


    .journal-archive__pagination {
        margin-top: 80px;

        flex-wrap: wrap;
    }

}


/* ==========================================================
   ARTICLE + JOURNAL SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .article-single__title-wrap h1,
    .journal-archive__heading h1 {
        font-size: 66px;
    }


    .article-single__dek {
        width: 100%;
    }


    .journal-archive__heading p {
        width: 90%;
    }

}
/* ==========================================================
   COLLECTION CARD CONTENT
========================================================== */

.collection-card__content {
    padding-top: 23px;
}


.collection-card__topline {
    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.collection-card h2 {
    margin:
        0 0
        15px;

    font-family: var(--serif);

    font-size:
        clamp(
            34px,
            3.2vw,
            51px
        );

    font-weight: 400;

    line-height: 0.93;

    letter-spacing: -0.05em;
}


.collection-card p {
    max-width: 330px;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 15px;

    font-style: italic;

    line-height: 1.45;
}


.collection-card__status {
    margin-top: 22px;

    padding-top: 12px;

    border-top:
        1px solid var(--line);

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.18em;
}


/* ==========================================================
   COLLECTION PAGINATION
========================================================== */

.collection-pagination {
    margin-top: 120px;

    padding-top: 35px;

    border-top:
        1px solid var(--line);

    display: flex;

    justify-content: center;

    gap: 12px;
}


.collection-pagination .page-numbers {
    min-width: 38px;
    height: 38px;

    padding:
        0 10px;

    border:
        1px solid var(--line);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 7px;

    letter-spacing: 0.1em;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.collection-pagination .current,
.collection-pagination .page-numbers:hover {
    color: var(--paper);

    background: var(--ink);
}


/* ==========================================================
   COLLECTION EMPTY
========================================================== */

.collection-empty {
    padding:
        100px 0;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);
}


.collection-empty > span {
    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.22em;
}


.collection-empty h2 {
    max-width: 850px;

    margin:
        30px 0
        45px;

    font-family: var(--serif);

    font-size:
        clamp(
            55px,
            8vw,
            115px
        );

    font-weight: 400;

    line-height: 0.8;

    letter-spacing: -0.07em;
}


.collection-empty a {
    display: inline-block;

    padding-bottom: 8px;

    border-bottom:
        1px solid var(--ink);

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.18em;
}


/* ==========================================================
   COLLECTION TABLET
========================================================== */

@media (max-width: 1100px) {

    .collection-hero__grid {
        grid-template-columns:
            0.2fr
            1fr;
    }


    .collection-hero__copy {
        grid-column: 2;
    }


    .collection-filter-form {
        align-items: stretch;

        flex-direction: column;
    }


    .collection-selects {
        width: 100%;
    }


    .collection-select-field {
        flex: 1;
    }


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

        gap:
            80px
            30px;
    }

}


/* ==========================================================
   COLLECTION MOBILE
========================================================== */

@media (max-width: 760px) {

    .collection-hero,
    .collection-controls,
    .collection-grid-section {
        width:
            calc(100% - 36px);
    }


    .collection-hero {
        padding:
            95px 0
            85px;
    }


    .collection-hero__meta {
        font-size: 6px;
    }


    .collection-hero__grid {
        display: block;

        padding-top: 70px;
    }


    .collection-hero__index {
        margin-bottom: 30px;
    }


    .collection-hero__title h1 {
        font-size:
            clamp(
                78px,
                25vw,
                120px
            );
    }


    .collection-hero__copy {
        width: 76%;

        margin:
            40px 0
            0 auto;
    }


    .collection-filter-form {
        padding:
            30px 0;
    }


    .collection-status-links {
        gap:
            11px
            20px;
    }


    .collection-status-links a {
        font-size: 16px;
    }


    .collection-selects {
        flex-direction: column;

        align-items: stretch;

        gap: 25px;
    }


    .collection-select-field {
        width: 100%;
    }


    .collection-selects button {
        width: 100%;

        justify-content: space-between;
    }


    .collection-grid-section {
        padding:
            75px 0
            110px;
    }


    .collection-grid {
        grid-template-columns: 1fr;

        gap: 75px;
    }


    .collection-card__visual {
        aspect-ratio: 0.82;
    }


    .collection-card h2 {
        font-size:
            clamp(
                42px,
                13vw,
                58px
            );
    }


    .collection-card p {
        font-size: 16px;
    }


    .collection-pagination {
        margin-top: 90px;

        flex-wrap: wrap;
    }

}


/* ==========================================================
   COLLECTION SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .collection-hero__title h1 {
        font-size: 72px;
    }


    .collection-hero__copy {
        width: 90%;
    }


    .collection-card h2 {
        font-size: 39px;
    }

}

/* ==========================================================
   FRAGRANCE VISUAL
========================================================== */

.fragrance-single__visual {
    height:
        min(
            74vh,
            780px
        );

    min-height: 600px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #d6cfc3,
            #eee9df
        );
}


.fragrance-single__visual-letter {
    position: absolute;

    top: -70px;
    left: -25px;

    font-family: var(--serif);

    font-size:
        clamp(
            230px,
            27vw,
            440px
        );

    line-height: 1;

    opacity: 0.05;

    pointer-events: none;
}


.fragrance-single__bottle {
    width: 74%;
    height: 78%;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;
}


.fragrance-single__bottle-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 35px 30px
            rgba(0, 0, 0, 0.16)
        );

    transition:
        transform 0.8s
        cubic-bezier(.2,.8,.2,1);
}


.fragrance-single__visual:hover
.fragrance-single__bottle-image {
    transform:
        translateY(-10px)
        scale(1.025);
}


.fragrance-single__bottle-placeholder {
    width: 45%;
    height: 55%;

    border:
        1px solid
        rgba(0,0,0,0.35);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 7px;

    letter-spacing: 0.2em;
}


.fragrance-single__floating-note {
    position: absolute;

    z-index: 3;

    font-size: 6px;

    letter-spacing: 0.25em;
}


.fragrance-single__floating-note--one {
    top: 20px;
    right: 15px;

    writing-mode: vertical-rl;
}


.fragrance-single__floating-note--two {
    left: 18px;
    bottom: 20px;
}


/* ==========================================================
   FRAGRANCE FACTS
========================================================== */

.fragrance-single__facts {
    align-self: end;

    padding-bottom: 40px;
}


.fragrance-fact {
    padding:
        18px 0;

    border-top:
        1px solid var(--line);
}


.fragrance-fact:last-child {
    border-bottom:
        1px solid var(--line);
}


.fragrance-fact span {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.fragrance-fact strong {
    display: block;

    font-family: var(--serif);

    font-size: 18px;

    font-weight: 400;

    line-height: 1.25;
}


/* ==========================================================
   SHARED SINGLE SECTION INDEX
========================================================== */

.fragrance-section-index {
    display: flex;

    gap: 28px;

    margin-bottom: 80px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.21em;
}


.fragrance-section-index span:first-child {
    font-family: var(--serif);

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 0;
}


/* ==========================================================
   NOTES
========================================================== */

.fragrance-notes {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        145px 0;

    border-top:
        1px solid var(--line);
}


.fragrance-notes__grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 1px;

    background: var(--line);

    border:
        1px solid var(--line);
}


.fragrance-note-column {
    min-height: 470px;

    padding:
        35px
        clamp(
            25px,
            4vw,
            60px
        );

    display: flex;

    flex-direction: column;

    background: var(--paper);

    overflow: hidden;
}


.fragrance-note-column__label {
    margin-bottom: 80px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.23em;
}


.fragrance-note {
    display: block;

    padding:
        13px 0;

    border-bottom:
        1px solid var(--line);

    font-family: var(--serif);

    font-size:
        clamp(
            28px,
            3vw,
            48px
        );

    line-height: 0.95;

    letter-spacing: -0.04em;
}


.fragrance-note:first-of-type {
    margin-top: auto;
}


.fragrance-note--empty {
    color: var(--muted);
}


/* ==========================================================
   PERFORMANCE
========================================================== */

.fragrance-performance {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        145px 0;

    border-top:
        1px solid var(--line);
}


.fragrance-performance__main {
    display: grid;

    grid-template-columns:
        0.9fr
        1fr;

    gap:
        clamp(
            50px,
            10vw,
            170px
        );

    align-items: end;
}


.fragrance-performance h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            75px,
            9vw,
            145px
        );

    font-weight: 400;

    line-height: 0.73;

    letter-spacing: -0.075em;
}


.fragrance-performance h2 em {
    font-weight: 400;
}


.performance-row {
    padding:
        21px 0;
}


.performance-row__top {
    margin-bottom: 13px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;
}


.performance-row__top span {
    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.performance-row__top strong {
    font-family: var(--serif);

    font-size: 27px;

    font-weight: 400;
}


.performance-bar {
    height: 1px;

    position: relative;

    overflow: hidden;

    background:
        rgba(16, 16, 14, 0.2);
}


.performance-bar__fill {
    height: 100%;

    background: var(--ink);
}


/* ==========================================================
   REVIEW BODY
========================================================== */

.fragrance-review-body {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        145px 0
        170px;

    border-top:
        1px solid var(--line);
}


.fragrance-review-body__layout {
    display: grid;

    grid-template-columns:
        0.75fr
        1fr;

    gap:
        clamp(
            60px,
            11vw,
            190px
        );

    align-items: start;
}


.fragrance-review-body__title {
    position: sticky;

    top: 130px;
}


.fragrance-review-body__title h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            75px,
            9vw,
            145px
        );

    font-weight: 400;

    line-height: 0.73;

    letter-spacing: -0.075em;
}


.fragrance-review-body__title em {
    font-weight: 400;
}


.fragrance-review-body__content {
    max-width: 760px;

    font-family: var(--serif);

    font-size:
        clamp(
            19px,
            1.7vw,
            24px
        );

    line-height: 1.65;
}


.fragrance-review-body__content > *:first-child {
    margin-top: 0;
}


.fragrance-review-body__content p {
    margin:
        0 0
        1.5em;
}


.fragrance-review-body__content h2,
.fragrance-review-body__content h3 {
    margin:
        2em 0
        0.7em;

    font-family: var(--serif);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.04em;
}


.fragrance-review-body__content h2 {
    font-size: 50px;
}


.fragrance-review-body__content h3 {
    font-size: 35px;
}


.fragrance-review-body__content blockquote {
    margin:
        70px 0;

    padding:
        0 0
        0 30px;

    border-left:
        1px solid var(--ink);

    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    font-style: italic;

    line-height: 1.25;
}


.fragrance-review-body__content img {
    width: 100%;

    height: auto;

    margin:
        55px 0;
}


.fragrance-review-body__empty {
    color: var(--muted);

    font-style: italic;
}


/* ==========================================================
   SINGLE FOOTER NAV
========================================================== */

.fragrance-single__footer-nav {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        45px 0
        90px;

    border-top:
        1px solid var(--line);

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.fragrance-back-link {
    display: flex;

    align-items: center;

    gap: 20px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


.fragrance-back-link span:first-child {
    font-size: 18px;

    transition:
        transform 0.3s ease;
}


.fragrance-back-link:hover
span:first-child {
    transform:
        translateX(-5px);
}


.fragrance-single__footer-mark {
    color: var(--muted);

    font-size: 6px;

    letter-spacing: 0.2em;
}


/* ==========================================================
   SINGLE FRAGRANCE TABLET
========================================================== */

@media (max-width: 1100px) {

    .fragrance-single__hero-grid {
        grid-template-columns:
            0.9fr
            1.1fr;

        gap: 45px;
    }


    .fragrance-single__facts {
        grid-column:
            1 / -1;

        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        padding-bottom: 0;
    }


    .fragrance-fact {
        padding:
            20px;

        border-top:
            1px solid var(--line);

        border-right:
            1px solid var(--line);
    }


    .fragrance-fact:last-child {
        border-bottom: 0;

        border-right: 0;
    }

}


/* ==========================================================
   SINGLE FRAGRANCE MOBILE
========================================================== */

@media (max-width: 760px) {

    .fragrance-single__hero {
        min-height: auto;

        padding:
            95px 18px
            80px;
    }


    .fragrance-single__hero-meta {
        font-size: 6px;
    }


    .fragrance-single__hero-grid {
        min-height: auto;

        display: flex;

        flex-direction: column;

        gap: 55px;

        padding-top: 55px;
    }


    .fragrance-single__identity {
        width: 100%;
    }


    .fragrance-single__house {
        margin-bottom: 22px;
    }


    .fragrance-single__identity h1 {
        max-width: 95%;

        margin-bottom: 35px;

        font-size:
            clamp(
                67px,
                22vw,
                100px
            );
    }


    .fragrance-single__impression {
        width: 85%;

        font-size: 22px;
    }


    .fragrance-single__visual {
        width: 94%;

        min-height: 0;

        height:
            min(
                68svh,
                600px
            );

        margin-left: auto;
    }


    .fragrance-single__bottle {
        width: 78%;
        height: 78%;
    }


    .fragrance-single__facts {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);
    }


    .fragrance-fact {
        padding:
            18px 15px;

        border-top:
            1px solid var(--line);

        border-right:
            1px solid var(--line);
    }


    .fragrance-fact:nth-child(even) {
        border-right: 0;
    }


    .fragrance-fact strong {
        font-size: 16px;
    }


    /* Notes */

    .fragrance-notes,
    .fragrance-performance,
    .fragrance-review-body,
    .fragrance-single__footer-nav {
        width:
            calc(100% - 36px);
    }


    .fragrance-notes {
        padding:
            95px 0;
    }


    .fragrance-section-index {
        margin-bottom: 55px;
    }


    .fragrance-notes__grid {
        display: block;

        border: 0;

        background: transparent;
    }


    .fragrance-note-column {
        min-height: 0;

        padding:
            30px 0
            45px;

        border-top:
            1px solid var(--line);

        background: transparent;
    }


    .fragrance-note-column:last-child {
        border-bottom:
            1px solid var(--line);
    }


    .fragrance-note-column__label {
        margin-bottom: 45px;
    }


    .fragrance-note {
        font-size:
            clamp(
                33px,
                11vw,
                47px
            );
    }


    /* Performance */

    .fragrance-performance {
        padding:
            95px 0;
    }


    .fragrance-performance__main {
        display: block;
    }


    .fragrance-performance h2 {
        margin-bottom: 70px;

        font-size:
            clamp(
                68px,
                22vw,
                100px
            );
    }


    /* Review */

    .fragrance-review-body {
        padding:
            95px 0
            120px;
    }


    .fragrance-review-body__layout {
        display: block;
    }


    .fragrance-review-body__title {
        position: static;

        margin-bottom: 70px;
    }


    .fragrance-review-body__title h2 {
        font-size:
            clamp(
                68px,
                22vw,
                100px
            );
    }


    .fragrance-review-body__content {
        font-size: 19px;
    }


    .fragrance-review-body__content h2 {
        font-size: 40px;
    }


    .fragrance-review-body__content h3 {
        font-size: 30px;
    }


    .fragrance-review-body__content blockquote {
        margin:
            50px 0;

        padding-left: 20px;

        font-size: 30px;
    }


    /* Footer */

    .fragrance-single__footer-nav {
        padding:
            35px 0
            70px;
    }

}


/* ==========================================================
   SINGLE FRAGRANCE SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .fragrance-single__identity h1 {
        font-size: 64px;
    }


    .fragrance-single__visual {
        width: 100%;

        height: 480px;
    }


    .fragrance-single__facts {
        grid-template-columns: 1fr;
    }


    .fragrance-fact {
        border-right: 0;
    }


    .fragrance-performance h2,
    .fragrance-review-body__title h2 {
        font-size: 64px;
    }

}

/* ==========================================================
   PORTRAIT
========================================================== */

.art-portrait {
    width:
        clamp(
            390px,
            35vw,
            600px
        );

    height:
        clamp(
            520px,
            62vh,
            690px
        );

    position: absolute;

    z-index: 2;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    transition:
        transform 0.3s
        cubic-bezier(.2, .8, .2, 1);
}


.art-portrait__frame {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;

    background: #ccc5b9;
}


.art-portrait__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.78)
        contrast(1.05);

    transition:
        transform 1.3s
        cubic-bezier(.2, .8, .2, 1);
}


.art-portrait:hover
.art-portrait__image {
    transform: scale(1.025);
}


.art-portrait__index {
    position: absolute;

    top: 18px;
    left: 20px;

    color: white;

    font-family: var(--serif);

    font-size: 50px;

    opacity: 0.75;
}


.art-portrait__vertical {
    position: absolute;

    right: 15px;
    bottom: 18px;

    color: white;

    writing-mode: vertical-rl;

    font-size: 6px;

    letter-spacing: 0.27em;
}


/* ==========================================================
   PORTRAIT PLACEHOLDER
========================================================== */

.art-portrait__placeholder {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #aaa399 0%,
            #dad5cc 48%,
            #b7afa4 100%
        );
}


.portrait-orbit {
    position: absolute;

    border:
        1px solid
        rgba(0, 0, 0, 0.22);

    border-radius: 50%;
}


.portrait-orbit--one {
    width: 75%;

    aspect-ratio: 1;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);
}


.portrait-orbit--two {
    width: 110%;

    aspect-ratio: 1;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);
}


.portrait-placeholder__text {
    position: absolute;

    left: 22px;
    bottom: 22px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    font-size: 7px;

    letter-spacing: 0.22em;
}


/* ==========================================================
   HERO STATEMENT
========================================================== */

.art-hero__statement {
    width: 300px;

    position: absolute;

    z-index: 3;

    right: 2%;

    top: 18%;
}


.art-kicker {
    display: block;

    margin-bottom: 25px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.25em;
}


.art-hero__statement p {
    margin:
        0 0 50px;

    font-family: var(--serif);

    font-size:
        clamp(
            28px,
            2.7vw,
            42px
        );

    line-height: 1.02;

    letter-spacing: -0.045em;
}


.art-arrow-link {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom:
        1px solid var(--ink);

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.19em;

    text-transform: uppercase;
}


.art-arrow-link__icon {
    font-size: 18px;
}


/* ==========================================================
   FLOATING NOTES
========================================================== */

.hero-floating-note {
    position: absolute;

    z-index: 4;

    font-size: 6px;

    letter-spacing: 0.28em;

    writing-mode: vertical-rl;
}


.hero-floating-note--one {
    left: 8%;
    bottom: 14%;
}


.hero-floating-note--two {
    left: 35%;
    bottom: 6%;
}


.hero-floating-note--three {
    right: 32%;
    top: 8%;
}


/* ==========================================================
   MARQUEE
========================================================== */

.olfactory-marquee {
    width:
        calc(
            100% +
            max(
                80px,
                calc(
                    100vw - var(--max)
                )
            )
        );

    position: relative;

    left:
        calc(
            -1 *
            max(
                40px,
                calc(
                    (100vw - var(--max)) / 2
                )
            )
        );

    overflow: hidden;

    border-top:
        1px solid var(--line);

    height: 55px;

    background: var(--paper);
}


.olfactory-marquee__track {
    width: max-content;

    height: 100%;

    display: flex;

    align-items: center;

    gap: 34px;

    animation:
        scent-marquee
        25s linear
        infinite;

    font-family: var(--serif);

    font-size: 19px;

    font-style: italic;
}


.olfactory-marquee__track i {
    font-size: 8px;

    font-style: normal;
}


@keyframes scent-marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* ==========================================================
   SHARED SECTION INDEX
========================================================== */

.section-index {
    display: flex;

    gap: 28px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.section-index span:first-child {
    font-family: var(--serif);

    font-size: 12px;

    letter-spacing: 0;
}


/* ==========================================================
   CURRENT OBSESSIONS
========================================================== */

.obsessions {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        165px 0
        160px;
}


.obsessions__intro {
    display: grid;

    grid-template-columns:
        0.5fr
        1.15fr
        0.5fr;

    gap: 40px;

    align-items: end;

    margin-bottom: 130px;
}


.obsessions__title h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            75px,
            9vw,
            145px
        );

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.075em;
}


.obsessions__title em {
    font-weight: 400;
}


.obsessions__intro-copy {
    align-self: end;
}


.obsessions__intro-copy p {
    margin:
        0 0 35px;

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.42;

    color: var(--muted);
}


.obsessions__intro-copy span {
    font-size: 6px;

    letter-spacing: 0.2em;
}


/* ==========================================================
   SCENT STAGE
   CLEAN ALIGNED GRID
========================================================== */

.scent-stage {
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 34px;

    align-items: start;
}


.scent-piece {
    width: 100%;

    position: relative;
}


.scent-piece--one,
.scent-piece--two,
.scent-piece--three {
    top: auto;
    left: auto;
    right: auto;
}


/* ==========================================================
   SCENT ART
========================================================== */

.scent-art {
    width: 100%;

    aspect-ratio: 0.77;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transform-style: preserve-3d;

    transition:
        transform 0.18s ease-out;
}


.scent-art--sand {
    background:
        linear-gradient(
            145deg,
            #d7d0c4,
            #eeeae1
        );
}


.scent-art--smoke {
    background:
        linear-gradient(
            145deg,
            #b6b0a7,
            #d4cec5
        );
}


.scent-art--chalk {
    background:
        linear-gradient(
            145deg,
            #e7e1d6,
            #cfc9be
        );
}


.scent-letter {
    position: absolute;

    top: -70px;
    left: -15px;

    font-family: var(--serif);

    font-size:
        clamp(
            180px,
            20vw,
            320px
        );

    line-height: 1;

    opacity: 0.055;
}


.scent-shadow {
    width: 45%;

    height: 8%;

    position: absolute;

    left: 50%;
    bottom: 19%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.16);

    filter: blur(15px);
}

/* ==========================================================
   REAL FRAGRANCE BOTTLES
========================================================== */

.real-fragrance-bottle {
    width: 72%;
    height: 72%;

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateZ(35px);

    transition:
        transform 0.6s
        cubic-bezier(.2, .8, .2, 1);
}


.real-fragrance-bottle__image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 28px 25px
            rgba(0, 0, 0, 0.16)
        );

    transition:
        transform 0.6s
        cubic-bezier(.2, .8, .2, 1);
}


.scent-piece:hover
.real-fragrance-bottle {
    transform:
        translateZ(55px)
        translateY(-10px);
}


.scent-piece:hover
.real-fragrance-bottle__image {
    transform:
        scale(1.035);
}


/* Empty state */

.fragrance-empty-state {
    grid-column: 1 / -1;

    padding:
        100px 0;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);
}


.fragrance-empty-state > span {
    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.22em;
}


.fragrance-empty-state h3 {
    max-width: 700px;

    margin:
        30px 0;

    font-family: var(--serif);

    font-size:
        clamp(
            48px,
            7vw,
            95px
        );

    font-weight: 400;

    line-height: 0.85;

    letter-spacing: -0.065em;
}


.fragrance-empty-state a {
    display: inline-block;

    margin-top: 20px;

    padding-bottom: 8px;

    border-bottom:
        1px solid var(--ink);

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.18em;
}
/* ==========================================================
   CSS PERFUME BOTTLES
========================================================== */

.bottle {
    width: 43%;

    height: 52%;

    position: relative;

    z-index: 2;

    transform:
        translateZ(30px);

    transition:
        transform 0.6s
        cubic-bezier(.2, .8, .2, 1);
}


.scent-piece:hover
.bottle {
    transform:
        translateZ(50px)
        translateY(-12px)
        rotate(-1deg);
}


.bottle__cap {
    width: 48%;

    height: 13%;

    position: absolute;

    z-index: 2;

    left: 50%;
    top: 0;

    transform:
        translate(-50%, -90%);

    background:
        rgba(20, 20, 18, 0.8);

    border:
        1px solid
        rgba(0, 0, 0, 0.35);
}


.bottle__glass {
    width: 100%;
    height: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(0, 0, 0, 0.48);

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.35),
            rgba(255, 255, 255, 0.05)
        );

    box-shadow:
        inset
        8px 0
        20px
        rgba(255, 255, 255, 0.18);
}


.bottle__glass::before {
    content: "";

    width: 4%;
    height: 93%;

    position: absolute;

    top: 4%;
    left: 8%;

    background:
        rgba(255, 255, 255, 0.35);
}


.bottle__label {
    width: 70%;

    min-height: 35%;

    padding: 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px solid
        rgba(0, 0, 0, 0.25);

    background:
        rgba(238, 233, 221, 0.64);
}


.bottle__label span {
    margin-bottom: 10px;

    font-size: 5px;

    letter-spacing: 0.18em;
}


.bottle__label strong {
    font-family: var(--serif);

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.05em;
}


/* Round bottle */

.bottle--round
.bottle__glass {
    border-radius:
        47% 47%
        42% 42%;
}


.bottle--round
.bottle__cap {
    width: 42%;

    border-radius:
        50% 50%
        10% 10%;
}


/* Square bottle */

.bottle--square {
    width: 47%;

    height: 47%;
}


.bottle--square
.bottle__cap {
    height: 17%;
}


/* ==========================================================
   SCENT NOTES
========================================================== */

.scent-art__note {
    position: absolute;

    font-size: 6px;

    letter-spacing: 0.25em;
}


.scent-art__note--top {
    top: 17px;
    right: 14px;

    writing-mode: vertical-rl;
}


.scent-art__note--bottom {
    left: 17px;
    bottom: 17px;
}


/* ==========================================================
   SCENT COPY
========================================================== */

.scent-piece__number {
    margin-bottom: 15px;

    font-family: var(--serif);

    font-size: 11px;

    opacity: 0.55;
}


.scent-piece__copy {
    padding:
        24px 3px
        0;
}


.scent-piece__brand {
    margin-bottom: 10px;

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.23em;
}


.scent-piece h3 {
    margin:
        0 0
        20px;

    font-family: var(--serif);

    font-size:
        clamp(
            33px,
            3.3vw,
            53px
        );

    font-weight: 400;

    line-height: 0.94;

    letter-spacing: -0.05em;
}


.scent-piece blockquote {
    max-width: 320px;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 16px;

    font-style: italic;

    line-height: 1.45;
}


.scent-rating {
    margin-top: 25px;

    padding-top: 14px;

    border-top:
        1px solid var(--line);

    display: flex;

    align-items: baseline;

    gap: 7px;

    font-size: 6px;

    letter-spacing: 0.16em;
}


.scent-rating strong {
    margin-left: auto;

    font-family: var(--serif);

    font-size: 29px;

    font-weight: 400;

    letter-spacing: -0.04em;
}


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

.obsessions__footer {
    margin-top: 100px;

    padding-top: 45px;

    border-top:
        1px solid var(--line);

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 7px;

    letter-spacing: 0.2em;

    line-height: 1.6;
}


.circle-link {
    width: 130px;
    height: 130px;

    border:
        1px solid var(--ink);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    text-align: center;

    font-size: 6px;

    letter-spacing: 0.15em;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.circle-link strong {
    font-size: 17px;

    font-weight: 400;
}


.circle-link:hover {
    color: var(--paper);

    background: var(--ink);

    transform: rotate(8deg);
}


/* ==========================================================
   JOURNAL
========================================================== */

.editorial-journal {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        155px 0
        150px;

    border-top:
        1px solid var(--line);
}


.editorial-journal__heading {
    display: grid;

    grid-template-columns:
        0.5fr 1.65fr;

    gap: 40px;

    margin-bottom: 115px;

    align-items: start;
}


.editorial-journal__heading h2 {
    max-width: 900px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            72px,
            9.5vw,
            150px
        );

    font-weight: 400;

    line-height: 0.77;

    letter-spacing: -0.075em;
}


.editorial-journal__heading em {
    font-weight: 400;
}


/* ==========================================================
   REAL POSTS
========================================================== */

.editorial-post {
    border-top:
        1px solid var(--line);
}


.editorial-post:last-child {
    border-bottom:
        1px solid var(--line);
}


.editorial-post__link {
    min-height: 160px;

    padding:
        34px 0;

    display: grid;

    grid-template-columns:
        70px
        130px
        1fr
        170px
        45px;

    gap: 20px;

    align-items: center;

    transition:
        padding-left 0.35s ease;
}


.editorial-post:hover
.editorial-post__link {
    padding-left: 14px;
}


.editorial-post__index {
    font-family: var(--serif);

    font-size: 12px;
}


.editorial-post__category {
    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.22em;
}


.editorial-post__main h3 {
    margin:
        0 0
        12px;

    font-family: var(--serif);

    font-size:
        clamp(
            35px,
            4vw,
            64px
        );

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.055em;
}


.editorial-post__main p {
    max-width: 550px;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 14px;

    line-height: 1.45;
}


.editorial-post__image {
    height: 115px;

    overflow: hidden;
}


.editorial-post__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.72);
}


.editorial-post__arrow {
    text-align: right;

    font-size: 20px;
}


/* ==========================================================
   JOURNAL PLACEHOLDER
========================================================== */

.journal-demo {
    border-top:
        1px solid var(--line);
}


.journal-demo__feature {
    min-height: 560px;

    position: relative;

    display: grid;

    grid-template-columns:
        70px
        130px
        1fr
        0.7fr;

    gap: 20px;

    padding:
        50px 0;

    border-bottom:
        1px solid var(--line);
}


.journal-demo__number {
    font-family: var(--serif);

    font-size: 12px;
}


.journal-demo__type {
    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.22em;
}


.journal-demo__feature h3 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            70px,
            8vw,
            125px
        );

    font-weight: 400;

    line-height: 0.69;

    letter-spacing: -0.07em;
}


.journal-demo__feature p {
    max-width: 340px;

    align-self: end;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.4;
}


.journal-demo__arrow {
    position: absolute;

    right: 0;
    top: 42px;

    font-size: 25px;
}


.journal-demo__row {
    display: grid;

    grid-template-columns:
        70px
        1fr
        130px
        30px;

    gap: 20px;

    align-items: center;

    padding:
        40px 0;

    border-bottom:
        1px solid var(--line);
}


.journal-demo__row > span {
    font-size: 7px;

    letter-spacing: 0.18em;
}


.journal-demo__row h3 {
    max-width: 800px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            34px,
            4vw,
            60px
        );

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.editorial-journal__end {
    margin-top: 65px;

    display: flex;

    justify-content: space-between;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.18em;
}


/* ==========================================================
   PATRONAGE
========================================================== */

.patronage {
    min-height: 900px;

    position: relative;

    padding:
        110px
        max(
            40px,
            calc(
                (100vw - var(--max)) / 2
            )
        );

    color: var(--paper);

    background: var(--ink);

    overflow: hidden;
}


.patronage__top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 2;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.18);

    font-size: 6px;

    letter-spacing: 0.2em;
}


.section-index--light {
    color: var(--paper);
}


.patronage__body {
    min-height: 650px;

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        0.25fr
        1fr
        0.45fr;

    gap: 60px;

    align-items: center;
}


.patronage__side-note {
    display: flex;

    flex-direction: column;

    gap: 20px;

    opacity: 0.5;

    font-size: 6px;

    letter-spacing: 0.25em;
}


.patronage__main h2 {
    max-width: 950px;

    margin:
        0 0
        55px;

    font-family: var(--serif);

    font-size:
        clamp(
            80px,
            10vw,
            165px
        );

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.08em;
}


.patronage__main p {
    max-width: 640px;

    margin: 0;

    color: #aaa69e;

    font-family: var(--serif);

    font-size:
        clamp(
            19px,
            1.8vw,
            27px
        );

    line-height: 1.4;
}


.patronage-button {
    width:
        min(
            100%,
            430px
        );

    margin-top: 60px;

    padding:
        0 0
        16px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.8);

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.patronage-button strong {
    font-size: 21px;

    font-weight: 400;

    transition:
        transform 0.3s ease;
}


.patronage-button:hover strong {
    transform:
        translate(
            4px,
            -4px
        );
}


.patronage-button--inactive {
    opacity: 0.45;
}


.patronage__circle {
    width: 260px;
    height: 260px;

    border:
        1px solid
        rgba(255, 255, 255, 0.32);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 25px;

    animation:
        patronage-float
        6s ease-in-out
        infinite;

    font-size: 6px;

    letter-spacing: 0.22em;
}


.patronage__circle strong {
    font-size: 43px;

    font-weight: 400;
}


@keyframes patronage-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-15px)
            rotate(4deg);
    }

}


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

.site-footer {
    color: var(--paper);

    background: var(--ink);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);
}


.site-footer__inner {
    width:
        min(
            calc(100% - 80px),
            var(--max)
        );

    margin: auto;

    padding:
        75px 0
        32px;
}


.footer-brand {
    margin-bottom: 80px;

    display: flex;

    align-items: end;

    justify-content: space-between;
}


.footer-title {
    font-family: var(--serif);

    font-size:
        clamp(
            60px,
            8vw,
            120px
        );

    line-height: 0.75;

    letter-spacing: -0.075em;
}


.footer-tagline {
    padding-bottom: 5px;

    opacity: 0.55;

    font-size: 6px;

    letter-spacing: 0.2em;
}


.footer-socials {
    margin-bottom: 55px;

    display: flex;

    gap: 35px;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.footer-bottom {
    padding-top: 22px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);

    display: flex;

    justify-content: space-between;

    opacity: 0.45;

    font-size: 6px;

    letter-spacing: 0.16em;
}


/* ==========================================================
   REVEALS
========================================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.85s ease,
        transform 0.85s
        cubic-bezier(.2, .8, .2, 1);
}


.reveal--visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .art-hero__statement {
        width: 250px;
    }


    .obsessions__intro {
        grid-template-columns:
            0.35fr
            1fr;
    }


    .obsessions__intro-copy {
        grid-column: 2;
    }


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

        gap: 55px 30px;
    }


    .scent-piece {
        width: 100%;
    }


    .editorial-post__link {
        grid-template-columns:
            50px
            100px
            1fr
            100px
            30px;
    }


    .patronage__body {
        grid-template-columns:
            0.2fr
            1fr;
    }


    .patronage__symbol {
        display: none;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 760px) {

    /* ----------------------
       Header
    ---------------------- */

    .site-header__inner {
        width:
            calc(100% - 36px);

        height: 68px;
    }


    .site-brand {
        font-size: 18px;
    }


    .menu-toggle {
        display: block;
    }


    .main-navigation {
        display: none;

        position: fixed;

        inset: 0;

        z-index: 100;

        padding: 100px 25px;

        background: var(--paper);
    }


    .main-navigation.is-open {
        display: flex;

        align-items: center;

        justify-content: center;
    }


    .nav-menu {
        flex-direction: column;

        align-items: center;

        gap: 18px;
    }


    .nav-menu a {
        font-family: var(--serif);

        font-size:
            clamp(
                44px,
                15vw,
                65px
            );

        font-weight: 400;

        line-height: 1;

        letter-spacing: -0.06em;

        text-transform: none;
    }


    /* ----------------------
       Hero
    ---------------------- */

    .art-hero {
        min-height: auto;

        padding:
            90px 18px
            0;
    }


    .art-hero__meta {
        grid-template-columns:
            1fr auto;

        font-size: 6px;
    }


    .art-hero__meta-center {
        display: none;
    }


    .art-hero__canvas {
        height: auto;

        min-height: 0;

        padding:
            45px 0
            40px;
    }


    .art-hero__word {
        position: relative;

        z-index: 4;

        white-space: normal;

        font-size:
            clamp(
                82px,
                27vw,
                125px
            );

        line-height: 0.65;
    }


    .art-hero__word--first {
        top: auto;
        left: auto;
    }


    .art-hero__word--last {
        right: auto;
        bottom: auto;

        margin-left: 12%;
    }


    .art-portrait {
        width: 87%;

        height:
            clamp(
                460px,
                68vh,
                580px
            );

        position: relative;

        top: auto;
        left: auto;

        margin:
            -12px 0
            0 auto;

        transform: none !important;
    }


    .art-portrait__index {
        font-size: 37px;
    }


    .art-hero__statement {
        width: 100%;

        position: relative;

        top: auto;
        right: auto;

        padding:
            50px 0
            20px;
    }


    .art-hero__statement p {
        width: 84%;

        margin-bottom: 40px;

        font-size:
            clamp(
                28px,
                9vw,
                38px
            );
    }


    .art-arrow-link {
        width: 75%;
    }


    .hero-floating-note {
        display: none;
    }


    .olfactory-marquee {
        width:
            calc(100% + 36px);

        left: -18px;
    }


    /* ----------------------
       Obsessions
    ---------------------- */

    .obsessions {
        width:
            calc(100% - 36px);

        padding:
            100px 0;
    }


    .obsessions__intro {
        display: block;

        margin-bottom: 75px;
    }


    .section-index {
        margin-bottom: 35px;
    }


    .obsessions__title h2 {
        font-size:
            clamp(
                70px,
                23vw,
                100px
            );

        line-height: 0.74;
    }


    .obsessions__intro-copy {
        width: 75%;

        margin:
            40px 0
            0 auto;
    }


    .scent-stage {
        display: flex;

        flex-direction: column;

        gap: 75px;
    }


    .scent-piece,
    .scent-piece--one,
    .scent-piece--two,
    .scent-piece--three {
        width: 100%;

        margin: 0;

        position: relative;

        top: auto;
        left: auto;
        right: auto;
    }


    .scent-art {
        transform: none !important;
    }


    .bottle {
        width: 40%;

        height: 49%;
    }


    .scent-letter {
        top: -25px;

        font-size: 180px;
    }


    .scent-piece h3 {
        font-size:
            clamp(
                40px,
                13vw,
                55px
            );
    }


    .scent-piece blockquote {
        font-size: 16px;
    }


    .obsessions__footer {
        margin-top: 95px;

        align-items: flex-end;
    }


    .obsessions__footer > div {
        width: 45%;
    }


    .circle-link {
        width: 115px;
        height: 115px;
    }


    /* ----------------------
       Journal
    ---------------------- */

    .editorial-journal {
        width:
            calc(100% - 36px);

        padding:
            100px 0;
    }


    .editorial-journal__heading {
        display: block;

        margin-bottom: 70px;
    }


    .editorial-journal__heading h2 {
        font-size:
            clamp(
                70px,
                23vw,
                105px
            );

        line-height: 0.75;
    }


    .editorial-post__link {
        min-height: 0;

        grid-template-columns:
            31px
            1fr
            25px;

        padding:
            31px 0;

        gap: 12px;
    }


    .editorial-post__category,
    .editorial-post__image {
        display: none;
    }


    .editorial-post__main h3 {
        font-size:
            clamp(
                31px,
                10vw,
                44px
            );

        line-height: 0.96;
    }


    .editorial-post__main p {
        font-size: 13px;
    }


    .journal-demo__feature {
        min-height: 580px;

        display: block;

        padding:
            30px 0;
    }


    .journal-demo__type {
        position: absolute;

        top: 35px;
        right: 0;
    }


    .journal-demo__feature h3 {
        margin-top: 60px;

        font-size:
            clamp(
                72px,
                24vw,
                110px
            );
    }


    .journal-demo__feature p {
        width: 75%;

        margin:
            60px 0
            0 auto;

        font-size: 18px;
    }


    .journal-demo__arrow {
        top: auto;

        bottom: 35px;
    }


    .journal-demo__row {
        grid-template-columns:
            31px
            1fr
            25px;

        padding:
            30px 0;
    }


    .journal-demo__row > span:nth-child(3) {
        display: none;
    }


    .journal-demo__row h3 {
        font-size:
            clamp(
                31px,
                10vw,
                44px
            );
    }


    .editorial-journal__end {
        align-items: flex-end;
    }


    .editorial-journal__end span {
        max-width: 120px;
    }


    /* ----------------------
       Patronage
    ---------------------- */

    .patronage {
        min-height: auto;

        padding:
            85px 18px
            100px;
    }


    .patronage__top > span {
        display: none;
    }


    .patronage__body {
        min-height: 600px;

        display: block;
    }


    .patronage__side-note {
        margin:
            65px 0
            30px;

        flex-direction: row;

        flex-wrap: wrap;

        gap: 11px 20px;
    }


    .patronage__main h2 {
        margin:
            50px 0
            45px;

        font-size:
            clamp(
                75px,
                24vw,
                115px
            );

        line-height: 0.72;
    }


    .patronage__main p {
        width: 92%;

        font-size: 20px;
    }


    .patronage-button {
        width: 80%;
    }


    /* ----------------------
       Footer
    ---------------------- */

    .site-footer__inner {
        width:
            calc(100% - 36px);
    }


    .footer-brand {
        display: block;

        margin-bottom: 55px;
    }


    .footer-title {
        font-size:
            clamp(
                60px,
                20vw,
                90px
            );
    }


    .footer-tagline {
        margin-top: 25px;
    }


    .footer-socials {
        flex-wrap: wrap;

        gap: 18px 26px;
    }


    .footer-bottom {
        flex-direction: column;

        gap: 9px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 390px) {

    .art-hero__word {
        font-size: 77px;
    }


    .art-portrait {
        width: 91%;

        height: 475px;
    }


    .art-hero__statement p {
        width: 95%;

        font-size: 28px;
    }


    .obsessions__title h2,
    .editorial-journal__heading h2 {
        font-size: 68px;
    }


    .scent-piece h3 {
        font-size: 39px;
    }


    .patronage__main h2 {
        font-size: 70px;
    }

}
/* ==========================================================
   SUPPORT PAYMENT OPTIONS
========================================================== */

.patronage--payments {
    min-height: auto;
}


.pay-support {
    position: relative;

    z-index: 2;

    padding-top: 100px;
}


.pay-support__intro {
    display: grid;

    grid-template-columns:
        0.35fr
        1fr;

    gap:
        clamp(
            40px,
            7vw,
            110px
        );

    align-items: start;

    margin-bottom: 100px;
}


.pay-support__eyebrow {
    padding-top: 12px;

    font-size: 7px;

    letter-spacing: 0.22em;
}


.pay-support__intro h2 {
    max-width: 1000px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            75px,
            9vw,
            145px
        );

    font-weight: 400;

    line-height: 0.74;

    letter-spacing: -0.075em;
}


.pay-support__intro p {
    grid-column: 2;

    max-width: 640px;

    margin:
        10px 0
        0;

    color: #aaa69e;

    font-family: var(--serif);

    font-size:
        clamp(
            18px,
            1.7vw,
            25px
        );

    line-height: 1.45;
}


.pay-support__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(255,255,255,0.18);

    border-left:
        1px solid
        rgba(255,255,255,0.18);
}


.pay-option {
    min-height: 310px;

    padding:
        30px
        35px
        35px;

    border-right:
        1px solid
        rgba(255,255,255,0.18);

    border-bottom:
        1px solid
        rgba(255,255,255,0.18);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


a.pay-option:hover {
    color: var(--ink);

    background: var(--paper);
}


.pay-option__top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.pay-option__number {
    font-family: var(--serif);

    font-size: 11px;

    opacity: 0.6;
}


.pay-option__arrow {
    font-size: 22px;
}


.pay-option__label {
    display: block;

    margin-bottom: 15px;

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.22em;

    opacity: 0.6;
}


.pay-option h3 {
    margin:
        0 0
        15px;

    font-family: var(--serif);

    font-size:
        clamp(
            38px,
            4vw,
            62px
        );

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.05em;
}


.pay-option p {
    max-width: 330px;

    margin: 0;

    color: #aaa69e;

    font-family: var(--serif);

    font-size: 15px;

    line-height: 1.45;
}


a.pay-option:hover p {
    color: var(--muted);
}


/* ==========================================================
   GIFT CARD EMAIL
========================================================== */

.pay-option--email {
    grid-column:
        1 / -1;

    min-height: 280px;
}


.giftcard-email {
    width: 100%;

    margin-top: 30px;

    padding:
        15px 0;

    border: 0;

    border-top:
        1px solid
        rgba(255,255,255,0.35);

    border-bottom:
        1px solid
        rgba(255,255,255,0.35);

    background: transparent;

    color: inherit;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    cursor: pointer;
}


.giftcard-email__value {
    overflow-wrap: anywhere;

    font-family: var(--serif);

    font-size:
        clamp(
            18px,
            2vw,
            27px
        );
}


.giftcard-email__copy {
    flex: 0 0 auto;

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 0.2em;
}


/* ==========================================================
   PAYMENT TABLET
========================================================== */

@media (max-width: 1000px) {

    .pay-support__intro {
        grid-template-columns:
            0.25fr
            1fr;
    }

}


/* ==========================================================
   PAYMENT MOBILE
========================================================== */

@media (max-width: 760px) {

    .pay-support {
        padding-top: 75px;
    }


    .pay-support__intro {
        display: block;

        margin-bottom: 65px;
    }


    .pay-support__eyebrow {
        display: block;

        margin-bottom: 35px;
    }


    .pay-support__intro h2 {
        font-size:
            clamp(
                68px,
                22vw,
                105px
            );
    }


    .pay-support__intro p {
        width: 90%;

        margin:
            40px 0
            0 auto;

        font-size: 19px;
    }


    .pay-support__grid {
        display: block;
    }


    .pay-option,
    .pay-option--email {
        min-height: 250px;

        padding:
            25px
            22px
            30px;
    }


    .pay-option h3 {
        font-size:
            clamp(
                42px,
                13vw,
                58px
            );
    }


    .giftcard-email {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* ==========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}