@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* The palette comes from the brand sheet: night sky, honey, wax. */
:root {
  --night: #0b0d13;
  --comb: #141821;
  --edge: #272c3a;
  --honey: #f7b21c;
  --honey-light: #ffd34d;
  --wax: #f1ecdf;
  --dim: #a09a8c;
  --sky: #2aa5ee;
  --good: #35d685;
  --bad: #ff4d4d;
  --display: "Chakra Petch", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wide: 1160px;
  --cell: clamp(92px, 11.5vw, 150px);
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Kukulu and the comb reach past the edge on purpose; the page must not scroll sideways. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--wax);
  font: 300 1.0625rem/1.65 var(--body);
  overflow-x: hidden;
  /* A faint honeycomb over the whole page. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='146'%3E%3Cpath d='M42 1 83 24.5v49L42 97 1 73.5v-49zM0 97.5 41 121v25M84 97.5 43 121v25' fill='none' stroke='%23161a24' stroke-width='1.500'/%3E%3C/svg%3E");
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.4rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  max-width: 22ch;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

p {
  margin: 0;
  max-width: 62ch;
}

a {
  color: var(--honey-light);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--wax);
}

:focus-visible {
  outline: 2px solid var(--honey-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--honey);
  color: var(--night);
  padding: 8px 14px;
  font-weight: 500;
  z-index: 10;
}

.skip:focus {
  left: 8px;
}

main > section, .top, .foot {
  width: min(var(--wide), 100% - 40px);
  margin-inline: auto;
}

main > section {
  padding-block: clamp(40px, 6vw, 84px);
}

/* Top bar */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 1.25rem/1 var(--display);
  color: var(--wax);
  text-decoration: none;
}

.brand svg {
  width: 26px;
  height: 30px;
  fill: var(--honey);
}

.brand .cut {
  fill: var(--night);
}

.top nav {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
}

.top nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
}

.top nav a:hover {
  color: var(--wax);
}

/* Hero: the words on the left, Kukulu flying in from the right. */
main > .hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding-top: clamp(24px, 5vw, 64px);
}

.lead {
  margin-top: 1.3rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: #d9d3c4;
}

.status {
  margin-top: 1.8rem;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  color: var(--dim);
  font-size: 0.95rem;
}

.dot {
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 0 rgba(247, 178, 28, 0.6);
  animation: beacon 2.4s ease-out infinite;
}

.kukulu {
  position: relative;
  aspect-ratio: 490 / 360;
  /* Larger than its column, so it flies in past the edge of the page. */
  width: 122%;
  margin-right: -22%;
}

.kukulu img, .k-fly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kukulu::before {
  content: "";
  position: absolute;
  left: 62%;
  top: 22%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 178, 28, 0.42), rgba(255, 178, 28, 0));
  animation: aura 3s ease-in-out infinite;
}

.k-fly {
  animation: fly 3.2s ease-in-out infinite;
}

.k-wing {
  transform-origin: 43.7% 37.8%;
  animation: flap 0.14s ease-in-out infinite alternate;
}

.k-eye {
  filter: drop-shadow(0 0 6px #7fd3ff);
  animation: eye 2.2s ease-in-out infinite;
}

.k-cube {
  transform-origin: 85.7% 52.8%;
  filter: drop-shadow(0 0 14px rgba(255, 178, 28, 0.75));
  animation: cube 3s ease-in-out infinite;
}

.k-hex {
  animation: blink 3.4s ease-in-out infinite;
}

/* The hive */
main > .hive {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}

.hive-text p {
  margin-top: 1.1rem;
  color: #d9d3c4;
}

.relay {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  counter-reset: relay;
}

.relay li {
  counter-increment: relay;
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 1ch;
  padding: 0.5rem 0;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  transition: color 0.3s;
}

.relay li::before {
  content: counter(relay);
  font: 700 1rem/1.65 var(--display);
  color: var(--edge);
  transition: color 0.3s;
}

.relay li.on {
  color: var(--wax);
}

.relay li.on::before {
  color: var(--honey);
}

.comb {
  position: relative;
  justify-self: center;
  padding-block: calc(var(--cell) * 0.1);
}

.row {
  display: flex;
  gap: calc(var(--cell) * 0.06);
  /* Rows of pointed hexagons lock together when each sits a quarter of a cell into the last. */
  margin-top: calc(var(--cell) * -0.23);
}

.row:first-of-type {
  margin-top: 0;
}

.row.shift {
  margin-left: calc(var(--cell) * 0.53);
}

.row:not(.shift) {
  margin-right: calc(var(--cell) * 0.53);
}

.cell {
  --line: var(--edge);
  width: var(--cell);
  aspect-ratio: 1 / 1.1547;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--line);
  padding: 2px;
  transition: background 0.4s;
}

.cell > div {
  height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--comb);
  display: grid;
  justify-items: center;
  align-content: center;
  transition: background 0.4s;
}

.cell img {
  width: 62%;
  opacity: 0.55;
  filter: saturate(0.6);
  transition: opacity 0.4s, filter 0.4s;
}

.cell b {
  font: 600 clamp(0.65rem, 1vw, 0.85rem)/1.2 var(--display);
  color: var(--dim);
  margin-top: 2px;
  transition: color 0.4s;
}

.cell.on {
  --line: var(--role);
}

.cell.on > div {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--role) 26%, var(--comb)), var(--comb) 72%);
}

.cell.on img {
  opacity: 1;
  filter: none;
  animation: buzz 0.16s linear infinite;
}

.cell.on b {
  color: var(--role);
}

/* A cell that has had its turn stays lit a little. */
.cell.was img {
  opacity: 0.9;
  filter: none;
}

.pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--honey-light);
  box-shadow: 0 0 12px 4px rgba(255, 211, 77, 0.8), 0 0 36px 10px rgba(247, 178, 28, 0.45);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.25s;
}

.pulse.go {
  opacity: 1;
}

/* Steps: a real sequence, so it is numbered. */
.steps ol {
  list-style: none;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-rows: clamp(120px, 15vw, 190px) auto 1fr;
  gap: 12px;
}

.steps img {
  height: 100%;
  width: auto;
  align-self: end;
}

.steps h3::before {
  content: counter(step);
  display: block;
  font-size: 0.95rem;
  color: var(--honey);
  margin-bottom: 4px;
}

.steps p, .states li p, .who p {
  color: #cfc9ba;
  font-size: 0.98rem;
}

/* States */
.intro {
  margin-top: 1rem;
  color: #d9d3c4;
}

.states ul {
  list-style: none;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
}

.states img {
  width: 100%;
  margin-bottom: 10px;
}

.states h3 {
  font-size: 1.1rem;
}

.states li p {
  font-size: 0.88rem;
  line-height: 1.45;
  margin-top: 2px;
}

.s-idle img { animation: fly 3.2s ease-in-out infinite; }
.s-thinking img { transform-origin: 50% 60%; animation: tilt 2.4s ease-in-out infinite; }
.s-working img { animation: rush 0.3s ease-in-out infinite; }
.s-success img { animation: fly 2.6s ease-in-out infinite; }
.s-error img { transform-origin: 50% 60%; animation: shake 0.45s linear infinite; }
.s-tired img { animation: sink 4s ease-in-out infinite; }
.s-excited img { animation: bounce 0.55s cubic-bezier(0.3, 0, 0.3, 1) infinite alternate; }
.s-working h3 { color: var(--sky); }
.s-success h3 { color: var(--good); }
.s-error h3 { color: var(--bad); }
.s-excited h3 { color: var(--honey-light); }

/* Tracking */
main > .tracking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}

.tracking-text > p {
  margin-top: 1.1rem;
  color: #d9d3c4;
}

.tracking dl {
  margin: 1.6rem 0 0;
}

.tracking dl div {
  display: grid;
  grid-template-columns: 9ch 1fr;
  gap: 1ch;
  padding: 0.55rem 0;
  border-top: 1px solid var(--edge);
}

.tracking dt {
  font: 600 1.05rem/1.65 var(--display);
  color: var(--honey);
}

.tracking dd {
  margin: 0;
  color: #cfc9ba;
}

.board {
  margin: 0;
  background: var(--comb);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: clamp(16px, 2.4vw, 28px);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.board figcaption {
  color: var(--dim);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.board ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.board li, .total {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 8ch 6ch;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--edge);
  color: var(--dim);
}

.board small {
  display: block;
  font-size: 0.8rem;
  color: var(--dim);
}

.mark {
  width: 14px;
  height: 16px;
  align-self: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--edge);
}

.board .done {
  color: var(--wax);
}

.board .done .mark {
  background: var(--good);
}

.board .now {
  color: var(--honey-light);
}

.board .now .mark {
  background: var(--honey);
  animation: glow 1.2s ease-in-out infinite;
}

.time, .cost {
  text-align: right;
}

.cost {
  color: var(--honey);
}

.total {
  grid-template-columns: minmax(0, 1fr) 8ch 6ch;
  color: var(--wax);
  font-weight: 500;
  margin: 0;
  max-width: none;
}

.context {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) 4ch;
  gap: 12px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  font-size: 0.85rem;
}

.context span:last-child {
  text-align: right;
}

.meter {
  height: 8px;
  border-radius: 99px;
  background: var(--edge);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--good);
}

/* Who it is for */
.who .cols {
  margin-top: clamp(20px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
}

.who p {
  font-size: 1.05rem;
}

.foot {
  border-top: 1px solid var(--edge);
  padding-block: 28px 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--dim);
  font-size: 0.9rem;
}

@keyframes fly { 50% { transform: translateY(-1.8%); } }
@keyframes flap { from { transform: rotate(-2.5deg); } to { transform: rotate(3.5deg); } }
@keyframes eye { 50% { opacity: 0.6; } }
@keyframes cube { 50% { transform: translateY(-1.6%) scale(1.03); } }
@keyframes blink { 50% { opacity: 0.4; } }
@keyframes aura { 50% { opacity: 0.55; } }
@keyframes beacon { 100% { box-shadow: 0 0 0 10px rgba(247, 178, 28, 0); } }
@keyframes buzz {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  75% { transform: translate(1.5px, -1px); }
}
@keyframes tilt { 50% { transform: rotate(-3deg) translateY(-2%); } }
@keyframes rush { 50% { transform: translate(2px, -2px); } }
@keyframes shake {
  25% { transform: translateX(-2px) rotate(-1.5deg); }
  75% { transform: translateX(2px) rotate(1.5deg); }
}
@keyframes sink { 50% { transform: translateY(2.5%); } }
@keyframes bounce { to { transform: translateY(-5%); } }
@keyframes glow { 50% { opacity: 0.45; } }

@media (max-width: 900px) {
  main > .hero, main > .hive, main > .tracking {
    grid-template-columns: minmax(0, 1fr);
  }
  .kukulu {
    width: 112%;
    margin: 0 -8% 0 -4%;
  }
  .steps ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .states ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root {
    --cell: clamp(86px, 26vw, 150px);
  }
}

@media (max-width: 560px) {
  .top nav a:not(:first-child) {
    display: none;
  }
  .steps ol, .who .cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps li {
    grid-template-rows: 130px auto auto;
  }
  .states ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .board li {
    grid-template-columns: 18px minmax(0, 1fr) 7ch 6ch;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}