/* ==========================================================================
   TopIzdaTo — design system
   Editorial, institutional, restrained. Hairlines instead of cards,
   type instead of decoration.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display face: Archivo — a contemporary editorial grotesk, used at its natural
   proportions. Weight-only variable file: there is no width axis to push, so the
   letterforms cannot be stretched or condensed. */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-wght-normal.woff2")
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Palette */
  --paper: #f3f1ec;
  --paper-raised: #faf9f6;
  --ink: #14150f;
  --ink-soft: #3d3f37;
  --ink-muted: #6d6f66;
  --rule: #d7d4cb;
  --rule-strong: #b8b4a9;
  /* Oxide red: editorial and distinctive, deliberately not startup blue.
     Used in small doses — meta, interaction, one word at most. */
  --accent: #a5351a;
  --accent-ink: #ffffff;
  --signal: #7c2412;

  /* Inverted surface */
  --on-ink-text: #eeece5;
  --on-ink-muted: #9a9c92;
  --on-ink-rule: #34362d;

  /* Type */
  --font-sans: "Instrument Sans", ui-sans-serif, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo Variable", "Helvetica Neue", Helvetica,
    "Segoe UI", Roboto, Arial, sans-serif;

  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo",
    "Cascadia Mono", "Roboto Mono", monospace;

  /* Fluid type scale */
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.13rem, 1.05rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.42rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.5rem + 3.1vw, 3.9rem);
  --step-5: clamp(2.7rem, 1.35rem + 6vw, 6.2rem);

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;
  --space-4xl: 10rem;

  /* Layout */
  --container: 82rem;
  --container-text: 46rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(3.5rem, 9vw, 8.5rem);

  --border-hair: 1px solid var(--rule);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* --- Utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
  transition: transform 0.15s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Layout primitives ---------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.section--ruled {
  border-top: var(--border-hair);
}

.section--ink {
  background: var(--ink);
  color: var(--on-ink-text);
}

.section--ink a:not(.btn) {
  color: var(--on-ink-text);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-l) var(--gutter);
}

.measure {
  max-width: 62ch;
}

.measure-narrow {
  max-width: 46ch;
}

.stack > * + * {
  margin-top: var(--space-s);
}

.stack-l > * + * {
  margin-top: var(--space-l);
}

/* --- Type ----------------------------------------------------------------- */

/* LEVEL 1 — display. Wide, heavy, calm. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.display--hero {
  font-size: var(--step-5);
  line-height: 0.96;
  letter-spacing: -0.022em;
}

.display--xl {
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.display--l {
  font-size: var(--step-3);
}

/* Archivo ships no italic here; emphasis is carried by colour, not a
   synthesised oblique. */
.display em,
.display i {
  font-style: normal;
  color: var(--accent);
}

.section--ink .display em,
.section--ink .display i {
  color: inherit;
  opacity: 0.55;
}

.h-sans {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}

.h-sans--l {
  font-size: var(--step-3);
}

.h-sans--m {
  font-size: var(--step-2);
}

.h-sans--s {
  font-size: var(--step-1);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.section--ink .lede {
  color: var(--on-ink-muted);
}

.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
}

.section--ink .label {
  color: var(--on-ink-muted);
}

.label--accent {
  color: var(--accent);
}

.muted {
  color: var(--ink-muted);
}

.prose p + p,
.prose ul + p,
.prose p + ul {
  margin-top: 1.1em;
}

.prose {
  text-wrap: pretty;
}

.prose h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
}

.prose h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-1);
  margin-top: 1.9em;
  margin-bottom: 0.45em;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose ul {
  list-style: none;
  margin-block: 1.1em;
}

.prose ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.4em;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6em;
  height: 1px;
  background: var(--rule-strong);
}

.prose ol {
  list-style: decimal;
  padding-left: 1.4em;
  margin-block: 1.1em;
}

.prose ol li {
  margin-bottom: 0.4em;
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose blockquote {
  margin-block: 1.8em;
  padding-left: var(--space-m);
  border-left: 2px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.16;
  letter-spacing: -0.014em;
}

.prose strong {
  font-weight: 600;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.6em;
  font-size: var(--step--1);
  text-align: left;
}

.prose thead {
  display: none;
}

.prose th,
.prose td {
  padding: 0.75em 0;
  border-bottom: var(--border-hair);
  vertical-align: top;
}

.prose td:first-child {
  width: 34%;
  padding-right: var(--space-m);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 1.05em;
}

@media (max-width: 40em) {
  .prose table,
  .prose tbody,
  .prose tr,
  .prose td {
    display: block;
    width: 100%;
  }
  .prose tr {
    padding-block: 0.75em;
    border-bottom: var(--border-hair);
  }
  .prose td {
    border-bottom: 0;
    padding-block: 0.15em;
  }
  .prose td:first-child {
    padding-top: 0;
  }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.35em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.btn:hover {
  --btn-bg: var(--accent);
  --btn-border: var(--accent);
  --btn-fg: var(--accent-ink);
}

.btn__arrow {
  transition: transform 0.25s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(0.25em);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--rule-strong);
}

.section--ink .btn--ghost {
  --btn-fg: var(--on-ink-text);
  --btn-border: var(--on-ink-rule);
}

.section--ink .btn--solid {
  --btn-bg: var(--on-ink-text);
  --btn-fg: var(--ink);
  --btn-border: var(--on-ink-text);
}

.btn--lg {
  padding: 1.05em 1.7em;
  font-size: var(--step-0);
}

.btn--block {
  width: 100%;
  justify-content: center;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Text link with rule underline */
.link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.15em;
  font-weight: 500;
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

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

/* --- Header --------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--border-hair);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
}

.wordmark__mark {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}

.nav__link {
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: 0.35em;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link[aria-current="page"],
.nav__link[data-active="true"] {
  color: var(--ink);
  border-color: var(--ink);
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  padding: 0.55em 0.8em;
  font-size: var(--step--1);
  cursor: pointer;
}

@media (max-width: 52em) {
  .masthead__nav {
    display: none;
  }
  .masthead__nav[data-open="true"] {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-s) var(--gutter) var(--space-m);
    background: var(--paper);
    border-bottom: var(--border-hair);
  }
  .masthead__nav[data-open="true"] .nav__link {
    width: 100%;
    padding-block: 0.8em;
    font-size: var(--step-1);
    border-bottom: var(--border-hair);
  }
  .nav-toggle {
    display: inline-block;
  }
  .masthead__cta {
    display: none;
  }
}

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

.hero {
  padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
}

.hero__grid {
  align-items: end;
}

.hero__headline {
  grid-column: 1 / -1;
}

.hero__aside {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 60em) {
  .hero__headline {
    grid-column: 1 / span 8;
  }
  .hero__aside {
    grid-column: 10 / -1;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* --- Rules & marquee-free dividers --------------------------------------- */

.rule {
  border: 0;
  border-top: var(--border-hair);
  margin: 0;
}

.section--ink .rule {
  border-color: var(--on-ink-rule);
}

/* --- Definition rows (how it works) -------------------------------------- */

.rows {
  border-top: var(--border-hair);
}

.section--ink .rows,
.section--ink .row {
  border-color: var(--on-ink-rule);
}

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xs) var(--gutter);
  padding-block: var(--space-l);
  border-bottom: var(--border-hair);
}

.row__index {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding-top: 0.35em;
}

.section--ink .row__index {
  color: var(--on-ink-muted);
}

.row__title {
  grid-column: 1 / -1;
}

.row__body {
  grid-column: 1 / -1;
  color: var(--ink-soft);
}

.section--ink .row__body {
  color: var(--on-ink-muted);
}

@media (min-width: 48em) {
  .row__index {
    grid-column: 1 / span 1;
  }
  .row__title {
    grid-column: 2 / span 4;
  }
  .row__body {
    grid-column: 7 / span 6;
  }
}

/* --- Path cards (bordered panels, not rounded cards) --------------------- */

.paths {
  display: grid;
  gap: 0;
  border-top: var(--border-hair);
}

.path {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-s) var(--gutter);
  padding-block: var(--space-l);
  border-bottom: var(--border-hair);
  text-decoration: none;
  position: relative;
  transition: background 0.25s var(--ease);
}

.path:hover {
  background: var(--paper-raised);
}

.section--ink .paths,
.section--ink .path {
  border-color: var(--on-ink-rule);
}

.section--ink .path__lede {
  color: var(--on-ink-muted);
}

.section--ink .path:hover {
  background: #1c1d16;
}

.section--ink .path:hover .path__go {
  color: var(--on-ink-text);
}

.section--ink .article-row,
.section--ink .articles {
  border-color: var(--on-ink-rule);
}

.path__index {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding-top: 0.4em;
}

.path__title {
  grid-column: 1 / -1;
}

.path__lede {
  grid-column: 1 / -1;
  color: var(--ink-soft);
}

.path__go {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.path:hover .path__go {
  color: var(--accent);
}

.path:hover .path__go .btn__arrow {
  transform: translateX(0.25em);
}

@media (min-width: 48em) {
  .path__index {
    grid-column: 1 / span 1;
  }
  .path__title {
    grid-column: 2 / span 4;
  }
  .path__lede {
    grid-column: 7 / span 4;
  }
  .path__go {
    grid-column: 11 / span 2;
    justify-self: end;
    align-self: center;
  }
}

/* --- Facts list ---------------------------------------------------------- */

.facts {
  display: grid;
  gap: 0;
  border-top: var(--border-hair);
}

.fact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-s);
  border-bottom: var(--border-hair);
  font-size: var(--step--1);
}

.fact__key {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fact__value {
  text-align: right;
  max-width: 42ch;
}

.section--ink .fact,
.section--ink .facts {
  border-color: var(--on-ink-rule);
}

.section--ink .fact__key {
  color: var(--on-ink-muted);
}

/* --- Pull statement ------------------------------------------------------ */

.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 30ch;
  text-wrap: balance;
}

/* --- Article list -------------------------------------------------------- */

.articles {
  border-top: var(--border-hair);
}

.article-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xs) var(--gutter);
  padding-block: var(--space-m);
  border-bottom: var(--border-hair);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

.article-row:hover {
  background: var(--paper-raised);
}

.article-row__meta {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-row__title {
  grid-column: 1 / -1;
}

.article-row__excerpt {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

@media (min-width: 48em) {
  .article-row__meta {
    grid-column: 1 / span 2;
    padding-top: 0.5em;
  }
  .article-row__title {
    grid-column: 3 / span 5;
  }
  .article-row__excerpt {
    grid-column: 8 / span 5;
  }
}

/* --- Tags ---------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 0.3em 0.65em;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Forms -------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-m);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}

@media (max-width: 40em) {
  .form__grid {
    grid-template-columns: 1fr;
  }
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-size: var(--step--1);
  font-weight: 500;
}

.field__hint {
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.field__req {
  color: var(--signal);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.75em 0.85em;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-size: var(--step-0);
  transition:
    border-color 0.15s var(--ease),
    background 0.15s var(--ease);
  appearance: none;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--ink);
  background: #fff;
}

.textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15em) 1.15em,
    calc(100% - 0.85em) 1.15em;
  background-size:
    0.3em 0.3em,
    0.3em 0.3em;
  background-repeat: no-repeat;
  padding-right: 2.5em;
}

.checkgroup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.5rem var(--space-m);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: var(--step--1);
  line-height: 1.45;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.22em;
  accent-color: var(--accent);
}

.form__consent {
  padding-top: var(--space-2xs);
  border-top: var(--border-hair);
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

.form__note {
  font-size: 0.8rem;
  color: var(--ink-muted);
  max-width: 42ch;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  font-size: var(--step--1);
}

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

.form__status[data-state="ok"] {
  border-color: var(--ink);
}

.form__status[hidden] {
  display: none;
}

/* --- Application panel -------------------------------------------------- */

.apply {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-l);
}

.apply__grid {
  align-items: start;
}

.apply__intro {
  grid-column: 1 / -1;
}

.apply__form {
  grid-column: 1 / -1;
}

@media (min-width: 62em) {
  .apply__intro {
    grid-column: 1 / span 4;
    position: sticky;
    top: 6rem;
  }
  .apply__form {
    grid-column: 6 / -1;
  }
}

/* --- Split section ------------------------------------------------------ */

.split {
  align-items: start;
}

.split__lead {
  grid-column: 1 / -1;
}

.split__body {
  grid-column: 1 / -1;
}

@media (min-width: 60em) {
  .split__lead {
    grid-column: 1 / span 5;
  }
  .split__body {
    grid-column: 7 / -1;
  }
}

/* --- Triptych ----------------------------------------------------------- */

.triptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l) var(--gutter);
}

.triptych > * {
  padding-top: var(--space-s);
  border-top: 1px solid var(--ink);
}

@media (min-width: 42em) {
  .triptych {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60em) {
  .triptych {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.triptych__title {
  margin-bottom: var(--space-xs);
}

.triptych__body {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.section--ink .triptych > * {
  border-top-color: var(--on-ink-text);
}

.section--ink .triptych__body {
  color: var(--on-ink-muted);
}

/* --- Footer ------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--on-ink-text);
  padding-block: var(--space-2xl) var(--space-l);
}

.footer a {
  color: var(--on-ink-text);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--on-ink-muted);
}

.footer__grid {
  gap: var(--space-xl) var(--gutter);
}

.footer__brand {
  grid-column: 1 / -1;
}

.footer__col {
  grid-column: span 6;
}

@media (min-width: 60em) {
  .footer__brand {
    grid-column: 1 / span 4;
  }
  .footer__col {
    grid-column: span 2;
  }
  .footer__legal-col {
    grid-column: 9 / span 4;
  }
}

.footer__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  margin-bottom: var(--space-s);
}

.footer__list li + li {
  margin-top: 0.55em;
}

.footer__list {
  font-size: var(--step--1);
}

.footer__legal {
  font-size: 0.8rem;
  color: var(--on-ink-muted);
  line-height: 1.6;
}

.footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-s);
  border-top: 1px solid var(--on-ink-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--on-ink-muted);
}

/* --- Article page ------------------------------------------------------- */

.article-head {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-l);
}

.article-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: var(--border-hair);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-body {
  max-width: var(--container-text);
  font-size: var(--step-1);
  line-height: 1.6;
}

/* ==========================================================================
   DESIGN PASS 2 — visual identity
   Adds: lattice motif, meta bars, editorial hero, path index rows,
   network map, conversion furniture. Structure and copy unchanged.
   ========================================================================== */

:root {
  --paper-deep: #ebe8df;
  --grid-line: rgba(20, 21, 15, 0.11);
  --grid-line-ink: rgba(238, 236, 229, 0.09);
  --accent-quiet: rgba(165, 53, 26, 0.06);
  --step-6: clamp(2.9rem, 1.1rem + 7.4vw, 6.9rem);
  --meta: 0.68rem;
}

/* --- Lattice motif ------------------------------------------------------- */

/* The wordmark is a 2×2 lattice. Repeated as a field, it becomes the
   graphic language: infrastructure, grid, no illustration. */
.lattice {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 4.75rem 4.75rem;
  background-position: 50% 0;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 100%
  );
}

/* Denser corner block: the lattice becomes a mark, not just a texture. */
.lattice--corner {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 2.375rem 2.375rem;
  mask-image: radial-gradient(60% 70% at 100% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(
    60% 70% at 100% 0%,
    #000 0%,
    transparent 70%
  );
}

.section--ink .lattice {
  background-image:
    linear-gradient(to right, var(--grid-line-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-ink) 1px, transparent 1px);
}

.has-lattice {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.has-lattice > .shell {
  position: relative;
  z-index: 1;
}

/* Small square glyph used as a bullet / node marker. */
.quad {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 0.72em;
  height: 0.72em;
  flex: none;
}

.quad i {
  background: currentColor;
  display: block;
}

.quad i:nth-child(2),
.quad i:nth-child(3) {
  opacity: 0.32;
}

/* --- Meta bar ----------------------------------------------------------- */

.metabar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55em 1.15em;
  font-family: var(--font-mono);
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section--ink .metabar {
  color: var(--on-ink-muted);
}

.metabar__dot {
  width: 3px;
  height: 3px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

/* On narrow screens the separators end up orphaned at line starts. */
@media (max-width: 40em) {
  .metabar {
    gap: 0.4em 0.95em;
  }
  .metabar__dot {
    display: none;
  }
}

.metabar strong {
  font-weight: 400;
  color: var(--accent);
}

/* --- Editorial hero ----------------------------------------------------- */

.hero-x {
  padding-block: clamp(2.25rem, 5vw, 4.5rem) 0;
}

.hero-x__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
}

/* The main statement is the poster. Everything else in the hero is support. */
.hero-x__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-6);
  line-height: 0.94;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  margin-block: clamp(1.25rem, 2.6vw, 2.25rem) 0;
  text-wrap: balance;
  max-width: 19ch;
}

@media (max-width: 40em) {
  .hero-x__title {
    line-height: 0.98;
    letter-spacing: -0.018em;
    max-width: none;
  }
}

/* For longer statements: one notch down, one notch wider, so the line count
   stays at three and the CTA below stays near the fold. */
.hero-x__title--long {
  font-size: var(--step-5);
  max-width: 24ch;
}

/* Supporting statement: roughly a fifth of the visual weight. */
.hero-x__sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-top: clamp(1.25rem, 2.4vw, 2.25rem);
  text-wrap: pretty;
}

.hero-x__title em {
  font-style: normal;
  color: var(--accent);
}

.hero-x__sub .u {
  color: var(--ink);
  box-shadow: inset 0 -0.09em 0 var(--accent);
}

/* Bottom rail: lede + actions + index, separated by hairlines. */
.hero-x__rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-top: clamp(2rem, 5vw, 4.5rem);
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink);
}

.hero-x__rail > * {
  min-width: 0;
}

@media (min-width: 60em) {
  .hero-x__rail {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    gap: var(--gutter);
    align-items: start;
  }
  .hero-x__rail > * + * {
    padding-left: var(--gutter);
    border-left: var(--border-hair);
  }
}

.hero-x__lede {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.hero-x__note {
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.hero-x__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: stretch;
}

@media (min-width: 60em) {
  .hero-x__actions {
    min-width: 15rem;
  }
}

/* --- Participation path index ------------------------------------------- */

.pathx-set {
  border-top: 1px solid var(--ink);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.pathx {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  padding-block: clamp(1.6rem, 3.2vw, 3rem);
  border-bottom: var(--border-hair);
  text-decoration: none;
  transition: background 0.3s var(--ease);
}

/* Accent rule that draws itself in on hover. */
.pathx::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.pathx:hover::before,
.pathx:focus-visible::before {
  transform: scaleX(1);
}

.pathx:hover {
  background: linear-gradient(
    to right,
    var(--accent-quiet),
    transparent 65%
  );
}

.pathx__num {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--ink-muted);
  padding-top: 0.55em;
  transition: color 0.3s var(--ease);
}

.pathx:hover .pathx__num {
  color: var(--accent);
}

.pathx__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1rem + 3.4vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: block;
}

/* The verb line: what this path actually asks of you. */
.pathx__verb {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink);
  display: block;
  margin-top: 0.5rem;
}

.section--ink .pathx__verb {
  color: var(--on-ink-text);
}

.pathx__for {
  font-family: var(--font-mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.pathx__body {
  display: grid;
  gap: var(--space-s);
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.45;
  max-width: 58ch;
  align-self: center;
}

.pathx__cta {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.2em;
  justify-self: start;
  transition:
    color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.pathx:hover .pathx__cta {
  color: var(--accent);
  border-color: var(--accent);
}

.pathx:hover .pathx__cta .btn__arrow {
  transform: translateX(0.3em);
}

@media (min-width: 62em) {
  .pathx {
    grid-template-columns: 6rem minmax(0, 1.45fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--gutter);
  }
  .pathx__title {
    align-self: start;
    display: block;
  }
  .pathx__for {
    display: block;
    margin-top: 0.5rem;
  }
  .pathx__cta {
    align-self: center;
  }
}

/* --- The chain (who we connect) ----------------------------------------- */

/* A typographic sequence rather than a diagram: each stage is a band, and the
   last band is visibly not yet real. */
.chain {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.chain__stage {
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  border-top: 1px solid var(--ink);
}

.chain__stage:last-child {
  border-bottom: 1px solid var(--rule);
}

.chain__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65em 1.15em;
}

.chain__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.022em;
  text-transform: uppercase;
}

.chain__note {
  font-family: var(--font-mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.chain__trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l) var(--gutter);
  margin-top: var(--space-s);
}

@media (min-width: 52em) {
  .chain__trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chain__item {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.chain__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-transform: uppercase;
}

.chain__body {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.5;
  max-width: 34ch;
}

/* Final stage: real but unbuilt. Dimmed, spaced, explicitly labelled. */
.chain__stage--future {
  opacity: 0.5;
}

.chain__future {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 1.1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: -0.014em;
  text-transform: uppercase;
}

.chain__arrow {
  color: var(--ink-muted);
  font-weight: 400;
}

/* --- Chips (trust strip) ------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.75em;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-raised);
}

.section--ink .chip {
  border-color: var(--on-ink-rule);
  background: transparent;
  color: var(--on-ink-text);
}

/* --- Compact path picker (careers hero) --------------------------------- */

.pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 52em) {
  .pick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: var(--border-hair);
  }
}

.pick__item {
  display: grid;
  gap: 0.4rem;
  padding: var(--space-m) 0;
  border-bottom: var(--border-hair);
  text-decoration: none;
  position: relative;
  transition: background 0.25s var(--ease);
}

@media (min-width: 52em) {
  .pick__item {
    border-bottom: 0;
    padding: var(--space-m) var(--gutter) var(--space-m) 0;
  }
  .pick__item + .pick__item {
    padding-left: var(--gutter);
    border-left: var(--border-hair);
  }
}

.pick__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.pick__item:hover::before {
  transform: scaleX(1);
}

.pick__num {
  font-family: var(--font-mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

.pick__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.06;
  letter-spacing: -0.016em;
  text-transform: uppercase;
}

.pick__for {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.pick__go {
  font-size: var(--step--1);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.2rem;
}

.pick__item:hover .pick__go {
  color: var(--accent);
}

.pick__item:hover .pick__go .btn__arrow {
  transform: translateX(0.3em);
}

/* --- Sticky apply bar --------------------------------------------------- */

.applybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--on-ink-text);
  border-top: 1px solid var(--on-ink-rule);
  transform: translateY(0);
  transition: transform 0.35s var(--ease);
}

/* Hidden state is applied by script only, so no-JS keeps the CTA visible. */
.js-applybar .applybar[data-hidden="true"] {
  transform: translateY(110%);
}

.applybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: 0.7rem;
}

.applybar__text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.applybar__role {
  font-family: var(--font-mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.applybar__line {
  font-size: var(--step--1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 40em) {
  .applybar__text {
    display: none;
  }
  .applybar__inner {
    justify-content: stretch;
  }
  .applybar .btn {
    width: 100%;
    justify-content: center;
  }
}

.applybar .btn--solid {
  --btn-bg: var(--on-ink-text);
  --btn-fg: var(--ink);
  --btn-border: var(--on-ink-text);
}

.applybar .btn--solid:hover {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-border: var(--accent);
}

/* Keep the footer clear of the fixed bar. */
body:has(.applybar) .footer {
  padding-bottom: calc(var(--space-l) + 4.5rem);
}

/* --- Section variants added in this pass -------------------------------- */

.section--deep {
  background: var(--paper-deep);
}

.rule--strong {
  border-top: 1px solid var(--ink);
}

.eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--ink);
}

/* LEVEL 1, section scale. */
.h-editorial {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 0.99;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h-editorial em {
  font-style: normal;
  color: var(--accent);
}

.section--ink .h-editorial em {
  color: inherit;
  opacity: 0.5;
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .applybar {
    display: none;
  }
  .masthead,
  .footer,
  .apply {
    display: none;
  }
  body {
    background: #fff;
  }
}