/* === === === Container Queries === === === */

#mentorship-packs {
  container-type: inline-size;
}

@container (min-width: 1204px) {
  .pack-row {
    flex-direction: row;
  }
}

/* === === === Main Layout === === === */

html {
  display: flex;
}

.w-\[page\] {
  width: calc(100vw - var(--page));
}

.\*-w-\[page\] > * {
  width: calc(100vw - var(--page));
}

.max-w-\[page\] {
  max-width: calc(100vw - var(--page));
}

.\*-max-w-\[page\] > * {
  max-width: calc(100vw - var(--page));
}

.mx-\[page\] {
  margin-left: var(--page); 
  margin-right: var(--page); 
}



body {
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
  font-family: var(--font-stack);
  color: var(--foreground);
  position: relative;
  cursor: url(../images/cursor-arrow.svg), auto;

  background-image: radial-gradient(var(--middleground) 2px, transparent 2px);
  background-size: var(--grid-gap-large) var(--grid-gap-large);
  background-color: var(--background);
  background-position: var(--grid-gap-small) var(--grid-gap-small);
}

[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

body[data-body-layout="grid"] {
  display: grid;
  grid-template-columns: var(--body-grid-cols);
  width: 100vw;
  max-width: 100vw;
}

body[data-body-layout="flex"] {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

[data-layout="grid"] {
  display: grid;
  grid-column: 2;
  grid-template-columns: var(--main-grid-cols);
  grid-auto-rows: auto;
  padding: var(--grid-gap-largest) 0 var(--grid-gap-large) 0;
  row-gap: calc(var(--vert-gap-largest) * 2);
}

[data-layout="flex"] {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  padding: var(--grid-gap-largest) 0 var(--grid-gap-large) 0;
  gap: calc(var(--vert-gap-largest) * 2);
}

section {
  display: grid;
  grid-template-columns: var(--section-grid-cols);
  column-gap: var(--section-grid-gap);
  row-gap: var(--vert-gap-large);
  grid-template-rows: auto;
  height: fit-content;
}

section>* {
  display: grid;
  grid-column: var(--cols);
  grid-template-rows: auto;
  gap: var(--vert-gap-medium);
}

i {
  font-style: normal;
  white-space: nowrap;
}

.opacity-85 {
  opacity: 0.85;
}


/* === === === Hero === === === */

#hero {
  position: relative;
}

#icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap-large);
  z-index: 250;
}

.link-icon__wrapper {
  padding: 16px;
  margin: -16px;
}

.link-icon {
  display: flex;
  gap: 12px;
  font-weight: 700;
  color: var(--foreground);
  padding: 6px;
  border-radius: 4px;
}

.link-icon:hover {
  color: var(--background);
  background-color: var(--foreground);
}

.link-icon svg {
  fill: currentColor;
}

.text-vtex-400 {
  color: var(--pink-link);
}

.bg-vtex-400,
.text-vtex-400:hover {
  outline: 6px solid var(--pink-link);
  outline-offset: -1px;
  background-color: var(--pink-link);
  ;
  color: var(--background);
}

.text-gitlab-400 {
  color: var(--orange-link);
}

.bg-gitlab-400,
.text-gitlab-400:hover {
  outline: 6px solid var(--orange-link);
  outline-offset: -1px;
  background-color: var(--orange-link);
  ;
  color: var(--background);
}

.text-miro-400 {
  color: var(--yellow-link);
}

.bg-miro-400,
.text-miro-400:hover {
  outline: 6px solid var(--yellow-link);
  outline-offset: -1px;
  background-color: var(--yellow-link);
  color: var(--background);
}

.text-booking-400 {
  color: var(--blue-link);
}

.bg-booking-400,
.text-booking-400:hover {
  outline: 6px solid var(--blue-link);
  outline-offset: -1px;
  background-color: var(--blue-link);
  color: var(--background);
}

.text-devx-700 {
  color: #c294ff;
}

.bg-devx-700,
.text-devx-700:hover {
  outline: 6px solid #c294ff;
  outline-offset: -1px;
  background-color: #c294ff;
  color: var(--background);
}

.w-fit {
  width: fit-content;
}

.min-w-max-content {
  min-width: max-content;
}

.devportal-aww {
  max-width: 10rem;
  height: auto;
  z-index: 2
}

/* === === === Toolbar === === === */

#toolbar {
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  border: 4px solid var(--middleground);
  width: min-content;
  height: min-content;
  padding: 5px 4px;
  border-radius: 100px;
  position: fixed;
  right: var(--grid-gap-small);
  bottom: var(--grid-gap-medium);
  left: unset;
  top: unset;
  z-index: 300;
  box-shadow: 6px 6px 16px var(--shadowground);
  transform-origin: bottom center;
  transition:
    rotate var(--speed4) ease-in-out,
    right var(--speed4) ease-in-out,
    bottom var(--speed4) ease-in-out;
}

body[is-locked="true"] #toolbar {
  rotate: -955eg;
  right: -20px;
  bottom: 60px;
  transition:
    rotate var(--speed4) ease-in-out,
    right var(--speed4) ease-in-out,
    bottom var(--speed4) ease-in-out;
}

.toolbutton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  border-radius: 100px;
  height: 48px;
  width: 48px;
  padding: 0 10px;
  gap: var(--grid-gap-small);
  transition:
    color var(--speed1) ease-in,
    stroke var(--speed1) ease-in,
    opacity var(--speed1) ease-in,
    height var(--speed2) ease-in,
    width var(--speed2) ease-in,
    rotate var(--speed3) ease-in;
}

body[is-locked="true"] .toolbutton#lockButton {
  rotate: 90deg;
  background-color: var(--active);
  border: 2px solid var(--button-border);
}

body[is-locked="true"] .toolbutton:not(#lockButton) {
  pointer-events: none;
  opacity: 0;
  height: 0;
  width: 0;
  padding: 0;
  transition:
    color var(--speed1) ease-in,
    stroke var(--speed1) ease-in,
    opacity var(--speed2) ease-in,
    height var(--speed2) ease-in,
    width var(--speed2) ease-in;
}

body[is-locked="true"] .toolbutton:not(#lockButton):nth-child(n+4) {
  display: none;
}

.toolbutton span {
  font-weight: 700;
  font-family: var(--font-stack);
  color: var(--button-base);
  font-variant: small-caps;
}

.toolbutton svg path {
  color: var(--foreground);
  stroke: var(--foreground);
}

.toolbutton:hover,
.toolbutton--active {
  background-color: var(--active);
  border: 2px solid var(--button-border);
}

.toolbutton:hover {
  outline: 2px solid var(--active);
  outline-offset: 2px;
}

/* .toolbutton:active:before,  */
.toolbutton:hover:before,
.toolbutton:focus:before,
.toolbutton--label:before {
  white-space: nowrap;
  content: attr(tooltip-text);
  color: var(--tooltip-front);
  background-color: var(--tooltip-base);
  position: absolute;
  outline: 2px solid var(--background);
  opacity: 1;
  right: 140%;
  top: 8px;
  padding: 4px 10px;
  border-radius: 80px;
}

/* body[is-locked="true"] .toolbutton:before {
    display: none;;
    opacity: 1;
    transition: opacity 250ms 2s ease-in-out;
}

body[is-locked="false"] .toolbutton:before {
    display: block;; 
    opacity: 0;;
    transition: opacity 250ms 2s ease-in-out;
}

body[is-locked="true"] .toolbutton#lockButton:before {
    opacity: 0;
    transition: none;
} */

.toolbutton:hover span,
.toolbutton--active span {
  color: var(--foreground);
}

.toolbutton:hover svg path,
.toolbutton--active svg path,
body[is-locked="true"] #lockButton svg path {
  stroke: var(--svg-hover-color);
  color: var(--svg-hover-color);
}

/* === === === Headshots === === === */
#headshot {
  gap: 0;
  font-family: var(--font-stack-heads);
  font-weight: 500;
}

#headshot *+* {
  margin-top: var(--top, -2px);

}

#headshot *:nth-last-of-type(n-1) {
  margin-left: -2px;
}

#headshot *:nth-child(6) {
  text-shadow:
    2px 2px 0 hsla(256, 5%, 40%, 0.8),
    4px 4px 0 hsla(256, 5%, 30%, 0.5),
    6px 6px 0 hsla(256, 5%, 20%, 0.3);
}


#headshot>*:not(.extra) {
  align-items: center;
  border: 2px solid var(--foreground);
  display: flex;
  flex-direction: column;
  grid-row: var(--row);
  height: calc(var(--grid-gap-larger) * 2);
  justify-content: center;
  text-align: var(--text, center);
  padding: 32px;
}

#headshot-1 {
  --cols: span 18;
  --row: auto;
  --text: left
}

#headshot-2 {
  --cols: span 2;
  --h: calc(100% + 2px);
}

#headshot-3 {
  --cols: span 16;
  --text: left
}

#headshot-4 {
  --cols: span 18
}

#headshot-5 {
  --cols: span 15;
  --text: left;
}

#headshot-6 {
  --cols: span 3;
  --h: calc(100% + 2px);
}

*[id^="headshot-"] {
  background-color: transparent;
}

*[id^="headshot-"]:active,
*[id^="headshot-"]:hover {
  color: hsl(300, 23%, 23%);
  background-color: rgb(244, 234, 218) !important;
  transition: background-color ease-in 150ms, box-shadow ease-in 200ms;
  box-shadow: inset 0 0 2px hsla(var(--hue1), 35%, 20%, 0.5);
}

.dark-mode *[id^="headshot-"]:active,
.dark-mode *[id^="headshot-"]:hover {
  color: var(--foreground);
  transition: background-color ease-in 150ms, box-shadow ease-in 200ms;
  background-color: var(--middleground) !important;
  box-shadow:
    0 0 8px 5px hsla(var(--hue1), 35%, 40%, 0.8),
    inset 0 0 10px hsla(var(--hue1), 35%, 20%, 0.5);
}

/* === === === Work === === === */

#work {
  --cols: 1 / all
}

#work-intro {
  --cols: 4 / 16;
  margin: 24px 0 -16px 0;
}

.work-header {
  --cols: 1 / 16;
  color: var(--foreground);
  font-weight: 700;
  font-size: 16px;
  margin: 24px 0 -16px 0;
}

.deg2 {
  rotate: 2deg;
}

.deg-1 {
  rotate: -1deg;
}

/* === === === Canvas === === === */

#canvas {
  display: block;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -9999;
  user-select: none;
  touch-action: none;
  opacity: 0;
}

#canvas.canvas-enabled {
  z-index: 250;
  user-select: auto;
  touch-action: auto;
  outline: 8px solid var(--middleground);
  outline-offset: -8px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.01)
}

#canvas.canvas-visible {
  opacity: 1;
}

#paper-canvas {
  width: 100vw;
  height: 100vh;
}

/* === === === Frames === === === */

.frame-section {
  z-index: 0;
  margin-left: 0;
  margin-right: 0;
}

.frame-section+.frame-section {
  margin-top: 0;
}


.frame-mid {
  padding: 0
}

.frame-inner {
  border-radius: 0;
  box-shadow: none;
  border-style: solid;
  border-width: 3px;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, hsla(var(--hue1), 55%, 40%, 0.7) 0%,
      /*hsla(var(--hue2), 55%, 40%, 0.7) 66%,*/
      hsla(var(--hue3), 55%, 40%, 0.7) 100%);
  width: 100%;
}

.frame-inner>div {
  max-height: var(--height);
}

.frame--see-more {
  padding: 6px 12px;
  /* font-weight: 800; */
  font-stretch: 120%;
  border-radius: 180px;
  background-color: var(--accent);
  border: 2px solid var(--accent);
}

.frame--see-more:hover,
.frame--see-more:active {
  text-decoration: none;
  background: var(--light);
  color: var(--accent);
  border: 2px solid var(--accent);
}

.frame--see-more:focus,
.frame--see-more:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.5);
  outline-offset: -2px;
}

body:has(.frame--imagebox) {
  overflow-y: hidden;
}

.frame-section:has(.frame--imagebox) {
  z-index: 300;
}

.frame--thumb {
  user-select: none;
  pointer-events: none;
  outline: 2px solid rgba(45, 55, 72, 0.05);
}

.frame--thumb.no-border {
  outline: none;
}

.frame--thumb.frame--thumb:hover,
.frame--thumb.frame--thumb:active {
  cursor: url(../images/cursor-expand.png), pointer;
}

.frame--thumb.frame--thumb:not(.no-border):hover,
.frame--thumb.frame--thumb:not(.no-border):active {
  outline: 2px solid rgba(45, 55, 72, 0.25);
}

.frame--overlay.frame--overlay:hover,
.frame--imagebox.frame--imagebox:hover {
  cursor: url(../images/cursor-close.png), pointer;
}

.frame--imagefigure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-grow: inherit;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  /* width: max-content; */
  width: 100vw;
  height: 100vh;
  z-index: 300;
  gap: 8px;
}

.frame--imagebox {
  height: 85vh;
  width: auto;
  margin-top: 5vh;
  object-fit: contain;
}

.frame--imagecaption {
  background: rgba(45, 55, 72, 0.9);
  padding: 4px 8px;
  text-align: center;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin-top: -5vh;
  padding: 16px;
  width: 100vw;
}


/* === === === Footer === === === */

#footer {
  --cols: 4 / span 12
}

#footer-content {
  display: flex;
  flex-direction: column
}


/* === === === Stickers & Elements === === === */
.sticker-sheet {
  height: 100vmax;
  width: 100vw;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr)
}

.sticker-sheet:hover {
  cursor: inherit
}

input[type="checkbox"] {
  cursor: inherit;
}

#mentorship-hero label,
#mentorship-hero label * {
  cursor: inherit;
}

#mentorship-hero label:hover,
#mentorship-hero label:hover * {
  cursor: inherit !important;
}

#motionToggle *,
#cursorToggle * {
  cursor: inherit !important;
}


.single-sticker {
  grid-column: var(--col);
  grid-row: var(--row);
  margin: 0;
}

.single-sticker img {
  user-select: none;
  pointer-events: none;
}

body[is-locked="true"] .single-sticker,
body[is-locked="true"] .sticky {
  /* on mobile */
  display: var(--sticker-display-xs);
}

picture.single-sticker,
article.single-sticker {
  /* on mobile */
  position: absolute;
  top: var(--stickerY);
  left: calc(var(--stickerX) - 100px);
}

picture.single-sticker {
  display: inline-block;
  height: min-content;
  /* on mobile */
  width: 100px;
}

#sticky {
  --color: #fde572;
  --row: 5;
  grid-column: var(--cols);
  width: max-content;
  height: max-content;
  padding: 4px;
}

body[is-locked="false"] .sticky:hover {
  transform: rotate(0deg);
  transition: transform 0.05s ease-in-out;
}

.sticky {
  align-items: center;
  padding: 24px;
  position: relative;
  height: fit-content;
  min-height: 100px;
  width: fit-content;
  max-width: 240px;
  background: var(--color);
  color: hsl(218deg 23% 15%);
  /* outline: 2px solid #ddbf28; */
  font-weight: 600;
  font-size: 16px;
  box-shadow: 6px 6px 16px var(--middleground);
  transform: rotate(1deg);
  transition: transform 0.05s ease-in-out;
}

.sticky a {
  color: hsl(237, 47%, 40%);
  text-decoration: underline;
}

/* === === === Font Faces === === === */

@font-face {
  font-family: 'Mona Sans';
  src:
    url('fonts/Mona-Sans.woff2') format('woff2 supports variations'),
    url('fonts/Mona-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

.system-font {
  font-family: var(--font-stack)
}

.mona-sans-narrow {
  font-family: var(--font-stack-heads);
  font-stretch: var(--font-narrow)
}

.mona-sans {
  font-family: var(--font-stack-heads);
  font-stretch: var(--font-normal)
}

.mona-sans-wide {
  font-family: var(--font-stack-heads);
  font-stretch: var(--font-wide)
}

.dark-mode .distortion {
  text-shadow: var(--distortion);
}

.dark-mode .distortion-muted {
  text-shadow: var(--distortion-muted);
}

.dark-mode .distortion-box {
  box-shadow: 2.2px 0 1px rgba(0, 30, 255, .5), -2.2px 0 1px rgba(255, 0, 80, .3), 0 0 3px rgba(0, 0, 0, .35);
}

.hover\:pointy {
  cursor: url(../images/cursor-hand.png), pointer !important;
}


.pointy {
  cursor: url(../images/cursor-hand.png)
}


/* === === === Media Queries === === === */

@media screen and (min-width: 1px) {
  :root {
    --page: calc(var(--spacing) * 12);
    --distortion: 2.2px 0 1px rgba(0, 30, 255, .5), -2.2px 0 1px rgba(255, 0, 80, .3), 0 0 3px;
    --distortion-muted: 2.2px 0 1px rgba(0, 30, 255, .5), -2.2px 0 1px rgba(255, 0, 80, .3), 0 0 1.5px;
    /* Fonts */
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-stack-heads: "Mona Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    --font-narrow: 75%;
    --font-normal: 100%;
    --font-wide: 125%;

    /* Colors -- Light Mode */
    --active: hsl(237, 47%, 52%);
    --hue1: 190;
    --hue2: 167;
    --hue3: 39;

    --light: rgb(250, 246, 245);
    --dark: rgba(24, 31, 44, 1);

    --background: var(--light);
    --foreground: var(--dark);
    --middleground: rgba(45, 55, 72, 0.075);
    --shadowground: rgba(172, 196, 234, 1);
    --svg-hover-color: var(--background);

    --yellow-link: #c18906;
    --orange-link: #c66331;
    --pink-link: #c81e51;
    --blue-link: #3868ac;

    --button-background: var(--background);
    --button-base: var(--background);
    --button-active: var(--active);
    --button-border: rgba(45, 55, 72, 0.2);

    --tooltip-base: var(--foreground);
    --tooltip-front: var(--background);

    /* Grid Gaps */
    --grid-gap-base: 4px;
    --grid-gap-tiny: 8px;
    --grid-gap-small: 16px;
    --grid-gap-medium: 32px;
    --grid-gap-large: 40px;
    --grid-gap-larger: 80px;
    --grid-gap-largest: 120px;

    /* Vertical Grid Gap */
    --vert-gap: 4;
    --vert-gap-small: 8px;
    --vert-gap-medium: 16px;
    --vert-gap-large: 32px;
    --vert-gap-largest: 64px;

    /* grid definitions */
    --body-grid-cols: var(--grid-gap-small) calc(100vw - 32px) var(--grid-gap-small);
    --main-grid-cols: minmax(min-content, 100%);

    /* section sizing cols */
    --section-grid-repeats: 16;
    --section-grid-cols: repeat(var(--section-grid-repeats), clamp(1fr, min-content, var(--grid-gap-larger)));
    --section-grid-gap: 0;

    /* sub-section positioning */
    --cols: 1 / 17;

    /* transform speeds */
    --speed1: 100ms;
    --speed2: 250ms;
    --speed3: calc(var(--speed2) * 1.5);
    --speed4: calc(var(--speed2) * 2);

    /* misc */
    --frame-height: 980px;
    --sticker-display-xs: none;
  }

  .dark-mode {
    --active: hsl(237, 47%, 52%);

    --background: var(--dark);
    --foreground: var(--light);
    --middleground: rgba(250, 246, 245, 0.075);
    --shadowground: rgba(29, 36, 47, 1);
    --svg-hover-color: var(--foreground);

    --tooltip-base: var(--foreground);
    --tooltip-front: var(--background);


    --yellow-link: #fccb5b;
    --orange-link: #f68045;
    --pink-link: #ef81a2;
    --blue-link: #6fabff;
  }

  #work-intro {
    --cols: 1 / 12
  }

  #icons {
    margin-top: var(--grid-gap-large);
  }

  /* Frames */
  #dx {
    --hue1: 258;
    /*--hue2: 200;*/
    --hue3: 200;
    --height: auto
  }

  #ds {
    --hue1: 10;
    /*--hue2: 50;*/
    --hue3: 160;
    --height: auto
  }

  #pay {
    --hue1: 320;
    /*--hue2: 140;*/
    --hue3: 260;
    --height: auto
  }

  /* Footer */
  #footer {
    --cols: 4 / 12
  }
}

@media screen and (min-width: 640px) {
  :root {
    --page: calc(var(--spacing) * 24);
  }
}

@media screen and (min-width: 768px) {

  /* General */
  :root {
    --page: calc(var(--spacing) * 48);
    --body-grid-cols: var(--grid-gap-large) auto var(--grid-gap-large);
    --section-grid-gap: var(--grid-gap-medium);
    --section-grid-cols: repeat(var(--section-grid-repeats), minmax(min-content, var(--grid-gap-larger)))
  }

  /* Hero */
  #hi-there {
    --cols: 2 / 14
  }

  #intro {
    --cols: 2 / 14
  }

  #story {
    --cols: 2 / 14
  }

  #sticky {
    --cols: 2 / 14
  }

  #icons {
    --cols: 2 / 16
  }

  #work {
    --cols: 2 / 14
  }

  #work-intro {
    --cols: 2 / 16
  }

  .sticky {
    max-width: 360px;
  }

  /* Toolbar */
  #toolbar {
    flex-direction: column;
    right: var(--grid-gap-large);
    top: var(--grid-gap-largest);
    left: unset;
    bottom: unset;
    transform-origin: initial;
    transition:
      rotate var(--speed4) ease-in-out,
      right var(--speed4) ease-in-out,
      bottom var(--speed4) ease-in-out;
  }

  /* Hide toolbar in case frame overlay is open */
  body:has(.frame--imagebox) #toolbar {
    display: none;
  }

  body[is-locked="true"] #toolbar {
    left: unset;
    right: var(--grid-gap-largest);
    top: var(--grid-gap-largest);
    rotate: 90deg;
    transform-origin: initial;
    transition:
      rotate var(--speed4) ease-in-out,
      right var(--speed4) ease-in-out,
      bottom var(--speed4) ease-in-out;
  }

  .toolbutton {
    transition:
      opacity var(--speed2) ease-in,
      height var(--speed4) ease-in,
      width var(--speed4) ease-in,
      rotate var(--speed3) ease-in;
  }

  body[is-locked="true"] .toolbutton#lockButton {
    rotate: -955eg;
    transition:
      color var(--speed1) ease-in,
      stroke var(--speed1) ease-in,
      opacity var(--speed2) ease-in,
      height var(--speed4) ease-in,
      width var(--speed4) ease-in,
      rotate var(--speed3) ease-in;
  }

  /* Headshots */
  #headshot>* {
    height: unset
  }

  #headshot-1 {
    --cols: 2 / span 18;
    --text: center;
  }

  #headshot-2 {
    --cols: 2 / span 2
  }

  #headshot-3 {
    --cols: span 16;
    --text: left;
  }

  #headshot-4 {
    --cols: 2 / span 1;
    --text: left;
  }

  #headshot-5 {
    --cols: span 13;
  }

  #headshot-6 {
    display: grid;
    --cols: span 3;
  }

  /* Frames */
  #work {
    --cols: 1 / all
  }

  #dx {
    --cols: 1 / 18
  }

  #ds {
    --cols: 1 / 18
  }

  #pay {
    --cols: 1 / 18
  }

  .work-header {
    --cols: 2 / span 8;
    margin: 64px 0 -24px 0;
  }

  .frame-section {
    margin: 0;
  }

  .frame-mid {
    padding: 24px
  }

  .frame-inner {
    box-shadow:
      -8px 0px 20px hsla(var(--hue1), 95%, 39%, 0.3),
      /*0px 0px 20px hsla(var(--hue2), 65%, 66%, 0.3), */
      8px 0px 20px hsla(var(--hue3), 100%, 57%, 0.3);
  }

  .frame-bg {
    background-color: rgb(250, 246, 245);
  }

  .frame--thumb {
    user-select: auto;
    pointer-events: auto;
  }

  /* Stickers */
  #arrow3D {
    --col: 9;
    --row: 2
  }

  #planet {
    --col: 2;
    --row: 1;
    --top: -20px;
  }

  #goose {
    --col: 9;
    --row: 5;
    width: 140px
  }

  picture.single-sticker {
    width: fit-content;
  }

  picture.single-sticker,
  article.single-sticker {
    position: relative;
  }

  body[is-locked="true"] .single-sticker {
    display: grid;
  }

  .devportal-aww {
    max-width: 10rem;
    height: auto;
  }

  .md\:max-w-90 { max-width: 90% }
  .md\:max-w-95 { max-width: 95% }
  .md\:max-w-105 { max-width: 105% }
  .md\:max-w-110 { max-width: 110% }
  .md\:max-w-120 { max-width: 120% }
  .md\:max-w-130 { max-width: 130% }
  .md\:max-w-140 { max-width: 140% }
  .md\:max-w-150 { max-width: 150% }

  .\*\:md\:max-w-90 > * { max-width: 90% }
  .\*\:md\:max-w-95 > * { max-width: 95% }
  .\*\:md\:max-w-105 > * { max-width: 105% }
  .\*\:md\:max-w-110 > * { max-width: 110% }
  .\*\:md\:max-w-120 > * { max-width: 120% }
  .\*\:md\:max-w-130 > * { max-width: 130% }
  .\*\:md\:max-w-140 > * { max-width: 140% }
  .\*\:md\:max-w-150 > * { max-width: 150% }

  .md\:min-w-90 { min-width: 90% }
  .md\:min-w-95 { min-width: 95% }
  .md\:min-w-105 { min-width: 105% }
  .md\:min-w-110 { min-width: 110% }
  .md\:min-w-120 { min-width: 120% }
  .md\:min-w-130 { min-width: 130% }
  .md\:min-w-140 { min-width: 140% }
  .md\:min-w-150 { min-width: 150% }

  .\*\:md\:min-w-90 > * { min-width: 90% }
  .\*\:md\:min-w-95 > * { min-width: 95% }
  .\*\:md\:min-w-105 > * { min-width: 105% }
  .\*\:md\:min-w-110 > * { min-width: 110% }
  .\*\:md\:min-w-120 > * { min-width: 120% }
  .\*\:md\:min-w-130 > * { min-width: 130% }
  .\*\:md\:min-w-140 > * { min-width: 140% }
  .\*\:md\:min-w-150 > * { min-width: 150% }

}

@media screen and (min-width: 1024px) {

  /* Hero */
  #hi-there {
    --cols: 2 / 12
  }

  #intro {
    --cols: 2 / 13
  }

  #story {
    --cols: 2 / 13
  }

  #sticky {
    --cols: 2 / 13
  }

  /* Toolbar */
  #toolbar {
    right: var(--grid-gap-large);
    top: var(--grid-gap-largest)
  }

  /* Work */
  #icons {
    --cols: 2 / 16
  }

  #work-intro {
    --cols: 2 / 16
  }

  /* Frames */
  #dx {
    --cols: 1 / 18
  }

  #ds {
    --cols: 1 / 18
  }

  #pay {
    --cols: 1 / 18
  }

  /* Stickers */
  #arrow3D {
    --col: 9;
    --row: 2
  }

  #planet {
    --col: 2;
    --row: 1;
    --top: -20px;
  }

  #goose {
    --col: 9;
    --row: 5;
    width: 140px
  }

  /* Footer */
  #footer {
    --cols: 2 / 13
  }

  .devportal-aww {
    max-width: 14rem;
    height: auto;
  }
}

@media screen and (min-width: 1440px) {

  /* Hero */
  #hi-there {
    --cols: 4 / 7
  }

  #intro {
    --cols: 4 / 12
  }

  #story {
    --cols: 4 / 11
  }

  #sticky {
    --cols: 4 / 10
  }

  /* Headshots */
  #headshot {
    grid-template-columns: repeat(24, minmax(min-content, var(--grid-gap-larger)));
  }

  #headshot-1 {
    --cols: 4 / span 18;
    --text: center;
  }

  #headshot-2 {
    --cols: 4 / span 3
  }

  #headshot-3 {
    --cols: span 15
  }

  #headshot-4 {
    --cols: 4 / span 1
  }

  #headshot-5 {
    --cols: span 15;
    --text: left
  }

  #headshot-6 {
    display: grid;
    --cols: span 2;
  }

  /* Work */
  #icons {
    --cols: 4 / 16
  }

  #work-intro {
    --cols: 4 / 16
  }

  /* Stickers */
  #arrow3D {
    --col: 9;
    --row: 2
  }

  #planet {
    --col: 2;
    --row: 3
  }

  #goose {
    --col: 8;
    --row: 4;
    width: 140px
  }

  /* Frames */
  #dx,
  #ds,
  #pay {
    --cols: 2 / 16
  }

  /* Footer */
  #footer {
    --cols: 4 / 12
  }
}

@media screen and (min-width: 2200px) {
  :root {
    --section-grid-repeats: 24;
  }

  /* Stickers */
  #arrow3D {
    --col: 8;
    --row: 2
  }

  #planet {
    --col: 2;
    --row: 2;
    --left: -60px;
  }

  #goose {
    --col: 9;
    --row: 4;
    width: 140px
  }
}