/* sheetreserve.com: the page is a ruled sheet. Every line of text fills
   exactly one row, so all vertical spacing is a multiple of --row and the
   text always sits between the rules. */

:root {
  --row: 3rem;
  --paper: #f6f8f8;
  --rule: #d5e0e4;
  --margin: #d77681;
  --ink: #16202a;
  --ink-soft: #4b5a67;
  --link: #1c5385;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #11171c;
    --rule: #1f2b33;
    --margin: #81414b;
    --ink: #e5ecef;
    --ink-soft: #a5b3bc;
    --link: #9cc7ea;
  }
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  /* A hairline at the bottom of every row. */
  background-image: linear-gradient(to bottom, transparent calc(var(--row) - 1px), var(--rule) calc(var(--row) - 1px));
  background-size: 100% var(--row);
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", Georgia, serif;
  font-size: 1.125rem;
  line-height: var(--row);
}

/* The double rule on the left is the sheet's margin line. Top padding stays
   a whole number of rows so the text lines up with the background rules. */
.sheet {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 46rem;
  margin-left: clamp(1rem, 7vw, 6rem);
  padding: calc(var(--row) * 3) 1rem var(--row) 1.25rem;
  border-left: 3px double var(--margin);
}

@media (min-width: 48rem) {
  .sheet {
    padding-top: calc(var(--row) * 5);
  }
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--row);
  overflow-wrap: break-word;
}

p {
  color: var(--ink-soft);
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}

.site {
  font-weight: 700;
}

.site a {
  color: var(--ink);
  text-decoration: none;
}

.site a:hover {
  text-decoration: underline;
}