/* Composition only, on tokens from Open Props, which loads first
   (vendor/open-props/open-props.min.css). All colours, fonts and spacing are
   tokens. The few raw values are layout ratios, the name's fluid size and
   tracking, and the transition duration, which Open Props has no token for. */

:root {
  color-scheme: light dark;

  /* Cool off-white paper, charcoal ink, restrained cobalt accent. */
  --surface: var(--gray-0);
  --ink: var(--gray-9);
  --mark: var(--gray-7);
  --mark-pending: var(--gray-6);
  --accent: var(--blue-9);
  --rule: var(--gray-3);

  /* A 48px target around a 24px glyph. --inset is the space between them. */
  --target: var(--size-8);
  --glyph: var(--size-5);
  --inset: calc((var(--target) - var(--glyph)) / 2);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Slate ink surface with soft cool text and a light cobalt accent. */
    --surface: var(--gray-10);
    --ink: var(--gray-1);
    --mark: var(--gray-3);
    --mark-pending: var(--gray-6);
    --accent: var(--blue-3);
    --rule: var(--gray-8);
  }
}

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

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

/* Two uneven spacer rows hold the block just above true centre. */
body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 2fr auto 3fr;
  justify-items: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  margin: 0;
  padding: var(--size-fluid-3);
}

/* Shrink-wraps to the name, so the rule and icons below share its measure. */
main {
  grid-row: 2;
  inline-size: fit-content;
  max-inline-size: 100%;
}

h1 {
  margin: 0;
  font-family: var(--font-old-style);
  font-size: clamp(var(--font-size-6), 11vw, var(--size-9));
  font-weight: var(--font-weight-4);
  line-height: var(--font-lineheight-0);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

nav {
  margin-block-start: var(--size-fluid-2);
  padding-block-start: var(--size-2);
  border-block-start: var(--border-size-1) solid var(--rule);
}

/* inline-size: 0 keeps the row from widening main. The min-size then fills
   the name's measure, and the negative margins pull each outer target past
   it so the first and last glyphs, not their targets, sit flush with the name. */
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  inline-size: 0;
  min-inline-size: calc(100% + 2 * var(--inset));
  margin: 0 calc(-1 * var(--inset));
  padding: 0;
  list-style: none;
}

.mark {
  display: grid;
  place-items: center;
  inline-size: var(--target);
  block-size: var(--target);
  border-radius: var(--radius-2);
  color: var(--mark);
  transition: color 160ms var(--ease-3);
}

.mark svg {
  display: block;
  inline-size: var(--glyph);
  block-size: var(--glyph);
}

a.mark:hover {
  color: var(--accent);
}

a.mark:focus-visible {
  color: var(--accent);
  outline: var(--border-size-2) solid var(--accent);
  outline-offset: calc(-1 * var(--size-1));
}

.mark.is-pending {
  color: var(--mark-pending);
}

@media (prefers-reduced-motion: reduce) {
  .mark {
    transition: none;
  }
}