:root {
  --mint: #4fd1b6;
  --pink: #e8458b;
  --ink: #111;
  --paper: #fff;
  --cell: 22px;
  --small: clamp(13px, 1.5vw, 20px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

/* stage owns the stacking context: white bg, canvas, then blended text on top */
.stage {
  position: fixed; inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}
#blob {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* small text goes white + difference so it reads black on paper and mint over pink */
.block, .strip, .vertical, .credit {
  mix-blend-mode: difference;
  color: #fff;
  position: absolute;
  z-index: 3;
}
.pink { color: var(--pink); }
/* difference of pink on white -> mint; so to keep pink visible we invert its channels */
.block .pink, .strip .pink { color: #17ba74; } /* appears as pink after difference on white */
.ink { color: #fff; }
.dot { color: #fff; margin-right: 0.4em; }

/* strips */
.strip {
  position: absolute; left: 0; right: 0;
  font-size: var(--small);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.6em 1em;
}
.strip.top { top: 0; display: flex; gap: 0.6em; align-items: baseline; overflow: hidden; padding-right: clamp(60px, 8vw, 110px); }
.strip.top .menu-btn { margin-left: auto; font-weight: 500; letter-spacing: 0.05em; }
.strip.top .menu-btn:hover { text-decoration: underline; }
.strip.bottom { bottom: 0; padding: 0.6em 0; font-size: clamp(16px, 2.4vw, 32px); font-weight: 400; }

.htrack { display: flex; width: max-content; animation: slide-x 28s linear infinite; }
.htrack > span { padding-right: 1em; }
@keyframes slide-x { to { transform: translateX(-50%); } }

/* vertical ticker */
.vertical {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: clamp(44px, 7vw, 96px);
  overflow: hidden;
  font-size: clamp(30px, 6vw, 84px);
  font-weight: 400;
  line-height: 1;
}
.vtrack {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  animation: slide-y 22s linear infinite;
}
.vtrack > span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: -0.08em;
  white-space: nowrap;
}
@keyframes slide-y { to { transform: translate(-50%, -50%); } }

/* giant type */
.giant {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--mint);
  font-weight: 300;
  font-size: min(28vw, 46vh);
  line-height: 0.82;
  letter-spacing: 0.06em;
}
.giant .line { position: absolute; left: 3vw; white-space: nowrap; }
.giant .l1 { top: 2vh; }
.giant .l2 { bottom: 1vh; left: 2vw; }

/* small blocks */
.block {
  position: absolute;
  font-size: var(--small);
  line-height: 1.15;
  z-index: 3;
}
.block .mono { letter-spacing: 0.25em; font-style: italic; }
.block .indent { display: inline-block; margin-left: 2.6em; }
.block.tl { top: 4.2em; left: 1em; }
.block.bl { bottom: 4.6em; left: 1em; }
.block.tr { top: 4.2em; left: 48%; display: flex; }
.block.mr { top: 50%; left: 48%; display: flex; }
.block.credit { bottom: 5.2em; left: 48%; font-size: calc(var(--small) * 0.85); }

/* menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 10;
  background: var(--mint);
  color: var(--ink);
  padding: clamp(16px, 4vw, 60px);
  display: flex; align-items: center;
}
.menu[hidden] { display: none; }
.menu-close {
  position: absolute; top: 0.2em; right: 0.3em;
  font-size: clamp(40px, 8vw, 110px); font-weight: 300; line-height: 1;
}
.menu { overflow-y: auto; align-items: stretch; }
.menu-inner { width: 100%; margin: auto 0; }
.five { list-style: none; border-top: 2px solid var(--ink); }
.five li {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 2vw;
  padding: 0.9vh 0;
  border-bottom: 2px solid var(--ink);
}
.five .num { font-size: clamp(14px, 1.4vw, 20px); }
.five h2 { font-weight: 300; font-size: clamp(28px, 5vw, 76px); line-height: 1; letter-spacing: -0.01em; }
.five p { font-size: clamp(14px, 1.3vw, 19px); line-height: 1.3; }
.five em { font-style: normal; font-size: 0.32em; vertical-align: super; color: var(--ink); letter-spacing: 0.05em; font-weight: 500; }
.packages {
  display: flex; flex-wrap: wrap; gap: 0.5em 2.5em; align-items: baseline;
  margin-top: 2.5vh; font-size: clamp(14px, 1.3vw, 19px);
}
.packages strong { font-weight: 500; }
.menu .pink { color: var(--ink); font-size: clamp(18px, 2vw, 30px); text-decoration: underline; text-underline-offset: 0.15em; }

@media (max-width: 700px) {
  :root { --small: 12px; }
  .strip.top span:nth-child(n+4):not(.menu-btn) { display: none; }
  .block.tr, .block.mr, .block.credit { left: 42%; }
  .five li { grid-template-columns: 2.2em 1fr; }
  .five p { grid-column: 2; }
  .menu { padding-top: 70px; }
  .giant { font-size: min(40vw, 42vh); }
}

/* tall phone screens: let the giant word fill the width */
@media (orientation: portrait) and (max-width: 700px) {
  .giant { font-size: 44vw; letter-spacing: 0; }
  .giant .l1 { top: 6vh; left: 1vw; }
  .giant .l2 { bottom: 5vh; left: 1vw; }
  .vertical { width: 40px; font-size: 30px; }
}