/* Hallmark · genre: atmospheric (terminal/CLI cluster) · macrostructure: Workbench
 * theme: Terminal · tone: technical · anchor hue: 74 (amber phosphor)
 * nav: N8 Terminal command · footer: Ft4 Dense colophon
 * archetypes: H2 split diptych · F4 step sequence · F5 annotated screenshot
 *             S5 bottom-anchored head · F3 tabular spec sheet · C4 sticky bottom bar
 * enrichment: none generated — real product captures in bare <figure> (gate 47)
 * motion: caret-blink · hover-lift · dock-reveal (3 primitives, the cap)
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Every colour and font here resolves through a token in tokens.css. No inline values.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;                 /* clip, never hidden — preserves sticky/fixed */
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--space-2xl);
}

body {
  overflow-x: clip;
  margin: 0;
  padding-block-end: var(--space-3xl);   /* room reserved for the dock */
  padding-inline: max(0px, env(safe-area-inset-left));
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;               /* headers are roman. always. */
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }

a { color: var(--color-ink); text-decoration-color: var(--color-rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--color-accent); }

code, kbd, pre { font-family: var(--font-display); }

code {
  font-size: 0.88em;
  color: var(--color-muted);
  background: var(--color-paper-2);
  padding: var(--space-code-y) var(--space-code-x);
  border-radius: var(--radius-xs);
}

/* Inside a <pre> the command already has a typographic frame — it must not
   also render as an inline chip. */
pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

kbd {
  font-size: var(--text-xs);
  color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  padding: var(--space-code-y) var(--space-code-x);
  margin-inline-end: var(--space-3xs);
}

i { font-style: normal; color: var(--color-rule-strong); }   /* separator dots */

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs);
  z-index: var(--z-toast);
  transform: translateY(-200%);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm); text-decoration: none;
}
.skip:focus-visible { transform: none; }

/* ── Reduced motion — every transform and keyframe has a fallback ──────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-micro) !important;
    transition-property: opacity, background-color, color, border-color !important;
  }
  .skip { transition: none; }
}

/* ── The one blinking caret. Only inside a typed command line. ─────────── */

.caret {
  display: inline-block;
  width: 1ch;
  color: var(--color-accent);
  animation: blink 1.05s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 1; } }

/* ── N8 · Terminal command nav ────────────────────────────────────────── */

.nav {
  border-block-end: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-sm) var(--page-gutter);
}

.nav__line {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  margin: 0;
  white-space: normal;              /* flags wrap to a second prompt line if needed */
  line-height: 1.9;
}

.nav__prompt { color: var(--color-accent); }
.nav__cmd    { color: var(--color-muted); }

.nav__line a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 4px;
  white-space: nowrap;              /* a flag never breaks across two lines */
  padding-block: var(--space-2xs);
  transition: color var(--dur-micro) var(--ease-out);
}
.nav__line a:hover { color: var(--color-accent); }

/* ── H2 · Split diptych hero ──────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}

.wordmark {
  display: block;
  inline-size: clamp(9rem, 22vw, 12.5rem);
  block-size: auto;
  color: var(--color-ink);
  margin-block-end: var(--space-lg);
}

.hero__h1 {
  font-size: var(--text-display);
  line-height: 1.08;
  margin-block-end: var(--space-lg);
}

.hero__lede {
  color: var(--color-muted);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.55;
  max-inline-size: 46ch;
  margin-block-end: var(--space-xl);
}

.hero__platforms {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  margin-block-start: var(--space-lg);
}

/* ── Typographic code frame — rule, label, rule. Never window chrome. ──── */

.cmd {
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  padding-block-start: var(--space-sm);
}

.cmd__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

.cmd__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm) var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.cmd__line {
  margin: 0;
  flex: 1 1 14ch;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
  overflow-x: auto;
  overflow-y: hidden;   /* else the computed overflow-y:auto paints a stray bar */
  padding-block: var(--space-3xs);
}

.cmd__prompt {
  color: var(--color-accent);
  user-select: none;                /* the $ is not part of the command */
  padding-inline-end: 1ch;
}

.cmd__note {
  font-size: var(--text-sm);
  color: var(--color-neutral);
  max-inline-size: 54ch;
  padding-block-start: var(--space-sm);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;                   /* intrinsic-height item in a flex row */
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;              /* affordances are single-line objects */
  color: var(--color-accent);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-xs);
  min-block-size: var(--space-xl);
  padding-inline: var(--space-md);
  cursor: pointer;
  /* One signal on hover: a background fade plus the 1.5 px lift. Nothing else. */
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--color-paper-3); transform: translateY(-1.5px); }
}
.btn:active { transform: translateY(0); }

.btn[data-state="done"] {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--color-neutral);
  border-color: var(--color-rule);
  transform: none;
}

@media (pointer: coarse) { .btn { min-block-size: var(--hit-min); } }

/* ── Screenshots — real captures, hairline, no re-drawn chrome ─────────── */

.shot { margin: 0; }

.shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
}

.shot figcaption {
  font-size: var(--text-sm);
  color: var(--color-neutral);
  padding-block-start: var(--space-sm);
  max-inline-size: 46ch;
}

/* ── F4 · Step sequence ───────────────────────────────────────────────── */

.steps {
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.steps__h {
  font-size: var(--text-xl);
  color: var(--color-muted);
  margin-block-end: var(--space-sm);
}

.steps__say {
  color: var(--color-neutral);
  font-weight: 300;
  max-inline-size: 58ch;
  margin-block-end: var(--space-2xl);
}

.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.step { display: grid; gap: var(--space-xs); }

.step__n {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.step__h { font-size: var(--text-lg); }

.step p {
  color: var(--color-muted);
  font-weight: 300;
  max-inline-size: 48ch;
}

/* ── F5 · Annotated screenshot + S5 · bottom-anchored head ─────────────── */

.tour {
  max-inline-size: var(--page-max-wide);
  margin-inline: auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}

.shot__stage { position: relative; }

.pin {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  translate: -50% -50%;
  display: none;                    /* shown once the capture is large enough to read */
  place-items: center;
  inline-size: var(--size-pin);
  block-size: var(--size-pin);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tour__head { padding-block-start: var(--space-xl); }

.tour__head h2 {
  font-size: var(--text-xl);
  margin-block-end: var(--space-md);
}

.legend {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  max-inline-size: 68ch;
}

.legend li {
  display: grid;
  grid-template-columns: var(--size-pin) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--color-muted);
  font-weight: 300;
}

.legend__n {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-full);
  inline-size: var(--size-pin);
  block-size: var(--size-pin);
  display: grid;
  place-items: center;
}

.tour__keys { font-size: var(--text-sm); color: var(--color-neutral); }

/* ── F3 · Tabular spec sheet ──────────────────────────────────────────── */

.specs {
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.specs__h { font-size: var(--text-xl); margin-block-end: var(--space-lg); }

.spec {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.spec tr { border-block-end: var(--rule-hair) solid var(--color-rule); }

.spec th, .spec td {
  padding-block: var(--space-sm);
  vertical-align: baseline;
  text-align: start;
  font-weight: 400;
}

.spec th {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral);
  inline-size: 22%;
}

.spec td:nth-of-type(1) { color: var(--color-ink); inline-size: 30%; }
.spec td:nth-of-type(2) { color: var(--color-neutral); font-size: var(--text-sm); font-weight: 300; }

/* ── Ft4 · Dense colophon ─────────────────────────────────────────────── */

.colophon {
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
}

.colophon p {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-neutral);
  max-inline-size: 74ch;
}

.colophon a { color: var(--color-muted); }
.colophon a:hover { color: var(--color-accent); }

/* ── C4 · Sticky bottom bar ───────────────────────────────────────────── */

.dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: var(--color-paper-2);
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  padding: var(--space-sm) var(--page-gutter);
  padding-block-end: max(var(--space-sm), env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(var(--space-xs));
  transition: opacity var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}

.dock[hidden] { display: none; }
.dock[data-state="in"] { opacity: 1; transform: none; }

.dock__say { font-size: var(--text-sm); color: var(--color-muted); }
.dock__act { display: flex; align-items: center; gap: var(--space-sm); }

.dock__line {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink);
}

@media (prefers-reduced-motion: reduce) {
  .dock { transform: none; transition: opacity var(--dur-micro) linear; }
}

/* ── Up from small ────────────────────────────────────────────────────── */

@media (min-width: 40rem) {
  /* Deliberately unequal — equal thirds is the AI feature-grid fingerprint. */
  .steps__list {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 48rem) {
  .pin { display: grid; }
  .legend { gap: var(--space-md); }
}

@media (min-width: 64rem) {
  .hero {
    /* 7 / 6 — text-biased, deliberately not halves */
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    gap: var(--space-2xl);
    padding-block: var(--space-3xl) var(--space-4xl);
    align-items: center;
  }
  /* The one deliberate grid-break: the capture runs past the container toward
     the viewport edge. Safe because html and body both carry overflow-x: clip. */
  .shot--hero { margin-inline-end: calc((var(--page-gutter) + 4vw) * -1); }
  .steps { padding-block-end: var(--space-4xl); }
  .tour__head {
    /* the head sits under the capture, indented to the capture's optical centre */
    padding-inline-start: 8%;
    padding-block-start: var(--space-2xl);
  }
}

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 47.99rem) {
  /* The spec sheet stops being a table and becomes stacked records. */
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; inline-size: auto; }
  /* The desktop column widths are set with :nth-of-type, which outranks the
     rule above — restate them here or the value column stays 30 % and wraps. */
  .spec td:nth-of-type(1), .spec td:nth-of-type(2) { inline-size: auto; }
  .spec tr { padding-block: var(--space-sm); }
  .spec th { padding-block-end: var(--space-3xs); }
  .spec td { padding-block: 0; }
  .spec td:nth-of-type(2) { padding-block-start: var(--space-2xs); }
}

@media (max-width: 30rem) {
  /* the dock stacks to two rows here, so reserve more tail room */
  body { padding-block-end: var(--space-4xl); }
  .dock { justify-content: stretch; }
  .dock__say { flex: 1 1 100%; }
  .dock__act { flex: 1 1 100%; justify-content: space-between; }
}