/* Unsocial Studiio — policy pages
   Palette: Ink #161616 · Putty #E4E2D9 · Paper #F5F5F5 · Olive #5F6650
   Type: Courier Prime (labels, uppercase, regular) · Inter (body)

   THESE PAGES DO NOT USE THE APP SHELL, AND THAT IS DELIBERATE.  (#334)
   Everything else in the product is drawn inside os-shell with a rail, a strip
   and a client picker. A privacy policy is read by people who are not signed
   in and may never sign in: a Meta reviewer, a Google reviewer, somebody's
   client checking what an agency has agreed to on their behalf. Chrome that
   offers navigation they cannot use is worse than no chrome. So this is one
   column, one stylesheet, no scripts. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #161616;
  --putty: #E4E2D9;
  --paper: #F5F5F5;
  --olive: #5F6650;
  --grey: #6E6E6E;
  --putty-tint: #EFEDE6;
  --hairline: #D5D2C6;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Liberation Sans', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 32px 120px;
}

/* masthead */
.mast { margin-bottom: 72px; }

.wordmark {
  font-family: 'Courier Prime', 'Liberation Mono', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.wordmark em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 16px;
}

.eyebrow {
  font-family: 'Courier Prime', 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 14px;
}

h1 {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0 0 20px;
}

.standfirst {
  font-size: 19px;
  line-height: 1.55;
  color: var(--grey);
  margin: 0;
  max-width: 60ch;
}

.updated {
  font-family: 'Courier Prime', 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

/* sections */
section { margin-top: 64px; }

h2 {
  font-size: 25px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 34px 0 10px;
}

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 9px; }
li:last-child { margin-bottom: 0; }

a { color: var(--olive); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

code, .mono {
  font-family: 'Courier Prime', 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.9em;
  background: var(--putty-tint);
  padding: 2px 6px;
  border-radius: 2px;
  word-break: break-word;
}

/* the putty panel, used sparingly */
.panel {
  background: var(--putty);
  padding: 32px 34px;
  margin: 32px 0;
}
.panel p:last-child { margin-bottom: 0; }

/* tables */
.tablewrap { overflow-x: auto; margin: 24px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 480px; }
th {
  font-family: 'Courier Prime', 'Liberation Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  background: var(--ink);
  color: var(--putty);
  padding: 12px 16px;
}
td { padding: 13px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--putty-tint); }
td:first-child { white-space: nowrap; }
td .mono { background: transparent; padding: 0; }

/* footer */
footer {
  margin-top: 96px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--grey);
}
footer a { color: var(--grey); }
footer .biz {
  font-family: 'Courier Prime', 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-top: 12px;
  line-height: 1.7;
}
footer nav { margin-bottom: 18px; display: flex; gap: 18px; flex-wrap: wrap; }
/* 44px for a thumb (#244). These are the only navigation on the page, so they
   are the one thing on it that has to be easy to hit. */
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Back to the app, for somebody who arrived from the sign-in page and wants to
   go back to it. A policy page with no way out is a dead end (#164 again, in a
   different room). Same 44px as the nav above it. */
.backlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  font-family: 'Courier Prime', 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}

@media (max-width: 600px) {
  .wrap { padding: 56px 22px 80px; }
  body { font-size: 16px; }
  .panel { padding: 24px 22px; }
  /* A table with a 480px minimum scrolls sideways inside its own box on a
     phone, which is the intended behaviour: the alternative is a legal
     obligation squeezed to four characters a line. The wrapper is what
     scrolls, never the page. */
  .tablewrap { margin-left: -22px; margin-right: -22px; padding: 0 22px; }
}