/*******************************************************
 * Vars and Settings
 */
:root {
  /* Constants */
  --crgb-accent: 19, 103, 138;
  --crgb-accent--dark: 14, 76, 102;
  --crgb-accent--light: 69, 196, 176;
  --crgb-accent--lighter: 166, 240, 229;
  --crgb-accent--light-bright: 82, 255, 229;
  --crgb-accent--secondary: 154, 235, 163;
  --crgb-accent--light--text: 8, 149, 128;

  --c-accent: #13678A;
  --c-accent--dark: #0e4c66;
  --c-accent--darker: #093243;
  --c-accent--light: #45C4B0;
  --c-accent--lighter: #a6f0e5;
  --c-accent--light-bright: #52ffe5;
  --c-accent--secondary: #9AEBA3;
  --c-accent--light--text: #089580;

  --c-background__greenish: #D3FFCF;
  --c-background__blueish: #ebf9ff;


  --c-background__greenish: #D3FFCF;
  --c-background__blueish: #ebf9ff;

  --border__color: var(--c-accent--light);

  --page__padding-inline: 1rem;
  --header__marginBottom: 3rem;
  --content__padding-inline: 1rem;
  /* Must match media query for .is-sticky header */
  --content__max-width: 90rem;

  --active-element__background: rgb(from var(--c-accent--secondary) r g b / 0.25);
  --font__rgb-color--base: 1, 32, 48;
  --font__color--base: rgb(var(--font__rgb-color--base));

  /* Contextual */
  --surface__background: #fafafa;
  --font__color: var(--font__color--base);

  @media (min-width: 44em) {
    --page__padding-inline: 1.25rem;
    --header__marginBottom: 3rem;
    --content__padding-inline: 1.5rem;
  }
}

/*******************************************************
 * Base styles
 */
* {
  box-sizing: border-box;
}

html {
  /* Used to get scrollbar width */
  container-type: inline-size;

  font-family: Outfit, Roboto, Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background: var(--surface__background);
  color: var(--font__color);
}

body {
  --scrollBarWidth: calc(100vw - 100cqw);

  overflow-x: hidden;
  padding:0;
  font-size: 1em;

  @media (min-width: 48em) {
    font-size: 1.25em;
  }

  @media (min-width: 44em) {
    font-size: 1.25em;
  }
}

:focus {
  outline: 0;
  box-shadow:
    0 0 0 2px var(--surface__background),
    0 0 0 4px var(--c-accent--light),
    0 0 0 6px var(--surface__background);
}

::-moz-selection,
::selection {
  text-shadow: none;
  color: var(--font__color--base);
  background: var(--c-accent--secondary);
}

:where(p),
:where(ul) {
  margin: 0 0 1em;
}

:where(a) {
  color: var(--c-accent);
  text-decoration: none;
  border-radius: 0.25em;

  &:hover {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--c-accent--light);
    text-decoration-color: var(--c-accent--light);
  }

  &:focus {
    box-shadow:
      0 0 0 2px var(--surface__background),
      0 0 0 4px var(--c-accent--light),
      0 0 0 6px var(--surface__background);
  }
}

button,
.button {
  display: inline-block;
  padding: 0.25em 1em;
  border: 3px solid var(--c-accent);
  border-radius: 1.4em;
  background: var(--surface__background);
  appearance: none;
  cursor: pointer;

  &:hover,
  &:focus {
    text-decoration: none;
    color: var(--c-accent--dark);
    background: var(--c-accent--lighter);
  }
}

abbr[title] {
  border-bottom: 1px dotted var(--c-accent);
  text-decoration: none;
}

/* Fancy bullets for lists */
.work-example > ul,
.previous-talk__info-wrapper > ul,
.experience-list > li > .experience-list__details,
.experience-list__subsection ul {
  > li {
    list-style: none;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0.75em;
      left: -1em;
      display: block;
      box-sizing: content-box;
      width: 0.25em;
      height: 0.25em;
      background: var(--c-accent--light);
      transform: skew(12deg) translate(0, -0.15em);
    }

    > ul > li::before {
      width: 0.25em;
      height: 0.25em;
      border: 2px solid var(--c-accent--light);
      background: transparent;
      transform: skew(12deg) translate(0, -0.2em) scale(0.75);
    }
  }
}

.experience-list__subsection[class] > li::before {
  content: none;
}

/* Dash divider for lists */
.work-examples__wrapper,
.previous-talks__list {
  --bleed: var(--page__padding-inline);
  @media (min-width: 57em) {
    --bleed: 4em;
  }
  @media (min-width: 75em) {
    --bleed: 8em;
  }
  > li,
  > dt {
    position: relative;
    z-index: 0;
  }

  > li + li,
  > dd + dt {
    margin: 3em 0 0;
    padding: 3em 0 0;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: calc(var(--bleed) * -1);
      display: block;
      width: calc(100% + var(--bleed) * 2);
      height: 1em;
      z-index: -1;
      background-image: linear-gradient(
        to left,
        var(--c-accent--lighter) 0,
        var(--c-accent--lighter) 0.25em,
        transparent 0.25em,
        transparent 0.5em
      );
      transform: translateY(-50%) skew(20deg);
      background-size: 0.5em;
      background-repeat: repeat;
    }
  }
}


/****************************
 * Layout
 */
.page {
  --font__color: var(--font__color--base);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100dvh;
  margin: 0 auto;
  /* Fixed header height measured in browser */
  padding-top: 3.8125rem;
  color: var(--font__color);
  background: var(--surface__background);

  @media (min-width: 44em) {
    /* Fixed header height measured in browser */
    padding-top: 6rem;
  }
}

/****************************
 * Header
 */
.page__header-wrapper {
  --surface__background: var(--c-background__greenish);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  display: flex;
  background: var(--surface__background);
}

.page__header,
.page__header--sticky[class][class] {
  --display: flex;

  position: relative;
  display: var(--display);
  width: 100%;
  padding: 0 var(--page__padding-inline);
  border-bottom: 2px solid var(--border__color);

  @media (min-width: 35em) {
    --display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    row-gap: 1em;
  }

  @media (min-width: 44em) {
    grid-template-rows: 1fr -webkit-min-content -webkit-min-content;
    grid-template-rows: 1fr min-content min-content;
    grid-template-columns: -webkit-min-content 1fr;
    grid-template-columns: min-content 1fr;
    row-gap: 0;
  }

  @media (min-width: 57em) {
    grid-template-columns: min-content 1fr min-content;
    grid-column: 1 / -1;
    align-items: baseline;
    width: 100%;
    padding: 0 var(--page__padding-inline);
  }
}

.page__header--sticky[class][class] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: none;
  width: 100%;
  height: auto;
  background: var(--c-background__greenish);
  box-shadow: 0 0.25em 3px rgba(var(--crgb-accent--dark), 0.5);
  transition: box-shadow 0.25s ease;
  /* overflow: hidden; */

  &:has(.mobile-menu--expanded) {
    box-shadow: none;
  }

  &.is-sticky {
    display: var(--display);
    animation: slideInDown 0.25s ease forwards;
    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

:where(.page--home) .page__header-wrapper, /* Prevent qualifying class from bumping up specificty */
.wordmark,
.wordmark {
  --parallelogram__width: calc(var(--page__padding-inline) * 7);

  &::before {
    content: '';
    align-self: start;
    display: block;
    width: calc(100% + var(--parallelogram__width));
    height: calc(100% + 1px);
    background: var(--c-accent) 35%;
    border-right: 0.5em solid var(--c-accent--light);
    transform: skewX(12deg) translate(calc(var(--parallelogram__width) * -1.15));
    transform-origin: center top;
  }
}

.wordmark,
.header__name {
  align-self: baseline;
}

.wordmark {
  justify-self: start;
  position: relative;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding-top: 0.4em;
  padding-right: 3rem;
  padding-bottom: 0.5em;
  padding-left: 0;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  @media (min-width: 44em) {
    font-size: 2.5em;
  }
  @media (min-width: 57em) {
    grid-row: 1 / span 2;
  }

  span {
    position: relative;
    z-index: 1;
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
  }

  .is-sticky & {
    font-size: 2em;
    padding-right: 1em;
    margin-right: 0.5em;

    &::before {
      content: '';
      left: auto;
      transform: skew(12deg);
    }
  }
}

a.wordmark {
  transition: text-shadow 0.25s ease;

  span {
    transition: transform 0.25s ease;
  }

  &::before {
    transition: background 0.25s ease;
  }

  &:hover,
  &:focus {
    box-shadow: none;
    text-decoration: none;
    text-shadow:
      -1px 1px 0 var(--c-accent--light),
      -2px 2px 0 rgba(var(--crgb-accent--light), 0.75),
      -3px 3px 0 rgba(var(--crgb-accent--light), 0.5),
      -4px 4px 0 rgba(var(--crgb-accent--light), 0.25);

    &::before {
      background-color: var(--c-accent--dark);
    }

    span {
      transform: translate(4px, -4px);
    }
  }
}

.header__name {
  display: flex;
  gap: 0.35em;
  align-items: end;
  margin: 0 0 0.25em;
  padding: 0.5em 0 0;
  font-size: 1.5em;
  line-height: 1;
  color: var(--c-accent);
  font-weight: bold;
  @media (min-width: 35em) {
    grid-row: 2;
    grid-column: 1;
    align-items: center;
    margin: 0;
  }
  @media (min-width: 44em) {
    grid-row: 1 / span 1;
    grid-column: 2;
    align-items: baseline;
    padding-bottom: 0;
    padding-left: 2rem;
    font-size: 1.75em;
  }
}


.header__name,
.home__name {
  ruby {
    @media (min-width: 44em) {
      display: flex;
      align-items: baseline;
      gap: 0.4em;
      margin: 0 -3px;
      border-radius: 0.25em;
    }

    &:focus {
      border: 0;
      outline: 0;
    }

    &:focus rt,
    &:hover rt {
      visibility: visible;
    }

    rt {
      visibility: hidden;
      white-space: nowrap;
      color: var(--font__color);
      font-weight: 400;

      @media (min-width: 44em) {
        display: inline-block;
        visibility: visible;
        color: inherit;
        font-weight: 200;
      }

      @media (min-width: 57em) {
        &::before {
          content: '(';
        }
        &::after {
          content: ')';
        }
      }
    }
  }
}

.header__burger {
  display: none;

  &.mobile-menu__control--active {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 4em;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  &[aria-expanded="true"] {
    background: var(--c-accent--lighter);
  }
}

.burger__icon {
   /* Settings */
  --burger__bar-color: var(--c-accent);
  --burger__animation-duration: 0.3s;
  --burger__animation-timing: cubic-bezier(0.55, 0.085, 0, 0.99);
  --burger__bar-width: 32px;
  --burger__bar-height: 5px;
  --burger__space-between-bars: 6px;
  /*
    This has to be figured out when any of the bar widht/height/space between is updated
    I'm sure there's some pythagorean function for this, but I haven't figured it out
    This var raises the bar that goes from bottom left to top right in the x.
    Comment out the line that starts with "transform: scale(" to get a more accurate reading in browser
   */
  --burger__fudge-for-bottom-bar-in-x: -4px;

  /* Initializing vars to be updated later */
  --burger__translate: '';
  --burger__transform-origin: '';

   /**
    * Calculate dimensions with scaling
    * Scaling down makes the icon appear nicer, since we get anti-aliasing
    * and subpixel roundering errors on box-model and position styles are less likely to cause issues.
    */
  --burger__scaling: 4;
  --burger__bar-width--scaled: calc(var(--burger__bar-width) * var(--burger__scaling));
  --burger__bar-height--scaled: calc(var(--burger__bar-height) * var(--burger__scaling));
  --burger__space-between-bars--scaled: calc(var(--burger__space-between-bars) * var(--burger__scaling));

  display: block;
  width: var(--burger__bar-width);
  height: calc(var(--burger__bar-height) * 3 + var(--burger__space-between-bars) * 2);
  /* Scale to get anti-aliasing and avoid subpixel rounding bugs */
  transform: scale(calc(1 / var(--burger__scaling)));
  transform-origin: left top;
  transition: transform 0.25s ease;

  [aria-expanded="true"] & {
    /* Translate was measured in browser to center align the X */
    transform: scale(calc(1 / var(--burger__scaling))) translate(1.5em);
  }

  /* Basic setup for the two elements that make the icon */
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: block;
    width: var(--burger__bar-width--scaled);
  }

  /* Hamburger top bar - Closed/default */
  &::before {
    --burger__transform-origin: left top;

    height: 0;
    border-top-width: var(--burger__bar-height--scaled);
    border-top-style: solid;
    border-top-color: var(--burger__bar-color);
    background: var(--burger__bar-color);
    transform: translateY(calc(var(--burger__space-between-bars--scaled) + var(--burger__bar-height--scaled)) * -1);
    transform-origin: var(--burger__transform-origin);
    @media (prefers-reduced-motion: no-preference) {
      transition: transform var(--burger__animation-duration) var(--burger__animation-timing);
    }
  }

  /* Hamburger bottom bar - Closed/default */
  &::after {
    --burger__height: calc(var(--burger__bar-height--scaled) * 2 + var(--burger__space-between-bars--scaled));
    --burger__transform-origin: left bottom;

    top: calc(var(--burger__bar-height--scaled) + var(--burger__space-between-bars--scaled));
    height: calc(var(--burger__space-between-bars--scaled) + var(--burger__bar-height--scaled) * 2);
    border-width: var(--burger__bar-height--scaled);
    border-style: solid;
    border-color: var(--burger__bar-color);
    border-inline-width: 0;
    background: transparent;
    @media (prefers-reduced-motion: no-preference) {
      transition:
        border var(--burger__animation-duration)  var(--burger__animation-timing),
        transform var(--burger__animation-duration)  var(--burger__animation-timing);
      transform-origin: var(--burger__transform-origin);
    }
  }

  [aria-expanded="true"] & {
    &:before {
      border-top-color: var(--burger__bar-color);
      transform:
        rotate(45deg);
      transform-origin: var(--burger__transform-origin);
    }
    /* Hamburger bottom bar - Open Menu */
    &:after {
      border-top-color: transparent;
      border-bottom-color: var(--burger__bar-color);
      /* Translate is measured in browser */
      transform:
        translateY(var(--burger__fudge-for-bottom-bar-in-x))
        rotate(-45deg);
      transform-origin: var(--burger__transform-origin);
    }
  }
}

.mobile-menu__dropdown--active {
  --surface__background: var(--c-accent--lighter);

  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  max-width: 20em;
  display: grid;
  grid-template-rows: 0fr;
  background: var(--surface__background);
  transition: grid-template-rows 0.25s ease;

  &,
  a {
    color: var(--c-accent--darker);
  }

  &.mobile-menu--expanded {
    grid-template-rows: 1fr;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
      width: calc(100% + 0.25em);
      height: calc(100% + 0.25em);
      background: rgba(var(--crgb-accent--dark), 0.4);
      box-shadow: 0 2px 3px rgba(var(--crgb-accent--dark), 0.4);
    }
  }

  .header__mobile-menu__inner {
    display: flex;
    flex-direction: column;
    gap: 1em;
    min-height: 0;
    overflow: hidden;
    transition: padding 0.25s ease;
  }

  &.mobile-menu--expanded .header__mobile-menu__inner {
    padding-block: 1em;
  }
}

.pdf-version {
  position: absolute;
  top: 0;
  right: var(--page__padding-inline);
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.25em 0.75em;
  font-size: 0.75rem;
  background-color: var(--c-accent--lighter);
  color: var(--font__color--base);
  border-radius: 0 0 0.25em 0.25em;

  &:hover,
  &:focus {
    box-shadow:
      0 0 0 2px var(--surface__background),
      0 0 0 4px var(--c-accent--light),
      0 0 0 6px var(--surface__background);
    text-decoration: none;
  }

  .mobile-menu__dropdown--active & {
    position: static;
    width: min-content;
    white-space: nowrap;
    border: 2px solid var(--c-accent--light);
    border-radius: 1.6em;
    margin-inline: auto;
    font-size: 0.875em;
    background: transparent;

    .icon {
      order: 1;
    }

    &:hover,
    &:focus {
      background: var(--c-background__blueish);
    }
  }


  .icon {
    width: 1.5em;
    height: 1.5em;
    border: 0;
    &::before {
      width: 1.5em;
      width: 1.5em;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
  }
}

.header__social {
  --display: flex;

  position: relative;
  left: -0.375em;
  display: var(--display);
  font-size: 0.75rem;
  gap: 1em;
  margin: 0 auto;
  padding: 1.5em 0 1.5em;
  list-style: none;

  @media (min-width: 35em) {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 44em) {
    font-size: 0.875rem;
    grid-column: 2 / span 1;
    padding-left: 2rem;
  }
  @media (min-width: 57em) {
    align-self: center;
    justify-self: end;
    grid-row: 1;
    grid-column: 3 / span 1;
    padding-top: 1em;
    padding-left: 0;
  }

  .is-sticky & {
    align-self: center;
    top: auto;
    left: auto;
    gap: 0.75em;
    margin-left: auto;
    padding: 0;
  }

  .mobile-menu__dropdown--active & {
    inset: auto;
    margin-inline: auto;
  }
}

.contact-link--email {
  margin-right: auto;
}

.icon {
  position: relative;
  display: block;
  overflow: hidden;
  width: 2.5em;
  height: 2.5em;
  border: 2px solid transparent;
  border-radius: 50%;
  color: var(--c-accent);
  text-indent: -9999em;

  &:hover,
  &:focus {
    outline: 0;
    background: var(--active-element__background);
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    aspect-ratio: 1 / 1;
    width: 2em;
    height: auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1.5rem 1.5rem;
    mask-size: 1.5em 1.5em;
    -webkit-mask-position: center center;
    mask-position: center center;
    background: currentColor;
    transform: translate(-50%, -50%);
  }
}


.icon--email::before {
  /* Vertically center icon */
  -webkit-mask-image: url('../img/email-svgrepo-com.svg');
  mask-image: url('../img/email-svgrepo-com.svg');
}

.icon--github::before {
  /* Vertically center icon */
  transform: translate(-50%, -50%) translateY(-1px);
  -webkit-mask-image: url('../img/github.svg');
  mask-image: url('../img/github.svg');
}

.icon--codepen::before {
  /* Vertically center icon */
  transform: translate(-50%, -50%) translateY(-1px);
  -webkit-mask-image: url('../img/codepen.svg');
  mask-image: url('../img/codepen.svg');
}

.icon--linkedIn::before {
  -webkit-mask-image: url('../img/linkedin.svg');
  mask-image: url('../img/linkedin.svg');
}

.icon--download::before {
  -webkit-mask-image: url('../img/download.svg');
  mask-image: url('../img/download.svg');
}

.page__content-wrapper {
  padding-inline: var(--content__padding-inline);
  flex-grow: 1;
  @media (min-width: 75em) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.header__nav {
  font-size: 1rem;
  @media (min-width: 57em) {
    font-size: 1.25rem;
    font-weight: 400;
  }

  .page__header--sticky & {
    @media (min-width: 57em) {
      align-self: stretch;
      display: flex;
      align-items: stretch;
    }
  }

  ul {
    --gap: 0.25em;
    --link__padding-inline: 1em;

    margin: 0;
    padding-block: 0;
    /* Subtracting padding from links for optical alignment of text */
    padding-inline: var(--content__padding-inline);
    list-style: none;
    @media (min-width: 57em) {
      display: flex;
      gap: var(--gap);
    }
  }

    .page--home__header__content & ul,
    .page--home &.desktop-only ul {
      padding-inline: 0;
      /* Optically align first link with text */
      margin-inline: calc(var(--link__padding-inline) * -1) 0;
    }

  li {
    display: block;
    white-space: nowrap;
    .page__header--sticky & {
      display: flex;
    }
  }

  a {
    display: inline-block;
    padding: 0.25em var(--link__padding-inline);
    border-radius: 0;
    @media (min-width: 57em) {
      display: block;
      transition: color 0.25s ease;
      outline: 0;
      box-shadow: none;
    }

    &.active {
      box-shadow: inset 0 -3px 0 var(--c-accent--light--text);
    }

    &::before {
      @media (min-width: 75em) {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        background-color: transparent;
        transform: translateY(50%) translateX(6%) skew(12deg);
        transition:
          transform 0.25s ease,
          background 0.25s;
        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }

      &:hover,
      &:focus {
        @media (min-width: 57em) {
          color: var(--c-accent--dark);
          text-decoration: none;
        }

        &::before {
          @media (min-width: 57em) {
            background-color: var(--c-accent--secondary);
            transform: skew(12deg);
          }
        }
      }
    }

    .page__header--sticky & {
      display: flex;
      align-items: end;
      @media (min-width: 57em) {
        /* Measured in browser to align baseline of logo */
        padding-bottom: 0.8em;
      }
    }
  }
}

.header__nav--mobile[class] {
  display: none;

  .mobile-menu__dropdown--active & {
    display: block;
  }
}

.content-header__wrapper {
  --surface__background: var(--c-accent--lighter);

  position: relative;
  z-index: 0;
  padding-block: 4em 3em;
  margin-bottom: 3em;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    display: block;
    width: auto;
    height: 200%;
    aspect-ratio: 3 / 1;
    transform: skew(12deg) translate(-50%, -50%);
    transform-origin: left bottom;
    border-radius: 50%;
    background-color: var(--surface__background);
    background-image: linear-gradient(
      173deg,
      #52ffe5 50%,
      var(--surface__background) calc(50% + 5em)
    );
    background-position: center center;
    @media (min-width: 44em) {
      transform: skew(12deg) translate(-40%, -50%);
      transform-origin: left bottom;
      width: 300vw;
      height: 200%;
      aspect-ratio: 6 / 1;
    }
  }

  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.content-header__img-wrapper {
  /* This needs to be the dimensions of the image */
  --img__aspect-ratio: 1 / 1;

  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0 auto 2em;
  aspect-ratio: var(--img__aspect-ratio);
  @media (min-width: 44em) {
    /* Measured in browser to align with h1 */
    --vertical-offset: -4.325em;

    float: right;
    width: 33.333%;
    max-width: 100%;
    margin-left: 3em;
    /* Bring in line with heading */
    transform: translateY(var(--vertical-offset));
    margin-bottom: var(--vertical-offset);
  }
  @media (min-width: 57em) {
    /* Adjusts height in layout */
    margin-right: -3em;
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    display: block;
    background: linear-gradient(12deg, var(--c-accent--light), var(--c-accent));
    opacity: 0.5;
    width: 105%;
    aspect-ratio: var(--img__aspect-ratio);
    transform: translate(-52%, -50%) rotate(-6deg);
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
    box-shadow: 3px 3px 0 0 #45C4B0aa;
  }
}

.content-header__headline {
  margin: 0 0 1.5rem;
}

.content-header__content {
  @media (min-width: 44em) {
    width: calc(66.77% - 3em);
  }
  @media (min-width: 44em) {
    width: 66.77%;
  }
}


.page__footer {
  padding: 0.75em calc(var(--page__padding-inline) * 3);
  border-top: 4px solid var(--c-accent--light);
  font-size: 0.75em;
  font-weight: 400;
  text-align: center;
  color: #fff;
  background: var(--c-accent);
}


/*******************************************************
 * Utility styles
 */

/**
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important;
}

/**
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  /* 1 */
}

/**
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  white-space: inherit;
}

.mobile-only[class][class] {
  display: var(--display, block);
  @media (min-width: 35em) {
    display: none;
  }
}

.mobile-tablet-only[class][class] {
  display: var(--display, block);
  @media (min-width: 57em) {
    display: none;
  }
}

.tablet-desktop-only[class][class] {
  display: none;
  @media (min-width: 35em) {
    display: var(--display, block);
  }
}

.desktop-only[class][class] {
  display: none;
  @media (min-width: 57em) {
    display: var(--display, block);
  }
}