/* Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · theme: custom
 * vibe: "plain, precise, retail-operational" · paper oklch(98.5% 0.006 264) cool near-white
 * brand wash oklch(86% 0.055 272) = the portal's #c9d3fa · accent oklch(44% 0.306 264)
 * = the portal's #0000f2 · Geist throughout (single family)
 * axes: light paper / grotesk-sans display / cool accent
 * nav: N9 edge-aligned minimal · footer: Ft2 inline single line · enrichment: none
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V4
 */

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

html, body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }

a { color: var(--color-accent); text-decoration: none; }

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

/* ---- Brand band · nav + hero on the portal's periwinkle ----------------- */

.band {
  background: var(--color-brand-wash);
  border-bottom: var(--rule-thick) solid var(--color-accent);
  padding: 0 var(--page-gutter);
}

/* N9 · edge-aligned minimal */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  white-space: nowrap;
}

.mark {
  width: auto;
  height: 34px;
  display: block;
}

.nav-cta {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-on-accent);
  background: var(--color-accent);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) var(--ease-out);
}

.nav-cta:hover { background: var(--color-accent-hover); }

.hero {
  padding: var(--space-2xl) 0 var(--space-2xl);
  max-width: 50rem;
}

/* A single hero tagline, not a section eyebrow: sentence case, no tracking, no
   uppercase, and it appears once. It previews the four stages below it. */
.tagline {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.hero h1 {
  font-size: var(--text-display);
  color: var(--color-ink);
}

.lede {
  margin-top: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* ---- Stages · numbered, vertically stacked ----------------------------- */

main { padding: 0 var(--page-gutter); }

.stages {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stage {
  padding: var(--space-xl) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  max-width: 48rem;
}

/* The number sits ABOVE the heading in the same column, never a tag-left
   heading-right two-column head. */
.stage-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.stage h2 { font-size: var(--text-2xl); }

.stage p {
  margin-top: var(--space-sm);
  max-width: var(--measure);
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* ---- After / Who / Contact --------------------------------------------- */

.after, .who, .contact { max-width: 48rem; }

.after { padding: var(--space-2xl) 0 var(--space-lg); }
.who { padding: var(--space-lg) 0 var(--space-xl); }

.contact {
  padding: var(--space-xl) 0 var(--space-3xl);
  border-top: var(--rule-thick) solid var(--color-accent);
}

.after h2, .who h2, .contact h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}

.who p, .contact p {
  max-width: var(--measure);
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

/* Hairline separators, matching the stages. A left rule reads as a blockquote,
   which made these three items look like pulled quotes dropped mid-page. */
.plain-list li {
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-soft);
}

.plain-list li:last-child { border-bottom: none; }

.mail a {
  border-bottom: var(--rule-hair) solid var(--color-accent);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}

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

/* ---- Ft2 · inline single line ------------------------------------------ */

.foot {
  background: var(--color-brand-wash);
  border-top: var(--rule-thick) solid var(--color-accent);
  padding: var(--space-lg) var(--page-gutter);
}

.foot p {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 30rem) {
  .hero { padding: var(--space-xl) 0; }
  .stage { padding: var(--space-lg) 0; }
}

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

/* ---- Long-form pages (privacy) ------------------------------------------ */

.band-slim { padding-bottom: 0; }

.prose {
  max-width: 44rem;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.prose h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}

.prose h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

.prose p {
  margin-bottom: var(--space-md);
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.prose .lede { margin-top: 0; }

.prose strong { color: var(--color-ink); font-weight: 600; }

.stamp {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

.prose .plain-list { max-width: none; margin-bottom: var(--space-md); }

.backlink {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.backlink a { border-bottom: var(--rule-hair) solid var(--color-accent); }

.foot a { border-bottom: var(--rule-hair) solid var(--color-accent); }