/* MaeVae: Terms of use. This page's own rules; the shared sheet,
   /styles.css, carries the header, the footer, the type scale and every
   color token, and this file adds no color of its own.

   Terms are read, not watched. The page opens as the home page does, with
   the house lights down, but only for the title, so the first clause is in
   view on a laptop screen. The clauses then sit on paper at the reading
   size. On wide screens the list of clauses stands in its own column and
   stays in view while the clauses scroll, so a reader can go straight to
   the one they came for.

   Each clause opens on a 2px ink rule, the rule the home page draws over
   its local-model row, and the list of clauses opens on the same rule, so
   both columns start on one line. Inside a clause, hairlines separate the
   parts. What the license lets you do and what it does not are set as two
   labeled rows, so they read as a pair. The page's own rules use no
   amber: on this site amber means an agent is waiting for you, and nothing
   on this page is. The exception is the mark's amber facet in the header
   and the footer, which stands for the pane where an agent waits. */

/* The title band. The title runs across; on wide screens the date line
   and the lead sit under it on the same two columns as the clauses below,
   so the lead starts where the clause text starts. */

/* The shared stylesheet draws a field of dots behind every page's first
   section and veils it where the text stands. Its default veil suits a
   tall hero with text at the top, so here the veil is centered on this
   band's own text block, wide enough that no dot sits behind a line. Under
   1024px the text fills the whole width, so the veil does too. */
.terms-intro {
  --field-veil-at: 50% 50%;
  --field-veil-size: 120% 100%;
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 4vw, 56px);
}

@media (min-width: 1024px) {
  .terms-intro {
    --field-veil-at: 40% 54%;
    --field-veil-size: 95% 75%;
  }
}

.terms-head {
  display: grid;
  gap: var(--s4);
}

.terms-head h1 {
  max-width: 14ch;
  font-size: var(--fs-huge);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.terms-head .lead {
  margin-top: var(--s2);
}

@media (min-width: 1024px) {
  .terms-head {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s5) var(--split-gap);
    align-items: baseline;
  }

  .terms-head h1 {
    grid-column: 1 / -1;
  }

  .terms-head .updated {
    grid-column: 1;
    grid-row: 2;
  }

  .terms-head .lead {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

/* The clauses, with the list of them beside */

.terms-body {
  padding-block: var(--section-tight);
}

.terms-grid {
  display: grid;
  gap: var(--s7);
}

@media (min-width: 1024px) {
  .terms-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--split-gap);
    align-items: start;
  }
}

/* The list of clauses */

.terms-toc {
  padding-top: var(--s4);
  border-top: 2px solid var(--ink);
}

.terms-toc-h {
  margin-bottom: var(--s3);
  font-size: var(--fs-ui);
  line-height: 1.5;
  letter-spacing: 0;
}

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

.terms-toc li {
  border-top: 1px solid var(--line);
}

/* 10px of block padding on a 24px line gives each link a 44px target */
.terms-toc a {
  display: block;
  padding-block: 10px;
  font-size: var(--fs-ui);
  line-height: 1.5;
  text-decoration: none;
}

.terms-toc a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Between a phone and a wide screen the list stands above the clauses, so
   two columns keep it short */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .terms-toc ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s5);
  }
}

/* The list stays in view while the clauses scroll, only where the screen
   is tall enough to hold all of it. The height is in em, so a larger
   default text size, which makes the list taller, needs a taller screen.
   From 60em the shared header sticks to the top, so the list stops clear
   of it at the same offset the documentation pages' contents use. */
@media (min-width: 1024px) and (min-height: 40em) {
  .terms-toc {
    position: sticky;
    top: var(--s6);
  }
}

@media (min-width: 60em) and (min-height: 40em) {
  .terms-toc {
    top: var(--docs-top);
  }
}

/* A clause: its rule, its heading, then its parts. The space above a
   heading is four times the space under it, so each heading belongs to
   the clause it opens. */

.terms-clause {
  padding-top: var(--s4);
  border-top: 2px solid var(--ink);
}

.terms-clause + .terms-clause {
  margin-top: var(--s8);
}

.terms-clause h2 {
  font-size: var(--fs-cast);
  line-height: 1.2;
}

.terms-clause > * + * {
  margin-top: var(--s4);
}

.terms-clause > h2 + * {
  margin-top: var(--s5);
}

/* Notes that qualify a clause: quieter, one step smaller */
.terms-note {
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

/* What the license lets you do and what it does not: two labeled rows on
   hairlines. On a phone the label sits over its text; from 640px it
   stands beside it, on the same baseline. */

.terms-rules {
  border-top: 1px solid var(--line-strong);
}

.terms-rule {
  display: grid;
  gap: var(--s3);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
}

.terms-rule h3 {
  font-size: var(--fs-label);
  line-height: 1.35;
}

.terms-rule > div > * + * {
  margin-top: var(--s3);
}

@media (min-width: 640px) {
  .terms-rule {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: baseline;
  }
}

.terms-list {
  max-width: 62ch;
  padding-left: 1.2em;
}

.terms-list li + li {
  margin-top: var(--s2);
}

.terms-list li::marker {
  color: var(--quiet);
}

/* The full license text: the governing words, set after the plain-English
   summary on a strong hairline so it reads as the document itself and not
   as one more note. The words are the license's own, capitals included;
   only their setting is this page's. Its lists reuse the summary's list. */
.terms-full {
  max-width: 68ch;
  padding-top: var(--s5);
  border-top: 1px solid var(--line-strong);
}

.terms-clause > .terms-full {
  margin-top: var(--s6);
}

.terms-full h3 {
  font-size: var(--fs-label);
  line-height: 1.35;
}

.terms-full > * + * {
  margin-top: var(--s4);
}

.terms-full > h3 + * {
  margin-top: var(--s3);
}

.terms-full > p + .terms-list {
  margin-top: var(--s2);
}

/* What MaeVae does on your computer: one statement per line, on
   hairlines, held to a reading measure */

.terms-does {
  max-width: 68ch;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.terms-does li {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}

/* The vendor statement: its three parts, each on its own line, between
   two rules and one step larger than the text around it. The words are
   fixed; only their setting is this page's. */
.terms-statement {
  max-width: 46ch;
  padding-block: var(--s5);
  border-block: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.4;
}

.terms-clause > .terms-statement {
  margin-block: var(--s5);
}

.terms-statement > span {
  display: block;
}

.terms-statement > span + span {
  margin-top: var(--s2);
}

/* Printed, the terms are the page: the title in ink on white, the clauses
   in one column, and the site's header, footer and the list of clauses
   left out. The company and the address are in the last clause, the one
   for questions about these terms, so nothing is lost with the footer. The header and footer are hidden only
   under this page's own body class, so the rule holds for this page alone
   and is not a site rule for print. */
@media print {
  .terms-page .site-header,
  .terms-page .site-footer,
  .terms-toc {
    display: none;
  }

  .terms-intro {
    padding-block: 0 var(--s6);
    background: none;
  }

  .terms-intro h1,
  .terms-intro .lead,
  .terms-intro .updated {
    color: var(--ink);
  }

  .terms-body {
    padding-block: 0;
  }

  .terms-grid {
    display: block;
  }

  .terms-clause h2,
  .terms-rule h3,
  .terms-full h3 {
    break-after: avoid-page;
  }
}