/* Pulse: the typography-led direction.
 *
 * Loaded after site.css on the /styles/pulse/ page only, so it states just
 * what it changes. No imagery at all: the page opens on the reporting clock
 * (the hero-clock section, styled in site.css) and everything after it is
 * carried by type, spacing and hairlines rather than by shadow and photograph.
 *
 * Contrast note: --teal reads at under 3:1 on white, so any coloured text on a
 * light ground here uses --teal-deep, same rule as the base stylesheet.
 */

:root {
  --section-y: clamp(66px, 7vw, 108px);
  --radius: 12px;
  --radius-lg: 16px;
}

h2,
h3 {
  letter-spacing: -0.012em;
}

/* Section headings step up one size: with no photography, the type is the
   hierarchy. */
.head-block h2 {
  font-size: var(--step-5);
}

.head-block > p {
  font-size: var(--step-1);
}

.eyebrow {
  letter-spacing: 0.2em;
}

/* Flat, drawn surfaces: hairline borders instead of lift and shadow. */
.card,
.entity-card,
.tier,
.mcard {
  box-shadow: none;
}

.card--lift:hover,
.tier:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--teal-deep);
}

/* Sections separate by rule rather than by tint. */
.section--soft {
  background: #fff;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.logo-wall {
  border-top: 1px solid var(--line);
}

/* The closing block keeps one quiet tinted surface so the page has an ending. */
.section:last-of-type {
  background: var(--surface);
}