/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
* { box-sizing: border-box; }

html { overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
body { overflow-x: clip; margin: 0; min-width: 20rem; }
a { color: inherit; }

.utility-header,
main,
footer {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.utility-header {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: var(--rule-heavy) solid var(--color-ink);
}

.utility-header > *, footer > * { line-height: 1; }
.wordmark { font-weight: 760; letter-spacing: -0.04em; text-decoration: none; }
.channel, .eyebrow, dt, footer { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase; }

.build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  padding-block: var(--space-7) var(--space-8);
  border-bottom: var(--rule-thin) solid var(--color-rule-strong);
}

.eyebrow { margin: 0 0 var(--space-3); font-weight: 700; }
h1, h2, p { margin-top: 0; }
h1 { min-width: 0; margin-bottom: var(--space-4); max-width: 10ch; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--text-h1); line-height: 0.94; letter-spacing: -0.045em; }
h2 { margin-bottom: 0; font-size: var(--text-h2); letter-spacing: -0.035em; }
.lede { max-width: 60ch; color: var(--color-muted); font-size: 1.1rem; line-height: 1.6; }

.download {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.download:hover { background: var(--color-accent-hover); }
.download:focus-visible { outline: var(--rule-heavy) solid var(--color-focus); outline-offset: var(--space-1); }
.download:active { transform: translateY(1px); }
.download[aria-disabled="true"] { pointer-events: none; cursor: not-allowed; opacity: 0.55; }
.download { white-space: nowrap; }

.metadata { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-6) 0 0; }
.metadata div { min-width: 7rem; }
dt { margin-bottom: var(--space-1); }
dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.error { margin-top: var(--space-4); color: var(--color-danger); }

.qr { margin: 0; align-self: end; }
.qr img { display: block; width: 12rem; height: 12rem; padding: var(--space-3); background: var(--color-surface); border: var(--rule-thin) solid var(--color-rule); }
.qr figcaption { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }

.instructions, .verification { display: grid; grid-template-columns: minmax(12rem, 0.65fr) 1.35fr; gap: var(--space-7); padding-block: var(--space-7); border-bottom: var(--rule-thin) solid var(--color-rule-strong); }
.instructions ol { list-style: none; margin: 0; padding: 0; }
.instructions li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top: var(--rule-thin) solid var(--color-rule); }
.instructions li:first-child { border-top-color: var(--color-ink); }
.instructions li > span { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); }
.instructions strong { display: block; margin-bottom: var(--space-1); }
.instructions p { margin-bottom: 0; color: var(--color-muted); line-height: 1.5; }

.verification dl { margin: 0; }
.verification dl div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--rule-thin) solid var(--color-rule); }
.verification dl div:first-child { border-top-color: var(--color-ink); }

footer { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); }

@media (max-width: 44rem) {
  .build, .instructions, .verification { grid-template-columns: 1fr; gap: var(--space-6); }
  .build { padding-block: var(--space-7); }
  .qr { display: flex; align-items: end; gap: var(--space-3); }
  .qr img { width: 9rem; height: 9rem; }
}

@media (max-width: 23.5rem) {
  .utility-header, main, footer { width: min(100% - 1.5rem, 72rem); }
  .channel { text-align: right; }
  .metadata { gap: var(--space-4); }
  .qr { display: block; }
  .verification dl div { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .download { transition: none; }
}