/* The privacy and support pages: the landing page's look (site/index.html), made for reading on a phone. */
:root {
  color-scheme: dark;
  --ink: #071017; --ink-2: #0d1820; --paper: #f0e4cb; --paper-2: #c9c1ad; --muted: #8f948f;
  --amber: #c9ac74; --amber-2: #e2c48a; --line: rgba(201, 172, 116, 0.28);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Liberation Serif", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--serif); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
/* The film grain, still: nothing moves under the words. */
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--amber-2); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 3px; border-radius: 4px; }
/* "Skip to the page": out of sight until a keyboard reaches it. */
.skip { position: absolute; top: 12px; left: 16px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; z-index: 60; padding: 8px 14px; background: var(--ink-2); border: 1px solid var(--amber); border-radius: 999px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(6px + env(safe-area-inset-top)) 16px 6px; border-bottom: 1px solid var(--line); }
.mark { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-size: 18px; letter-spacing: 0.32em; text-decoration: none; }
.top nav { display: flex; gap: 4px; margin-right: -8px; }
/* Each link is at least 44 px tall (Apple's smallest comfortable tap), with a little room each side. */
.top nav a, .foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-2); text-decoration: none; }
.top nav a[aria-current="page"], .foot nav a[aria-current="page"] { color: var(--amber-2); }

main { max-width: 680px; margin: 0 auto; padding: 36px 16px 48px; }
h1 { margin: 0; font-weight: 400; font-size: clamp(34px, 9.5vw, 52px); line-height: 1.1; }
.updated { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.lede { margin: 18px 0 0; font-size: 19px; color: var(--paper-2); }
h2 { margin: 0 0 10px; font-weight: 400; font-size: 26px; line-height: 1.2; }
h3 { margin: 0 0 6px; font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--paper); }
p, li { font-size: 17px; color: var(--paper-2); }
p { margin: 10px 0 0; }
ul { margin: 10px 0 0; padding-left: 1.15em; }
li { margin: 8px 0; padding-left: 2px; }
li::marker { color: var(--amber); }
strong { color: var(--paper); font-weight: 600; }
.btn { font-family: var(--mono); font-size: 0.86em; letter-spacing: 0.06em; color: var(--paper); white-space: nowrap; }

section { margin-top: 38px; scroll-margin-top: 16px; }
.card { margin-top: 26px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.card h2 { font-size: 22px; }
.card ul { padding-left: 1.05em; }
.mail { display: inline-block; max-width: 100%; margin-top: 14px; padding: 13px 20px; border-radius: 999px; border: 1px solid var(--amber); background: rgba(201,172,116,0.16); color: var(--paper); font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; text-decoration: none; overflow-wrap: anywhere; }
.mail:hover, .mail:focus-visible { background: rgba(201,172,116,0.3); }
.qa { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.qa:first-of-type { border-top: 0; padding-top: 0; }

.foot { padding: 32px 16px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 15px; }
.foot p { margin: 6px 0; color: var(--muted); font-size: 15px; }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 8px; margin-top: 6px; }