/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: custom (dark monochrome)
 * tone: austere-contemporary · anchor hue: warm 75° · enrichment: E7 single radial bloom (Tier A)
 * nav: N5 Floating pill · footer: Ft5 Statement
 * knobs: pill=max 1100px / blur backdrop / top-centred · hero=xxl left-bias · footer sentence=38ch
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 *
 * Multi-page site sharing one system: index · investment · research · advisory · contact.
 * Diversification is inverted here by design — pages must look like each other.
 *
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30)
 * inputs: pass (39) — 8 states, fixed border-width, outline focus ring,
 * shared --control-height across input + button
 */

@import url("tokens.css");

/* ---- Reset + root ------------------------------------------------------ */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  position: relative;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* One fixed radial bloom, warm and low-opacity. Not an aurora mesh: a single
   two-stop gradient, no animation, no second colour. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(48rem 34rem at 78% -8%, var(--color-bloom), transparent 68%);
}

.wrap { position: relative; z-index: var(--z-base); }

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

::selection {
  background: var(--color-selection);
  color: var(--color-ink);
}

img { max-width: 100%; height: auto; }

/* ---- Shared layout ----------------------------------------------------- */

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

.doc {
  max-width: var(--measure);
  margin-inline-start: var(--doc-indent);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- N5 · Floating pill nav -------------------------------------------- */

.nav {
  position: sticky;
  top: var(--space-md);
  z-index: var(--z-sticky-nav);
  padding-block: var(--space-md) var(--space-2xl);
}

.nav__pill {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: 68rem;
  margin-inline: auto;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  background: var(--color-glass);
  border: var(--rule-hair) solid var(--color-glass-edge);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

.nav__logo {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}

.nav__logo img {
  display: block;
  width: auto;
  height: 1.375rem;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-inline-start: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-xs);
  transition: color var(--dur-micro) var(--ease-out);
}

.nav__links a:hover  { color: var(--color-ink); }
.nav__links a:active { color: var(--color-accent); }

.nav__links a[aria-current="page"] { color: var(--color-ink); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-inline: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.nav__cta:hover  { background: var(--color-accent); }
.nav__cta:active { background: var(--color-accent-soft); }

/* Shown only below 52rem. */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  min-width: 2.75rem;
  margin-inline-start: auto;
  padding-inline: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  background: transparent;
  border: var(--rule-hair) solid var(--color-glass-edge);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.nav__toggle:hover    { border-color: var(--color-rule-strong); }
.nav__toggle:active   { color: var(--color-accent); }
.nav__toggle:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Hero -------------------------------------------------------------- */

.hero { padding-block: var(--space-2xl) var(--space-3xl); }

h1,
.hero__display {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

.hero__display { max-width: 16ch; }

.hero__lede {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.hero__cta {
  display: inline-block;
  margin-block-start: var(--space-xl);
  font-size: var(--text-md);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-accent-soft);
  padding-block-end: var(--space-3xs);
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

.hero__cta:hover  { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.hero__cta:active { color: var(--color-accent-soft); }

/* Interior pages: same face, smaller, with a lede beneath. */
.opening { padding-block: var(--space-lg) var(--space-2xl); }

.opening h1 {
  max-width: 20ch;
  font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
}

.lede {
  margin: 0;
  max-width: 54ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink-2);
  text-wrap: pretty;
}

/* ---- Prose ------------------------------------------------------------- */

.prose p {
  margin: 0 0 var(--space-lg);
  text-wrap: pretty;
}

.prose p:last-child { margin-bottom: 0; }
.prose > h2:first-child { margin-block-start: 0; }

h2 {
  margin: var(--space-2xl) 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.run { margin-block: 0 var(--space-lg); }

.run h3 {
  display: inline;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
  color: var(--color-ink);
}

/* Non-breaking space, not a plain one: a trailing space in `content` collapses
   against the source whitespace and renders too tight, and the nbsp keeps the
   head attached to the first word of its sentence. */
.run h3::after {
  content: ".\00a0";
  color: var(--color-ink);
}

.run p {
  display: inline;
  margin: 0;
  color: var(--color-ink-2);
}

.plainlist {
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}

.plainlist li {
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.plainlist li:last-child {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* ---- Links ------------------------------------------------------------- */

/* One hover signal: a colour shift. */
.prose a,
.next a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.18em;
  transition: color var(--dur-micro) var(--ease-out);
}

.prose a:hover,
.next a:hover { color: var(--color-ink); }

.prose a:active,
.next a:active { color: var(--color-accent-soft); }

.next {
  margin-block: var(--space-2xl) 0;
  padding-block-start: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.next p { margin: 0; color: var(--color-muted); }

/* ---- Form -------------------------------------------------------------- */

.form { margin-block: var(--space-xl) var(--space-lg); max-width: 34rem; }

/* Honeypot. Bots fill it in; humans never see it. Not display:none — some
   bots skip hidden fields, which would defeat the point. */
.form__decoy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field { margin-block-end: var(--space-lg); }

.field__label {
  display: block;
  margin-block-end: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-2);
}

.field__input {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  /* Block padding stays under the control height so min-height wins and the
     input resolves to exactly --control-height, matching the button. */
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-paper-2);
  /* Border width never changes between states — only its colour, so focus
     can't shift the layout by a pixel. --color-neutral clears the 3:1 that
     WCAG 1.4.11 asks of a control boundary. */
  border: var(--rule-hair) solid var(--color-neutral);
  border-radius: var(--radius-sm);
  /* Reserved at rest so activating focus doesn't change the box geometry. */
  outline: var(--rule-bold) solid transparent;
  outline-offset: 2px;
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}

.field__input--area {
  min-height: calc(var(--control-height) * 3);
  resize: vertical;
}

.field__input::placeholder { color: var(--color-neutral); }

.field__input:hover { border-color: var(--color-muted); }

.field__input:focus-visible {
  border-color: var(--color-muted);
  background: var(--color-paper-3);
  outline-color: var(--color-focus);
}

/* :user-invalid only fires after the user has actually interacted, so fields
   don't turn red the moment the page loads. */
.field__input:user-invalid { border-color: var(--color-error); }

.field__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-paper);
}

.form__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding-inline: var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-on-accent);
  background: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  outline: var(--rule-bold) solid transparent;
  outline-offset: 2px;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

.btn:focus-visible { outline-color: var(--color-focus); }

.btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn:active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.form__status {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-muted);
}

.form__status[data-state="success"] { color: var(--color-success); }
.form__status[data-state="error"]   { color: var(--color-error); }

/* ---- Ft5 · Statement footer -------------------------------------------- */

.foot {
  margin-block-start: var(--space-4xl);
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.foot__statement {
  margin: 0 0 var(--space-2xl);
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  text-wrap: balance;
}

.foot__statement a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--rule-bold) solid var(--color-accent-soft);
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

.foot__statement a:hover  { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.foot__statement a:active { color: var(--color-accent-soft); }

.foot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  padding-block-start: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* The contact page drops the statement — a "tell us about it" line directly
   above the contact form is redundant. Without it, don't stack two rules. */
.foot__meta:first-child {
  border-top: 0;
  padding-block-start: 0;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot__links a {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2xs);
  transition: color var(--dur-micro) var(--ease-out);
}

.foot__links a:hover  { color: var(--color-ink); }
.foot__links a:active { color: var(--color-accent); }

.foot__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.foot__legal .sep {
  color: var(--color-rule-strong);
  padding-inline: var(--space-xs);
}

/* ---- One orchestrated entrance ----------------------------------------- */

.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: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal {
    transform: none;
    animation: reveal-reduced 150ms linear forwards;
  }
  @keyframes reveal-reduced { to { opacity: 1; } }
}

/* ---- Narrow viewports -------------------------------------------------- */

@media (max-width: 60rem) {
  .doc { margin-inline-start: 0; }
}

@media (max-width: 52rem) {
  .nav__toggle { display: inline-flex; }

  .nav__pill {
    flex-wrap: wrap;
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  }

  /* Collapsed by default; the toggle button opens it. */
  .nav__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    margin-inline-start: 0;
    padding: var(--space-sm) var(--space-xs) var(--space-xs);
  }

  .nav__pill[data-open="true"] .nav__menu { display: flex; }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__links a {
    display: block;
    min-height: 2.75rem;
    padding-block: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
  }

  .nav__cta {
    justify-content: center;
    min-height: 2.75rem;
    margin-block-start: var(--space-xs);
  }
}

@media (max-width: 40rem) {
  body { font-size: var(--text-base); }

  .hero__display,
  .opening h1 { max-width: none; }

  .hero__lede,
  .lede { font-size: var(--text-md); }

  .btn { width: 100%; }
  .form__status { flex-basis: 100%; }

  .foot__statement { max-width: none; }

  /* The middot separators read badly once the legal line wraps — stack it. */
  .foot__legal .sep { display: none; }
  .foot__legal .foot__item { display: block; }
}