/* site.css — what every page of the Not yet. site shares: the app's own fonts
   and colours (served from this site, so no outside requests), the top bar,
   buttons and the footer. */
@font-face { font-family: 'Outfit'; font-weight: 100 900; font-display: swap; src: url('fonts/outfit-latin.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 200 800; font-display: swap; src: url('fonts/atkinson-next-latin.woff2') format('woff2'); }
:root {
  color-scheme: light dark;
  --desk:    light-dark(#f3f1fa, #14131c);
  --paper:   light-dark(#ffffff, #1d1c28);
  --paper-2: light-dark(#f8f7fc, #232230);
  --ink:     light-dark(#2a2745, #f1eefa);
  --ink-2:   light-dark(#595571, #bab5d0);
  --line:    light-dark(#e7e4f1, #2f2d41);
  --focus:   light-dark(#7a67e8, #b5a8ff);
  --link:    light-dark(#6a4fd8, #c9b9ff);
  --hl:      light-dark(#ddd1fb, rgba(190, 170, 255, .34));
  --night:   #2e2a4f;
  --primary: light-dark(#2a2745, #dcd0fd);
  --primary-ink: light-dark(#ffffff, #231f3d);
  --display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --text: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bar: 64px;                                       /* the sticky top bar */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* A link to a part of the page lands below the top bar, not under it */
[id] { scroll-margin-top: calc(var(--bar) + 20px); }
body { margin: 0; background: var(--desk); color: var(--ink); font: 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 999px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* The highlighter stroke the app draws behind words */
.swipe { position: relative; z-index: 0; white-space: nowrap; }
.swipe::before {
  content: ''; position: absolute; z-index: -1; left: -.1em; right: -.12em; top: .16em; bottom: .02em;
  background: var(--hl); border-radius: .3em .6em .35em .7em / .7em .4em .6em .35em; transform: rotate(-1.2deg) skewX(-8deg);
}
.eyebrow { margin: 0 0 8px; font: 700 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--focus); }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--desk) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 22px; height: var(--bar); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--display); letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; }
.bar nav a:not(.btn) { text-decoration: none; color: var(--ink-2); }
.bar nav a:not(.btn):hover, .bar nav a[aria-current="page"] { color: var(--ink); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: 700 16px/1 var(--text); text-decoration: none; white-space: nowrap; }
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.12); }
.btn.quiet { background: var(--paper); border: 1px solid var(--line); }
.btn.sm { padding: 9px 16px; font-size: 14px; }

.site-foot { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--ink-2); font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.site-foot .wrap > :first-child { margin-right: auto; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .bar nav a:not(.btn) { display: none; }
}