/* Legal document pages. Loads after style.css and uses its tokens.

   Register: a printed document on paper, not a marketing page. This is the one
   page on the site where density is correct, because the reader is checking a
   specific clause rather than scanning. So the scanning rule in PRODUCT.md does
   not apply here and the jump list carries the scanning job instead.

   ⚠️ Only ever render the BLANK sample through this. Brackets are visible on
   purpose, styled just enough to read as fill-in points rather than as an
   unfinished page. */

/* ── Head ─────────────────────────────────────────────────────── */
.doc { padding-bottom: clamp(3rem, 8vw, 5.5rem); }

.dochead { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.dochead h1 { margin-top: 0.5rem; }

/* Matches /work/. Duplicated rather than shared because work.css is the project
   pages and this page does not load it. */
.backlink {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  font-family: var(--display); font-weight: 600; font-size: 0.88rem;
  color: var(--ink-soft); text-decoration: none;
}
.backlink:hover { color: var(--ink); }

.doc__descriptor {
  font-size: var(--step-1); color: var(--ink-soft);
  max-width: 46ch; line-height: 1.45; margin-bottom: 0;
}

/* ── Sample notice ────────────────────────────────────────────── */
/* Stamp rule on the left, same device as .note__body on the project pages. The
   reader has to know this is the blank one before they read a dollar amount
   with brackets around it. */
.doc__note {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  max-width: 54ch;
  border-left: 3px solid var(--stamp);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.doc__note--inline { margin-top: 1.25rem; }

/* ── Jump list ────────────────────────────────────────────────── */
/* The five clauses people actually ask about on a call. Every heading has an id
   so any clause can be linked directly, but only these five are surfaced. */
.doc__jump {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
}
.doc__jumplabel {
  font-family: var(--display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.doc__jump ul { list-style: none; margin: 0; padding: 0; }
.doc__jump li { border-bottom: 1px solid var(--hair); }
.doc__jump a {
  display: block; padding-block: 0.7rem; min-height: 44px;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  color: var(--ink); text-decoration: none;
}
.doc__jump a:hover { color: var(--stamp-deep); }

/* ── The document ─────────────────────────────────────────────── */
/* 62ch, not the 46ch the marketing sections use. A contract clause read at 46ch
   turns into a column of six-word lines and the eye loses the sentence. */
.doc__body {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 2px solid var(--ink);
}
.doc__body p,
.doc__body ul,
.doc__body ol,
.doc__body dl { max-width: 62ch; }

/* Only the Addendum uses h2 inside the document. It gets the same heavy rule
   that opens the document, because it is a second document attached to the
   first and a reader has to see the seam. */
.doc__body h2 {
  font-size: var(--step-2);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

/* scroll-margin so a jump-list tap does not park the heading under the sticky
   nav. The nav is 64px at its tallest, plus a little air. */
.doc__body h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.12rem;
  line-height: 1.3; letter-spacing: -0.015em;
  margin: 2.1rem 0 0.7rem; scroll-margin-top: 5.5rem;
}
.doc__body h2 { scroll-margin-top: 5.5rem; }

.doc__body ul,
.doc__body ol { padding-left: 1.15rem; margin-bottom: 1.1rem; }
.doc__body li { margin-bottom: 0.4rem; }

/* ── Parties block ────────────────────────────────────────────── */
.doc__parties {
  margin: 0 0 1.75rem;
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
}
.doc__parties dt {
  font-family: var(--display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft);
}
.doc__parties dd { margin: 0; }

/* ── Fill-in points ───────────────────────────────────────────── */
/* The scope list is the one bracket big enough to read as missing content
   rather than as a blank on a form, so it gets a visible tray. */
.doc__fill {
  background: var(--surface);
  border: 1px dashed var(--hair);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  color: var(--ink-soft);
  font-family: var(--display); font-weight: 600; font-size: 0.92rem;
}

/* ── Signature block ──────────────────────────────────────────── */
.doc__sign {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  color: var(--ink-soft); font-size: 0.95rem;
}
.doc__sign p { max-width: 62ch; }
.doc__signlabel {
  font-family: var(--display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-bottom: 0.9rem;
}

/* ── Print ────────────────────────────────────────────────────── */
/* An owner who wants this on paper should get the document and nothing else.
   The nav, the jump list and the footer are navigation, not terms. */
@media print {
  .nav, .foot, .doc__jump, .backlink, .skip { display: none; }
  body { background: #fff; color: #000; }
  .doc__body p, .doc__body ul, .doc__body ol, .doc__body dl { max-width: none; }
  .doc__body h2, .doc__body h3 { page-break-after: avoid; }
}