@layer reset, base, layout, components, motion;

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

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ol {
    margin: 0;
  }

  ol {
    padding: 0;
    list-style: none;
  }

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

  button,
  a {
    font: inherit;
  }
}

@layer base {
  :root {
    --red: #f3121d;
    --red-on-dark: #f71823;
    --red-dark: #c80812;
    --ink: #070707;
    --graphite: #171717;
    --cream: #f1eee7;
    --white: #fffdfa;
    --silver: #adb0b3;
    --line-light: rgb(255 255 255 / 18%);
    --line-dark: rgb(7 7 7 / 18%);
    --gutter: clamp(1.25rem, 5vw, 5.5rem);
    --header-height: 6rem;
    --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue", Arial, sans-serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  html {
    background: var(--ink);
    color: var(--ink);
    font-family: var(--sans);
  }

  body {
    min-width: 20rem;
    overflow-x: hidden;
    background: var(--cream);
  }

  body.menu-open {
    overflow: hidden;
  }

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

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

  :focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--ink);
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.8rem;
    left: 0.8rem;
    padding: 0.8rem 1rem;
    color: var(--ink);
    background: var(--white);
    transform: translateY(-180%);
    transition: transform 180ms ease;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .section {
    position: relative;
    padding: clamp(6.5rem, 11vw, 10rem) var(--gutter);
  }

  .section--cream {
    background: var(--cream);
  }

  .section--ink {
    color: var(--white);
    background: var(--ink);
  }

  .section__meta {
    display: grid;
    grid-template-columns: minmax(4rem, 1fr) 3fr;
    gap: 1rem;
    width: 100%;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line-dark);
    color: rgb(7 7 7 / 70%);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
  }

  .section__meta--light {
    color: rgb(255 255 255 / 67%);
    border-color: var(--line-light);
  }

  .display-title {
    max-width: 12ch;
    font-family: var(--display);
    font-size: clamp(4rem, 9.4vw, 10rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.84;
    text-transform: uppercase;
  }

  .display-title--light {
    color: var(--white);
  }

  .outline-text {
    color: transparent;
    -webkit-text-stroke: max(1px, 0.012em) var(--ink);
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgb(7 7 7 / 70%);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .eyebrow::before {
    width: 0.45rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .eyebrow--light {
    color: rgb(255 255 255 / 78%);
  }

  .eyebrow--red {
    color: var(--red);
  }
}

@layer layout {
  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    min-height: var(--header-height);
    padding: 1.1rem var(--gutter);
    color: var(--white);
    border-bottom: 1px solid transparent;
    transition:
      min-height 250ms ease,
      background 250ms ease,
      border-color 250ms ease;
  }

  .site-header.is-scrolled {
    min-height: 4.6rem;
    border-color: var(--line-light);
    background: rgb(7 7 7 / 88%);
    backdrop-filter: blur(16px);
  }

  .brand,
  .site-footer__brand {
    display: inline-flex;
    flex-direction: column;
    width: max-content;
    color: var(--white);
  }

  .brand__script {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.38rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.09em;
    line-height: 0.8;
  }

  .brand__zero {
    padding-left: 0.18rem;
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.23em;
    text-transform: uppercase;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.3vw, 2.5rem);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .site-nav > a:not(.site-nav__cta) {
    position: relative;
    padding: 0.9rem 0;
  }

  .site-nav > a:not(.site-nav__cta)::after {
    position: absolute;
    right: 0;
    bottom: 0.55rem;
    left: 0;
    height: 1px;
    background: var(--white);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 200ms ease;
  }

  .site-nav > a:hover::after,
  .site-nav > a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 9.5rem;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    color: var(--ink);
    background: var(--white);
  }

  .menu-toggle {
    display: none;
  }

  .hero {
    position: relative;
    isolation: isolate;
    min-height: max(47rem, 100svh);
    overflow: hidden;
    color: var(--white);
    background:
      linear-gradient(90deg, transparent 0 64%, rgb(255 255 255 / 5%) 64% 64.08%, transparent 64.08%),
      linear-gradient(180deg, #111 0%, var(--ink) 82%);
  }

  .hero::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.17;
    background-image: url("./assets/grain.svg");
    background-size: 180px 180px;
    content: "";
    pointer-events: none;
  }

  .hero__glow {
    position: absolute;
    z-index: -2;
    top: 43%;
    left: 73%;
    width: clamp(25rem, 55vw, 62rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--red) 0, #9e0009 35%, transparent 70%);
    filter: blur(14px);
    transform: translate(-50%, -50%);
  }

  .hero__copy {
    position: absolute;
    z-index: 4;
    top: 53%;
    left: var(--gutter);
    width: min(48rem, 57vw);
    transform: translateY(-50%);
  }

  .hero__title {
    margin: 1.4rem 0 1.8rem;
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 0.77;
    text-transform: uppercase;
  }

  .hero__title-line {
    display: block;
  }

  .hero__title-line--small {
    font-size: clamp(4rem, 8vw, 8.5rem);
  }

  .hero__title-line--big {
    margin-left: -0.06em;
    color: var(--red);
    font-size: clamp(5.5rem, 11vw, 12rem);
  }

  .hero__intro {
    max-width: 31rem;
    color: rgb(255 255 255 / 73%);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.55;
  }

  .hero__actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
  }

  .hero__type {
    position: absolute;
    z-index: 0;
    top: 52%;
    right: -0.07em;
    color: transparent;
    font-family: var(--display);
    font-size: clamp(13rem, 31vw, 35rem);
    letter-spacing: -0.08em;
    line-height: 0.72;
    -webkit-text-stroke: 1px rgb(255 255 255 / 12%);
    transform: translateY(-50%);
    white-space: nowrap;
  }

  .hero__product {
    --pointer-x: 0deg;
    --pointer-y: 0deg;
    position: absolute;
    z-index: 3;
    top: 51%;
    right: clamp(4%, 9vw, 13%);
    width: clamp(14rem, 24vw, 25rem);
    transform: translateY(-47%) rotateX(var(--pointer-y)) rotateY(var(--pointer-x));
    transform-style: preserve-3d;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .hero__can {
    position: relative;
    z-index: 2;
    width: 100%;
    filter: drop-shadow(1.5rem 2rem 1.8rem rgb(0 0 0 / 54%));
    transform: rotate(5deg);
  }

  .hero__shadow {
    position: absolute;
    z-index: 0;
    right: 3%;
    bottom: 0;
    left: 8%;
    height: 8%;
    border-radius: 50%;
    background: rgb(0 0 0 / 80%);
    filter: blur(18px);
  }

  .hero__orbit {
    position: absolute;
    z-index: 3;
    top: 8%;
    right: -7%;
    display: grid;
    width: 6.4rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 37%);
    border-radius: 50%;
    background: rgb(7 7 7 / 24%);
    backdrop-filter: blur(5px);
  }

  .hero__orbit::before {
    width: 1.35rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--red);
    content: "";
  }

  .hero__orbit svg {
    position: absolute;
    inset: 0.2rem;
    width: calc(100% - 0.4rem);
    height: calc(100% - 0.4rem);
    animation: orbit-spin 16s linear infinite;
    overflow: visible;
  }

  .hero__orbit text {
    fill: var(--white);
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
  }

  .hero__edge-copy {
    position: absolute;
    top: 48%;
    right: 1.2rem;
    color: rgb(255 255 255 / 43%);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: rotate(90deg) translateX(50%);
    transform-origin: right center;
  }

  .hero__scroll {
    position: absolute;
    z-index: 4;
    bottom: 1.8rem;
    left: var(--gutter);
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgb(255 255 255 / 55%);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .hero__scroll i {
    position: relative;
    display: block;
    width: 3.5rem;
    height: 1px;
    overflow: hidden;
    background: rgb(255 255 255 / 24%);
  }

  .hero__scroll i::after {
    position: absolute;
    inset: 0;
    background: var(--white);
    content: "";
    animation: scroll-line 2.2s ease-in-out infinite;
  }

  .hero__bubbles i {
    position: absolute;
    z-index: 1;
    bottom: -5rem;
    left: var(--x);
    width: var(--size);
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
    box-shadow: inset -2px -2px 8px rgb(255 255 255 / 14%);
    animation: bubble-rise var(--duration) linear var(--delay) infinite;
  }

  .hero__bubbles i:nth-child(1) { --x: 64%; --size: 0.8rem; --duration: 9s; --delay: -2s; }
  .hero__bubbles i:nth-child(2) { --x: 69%; --size: 1.7rem; --duration: 13s; --delay: -8s; }
  .hero__bubbles i:nth-child(3) { --x: 75%; --size: 0.55rem; --duration: 8s; --delay: -4s; }
  .hero__bubbles i:nth-child(4) { --x: 83%; --size: 1.1rem; --duration: 10s; --delay: -6s; }
  .hero__bubbles i:nth-child(5) { --x: 91%; --size: 0.65rem; --duration: 7s; --delay: -1s; }
  .hero__bubbles i:nth-child(6) { --x: 58%; --size: 0.4rem; --duration: 11s; --delay: -9s; }
  .hero__bubbles i:nth-child(7) { --x: 87%; --size: 2rem; --duration: 14s; --delay: -3s; }

  .manifesto {
    overflow: hidden;
  }

  .manifesto__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(17rem, 0.8fr);
    gap: clamp(3rem, 8vw, 9rem);
    align-items: end;
    padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 9vw, 9rem);
  }

  .manifesto__copy {
    padding-bottom: 0.5rem;
  }

  .manifesto__copy .lede {
    color: var(--ink);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }

  .manifesto__copy > p:not(.lede) {
    margin-top: 1.4rem;
    color: rgb(7 7 7 / 58%);
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .manifesto__copy .text-link {
    margin-top: 2rem;
  }

  .manifesto__ticker {
    width: calc(100% + (var(--gutter) * 2));
    margin-left: calc(var(--gutter) * -1);
    overflow: hidden;
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }

  .manifesto__ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 1.5rem 0;
    animation: ticker 24s linear infinite;
  }

  .manifesto__ticker span {
    padding: 0 1.8rem;
    font-family: var(--display);
    font-size: clamp(2.2rem, 4.7vw, 5rem);
    letter-spacing: -0.035em;
    line-height: 0.85;
  }

  .manifesto__ticker i {
    width: 0.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--red);
  }

  .sequence {
    overflow: hidden;
  }

  .sequence::before {
    position: absolute;
    top: 0;
    right: -12rem;
    width: 34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--red);
    content: "";
    filter: blur(130px);
    opacity: 0.14;
  }

  .sequence__heading {
    display: grid;
    grid-template-columns: 1fr 2.15fr;
    gap: 1rem;
    align-items: start;
    padding: clamp(4rem, 7vw, 7rem) 0;
  }

  .sequence__heading .display-title {
    max-width: 9ch;
  }

  .sequence__list {
    border-top: 1px solid var(--line-light);
  }

  .sequence-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(4rem, 0.55fr) minmax(15rem, 1.3fr) minmax(15rem, 1fr);
    gap: 2rem;
    align-items: center;
    min-height: 21rem;
    padding: 2rem 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line-light);
  }

  .sequence-card__number {
    align-self: start;
    color: rgb(255 255 255 / 46%);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
  }

  .sequence-card__copy h3 {
    font-family: var(--display);
    font-size: clamp(3.8rem, 7vw, 7.5rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.8;
    text-transform: uppercase;
  }

  .sequence-card__copy p {
    margin-top: 1.1rem;
    color: rgb(255 255 255 / 58%);
    line-height: 1.5;
  }

  .sequence-card__visual {
    position: relative;
    width: min(100%, 27rem);
    height: 16rem;
  }

  .sequence-card__visual--crack {
    display: grid;
    place-items: center;
    transform: rotate(-8deg);
  }

  .tab-shape {
    position: relative;
    width: 12rem;
    height: 7.5rem;
    border: 1.2rem solid #a7aaad;
    border-radius: 55% 55% 48% 48%;
    box-shadow:
      inset 0 0 0 2px #3d3e40,
      0 1.8rem 3rem rgb(0 0 0 / 45%);
  }

  .tab-shape::after {
    position: absolute;
    top: 1.05rem;
    left: 50%;
    width: 4.1rem;
    height: 2.8rem;
    border: 0.65rem solid #7d8083;
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
  }

  .sequence-card__visual--crack i {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 4rem;
    height: 1px;
    background: var(--red);
    transform: rotate(var(--angle)) translateX(5rem);
    transform-origin: left;
  }

  .sequence-card__visual--crack i:nth-child(2) { --angle: -32deg; }
  .sequence-card__visual--crack i:nth-child(3) { --angle: 0deg; }
  .sequence-card__visual--crack i:nth-child(4) { --angle: 32deg; }

  .sequence-card__visual--fizz {
    border-bottom: 1px solid var(--line-light);
  }

  .sequence-card__visual--fizz::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 45%;
    background: linear-gradient(180deg, transparent, rgb(243 18 29 / 32%));
    content: "";
  }

  .sequence-card__visual--fizz i {
    position: absolute;
    z-index: 1;
    bottom: var(--bottom);
    left: var(--left);
    width: var(--size);
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 63%);
    border-radius: 50%;
    box-shadow: inset -3px -3px 9px rgb(255 255 255 / 25%);
  }

  .sequence-card__visual--fizz i:nth-child(1) { --bottom: 8%; --left: 18%; --size: 1rem; }
  .sequence-card__visual--fizz i:nth-child(2) { --bottom: 22%; --left: 30%; --size: 2.2rem; }
  .sequence-card__visual--fizz i:nth-child(3) { --bottom: 47%; --left: 48%; --size: 0.7rem; }
  .sequence-card__visual--fizz i:nth-child(4) { --bottom: 65%; --left: 64%; --size: 1.5rem; }
  .sequence-card__visual--fizz i:nth-child(5) { --bottom: 35%; --left: 76%; --size: 0.45rem; }
  .sequence-card__visual--fizz i:nth-child(6) { --bottom: 78%; --left: 38%; --size: 0.55rem; }

  .sequence-card__visual--pour {
    overflow: hidden;
  }

  .sequence-card__visual--pour::before {
    position: absolute;
    top: -8rem;
    left: 30%;
    width: 5rem;
    height: 27rem;
    border-radius: 0 0 60% 60%;
    background: linear-gradient(90deg, #2b0303, #b0060e 40%, #280101);
    content: "";
    transform: rotate(26deg);
  }

  .sequence-card__visual--pour span {
    position: absolute;
    right: 2.2rem;
    bottom: -5rem;
    width: 13rem;
    height: 16rem;
    border: 2px solid rgb(255 255 255 / 55%);
    border-top: 0;
    border-radius: 0 0 3rem 3rem;
    transform: skew(-4deg);
  }

  .spotlight {
    min-height: 62rem;
    overflow: hidden;
    color: var(--white);
    background:
      radial-gradient(circle at 50% 48%, #e6101a 0 15%, #740007 35%, transparent 63%),
      var(--red-dark);
  }

  .spotlight::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0.12;
    background: url("./assets/grain.svg") repeat;
    background-size: 170px;
    content: "";
    pointer-events: none;
  }

  .spotlight__top {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .spotlight__note {
    align-self: end;
    justify-self: end;
    color: var(--white);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .spotlight__stage {
    --stage-x: 0deg;
    --stage-y: 0deg;
    position: absolute;
    z-index: 2;
    inset: 5rem 0 0;
    perspective: 1200px;
  }

  .spotlight__backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    color: transparent;
    font-family: var(--display);
    font-size: clamp(14rem, 33vw, 40rem);
    letter-spacing: -0.08em;
    line-height: 0.75;
    -webkit-text-stroke: 1px rgb(255 255 255 / 23%);
    transform: translate(-50%, -50%);
  }

  .spotlight__can {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: clamp(15rem, 23vw, 24rem);
    filter: drop-shadow(1.5rem 2.5rem 2.4rem rgb(0 0 0 / 50%));
    transform: translate(-50%, -48%) rotateX(var(--stage-y)) rotateY(var(--stage-x)) rotate(2deg);
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .spotlight__rings i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ring-size);
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / var(--opacity));
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .spotlight__rings i:nth-child(1) { --ring-size: 31rem; --opacity: 24%; }
  .spotlight__rings i:nth-child(2) { --ring-size: 47rem; --opacity: 14%; }
  .spotlight__rings i:nth-child(3) { --ring-size: 65rem; --opacity: 8%; }

  .product-note {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .product-note i {
    display: block;
    width: clamp(4rem, 10vw, 11rem);
    height: 1px;
    background: rgb(255 255 255 / 43%);
  }

  .product-note--one { top: 29%; left: 10%; }
  .product-note--two { top: 46%; right: 7%; flex-direction: row-reverse; }
  .product-note--three { right: 15%; bottom: 21%; flex-direction: row-reverse; }

  .spotlight__copy {
    position: absolute;
    z-index: 6;
    bottom: clamp(2rem, 5vw, 5rem);
    left: var(--gutter);
    max-width: 33rem;
  }

  .spotlight__copy h2 {
    margin-top: 0.7rem;
    font-family: var(--display);
    font-size: clamp(3.4rem, 6vw, 6.5rem);
    letter-spacing: -0.045em;
    line-height: 0.88;
    text-transform: uppercase;
  }

  .spotlight__copy > p:last-child {
    margin-top: 0.8rem;
    color: var(--white);
  }

  .spotlight .section__meta--light,
  .spotlight .eyebrow--light {
    color: var(--white);
  }

  .moments__heading {
    display: grid;
    grid-template-columns: 1.8fr 0.75fr;
    gap: clamp(2rem, 8vw, 9rem);
    align-items: end;
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(4rem, 6vw, 6rem);
  }

  .moments__heading p {
    max-width: 23rem;
    color: rgb(7 7 7 / 58%);
    line-height: 1.6;
  }

  .moments__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.2rem;
  }

  .moment-card {
    display: grid;
    grid-template-rows: minmax(22rem, 1fr) auto;
    min-height: 36rem;
    border: 1px solid var(--line-dark);
    background: #e6e1d8;
  }

  .moment-card:nth-child(1) { grid-column: span 5; }
  .moment-card:nth-child(2) { grid-column: span 3; margin-top: 5rem; }
  .moment-card:nth-child(3) { grid-column: span 4; margin-top: 9rem; }

  .moment-card__art {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .moment-card__copy {
    padding: 1.6rem;
  }

  .moment-card__copy > span {
    color: rgb(7 7 7 / 72%);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .moment-card__copy h3 {
    margin-top: 0.55rem;
    font-family: var(--display);
    font-size: clamp(2.2rem, 3.5vw, 4rem);
    letter-spacing: -0.035em;
    line-height: 0.9;
    text-transform: uppercase;
  }

  .moment-card__copy p {
    margin-top: 0.7rem;
    color: rgb(7 7 7 / 58%);
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .moment-card--night .moment-card__art {
    background: linear-gradient(145deg, #0f1528, #010103 75%);
  }

  .moon {
    position: absolute;
    top: 3rem;
    right: 2.5rem;
    width: 7rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 3rem rgb(243 18 29 / 48%);
  }

  .city {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 47%;
    opacity: 0.8;
    background:
      linear-gradient(90deg, #080808 0 13%, transparent 13% 16%, #0f0f0f 16% 36%, transparent 36% 40%, #050505 40% 63%, transparent 63% 67%, #101010 67% 100%);
    clip-path: polygon(0 34%, 14% 34%, 14% 5%, 37% 5%, 37% 48%, 47% 48%, 47% 0, 64% 0, 64% 27%, 80% 27%, 80% 15%, 100% 15%, 100% 100%, 0 100%);
  }

  .moment-card--night i {
    position: absolute;
    z-index: 2;
    bottom: var(--bottom);
    left: var(--left);
    width: 0.22rem;
    aspect-ratio: 1;
    background: var(--red);
    box-shadow: 0 0 0.5rem var(--red);
  }

  .moment-card--night i:nth-of-type(1) { --bottom: 18%; --left: 21%; }
  .moment-card--night i:nth-of-type(2) { --bottom: 29%; --left: 53%; }
  .moment-card--night i:nth-of-type(3) { --bottom: 13%; --left: 82%; }

  .moment-card--game .moment-card__art {
    background:
      linear-gradient(90deg, transparent 49.5%, rgb(255 255 255 / 40%) 49.5% 50.5%, transparent 50.5%),
      linear-gradient(145deg, #921018, #330105);
  }

  .ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9rem;
    aspect-ratio: 1;
    border: 1.8rem solid var(--ink);
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 1.3rem 1.7rem 2rem rgb(0 0 0 / 34%);
    transform: translate(-50%, -50%) rotate(-18deg);
  }

  .ball::after {
    position: absolute;
    inset: 1.3rem;
    border: 0.55rem solid var(--red);
    border-radius: 50%;
    content: "";
  }

  .field-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18rem;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .moment-card--lunch .moment-card__art {
    background: linear-gradient(150deg, #f2b225, #ff5b18 65%, #d30b12);
  }

  .sun {
    position: absolute;
    top: 4rem;
    left: 50%;
    width: 11rem;
    aspect-ratio: 1;
    border: 2px solid rgb(7 7 7 / 75%);
    border-radius: 50%;
    transform: translateX(-50%);
  }

  .table-line {
    position: absolute;
    right: 0;
    bottom: 3.5rem;
    left: 0;
    height: 3px;
    background: var(--ink);
  }

  .moment-card--lunch i {
    position: absolute;
    bottom: 3.5rem;
    left: var(--left);
    width: 3.5rem;
    height: var(--height);
    border: 3px solid var(--ink);
    border-bottom: 0;
    border-radius: 0.4rem 0.4rem 0 0;
  }

  .moment-card--lunch i:nth-of-type(1) { --left: 20%; --height: 6rem; }
  .moment-card--lunch i:nth-of-type(2) { --left: 62%; --height: 10rem; }

  .ritual {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: clamp(3rem, 8vw, 9rem);
    min-height: 55rem;
    overflow: hidden;
    color: var(--white);
    background:
      linear-gradient(120deg, transparent 0 43%, rgb(243 18 29 / 12%) 43% 44%, transparent 44%),
      #101214;
  }

  .ritual__copy {
    position: relative;
    z-index: 4;
    align-self: center;
  }

  .ritual__copy .eyebrow {
    margin-top: 5rem;
  }

  .ritual__copy .eyebrow--red {
    color: var(--red-on-dark);
  }

  .ritual__copy .display-title {
    margin-top: 1.6rem;
    font-size: clamp(4rem, 7.2vw, 8rem);
  }

  .ritual__copy > p:last-child {
    max-width: 25rem;
    margin-top: 2rem;
    color: rgb(255 255 255 / 59%);
    line-height: 1.65;
  }

  .ritual__visual {
    position: relative;
    min-height: 43rem;
  }

  .ritual__glass {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: min(24rem, 70%);
    height: 31rem;
    border: 2px solid rgb(255 255 255 / 44%);
    border-top-width: 4px;
    border-radius: 0 0 4rem 4rem;
    background: linear-gradient(90deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 15%) 48%, rgb(255 255 255 / 3%));
    box-shadow:
      inset 1rem 0 2rem rgb(255 255 255 / 7%),
      2rem 2.5rem 3rem rgb(0 0 0 / 45%);
    transform: translate(-50%, -50%) rotate(4deg);
  }

  .ritual__glass::after {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    left: 0.6rem;
    height: 68%;
    border-radius: 0 0 3.4rem 3.4rem;
    background: linear-gradient(180deg, #5b080d, #1b0102);
    content: "";
  }

  .ritual__glass i {
    position: absolute;
    z-index: 4;
    top: var(--top);
    left: var(--left);
    width: var(--size);
    aspect-ratio: 1;
    border: 2px solid rgb(255 255 255 / 65%);
    background: rgb(255 255 255 / 15%);
    backdrop-filter: blur(4px);
    transform: rotate(var(--rotation));
  }

  .ritual__glass i:nth-child(1) { --top: 18%; --left: 13%; --size: 6rem; --rotation: 14deg; }
  .ritual__glass i:nth-child(2) { --top: 31%; --left: 52%; --size: 7.5rem; --rotation: 43deg; }
  .ritual__glass i:nth-child(3) { --top: 49%; --left: 18%; --size: 8rem; --rotation: 27deg; }
  .ritual__glass i:nth-child(4) { --top: 68%; --left: 50%; --size: 6.5rem; --rotation: 54deg; }
  .ritual__glass i:nth-child(5) { --top: 8%; --left: 58%; --size: 4rem; --rotation: 9deg; }

  .ritual__glass span {
    position: absolute;
    z-index: 6;
    top: 12%;
    right: 0.7rem;
    width: 0.5rem;
    height: 4rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 47%);
    box-shadow: -19rem 7rem 0 -0.13rem rgb(255 255 255 / 35%);
  }

  .ritual__beam {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 52%;
    width: 62rem;
    height: 9rem;
    background: linear-gradient(90deg, var(--red), transparent 78%);
    filter: blur(16px);
    opacity: 0.65;
    transform: translate(-50%, -50%) rotate(-25deg);
  }

  .ritual__word {
    position: absolute;
    z-index: 1;
    top: 51%;
    left: 47%;
    color: transparent;
    font-family: var(--display);
    font-size: clamp(10rem, 25vw, 27rem);
    letter-spacing: -0.06em;
    -webkit-text-stroke: 1px rgb(255 255 255 / 15%);
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  .finale {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(58rem, 100svh);
    overflow: hidden;
    text-align: center;
    background: var(--red);
  }

  .finale__noise {
    position: absolute;
    inset: 0;
    opacity: 0.13;
    background: url("./assets/grain.svg");
    background-size: 180px;
    pointer-events: none;
  }

  .finale > :not(.finale__noise, .finale__disc) {
    position: relative;
    z-index: 3;
  }

  .finale__title {
    margin-top: 1.3rem;
    font-family: var(--display);
    font-size: clamp(6.5rem, 18vw, 20rem);
    letter-spacing: -0.07em;
    line-height: 0.67;
    text-transform: uppercase;
  }

  .finale__title span {
    color: var(--white);
  }

  .finale__copy {
    margin-top: 2.7rem;
    color: var(--ink);
    font-weight: 600;
  }

  .finale .eyebrow {
    color: var(--ink);
  }

  .finale .button {
    margin-top: 2rem;
  }

  .finale__disc {
    position: absolute;
    z-index: 1;
    width: clamp(13rem, 29vw, 29rem);
    aspect-ratio: 1;
    border: 1px solid rgb(7 7 7 / 25%);
    border-radius: 50%;
  }

  .finale__disc::before,
  .finale__disc::after {
    position: absolute;
    inset: 16%;
    border: 1px solid rgb(7 7 7 / 20%);
    border-radius: inherit;
    content: "";
  }

  .finale__disc::after {
    inset: 34%;
    background: var(--ink);
  }

  .finale__disc--one {
    top: -10%;
    left: -7%;
    transform: rotate(18deg);
  }

  .finale__disc--two {
    right: -8%;
    bottom: -13%;
    transform: rotate(-24deg) scale(1.25);
  }

  .site-footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 3rem;
    align-items: end;
    padding: 3rem var(--gutter);
    color: rgb(255 255 255 / 48%);
    background: var(--ink);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
}

@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-height: 3.5rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition:
      color 200ms ease,
      background 200ms ease,
      transform 200ms ease;
  }

  .button:hover {
    transform: translateY(-3px);
  }

  .button--light {
    color: var(--ink);
    background: var(--white);
  }

  .button--light:hover {
    color: var(--white);
    background: var(--red-dark);
  }

  .button--dark {
    color: var(--white);
    background: var(--ink);
  }

  .button--dark:hover {
    color: var(--ink);
    background: var(--white);
  }

  .text-link {
    position: relative;
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 0;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .text-link::after {
    position: absolute;
    right: 0;
    bottom: 0.35rem;
    left: 0;
    height: 1px;
    background: currentColor;
    content: "";
    transform-origin: left;
    transition: transform 200ms ease;
  }

  .text-link:hover::after {
    transform: scaleX(0.35);
  }

  .text-link--light {
    color: var(--white);
  }
}

@layer motion {
  .js .reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition:
      opacity 700ms ease,
      transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .sequence-card:nth-child(2),
  .moment-card:nth-child(2) {
    transition-delay: 100ms;
  }

  .sequence-card:nth-child(3),
  .moment-card:nth-child(3) {
    transition-delay: 200ms;
  }

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

  @keyframes scroll-line {
    0% { transform: translateX(-110%); }
    50%, 100% { transform: translateX(110%); }
  }

  @keyframes bubble-rise {
    0% { opacity: 0; transform: translateY(0) translateX(0); }
    12% { opacity: 0.72; }
    100% { opacity: 0; transform: translateY(-105vh) translateX(2rem); }
  }

  @keyframes orbit-spin {
    to { transform: rotate(360deg); }
  }
}

@media (max-width: 960px) {
  :root {
    --header-height: 5.2rem;
  }

  .js .menu-toggle {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 4.7rem;
    min-height: 2.75rem;
    padding: 0.6rem 0;
    color: var(--white);
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle__label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .menu-toggle__icon {
    position: relative;
    display: block;
    width: 1.4rem;
    height: 0.7rem;
  }

  .menu-toggle__icon i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform 200ms ease;
  }

  .menu-toggle__icon i:first-child { top: 0; }
  .menu-toggle__icon i:last-child { bottom: 0; }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child {
    top: 50%;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child {
    bottom: 42%;
    transform: rotate(-45deg);
  }

  .js .site-nav {
    position: fixed;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 7rem var(--gutter) 3rem;
    overflow-y: auto;
    visibility: hidden;
    background: var(--ink);
    opacity: 0;
    transform: translateY(-1rem);
    transition:
      opacity 250ms ease,
      transform 250ms ease,
      visibility 250ms;
  }

  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .js .site-nav > a:not(.site-nav__cta) {
    width: 100%;
    padding: 0.4rem 0;
    font-family: var(--display);
    font-size: clamp(3.2rem, 12vw, 6rem);
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .js .site-nav__cta {
    margin-top: 2rem;
  }

  html:not(.js) .site-header {
    position: absolute;
    grid-template-columns: 1fr;
    gap: 1rem;
    background: linear-gradient(180deg, rgb(7 7 7 / 88%), transparent);
  }

  html:not(.js) .site-nav {
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
  }

  html:not(.js) .site-nav__cta {
    min-width: auto;
    min-height: 2.5rem;
  }

  .hero__copy {
    top: 45%;
    width: min(38rem, 66vw);
  }

  .hero__product {
    right: 1%;
    width: clamp(13rem, 30vw, 20rem);
  }

  .hero__glow {
    left: 79%;
  }

  .manifesto__grid,
  .sequence__heading,
  .moments__heading {
    grid-template-columns: 1fr;
  }

  .manifesto__copy {
    max-width: 34rem;
  }

  .sequence__heading {
    gap: 2rem;
  }

  .sequence-card {
    grid-template-columns: 4rem minmax(12rem, 1fr) minmax(15rem, 1fr);
  }

  .moments__heading p {
    margin-left: auto;
  }

  .moment-card:nth-child(1),
  .moment-card:nth-child(2),
  .moment-card:nth-child(3) {
    grid-column: span 6;
    margin-top: 0;
  }

  .moment-card:nth-child(3) {
    grid-column: 4 / span 6;
  }

  .ritual {
    grid-template-columns: 1fr 0.75fr;
  }
}

@media (max-width: 680px) {
  .section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .section__meta {
    grid-template-columns: 3rem 1fr;
  }

  .display-title {
    font-size: clamp(3.7rem, 19vw, 6.7rem);
  }

  .hero {
    min-height: 50rem;
  }

  .hero__copy {
    top: 36%;
    width: calc(100% - (var(--gutter) * 2));
  }

  .hero__title {
    margin: 1rem 0 1.3rem;
  }

  .hero__title-line--small {
    font-size: clamp(3.6rem, 18vw, 6rem);
  }

  .hero__title-line--big {
    font-size: clamp(4.8rem, 24vw, 8rem);
  }

  .hero__intro {
    max-width: 23rem;
    font-size: 0.93rem;
  }

  .hero__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.4rem;
  }

  .hero__product {
    top: auto;
    right: 1rem;
    bottom: -7rem;
    width: 12.5rem;
    transform: rotate(-9deg);
  }

  .hero__product .hero__can {
    transform: none;
  }

  .hero__glow {
    top: auto;
    bottom: -3rem;
    left: 77%;
    width: 29rem;
  }

  .hero__type {
    top: auto;
    right: -1rem;
    bottom: 1rem;
    font-size: 12rem;
    transform: none;
  }

  .hero__scroll {
    bottom: 1.3rem;
  }

  .hero__edge-copy,
  .hero__orbit {
    display: none;
  }

  .manifesto__grid {
    gap: 3rem;
    padding: 3.8rem 0 5rem;
  }

  .manifesto__ticker span {
    font-size: 2.5rem;
  }

  .sequence__heading {
    padding: 3.8rem 0;
  }

  .sequence-card {
    grid-template-columns: 2.4rem 1fr;
    gap: 1rem;
    padding: 2.5rem 0;
  }

  .sequence-card__visual {
    grid-column: 2;
    height: 12rem;
  }

  .sequence-card__copy {
    grid-column: 2;
  }

  .sequence-card__copy h3 {
    font-size: clamp(3.4rem, 16vw, 5rem);
  }

  .spotlight {
    min-height: 52rem;
  }

  .spotlight__note {
    display: none;
  }

  .spotlight__top {
    grid-template-columns: 1fr;
  }

  .spotlight__can {
    top: 43%;
    width: 14.5rem;
  }

  .spotlight__rings i:nth-child(1) { --ring-size: 22rem; }
  .spotlight__rings i:nth-child(2) { --ring-size: 32rem; }
  .spotlight__rings i:nth-child(3) { --ring-size: 44rem; }

  .spotlight__backdrop {
    top: 44%;
    font-size: 14rem;
  }

  .product-note {
    display: none;
  }

  .spotlight__copy {
    right: var(--gutter);
    bottom: 3rem;
  }

  .moments__heading {
    gap: 2rem;
    padding: 3.8rem 0;
  }

  .moments__heading p {
    margin-left: 0;
  }

  .moments__grid {
    display: flex;
    width: calc(100% + var(--gutter));
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .moment-card:nth-child(n) {
    flex: 0 0 min(82vw, 21rem);
    min-height: 32rem;
    scroll-snap-align: start;
  }

  .moment-card__art {
    min-height: 20rem;
  }

  .ritual {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .ritual__visual {
    min-height: 33rem;
  }

  .ritual__glass {
    width: 15rem;
    height: 25rem;
  }

  .ritual__glass i:nth-child(1) { --size: 4rem; }
  .ritual__glass i:nth-child(2) { --size: 5rem; }
  .ritual__glass i:nth-child(3) { --size: 5rem; }
  .ritual__glass i:nth-child(4) { --size: 4.5rem; }
  .ritual__glass i:nth-child(5) { --size: 3rem; }

  .ritual__glass span {
    box-shadow: -11rem 7rem 0 -0.13rem rgb(255 255 255 / 35%);
  }

  .ritual__copy .eyebrow {
    margin-top: 3rem;
  }

  .finale {
    min-height: 42rem;
  }

  .finale__title {
    font-size: clamp(6rem, 28vw, 9rem);
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}