@font-face {
  font-family: "Tomato Grotesk";
  src: url("./tomato-grotesk-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #231f20;
  --paper: #fff;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  font-family: "Tomato Grotesk", Arial, Helvetica, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

p,
h1 {
  margin: 0;
}

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

.site-shell {
  --u: min(0.078125vw, 1px);
  position: relative;
  width: min(100%, 1280px);
  min-height: calc(1840 * var(--u));
  margin-inline: auto;
  overflow: hidden;
  background: var(--paper);
}

.hero {
  position: relative;
  height: calc(690 * var(--u));
}

.title-reveal {
  position: absolute;
  z-index: 2;
  top: calc(86.77 * var(--u));
  left: calc(85.65 * var(--u));
  width: calc(1108.7 * var(--u));
}

h1 {
  line-height: 0;
}

.kokemo-logo {
  width: 100%;
  height: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-image-reveal {
  position: absolute;
  top: calc(130.863 * var(--u));
  left: calc(305.802 * var(--u));
  width: calc(668.396 * var(--u));
  height: calc(546.604 * var(--u));
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.availability {
  position: absolute;
  top: calc(397.22 * var(--u));
  z-index: 3;
  font-size: calc(16 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

.availability-left {
  left: calc(85.65 * var(--u));
}

.availability-right {
  right: calc(82.86 * var(--u));
}

.intro {
  position: relative;
  height: calc(223.288 * var(--u));
  padding-top: calc(57.79 * var(--u));
  text-align: center;
  font-size: calc(25 * var(--u));
  line-height: 1.2;
}

.intro a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.details {
  position: relative;
  height: calc(445.489 * var(--u));
}

.details-image-reveal {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(668.396 * var(--u));
  height: calc(445.489 * var(--u));
}

.details-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.specs {
  position: absolute;
  top: calc(139.152 * var(--u));
  left: calc(668.396 * var(--u));
  width: calc(611.604 * var(--u));
  text-align: center;
  font-size: calc(16 * var(--u));
  line-height: 1.2;
}

.specs h2 {
  margin: 0 0 calc(19.2 * var(--u));
  font: inherit;
}

.story {
  height: calc(481.223 * var(--u));
  padding-top: calc(81.063 * var(--u));
  text-align: center;
  font-size: calc(25 * var(--u));
  line-height: 1.2;
}

.story > .reveal + .reveal {
  margin-top: calc(30 * var(--u));
}

.story-mobile {
  display: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(-26px);
  transition:
    opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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

@media (max-width: 959px) {
  .site-shell {
    --u: min(0.222222vw, 1px);
    width: min(100%, 450px);
    min-height: calc(1325 * var(--u));
  }

  .hero {
    height: calc(355 * var(--u));
  }

  .title-reveal {
    top: calc(22.59 * var(--u));
    left: calc(14.67 * var(--u));
    width: calc(420.66 * var(--u));
  }

  .hero-image-reveal {
    top: calc(38.848 * var(--u));
    left: calc(57.901 * var(--u));
    width: calc(334.198 * var(--u));
    height: calc(273.302 * var(--u));
  }

  .availability {
    top: calc(324.405 * var(--u));
    font-size: calc(12 * var(--u));
  }

  .availability-left {
    left: calc(57.9 * var(--u));
  }

  .availability-right {
    right: calc(57.9 * var(--u));
  }

  .intro {
    height: calc(114.47 * var(--u));
    padding-top: calc(25.54 * var(--u));
    font-size: calc(19 * var(--u));
  }

  .details {
    height: calc(507.903 * var(--u));
  }

  .details-image-reveal {
    top: calc(208.081 * var(--u));
    left: calc(0.158 * var(--u));
    width: calc(449.842 * var(--u));
    height: calc(299.822 * var(--u));
  }

  .specs {
    top: calc(25 * var(--u));
    left: 0;
    width: 100%;
    font-size: calc(12 * var(--u));
  }

  .specs h2 {
    margin-bottom: calc(14.4 * var(--u));
  }

  .story {
    height: calc(347.627 * var(--u));
    padding-top: calc(43.165 * var(--u));
    font-size: calc(19 * var(--u));
  }

  .story > .reveal + .reveal {
    margin-top: calc(22.8 * var(--u));
  }

  .story-desktop {
    display: none;
  }

  .story-mobile {
    display: block;
  }
}

@media (min-width: 560px) and (max-width: 959px) {
  .site-shell {
    --u: clamp(1px, 0.15625vw, 1.5px);
    width: min(100%, calc(450 * var(--u)));
  }

  .intro,
  .story {
    font-size: 19px;
  }

  .availability,
  .specs {
    font-size: 12px;
  }
}

@media (min-width: 960px) and (max-width: 1100px) {
  .site-shell {
    --u: 0.75px;
  }
}

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

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