/* Hallmark · shape: Marquee Hero (logo-led) · genre: atmospheric · theme: Lumen (deal 1/3, seed big-problem-instruct-agent-f55f·c0d87167·2026-11-12·r0) · brand: Big Problem (spec 2026-11-12, logo pixels) · job: sign up (copy the instruction) · draw: f1eabc
 * hero: Banner · nav: slab · footer: colophon block (swap: index columns needs a sitemap) · imagery: the official logo lockup, no photographs · signature: the network-mesh lockup set large on the first screen
 * axes: dark/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, a thin prompt with no product to show; carried it with the real instruction as the close and an honest status per step instead of filler */
/* waive 47c: the blueprint grid sits under the instruction well's text at 4.5% ink; it is the theme's texture and the text keeps full contrast */
/* waive steps (draw said leave out Figures and Steps): the owner asked for a three-step how-it-works; drawn as the theme's path diagram */
/* waive 77: the idea section is two short paragraphs under a display head by design; the owner's copy is deliberately modest and no picture would be honest here */
/* answered: Lumen's rose verb dropped; brand palette is black, white and cyan only */
@import url("./tokens.css");
@import url("./base.css");

body { font-variant-numeric: tabular-nums; }
h1, h2, h3, .slab__links, .btn { text-transform: lowercase; }
h1, h2, h3 { font-weight: 400; }
h2 { font-size: var(--text-display-s); line-height: 0.98; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }

/* nav: slab */
.slab { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.slab__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.slab__home { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; font-weight: 500; min-height: 44px; }
.slab__home img { width: 32px; height: auto; }
.slab__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.slab__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-underline-offset: 0.3em; transition: color var(--dur-short) var(--ease-out); }
.slab__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.slab__home:focus-visible, .slab__links a:focus-visible, .mail:focus-visible, .colophon a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }

/* hero: the lockup is the signature */
.hero { min-height: calc(100svh - 65px); padding-block: var(--space-2xl); display: grid; gap: var(--space-xl); align-content: center; }
.hero__logo { display: block; max-width: 1080px; margin-inline-start: calc(-1 * var(--space-sm)); }
.hero__logo img { width: 100%; }
.hero__text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.hero__head { font-size: var(--text-display); line-height: 0.98; max-width: 14ch; }
.hero__side { display: grid; gap: var(--space-lg); }
.hero__side .lead { color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); }
.btn--secondary { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.btn--secondary:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--small { min-height: 44px; font-size: var(--text-sm); padding: 0 var(--space-md); }

/* the idea */
.idea { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xl); }
.idea h2 { max-width: none; font-size: var(--text-display); line-height: 0.98; }
.idea__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.5; }
.idea__cols .idea__lead { font-size: var(--text-2xl); line-height: 1.3; color: var(--color-ink); max-width: 30ch; }
.idea__cols p:not([class]) { max-width: 52ch; }

/* how it works: a path drawn like the mark, nodes on a cyan edge */
.how { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.path { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.path__step { position: relative; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-2xl); }
.path__step::before { content: ""; position: absolute; top: 11px; left: 0; right: calc(-1 * var(--gap-columns)); border-top: 2px dashed var(--color-rule-2); }
.path__step:last-child::before { right: 0; }
.path__step.is-ready::before { border-top-style: solid; border-color: var(--color-accent); }
.path__node { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 0 6px var(--color-paper); }
.path__step:not(.is-ready) .path__node { background: var(--color-paper); box-shadow: 0 0 0 6px var(--color-paper), inset 0 0 0 2px var(--color-ink-2); }
.path h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; }
.readout { font: 400 0.8125rem/1.5 var(--font-outlier); color: var(--color-muted); }
.is-ready .readout { color: var(--color-accent); }

/* the instruction */
.instruction { padding-block: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.instruction__intro { display: grid; gap: var(--space-md); }
.instruction__intro p { color: var(--color-ink-2); max-width: 36ch; }
.well { margin: 0; background-color: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.blueprint { background-image: linear-gradient(var(--rule-blueprint) 1px, transparent 1px), linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px); background-size: 48px 48px; }
.prompt { margin: 0; padding: var(--space-xl); display: grid; gap: var(--space-md); font: 400 clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem)/1.65 var(--font-outlier); color: var(--color-ink); overflow-wrap: anywhere; }
.prompt p { max-width: 62ch; }
.well__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-sm) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.copy-status { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-muted); }
.copy-status:empty { display: none; }

/* status and contact */
.status { padding-block: var(--section-gap) var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); }
.status h2 { max-width: 14ch; }
.status__body { display: grid; gap: var(--space-md); align-content: start; color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.5; }
.mail { justify-self: start; font-family: var(--font-display); font-size: clamp(var(--text-xl), 3vw + 0.5rem, var(--text-3xl)); white-space: nowrap; line-height: 1.1; color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; overflow-wrap: anywhere; min-width: 0; transition: color var(--dur-short) var(--ease-out); }
.mail:hover { color: var(--color-accent); }

/* footer: colophon */
.colophon { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.colophon__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding-block: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.colophon__mark { width: 28px; height: auto; }
.colophon__year { margin-inline-start: auto; }
.colophon a { color: var(--color-ink-2); text-decoration-color: var(--color-accent); }
.colophon a:hover { color: var(--color-ink); }

@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__text, .idea__cols, .instruction, .status { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .path { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .path__step { padding-top: 0; padding-left: var(--space-2xl); }
  .path__step::before { top: 12px; bottom: calc(-1 * var(--space-xl)); left: 11px; right: auto; border-top: 0; border-left: 2px dashed var(--color-rule-2); }
  .path__step:last-child::before { bottom: 0; }
  .path__step.is-ready::before { border-left-style: solid; border-color: var(--color-accent); }
}
@media (max-width: 40rem) {
  .slab__links { gap: 0 var(--space-md); }
  .slab__links li:nth-child(2) { display: none; }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__logo { margin-inline-start: 0; }
  .idea__cols .idea__lead { font-size: var(--text-xl); }
  .prompt { padding: var(--space-lg); }
  .well__foot { padding: var(--space-sm) var(--space-lg); }
  .colophon__year { margin-inline-start: 0; }
}