/* ============================================================
   Skopos site — shared stylesheet (direction 3a "GATE")
   Futura display · Archivo UI · local JetBrains Mono for data.
   Dark ink ground by default; body.ground-paper flips to the
   cold-paper reading surface (manual, methodology, legal).
   ============================================================ */

/* ---------- Fonts (local — the JBM cut must match the app's) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/JetBrainsMono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/JetBrainsMono-500.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/JetBrainsMono-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/Jost-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/Jost-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/Jost-700.woff2) format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  /* dark ground (primary) */
  --sk-ink: #0A0A0B;
  --sk-panel: #141416;
  --sk-chip: #1E1E21;
  --sk-line: rgba(233, 235, 231, .13);
  --sk-line-strong: rgba(233, 235, 231, .16);
  --sk-text-hi: #F4F5F2;
  --sk-text: #E9EBE7;
  --sk-text-dim: #9A9C96;
  --sk-text-faint: #5C5A54;
  --sk-gold: #E0B540;
  --sk-gold-hot: #F2C94C;
  --sk-gold-ink: #141005;   /* text on gold fills — never white */
  --sk-gold-deep: #8E6F1F;

  --sk-font-display: 'futura-pt', 'Futura', 'Jost', 'Avenir Next', system-ui, sans-serif;
  --sk-font-ui: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  /* The app's data face is SF Mono (SwiftUI .monospaced system design),
     which Apple's license won't let us serve. PT Mono (Typekit kit bit0ton,
     400 + 700) is the closest servable match, and using it everywhere keeps
     the numbers identical across browsers. SF Mono and local JetBrains Mono
     back it up if Typekit is down. */
  --sk-font-mono: 'pt-mono', ui-monospace, 'SF Mono', 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

  /* motion — mechanical: fast launch, hard stop */
  --sk-ease: cubic-bezier(.3, 0, .1, 1);
  --sk-t-hover: 100ms;
  --sk-t-move: 280ms;
  --sk-t-draw: 480ms;

  /* legacy aliases so existing page CSS picks up the new system.
     NOTE: these must stay literal values (not var() chains) — a var() inside
     a custom property resolves where the property is DEFINED, so a chain on
     :root would ignore the body.ground-paper overrides below. */
  --paper: #0A0A0B;
  --paper-shade: #141416;
  --rule: rgba(233, 235, 231, .13);
  --rule-strong: rgba(233, 235, 231, .16);
  --ink: #E9EBE7;
  --ink-soft: #9A9C96;
  --ink-mute: #5C5A54;
  --gold: #E0B540;
  --gold-deep: #F2C94C;
  --display: 'futura-pt', 'Futura', 'Jost', 'Avenir Next', system-ui, sans-serif;
  --serif: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'pt-mono', ui-monospace, 'SF Mono', 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;
}

body.ground-paper {
  --sk-ink: #F1F1EF;
  --sk-panel: #E9E9E6;
  --sk-chip: #E4E4E0;
  --sk-line: #C9C9C3;
  --sk-line-strong: #A9A9A3;
  --sk-text-hi: #16161A;
  --sk-text: #16161A;
  --sk-text-dim: #55555A;
  --sk-text-faint: #8A8A85;
  --sk-gold: #8E6F1F;
  --sk-gold-hot: #6E5A22;
  --sk-gold-ink: #F1F1EF;
  --sk-gold-deep: #6E5A22;

  --paper: #F1F1EF;
  --paper-shade: #E9E9E6;
  --rule: #C9C9C3;
  --rule-strong: #A9A9A3;
  --ink: #16161A;
  --ink-soft: #55555A;
  --ink-mute: #8A8A85;
  --gold: #8E6F1F;
  --gold-deep: #6E5A22;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sk-ink);
  color: var(--sk-text);
  font-family: var(--sk-font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sk-gold); color: var(--sk-gold-ink); }
a { color: inherit; }
img { max-width: 100%; }

/* ---------- Letterhead (shared header) ---------- */
.letterhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 66px;
  border-bottom: 1px solid var(--sk-line);
  margin-bottom: 0;
  padding: 0;
}
.letterhead .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.letterhead .brand .mk { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.letterhead .brand .mk .mk-frame { stroke: var(--sk-text); }
.letterhead .brand .mk .mk-dot { fill: var(--sk-gold); }
.letterhead .brand .wm {
  font-family: var(--sk-font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .22em;
  color: var(--sk-text);
  line-height: 1;
}
.letterhead .filed {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.letterhead .filed a {
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sk-text-dim);
  text-decoration: none;
  transition: color var(--sk-t-hover) var(--sk-ease);
}
.letterhead .filed a:hover { color: var(--sk-text); }
.letterhead .filed a.cta,
.letterhead .filed a:hover.cta {
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sk-gold-ink);
  background: var(--sk-gold);
  padding: 11px 18px;
  transition: background var(--sk-t-hover) var(--sk-ease);
}
.letterhead .filed a.cta:hover { background: var(--sk-gold-hot); }

/* ---------- Form strip (document metadata) ---------- */
.form-strip {
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sk-text-faint);
  padding: 14px 0;
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--sk-line);
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.form-strip strong {
  color: var(--sk-text);
  font-weight: 600;
  margin-left: 8px;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--sk-line);
  margin-top: 84px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--sk-font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sk-text-faint);
}
footer a {
  color: var(--sk-text-faint);
  text-decoration: none;
  transition: color var(--sk-t-hover) var(--sk-ease);
}
footer a:hover { color: var(--sk-text); }

/* ---------- DS-style components (static recreations) ---------- */
.sk-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sk-font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px; /* the one radius exception: pills select */
  background: var(--sk-chip);
  color: var(--sk-text);
  white-space: nowrap;
  text-decoration: none;
}
.sk-pill--selected { background: var(--sk-gold); color: var(--sk-gold-ink); font-weight: 700; }
.sk-pill--mono { font-family: var(--sk-font-mono); font-variant-numeric: tabular-nums; }

.sk-readout { font-family: var(--sk-font-mono); font-variant-numeric: tabular-nums; }
.sk-readout .v { display: block; color: var(--sk-text-hi); font-weight: 600; font-size: 17px; }
.sk-readout .l { display: block; color: var(--sk-text-dim); font-size: 14px; }
.sk-readout--gold .v { color: var(--sk-gold); }

.sk-section-label {
  font-family: var(--sk-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sk-text-dim);
}
.sk-chip-num {
  font-family: var(--sk-font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--sk-gold-ink);
  background: var(--sk-gold);
  padding: 5px 9px;
}
.sk-secthead {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 38px;
}
.sk-secthead .fill { flex: 1; height: 1px; background: var(--sk-line); display: block; align-self: center; }

/* mono for app-generated values only */
.sk-data {
  font-family: var(--sk-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Motion system ----------
   Mechanical: short travel, hard stops. Reveal states only exist
   once JS has arrived (html.js) and motion is allowed; otherwise
   everything paints at full opacity. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 560ms var(--sk-ease), transform 560ms var(--sk-ease);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  html.js [data-reveal].in { opacity: 1; transform: none; }

  html.js [data-rule-draw] {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 560ms var(--sk-ease);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  html.js [data-rule-draw].in { transform: scaleX(1); }

  html.js [data-chip-snap] {
    background: transparent;
    color: transparent;
    transition: none;
  }
  html.js [data-chip-snap].in {
    background: var(--sk-gold);
    color: var(--sk-gold-ink);
    transition: background 0ms 90ms, color 0ms 90ms;
  }
}