/* Editorial Brutalist, ported for the web.
   Colours are the light/dark pairs from Kennu/Assets.xcassets, type is the
   scale in design_handoff/tokens/typography.css. Keep both in step with the
   app — see docs/wiki/13-design-redesign.md. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #F4F2EC;
  --paper-warm: #EDEBE4;
  --ink: #141414;
  --ink-deep: #232019;
  --ink-body: #4A4740;
  --muted: #6E695E;
  --red: #D22A11;
  --rule-hair: #CBC5B5;

  --gutter: 26px;
  --underline: 2px;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --font-body: 'Inter', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15140F;
    --paper-warm: #1F1E18;
    --ink: #F2EFE7;
    --ink-deep: #DAD5C9;
    --ink-body: #A8A399;
    --muted: #9A958A;
    --red: #F0492C;
    --rule-hair: #3B3830;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ---- The wordmark ----
   Ported from Kennu/Design/KennuMark.swift. Every measurement derives from the
   font size, as it does there, so the mark holds its proportions at any scale.
   The shape stack uses overflow:hidden so its baseline is its bottom edge —
   that is what seats the circle on Archivo's baseline rather than letting it
   hang below. */
.mark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.mark-dots {
  display: inline-block;
  overflow: hidden;
  margin-left: 0.09em;
  vertical-align: baseline;
}
/* The square is the accent, the circle is ink — KennuMark.swift swaps the two
   only for the recording state, which the web has no use for. */
.mark-dots i {
  display: block;
  width: 0.227em;
  height: 0.227em;
  background: var(--red);
}
.mark-dots i.circle {
  border-radius: 50%;
  margin-top: 0.045em;
  background: var(--ink);
}

/* ---- Mono label roles ---- */
.kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.note {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Rules ---- */
.section-rule { height: var(--underline); background: var(--red); border: 0; margin: 0; }
.hairline { height: 1px; background: var(--rule-hair); border: 0; margin: 0; }

/* ---- Long-form pages ---- */
.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}
.page-head { padding-top: 56px; }
.page-head .mark { font-size: 22px; }
.page-head a { text-decoration: none; }
.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink-deep);
  margin: 14px 0 0;
}
.page h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
  margin: 40px 0 12px;
}
.page h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 8px;
}
.page p, .page li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-body);
}
.page ul { padding-left: 20px; }
.page li { margin-bottom: 8px; }
.page a { color: var(--red); }
.page strong { color: var(--ink); font-weight: 400; }

table.processors { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.processors th {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--rule-hair);
}
table.processors td {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-body);
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule-hair);
  vertical-align: top;
}
table.processors td:first-child { color: var(--ink); white-space: nowrap; }

.wrap { overflow-x: auto; }

@media (max-width: 480px) {
  .page-title { font-size: 30px; }
  table.processors td:first-child { white-space: normal; }
}