/* ============================================================================
   Steeplejack Robotics — document pages
   ----------------------------------------------------------------------------
   Shared by /white-paper/ and /engineering/. Both are generated from the
   markdown in docs/ by scripts/render-docs.js, so the class names here are the
   contract with that script — renaming one means changing both.

   The two pages differ in what they contain, not in how they read: the same
   measure, the same scale, the same sticky contents rail. Page-specific
   treatments (the propositions panel, the project cards) are grouped at the
   bottom under their own headings.
   ============================================================================ */

.doc-page {
  --doc-rail: 15.5rem;
  --doc-gap: clamp(2rem, 4vw, 4.5rem);
  /* Anchors must land below the fixed header, not underneath it. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

html:has(.doc-page) {
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

/* --- Compact hero --------------------------------------------------------
   Deliberately not full-viewport: the landing page owns that treatment, and a
   reader arriving here wants the content. */

.doc-hero {
  padding: calc(var(--header-h) + var(--space-xl)) var(--gutter) var(--space-xl);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-sunk);
}

.doc-hero__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.doc-hero__mark {
  width: clamp(3.25rem, 6vw, 5rem);
  height: auto;
}

.doc-hero__kicker {
  color: var(--orange-ink);
  font: 700 0.72rem/1.2 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.doc-hero h1 {
  margin-top: var(--space-xs);
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.doc-hero__subtitle {
  max-width: 46rem;
  margin-top: var(--space-s);
  color: var(--navy);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.35;
}

.doc-hero__note {
  max-width: var(--measure);
  margin-top: var(--space-m);
  padding-left: var(--space-s);
  border-left: 3px solid var(--orange);
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.6;
}

.doc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: var(--space-m);
  color: var(--ink-soft);
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-hero__actions {
  margin-top: var(--space-l);
}

/* --- Body layout --------------------------------------------------------- */

.doc-body {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-2xl) var(--gutter) var(--space-3xl);
  display: grid;
  grid-template-columns: var(--doc-rail) minmax(0, 1fr);
  align-items: start;
  gap: var(--doc-gap);
}

/* --- Sticky contents rail ------------------------------------------------ */

.doc-nav {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  max-height: calc(100dvh - var(--header-h) - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.doc-nav__summary {
  display: none;
}

.doc-nav__label {
  margin-bottom: var(--space-s);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font: 700 0.66rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.doc-nav__list a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.75rem;
  border-left: 2px solid var(--rule-soft);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.doc-nav__list a:hover {
  color: var(--navy);
  border-left-color: var(--rule);
}

/* Scroll-spy marks the section the reader is in; see scripts/doc.js. */
.doc-nav__list a[data-current] {
  color: var(--navy);
  border-left-color: var(--orange);
  font-weight: 600;
}

.doc-nav__num {
  display: inline-block;
  min-width: 1.5em;
  color: var(--orange-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Article typography -------------------------------------------------- */

.doc-article {
  min-width: 0;
}

.doc-section {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.doc-section + .doc-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule-soft);
}

/* Section headings carry a large, light numeral in the brand orange, set in the
   margin on wide screens and above the title when the rail folds away. */
.doc-section__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
}

.doc-section__num {
  color: var(--orange-display);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.doc-section__title {
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.doc-section > * + * {
  margin-top: var(--space-m);
}

/* Only prose headings — the ones the markdown renderer emits without a class.
   Component headings (.project__title, .constraint__title) style themselves. */
.doc-article h3:not([class]) {
  max-width: var(--measure);
  margin-top: var(--space-l);
  font-size: var(--step-2);
  letter-spacing: -0.015em;
}

.doc-article h4:not([class]) {
  max-width: var(--measure);
  margin-top: var(--space-m);
  font-size: var(--step-1);
}

.doc-article p {
  max-width: var(--measure);
  line-height: 1.75;
}

.doc-article ul,
.doc-article ol {
  max-width: var(--measure);
  padding-inline-start: 1.35em;
}

.doc-article li {
  line-height: 1.7;
}

.doc-article li + li {
  margin-top: var(--space-2xs);
}

.doc-article strong {
  color: var(--navy);
}

.doc-article hr {
  max-width: var(--measure);
  margin-block: var(--space-l);
  border-top: 1px solid var(--rule-soft);
}

/* A paragraph or list item that opens with a bold lead-in reads as a definition
   rather than prose; give the lead-in a little air after it. */
.doc-lead-in > strong:first-child {
  display: block;
  margin-bottom: 0.15em;
}

/* --- Pull quote ---------------------------------------------------------- */

.doc-pullquote {
  max-width: var(--measure);
  margin-block: var(--space-l);
  padding-left: var(--space-m);
  border-left: 4px solid var(--orange);
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.35;
}

/* --- Propositions panel (white paper Summary) ----------------------------
   The four propositions are the spine of the document, so they are lifted out
   of the prose into a panel of their own. */

.doc-propositions {
  max-width: 54rem;
  margin-block: var(--space-l);
  padding: var(--space-l);
  background: var(--navy);
  color: white;
  border-top: 5px solid var(--orange);
}

.doc-propositions__label {
  color: var(--orange);
  font: 700 0.68rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.doc-propositions ol {
  max-width: none;
  margin-top: var(--space-m);
  padding: 0;
  display: grid;
  gap: var(--space-s);
  list-style: none;
  counter-reset: proposition;
}

.doc-propositions li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  counter-increment: proposition;
  line-height: 1.6;
}

.doc-propositions li::before {
  content: counter(proposition, decimal-leading-zero);
  color: var(--orange);
  font: 700 1.35rem/1 var(--font-display);
}

.doc-propositions strong {
  display: block;
  color: white;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.doc-propositions li > div > span {
  display: block;
  margin-top: 0.3em;
  color: #cdd7e2;
}

/* --- "What this is not" -------------------------------------------------- */

.doc-negative {
  max-width: 54rem;
  margin-top: var(--space-m);
  padding: var(--space-l);
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
}

.doc-negative ul {
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
  list-style: none;
}

.doc-negative li {
  padding-left: 2rem;
  position: relative;
  line-height: 1.65;
}

/* A struck-through circle: this is the list of things the company is not. */
.doc-negative li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--orange) calc(50% - 1px),
    var(--orange) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.doc-negative strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

/* --- Risks --------------------------------------------------------------- */

.doc-risks {
  max-width: 54rem;
  margin-top: var(--space-m);
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.doc-risk {
  padding: var(--space-m);
  background: white;
}

.doc-risk__name {
  color: var(--navy);
  font: 700 0.95rem var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.doc-risk p {
  margin-top: var(--space-2xs);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* --- Cross-link to the other document ------------------------------------ */

.doc-crosslink {
  max-width: var(--page-max);
  margin: 0 auto var(--space-3xl);
  padding-inline: var(--gutter);
}

.doc-crosslink__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-l);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--orange);
  background: var(--bg-sunk);
  color: var(--navy);
  text-decoration: none;
  transition: background var(--dur-fast), transform var(--dur-fast);
}

.doc-crosslink__card:hover {
  background: white;
  transform: translateY(-2px);
}

.doc-crosslink__card img {
  width: 3rem;
  height: auto;
}

.doc-crosslink__label {
  display: block;
  color: var(--orange-ink);
  font: 700 0.68rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.doc-crosslink__title {
  display: block;
  margin-top: 0.2rem;
  font: 700 var(--step-2) var(--font-display);
  letter-spacing: -0.02em;
}

.doc-crosslink__blurb {
  display: block;
  max-width: 46ch;
  margin-top: 0.35rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.doc-crosslink__arrow {
  color: var(--orange-ink);
  font-size: 1.6rem;
}

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

@media (max-width: 1023px) {
  .doc-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }

  /* The rail folds into a disclosure that sits under the header. */
  .doc-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    max-height: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    background: rgb(252 252 253 / 0.96);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(12px);
  }

  .doc-nav__label {
    display: none;
  }

  .doc-nav__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    color: var(--navy);
    font: 700 0.72rem var(--font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }

  .doc-nav__summary::-webkit-details-marker {
    display: none;
  }

  .doc-nav__summary::after {
    content: '▾';
    color: var(--orange-ink);
    transition: transform var(--dur-fast);
  }

  .doc-nav[open] .doc-nav__summary::after,
  .doc-nav__disclosure[open] .doc-nav__summary::after {
    transform: rotate(180deg);
  }

  .doc-nav__list {
    max-height: 50dvh;
    overflow-y: auto;
    padding-bottom: var(--space-s);
  }

  .doc-section__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

@media (max-width: 600px) {
  .doc-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-crosslink__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-crosslink__arrow {
    display: none;
  }

  .doc-propositions,
  .doc-negative {
    padding: var(--space-m);
  }

  .doc-propositions li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* --- Motion -------------------------------------------------------------- */

/* Restrained: sections fade up a little on first reveal, and nothing else. */
@media (prefers-reduced-motion: no-preference) {
  .doc-section[data-reveal] {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }

  .doc-section[data-reveal='shown'] {
    opacity: 1;
    transform: none;
  }
}

@media print {
  /* The reveal animation must not follow the page into print or PDF: a section
     that was never scrolled into view would print blank. */
  .doc-section[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .doc-nav,
  .doc-crosslink,
  .doc-hero__actions {
    display: none;
  }

  .doc-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .doc-section {
    break-inside: avoid;
  }
}

/* ============================================================================
   The capability ladder (/engineering/)
   ----------------------------------------------------------------------------
   Everything below is specific to that page. The governing rule: a numbered
   project card and a cross-cutting constraint must never be mistakable for one
   another. Projects are numbered, bordered and field-structured; constraints
   are marked with an icon, unnumbered, and set in a grid apart from the phase
   flow. Confusing the two is the error the source document exists to prevent.
   ============================================================================ */

/* --- Phase stepper -------------------------------------------------------
   Sticky under the site header: with twenty projects a reader needs to know
   which of the six phases they are in without scrolling back. */

.phase-stepper {
  --stepper-h: 4.5rem;
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  background: rgb(252 252 253 / 0.96);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(12px);
}

.phase-stepper ol {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.phase-stepper a {
  display: flex;
  align-items: center;
  min-height: var(--stepper-h);
  gap: 0.55rem;
  height: 100%;
  padding: 0.7rem 0.6rem;
  border-top: 3px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.phase-stepper a:hover {
  color: var(--navy);
  background: var(--bg-sunk);
}

.phase-stepper__num {
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 700 0.72rem var(--font-display);
}

.phase-stepper__text {
  min-width: 0;
}

/* Phase titles wrap to two lines rather than truncating: "Perception and
   measure…" tells a reader nothing. */
.phase-stepper__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font: 700 0.7rem/1.2 var(--font-display);
  letter-spacing: 0.01em;
}

.phase-stepper__range {
  display: block;
  font-size: 0.66rem;
  line-height: 1.3;
  opacity: 0.85;
}

/* Marked by scripts/doc.js as the reader moves through the phases. */
.phase-stepper a[data-current] {
  color: var(--navy);
  border-top-color: var(--orange);
  background: var(--bg-sunk);
}

.phase-stepper a[data-current] .phase-stepper__num {
  color: white;
  background: var(--orange-ink);
  border-color: var(--orange-ink);
}

/* The rail clears the stepper as well as the header. */
.doc-page:has(.phase-stepper) {
  --stepper-h: 4.5rem;
}

.doc-page:has(.phase-stepper) .doc-nav {
  top: calc(var(--header-h) + var(--stepper-h) + 1.25rem);
  max-height: calc(100dvh - var(--header-h) - var(--stepper-h) - 3rem);
}

.doc-page:has(.phase-stepper) .doc-section {
  scroll-margin-top: calc(var(--header-h) + var(--stepper-h) + 1.25rem);
}

.doc-page:has(.phase-stepper) .project {
  scroll-margin-top: calc(var(--header-h) + var(--stepper-h) + 1.25rem);
}

/* --- Deep contents rail --------------------------------------------------- */

.doc-nav--deep .doc-nav__list > li + li {
  margin-top: 0.35rem;
}

.doc-nav__group {
  font-weight: 700;
  color: var(--navy);
}

.doc-nav__sub {
  margin: 0.1rem 0 0.5rem;
  padding: 0;
  list-style: none;
}

.doc-nav__sub a {
  padding-left: 1.5rem;
  font-size: 0.78rem;
}

/* --- Phase groupings ------------------------------------------------------ */

.phase__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem clamp(0.75rem, 1.6vw, 1.4rem);
}

.phase__eyebrow {
  grid-row: 1;
  color: var(--orange-ink);
  font: 700 0.72rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.phase__title {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.phase__range {
  grid-column: 2;
  grid-row: 2;
  color: var(--ink-soft);
  font: 600 0.78rem var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Gate notes are hard constraints on sequence. They must not read as prose. */
.phase__gate {
  max-width: 54rem;
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  background: var(--orange-wash);
  border: 1px solid var(--orange-edge);
  border-left: 5px solid var(--orange);
  color: var(--navy);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.6;
}

.phase__gate-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

/* --- Project cards -------------------------------------------------------- */

.project {
  max-width: 54rem;
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-l) var(--space-l);
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  /* No project card may be split across two pages of the PDF. */
  break-inside: avoid;
}

.project__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--rule);
}

.project__number {
  color: var(--orange-numeral);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.project__title {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.project__fields {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.project__label {
  margin-bottom: 0.25rem;
  color: var(--ink-soft);
  font: 700 0.66rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project__field p:not(.project__label) {
  max-width: 62ch;
  line-height: 1.7;
}

/* "Done when" is the falsifiable part, and the reason the document exists. */
.project__field--done {
  padding: var(--space-s) var(--space-m);
  background: white;
  border-left: 5px solid var(--orange);
}

.project__field--done .project__label {
  color: var(--orange-ink);
}

/* "Failure mode" carries different information from the rest: it is what goes
   wrong if the project is skipped or done badly. Warmer, and clearly apart. */
.project__field--failure {
  padding: var(--space-s) var(--space-m);
  background: var(--warn-wash);
  border-left: 5px solid var(--warn-rule);
}

.project__field--failure .project__label {
  color: var(--warn-ink);
}

/* --- Cross-cutting requirements ------------------------------------------
   Constraints, not work items. Unnumbered, marked with an icon, and set in a
   grid that looks nothing like the project cards above. */

.constraint-grid {
  max-width: 62rem;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-s);
  list-style: none;
}

.constraint {
  padding: var(--space-m);
  background: white;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--orange);
}

.constraint__icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.constraint__icon .ic-orange {
  stroke: var(--orange);
}

.constraint__title {
  margin-top: var(--space-s);
  font-size: var(--step-0);
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

.constraint p {
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Governing principles ------------------------------------------------- */

.principles {
  max-width: var(--measure);
  margin: var(--space-m) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
  list-style: none;
  counter-reset: principle;
}

.principles li {
  padding-left: var(--space-m);
  border-left: 3px solid var(--orange);
  line-height: 1.7;
  counter-increment: principle;
}

.principles__name {
  display: block;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

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

@media (max-width: 1023px) {
  /* The stepper scrolls sideways rather than shrinking each phase to nothing;
     the contents disclosure sits below it. */
  .phase-stepper ol {
    grid-template-columns: repeat(6, minmax(11rem, 1fr));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .phase-stepper li {
    scroll-snap-align: start;
  }

  .doc-page:has(.phase-stepper) .doc-nav {
    top: calc(var(--header-h) + var(--stepper-h));
    max-height: none;
  }
}

@media (max-width: 600px) {
  .project {
    padding: var(--space-s) var(--space-m) var(--space-m);
  }

  .project__field--done,
  .project__field--failure {
    padding: var(--space-s);
  }

  /* One column: clear the explicit placements or the eyebrow shares row 1
     with the title instead of sitting above it. */
  .phase__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .phase__eyebrow,
  .phase__title,
  .phase__range {
    grid-column: 1;
    grid-row: auto;
  }
}

@media print {
  .phase-stepper {
    display: none;
  }

  .project {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .phase__head,
  .phase__gate {
    break-after: avoid;
  }
}