.sgnl { --sgnl: var(--text); }
.sgnl-machine { --sgnl-active: #4a5bff; --sgnl-active-text: #8c97ff; }
.sgnl-wordmark { display: inline-flex; align-items: center; gap: 13px; font-family: "Archivo", var(--sans); font-size: 21px; font-stretch: 125%; font-weight: 400; letter-spacing: .14em; color: #eceef0; line-height: 1; white-space: nowrap; }
.sgnl-wordmark img { width: 36px; height: 36px; }

.sgnl-jumps { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.sgnl-lead-mark { margin-top: 26px; }
.sgnl-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 56px; margin-top: 28px; }
.sgnl .sgnl-intro h1 { margin: 0; font-size: clamp(38px, 4.3vw, 60px); line-height: 1.06; text-wrap: initial; }
.sgnl-nowrap { white-space: nowrap; }
.sgnl .sgnl-intro .cs-lede { margin: 0; font-size: 17px; line-height: 1.6; max-width: 40ch; }
.sgnl .sgnl-intro .cs-role { margin-top: 14px; font-size: 13px; }
.sgnl .sgnl-intro .cs-jump { margin-top: 20px; font-size: 14px; }
.sgnl-machine { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "head head" "drawing readout" "controls controls" "caption caption"; column-gap: 48px; margin-top: 48px; }
.sgnl-figure-head { grid-area: head; }
.sgnl-drawing { grid-area: drawing; }
.sgnl-readout { grid-area: readout; align-self: center; }
.sgnl-stage-controls { grid-area: controls; }
.sgnl-machine figcaption { grid-area: caption; }
.sgnl-figure-head { display: flex; justify-content: space-between; gap: 20px; padding: 0 0 20px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
.sgnl-figure-head span:last-child { font-family: var(--mono); font-size: 12px; }
.sgnl-drawing { display: block; width: 100%; height: auto; margin: 20px 0 26px; overflow: visible; }
.sgnl-guides { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.sgnl-part { fill: none; stroke: var(--text-3); stroke-width: 1; }
.sgnl-part circle:not(.sgnl-orbit) { fill: var(--bg); }
.sgnl-part .sgnl-orbit { fill: none; }
.sgnl-part text { fill: var(--text-2); stroke: none; font: 14px var(--sans); }
.sgnl-part .sgnl-ring-number { font: 40px var(--mono); letter-spacing: -3px; fill: var(--text); }
.sgnl-human > path { stroke-dasharray: 3 5; }
.sgnl-machine[data-stage="0"] [data-part="0"],
.sgnl-machine[data-stage="1"] [data-part="1"],
.sgnl-machine[data-stage="2"] [data-part="2"],
.sgnl-machine[data-stage="3"] [data-part="3"],
.sgnl-machine[data-stage="4"] [data-part="4"] { stroke: var(--sgnl-active); stroke-width: 2; }
.sgnl-machine[data-stage="0"] [data-part="0"] circle:not(.sgnl-orbit),
.sgnl-machine[data-stage="1"] [data-part="1"] circle:not(.sgnl-orbit),
.sgnl-machine[data-stage="2"] [data-part="2"] circle:not(.sgnl-orbit),
.sgnl-machine[data-stage="3"] [data-part="3"] circle:not(.sgnl-orbit) { fill: var(--sgnl-active); }
.sgnl-machine[data-stage="0"] [data-part="0"] text,
.sgnl-machine[data-stage="1"] [data-part="1"] text,
.sgnl-machine[data-stage="2"] [data-part="2"] text,
.sgnl-machine[data-stage="3"] .sgnl-ring-number,
.sgnl-machine[data-stage="4"] [data-part="4"] text { fill: var(--sgnl-active-text); }
.sgnl-stage-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.sgnl-stage-controls[hidden], .sgnl-interaction-hint[hidden] { display: none; }
.sgnl-stage-controls button { position: relative; padding: 17px 18px 16px; min-height: 74px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text-2); font: 14px var(--sans); text-align: left; cursor: pointer; }
.sgnl-stage-controls button + button { border-left: 1px solid var(--line); }
.sgnl-stage-controls button span { display: block; margin-bottom: 7px; font: 11px var(--mono); color: var(--text-3); letter-spacing: .02em; }
.sgnl-stage-controls button[aria-pressed="true"] { border-top: 2px solid var(--sgnl-active); padding-top: 16px; color: var(--sgnl-active-text); }
.sgnl-stage-controls button[aria-pressed="true"] span { color: var(--sgnl-active-text); }
.sgnl-stage-controls button:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 72%, transparent); }
.sgnl-stage-controls button[aria-pressed="true"]:hover { color: var(--sgnl-active-text); }
.sgnl-stage-controls button:active { transform: translateY(1px); }
.sgnl-stage-controls button:focus-visible { outline: 2px solid var(--sgnl-active-text); outline-offset: 4px; }
.sgnl-readout { min-height: 190px; padding: 24px 0; border-top: 1px solid var(--line); }
.sgnl-readout strong { display: block; font: 500 26px/1.15 var(--serif); text-wrap: balance; }
.sgnl-readout p { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--text-2); max-width: 40ch; }
.sgnl .sgnl-machine figcaption { font-family: var(--sans); font-size: 12px; }
.sgnl-loop-note { margin-top: 26px; color: var(--text-2); max-width: 64ch; }
.sgnl-engineering { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; margin-top: 48px; }
.sgnl-layer { min-width: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.sgnl-layer-label { display: flex; align-items: baseline; gap: 14px; }
.sgnl-index { font: 12px var(--mono); color: var(--text-3); }
.sgnl-layer-label h3 { font: 500 25px/1.2 var(--serif); letter-spacing: -.02em; }
.sgnl-layer-body h4 { margin-top: 24px; font: 500 17px/1.4 var(--sans); }
.sgnl-layer-body > p { margin-top: 10px; color: var(--text-2); max-width: 60ch; font-size: 15px; line-height: 1.6; }
.sgnl-specs { margin: 24px 0 0; }
.sgnl-specs > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; }
.sgnl-specs dt { color: var(--text); font-weight: 500; }
.sgnl-specs dd { margin: 0; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .sgnl-stage-controls button { transition: color 200ms ease, background-color 200ms ease, transform 200ms ease; }
}

.sgnl-flow { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sgnl-flow li { position: relative; min-height: 176px; padding: 24px 24px 26px 0; }
.sgnl-flow li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.sgnl-flow .n { display: block; font-family: var(--mono); font-size: 12px; color: var(--sgnl); }
.sgnl-flow strong { display: block; margin-top: 28px; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.15; }
.sgnl-flow p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

.sgnl-boundary { max-width: 48em; margin-top: 28px; color: var(--text-2); }

/* The shared case-study stack has a reading-measure cap. SGNL's named system
   stack is deliberately compact enough to use the full track width on desktop. */
.sgnl-engineering-track .cs-stack { max-width: none; gap: 0 22px; }
img.sgnl-typesafe-mark { filter: grayscale(1) contrast(300%) invert(1); mix-blend-mode: screen; }

.sgnl-principles { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.sgnl-principles li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.sgnl-principles strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.sgnl-principles span { display: block; margin-top: 8px; color: var(--text-2); }

@media (max-width: 900px) {
  .sgnl-intro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sgnl .sgnl-intro .cs-lede { max-width: 54ch; }
  .sgnl-machine { column-gap: 28px; }
  .sgnl-readout strong { font-size: 22px; }
  .sgnl-engineering { gap: 40px 32px; }
  .sgnl-machine { width: 100%; }
  .sgnl-flow { grid-template-columns: minmax(0, 1fr); }
  .sgnl-flow li, .sgnl-flow li + li { min-height: 0; padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .sgnl-flow li:last-child { border-bottom: 0; }
  .sgnl-flow strong { margin-top: 10px; }
  .sgnl-principles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .sgnl-machine { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "drawing" "controls" "readout" "caption"; margin-top: 36px; }
  .sgnl .sgnl-intro h1 { font-size: clamp(34px, 8.5vw, 46px); }
  .sgnl-readout { border-top: 0; }
  .sgnl-engineering { grid-template-columns: minmax(0, 1fr); }
  .sgnl-specs > div { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
  .sgnl-drawing { margin: 24px 0; }
  .sgnl-part text { font-size: 19px; }
  .sgnl-human > text:last-of-type { font-size: 16px; }
  .sgnl-stage-controls button { font-size: 12px; }
  .sgnl-readout { min-height: 188px; }
}