/* ========================================================================
   stepkeep — content.css
   Section chrome, export cards, speed figure, how-it-works steps.
   Split from css/components.css; load order in HTML preserves the cascade.
   ======================================================================== */

/* --- Section chrome ------------------------------------------------------ */

.section__head {
  margin-bottom: clamp(2rem, 5vw, var(--sp-7));
}

.section__head .eyebrow {
  margin-bottom: var(--sp-3);
}

.section__head h2 {
  margin-bottom: var(--sp-4);
}

.section__head--center {
  text-align: center;
}

.section__head--center .lede {
  margin-inline: auto;
}

.wrap--narrow {
  max-width: 46rem;
}

/* --- Exports ------------------------------------------------------------- */

.exports {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Two across, not four. Four cards on a 1088px page leaves each one about
     250px wide, which is how the previous version ended up showing three
     documents nobody could read. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.export {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}

/* One height for all four, so differently shaped exports (an A4 page, a browser
   window, a block of text) cannot push the card titles out of line. The crops
   are of the head of each document, so the top edge is the part worth keeping
   when the box is shorter than the image. */
.export__shot {
  height: 300px;
  margin: 0 0 var(--sp-4);
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper-sunk);
}

.export__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Top left, not top centre: these are documents, and a document's own left
     margin is where its title starts. Centring crops both edges and takes the
     first letter of the heading with it. */
  object-position: top left;
}

.export__shot--clip {
  padding: var(--sp-4);
  background: var(--ink);
}

/* The clipboard export is text, so it is set as text: selectable, and legible
   at whatever size the reader's browser is using. */
.clip {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--paper);
  white-space: pre-wrap;
  word-break: break-word;
}

.export__text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.export__title {
  font-size: var(--step-1);
  margin-bottom: var(--sp-2);
}

.export__body {
  font-size: var(--step--1);
  color: var(--slate);
  margin-bottom: var(--sp-3);
}

.export__meta {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--slate);
}

/* --- The speed figure -----------------------------------------------------
   Set as a pulled figure rather than a sentence: the number is the argument,
   and a number set in running text at 14px is a number nobody reads. The rule
   down its left is the same device the claims band uses — a document marking
   its own margin note. */

.speed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: var(--border);
  border-left: 3px solid var(--marker);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.speed__figure {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--ink);
}

.speed__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.75rem, 7vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.speed__unit {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.speed__text {
  max-width: 44rem;
}

.speed__claim {
  margin: 0 0 0.35rem;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--graphite);
  text-wrap: pretty;
}

.speed__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--slate);
  text-wrap: pretty;
}

/* --- How it works -------------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(2.5rem, 6vw, var(--sp-8));
}

.step-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, var(--sp-7));
  align-items: center;
}

/* The Record card carries a frame and a crop of it. They are one cell of the
   two-column card, not two cells, or the text is pushed on to a second row. */
.step-card__media {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.step-card__media .zoom {
  margin-top: 0;
}

.step-card__text h3 {
  margin-bottom: var(--sp-3);
}

.step-card__text p {
  margin-bottom: var(--sp-3);
  color: var(--graphite);
  max-width: var(--measure);
}

.step-card__text p:last-child {
  margin-bottom: 0;
}

/* Marker circle with Ink text, identical on the site and in exports. */
.step-num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--marker);
  color: #163a2e;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}