/*
 * The sub-page shape: a title block, then a single measure-width column with
 * numbered sections hanging in the left margin.
 *
 * The margin is the whole idea. An app puts a heading in a card and moves on;
 * a document puts the section number out in the gutter, keeps the text column
 * narrow enough to read, and lets whitespace do what a border was doing. It
 * also makes these pages look like the legal instruments they are — a privacy
 * policy with numbered clauses reads as one, which matters when the reader is
 * an app reviewer checking a list.
 */

/* ------------------------------------------------------------- title block */

/*
 * The title block and the document below it are one column, centred together.
 *
 * They have to share a width as well as a left edge. Centring the text column
 * on its own would leave the title's rule running the full width of the wrap
 * with the text hanging off its left end, which is the arrangement this
 * replaces — a 34rem column sitting in a 74rem band read as a mistake rather
 * than as a margin.
 *
 * `--gutter` is declared here, on both, because the title sits on the gutter
 * line and the numbered clauses are indented from it. Declaring it on
 * `.document` alone would put the two blocks on different left edges.
 */
.page-head,
.document {
  --gutter: 5.5rem;
  max-width: calc(var(--measure) + var(--gutter));
  margin-inline: auto;
}

.page-head {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

.page-head .eyebrow {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
}

.page-head h1 {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

.lead {
  margin: 1.75rem 0 0;
  font-size: clamp(1.1875rem, 2.2vw, 1.4375rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
}

/*
 * The dated header block — "last updated", who the document is from. Labels
 * hang to the left of their values, which is the shape a title page uses and
 * a two-column table does not.
 */
.meta {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 0.45rem 1.5rem;
  margin: 2.5rem 0 0;
  max-width: 40rem;
  font-size: 0.9375rem;
}

.meta dt {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  /* Nudged down so the small-caps label sits on the same optical line as the
     serif value beside it. */
  padding-top: 0.28em;
}

.meta dd {
  margin: 0;
}

@media (max-width: 34rem) {
  .meta {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .meta dt {
    padding-top: 1rem;
  }

  .meta dd {
    margin-top: 0.15rem;
  }
}

/* ---------------------------------------------------------------- the body */

/*
 * The text column, plus a gutter to hang section numbers in.
 *
 * `counter-reset` lives here rather than on `body` so each page starts at 1,
 * and so the table of contents — which counts the same way — cannot drift out
 * of step with the headings it lists.
 */
.document {
  padding-left: var(--gutter);
  padding-block: clamp(3rem, 7vw, 4.5rem) 0;
  counter-reset: section;
}

.section {
  position: relative;
  counter-increment: section;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  scroll-margin-top: 2rem;
}

.section:first-child {
  margin-top: 0;
}

.section > h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}

/* The number, out in the gutter, in the label face so it reads as apparatus
   rather than as part of the sentence. */
.section > h2::before {
  content: counter(section);
  position: absolute;
  left: calc(-1 * var(--gutter));
  width: calc(var(--gutter) - 1.75rem);
  text-align: right;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  /* Aligned to the cap-height of the heading beside it, not its box. */
  padding-top: 0.55em;
}

.section h3 {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2.25rem 0 0.75rem;
}

.section ul,
.section ol {
  margin: 0 0 1.15em;
  padding-left: 1.1rem;
}

.section li {
  margin-bottom: 0.5rem;
}

.section li::marker {
  color: var(--ink-faint);
}

/* Definition lists inside a section — the lawful bases, the response times.
   Term above value, with the term in the label face; a hanging grid at this
   width would squeeze both halves. */
.section dl {
  margin: 0 0 1.15em;
}

.section > dl > dt,
.section dd + dt {
  font-weight: 600;
  margin-top: 1.5rem;
}

.section dd {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------- facts */

/*
 * The company-details table. Hanging labels and hairline rules, no border
 * box and no fill — a table of registered particulars, not a settings screen.
 */
.facts {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
}

.facts dt {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.42em;
}

.facts dd {
  margin: 0;
  font-size: 1.0625rem;
}

@media (max-width: 40rem) {
  .facts > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding-block: 1rem;
  }

  .facts dt {
    padding-top: 0;
  }
}

/* ---------------------------------------------------------------- callouts */

/*
 * "The short version" at the head of a document. Rules above and below, set a
 * step larger than the body, no fill and no left accent bar — the summary a
 * printed policy carries before its clauses, rather than a docs-site
 * admonition.
 */
.callout {
  /* Pulled back out of the gutter, so the summary shares its left edge with
     the page title above it. Only the numbered clauses are indented — which is
     the point of the gutter, and reads as deliberate rather than as a margin
     nobody noticed. */
  margin: 0 0 clamp(3rem, 6vw, 4rem) calc(-1 * var(--gutter));
  padding-block: 1.75rem;
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
}

.callout h2 {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

/* Spaced like any other block in the callout. Zeroing the margin outright
   ran the list straight into the paragraph after it; `:last-child` below
   still closes the block flush. */
.callout ul {
  margin: 0 0 1.15em;
  padding-left: 1.1rem;
}

.callout li {
  margin-bottom: 0.45rem;
}

.callout li:last-child {
  margin-bottom: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

/* A quieter aside inside the body: indented behind a hairline, the way a
   printed note sits away from the clause it qualifies. */
.note {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.note > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------- toc */

/*
 * On this page. Numbered from the same counter mechanism as the headings, so
 * item 4 in the list is section 4 in the document without either being
 * numbered by hand. A test asserts the two counts match.
 */
.toc {
  margin: 0 0 clamp(3rem, 6vw, 4rem) calc(-1 * var(--gutter));
  counter-reset: toc;
}

.toc h2 {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  counter-increment: toc;
  border-top: 1px solid var(--rule-soft);
}

.toc li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.toc a {
  display: flex;
  gap: 1.75rem;
  padding-block: 0.6rem;
  text-decoration: none;
  color: var(--ink-soft);
}

/* Sized and aligned to land on the same vertical as the section numbers
   further down the page — the two are the same numbering, and a reader
   scrolling from one to the other should see one column, not two. `max()`
   keeps it sane once the gutter collapses to zero on narrow screens. */
.toc a::before {
  content: counter(toc);
  flex: none;
  width: max(1.5rem, calc(var(--gutter) - 1.75rem));
  text-align: right;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding-top: 0.55em;
}

.toc a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------- narrow mode */

/*
 * Below the point where the gutter stops paying for itself, the number moves
 * inline ahead of the heading rather than disappearing. Losing it entirely
 * would mean the table of contents referred to numbers the reader could not
 * see anywhere.
 */
@media (max-width: 54rem) {
  .page-head,
  .document {
    /* Zeroing the variable rather than the padding: the callout and the table
       of contents pull left *by* the gutter, so anything that only cancelled
       the padding would leave those two hanging off the edge of the screen. */
    --gutter: 0rem;
    max-width: var(--measure);
  }

  .section > h2::before {
    position: static;
    display: inline;
    width: auto;
    padding: 0;
    margin-right: 0.7em;
  }

  .toc a {
    gap: 1rem;
  }
}