@charset "UTF-8";
/* Box sizing rules */
@import url("https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=League+Spartan:wght@100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
section:target {
  scroll-margin-block: 5ex;
}

/* default color component properties */
:root {
  --color-greyscale-100: #F3F5F7;
  --color-greyscale-200: #D9DBDE;
  --color-greyscale-300: #BFC2C4;
  --color-greyscale-400: #A5A8AB;
  --color-greyscale-500: #8C8E91;
  --color-greyscale-600: #6f7073;
  --color-greyscale-700: #585B5E;
  --color-greyscale-800: #3E4145;
  --color-greyscale-900: #24272B;
  --white: #FFFFFF;
  --brand: #387DA7;
  --page-bg: var(--white);
  --masthead-bg: rgb(255 255 255 / 75%);
  --quote-bg: rgb(0 0 0 / 5%);
  --tooltip-bg: rgb(0 0 0);
  --dialog-bg: var(--page-bg);
  --dialog-header: rgb(255 255 255 / 85%);
  --text-body-primary: var(--color-greyscale-900);
  --text-body-secondary: var(--color-greyscale-700);
  --input-border: var(--color-greyscale-200);
  --divider: var(--color-greyscale-200);
}

/* default color component properties for dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #2999B4;
    --page-bg: var(--color-greyscale-900);
    --quote-bg: rgb(0 0 0 / 15%);
    --masthead-bg: rgb(36 39 43 / 90%);
    --dialog-bg: rgb(45 48 52);
    --dialog-header: rgb(45 48 52 / 95%);
    --text-body-primary: var(--color-greyscale-100);
    --text-body-secondary: var(--color-greyscale-300);
    --divider: color-mix(in lch, var(--color-greyscale-700), black 25%);
    --input-border: var(--color-greyscale-700);
  }
  /* component properties if dark theme is default and user toggles to light theme */
  .toggle-theme {
    --brand: #387DA7;
    --page-bg: var(--white);
    --masthead-bg: rgb(255 255 255 / 75%);
    --quote-bg: rgb( 0 0 0 / 5%);
    --dialog-bg: var(--page-bg);
    --dialog-header: rgb(255 255 255 / 85%);
    --text-body-primary: var(--color-greyscale-900);
    --text-body-secondary: var(--color-greyscale-700);
    --input-border: var(--color-greyscale-200);
    --divider: var(--color-greyscale-200);
  }
} /* End 'prefers-color-scheme: dark' Media Query */
/* component properties for dark theme when a user switches from the light theme */
@media not (prefers-color-scheme: dark) {
  .toggle-theme {
    --brand: #2999B4;
    --page-bg: var(--color-greyscale-900);
    --quote-bg: rgb(0 0 0 / 10%);
    --masthead-bg: rgb(36 39 43 / 90%);
    --dialog-bg: rgb(45 48 52);
    --dialog-header: rgb(45 48 52 / 95%);
    --text-body-primary: var(--color-greyscale-100);
    --text-body-secondary: var(--color-greyscale-300);
    --divider: color-mix(in lch, var(--color-greyscale-700), black 25%);
    --input-border: var(--color-greyscale-700);
  }
  .toggle-theme .pro-bono img:first-of-type {
    display: none;
  }
  .toggle-theme .pro-bono img:last-of-type {
    display: block;
  }
} /* End 'prefers-color-scheme: light' Media Query */
:root {
  --font-hero: "League Spartan", sans-serif;
  --font-title: "Mulish", sans-serif;
  --font-body: "Lato", sans-serif;
  --font-icon: "Font Awesome 6 Pro";
  --font-xs: .75rem;
  --font-sm: .875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 2rem;
  --font-xxl: 2.5rem;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi: 600;
  --font-bold: 700;
  --font-xbold: 800;
}

:root {
  --breakpoint-lg: 60rem;
  --breakpoint-md: 40rem;
  --breakpoint-sm: 27rem;
}

html,
body {
  font-family: var(--font-body);
  background: var(--page-bg);
  overflow-x: hidden;
}

html {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-body-primary);
  min-height: 100.1vh;
  scroll-behavior: smooth;
  text-wrap: pretty;
  scroll-padding-top: 4rem;
  scrollbar-width: none;
}
html.noscroll {
  overflow: hidden;
}

::selection {
  background: var(--brand);
  color: white;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
}

h5 {
  margin-block-end: 0.75rem;
  font-size: 1rem;
}

main {
  display: grid;
  margin-inline-start: 20rem;
  padding-block-start: 4rem;
  padding-inline: 1.5rem;
  gap: 8rem;
}

section,
article {
  display: grid;
  justify-items: center;
  width: 100%;
  margin-inline: auto;
}

.section__heading {
  margin: 0 auto 2rem;
  max-width: 50rem;
  width: 100%;
}
.section__heading h2 {
  font: 700 2.5rem/1.25 var(--font-hero);
  color: var(--text-body-primary);
}
.section__heading h3 {
  font: 800 1.25rem/1.375 var(--font-title);
  margin-block-end: 0.5rem;
}
.section__heading p {
  font: 300 1.125rem/1.5 var(--font-body);
  color: var(--text-body-secondary);
  margin-block-start: 1.25em;
}
.section__heading p:first-of-type {
  margin-block-start: 0;
}

.section--primary {
  max-width: 70rem;
  margin-inline: auto;
}

.section--secondary {
  margin-block-start: 4rem;
  max-width: 70rem;
}

.section__body {
  display: grid;
  width: 100%;
  margin-inline: auto;
}
.section__body.sm {
  max-width: 50rem;
}
.section__body.md {
  max-width: 60rem;
}
.section__body.lg {
  max-width: 70rem;
}

.rewind {
  display: grid;
  place-items: center;
  height: 100dvh;
}
.rewind a {
  position: relative;
  color: var(--text-body-primary);
  text-decoration: none;
  font-weight: 400;
}
.rewind a::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  border-bottom: 2px solid var(--divider);
  transition: 200ms all;
}
.rewind a:hover {
  text-decoration: none;
  color: var(--brand);
}
.rewind a:hover::after {
  inset: 100% 100% auto 0;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  -webkit-backdrop-filter: blur(8px);
  -moz-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(15, 15, 15, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: 400ms all;
  overflow: none;
}
aside.active ~ .overlay, article.is-open ~ .overlay {
  opacity: 1;
  visibility: visible;
}

.display--mobile {
  display: none;
}

.nowrap {
  white-space: nowrap;
}

html:has(dialog[open]) {
  overflow-y: hidden;
}

@media screen and (max-width: 960px) {
  html {
    scroll-padding-block-start: 6rem;
  }
  main {
    margin: 0;
    padding-block-start: 6rem;
  }
}
@media screen and (max-width: 640px) {
  .section__heading h2 {
    font-size: 2rem;
  }
  .section__heading p {
    font-size: 1rem;
  }
  main {
    gap: 3rem;
  }
}
@media screen and (max-width: 430px) {
  .display--mobile {
    display: block;
  }
  .section--secondary {
    margin-block-start: 2rem;
  }
  .section__heading h3 {
    font-size: 1.125rem;
  }
  h5 {
    font-size: 0.875rem;
  }
}
aside {
  --nav-primary-color: var(--text-body-primary);
  --nav-secondary-color: var(--text-body-secondary);
  --nav-border: var(--divider);
  --nav-primary-font: 800 1rem/1.5 var(--font-title);
  --nav-secondary-font: 300 .875rem/1.375 var(--font-title);
  --nav-legal-font: 300 0.8125rem/1.375 var(--font-body);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: end;
  gap: 1rem;
  width: 20rem;
  padding: 12rem 3rem 4rem;
  background: white;
  text-align: right;
  background: var(--page-bg);
  transition: 400ms translate;
}
aside::after {
  content: "";
  position: absolute;
  inset: 4rem 0 4rem auto;
  border-right: 1px solid var(--divider);
}
aside .mark {
  width: 4rem;
  fill: var(--brand);
}
aside nav {
  display: flex;
  flex-flow: column;
  align-items: end;
}
aside nav a {
  text-decoration: none;
}

h1 {
  color: var(--text-body-primary);
  font: 700 2rem/1.125 var(--font-hero);
}
h1 a {
  color: var(--text-body-primary);
  text-decoration: none;
}
h1 a:focus-visible {
  color: var(--brand);
  outline: 0;
}
h1 small {
  display: block;
  color: var(--text-body-secondary);
  font: 400 0.875rem/1 var(--font-body);
}

.nav--primary {
  gap: 1rem;
  margin-block: 1rem;
}
.nav--primary .primary__item {
  position: relative;
  text-decoration: none;
  color: var(--nav-primary-color);
  font: var(--nav-primary-font);
  text-align: right;
  width: fit-content;
}
.nav--primary .primary__item::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 100%;
  border-bottom: 2px solid var(--brand);
  transition: 200ms inset;
}
.nav--primary .primary__item:hover, .nav--primary .primary__item:focus-visible {
  outline: none;
}
.nav--primary .primary__item:hover::after, .nav--primary .primary__item:focus-visible::after {
  inset: 100% 0 auto;
}

.nav--work {
  gap: 0.5rem;
  border-right: 1px solid var(--divider);
  margin-block-start: 1rem;
}
.nav--work .work__item {
  padding-inline-end: 1rem;
  color: var(--text-body-secondary);
  font: var(--nav-secondary-font);
  border-right: 0 solid var(--brand);
  transition: 100ms border-width;
}
.nav--work .work__item:hover, .nav--work .work__item:focus-visible {
  border-width: 0 0.25rem 0 0;
  color: var(--brand);
  outline: none;
}

.legal {
  margin-block-start: auto;
  font: var(--nav-legal-font);
  color: var(--text-body-secondary);
}
.legal p:not(:first-of-type) {
  margin-block-start: 1rem;
}
.legal p:not(:first-of-type) i {
  color: var(--divider);
  padding-inline: 0.75em;
}
.legal p:not(:first-of-type) i:hover, .legal p:not(:first-of-type) i:focus {
  color: lightpink;
}

.theme-toggle {
  position: relative;
  width: 1.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--brand);
  transition: 400ms all;
  margin-block-end: 1rem;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  border-radius: 50% 0 0 50%;
  background: var(--brand);
}
.toggle-theme .theme-toggle {
  rotate: 180deg;
}

@media screen and (max-width: 960px) {
  html {
    padding: 0;
  }
  aside {
    z-index: 10;
    translate: calc(-100% - 1rem) 0;
    box-shadow: 8px 0 16px -8px rgba(0, 0, 0, 0.6);
    padding-block: 3rem;
  }
  aside::after {
    display: none;
  }
  aside.active {
    translate: 0;
  }
  aside .mark {
    width: 2.5rem;
  }
  aside .nav--primary {
    margin-block: 0;
  }
  aside .primary__item {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 430px) {
  .nav--secondary {
    display: none;
  }
}
figure {
  display: grid;
  gap: 0.5rem;
}
figure img {
  border-radius: 0.5rem;
}
figure figcaption {
  font: 300 0.875rem/1.6 var(--font-body);
  color: var(--text-body-secondary);
  max-width: 50rem;
  width: 100%;
  margin-inline: auto;
}

.paragraph--ammended {
  max-width: 50rem;
  font: 300 1.125rem/1.5 var(--font-body);
  color: var(--text-body-secondary);
  padding-block-start: 2rem;
}

@media screen and (max-width: 430px) {
  main {
    padding-block-start: 0;
  }
  .about > .section__heading {
    position: relative;
    z-index: 2;
    width: calc(100vw - 1.5rem);
    margin: -20svh auto 0 -1.5rem;
    padding-block: 3rem 0;
    padding-inline: 1.5rem;
    -webkit-backdrop-filter: blur(0.5rem);
    -moz-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    background: var(--page-bg);
    box-shadow: 6px -8px 8px -8px rgba(0, 0, 0, 0.1);
  }
  .about figure {
    position: relative;
    order: -1;
    isolation: isolate;
    margin-inline: -1.5rem;
  }
  .about figure::before, .about figure::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .about figure::before {
    background: #003755;
    mix-blend-mode: plus-lighter;
    opacity: 1;
    z-index: 2;
  }
  .about figure::after {
    background: linear-gradient(to top, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0.25) 125%);
    opacity: 0.7;
  }
  .about figure img {
    border-radius: 0;
    height: 90svh;
    max-height: 800px;
    object-fit: cover;
  }
  .about figure figcaption {
    position: absolute;
    inset: auto 0 calc(20svh + 1rem);
    width: 100%;
    padding-inline: 1.5rem;
    text-wrap: pretty;
    z-index: 2;
    color: var(--white);
    font-weight: 400;
  }
}
.projects {
  display: grid;
  gap: 2rem;
}

.work__item:hover {
  cursor: pointer;
}

.project__container {
  position: relative;
  display: grid;
  max-width: 50rem;
  margin-block-end: 2rem;
  isolation: isolate;
}
.project__container .hero {
  border-radius: 0.5rem;
  min-height: 28rem;
  object-fit: cover;
}
.project__container .mobile {
  position: absolute;
  inset: auto auto -2rem 1rem;
  max-width: 14rem;
}
.project__container header {
  position: absolute;
  inset: auto 1.5rem 1.5rem auto;
  z-index: 2;
  display: grid;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  width: 26rem;
  padding-block: 2rem;
  padding-inline: 2rem;
  -webkit-backdrop-filter: blur(1rem);
  -moz-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  max-width: calc(100vw - 6rem);
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.1);
}
.project__container header h3 {
  font: 800 1.25rem/1.125 var(--font-title);
  color: var(--color-greyscale-900);
  margin-block-end: 0.5em;
}
.project__container header p {
  font: 300 1rem/1.5 var(--font-body);
  color: var(--color-greyscale-900);
  margin-block-end: 1em;
}
.project__container header button {
  background: var(--brand);
  width: auto;
  padding-inline: 3rem;
  border-radius: 0.25rem;
  color: var(--white);
  height: 3rem;
}
.project__container header button:hover, .project__container header button:focus {
  background: color-mix(in lch, var(--brand), black 20%);
}

.project--totalexpert .mobile-group {
  position: absolute;
  inset: auto 1rem -2rem auto;
  display: flex;
  align-items: end;
  isolation: isolate;
}
.project--totalexpert .mobile-group .mobile {
  position: relative;
  inset: auto;
  z-index: 1;
  max-width: 14rem;
  translate: 0;
}
.project--totalexpert .mobile-group .mobile.small {
  position: absolute;
  z-index: -1;
  inset: 50% 80% auto auto;
  translate: 0 -50%;
  max-width: 13rem;
}
.project--totalexpert header {
  inset: auto auto 1.5rem 1.5rem;
}

@media screen and (max-width: 430px) {
  .project__container .hero {
    display: none;
  }
  .project__container > .mobile,
  .project__container > .mobile-group {
    position: relative;
    inset: auto;
  }
  .project__container .mobile {
    max-width: 16rem;
    width: 100%;
  }
  .project__container header {
    position: static;
    padding: 0;
    background: transparent;
    width: 100%;
    margin-block-start: 2rem;
    max-width: none;
    box-shadow: none;
  }
  .project__container header h3 {
    color: var(--text-body-primary);
  }
  .project__container header p {
    color: var(--text-body-secondary);
  }
  .project--totalexpert .mobile-group {
    translate: 1.5rem 0;
  }
  .project--totalexpert .mobile-group .mobile {
    max-width: 16rem;
  }
  .project--totalexpert .mobile-group .mobile.small {
    right: 4rem;
  }
}
.modal {
  position: fixed;
  inset: 2rem;
  max-width: 90rem;
  z-index: 6;
  width: auto;
  justify-items: center;
  background: var(--dialog-bg);
  overflow-y: scroll;
  overflow-x: hidden;
  border: none;
  box-shadow: 0 8px 32px -16px rgba(0, 0, 0, 0.8);
  color: var(--text-body-primary);
  border-radius: 1rem;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: 400ms all;
  scrollbar-width: none;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  background: var(--dialog-header);
  -webkit-backdrop-filter: blur(0.5rem);
  -moz-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  padding-inline: 1.5rem;
}
.modal__header h2 {
  font: 700 2.5rem/1 var(--font-hero);
  color: var(--text-body-primary);
}
.modal__header p {
  font: 400 1.125rem/1.5 var(--font-body);
  color: var(--text-body-secondary);
}
.modal__header a {
  color: var(--brand);
  text-underline-offset: 0.125em;
}
.modal__header a:hover {
  text-decoration: none;
}

.modal__title {
  position: relative;
  display: grid;
  padding-block: 4rem 1rem;
  border-bottom: 1px solid var(--divider);
  max-width: 50rem;
  margin-inline: auto;
}

.modal__close {
  position: absolute;
  inset: auto 0 1.25rem auto;
  color: var(--text-body-secondary);
}
.modal__close:focus-visible {
  outline: none;
  color: var(--text-body-primary);
}

.project {
  display: grid;
  place-content: center;
  gap: 6rem;
  margin-inline: auto;
  padding-block: 2rem 8rem;
  padding-inline: 1.5rem;
}
.project p {
  font: 300 1rem/1.5 var(--font-body);
  text-align: left;
  width: 100%;
  max-width: 50rem;
  margin-block-end: 1rem;
  margin-inline: auto;
  color: var(--text-body-secondary);
}
.project strong {
  color: var(--text-body-primary);
}
.project h4 {
  font-size: 1rem;
  margin-block-end: 0.5em;
}

.project__link {
  color: var(--brand);
  font-weight: 400;
}
.project__link:hover {
  text-decoration: none;
}

.project__button {
  display: inline-flex;
  align-items: center;
  background: var(--brand);
  width: auto;
  padding-inline: 3rem;
  border-radius: 0.25rem;
  color: var(--white);
  height: 3rem;
  text-decoration: none;
}
.project__button:hover, .project__button:focus {
  background: color-mix(in lch, var(--brand), black 20%);
}
.project__button + small {
  display: block;
  margin-block-start: 1em;
}

.project__group {
  display: grid;
  gap: 2rem;
}
.project__group header,
.project__group p {
  width: 100%;
  max-width: 50rem;
}
.project__group h3 {
  font: 800 1.25rem/1.25 var(--font-title);
  margin-block-end: 1em;
}

.color-scheme {
  display: flex;
  justify-content: center;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 50rem;
}
.color-scheme li {
  position: relative;
  height: 0.5rem;
  flex: 1 0;
  cursor: pointer;
}
.color-scheme li:first-of-type {
  border-radius: 0.5rem 0 0 0.5rem;
}
.color-scheme li:last-of-type {
  border-radius: 0 0.5rem 0.5rem 0;
}
.color-scheme li small {
  position: absolute;
  inset: auto auto 100% 50%;
  translate: -50% 0;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  background: var(--tooltip-bg);
  color: var(--white);
  border-radius: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transition: 200ms all;
}
.color-scheme li small::after {
  content: "";
  position: absolute;
  inset: calc(100% - 0.5rem) auto auto 50%;
  translate: -50% 0;
  rotate: 45deg;
  width: 0.75rem;
  aspect-ratio: 1;
  background: var(--tooltip-bg);
}
.color-scheme li:hover small, .color-scheme li:focus small {
  opacity: 1;
  visibility: visible;
  translate: -50% -0.25rem;
}

.photo-credit {
  color: var(--text-body-secondary);
}
.photo-credit a {
  color: var(--text-body-primary);
}
.photo-credit a:hover {
  text-decoration: none;
}

.border {
  border: 1px solid var(--divider);
}

.shadow--generic {
  box-shadow: 0 0.5rem 1rem -1rem rgba(0, 0, 0, 0.5);
}

.shadow--mobile {
  box-shadow: 0 1.75rem 1rem -1.5rem rgba(0, 0, 0, 0.25);
  border-radius: 0 0 1rem 1rem;
  min-width: 14rem;
}

.shadow--none {
  box-shadow: none;
}

.grayscale {
  filter: grayscale(100%) invert(1);
  opacity: 0.15;
}

.br-md {
  border-radius: 0.5rem;
}

.grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}
.grid img {
  width: 100%;
}

.grid--2 {
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
}
.grid--2 img {
  object-fit: cover;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.occupy--1 {
  grid-column: span 1;
}

.occupy--2 {
  grid-column: span 2;
}

.occupy--3 {
  grid-column: span 3;
}

.flex--3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  isolation: isolate;
}
.flex--3 img {
  min-widtH: 14rem;
}

.reduce {
  scale: 0.95;
}

.width--sm {
  max-width: 50rem;
  margin-inline: auto;
  width: 100%;
}

.width--md {
  max-width: 60rem;
  margin-inline: auto;
  width: 100%;
}

.background--quote {
  background: var(--quote-bg);
}

.figure--responsive {
  position: relative;
}
.figure--responsive .mobile {
  position: absolute;
  inset: auto 5rem -2rem auto;
  box-shadow: 0 1.5rem 1rem -1.5rem rgba(0, 0, 0, 0.45);
  border-radius: 0 0 1rem 1rem;
  width: clamp(14rem, 25%, 16rem);
}
.figure--responsive figcaption {
  padding-inline-end: 18rem;
}

.flex--2 {
  display: flex;
  gap: 1rem;
}

.overflow--mobile {
  position: relative;
}

.overlap {
  position: absolute;
  inset: 4rem 0 auto;
}

.has-overlap {
  margin-block-end: 4rem;
}
.has-overlap > figure:first-child img {
  min-height: 34rem;
}

.hero {
  position: relative;
}

.radius--sm {
  border-radius: 0.25rem;
}

.radius--md {
  border-radius: 0.5rem;
}

.radius--lg {
  border-radius: 1rem;
}

.pblock--sm {
  padding-block: 0.5rem;
}

.pblock--md {
  padding-block: 1rem;
}

.pblock--lg {
  padding-block: 2rem;
}

.pblock--xl {
  padding-block: 4rem;
}

.align--center {
  justify-content: center;
  text-align: center;
}

[class*=ratio--] {
  object-fit: cover;
}

.ratio--4-3 {
  aspect-ratio: 4/3;
}

.ratio--16-9 {
  aspect-ratio: 16/9;
}

.ratio--4-6 {
  aspect-ratio: 4/6;
}

.ratio--5-7 {
  aspect-ratio: 5/7;
}

.ratio--9-16 {
  aspect-ratio: 9/16;
}

.ratio--vgolden {
  aspect-ratio: 1/1.618;
}

.ratio--hgolden {
  aspect-ratio: 1.618/1;
}

@media screen and (max-width: 960px) {
  .flex--3 {
    gap: 0.5rem;
  }
  .flex--3 img {
    width: 100%;
    min-width: 0;
    scale: 1;
  }
}
@media screen and (max-width: 640px) {
  .modal {
    inset: 0.5rem;
    margin: 0;
  }
  .modal .project {
    padding-inline: 1rem;
  }
  .modal p {
    font-size: 1rem;
  }
  .modal__header {
    padding-inline: 0;
  }
  .modal__title {
    padding-block: 1.25rem;
    padding-inline: 1rem;
    gap: 0;
  }
  .modal__title h2 {
    font-size: 1.5rem;
  }
  .modal__title p,
  .modal__title a {
    font-size: 0.875rem;
  }
  .modal__close {
    inset: 50% 1.5rem auto auto;
    font-size: 0.75rem;
    translate: 0 -50%;
  }
  .reduce {
    order: 2;
  }
  .figure--responsive {
    display: grid;
    justify-items: center;
    padding-block: 2rem;
    background: var(--quote-bg);
    width: 100%;
    border-radius: 0.5rem;
  }
  .figure--responsive .desktop {
    display: none;
  }
  .figure--responsive .mobile {
    position: static;
    width: 16rem;
  }
  .expand {
    width: calc(100% + 2rem);
    margin-inline-start: -1rem;
  }
  .expand img {
    border: none;
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    object-fit: cover;
  }
}
@media screen and (max-width: 430px) {
  .project {
    padding-block-end: 1rem;
  }
  .project__button {
    width: 100%;
    justify-content: center;
  }
  .project__button + small {
    width: 100%;
  }
  .overflow--mobile {
    --offset: calc(50vw - 8.5rem);
    position: relative;
    width: calc(100% + 2rem);
    margin-inline-start: -1rem;
    overflow-x: scroll;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline-start: var(--offset);
    padding-inline-start: var(--offset);
    padding-block-end: 1rem;
  }
  .overflow--mobile::-webkit-scrollbar {
    visibility: hidden;
    height: 0.25rem;
  }
  .overflow--mobile::-webkit-scrollbar-track {
    margin-inline-end: 1rem;
  }
  .overflow--mobile::-webkit-scrollbar-thumb {
    background: var(--divider);
    border-radius: 2px;
  }
  .overflow--mobile figure {
    display: flex;
    flex-flow: row nowrap;
    width: fit-content;
    padding-inline: var(--offset);
    gap: 1rem;
  }
  .overflow--mobile img {
    scroll-snap-align: start;
    min-width: 16rem;
  }
}
@media screen and (max-width: 430px) and (not (pointer: coarse)) {
  .overflow--mobile:-webkit-scrollbar {
    visibility: visible;
  }
}
@media screen and (max-width: 430px) {
  .background--quote {
    border-radius: 0;
  }
}
@media screen and (max-width: 430px) {
  .grid--2,
  .grid--3 {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5rem 0;
  }
  .grid--2 > *,
  .grid--3 > * {
    width: 100%;
  }
  .grid--2 .gap--lg,
  .grid--3 .gap--lg {
    gap: 0.5rem;
  }
}
.masthead {
  position: fixed;
  width: 319px;
  padding-block-start: 4rem;
  padding-inline: 3rem calc(3rem - 1px);
  display: grid;
  z-index: 5;
  -webkit-backdrop-filter: blur(8px);
  -moz-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: var(--masthead-bg);
}
.masthead .btn--icon {
  color: var(--text-body-primary);
  display: none;
  height: 100%;
  aspect-ratio: 1;
}
.masthead a {
  color: var(--text-body-primary);
  text-decoration-color: var(--color-greyscale-400);
  text-underline-offset: 0.25rem;
}
.masthead .brand {
  display: grid;
  justify-items: end;
  gap: 1rem;
  text-align: right;
}
.masthead svg {
  width: 3rem;
  fill: var(--brand);
}
.masthead h1 {
  font-size: 1.75rem;
}
.masthead h1 small {
  color: var(--text-body-secondary);
}

@media screen and (max-width: 960px) {
  .masthead {
    width: 100%;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    padding-block: 0;
    padding-inline: 1.5rem 0;
  }
  .masthead h1 {
    line-height: 1;
  }
  .masthead .btn--icon {
    display: block;
  }
  .masthead .brand {
    display: flex;
    align-items: center;
    text-align: left;
  }
  .masthead svg {
    position: relative;
    top: 0.125rem;
    width: 2.25rem;
  }
}
.list--proficiencies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.5rem;
  padding: 0;
}

.proficiency__item {
  display: flex;
  flex-flow: column nowrap;
  padding: 4.5rem 2rem;
  gap: 1rem;
  border: 1px solid var(--divider);
  border-radius: 0.25rem;
  box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1);
}
.proficiency__item i {
  margin-block-end: 1rem;
  color: var(--brand);
  height: 4rem;
  aspect-ratio: 1;
  justify-self: center;
}
.proficiency__item h4 {
  font: 800 1.25rem/1.375 var(--font-title);
}
.proficiency__item p {
  font: 300 1rem/1.6 var(--font-body);
  text-wrap: pretty;
  color: var(--text-body-secondary);
}

@media screen and (max-width: 640px) {
  .proficiencies {
    position: relative;
    width: calc(100% + 3rem);
    margin-inline-start: -1.5rem;
    overflow-x: scroll;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline-start: 1.5rem;
  }
  .proficiencies::-webkit-scrollbar {
    display: none;
  }
  .arrow {
    position: absolute;
    animation: arrow linear;
    animation-timeline: scroll();
  }
  .list--proficiencies {
    display: flex;
    flex-flow: row nowrap;
    padding-inline-start: 1.5rem;
    margin-inline-end: 1.5rem;
  }
  .proficiency__item {
    width: calc(100vw - 3rem);
    max-width: 358px;
    scroll-snap-align: start;
  }
}
@keyframes arrow {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
.tldr {
  gap: 1.5rem;
}

.tldr__group {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

.list--tldr {
  position: relative;
  left: -1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  list-style: none;
}
.list--tldr::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 1rem;
  background: var(--page-bg);
}

.tldr__item {
  --bullets: #C3C3C3;
  font: 300 1rem/1.375 var(--font-body);
  color: var(--text-body-secondary);
}
.tldr__item::before {
  content: "•";
  position: relative;
  top: -1px;
  display: inline-block;
  width: 1.25rem;
  text-align: center;
  font-size: 75%;
  color: var(--brand);
}

.collaborations .section__body {
  gap: 2rem;
}

.checklist li {
  position: relative;
  display: flex;
  margin-block-end: 0.5rem;
}
.checklist li::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--input-border);
  border-radius: 2px;
  margin-inline-end: 0.5rem;
  font-family: var(--font-icon);
  color: limegreen;
  font-size: 80%;
  text-align: center;
}
.checklist li.your-company {
  align-items: center;
}
.checklist li.your-company button {
  color: var(--text-body-primary);
  text-decoration: underline;
  text-decoration-color: var(--divider);
  text-underline-offset: 0.25rem;
  line-height: 1;
  padding: 0;
}
.checklist li.your-company button:hover {
  text-decoration: none;
}
.checklist li.your-company button:focus-visible {
  outline: none;
  color: var(--brand);
}
.checklist li.your-company::after {
  content: "(ironic, I know)";
  padding-inline-start: 0.5em;
  font-size: 0.875em;
  color: var(--text-body-secondary);
}
.checklist a {
  position: relative;
  top: -0.2em;
  color: var(--text-body-primary);
  text-underline-offset: 0.25em;
  text-decoration-color: var(--input-border);
}
.checklist a:hover {
  text-decoration: none;
}
.checklist a:focus-visible {
  color: var(--brand);
  text-decoration-color: var(--brand);
  outline: none;
}
.checklist sup {
  font-style: italic;
  color: var(--text-body-secondary);
  font-size: 60%;
  padding-inline-start: 0.25em;
}

.checklist__citation {
  display: grid;
  gap: 0.25em;
  font-size: 0.75rem;
  margin-block-start: 1.5rem;
  color: var(--text-body-secondary);
}

.columns--2 {
  columns: 2 240px;
}

.completed li::before {
  content: "\f00c";
}

@media screen and (max-width: 640px) {
  .columns--2 {
    columns: 1;
  }
}
.contact__form {
  display: flex;
  flex-flow: row wrap;
  gap: 2rem 1rem;
  margin-block-end: 2rem;
}
.contact__form .full {
  flex-basis: 100%;
}

.form__item {
  position: relative;
  flex-grow: 1;
}
.form__item label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.3em;
  inset: -0.5rem auto auto 0.5rem;
  height: 1rem;
  padding-inline: 0.75rem;
  font: 500 0.875rem/1 var(--font-body);
  background: var(--page-bg);
  border-radius: 1rem;
  color: var(--text-body-secondary);
}
.form__item label sup {
  color: tomato;
}

input:not([type=radio]),
textarea {
  height: 3rem;
  box-shadow: inset 0 0 0 1px var(--divider);
  border-radius: 4px;
  width: 100%;
  padding-inline: 1.25rem;
  background: var(--page-bg);
  border: 1px solid var(--input-border);
  box-shadow: inset 0 0 0 50vw var(--page-bg);
  -webkit-text-fill-color: var(--text-body-primary);
  caret-color: var(--text-body-primary);
}
input:not([type=radio]):focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 50vw var(--page-bg);
  outline: none;
}

textarea {
  padding-block: 1.25rem;
  resize: vertical;
}

.contact__button {
  height: 3rem;
  padding-inline: 3rem;
  border-radius: 0.25rem;
  border: none;
  background: var(--brand);
  color: var(--white);
  transition: 200ms background;
  white-space: nowrap;
}
.contact__button:hover {
  background: color-mix(in lch, var(--brand), black 20%);
  cursor: pointer;
}
.contact__button:focus-visible {
  border: 2px solid var(--brand);
  box-shadow: inset 0 0 0 1px var(--white);
}

.contact__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.contact__email {
  font-weight: 300;
  font-size: 1rem;
  align-self: center;
  color: var(--text-body-secondary);
}
.contact__email a {
  color: var(--text-body-primary);
  font-weight: 400;
}
.contact__email a:hover {
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  .contact .contact__button {
    flex: 1 0 100%;
  }
  .section__heading {
    margin-block-end: 1.5em;
  }
  .contact__email {
    order: -1;
    margin-block-end: 2rem;
  }
}
.quote .section__body {
  position: relative;
  display: grid;
  box-shadow: 0 0 0 100vmax var(--quote-bg);
  clip-path: inset(0 -100vmax);
  background: var(--quote-bg);
  padding-block: 9rem 8rem;
  min-height: 20rem;
}

blockquote {
  position: relative;
  display: grid;
  grid-area: 1/-1/1/-1;
  gap: 2rem;
  align-self: center;
  max-width: 50rem;
  margin-inline: auto;
  padding-inline-end: 3rem;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 500ms all;
  translate: 0 -1rem;
}
blockquote::before {
  content: "\f10e";
  position: absolute;
  inset: auto auto calc(100% + 1rem) 0;
  display: block;
  width: 2.5rem;
  aspect-ratio: 1;
  font: 700 3rem/1 "Font Awesome 6 Sharp";
  color: var(--brand);
}
blockquote p {
  position: relative;
  font: 700 1.25rem/1.5 var(--font-title);
  color: var(--text-body-primary);
}
blockquote footer {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.125rem;
  position: relative;
  text-wrap: pretty;
}
blockquote footer::after {
  content: "";
  position: absolute;
  inset: auto auto calc(100% + 1rem) 0;
  width: 1rem;
  border-top: 1px solid var(--divider);
}
blockquote cite {
  font: 500 1rem/1.375 var(--font-body);
  color: var(--brand);
}
blockquote span {
  font: 400 0.875rem/1.375 var(--font-body);
  color: var(--text-body-secondary);
}
blockquote span a {
  color: var(--text-body-primary);
  text-underline-offset: 0.25rem;
  text-decoration-color: color-mix(in lch, var(--divider), black 20%);
}
blockquote span a:hover {
  text-decoration: none;
}

fieldset {
  position: absolute;
  inset: 0 0 0 auto;
  order: 2;
  z-index: 2;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  padding: 0;
}

input[type=radio] {
  appearance: none;
  cursor: pointer;
  width: 0.75rem;
  aspect-ratio: 1;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--text-body-secondary);
  margin: 0;
  box-shadow: none;
  background: transparent;
}
input[type=radio]:checked, input[type=radio]:hover {
  border-color: var(--text-body-primary);
  background: var(--text-body-primary);
}

fieldset:has(input:nth-of-type(1):checked) ~ blockquote:nth-of-type(1),
fieldset:has(input:nth-of-type(2):checked) ~ blockquote:nth-of-type(2),
fieldset:has(input:nth-of-type(3):checked) ~ blockquote:nth-of-type(3),
fieldset:has(input:nth-of-type(4):checked) ~ blockquote:nth-of-type(4),
fieldset:has(input:nth-of-type(5):checked) ~ blockquote:nth-of-type(5) {
  opacity: 1;
  visibility: visible;
  translate: 0;
}

.nav--social {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  align-items: center;
  gap: 0.75rem;
  flex: 1 0;
  margin-block-start: 1rem;
}

.social__heading {
  position: absolute;
  inset: auto 0 calc(100% + 0.5rem) auto;
  font-size: 0.875rem;
  text-align: right;
  color: var(--text-body-secondary);
}
.social__heading h3,
.social__heading p {
  display: inline;
  font: 400 0.875rem/1 var(--font-body);
}

.social__item {
  position: relative;
  color: var(--text-body-secondary);
  transition: 200ms color ease;
  text-decoration: none;
}
.social__item:focus-visible {
  outline: none;
}
.social__item:focus-visible small {
  opacity: 1;
  visibility: visible;
  inset: auto auto 100% 50%;
}
.social__item i {
  font-size: 2rem;
}
.social__item i:hover {
  color: color-mix(in lch, var(--text-body-primary), black 20%);
}
.social__item i:hover + small {
  opacity: 1;
  visibility: visible;
  inset: auto auto 100% 50%;
}
.social__item small {
  position: absolute;
  inset: auto auto calc(100% - 0.25rem) 50%;
  isolation: isolate;
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  background: var(--tooltip-bg);
  border-radius: 0.25rem;
  color: var(--white);
  transition: 200ms all 100ms;
}
.social__item small::after {
  content: "";
  position: absolute;
  inset: calc(100% - 0.75rem) auto auto 50%;
  z-index: -1;
  translate: -50% 0;
  display: block;
  width: 1rem;
  aspect-ratio: 1;
  rotate: 45deg;
  background: var(--tooltip-bg);
  border-radius: 4px;
}

.social__item:hover .fa-facebook {
  color: #3B5998;
}
.social__item:hover .fa-instagram {
  color: #C32AA3;
}
.social__item:hover .fa-steam {
  color: var(--text-body-primary);
}
.social__item:hover .fa-linkedin {
  color: #0A66C2;
}
.social__item:hover .fa-discord {
  color: #5865f2;
}
.social__item:hover .fa-lastfm {
  color: #BA0000;
}
.social__item:hover .fa-dribbble {
  color: #EA4C89;
}
.social__item:hover .fa-github {
  color: var(--text-body-primary);
}
.social__item:hover .fa-figma {
  color: #1ABCFE;
}
.social__item:hover .fa-spotify {
  color: #1DB954;
}
.social__item:hover .fa-gitlab {
  color: #E24329;
}

@media screen and (max-width: 640px) {
  .nav--social {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    margin: 0;
  }
  .social__heading {
    position: static;
    grid-column: 1/-1;
    margin-block-end: 0.5rem;
    text-align: left;
  }
  .social__heading h3 {
    font: 700 1.25rem/1.375 var(--font-title);
    color: var(--text-body-primary);
    display: block;
    text-transform: capitalize;
  }
  .social__heading p {
    font: 300 1rem/1.5 var(--font-body);
  }
  .social__item {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--divider);
    border-radius: 0.125rem;
  }
  .social__item small {
    display: none;
  }
}
.pro-bono .section__body {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pro-bono figure {
  margin-block: auto;
}
.pro-bono img {
  width: 320px;
}
.pro-bono img:last-of-type {
  display: none;
}

.owc-logo {
  transition: 200ms all;
}
.owc-logo:hover {
  rotate: 1deg;
  opacity: 0.8;
}

.list--awards {
  display: grid;
  gap: 2rem;
  flex: 1 0;
  min-width: 20rem;
  max-width: 28rem;
}

.award__item {
  --award-bg: var(--brand);
  position: relative;
  width: 100%;
  min-height: 75px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  display: grid;
  gap: 0.5rem;
  padding-block: 1.5rem 1rem;
  padding-inline: 2rem;
  text-align: center;
  text-decoration: none;
}
.award__item > span {
  position: absolute;
  inset: auto 2rem calc(100% - 0.75rem);
  box-shadow: 0 0 0 0.5rem var(--page-bg);
  background: var(--award-bg);
  color: var(--white);
  letter-spacing: 0.1em;
  display: grid;
  place-items: center;
  border-radius: 0.25rem;
  text-transform: uppercase;
  height: 1.5rem;
  font-size: 0.75rem;
}
.award__item h6 {
  margin: 0;
  font: 700 1rem/1.25 var(--font-title);
  color: var(--text-body-primary);
}
.award__item h6 span {
  white-space: nowrap;
}
.award__item small {
  font: 400 0.875rem/1.25 var(--font-body);
  color: var(--text-body-secondary);
}

/* default color component properties for dark theme */
@media (prefers-color-scheme: dark) {
  /* Swap out the OWC logo PNG because the SVG version was huge */
  .pro-bono img:first-of-type {
    display: none;
  }
  .pro-bono img:last-of-type {
    display: block;
  }
  /* component properties if dark theme is default and user toggles to light theme */
  .toggle-theme .pro-bono img:first-of-type {
    display: block;
  }
  .toggle-theme .pro-bono img:last-of-type {
    display: none;
  }
} /* End 'prefers-color-scheme: dark' Media Query */
@media screen and (max-width: 430px) {
  .award__item h6 {
    display: grid;
    line-height: 1.375;
  }
}
.qa {
  --qa-border: var(--divider);
  --qa-border-active: var(--brand);
  display: grid;
  gap: 0.25rem;
  width: 100%;
}

.qa__item {
  display: grid;
  grid-template-rows: auto 0fr;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--qa-border);
  padding: 0.75rem 1rem;
  transition: 250ms grid-template-rows;
}
.qa__item:hover {
  border-color: var(--brand);
}
.qa__item.expanded {
  grid-template-rows: auto 1fr;
  border-color: var(--qa-border-active);
}
.qa__item.expanded dt::after {
  rotate: -45deg;
}
.qa__item dt {
  position: relative;
  font: 600 1rem/1.5 var(--font-title);
  padding-inline-end: 2rem;
}
.qa__item dt::after {
  content: "+";
  position: absolute;
  inset: 0.3125em 0 auto auto;
  display: grid;
  place-items: center;
  color: var(--brand);
  font: 300 1rem/1 var(--font-icon);
  transition: 200ms rotate linear;
}
.qa__item dt:hover {
  cursor: pointer;
}
.qa__item dd {
  overflow: hidden;
}
.qa__item p {
  padding-block: 0.5rem;
  color: var(--text-body-secondary);
  font: 400 1rem/1.6 var(--font-body);
  text-wrap: pretty;
}
.qa__item a {
  color: var(--brand);
}
.qa__item a:hover {
  text-decoration: none;
}

.bfs {
  position: fixed;
  inset: 0 auto 0 calc(5120px - 3rem);
  width: 10px;
  writing-mode: vertical-rl;
  text-align: center;
}
.bfs::after {
  content: "Holy huge monitor, Batman!";
}

#mirror {
  padding-block: 2rem;
  padding-inline: 1.5rem;
  align-content: end;
  background-color: black;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0) 50%);
  isolation: isolate;
}
#mirror::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, transparent 0%, black 90%);
}
#mirror .modal__header {
  position: absolute;
  inset: auto 0 2rem;
  background: transparent;
  backdrop-filter: none;
  max-width: none;
  padding: 0;
}
#mirror .modal__title {
  max-width: none;
  gap: 1rem;
  border: none;
  padding: 0 2rem;
  text-align: center;
}
#mirror .modal__title h2 {
  color: var(--white);
}
#mirror .modal__title p {
  color: var(--color-greyscale-500);
  font: 300 1rem/1.5 var(--font-body);
}
#mirror .modal__close {
  z-index: 2;
  inset: 2rem 2rem auto auto;
  color: var(--white);
  opacity: 0.5;
}

.hello {
  display: grid;
  grid-template-columns: 1fr;
}
.hello > * {
  grid-area: 1/1/-1/-1;
}
.hello div {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-block-start: 3rem;
}

.notification--temp {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--divider);
  padding-block: 1rem;
  padding-inline: 1rem;
  border-radius: 0.25rem;
  color: var(--text-body-secondary);
}
.notification--temp i {
  color: var(--brand);
}
@media screen and (max-width: 430px) {
  .notification--temp {
    text-align: left;
  }
}

.flex--vertical {
  display: flex;
  flex-flow: column nowrap;
  justify-content: stretch;
}
.flex--vertical > *:first-child {
  flex-grow: 1;
}
.flex--vertical img {
  object-fit: cover;
}

.gap--lg {
  gap: 1rem;
}

/*# sourceMappingURL=styles.css.map */