@font-face {
  font-family: 'Recursive';
  src: url('/assets/fonts/recursive/Recursive_VF_1.085.woff2');
  font-weight: 300 1000;
}

/* =================================================================
/* SECTION Tokens
================================================================= */

:root {
  /* Spacing */
  --space_05: 0.25rem; /* 4px   - utility to substitute 0 margins */
  --space_1: 0.5rem;   /* 8px   - utility for tight paddings etc */
  --space_2: 1rem;     /* 16px  - 1/2 line height, for closely related elements */
  --space_4: 2rem;     /* 32px  - 1 line height, for related elements */
  --space_8: 4rem;     /* 64px  - 2 line heights, for loosely related elements */
  --space_16: 8rem;    /* 128px - 4 line heights, for unrelated elements */

  /* Semantic Space */
  --space_flow: var(--space_4);
  --space_gutter: var(--space_2);
  --space_section: var(--space_8);
  --space_grid-gap: var(--space_4);
  --space_flex-gap: var(--space_2);
  --space_layout-gap: var(--space_8);

  /* Layout Widths */
  --width_content: 50rem;
  --width_sidebar: 20rem;
  --width_wide: calc(
    var(--width_content) +
    var(--width_sidebar) +
    var(--space_layout-gap)
  );

  /* Colors */
  --color_text--default: #374151;       /* Tailwind Gray 700 */
  --color_text--subtle: #6b7280;        /* Tailwind Gray 500 */
  --color_text--link: #2563eb;          /* Tailwind Blue 600 */
  --color_text--link-alt: #1d4ed8;      /* Tailwind Blue 700 */
  --color_text--accent: var(--color_text--link);
  --color_background--surface: #f9fafb; /* Tailwind Gray 50 */
  --color_background--element: #f3f4f6; /* Tailwind Gray 100 */
  --color_background--chip: #e5e7eb;    /* Tailwind Gray 200 */
  --color_accent: #3b82f6;              /* Tailwind Blue 500 */
  --color_console--background: #111827; /* Tailwind Gray 900 */
  --color_console--text: #f9fafb;       /* Tailwind Gray 50 */
  --color_console--subtle: #6b7280;     /* Tailwind Gray 500 */
  --color_console--error: #ef4444;      /* Tailwind Red 500 */
  --color_console--accent: #60a5fa;     /* Tailwind Blue 400 */

  /* Font Families */
  --font_body: 'Recursive', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font_head: inherit;
  --font_mono: 'Recursive', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* Font Weights */
  --font_weight--thin: 100;
  --font_weight--extralight: 200;
  --font_weight--light: 300;
  --font_weight--normal: 400;
  --font_weight--medium: 500;
  --font_weight--semibold: 600;
  --font_weight--bold: 700;
  --font_weight--extrabold: 800;
  --font_weight--black: 900;

  /* Font Sizes & Line Heights */
  /* Based on a modular scale 1.125 by 1.2 */
  /* Exact values have been refined to be a whole pixel value */
  --font_size--small: 0.9375rem;    /* 15px */
  --font_size--normal: 1.125rem;    /* 18px */
  --font_size--medium: 1.375rem;    /* 22px */
  --font_size--large: 1.625rem;     /* 26px */
  --font_size--xlarge: 1.9375rem;   /* 31px */
  --font_size--xxlarge: 2.3125rem;  /* 37px */
  --font_size--xxxlarge: 2.8125rem; /* 45px */

  /* Line heights */
  --font_height--small: 1.2;
  --font_height--normal: 1.8;
  --font_height--medium: 1.5;
  --font_height--large: 1.3;
  --font_height--xlarge: 1.2;
  --font_height--xxlarge: 1.1;
  --font_height--xxxlarge: 1;
}

del {
  --color_background--element: #fce7f3; /* Tailwind Pink 100 */
}

ins {
  --color_background--element: #d1fae5; /* Tailwind Emerald 100 */
}

.callout--tip {
  --color_accent: #10b981; /* Tailwind Emerald 500 */
}

.callout--caution {
  --color_accent: #f59e0b; /* Tailwind Amber 500 */
}

.callout--warning {
  /* --color_text--accent: #C72D7A; */
  --color_accent: #ec4899; /* Tailwind Pink 500 */
}

/* !SECTION Tokens */
/* =================================================================
/* SECTION Container Width Fix
================================================================= */

#app > .container--wide,
#app > .container {
  width: 100%;
}

/* !SECTION Container Width Fix */
/* =================================================================
/* SECTION Link Styles
================================================================= */

a:not([class])[target="_blank"]::after,
a:not([class])[data-link-type="external"] {
  content: ' ↗︎';
  padding-inline-start: 0.1em;
}

/* !SECTION Link Styles */
/* =================================================================
/* SECTION Rules
================================================================= */

hr {
  border: 0;
  border-block-end: 1px solid var(--color_background--chip);
}

/* !SECTION Rules */
/* =================================================================
/* SECTION Top Navigation
================================================================= */

#app > header nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space_flow);
  padding: var(--space_2) 0;
}

@media (min-width: 55rem) {
  #app > header nav ul {
    justify-content: flex-end;
  }
}

/* !SECTION Top Navigation */
/* =================================================================
/* SECTION Footer
================================================================= */

#app > footer {
  padding-block-start: var(--space_2);
  padding-block-end: var(--space_2);
}

#app > footer img {
  height: 1em;
  width: 1em;
  margin: 0;
  display: inline-block;
  position: relative;
  top: 0.15em;
}

/* !SECTION Footer */
/* =================================================================
/* SECTION Content
================================================================= */

#app > :nth-child(2) {
  place-content: center;
}

/* !SECTION Content */
/* =================================================================
/* SECTION Sidebar
================================================================= */

.page__sidebar ul.tag-list {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}

.page__sidebar ul.tag-list li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
}

.page__sidebar ul.tag-list a {
  padding-right: 0.33em;
  background: var(--color_background--surface);
}

.page__sidebar ul.tag-list span {
  float: right;
  padding-left: 0.33em;
  background: var(--color_background--surface);
}

.page__sidebar .year-list li {
  display: inline
}

.page__sidebar .year-list li:not(:last-child)::after {
  content: " ·"
}

/* !SECTION Sidebar */
/* =================================================================
/* SECTION Homepage
================================================================= */

.home-sidebar {
  display: none;
}

.home-sidebar + .page__content {
  grid-column-start: sidebar;
  grid-column-end: content;
}

@media (min-width: 80rem) {
  .home-sidebar {
    display: flex;
    align-items: flex-end;
  }

  .home-sidebar + .page__content {
    grid-column-start: content;
  }
}

/* !SECTION Homepage */
/* =================================================================
/* SECTION Components
================================================================= */
/* ==============================
/* SECTION Metadata
============================== */

.metadata {
  color: var(--color_text--subtle);
}

.metadata a {
  color: inherit;
  text-decoration: none;
}

.metadata a:hover {
  text-decoration: underline;
}

/* !SECTION Metadata */
/* ==============================
/* SECTION Anchor Links
============================== */

.direct-link {
  display: inline-block;
  position: absolute;
  left: -1em;
  padding-right: 0.5em;
  color: inherit;
  text-decoration: none;
  display: none;
  font-size: 0.8em;
  top: 0.1em;
}

h2[id],
h3[id] {
  position: relative;
}

h2[id]:hover .direct-link,
h3[id]:hover .direct-link {
  display: inline;
}

/* !SECTION Anchor Links */
/* ==============================
/* SECTION Callouts
============================== */

.callout,
.callout--info,
.callout--tip,
.callout--caution,
.callout--warning {
  padding: var(--space_2);
  border-left: 5px solid var(--color_text--subtle);
}

.callout--info,
.callout--tip,
.callout--caution,
.callout--warning {
  border-left: 5px solid var(--color_accent);
}

/* !SECTION Callouts */
/* !SECTION Components */
/* =================================================================
/* SECTION Projects & Sketchbook
================================================================= */

.project-list img,
.sketch-list img {
  transition: transform .2s;
  border-radius: 0.5rem;
}

.project-list a:hover img,
.sketch-list a:hover img {
  transform: scale(1.05);
}

.sketch-list img {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
  object-fit: cover;
  width: 100%;
}

/* !SECTION Projects */
/* =================================================================
/* SECTION Console
================================================================= */

#console {
  display: none;
}

#console[aria-expanded="true"] {
  --color_text--link: var(--color_console--accent);
  --color_text--link-alt: var(--color_console--accent);
  font-family: var(--font_mono);
  font-size: var(--font_size--small);
  line-height: var(--font_height--small);
  color: var(--color_console--text);
  background: var(--color_console--background);
  padding: var(--space_2);

  position: fixed;
  width: 100%;
  bottom: 0;
  min-height: 10rem;
  max-height: 25vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: scroll;
}

#console input {
  font-size: inherit;
  line-height: inherit;
  min-height: 0;
  height: auto;
  color: inherit;
  display: inline-block;
  padding: 0;
  border: none;
}

#console input:focus {
  outline: none;
}

#console form {
  margin-block-start: 1em;
}

#console code {
  background: none;
  padding: 0;
  border: 1px solid var(--color_text--default);
  border-radius: 0.25rem;
}

#consoleHistory {
  overflow-y: scroll;
}

.console_history-line--command {
  margin-block-start: 1em;
  display: flex;
}

.console_history_content {
  flex-grow: 1;
}

.console_history_timestamp {
  color: var(--color_console--subtle);
}

.console_history-line--response,
.console_history-line--error {
  padding-inline-start: 1rem;
}

.console_history-line--error {
  color: var(--color_console--error);
}

/* !SECTION Console */