/* ══════════════════════════════════════════════════════════════════════
   Kanvel — the pages that say what the studio does with data, what it
   promises, and how it uses AI.

   Read, not persuaded. The public page's tokens and the flat half's
   idiom, and nothing of the world: no canvas, no script, no motion. A
   person who opens a privacy policy wants to find one answer, so every
   section starts with the answer and the headings are questions.

   Tokens are the PUBLIC page's: text is --paper, muted is --paper-3, the
   ground is --void. Vermilion is the mark and nothing else — on these
   pages nobody is being asked to decide anything.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --void:    #0b0a09;
  --ink:     #100e0c;
  --paper:   #efe9dd;
  --paper-2: #cdc4b4;
  --paper-3: #8d8375;
  --rule:    #2b2621;
  --stamp:   #e2492f;

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ui:      "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gut: clamp(1rem, 5vw, 3rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font: 400 16px/1.7 var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--paper); color: var(--ink); }

a { color: var(--paper); text-decoration-color: var(--paper-3); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--paper); }
a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

code {
  font: 400 .88em/1 var(--mono);
  color: var(--paper-2);
  overflow-wrap: anywhere;
}

/* ── Masthead ────────────────────────────────────────────────────────── */

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--gut);
  border-bottom: 1px solid var(--rule);
}
.top__mark { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.top__mark svg { width: 19px; height: 19px; stroke: var(--stamp); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.top__mark span { font-family: var(--display); font-size: 1.15rem; color: var(--paper); }
.top__back { font-size: 14px; color: var(--paper-2); }

/* ── The document ────────────────────────────────────────────────────── */

.doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gut) clamp(3rem, 8vw, 6rem);
}

.doc__kicker {
  font: 600 11px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-3); margin: 0 0 .9rem;
}

h1 {
  font: 400 clamp(2.3rem, 7vw, 3.6rem)/1.05 var(--display);
  letter-spacing: -.03em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.doc__meta { font-size: 13.5px; color: var(--paper-3); margin: 0 0 2.2rem; }

/* The answer first: what a person came for, before the sections that
   back it up. Ruled, not boxed. */
.short {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.3rem 0 1.4rem;
  margin: 0 0 2.8rem;
}
.short h2 {
  font: 600 11px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-3); margin: 0 0 .8rem;
}
.short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.short li { position: relative; padding-left: 1.2rem; color: var(--paper); }
.short li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: .5rem; height: 1px; background: var(--paper-3);
}

.doc section { margin: 0 0 2.4rem; }
.doc section:last-of-type { margin-bottom: 0; }

h2 {
  font: 400 clamp(1.45rem, 3.4vw, 1.8rem)/1.2 var(--display);
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  scroll-margin-top: 1.5rem;
}
h3 { font: 600 15px/1.4 var(--ui); margin: 1.4rem 0 .35rem; }

.doc p, .doc li { color: var(--paper-2); }
.doc p { margin: 0 0 .9rem; max-width: 68ch; }
.doc ul, .doc ol { margin: 0 0 1rem; padding-left: 1.2rem; }
.doc li { margin: 0 0 .45rem; max-width: 66ch; }
.doc li::marker { color: var(--paper-3); }
.doc b, .doc strong { color: var(--paper); font-weight: 600; }

/* Ruled tables for what is kept, why, and for how long. On a phone the
   rows become stacked blocks rather than a table that scrolls sideways. */
.facts { width: 100%; border-collapse: collapse; margin: .4rem 0 1.2rem; font-size: 14.5px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: .75rem .9rem .75rem 0; border-top: 1px solid var(--rule); }
.facts thead th {
  font: 600 10.5px/1.4 var(--ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-3); border-top: 0; padding-top: 0;
}
.facts td { color: var(--paper-2); line-height: 1.6; }
.facts td:first-child { color: var(--paper); font-weight: 500; }

@media (max-width: 640px) {
  .facts thead { display: none; }
  .facts, .facts tbody, .facts tr, .facts td { display: block; width: 100%; }
  .facts tr { border-top: 1px solid var(--rule); padding: .8rem 0; }
  .facts td { border: 0; padding: .15rem 0; }
  .facts td[data-label]::before {
    content: attr(data-label); display: block;
    font: 600 10.5px/1.4 var(--ui); letter-spacing: .12em; text-transform: uppercase;
    color: var(--paper-3); margin-top: .45rem;
  }
}

/* ── Between the three, and back ─────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule);
  padding: 1.6rem var(--gut) 2.2rem;
  font-size: 14px;
  color: var(--paper-3);
}
.foot__in { max-width: 44rem; margin: 0 auto; display: grid; gap: .8rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot nav a { color: var(--paper-2); }
.foot nav a[aria-current="page"] { color: var(--paper); text-decoration: none; }
.foot p { margin: 0; }