/* ==========================================================================
   BlueArk Labs — Bench

   Four products sit on one bench, each at a different stage of completion.
   The design material is the stage itself: what a visitor can pick up and
   use right now, and what is still capped off. Every readout on this page
   is a fact from content/products.json with a verification date behind it.

   Ground is the bench surface. Plate is a machined face set on it. Nothing
   floats: separation comes from tone, hairline weight, and a contact
   response under the pointer. Square geometry throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Type — self-hosted, OFL

   Archivo carries the engraved voice: a grotesque with a real width axis, so
   product names can be set heavy and slightly narrowed from one file.
   IBM Plex Mono carries the readout voice: stages, versions, dates, coverage
   states. Two families, two jobs, no third voice.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens

   Light is the default: the brand sheet is light and the use scene is a desk
   in daylight. Dark is the same bench under a work lamp — the roles are
   identical, only the material values change.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces */
  --ground: #e6e4df;
  --plate: #f2f1ed;
  --plate-sunk: #d8d6d0;

  /* Marks */
  --ink: #14171a;
  --ink-2: #565b60;
  --ink-3: #575c61;

  /* Structure */
  --rule: #c9c6bf;
  --rule-strong: #a6a29a;

  /* Signals — each carries one stable meaning */
  --signal: #1b44c4;
  --signal-hover: #12329b;
  --signal-ink: #f4f3f0;
  --brass: #6b552b;
  --open: #1f6144;
  --closed: #9a3b33;

  /* Type */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --t-display: clamp(2.75rem, 7vw, 5rem);
  --t-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --t-h3: clamp(1.25rem, 2vw, 1.625rem);
  --t-plate: clamp(1.125rem, 1.6vw, 1.375rem);
  --t-lede: clamp(1.0625rem, 1.3vw, 1.25rem);
  --t-body: 1rem;
  --t-label: 0.75rem;
  --t-micro: 0.6875rem;

  /* Space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --section-y: clamp(72px, 9vw, 128px);

  /* Structure */
  --shell: 1240px;
  --gutter: 20px;
  --gap: 16px;
  --header-h: 60px;

  /* Motion */
  --dur: 160ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #14161a;
    --plate: #1d2025;
    --plate-sunk: #0d0f12;
    --ink: #e9e9e6;
    --ink-2: #a2a6aa;
    --ink-3: #8b9095;
    --rule: #2c3036;
    --rule-strong: #434951;
    --signal: #7fa0ff;
    --signal-hover: #a3bbff;
    --signal-ink: #0d0f12;
    --brass: #c9a961;
    --open: #62b58c;
    --closed: #e08079;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #14161a;
  --plate: #1d2025;
  --plate-sunk: #0d0f12;
  --ink: #e9e9e6;
  --ink-2: #a2a6aa;
  --ink-3: #8b9095;
  --rule: #2c3036;
  --rule-strong: #434951;
  --signal: #7fa0ff;
  --signal-hover: #a3bbff;
  --signal-ink: #0d0f12;
  --brass: #c9a961;
  --open: #62b58c;
  --closed: #e08079;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #e6e4df;
  --plate: #f2f1ed;
  --plate-sunk: #d8d6d0;
  --ink: #14171a;
  --ink-2: #565b60;
  --ink-3: #575c61;
  --rule: #c9c6bf;
  --rule-strong: #a6a29a;
  --signal: #1b44c4;
  --signal-hover: #12329b;
  --signal-ink: #f4f3f0;
  --brass: #6b552b;
  --open: #1f6144;
  --closed: #9a3b33;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --gap: 20px;
    --header-h: 68px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  background: var(--ground);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

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

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Shell and grid — 12 / 8 / 4 columns
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
}

.grid > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

[data-span="4"] {
  grid-column-end: span 4;
}

@media (min-width: 768px) {
  [data-span-md="4"] { grid-column-end: span 4; }
  [data-span-md="5"] { grid-column-end: span 5; }
  [data-span-md="8"] { grid-column-end: span 8; }
}

@media (min-width: 1024px) {
  [data-span-lg="3"] { grid-column-end: span 3; }
  [data-span-lg="4"] { grid-column-end: span 4; }
  [data-span-lg="5"] { grid-column-end: span 5; }
  [data-span-lg="6"] { grid-column-end: span 6; }
  [data-span-lg="7"] { grid-column-end: span 7; }
  [data-span-lg="8"] { grid-column-end: span 8; }
  [data-span-lg="12"] { grid-column-end: span 12; }
  [data-start-lg="6"] { grid-column-start: 6; }
  [data-start-lg="7"] { grid-column-start: 7; }
  [data-start-lg="9"] { grid-column-start: 9; }
}

/* --------------------------------------------------------------------------
   5. Type roles

   The engraved voice is Archivo, narrowed and heavy. The readout voice is
   IBM Plex Mono, small and tracked. Sizes decrease strictly with depth at
   every breakpoint — nothing decorative outranks a heading.
   -------------------------------------------------------------------------- */

.engraved {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -0.038em;
  line-height: 0.98;
}

.h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.03em;
}

.h3 {
  font-size: var(--t-h3);
}

.lede {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: var(--t-lede);
  line-height: 1.5;
}

.copy {
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.7;
}

.copy strong {
  color: var(--ink);
  font-weight: 600;
}

/* Readout — every measured fact on the page uses this voice. */
.readout {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-3);
}

.readout--ink {
  color: var(--ink);
  font-weight: 600;
}

.readout--open {
  color: var(--open);
  font-weight: 600;
}

.readout--closed {
  color: var(--closed);
  font-weight: 600;
}

.readout--brass {
  color: var(--brass);
  font-weight: 600;
}

.micro {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   6. Header — the bench edge
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: var(--header-h);
}

.brand {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 26px;
}

.brand__logo--dark {
  display: none;
}

:root[data-theme="dark"] .brand__logo--light {
  display: none;
}

:root[data-theme="dark"] .brand__logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}

/* Position readout — names the instrument currently in view. */
.station {
  display: none;
  flex: 1;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

@media (min-width: 900px) {
  .station {
    display: flex;
  }
}

.station__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.station__name {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}

.nav {
  display: none;
  align-items: center;
  gap: var(--s1);
  margin-left: auto;
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }
}

.nav__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}

.nav__item:hover,
.nav__item[aria-current="true"] {
  color: var(--ink);
}

.theme-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--plate);
  color: var(--ink-2);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

@media (min-width: 768px) {
  .theme-toggle {
    margin-left: var(--s2);
  }
}

.theme-toggle:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.theme-toggle:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
}

.theme-toggle [data-icon="sun"] {
  display: none;
}

:root[data-theme="dark"] .theme-toggle [data-icon="sun"] { display: block; }
:root[data-theme="dark"] .theme-toggle [data-icon="moon"] { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle [data-icon="sun"] { display: block; }
  :root:not([data-theme="light"]) .theme-toggle [data-icon="moon"] { display: none; }
}

.menu-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: var(--s1);
  border: 1px solid var(--rule);
  background: var(--plate);
  color: var(--ink);
  cursor: pointer;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
}

.mobile-menu {
  position: absolute;
  top: var(--header-h);
  right: 0;
  left: 0;
  z-index: 40;
  padding: var(--s2) var(--gutter) var(--s5);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--ground);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 52px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--t-h3);
  letter-spacing: -0.022em;
  text-decoration: none;
}

.mobile-menu__link:last-child {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 84px);
}

.section__head {
  margin-bottom: var(--s7);
}

.section__head .copy {
  margin-top: var(--s4);
}

/* --------------------------------------------------------------------------
   8. The bench — opening viewport

   One statement, then the four instruments. Nothing floats and nothing
   glows: the plates sit flush on the ground, and every difference between
   them is a material one.
   -------------------------------------------------------------------------- */

.bench {
  padding-block: clamp(48px, 7vw, 96px) var(--section-y);
  border-top: 0;
}

.bench__statement {
  max-width: 18ch;
}

.bench__lede {
  margin-top: var(--s5);
  max-width: 54ch;
  color: var(--ink-2);
  font-size: var(--t-lede);
  line-height: 1.5;
}

.bench__art {
  display: block;
  width: 100%;
  margin-top: var(--s5);
}

.bench__art img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .bench__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: center;
    margin-top: var(--s5);
  }

  .bench__intro .bench__lede {
    margin-top: 0;
  }

  .bench__art {
    display: block;
    width: 100%;
    max-width: 540px;
    margin-top: 0;
    justify-self: end;
  }

  .bench__art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 611;
  }
}

.bench__deck {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(36px, 5vw, 68px);
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 700px) {
  .bench__deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .bench__deck {
    /* ArkFolio takes the wider bay: flagship by size, not by decoration. */
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

/* --- one instrument faceplate --- */
.plate {
  display: flex;
  flex-direction: column;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 699px) {
  .plate__foot {
    padding-top: var(--s4);
  }
}

@media (min-width: 700px) {
  .plate {
    padding: var(--s5);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule-strong);
  }

  .plate:first-child {
    padding-left: 0;
  }

  .plate:nth-child(2n) {
    border-right: 0;
  }
}

@media (min-width: 1100px) {
  .plate {
    min-height: 310px;
  }

  .plate:nth-child(2n) {
    border-right: 1px solid var(--rule);
  }

  .plate:last-child {
    border-right: 0;
    padding-right: 0;
  }
}

.plate__name {
  font-family: var(--font-display);
  font-size: var(--t-plate);
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: -0.024em;
  line-height: 1.1;
  color: var(--ink);
}

.plate__category {
  margin-top: var(--s2);
}

/* The stage notch: an engraved label and a drawn marker, never colour alone. */
.notch {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

.notch__mark {
  flex: none;
  color: var(--ink-3);
}

.notch--open .notch__mark {
  color: var(--open);
}

.notch--closed .notch__mark {
  color: var(--closed);
}

/* The live figure: one measured fact per instrument. */
.plate__figure {
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--ink);
}

.plate__verified {
  margin-top: var(--s1);
}

.plate__foot {
  margin-top: auto;
  padding-top: var(--s5);
}

/* --- the control: what separates a product you can use right now from one
   you cannot. Three plates carry a working control; one is capped. --- */
.control {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--signal);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.control:hover {
  background: var(--signal);
  color: var(--signal-ink);
}

.control:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
}

.control--quiet {
  border-color: var(--rule-strong);
  color: var(--ink-2);
}

.control--quiet:hover {
  border-color: var(--signal);
  background: transparent;
  color: var(--signal);
}

.control--primary {
  background: var(--signal);
  color: var(--signal-ink);
}

.control--primary:hover {
  background: var(--signal-hover);
  color: var(--signal-ink);
}

/* A capped slot reads as closed before the label is read. */
.control--capped {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--rule-strong);
  background-color: var(--plate-sunk);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--rule) 6px 7px
  );
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Registers — one per product

   Shared anatomy: name, stage, promise, evidence, control. What changes
   between them is the evidence, because the evidence genuinely is different:
   a ledger, a terminal, a coverage table, a pending capture.
   -------------------------------------------------------------------------- */

.register__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s5);
}

.register__promise {
  margin-top: var(--s5);
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  font-stretch: 94%;
  letter-spacing: -0.022em;
  line-height: 1.25;
  color: var(--ink);
}

.register__body {
  row-gap: var(--s7);
  align-items: start;
  margin-top: var(--s7);
}

.register__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s6);
}

.action-note {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.action-note__link {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.action-note__link:hover {
  color: var(--signal-hover);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

/* --- ArkFolio: an outcome ledger, wide and slow --- */
.ledger {
  border-top: 1px solid var(--rule-strong);
}

.ledger--columns {
  display: grid;
  margin-top: var(--s7);
  column-gap: var(--s7);
}

@media (min-width: 1024px) {
  .ledger--columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.figure-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.demo-picture,
.demo-picture img {
  display: block;
  width: 100%;
  height: auto;
}

.demo-picture {
  border: 1px solid var(--rule-strong);
}

.media-caption {
  margin-top: var(--s4);
  max-width: 68ch;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.media-caption strong {
  font-weight: 600;
  color: var(--ink);
}

.media-caption a {
  text-underline-offset: 3px;
  color: var(--signal);
}

@media (max-width: 767px) {
  .demo-picture {
    max-width: 308px;
    margin-inline: auto;
  }
}

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

.workflow__steps {
  list-style: none;
  margin-top: var(--s5);
}

.workflow__steps li {
  position: relative;
  border-left: 1px solid var(--rule-strong);
  padding: 0 0 var(--s5) var(--s5);
}

.workflow__steps li::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  left: -4px;
  top: 9px;
  background: var(--ink-2);
}

.workflow__steps li:last-child {
  padding-bottom: 0;
}

.workflow__steps strong,
.workflow__steps span {
  display: block;
}

.workflow__steps span {
  margin-top: var(--s1);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.studio-flow {
  margin-top: var(--s7);
  padding: var(--s5);
  border: 1px solid var(--rule);
  background: var(--plate);
  max-width: 780px;
}

.studio-flow__path {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s5);
}

.studio-flow__path > div {
  flex: 1;
}

.studio-flow__path strong,
.studio-flow__path span {
  display: block;
}

.studio-flow__path div > span,
.studio-flow__link > span {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.studio-flow__link svg {
  margin: 0 auto var(--s2);
  color: var(--ink-2);
}

@media (max-width: 600px) {
  .studio-flow__path {
    align-items: flex-start;
    flex-direction: column;
  }

  .studio-flow__link svg {
    display: none;
  }
}

.outcome {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.outcome__index {
  grid-row: 1 / 4;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-3);
}

.outcome__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 94%;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
}

.outcome__copy {
  color: var(--ink-2);
  line-height: 1.6;
}

.outcome__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
}

/* Known limits — carried over from the previous site. It is the most honest
   block on the page, so it gets real status rather than a footnote. */
.limits {
  margin-top: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--rule);
  background: var(--plate);
}

.limits__list {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
  color: var(--ink-2);
}

.limits__list li {
  position: relative;
  padding-left: var(--s4);
}

.limits__list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--brass);
}

/* The quiet register: one column, no media slot, deliberately short. */
.register--quiet .register__body {
  margin-top: var(--s6);
}

.register--quiet .copy {
  max-width: 60ch;
}

/* --- APIWatch: real output, as text --- */
.terminal {
  overflow-x: auto;
  padding: var(--s5);
  border: 1px solid var(--rule-strong);
  background: var(--plate-sunk);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
}

.terminal pre {
  margin: 0;
  font: inherit;
}

.terminal__prompt {
  color: var(--ink-2);
}

.terminal__group {
  color: var(--brass);
  font-weight: 600;
}

.terminal__break {
  color: var(--closed);
}

.terminal__warn {
  color: var(--ink-2);
}

.terminal__exit {
  color: var(--ink-2);
}

.scroll-hint {
  margin-top: var(--s2);
}

/* --- Ticker API: the coverage table is the layout --- */
.coverage {
  border-top: 1px solid var(--rule-strong);
}

.coverage__row {
  border-bottom: 1px solid var(--rule);
}

.coverage__row > summary {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-height: 48px;
  padding-block: var(--s3);
  cursor: pointer;
  list-style: none;
}

.coverage__row > summary::-webkit-details-marker {
  display: none;
}

.coverage__toggle {
  flex: none;
  width: 14px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  text-align: center;
}

.coverage__row[open] .coverage__toggle {
  color: var(--ink);
}

.coverage__label {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.coverage__state {
  flex: none;
}

.coverage__row > summary:hover .coverage__label {
  color: var(--signal);
}

.coverage__evidence {
  max-width: 74ch;
  padding: 0 0 var(--s5) calc(14px + var(--s3));
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   10. Studio and contact
   -------------------------------------------------------------------------- */

.thesis {
  max-width: 22ch;
}

.principles {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s7);
}

@media (min-width: 768px) {
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s7);
  }
}

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

.principle__title {
  margin-bottom: var(--s2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 94%;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.principle p {
  color: var(--ink-2);
  line-height: 1.65;
}

.contact__address {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--s5);
  border-bottom: 2px solid var(--signal);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.022em;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.contact__address:hover {
  color: var(--signal);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--s7) var(--s6);
  border-top: 1px solid var(--rule-strong);
}

.footer-board {
  margin-bottom: var(--s6);
  border-top: 1px solid var(--rule);
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  min-height: 44px;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.status-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 94%;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

a.status-row:hover .status-row__name {
  color: var(--signal);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   12. Motion

   One authored moment: the four plates settle onto the bench in sequence.
   Everything is visible by default, so a failed stylesheet or an interrupted
   load leaves a readable page rather than an empty one.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes plate-settle {
    from {
      opacity: 0;
      transform: translateY(10px);
      clip-path: inset(0 0 14% 0);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      clip-path: inset(0 0 0 0);
    }
  }

  .plate {
    animation: plate-settle 460ms var(--ease-out) both;
  }

  .plate:nth-child(1) { animation-delay: 40ms; }
  .plate:nth-child(2) { animation-delay: 90ms; }
  .plate:nth-child(3) { animation-delay: 140ms; }
  .plate:nth-child(4) { animation-delay: 190ms; }
}

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

/* Editorial photographs are distinct from the authentic product capture. */
.editorial { margin: var(--s6) 0 0; min-width: 0; }
.editorial picture, .editorial img { display: block; width: 100%; height: auto; }
.motion__frame { position: relative; }
.motion__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.motion__toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.motion__toolbar > a { margin-right: auto; }
.motion__toggle { min-height: 44px; font-size: var(--t-micro); padding-inline: var(--s3); cursor: pointer; }
.studio-film { border-block: 1px solid var(--rule-strong); margin-top: var(--s7); scroll-margin-top: 100px; }
.studio-film summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding-block: var(--s4); cursor: pointer; font-weight: 600; }
.studio-film summary::before { content: "+"; color: var(--signal); }
.studio-film[open] summary::before { content: "−"; }
.studio-film summary > span:first-child { margin-right: auto; }
.studio-film summary > .readout { font-weight: 400; text-align: right; }
.studio-film__body { padding-bottom: var(--s5); }
.studio-film video { display: block; width: 100%; height: auto; background: var(--ground); }
.editorial__caption { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-micro); line-height: 1.5; }
.editorial__caption span:last-child { white-space: nowrap; }
.editorial--portrait { margin-top: 0; }
.studio-intro { display: grid; gap: var(--s6); align-items: center; }
.studio-intro .editorial { margin-top: 0; }
#macroark .workflow { margin-top: var(--s6); }
@media (min-width: 768px) and (max-width: 1023px) {
  .editorial { max-width: 480px; }
}
@media (min-width: 1024px) {
  .studio-intro { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--s8); }
}