@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* The lab is neutral: white, black and grey. Colour belongs to the products. */
:root {
  --paper: #ffffff;
  --ink: #0b0b0c;
  --grey: #5d6068;
  --line: #e3e3e6;
  --wash: #f5f5f4;
  --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --wide: 76rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);

  /* each product's own colours, as on its own site */
  --endorphin: #a855f7;
  --endorphin-bg: #0e0a1f;
  --linebacker: #d5362f;
  --linebacker-bg: #f1eeec;
  --beehive: #f7b21c;
  --beehive-bg: #0b0d13;
  --lomi: #6fe8ab;
  --lomi-bg: #0c0f14;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 30; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; border-radius: 6px; }
.skip:focus { left: 0.5rem; }

/* an arrow marks links that leave this site */
.out::after { content: "\2197"; display: inline-block; margin-inline-start: 0.3em; font-size: 0.9em; }

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.9rem var(--gutter);
  /* the bar is black, like the hero and the logo's own background */
  background: #000;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand img, .foot-brand img { width: 2.25rem; height: 2.25rem; border-radius: 28%; background: #000; }
.top nav { display: flex; gap: clamp(0.9rem, 2.4vw, 2rem); font-size: 0.95rem; }
.top nav a { text-decoration: none; color: #b9b4cc; }
.top nav a:hover { color: #fff; }
.top :focus-visible { outline-color: #fff; }

/* Hero: black, edge to edge. White words with a purple "2.0.", and the logo in its own sky. */
.hero {
  --violet: #a78bfa;
  background: radial-gradient(48rem 30rem at 12% 0%, rgba(124, 58, 237, 0.2), transparent 70%), #000;
  color: #fff;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter))) clamp(2.5rem, 6vw, 4.5rem);
}
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.hero h1 { font-size: clamp(2.8rem, 6.6vw, 6.2rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
.hero h1 span { background: linear-gradient(100deg, #c4b5fd, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 40rem; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.4; color: #cfc8e6; }
.actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero :focus-visible { outline-color: #fff; }

/* The logo is four layers on one square: space, text, alien, hand. Two of them move here:
   the space turns slowly around the ring behind the alien's head, and the hand rocks around
   its wrist. The alien blinks by itself. The square has empty sky above the logo, hence the pull upwards. */
.hero-logo { position: relative; aspect-ratio: 1; margin: -15% -2% -1%; }
.hero-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-logo .space { animation: spin 150s linear infinite; }
.hero-logo .hand { transform-origin: 37.75% 63.83%; animation: wave 2.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes wave { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }

.button { display: inline-block; padding: 0.85rem 1.5rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; transition: transform 0.15s; }
.button:hover { transform: translateY(-2px); }
.button.quiet { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.button.on-dark { background: #fff; color: #0b0b0c; }
.hero .button { background: #7c3aed; color: #fff; }
.hero .button.quiet { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }

/* The register: the portfolio at a glance. Each row carries its product's colour. */
.register { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.45); }
.register li + li { border-inline-start: 1px solid rgba(255, 255, 255, 0.14); }
.register a { display: grid; gap: 0.15rem; height: 100%; padding: 1.1rem 1.1rem 1.2rem; text-decoration: none; position: relative; }
.register a::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 4px; background: var(--c); transform: scaleX(0.18); transform-origin: left; transition: transform 0.25s; }
.register a:hover::before { transform: scaleX(1); }
.register b { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.register span { color: #b9b4cc; font-size: 0.95rem; }
.register i { margin-top: 0.6rem; font-style: normal; font-size: 0.85rem; color: #9a95ad; }
.register i.live { color: #fff; font-weight: 600; }
.register i.live::before, .status.live::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-inline-end: 0.45rem; border-radius: 50%; background: #1faa59; }

.section-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); max-width: 44rem; }
.section-head h2, .featured > h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.section-head p { color: var(--grey); font-size: 1.1rem; }
.kind { font-size: 0.9rem; opacity: 0.72; }

/* Featured: two large rooms, each painted in its product's colours. */
.featured { max-width: var(--wide); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--gutter); display: grid; gap: 1.25rem; }
.featured > h2 { margin-bottom: 0.75rem; }
.feature { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 2rem; border-radius: 1.75rem; padding: clamp(1.75rem, 5vw, 4rem); color: #f4f4f6; overflow: hidden; }
.feature h3 { font-size: clamp(2.4rem, 6vw, 4.5rem); margin: 0.4rem 0 1rem; }
.feature p { max-width: 34rem; }
.facts { margin: 1.5rem 0 2rem; display: grid; gap: 0.45rem; font-size: 0.98rem; }
.facts li { padding-inline-start: 1.3rem; position: relative; opacity: 0.86; }
.facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 0.6rem; height: 2px; background: currentColor; }
.feature-art { display: grid; place-items: center; }
.feature-art img { width: min(100%, 22rem); }
.feature.endorphin { background: radial-gradient(40rem 26rem at 85% 30%, rgba(168, 85, 247, 0.28), transparent 65%), var(--endorphin-bg); }
.feature.endorphin h3, .feature.endorphin .facts li::before { color: #c79bff; }
.feature.lomi { background: var(--lomi-bg); }
.feature.lomi h3 { color: var(--lomi); }
.feature.lomi .facts li::before { background: var(--lomi); }
.feature.lomi .feature-art img { width: min(100%, 24rem); }

/* The catalog: three columns on a desktop. A fifth product is one more <li>. */
.catalog, .philosophy, .open, .updates { max-width: var(--wide); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card a { display: flex; flex-direction: column; height: 100%; padding: 1.4rem; border-radius: 1.4rem; text-decoration: none; transition: transform 0.18s; }
.card a:hover { transform: translateY(-4px); }
/* every picture sits in the same box, whatever its shape */
.card-art { position: relative; height: clamp(11rem, 20vw, 15rem); margin-bottom: 1.25rem; container-type: size; }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card h3 { font-size: 1.9rem; margin: 0.25rem 0 0.6rem; }
.card p { font-size: 0.98rem; }
.card .status { font-size: 0.88rem; font-weight: 600; }
/* the foot of a card: its status, and the address of its website */
.card .meta { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.card .site { font-size: 0.88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.card.next .status { margin-top: auto; padding-top: 1.25rem; }
.card.endorphin a { background: var(--endorphin-bg); color: #f1ecff; }
.card.endorphin h3 { color: #c79bff; }
.card.endorphin .card-art img { inset: 19%; width: 62%; height: 62%; }
.card.linebacker a { background: var(--linebacker-bg); color: #1c1d20; }
.card.linebacker h3 { color: var(--linebacker); }
.card.ai-beehive a { background: var(--beehive-bg); color: #f1ecdf; }
.card.ai-beehive h3 { color: var(--beehive); }
.card.lomi a { background: var(--lomi-bg); color: #e8ebf3; }
.card.lomi h3 { color: var(--lomi); }

/* Linebacker and the bee are built from layers, so parts of them can move.
   The motion is the same as on each product's own site. */
/* --r is the picture's width divided by its height; the stack is as large as fits the box */
.stack { position: absolute; inset: 0; margin: auto; aspect-ratio: var(--r); width: min(100cqw, calc(100cqh * var(--r))); height: auto; }
.stack img, .stack .fly { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.stack.lb { --r: 0.9146; --top: 22.9%; --bottom: 27.6%; }
.lb .glow { filter: blur(3px) saturate(1.5); mix-blend-mode: screen; animation: lb-glow 3.4s ease-in-out infinite, lb-shut 5.2s linear infinite -2.9s; }
.lb .lid { filter: brightness(0.09); clip-path: inset(0 0 calc(100% - var(--top)) 0); animation: lb-lid 5.2s linear infinite -2.9s; }
.lb .shield { transform-origin: 75% 65%; animation: lb-shield 3s ease-in-out infinite; }
@keyframes lb-glow { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes lb-shut { 0%, 55%, 59%, 91%, 95%, 98%, 100% { clip-path: inset(0); } 57%, 93%, 96.5% { clip-path: inset(100% 0 0 0); } }
@keyframes lb-lid { 0%, 55%, 59%, 91%, 95%, 98%, 100% { clip-path: inset(0 0 calc(100% - var(--top)) 0); } 57%, 93%, 96.5% { clip-path: inset(0 0 calc(100% - var(--bottom) - 0.5%) 0); } }
@keyframes lb-shield { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.stack.bee { --r: 1.362; }
.bee .fly { animation: bee-fly 3.2s ease-in-out infinite; }
.bee .wing { transform-origin: 43.7% 37.8%; animation: bee-flap 0.14s ease-in-out infinite alternate; }
.bee .eye { filter: drop-shadow(0 0 6px #7fd3ff); animation: bee-eye 2.2s ease-in-out infinite; }
.bee .cube { transform-origin: 85.7% 52.8%; filter: drop-shadow(0 0 10px rgba(255, 178, 28, 0.75)); animation: bee-cube 3s ease-in-out infinite; }
@keyframes bee-fly { 50% { transform: translateY(-3%); } }
@keyframes bee-flap { from { transform: rotate(-2.5deg); } to { transform: rotate(3.5deg); } }
@keyframes bee-eye { 50% { opacity: 0.6; } }
@keyframes bee-cube { 50% { transform: translateY(-1.6%) scale(1.03); } }

/* the last card is the lab's own: it fills the rest of the row */
.card.next { grid-column: span 2; }
.card.next a { justify-content: flex-end; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); min-height: 14rem; }
.card.next h3 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 14ch; }
.card.next p { max-width: 32rem; color: var(--grey); }
.card.next .status { color: var(--ink); }

.philosophy { border-top: 1px solid var(--line); }
.philosophy > h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--grey); margin-bottom: 1.25rem; }
/* the belief is the section's headline: it is set as large as one */
.belief { font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance; }
.studio { margin-top: 1.5rem; max-width: 40rem; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; color: var(--grey); }
.principles { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
/* The three icons are drawn for this page: black lines, and the part that matters in the logo's purple. */
.principles > div { border-top: 2px solid var(--ink); padding-top: 1.4rem; }
.principle-icon { width: 4.5rem; height: 4.5rem; margin-bottom: 1.1rem; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.principle-icon .hit { fill: #7c3aed; stroke: #7c3aed; }
.principle-icon .x { stroke: #9a9ca3; }
.principles h3 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.principles p { color: var(--grey); }

.open { border-top: 1px solid var(--line); }
.repos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.repos a { display: grid; gap: 0.3rem; padding: 1.2rem 0; border-top: 1px solid var(--line); text-decoration: none; height: 100%; }
.repos b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.repos a:hover b { text-decoration: underline; }
.repos span { color: var(--grey); font-size: 0.98rem; }
.more { margin-top: 1.75rem; font-weight: 600; }

.updates { border-top: 1px solid var(--line); }
.log li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem 2rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.log time { color: var(--grey); font-size: 0.95rem; padding-top: 0.2rem; }
.log h3 { font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; line-height: 1.2; }
.log p { color: var(--grey); max-width: 44rem; }
.log p a { color: var(--ink); }
.log .next time { color: var(--ink); font-weight: 600; }

/* Each entry carries its product's name and colour. */
.log-title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--grey); margin: 2.25rem 0 0.75rem; }
.log-title:first-of-type { margin-top: 0; }
.tag { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.tag::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--ink); }
.tag.endorphin::before { background: var(--endorphin); }
.tag.linebacker::before { background: var(--linebacker); }
.tag.ai-beehive::before { background: var(--beehive); }
.tag.lomi::before { background: #3fcf8e; }
.log code { font-size: 0.92em; background: var(--wash); padding: 0.05em 0.35em; border-radius: 4px; }
.updates .more { font-weight: 400; color: var(--grey); }
.updates .more a { color: var(--ink); font-weight: 600; margin-inline-end: 0.3rem; }

.foot { border-top: 1px solid var(--ink); max-width: var(--wide); margin: clamp(2rem, 6vw, 4rem) auto 0; padding: 1.75rem var(--gutter) 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; font-size: 0.95rem; }
.foot-brand { display: flex; align-items: center; gap: 0.6rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.foot nav a { text-decoration: none; color: var(--grey); }
.foot nav a:hover { color: var(--ink); }
.legal { color: var(--grey); width: 100%; }

@media (max-width: 62rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card.next { grid-column: span 2; }
  .principles { grid-template-columns: 1fr; gap: 1.75rem; }
  .register { grid-template-columns: repeat(2, 1fr); }
  .register li:nth-child(3) { border-inline-start: 0; }
  .register li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (max-width: 56rem) {
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .hero-logo { order: -1; width: min(100%, 26rem); margin: -12% auto 0; }
}
@media (max-width: 46rem) {
  .top nav a:not(.out):not(:first-child) { display: none; }
  .feature { grid-template-columns: 1fr; }
  .feature-art { order: -1; }
  .feature-art img, .feature.lomi .feature-art img { width: min(60%, 14rem); }
  .cards, .repos { grid-template-columns: 1fr; }
  .card.next { grid-column: auto; }
  .log li { grid-template-columns: 1fr; gap: 0.3rem; }
}
@media (max-width: 30rem) {
  .register { grid-template-columns: 1fr; }
  .register li + li { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}