/* The three policy pages, which are documents rather than folds.
   index.html's composition is an argument beside a cropped specimen; a
   policy has no specimen, so what carries over is the smaller apparatus:
   the lockup, the mono label in the gutter beside its prose, the folio,
   and the reading measure. Nothing here is new type or new colour.

   One file for three pages rather than three inline blocks: the landing
   page inlines its CSS because it is the whole site in one document, and
   that argument stops holding at the third copy. It must be on the
   Dockerfile COPY line.

   Ink is the ground, as it is on index.html and 404.html. A policy has no
   swatches to offer - the seven grounds are a claim about the application,
   and the place that claim is made is the fifth fold - so light is taken
   from the browser instead, which is what the favicon in both pages
   already does. Paper's token values are copied from index.html. */

* { box-sizing: border-box; }

:root {
  --ground: #16161A;
  --ink: #EFECE4;
  --body: #D9D6CE;
  --dim: #A3A099;
  --quiet: #85858F;
  --quieter: #55555E;
  --rule: #3A3A42;
  --rule-faint: #2C2C31;
  --accent: #A98FD0;
  --accent-hi: #C4B2E0;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #F5F1E8;
    --ink: #14130F;
    --body: #2C2822;
    --dim: #5C5648;
    --quiet: #6E6656;
    --quieter: #9A9284;
    --rule: #C9C1B0;
    --rule-faint: #DED8CC;
    --accent: #6B52A3;
    --accent-hi: #4E3A7D;
  }
}

html, body { margin: 0; }

body {
  background: var(--ground);
  color: var(--body);
  font-family: "Instrument Sans", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: clamp(34px, 6.6vh, 60px) clamp(28px, 8.3vw, 120px) clamp(56px, 9vh, 92px);
}

::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 10;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 10px 16px;
  font-size: 14px;
}
.skip:focus { top: 12px; color: var(--ink); }

/* ── the lockup ────────────────────────────────────────────────────
   The mark IS the O, sized in em off the type beside it, and never set
   below 40px: the slice stops reading below 32px of drawn glyph and
   0.8em of 40 is exactly 32. The note is index.html's, and the numbers
   are its numbers. */

.wordmark {
  display: block;
  font-family: "Shippori Mincho", Georgia, serif;
  font-size: clamp(40px, 2.9vw, 46px);
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark a { color: inherit; }
.wordmark a:hover { color: var(--ink); }
.mark {
  display: inline-block;
  vertical-align: baseline;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.26em;
  margin-bottom: -0.018em;
  color: currentColor;
}

/* ── the document ─────────────────────────────────────────────────── */

.doc { max-width: 1080px; }

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  margin-top: clamp(48px, 8vh, 88px);
  padding-bottom: clamp(20px, 3vh, 30px);
  border-bottom: 1px solid var(--rule-faint);
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--quiet);
}
.masthead .what { color: var(--dim); }

.sentence {
  margin: clamp(30px, 5vh, 52px) 0 0;
  font-family: Literata, Georgia, serif;
  font-weight: 400;
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 20em;
  text-wrap: pretty;
}

.prose {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-size: clamp(16.5px, 1.22vw, 19px);
  line-height: 1.75;
  color: var(--body);
  max-width: 34em;
}
.prose + .prose { margin-top: 1.1em; }
.prose.quiet { color: var(--dim); font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.68; }
.prose em { color: var(--ink); font-style: italic; }
.lede { margin-top: clamp(22px, 3.4vh, 34px); }

/* The mono label sits in the margin beside its prose, the way a book
   marks a section in the gutter - never stacked above a headline. It is
   index.html's `.marginal`, widened, because a clause label is longer
   than HOW IT READS. */
.clause {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0 34px;
  align-items: start;
  padding: clamp(24px, 3.4vh, 34px) 0;
  border-top: 1px solid var(--rule-faint);
}
.clause:last-of-type { border-bottom: 1px solid var(--rule-faint); }
.clause > h2 {
  margin: 0;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--quiet);
  padding-top: 0.55em;
  text-transform: uppercase;
}
.clause .num { color: var(--quieter); margin-right: 0.8em; }

/* One record, one row: what a table holds, set the way the landing
   page's fourth fold sets the plain facts. */
.rows { margin: 0; }
.prose + .rows { margin-top: 1.3em; }
.rows .row {
  /* The hairline stops where the prose stops. Run to the column and it is a
     table rule under a paragraph that never reaches it. */
  max-width: 34em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-faint);
}
.rows .row:first-child { border-top: 0; padding-top: 0; }
.rows dt {
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--dim);
}
.rows dd {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.68;
  color: var(--body);
  max-width: 34em;
}

/* A block set is a list of three things and reads as one. */
ul.set { margin: 0.9em 0 0; padding: 0; list-style: none; max-width: 34em; }
ul.set li {
  position: relative;
  padding-left: 22px;
  font-family: Literata, Georgia, serif;
  font-size: clamp(16px, 1.18vw, 18px);
  line-height: 1.7;
  color: var(--body);
}
ul.set li + li { margin-top: 0.7em; }
ul.set li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.82em;
  width: 11px; height: 1px;
  background: var(--accent);
}

/* The owner's blanks. Marked, not hidden: this page is read by a lawyer
   before launch and the point of the review is to find these. */
.blank {
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 0.76em;
  letter-spacing: 0.1em;
  color: var(--accent);
  border-bottom: 1px dashed var(--accent);
  padding-bottom: 1px;
}

.foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: clamp(40px, 6vh, 72px);
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.foot a { color: var(--dim); border-bottom: 1px solid var(--rule-faint); padding-bottom: 3px; }
.foot a:hover { color: var(--ink); }
.foot a[aria-current] { color: var(--quieter); border-bottom-color: transparent; }
.foot a[aria-current]:hover { color: var(--quieter); }
.foot .dot { color: var(--quieter); }

@media (max-width: 820px) {
  .clause { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .clause > h2 { padding-top: 0; }
  .sentence { font-size: clamp(21px, 5.6vw, 26px); line-height: 1.4; }
  .prose { font-size: clamp(15px, 4vw, 16.5px); line-height: 1.66; }
}