/* zaalyo.ai, the landing page. The only page on the site that is a static
 * file, so it is the only page with a stylesheet of its own.
 *
 * style.css styles the closed vocabulary that worker/index.ts emits. The
 * landing page is not in that vocabulary: it has a hero, a three-up, a
 * "this Saturday" split and a wall placeholder, and none of those shapes
 * appear on a generated page. Putting them in style.css would mean every
 * session sheet carries CSS it can never use, so they live here and only
 * index.html links this file.
 *
 * Same rule as style.css: no hex codes, no font names, no pixel values.
 * If a value is not in tokens/, it does not belong in this file.
 *
 * Restraint budget for this page: one brush (the rule under the headline), one
 * mascot (Zall, once, in the hero), one orange owner (the hero, where the brush
 * rule, Zall's bubble and the primary button sit as a single cluster), and
 * minimal animation. Two things move here: the caret in the hero marker, and a
 * border colour on hover. Every section below the hero is ink, neutral and
 * border. That is deliberate. If you add an orange accent to the cards or the
 * wall, the hero stops being the thing the eye lands on and the page becomes a
 * dev-tool brochure.
 */

/* Layout ------------------------------------------------------------------ */

.lp {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) 0;
}

.lp section { margin-top: var(--space-9); }

/* Two-column splits are asymmetric, roughly 1.35 : 1, so the page never
   reads as a grid of equal boxes. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.split.tight { gap: var(--space-5); align-items: start; }

.three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 60rem) {
  .split, .split.tight, .three-up { grid-template-columns: minmax(0, 1fr); }
  .split { gap: var(--space-7); }

  /* One column: Zall is under the bubble, not to its right. The tail goes back
     to the left so it still points at him. */
  .bubble { margin-left: 0; }
  .bubble::after { right: auto; left: 40px; clip-path: polygon(0 0, 100% 0, 12% 100%); }
}

/* Head and foot ----------------------------------------------------------- */

/* The head is the same on every page and lives in style.css, wordmark and
   all. Nothing about it is landing-page-only any more. */

/* Hero -------------------------------------------------------------------- */

.marker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.marker::before { content: "$"; color: var(--brand); }

/* The caret. A prompt that is not blinking is a screenshot, and this page is
   about writing things that run. It sits after the text rather than beside the
   brush rule, which is where an earlier version put it and where it read as a
   stray dash against the underline swash. The blink is a token, so the rate is
   the same anywhere a caret ever appears, and prefers-reduced-motion in
   tokens/motion.css stops it without a rule here. */
.marker::after {
  content: "";
  width: 0.55em;
  height: 1em;
  background: var(--brand);
  animation: zaalyo-caret var(--caret-rate) steps(1, end) infinite;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--weight-display);
  margin: var(--space-4) 0 0;
}

/* The one brush element on the page. brush-underline.png is a white-on-
   transparent mask, so the colour is --brand and the artwork is the shape.
   The tilt is intentional: the rule does not quite line up with the type,
   which is the hand-made-against-machine-made tension the whole brand runs on. */
.brush-rule {
  width: 320px;
  max-width: 100%;
  height: 14px;
  margin-top: var(--space-3);
  background: var(--brand);
  -webkit-mask-image: url("assets/brush-underline.png");
  mask-image: url("assets/brush-underline.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.hero .lede {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  color: var(--n-200);
  max-width: 46ch;
  margin: var(--space-5) 0 0;
}

.cta-row {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.hero .note { margin: var(--space-4) 0 0; }

/* Zall, once, with one line to say. The bubble is offset from the head so the
   tail lands on him without the two overlapping. */
.mascot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.mascot img { width: 132px; height: auto; margin-left: var(--space-5); }

/* The bubble sits over Zall so the tail comes down just inside the right edge
   of his head. The offset is his own margin plus most of his width, written as
   a sum so it follows if he is resized. Artwork geometry, like the tail itself.

   Below 60rem the column is too narrow to hold the offset and Zall sits under
   the bubble rather than beside it, so the shift is undone and the tail goes
   back to the left, where he is. See the media query at the foot of this
   file. */
.bubble {
  position: relative;
  display: inline-block;
  max-width: 34ch;
  margin-left: calc(var(--space-5) + 88px);
}
.bubble p {
  margin: 0;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 18px;
  padding: var(--space-4) var(--space-5);
  font-weight: 500;
}
/* Anchored from the right edge, so the tail stays over Zall's head whatever
   the bubble text does. Mirrored too: it now leans the other way, towards him. */
.bubble::after {
  content: "";
  position: absolute;
  right: 96px;
  bottom: -9px;
  width: 18px;
  height: 12px;
  background: var(--brand);
  clip-path: polygon(0 0, 100% 0, 88% 100%);
}

/* Section heads ----------------------------------------------------------- */

.head-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.head-row h2 { margin: 0; }
.head-row a,
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.mono-label { color: var(--text-faint); }

/* Panels ------------------------------------------------------------------ */

/* .card in style.css is the archive row: block, bottom margin, hover border.
   These are the landing page's own panels, so they are named separately and
   they do not inherit that margin. */
.panel {
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.panel.sm { padding: var(--space-5); }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }

.panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-h2);
}
.panel .mono-label + h3 { margin-top: var(--space-2); }
.panel .body { color: var(--text-muted); font-size: var(--text-small); line-height: var(--lh-small); margin: var(--space-4) 0 0; }

/* The next session. A whole panel that is one link, so the target is the size
   of the panel rather than the size of the title. */
a.panel { display: block; text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease); }
a.panel:hover { border-color: var(--brand); }
a.panel .when { display: block; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
a.panel .what { display: block; font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: var(--weight-h2); margin: var(--space-3) 0; }
a.panel .why { display: block; color: var(--n-200); max-width: 52ch; }
a.panel .go { display: block; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brand-text); margin-top: var(--space-5); }

/* The wall, before there is anything on it. The bracket glyph is the icon
   system: there are no icons in this brand and none are to be imported. */
.wall-empty {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-tile);
}
.wall-empty .brackets { font-family: var(--font-mono); font-size: var(--text-h1); color: var(--border-strong); }
.wall-empty .say { flex: 1; min-width: 280px; }
.wall-empty .say p:first-child {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-h3);
  margin: 0;
}
.wall-empty .say p:last-child { color: var(--text-muted); font-size: var(--text-small); line-height: var(--lh-small); margin: var(--space-2) 0 0; max-width: 60ch; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) 10px;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* For the adults ---------------------------------------------------------- */

.for-adults p { color: var(--n-200); max-width: 68ch; }
.for-adults h2 { margin: var(--space-3) 0 var(--space-4); }
.for-adults > div:first-child .mono-label::before { content: "</> "; color: var(--border-strong); }

/* Print. The landing page is not a thing anyone needs on paper, but the site
   inverts wholesale in style.css and this file must not fight that. */
@media print {
  .brush-rule, .mascot, .wall-empty .brackets { display: none; }
  /* Drop the top padding but keep a horizontal gutter. At padding 0 the
     headline sits flush against the paper edge and the printer's own
     unprintable margin shaves the first letter off every line. */
  .lp { padding: 0 var(--space-4); max-width: none; }
  .split, .split.tight, .three-up { grid-template-columns: minmax(0, 1fr); }
}