/* Hallmark · macrostructure: Letter (story page) — defers to design.md / tokens.css
 * Letter knobs: salutation=warm address, body=long-document flow, signoff=name, marginalia=hours card
 * Per-page overrides only; all tokens from tokens.css
 */

.pagehead--letter {
  padding-top: calc(var(--banner-height) + var(--space-3xl));
  padding-bottom: var(--space-2xl);
}

.letter {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-3xl);
  align-items: start;
}
.letter__body { max-width: 62ch; }
.letter__salutation {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 500;
  line-height: 1.12;
  margin-bottom: var(--space-2xl);
  max-width: 18ch;
}
.letter__body p {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  margin-bottom: var(--space-lg);
  max-width: 62ch;
}
.letter__body p strong { color: var(--color-ink); font-weight: 600; }
.letter__drop::first-letter {
  font-weight: 600;
  color: var(--color-accent);
}
.letter__rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-block: var(--space-2xl);
}
.letter__signoff {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
}
.letter__signoff span { display: block; font-size: var(--text-base); font-family: var(--font-body); font-weight: 400; color: var(--color-muted); margin-top: var(--space-2xs); }

/* Pull quote inside the flow */
.letter__pull {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-lg);
  margin-block: var(--space-2xl);
  max-width: 26ch;
}

/* Marginalia — sticky aside with hours + location */
.margin { position: sticky; top: calc(var(--banner-height) + var(--space-lg)); display: flex; flex-direction: column; gap: var(--space-lg); }
.margin__card {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-paper-2);
  padding: var(--space-lg);
}
.margin__card .mono { display: block; margin-bottom: var(--space-md); color: var(--color-accent); }
.margin__rows { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--text-sm); }
.margin__row { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.margin__row:last-child { border-bottom: 0; }
.margin__row dt { color: var(--color-muted); }
.margin__row dd { margin: 0; color: var(--color-ink); font-variant-numeric: tabular-nums; text-align: right; }
.margin__note { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); }
.margin .frame { aspect-ratio: 3 / 4; }

/* Gallery band — remaining photos, native ratio, uneven offsets */
.galleryband { padding-block: var(--space-3xl); }
.galleryband__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
}
.gal { display: flex; flex-direction: column; gap: var(--space-sm); }
.gal .frame { aspect-ratio: 3 / 4; }
.gal--a { grid-column: 1 / span 4; }
.gal--b { grid-column: 5 / span 4; transform: translateY(var(--space-xl)); }
.gal--c { grid-column: 9 / span 4; }
.gal figcaption-text { color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .letter { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .margin { position: static; }
  .gal--a, .gal--b, .gal--c { grid-column: 1 / -1; transform: none; max-width: 26rem; }
}