@import url("fonts/LTSuperior.css");

:root {
  /* Generated thanks to https://www.fluid-type-scale.com */
  --font-size-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
  --font-size-2xl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
  --font-size-3xl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

  /* Light mode colors (default) */
  --color-bg-lm: #ffffff;
  --color-text-lm: #111116;

  /* Dark mode colors */
  --color-bg-dm: #121212;
  --color-text-dm: #ffffffde;

  /* Adaptive colors */
  --color-bg: var(--color-bg-lm);
  --color-text: var(--color-text-lm);

    /* Spacing scale */
  --space-2xs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  --container-pad: clamp(5vw, 16px + 6vw, 15vw);
  --container-pad3: clamp(5vw, calc((100vw - 360px) * 0.195), 15vw);
  --container-cap: 750px;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-bg-dm);
    --color-text: var(--color-text-dm);
  }
}

/* Base / reset */
* { box-sizing: border-box; }
html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'LT Superior', ui-sans-serif, sans-serif;
  font-size: var(--font-size-base);
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
p {
  line-height: 1.3;
}
/* */

.container {
  width: 100%;
  padding-inline: var(--container-pad3);
  max-width: calc(var(--container-cap) + (2 * var(--container-pad3)));
  margin-inline: auto;
  margin-top: var(--space-xl);
}

#site-header {
  display: flex;
  align-items: baseline;
  text-wrap: nowrap;
  margin-bottom: var(--space-xl);
}

.bracket {
  font-size: var(--font-size-lg);
  user-select: none;
}

#header-name {
  font-size: var(--font-size-md);
  margin-left: var(--space-xs);
}

#header-nav {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-size-md);
  margin-right: var(--space-xs);
}

.main-text {
  font-size: var(--font-size-base);
}

.main-text a {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.spacer {
  flex: 1;
}

/*
  Needed to preserve new h1 behavior on older renderers
  See: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1
*/
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}