/* =========================================================
   VINCENZA CAFÉ
   Home editorial
========================================================= */


/* ---------------------------------------------------------
   VARIABLES
--------------------------------------------------------- */

:root {

    --espresso: #1c1512;
    --espresso-soft: #2a1e18;

    --coffee: #3c271d;

    --cream: #f0e6d8;
    --cream-dark: #dfd1bf;

    --paper: #f8f3eb;
    --paper-deep: #eee5d8;

    --caramel: #b77a4e;
    --caramel-light: #d19b6e;

    --sage: #777863;

    --white: #fffdf9;

    --line-light: rgba(255, 255, 255, 0.18);
    --line-dark: rgba(28, 21, 18, 0.16);

    --font-display: "Fraunces", Georgia, serif;
    --font-body: "DM Sans", Arial, sans-serif;

    --container: 1440px;

}



/* ---------------------------------------------------------
   RESET
--------------------------------------------------------- */

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


html {
    margin: 0 !important;
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

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

    font-family: var(--font-body);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body.nav-open {
    overflow: hidden;
}


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


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


button {
    font: inherit;
}


::selection {
    background: var(--caramel);
    color: var(--white);
}



/* ---------------------------------------------------------
   ACCESIBILIDAD / FOCUS
--------------------------------------------------------- */

a:focus-visible,
button:focus-visible {

    outline: 2px solid var(--caramel-light);
    outline-offset: 5px;

}



/* ---------------------------------------------------------
   TEXTURA MUY SUAVE
--------------------------------------------------------- */

.page-grain {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 9999;

    opacity: 0.035;

    background-image:

        repeating-radial-gradient(
            circle at 15% 25%,
            rgba(255,255,255,.9) 0,
            rgba(255,255,255,.9) 1px,
            transparent 1px,
            transparent 4px
        );

    background-size: 8px 8px;

}



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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    color: var(--white);

    border-bottom: 1px solid transparent;

    transition:
        background .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease;

}


.site-header.is-scrolled {

    background: rgba(24, 17, 14, 0.88);

    border-color: rgba(255,255,255,.12);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

}


body.admin-bar .site-header {
    top: 32px;
}


.header-inner {

    max-width: 1600px;

    height: 96px;

    margin: 0 auto;

    padding: 0 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.brand {

    display: inline-flex;

    align-items: center;

    gap: 14px;

}


.brand-mark {

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.52);

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-family: var(--font-display);

    font-size: 21px;

    font-style: italic;

}


.brand-name {

    display: flex;

    flex-direction: column;

    font-family: var(--font-body);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .24em;

    line-height: 1.15;

}


.brand-name small {

    margin-top: 4px;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .55em;

    opacity: .68;

}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 38px;

}


.desktop-nav a {

    position: relative;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: rgba(255,255,255,.82);

}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: scaleX(0);

    transform-origin: right;

    transition: transform .3s ease;

}


.desktop-nav a:hover::after {

    transform: scaleX(1);

    transform-origin: left;

}


.header-cta {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px 19px;

    border: 1px solid rgba(255,255,255,.36);

    border-radius: 999px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

    transition:
        background .25s ease,
        color .25s ease;

}


.header-cta:hover {

    background: var(--cream);

    color: var(--espresso);

}



/* MOBILE BUTTON */

.menu-toggle {

    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;

}


.menu-toggle span {

    display: block;

    width: 26px;
    height: 1px;

    margin: 7px auto;

    background: white;

    transition: transform .3s ease;

}


body.nav-open .menu-toggle span:first-child {

    transform:
        translateY(4px)
        rotate(45deg);

}


body.nav-open .menu-toggle span:last-child {

    transform:
        translateY(-4px)
        rotate(-45deg);

}



/* MOBILE NAV */

.mobile-nav {

    position: fixed;

    inset: 0;

    padding:

        150px
        28px
        50px;

    background: var(--espresso);

    display: flex;

    flex-direction: column;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-12px);

    transition:

        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;

}


body.nav-open .mobile-nav {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.mobile-nav a {

    padding: 22px 0;

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

    font-family: var(--font-display);

    font-size: clamp(36px, 10vw, 60px);

    font-weight: 400;

}


.mobile-nav a span {

    display: inline-block;

    width: 50px;

    font-family: var(--font-body);

    font-size: 9px;

    letter-spacing: .15em;

    opacity: .5;

}



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

.hero {

    position: relative;

    min-height: 100svh;

    background:

        radial-gradient(
            circle at 70% 30%,
            rgba(145, 91, 59, .14),
            transparent 32%
        ),

        var(--espresso);

    color: var(--white);

    overflow: hidden;

}


.hero::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    width: 1px;
    height: 100%;

    background: rgba(255,255,255,.06);

}


.hero-orb {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.06);

}


.hero-orb-one {

    width: 620px;
    height: 620px;

    top: -270px;
    left: -270px;

}


.hero-orb-two {

    width: 420px;
    height: 420px;

    right: -170px;
    bottom: -190px;

}


.hero-inner {

    position: relative;

    z-index: 2;

    max-width: 1600px;

    min-height: 100svh;

    margin: 0 auto;

    padding:

        160px
        48px
        100px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.13fr)
        minmax(380px, .87fr);

    gap: clamp(45px, 7vw, 120px);

    align-items: center;

}



/* HERO COPY */

.hero-copy {

    position: relative;

    z-index: 2;

}


.eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 42px;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: .26em;

    color: rgba(255,255,255,.62);

}


.eyebrow span {

    display: block;

    width: 44px;
    height: 1px;

    background: var(--caramel-light);

}


.hero-title {

    margin: 0;

    max-width: 900px;

    font-family: var(--font-display);

    font-size: clamp(74px, 8vw, 148px);

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.055em;

}


.hero-title > span {

    display: block;

    margin-left: clamp(35px, 7vw, 110px);

}


.hero-title em {

    display: block;

    margin-top: 7px;

    margin-left: clamp(70px, 12vw, 200px);

    color: var(--caramel-light);

    font-weight: 400;

    white-space: nowrap;

}


.hero-bottom {

    max-width: 650px;

    margin-top: 65px;

    display: grid;

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

    align-items: end;

    gap: 60px;

}


.hero-description {

    max-width: 430px;

    margin: 0;

    color: rgba(255,255,255,.64);

    font-size: 15px;

    line-height: 1.8;

}


.hero-description strong {

    color: var(--white);

    font-weight: 500;

}


.circle-link {

    width: 112px;
    height: 112px;

    flex: 0 0 112px;

    border: 1px solid rgba(255,255,255,.30);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 9px;

    letter-spacing: .15em;

    text-transform: uppercase;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.circle-link svg {

    width: 25px;

}


.circle-link:hover {

    background: var(--cream);

    border-color: var(--cream);

    color: var(--espresso);

    transform: translateY(-5px);

}



/* HERO IMAGE */

.hero-visual {

    position: relative;

    width: 100%;

    max-width: 570px;

    justify-self: end;

}


.hero-photo {

    position: relative;

    aspect-ratio: .72;

    overflow: hidden;

    background: var(--coffee);

}


.hero-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            rgba(18, 12, 9, .48),
            transparent 45%
        );

}


.hero-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.025);

    filter:
        saturate(.78)
        contrast(1.03);

}


.photo-number {

    position: absolute;

    top: 20px;
    left: -36px;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: var(--cream);

    color: var(--espresso);

    display: grid;

    place-items: center;

    font-family: var(--font-display);

    font-size: 18px;

    font-style: italic;

    z-index: 4;

}


.photo-caption {

    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 21px;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 8px;

    letter-spacing: .16em;

    color: rgba(255,255,255,.72);

}


.hero-seal {

    position: absolute;

    right: -41px;
    bottom: 95px;

    width: 84px;
    height: 84px;

    border: 1px solid rgba(255,255,255,.22);

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: rgba(28,21,18,.75);

    backdrop-filter: blur(7px);

    z-index: 5;

}


.hero-seal span {

    font-family: var(--font-display);

    font-size: 40px;

    font-style: italic;

    color: var(--caramel-light);

}



/* HERO SCROLL */

.hero-scroll {

    position: absolute;

    left: 48px;
    bottom: 30px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 7px;

    letter-spacing: .21em;

    color: rgba(255,255,255,.4);

}


.scroll-line {

    width: 64px;
    height: 1px;

    background: rgba(255,255,255,.25);

}



/* =========================================================
   GENERAL
========================================================= */

.section-kicker {

    display: block;

    margin-bottom: 25px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .26em;

    text-transform: uppercase;

    color: var(--caramel);

}


.tiny-label {

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .22em;

    color: var(--caramel);

}



/* =========================================================
   MANIFESTO
========================================================= */

.manifesto {

    position: relative;

    min-height: 940px;

    padding:

        120px
        max(48px, calc((100vw - 1500px) / 2))
        120px;

    background: var(--paper);

    overflow: hidden;

}


.section-index {

    padding-bottom: 35px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.section-index span {

    font-family: var(--font-display);

    font-size: 20px;

    font-style: italic;

}


.section-index p {

    margin: 0;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .21em;

}


.manifesto-grid {

    position: relative;

    z-index: 2;

    margin-top: 115px;

    display: grid;

    grid-template-columns:
        .7fr
        1.3fr;

    gap: 120px;

}


.manifesto-intro {

    padding-top: 14px;

}


.manifesto-intro p {

    max-width: 260px;

    margin-top: 35px;

    font-family: var(--font-display);

    font-size: 30px;

    line-height: 1.18;

}


.manifesto-main h2 {

    max-width: 900px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(58px, 7vw, 112px);

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.045em;

}


.manifesto-main h2 em {

    display: block;

    color: var(--caramel);

    font-weight: 400;

    margin-left: 8%;

}


.manifesto-main > p {

    max-width: 450px;

    margin:

        55px
        0
        0
        36%;

    font-size: 15px;

    line-height: 1.9;

    color: rgba(28,21,18,.66);

}


.manifesto-word {

    position: absolute;

    left: -20px;
    bottom: -70px;

    font-family: var(--font-display);

    font-size: clamp(180px, 23vw, 390px);

    line-height: .8;

    letter-spacing: -.07em;

    color: rgba(59, 39, 29, .037);

    white-space: nowrap;

    pointer-events: none;

}



/* =========================================================
   EXPERIENCE
========================================================= */

.experience {

    padding:

        130px
        max(48px, calc((100vw - 1500px) / 2))
        140px;

    background: var(--cream);

}


.experience-header {

    display: grid;

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

    gap: 100px;

    align-items: end;

}


.experience-header h2 {

    margin: 0;

    font-family: var(--font-display);

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

    font-weight: 400;

    letter-spacing: -.05em;

    line-height: .88;

}


.experience-header > p {

    max-width: 330px;

    margin: 0 0 7px auto;

    font-size: 14px;

    line-height: 1.8;

    color: rgba(28,21,18,.6);

}


.experience-cards {

    margin-top: 100px;

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

    display: grid;

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

}


.experience-card {

    position: relative;

    min-height: 430px;

    padding: 33px 38px 45px;

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition:
        background .35s ease,
        color .35s ease;

}


.experience-card:first-child {

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

}


.experience-card:hover {

    background: var(--paper);

}


.experience-card-featured {

    background: var(--espresso);

    color: var(--white);

}


.experience-card-featured:hover {

    background: var(--coffee);

}


.card-number {

    font-family: var(--font-display);

    font-size: 20px;

    font-style: italic;

    opacity: .5;

}


.card-line {

    display: block;

    width: 35px;
    height: 1px;

    margin-bottom: 25px;

    background: var(--caramel);

}


.card-content h3 {

    margin: 0 0 25px;

    font-family: var(--font-display);

    font-size: 50px;

    font-weight: 400;

}


.card-content p {

    max-width: 290px;

    margin: 0;

    font-size: 13px;

    line-height: 1.8;

    opacity: .65;

}



/* =========================================================
   RITUAL
========================================================= */

.ritual {

    background: var(--paper);

}


.ritual-image {

    position: relative;

    height: min(78vh, 820px);

    overflow: hidden;

}


.ritual-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to right,
            rgba(20,14,11,.27),
            transparent 48%
        ),

        linear-gradient(
            to top,
            rgba(20,14,11,.32),
            transparent 40%
        );

}


.ritual-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 55%;

    filter:
        saturate(.76)
        contrast(1.04);

}


.ritual-image-label {

    position: absolute;

    z-index: 3;

    left: 48px;
    bottom: 40px;

    display: flex;

    align-items: center;

    gap: 20px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .22em;

    color: var(--white);

}


.ritual-image-label span {

    width: 52px;
    height: 52px;

    border: 1px solid rgba(255,255,255,.5);

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-family: var(--font-display);

    font-size: 15px;

    font-style: italic;

}


.ritual-content {

    padding:

        130px
        max(48px, calc((100vw - 1500px) / 2))
        160px;

    display: grid;

    grid-template-columns:
        1.15fr
        .6fr;

    gap: 140px;

}


.ritual-copy h2 {

    max-width: 770px;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(68px, 8vw, 126px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.055em;

}


.ritual-copy h2 em {

    display: block;

    color: var(--caramel);

    font-weight: 400;

    margin-left: 16%;

}


.ritual-text {

    padding-top: 55px;

}


.ritual-text p {

    max-width: 390px;

    margin: 0 0 28px;

    font-size: 14px;

    line-height: 1.9;

    color: rgba(28,21,18,.64);

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    margin-top: 25px;

    padding-bottom: 7px;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;

}



/* =========================================================
   QUOTE
========================================================= */

.quote-section {

    position: relative;

    padding:

        170px
        48px
        180px;

    background: var(--caramel);

    color: var(--espresso);

    text-align: center;

    overflow: hidden;

}


.quote-symbol {

    position: absolute;

    top: 50px;
    left: 50%;

    transform: translateX(-50%);

    font-family: var(--font-display);

    font-size: 130px;

    line-height: 1;

    opacity: .13;

}


.quote-section blockquote {

    max-width: 1150px;

    margin: 0 auto;

    font-family: var(--font-display);

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

    font-weight: 400;

    line-height: .95;

    letter-spacing: -.05em;

}


.quote-section blockquote em {

    color: var(--cream);

    font-weight: 400;

}


.quote-section blockquote span {

    display: block;

}


.quote-signature {

    display: block;

    margin-top: 55px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .26em;

}



/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    min-height: 100vh;

    padding:

        130px
        max(48px, calc((100vw - 1500px) / 2))
        40px;

    background: var(--espresso);

    color: var(--white);

    display: flex;

    flex-direction: column;

}


.final-cta-top {

    flex: 1;

}


.final-title {

    margin-top: 70px;

}


.final-title > span {

    display: block;

    margin-bottom: -7px;

    font-size: 10px;

    letter-spacing: .24em;

    color: rgba(255,255,255,.46);

}


.final-title h2 {

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(100px, 17vw, 280px);

    font-weight: 400;

    line-height: .79;

    letter-spacing: -.07em;

    color: var(--cream);

}


.final-title em {

    display: block;

    margin-left: 38%;

    font-family: var(--font-display);

    font-size: clamp(48px, 6vw, 94px);

    font-weight: 400;

    line-height: 1;

    color: var(--caramel-light);

}


.final-action {

    margin: 90px 0;

}


.final-action a {

    padding:

        26px
        0;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-family: var(--font-display);

    font-size: clamp(28px, 4vw, 61px);

    transition:
        padding-left .3s ease,
        color .3s ease;

}


.final-action a:hover {

    padding-left: 18px;

    color: var(--caramel-light);

}


.final-action svg {

    width: 50px;

}


.site-footer {

    padding-top: 32px;

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

    display: grid;

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

    align-items: center;

}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 13px;

}


.footer-monogram {

    width: 39px;
    height: 39px;

    border: 1px solid rgba(255,255,255,.33);

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-family: var(--font-display);

    font-size: 19px;

    font-style: italic;

}


.footer-brand div {

    display: flex;

    flex-direction: column;

}


.footer-brand strong {

    font-size: 11px;

    letter-spacing: .21em;

}


.footer-brand small {

    margin-top: 4px;

    font-size: 7px;

    letter-spacing: .45em;

    opacity: .5;

}


.footer-copy {

    display: flex;

    flex-direction: column;

    gap: 6px;

    text-align: center;

    font-size: 7px;

    letter-spacing: .17em;

    color: rgba(255,255,255,.42);

}


.back-top {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 8px;

    letter-spacing: .16em;

    color: rgba(255,255,255,.58);

}



/* =========================================================
   ANIMACIONES
========================================================= */

.reveal {

    opacity: 0;

    transform: translateY(28px);

    transition:

        opacity .85s cubic-bezier(.22,.61,.36,1),
        transform .85s cubic-bezier(.22,.61,.36,1);

}


.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .desktop-nav,
    .header-cta {
        display: none;
    }


    .menu-toggle {
        display: block;
    }


    .hero-inner {

        grid-template-columns: 1fr;

        padding-top: 150px;

    }


    .hero::after {
        display: none;
    }


    .hero-title {

        max-width: 850px;

        font-size: clamp(70px, 12vw, 130px);

    }


    .hero-visual {

        width: min(75%, 560px);

        margin-top: 40px;

        justify-self: end;

    }


    .manifesto-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .manifesto-main > p {

        margin-left: 20%;

    }


    .experience-header {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .experience-header > p {

        margin-left: 0;

    }


    .experience-cards {

        grid-template-columns: 1fr;

    }


    .experience-card {

        min-height: 310px;

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

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

    }


    .ritual-content {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .ritual-text {

        max-width: 520px;

        margin-left: auto;

    }

}



/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 782px) {

    body.admin-bar .site-header {
        top: 46px;
    }

}


@media (max-width: 760px) {

    .header-inner {

        height: 82px;

        padding:
            0
            22px;

    }


    .brand-name {
        font-size: 11px;
    }


    .brand-mark {

        width: 38px;
        height: 38px;

    }


    .hero-inner {

        min-height: auto;

        padding:

            135px
            22px
            105px;

    }


    .eyebrow {

        margin-bottom: 30px;

        font-size: 7px;

    }


    .hero-title {

        font-size: clamp(61px, 19vw, 100px);

        line-height: .85;

    }


    .hero-title > span {

        margin-left: 7vw;

    }


    .hero-title em {

        margin-left: 11vw;

    }


    .hero-bottom {

        grid-template-columns: 1fr;

        gap: 35px;

        margin-top: 48px;

    }


    .circle-link {

        width: 100px;
        height: 100px;

    }


    .hero-visual {

        width: 91%;

        margin-top: 45px;

    }


    .photo-number {

        left: -24px;

        width: 58px;
        height: 58px;

    }


    .hero-seal {

        width: 68px;
        height: 68px;

        right: -20px;

    }


    .hero-scroll {
        display: none;
    }


    .manifesto {

        min-height: auto;

        padding:

            80px
            22px
            130px;

    }


    .manifesto-grid {

        margin-top: 70px;

    }


    .manifesto-intro p {

        font-size: 26px;

    }


    .manifesto-main h2 {

        font-size: clamp(51px, 16vw, 78px);

    }


    .manifesto-main > p {

        margin:

            40px
            0
            0;

    }


    .manifesto-word {

        bottom: -20px;

        font-size: 36vw;

    }


    .experience {

        padding:

            90px
            22px
            100px;

    }


    .experience-header h2 {

        font-size: clamp(56px, 18vw, 88px);

    }


    .experience-cards {

        margin-top: 65px;

    }


    .experience-card {

        min-height: 290px;

        padding:
            28px
            25px
            34px;

    }


    .ritual-image {

        height: 68vh;

        min-height: 520px;

    }


    .ritual-image-label {

        left: 22px;
        bottom: 25px;

    }


    .ritual-content {

        padding:

            90px
            22px
            110px;

    }


    .ritual-copy h2 {

        font-size: clamp(58px, 18vw, 88px);

    }


    .ritual-text {

        margin-left: 0;

    }


    .quote-section {

        padding:

            130px
            22px
            140px;

    }


    .quote-section blockquote {

        font-size: clamp(49px, 14vw, 76px);

    }


    .final-cta {

        padding:

            90px
            22px
            28px;

    }


    .final-title {

        margin-top: 70px;

    }


    .final-title h2 {

        font-size: clamp(88px, 29vw, 150px);

    }


    .final-title em {

        margin-left: 14%;

        font-size: 14vw;

    }


    .final-action {

        margin:

            100px
            0
            70px;

    }


    .final-action a {

        font-size: clamp(22px, 7vw, 38px);

    }


    .final-action svg {

        width: 33px;

        flex: 0 0 33px;

        margin-left: 20px;

    }


    .site-footer {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .footer-copy {

        text-align: left;

    }


    .back-top {

        justify-self: start;

    }

}



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

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }


    .reveal {

        opacity: 1;

        transform: none;

    }

}