/* The two documents nobody reads until they need to, set so that the one
   person who does can actually get through them.
 *
 * Its own stylesheet rather than landing.css: the landing page is a sequence of
 * staged scenes with a scroll rotor, and none of that machinery has anything to
 * do with a page whose whole job is a column of prose. Both draw from tokens.css,
 * so the two surfaces agree about what --ink-2 means without sharing a line.
 */
/* The landing's token file carries no hairline role, because the landing draws none.
   Declared here rather than added to tokens.css, which is generated from the
   design skill's canon and must not gain a name only one page uses. */
:root {
  --rule-l: color-mix(in srgb, var(--ink) 12%, transparent);
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  line-height: 1.65;
  /* One measure, and it is narrow on purpose. A legal document set to the full
     width of a laptop is a document that has decided not to be read. */
  padding: 0 24px 120px;
}

main {
  max-width: 64ch;
  margin: 0 auto;
}

/* ---------- head */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 0;
  font-size: 13px;
}
.top a {
  color: var(--ink-2);
  text-decoration: none;
}
.top a:hover {
  color: var(--ink);
}
.wordmark {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: 15px;
  color: var(--ink);
}

h1 {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-size: clamp(32px, 6vw, 46px);
  margin: 56px 0 10px;
}

/* Version and date sit under the title as one meta line, in the machine's own
   voice: this is the string the acceptance record stores, and a reader who is
   checking which text they agreed to is looking for exactly it. */
.meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 34px;
}

/* The summary above the document. Not a substitute for it and it says so, but a
   document whose first paragraph is a definition of "Service" teaches the
   reader that nothing here is meant for them. */
.gist {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 44px;
}
.gist p {
  color: var(--ink);
  font-size: 15px;
}
.gist p + p {
  margin-top: 10px;
}
.gist strong {
  font-weight: 600;
}

h2 {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 21px;
  margin: 44px 0 12px;
  scroll-margin-top: 24px;
}
h3 {
  font-weight: 600;
  font-size: 16px;
  margin: 26px 0 8px;
}

p,
li {
  color: var(--ink-2);
  font-size: 15.5px;
}
p + p {
  margin-top: 14px;
}
/* A paragraph that follows a list is still a new paragraph. Without this the
   sentence closing a section sits flush against the last bullet and reads as
   part of it. */
ul + p {
  margin-top: 14px;
}
ul {
  margin: 12px 0 0;
  padding-left: 20px;
}
li + li {
  margin-top: 8px;
}
li::marker {
  color: var(--ink-3);
}

strong {
  color: var(--ink);
  font-weight: 600;
}
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-l);
}
a:hover {
  border-bottom-color: var(--ink);
}
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ink);
}

/* A table is the only shape that answers "what is kept, and for how long"
   without the reader assembling it from four paragraphs. */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 14.5px;
}
th,
td {
  text-align: left;
  padding: 9px 12px 9px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-l);
}
th {
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
td {
  color: var(--ink-2);
}
.wrap-scroll {
  overflow-x: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule-l);
  margin: 52px 0;
}

.foot {
  margin-top: 56px;
  font-size: 13px;
  color: var(--ink-3);
}
.foot a {
  color: var(--ink-2);
  border-bottom-color: transparent;
}
.foot a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule-l);
}