/* ==========================================================================
   Zome — legal documents
   Phi Labs Technology Ltd

   Loaded after site.css, on privacy.html and terms.html only.

   The words in these pages are not ours to touch. Everything here is
   presentation: measure, rhythm, and the two faces the rest of the site uses.
   No copy is edited, reordered or abridged by this file, and the em-dashes
   the legal text carries stay where they are.
   ========================================================================== */

.doc-page { padding: 40px 0 96px; }

.doc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

/* 62 characters at 17px, which is the measure the body of the site already
   uses. A legal document is the one thing on a site somebody reads in full,
   so the line length matters more here than anywhere else. */
.doc {
  width: 100%;
  max-width: 620px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
}

/* The document carries its own "Back to Zome" link, from when these pages had
   no navigation of their own. The site nav does that job now, and the link
   landed under the contents panel where it read as the first item of the
   document. Hidden rather than deleted: the markup inside .doc is the legal
   text as filed, and this file does not edit it. */
.doc .back { display: none; }

.doc h1 {
  font-size: clamp(38px, 4.6vw, 52px);
  margin-bottom: 28px;
}

/* Quiet headings. The document's own numbering already says where you are,
   so these do not need size as well: a step up in weight and a lot of space
   above is enough, and it keeps a long scroll from looking like a form. */
.doc h2 {
  font-family: var(--text);
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.35;
  margin: 56px 0 14px;
}
.doc h3 {
  font-family: var(--text);
  font-size: 16.5px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.4;
  margin: 34px 0 10px;
}
.doc h4 {
  font-family: var(--text);
  font-size: 15px; font-weight: 600;
  margin: 26px 0 8px;
}

.doc p { margin: 0 0 18px; }
.doc strong { font-weight: 600; }
.doc em { font-style: italic; }

.doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--deep); }

.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; }
.doc li { margin-bottom: 9px; }

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 1px 5px;
}

/* A rule between clauses, not a divider across the page. */
.doc hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 48px 0;
}

/* Tables.
   These carry the definitions and the retention periods, which are the two
   things somebody actually comes to a privacy policy to look up. They scroll
   inside their own container so the page itself never moves sideways. */
.doc .tw { overflow-x: auto; margin: 0 0 24px; }
.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15.5px;
  line-height: 1.5;
}
.doc th, .doc td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}
.doc th {
  font-weight: 600;
  color: var(--slate);
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom-color: rgba(0, 28, 53, .18);
}
.doc tbody tr:last-child td { border-bottom: 0; }

/* Contents.
   Pool's privacy page has none, and at their length it does not need one.
   This document runs to thirteen sections and a reader who has come to check
   one clause should not have to scroll for it, so it stays, folded shut and
   set as quietly as everything else. */
.toc {
  width: 100%; max-width: 620px;
  margin: 0 auto 44px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper-2);
}
.toc summary {
  list-style: none; cursor: pointer;
  padding: 15px 20px;
  position: relative;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary h4 {
  display: inline; margin: 0;
  font-family: var(--text); font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.toc summary::after {
  content: ''; position: absolute; right: 20px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .22s cubic-bezier(.44, 0, .56, 1);
}
.toc[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.toc nav { padding: 0 20px 18px; display: grid; gap: 9px; }
.toc nav a {
  color: var(--slate); text-decoration: none; font-size: 15px;
}
.toc nav a:hover { color: var(--ink); }
.toc nav a.sub { padding-left: 16px; font-size: 14.5px; }

@media (max-width: 900px) {
  .doc-page { padding: 24px 0 72px; }
  .doc { font-size: 16.5px; }
  .doc h2 { margin-top: 44px; }
}

/* ---------------------------------------------------------------- article */

/* A research piece, laid out the way theirs is: a byline and a centred title,
   a picture, then the words at a reading measure. The head is centred and the
   body is not, which is the whole trick: the title is a poster and the piece
   is a document. */

.post__head {
  max-width: 760px;
  margin: 0 auto 34px;
  padding-inline: var(--gutter);
  text-align: center;
}
.post__byline {
  font-size: 14px; color: var(--slate-2);
  margin: 0 0 18px;
}
.post__byline a { color: var(--slate); text-decoration: none; }
.post__byline a:hover { color: var(--ink); }
.post__head h1 {
  font-size: clamp(36px, 5vw, 54px);
  margin: 0;
}

/* The picture. Narrower than the page and wider than the words, and no crop:
   whatever is uploaded is shown at its own proportions rather than squeezed
   into a ratio it was not drawn for. */
.post__hero {
  max-width: 760px;
  margin: 0 auto 46px;
  padding-inline: var(--gutter);
}
.post__hero img {
  width: 100%; height: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--rule);
}

/* 62 characters at 17px, the measure the rest of the site uses. A piece
   somebody reads in full is the one place line length really matters. */
.post__body {
  max-width: calc(660px + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
}
.post__body p { margin: 0 0 18px; }
.post__body strong { font-weight: 600; }
.post__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.post__body a:hover { color: var(--deep); }
.post__body ul, .post__body ol { margin: 0 0 18px; padding-left: 22px; }
.post__body li { margin-bottom: 9px; }
.post__body hr {
  border: 0; height: 1px; background: var(--rule); margin: 44px 0;
}
.post__body h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -0.035em; line-height: 1.15;
  margin: 52px 0 16px;
}
.post__body h3 {
  font-family: var(--text);
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.005em;
  margin: 34px 0 10px;
}

/* A figure inside the piece. The caption is centred because it belongs to the
   picture rather than to the column. */
.post__body figure { margin: 40px 0; }
.post__body figure img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--rule);
}
.post__body figcaption {
  margin-top: 12px; text-align: center;
  font-size: 14px; color: var(--slate-2);
}

/* A quotation. A rule down the side rather than quote marks, which a serif
   face at this size draws badly, and no italic: the words are somebody
   else's, not emphasised. */
.post__body blockquote {
  margin: 36px 0; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--rule);
  color: var(--slate);
}
.post__body blockquote p { margin: 0; }

/* Read next, at the foot of a piece. Theirs does this and it is the one thing
   that turns a page somebody arrived at from a search into a second page. */
.post__more {
  margin-top: 96px;
  padding: 64px 0 0;
  border-top: 1px solid var(--rule);
}
.post__more h2 {
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 32px;
}

@media (max-width: 900px) {
  .post__head { margin-bottom: 26px; }
  .post__hero { margin-bottom: 34px; }
  .post__body { font-size: 16.5px; }
  .post__more { margin-top: 64px; padding-top: 44px; }
}

.papers__none {
  grid-column: 1 / -1;
  color: var(--slate);
  font-size: 18px;
  max-width: 40ch;
}
.papers__none a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }