/*
 * Shared by privacy.html and terms.html. index.html stays a single self-contained file on
 * purpose (it is the one page that has to survive being copied anywhere), but two long prose
 * pages with identical styling would be a fork of the same CSS, so they share this instead.
 *
 * Tokens are copied from the 1stHour v0.2 set, same as index.html. If they change in
 * docs/design-system.md, change them in both places.
 */

:root {
  --ink: #1e2a32;
  --ink-74: rgba(30, 42, 50, 0.74);
  --ink-60: rgba(30, 42, 50, 0.6);
  --ink-42: rgba(30, 42, 50, 0.42);
  --ink-12: rgba(30, 42, 50, 0.12);
  --page: #ede9e1;
  --surface: #fbf9f4;
  --gold: #7c6a46;
  --gold-wash: rgba(124, 106, 70, 0.12);
  --teal: #2f5d62;
  --amber: #b8863b;
  --font-serif: 'Spectral', Georgia, serif;
  --font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter: 20px;
  --tap: 44px;
}

html,
body {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Long URLs and scope strings must not push a 390px page sideways (hard rule 1). */
  overflow-wrap: break-word;
}
h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0;
}
p,
ul {
  margin: 0;
}
a {
  color: var(--teal);
}
.scope {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px var(--gutter) 40px;
}

/* Hard rule 1: a real 44px target, not a text link people have to pinch at. */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 10px;
  z-index: 5;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: 10px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--teal);
  text-decoration: none;
  min-height: var(--tap);
}
.mark-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.top .back {
  font-size: 15px;
  font-weight: 600;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

.doc-head {
  margin-top: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink-12);
}
.doc-head h1 {
  font-size: clamp(30px, 8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.doc-head .dates {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-60);
}
.doc-head .summary {
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-74);
}

section.doc {
  margin-top: 34px;
}
section.doc h2 {
  font-size: 24px;
  line-height: 1.2;
}
section.doc h3 {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
}
section.doc p,
section.doc ul {
  margin-top: 12px;
  color: var(--ink-74);
}
section.doc ul {
  padding-left: 20px;
}
section.doc li + li {
  margin-top: 7px;
}
section.doc strong {
  color: var(--ink);
  font-weight: 600;
}

/* A quoted obligation from someone else's policy, kept verbatim so it cannot drift. */
.quote {
  margin-top: 14px;
  background: var(--gold-wash);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--ink);
}

/* Unresolved before publishing. Loud on purpose: a placeholder that looks like prose ships. */
.todo {
  background: rgba(184, 134, 59, 0.22);
  color: #6b4a14;
  border-bottom: 2px solid var(--amber);
  font-weight: 600;
  padding: 0 3px;
}

.toc {
  margin-top: 26px;
  background: var(--surface);
  border: 1px solid var(--ink-12);
  border-radius: 14px;
  padding: 16px 18px;
}
.toc p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.toc ol {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 15px;
}
.toc li + li {
  margin-top: 5px;
}

footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-12);
  font-size: 14px;
  color: var(--ink-42);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
footer .who {
  max-width: 62ch;
}
footer .who p + p {
  margin-top: 6px;
}
footer .name {
  color: var(--ink-60);
  font-weight: 500;
}
footer nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
footer nav a {
  font-size: 15px;
  font-weight: 600;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

@media (min-width: 960px) {
  .wrap {
    padding: 30px 40px 56px;
  }
}