/* Hallmark · macrostructure: Photographic · tone: utilitarian · anchor hue: signal red 28
 * theme: Grid · nav: none (single screen of facts) · footer: one-line colophon · enrichment: none (real photographs)
 * pre-emit critique: P4 H4 E4 S5 R5 V4 — 1 accent colour, 0 shadows, 0 gradients, motion 120–200 ms opacity only
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }

/* ── hero fold: the photograph first ── */
.hero-photo { display: block; width: 100%; border: 0; padding: 0; background: var(--color-paper-3); cursor: zoom-in; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 60rem) { .hero-photo img { aspect-ratio: 16 / 9; object-position: 50% 25%; } }

.intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl) var(--space-2xl); }
.intro h1 { font-size: var(--text-display); font-weight: 800; line-height: 0.95; letter-spacing: var(--tracking-display); }
.intro h1 span { color: var(--color-muted); font-weight: 500; }
.lede { max-width: 38rem; font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-2); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.price strong { font-size: var(--text-display-s); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--color-accent); white-space: nowrap; }
.price span, .where { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card);
  background: var(--color-ink); color: var(--color-paper); font: 700 var(--text-md)/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn:active { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn--ghost { background: transparent; color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.pending { font-size: var(--text-sm); color: var(--color-muted); max-width: 30rem; }

@media (min-width: 60rem) {
  .intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: end; }
  .intro .side { display: grid; gap: var(--space-lg); padding-bottom: var(--space-xs); }
}
.intro .side { display: grid; gap: var(--space-md); }
.intro .main { display: grid; gap: var(--space-lg); }

/* ── sections ── */
section { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
section > .wrap > h2 { font-size: var(--text-display-s); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; margin-bottom: var(--space-lg); }
.note { margin-top: var(--space-lg); color: var(--color-neutral); max-width: 38rem; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.gallery button { display: block; width: 100%; padding: 0; border: 0; background: var(--color-paper-3); cursor: zoom-in; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity var(--dur-med) var(--ease-out); }
.gallery button:hover img { opacity: 0.86; }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* spec table */
.specs { display: grid; grid-template-columns: minmax(0, 1fr); }
.specs > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.specs dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); padding-top: 0.2em; }
.specs dd { font-weight: 600; }
@media (max-width: 26rem) { .specs > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } }
@media (min-width: 60rem) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }

.specs.specs--wide { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.specs--wide dd { font-weight: 400; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) { .two { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.two h2 { font-size: var(--text-display-s); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; margin-bottom: var(--space-lg); }
.plain li { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.kit li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.kit strong { display: block; }
.kit span { color: var(--color-neutral); }

/* flaws */
.flaws { background: var(--color-paper-2); }
.flaws ol { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--color-ink); max-width: 52rem; }
.flaws li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.flaws h3 { font-size: var(--text-md); font-weight: 800; }
.flaws p { color: var(--color-ink-2); }
@media (min-width: 48rem) { .flaws li { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-lg); } }

/* contact */
.contact .big { font-size: var(--text-display-s); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; max-width: 22ch; margin-bottom: var(--space-lg); }
footer { padding-block: var(--space-lg) calc(var(--space-3xl) + env(safe-area-inset-bottom)); border-top: var(--rule-hair) solid var(--color-rule); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

/* mobile call bar */
.callbar { position: fixed; inset: auto 0 0 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--page-pad) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-ink); }
.callbar b { font-weight: 800; white-space: nowrap; }
@media (min-width: 60rem) { .callbar { display: none; } footer { padding-bottom: var(--space-lg); } }
[hidden] { display: none !important; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--color-scrim); color: var(--color-on-scrim); opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.lb.is-open { opacity: 1; }
.lb figure { display: grid; place-items: center; min-height: 0; padding: var(--space-md); }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--page-pad) calc(var(--space-sm) + env(safe-area-inset-bottom)); font-family: var(--font-mono); font-size: var(--text-xs); }
.lb .bar p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb .ctl { display: flex; gap: var(--space-xs); flex: none; }
.lb button { min-width: 2.75rem; min-height: 2.75rem; border: var(--rule-hair) solid var(--color-on-scrim); background: transparent; color: var(--color-on-scrim); font: 700 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.lb button:hover { background: var(--color-on-scrim); color: var(--color-ink); }
.lb button:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; }
}