/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V4
 * genre: editorial · macrostructure: Narrative Workflow · theme: Almanac (extended: deep inked-navy band tokens)
 * enrichment: Tier-A CSS drafting-grid (hero only, masked, ~9% alpha) · nav: N6 masthead + dateline · footer: Ft2 inline
 * redesign 2026-07-03: contrast range added — dark proof band (worked example) + dark closing CTA; light open/tiers between
 * feedback round 2026-07-03 (codex + opencode + claude vision reviewers): oxide-filled primary CTA · lede tightened · secondary link demoted
 *   · tier highlight = aligned oxide left bar (wash removed) · coverage strip = 5-col certification plate · premise = capability ledger (dl)
 *   · grid-line alpha 0.09→0.055 · specimen shadow reduced · scroll-reveal removed (one orchestrated reveal: hero only)
 * motion round 2026-07-03: tool-trail replay (one-shot, opacity-only, JS-gated + reduced-motion-skipped) · specimen hover lift
 *   removed (not clickable) · link-arrow hover nudge follows arrow axis (↓ = translateY) · rejected: counters, grid drift, caret blink
 * tone: utilitarian · audience: naval repair pros + buyers · use: start free (register)
 * fonts: Cardo (display) · IBM Plex Sans (body) · IBM Plex Mono (outlier: code/citation/numeral register only)
 * worked-example knobs: transcript turns (dt speaker / dd content; stacks on mobile) · source: recorded session 2026-06-10 (sample-complex-interaction.md, condensed) · honest copy (real prompt, real tool trail, verified answer)
 * tiers knobs: ledger rows (no price cards) · honest copy (rates from src/tiers.ts; Individual $3/mo per product 2026-06-12, Enterprise TBD; ADR-0003 framing)
 * contrast: pass (40-41) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34,49,50-57) · honest: pass (46) · icons: pass (30) · slop: pass (42-45)
 */

.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ---------- Scroll progress indicator ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-accent);
  z-index: var(--z-sticky);
  transition: width 0.1s linear;
}

/* ---------- Masthead (N6) ---------- */
.mast {
  display: grid;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-lg) var(--page-gutter) 0;
}
.mast__dateline {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
.mast__dateline > span { white-space: nowrap; }
.mast__dateline::before,
.mast__dateline::after {
  content: "";
  flex: 1 1 0;
  border-top: var(--rule-hair) solid var(--color-rule-2);
}
/* capped a register below the hero display — the H1 owns the page */
.mast__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, var(--text-2xl));
  line-height: 0.98;
  letter-spacing: 0.01em;
}
.mast__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
}
.mast__nav a {
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-ink-2);
  padding-block: var(--space-3xs);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.mast__nav a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.mast__nav a.is-cta { color: var(--color-accent); border-bottom-color: var(--color-rule-2); }
.mast__rule {
  height: 3px;
  margin: var(--space-md) 0 0;
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule-2);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}

/* ---------- Section rhythm ---------- */
section { padding-block: var(--space-3xl); }
.section-head { max-width: 46ch; margin-bottom: var(--space-2xl); }
.section-head h2 { font-size: var(--text-2xl); }
.section-head p { margin-top: var(--space-md); color: var(--color-muted); max-width: var(--measure); }

/* ---------- Hero (H2 split diptych 7/5) ---------- */
.hero { padding-top: var(--space-2xl); position: relative; isolation: isolate; }
/* Tier-A drafting grid — chart-paper hairlines, masked to fade before the fold */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
  mask-image: linear-gradient(180deg, oklch(0% 0 0 / 0.9), transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, oklch(0% 0 0 / 0.9), transparent 88%);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hero__display {
  font-size: var(--text-display);
  letter-spacing: -0.02em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero__lede {
  margin-top: var(--space-lg);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-ink-2);
  max-width: 46ch;
}
.hero__cta {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}
.hero__micro { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 38ch; }

/* sample-retrieval card — a content excerpt, not re-drawn UI chrome */
.specimen {
  border: var(--rule-hair) solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-xs) var(--radius-xs) var(--radius-sm) var(--radius-sm);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.05);
}
.specimen__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.specimen__tag { display: inline-flex; align-items: center; gap: var(--space-xs); }
.specimen__tick { width: var(--space-xs); height: var(--space-xs); background: var(--color-accent); border-radius: 1px; flex: none; }
.specimen dd { margin: var(--space-2xs) 0 0; }
.specimen .q { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; color: var(--color-ink); }
.specimen .a { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.55; }
.specimen__cite {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Grounded-in strip (real standards; certification plate, not logos) ---------- */
.grounded { padding-block: var(--space-2xl); border-block: var(--rule-hair) solid var(--color-rule); }
.grounded__head { margin-bottom: var(--space-xl); }
.grounded__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.grounded__list li {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  padding-left: var(--space-lg);
  border-left: var(--rule-hair) solid var(--color-rule);
  line-height: 1.15;
}
.grounded__list li:first-child { padding-left: 0; border-left: 0; }

/* ---------- Premise (lead + capability ledger; labels echo the hero card's ASK/GET BACK register) ---------- */
.premise__lead {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-ink);
  max-width: 44ch;
}
.premise__uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-xl);
  margin: var(--space-2xl) 0 0;
}
.premise__uses > div {
  border-top: var(--rule-hair) solid var(--color-rule-2);
  padding-top: var(--space-sm);
}
.premise__uses dd {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-2);
}

/* ---------- Worked example — dark proof band (recorded-session transcript; typographic turns, no chat chrome) ---------- */
.worked {
  background: var(--color-deep);
  color: var(--color-deep-text);
}
.worked .section-head h2 { color: var(--color-deep-text); }
.worked .section-head p { color: var(--color-deep-muted); }
.transcript { margin: 0; }
.transcript__turn {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-sm) var(--space-xl);
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-deep-rule);
}
.transcript__turn:last-child { border-bottom: var(--rule-hair) solid var(--color-deep-rule); }
.transcript__who {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-deep-muted);
}
.transcript__prompt {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-deep-text);
  max-width: 52ch;
}
.transcript__tools {
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-deep-muted);
  font-variant-numeric: tabular-nums;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-deep-rule);
}
.transcript__tools span { overflow-wrap: anywhere; min-width: 0; }
/* tool-trail replay — one-shot, opacity-only; .will-replay is added by JS only when motion is allowed */
.transcript__tools.will-replay span { opacity: 0; }
.transcript__tools.is-replaying span { animation: tool-line var(--dur-short) var(--ease-out) forwards; }
.transcript__tools.is-replaying span:nth-child(1) { animation-delay: 0ms; }
.transcript__tools.is-replaying span:nth-child(2) { animation-delay: 180ms; }
.transcript__tools.is-replaying span:nth-child(3) { animation-delay: 360ms; }
.transcript__tools.is-replaying span:nth-child(4) { animation-delay: 540ms; }
@keyframes tool-line { to { opacity: 1; } }
.transcript__answer { margin: 0; max-width: 64ch; }
.transcript__answer p { color: var(--color-deep-muted); }
.transcript__answer p + p { margin-top: var(--space-md); }
.transcript__answer strong { color: var(--color-deep-text); font-weight: 600; }
.transcript__cite {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-deep-cite);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}
.transcript__caveat { font-size: var(--text-sm); color: var(--color-deep-muted); }

/* ---------- Tiers (ledger rows, same register as the worked example — no price cards) ---------- */
.tiers__ledger { list-style: none; margin: 0; padding: 0; }
.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--space-sm) var(--space-xl);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.tier:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.tier__id h3 { font-size: var(--text-lg); }
.tier__price { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.tier__what { color: var(--color-ink-2); max-width: 44ch; }
.tier__terms {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tiers__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: var(--measure); }

/* ---------- Final CTA strip — dark close, mirrors the proof band ---------- */
.cta-strip {
  background: var(--color-deep);
  color: var(--color-deep-text);
}
.cta-strip__inner { display: grid; gap: var(--space-lg); max-width: 48ch; }
.cta-strip h2 { font-size: var(--text-3xl); color: var(--color-deep-text); }
.cta-strip p { font-size: var(--text-md); color: var(--color-deep-muted); }
.cta-strip__micro { font-size: var(--text-sm); color: var(--color-deep-muted); }
.cta-strip__micro a { color: var(--color-deep-text); text-decoration-color: var(--color-deep-cite); text-underline-offset: 3px; }
.cta-strip__micro a:hover { color: var(--color-deep-cite); }
/* inverted button on deep */
.cta-strip .btn {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}
.cta-strip .btn:hover { background: var(--color-deep-cite); border-color: var(--color-deep-cite); color: var(--color-deep); }

/* ---------- Footer (Ft2 inline single line) ---------- */
.colophon { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); }
.colophon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
}
.colophon__name { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.colophon a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink-2);
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.colophon a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.colophon__meta { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.04em; }
.colophon__spacer { flex: 1 1 var(--space-lg); }

/* ---------- Motion: one orchestrated load reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
}

/* ---------- Problem section (3-up cards) ---------- */
.problem { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.problem__item {
  border-top: 2px solid var(--color-ink);
  padding-top: var(--space-md);
}
.problem__item h3 {
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.problem__item p {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: 1.5;
}

/* ---------- Grounded note ---------- */
.grounded__note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: var(--measure);
  font-style: italic;
}
.grounded__detail {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-2xs);
}

/* ---------- Featured tier row (oxide ledger bar, aligned to the table rules) ---------- */
.tier.is-featured {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-lg);
}
.tier__price a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.tier__price a:hover { color: var(--color-accent-2); border-bottom-color: var(--color-accent-2); }

/* ---------- Hover & interaction polish (interactive elements only — the specimen card is not clickable and does not lift) ---------- */
.tier { transition: background-color var(--dur-short) var(--ease-out); }
.tier:hover { background: var(--color-paper-2); }

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .hero__display { max-width: 18ch; }
  .transcript__turn { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .tier { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .tier__terms { text-align: left; }
  .problem__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .grounded__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
  .grounded__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .premise__uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  section { padding-block: var(--space-2xl); }
  .section-head { margin-bottom: var(--space-xl); }
  .grounded__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .grounded__list li { padding-left: 0; border-left: 0; font-size: var(--text-md); }
  .premise__uses { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .specimen { padding: var(--space-md); }
  .btn { width: 100%; }
  .hero__cta { gap: var(--space-md); }
  .hero__micro { max-width: none; }
  .problem__item { padding-block: var(--space-md); border-bottom: 0; }
  .tier { padding: var(--space-md) 0; }
  .tier.is-featured { padding-left: var(--space-md); }
}