@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

:root {
  color-scheme: light;
  --bg: #f4f5f2;
  --raised: #fffefb;
  --ink: #17394d;
  --muted: #64757d;
  --line: #d6dfdf;
  --wash: #e8f0ef;
  --stain: #397d7a;
  --eosin: #c66f47;
  --blue: #4964bf;
  --serif: "Fraunces", charter, "bitstream charter", "sitka text", cambria, georgia, serif;
  --mono: "Plex Mono", ui-monospace, "sf mono", menlo, consolas, "liberation mono", monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 30px 80px -54px rgb(16 39 45 / .38);
}

::selection { background: var(--stain); color: #fff; }

html {
  min-height: 100%;
  overflow-x: clip;
  background: var(--bg);
  font-size: clamp(16px, calc(15px + .2vw), 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.guide-byline,
.source-note,
.quiet { font-family: var(--mono); }

a {
  text-decoration-color: color-mix(in srgb, var(--stain) 42%, transparent);
  text-underline-offset: .18em;
  -webkit-tap-highlight-color: transparent;
}

a:hover,
a:hover i { color: var(--stain); text-decoration-color: var(--stain); }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 55%, white);
  outline-offset: 4px;
}

sup { font-size: .66em; vertical-align: super; }

/* Home */

.home-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 12% 24%, rgb(73 100 191 / .055), transparent 28rem),
    radial-gradient(circle at 88% 78%, rgb(198 111 71 / .045), transparent 24rem),
    var(--bg);
}

.home {
  width: min(100% - clamp(2rem, 8vw, 8rem), 1180px);
  min-height: 100svh;
  margin-inline: auto;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(5rem, 12vh, 9rem);
  padding-block: clamp(3rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem);
}

.home__content {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(380px, 1.22fr);
  align-items: center;
  gap: clamp(4.5rem, 12vw, 10rem);
}

.home__intro h1 {
  max-width: 7ch;
  font-size: clamp(4rem, 8vw, 7.4rem);
  font-weight: 520;
  letter-spacing: -.055em;
  line-height: .88;
}

.home__intro p {
  max-width: 28ch;
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.5;
}

.home__links {
  display: grid;
  border-top: 1px solid var(--line);
}

.index-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.55rem 2rem 1.55rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding .22s var(--ease), color .22s var(--ease);
}

.index-row::after {
  content: "→";
  position: absolute;
  right: 0;
  color: var(--stain);
  font-family: var(--mono);
  font-size: .85rem;
  opacity: 0;
  transform: translateX(-.5rem);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}

.index-row:hover { padding-left: .5rem; }
.index-row:hover::after { opacity: 1; transform: none; }

.index-row__name {
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 520;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.index-row__desc {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.45;
  text-align: right;
}

.home__footer {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
}

/* Utility pages */

.utility-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.utility-page main {
  width: min(100%, 32rem);
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--raised);
  box-shadow: var(--shadow);
}

.utility-page h1 {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 520;
  letter-spacing: -.04em;
  line-height: 1;
}

.utility-page h1 + p { margin-top: 1rem; color: var(--muted); }

.utility-page nav {
  margin-top: 2rem;
  display: grid;
  gap: .65rem;
  font-family: var(--mono);
  font-size: .76rem;
}

.utility-page main > p:last-child {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: .72rem;
}

@media (max-width: 780px) {
  .home__content { grid-template-columns: 1fr; align-content: center; gap: 3.5rem; }
  .home__intro h1 { max-width: 9ch; font-size: clamp(3.7rem, 15vw, 6rem); }
  .home__intro p { margin-top: 1rem; }
}

@media (max-width: 520px) {
  .home { width: min(100% - 2rem, 1180px); }
  .index-row { grid-template-columns: 1fr; gap: .25rem; padding-block: 1.1rem; }
  .index-row__desc { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}