/* Hallmark · shape: Reference page, a city argued in sections · genre: editorial · theme: custom
 * idea: "A route atlas: every claim measured, distances set at type scale" · vibe: "field guide, gauged, dry"
 * paper: oklch(96% 0.005 240) · accent: oklch(52% 0.13 62) · display: Rethink Sans · body: Literata
 * copy: verbatim · the client's brief sets 350 to 550 words per city page and one distinct argument per city; that count is the deliverable, so gate 58 and 69 report as notes on location pages only
 * axes: light/grotesk-sans/warm · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E5 S4 R4 V5 · weakest: S, eleven pages in one template; the section mix, band rhythm and per-city argument carry the difference, not the layout */

/* A city page is a spread, not a stack: each band pairs two blocks across the
   grid so no block sits alone in a half-empty row.
   The positional rules carry zero specificity on purpose. A bare :nth-child(2)
   scores (0,3,0) and silently beats ".container > h2" (0,2,1), which pushed a
   heading meant for its own row into the narrow column beside the text. */
.loc-lede { max-width: 46ch; }

.section > .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl) var(--gap-columns);
  align-items: start;
}
.section > .container > * { min-width: 0; }

/* ---- blocks that always take the full measure ---------------------------- */

/* a head introducing a table or list; the link list; the hire note; a figure */
.section > .container > :is(.table-wrap, .city-plate, .compare, .faq-group,
                            .further, .wicked--city, h2) {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* a pull quote is a statement, not a column */
.section > .container > .pull { grid-column: 1 / -1; margin-top: 0; }
.section > .container > .pull p { max-width: 34ch; color: var(--color-ink); }
.section--plate .pull,
.section--plate .pull p { color: var(--color-on-plate); }

/* ---- the paired band ----------------------------------------------------- */

/* one prose block is one grid child whatever its paragraph count */
.prose-block { grid-column: 1 / span 8; max-width: 64ch; }
.prose-block p + p { margin-top: 1.05em; }

/* A margin note: the fact that would otherwise leave the right column empty.
   Ruled above, set small, level with the opening paragraph. */
.margin-note { grid-column: 10 / span 3; margin-top: var(--space-md); border-top: 1px solid var(--color-ink); padding-top: var(--space-sm); }
.margin-note p { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); }

/* Positional fallbacks at zero specificity: when a band holds only ordinary
   blocks, the first takes the reading column and the second the narrow one. */
:where(.section > .container) > :where(:nth-child(1)) { grid-column: 1 / span 8; }
:where(.section > .container) > :where(:nth-child(2)) { grid-column: 10 / span 3; margin-top: var(--space-xl); }
:where(.section > .container) > :where(:nth-child(3)) { grid-column: 1 / span 8; }
:where(.section > .container) > :where(:nth-child(4)) { grid-column: 10 / span 3; margin-top: 0; }

/* a block that ends up alone still needs weight */
:where(.section > .container) > :where(:only-child) { grid-column: 1 / -1; }

/* ---- type inside blocks -------------------------------------------------- */

/* heads sit inside blocks: the space above them is the block gap, not a margin */
.section > .container h2 { margin-top: 0; }
.section > .container h2 + * { margin-top: var(--space-md); }

/* the contextual links close the argument: three destinations under a rule,
   so they read as a reading list rather than another paragraph */
.further { border-top: 1px solid var(--color-ink); padding-top: var(--space-md); }
.further h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.further p { max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.further a {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.18em;
}
.further a:hover { text-decoration-color: var(--color-accent); }

.section > .container > .wicked--city p { max-width: 62ch; }

/* a short link label must not wrap on a phone, and it must never fall back to
   the browser's default link blue inside a page whose palette has no blue */
.link-more { text-wrap: nowrap; color: var(--color-ink); text-decoration-color: var(--color-rule-strong); }
.link-more:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

@media (max-width: 62rem) {
  .section > .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .prose-block,
  .margin-note,
  :where(.section > .container) > :where(:nth-child(n)) { grid-column: 1 / -1; margin-top: 0; }
  .margin-note { margin-top: var(--space-lg); }
  .further p { flex-direction: column; gap: var(--space-sm); }
}
/* Location lists following a full-width heading belong in the reading column. */
.section > .container > .fact-list { grid-column: 1 / span 8; margin-top: 0; }
@media (max-width: 62rem) { .section > .container > .fact-list { grid-column: 1 / -1; } }