/* ==============================================================
   doc.css — long-form documents
   Privacy policy and anything else that is read rather than
   scrolled through. Same tokens, same grid; the only new idea is
   a reading measure and a rhythm that survives 3,000 words.
   ============================================================== */

/* No fixed header on these pages: the back link is the navigation,
   so the top inset only has to be air, not clearance. */
.doc { padding: 12vh 0 16vh; }

.doc-head { margin-bottom: clamp(56px, 8vw, 120px); }
.doc-head h1 {
  font-size: clamp(46px, calc(46px + 58 * ((100vw - 375px) / 1065)), 104px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
}
.doc-head .doc-meta {
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0;
}

/* The index is a real aid at this length, not decoration. */
.doc-toc { margin-bottom: clamp(48px, 6vw, 88px); }
.doc-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  columns: 2;
  column-gap: var(--gutter);
}
.doc-toc li { counter-increment: toc; break-inside: avoid; margin-bottom: 10px; }
.doc-toc a {
  display: flex;
  gap: 14px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--grey);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.doc-toc a:hover { border-bottom-color: currentColor; }

.doc-body > section { margin-bottom: clamp(48px, 6vw, 84px); scroll-margin-top: 14vh; }
.doc-body h2 {
  font-size: clamp(26px, calc(26px + 12 * ((100vw - 375px) / 1065)), 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  padding-top: 26px;
  border-top: 1px solid var(--grey-rule);
}
.doc-body h3 {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 34px 0 12px;
}
.doc-body p,
.doc-body li {
  font-size: var(--fs-body);
  line-height: 1.55;
  max-width: 68ch;
}
.doc-body p { margin: 0 0 1.1em; }
.doc-body ul { margin: 0 0 1.4em; padding-left: 1.1em; }
.doc-body li { margin-bottom: 0.5em; }
.doc-body a { border-bottom: 1px solid currentColor; text-decoration: none; }
.doc-body a:hover { opacity: 0.65; }

/* Definition rows: what is collected, and why. A table would be four
   words per cell pretending to be data. */
.doc-defs { margin: 0 0 1.6em; }
.doc-defs > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 6px var(--gutter);
  padding: 16px 0;
  border-top: 1px solid var(--grey-rule);
}
.doc-defs dt { font-weight: 500; }
.doc-defs dd { margin: 0; color: var(--grey); max-width: 56ch; }

.doc-note {
  margin-top: clamp(48px, 6vw, 80px);
  padding: 26px 0 0;
  border-top: 1px solid var(--grey-rule);
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--grey);
  max-width: 68ch;
}

@media screen and (max-width: 47.99em) {
  .doc { padding: 9vh 0 12vh; }
  .doc-toc ol { columns: 1; }
  .doc-defs > div { grid-template-columns: minmax(0, 1fr); }
  .doc-defs dd { max-width: none; }
}

/* ---- back to home ------------------------------------------------
   Sits above the title on every long document. The arrow points the
   way out; the rule under it is the same one the contact link uses,
   so the two read as the same kind of thing. */
.doc-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(44px, 5vw, 76px);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  transition: opacity 150ms linear;
}
.doc-back svg { width: 22px; height: 10px; flex: 0 0 auto; }
.doc-back:hover { opacity: 0.6; }
.doc-back:focus-visible { outline: 2px solid var(--black); outline-offset: 6px; }
/* The rule wants to sit tight under the words, so the touch target is
   grown behind the link rather than by padding it to 44px. */
.doc-back::after {
  content: '';
  position: absolute;
  inset: -12px -10px;
}

/* Sibling documents point at each other so neither is a dead end. */
.doc-sibling {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--grey-rule);
  font-size: var(--fs-caption);
  color: var(--grey);
}
.doc-sibling a { color: var(--black); }

/* ==============================================================
   Practices — the three-up on /services/
   ==============================================================
   The reference for this block was a set of coloured, illustrated
   package cards. Translated into this site's terms: colour becomes
   the tonal range (black, grey, paper), the illustration becomes a
   reversed numeral, and the card becomes a rule. No shadows, no
   corner radii — the grid does the separating.
   ============================================================== */

.practices {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 56px);
  margin: 0 0 clamp(56px, 7vw, 96px);
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .practices { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); }
}

.practice { display: flex; flex-direction: column; }

/* The plate carries the numeral and the tone. 4:3 keeps the three
   the same height whatever the column width resolves to. */
.practice-plate {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  padding: clamp(14px, 1.6vw, 22px);
  margin-bottom: 20px;
  background: var(--black);
  color: var(--white);
}
.practice:nth-child(2) .practice-plate { background: var(--grey); }
.practice:nth-child(3) .practice-plate {
  background: var(--paper);
  color: var(--black);
  box-shadow: inset 0 0 0 1px var(--grey-rule);
}

.practice-num {
  font-size: clamp(52px, 7vw, 88px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.practice h2 {
  font-size: clamp(21px, calc(21px + 6 * ((100vw - 375px) / 1065)), 27px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--black);
}
.practice h2 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.practice h2 a:hover,
.practice h2 a:focus-visible { border-bottom-color: currentColor; }

.practice p {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--grey);
  margin: 0 0 18px;
}

/* The scope line is the honest equivalent of the reference's
   "1 Design Day" — what the practice actually covers, not a price. */
/* Scoped under .practice so it outranks `.practice p` above — otherwise
   that rule's margin-bottom wins and the auto top-margin never applies,
   leaving the scope lines unpinned from the card foot. */
.practice .practice-scope {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--grey-rule);
  font-size: var(--fs-caption);
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}