/* =============================================================================
   UORA home page
   web/assets/css/home.css — linked by web/index.html only, after base.css.

   This is a separate file rather than a <style> block because the site is served
   under `style-src 'self'` with no 'unsafe-inline' and no nonce (see the
   Content-Security-Policy in netlify.toml): an inline block would simply not
   apply. Page-specific CSS goes in a stylesheet under /assets/css/ and is linked
   after base.css.

   Nothing here restates base.css. The landing page needs five shapes the base
   sheet has no equivalent for — the section rule, the hero measure, the numbered
   step column, the marker list and the digest pairs — and nothing else. Every
   colour is a token; there is no hex value in this file.
   ============================================================================= */

/* ------------------------------------------------------------------- rhythm
   Sections are separated by a hairline, not by whitespace alone. This is a
   reference page: a reader scanning for the fee, the timetable or the digest
   needs the boundaries visible at a glance rather than inferred from a gap. */

.home-section {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-7);
  border-block-start: var(--hairline) solid var(--border);
}

.home-section__head {
  max-width: 68ch;
  margin-block-end: var(--s-5);
}

.home-section__head > * + * {
  margin-block-start: var(--s-2);
}

/* --------------------------------------------------------------------- hero
   The measure is set in characters rather than pixels so the line count holds
   as the clamped type size moves between 360px and a wide laptop. */

.home-hero {
  padding-block-start: var(--s-4);
}

.home-hero__title {
  max-width: 26ch;
  margin-block-start: var(--s-3);
  font-size: var(--fs-display);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.home-hero__lead {
  max-width: 60ch;
  margin-block-start: var(--s-5);
}

.home-hero__actions {
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}

/* -------------------------------------------------------------------- steps
   A real <ol>, so the order is in the document and not only in the numerals.
   The numerals are aria-hidden decoration on top of that. Each step is a column
   with the time limit pinned to its foot, so the three limits line up across
   the row and can be compared without reading the prose above them. */

.steps {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The body absorbs the slack, so the rule above the time limit sits at the foot
   of every column whatever the prose above it runs to. */
.step__body {
  flex: 1 1 auto;
}

/* Better again where subgrid is available: the heading, the prose and the time
   limit share three rows across all three columns, so the rules line up exactly
   rather than merely ending level. Purely an improvement on the flex layout
   above, which stands wherever subgrid does not. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .steps {
      grid-template-rows: auto 1fr auto;
    }

    .step {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
}

.step__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: var(--hairline) solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  line-height: 1;
}

.step__body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}

/* No align-self here: the default stretch is right in both layouts. In the flex
   fallback the cross axis is horizontal, so anything but stretch would shrink
   the box to its text and take the rule above it with it. */
.step__limit {
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--border);
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* A time limit IS the key number on this page. Gold on the figure, never on
   the sentence around it — p13 forbids Aurum as body text. */
.step__limit strong,
.step__limit b {
  color: var(--accent);
  font-weight: var(--fw-strong);
}

.step__limit .fl {
  margin-block-end: var(--s-1);
}

/* ------------------------------------------------------------ marker list
   A dot rather than a tick: a tick reads as "done", and these are the remedies
   an award may order, not a list of things that have happened. The marker is
   decorative — every item says in words what it is. */

.marks {
  display: grid;
  gap: var(--s-3);
  max-width: 62ch;
}

.marks li {
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}

.marks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.marks strong {
  color: var(--text);
  font-weight: var(--fw-strong);
}

/* ------------------------------------------------------------------ digests
   Label-over-value pairs inside the 340px rail, where the two-column .kv grid
   from base.css would leave the digest nowhere to go. */

.digests {
  display: grid;
  gap: var(--s-3);
}

.digests dd {
  margin: 0;
  margin-block-start: var(--s-1);
}