@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(geist-latin-wght-normal.woff2) format('woff2'); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:   #ffffff;
  --ink:  #000000;
  --ease: cubic-bezier(.16,1,.3,1);
  --edge: clamp(20px, 2.2vw, 32px);
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px; font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* cursor: a ring that grows over links */
#cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: width .35s ease, height .35s ease, opacity .2s ease;
}
#cursor-ring.on-link { width: 48px; height: 48px; }
@media (hover: hover) and (pointer: fine) { html, body, *, a { cursor: none !important; } }
@media (hover: none) { #cursor-ring { display: none; } }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.text {
  width: min(100% - 2 * var(--edge), 34em);
  margin: auto;
  padding: 4rem 0;
  font-size: 15px;
  line-height: 1.55;
}
.text h1 { font: inherit; line-height: inherit; font-weight: 500; margin-bottom: 2.5em; }
.text h2 { font: inherit; line-height: inherit; font-weight: 500; margin-top: 2em; }
.text a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }

.link {
  color: inherit; text-decoration: none;
  position: relative; display: inline-block;
  padding: .9rem .7rem;
}
/* keyboard focus: a thin sharp line, not the browser's rounded box */
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; border-radius: 0; }
.link:focus-visible { outline-offset: -.55rem; }

/* bottom: one Home button, where the main page has Menu */
.foot {
  text-align: center;
  padding: 0 calc(var(--edge) - .7rem) calc(var(--edge) - .9rem);
  user-select: none; -webkit-user-select: none;
}
@media (hover: hover) {
  .link { transition: color .25s ease; }
  .link:hover { color: rgb(0 0 0 / .54); }
}