/* The privacy policy: a document to read, on the account page's colours. */

/* From @keyrook/brand, brand.css: the colours, the roles light and dark, the
   type scale and the sketched boxes this page uses. Copied, never edited: a new
   look is a change there, copied here again. */

:root {
  --kr-ink: #22201C;
  --kr-paper: #FBF8F2;
  --kr-neutral-0: #FFFFFF;
  --kr-neutral-50: #FBF8F2;
  --kr-neutral-100: #F3EEE4;
  --kr-neutral-200: #E6DFD1;
  --kr-neutral-300: #CFC7B7;
  --kr-neutral-400: #A69F92;
  --kr-neutral-500: #7E786D;
  --kr-neutral-600: #5C574F;
  --kr-neutral-700: #403C36;
  --kr-neutral-800: #2C2925;
  --kr-neutral-900: #22201C;
  --kr-neutral-950: #1A1916;
  --kr-blue-50: #EFF3FC;
  --kr-blue-100: #DFE8F9;
  --kr-blue-200: #BCCEF3;
  --kr-blue-300: #95B1EC;
  --kr-blue-400: #6992E4;
  --kr-blue-500: #3A6FDB;
  --kr-blue-600: #3561BB;
  --kr-blue-700: #30539C;
  --kr-blue-800: #2B467C;
  --kr-blue-900: #263A61;
  --kr-red-50: #FDF0EF;
  --kr-red-100: #FAE2DF;
  --kr-red-200: #F4C1BC;
  --kr-red-300: #EE9D95;
  --kr-red-400: #E77569;
  --kr-red-500: #E0493A;
  --kr-red-600: #C04134;
  --kr-red-700: #A13A2E;
  --kr-red-800: #813229;
  --kr-red-900: #652B24;
  --kr-yellow-50: #FEF9ED;
  --kr-yellow-100: #FDF3DB;
  --kr-yellow-200: #FBE5B1;
  --kr-yellow-300: #F8D584;
  --kr-yellow-400: #F5C452;
  --kr-yellow-500: #F2B21B;
  --kr-yellow-600: #CF9A1A;
  --kr-yellow-700: #AD8119;
  --kr-yellow-800: #8A6919;
  --kr-yellow-900: #6C5318;
  --kr-green-50: #EEF7F2;
  --kr-green-100: #DEF0E5;
  --kr-green-200: #B8DFC7;
  --kr-green-300: #8FCCA6;
  --kr-green-400: #61B782;
  --kr-green-500: #2FA05A;
  --kr-green-600: #2C8A4F;
  --kr-green-700: #287544;
  --kr-green-800: #255F39;
  --kr-green-900: #224C30;
  --kr-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --kr-font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --kr-line-hair: 1.5px;
  --kr-line-pen: 2px;
  --kr-line-marker: 3px;
  --kr-radius-sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --kr-radius-sketch-small: 14px 4px 12px 4px / 4px 12px 4px 14px;
  --kr-radius-sketch-alt: 15px 225px 15px 255px / 255px 15px 225px 15px;
  --kr-radius-sketch-small-alt: 4px 14px 4px 12px / 12px 4px 14px 4px;
  --kr-space-1: 4px;
  --kr-space-2: 8px;
  --kr-space-3: 12px;
  --kr-space-4: 16px;
  --kr-space-5: 20px;
  --kr-space-6: 24px;
  --kr-space-8: 32px;
  --kr-space-10: 40px;
  --kr-space-12: 48px;
  --kr-space-16: 64px;
  --kr-space-24: 96px;
  --kr-motion-fast: 120ms;
  --kr-motion-base: 200ms;
  --kr-motion-slow: 400ms;
  --kr-motion-draw: 700ms;
  --kr-motion-stagger: 40ms;
  --kr-motion-wait: 300ms;
  --kr-motion-hold: 1500ms;
  --kr-motion-toast: 4000ms;
  --kr-boil-step: 150ms;
  --kr-boil-rounds: 4;
  --kr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kr-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --kr-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --kr-ease-settle: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* What a page reads. Light by default; dark below. */
  --kr-page: var(--kr-paper);
  --kr-surface: var(--kr-neutral-0);
  --kr-surface-sunken: var(--kr-neutral-100);
  --kr-text: var(--kr-ink);
  --kr-text-muted: var(--kr-neutral-600);
  --kr-line: var(--kr-neutral-200);
  --kr-line-strong: var(--kr-neutral-500);
  --kr-crow-ink: var(--kr-ink);
  --kr-focus: var(--kr-blue-500);
  --kr-highlight: var(--kr-yellow-200);
  --kr-shadow-raised: 3px 4px 0 rgba(34, 32, 28, 0.14);
  --kr-shadow-floating: 5px 7px 0 rgba(34, 32, 28, 0.16);
  --kr-action: var(--kr-blue-600);
  --kr-danger: var(--kr-red-600);
  --kr-warning: var(--kr-yellow-800);
  --kr-success: var(--kr-green-700);
}

[data-theme='dark'] {
  --kr-page: var(--kr-neutral-950);
  --kr-surface: var(--kr-neutral-900);
  --kr-surface-sunken: var(--kr-neutral-800);
  --kr-text: var(--kr-paper);
  --kr-text-muted: var(--kr-neutral-400);
  --kr-line: var(--kr-neutral-700);
  --kr-line-strong: var(--kr-neutral-400);
  --kr-crow-ink: var(--kr-paper);
  --kr-focus: var(--kr-blue-300);
  --kr-highlight: var(--kr-yellow-900);
  --kr-shadow-raised: 3px 4px 0 rgba(0, 0, 0, 0.4);
  --kr-shadow-floating: 5px 7px 0 rgba(0, 0, 0, 0.45);
  --kr-action: var(--kr-blue-300);
  --kr-danger: var(--kr-red-300);
  --kr-warning: var(--kr-yellow-300);
  --kr-success: var(--kr-green-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --kr-page: var(--kr-neutral-950);
    --kr-surface: var(--kr-neutral-900);
    --kr-surface-sunken: var(--kr-neutral-800);
    --kr-text: var(--kr-paper);
    --kr-text-muted: var(--kr-neutral-400);
    --kr-line: var(--kr-neutral-700);
    --kr-line-strong: var(--kr-neutral-400);
    --kr-crow-ink: var(--kr-paper);
    --kr-focus: var(--kr-blue-300);
    --kr-highlight: var(--kr-yellow-900);
    --kr-shadow-raised: 3px 4px 0 rgba(0, 0, 0, 0.4);
    --kr-shadow-floating: 5px 7px 0 rgba(0, 0, 0, 0.45);
    --kr-action: var(--kr-blue-300);
    --kr-danger: var(--kr-red-300);
    --kr-warning: var(--kr-yellow-300);
    --kr-success: var(--kr-green-300);
  }
}

.kr-sketch {
  border-radius: var(--kr-radius-sketch);
}

.kr-sketch-small {
  border-radius: var(--kr-radius-sketch-small);
}

.kr-h2 {
  font: 600 32px/40px var(--kr-font-sans);
  letter-spacing: -0.015em;
}

.kr-h3 {
  font: 600 24px/32px var(--kr-font-sans);
  letter-spacing: -0.01em;
}

.kr-h4 {
  font: 600 19px/28px var(--kr-font-sans);
}

.kr-body {
  font: 400 16px/26px var(--kr-font-sans);
}

.kr-small {
  font: 400 14px/22px var(--kr-font-sans);
}

.kr-caption {
  font: 500 12px/18px var(--kr-font-sans);
  letter-spacing: 0.01em;
}

.kr-code-xl {
  font: 600 40px/48px var(--kr-font-mono);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.kr-code {
  font: 600 28px/36px var(--kr-font-mono);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.kr-code-sm {
  font: 500 15px/24px var(--kr-font-mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.kr-raised {
  box-shadow: var(--kr-shadow-raised);
}
/* The page's colours, light and dark, on the brand's (brand.css). Shared by
   the account page and its privacy policy. */

:root {
  --page-bg: #f6f5f2;
  --card-bg: #ffffff;
  --border: #e7e3da;
  --border-strong: #cfc8ba;
  --text-soft: #6b665d;
  --radius: 14px;
  --radius-sm: 10px;
  --primary: var(--kr-blue-600);
  --primary-hover: var(--kr-blue-700);
  --primary-soft: var(--kr-blue-50);
  --success-soft: var(--kr-green-50);
  --success-ink: var(--kr-green-700);
  --warning-soft: var(--kr-yellow-50);
  --warning-ink: var(--kr-yellow-800);
  --danger-soft: var(--kr-red-50);
  --danger-ink: var(--kr-red-600);
  --shadow: 0 1px 2px rgba(34, 32, 28, 0.04), 0 4px 16px rgba(34, 32, 28, 0.04);
  --story-bg: var(--kr-ink);
  --story-soft: rgba(251, 248, 242, 0.68);
  --sunken: var(--kr-neutral-100);
  --hover: rgba(34, 32, 28, 0.05);
  --focus-ring: 0 0 0 3px rgba(58, 111, 219, 0.28);
  --shadow-pop: 0 16px 48px rgba(34, 32, 28, 0.18), 0 2px 6px rgba(34, 32, 28, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --page-bg: #151412;
    --card-bg: #1e1d1a;
    --border: #2f2d29;
    --border-strong: #45423c;
    --text-soft: #a49e92;
    --primary: var(--kr-blue-400);
    --primary-hover: var(--kr-blue-300);
    --primary-soft: rgba(105, 146, 228, 0.14);
    --success-soft: rgba(47, 160, 90, 0.16);
    --success-ink: var(--kr-green-300);
    --warning-soft: rgba(242, 178, 27, 0.14);
    --warning-ink: var(--kr-yellow-300);
    --danger-soft: rgba(224, 73, 58, 0.14);
    --danger-ink: var(--kr-red-300);
    --shadow: none;
    --story-bg: #151412;
    --sunken: #26241f;
    --hover: rgba(251, 248, 242, 0.06);
    --focus-ring: 0 0 0 3px rgba(149, 177, 236, 0.35);
    --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--kr-text);
  font: 400 16px/1.65 var(--kr-font-sans);
  -webkit-font-smoothing: antialiased;
}

.policy {
  max-width: 44rem;
  margin: 0 auto;
  padding: 48px 16px 64px;
}

.policy header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

.policy header img {
  display: block;
  width: 140px;
  height: auto;
}

.policy article {
  padding: 40px clamp(20px, 5vw, 48px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.policy h1 {
  margin: 0 0 6px;
  font: 700 32px/1.2 var(--kr-font-sans);
  letter-spacing: -0.015em;
}

.policy h2 {
  margin: 40px 0 12px;
  font: 600 20px/1.3 var(--kr-font-sans);
}

.policy p,
.policy ul {
  margin: 0 0 14px;
}

.policy ul {
  padding-left: 1.2em;
}

.policy li {
  margin-bottom: 10px;
}

.policy .updated,
.policy footer {
  color: var(--text-soft);
  font-size: 14px;
}

.policy .changes {
  margin: 24px 0 8px;
  padding: 18px 22px 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
}

.policy .changes h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.policy .changes ul + h2 {
  margin-top: 20px;
}

.policy .lead {
  font-size: 17px;
}

.policy a {
  color: var(--primary);
  text-underline-offset: 2px;
}

.policy footer {
  margin-top: 28px;
  text-align: center;
}