/* "How your data is handled" (landing/public/data.html): the landing page's
   warm charcoal and type (landing/landing.css), for a page to be read. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}
:root {
  --bg: #121110;
  --text: #f2efea;
  --text-2: #a39e97;
  --text-3: #6f6a64;
  --accent: #ece4d6;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    url('/textures/charcoal-grain.png') 0 0 / 128px 128px repeat,
    radial-gradient(1200px 700px at 72% 0%, rgba(255, 242, 228, 0.06), transparent 70%) fixed,
    var(--bg);
  color: var(--text);
  font: 16px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--text); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.top { max-width: 760px; margin: 0 auto; padding: 22px 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 650; font-size: 20px; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }

main { max-width: 760px; margin: 0 auto; padding: 32px 20px 40px; }
.eyebrow { margin: 0 0 12px; color: var(--text-3); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { margin: 0 0 18px; font-size: clamp(34px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 750; text-wrap: balance; }
.lede { margin: 0 0 56px; font-size: 19px; color: var(--text-2); text-wrap: pretty; }
section { margin-bottom: 56px; }
h2 { margin: 0 0 18px; font-size: 24px; letter-spacing: -0.02em; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 28px; color: var(--text-2); }
.points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.points b { color: var(--text); font-weight: 600; }
/* Things Slate never does: a quiet dash, not a tick (a tick would read as "yes, it does"). */
.points.is-never li::before { top: 12px; width: 11px; height: 1.5px; border: 0; background: var(--text-3); transform: none; }

.ways { display: grid; gap: 30px; }
.ways p, .plain { margin: 0; color: var(--text-2); }
.ask { margin: 0; padding-top: 8px; font-size: 17px; }

footer { max-width: 760px; margin: 0 auto; padding: 16px 20px 48px; color: var(--text-3); font-size: 14px; }
footer p { margin: 0; }

/* The landing page's edge shapes (landing.css, "Edge shapes"), three here: the
   column is narrower, so there's room from 1100px. */
html, body { overflow-x: clip; }
.edge { display: none; }
@media (min-width: 1100px) {
  section { position: relative; }
  .edge {
    --gap: calc((100vw - 720px) / 2);
    --w: min(max(calc(var(--gap) + 20px), 320px), 460px);
    --out: max(calc(var(--w) - var(--gap) + 20px), 40px);
    display: block;
    position: absolute;
    top: var(--y, 50%);
    width: var(--w);
    aspect-ratio: 400 / 360;
    transform: translateY(-50%);
    pointer-events: none;
    background: right center / contain no-repeat;
  }
  .edge.is-right { right: calc(50% - 50vw - var(--out)); }
  .edge.is-left { left: calc(50% - 50vw - var(--out)); transform: translateY(-50%) scaleX(-1); }
  .edge.contours-1 { background-image: url('/shapes/contours-1.svg'); }
  .edge.contours-3 { background-image: url('/shapes/contours-3.svg'); }
  .edge.slabs-1 { background-image: url('/shapes/slabs-1.svg'); }
}