/* ==========================================================================
   Studio site — "Void"
   Black stage, hairlines, depth. One tiny accent: the dot in the wordmark.
   ========================================================================== */

@font-face {
  font-family: "Studio Display";
  src: url("/assets/fonts/InterDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Studio Text";
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Studio Text";
  src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

:root {
  color-scheme: dark;

  --bg: #000;
  --s1: #050505;
  --s2: #0b0b0b;
  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.15);
  --line-3: rgba(255, 255, 255, 0.3);
  --fg: #f0f0ed;
  --fg-2: #a8a8a4;
  --fg-3: #82827e;

  /* The one accent: the cherry dot (wordmark, mark, favicon). */
  --accent: #a3122f;

  /* Light that follows the mouse: spotlight, tile rim, light inside a tile. */
  --spot-1: rgba(255, 255, 255, 0.055);
  --spot-2: rgba(255, 255, 255, 0.018);
  --rim-1: rgba(255, 255, 255, 0.75);
  --rim-2: rgba(255, 255, 255, 0.12);
  --glow: rgba(255, 255, 255, 0.075);

  --gutter: clamp(16px, 4.45vw, 64px);
  --max: 1312px;

  --f-sys: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-display: "Studio Display", "Studio Text", var(--f-sys);
  --f-text: "Studio Text", var(--f-sys);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --snap: cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* Standard-density (1x) screens render faint gradients and hairlines weaker
   than Retina ones: lift the light a little there, and only there. */
@media (max-resolution: 1.49dppx) {
  :root {
    --spot-1: rgba(255, 255, 255, 0.072);
    --spot-2: rgba(255, 255, 255, 0.026);
    --rim-1: rgba(255, 255, 255, 0.95);
    --rim-2: rgba(255, 255, 255, 0.2);
    --glow: rgba(255, 255, 255, 0.095);
  }
}

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

/* `hidden` always wins, even over a component's own display (e.g. the
   "In the lab" count, which site.js hides at zero). */
[hidden] { display: none !important; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 var(--f-text);
  font-feature-settings: "calt", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol, dl, dd { margin: 0; padding: 0; }

::selection { background: var(--fg); color: #000; }

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 4px;
  border-radius: 2px;
}

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

.skip {
  position: absolute; left: var(--gutter); top: 12px; z-index: 50;
  padding: 10px 14px; background: var(--fg); color: #000;
  font: 500 13px/1 var(--f-text); text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}
.skip:focus { transform: none; }

/* Tiny uppercase label — the house voice for metadata */
.label {
  font: 500 10.5px/1.2 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-feature-settings: "case", "tnum";
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Layers: ghost (behind everything) → spotlight → content
   -------------------------------------------------------------------------- */

.ghost {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ghost__img {
  position: absolute;
  inset: -8%;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.7s var(--ease-out), transform 1.8s var(--ease-out);
  will-change: opacity, transform;
  /* The edges always melt into the black, whatever part of the image is shown. */
  -webkit-mask-image: radial-gradient(closest-side, #000 48%, rgba(0, 0, 0, 0.55) 76%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 48%, rgba(0, 0, 0, 0.55) 76%, transparent 100%);
}
/* Portrait screens: the pool of light sits higher, behind the wordmark and the
   top of the first tile, where the page is not covered by tiles. */
@media (max-aspect-ratio: 1/1) {
  .ghost__img {
    -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 40%, #000 44%, rgba(0, 0, 0, 0.55) 76%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 46% at 50% 40%, #000 44%, rgba(0, 0, 0, 0.55) 76%, transparent 100%);
  }
}
/* Wide image on landscape screens, tall one on portrait: each keeps its own
   proportions and is cropped to fill, never stretched. */
.ghost__img img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Summoned: a quick bloom… */
.ghost__img.is-on {
  opacity: 0.62;
  transform: scale(1);
}
/* …that settles to a faint presence a moment later. */
.ghost__img.is-on.is-settled {
  opacity: 0.36;
  transition: opacity 1.6s var(--ease-io), transform 1.8s var(--ease-out);
}
/* Touch screens only get the glimpse for a moment, so it is a little brighter,
   and it leaves slowly. */
@media not all and (hover: hover) and (pointer: fine) {
  .ghost__img { transition: opacity 1.4s var(--ease-io), transform 1.8s var(--ease-out); }
  .ghost__img.is-on { opacity: 0.8; }
  .ghost__img.is-on.is-settled { opacity: 0.56; }
}

.spot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 1100px;
  height: 1100px;
  margin: -550px 0 0 -550px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--spot-1), var(--spot-2) 45%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
  will-change: transform;
}
html.pointer-in .spot { opacity: 1; }

.bar, main, .foot { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A little tighter on short screens, so the home page fits in one */
  padding-top: max(clamp(10px, 2.45svh, 22px), env(safe-area-inset-top));
  padding-bottom: 22px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 500 14px/1 var(--f-text);
  letter-spacing: 0.01em;
  color: var(--fg);
  text-decoration: none;
}
.mark__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.5s var(--snap);
}
.mark:focus-visible .mark__dot { transform: scale(1.6); }
/* On the home page the big wordmark is right below; phones keep the small one. */
@media (min-width: 721px) {
  .home .mark { visibility: hidden; }
}

.nav { display: flex; gap: 6px; margin-right: -12px; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  color: var(--fg-2);
  transition: color 0.3s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 11px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.nav a:focus-visible,
.nav a[aria-current] { color: var(--fg); }
.nav a:focus-visible::after,
.nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   Home — hero
   -------------------------------------------------------------------------- */

/* The space above and below follows the height of the screen */
.home .bar { padding-bottom: 0; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 24px 48px;
  padding-top: clamp(16px, 6.5svh, 86px);
  padding-bottom: clamp(16px, 5svh, 72px);
}

/* Sized by the width and, on short screens, by the height too */
.wordmark {
  font: 300 clamp(min(4.1rem, 10svh), min(11vw, 17.5svh), 10rem)/0.84 var(--f-display);
  letter-spacing: -0.052em;
  margin-left: -0.055em;
  color: var(--fg);
  white-space: nowrap;
}
.wordmark__dot {
  display: inline-block;
  width: 0.085em;
  height: 0.085em;
  margin-left: 0.07em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: baseline;
}

.hero__line {
  margin-top: clamp(12px, min(2.4vw, 3.3svh), 30px);
  max-width: 36ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Home — the grid of square tiles
   -------------------------------------------------------------------------- */

/* One screen: bar, hero, tiles, footer. The tiles get the room that is left
   and are measured against it (cqw, cqh): square while it allows, shorter
   when the screen is short. Below the min-height the page scrolls instead. */
.home main { flex: 1 0 auto; display: flex; flex-direction: column; }
.apps {
  flex: 1 1 0;
  min-height: 240px;
  container-type: size;
  padding-bottom: clamp(20px, 5svh, 96px);
}

.grid {
  --gap: clamp(12px, 1.7vw, 24px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  perspective: 1600px;
}

.slot { transform-style: preserve-3d; pointer-events: none; }
.slot > * { pointer-events: auto; }
html.motion .slot { will-change: transform; }

.tile {
  --pad: 7.2cqi;
  --tick: 10px;
  position: relative;
  /* A third of the width (square), or all the height there is if less */
  height: min((100cqw - 2 * var(--gap)) / 3, 100cqh);
  /* Top row, picture, words: the picture takes what the other two leave */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "art" "foot";
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 85% at 50% -12%, rgba(255, 255, 255, 0.05), transparent 58%),
    var(--s1);
  color: var(--fg);
  text-decoration: none;
  transition:
    border-color 0.5s var(--ease-out),
    transform 0.7s var(--ease-out);
}
html.motion .tile { transition: border-color 0.5s var(--ease-out); will-change: transform; }

/* Lab tiles are placeholders: nothing to click, nothing to focus. */
.tile--lab {
  cursor: default;
  background:
    radial-gradient(120% 85% at 50% -12%, rgba(255, 255, 255, 0.025), transparent 58%),
    #030303;
}

/* Active = keyboard focus, or lit by site.js (mouse hover, or "in view" on
   touch screens). Plain :hover is added below, for mouse and trackpad only. */
.tile:focus-visible,
.tile.is-active { border-color: var(--line-2); }

.tile:focus-visible { outline: none; border-color: var(--line-3); }

/* The others step back: their picture and frame fade, their words stay legible */
.tile__top, .tile__foot, .tile__go, .tile__art {
  transition: opacity 0.6s var(--ease-out);
}
.grid.is-focused .tile:not(.is-active) { border-color: rgba(255, 255, 255, 0.045); }
.grid.is-focused .tile:not(.is-active) .tile__art { opacity: 0.22; }
.grid.is-focused .tile:not(.is-active) .tile__stars { opacity: 0.08; }
.grid.is-focused .tile:not(.is-active) .tile__top,
.grid.is-focused .tile:not(.is-active) .tile__foot,
.grid.is-focused .tile:not(.is-active) .tile__go { opacity: 0.7; }
html:not(.motion) .grid.is-focused .tile:not(.is-active) { transform: scale(0.97); }
html:not(.motion) .tile.is-active { transform: scale(1.012); }

/* Cursor-following rim light (hairline border that catches the light) */
.tile__rim {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.tile__rim i,
.tile__light {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
}
.tile__rim i {
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  background: radial-gradient(closest-side, var(--rim-1), var(--rim-2) 55%, transparent);
}
html.pointer-in .grid .tile__rim { opacity: 1; }

/* Soft light inside the active tile */
.tile__light {
  z-index: 0;
  width: 120cqi;
  height: 120cqi;
  margin: -60cqi 0 0 -60cqi;
  background: radial-gradient(closest-side, var(--glow), transparent);
  opacity: 0;
  transform: translate3d(50cqi, 30cqi, 0);
  transition: opacity 0.6s var(--ease-out);
}
.tile:focus-visible .tile__light,
.tile.is-active .tile__light { opacity: 1; }

/* Registration ticks in the corners — slide in when active */
.tile__ticks i {
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  border: 0 solid var(--fg);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), transform 0.55s var(--ease-out);
}
.tile__ticks i:nth-child(1) { left: var(--tick); top: var(--tick); border-width: 1px 0 0 1px; transform: translate(-7px, -7px); }
.tile__ticks i:nth-child(2) { right: var(--tick); top: var(--tick); border-width: 1px 1px 0 0; transform: translate(7px, -7px); }
.tile__ticks i:nth-child(3) { left: var(--tick); bottom: var(--tick); border-width: 0 0 1px 1px; transform: translate(-7px, 7px); }
.tile__ticks i:nth-child(4) { right: var(--tick); bottom: var(--tick); border-width: 0 1px 1px 0; transform: translate(7px, 7px); }
.tile:focus-visible .tile__ticks i,
.tile.is-active .tile__ticks i { opacity: 0.7; transform: none; }

/* Top row of tiny labels */
.tile__top {
  grid-area: top;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: var(--pad) var(--pad) 0;
}
.tile__top .label { transition: color 0.4s; }
.tile:focus-visible .tile__top .label,
.tile.is-active .tile__top .label { color: var(--fg-2); }

/* Centre art: sized by the tile's width (cqi), and by the room between the
   top row and the words (cqh) when the tile is shorter than it is wide */
.tile__art {
  grid-area: art;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  container-type: size;
}
.tile__parallax { display: grid; place-items: center; }
.tile__parallax > * { grid-area: 1 / 1; }

.tile__icon {
  position: relative;
  width: min(30cqi, 56cqh);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 24px 60px -18px rgba(0, 0, 0, 0.95);
  transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out);
}
.tile__icon img { width: 100%; height: 100%; }
.tile:focus-visible .tile__icon,
.tile.is-active .tile__icon {
  transform: translateY(-1.4cqi) scale(1.045);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 9cqi rgba(255, 255, 255, 0.08),
    0 34px 70px -18px rgba(0, 0, 0, 1);
}

/* A hairline orbit with a tiny moon — turns slowly while active */
.orbit {
  width: min(46cqi, 86cqh);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.6;
  transform: scale(0.86);
  transition: opacity 0.8s var(--ease-out), transform 1.1s var(--ease-out), border-color 0.8s;
}
.orbit i {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
}
.orbit i::before {
  content: "";
  position: absolute;
  left: 50%; top: -2px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0;
  transition: opacity 0.6s;
}
.tile:focus-visible .orbit,
.tile.is-active .orbit {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.11);
}
.tile:focus-visible .orbit i,
.tile.is-active .orbit i { animation: orbit 14s linear infinite; }
.tile:focus-visible .orbit i::before,
.tile.is-active .orbit i::before { opacity: 0.9; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* Star dust inside the app tile (parallax layer) */
.tile__stars {
  position: absolute;
  z-index: 0;
  inset: -6%;
  opacity: 0.25;
  transition: opacity 0.9s var(--ease-out);
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.9) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 27% 71%, rgba(255,255,255,.6) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 36% 12%, rgba(255,255,255,.5) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 81% 18%, rgba(255,255,255,.8) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 88% 47%, rgba(255,255,255,.5) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 70% 82%, rgba(255,255,255,.7) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 18% 49%, rgba(255,255,255,.45) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 57% 9%, rgba(255,255,255,.55) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 93% 75%, rgba(255,255,255,.4) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 46% 91%, rgba(255,255,255,.5) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 7% 87%, rgba(255,255,255,.6) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 63% 33%, rgba(255,255,255,.35) 0 0.6px, transparent 1.2px);
}
.tile:focus-visible .tile__stars,
.tile.is-active .tile__stars { opacity: 0.85; }

/* Bottom: name, line, status */
.tile__foot {
  grid-area: foot;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.6cqi;
  padding: 0 calc(var(--pad) + 14cqi) var(--pad) var(--pad);
}
.tile__name {
  font: 300 clamp(20px, 7.2cqi, 34px)/1 var(--f-display);
  letter-spacing: -0.025em;
}
.tile__desc {
  font-size: clamp(12.5px, 3.5cqi, 15px);
  line-height: 1.4;
  color: var(--fg-2);
}
.tile--lab .tile__name { color: var(--fg-2); }
.tile--lab .tile__desc { color: var(--fg-3); }
/* Platforms line and the "Open" word: phones only (see Responsive) */
.tile__plat,
.tile__go-txt { display: none; }

/* Arrow button in the corner */
.tile__go {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: var(--pad);
  display: grid;
  place-items: center;
  width: clamp(32px, 10.5cqi, 44px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  transition: opacity 0.6s var(--ease-out), background-color 0.45s var(--ease-out), border-color 0.45s, color 0.45s;
}
.tile__go svg {
  width: 42%;
  height: 42%;
  transition: transform 0.55s var(--ease-out);
}
.tile:focus-visible .tile__go,
.tile.is-active .tile__go {
  background: var(--fg);
  border-color: var(--fg);
  color: #000;
}
.tile:focus-visible .tile__go svg,
.tile.is-active .tile__go svg { transform: rotate(-45deg); }

/* Live status dot */
.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* Lab glyph 02 — a viewfinder that locks on */
.finder {
  position: relative;
  width: min(24cqi, 52cqh);
  aspect-ratio: 1;
  opacity: 0.55;
  transition: opacity 0.6s;
}
.finder i {
  position: absolute;
  width: 26%;
  height: 26%;
  border: 0 solid var(--fg);
  transition: transform 0.6s var(--snap);
}
.finder i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.finder i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.finder i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.finder i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.finder b {
  position: absolute;
  left: 50%; top: 50%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(0.35);
  transition: transform 0.7s var(--ease-out), border-color 0.5s;
}
.finder em {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  font: 500 9.5px/1 var(--f-text);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-2);
  font-feature-settings: "tnum";
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s 0.15s, transform 0.5s 0.15s var(--ease-out);
}
.tile.is-active .finder { opacity: 1; }
.tile.is-active .finder i:nth-child(1) { transform: translate(18%, 18%); }
.tile.is-active .finder i:nth-child(2) { transform: translate(-18%, 18%); }
.tile.is-active .finder i:nth-child(3) { transform: translate(18%, -18%); }
.tile.is-active .finder i:nth-child(4) { transform: translate(-18%, -18%); }
.tile.is-active .finder b { transform: translate(-50%, -50%) scale(1); border-color: rgba(255, 255, 255, 0.8); }
.tile.is-active .finder em { opacity: 1; transform: none; }

/* Lab glyph 03 — a seed, still sleeping */
.seed {
  position: relative;
  width: min(11cqi, 24cqh);
  aspect-ratio: 1;
  border-radius: 0 100%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transform: rotate(45deg);
  opacity: 0.55;
  transition: opacity 0.6s, transform 1.1s var(--ease-out);
}
.seed::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s, transform 0.7s var(--snap);
}
.seed::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
}
.tile.is-active .seed { opacity: 1; transform: rotate(63deg); }
.tile.is-active .seed::before { opacity: 0.9; transform: none; }
.tile.is-active .seed::after { animation: ripple 2.4s var(--ease-out) infinite; }
@keyframes ripple {
  0% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.2); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot { margin-top: auto; }
.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: clamp(12px, 2.45svh, 22px);
  padding-bottom: max(clamp(14px, 2.9svh, 26px), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.foot__links span { color: rgba(255, 255, 255, 0.22); }
.foot a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; transition: color 0.3s; }
.foot a:focus-visible,
.foot a[aria-current] { color: var(--fg-2); }

/* --------------------------------------------------------------------------
   Shared page furniture
   -------------------------------------------------------------------------- */

.page-head {
  padding-top: clamp(28px, 8vh, 96px);
  padding-bottom: clamp(36px, 7vh, 80px);
}
.page-head > .label:first-child { display: block; margin-bottom: 22px; }
.page-head .doc-date { margin-top: 26px; }
.page-head--split {
  display: grid;
  grid-template-columns: minmax(140px, 3fr) 9fr;
  gap: 16px 32px;
  align-items: start;
}
.page-head--split > .label:first-child { margin: 0; padding-top: 14px; }
.page-head--split .display { max-width: 18ch; }

/* Breadcrumb: albaloo / Asemoon / Privacy */
.crumbs { margin-bottom: 26px; }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--fg-3);
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: "/";
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.24);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--fg-2);
  text-decoration: none;
  transition: color 0.25s;
}
.crumbs a:focus-visible { color: var(--fg); }
.crumbs [aria-current] { color: var(--fg); }

.display {
  font: 300 clamp(2.4rem, 5.2vw, 4.6rem)/1 var(--f-display);
  letter-spacing: -0.04em;
  max-width: 17ch;
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font: 500 14px/1 var(--f-text);
  letter-spacing: 0.005em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-out), color 0.35s, border-color 0.35s;
}
.btn svg { width: 14px; height: 14px; transition: transform 0.45s var(--ease-out); }
.btn--primary { background: var(--fg); border-color: var(--fg); color: #000; }
.btn--primary:focus-visible { background: #fff; }
.btn--primary:focus-visible svg { transform: translate(2px, -2px); }
.btn--ghost:focus-visible { border-color: var(--line-3); }

.badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--fg-2);
  cursor: default;
  white-space: nowrap;
}
.badge b { font: 500 13px/1 var(--f-text); color: var(--fg); }
.badge span { font: 500 9.5px/1 var(--f-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }

/* Placeholders the owner fills in — deliberately obvious */
.ph {
  display: inline;
  padding: 0.05em 0.35em;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
  font-style: normal;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ph--wrap { white-space: normal; }
a.ph { text-decoration: none; }
.draft-note {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  max-width: 62ch;
  font-size: 14px;
  color: var(--fg-2);
}
.draft-note .label { flex: none; color: var(--fg); margin: 0; }

/* Text links inside prose */
.prose a,
.link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.3s;
}
.prose a:focus-visible,
.link:focus-visible { text-decoration-color: var(--fg); }
.prose a.ph { text-decoration: none; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.rows { border-top: 1px solid var(--line); margin-bottom: clamp(56px, 10vh, 120px); }
.row {
  display: grid;
  grid-template-columns: minmax(140px, 3fr) 9fr;
  gap: 16px 32px;
  padding: clamp(28px, 4.5vh, 44px) 0;
  border-bottom: 1px solid var(--line);
}
.row > .label { padding-top: 7px; }
.row__body { display: grid; gap: 16px; max-width: 62ch; }
.row__body p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--fg-2); text-wrap: pretty; }
.row__body p strong { color: var(--fg); font-weight: 400; }
.row__body .row__name { font: 300 clamp(1.9rem, 3vw, 2.6rem)/1.15 var(--f-display); letter-spacing: -0.03em; color: var(--fg); }
.row__body p.label { font-size: 10.5px; line-height: 1.6; color: var(--fg-3); }

/* Principles: three short promises, side by side */
.principles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px clamp(20px, 2.6vw, 40px);
  padding-top: 5px;
}
.principles li { display: grid; align-content: start; gap: 12px; }
.principles h3 {
  font: 300 clamp(1.3rem, 1.9vw, 1.6rem)/1.15 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.principles p { font-size: 15px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }

.contact { list-style: none; display: grid; }
.contact li {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.contact li:first-child { padding-top: 4px; }
.contact li:last-child { border-bottom: 0; }
.contact a { justify-self: start; font-size: 17px; overflow-wrap: anywhere; }
.contact a:not(.ph) {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.3s;
}
.contact a svg {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  color: var(--fg-3);
  vertical-align: 0.06em;
  transition: transform 0.45s var(--ease-out), color 0.3s;
}

.app-list { list-style: none; display: grid; }
.app-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  text-decoration: none;
}
.app-list img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.app-list b { display: block; font-weight: 400; color: var(--fg); }
.app-list span { display: block; font-size: 14px; color: var(--fg-2); }
.app-list svg { width: 14px; height: 14px; margin-left: auto; color: var(--fg-2); transition: transform 0.45s var(--ease-out), color 0.3s; }
.app-list a:focus-visible svg { transform: translateX(4px); color: var(--fg); }

/* --------------------------------------------------------------------------
   App page (Asemoon)
   -------------------------------------------------------------------------- */

/* The ghost sits behind the title, in its own soft-edged pool that fades out
   long before it reaches the facts or the bottom of its box. */
.app .ghost {
  position: absolute;
  height: 120vh;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 34%, rgba(0, 0, 0, 0.5) 58%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0, #000 34%, rgba(0, 0, 0, 0.5) 58%, transparent 86%);
}
.app .ghost__img {
  inset: -24% 18% 12% -14%;
  opacity: 0.4;
  transform: none;
  transition: none;
  will-change: auto;
}

.crumb { padding-top: clamp(4px, 2vh, 20px); }
.crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  text-decoration: none;
  color: var(--fg-3);
  transition: color 0.3s;
}
.crumb a:focus-visible { color: var(--fg); }

.app-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 48px;
  align-items: end;
  padding-top: clamp(16px, 4.5vh, 60px);
  padding-bottom: clamp(40px, 7vh, 80px);
}
.app-id { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(22px, 3.5vh, 36px); }
.app-id img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 30px -8px #000; }
.app-title {
  font: 300 clamp(3.4rem, 9vw, 8.4rem)/0.86 var(--f-display);
  letter-spacing: -0.05em;
  margin-left: -0.05em;
}
.app-tagline {
  margin-top: clamp(16px, 2.2vw, 26px);
  font: 300 clamp(1.35rem, 2.3vw, 2rem)/1.2 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.app-lede {
  margin-top: 18px;
  max-width: 48ch;
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 4vh, 40px); }

/* Facts: a quiet table on its own dark ground, so nothing shows through it */
.facts {
  position: relative;
  display: grid;
  gap: 0;
  align-self: end;
  border-top: 1px solid var(--line);
}
.facts::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -56px -64px -48px -64px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.8) 62%, transparent);
  pointer-events: none;
}
.facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.facts dd { font-size: 14px; color: var(--fg); text-align: right; }

/* Screens: four phones floating at different depths */
.shots {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 32px);
  padding-top: clamp(8px, 3vh, 32px);
  padding-bottom: clamp(56px, 10vh, 120px);
  perspective: 1600px;
}
.shot { transform-style: preserve-3d; }
.shot figure { margin: 0; }
.shot:nth-child(2) { margin-top: 56px; }
.shot:nth-child(3) { margin-top: 18px; }
.shot:nth-child(4) { margin-top: 74px; }
html.motion .shot { will-change: transform; }
.shot__frame {
  position: relative;
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  background: var(--s2);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.11),
    0 40px 80px -30px rgba(0, 0, 0, 1);
  transition: box-shadow 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.shot__frame img { width: 100%; height: auto; aspect-ratio: 600 / 1022; object-fit: cover; }
.shot figcaption { margin-top: 16px; display: flex; gap: 10px; }
.shot figcaption .label:first-child { color: var(--fg-2); }
.shots.is-focused .shot:not(.is-active) .shot__frame { opacity: 0.45; }
.shot.is-active .shot__frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 50px 90px -30px #000; }

.features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: clamp(56px, 10vh, 120px);
}
.features li {
  padding: clamp(22px, 2.6vw, 36px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  align-content: start;
  gap: 12px;
  transition: background-color 0.5s var(--ease-out);
}
.features h3 { font: 400 17px/1.3 var(--f-text); color: var(--fg); }
.features p { font-size: 15px; line-height: 1.6; color: var(--fg-2); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 24px);
  margin-bottom: clamp(56px, 10vh, 120px);
}
.more a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 0.4s, background-color 0.4s;
}
.more a:focus-visible { border-color: var(--line-2); background: rgba(255, 255, 255, 0.02); }
.more b { display: block; font: 300 clamp(1.4rem, 2vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -0.02em; }
.more span { display: block; margin-top: 6px; font-size: 14px; color: var(--fg-2); }
.more svg { flex: none; width: 16px; height: 16px; color: var(--fg-2); transition: transform 0.45s var(--ease-out), color 0.3s; }
.more a:focus-visible svg { transform: translateX(4px); color: var(--fg); }

/* --------------------------------------------------------------------------
   Long text (privacy, support, imprint)
   -------------------------------------------------------------------------- */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 32px;
  padding-bottom: clamp(56px, 10vh, 120px);
  border-top: 1px solid var(--line);
  padding-top: clamp(32px, 5vh, 56px);
}
.toc { position: sticky; top: 28px; align-self: start; }
.toc ol { list-style: none; display: grid; gap: 2px; margin-top: 16px; }
.toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--fg-3);
  text-decoration: none;
  transition: color 0.25s;
}
.toc a:focus-visible { color: var(--fg); }

/* Section numbers: 01, 02 … in the label voice, in the list and the headings */
.num {
  flex: none;
  font: 500 10.5px/1 var(--f-text);
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  color: var(--fg-3);
}
.toc .num { min-width: 2.2em; }

.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 2.6em;
  padding-top: 0.2em;
  font: 300 clamp(1.45rem, 2vw, 1.75rem)/1.2 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--fg);
  scroll-margin-top: 24px;
}
.prose h2 .num { min-width: 2.4em; font-size: 11px; }
.prose h2:first-child { margin-top: 0; }
.prose .lead + h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.8em; font: 500 16px/1.4 var(--f-text); color: var(--fg); }
.prose p, .prose li { font-size: 16.5px; line-height: 1.72; color: var(--fg-2); text-wrap: pretty; }
.prose ul { padding-left: 1.1em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--fg-3); }
.prose strong { font-weight: 500; color: var(--fg); }
.prose .lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--fg); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1px solid var(--fg-2);
  border-bottom: 1px solid var(--fg-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.35s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details > div { padding: 0 0 22px; display: grid; gap: 0.8em; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.nf {
  position: relative;
  flex: 1;
  display: grid;
  align-content: center;
  min-height: 62vh;
  padding-top: 40px;
  padding-bottom: 64px;
}
.nf__num {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font: 300 clamp(9rem, 34vw, 30rem)/0.8 var(--f-display);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  user-select: none;
  pointer-events: none;
}
.nf > .label { margin-bottom: 22px; }
.nf > p:not(.label) { margin-top: 22px; max-width: 40ch; color: var(--fg-2); }
.nf .btn { margin-top: 32px; justify-self: start; }

/* --------------------------------------------------------------------------
   Mouse and trackpad only: every hover effect lives here, so a tap on a
   touch screen never leaves anything stuck "hovered".
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .mark:hover .mark__dot { transform: scale(1.6); }

  .nav a:hover { color: var(--fg); }
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }

  .tile:hover { border-color: var(--line-2); }
  .tile:hover .tile__light { opacity: 1; }
  .tile:hover .tile__ticks i { opacity: 0.7; transform: none; }
  .tile:hover .tile__top .label { color: var(--fg-2); }
  .tile:hover .tile__icon {
    transform: translateY(-1.4cqi) scale(1.045);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.2),
      0 0 9cqi rgba(255, 255, 255, 0.08),
      0 34px 70px -18px rgba(0, 0, 0, 1);
  }
  .tile:hover .orbit { opacity: 1; transform: scale(1); border-color: rgba(255, 255, 255, 0.11); }
  .tile:hover .orbit i { animation: orbit 14s linear infinite; }
  .tile:hover .orbit i::before { opacity: 0.9; }
  .tile:hover .tile__stars { opacity: 0.85; }
  .tile:hover .tile__go { background: var(--fg); border-color: var(--fg); color: #000; }
  .tile:hover .tile__go svg { transform: rotate(-45deg); }
  .tile:hover .finder { opacity: 1; }
  .tile:hover .finder i:nth-child(1) { transform: translate(18%, 18%); }
  .tile:hover .finder i:nth-child(2) { transform: translate(-18%, 18%); }
  .tile:hover .finder i:nth-child(3) { transform: translate(18%, -18%); }
  .tile:hover .finder i:nth-child(4) { transform: translate(-18%, -18%); }
  .tile:hover .finder b { transform: translate(-50%, -50%) scale(1); border-color: rgba(255, 255, 255, 0.8); }
  .tile:hover .finder em { opacity: 1; transform: none; }
  .tile:hover .seed { opacity: 1; transform: rotate(63deg); }
  .tile:hover .seed::before { opacity: 0.9; transform: none; }
  .tile:hover .seed::after { animation: ripple 2.4s var(--ease-out) infinite; }

  .foot a:hover { color: var(--fg); }
  .crumbs a:hover, .crumb a:hover { color: var(--fg); }
  .btn--primary:hover { background: #fff; }
  .btn--primary:hover svg { transform: translate(2px, -2px); }
  .btn--ghost:hover { border-color: var(--line-3); }
  .prose a:hover, .link:hover { text-decoration-color: var(--fg); }
  .contact a:not(.ph):hover { text-decoration-color: var(--fg); }
  .contact a:hover svg { transform: translate(2px, -2px); color: var(--fg); }
  .app-list a:hover svg { transform: translateX(4px); color: var(--fg); }
  .features li:hover { background: rgba(255, 255, 255, 0.018); }
  .more a:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.02); }
  .more a:hover svg { transform: translateX(4px); color: var(--fg); }
  .toc a:hover { color: var(--fg); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .nf__num { position: static; transform: none; font-size: 42vw; margin: 0 0 12px -0.04em; }
  .nf { align-content: start; padding-top: 24px; }
  .hero { grid-template-columns: 1fr; }
  .app-hero { grid-template-columns: 1fr; }
  .facts::before { inset: -40px -24px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  /* The app tile across, the lab tiles below it: square while the height
     allows, then about two thirds and one third of the room that is left,
     but never so flat that the words crowd the picture out (a short, wide
     window scrolls instead: the min-height is those floors, in vw). */
  .apps {
    min-height: calc((100vw - 2 * var(--gutter)) * 0.62 + 88px + clamp(12px, 2.6svh, 48px));
    padding-bottom: clamp(12px, 2.6svh, 48px);
  }
  .grid { --gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid .slot:first-child { grid-column: 1 / -1; }
  .tile { height: min((100cqw - var(--gap)) / 2, max((100cqh - var(--gap)) * 0.36, (100cqw - var(--gap)) * 0.2 + 40px)); }
  .grid .slot:first-child .tile { height: min(100cqw, max((100cqh - var(--gap)) * 0.64, 42cqw + 40px)); }
  .tile--lab { --pad: 10cqi; --tick: 6px; }
  .tile--lab .tile__ticks i { width: 8px; height: 8px; }
  .tile--lab .tile__top .label:last-child { display: none; }
  .tile--lab .tile__name { font-size: 17px; }
  .tile--lab .tile__desc { font-size: 12.5px; }
  .tile--lab .tile__foot { padding-right: var(--pad); }
  /* The glyph is centred over the top row too: only "02" is left there */
  .tile--lab .tile__art { grid-row: top / art; }
  .hide-sm { display: none; }
  .finder em { display: none; }

  /* The app tile says where it runs, and shows "Open →" without a hover */
  .tile--app { --pad: 6cqi; }
  .tile--app .tile__foot { padding-right: var(--pad); }
  .tile--app .tile__desc { padding-right: 30cqi; }
  .tile__plat {
    display: block;
    margin-top: 2.6cqi;
    padding-top: 3.4cqi;
    border-top: 1px solid var(--line);
    font-size: 10px;
    color: var(--fg-3);
  }
  .tile--app .tile__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 38px;
    aspect-ratio: auto;
    padding: 0 15px 0 17px;
    border-radius: 999px;
    border-color: var(--line-3);
    color: var(--fg);
    /* sits beside the name and line, above the platforms line */
    bottom: calc(var(--pad) + 12px + 7.6cqi + 1px);
  }
  .tile__go-txt {
    display: inline;
    font: 500 10.5px/1 var(--f-text);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .tile--app .tile__go svg { width: 13px; height: 13px; }
  .tile--app.is-active .tile__go svg,
  .tile--app:focus-visible .tile__go svg { transform: translateX(2px); }

  .row { grid-template-columns: 1fr; gap: 14px; }
  .page-head--split { grid-template-columns: 1fr; }
  .page-head--split > .label:first-child { padding-top: 0; }
  .page-head { padding-top: 24px; padding-bottom: 40px; }
  .hero { padding-top: clamp(8px, 1.6svh, 34px); padding-bottom: clamp(14px, 3.2svh, 36px); }
  .hero__line { margin-top: clamp(10px, 2svh, 18px); }
  .row > .label { padding-top: 0; }
  .principles { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .principles li {
    grid-template-columns: 2.6em 1fr;
    gap: 6px 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .principles li:first-child { padding-top: 4px; }
  .principles li:last-child { border-bottom: 0; padding-bottom: 0; }
  .principles .label { grid-row: span 2; padding-top: 0.55em; }

  /* App page: intro → screens → facts → features */
  .app-main { display: flex; flex-direction: column; }
  .app-hero { display: contents; }
  .crumb { order: 0; padding-top: 0; }
  .app-intro { order: 1; padding: 10px 0 44px; }
  .app-screens { order: 2; }
  .facts { order: 3; align-self: stretch; margin: 0 0 56px; }
  .app-features { order: 4; }
  .more { order: 5; }
  .facts::before { display: none; }

  /* Legal pages: the contents list stays, as a wrapped numbered list */
  .doc { grid-template-columns: 1fr; gap: 8px; padding-top: 24px; }
  .toc { position: static; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
  .toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin-top: 10px;
  }
  .toc a { gap: 7px; padding: 5px 0; font-size: 13.5px; color: var(--fg-2); }
  .toc .num { min-width: 0; }
  .prose { padding-top: 24px; }
  .prose h2 { gap: 12px; }
  .prose h2 .num { min-width: 0; }

  .shots {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    margin: 0 calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-bottom: 56px;
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 62%; scroll-snap-align: start; margin-top: 0 !important; }
  .features { grid-template-columns: 1fr; }
  .more { grid-template-columns: 1fr; }
  .cta .btn--primary { flex: 1 1 100%; }
  .cta .badge { flex: 1 1 0; align-items: center; padding: 0 12px; }

  .foot__in { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 400px) {
  .nav a { padding: 0 10px; }
  .badge { padding: 0 16px; }
}

/* Calm fallback: no parallax, tilt, drift or spotlight; gentle fades only */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .tile, .tile__icon, .orbit, .finder i, .finder b, .seed, .tile__ticks i, .tile__go svg, .ghost__img, .nav a::after {
    transition-property: opacity, border-color, background-color, color, box-shadow !important;
    transition-duration: 0.35s !important;
  }
  .tile, .tile__icon { transform: none !important; }
  .ghost__img { transform: none !important; }
  .spot { display: none; }
}