/* 8lax. One stylesheet, no build step.

   The palette has exactly one accent, --seal, and it means one thing: this has
   been verified. It is never used for decoration, never for a hover state, and
   never to make a heading livelier. When everything on the page is quiet, the
   one teal element is legible as a claim rather than as styling.

   Type: Archivo for headings, set tight and heavy, the voice of a stamp.
   Source Serif for prose, because this company's product is a document and the
   site should read like one. System monospace for hashes, which are genuinely
   monospaced data, not a stylistic affectation. */

:root {
  --ink:    #0E1B3D;   /* text, and the dark ground */
  --paper:  #FBFBFD;   /* cool white, copy paper not cream */
  --rule:   #D9DEE8;
  --muted:  #5A6683;
  --seal:   #17A398;   /* verified. nothing else. */
  --wrong:  #9B2C2C;   /* only the "don't" rule in the brand book */
  --sunk:   #F2F4F8;   /* recessed panels */
  /* The evidence panel is always this navy, in both themes: it stands for a
     terminal showing a real record, and a record that changes colour with the
     reader's OS preference is a weaker prop than one that does not. It is the
     one colour here that never flips. */
  --panel:  #0E1B3D;
  --panel-ink:   #C9D3E8;
  --panel-muted: #7F91B8;
  --panel-rule:  #26355C;

  --measure: 34rem;    /* ~72 characters of Source Serif */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell: 68rem;

  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.3rem, 1.7rem + 2.8vw, 4.2rem);
}

/* Dark theme. Every value here was measured, not guessed; the ratios are in
   the brand book so they can be re-checked rather than trusted.
   Ground #0B1631: text 15.1:1, muted 7.1:1, seal 5.7:1.

   The seal does not change between themes. It clears AA for text on the dark
   ground and clears the 3:1 graphics threshold on the light one, so a single
   accent covers both, which keeps "one accent means verified" literally true
   instead of nearly true. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:   #E8ECF5;
    --paper: #0B1631;
    --rule:  #2B3B68;
    --muted: #97A3C2;
    --sunk:  #16244C;
    --wrong: #E06C6C;
    /* --seal is deliberately unchanged. */
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: var(--step-0);
  line-height: 1.62;
  font-feature-settings: "onum" 1;
}

h1, h2, h3, h4, .sans {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: normal;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: var(--step-2); font-weight: 650; }
/* Every heading is reset to margin 0 above; h3 gets its space back here rather
   than only inside .cols, where a heading outside a grid sat on its paragraph. */
h3 { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.015em;
     margin-bottom: 0.55rem; }

p, ul, ol, dl { margin: 0 0 1.1em; max-width: var(--measure); }
li { margin-bottom: 0.35em; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--seal); }

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

code, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  font-variant-ligatures: none;
}

/* ---------- shell ---------- */

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem;
}
.skip:focus { left: var(--gutter); top: 0.5rem; z-index: 20; }

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem; flex-wrap: wrap;
}

/* The lockup: the mark IS the 8 of the name, so [mark]lax reads as one word.
   Setting the mark beside the whole word "8lax" is what stutters, and that
   pairing stays forbidden. The <picture> swaps to the light-on-dark file when
   the reader's system asks for a dark theme. */
.wordmark { display: block; text-decoration: none; line-height: 0; }
/* 42px, not 26. The masthead carries the tagline, and the tagline needs the
   whole logo to be 41px before its letters clear 8px. Anything smaller and the
   line is present but unreadable, which is worse than leaving it off. */
.wordmark img { display: block; height: 42px; width: auto; }

.masthead nav { margin-left: auto; }
.masthead nav ul {
  display: flex; gap: clamp(1rem, 3vw, 2rem);
  list-style: none; margin: 0; padding: 0;
  font-family: Archivo, sans-serif; font-size: var(--step--1); font-weight: 500;
}
.masthead nav a { text-decoration: none; color: var(--muted); }
.masthead nav a:hover { color: var(--ink); }
/* "page" is the page itself; "true" is a page inside that section. A link to
   / from /works/ is not the current page and must not claim to be. */
.masthead nav a[aria-current] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--seal);
}

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

.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 5rem); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.hero p.lede {
  font-size: var(--step-1);
  line-height: 1.44;
  color: var(--ink);
  margin-top: 1.4rem;
}
.hero p.sub { color: var(--muted); }

/* The evidence panel: the most characteristic object this company produces,
   shown as itself rather than illustrated. */
.evidence {
  background: var(--panel);
  color: var(--panel-ink);
  /* On the dark theme the panel is 1.06:1 against the page and would vanish;
     the hairline is what keeps it a distinct object. */
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.4rem 1.5rem 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.85;
  overflow-x: auto;
}
.evidence dl { display: grid; grid-template-columns: 5.5rem 1fr; margin: 0; max-width: none; }
.evidence dt { color: var(--panel-muted); }
.evidence dd { margin: 0; word-break: break-all; }
.evidence .h-prev { color: var(--panel-muted); }
.evidence .h-now  { color: #fff; }
.evidence hr { border: 0; border-top: 1px solid var(--panel-rule); margin: 0.85rem 0; }
.evidence .verdict { color: var(--seal); display: flex; align-items: baseline; gap: 0.5rem; }
.evidence-note {
  font-family: Archivo, sans-serif; font-size: var(--step--1);
  color: var(--muted); margin-top: 0.9rem; max-width: 30rem;
}

/* ---------- sections ---------- */

section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
section + section { border-top: 1px solid var(--rule); }

.section-head { margin-bottom: 2rem; }
.section-head p { color: var(--muted); margin-top: 0.8rem; }

/* Two columns of prose, not cards. Cards would imply parity between items
   that are not peers, and would pad a short list into a fake grid. */
.cols {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cols p { font-size: var(--step--1); color: var(--muted); line-height: 1.6; }
.cols p:last-child { margin-bottom: 0; }

/* ---------- a piece of work ---------- */

.work {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-top: 1.75rem;
  border-top: 3px solid var(--ink);
}
@media (min-width: 52rem) {
  .work { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.work-meta { font-family: Archivo, sans-serif; font-size: var(--step--1); }
.work-meta dt { color: var(--muted); margin-top: 0.85rem; }
.work-meta dt:first-child { margin-top: 0; }
.work-meta dd { margin: 0.1rem 0 0; font-weight: 500; }
.work-body h3 { font-size: var(--step-2); font-weight: 700; margin-bottom: 0.7rem; }
/* The work list is several of these stacked. The rule above each one is the
   separator, so the gap below the previous entry has to be bigger than the gap
   inside it or the two entries read as one. */
.work + .work { margin-top: clamp(2.75rem, 7vw, 4.5rem); }
/* Pills are inline-flex, so they need a flex parent to wrap with an even gap
   in a column this narrow. */
.work-meta p { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: Archivo, sans-serif; font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--rule); border-radius: 2rem;
  padding: 0.2rem 0.7rem 0.24rem; color: var(--muted);
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
}
.status-live { color: var(--ink); border-color: var(--seal); }
.status-live::before { background: var(--seal); }

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn {
  display: inline-block;
  font-family: Archivo, sans-serif; font-size: var(--step--1); font-weight: 600;
  padding: 0.72rem 1.35rem;
  border: 1px solid var(--ink); border-radius: 3px;
  text-decoration: none;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: #172a58; }
.btn-ghost:hover { background: var(--sunk); }

/* ---------- long-form documents ---------- */

.doc { padding-block: clamp(2.5rem, 6vw, 4rem); }
.doc h2 {
  font-size: var(--step-1); margin-top: 2.6rem; margin-bottom: 0.9rem;
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.doc h2:first-of-type { margin-top: 1.8rem; }
.doc h3 { font-size: var(--step-0); margin-top: 1.6rem; margin-bottom: 0.5rem; }
.doc ul { padding-left: 1.15rem; }
.doc .updated { font-family: Archivo, sans-serif; font-size: var(--step--1); color: var(--muted); }

.callout {
  background: var(--sunk);
  border-left: 3px solid var(--seal);
  padding: 1rem 1.25rem;
  max-width: var(--measure);
  margin-bottom: 1.4rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: var(--step--1); }

/* ---------- contact ---------- */

.contact-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.big-link {
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: var(--step-2); letter-spacing: -0.03em;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--seal);
}
.big-link:hover { box-shadow: inset 0 -0.6em 0 rgba(23, 163, 152, 0.16); }

/* ---------- brand book specimens ---------- */

.swatches { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); max-width: none; }
.swatch { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.swatch .chip { height: 5.5rem; }
.swatch .meta { padding: 0.6rem 0.75rem 0.75rem; font-family: Archivo, sans-serif; font-size: 0.78rem; }
.swatch .meta b { display: block; font-size: 0.86rem; }
.swatch .meta span { color: var(--muted); }

.specimen { border: 1px solid var(--rule); border-radius: 4px; padding: 1.5rem; margin-bottom: 1rem; }
/* Equal height so the captions beneath three specimens sit on one line. */
.specimen-mark {
  display: grid; place-items: center; min-height: 9.5rem; padding: 1.5rem;
}
/* A logo specimen states which ground its file is for, so its own ground must
   not follow the reader's theme. Left to the tokens, the ink lockup vanished
   into the dark theme. A brand book that hides half its files depending on an
   OS setting is the one document that cannot afford to. */
.on-light { background: #FBFBFD; border-color: #D9DEE8; }
.on-dark  { background: #0E1B3D; border-color: #26355C; }
.specimen .label { font-family: Archivo, sans-serif; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.6rem; }

.dont { border-left: 3px solid var(--wrong); padding-left: 1rem; }
.do   { border-left: 3px solid var(--seal); padding-left: 1rem; }

/* ---------- footer ---------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3rem;
  font-family: Archivo, sans-serif; font-size: var(--step--1);
  color: var(--muted);
}
.colophon .wrap { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .colophon .wrap { grid-template-columns: 2fr 1fr 1fr; } }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--ink); text-decoration: underline; }
.colophon .legal { max-width: 22rem; }
.colophon h2 {
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
  margin-bottom: 0.6rem; letter-spacing: 0;
}

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