/* The styles privacy.html and terms.html share: the face, the tokens and the parts of index.html again
   (the head with the small logo, the sentence, the foot), and a column of text under them.
   Keep the tokens in step with index.html and 404.html. */
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* Two sets of colours, as in index.html: the page takes the one the visitor's system asks for. */
:root {
  --bg:    #ffffff;
  --fg:    #111413;
  --muted: #565b5a;
  --dim:   #6f7473;
  --line:  #e2e4e3;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 3.34vw, 48px);
  --head: 72px;
  --gap: 24px;
  --step: clamp(64px, 7.22vw, 104px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #000000;
    --fg:    #f4f5f2;
    --muted: #a3a7a6;
    --dim:   #7a7f7e;
    --line:  #26292a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--dim) var(--bg); }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--fg); color: var(--bg); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.inner { max-width: 1344px; margin-inline: auto; }

/* ---------- head: the small logo, as in 404.html ---------- */
.head { flex: none; height: var(--head); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.head .inner { display: flex; align-items: center; height: 100%; }
.lockup { display: inline-flex; align-items: center; gap: .433em; color: var(--fg); text-decoration: none; font-size: 20px; line-height: 1; white-space: nowrap; }
.lockup svg { display: block; flex: none; width: .66em; height: 1.117em; overflow: visible; }
.lockup .name svg { width: 4.709em; height: 1em; }
/* in the dark theme the mark stands in black on a white tile, as in index.html */
.lockup .tile { display: none; width: 1.324em; height: 1.324em; }
.lockup .tile rect { fill: var(--fg); }
.lockup .tile path { fill: var(--bg); }
@media (prefers-color-scheme: dark) {
  .lockup .mark { display: none; }
  .lockup .tile { display: block; }
}

/* ---------- the policy: its title, the date, a line on what it covers, then the text ----------
   The title, the date and the line stand on the centre line, as everything does in index.html; the
   text under them is a column 640 px wide on the same line, set flush left, as reading wants. */
main { flex: 1 0 auto; padding: var(--step) var(--gutter); }
.notice { max-width: 640px; margin-inline: auto; }
.notice header { text-align: center; }
.statement { margin: 0; font: 300 clamp(26px, 3.34vw, 48px)/1.22 var(--sans); letter-spacing: -.022em; text-wrap: balance; }   /* the size of the mission */
.dated { margin: 16px 0 0; color: var(--dim); }
.intro { margin: var(--gap) 0 0; color: var(--muted); text-wrap: balance; }
/* the text: two sizes of type (the heading of a part is the small size, a weight heavier), 8 and 16 apart within a
   part and --step from one part to the next, as the blocks of index.html are */
.notice h2 { margin: 48px 0 8px; font: 500 16px/1.5 var(--sans); }
.notice h2 + p, .notice h2 + ul { margin-top: 0; }
.notice p, .notice ul { margin: 16px 0 0; }
.notice strong { font-weight: 500; }
.notice ul { padding-left: 20px; }
.notice li + li { margin-top: 8px; }
.notice a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--dim); transition: text-decoration-color .2s linear; }
.notice a:hover, .notice a:focus-visible { text-decoration-color: var(--fg); }
.notice .back { display: inline-block; margin-top: var(--step); padding-block: 10px; color: var(--muted); text-decoration-color: var(--dim); transition: color .2s linear, text-decoration-color .2s linear; }
.notice .back:hover, .notice .back:focus-visible { color: var(--fg); text-decoration-color: var(--fg); }

/* ---------- foot, as in index.html and 404.html ---------- */
.foot { flex: none; padding: 0 var(--gutter); border-top: 1px solid var(--line); }
.foot .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding: 14px 0; color: var(--dim); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.foot a { display: inline-block; padding-block: 10px; color: var(--muted); text-decoration: none; transition: color .2s linear; }   /* a finger's height each */
.foot a:hover, .foot a:focus-visible { color: var(--fg); }

@media (prefers-reduced-motion: no-preference) {
  .notice { animation: arrive .8s var(--ease) .1s both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(16px); } }
}
@media (max-width: 759px) {
  /* no room for two ends: the foot joins the axis */
  .foot .inner { flex-direction: column; align-items: center; gap: 0; padding: 12px 0; text-align: center; }
  .foot nav { justify-content: center; }
}
@media (max-width: 600px) {
  :root { --head: 60px; }
  .lockup { font-size: 18px; }
}
@media (max-width: 360px) {
  /* too narrow for the name and the address on one line: the address takes its own */
  .foot .sep { display: none; }
  .foot .mail { display: block; }
}