/* MapKraken — engraved register. ONE ROUTE ONLY: /security.html.
 *
 * Brand system §4.2 and §10 ("Security / trust page · Engraved · Mark only,
 * small"), and trust-page.md's own Design notes table, which is the governing
 * spec for this file:
 *
 *   Register      Engraved only. Nothing plush anywhere on this page.
 *   Kraken        Mark only, 32 px, in the header. Not in the body, not in the
 *                 footer, not as an ornament, NOT AS THE FAVICON on this route.
 *   Tagline       Absent, deliberately. It is a plush-register lockup.
 *   Type          Text/UI face only. No display face at any size.
 *   Colour        Deep Ink on Parchment — 9.97:1, AAA, and the strongest pair
 *                 in the palette. No Kraken Purple CTA treatment; nothing on
 *                 this page is a CTA.
 *   Ornament      None. No compass rose, no rope border, no "Here be
 *                 territories". This register earns credibility by restraint.
 *   Layout        §12 must be reachable from the top of the page.
 *
 * Brand-assets misuse rule 9 is why this is a separate stylesheet rather than a
 * modifier class: the two registers must not meet on a page an enterprise buyer
 * reads while evaluating trust.
 *
 * No hex literal here either. Check 6.
 */

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

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

body {
  margin: 0;
  /* Text/UI face only. The display tier does not appear on this page. */
  font-family: var(--mk-type-family-text);
  font-size: var(--mk-type-size-md);
  /* Long-form leading: this page is read, not scanned. */
  line-height: var(--mk-type-leading-relaxed);
  color: var(--mk-color-deep-ink);
  background: var(--mk-color-parchment);
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--mk-color-parchment); padding: var(--mk-space-2) var(--mk-space-4); }
.skip:focus { left: var(--mk-space-4); }

:focus-visible { outline: 2px solid var(--mk-color-deep-ink); outline-offset: 2px; }

.wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--mk-space-5); }

/* ── Header: the 32 px engraved mark, and nothing else ──────────────────── */

.doc-head {
  border-bottom: 1px solid var(--mk-color-n-300);
  padding-block: var(--mk-space-5);
}
.doc-head .wrap { display: flex; align-items: center; gap: var(--mk-space-4); }
/* The masthead carries the WORDMARK and no character art — check 9. Sized to
 * the old 32 px mark's optical weight so the header's rhythm is unchanged. */
.doc-head .name { display: block; line-height: 0; }
.doc-head .name img { height: 26px; width: auto; display: block; }
.doc-head .name {
  color: var(--mk-color-deep-ink);
  text-decoration: none;
}
.doc-head .back { margin-left: auto; font-size: var(--mk-type-size-sm); }

/* ── Contents — §12 must be reachable from the top ──────────────────────── */

.contents {
  border: 1px solid var(--mk-color-n-300);
  padding: var(--mk-space-5);
  margin-block: var(--mk-space-7);
}
.contents h2 {
  border-top: 0;
  padding-top: 0;
  font-size: var(--mk-type-size-2xs);
  letter-spacing: var(--mk-type-tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--mk-space-3);
  font-weight: var(--mk-type-weight-semibold);
}
.contents ol { margin: 0; padding-left: var(--mk-space-5); columns: 2; column-gap: var(--mk-space-6); font-size: var(--mk-type-size-sm); }
.contents li { margin-bottom: var(--mk-space-1); break-inside: avoid; }
.contents .anchor-12 a { font-weight: var(--mk-type-weight-semibold); }

/* ── Document body ──────────────────────────────────────────────────────── */

main { padding-bottom: var(--mk-space-9); }

h1 {
  font-family: var(--mk-type-family-text);
  font-size: var(--mk-type-size-3xl);
  line-height: var(--mk-type-leading-tight);
  margin: var(--mk-space-7) 0 var(--mk-space-5);
}
h2 {
  font-family: var(--mk-type-family-text);
  font-size: var(--mk-type-size-xl);
  line-height: var(--mk-type-leading-tight);
  margin: var(--mk-space-8) 0 var(--mk-space-4);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-color-n-300);
}
h3 { font-size: var(--mk-type-size-lg); margin: var(--mk-space-6) 0 var(--mk-space-3); }

p { margin: 0 0 var(--mk-space-4); }
a { color: var(--mk-color-deep-ink); text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--mk-color-n-300); margin-block: var(--mk-space-7); }

ul { margin: 0 0 var(--mk-space-4); padding-left: var(--mk-space-5); }
li { margin-bottom: var(--mk-space-2); }

blockquote {
  margin: var(--mk-space-5) 0;
  padding: var(--mk-space-4) var(--mk-space-5);
  border-left: 3px solid var(--mk-color-deep-ink);
  background: var(--mk-color-n-025);
}
blockquote > :last-child { margin-bottom: 0; }

pre {
  overflow-x: auto;
  background: var(--mk-color-n-025);
  border: 1px solid var(--mk-color-n-300);
  padding: var(--mk-space-4);
  font-size: var(--mk-type-size-xs);
  line-height: var(--mk-type-leading-snug);
}
code { font-family: var(--mk-type-family-mono); font-size: 0.92em; }
pre code { font-size: inherit; }

.table-scroll { overflow-x: auto; margin-bottom: var(--mk-space-5); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mk-type-size-sm);
  line-height: var(--mk-type-leading-snug);
  font-variant-numeric: var(--mk-type-numeric-tabular);
}
th, td { text-align: left; vertical-align: top; padding: var(--mk-space-3); border: 1px solid var(--mk-color-n-300); }
th { font-weight: var(--mk-type-weight-semibold); background: var(--mk-color-n-025); }

/* ── Footer: "Last updated" comes from the SOURCE, never a build stamp ──── */

.doc-foot {
  border-top: 1px solid var(--mk-color-n-300);
  padding-block: var(--mk-space-6);
  font-size: var(--mk-type-size-sm);
  color: var(--mk-color-n-700);
}
.doc-foot p { margin-bottom: var(--mk-space-2); }

@media (max-width: 620px) {
  .contents ol { columns: 1; }
  h1 { font-size: var(--mk-type-size-2xl); }
}