/* ============================================================
   FUD COFFEE
   ============================================================ */

:root {

    --red: #720817;
    --red-dark: #4b050d;
    --red-deep: #360207;
    --red-light: #93162a;

    --espresso: #28100c;
    --coffee: #421811;
    --coffee-light: #6a3125;

    --cream: #f1e0c7;
    --cream-light: #f8eddd;
    --cream-dark: #d8c1a3;

    --ink: #351711;
    --muted: #745a4d;

    --border: rgba(53, 23, 17, .18);

    --ease:
        cubic-bezier(.22, .8, .25, 1);

    --page-padding:
        clamp(24px, 6vw, 100px);

    --font-display:
        "Arial Black",
        "Helvetica Neue",
        Helvetica,
        sans-serif;
}


/* RESET */

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

html {
    scroll-behaviour: smooth;
}

body {
    margin: 0;

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

    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;
}

button {
    font: inherit;
}

button:focus-visible {
    outline: 3px solid var(--cream);
    outline-offset: 4px;
}


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

.header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;
}

.header__inner {
    height: 82px;

    padding:
        0
        var(--page-padding);

    display: flex;
    align-items: center;
}

.brand {
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--red);

    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;

    letter-spacing: -.04em;

    cursor: pointer;
}


/* NAV */

.navigation {
    margin-left:
        clamp(50px, 7vw, 120px);

    display: flex;
    align-items: center;

    gap:
        clamp(25px, 3vw, 50px);
}

.navigation__link {
    position: relative;

    padding: 15px 0;

    border: 0;

    background: transparent;

    color: var(--ink);

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .22em;

    cursor: pointer;

    transition:
        color .25s var(--ease),
        transform .25s var(--ease);
}

.navigation__link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 8px;

    width: 100%;
    height: 2px;

    background: var(--red);

    transform: scaleX(0);

    transform-origin: right;

    transition:
        transform .3s var(--ease);
}

.navigation__link:hover {
    color: var(--red);

    transform:
        translateY(-2px);
}

.navigation__link:hover::after {
    transform: scaleX(1);

    transform-origin: left;
}


/* ACTIONS */

.header__actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 12px;
}

.icon-button {
    width: 43px;
    height: 43px;

    padding: 0;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 100%;

    background: transparent;

    color: var(--coffee);

    cursor: pointer;

    transition:
        color .3s var(--ease),
        background .3s var(--ease),
        transform .3s var(--ease);
}

.icon-button:hover {
    color: var(--cream-light);

    background: var(--red);

    transform:
        translateY(-3px);
}

.icon-button svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* MENU ICON */

.menu-button {
    display: none;

    flex-direction: column;

    justify-content: center;

    gap: 4px;
}

.menu-button span {
    display: block;

    width: 18px;
    height: 2px;

    background: currentColor;

    transition:
        transform .3s var(--ease),
        opacity .3s var(--ease);
}

.menu-button.active span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* MOBILE MENU */

.mobile-menu {
    position: absolute;

    right: var(--page-padding);
    top: 70px;

    width: 210px;

    padding: 10px;

    display: grid;

    border-radius: 8px;

    background: var(--cream-light);

    box-shadow:
        0 20px 60px rgba(40, 10, 8, .2);

    z-index: 110;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-10px);

    transition:
        .3s var(--ease);
}

.mobile-menu.active {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.mobile-menu button,
.mobile-menu a {
    display: block;

    padding: 14px;

    border: 0;
    border-radius: 5px;

    background: transparent;

    color: var(--ink);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .15em;

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.mobile-menu button:hover,
.mobile-menu a:hover {
    background: var(--red);
    color: var(--cream-light);
}


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

.hero {
    position: relative;

    min-height: 760px;
    height: 100svh;

    overflow: hidden;

    isolation: isolate;

    background: var(--cream-light);
}


/* LABEL BACKGROUND SHAPES */

.hero__label-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;
}

.hero__label-shape {
    fill: var(--coffee);
}


/* HERO COPY */

.hero__content {
    position: relative;

    width: 50%;

    padding-left:
        var(--page-padding);

    padding-top:
        clamp(150px, 17vh, 200px);

    z-index: 10;
}

.hero__title {
    margin: 0;

    color: var(--red);

    font-family: var(--font-display);
    font-size:
        clamp(125px, 17vw, 270px);

    font-weight: 900;

    line-height: .76;

    letter-spacing: -.045em;
}

.hero__strapline {
    margin:
        clamp(35px, 5vh, 60px)
        0
        0;

    color: var(--ink);

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

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: .24em;
}

.hero__description {
    margin:
        20px
        0
        0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.45;
}


/* ============================================================
   BUTTON
   ============================================================ */

.primary-button {
    position: relative;

    margin-top: 25px;

    height: 54px;

    padding:
        0
        27px;

    display: inline-flex;
    align-items: center;

    gap: 20px;

    overflow: hidden;

    border:
        2px solid
        var(--red);

    border-radius: 100px;

    background: var(--red);

    color: var(--cream-light);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .18em;

    cursor: pointer;

    transition:
        color .3s var(--ease),
        box-shadow .3s var(--ease);
}

.primary-button__background {
    position: absolute;

    inset: 0;

    background:
        var(--cream-light);

    transform:
        translateX(-102%);

    transition:
        transform .35s var(--ease);
}

.primary-button__label,
.primary-button__arrow {
    position: relative;

    z-index: 2;
}

.primary-button__arrow {
    font-size: 20px;

    transition:
        transform .3s var(--ease);
}

.primary-button:hover {
    color: var(--red);

    box-shadow:
        0 13px 35px
        rgba(53, 15, 12, .18);
}

.primary-button:hover
.primary-button__background {
    transform:
        translateX(0);
}

.primary-button:hover
.primary-button__arrow {
    transform:
        translateX(6px);
}


/* ============================================================
   PRODUCT
   ============================================================ */

.hero__product {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 55%;
    height: 91%;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    perspective: 1200px;

    z-index: 5;
}

.product {
    position: relative;

    width:
        clamp(280px, 28vw, 445px);

    height:
        clamp(460px, 70vh, 670px);

    margin-right: 10vw;

    transform-style:
        preserve-3d;

    transition:
        transform .15s linear;
}


/* REAL PRODUCT IMAGE */

.product > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            -20px
            30px
            25px
            rgba(27, 6, 5, .35)
        );
}


/* PRODUCT SHADOW */

.product-shadow {
    position: absolute;

    width: 440px;
    height: 65px;

    bottom: 9px;

    margin-right: 10vw;

    border-radius: 50%;

    background:
        rgba(24, 5, 4, .35);

    filter: blur(22px);
}


/* ============================================================
   BEANS
   ============================================================ */

.scattered-beans {
    position: absolute;

    right: 95px;
    bottom: 15px;

    width: 250px;
    height: 60px;
}

.scattered-beans i {
    position: absolute;

    width: 29px;
    height: 18px;

    border-radius: 50%;

    background:
        linear-gradient(
            150deg,
            #81503a,
            #281009 72%
        );

    box-shadow:
        3px 4px 5px
        rgba(0,0,0,.3);
}

.scattered-beans i::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 2px;

    width: 2px;
    height: 14px;

    border-radius: 100%;

    background:
        #a66f52;
}

.scattered-beans i:nth-child(1) {
    left: 5px;
    bottom: 5px;
    transform: rotate(20deg);
}

.scattered-beans i:nth-child(2) {
    left: 40px;
    bottom: 20px;
    transform: rotate(-15deg);
}

.scattered-beans i:nth-child(3) {
    left: 75px;
    bottom: 6px;
    transform: rotate(42deg);
}

.scattered-beans i:nth-child(4) {
    left: 108px;
    bottom: 25px;
    transform: rotate(7deg);
}

.scattered-beans i:nth-child(5) {
    left: 145px;
    bottom: 8px;
    transform: rotate(-25deg);
}

.scattered-beans i:nth-child(6) {
    left: 178px;
    bottom: 22px;
    transform: rotate(25deg);
}

.scattered-beans i:nth-child(7) {
    left: 212px;
    bottom: 7px;
    transform: rotate(-8deg);
}


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

.manifesto {
    position: relative;

    padding:
        clamp(90px, 12vw, 180px)
        var(--page-padding);

    overflow: hidden;

    background:
        var(--red);

    color:
        var(--cream);
}

.manifesto::before {
    content: "";

    position: absolute;

    width: 55vw;
    height: 55vw;

    right: -25vw;
    top: -25vw;

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);
}

.manifesto__inner {
    position: relative;

    max-width: 900px;

    margin: auto;
}

.eyebrow {
    margin:
        0
        0
        35px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .3em;
}

.manifesto h2 {
    margin: 0;

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

    font-weight: 1000;

    line-height: .82;

    letter-spacing: -.055em;
}

.manifesto__copy {
    font-size: 18px;

    line-height: 1.55;
}

.manifesto__points {
    margin-top: 50px;

    display: flex;

    justify-content:
        space-between;

    gap: 25px;
}

.manifesto__points article {
    text-align: center;
}

.manifesto__points span {
    display: block;

    margin-top: 16px;

    font-size: 9px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: .2em;
}

.sun-icon,
.smile-icon {
    height: 42px;

    font-size: 40px;

    line-height: 42px;
}

.bean-icon {
    display: block;

    width: 38px;
    height: 38px;

    margin: 0 auto;
}


/* ============================================================
   MESSAGE CARDS
   ============================================================ */

.messages {
    overflow: hidden;

    background:
        var(--red-dark);

    color:
        var(--cream);
}

.messages__track {
    display: grid;

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

a.message-card {
    display: block;

    text-decoration: none;

    color: inherit;
}

.message-card {
    position: relative;

    min-height: 520px;

    padding:
        70px
        clamp(25px, 3vw, 55px);

    overflow: hidden;

    border-right:
        1px solid
        rgba(241,224,199,.12);

    background:
        linear-gradient(
            160deg,
            var(--red),
            var(--red-deep)
        );

    transition:
        transform .4s var(--ease),
        background .4s var(--ease);
}

.message-card::before {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    right: -120px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);
}

.message-card:focus-visible {
    outline: 3px solid var(--cream);
    outline-offset: -6px;
}

.message-card:hover {
    transform:
        translateY(-10px);

    background:
        linear-gradient(
            160deg,
            var(--red-light),
            var(--red-dark)
        );
}

.message-card p {
    position: relative;

    margin: 0;

    font-size:
        clamp(30px, 3vw, 50px);

    font-weight: 1000;

    line-height: .93;

    letter-spacing: -.035em;
}

.message-card > span {
    display: block;

    width: 35px;
    height: 4px;

    margin-top: 28px;

    background:
        var(--cream);
}


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

.blog-page {
    min-height: 100vh;

    background: var(--cream-light);
}

.blog-page .header {
    position: sticky;
}

.blog-hero {
    padding:
        clamp(48px, 8vw, 96px)
        var(--page-padding)
        clamp(40px, 6vw, 72px);

    background:
        linear-gradient(
            160deg,
            var(--red),
            var(--red-deep)
        );

    color: var(--cream-light);
}

.blog-hero__eyebrow {
    margin: 0 0 12px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .28em;
}

.blog-hero h1 {
    margin: 0;

    max-width: 14ch;

    font-family: var(--font-display);
    font-size:
        clamp(42px, 6vw, 72px);
    font-weight: 900;

    line-height: .92;

    letter-spacing: -.04em;
}

.blog-hero__lead {
    margin:
        24px
        0
        0;

    max-width: 42rem;

    color: rgba(248, 237, 221, .88);

    font-size:
        clamp(16px, 2vw, 19px);

    line-height: 1.55;
}

.breadcrumb {
    padding:
        18px
        var(--page-padding);

    background: var(--cream);

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

.breadcrumb ol {
    margin: 0;

    padding: 0;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    list-style: none;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.breadcrumb a {
    color: var(--red);

    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb li + li::before {
    content: "/";

    margin-right: 8px;

    color: var(--muted);
}

.breadcrumb [aria-current="page"] {
    color: var(--muted);
}

.blog-index__grid {
    padding:
        clamp(40px, 6vw, 80px)
        var(--page-padding)
        clamp(64px, 10vw, 120px);

    display: grid;
    gap: 28px;

    max-width: 1100px;
    margin: 0 auto;
}

.blog-card {
    display: block;

    padding:
        clamp(28px, 4vw, 40px);

    border: 1px solid var(--border);
    border-radius: 6px;

    background: var(--cream);

    color: inherit;
    text-decoration: none;

    transition:
        transform .35s var(--ease),
        box-shadow .35s var(--ease);
}

.blog-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(53, 23, 17, .08);
}

.blog-card h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size:
        clamp(26px, 3vw, 36px);
    font-weight: 900;

    line-height: .95;

    letter-spacing: -.03em;

    color: var(--red);
}

.blog-card p {
    margin:
        14px
        0
        0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.55;
}

.blog-card time {
    display: block;

    margin-top: 18px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;

    color: var(--ink);
}

.article {
    padding:
        clamp(40px, 6vw, 72px)
        var(--page-padding)
        clamp(80px, 12vw, 140px);
}

.article__inner {
    max-width: 680px;
    margin: 0 auto;
}

.article h1 {
    margin: 0;

    font-family: var(--font-display);
    font-size:
        clamp(36px, 5vw, 52px);
    font-weight: 900;

    line-height: .95;

    letter-spacing: -.04em;

    color: var(--red);
}

.article__meta {
    margin: 0 0 28px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}

.article__meta time {
    font-weight: 700;

    color: var(--ink);
}

.article__body {
    color: var(--ink);

    font-size: 18px;
    line-height: 1.65;
}

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

.article__body h2 {
    margin:
        2.4em
        0
        .75em;

    font-size:
        clamp(22px, 3vw, 28px);
    font-weight: 900;

    line-height: 1.15;

    letter-spacing: -.02em;

    color: var(--red);
}

.article__body p {
    margin:
        0
        0
        1.15em;
}

.article__body a {
    color: var(--red);

    font-weight: 700;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.article__body a:hover {
    color: var(--red-dark);
}

.article__body ul {
    margin:
        0
        0
        1.25em;

    padding-left: 1.2em;
}

.article__body li {
    margin-bottom: .5em;
}

.article-figure {
    margin:
        2.5em
        0;

    padding: 0;
}

.article-figure img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 4px;

    background: var(--cream-dark);
}

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

    color: var(--muted);

    font-size: 14px;
    line-height: 1.45;
}

.article__footer {
    margin-top: 3em;

    padding-top: 2em;

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

.article__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--red);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
}

.article__back:hover {
    text-decoration: underline;
}


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

@media (max-width: 1000px) {

    .navigation {
        display: none;
    }

    .menu-button {
        display: flex;
    }

    .header {
        background: var(--cream-light);
    }

    .hero__label-bg {
        clip-path: inset(82px 0 0 0);
    }

    .hero__content {
        width: 57%;
    }

    .hero__product {
        right: -10%;
    }

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


@media (max-width: 760px) {

    .header__inner {
        height: 70px;
    }

    .header {
        background: var(--cream-light);

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

    .header__actions
    .icon-button:not(.menu-button) {
        display: none;
    }

    .menu-button {
        color: var(--red);
    }

    .hero__label-bg {
        clip-path: inset(70px 0 0 0);
    }

    .hero__label-shape--top {
        transform: translate(12%, -18%) scale(.85);
        transform-origin: top right;
    }

    .hero__label-shape--bottom {
        transform: translateY(12%);
    }


    .hero {
        min-height: 900px;
        height: auto;
    }


    .hero__content {
        width: 100%;

        padding-top: 110px;

        padding-right:
            var(--page-padding);
    }


    .hero__title {
        font-size:
            clamp(110px, 35vw, 190px);
    }


    .hero__strapline {
        margin-top: 40px;

        font-size: 18px;
    }


    .hero__product {
        position: relative;

        width: 100%;
        height: 440px;

        right: auto;
        bottom: auto;

        margin-top: 45px;

        justify-content: flex-end;
    }


    .product {
        width: 235px;
        height: 390px;

        margin-right: 14vw;
    }


    .product-shadow {
        right: 5vw;

        width: 250px;

        margin: 0;
    }


    .scattered-beans {
        right: 0;
    }


    .manifesto__points {
        align-items: flex-start;
    }


    .messages__track {
        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;
    }


    .message-card {
        flex:
            0
            0
            75vw;

        min-height: 450px;

        scroll-snap-align: start;
    }
}


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

    *,
    *::before,
    *::after {
        scroll-behaviour: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }
}