/**
 * docs.auralfm.xyz — how to use the app.
 *
 * The homepage's system, cut down to what a page of reading needs: Space Mono
 * for the brand and the headings, Space Grotesk for the text, bone on onyx,
 * aqua for the one thing to press. Fonts are served from here, as on the
 * homepage, so no font request goes anywhere else. No script at all.
 */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-wght.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  color-scheme: dark;
  --onyx: #0C0B0B;
  --bone: #F7F4EE;
  --bone2: rgba(247, 244, 238, .70);     /* 8.9:1 on onyx */
  --line: rgba(247, 244, 238, .14);
  --aqua: #02E8CD;                       /* 12.6:1 on onyx */
  --display: "Space Mono", ui-monospace, Menlo, monospace;
  --body: "Space Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--onyx); color: var(--bone);
  font: 400 16px/24px var(--body); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 4px; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  padding: 8px 12px; border-radius: 8px; background: var(--bone); color: var(--onyx);
}
.skip:focus { top: 16px; }

.top {
  display: flex; align-items: center; gap: 12px;
  max-width: 720px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.brand img { display: block; border-radius: 50%; }
.brand span { font: 700 16px/24px var(--display); letter-spacing: .02em; }
.where { font: 400 12px/16px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--bone2); }
.btn {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 16px; border-radius: 9999px;
  background: var(--aqua); color: var(--onyx);
  font: 600 14px/20px var(--body); text-decoration: none; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .5s var(--ease);
}
.btn:hover { background: #5CF2E0; transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline-color: var(--bone); }

main { max-width: 720px; margin: 0 auto; padding: 48px 16px 64px; }
h1 { font-size: 36px; line-height: 40px; }
.lede { margin-top: 12px; font-size: 18px; line-height: 28px; color: var(--bone2); }
section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
section p + p, section ol + p { margin-top: 16px; }
.label { font: 400 12px/16px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--aqua); }
h2 { margin: 8px 0 16px; font-size: 24px; line-height: 32px; }

.steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
}
/* The circle is 32 tall and a line is 24, so the text drops 4 to sit centred
   on its number, and a step that wraps keeps its first line there. */
.steps li > span { padding-top: 4px; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%;
  font: 700 14px/20px var(--display); color: var(--aqua);
}
.steps b { font-weight: 600; }

.foot {
  max-width: 720px; margin: 0 auto; padding: 24px 16px max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--bone2); font-size: 14px; line-height: 20px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 12px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot span { white-space: nowrap; }

@media (max-width: 420px) {
  .where { display: none; }
  h1 { font-size: 30px; line-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }