/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/*******************************************************
 * Vars and Settings
 * Breakpoints:
 *   35em
 *   44em
 *   57em
 *   75em

 */
: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) {
:root {
    --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) {

body {
    font-size: 1.25em
}
  }

@media (min-width: 44em) {

body {
    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 {
  text-shadow: none;
  color: var(--font__color--base);
  background: var(--c-accent--secondary);
}

::-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;
}

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

:where(a):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);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

button:hover,
  button:focus,
  .button:hover,
  .button: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;
}

.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;
}

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

.icon::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');
}

/****************************
 * 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);
  view-transition-name: none;
}

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

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

@media (min-width: 35em) {

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

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

@media (min-width: 44em) {

.page__header,
.page__header--sticky[class][class] {
    grid-template-rows: 1fr min-content min-content;
    grid-template-columns: min-content 1fr;
    row-gap: 0
}
  }

@media (min-width: 57em) {

.page__header,
.page__header--sticky[class][class] {
    grid-template-columns: min-content 1fr min-content;
    grid-column: 1 / -1;
    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);
  transition: box-shadow 0.25s ease;
}

.page__header--sticky[class][class]:has(.mobile-menu--expanded) {
    box-shadow: none;
  }

.page__header--sticky[class][class].is-sticky {
    display: var(--display);
    animation: slideInDown 0.25s ease forwards;
  }

@media (prefers-reduced-motion: reduce) {

.page__header--sticky[class][class].is-sticky {
      animation: none
  }
    }

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

:where(.page--home) .page__header-wrapper::before, .wordmark::before {
    content: '';
    align-self: start;
    display: block;
    width: calc(100% + 5rem);
    height: 100%;
    background: var(--c-accent) 35%;
    border-right: 0.5em solid var(--c-accent--light);
    transform: skewX(12deg) translateX(-5rem);
    transform-origin: right bottom;
  }

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

.wordmark {
  justify-self: start;
  position: relative;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0.4em 3rem 0.5em 0.75em;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  color: #fff;
}

@media (min-width: 44em) {

.wordmark {
    font-size: 2.5em
}
  }

@media (min-width: 57em) {

.wordmark {
    grid-row: 1 / span 2
}
  }

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

.wordmark::before {
    position: absolute;
    top: 0;
    left: 0;
  }

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

a.wordmark span {
    transition: transform 0.25s ease;
  }

a.wordmark::before {
    transition: background 0.25s ease;
  }

a.wordmark:hover,
  a.wordmark: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);
  }

a.wordmark:hover::before, a.wordmark:focus::before {
      background-color: var(--c-accent--dark);
    }

a.wordmark:hover span, a.wordmark:focus 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) {

.header__name {
    grid-row: 2;
    grid-column: 1;
    align-items: center;
    margin: 0
}
  }

@media (min-width: 44em) {

.header__name {
    grid-row: 1 / span 1;
    grid-column: 2;
    align-items: baseline;
    padding-bottom: 0;
    padding-left: 2rem;
    font-size: 1.75em
}
  }


@media (min-width: 44em) {


.home__name ruby, .resume__name ruby {
      display: flex;
      align-items: baseline;
      gap: 0.4em;
      margin: 0 -3px;
      border-radius: 0.25em
  }
    }


.home__name ruby:focus, .resume__name ruby:focus {
      border: 0;
      outline: 0;
    }


.home__name ruby:focus rt,
    .home__name ruby:hover rt,
    .resume__name ruby:focus rt,
    .resume__name ruby:hover rt {
      opacity: 1;
    }


.home__name ruby rt, .resume__name ruby rt {
      opacity: 0.5;
      white-space: nowrap;
      color: var(--font__color);
      font-weight: 400;
    }


@media (min-width: 44em) {


.home__name ruby rt, .resume__name ruby rt {
        display: inline-block;
        color: inherit;
        font-weight: 600
    }
      }


@media (min-width: 57em) {
        .home__name ruby rt::before, .resume__name ruby rt::before {
          content: '(';
        }
        .home__name ruby rt::after, .resume__name ruby rt::after {
          content: ')';
        }
      }

.header__burger {
  display: none;
}

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

.header__burger[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"] .burger__icon {
    /* 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 */

.burger__icon::before,
  .burger__icon::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 */

.burger__icon::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) {

.burger__icon::before {
      transition: transform var(--burger__animation-duration) var(--burger__animation-timing)
  }
    }

/* Hamburger bottom bar - Closed/default */

.burger__icon::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) {

.burger__icon::after {
      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"] .burger__icon:before {
      border-top-color: var(--burger__bar-color);
      transform:
        rotate(45deg);
      transform-origin: var(--burger__transform-origin);
    }

/* Hamburger bottom bar - Open Menu */

[aria-expanded="true"] .burger__icon: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;
}

.mobile-menu__dropdown--active,
  .mobile-menu__dropdown--active a {
    color: var(--c-accent--darker);
  }

.mobile-menu__dropdown--active.mobile-menu--expanded {
    grid-template-rows: 1fr;
  }

.mobile-menu__dropdown--active.mobile-menu--expanded::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);
    }

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

.mobile-menu__dropdown--active.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;
}

.pdf-version:hover,
  .pdf-version: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 .pdf-version {
    position: static;
    width: -moz-min-content;
    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;
  }

.mobile-menu__dropdown--active .pdf-version .icon {
      order: 1;
    }

.mobile-menu__dropdown--active .pdf-version:hover,
    .mobile-menu__dropdown--active .pdf-version:focus {
      background: var(--c-background__blueish);
    }

.pdf-version .icon {
    width: 1.5em;
    height: 1.5em;
    border: 0;
  }

.pdf-version .icon::before {
      width: 1.5em;
      width: 1.5em;
      -webkit-mask-size: contain;
      mask-size: contain;
    }


@media (min-width: 57em) {


.header__nav {
    display: flex;
    height: 100%;
    font-size: 1.0625rem;
    font-weight: 400
}
  }


@media (min-width: 65em) {


.header__nav {
    font-size: 1.25rem
}
  }


@media (min-width: 57em) {


.page__header--sticky .header__nav {
      align-self: stretch;
      display: flex;
      align-items: stretch
  }
    }


.header__nav ul {
    --gap: 0.25em;
    --link__padding-inline: 1.5em;

    margin: 0;
    padding-block: 0;
    /* Subtracting padding from links for optical alignment of text */
    padding-inline: 0.75em;
    list-style: none;
  }


@media (min-width: 57em) {


.header__nav ul {
      display: flex;
      height: 100%;
      gap: var(--gap);
      overflow: hidden
  }
    }


.header__nav li {
    white-space: nowrap;
  }


.page__header--sticky .header__nav li {
      display: flex;
    }


@media (min-width: 57em) {


.header__nav li {
      display: flex;
      height: 100%
  }
    }


.header__nav a {
    position: relative;
    display: inline-block;
    padding: 0.25em var(--link__padding-inline);
    border-radius: 0;
  }


@media (min-width: 57em) {


.header__nav a {
      display: flex;
      padding-top: 2em;
      height: 100%;
      outline: 0;
      box-shadow: none;
      transition: color 0.25s ease
  }
    }


@media (min-width: 57em) {


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


.header__nav a::before {
          transition: none
    }
        }
      }


@media (min-width: 57em) {


.header__nav a:hover,
    .header__nav a:focus {
        color: var(--c-accent--dark);
        text-decoration: none
    }
      }


@media (min-width: 57em) {


.header__nav a:hover::before, .header__nav a:focus::before {
          background-color: var(--c-accent--secondary);
          transform: skew(12deg)
      }
        }


.header__nav a.active {
      color: var(--c-accent);
    }


@media (min-width: 57em) {


.header__nav a.active::before {
          background-color: var(--c-accent--secondary);
          background-image: linear-gradient(
            to top,
            var(--c-accent--light),
            var(--c-accent--secondary) 5%
          );
          background-position: 100% 0;
          transform: skew(12deg)
      }
        }


.page__header--sticky .header__nav a {
      display: flex;
      align-items: end;
    }


@media (min-width: 57em) {


.page__header--sticky .header__nav a {
        padding-top: 0;
        /* Measured in browser to align baseline of logo */
        padding-bottom: 1.49em
    }
      }


@media (min-width: 75em) {


.page__header--sticky .header__nav a {
        text-indent: 0.15em;
        /* Measured in browser to align baseline of logo */
        padding-bottom: 1.205em
    }
      }

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

.mobile-menu__dropdown--active .header__nav--mobile[class] {
    display: block;
  }

.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) {

.header__social {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
    padding: 0
}
  }

@media (min-width: 44em) {

.header__social {
    font-size: 0.875rem;
    grid-column: 2 / span 1
}
  }

@media (min-width: 57em) {

.header__social {
    align-self: center;
    justify-self: end;
    grid-row: 1;
    grid-column: 3 / span 1;
    padding-top: 1em;
    padding-left: 0
}
  }

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

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

.header__social a {
    transition: box-shadow 0.25s;
  }

.header__social a:hover {
    box-shadow: 0 0 0 2px var(--c-accent--light);
  }

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

.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);
}

.attribution__photo-wrapper {
  position: relative;
  z-index: -1;
  grid-row: 1 / span 4;
  grid-column: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
}

@media (min-width: 35em) {

.attribution__photo-wrapper {
    align-self: end;
    grid-row: 1 / span 3
}
  }

.attribution__photo-wrapper img {
    max-width: 100%;
    box-shadow: 3px 3px 0 0 #45C4B0aa;
  }

.attribution__photo-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    display: block;
    background: var(--c-accent--lighter);
    width: 115%;
    aspect-ratio: 1 / 1;
    transform: translate(-52%, -50%) rotate(-6deg);
  }

@media (min-width: 44em) {

.attribution__name,
.attribution__time,
.attribution__title {
    padding-right: 1.5em
}
  }

@media (min-width: 57em) {

.attribution__name,
.attribution__time,
.attribution__title {
    padding-right: 0
}
  }

.attribution__name {
  grid-column: 2;
  align-self: end;
  font-weight: bold;
  font-size: 1.25em;
}

.attribution__time {
  grid-column: 2;
}

.attribution__title {
  padding-bottom: 0.25em;
  font-weight: 500;
  grid-column: 2;
}

@media (min-width: 57em) {

.attribution__title {
    grid-column: 1 / -1;
    padding-top: 0.75em
}
  }

.attribution__logo {
  align-self: end;
  grid-column: 2;
  width: var(--logo__width);
  max-width: 100%;
  margin: 0.75em 0;
}

@media (min-width: 35em) {

.attribution__logo {
    grid-row: 1 / span 3;
    grid-column: 3;
    margin: 1.5em 0
}
  }

@media (min-width: 57em) {

.attribution__logo {
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 0.5em 0
}
  }

/******************************
 * Recommendations
 */
.recommendations {
  --attribution__width: 15em;
  --gap: 1.5em;
  --surface__background: var(--c-background__blueish);
  --content__padding--inline: calc(var(--page__padding-inline) * 1);

  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  padding: 3em var(--page__padding-inline) 5em;
  background-color: var(--surface__background);
}
@media (min-width: 44em) {
.recommendations {
    --content__padding--inline: calc(var(--page__padding-inline) * 3)
}
  }
@media (min-width: 57em) {
.recommendations {
    font-size: 1.125rem
}
  }
@media (min-width: 75em) {
.recommendations {
    font-size: inherit
}
  }
.recommendations::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 50%;
    border-top: 0.125em solid var(--c-accent--light);
    transform: skew(0, -5deg);
    transform-origin: left top;
    background-image: linear-gradient(
      to bottom,
      #aafff2 0,
      var(--surface__background) 10em
    );
    background-repeat: repeat-x;
  }
@media (min-width: 35em) {
.recommendations::before {
      transform: skew(0, -3deg)
  }
    }
@media (min-width: 57em) {
.recommendations::before {
      transform: skew(0, -1deg)
  }
    }
.recommendations ul[aria-labelledby] {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
.recommendations ul[aria-labelledby] > li {
      position: relative;
      z-index: 0;
      margin: 0;
      padding: 0;
    }
.recommendations ul[aria-labelledby] > li + li {
        margin-top: 1em;
        padding-top: 5em;
      }
@media (min-width: 44em) {
.recommendations ul[aria-labelledby] > li + li {
          margin-top: 3em;
          padding-top: 6em
      }
        }
.recommendations ul[aria-labelledby] > li + li::before,
        .recommendations ul[aria-labelledby] > li + li::after {
          content: '';
          position: absolute;
          top: 0;
          left: calc(var(--page__padding-inline) * -1);
          display: block;
          width: calc(100% + var(--page__padding-inline) * 2);
          -webkit-mask-repeat: repeat-x;
                  mask-repeat: repeat-x;
          -webkit-mask-size: 2.5em auto;
                  mask-size: 2.5em auto;
        }
.recommendations ul[aria-labelledby] > li + li::before {
          z-index: -2;
          height: 100%;
          background-image: linear-gradient(
            175deg,
            #bffff5 0,
            transparent 10em
          );
          background-repeat: repeat-x;
          -webkit-mask-image: url(/img/wave-fill.svg);
                  mask-image: url(/img/wave-fill.svg);
          -webkit-mask-position: left top;
                  mask-position: left top;
        }
.recommendations ul[aria-labelledby] > li + li::after {
          z-index: -1;
          height: 100%;
          background-image: linear-gradient(
            170deg,
            #66e0ce 0,
            #cdf8f2 100%
          );
          -webkit-mask-image:
            url(/img/wave-border.svg);
                  mask-image:
            url(/img/wave-border.svg);
          -webkit-mask-position: 0 0;
                  mask-position: 0 0;
        }

.recommendations__headline,
.recommendations__note,
.recommendation {
  padding: 0 var(--content__padding--inline);
}

.recommendations__headline {
  font-weight: 200;
  text-align: center;
  margin: 0;
}

.recommendations__note {
  margin: 0.5em 0 4em;
  font-size: 0.875em;
  text-align: center;
  color: var(--c-accent);
}

.recommendations__note a {
    border-radius: 0;
  }

.recommendations__note a span {
      padding: 0.125em 0.25em;
      box-shadow: inset 0 -1px 0 0 var(--c-accent--light);
    }

.recommendations__note a:hover,
    .recommendations__note a:focus {
      padding-block: 0.125em;
      box-shadow: inset 0 -1px 0 0 var(--c-accent--light);
      text-decoration: none;
    }

.recommendations__note a:hover span, .recommendations__note a:focus span {
        background: #fffc;
        box-shadow: inset -1px -1px 0 0 var(--c-accent--light);
      }

.recommendation {
  margin: 0 auto;
  padding: 0 var(--content__padding--inline);
  font-weight: 300;
}

@media (min-width: 57em) {

.recommendation {
    display: grid;
    grid-template-columns: var(--attribution__width) 1fr;
    gap: var(--gap)
}
  }

.recommendation :where(span).highlighted {
    background: #fff;
    padding-block: 0.25em;
    padding-inline: 0.5em;
    background: linear-gradient(#fff 0 0) 0/100% calc(1.65em) no-repeat;
    box-decoration-break: clone;
    box-shadow: 2px 2px 0 0 var(--c-accent--lighter);
    -webkit-box-decoration-break: clone;
  }

/* Align the left edge of a highlighted paragraph with other text */

.recommendation :where(p).highlighted {
    margin-left: -0.5em;
  }

.recommendation__content {
  max-width: 30em;
}

@media (min-width: 75em) {

.recommendation__content {
    max-width: 100%;
    -moz-column-count: 2;
         column-count: 2;
    gap: var(--gap)
}
  }

@media print {

.recommendation__content {
    -moz-column-count: 2;
         column-count: 2;
    max-width: 100%
}
  }

.attribution {
  --image__width: 7em;
  --logo__width: 7em;

  display: grid;
  grid-template-columns: var(--image__width) 1fr;
  grid-template-rows: 1fr;
  grid-auto-rows: min-content;
  gap: 0 1em;
  font-size: 0.75em;
  line-height: 1.4;
  margin-bottom: 2em;
}

@media (min-width: 35em) {

.attribution {
    --logo__width: 9em;

    grid-template-columns: var(--image__width) 1fr var(--logo__width)
}
  }

@media (min-width: 57em) {

.attribution {
    grid-template-columns: var(--image__width) 1fr;
    /* Make sure first row takes up all the vertical space minus the room for the date */
    grid-template-rows: calc(7em - 1.4em)
}
  }

.attribution :where(span),
  .attribution :where(time) {
    display: block;
  }

.attribution :where(img) {
    display: block;
  }

.me-n-my-geetar {
  /* Image dimensions */
  --image-aspect-ratio: 527 / 690;
  --mask-size: 4em;

  position: relative;
  z-index: 0;
  width: calc(100% + var(--page__padding-inline) * 2);
  margin-left: calc(var(--page__padding-inline) * -1);
  padding-top: 4em;
  background: var(--c-accent);
  -webkit-mask-image: url(/img/wave-fill.svg);
          mask-image: url(/img/wave-fill.svg);
  -webkit-mask-size: var(--mask-size);
          mask-size: var(--mask-size);
  -webkit-mask-position: center top;
          mask-position: center top;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}

@media (min-width: 35em) {

.me-n-my-geetar {
    grid-row: 2 / span 3;
    grid-column: 1;
    aspect-ratio: var(--image-aspect-ratio);
    width: auto;
    height: 100%;
    padding: 0;
    align-self: end;
    justify-self: end;
    /* Measured in browser */
    margin-right: 4rem;
    -webkit-mask: none;
            mask: none;
    background: none
}
  }

@media (min-width: 57em) {

.me-n-my-geetar {
    grid-row: 1 / span 4;
    padding-top: 5em;
    /* Measured in browser to keep image from overlapping border */
    margin-right: 6vw
}
  }

@media (min-width: 75em) {

.me-n-my-geetar {
    margin-right: 5vw
}
  }

/* Wavy top border on image at mobile */

.me-n-my-geetar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: var(--mask-size);
    background: var(--c-accent--light);
    -webkit-mask-image: url(/img/wave-chonky-border.svg);
            mask-image: url(/img/wave-chonky-border.svg);
    -webkit-mask-size: var(--mask-size);
            mask-size: var(--mask-size);
    -webkit-mask-position: center top;
            mask-position: center top;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
  }

@media (min-width: 35em) {

.me-n-my-geetar::after {
      content: none
  }
    }

.me-n-my-geetar__inner {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 350px;
  height: auto;
  margin: 0 auto;
  aspect-ratio: var(--image-aspect-ratio);
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}

@media (min-width: 35em) {

.me-n-my-geetar__inner {
    width: auto;
    max-width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain
}
  }

.me-n-my-geetar__inner::before,
  .me-n-my-geetar__inner img {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
  }

.js .me-n-my-geetar__inner img {
      -webkit-mask-image: url(/img/geetar-mask.png);
              mask-image: url(/img/geetar-mask.png);
      -webkit-mask-position: center bottom;
              mask-position: center bottom;
      -webkit-mask-size: contain;
              mask-size: contain;
    }

.me-n-my-geetar__inner::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -2;
    background: url(/img/infaltable-geetar-electric-green.jpg);
    background-size: cover;
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 0;
    transition: opacity 3s ease;
  }

.no-js .me-n-my-geetar__inner::before,
  .loaded .me-n-my-geetar__inner::before {
    opacity: 1;
  }

.me-n-my-geetar__inner::after {
    content: '';
    position: absolute;
    left: 0;
    top: 39%;
    display: block;
    width: 30%;
    aspect-ratio: 1 / 1;
    background-image: linear-gradient(
      to bottom,
      #9768D2 0%,
      #9768D2 50%,
      transparent 50%,
      transparent 100%
    );
    background-size: auto 15%;
    background-repeat: repeat;
    transform: rotate(30deg) translate(30%);
    transform-origin: left bottom;
    transition:
      transform 1.5s ease-in-out,
      opacity 1s ease-out;
    opacity: 0;
  }

.no-js .me-n-my-geetar__inner::after,
  .js.loaded .me-n-my-geetar__inner::after {
    opacity: 1;
    transform: rotate(30deg);
    transform-origin: left bottom;
  }

.me-n-my-geetar__inner-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/img/electric-green-rays.png);
    background-size: contain;
    transform: rotate(-12deg);
    transform-origin: 190% 200%;
    opacity: 0;
    transition:
      transform 2s 1.25s ease-out,
      opacity 2s 1.25s ease-out;
  }

.no-js .me-n-my-geetar__inner-2::before,
  .loaded .me-n-my-geetar__inner-2::before {
    opacity: 1;
    transform: none;
  }

.me-n-my-geetar__inner-2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 150%;
    width: 1px;
    height: 1px;
  }

.page--home {
  padding-top: 0;
  padding-bottom: 0;
}

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

  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding-block: 0;
  padding-inline: var(--page__padding-inline);
  background: var(--surface__background);
}

.page__header-wrapper:has(.is-sticky) {
    z-index: 500;
  }

@media (min-width: 35em) {

.page__header-wrapper {
    --total-rows: 3;

    display: grid;
    grid-template-rows: 1fr min-content 1fr;
    grid-auto-rows: min-content;
    /* First col is 300px, measured in browser */
    grid-template-columns: 18.75rem 1fr
}
  }

@media (min-width: 57em) {

.page__header-wrapper {
    --total-rows: 4;

    grid-template-rows: 1fr 3rem min-content 1fr;
    grid-template-columns: repeat(3, minmax(0, 26em));
    gap: 1em
}
  }

@media (min-width: 75em) {

.page__header-wrapper {
    grid-template-columns: 1fr repeat(3, minmax(0, 26em)) 1fr
}
  }

@media (min-width: 35em) {

.page__header-wrapper::before {
      content: '';
      position: relative;
      left: 0;
      z-index: 0;
      width: 200%;
      grid-row: 1 / span var(--total-rows);
      grid-column: 1;
      align-self: stretch;
      justify-self: end;
      border-right-width: 1.25em;
      transform: skewX(12deg);
      transform-origin: right bottom
  }
    }

@media (min-width: 75em) {

.page__header-wrapper::before {
      grid-column: 1 / span 2;
      border-right-width: 1.25em;
      transform: translate(1vw) skewX(12deg)
  }
    }

/* Make sure bottom white space doesn't collapse */

@media (min-width: 57em) {

.page__header-wrapper::after {
      content: '';
      display: block;
      grid-column: 1 / -1;
      grid-row: 4;
      min-height: 3em
  }
    }

.page__header--fancy {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 0;
  padding-inline: 0;
}

@media (min-width: 35em) {

.page__header--fancy {
    grid-row: 1 / span var(--total-rows);
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    gap: 1em;
    height: 100vh;
    max-height: 45vw /* Measured in browser */
}
  }

@media (min-width: 75em) {

.page__header--fancy {
    grid-column: 2 / -2
}
  }

.page__header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.page__header--fancy .wordmark {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  font-size: 2em;
  padding-left: 0.5em;
  padding-right: 1.5em;
}

@media (min-width: 35em) {

.page__header--fancy .wordmark {
    padding-left: 1em
}
  }

@media (min-width: 44em) {

.page__header--fancy .wordmark {
    padding-left: 0.5em
}
  }

@media (min-width: 75em) {

.page__header--fancy .wordmark {
    font-size: 3em
}
  }

@media (min-width: 80em) {

.page__header--fancy .wordmark {
    padding-left: 1em
}
  }

.page__header--fancy .wordmark::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0;
    top: 0;
    bottom: 0;
    align-self: stretch;
    justify-self: end;
    border-right-width: 0.25em;
  }

@media (min-width: 35em) {

.page__header--fancy .wordmark::before {
      content: none
  }
    }

.page__header--fancy .header__nav.desktop-only {
  height: auto;
  height: 100%;
}

.page__header--fancy .header__nav.desktop-only ul {
    overflow: visible;
  }

.page__header--fancy .header__nav.desktop-only a {
    align-items: center;
  }

@media (min-width: 57em) {

.page__header--fancy .header__nav.desktop-only a {
      padding: 0.3em 0.75em;
      --link__padding-inline: 0.75em
  }
    }

@media (min-width: 57em) {

.page__header--fancy .header__nav.desktop-only a::before {
        height: 125%;
        /* Measured in browser to fall into center and look like it's coming from the right angle */
        transform: translate(-1em, -100%) skew(12deg)
    }
      }

@media (min-width: 75em) {

.page__header--fancy .header__nav.desktop-only a::before {
        height: 100%;
        /* Measured in browser to center it */
        transform: translate(-1.3em, -100%) skew(12deg)
    }
      }

@media (min-width: 57em) {

.page__header--fancy .header__nav.desktop-only a:hover::before, .page__header--fancy .header__nav.desktop-only a:focus::before {
          transform: translate(-0.15em, -25%) skew(12deg)
      }
        }

@media (min-width: 75em) {

.page__header--fancy .header__nav.desktop-only a:hover::before, .page__header--fancy .header__nav.desktop-only a:focus::before {
          transform: translate(-0.25em, -20%) skew(12deg)
      }
        }

.header__nav.mobile-tablet-only {
  font-size: 1rem;
}

@media (min-width: 35em) {

.header__nav.mobile-tablet-only {
    grid-row: 3;
    grid-column: 2 / span 2
}
  }

@media (min-width: 57em) {

.header__nav.mobile-tablet-only {
    grid-row: 2;
    grid-column:  2 / span 2;
    align-self: center
}
  }

@media (min-width: 75em) {

.header__nav.mobile-tablet-only {
    font-size: 1.25rem
}
  }

.page__header--fancy .header__nav.mobile-tablet-only > ul {
    --link__padding-inline: 1em;

    padding: 0;
    transform: translate(calc(var(--link__padding-inline) * -1));
  }

.is-sticky .header__nav.mobile-tablet-only {
    grid-column: 2;
    grid-row: 1;
  }


.page--home__header__content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
  padding-top: 2em;
  padding-inline: calc(var(--page__padding-inline) * 2);
  font-size: 1.25rem;
}


@media (min-width: 35em) {


.page--home__header__content {
    grid-row: 2;
    grid-column: 2 / span 2;
    padding: 0
}
  }


@media (min-width: 57em) {


.page--home__header__content {
    grid-row: 3;
    font-size: 2rem
}
  }


@media (min-width: 85em) {


.page--home__header__content {
    font-size: 3rem
}
  }


.page--home__header__content h1 {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 1.333em;
  }


.page--home__header__content p {
    margin: 0;
    font-weight: 200;
    line-height: 1.25;
  }

.home__name {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  align-items: end;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1;
  color: var(--c-accent);
}

@media (min-width: 44em) {

.home__name {
    grid-row: 1 / span 1;
    grid-column: 2;
    align-items: baseline
}
  }

.home__name[class] rt {
    font-weight: 400;
  }

@media (min-width: 57em) {

.home__name[class] rt {
      opacity: 1;
      font-weight: 200
  }
    }

.page__content-wrapper {
  padding: 0;
}

/* Fancy bullets for lists */
.work-example > ul,
.previous-talk__info-wrapper > ul,
.experience-list > li > .experience-list__details,
.experience-list__subsection ul,
.recommendation__content ul {
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
.work-example > ul li, .previous-talk__info-wrapper > ul li, .experience-list > li > .experience-list__details li, .experience-list__subsection ul li, .recommendation__content ul li {
    margin-bottom: 0.25em;
  }
.work-example > ul li, .previous-talk__info-wrapper > ul li, .experience-list > li > .experience-list__details li, .experience-list__subsection ul li, .recommendation__content ul li {
    list-style: none;
    position: relative;
  }
.work-example > ul li::before, .previous-talk__info-wrapper > ul li::before, .experience-list > li > .experience-list__details li::before, .experience-list__subsection ul li::before, .recommendation__content ul li::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);
    }
.work-example > ul li > ul > li::before, .previous-talk__info-wrapper > ul li > ul > li::before, .experience-list > li > .experience-list__details li > ul > li::before, .experience-list__subsection ul li > ul > li::before, .recommendation__content ul li > 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) {
.work-examples__wrapper,
.previous-talks__list {
    --bleed: 4em
}
  }
@media (min-width: 75em) {
.work-examples__wrapper,
.previous-talks__list {
    --bleed: 8em
}
  }
.work-examples__wrapper > li,
  .work-examples__wrapper > dt,
  .previous-talks__list > li,
  .previous-talks__list > dt {
    position: relative;
    z-index: 0;
  }
.work-examples__wrapper > li + li,
  .work-examples__wrapper > dd + dt,
  .previous-talks__list > li + li,
  .previous-talks__list > dd + dt {
    margin: 3em 0 0;
    padding: 3em 0 0;
  }
.work-examples__wrapper > li + li::before, .work-examples__wrapper > dd + dt::before, .previous-talks__list > li + li::before, .previous-talks__list > dd + dt::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;
    }
/*******************************************************
 * 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) {

.mobile-only[class][class] {
    display: none
}
  }

.mobile-tablet-only[class][class] {
  display: var(--display, block);
}

@media (min-width: 57em) {

.mobile-tablet-only[class][class] {
    display: none
}
  }

.tablet-desktop-only[class][class] {
  display: none;
}

@media (min-width: 35em) {

.tablet-desktop-only[class][class] {
    display: var(--display, block)
}
  }

.desktop-only[class][class] {
  display: none;
}

@media (min-width: 57em) {

.desktop-only[class][class] {
    display: var(--display, block)
}
  }

/**
 * @todo Cheating for now
 */
.header__social.tablet-desktop-only {
  align-self: baseline;
}
@media (min-width: 35em) {
.header__social.tablet-desktop-only {
    justify-self: end;
    grid-row: 1;
    grid-column: 2
}
  }
@media (min-width: 57em) {
.header__social.tablet-desktop-only {
    grid-column: 3
}
  }