/* Hallmark · shape: Long Document, single reading column with a margin rail · genre: editorial · theme: custom
 * idea: "A route atlas: every claim measured, distances set at type scale" · vibe: "field guide, gauged, dry humour"
 * paper: oklch(96% 0.005 240) · accent: oklch(52% 0.13 62) · display: Rethink Sans · body: Literata
 * copy: verbatim · the article length is the brief: the guide is judged on how deeply it answers the question, so gate 58 reports as a note on this page only
 * axes: light/grotesk-sans/warm · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V5 · weakest: H, a reading page has one hierarchy by nature; the rail and the figure break the column so the eye has somewhere to land */

/* The head carries its own photograph, so the first screen is a composition rather than a column of type. */
.article { padding-block: var(--space-xl) var(--section-gap); }

.article__head {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: var(--space-2xl);
  row-gap: var(--space-lg);
  align-items: end;
}
.article__head h1 { font-size: var(--text-display-s); max-width: 16ch; line-height: 1.05; margin: 0; }
.article__standfirst { padding-bottom: var(--space-2xs); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }

/* the photograph runs under both columns, wider than the reading measure below it */
.article__figure { grid-column: 1 / -1; margin: var(--space-lg) 0 0; }
.article__figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 12%, transparent); outline-offset: -1px; }
.article__figure figcaption { margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); max-width: 62ch; }

/* a route map in the head: the same coastline drawing as the homepage, one corridor cropped out of it */
.article__figure--map { margin-top: var(--space-md); }
.routemap { width: 100%; height: auto; }
.routemap .au-land { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 1.8; stroke-linejoin: round; }
.routemap .au-route { fill: none; stroke: var(--color-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.routemap .au-mark circle { fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 1.8; }
.routemap .au-mark text { font-family: var(--font-body); font-size: 15px; fill: var(--color-ink); }
.article__figure-note { margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); max-width: 68ch; }

.article__body { grid-column: 1 / span 6; }
.article__body h2, .article__body > figure, .article__body > table, .article__body > .wicked { grid-column: 1 / -1; }
.article__rail { grid-column: 8 / span 4; }
.article__rail-inner { position: sticky; top: var(--space-lg); }

@media (max-width: 62rem) {
  .article__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .article__head, .article__figure, .article__body, .article__rail { grid-column: 1 / -1; }
  .article__rail { margin-top: var(--space-2xl); }
  .article__rail-inner { position: static; }
}

/* The hero's third line: the route in figures, set small under the lede so the
   first screen holds an orientation rather than a heading and a gap. */
/* The route's figures sit over a photograph, so they carry their own ground:
   a small solid chip in the field colour rather than coloured text on pixels. */
.hero__meta {
  display: inline-block;
  font-family: var(--font-figure);
  font-size: var(--text-sm);
  color: var(--color-on-field);
  background: var(--color-field);
  padding: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-md);
}

/* A table's closing total: one rule above, the figure in the mono face like
   every other numeral, so the column reads as a sum rather than another row. */
.data tr.total th, .data tr.total td {
  border-top: 1px solid var(--color-ink);
  font-weight: 600;
}
.data tr.total td { font-family: var(--font-figure); }