:root{
    --black: #000000;
    --white: #ffffff;
    --bright-gray: hsla(0, 0%, 97%, 0.75);
    --red: #e33825;

    --space-8: min(.5rem, 0.75vw);
    --space-12: min(.75rem, 1vw);
    --space-16: min(1rem, 1.25vw);
    --space-20: min(1.25rem, 1.5vw);
    --space-24: min(1.5rem, 1.75vw);
    --space-32: min(2rem, 2vw);
    --space-48: min(3rem, 3vw);
    --space-56: min(3.5rem, 3.5vw);
    --space-64: min(4rem, 4vw);
    --space-96: min(6rem, 6vw);
    --space-128: min(8rem, 8vw);
    --space-192: min(12rem, 12vw);

    --border-radius-base: 3.125rem;

    --line-height-title: 0.45;
    --line-height-70: 0.7;
    --line-height-80: 0.8;
    --line-height-100: 1;
    --line-height-110: 1.1;
    --line-height-140: 1.4;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --font-size-small-s: min(1.75rem, 1.85vw);
    --font-size-small: min(1.9rem, 2vw);
    --font-size-medium: min(2.15rem, 2.25vw);
    --font-size-large: min(4rem, 4vw);
    --font-size-x-large: min(6.25rem, 6.25vw);
    --font-size-xx-large: min(7rem, 7vw);
    --font-size-xxx-large: min(8rem, 8vw);
    --font-size-display: min(31.25rem, 41vw);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Darker Grotesque", sans-serif;
    font-weight: var(--font-weight-semibold);
    font-optical-sizing: auto;
    line-height: var(--line-height-140);
    color: var(--black);
    background-color: var(--white);
    font-size: var(--font-size-small);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    display: inline-block;
    text-decoration-line: none;
    color: var(--black);
}
p {
    text-wrap: pretty;
    text-overflow: ellipsis;
}

.text--highlight {
    font-family: "Libre Bodoni", serif;
    text-transform: uppercase;
    font-size: var(--font-size-small-s);
    font-weight: var(--font-weight-medium);
    font-style: italic;
}
.text--highlight.red {
    color: var(--red);
}
.title--highlight {
    font-family: "Newsreader", serif;
    font-weight: var(--font-weight-medium);
    font-style: italic;
    color: var(--red);
}

.container {
    max-width: calc(100rem + 15vw);
    margin-inline: auto;
    padding-inline: 5vw;
}
.layout_column--spacebetween {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.layout_row--spacebetween {
    display: flex;
    justify-content: space-between;
}

.wrapper--semitransparent {
    background-color: var(--bright-gray);
    backdrop-filter: blur(1rem);
    border-radius: var(--border-radius-base);
    border: 1px solid var(--black);
    padding-inline: var(--space-96);
    padding-block: var(--space-64);
}

.tip__number {
    font-size: var(--font-size-display);
    line-height: calc(var(--line-height-title) - 0.075);
    font-weight: var(--font-weight-black);
}
.button {
    padding-inline: var(--space-56);
    padding-block: var(--space-24);
    background-color: var(--bright-gray);
    border-radius: 100vw;
    border: 1px solid var(--black);
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-70);
    backdrop-filter: blur(1rem);

    white-space: nowrap;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-24);

    transition: background-color .2s ease-in;
}
.button:hover {
    background-color: var(--white);
}
.button__arrow {
    width: var(--font-size-small);
}
.button > svg {
    transition: rotate .2s ease-out, translate .2s ease-in-out;
}
.button:hover > svg {
    rotate: -90deg;
    translate: var(--space-12);
    transition: rotate .1s ease-out, translate .1s ease-in-out;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Unique styles */

.hero {
    background-image: url(../assets/textures/avif/beer-1-alt-bw.avif);
    background-position: center 30svh;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero__layout {
    min-height: 100svh;
    display: grid;
    place-content: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-auto-rows: auto;
    gap: var(--space-96) var(--space-56);
    padding-block: var(--space-64) var(--space-96);
}
.hero__title-wrapper {
    display: grid;
    align-content: center;
    max-height: 40svh;
}

.hero__title {
    font-family: "Newsreader", serif;
    font-weight: var(--font-weight-regular);
    font-style: italic;
    font-size: min(11rem, 15vw);
    line-height: 0.55;
    align-self: center;
    padding-block-start: var(--space-48);
}
.hero__title--fontchange {
    font-family: "Darker Grotesque", sans-serif;
    font-size: min(13.375rem, 18.5vw);
    font-weight: var(--font-weight-medium);
    font-style: normal;
    color: var(--red);
}
.hero__title--bold {
    font-weight: var(--font-weight-semibold);
    color: var(--black);
}
.hero__title--medium {
    font-weight: var(--font-weight-medium);
    color: var(--red);
}

.hero__subtitle-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-48);
    max-height: 40svh;
}
.hero__subtitle {
    font-size: var(--font-size-medium);
    white-space: nowrap;
}
.hero__subtitle > span {
    font-size: inherit;
}
.hero__image-wrapper {
    position: relative;
}
.hero__image-wrapper::before {
    content: "...reason";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Libre Bodoni", serif;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    font-style: italic;
    color: var(--red);
}
.hero__image {
    min-width: min(17.5rem, 25vw);
}

.navigation__list {
    align-items: flex-start;
    gap: var(--space-24);
}

.hero__description-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--space-64);
    padding-block: var(--space-56);
    max-height: 30svh;
}

@media (height <= 53.125rem) {
    .hero__description-wrapper {
        max-height: min-content;
    }
}

/* Problem */

.problem {
    background-color: var(--black);
}
.problem__layout {
    padding-block: var(--space-192);
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0 max(var(--space-128), 20%);
    color: var(--white);
}
.problem__image-wrapper {
    position: relative;
}
.problem__title {
    font-size: var(--font-size-xxx-large);
    font-family: "Big Shoulders", sans-serif;
    text-transform: uppercase;
    line-height: var(--line-height-100);
    position: absolute;
    inset: 0 0 100% 50%;
    backdrop-filter: blur(2rem);
}
.problem__image {
    min-height: 100%;
}

.problem__decoration {
    border-top: 1px solid var(--white);
}
.problem__subtitle {
    font-family: "Newsreader", serif;
    font-size: var(--font-size-xx-large);
    font-weight: var(--font-weight-light);
    font-style: italic;
    white-space: nowrap;
}

/* Wait */

.wait {
    padding-block: var(--space-192);
    background-color: var(--red);
    color: var(--white);
}

.wait__layout {
    display: grid;
    grid-template-columns: 1fr 1.35fr auto;
    gap: var(--space-56);
}
.wait__layout > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wait__title {
    font-family: "Newsreader", serif;
    font-style: italic;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-xxx-large);
}
.wait__description {
    max-width: 35ch;
}
.wait__subtitle--primary {
    font-family: "Big Shoulders", sans-serif;
    font-size: var(--font-size-large);
    line-height: var(--line-height-80);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}
.wait__subtitle--secondary {
    font-size: var(--font-size-large);
    line-height: var(--line-height-80);
    font-weight: var(--font-weight-regular);
}

.wait__image {
    width: 100%;
    max-width: 17.5vw;
    max-height: 100%;
}

/* Tip 1 */

.tip {
    padding-block: var(--space-192);
    border-bottom: 1px solid var(--black);
}

.grainscoop__layout {
    display: grid;
    gap: var(--space-64);
}
.grainscoop__visual {
    align-items: center;
    gap: var(--space-128);
}
.grainscoop__title-wrapper {
    display: flex;
}
.grainscoop__number {
    line-height: calc(var(--line-height-title) - 0.1);
}

.grainscoop__image {
    min-width: min(7.5rem, 9vw);
}

.grainscoop__subimage:first-of-type {
    rotate: -90deg;
}
.grainscoop__subimage:last-of-type {
    rotate: 90deg;
}

.grainscoop__description-wrapper {
    align-items: center;
    gap: var(--space-48);
}
.grainscoop__description {
    max-width: 32ch;
}
.grainscoop__cta-arrow {
    rotate: -90deg;
}

/* Tip 2 */

.tip.foam--top {
    padding-block-start: 0;
}
.stickyfloor__decoration-wrapper {
    border-bottom: 1px solid var(--black);
}
.stickyfloor__decoration-image {
    object-fit: cover;
    width: 100%;
    min-height: 7.5rem;
    max-height: 5svh;
}
.stickyfloor__layout {
    display: grid;
    gap: var(--space-24) 0;
    padding-block-start: var(--space-192);
}
.stickyfloor__description-wrapper, .stickyfloor__title-wrapper {
    gap: var(--space-128);
    align-items: flex-end;
}
.stickyfloor__image {
    max-height: 35svh;
}

.stickyfloor__description {
    max-width: 50ch;
}
.stickyfloor__title {
    font-size: var(--font-size-xx-large);
    font-weight: var(--font-weight-bold);
}
.stickyfloor__number {
    color: var(--white);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--black);
    line-height: calc(var(--line-height-title) + 0.35);
}

/* Tip 3 */

.tip.red-bg {
    background-image: url(../assets/textures/avif/beer-1-alt-red.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.lassobucket__layout {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1.2fr 1fr;
    align-items: flex-start;
    gap: var(--space-64) var(--space-96);
    color: var(--white);
}

.lassobucket__number-wrapper {
    align-self: stretch;
    grid-row: 1 / -1;
}
.lassobucket__number {
    max-width: 1ch;
    font-size: var(--font-size-x-large);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-70);
    color: var(--white);
}

.lassobucket__description-wrapper, .lassobucket__title-wrapper {
    align-items: flex-end;
}
.lassobucket__title-wrapper {
    align-self: flex-end;
}
.lassobucket__image {
    max-width: max(50%, 30vw);
    max-height: 40svh;
}

.lassobucket__description {
    max-width: 40ch;
    backdrop-filter: blur(1rem);
}

.lassobucket__title {
    font-size: var(--font-size-xxx-large);
    font-family: "Big Shoulders", sans-serif;
    text-transform: uppercase;
    line-height: var(--line-height-100);
    white-space: nowrap;
}
.lassobucket__decoration {
    height: 12.5vw;
    min-height: 5svh;
    max-height: 10rem;
    aspect-ratio: 1 / 1;
    border-radius: 0 0 var(--border-radius-base) 0;
    border-inline-end: .125rem solid var(--white);
    border-block-end: .125rem solid var(--white);
}

/* Tip 4 */

.tip.black-bg {
    background-color: var(--black);
    color: var(--white);
}
.hauntedhouse__layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-192);
}

.hauntedhouse__title-wrapper {
    gap: var(--space-64);
    position: relative;
    isolation: isolate;
}
.hauntedhouse__number-wrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.hauntedhouse__number {
    min-height: 100%;
}

.hauntedhouse__subtitle {
    font-size: var(--font-size-xx-large);
    font-family: "Big Shoulders", sans-serif;
    text-transform: uppercase;
    line-height: var(--line-height-100);
}
.hauntedhouse__title {
    font-size: var(--font-size-xx-large);
    text-transform: uppercase;
    line-height: var(--line-height-100);
    font-family: "Newsreader", serif;
    font-weight: var(--font-weight-semibold);
    font-style: italic;
}

.hauntedhouse__description-wrapper {
    align-items: flex-end;
    gap: var(--space-64);
}
.hauntedhouse__description {
    max-width: 35ch;
    background-color: var(--black);
    position: relative;
    isolation: isolate;
}
.hauntedhouse__description::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(7.5rem, 20vw);
    inset: 0 0 0 calc(max(27.5%, 7.5rem) * -1);
    mask-image: linear-gradient(90deg, var(--black) 50%, transparent 75%);
    -webkit-mask-image: linear-gradient(90deg, var(--black) 50%, transparent 75%);
    backdrop-filter: blur(min(0.65rem, 1vw));
}
.hauntedhouse__description::before {
    content: url(../assets/svg/ghosty-grain.svg);
    display: grid;
    z-index: -2;
    align-items: center;
    position: absolute;
    inset: 0 0 0 calc(max(20%, 5rem) * -1);
}

/* Tip 5 */

.paddlefights__layout {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-64) 0;
}

.paddlefights__layout > div {
    display: flex;
    justify-content: space-between;
}
.paddlefights__visual {
    gap: var(--space-32);
}
.paddlefights__visual > svg {
    max-height: 35svh;
}
.paddlefights__image-wheat:last-of-type {
    scale: -1 1;
}

.paddlefights__number {
    color: var(--white);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--black);
}
.paddlefights__image-paddles {
    width: 12.5rem;
}

.paddlefights__description-wrapper {
    align-self: flex-end;
    gap: var(--space-192);
}
.paddlefights__title {
    font-size: var(--font-size-x-large);
    font-family: "Big Shoulders", sans-serif;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-110);
    text-align: end;
}
.paddlefights__description {
    align-self: center;
    max-width: 40ch;
}

/* Challenge */

.challenge__intro-wrapper {
    background-image: url(../assets/textures/avif/beer-2-bw.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 1px solid var(--black);
}
.container.intro {
    padding-block: var(--space-192) var(--space-64);
}

.challenge__intro {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-64) var(--space-192);
    align-items: center;
}

.challenge__catch-wrapper {
    display: flex;
    justify-content: center;
    justify-self: flex-end;
    gap: var(--space-32);
}
.challenge__arrow {
    min-width: min(6.5rem, 12.5vw);
}
.challenge__catch {
    max-width: 30ch;
    align-self: center;
}
.challenge__title {
    font-size: var(--font-size-xx-large);
    grid-column: 1 / -1;
    align-self: flex-end;
}
.title--highlight.challenge__title--highlight {
    color: var(--black);
}

.challenge__description-wrapper {
    padding-block: var(--space-192);
}
.challenge__layout {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-128) var(--space-192);
    overflow-x: clip;
}

.challenge__number--highlight {
    font-family: "Libre Bodoni", serif;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-semibold);
    font-style: italic;
}
.challenge__image-wrapper {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.challenge__image--jumping, .challenge__image--group {
    width: 60rem;
}

.challenge__description.final__step {
    justify-self: center;
    grid-column: 1 / -1;
    max-width: 40ch;
    margin-top: calc(var(--space-192) * -1);
    position: relative;
    isolation: isolate;
}
.challenge__description.final__step::before {
    content: "";
    position: absolute;
    inset: -50% -50% -20% -50%;
    background-color: var(--white);
    filter: blur(min(2rem, 2vw));
    z-index: -1;
}
.title--highlight.challenge__hashtag {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-semibold);
}

/* Footer */

.footer {
    color: var(--white);
    background-color: var(--red);
    padding-block: var(--space-128);
}
.footer__layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-96);
    border-bottom: 1px solid var(--white);
}

.footer__content {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
    gap: var(--space-96);
    padding-block: var(--space-64);
}
.footer__image-wrapper {
    color: var(--white);
}
.footer__image {
    stroke: currentColor;
    min-height: 100%;
    stroke-width: .05rem;
    scale: -1 1;
    max-height: 50vh;
    max-width: 17.5vw;
}
.footer__title {
    grid-column: 1 / -1;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-large);
}
.text--highlight.footer__title--highlight {
    font-size: inherit;
}
.footer__text {
    max-width: 40ch;
    align-self: flex-end;
}

.footer__farewell {
    align-self: flex-end;
    font-size: var(--font-size-large);
    font-family: "Big Shoulders", sans-serif;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-100);
}

@media (width > 200rem) {
    .hero__layout {
        min-height: auto;
    }
}
@media (width < 50rem) {
    .hero__layout {
        grid-template-rows: 1fr 1fr;
    }
}