/* Shared by the standalone pages (privacy, support, press). Tokens, grain,
   wordmark, header and footer are the same as index.html's; keep them in step. */
:root {
  --paper: #FCF9F2;      /* the app's paper */
  --paper-deep: #F3EEE3; /* a sheet under a sheet */
  --type: #0E1016;
  --muted: #5F6170;
  --rule: #E3DDD0;
  --ink: #1D3CC9;        /* deep royal-blue ink */
  --card: #FFFEFA;
  --night: #0E1016;      /* the dark band */
  --ink-pale: #C3CEFF;   /* ink, read on ink */
  --ink-light: #8EA0FF;  /* ink, read on night */
  --pad: clamp(56px, 8vw, 104px);   /* a little tighter than the home page: these are pages to read */
  --radius: 16px;
  --shadow: 0 44px 80px -50px rgba(40, 32, 12, 0.5);
  --grotesk: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Freight Text Pro", "Iowan Old Style", Georgia, serif;
  --hand: "Permanent Marker", "Marker Felt", cursive;
  --script: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--type); font-family: var(--grotesk); font-size: 1.0625rem; line-height: 1.6;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); overflow-x: hidden; }
/* The paper's grain, laid over every band so the whole page reads as one sheet. */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background-image: var(--grain, none); background-size: 360px 360px; mix-blend-mode: multiply; opacity: 0.6; }
.wrap { max-width: 1160px; margin: 0 auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* Wordmark: Th / ink / blot */
/* The wordmark is the vector lockup (marketing/brand/lockup): the blot rises out of "ink" as the dot of its i. */
.wm { display: inline-block; line-height: 0; text-decoration: none; }
.wm img, .wm svg { display: block; width: 100%; height: auto; }
.wm.small { width: 6rem; }

header.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 20px; }
header.top nav { display: flex; gap: clamp(14px, 3vw, 26px); font-size: 0.95rem; font-weight: 500; }
header.top nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
header.top nav a:hover, header.top nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* A page's opening */
.intro { padding-block: clamp(28px, 6vw, 72px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--rule); }
.intro h1 { font-weight: 700; font-size: clamp(3rem, 10vw, 7.4rem); line-height: 0.92; letter-spacing: -0.06em; margin: 12px 0 22px; text-wrap: balance; }
.intro h1 em { font-family: var(--serif); font-weight: 300; font-style: italic; letter-spacing: -0.03em; color: var(--ink); }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--muted); max-width: 34em; margin: 0; }
.meta { font-size: 0.86rem; color: var(--muted); margin: 18px 0 0; }

/* The night band, for the one promise a page leads with */
.bleed { margin-inline: calc(50% - 50vw); }
.bleed-in { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.night { background: var(--night); color: var(--paper); position: relative; padding-block: clamp(56px, 9vw, 120px); }
.night::after { content: ""; position: absolute; top: 0; bottom: 0; right: max(3px, calc(50vw - 618px)); width: clamp(6px, 1vw, 12px); background: var(--ink); }
.night .kicker { color: rgba(252, 249, 242, 0.6); }
.night h1 { font-weight: 800; font-size: clamp(3rem, 11vw, 8.6rem); line-height: 0.88; letter-spacing: -0.065em; margin: 12px 0 0; text-wrap: balance; }
.night h1 em { font-family: var(--serif); font-weight: 300; font-style: italic; letter-spacing: -0.04em; color: var(--ink-light); }
.night .lead { color: rgba(252, 249, 242, 0.78); margin-top: clamp(22px, 3vw, 34px); }
.night .meta { color: rgba(252, 249, 242, 0.55); }

/* Reading column: a heading in the margin, the words beside it */
.doc section { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(20px, 6vw, 88px); padding-block: clamp(36px, 5vw, 60px); border-top: 1px solid var(--rule); }
.doc section:first-child { border-top: 0; }
.doc h2 { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.doc h2 em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.025em; color: var(--ink); }
.doc .body { max-width: 38em; min-width: 0; }
.doc .body > :first-child { margin-top: 0; }
.doc p { margin: 0 0 14px; color: var(--muted); }
.doc p b, .doc li b, .doc dd b { color: var(--type); font-weight: 600; }
.doc h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; margin: 26px 0 6px; color: var(--type); }
.doc ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; color: var(--muted); }
.doc ul li { padding-left: 1.6em; position: relative; }
.doc ul li::before { content: "—"; color: var(--ink); position: absolute; left: 0; }
.doc a { text-decoration-color: var(--ink); text-underline-offset: 3px; }
.doc a:hover { color: var(--ink); }
.doc code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: var(--paper-deep); border-radius: 5px; padding: 1px 5px; }

/* Rows of what-and-why: permissions, facts */
.rows { margin: 0; display: grid; }
.rows > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 6px 22px; padding-block: 14px; border-top: 1px solid var(--rule); }
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows dt { font-weight: 700; letter-spacing: -0.015em; }
.rows dd { margin: 0; color: var(--muted); }

/* Questions, as on the home page */
.qa { margin: 0; display: grid; }
.qa > div { padding-block: 22px; border-top: 1px solid var(--rule); }
.qa > div:first-child { border-top: 0; padding-top: 4px; }
.qa dt { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.qa dd { margin: 6px 0 0; color: var(--muted); }
.qa dd p { margin: 0 0 10px; }

/* A paper card, for the quote and asset tiles */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow); }
.quote { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.quote + .by { margin-top: 14px; font-size: 0.9rem; color: var(--muted); }
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.doc .assets { gap: 16px; }
.doc .assets li { padding-left: 0; }
.doc .assets li::before { content: none; }
.assets a { display: grid; gap: 4px; text-decoration: none; height: 100%; }
.assets a:hover { border-color: var(--ink); }
.assets .name { font-weight: 700; letter-spacing: -0.015em; }
.assets .what { font-size: 0.88rem; color: var(--muted); }

.mail { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; }

footer { border-top: 1px solid var(--rule); padding-block: clamp(48px, 8vw, 96px) 40px; display: grid; gap: 26px; }
footer .wm { width: clamp(12.8rem, 56vw, 40rem); }
footer .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; font-size: 0.82rem; color: var(--muted); }
footer .base nav { display: flex; gap: 18px; }
footer .base nav a { text-decoration: none; }
footer .base nav a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .doc section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rows > div { grid-template-columns: minmax(0, 1fr); }
  header.top .wm.small { width: 5.2rem; }
}