/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Midnight
 * enrichment: E7 canvas bloom + grain (Tier A CSS) · nav: N5 floating pill · footer: Ft1 mast-headed
 * tone: future-tech instrument · anchor hue: warm amber 62
 */

@import url("tokens.css");

/* ============ RESET / BASE ============ */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; }

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 350;                       /* dark-mode optical compensation */
  line-height: 1.6;
  color: var(--color-muted);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

/* the atmospheric ground — two fixed blooms, no animation */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 78% -6%,
      oklch(77% 0.155 62 / 0.20) 0%,
      oklch(77% 0.155 62 / 0.07) 42%,
      transparent 70%),
    radial-gradient(52vw 44vw at 8% 34%,
      oklch(64% 0.175 30 / 0.15) 0%,
      oklch(64% 0.175 30 / 0.05) 45%,
      transparent 72%);
}

/* film grain — keeps the blooms from reading as a stock mesh gradient */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--color-ink-deep);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: var(--rule-thick); }

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 3px;
  /* never transitioned — the ring must appear instantly */
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

.shell {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.skip {
  position: absolute; left: var(--space-sm); top: -4rem;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill); z-index: var(--z-tooltip);
  white-space: nowrap; text-decoration: none;
}
.skip:focus { top: var(--space-sm); }

/* ============ TYPE UTILITIES ============ */
.lede {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 48ch;
}
.micro {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-neutral);
  font-weight: 500;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  white-space: nowrap;                  /* gate 49 — clickable text never wraps */
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  border: var(--rule-hair) solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-focus); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--ghost:hover { border-color: var(--color-ink); background: var(--color-paper-3); transform: translateY(-1px); }
.btn--ghost:active { transform: translateY(0); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { pointer-events: none; opacity: 0.7; }

/* ============ N5 · FLOATING PILL NAV ============ */
.nav {
  position: fixed; top: var(--space-md); left: 0; right: 0;
  z-index: var(--z-sticky);
  display: flex; justify-content: center;
  padding-inline: var(--space-sm);
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-sm);
  max-width: 100%;
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule);
  /* near-opaque: at 78% the headings scrolling underneath bled through the pill */
  background: color-mix(in oklch, var(--color-paper-2) 94%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-panel);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-outlier);      /* outlier slot 1 of 2 */
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
  color: var(--color-ink-deep);
  text-decoration: none;
  white-space: nowrap;
}

/* the mark — two nested arches: a nimbus arc over an implied "n" */
.mark { width: 1.25rem; height: 1.17rem; flex: none; overflow: visible; }
.mark--lg { width: 1.6rem; height: 1.5rem; }
.mark__outer { stroke: var(--color-accent); }
.mark__inner { stroke: var(--color-ink-deep); }
.wordmark:hover .mark__inner { stroke: var(--color-accent); }
.mark__outer, .mark__inner { transition: stroke var(--dur-short) var(--ease-out); }

.nav__links { display: flex; align-items: center; gap: var(--space-3xs); list-style: none; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 450;
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink-deep); background: var(--color-paper-3); }

.nav__toggle { display: none; }

.nav__sheet {
  display: none;
  pointer-events: auto;
  position: absolute; top: calc(100% + var(--space-2xs)); left: var(--space-sm); right: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklch, var(--color-paper-2) 94%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-panel);
}
.nav__sheet[data-open="true"] { display: grid; gap: var(--space-3xs); }
.nav__sheet a {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-ink); text-decoration: none; font-size: var(--text-sm);
}
.nav__sheet a:hover { background: var(--color-paper-3); }
.nav__sheet .btn { margin-top: var(--space-2xs); }

/* ============ MARQUEE FOLD ============ */
.fold {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: center;
  padding-block: calc(var(--space-3xl) + var(--space-md)) var(--space-2xl);
  overflow: hidden;
}

/* generated hero art sits behind the type and dissolves into the canvas */
.fold__art {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fold__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 58%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 58%, transparent 96%);
}
.fold__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--color-paper) 12%,
    oklch(13% 0.010 45 / 0.72) 46%,
    oklch(13% 0.010 45 / 0.25) 78%);
}

.fold__inner { position: relative; z-index: var(--z-base); }
.fold__display {
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 1.0;
  max-width: 13ch;
}
.fold__lede { margin-top: var(--space-md); }
.fold__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-lg); }
.fold__note { font-size: var(--text-sm); color: var(--color-neutral); margin-top: var(--space-md); max-width: 44ch; }

/* the hard change between fold and below-fold */
.fold__edge { height: var(--rule-thick); background: var(--color-rule); border: 0; }

/* ============ SECTIONS ============ */
/* anchor jumps must clear the fixed pill nav */
.section, .close, #disciplines, #engagements, #faq, #walkthrough {
  scroll-margin-top: calc(4.5rem + var(--space-md));
}
.section { padding-block: var(--space-2xl); position: relative; }
.section--tight { padding-block: var(--space-xl); }
.section__head { max-width: 38ch; margin-bottom: var(--space-xl); }
.section__title { font-size: var(--text-2xl); letter-spacing: -0.035em; }
.section__sub { margin-top: var(--space-sm); color: var(--color-muted); max-width: 54ch; }

/* ============ F1 · IRREGULAR BENTO (the four disciplines) ============ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklch, var(--color-paper-2) 88%, transparent);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.card:hover { transform: translateY(-2px); border-color: var(--color-rule-2); background: var(--color-paper-2); }
.card--wide { grid-column: span 7; }
.card--narrow { grid-column: span 5; }

/* cinematic media strip that dissolves into the card surface */
.card__media {
  position: relative;
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
  height: 9.5rem;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-paper-3);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
}
.card:hover .card__media img { opacity: 0.78; transform: scale(1.02); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    oklch(13% 0.010 45 / 0.10) 0%,
    oklch(13% 0.010 45 / 0.45) 55%,
    var(--color-paper-2) 100%);
}

.card__name {
  font-size: var(--text-lg);
  letter-spacing: -0.03em;
}
.card__role {
  font-family: var(--font-outlier);      /* outlier slot 2 of 2 — the discipline tag */
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}
.card__body { margin-top: var(--space-sm); color: var(--color-muted); max-width: 54ch; }
.card__list {
  list-style: none; padding: 0;
  margin-top: var(--space-md);
  display: grid; gap: var(--space-2xs);
}
.card__list li {
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding-left: var(--space-md);
  position: relative;
}
.card__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 7px; height: var(--rule-hair);
  background: var(--color-accent);
}

/* ============ F3 · SPEC SHEET (engagements) ============ */
.spec { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.spec caption { text-align: left; color: var(--color-neutral); padding-bottom: var(--space-sm); }
.spec th, .spec td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; vertical-align: top; }
.spec thead th {
  font-family: var(--font-outlier);
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral); font-weight: 500;
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  padding-bottom: var(--space-2xs);
}
.spec tbody tr { border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec tbody th { font-weight: 550; color: var(--color-ink-deep); font-size: var(--text-base); letter-spacing: -0.018em; }
.spec td { color: var(--color-muted); }
.spec .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-accent); }

/* ============ FAQ ============ */
.faq { display: grid; max-width: 62rem; }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__item:first-child { border-top: var(--rule-hair) solid var(--color-rule-2); }
.faq__q {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-md); font-weight: 500; letter-spacing: -0.026em;
  color: var(--color-ink-deep); cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-accent); }
.faq__sign { font-family: var(--font-outlier); color: var(--color-neutral); flex: none; }
.faq__item[open] .faq__sign { color: var(--color-accent); }
.faq__a { padding-bottom: var(--space-md); color: var(--color-muted); max-width: 64ch; }

/* ============ C2 · INLINE FORM AS CTA ============ */
.close { padding-block: var(--space-2xl); }
.close__panel {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklch, var(--color-paper-2) 80%, transparent);
  box-shadow: var(--shadow-card);
}
.close__title { font-size: var(--text-display-s); letter-spacing: -0.038em; max-width: 16ch; }
.form { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-lg); max-width: 34rem; }
.form__field { flex: 1 1 15rem; min-width: 0; }
.form__label {
  display: block; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-outlier); color: var(--color-neutral); margin-bottom: var(--space-3xs);
}
.form__input {
  width: 100%; min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.form__input::placeholder { color: var(--color-neutral); }
.form__input:hover { border-color: var(--color-ink); }
.form__input[aria-invalid="true"] { border-color: var(--color-accent-2); border-width: var(--rule-thick); }
.form__msg { flex: 1 0 100%; font-size: var(--text-sm); margin-top: var(--space-2xs); min-height: 1.5em; }
.form__msg[data-state="error"] { color: var(--color-accent-2); }
.form__msg[data-state="success"] { color: var(--color-accent); }
.form__submit { align-self: flex-end; }

/* ============ Ft1 · MAST-HEADED FOOTER ============ */
.foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl) var(--space-lg); }
.foot__mast {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-xl);
}
.foot__brand { display: grid; gap: var(--space-3xs); margin-right: auto; }
.foot__word {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-outlier);
  font-size: var(--text-md); font-weight: 600; letter-spacing: -0.03em;
  color: var(--color-ink-deep);
}
.foot__tag { font-size: var(--text-sm); color: var(--color-neutral); max-width: 34ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; padding: 0; }
.foot__links a { color: var(--color-muted); text-decoration: none; white-space: nowrap; font-size: var(--text-sm); }
.foot__links a:hover { color: var(--color-ink-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.foot__legal {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-neutral);
}

/* ============ REVEAL · fade only (atmospheric: no slide, no bounce) ============ */
.reveal {
  opacity: 0;
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 60rem) {
  .card--wide, .card--narrow { grid-column: span 12; }
  .fold { min-height: auto; padding-block: calc(var(--space-2xl) + var(--space-lg)) var(--space-xl); }
  .fold__display { max-width: 16ch; }
  .nav__links { display: none; }
  .nav__pill .btn--ghost { display: none; }
  /* must outrank `.nav__pill .btn--ghost` above — the toggle is itself a ghost button */
  .nav__pill .nav__toggle { display: inline-flex; }
  .nav__pill { width: 100%; justify-content: space-between; gap: var(--space-2xs); }
  .close__panel { padding: var(--space-lg) var(--space-md); }
}

@media (min-width: 60.0625rem) {
  .nav__sheet { display: none !important; }
}

@media (max-width: 40rem) {
  .shell { padding-inline: var(--space-sm); }
  .section { padding-block: var(--space-xl); }
  .fold__display { font-size: var(--text-display-s); max-width: none; }
  .section__title { font-size: var(--text-xl); }
  .close__title { font-size: var(--text-2xl); }
  .card { padding: var(--space-md); }
  .card__media {
    margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-sm);
    height: 7.5rem;
  }
  .fold__actions .btn { flex: 1 1 100%; }
  .form__submit { width: 100%; }

  /* below 640px the pill can't hold wordmark + CTA + toggle without pushing the
     toggle off-screen. The CTA lives in the sheet and full-width in the fold. */
  .nav__pill .btn--primary { display: none; }

  /* spec table becomes stacked definition rows */
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; }
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spec tbody tr { padding-block: var(--space-md); }
  .spec th, .spec td { padding: 0; }
  .spec td { margin-top: var(--space-3xs); }
  .spec td::before { content: attr(data-label) " \2014  "; color: var(--color-neutral); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; animation: none; }
}