/* The Disciples — terms page.
 *
 * Loaded alongside styles.css, which owns the colour tokens: this file adds
 * the document typography and nothing else, so a change of theme there carries
 * over here with no second set of values to keep in step.
 *
 * Inter is self-hosted. Google serves it as a variable font — one file per
 * subset covers the whole weight range, and the 400 and 500 downloads are
 * byte-identical — so a single face is declared per subset over a weight
 * range rather than one file per weight.
 */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --measure: 34rem;
  --rule: color-mix(in srgb, var(--tape) 15%, transparent);
}

/* styles.css pins the landing page to the viewport and hides overflow, which
   would trap a long document inside a full-height box. A document scrolls. */
.terms-page {
  height: auto;
  overflow: visible;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  /* Set on the page, not on each element: text-transform is presentational,
     so the markup keeps its real capitalisation and a copy-paste of a clause
     into a contract or an email comes out properly cased. */
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1;   /* single-storey l, easier to tell from 1 */
}

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 10vw, 7rem) clamp(1.5rem, 6vw, 2rem)
           clamp(4rem, 12vw, 8rem);
  color: var(--tape);
}

/* ---------- masthead ---------- */

.doc__mark {
  display: block;
  width: 9rem;
  margin-bottom: clamp(2.5rem, 8vw, 4rem);
}

.doc__mark svg,
.doc__mark img { display: block; width: 100%; height: auto; }

.doc__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.doc__standfirst {
  margin: 1.5rem 0 0;
  color: color-mix(in srgb, var(--tape) 68%, transparent);
}

.doc__rule {
  height: 1px;
  margin: clamp(2.5rem, 8vw, 3.5rem) 0;
  border: 0;
  background: var(--rule);
}

/* ---------- sections ---------- */

.doc section + section { margin-top: clamp(2.25rem, 7vw, 3rem); }

.doc h2 {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* The clause number is part of the sentence, so it is not a list marker; it
   is hung in the margin where there is room and inlined where there is not. */
.clause {
  margin: 0 0 0.95rem;
  color: color-mix(in srgb, var(--tape) 82%, transparent);
}

.clause:last-child { margin-bottom: 0; }

.clause b {
  font-weight: 400;
  color: var(--tape);
}

@media (min-width: 48rem) {
  .clause { position: relative; padding-left: 3.25rem; }
  .clause b {
    position: absolute;
    left: 0;
    color: color-mix(in srgb, var(--tape) 45%, transparent);
    font-variant-numeric: tabular-nums;
  }
  .doc h2 { padding-left: 3.25rem; }
}

/* ---------- colophon ---------- */

.doc__foot {
  margin-top: clamp(3rem, 10vw, 4.5rem);
  padding-top: clamp(1.75rem, 6vw, 2.5rem);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--tape) 55%, transparent);
}

.doc__foot p { margin: 0 0 0.9rem; }
.doc__foot p:last-child { margin-bottom: 0; }

.doc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 160ms ease-out;
}

.doc a:hover,
.doc a:focus-visible { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .doc a { transition: none; }
}

/* ---------- print ---------- */

/* Used to produce terms.pdf via headless Chromium, and by anyone who hits
   print on the page. Screen sizing is set for reading on a display; on paper
   the page margins do that work instead. */

@page {
  size: A4;
  margin: 22mm 20mm 20mm;
}

@media print {
  .terms-page {
    font-size: 9.5pt;
    line-height: 1.55;
    /* The D carries its maker's colours and the rules are drawn, not inked by
       the text colour; without this the browser drops both to save toner. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .doc {
    max-width: none;
    margin: 0;
    padding: 0;
    color: #000;
  }

  .doc__mark { width: 46mm; margin-bottom: 12mm; }
  .doc__title { font-size: 15pt; }
  .doc__standfirst { margin-top: 5mm; }
  .doc__rule { margin: 9mm 0; background: #000; }

  .doc section + section { margin-top: 7mm; }
  .doc h2 { margin-bottom: 3mm; font-size: 10pt; }

  /* A clause is a unit: never let one straddle a page, and never strand a
     heading at the foot of one. */
  .clause,
  .doc__foot { break-inside: avoid; }
  .doc h2 { break-after: avoid; }
  section { break-inside: auto; }

  .clause { margin-bottom: 3mm; }

  .doc__foot {
    margin-top: 12mm;
    padding-top: 5mm;
    border-top: 1px solid #000;
    font-size: 8pt;
  }

  /* Colour is for the screen; on paper everything but the D is black. */
  .clause,
  .clause b,
  .doc__standfirst,
  .doc__foot { color: #000; }

  .doc a { text-decoration: none; }

  /* The PDF is this page printed, so it must not offer a link to itself. */
  .screen-only { display: none; }
}