/* ==========================================================================
   tarnovski.eu — site layer
   Components used only by the generated pages. Loaded after tarnovski.css,
   which stays the frozen design-system stylesheet from the approved design.
   ========================================================================== */

/* The hidden attribute must beat a display rule (the ledger rows are display:grid). */
[hidden] { display: none !important; }

.page-title {
  font-size: var(--step-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: var(--leading-display);
  margin: var(--space-4) 0 0;
  text-wrap: balance;
}

/* The lede sits under a display-size title on every inner page, where the 8px
   step the base rule was written for (the hero) reads as a collision. */
.page-title + .hero__lede { margin-top: var(--space-4); }

.meta-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  border: var(--rule);
  background: var(--canvas-paper);
  padding: var(--space-6);
}

.meta-panel p {
  margin: var(--space-2) 0 0;
  font-size: var(--step-sm);
  color: var(--on-surface);
}

.points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule);
}

.points li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--rule);
  font-size: var(--step-sm);
  color: var(--on-surface-var);
}

.points li > span:first-child {
  font-family: var(--font-mono);
  font-size: var(--step-nano);
  letter-spacing: 0.1em;
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}

.related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Unselected chip: the base .chip rule is written for the pressed state. */
.chip[aria-pressed="false"] {
  border-color: var(--hairline-strong);
  color: var(--on-surface-var);
  background: transparent;
}

@media (max-width: 720px) {
  .points li { grid-template-columns: 2rem 1fr; }
}

/* --------------------------------------------------------------------------
   Client review round, 2026-10-17
   Overrides layered on top of the frozen design system (tarnovski.css).
   -------------------------------------------------------------------------- */

/* The hero now carries the statement alone, at a much larger scale; the register
   summary moved out of the hero into its own hairline strip further down. */
.hero__statement { display: grid; gap: var(--space-6); }

.hero h1 {
  font-size: clamp(2.75rem, 1rem + 7.2vw, 6rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero .micro { font-size: var(--step-micro); letter-spacing: 0.18em; }

.hero__lede {
  margin: var(--space-2) 0 0;
  max-width: 46ch;
  font-size: clamp(1.125rem, 0.85rem + 1vw, 1.5rem);
  line-height: 1.45;
}

.hero__actions {
  margin-top: var(--space-6);
  gap: var(--space-8);
}
.hero__actions .action { font-size: var(--step-mono); }

/* register summary — hairline grid of key/value cells, below the hero */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: var(--rule);
  border-left: var(--rule);
}

.spec-strip__cell {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-right: var(--rule);
  border-bottom: var(--rule);
}

.spec-strip__value {
  font-family: var(--font-mono);
  font-size: var(--step-sm);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .spec-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Ledger: description and metadata read from the same left edge.
   nowrap (from the design system) is dropped so the role lines can wrap and stop
   squeezing the description column. */
.ledger__desc { text-align: left; max-width: 58ch; }
.ledger__meta { text-align: left; white-space: normal; }

/* Column balance is a desktop refinement, so it must stay inside a media query.
   Unwrapped it also beat the design system's ≤900px stacking rule — same
   specificity, later stylesheet — which left entry titles in a ~119px column
   on a phone while still fitting the viewport, so no overflow check caught it. */
@media (min-width: 901px) {
  .ledger__row { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.9fr); }
}

/* ≤620px: a single column, so a long entry title — a heading, set at 20px —
   keeps the full measure instead of breaking one word per line. */
@media (max-width: 620px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .ledger__row > .ledger__desc,
  .ledger__row > .ledger__meta { grid-column: auto; }
}

/* Live clock in the telemetry strip: digits must not shift as they tick. */
.refstrip__clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* Profile (bio pages): portrait beside the prose, tight caption, no dead space. */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.profile__figure {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.profile__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--rule);
  background: var(--canvas-paper);
  filter: grayscale(1);
}

.profile__figure figcaption { letter-spacing: 0.1em; }

/* Video embeds (YouTube privacy-enhanced domain) — the only third-party frame on the site */
.embed {
  border: var(--rule);
  aspect-ratio: 16 / 9;
  background: var(--canvas-bone);
}
.embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; gap: var(--space-8); }
  .profile__figure { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   Client review, round three (2026-10-17, night) — spacing and mobile measure
   -------------------------------------------------------------------------- */

/* 1. Spacing has to be CSS-only on this site. `_headers` sends
   `style-src 'self'`, which blocks inline style attributes outright, so the
   browser discarded every spacing declaration the templates used to carry (305
   of them across 101 pages) and fell back to default paragraph margins. It never
   showed locally, because `python3 -m http.server` does not apply `_headers` —
   only the deployed site enforces the policy. These classes replace them, and
   `audit.py` now fails if an inline style reappears. */

.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.mono--sm    { font-size: var(--step-sm); }
.mono--micro { font-size: var(--step-micro); }

.section-head--bare { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-4); }

.registry-empty { padding-block: var(--space-8); border-bottom: var(--rule); }

.note-block { margin-top: var(--space-6); max-width: 72ch; }

/* A .micro or .ledger__desc used on a <p> should not drag the UA paragraph
   margin into the rhythm. Every one of them is positioned by an mt-* utility or
   by its band, and the leftover 11–16px was showing up as, say, a 50px band gap
   next to 40px everywhere else. :where() holds specificity at zero, so the block
   rules above and below still win. */
:where(p.micro),
:where(p.ledger__desc) { margin-block: 0; }

/* Inside the hero statement the grid's own gap is the rhythm, so the margins its
   children carry were stacking on top of it — 8px on the lede, 24px on the
   action row — and the heading cluster read differently there than on any inner
   page. The grid gap alone now separates them. */
.hero__statement > .hero__lede,
.hero__statement > .hero__actions { margin-top: 0; }

/* 2. One vertical rhythm for every band on every generated page. Each band used
   to carry its own symmetric padding-block, so adjacent bands stacked theirs
   into a 96–128px gap — four times the gaps inside a band, and varying with
   whichever `--tight` variant a template happened to pick. Bands now share one
   value, and only the first one keeps a top padding (plus the band that follows
   the hero, which sets its own larger scale), so every boundary on a page reads
   at the same distance. Bands that were `<section class="shell">` without
   `.section` sat outside the rhythm entirely and are now classed in. */
main > .section,
main > .section--tight { padding-block: var(--space-10); }

main > .section + .section,
main > .hero + .section { padding-top: 0; }

@media (min-width: 720px) {
  main > .section,
  main > .section--tight { padding-block: var(--space-12); }
}

/* On small screens the hero drops to the band rhythm so the hero/first-band
   boundary is the same 40px as every other one; at desktop widths it keeps its
   own opening scale. */
@media (max-width: 900px) {
  main > .hero { padding-block: var(--space-10); }
}