/* Home only. Everything shared lives in site.css. */

/* ------------------------------------------------------------------ hero -- */

/* The mark is the display element on this page, so nothing else on it is
   allowed to be display sized. The line under it is 24 and lands on eight of
   the twelve columns, which is two lines at 1440 and never three; the lede
   steps in to six columns under it so the measure stays readable instead of
   running the full width of the field. */

.hero { padding: 40px 0 var(--band); }

.hero h1 { margin: 0 0 44px; }

.hero-copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px var(--gap);
}

.hero-line {
  grid-column: 1 / span 8;
  margin: 0;
  font-size: var(--t-24);
  line-height: 1.34;
  color: var(--text);
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* The first thing in the viewport that can be acted on. Two, because there are
   two ways into this product and neither of them is a sign up: look at the
   issue, or watch one being composed. */
.hero-do {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 0;
}

.hero .lede {
  grid-column: 1 / span 6;
  margin: 0;
  font-size: var(--t-13);
  line-height: var(--lead-body);
  max-width: none;
}

/* ----------------------------------------------------------------- strip -- */

/* Six Zomi across the page field, with a dither ground behind them so a tile
   that is still composing reads as a tile and not as a hole.

   The ratio is declared rather than discovered. The six are built by a script,
   and a grid that is nothing until the script runs is a grid that pushes the
   whole page down when it does. Six square cells across make a box six times
   as wide as it is tall, so that is what the box is before anything is in it,
   and the layout shift on load is zero instead of nearly zero. */

.strip-band { padding-bottom: 0; }

.strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  aspect-ratio: 6 / 1;
  gap: 0;
}

/* display: contents so the six fallback images are grid items of the strip
   itself. Wrapped, they would all pile into the first of six columns. The
   browser only renders this block when scripting is off, so with scripting on
   there is nothing here and the live canvases take the same six cells. */
.strip noscript { display: contents; }
.strip noscript img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  image-rendering: pixelated;
}

.zomi-cell {
  position: relative;
  display: block;
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 50% 50%, var(--line-soft) 0 .8px, transparent 1px);
  background-size: 4px 4px;
  overflow: hidden;
  outline-offset: -2px;
}
.zomi-cell canvas {
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  display: block;
  transition: transform var(--t-mid) var(--ease);
}
.zomi-cell:hover canvas { transform: translateY(-2px); }
/* the accent hairline every hoverable thing on this site draws */
.zomi-cell::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.zomi-cell:hover::after,
.zomi-cell:focus-visible::after { transform: scaleX(1); }
.zomi-cell .tag {
  position: absolute;
  left: 0; bottom: 0;
  padding: 7px 11px;
  font-size: var(--t-11);
  letter-spacing: .14em;
  color: var(--text);
  background: rgba(0, 0, 0, .74);
  transition: opacity var(--t-fast) var(--ease);
}
.zomi-cell:hover .tag { opacity: 0; }
.zomi-cell .sheet,
.zomi-card .sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 16px;
  background: rgba(0, 0, 0, .88);
  color: var(--body);
  font-size: var(--t-11);
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.zomi-cell .sheet b,
.zomi-card .sheet b { color: var(--accent); font-weight: 400; font-size: var(--t-13); margin-bottom: 4px; }
.zomi-cell:hover .sheet,
.zomi-cell:focus-visible .sheet,
.zomi-card:hover .sheet,
.zomi-card:focus-visible .sheet { opacity: 1; }

/* the card's sheet covers the art only, not the caption under it */
.zomi-card .sheet { inset: 0 0 auto 0; aspect-ratio: 1; padding: 12px; gap: 1px; }

@media (prefers-reduced-motion: reduce) {
  .zomi-cell .sheet, .zomi-cell canvas, .zomi-cell::after { transition: none; }
}

/* The caption lands on the grid like everything else: eight columns of the
   twelve, which is a readable measure and a line that ends where a line
   above it ends. */
.strip-note {
  position: relative;
  margin-top: 20px;
  padding-left: 22px;
  max-width: none;
  width: calc(8 * var(--col) + 7 * var(--gap));
}
.strip-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

/* ----------------------------------------------------- the bond, pinned -- */

/* The rail holds still while the four stages pass it. position: sticky does
   the holding; home.js only says which stage is in view. */

.pin-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
  margin: 56px 0;
  padding-top: 40px;
  border-top: var(--rule);
}

.pin-rail { position: sticky; top: 104px; }
.pin-rail .eyebrow { margin-bottom: 18px; }

.meter { padding: 18px 20px 20px; border: var(--rule); }
.meter-k {
  margin: 0 0 12px;
  font-size: var(--t-11);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--meta);
}
.meter-track { height: 3px; background: var(--line-soft); overflow: hidden; }
.meter-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.meter-note { margin: 12px 0 0; font-size: var(--t-11); line-height: 1.6; color: var(--meta); min-height: 2.6em; }

.pin-steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.pin-steps li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 12px 11px 0;
  font-size: var(--t-13);
  color: var(--faint);
  transition: color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.pin-steps li b {
  font-weight: 400;
  font-size: var(--t-11);
  letter-spacing: .18em;
  color: var(--faint);
  transition: color var(--t-mid) var(--ease);
}
.pin-steps li[data-done] { color: var(--meta); }
.pin-steps li[data-current] { color: var(--text); transform: translateX(6px); }
.pin-steps li[data-current] b { color: var(--accent); }

/* The foot of the rail. Without it the left column is a meter, four lines and
   five hundred pixels of nothing while the stages pass. */
.pin-foot {
  margin-top: 30px;
  padding-top: 18px;
  border-top: var(--rule-soft);
  font-size: var(--t-11);
  line-height: 1.7;
  color: var(--faint);
}
.pin-foot a { color: var(--meta); }
.pin-foot a:hover { color: var(--accent); }

/* The stages sit on a scanline ground, inset from the column edge, so the bond
   reads as one panel rather than as four more paragraphs on black. The light
   is top left, the same direction the engine rims every shell from. */
.pin-stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0 32px;
  border: var(--rule);
  background-color: var(--panel);
  background-image:
    repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, rgba(53, 224, 161, .05), transparent 58%);
}
.pin-stage {
  padding: 44px 0 48px;
  border-top: var(--rule-soft);
}
.pin-stage:first-child { border-top: 0; padding-top: 0; }
.pin-stage .eyebrow { margin-bottom: 14px; color: var(--accent); }
.pin-stage h3 {
  margin: 0 0 16px;
  font-size: var(--t-18);
  line-height: 1.4;
  color: var(--text);
  max-width: 34ch;
  letter-spacing: -.01em;
}
.pin-stage p { max-width: 62ch; }
.pin-stage { min-width: 0; }

/* ------------------------------------------------------------ band notes -- */

/* A note is an aside on the thing above it, so it is indented to the second
   column and carries a short accent rule instead of floating loose under a
   grid it has nothing to do with. */
.band-note {
  position: relative;
  margin-top: 26px;
  padding-left: 22px;
  font-size: var(--t-11);
  line-height: 1.7;
  color: var(--meta);
  max-width: none;
  width: calc(8 * var(--col) + 7 * var(--gap));
}
.band-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

/* ------------------------------------------------------------- the bond -- */

.ladder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.ladder .rung {
  padding: 26px 26px 30px;
  border-right: var(--rule-soft);
  transition: background var(--t-mid) var(--ease);
}
.ladder .rung:hover { background: var(--panel); }
.ladder .rung:first-child { padding-left: 0; }
.ladder .rung:last-child { border-right: 0; padding-right: 0; }
.ladder .rung .num { margin: 6px 0 2px; }
.ladder .rung .sub { margin-bottom: 12px; }
.ladder .rung p:last-child { color: var(--body); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 34px 48px;
}
.split .num { margin: 8px 0 12px; }

/* The formula sits on a scanline ground: it is the one block on the page that
   is code rather than prose, and the ground says so without a label. */
.formula {
  margin: 20px 0 0;
  padding: 18px 20px;
  border: var(--rule);
  background-color: var(--panel);
  background-image: repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 3px);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--t-11);
  line-height: 2;
  white-space: pre;
  overflow-x: auto;
}

/* ------------------------------------------------------------ sale grids -- */

/* minmax(0, 1fr) throughout: the caption lines are nowrap so they can be
   clipped rather than wrapped, and an auto minimum would let the longest trait
   name in the set decide how wide the whole grid is. */
.grid-8 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--rule);
  border-left: var(--rule);
}
.grid-8 > article,
.grid-8 > .zomi-card {
  display: block;
  border-bottom: var(--rule);
  border-right: var(--rule);
}
.grid-8 > article canvas,
.grid-8 > .zomi-card canvas {
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  background: var(--panel);
}
/* One card anatomy, used by all four states of these two grids: the art at
   1:1 pixel scale, the id in mono, a rank chip, and two traits. A card is a
   link into the explorer, so it gets the underline off and the keyboard ring
   on rather than looking like body copy that happens to move. */
.grid-8 > .zomi-card { position: relative; text-decoration: none; transition: background var(--t-mid) var(--ease); }
.grid-8 > .zomi-card canvas { transition: transform var(--t-mid) var(--ease); }
.grid-8 > .zomi-card:hover { background: var(--panel); }
.grid-8 > .zomi-card:hover canvas { transform: translateY(-1px); }
.grid-8 > .zomi-card:hover .meta b { color: var(--accent); }
.grid-8 > .zomi-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.grid-8 > .zomi-card:hover::after,
.grid-8 > .zomi-card:focus-visible::after { transform: scaleX(1); }
.grid-8 .meta { padding: 12px 14px 16px; }
.grid-8 .meta b {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-weight: 400;
  color: var(--text);
  font-size: var(--t-13);
  transition: color var(--t-fast) var(--ease);
}
.grid-8 .meta b i {
  font-style: normal;
  font-size: var(--t-11);
  letter-spacing: .1em;
  color: var(--meta);
  border: var(--rule);
  padding: 1px 6px;
}
.grid-8 .meta span {
  display: block;
  margin-top: 6px;
  font-size: var(--t-11);
  letter-spacing: .1em;
  color: var(--meta);
  line-height: 1.6;
  /* two traits, one line each: a trait that wraps pushes the card past the
     row it shares with three others and the bottom of it is cut off */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An empty grid is the honest state, not a hole: the frame stays, the one
   empty-state object from site.css sits inside it across all four columns. */
.grid-8 .empty { grid-column: 1 / -1; min-height: 200px; }
/* a grid that holds nothing but its empty state drops its own frame, so the
   dashed box is not a box inside a box */
.grid-8:has(> .empty) { border: 0; }

/* ----------------------------------------------------------------- steps -- */

/* Five moves in a fixed order, so they are numbered. The counter was already
   being incremented here and never printed; a column of small grey text with
   no index in a band called "how it works" does not say it is a sequence. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  /* Five steps, five columns, or one. auto-fit would tile four and leave the
     fifth alone in a row of its own, and a three column fall leaves a hole in
     the same way: five does not divide by anything but five. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--rule);
}
.steps li {
  margin: 0;
  padding: 26px 22px 30px;
  border-bottom: var(--rule);
  border-right: var(--rule-soft);
  counter-increment: step;
  transition: background var(--t-mid) var(--ease);
}
.steps li:hover { background: var(--panel); }
.steps li:first-child { padding-left: 0; }
.steps li:last-child { border-right: 0; padding-right: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: var(--rule-soft);
  font-size: var(--t-24);
  line-height: 1;
  letter-spacing: -.02em;
  /* --faint and not --line: it is generated content, so it is text, and text
     on this site passes 4.5:1 whether or not anybody expects to read it */
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-mid) var(--ease);
}
.steps li:hover::before { color: var(--accent); }
.steps .eyebrow { margin-bottom: 12px; color: var(--accent); }

/* ------------------------------------------------------------------- faq -- */

/* The hairline belongs to the question, not to the answer: the answer is
   capped to a reading measure and a rule on a capped box stops two thirds of
   the way across the field, which is the most obviously unfinished thing a
   page can do. */
/* no rule at the foot: the next band brings its own, and two hairlines a
   hundred pixels apart with nothing between them is one too many */
.faq { margin: 0; border-top: var(--rule); }
.faq dt {
  padding: 28px 0 10px;
  border-top: var(--rule-soft);
  color: var(--text);
  font-size: var(--t-15);
  line-height: 1.5;
  letter-spacing: .01em;
}
.faq dt:first-of-type { border-top: 0; }
.faq dd {
  margin: 0;
  padding: 0 0 28px;
  width: calc(7 * var(--col) + 6 * var(--gap));
  max-width: none;
}

/* ----------------------------------------------------------------- token -- */

/* A panel, not two pills floating in a column. The dither ground is the same
   one the hero canvas draws, so the token card and the mark are lit from the
   same place. */
.token-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 30px 30px;
  border: var(--rule);
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 50% 50%, var(--line) 0 .8px, transparent 1px),
    linear-gradient(150deg, rgba(53, 224, 161, .05), transparent 62%);
  background-size: 4px 4px, 100% 100%;
}
.token-side .eyebrow { margin-bottom: 2px; }
.token-side .btn[aria-disabled="true"] { pointer-events: none; }
.token-side .sub { margin-top: auto; }

/* The token band runs the other way round from the bond band: prose on the
   wider side, the panel on the narrower one. A class and not an id, or the
   single column rule further down this file loses to it at 390 and the panel
   is squeezed off the right edge. */
.split-token { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

/* ------------------------------------------------------------------- 900 -- */

@media (max-width: 1180px) {
  .hero-line { grid-column: 1 / span 10; }
  .hero .lede { grid-column: 1 / span 8; }
  /* the rail stops being a rail before it stops being readable. minmax(0, 1fr)
     and not 1fr: an auto minimum lets the formula block, which scrolls sideways
     on purpose, set the width of the whole column and push the page past the
     viewport. */
  .pin-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pin-rail { position: static; }
  .pin-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { border-right: 0; }
}

@media (max-width: 900px) {
  .ladder { grid-template-columns: minmax(0, 1fr); }
  .ladder .rung { border-right: 0; border-bottom: var(--rule-soft); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* three across and two down: the six still read as one set at 390, which a
     two by three column of tall cells does not. Two rows of three square cells
     is three wide by two tall, and the box says so before it is filled. */
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); aspect-ratio: 3 / 2; }
}

@media (max-width: 720px) {
  .hero { padding: 20px 0 var(--band); }
  .hero h1 { margin-bottom: 26px; }
  .hero-line { grid-column: 1 / -1; font-size: var(--t-18); }
  .hero .lede { grid-column: 1 / -1; }
  .pin-grid { margin: 30px 0; padding-top: 26px; gap: 26px; }
  .pin-stages { padding: 0 18px; }
  .pin-steps { grid-template-columns: 1fr; }
  .pin-stage { padding: 30px 0 32px; }
  .pin-stage h3 { font-size: var(--t-15); }
  .ladder .rung { padding: 16px 0 18px; }
  .ladder .rung .sub { margin-bottom: 8px; }
  .steps li { padding: 18px 0 20px; border-right: 0; }
  .faq dt { padding: 18px 0 8px; font-size: var(--t-13); }
  .faq dd { padding-bottom: 18px; }
  .grid-8 .empty { min-height: 0; padding: 22px 18px; flex-direction: column; align-items: flex-start; gap: 14px; }
  /* eight of twelve columns is a readable measure on a 1248 field and a
     234 px ribbon at 390, so at 390 a note is simply as wide as the page */
  .band-note, .strip-note { width: auto; margin-top: 16px; padding-left: 18px; }
  /* no hover on a touch screen, and a panel laid over the art would be text on
     a picture; the tag carries the id and the whole cell opens the explorer */
  .zomi-cell .sheet,
.zomi-card .sheet { display: none; }
  .zomi-cell .tag { padding: 5px 8px; }
}