/* ===========================================================================
   MacStep — project site

   Direction: 1980s industrial equipment, not a software landing page.
   Three materials, used consistently:

     ENCLOSURE  the page ground — painted steel, a warm mid grey
     PLATE      light label plates that carry content, black-ruled and
                raised on a hard offset shadow (printed, never blurred)
     SCREEN     dark inset bezels, used only where a screen would be

   One accent (signal orange) for actions and warnings, one indicator green
   for status, and nothing else. Type is Archivo for reading and IBM Plex
   Mono for anything that behaves like a panel label or a spec value.
   =========================================================================== */

/* ── Fonts, self-hosted: no third-party request from a page about an
      application that makes no network requests. Both SIL OFL 1.1. ── */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plexmono-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Painted steel, a few stops lighter than a real enclosure — the true
     value is gloomy across a whole page. Greys stay warm and slightly green
     so they read as paint rather than as neutral UI chrome. */
  --enclosure:     #cbc8bf;
  --enclosure-dk:  #bab7ad;
  --plate:         #f1efe9;
  --plate-sink:    #e5e2da;
  --screen:        #1b1d1f;
  --ink:           #16181a;
  --ink-soft:      #4a4d50;
  /* Kept dark enough to clear 4.5:1 on the lightened ground. */
  --ink-faint:     #55585b;
  --signal:        #c8410e;
  --indicator:     #2f6b4f;

  --rule:          2px solid var(--ink);
  --rule-hair:     1px solid rgba(22, 24, 26, 0.28);
  --lift:          4px 4px 0 rgba(22, 24, 26, 0.30);
  --lift-sm:       3px 3px 0 rgba(22, 24, 26, 0.26);

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --page: 1080px;
  --gut: clamp(1rem, 4vw, 2.5rem);
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--enclosure);
  /* Fine grain, so the ground reads as painted metal rather than flat CSS. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

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

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--signal); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--plate);
  padding: 0.75rem 1rem;
  z-index: 50;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ── Panel label: the typographic workhorse. Silkscreened equipment
      lettering — mono, small, capitals, opened right up. ── */
.label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ===========================================================================
   Top rail
   =========================================================================== */
.rail {
  border-bottom: var(--rule);
  background: var(--enclosure-dk);
}
.rail-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 52px;
  flex-wrap: wrap;
}
.rail-mark {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.rail-sub {
  color: var(--ink-soft);
  margin-right: auto;
}
.rail-nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.rail-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}
.rail-nav a:hover { color: var(--signal); }

@media (max-width: 640px) {
  .rail-sub { display: none; }
  .rail-nav { width: 100%; padding-bottom: 0.75rem; }
}

/* ===========================================================================
   Plates
   =========================================================================== */
.plate {
  background: var(--plate);
  border: var(--rule);
  box-shadow: var(--lift);
}

/* Engraved header strip — reversed out of solid black. */
.plate-head {
  background: var(--ink);
  color: var(--plate);
  padding: 0.5rem 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.plate-head .aux { color: #9ea2a6; }

.plate-body { padding: 1.25rem 1.1rem; }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ── SIGNATURE: the rating plate ──
   Equipment carries a riveted plate stating what it is, and so does this.
   What the thing reads, runs on, is built from and is licensed under, set as
   specifications rather than as sales copy. */
.nameplate { position: relative; }
.nameplate .plate-body { padding: 1.1rem 1.25rem 1.35rem; }

/* Domed fastener. The highlight is kept off pure white so the two rivets
   that land on the black header strip read as metal rather than dust. */
.rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d9d6cd 0 22%, #97948b 58%, #5e5c56 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.rivet.tl { top: 9px; left: 9px; }
.rivet.tr { top: 9px; right: 9px; }
.rivet.bl { bottom: 9px; left: 9px; }
.rivet.br { bottom: 9px; right: 9px; }

.spec { margin: 0; }
.spec-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.34rem 0;
}
.spec-row + .spec-row { border-top: 1px solid rgba(22, 24, 26, 0.09); }
.spec-row dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* Dotted leader, as on a printed spec sheet. */
.dots {
  flex: 1 1 auto;
  min-width: 1.25rem;
  height: 0;
  margin-bottom: 0.34em;
  border-bottom: 1px dotted rgba(22, 24, 26, 0.35);
}
.spec-row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.spec-row dd.ok { color: var(--indicator); }
.spec-row dd.none { color: var(--signal); }

/* Status dot, as on a panel indicator. */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: 0.05em;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(22, 24, 26, 0.25);
}

/* Page-load sequence: rows settle in like a plate being read off, once. */
@media (prefers-reduced-motion: no-preference) {
  .spec-row {
    opacity: 0;
    transform: translateY(4px);
    animation: settle 0.34s ease-out forwards;
  }
  .spec-row:nth-child(1) { animation-delay: 0.04s; }
  .spec-row:nth-child(2) { animation-delay: 0.08s; }
  .spec-row:nth-child(3) { animation-delay: 0.12s; }
  .spec-row:nth-child(4) { animation-delay: 0.16s; }
  .spec-row:nth-child(5) { animation-delay: 0.20s; }
  .spec-row:nth-child(6) { animation-delay: 0.24s; }
  .spec-row:nth-child(7) { animation-delay: 0.28s; }
  .spec-row:nth-child(8) { animation-delay: 0.32s; }
  .spec-row:nth-child(9) { animation-delay: 0.36s; }
}
@keyframes settle {
  to { opacity: 1; transform: none; }
}

/* ── Hero copy ── */
.eyebrow {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}
h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede {
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  max-width: 46ch;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  border: var(--rule);
  background: var(--plate);
  box-shadow: var(--lift-sm);
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
/* Pressing a panel button moves it into the panel. */
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.btn--signal {
  background: var(--signal);
  border-color: var(--ink);
  color: #fff;
}
.btn--signal:hover { color: #fff; background: #b13a0c; }
.btn:hover { color: var(--ink); }

.gh {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}

.fineprint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-family: var(--mono);
}

/* ── Screen bezel: dark inset, used only for actual screenshots ── */
.bezel {
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding: 10px;
  background: var(--screen);
  border: var(--rule);
  box-shadow: var(--lift);
}
.bezel img {
  width: 100%;
  border: 1px solid #34383c;
}
.bezel figcaption {
  margin-top: 9px;
  color: #8b9095;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===========================================================================
   Sections
   =========================================================================== */
.section { padding: clamp(3rem, 7vw, 5rem) 0 0; }
.section:last-of-type { padding-bottom: clamp(3rem, 7vw, 5rem); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: var(--rule);
  margin-bottom: 1.5rem;
}
.section-head h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.section-head .aux {
  margin-left: auto;
  color: var(--ink-faint);
  text-align: right;
}

/* ── Capability table: a datasheet, not a grid of cards ── */
.data { width: 100%; border-collapse: collapse; }
.data th, .data td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 0.9rem;
  border-bottom: var(--rule-hair);
}
.data tr:last-child th, .data tr:last-child td { border-bottom: 0; }
.data th {
  width: 12rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.data td { color: var(--ink); }
.data tbody tr:hover { background: var(--plate-sink); }

@media (max-width: 620px) {
  .data th, .data td { display: block; width: auto; border-bottom: 0; padding: 0.3rem 0.9rem; }
  .data th { padding-top: 0.9rem; }
  .data td { padding-bottom: 0.9rem; border-bottom: var(--rule-hair); }
}

/* ── Two-column prose + figure ── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: start;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}
.split p { margin-top: 0; }
.split p:last-child { margin-bottom: 0; }

.note {
  border-left: 4px solid var(--signal);
  padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* ── Download rows ── */
.get-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.95rem 0.9rem;
  border-bottom: var(--rule-hair);
}
.get-row:last-child { border-bottom: 0; }
.get-row .plat { font-weight: 700; min-width: 12rem; }
.get-row .req {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.75rem;
  margin-right: auto;
}

/* Narrow: stack every row the same way. Left to flex-wrap, rows broke at
   different points depending on how long each requirement string was, so the
   buttons stepped in and out down the column. */
@media (max-width: 560px) {
  .get-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    justify-items: start;
  }
  .get-row .plat { min-width: 0; }
}

/* ── Support ── */
.support {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.support p { margin: 0; max-width: 52ch; color: var(--ink-soft); }

/* ===========================================================================
   Footer — a title block, because that is what a drawing ends with
   =========================================================================== */
.foot {
  border-top: var(--rule);
  background: var(--enclosure-dk);
  margin-top: clamp(3rem, 7vw, 5rem);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-left: var(--rule-hair);
}
.foot-cell {
  padding: 1rem 1.1rem 1.15rem;
  border-right: var(--rule-hair);
}
.foot-cell .label { color: var(--ink-faint); display: block; margin-bottom: 0.35rem; }
.foot-cell a,
.foot-cell p { display: block; margin: 0; text-decoration: none; color: var(--ink-soft); }
.foot-cell a:hover { color: var(--signal); }
.foot-cell strong { display: block; font-size: 0.9375rem; }

/* ── Third-angle diagram ── */
.figure-plate { padding: 1.1rem; }
.figure-plate svg { width: 100%; height: auto; display: block; }
.figure-cap {
  margin: 0.9rem 0 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.foot-bar {
  border-top: var(--rule-hair);
  padding: 0.8rem 1.1rem;
  color: var(--ink-faint);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ===========================================================================
   Secondary documents (licences, privacy)
   =========================================================================== */
.doc { padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }
.doc-plate { max-width: 760px; }
.doc-plate .plate-body { padding: clamp(1.5rem, 4vw, 2.25rem); }
.doc h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}
.doc .stamp { color: var(--ink-faint); margin: 0 0 1.75rem; }
.doc h2 {
  font-size: 0.9375rem;
  font-weight: 800;
  margin: 2rem 0 0.6rem;
  padding-top: 0.9rem;
  border-top: var(--rule-hair);
}
.doc h2:first-of-type { margin-top: 1rem; }
.doc p, .doc li { color: var(--ink-soft); }
.doc p { margin: 0 0 0.9rem; }
.doc ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.doc li { margin-bottom: 0.4rem; }
.doc code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--plate-sink);
  padding: 0.1em 0.35em;
}
.back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* The pay-what-you-want ask. Given more weight than body copy because it is
   the one thing on the page that has to be read before the button. */
.ask {
  margin: 0 0 1.1rem;
  font-size: 1.0625rem;
  max-width: 54ch;
}
/* The download plate stacks a body block above the platform rows, so the
   rows need their own top rule to separate the two. */
.plate-body + .get-row { border-top: var(--rule-hair); }