/* ── supercomplicated site ──────────────────────────────────────────────────
   Component CSS ported from design-system-components/*.jsx. The token files in
   assets/tokens/ are the contract; nothing here re-derives a value that a token
   already carries. Page-level rules live at the bottom under "page".          */

/* ── token repair ───────────────────────────────────────────────────────────
   colors.css lifts --accent on [data-surface="ink"], but a [data-product] scope
   nested inside an ink surface re-sets --accent to its paper value, so the
   footer product chips came out dark. Re-lift product scopes under ink; the
   product scope has already set --accent-lift correctly on the same element.  */
[data-surface="ink"] [data-product] { --accent: var(--accent-lift); }

/* ── TextLink ───────────────────────────────────────────────────────────── */
.sc-link {
  font-family: var(--font-core);
  color: var(--ink-900);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.sc-link--inline { border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.sc-link--inline:hover { color: var(--accent); }
.sc-link--standalone { display: inline-block; font-weight: 600; border-bottom: var(--border-w-strong) solid var(--accent); padding-bottom: 2px; }
.sc-link--standalone:hover { color: var(--accent); }
.sc-link--quiet { color: var(--ink-500); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.sc-link--quiet:hover { color: var(--ink-900); border-bottom-color: var(--rule); }
.sc-link--meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  font-weight: var(--fw-meta);
  color: var(--ink-500);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.sc-link--meta:hover { color: var(--ink-900); border-bottom-color: var(--accent); }
.sc-link:active { background: var(--hover-tint); }
.sc-link:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }
[data-surface="ink"] .sc-link { color: var(--text-on-ink); }
[data-surface="ink"] .sc-link--quiet,
[data-surface="ink"] .sc-link--meta { color: var(--text-on-ink-dim); }
[data-surface="ink"] .sc-link:hover { color: var(--accent); }
[data-surface="ink"] .sc-link--quiet:hover { color: var(--text-on-ink); border-bottom-color: var(--ink-rule); }
[data-surface="ink"] .sc-link:active { background: var(--hover-tint-on-ink); }

/* ── StatusMarker ───────────────────────────────────────────────────────── */
.sc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1;
  letter-spacing: var(--tr-meta);
  font-weight: var(--fw-meta);
  white-space: nowrap;
}
.sc-status__mark { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 0; box-sizing: border-box; }
.sc-status--shipped { color: var(--ink-900); }
.sc-status--shipped .sc-status__mark { background: var(--accent); }
.sc-status--planned { color: var(--ink-500); }
.sc-status--planned .sc-status__mark { background: transparent; border: 1px solid var(--ink-500); }
[data-surface="ink"] .sc-status--shipped { color: var(--text-on-ink); }
[data-surface="ink"] .sc-status--planned { color: var(--text-on-ink-dim); }
[data-surface="ink"] .sc-status--planned .sc-status__mark { border-color: var(--text-on-ink-dim); }

/* ── SectionHeading ─────────────────────────────────────────────────────── */
.sc-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.sc-head__rail { display: flex; align-items: center; gap: var(--sp-3); min-height: 20px; }
.sc-head__label,
.sc-head__aside {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1;
  letter-spacing: var(--tr-meta);
  font-weight: var(--fw-meta);
  font-variant-numeric: tabular-nums;
}
.sc-head__label { color: var(--ink-900); }
.sc-head__aside { color: var(--ink-500); }
.sc-head__rule { flex: 1 1 auto; height: 0; border-top: var(--border-w) solid var(--rule); }
.sc-head__title { margin: 0; color: var(--ink-900); font-weight: 500; max-width: 22ch; }
.sc-head__title--t1 { font-size: var(--fs-t1); line-height: var(--lh-t1); letter-spacing: var(--tr-t1); }
.sc-head__title--wide { max-width: 34ch; }
.sc-head__lead { margin: 0; color: var(--ink-500); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); max-width: var(--measure-tight); }
@media (max-width: 600px) { .sc-head__aside { display: none; } }

/* ── ProductEntry ───────────────────────────────────────────────────────── */
.sc-entry {
  display: grid;
  align-items: start;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: var(--border-w) solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease);
}
.sc-entry--row { grid-template-columns: 104px minmax(0, 1fr) 200px 150px; }
.sc-entry__key { display: flex; align-items: center; gap: var(--sp-2); }
.sc-entry__chip { width: 14px; height: 14px; flex: 0 0 14px; background: var(--accent); border-radius: 0; }
.sc-entry__ticker { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; font-weight: 600; color: var(--ink-900); }
.sc-entry__name { margin: 0; font-size: var(--fs-t2); line-height: var(--lh-t2); letter-spacing: var(--tr-t2); font-weight: 500; color: var(--ink-900); }
.sc-entry__name a {
  color: inherit;
  border-bottom: var(--border-w-strong) solid transparent;
  padding-bottom: 1px;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sc-entry__name a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sc-entry__name a:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.sc-entry__desc { margin: var(--sp-3) 0 0; color: var(--ink-500); font-size: var(--fs-small); line-height: var(--lh-small); max-width: 52ch; }
.sc-entry__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--tr-meta);
  color: var(--ink-500);
}
.sc-entry__facts b { color: var(--ink-900); font-weight: 500; }
.sc-entry__meta { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.sc-entry--block {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  border-top: var(--rule-accent-w) solid var(--accent);
  padding-block: var(--sp-5) var(--sp-6);
}
.sc-entry--block .sc-entry__chip { display: none; }
.sc-entry--block .sc-entry__name { font-size: var(--fs-t3); line-height: var(--lh-t3); letter-spacing: var(--tr-t3); font-weight: 600; }
.sc-entry--block .sc-entry__desc { margin-top: var(--sp-2); max-width: 38ch; }
.sc-entry--block .sc-entry__ticker { color: var(--accent); }
/* Ambition, not product: a hairline rather than the 3px accent rule. The JSX
   reference only swaps the border colour, but the handoff states a 1px --rule
   top border as a hard requirement — README, "#verticals". */
.sc-entry--muted { border-top: var(--border-w) solid var(--rule); }
.sc-entry--muted .sc-entry__ticker { color: var(--ink-500); }
@media (max-width: 1100px) {
  .sc-entry--row { grid-template-columns: 96px minmax(0, 1fr) 170px; }
  .sc-entry--row .sc-entry__meta { grid-column: 2 / -1; flex-direction: row; align-items: center; gap: var(--sp-5); }
}
@media (max-width: 700px) {
  .sc-entry--row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-5); }
  .sc-entry--row .sc-entry__meta { grid-column: auto; }
  .sc-entry__facts { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
}

/* ── SiteFooter ─────────────────────────────────────────────────────────── */
.sc-footer { background: var(--surface-ink); color: var(--text-on-ink); padding-block: var(--sp-9) var(--sp-6); }
.sc-footer__inner { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-margin); }
/* brand + products + company. Bump the repeat() count if a column is added. */
.sc-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--grid-gutter); align-items: start; }
.sc-footer__mark { font-family: var(--font-core); font-size: var(--fs-t2); line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: var(--text-on-ink); }
.sc-footer__note { margin: var(--sp-4) 0 0; color: var(--text-on-ink-dim); font-size: var(--fs-small); line-height: var(--lh-small); max-width: 34ch; }
.sc-footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.sc-footer__colhead { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); font-weight: var(--fw-meta); color: var(--text-on-ink-dim); }
.sc-footer__list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.sc-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-on-ink);
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sc-footer__link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sc-footer__link:focus-visible { outline: var(--focus-w) solid var(--focus-ring-on-ink); outline-offset: var(--focus-offset); }
.sc-footer__chip { width: 8px; height: 8px; flex: 0 0 8px; background: var(--accent); }
.sc-footer__rule { border-top: var(--border-w) solid var(--border-on-ink); margin-top: var(--sp-9); }
.sc-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  color: var(--text-on-ink-dim);
}
.sc-footer__base a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.sc-footer__base a:hover { color: var(--text-on-ink); border-bottom-color: var(--border-on-ink); }
.sc-footer__base a:focus-visible { outline: var(--focus-w) solid var(--focus-ring-on-ink); outline-offset: var(--focus-offset); }
.sc-footer__baseline { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
@media (max-width: 900px) {
  .sc-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--grid-gutter); }
  .sc-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sc-footer { padding-block: var(--sp-8) var(--sp-5); }
  .sc-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .sc-footer__rule { margin-top: var(--sp-7); }
}

/* ── page ───────────────────────────────────────────────────────────────────
   Layout that belongs to this page rather than to a component.               */

/* Skip link: first in the DOM, off-canvas until focused. */
.sc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: var(--paper);
  padding: 12px 16px;
  z-index: 50;
  border-bottom: 0;
}
.sc-skip:focus { left: 0; }

/* Sticky header. The only sanctioned transparency/blur in the system. */
.sc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink-900);
}
.sc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); height: 64px; }
.sc-wordmark { font-size: 19px; font-weight: 500; letter-spacing: -0.035em; color: var(--ink-900); border-bottom: 0; }
/* The header mark is a picture only when content.md sets "Brand > Logo image";
   it is capped to the header's own height so a tall file cannot resize it. */
.sc-wordmark__img { display: block; height: 24px; width: auto; max-width: 220px; }
.sc-site-nav { display: flex; align-items: center; gap: var(--sp-5); }
@media (max-width: 860px) { .sc-site-nav { display: none; } }

/* Hero */
.sc-hero { padding: var(--sp-9) 0 var(--sp-8); }
.sc-hero__lead { margin-top: var(--sp-5); max-width: var(--measure-tight); color: var(--ink-500); }
.sc-hero-rail {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ink-900);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.sc-hero-rail__chip { display: block; width: 14px; height: 14px; background: var(--accent); }
.sc-hero-rail__name { margin-top: var(--sp-3); }
.sc-hero-rail__meta { margin-top: var(--sp-2); color: var(--ink-500); }
.sc-hero-rail > * + * { border-left: 1px solid var(--rule); padding-left: var(--sp-5); }
@media (max-width: 700px) {
  .sc-hero-rail { grid-template-columns: minmax(0, 1fr); }
  .sc-hero-rail > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--sp-4); }
}

/* Sections. This page uses 96px padding rather than the 128px section token. */
.sc-page-section { padding-block: var(--sp-9); }
.sc-section-body { margin-top: var(--sp-7); }

/* Thesis */
.sc-prose { display: flex; flex-direction: column; gap: var(--sp-5); max-width: var(--measure); }
/* A list in body copy. The marker is the system's filled square, in --accent,
   which resolves to ink unless a product scope is set on the item. */
.sc-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.sc-list > li { position: relative; padding-left: var(--sp-5); }
.sc-list > li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; background: var(--accent); }

/* Portfolio */
.sc-band { background: var(--paper-hi); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sc-ledger { margin-top: var(--sp-7); border-bottom: 1px solid var(--rule); }
.sc-ledger__foot { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-5); }
.sc-ledger__links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* Verticals */
.sc-vert-grid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); align-items: start; }
@media (max-width: 900px) { .sc-vert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sc-vert-grid { grid-template-columns: minmax(0, 1fr); } }

/* How we build */
.sc-build-grid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); }
.sc-build-point { border-top: 1px solid var(--rule); padding-top: var(--sp-4); }
.sc-build-point p { margin-top: var(--sp-2); color: var(--ink-500); max-width: 44ch; }
@media (max-width: 600px) { .sc-build-grid { grid-template-columns: minmax(0, 1fr); } }