/* legal/legal.css — one policy, read once, top to bottom.
 *
 * 6024384 made this one document instead of a pair. Design's only job here is
 * comprehension: a measure short enough to read without losing the line, a
 * numbering a reader can cite, and nothing decorative competing with the
 * sentence that says what happens to their data.
 *
 * So there is no strata descent on this page. The riverbed metaphor moves a
 * reader from mechanism through claims to status; a policy is one continuous
 * statement and breaking it into shaded bands would imply a hierarchy of
 * importance the document does not have. One ground, one column.
 *
 * The two typographic rules still hold, and they earn their keep: a storage
 * key, a service name, a retention period and an unfilled field are all
 * things a reader could check, so they are set in --code. The argument for
 * why each is collected is set in --sans.
 *
 * CONTRAST, MEASURED. --bone-3 is 4.88:1 on --st-0. Nothing on this page is
 * dimmer than that, and body text is --bone-2 at 8.12:1 — a policy is the
 * last place to spend contrast on atmosphere.
 */

/* ---- Site chrome ----------------------------------------------------- */
.masthead{
  display:flex;align-items:baseline;gap:14px clamp(16px,3vw,40px);flex-wrap:wrap;
  padding:16px var(--pad-x);border-bottom:1px solid var(--rule);
  background:var(--st-0);
}
.masthead__brand{font-weight:660;letter-spacing:-.02em;font-size:16px;
                 color:var(--bone);border-bottom:0}
.masthead__brand em{font-style:normal;color:var(--bone-3);font-weight:400}
.masthead__brand:hover{color:var(--flux-2)}
.masthead nav{
  display:flex;gap:10px clamp(12px,2vw,24px);flex-wrap:wrap;margin-left:auto;
  font-family:var(--code);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;
}
.masthead nav a{color:var(--bone-2);border-bottom:1px solid transparent;
                padding-bottom:2px}
.masthead nav i{font-style:normal;text-transform:none}
.masthead nav a:hover{color:var(--flux);border-bottom-color:var(--flux)}
.masthead nav a[aria-current=page]{color:var(--flux);border-bottom-color:var(--flux)}

.colophon{
  padding:32px var(--pad-x) 40px;border-top:1px solid var(--rule-2);
  background:var(--st-3);display:flex;gap:12px 26px;flex-wrap:wrap;
  align-items:baseline;font-family:var(--code);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);
}
.colophon a{color:var(--bone-2)}
.colophon a:hover{color:var(--flux-2)}
.colophon__note{margin-left:auto;text-transform:none;letter-spacing:0;
                font-family:var(--sans);font-size:12.5px}

/* ---- The document ---------------------------------------------------- */
.doc{max-width:78ch;margin:0 auto;padding:clamp(44px,6vh,76px) var(--pad-x) 0}
.doc h1{font-size:clamp(32px,4vw,52px);max-width:18ch}
.doc__meta{font-family:var(--code);font-size:12px;color:var(--bone-3);
           letter-spacing:.02em;margin:0 0 26px}

/* An unreviewed draft is a true state, so it is marked in the palette's
   colour for one. */
.draft{border:1px solid var(--st-unproven);padding:18px 20px;margin:0 0 34px;
       background:rgba(255,255,255,.5)}
.draft b{display:block;font-family:var(--code);font-size:10.5px;
         letter-spacing:.18em;text-transform:uppercase;color:var(--st-unproven);
         margin-bottom:10px}
.draft p{margin:0;font-size:14.5px;line-height:1.72;color:var(--bone-2);
         max-width:none}

/* A field nobody has filled in is also a state, and pretending otherwise is
   how blank policies get published. */
.todo{font-family:var(--code);font-size:.86em;letter-spacing:.04em;
      color:var(--oxide);border-bottom:1px dotted var(--oxide);
      white-space:nowrap}
/* nowrap is what makes a TO FILL field read as one unbroken token instead of
   as prose, so it is kept everywhere there is room for it. There is not room
   at 375px: the longest of them, "TO FILL: legal entity or individual name",
   measured 376px against a 375px viewport and put the whole document into
   horizontal scroll at 380px. Below the narrow breakpoint the token wraps.
   It keeps the oxide colour and the dotted rule, which are what actually mark
   it as a blank. Pre-existing; measured before and after the copy pass. */
@media (max-width:520px){.todo{white-space:normal}}

.toc{border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
     padding:22px 0;margin:0 0 clamp(30px,4vw,46px)}
.toc p{font-family:var(--code);font-size:10.5px;letter-spacing:.18em;
       text-transform:uppercase;color:var(--bone-3);margin:0 0 14px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
        columns:2;column-gap:36px}
.toc li{counter-increment:toc;break-inside:avoid;margin-bottom:7px;
        font-size:14.5px}
.toc li::before{content:counter(toc,decimal-leading-zero) "  ";
                font-family:var(--code);font-size:11.5px;color:var(--bone-3)}
.toc a{border-bottom-color:transparent}
.toc a:hover{border-bottom-color:var(--flux-2)}
@media (max-width:640px){.toc ol{columns:1}}

.doc section{padding:0 0 clamp(30px,4vw,44px)}
.doc h2{display:flex;gap:16px;align-items:baseline;font-size:clamp(20px,2vw,27px);
        max-width:28ch;margin-bottom:16px;scroll-margin-top:20px}
.doc h2 i{font-style:normal;font-family:var(--code);font-size:13px;
          font-weight:400;color:var(--bone-3);letter-spacing:.06em}
.doc p{color:var(--bone-2);max-width:70ch}
.doc ul{max-width:70ch;padding-left:1.15em;margin:0 0 18px;color:var(--bone-2)}
.doc li{margin-bottom:9px}
.doc strong{color:var(--bone)}
.doc code{font-size:.88em;color:var(--flux-2)}

.doc table{margin:6px 0 8px}
.doc td{color:var(--bone-2);vertical-align:top}
.doc th[scope=row]{text-transform:none;letter-spacing:0;font-size:14px;
                   color:var(--bone);font-family:var(--sans);font-weight:560;
                   vertical-align:top}

/* Where a statement was checked against the code rather than asserted, say
   so next to it — that is the only claim this document can actually back. */
.checked{font-family:var(--code);font-size:11.5px;letter-spacing:.06em;
         color:var(--st-measured);margin:0 0 18px}

.doc__foot{border-top:1px solid var(--rule-2);margin-top:8px;
           padding:26px 0 clamp(50px,7vh,84px)}