/* ============================================================
   Donkey Build — shared stylesheet for the standalone pages
   (privacy.html, terms.html).

   WHY THIS FILE EXISTS, AND WHY IT DUPLICATES THE TOKENS
   landing-page.html deliberately keeps every rule inline: it is
   published as an Artifact, whose CSP blocks external hosts, so a
   linked stylesheet would simply not load and build.js expects a
   single <style> block to slice. These legal pages are ordinary
   pages served over HTTP and are never published as Artifacts, so
   they can share a real stylesheet.

   The consequence is one place to keep in sync: if the palette or
   type scale changes on the landing page, mirror it here. Nothing
   enforces that automatically.

   The brand mark is linked rather than inlined for the same
   reason — no CSP to work around off the Artifact runtime.
   ============================================================ */

/* ---- SELF-HOSTED TYPE ----
   Barlow + Barlow Condensed, latin subset, SIL OFL 1.1 (fonts/OFL.txt).
   Mirrors the @font-face block in landing-page.html — see the note there
   for why these are self-hosted rather than loaded from Google Fonts.
   Paths resolve relative to this file, so fonts/ means prototype/fonts/. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/barlow-700.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --paper:      #FFFFFF;
  --surface:    #F2F4F6;
  --surface-2:  #E6E9EC;
  --ink:        #14181B;
  --ink-dim:    #394247;
  --ink-faint:  #59646A;
  --rule:       #C6CCD1;
  --rule-soft:  #DFE3E6;

  --orange:     #E8480C;
  --orange-txt: #B33705;
  --orange-bg:  #FFEDE5;
  --orange-on:  #FFFFFF;

  --blue:       #0A46C8;
  --blue-bg:    #E7EDFC;

  --mark:       #FFDE3D;

  --mark-donkey: url("brand/donkey-mark.png");

  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow",
             "Avenir Next Condensed", "Helvetica Neue Condensed", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

  --t-2xs: .875rem;
  --t-xs:  .9375rem;
  --t-sm:  1.0625rem;
  --t-base:1.25rem;
  --t-lg:  1.375rem;
  --t-xl:  clamp(1.5rem, 1.2rem + .9vw, 1.875rem);
  --t-2xl: clamp(1.85rem, 1.4rem + 1.8vw, 2.6rem);
  --t-3xl: clamp(2.1rem, 1.4rem + 2.9vw, 3.25rem);

  --gut: clamp(1.25rem, 5vw, 4rem);
  --max: 1180px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.62;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- nav (trimmed copy of the landing page's) ---------- */
.nav { background: var(--paper); border-bottom: 2px solid var(--ink); }
.nav-in {
  max-width: var(--max); margin-inline: auto;
  padding: .75rem var(--gut);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  font-family: var(--display); font-weight: 700;
  font-size: 1.75rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; margin-right: auto;
  display: flex; align-items: center; gap: .55rem;
}
.brand em { font-style: normal; color: var(--orange-txt); }
.brand-mark {
  height: 1.28em; aspect-ratio: 196 / 224; flex: none; display: block;
  background-color: currentColor;
  -webkit-mask: var(--mark-donkey) center / contain no-repeat;
  mask: var(--mark-donkey) center / contain no-repeat;
}
.nav-back {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-sm); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; padding-block: .25rem;
}
.nav-back:hover { color: var(--orange-txt); border-bottom-color: var(--orange); }

.tag-ph {
  display: inline-block; font-family: var(--mono); font-size: var(--t-2xs);
  background: var(--mark); color: #1A1706; padding: .1em .45em;
}

/* ---------- document ---------- */
/* Set as a document, not a marketing page: one measure, generous
   leading, numbered clauses that can be cited on the phone. */
.doc { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem); }
.doc-head { max-width: 34em; }
.kicker {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: .11em; text-transform: uppercase;
  color: var(--orange-txt); margin-bottom: .6rem;
}
.krule { height: 2px; border: 0; background: var(--ink); margin: 0 0 1.75rem; }
.doc h1 { font-size: var(--t-3xl); }
.doc-meta {
  margin-top: 1.25rem; font-family: var(--mono); font-size: var(--t-2xs);
  color: var(--ink-faint); letter-spacing: .03em;
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
}

/* The draft banner. Loud on purpose — an unreviewed legal page that
   looks finished is the failure mode this whole file risks. */
.draft {
  margin-top: 2rem; border: 2px solid var(--orange);
  background: var(--orange-bg); padding: 1.1rem 1.35rem;
  max-width: 76ch;
}
.draft b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: .35rem;
}
.draft p { font-size: var(--t-sm); color: var(--ink-dim); }
.draft p + p { margin-top: .5rem; }

/* Plain-English summary, styled like the landing page's .plain box */
.summary {
  margin-top: 2.5rem; background: var(--blue-bg); border-left: 6px solid var(--blue);
  padding: 1.25rem 1.5rem; max-width: 76ch;
}
.summary b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .6rem;
}
.summary ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.summary li { font-size: var(--t-sm); padding-left: 1.5rem; position: relative; line-height: 1.5; }
.summary li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--blue);
}

.toc { margin-top: 2.5rem; border: 1px solid var(--rule); padding: 1.25rem 1.5rem; }
.toc b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .75rem;
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc;
  display: grid; grid-template-columns: 1fr; gap: .35rem .5rem; }
@media (min-width: 760px) { .toc ol { grid-template-columns: 1fr 1fr; } }
.toc li { counter-increment: toc; font-size: var(--t-sm); }
.toc li::before {
  content: counter(toc) ". "; font-family: var(--mono); color: var(--orange-txt);
}
.toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.toc a:hover { color: var(--orange-txt); border-bottom-color: var(--orange); }

.clauses { counter-reset: clause; margin-top: 3rem; max-width: 76ch; }
.clause { counter-increment: clause; padding-top: 2.25rem; }
.clause + .clause { border-top: 1px solid var(--rule-soft); }
.clause h2 {
  font-size: var(--t-xl);
  display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; align-items: baseline;
}
.clause h2::before {
  content: counter(clause);
  font-family: var(--mono); font-size: var(--t-sm); color: var(--orange-txt);
}
.clause > p, .clause > ul, .clause > dl, .clause > .callout, .clause > .grid2 { margin-top: 1rem; }
.clause p, .clause li, .clause dd { font-size: var(--t-sm); }
.clause h3 {
  font-size: var(--t-sm); letter-spacing: .09em; color: var(--ink-dim);
  margin-top: 1.5rem;
}
.clause ul { margin-left: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.clause ul li { padding-left: 1.5rem; position: relative; line-height: 1.5; }
.clause ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--orange);
}
.clause strong { font-weight: 600; }

/* Definition-style rows for "what we collect" */
dl.rows { margin: 0; display: grid; grid-template-columns: 1fr; border: 1px solid var(--rule); }
@media (min-width: 700px) { dl.rows { grid-template-columns: 15rem 1fr; } }
dl.rows dt {
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .07em; text-transform: uppercase; color: var(--orange-txt);
  padding: 1rem 1.25rem .25rem;
}
dl.rows dd { margin: 0; padding: 0 1.25rem 1rem; }
@media (min-width: 700px) {
  dl.rows dt { padding: 1rem 1.25rem; border-top: 1px solid var(--rule-soft); }
  dl.rows dd { padding: 1rem 1.25rem; border-top: 1px solid var(--rule-soft); }
  dl.rows dt:first-of-type, dl.rows dt:first-of-type + dd { border-top: 0; }
}

.callout {
  border-left: 6px solid var(--ink); background: var(--surface);
  padding: 1rem 1.25rem;
}
.callout p { font-size: var(--t-sm); }
.callout p + p { margin-top: .5rem; }

/* ---------- footer ---------- */
footer { background: var(--ink); color: #C4CCD0; }
.foot { max-width: var(--max); margin-inline: auto; padding: 3rem var(--gut); display: flex; flex-direction: column; gap: 1.75rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .8rem 2rem; font-family: var(--display); font-weight: 700; font-size: var(--t-sm); letter-spacing: .07em; text-transform: uppercase; }
.foot-nav a { color: var(--paper); text-decoration: none; }
.foot-nav a:hover { color: var(--mark); }
.foot p { font-size: var(--t-sm); max-width: 76ch; }
.foot-brand { font-family: var(--display); font-weight: 700; font-size: 1.9rem; letter-spacing: .05em; text-transform: uppercase; color: var(--paper); display: flex; align-items: center; gap: .55rem; }
.foot-brand em { font-style: normal; color: var(--orange); }
.foot-brand .brand-mark { width: 1.28em; height: 1.28em; }