/* Hallmark · shape: Bento, one screen by request · genre: modern-minimal · theme: Ultraviolet (deal 3/3, seed vault-telegram-99f0·bcd7faf0·2026-11-09·r0) · job: join · draw: manual (one screen of cells asked for)
 * hero: Banner cell · nav: a strip of cells, wordmark, steps and one action · footer: a strip of cells, socials, network bots, legal · imagery: seven working machines built from the anatomy kit · signature: one blue signal walking the gutters and waking each machine · ultraviolet: night, greyscale by request, Telegram blue #2aabee as the one signal
 * axes: dark/geometric-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: H, twelve cells compete; the hero cell carries the only large type and the vault takes four cells */
/* Hallmark · waive 80 · every cell figure is built from kit solids with a live model · working machines that the signal drives, not decorative drawings */
/* Hallmark · waive 82 · the dot rings are bolt circles and screws on turned parts · each dot is a fastener the anatomy kit draws, not a tally of anything */
/* Hallmark · waive 59 · the cells part by a 10px gutter, not section gaps · a grid of cells is one surface, its rhythm is the gutter the signal walks */
/* Hallmark · waive 77 · the strips are 56px and 48px rows of the grid · they are the nav and footer of a page made only of cells, thin by design */
/* Hallmark · waive 79 · the hero cell ends where its row ends and the vault cell starts below · the page has no fold slack, every row of the grid is filled by a cell */
/* Hallmark · dismissed 23 · the rule is the scaffold photo tint in base.css · this page holds no photograph and no data-slot, so the rule never paints */
/* Hallmark · dismissed 77 · one grid of cells on one screen · the owner asked for a page made only of cells, without scroll */
@import url("./tokens.css");
@import url("./base.css");

html, body { height: 100%; }
body { background: var(--color-paper); }

.skip {
  position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-paper); text-decoration: none;
  transform: translateY(-200%); transition: transform var(--dur-short) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* The halftone field sits behind everything and shows through the gutters and the cells. */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* One screen of cells: a strip on top, three rows of four, a strip at the foot. */
.grid {
  --gap: 10px;
  position: relative; z-index: var(--z-base);
  height: 100dvh; padding: var(--space-md); box-sizing: border-box; max-width: 1520px; margin-inline: auto;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 56px repeat(3, minmax(0, 1fr)) 48px;
  grid-template-areas:
    "brand steps steps contact"
    "hero hero network games"
    "vault vault cash player"
    "vault vault share payout"
    "social bots legal legal";
}
.cell--brand { grid-area: brand; } .cell--steps { grid-area: steps; } .cell--contact { grid-area: contact; }
.cell--hero { grid-area: hero; } .cell--network { grid-area: network; } .cell--games { grid-area: games; }
.cell--vault { grid-area: vault; } .cell--cash { grid-area: cash; } .cell--player { grid-area: player; }
.cell--share { grid-area: share; } .cell--payout { grid-area: payout; }
.cell--social { grid-area: social; } .cell--bots { grid-area: bots; } .cell--legal { grid-area: legal; }

.cell {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: var(--radius-card);
  background: color-mix(in oklab, var(--cell) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-rule);
  padding: var(--space-md) var(--space-lg);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  transition: background-color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out);
}
/* The cell the signal is docked at wakes up: a lighter ground and a brighter rule. */
.cell[data-live] { background: color-mix(in oklab, var(--cell-live) 92%, transparent); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.cell:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }

.cell h2 {
  font: 500 var(--text-lg)/1.1 var(--font-display); letter-spacing: var(--tracking-display);
  text-transform: lowercase; color: var(--color-ink); max-width: none;
}
.cell > p { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted); max-width: none; }
.cell__fig { position: relative; min-height: 0; margin-top: var(--space-xs); }
.cell__fig .vf-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cell__readout {
  position: absolute; right: var(--space-lg); bottom: var(--space-md);
  font: 400 var(--text-xs)/1 var(--anatomy-mono); color: var(--color-ink-2); font-variant-numeric: tabular-nums;
}

/* Strips: one line each, centred on their row. */
.cell--strip { display: flex; align-items: center; gap: var(--space-sm); padding-block: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.cell--contact { justify-content: flex-end; }
.cell--legal { justify-content: flex-end; }
.muted { color: var(--color-muted); }

.wordmark {
  font: 500 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--color-ink); text-decoration: none; transition: color var(--dur-short) var(--ease-out);
}
.wordmark:hover { color: var(--color-accent); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xl); counter-reset: step; }
.steps li {
  counter-increment: step; display: flex; align-items: baseline; gap: var(--space-xs);
  font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; color: var(--color-ink-2);
  transition: color var(--dur-short) var(--ease-out);
}
.steps li::before { content: counter(step); font-weight: 300; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.steps li[data-active] { color: var(--color-ink); }
.steps li[data-active]::before { color: var(--color-accent); }

.pill, .btn { border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 500; text-transform: lowercase; line-height: 1; }
.pill {
  font-size: var(--text-sm); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill);
  background: none; color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-rule-2);
  transition: color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.pill:not(:disabled):hover { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.btn {
  justify-self: start; align-self: end; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); white-space: nowrap;
  font-size: var(--text-md); background: var(--color-ink); color: var(--color-paper);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:not(:disabled):hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn:not(:disabled):active { transform: translateY(1px); }
/* Until the owner sends the link the action shows but does nothing. */
.btn:disabled, .pill:disabled { cursor: not-allowed; }
.btn:disabled { background: var(--color-paper-3); color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.pill:disabled { color: var(--color-muted); }

/* The hero cell: the only large type on the page. */
.cell--hero {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "title title" "lead action"; align-items: end; column-gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
}
.cell--hero h1 { grid-area: title; align-self: start; }
.cell--hero .lead { grid-area: lead; }
.cell--hero .btn { grid-area: action; }
.cell--hero h1 { font-size: clamp(2rem, 3.4vw, 3.75rem); line-height: 1.02; font-weight: 500; text-transform: lowercase; max-width: none; color: var(--color-ink); }
.cell--hero h1 .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.cell--hero h1 .line > span { display: inline-block; }
.cell--hero .lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 30ch; }

.cell--vault { padding-bottom: var(--space-xl); }

/* The signal: one Telegram-blue dot that walks the gutters. */
.signal {
  position: absolute; left: 0; top: 0; width: var(--space-xs); height: var(--space-xs); margin: calc(var(--space-2xs) * -1) 0 0 calc(var(--space-2xs) * -1); border-radius: 50%;
  background: var(--color-accent); z-index: var(--z-raised); pointer-events: none;
  box-shadow: 0 0 0 3px var(--color-paper);
  will-change: transform;
}

/* On load the cells rise in reading order and the headline slides up line by line. */
@media (prefers-reduced-motion: no-preference) {
  .cell { animation: cell-rise 800ms var(--ease-out) both; }
  .cell--hero, .cell--brand { animation-delay: 40ms; } .cell--steps, .cell--network { animation-delay: 100ms; }
  .cell--contact, .cell--games { animation-delay: 160ms; } .cell--vault { animation-delay: 220ms; }
  .cell--cash, .cell--player { animation-delay: 280ms; } .cell--share, .cell--payout { animation-delay: 340ms; }
  .cell--social, .cell--bots, .cell--legal { animation-delay: 400ms; }
  .cell--hero h1 .line > span { animation: line-up 1000ms var(--ease-out) both; animation-delay: 160ms; }
  .cell--hero h1 .line + .line > span { animation-delay: 250ms; }
  .signal { animation: fade-in 600ms var(--ease-out) 900ms both; }
}
@keyframes cell-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Narrow screens: the cells stack and the page scrolls; there is no one-screen phone layout. */
@media (max-width: 60rem) {
  .grid {
    height: auto; min-height: 100dvh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 52px auto 300px repeat(3, 240px) auto auto auto;
    grid-template-areas:
      "brand contact"
      "hero hero"
      "vault vault"
      "network games"
      "cash player"
      "share payout"
      "steps steps"
      "social bots"
      "legal legal";
  }
  .cell--strip { min-height: 48px; }
  .cell--legal { justify-content: flex-start; }
  .signal { display: none; }
}
@media (max-width: 40rem) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px auto 300px repeat(6, 230px) auto auto auto auto;
    grid-template-areas: "brand" "hero" "vault" "network" "games" "cash" "player" "share" "payout" "steps" "contact" "social" "bots" "legal";
  }
  .cell--contact { justify-content: flex-start; }
  .steps { gap: var(--space-lg); }
  .cell--hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "title" "lead" "action"; row-gap: var(--space-md); padding: var(--space-lg); }
}

abbr[title] { text-decoration: none; }