/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/
body {
  color: var(--color-dark);
  background: var(--color-light);
  font-size: var(--size-step-1);
  font-family: var(--font-base);
  line-height: 1.4;
  letter-spacing: var(--tracking);
}

/* Base typesetting */
h1,
h2,
h3 {
  line-height: 1;
  letter-spacing: var(--tracking-s);
  font-family: var(--font-display);
}

h1 {
  font-size: var(--size-step-5);
}

h2 {
  font-size: var(--size-step-4);
}

h3 {
  font-size: var(--size-step-3);
}

/* Set line lengths */
p,
li,
blockquote:not([class]) {
  max-width: 50ch;
}

h1,
h2,
h3 {
  max-width: 20ch;
}

blockquote {
  border-inline-start: 0.8rem solid var(--color-primary);
  padding: var(--space-m-l);
  font-size: var(--size-step-2);
}

blockquote > * + * {
  margin-top: var(--space-m-l);
}

blockquote :last-child {
  font-family: var(--font-base);
  font-style: normal;
  font-size: var(--size-step-1);
}

svg {
  height: 2ex;
  width: auto;
  flex: none;
}

[role='list'] {
  padding: 0;
}

/* Base interactive elements */

a {
  color: currentcolor;
}

a:hover {
  text-decoration: none;
}

:focus {
  outline: 3px solid;
  outline-offset: 0.3ch;
}

:target {
  scroll-margin-top: 2ex;
}

main:focus {
  outline: none;
}

article [href^='http']:not([href*='eleventy-excellent.netlify.app'])::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url('/assets/images/icn-external.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% auto;
  /* alternative text rules */
  content: '(external link)';
  overflow: hidden;
  white-space: nowrap;
  text-indent: 1em; /* the width of the icon */
}

/* Base selection styles that invert whatever colours are rendered */
::selection {
  background: var(--color-dark);
  color: var(--color-light);
}

.preload-transitions * {
  transition: none !important;
}