@charset "UTF-8";
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

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

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* 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;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@font-face {
  font-family: "Sofia Pro";
  src: url("/fonts/sofia-pro-var.woff2");
  font-weight: 100 900;
  font-style: normal italic;
}
@font-face {
  font-family: "Recoleta Alt";
  src: url("/fonts/recoleta-alt.woff2");
  font-weight: 400;
  font-style: normal;
}
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

html {
  --site-background: hsl(0, 62%, 95%);
  --site-background-mid: hsl(0, 0%, 100%);
  --site-background-deep: hsl(358, 100%, 90%);
  --site-text-primary: hsl(181, 100%, 14%);
  --site-headers: var(--site-text-primary);
  --site-deco: hsl(349, 86%, 45%);
}
html[dark] {
  --site-background: hsl(181, 100%, 14%);
  --site-background-mid: hsl(181, 100%, 10%);
  --site-background-deep: hsl(181, 100%, 5%);
  --site-text-primary: hsl(0, 62%, 95%);
  --site-headers: hsl(358, 100%, 90%);
  --site-deco: hsl(68, 96%, 72%);
}

html.no-animation *,
html.no-animation *::before,
html.no-animation *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

body {
  position: relative;
  transition: all 0.2s;
  color: var(--site-text-primary);
  background-color: var(--site-background);
}
@media screen and (min-width: 37.5rem) {
  body {
    display: flex;
    flex-direction: column;
  }
}

hr {
  height: 0;
  margin-bottom: 2.25rem;
  border: 0;
  border-top: 2px solid hsl(358, 100%, 90%);
}
@media screen and (min-width: 75rem) {
  hr {
    margin-bottom: 5rem;
  }
}

.section {
  position: relative;
  padding-block: 3rem;
  background-color: var(--section-background);
  --section-background: transparent;
  --tab-text: hsl(349, 86%, 45%);
}
@media screen and (min-width: 56.25rem) {
  .section {
    padding-block: 6.25rem;
  }
}
@media screen and (min-width: 75rem) {
  .section {
    padding-block: 10rem;
  }
}
.section:has(.tab:first-child) {
  padding-top: 5.375rem;
}
.section--contrast {
  --section-background: hsl(0, 0%, 100%);
}
[dark] .section--contrast {
  --section-background: hsl(181, 100%, 10%);
  --tab-text: hsl(68, 96%, 72%);
}
.section--contrast .work-list {
  border-top-color: hsl(0, 62%, 95%);
}
.section--contrast .work-list-item {
  border-bottom-color: hsl(0, 62%, 95%);
}
.section--alt {
  --section-background: hsl(358, 100%, 90%);
  --tab-text: hsl(181, 100%, 14%);
}
[dark] .section--alt {
  --section-background: hsl(181, 100%, 5%);
  --tab-text: hsl(358, 100%, 90%);
}

.container {
  width: 72.25rem;
  max-width: 100%;
  margin: 0 auto;
  padding-inline: 1rem;
}

.centered {
  text-align: center;
}

.page-intro {
  margin-block: 3rem;
}
.page-intro__description {
  line-height: 1.6;
}
@media screen and (min-width: 37.5rem) {
  .page-intro__description {
    font-size: 1.125rem;
    max-width: 65ch;
    margin: 0 auto;
  }
}

body {
  font-family: "Sofia Pro", sans-serif;
}

h1 {
  color: var(--site-headers);
  font-family: "Recoleta Alt", serif;
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 1.25;
}
@media screen and (min-width: 56.25rem) {
  h1 {
    font-size: 5rem;
    line-height: 1.15;
  }
}

h2,
.h2 {
  color: var(--site-headers);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.35;
}

h3,
.h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
@media screen and (min-width: 75rem) {
  h3,
  .h3 {
    margin-bottom: 3.75rem;
  }
}

h4 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

h5 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

p {
  line-height: 1.6;
}

li > p {
  margin: 0;
}

a:not([class]) {
  --links: hsl(217, 75%, 46%);
  --links--hover: hsl(217, 75%, 46%);
  --links--active: hsl(217, 67%, 21%);
  text-decoration: none;
  color: var(--links);
}
[dark] a:not([class]) {
  --links: hsl(188, 68%, 66%);
  --links--hover: hsl(188, 68%, 66%);
  --links--active: hsl(187, 82%, 78%);
}
a:not([class]):hover {
  text-decoration: underline;
  color: var(--links--hover);
}
a:not([class]):focus {
  outline: 2px dashed currentColor;
}
a:not([class]):active {
  color: var(--links--active);
  outline: none;
}

.deco {
  margin-bottom: 1rem;
  color: var(--site-deco);
}

.tab {
  font-size: 1.25rem;
  font-weight: 600;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: max-content;
  margin: 0 auto;
  padding: 2.25rem 3.75rem;
  transform: translateY(-50%);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 10rem;
  background-color: var(--section-background);
  color: var(--tab-text);
}

.date {
  font-size: 1.25rem;
  font-family: "Sofia Pro", sans-serif;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.rendered--semiwide {
  max-width: 48.75rem;
}
.rendered p {
  margin-bottom: 1rem;
}
@media screen and (min-width: 37.5rem) {
  .rendered p {
    font-size: 1.125rem;
  }
}
.rendered h1 {
  margin-bottom: 0.5em;
}
.rendered h2 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.rendered h3 {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
.rendered h4 {
  margin-bottom: 1em;
}

.button {
  --button-background: hsl(349, 86%, 45%);
  --button-color: hsl(0, 0%, 100%);
  --button-background--hover: hsl(349, 82%, 38%);
  --button-background--focus: hsl(349, 82%, 38%);
  --button-outline--focus: hsl(217, 75%, 46%);
  --button-color--active: hsl(349, 83%, 26%);
  display: inline-block;
  padding: 1rem 1.5rem 0.75rem;
  text-decoration: none;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--button-color);
  border-radius: 3rem;
  background-color: var(--button-background);
}
[dark] .button {
  --button-background: hsl(68, 96%, 72%);
  --button-color: hsl(181, 100%, 5%);
  --button-background--hover: hsl(69, 100%, 83%);
  --button-background--focus: hsl(69, 100%, 83%);
  --button-outline--focus: hsl(188, 68%, 66%);
  --button-background--active: hsl(69, 100%, 95%);
}
.button--alt {
  --button-background: hsl(217, 75%, 46%);
  --button-background--hover: hsl(217, 71%, 34%);
  --button-background--focus: hsl(217, 71%, 34%);
  --button-outline--focus: hsl(349, 86%, 45%);
  --button-background--active: hsl(217, 67%, 21%);
}
[dark] .button--alt {
  --button-background: hsl(188, 68%, 66%);
  --button-background--hover: hsl(187, 82%, 78%);
  --button-background--focus: hsl(187, 82%, 78%);
  --button-outline--focus: hsl(68, 96%, 72%);
  --button-color--active: hsl(188, 100%, 89%);
}
.button:hover {
  background-color: var(--button-background--hover);
}
.button:focus {
  outline: 2px dashed var(--button-outline--focus);
  background-color: var(--button-background--focus);
}
.button:active {
  outline: none;
  background-color: var(--button-color--active);
}

.skip-link {
  font-size: 1.25rem;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 21rem;
  max-width: 100%;
  padding: 1.5rem;
  transform: translateY(-100%);
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--skip-link-text);
  border: 0;
  border-bottom-right-radius: 1.5rem;
  background-color: var(--skip-link-background);
  --skip-link-background: hsl(217, 75%, 46%);
  --skip-link-text: hsl(0, 0%, 100%);
  --skip-link-outline: hsl(349, 86%, 45%);
}
[dark] .skip-link {
  --skip-link-background: hsl(188, 68%, 66%);
  --skip-link-text: hsl(181, 100%, 5%);
  --skip-link-outline: hsl(68, 96%, 72%);
}
.skip-link:hover, .skip-link:focus {
  transform: translateY(0);
  outline: 2px dashed var(--skip-link-outline);
}

.header {
  --header-background: hsl(0, 62%, 95%);
  --header-brand: hsl(349, 86%, 45%);
  --header-links: hsl(181, 100%, 14%);
  --header-links--hover: hsl(217, 75%, 46%);
  --header-links--focus: hsl(217, 75%, 46%);
  --header-links--active: hsl(181, 100%, 14%);
  text-align: center;
  background: var(--header-background);
  transition: all 0.2s;
}
[dark] .header {
  --header-background: hsl(181, 100%, 14%);
  --header-brand: hsl(188, 68%, 66%);
  --header-links: hsl(358, 100%, 90%);
  --header-links--hover: hsl(188, 68%, 66%);
  --header-links--focus: hsl(188, 68%, 66%);
  --header-links--active: hsl(0, 62%, 95%);
}
.header__inner {
  max-width: 72.25rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0.625rem;
}
@media screen and (min-width: 37.5rem) {
  .header__inner {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
  }
}
.header__brand {
  display: inline-block;
  width: 100%;
  max-width: 2rem;
  margin: 0 auto;
  color: var(--header-brand);
}
@media screen and (min-width: 37.5rem) {
  .header__brand {
    max-width: 2.3rem;
  }
}
.header__brand svg {
  display: block;
  width: 100%;
}
.header__links {
  font-size: 1.125rem;
  display: grid;
  row-gap: 1rem;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  padding: 0;
  list-style: none;
  color: var(--header-links);
}
@media screen and (min-width: 37.5rem) {
  .header__links {
    grid-auto-flow: column;
    column-gap: 2.25rem;
    grid-template-columns: unset;
  }
}
.header__links a {
  text-decoration: none;
  color: inherit;
}
.header__links a:hover {
  text-decoration: underline;
  color: var(--header-links--hover);
}
.header__links a:focus {
  text-decoration: underline;
  color: var(--header-links--focus);
  outline-width: 2px;
  outline-style: dashed;
  outline-color: currentColor;
}
.header__links a:active {
  color: var(--header-links--active);
  outline: none;
}

.footer {
  transition: all 0.2s;
  background-color: var(--footer-background);
  accent-color: var(--footer-accent);
  --footer-background: hsl(0, 62%, 95%);
  --footer-accent: hsl(217, 75%, 46%);
  --footer-links: hsl(217, 75%, 46%);
  --theme-selector-border: hsl(181, 100%, 14%);
  --theme-selector-border--checked: hsl(217, 75%, 46%);
  --theme-selector-background--checked: hsl(0, 0%, 100%);
  --social-link: hsl(349, 86%, 45%);
  --social-link--hover: hsl(349, 82%, 38%);
  --social-link--focus: hsl(349, 82%, 38%);
  --social-link--focus-outline: hsl(217, 75%, 46%);
  --social-link--active: hsl(349, 83%, 26%);
}
[dark] .footer {
  --footer-background: hsl(181, 100%, 14%);
  --footer-accent: hsl(188, 68%, 66%);
  --theme-selector-border: hsl(358, 100%, 90%);
  --theme-selector-border--checked: hsl(188, 68%, 66%);
  --social-link: hsl(188, 68%, 66%);
  --social-link--hover: hsl(187, 82%, 78%);
  --social-link--focus: hsl(187, 82%, 78%);
  --social-link--focus-outline: hsl(68, 96%, 72%);
  --social-link--active: hsl(188, 100%, 89%);
}
@media screen and (min-width: 56.25rem) {
  .footer {
    margin-top: auto;
  }
}
.footer__inner {
  max-width: 72.25rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 1.5rem;
  text-align: center;
}
@media screen and (min-width: 56.25rem) {
  .footer__inner {
    display: grid;
    grid-template-columns: repeat(2, min-content);
    justify-content: space-between;
  }
}
@media screen and (min-width: 37.5rem) {
  .footer__row {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
  }
  .footer__row > p:nth-of-type(1) {
    grid-column-end: span 2;
  }
  .footer__row > p:nth-of-type(2) {
    grid-column: 2;
  }
}
@media screen and (min-width: 56.25rem) {
  .footer__row {
    grid-column-end: span 2;
    column-gap: 3rem;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
  }
  .footer__row > p:nth-of-type(1) {
    grid-column-end: span 1;
  }
  .footer__row > p:nth-of-type(2) {
    grid-column: 3;
  }
}
.footer__theme-selector {
  display: inline-grid;
  grid-auto-flow: column;
  column-gap: 1rem;
  align-items: center;
  justify-content: start;
  margin: 0 auto 1.5rem;
  padding: 0;
  border: 0;
}
.footer__theme-selector legend {
  font-weight: bold;
  line-height: 1;
  float: left;
}
.footer__theme-selector label {
  line-height: 1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}
.footer__theme-selector label:before {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  content: "";
  transition: border 0.1s linear;
  border: 1px solid var(--theme-selector-border);
  border-radius: 100%;
}
.footer__theme-selector label:has(:checked):before {
  border: 5px solid var(--theme-selector-border--checked);
  background-color: var(--theme-selector-background--checked);
}
.footer__theme-selector span {
  display: inline-block;
  height: 0.8rem;
}
.footer__social-links {
  display: flex;
  column-gap: 3rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.footer__social-link {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  transition: color 0.2s;
  text-decoration: none;
  color: var(--social-link);
}
.footer__social-link:hover {
  text-decoration: underline;
  color: var(--social-link--hover);
}
.footer__social-link:focus {
  text-decoration: underline;
  color: var(--social-link--focus);
  outline-width: 2px;
  outline-style: dashed;
  outline-color: var(--social-link--focus-outline);
}
.footer__social-link:active {
  color: var(--social-link--active);
  outline: none;
}
.footer__social-link svg {
  width: 1rem;
  fill: currentColor;
}

.intro {
  padding-block: 3rem 7.5rem;
}
@media screen and (min-width: 75rem) {
  .intro {
    padding-block: 10rem;
  }
}
.intro p {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 56.25rem) {
  .intro p {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 75rem) {
  .intro .container {
    display: grid;
    column-gap: 5.625rem;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    justify-items: start;
  }
}
.intro .button {
  margin-bottom: 1.5rem;
}
.intro .profile {
  position: relative;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 75rem) {
  .intro .profile {
    grid-column: 2;
    grid-row: 1/span 3;
  }
}
.intro .profile__img {
  transition: opacity 0.2s;
}
.intro .profile__img:nth-of-type(2) {
  position: absolute;
}
[dark] .intro .profile__img--light {
  opacity: 0;
}
.intro .profile__img--dark {
  opacity: 0;
}
[dark] .intro .profile__img--dark {
  opacity: 1;
}

.work-list {
  --case-border: hsl(358, 100%, 90%);
  --case-title: hsl(217, 75%, 46%);
  margin-bottom: 5.375rem;
  padding: 0;
  list-style-type: none;
  border-top: 2px solid var(--case-border);
}
[dark] .work-list {
  --case-title: hsl(188, 68%, 66%);
  --case-border: hsl(181, 52%, 25%);
}

.work-list-item {
  position: relative;
  padding-block: 1.5rem;
  border-bottom: 2px solid var(--case-border);
}
.work-list-item__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 2.25rem;
  line-height: 1.3;
  color: var(--case-title);
}
@media screen and (min-width: 56.25rem) {
  .work-list-item__description {
    font-size: 1.125rem;
  }
}
.work-list-item__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.writing-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  margin-bottom: 1.5rem;
  padding: 0;
  list-style-type: none;
}
@media screen and (min-width: 56.25rem) {
  .writing-list {
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
}
.writing-list--compact {
  display: block;
  border-top: 2px solid hsl(358, 100%, 90%);
}
.writing-list--compact .writing-list-item {
  padding: 1.5rem 0;
  border-bottom: 2px solid hsl(358, 100%, 90%);
  border-radius: 0;
  background-color: transparent;
}
@media screen and (min-width: 56.25rem) {
  .writing-list--compact .writing-list-item {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-column-gap: 1rem;
    align-items: baseline;
  }
}
.writing-list--compact .writing-list-item__title {
  font-weight: 400;
}
.writing-list--compact .writing-list-item__date {
  font-weight: 500;
  display: inline-block;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.12rem;
}
@media screen and (min-width: 56.25rem) {
  .writing-list--compact .writing-list-item__date {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14rem;
  }
}

.writing-list-item {
  --card-background: hsl(0, 0%, 100%);
  --card-title: hsl(217, 75%, 46%);
  position: relative;
  height: 100%;
  margin-bottom: 1rem;
  padding: 1.5rem;
  border-radius: 0.8rem;
  background-color: var(--card-background);
}
[dark] .writing-list-item {
  --card-background: hsl(181, 100%, 14%);
  --card-title: hsl(188, 68%, 66%);
}
.writing-list-item__publisher {
  font-style: normal;
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.writing-list-item__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
  color: var(--card-title);
}
.writing-list-item__description {
  font-size: 1.125rem;
}
.writing-list-item__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.event-list {
  --case-title: hsl(217, 75%, 46%);
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
[dark] .event-list {
  --case-title: hsl(188, 68%, 66%);
}
@media screen and (min-width: 37.5rem) {
  .event-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media screen and (min-width: 56.25rem) {
  .event-list--dense {
    grid-template-columns: repeat(4, 1fr);
  }
}

.event-list-item {
  margin-bottom: 1rem;
}
.event-list-item__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: var(--case-title);
}
.event-list-item__meta {
  display: flex;
  column-gap: 1rem;
}
.event-list-item svg {
  width: 1.25rem;
}

.blockquote {
  margin-bottom: 4rem;
}
@media screen and (min-width: 75rem) {
  .blockquote {
    margin-bottom: 7.5rem;
  }
}
.blockquote p:before {
  content: "“";
}
.blockquote p:after {
  content: "”";
}
@media screen and (min-width: 37.5rem) {
  .blockquote--deco {
    text-align: center;
  }
}
.blockquote--deco p {
  font-family: "Recoleta Alt", serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  color: var(--site-deco);
}
@media screen and (min-width: 56.25rem) {
  .blockquote--deco p {
    font-size: 4rem;
  }
}
.blockquote cite {
  font-weight: 700;
  font-style: normal;
}

.talk-list {
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 56.25rem) {
  .talk-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
  }
}
@media screen and (min-width: 75rem) {
  .talk-list {
    column-gap: 1.5rem;
  }
}

.talk-list-item {
  margin-bottom: 2.25rem;
}
.talk-list-item--featured {
  padding-bottom: 2.25rem;
  border-bottom: 2px solid hsl(358, 100%, 90%);
}
@media screen and (min-width: 56.25rem) {
  .talk-list-item--featured {
    grid-column-end: span 3;
    grid-template-rows: auto 1fr;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.75rem;
  }
}
.talk-list-item__media {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 56.25rem) {
  .talk-list-item--featured .talk-list-item__media {
    grid-row-end: span 2;
  }
}
.talk-list-item__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.logos {
  --logo-color: hsl(349, 86%, 45%);
  display: grid;
  grid-column-gap: 2rem;
  row-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  margin-top: 2rem;
  color: var(--logo-color);
  justify-items: center;
}
[dark] .logos {
  --logo-color: hsl(68, 96%, 72%);
}
@media screen and (min-width: 37.5rem) {
  .logos {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media screen and (min-width: 56.25rem) {
  .logos {
    row-gap: 1.5rem;
  }
}

.logo {
  width: 100%;
  max-width: 10rem;
  height: 3.75rem;
}
@media screen and (min-width: 37.5rem) {
  .logo {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 56.25rem) {
  .logo {
    max-width: 16.875rem;
    height: 6.25rem;
  }
}
@media screen and (min-width: 75rem) {
  .logo {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 37.5rem) {
  .logo:nth-last-child(2) {
    grid-column-start: 3;
  }
}
@media screen and (min-width: 75rem) {
  .logo:nth-last-child(2) {
    grid-column-start: auto;
  }
}
.logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.podcast-list {
  padding: 0;
  list-style: none;
  border-top: 2px solid hsl(358, 100%, 90%);
}

.podcast-list-item {
  position: relative;
  padding-block: 1.5rem;
  border-bottom: 2px solid hsl(358, 100%, 90%);
  --podcast-title: hsl(217, 75%, 46%);
}
@media screen and (min-width: 56.25rem) {
  .podcast-list-item {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: 1fr 4fr;
    align-items: baseline;
  }
}
[dark] .podcast-list-item {
  --podcast-title: hsl(188, 68%, 66%);
}
.podcast-list-item__media {
  margin-bottom: 1.5rem;
}
.podcast-list-item__date {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
}
@media screen and (min-width: 56.25rem) {
  .podcast-list-item__date {
    font-size: 0.875rem;
  }
}
.podcast-list-item__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: var(--podcast-title);
}
@media screen and (min-width: 56.25rem) {
  .podcast-list-item__title {
    font-size: 1.5rem;
  }
}
.podcast-list-item__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.toc {
  margin: 3rem 0;
  --header-color: var(--site-text-primary);
}
@media screen and (min-width: 56.25rem) {
  .toc {
    font-size: 1.5rem;
  }
}
[dark] .toc {
  --header-color: hsl(358, 100%, 90%);
}
.toc__header {
  font-weight: 600;
  line-height: 1.3;
  padding-bottom: 1.5rem;
  color: var(--header-color);
  border-bottom: 2px solid hsl(358, 100%, 90%);
}
.toc__list {
  line-height: 2;
  padding: 0;
  list-style-type: none;
}
.toc__list a {
  color: inherit;
}

.rose {
  width: 11rem;
  max-width: 100%;
  margin: 0 auto;
  --leaf-highlight: hsl(181, 26%, 45%);
  --leaf-mid: hsl(181, 36%, 34%);
  --leaf-mid-dark: hsl(181, 52%, 25%);
  --leaf-shadow: hsl(181, 97%, 14%);
  --petal-shadow: hsl(347, 85%, 15%);
  --petal-mid-dark: hsl(347, 87%, 22%);
  --petal-mid: hsl(349, 86%, 45%);
  --petal-mid-light: hsl(352, 78%, 73%);
  --petal-highlight: hsl(350, 72%, 55%);
}
@media screen and (min-width: 37.5rem) {
  .rose {
    width: 16.875rem;
  }
}
@media screen and (min-width: 56.25rem) {
  .rose {
    width: 23.25rem;
  }
}
[dark] .rose {
  --petal-shadow: hsl(144, 86%, 11%);
  --petal-mid-dark: hsl(68, 86%, 30%);
  --petal-mid: hsl(68, 96%, 72%);
  --petal-mid-light: hsl(69, 100%, 83%);
  --petal-highlight: hsl(69, 100%, 95%);
}

@media screen and (min-width: 75rem) {
  .about__grid {
    display: grid;
    column-gap: 1.5rem;
    grid-template-columns: 6fr 4fr;
  }
}

.button--resume {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.about__headshot {
  position: relative;
  width: 100%;
  max-width: 21rem;
  margin: 0 auto;
}
@media screen and (min-width: 37.5rem) {
  .about__headshot {
    max-width: 26.875rem;
  }
}
@media screen and (min-width: 75rem) {
  .about__headshot {
    justify-self: center;
  }
}
.about__headshot-img {
  transition: opacity 0.2s;
}
.about__headshot-img:nth-of-type(2) {
  position: absolute;
  top: 0;
}
[dark] .about__headshot-img--light {
  opacity: 0;
}
.about__headshot-img--dark {
  opacity: 0;
}
[dark] .about__headshot-img--dark {
  opacity: 1;
}

.buckets {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(25.75rem, 1fr));
}
@media screen and (min-width: 75rem) {
  .buckets {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.bucket {
  margin-bottom: 3rem;
}
.bucket__illo {
  max-width: 10rem;
  height: 7.125rem;
  margin: 0 auto 2rem;
  --illustration-primary: #d51034;
  --illustration-secondary: #ffcbcd;
}
[dark] .bucket__illo {
  --illustration-primary: #eafc73;
  --illustration-secondary: #003233;
}
.bucket__illo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: var(--aspect, 1);
}
.bucket__title {
  margin-bottom: 0.5rem;
}

@media screen and (min-width: 56.25rem) {
  .layout-contact {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

.resume {
  --border-color: hsl(358, 100%, 90%);
}
@media screen and (min-width: 56.25rem) {
  .resume {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(10, 1fr);
  }
}
[dark] .resume {
  --border-color: hsl(181, 36%, 34%);
}
.resume__intro {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--border-color);
}
@media screen and (min-width: 56.25rem) {
  .resume__intro {
    display: grid;
    grid-column-end: span 10;
    grid-template-columns: repeat(10, 1fr);
    margin-top: 6.25rem;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
  }
}
@media screen and (min-width: 56.25rem) {
  .resume__intro h1 {
    grid-column-end: span 10;
    margin-bottom: 1.5rem;
  }
}
.resume__intro p {
  margin-bottom: 1rem;
}
@media screen and (min-width: 56.25rem) {
  .resume__intro p {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 56.25rem) {
  .resume__intro a {
    grid-column: 8/span 3;
    align-self: end;
  }
}
.resume__focus {
  margin-bottom: 4rem;
}
@media screen and (min-width: 56.25rem) {
  .resume__focus {
    grid-column: 8/span 3;
  }
}
.resume__cta {
  padding-block: 2.5rem;
  border-block: 2px solid var(--border-color);
}
.resume__cta h2 {
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.resume__section {
  margin-bottom: 4rem;
}
@media screen and (min-width: 56.25rem) {
  .resume__section {
    grid-column-end: span 6;
  }
}
.resume__section > h2 {
  margin-bottom: 1.5rem;
}
.resume__section > h3 {
  letter-spacing: 0;
}
@media screen and (min-width: 75rem) {
  .resume__section > h3 {
    margin-bottom: 1rem;
  }
}

.role {
  margin-bottom: 3rem;
}
.role__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}
.role__dates {
  font-size: 1.25rem;
  line-height: 1.4;
}
@media screen and (min-width: 56.25rem) {
  .role__responsibilities {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

.education {
  margin-bottom: 3rem;
}
.education__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.education__details {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}
@media screen and (min-width: 56.25rem) {
  .education__description {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

.volunteership {
  margin-bottom: 3rem;
}
.volunteership__title {
  font-family: "Sofia Pro", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.volunteership__date {
  font-size: 1.25rem;
  line-height: 1.4;
  display: inline-block;
  margin-bottom: 1rem;
}
@media screen and (min-width: 56.25rem) {
  .volunteership__description {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

.post {
  margin-top: 3rem;
}
@media screen and (min-width: 56.25rem) {
  .post {
    margin-top: 6.25rem;
  }
}
.post__title {
  font-size: 2.5rem;
  line-height: 1.25;
}
@media screen and (min-width: 56.25rem) {
  .post__title {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 56.25rem) {
  .post__layout {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
}
@media screen and (min-width: 56.25rem) {
  .post__layout > div {
    grid-column-end: span 6;
  }
}
.post__date {
  display: inline-block;
}
@media screen and (min-width: 56.25rem) {
  .post__date {
    margin-bottom: 1.5rem;
  }
}
.post__description {
  font-size: 1.125rem;
  line-height: 1.6;
}
@media screen and (min-width: 56.25rem) {
  .post__description {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 56.25rem) {
  .post .toc {
    position: sticky;
    top: 3rem;
    grid-column: 8/span 3;
    grid-row: 1/span 4;
    align-self: start;
  }
}

.case {
  margin-block: 3rem;
  --border-color: hsl(358, 100%, 90%);
}
@media screen and (min-width: 56.25rem) {
  .case {
    margin-block: 6.25rem;
  }
}
[dark] .case {
  --border-color: hsl(181, 36%, 34%);
}
.case__intro {
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--border-color);
}
@media screen and (min-width: 56.25rem) {
  .case__intro {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    padding-bottom: 4rem;
  }
}
.case__title {
  font-size: 2.5rem;
  line-height: 1.25;
  margin-bottom: 1rem;
}
@media screen and (min-width: 56.25rem) {
  .case__title {
    font-size: 4.5rem;
    grid-column-end: span 10;
    margin-bottom: 1.5rem;
  }
}
.case__description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
@media screen and (min-width: 56.25rem) {
  .case__description {
    grid-column-end: span 6;
  }
}
.case__meta {
  font-size: 1.125rem;
  grid-column: 8/span 3;
  grid-row: 2/span 2;
}
.case__categories {
  margin-bottom: 1em;
  text-transform: capitalize;
}
.case__link {
  font-weight: 600;
}
.case .toc__header {
  padding-bottom: 0;
  border-bottom: none;
}
@media screen and (min-width: 56.25rem) {
  .case__layout {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
}
.case .rendered {
  grid-column-end: span 6;
}
@media screen and (min-width: 56.25rem) {
  .case .toc {
    position: sticky;
    top: 3rem;
    grid-column: 8/span 3;
    grid-row: 1/span 4;
    align-self: start;
  }
}