:root {
  --cream: #f8efcf;
  --cream-light: #fff8df;

  --red: #b4261e;
  --red-dark: #891d18;

  --gold: #ae863b;
  --gold-light: #d9ab45;

  --brown: #65442f;

  --cell-empty: #f5e9bd;
  --cell-active: #d9ab45;
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
}

body {
  overflow: hidden;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  color: var(--brown);

  background:
    radial-gradient(
      circle at 69% 42%,
      rgba(255, 255, 255, 0.47),
      transparent 36%
    ),
    linear-gradient(
      115deg,
      var(--cream) 0%,
      var(--cream-light) 52%,
      var(--cream) 100%
    );
}


/* =========================================================
   PAGE
   ========================================================= */

.page {
  position: relative;

  width: 100%;
  height: 100dvh;

  overflow: hidden;

  padding:
    clamp(26px, 4vh, 52px)
    clamp(48px, 6vw, 108px);
}


/* =========================================================
   BACKGROUND WORDMARK
   ========================================================= */

.background-wordmark {
  position: absolute;

  z-index: 0;

  width: 118vw;
  max-width: none;

  left: 50%;
  top: 54%;

  transform:
    translate(-50%, -50%);

  opacity: 0.57;

  pointer-events: none;
  user-select: none;
}


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

.header {
  position: relative;

  z-index: 20;

  height: 142px;

  display: flex;

  justify-content: space-between;
  align-items: flex-start;
}

.logo {
  display: block;

  width:
    clamp(390px, 26vw, 520px);

  height: auto;
}

.market {
  margin-top: 13px;

  color: var(--gold);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.4em;
}


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

.hero {
  position: relative;

  z-index: 5;

  width: 100%;

  max-width: 1620px;

  height:
    calc(100dvh - 200px);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(430px, 0.77fr)
    minmax(610px, 1.23fr);

  align-items: center;

  gap:
    clamp(75px, 8vw, 150px);
}


/* =========================================================
   COPY
   ========================================================= */

.copy {
  position: relative;

  z-index: 10;

  align-self: center;
}

.eyebrow {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 30px;

  color: var(--red);

  font-size: 0.73rem;

  font-weight: 700;

  letter-spacing: 0.31em;
}

.eyebrow span {
  display: block;

  width: 54px;
  height: 2px;

  background: var(--gold);
}

h1 {
  max-width: 670px;

  margin: 0;

  font-family:
    "Fraunces",
    Georgia,
    serif;

  font-size:
    clamp(4.4rem, 5.7vw, 7.2rem);

  font-weight: 700;

  line-height: 0.82;

  letter-spacing: -0.057em;

  color: var(--gold);
}

h1 em {
  display: block;

  margin-top: 2px;

  color: var(--red);

  font-style: normal;
}

.message {
  margin-top: 40px;
}

.message p {
  margin: 0;
}

.message .strong {
  color: var(--red-dark);

  font-size:
    clamp(1.15rem, 1.45vw, 1.45rem);

  font-weight: 700;
}

.message p:last-child {
  margin-top: 10px;

  color: var(--brown);

  font-size:
    clamp(0.96rem, 1.08vw, 1.1rem);

  font-weight: 500;

  line-height: 1.65;
}

.meta {
  margin-top: 46px;

  display: flex;

  align-items: center;

  gap: 13px;

  color: var(--gold);

  font-size: 0.69rem;

  font-weight: 700;

  letter-spacing: 0.21em;
}

.meta i {
  display: block;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--red);

  box-shadow:
    0 0 0 6px
    rgba(180, 38, 30, 0.09);
}

.meta b {
  color: var(--red);
}


/* =========================================================
   SCENE
   ========================================================= */

.scene {
  position: relative;

  width: 100%;

  max-width: 750px;

  aspect-ratio: 1.14 / 1;

  justify-self: center;

  display: grid;

  place-items: center;
}


/* =========================================================
   HALOS
   ========================================================= */

.halo {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  transform-origin: center;
}

.halo-1 {
  width: 79%;
  height: 79%;

  border:
    1px solid
    rgba(174, 134, 59, 0.21);
}

.halo-2 {
  width: 95%;
  height: 95%;

  border:
    1px dashed
    rgba(174, 134, 59, 0.13);
}


/* =========================================================
   HIVE
   ========================================================= */

.hive {
  position: relative;

  z-index: 5;

  width: 91%;

  overflow: visible;

  filter:
    drop-shadow(
      0 27px 27px
      rgba(121, 83, 35, 0.08)
    );

  will-change: transform;
}

.cell {
  fill: var(--cell-empty);

  fill-opacity: 0.55;

  stroke: #bd9850;

  stroke-width: 2;

  transform-box: fill-box;

  transform-origin: center;

  will-change:
    transform,
    fill,
    opacity;
}


/* =========================================================
   BEES
   ========================================================= */

.bee {
  position: absolute;

  z-index: 30;

  left: 0;
  top: 0;

  overflow: visible;

  will-change: transform;

  filter:
    drop-shadow(
      0 8px 8px
      rgba(84, 50, 24, 0.18)
    );
}

.bee-a {
  width: 104px;
}

.bee-b {
  width: 80px;
}

.bee-c {
  width: 68px;
}


/* abdomen */

.bee-abdomen {
  fill: #d7a631;

  stroke: #67402a;

  stroke-width: 2;
}


/* thorax */

.bee-thorax {
  fill: #62402b;
}


/* stripes */

.bee-stripe {
  fill: none;

  stroke: #62402b;

  stroke-width: 7;

  stroke-linecap: round;
}


/* head */

.bee-head {
  fill: #62402b;
}

.bee-eye {
  fill: #fff6d8;
}


/* stinger */

.bee-stinger {
  fill: #62402b;
}


/* antenna */

.bee-antenna {
  fill: none;

  stroke: #62402b;

  stroke-width: 2;

  stroke-linecap: round;
}


/* legs */

.bee-leg {
  fill: none;

  stroke: #62402b;

  stroke-width: 2;

  stroke-linecap: round;
}


/* wings */

.bee-wing {
  fill:
    rgba(255, 255, 255, 0.75);

  stroke:
    rgba(174, 134, 59, 0.26);

  stroke-width: 1.4;

  transform-box: fill-box;

  transform-origin:
    55% 100%;
}


/* =========================================================
   PREPARANDO
   ========================================================= */

.building {
  position: absolute;

  z-index: 40;

  left: 50%;
  bottom: 1.5%;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--red);

  font-size: 0.64rem;

  font-weight: 700;

  letter-spacing: 0.26em;

  white-space: nowrap;
}

.dots {
  display: flex;

  gap: 5px;
}

.dots i {
  display: block;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--gold);
}


/* =========================================================
   FLIGHT PATHS
   ========================================================= */

.flight-paths {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  pointer-events: none;
}

.flight-paths path {
  fill: none;
}


/* =========================================================
   SHORT DESKTOP
   ========================================================= */

@media (max-height: 780px) {

  .page {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .header {
    height: 102px;
  }

  .logo {
    width: 330px;
  }

  .hero {
    height:
      calc(100dvh - 133px);
  }

  h1 {
    font-size:
      clamp(3.7rem, 5vw, 5.8rem);
  }

  .eyebrow {
    margin-bottom: 21px;
  }

  .message {
    margin-top: 26px;
  }

  .meta {
    margin-top: 31px;
  }

  .scene {
    max-width: 580px;
  }
}


/* =========================================================
   MEDIUM
   ========================================================= */

@media (max-width: 1200px) {

  .page {
    padding-left: 42px;
    padding-right: 42px;
  }

  .hero {
    grid-template-columns:
      0.86fr
      1.14fr;

    gap: 42px;
  }

  .logo {
    width:
      clamp(300px, 27vw, 385px);
  }

  h1 {
    font-size:
      clamp(3.8rem, 5.8vw, 6rem);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  .hero {
    grid-template-columns:
      0.9fr
      1.1fr;

    gap: 20px;
  }

  h1 {
    font-size:
      clamp(3.4rem, 6vw, 5rem);
  }

  .scene {
    max-width: 500px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .page {
    padding:
      18px
      20px;
  }

  .header {
    height: 68px;
  }

  .logo {
    width: 205px;
  }

  .market {
    display: none;
  }

  .hero {
    height:
      calc(100dvh - 82px);

    grid-template-columns: 1fr;

    grid-template-rows:
      auto
      1fr;

    gap: 0;

    text-align: center;
  }

  .eyebrow {
    justify-content: center;

    margin-bottom: 13px;

    font-size: 0.58rem;
  }

  .eyebrow span {
    display: none;
  }

  h1 {
    margin: auto;

    font-size:
      clamp(3rem, 12vw, 4.5rem);
  }

  .message {
    margin-top: 17px;
  }

  .message .strong {
    font-size: 0.96rem;
  }

  .message p:last-child {
    font-size: 0.82rem;
  }

  .meta {
    justify-content: center;

    margin-top: 17px;

    font-size: 0.54rem;
  }

  .scene {
    max-width: 410px;

    height: 38vh;

    min-height: 250px;
  }

  .background-wordmark {
    width: 205vw;

    left: 43%;

    opacity: 0.43;
  }

  .bee-a {
    width: 72px;
  }

  .bee-b {
    width: 58px;
  }

  .bee-c {
    width: 50px;
  }

  .building {
    font-size: 0.52rem;
  }
}