:root {
  /* ----- BORDERS */
  --border-size: 2px;

  /* ----- COLORS */
  --color-background: hsl(25, 59%, 91%);
  --color-error: hsl(349, 100%, 35%);
  --color-primary: hsl(28, 100%, 48%);
  --color-secondary: hsl(17, 100%, 24%);
  --color-surface: hsl(25, 59%, 91%);

  --color-on-background: hsla(0deg 0% 0% / 0.8);
  --color-on-error: hsla(0deg 0% 100% / 0.8);
  --color-on-primary: hsla(0deg 0% 100% / 0.8);
  --color-on-secondary: hsla(0deg 0% 100% / 0.8);
  --color-on-surface: hsla(0deg 0% 0% / 0.8);

  /* ----- FONTS */
  --font-family-body: "Arial", sans-serif;
  --font-family-display: "Helvetica", "Arial", sans-serif;

  /* ----- GAPS */
  --gap-200: 6px;
  --gap-300: var(--size-300);
  --gap-400: var(--size-400);
  --gap-500: var(--size-500);
  --gap-600: var(--size-600);
  --gap-700: var(--size-700);
  --gap-800: var(--size-800);
  --gap-900: var(--size-900);

  /* ----- LINE LENGTHS */
  --line-length-min: 45ch;
  --line-length-max: 65ch;

  /* ----- SIZES */
  --size-scale: 1.2;

  --size-300: calc(var(--size-400) / var(--size-scale));
  --size-400: 1.125rem;
  --size-500: calc(var(--size-400) * var(--size-scale));
  --size-600: calc(var(--size-500) * var(--size-scale));
  --size-700: calc(var(--size-600) * var(--size-scale));
  --size-800: calc(var(--size-700) * var(--size-scale));
  --size-900: calc(var(--size-800) * var(--size-scale));

  --size-h1: var(--size-900);
  --size-h2: var(--size-800);
  --size-h3: var(--size-700);
  --size-h4: var(--size-600);
  --size-h5: var(--size-500);
  --size-h6: var(--size-400);
}

@supports (font-size: clamp(1rem, 1rem + 0.25vw, 2rem)) {
  :root {
    --size-400: clamp(1rem, 1rem + 0.25vw, 2rem);
  }
}

::selection {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

[href]:hover,
[href]:focus,
[href].element-a.--default:hover,
[href].element-a.--default:focus {
  color: var(--color-primary);
  text-decoration-style: dotted;
}

a:not([class]),
a.element-a.--default {
  color: currentColor;
  text-decoration-thickness: var(--border-size);
}

a[aria-current] {
  /* physical fallbacks and logical overrides. don't change order! */
  border-bottom: var(--border-size) solid;
  border-block-end: var(--border-size) solid;
  border-block-start: unset;
  border-inline-end: unset;
  border-inline-start: unset;
}

a.component-button {
  background: var(--color-secondary);
  border-radius: var(--gap-200);
  color: var(--color-on-secondary);
  display: block;
  text-decoration: none;

  /* physical fallbacks and logical overrides. don't change order! */
  margin-left: auto;
  margin-right: auto;
  margin-block-end: unset;
  margin-block-start: unset;
  margin-inline-end: auto;
  margin-inline-start: auto;

  max-width: max-content;
  max-block-size: unset;
  max-inline-size: max-content;

  padding: 0 1ch;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 1ch;
  padding-inline-start: 1ch;
}

a.component-button:hover,
a.component-button:focus {
  color: var(--color-on-secondary);
  text-decoration: underline;
}

article.component-post {
  --block-rhythm: var(--gap-700);
}

article.component-post h2,
article.component-post h3 {
  --block-rhythm: var(--gap-900);
}

article.component-post h4,
article.component-post h5 {
  --block-rhythm: var(--gap-700);
}

article.component-post h2 + *,
article.component-post h3 + * {
  --block-rhythm: var(--gap-400);
}

article.component-post h4 + *,
article.component-post h5 + * {
  --block-rhythm: var(--gap-200);
}

article.component-post h6,
article.component-post h6 + * {
  --block-rhythm: var(--block-rhythm-default);
}

article.component-post img {
  object-fit: contain;

  /* physical fallbacks and logical overrides. don't change order! */
  margin-left: auto;
  margin-right: auto;
  margin-block-end: unset;
  margin-block-start: unset;
  margin-inline-end: auto;
  margin-inline-start: auto;

  max-height: 75vh;
  max-block-size: 75vh;
  max-inline-size: unset;
}

article.component-post .__publish-date {
  /* physical fallbacks and logical overrides. don't change order! */
  margin-top: var(--gap-200);
  margin-block-end: unset;
  margin-block-start: var(--gap-200);
  margin-inline-end: unset;
  margin-inline-start: unset;
}

article.component-post .__subtitle {
  color: var(--color-secondary);
  display: block;
  font-size: var(--size-500);
  font-style: italic;
}

blockquote {
  /* physical fallbacks and logical overrides. don't change order! */
  border-left: var(--border-size) solid var(--color-primary);
  border-block-end: unset;
  border-block-start: unset;
  border-inline-end: unset;
  border-inline-start: var(--border-size) solid var(--color-primary);

  padding-left: var(--size-400);
  padding-block-end: unset;
  padding-block-start: unset;
  padding-inline-end: unset;
  padding-inline-start: var(--size-400);
}

blockquote p {
  font-size: var(--size-500);

  /* physical fallbacks and logical overrides. don't change order! */
  max-width: var(--line-length-max);
  max-block-size: unset;
  max-inline-size: var(--line-length-max);
}

body {
  background: var(--color-background);
  color: var(--color-on-background);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--size-400);
  grid-gap: var(--gap-900) var(--gap-400);
  grid-template-areas:
    ".  header  ."
    ".  main    ."
    ".  footer  .";
  grid-template-columns: 1fr minmax(auto, var(--line-length-max)) 1fr;
  grid-template-rows: auto 1fr auto;
  line-height: 1.5;
  margin: 0;

  /* physical fallbacks and logical overrides. don't change order! */
  min-height: 100vh;
  min-block-size: 100vh;
  min-inline-size: unset;
}

body > footer {
  display: grid;
  grid-area: footer;
  grid-auto-flow: column;
  grid-gap: var(--gap-400);
  justify-content: center;
  padding: var(--gap-400);

  /* physical fallbacks and logical overrides. don't change order! */
  border-top: var(--border-size) solid var(--color-primary);
  border-block-end: unset;
  border-block-start: var(--border-size) solid var(--color-primary);
  border-inline-end: unset;
  border-inline-start: unset;
}

body > header {
  grid-area: header;

  /* physical fallbacks and logical overrides. don't change order! */
  border-bottom: var(--border-size) solid var(--color-primary);
  border-block-end: var(--border-size) solid var(--color-primary);
  border-block-start: unset;
  border-inline-end: unset;
  border-inline-start: unset;

  padding-top: var(--gap-400);
  padding-bottom: var(--gap-400);
  padding-block-end: var(--gap-400);
  padding-block-start: var(--gap-400);
  padding-inline-end: unset;
  padding-inline-start: unset;
}

body > main {
  grid-area: main;
}

h1,
.element-h1,
h2,
.element-h2,
h3,
.element-h3,
h4,
.element-h4,
h5,
.element-h5,
h6,
.element-h6 {
  font-family: var(--font-family-display);
  line-height: 1.1;
}

h3,
.element-h3,
h4,
.element-h4,
h5,
.element-h5,
h6,
.element-h6 {
  font-weight: normal;
}

h1,
.element-h1 {
  color: var(--color-secondary);
  font-size: var(--size-900);
}

h2,
.element-h2 {
  font-size: var(--size-800);
}

h3,
.element-h3 {
  font-size: var(--size-700);
}

h4,
.element-h4 {
  font-size: var(--size-600);
}

h5,
.element-h5 {
  font-size: var(--size-500);
}

h6,
.element-h6 {
  font-size: var(--size-400);
}

li {
  /* physical fallbacks and logical overrides. don't change order! */
  max-width: var(--line-length-max);
  max-block-size: unset;
  max-inline-size: var(--line-length-max);
}

nav.--primary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

nav.--primary > .__brand {
  flex-grow: 1;
}

nav.--primary > .__links {
  display: flex;
  flex-wrap: wrap;
}

nav.--primary > .__links > * {
  /* physical fallbacks and logical overrides. don't change order! */
  margin-left: 1ch;
  margin-right: 1ch;
  margin-block-end: unset;
  margin-block-start: unset;
  margin-inline-end: 1ch;
  margin-inline-start: 1ch;
}

nav.--primary > .__links a {
  color: currentColor;
  font-family: var(--font-family-display);
  font-weight: 300;
  text-decoration: none;
}

nav.--primary > .__links a:hover,
nav.--primary > .__links a:focus {
  color: var(--color-primary);

  /* physical fallbacks and logical overrides. don't change order! */
  border-bottom: var(--border-size) dotted;
  border-block-end: var(--border-size) dotted;
  border-block-start: unset;
  border-inline-end: unset;
  border-inline-start: unset;
}

p {
  /* physical fallbacks and logical overrides. don't change order! */
  max-width: var(--line-length-max);
  max-block-size: unset;
  max-inline-size: var(--line-length-max);
}

ul[role="list"] {
  /*
    role="list" is required in the html for
    accessibility when removing list styles,
    see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
  */
  list-style: none;
  padding: 0;
}

.component-brand {
  align-content: center;
  align-items: center;
  display: grid;
  grid-gap: 0 var(--gap-200);
  grid-template-areas:
    "logo   name"
    "logo   tagline";
  justify-content: start;
  line-height: 1.1;
  text-decoration: none;
}

.component-brand img {
  grid-area: logo;
  object-fit: contain;

  /* physical fallbacks and logical overrides. don't change order! */
  height: 70px;
  width: 70px;
  block-size: 70px;
  inline-size: 70px;
}

.component-brand .__site-tagline {
  align-self: start;
  color: var(--color-secondary);
  font-size: var(--size-300);
  grid-area: tagline;
}

.component-brand .__site-name {
  align-self: end;
  color: var(--color-on-background);
  font-family: var(--font-family-display);
  font-size: var(--size-700);
  font-weight: 300;
  grid-area: name;
  letter-spacing: 1px;
}

.component-card:not(:last-child) {
  /* physical fallbacks and logical overrides. don't change order! */
  border-bottom: var(--border-size) solid var(--color-primary);
  border-block-end: var(--border-size) solid var(--color-primary);
  border-block-start: unset;
  border-inline-end: unset;
  border-inline-start: unset;

  padding-bottom: var(--gap-900);
  padding-block-end: var(--gap-900);
  padding-block-start: unset;
  padding-inline-end: unset;
  padding-inline-start: unset;
}

.component-card > * {
  --block-rhythm: var(--block-rhythm-default);
}

.component-card a {
  text-decoration: none;
}

.component-card a:hover,
.component-card a:focus {
  text-decoration: underline;
}

.component-card .__more {
  color: var(--color-secondary);
  font-size: var(--size-300);
  text-transform: uppercase;
}

.component-card .__subtitle {
  --block-rhythm: 0;

  display: block;
  font-size: var(--size-500);
  font-weight: bold;
}

.component-icon {
  vertical-align: middle;

  /* physical fallbacks and logical overrides. don't change order! */
  height: 40px;
  width: 40px;
  block-size: 40px;
  inline-size: 40px;
}

.utility-block-rhythm > * + * {
  --block-rhythm-default: 1em;

  /* physical fallbacks and logical overrides. don't change order! */
  margin-top: var(--block-rhythm, var(--block-rhythm-default));
  margin-block-end: unset;
  margin-block-start: var(--block-rhythm, var(--block-rhythm-default));
  margin-inline-end: unset;
  margin-inline-start: unset;
}

.utility-visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;

  /* physical fallbacks and logical overrides. don't change order! */
  height: 1px;
  width: 1px;
  block-size: 1px;
  inline-size: 1px;
}