/* The legal documents: community guidelines, terms, privacy notice, refund
   policy, licence agreement. One sheet of engineering stock and one warm ink
   for all five, so the set reads as one publication and a change lands
   everywhere at once.

   The documents come in two shapes. The guidelines are hand-set: articles
   numbered 1 to 13, clauses lettered a, b, c. The other four converted out of
   Word: decimal clause numbers nested three deep, sub-headings, tables. Both
   shapes are set in the same voice, so scale and space carry the whole
   hierarchy: no rules, no boxes, nothing to look at but the words. Colour
   arrives exactly once, on the line at the foot of the page. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background: #D9D2C4;
  scrollbar-width: thin;
  scrollbar-color: #241812 transparent;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #24181259;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

:root {
  /* Engineering stock and one warm ink. The document is set in a single
     voice, so scale and space carry the whole hierarchy: no rules, no
     boxes, no second colour, nothing to look at but the words.

     Two values of that one stock: the sheet the document is printed on,
     and the surface it was filed on under it. */
  --stock: #E7E1D6;
  --desk: #D9D2C4;
  --ink: #241812;
  --body: #241812e0;
  --sub: #241812c9;
  --quiet: #241812a8;
  --figure: #24181285;
  /* The house red, spent once per document on the line the mark stands for. */
  --signature: #C4471B;
  --pad: clamp(1.5rem, 8vw, 9rem);
  --chamfer: clamp(1.75rem, 3.4vw, 2.875rem);
  /* Grain belongs to the material, so each surface carries it in its own
     background rather than under a sheet laid over the page: it stays
     beneath every word, and it travels with the thing it is the tooth of. */
  --tooth: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E") repeat 0 0 / 172px 172px;
}

body {
  background: var(--tooth), var(--desk);
  color: var(--ink);
  font-family: 'Gambetta', Georgia, serif;
  font-weight: 400;
  /* The desk reads all the way round the sheet, at every width. */
  padding: 0 clamp(.85rem, 2vw, 2.75rem);
  overflow-x: hidden;
}

/* The document is a physical record: one sheet of stock lying on the
   surface it was filed on, its top corner chamfered and two punch holes
   through the margin. Nothing is drawn that a sheet of paper would not
   already have — the two values and the cut carry it, not colour. */
.sheet {
  position: relative;
  max-width: 76rem;
  margin: clamp(.85rem, 2.6vw, 3rem) auto clamp(1.5rem, 4vw, 4.5rem);
  padding: 4.5rem var(--pad) clamp(5rem, 10vw, 9.5rem);
  background: var(--tooth), var(--stock);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}

/* The margin only holds the holes once it is wide enough to hold them
   clear of the article figures hanging in it — the same width at which
   those figures hang at all. */
.punch { display: none; }

.back {
  display: inline-block;
  font-size: .95rem;
  color: var(--quiet);
  text-decoration: none;
  letter-spacing: .03em;
  transition: color .25s ease;
}

.back:hover { color: var(--ink); }

h1 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  font-size: clamp(2.6rem, 7.6vw, 5.125rem);
  line-height: 1;
  letter-spacing: -.026em;
  /* Optical alignment: pull the C off the measure so the stem, not the
     sidebearing, sits on the margin. */
  margin-left: -.045em;
  max-width: 16ch;
}

.preamble {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 56ch;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.78;
  color: var(--body);
}

.preamble p + p { margin-top: 1.25rem; }
.preamble strong { font-weight: 600; }

.art {
  margin-top: clamp(4rem, 9vw, 8rem);
  max-width: 60ch;
  /* A linked article lands with air above its title, not flush to the top. */
  scroll-margin-top: 3rem;
}

.art h2,
.content h2 {
  position: relative;
  font-weight: 600;
  font-size: clamp(1.6rem, 4.4vw, 2.375rem);
  line-height: 1.16;
  letter-spacing: -.014em;
  margin-left: -.03em;
  max-width: 24ch;
}

/* The article figure hangs in the page margin, set in the light weight of
   the same face. It is the only thing on the page doing a label's job. */
.art h2 .n,
.content h2 .num,
.content .articles > li > .num {
  position: absolute;
  right: calc(100% + .6em);
  top: .02em;
  padding: 0;
  font-weight: 300;
  color: var(--figure);
  font-variant-numeric: lining-nums;
}

.art p,
.content > p {
  margin-top: 1.6rem;
  max-width: 56ch;
  font-size: clamp(1.02rem, 2.4vw, 1.1875rem);
  line-height: 1.8;
  color: var(--body);
}

/* The line that introduces a set of clauses sits further from what comes
   before it than from the clauses it belongs to. */
.art .cue { margin-top: 2.1rem; }
.art .cue strong { font-weight: 600; color: var(--ink); }

.cl { list-style: none; margin-top: 1.25rem; }

.cl li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  margin-top: .875rem;
  /* The letter sits outside the measure, so the clause text keeps the same
     56ch line as every paragraph on the page. */
  max-width: calc(56ch + 2.5rem);
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  line-height: 1.76;
  color: var(--sub);
}

.cl .ltr {
  font-style: italic;
  font-size: .95em;
  color: var(--quiet);
  padding-top: .1em;
}

.cl .txt { min-width: 0; }
.cl .txt strong { font-weight: 600; color: var(--ink); }

.art a,
.content a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid #24181245;
  transition: border-color .25s ease;
}

.art a:hover,
.content a:hover { border-color: var(--ink); }

/* The document signs itself off: the mark struck blind, with no ink at all
   and only the impression the die leaves in the stock, then the line it
   stands for, then the date this text was last set. Centred, because it is
   the one thing on the page that belongs to the sheet rather than to the
   measure — every word above it hangs off the left margin. */
.colophon {
  margin-top: clamp(5rem, 11vw, 9.5rem);
  /* Centred on the sheet, the way a seal is struck on a page — not on the
     measure the text above it hangs from. */
  text-align: center;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--quiet);
}

.colophon svg {
  display: block;
  width: 3.5rem;
  height: auto;
  margin: 0 auto;
  fill: var(--stock);
  filter: drop-shadow(0 2px .4px #FDFAF2) drop-shadow(0 -2px .4px #9C8C72);
}

.colophon .tagline {
  margin-top: 1.2rem;
  font-family: 'Caveat', cursive;
  font-size: 1.5625rem;
  line-height: 1.25;
  color: var(--signature);
}

.colophon .date {
  margin-top: .875rem;
  font-size: .85rem;
  font-style: italic;
  color: var(--figure);
}

/* ── The converted documents ─────────────────────────────────────────────
   The terms, the privacy notice, the refund policy and the licence agreement
   were drafted in Word, so their hierarchy arrives as markup the guidelines
   never needed: decimal clause numbers nested three deep, sub-headings, a
   contents list, tables, and two documents whose articles are list items
   rather than headings. Everything below sets those in the same voice. */

.content {
  /* The scale an article title is set at, wherever the article happens to
     be a heading and wherever Word left it as a list item. */
  --article: clamp(1.6rem, 4.4vw, 2.375rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* The optical pull belongs to the letter, not to the page: a round C hangs
   its curve past the margin, a flat stem sits almost on it. */
h1.stem { margin-left: -.014em; }

/* Who published the document, set quietly under its title. */
.imprint {
  margin-top: 1.35rem;
  font-size: clamp(1rem, 2.2vw, 1.0625rem);
  color: var(--quiet);
}

/* Set in caps by the source documents, which want the letters left alone
   rather than pulled together the way a lowercase display line is. */
.content h2 {
  margin-top: clamp(4rem, 9vw, 8rem);
  scroll-margin-top: 3rem;
  letter-spacing: 0;
  margin-left: -.012em;
  max-width: 30ch;
}

/* One step down from an article, and numbered in the margin of its own
   line rather than the page's — two figures hanging in one gutter would
   read as a column of numbers instead of a hierarchy. */
.content h3 {
  margin-top: clamp(2.8rem, 5vw, 3.6rem);
  scroll-margin-top: 3rem;
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.3;
  max-width: 34ch;
}

.content h3 .num { font-weight: 300; color: var(--figure); }

/* Word set a handful of sub-headings as a bold, underlined line. They are
   headings, so they are set as headings and the underline goes. */
.content .head {
  margin-top: clamp(2.4rem, 4.5vw, 3.2rem);
  font-size: clamp(1.06rem, 2.4vw, 1.1875rem);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
  max-width: 46ch;
}

.content .head u { text-decoration: none; }

.content ol { list-style: none; margin-top: 1.25rem; }
.content ol ol { margin-top: 1.1rem; }

.content li {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin-top: .875rem;
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  line-height: 1.76;
  color: var(--sub);
}

/* The number sits outside the measure at every depth, so a clause three
   levels down keeps the same line length as the paragraphs around it. */
.content li > .num {
  padding: .12em .7em 0 0;
  font-weight: 300;
  font-size: .95em;
  color: var(--quiet);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The gutter belongs to the list, not to the clause. Sizing it on each
   clause on its own leaves the text column ragged wherever the numbering
   reaches double figures — clause 10 starts a digit further in than clause
   9. Handing the column to the list means every clause in it shares one
   gutter, sized to the longest number in that list, which is the fixed
   gutter the guidelines page gets for free from single letters. */
@supports (grid-template-columns: subgrid) {
  .content ol:not(.articles) {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: .875rem;
  }

  .content ol:not(.articles) > li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    margin-top: 0;
  }
}

.content .li-body { min-width: 0; max-width: 56ch; }
.content .li-body > p { margin-top: 1rem; }
.content .li-body > p:first-child { margin-top: 0; }

/* The licence agreement and the refund policy carry no headings at all —
   Word set their articles as list items with the title as a bold line
   inside. They are articles all the same, so they are set as articles: the
   figure hangs in the page margin and the clauses start back at the
   measure, exactly as they do under a heading. */
.content .articles > li {
  display: block;
  position: relative;
  margin-top: clamp(4rem, 9vw, 8rem);
  scroll-margin-top: 3rem;
}

/* The figure takes the title's line height, not the clause text's, so it
   sits on the same line as the title it belongs to. */
.content .articles > li > .num { font-size: var(--article); line-height: 1.16; }
.content .articles > li > .li-body { max-width: none; }

.content .articles > li > .li-body > p:first-child {
  font-weight: 600;
  font-size: var(--article);
  line-height: 1.16;
  max-width: 30ch;
  color: var(--ink);
}

/* The figure and the title share one optical origin, so they still line up
   once the figure drops inline on a narrow screen. */
.content .articles > li > .num,
.content .articles > li > .li-body > p:first-child { margin-left: -.012em; }

/* Word left a few continuation clauses as block quotes. They read as what
   they are — a clause set in from the measure — with no rule beside it. */
.content blockquote {
  margin-top: 1.6rem;
  padding-left: 2.5rem;
  max-width: calc(56ch + 2.5rem);
  color: var(--sub);
}

.content blockquote p {
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  line-height: 1.76;
}

.content blockquote p + p { margin-top: 1rem; }

.content strong { font-weight: 600; color: var(--ink); }

/* Word underlines freely. Where it underlines a link, the link's own rule
   already says the same thing, so only one line is drawn. */
.content u { text-underline-offset: .18em; text-decoration-thickness: from-font; }
.content a u { text-decoration: none; }

/* The contents list is an index, not a set of clauses: it stays quiet, and
   its links carry no rule at this density. */
.content .toc { margin-top: 1.7rem; max-width: 56ch; }

.content .toc p {
  margin-top: .55rem;
  font-size: clamp(1rem, 2.2vw, 1.0625rem);
  line-height: 1.5;
}

.content .toc strong { font-weight: 400; }
.content .toc a { border-bottom: 0; color: var(--sub); }
.content .toc a:hover { color: var(--ink); }

/* A matrix of legal bases, read across rather than down. The rows are ruled
   and the columns are not: no box, no fill, nothing but the ink it takes to
   hold a row together. It keeps its own scroll, since a five-column table
   cannot narrow to a phone. */
.content .table-wrap {
  margin-top: 2.4rem;
  overflow-x: auto;
  /* Two pairs of gradients, and the difference between them does the work:
     the first pair scrolls with the table and the second is pinned to the
     sheet, so a shaded edge appears only on the side there is more table to
     reach. On a screen wide enough to hold the whole table, the scrolling
     pair covers the pinned pair and nothing shows. It is the shading of a
     page turned in the gutter, not a shadow: no box, nothing to click. */
  background:
    linear-gradient(to right, var(--stock), var(--stock)) 0 0 / 18px 100% no-repeat local,
    linear-gradient(to left,  var(--stock), var(--stock)) 100% 0 / 18px 100% no-repeat local,
    linear-gradient(to right, #24181224, transparent) 0 0 / 18px 100% no-repeat scroll,
    linear-gradient(to left,  #24181224, transparent) 100% 0 / 18px 100% no-repeat scroll;
}

.content table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: clamp(.94rem, 2vw, 1rem);
  line-height: 1.6;
  color: var(--sub);
}

.content td {
  border-top: 1px solid #24181226;
  padding: .8rem 1rem;
  vertical-align: top;
}

.content tr:first-child > td { border-top: 0; }
.content table p + p { margin-top: .5rem; }

/* Impressed rather than cut: one lip catches the light and the other falls
   away, the way a hole in real stock reads on a flatbed. The margin grows
   to hold them, so the holes and the article figures each keep their own
   band of paper and never crowd one another. */
@media (min-width: 80rem) {
  .sheet { padding-left: calc(var(--pad) + 4.5rem); }

  .punch {
    display: block;
    position: absolute;
    left: 3.4rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--desk);
    box-shadow: inset 0 2px 1px #A9A08D, inset 0 -1px .5px #F6F1E7;
  }

  .punch.a { top: 13rem; }
  .punch.b { top: 20.5rem; }
}

/* The figure only hangs once the sheet has hit its cap and grown real
   gutters. Below that the margin is too shallow to hold it clear of the
   viewport edge, so it comes inline above the title instead, and takes
   back the contrast it needs at the smaller size. */
@media (max-width: 80rem) {
  .art h2 .n,
  .content h2 .num,
  .content .articles > li > .num {
    position: static;
    display: block;
    margin-bottom: .35em;
    font-size: .66em;
    color: var(--quiet);
  }

  .content .articles > li > .num { font-size: calc(var(--article) * .66); }
}

/* Anchored jumps are the only motion on the page; it still gets gated. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}