@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ol,
  ul,
  a {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
}

:root {
  --default-font: "EB Garamond", serif;
  --alt-font: "IBM Plex Mono", serif;

  --title-font-size: 40px;
  --logo-font-size: 26px;
  --subtitle-font-size: 20px;
  --body-font-size: 18px;
  --alt-font-size: 14px;

  --title-line-height: 40px;
  --paragraph-line-height: 24px;

  --accent-color: #147194;
  --accent2-color: #ce7500;
  --text-color: #000000;
  --background-color: #faf6ee;
  --card-color: #fffffe;
  --placeholder-color: #f0ece4;

  --grid-col-max-width: 124px;
  --grid-col-gap: 16px;
  --grid-col-width: calc(
    min(var(--grid-col-max-width), (100vw - var(--grid-col-gap) * 13) / 12)
  );

  accent-color: var(--accent-color);
  font-family: var(--default-font);
  font-size: var(--body-font-size);
  background: var(--background-color);
  text-rendering: geometricPrecision;
  line-height: var(--paragraph-line-height);
}

@media (max-width: 600px) {
  :root {
    --grid-col-gap: 4px;
  }
}

a {
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover,
a:focus-visible {
  opacity: 0.85;
  text-decoration-line: underline;
}

.baseGridLayout {
  display: grid;
  /* prettier-ignore-next-line */
  grid-template-columns:
    /* left margin */
    calc(
      max(0px, 50vw - var(--grid-col-max-width) * 6 - var(--grid-col-gap) * 6.5)
    )
    /* 12 columns */
    [start]
    repeat(12, [col from-col] minmax(0, 1fr) [col to-col])
    [end]
    /* right margin */
    calc(
      max(0px, 50vw - var(--grid-col-max-width) * 6 - var(--grid-col-gap) * 6.5)
    );
  column-gap: var(--grid-col-gap);
  width: 100%;
}