/* Shared by every page: type, masthead, footer and the margin-note grid.
   The palette and page-only rules stay inline in each page. */

/* Source Serif 4 (SIL OFL 1.1, see /fonts/OFL.txt): a Latin subset of
   the variable font, weight and optical-size axes included. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --pico-font-family: "Source Serif 4", Georgia, serif;
  --pico-font-size: 100%;
  --pico-border-radius: 2px;
  --display: clamp(3rem, 8vw, 6.5rem);
}
body {
  font-size: 1.125rem;
  font-variant-numeric: oldstyle-nums;
}
h1, h2 {
  color: inherit;
}

/* One typeface throughout. Nav and buttons speak in its true small caps. */
nav, button, [role="button"] {
  font-variant-caps: all-small-caps;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* One column width for the header, main and footer. */
body > header, body > main, body > footer {
  max-width: 72rem;
  padding-inline: 1rem;
}

/* Masthead: brand, nav, and an empty account slot for Log in / Sign up. */
body > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1.5rem;
  padding-block: 1rem;
}
body > header nav {
  justify-self: end;
}
nav a {
  color: inherit;
  text-decoration: none;
}
.account {
  margin: 0;
  padding: 0;
}
.brand-mark {
  color: inherit;
  text-decoration: none;
}
.wordmark {
  font-size: 2rem;
  font-weight: 600;
}
/* The house brand, beside the name wherever it acts as a brand. */
.byline {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.brand {
  color: var(--pico-primary);
  font-weight: 600;
}

.hero h1 {
  font-size: var(--display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 3rem;
}

/* The margin-note grid: an italic label set flush right in cols 1-3, so
   it leans on the content in cols 4-12; the 72rem column keeps the
   measure readable. Whitespace, not rules, separates the sections. */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin: 0;
  padding-block: 2.5rem 4rem;
}
.row > .label {
  grid-column: 1 / span 3;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--pico-primary);
  text-align: right;
  margin: 0;
}
/* Ordinals ("6th"): small raised letters, hung near the cap height, that
   leave the line's height alone. */
.row > .label sup {
  font-size: 0.55em;
  top: -0.8em;
  margin-left: 0.04em;
}
.row > .body {
  grid-column: 4 / -1;
}
.large {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.5;
}
.large p:last-child {
  margin-bottom: 0;
}

/* Footer. */
body > footer {
  text-align: center;
  color: var(--pico-muted-color);
  padding-block: 2.5rem;
}
body > footer nav {
  justify-content: center;
}
body > footer p {
  margin: 0;
}
body > footer small a {
  color: inherit;
}
body > footer .wordmark {
  color: var(--pico-color);
}

@media (max-width: 48rem) {
  body > header {
    grid-template-columns: 1fr auto;
  }
  body > header nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }
  .row {
    padding-block: 2rem 3rem;
  }
  .row > .label, .row > .body {
    grid-column: 1 / -1;
  }
  .row > .label {
    text-align: left;
    margin-bottom: 1rem;
  }
}