/* layouts/grid.css */
/* theme-clay refinement for the grid layout. Tokens only, no raw colour/size
   literals (theme spec §2).

   The engine renders every grid cell as a flat, centered box, so six cells read
   as one undifferentiated wall. Here each cell becomes a left-aligned entry with
   a terracotta top-hairline and a colour-led lead-in phrase, so the eye gets an
   entry point per card and a clear reading path. The accent does the pointing;
   the body sits in muted ink beneath it. */
.layout-grid .grid-cell {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--clay-card-gap);
  padding: var(--clay-card-pad);
  text-align: start;
  border-top: var(--clay-card-edge) solid var(--accent);
  border-radius: var(--radius);
}

/* The lead-in is authored as **bold** at the start of the cell paragraph. Give it
   the display face and the accent so it leads the card. */
.layout-grid .grid-cell p strong:first-child {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--size-0) * var(--clay-card-lead-scale));
}

/* Body copy of each card, muted so the lead-in carries the weight. */
.layout-grid .grid-cell p {
  color: var(--clay-card-body-color);
  line-height: var(--leading-body);
}

/* Numbered cards (opt-in per slide via `numbered:`): a small terracotta index in
   the mono face above each lead-in, counted in source order. --size--1 is a
   stage-derived token, in scope at the point of use. */
.layout-grid .grid-numbered {
  counter-reset: clay-card;
}
.layout-grid .grid-numbered .grid-cell::before {
  counter-increment: clay-card;
  content: counter(clay-card, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--size--1);
  color: var(--accent);
  letter-spacing: var(--clay-kicker-tracking);
}

/* layouts/predict.css */
/* theme-clay refinement for the predict layout (v2.6). Tokens only, no raw
   colour/size literals (theme spec §2). The engine owns the placeholder cursor,
   the rise, and the scale of the revealed answer; this only sets type so the
   frame reads native to clay: the prompt drops to a warm mono kicker so the
   question reads as setup, and the revealed answer (already accent, at statement
   scale from the engine) is tightened on the display track so it lands as a
   considered line rather than a shout. */
.predict-prompt p {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--clay-kicker-tracking);
  font-size: var(--size-0);
}
.predict-answer.is-revealed :is(p, h1, h2, h3) {
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

/* layouts/section.css */
/* theme-clay refinement for the section divider layout. Tokens only, no raw
   colour/size literals (theme spec §2). Served as part of /theme/layouts.css,
   linked after the engine stylesheet, so these rules refine it.

   A section break is a breath in the talk: the title sits behind a terracotta
   rule and the lede drops to a mono kicker underneath. */
.layout-section {
  justify-content: center;
  gap: var(--space-4);
}
.layout-section .section-card {
  border-left: var(--border-w) solid var(--accent);
  padding-left: var(--space-4);
}
.layout-section h1 {
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  max-width: var(--measure);
}
.layout-section p {
  font-family: var(--font-mono);
  font-size: var(--size--1);
  text-transform: uppercase;
  letter-spacing: var(--clay-kicker-tracking);
}
.layout-section .agenda-current {
  color: var(--accent);
}

/* layouts/split.css */
/* theme-clay refinement for the split layout (and the split-style text slides).
   Tokens only, no raw colour/size literals (theme spec §2).

   The engine top-aligns split columns, so a slide with a short heading on the
   left and a few revealed lines on the right feels crammed at the top with an
   empty lower half, and the revealed lines sit tight together. Here the columns
   are centered on the stage, the measure is tightened so lines do not run too
   wide, and each revealed point gets breathing room and a small accent marker so
   it reads as a considered beat rather than a run-on block. */
.layout-split .split-columns {
  align-items: center;
}

.layout-split .split-col p {
  max-width: var(--clay-measure-tight);
}
.layout-split .split-col p + p {
  margin-block-start: var(--clay-para-gap);
}

/* Revealed points in a split column: space them, and mark each with a terracotta
   dot set on the first line. padding-inline-start keeps wrapped lines aligned
   under the text, not under the marker. */
.layout-split .reveal-item {
  position: relative;
  padding-inline-start: var(--space-4);
}
.layout-split .reveal-item + .reveal-item {
  margin-block-start: var(--clay-para-gap);
}
.layout-split .reveal-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--clay-bullet-offset);
  width: var(--clay-bullet-size);
  height: var(--clay-bullet-size);
  border-radius: 50%;
  background: var(--accent);
}

/* layouts/statement.css */
/* theme-clay refinement for the statement layout. Tokens only, no raw
   colour/size literals (theme spec §2).

   The statement slide is one sentence. Fraunces carries it, tightened and set on
   the measure so it reads as a considered line rather than a big heading. */
.layout-statement {
  justify-content: center;
  gap: var(--space-4);
}
.layout-statement h1 {
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  max-width: var(--measure);
}

/* layouts/timeline.css */
/* theme-clay refinement for the timeline layout (v2.6). Tokens only, no raw
   colour/size literals (theme spec §2). The engine owns the axis, the dots, and
   the sliding marker; this only sets type so the nodes read native to clay:
   Fraunces headings tightened on the display track, and the supporting line under
   each node dropped to a warm mono caption. The active node already emphasises in
   the accent (engine), so the refinement leaves colour alone. */
.timeline-node :is(h1, h2, h3) {
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}
.timeline-node p {
  font-family: var(--font-mono);
  font-size: var(--size--1);
  color: var(--ink-muted);
}

/* layouts/title.css */
/* theme-clay refinement for the title layout. Tokens only, no raw colour/size
   literals (theme spec §2). Served as part of /theme/layouts.css, linked after
   the engine stylesheet, so these rules refine it.

   The opening slide is where Fraunces shows its warmth: the title runs a little
   larger than the engine's top step and the subtitle drops to a mono kicker, so
   the pair reads as a title card. The scale is a unitless multiplier so the
   arithmetic can happen on the stage, which is where --size-5 is derived. */
.layout-title h1 {
  font-size: calc(var(--size-5) * var(--clay-title-scale));
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  max-width: var(--measure);
  text-wrap: balance;
}
.layout-title p {
  font-family: var(--font-mono);
  font-size: var(--size-0);
  text-transform: uppercase;
  letter-spacing: var(--clay-kicker-tracking);
  color: var(--ink-muted);
}