/* ==========================================================
   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%;
}


/* ==========================================================
   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);
}


/* ==========================================================
   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;
    }

}


/* ==========================================================
   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;
    }

}