@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/fonts/InterVariable-Italic.woff2") format("woff2");
}
@font-face {
  font-family: WalterTurncoat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/fonts/WalterTurncoat-Regular.ttf") format("truetype");
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --__light-000: 20%;
  --__light-025: 32%;
  --__light-050: 70%;
  --__light-075: 80%;
  --__light-090: 94%;
  --__light-100: 98%;
  --__chroma-000: 10%;
  --__chroma-025: 25%;
  --__chroma-050: 70%;
  --__chroma-075: 25%;
  --__chroma-090: 22%;
  --__chroma-100: 13%;
  --__hue-red: 20deg;
  --__hue-yellow: 100deg;
  --__hue-green: 130deg;
  --__hue-blue: 267deg;
  --__hue-purple: 300deg;

  --color-grey-000: oklch(000% 0% 0deg);
  --color-grey-010: oklch(010% 0% 0deg);
  --color-grey-025: oklch(025% 0% 0deg);
  --color-grey-050: oklch(050% 0% 0deg);
  --color-grey-075: oklch(075% 0% 0deg);
  --color-grey-090: oklch(090% 0% 0deg);
  --color-grey-095: oklch(097% 0% 0deg);
  --color-grey-100: oklch(100% 0% 0deg);

  --color-red-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-red));
  --color-red-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-red));
  --color-red-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-red));
  --color-red-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-red));
  --color-red-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-red));
  --color-red-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-red));

  --color-yellow-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-yellow));
  --color-yellow-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-yellow));
  --color-yellow-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-yellow));
  --color-yellow-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-yellow));
  --color-yellow-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-yellow));
  --color-yellow-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-yellow));

  --color-green-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-green));
  --color-green-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-green));
  --color-green-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-green));
  --color-green-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-green));
  --color-green-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-green));
  --color-green-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-green));

  --color-blue-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-blue));
  --color-blue-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-blue));
  --color-blue-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-blue));
  --color-blue-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-blue));
  --color-blue-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-blue));
  --color-blue-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-blue));

  --color-purple-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-purple));
  --color-purple-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-purple));
  --color-purple-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-purple));
  --color-purple-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-purple));
  --color-purple-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-purple));
  --color-purple-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-purple));

  --page-background-color: var(--color-grey-095);
  --content-width: 60rem;
  --nav-overshoot: 0px;
  --font-headings: 'InterVariable', sans-serif;
  --font-copy: 'InterVariable', sans-serif;
  --color-text: var(--color-grey-010);
  --color-accent-h: 220deg;
  --color-accent-s: 75%;
  --color-accent-l: 50%;
  --color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));
  --color-light-accent: hsl(var(--color-accent-h), 80%, 96%);
  --color-wcag-gray: #666;
  --color-light-gray: #e8e8e8;
  
  --gap-s: 1rem;
  --gap-m: 4rem;
  --gap-l: 8rem;
  
  --radius-s: 0.5rem;
  --radius-m: 1rem;

  --text-min-width: 30rem;

  --fs-200: clamp(0.78rem, calc(0.75rem + 0.10vw), 0.86rem);
  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

  --hyphen-min-length: 8;
  --hyphen-min-chars-before: 4;
  --hyphen-min-chars-after: 3;

  --cta-shadow:
    0 3px 2px 0 rgba(0, 0, 0, 0.06),
    0 12px 12px 0 rgba(0, 0, 0, 0.04),
    0 24px 24px 0 rgba(0, 0, 0, 0.02);

  --sticky-note-padding-inline: 3em;
  --sticky-note-padding-block: 3em 2em;
    
  font-family: var(--font-copy);
  font-feature-settings:
    'liga' 1, /* Fix for Chrome, apparently */
    'calt' 1, /* Contextual alternates, e.g. 3x9 is centered */
    'ss07' 1, /* Square punctuation */
    'ss08' 1, /* Square quotes */
    /*'zero' 1, // Slashed /0/ */
    'cv01' 1, /* Alternate /1/ */
    'cv09' 1, /* Flat-top /3/ */
    'cv10' 1; /* Capital /G/ with spur */
}

html, body {
  height: 100%;
}

body {
  --shadow-image:
      0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.07),
      0 2rem 3rem 0 rgba(0, 0, 0, 0.07),
      0 4rem 6rem 0 rgba(0, 0, 0, 0.02);
}

body {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  font-size: var(--fs-400);
  background-color: var(--page-background-color);
  margin: 0 auto;
  padding-block-start: var(--nav-overshoot);
  overflow-y: scroll;
  hyphens: auto;
  -webkit-hyphenate-limit-before: var(--hyphen-min-chars-before); /* Safari */
  -webkit-hyphenate-limit-after: var(--hyphen-min-chars-after); /* Safari */
  -ms-hyphenate-limit-chars: var(--hyphen-min-length) var(--hyphen-min-chars-before) var(--hyphen-min-chars-after);
  hyphenate-limit-chars: var(--hyphen-min-length) var(--hyphen-min-chars-before) var(--hyphen-min-chars-after);
}

body.prevent-animations * {
  transition-property: none !important;
  transition-duration: 0.01s !important;
}

main {
  isolation: isolate;
  padding-top: 4rem;
}



/* #region Layout */
/* Based on https://ryanmulligan.dev/blog/layout-breakouts/ */

.layout {
  --layout-gap: clamp(1rem, 6vw, 3rem);
  --layout-full: minmax(var(--layout-gap), 1fr);
  --layout-content: min(var(--content-width), 100% - var(--layout-gap) * 2);
  --layout-popout: minmax(0, 3rem);
  --layout-feature: minmax(0, 5rem);

  display: grid;
  grid-template-columns:
    [layout-full-start]
      var(--layout-full)
      [layout-feature-start]
        var(--layout-feature)
        [layout-popout-start]
          var(--layout-popout)
          [layout-content-start]
            var(--layout-content)
          [layout-content-end]
          var(--layout-popout)
        [layout-popout-end]
        var(--layout-feature)
      [layout-feature-end]
      var(--layout-full)
    [layout-full-end];
}

.layout > * {        grid-column: layout-content; }
.layout > .popout {  grid-column: layout-popout;  }
.layout > .feature { grid-column: layout-feature; }
.layout > .full {    grid-column: layout-full;    }

.side-margins {
  margin-inline: clamp(1rem, 6vw, 3rem);
}

/* #endregion Layout */


/* #region Generic tags */

h1, h2, h3 {
  font-family: var(--font-headings);
  line-height: 1;
}

h1 {
  font-size: var(--fs-500);
  font-weight: 800;
}

h2 {
  font-size: var(--fs-700);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p, li {
  line-height: 1.6;
}

li {
  list-style-type: none;
}

ul[data-show-markers="true"] li {
  list-style-type: disc;
}

ul[data-show-markers="true"] li::marker {
  color: var(--color-wcag-gray);
}

ul.closer-before,
ol.closer-before {
  margin-block-start: -1em;
}

ul.closer-after,
ol.closer-after {
  margin-block-end: -1em;
}

ol li {
  list-style-type: decimal;
  margin-inline-start: 1.8em;
  padding-inline-start: 0.5em;
}

ol li::marker {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 2.2;
}

em {
  font-variation-settings: 'ital' 1;
}

strong {
  font-weight: 600;
}

abbr {
  text-decoration: none;
  border-bottom: 1px dotted var(--color-wcag-gray);
  cursor: help;
}

code {
  font-family: var(--font-copy);
  font-style: italic;
  font-weight: 500;
}

kbd {
  --color-key-face: #f5f5f5;
  --color-key-sides: #c5c5c5;

  font-family: inherit;
  font-weight: 600;
  font-size: 90%;
  padding-inline: 0.2em;
  padding-block: 0.1em;
  margin-inline: 0.1em;
  background: var(--color-key-face);
  border: 1px solid var(--color-key-sides);
  border-radius: 0.2em;
  box-shadow: 0 0.1em 0px 0.1em var(--color-key-sides);
  position: relative;
  bottom: 0.1em;
}

:focus-visible,
input[type='radio']:checked:focus-visible + label {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--color-text, black);
  outline-offset: 4px;
  scroll-margin-block: 6rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip: rect(0, 0, 0, 0);
  border: none;
  outline: none;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.tombstone {
  &:after {
    content: "\220E";
    color: var(--color-grey-050);
    margin-inline-start: 0.2em;
  }
}

/* #endregion Generic tags */



/* #region Hyperlinks and buttons */

a {
  --icon-size: 1.5rem;

  color: var(--color-accent);
}

a[rel*="external"]::after {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='butt' stroke-linejoin='crop'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 6h-8v14h14v-8' /%3E%3Cpath d='M11 13l9 -9' /%3E%3Cpath d='M15 4h5v5' /%3E%3C/svg%3E");
  content: '';
  margin-left: 0.2em;
  padding-left: 1em;
  background: currentColor;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-size: 1em 1em;
  position: relative;
  bottom: -0.1em;
}

.hoverable {
  --overlay-opacity: 0.02;
  --overlay-color: black;

  position: relative;
}

.hoverable:hover,
.hoverable:focus-visible {
  --__overlay-opacity: var(--overlay-opacity);
}

.hoverable::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-color, black);
  border-radius: inherit;
  opacity: var(--__overlay-opacity, 0);
  z-index: 1;
}

.hoverable.negative {
  --overlay-opacity: 0.08;
  --overlay-color: white;

  background: var(--item-accent-color, var(--color-text));
  color: white;
}

.hoverable.secondary {
  --overlay-opacity: 0.02;
  --overlay-color: black;

  color: var(--color-text);
  background: white;
}

.box-shadow {
  box-shadow: var(--cta-shadow);
}

.svg-wrapper {
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  display: flex;
  fill: currentColor;
}

.svg-wrapper svg {
  width: 100%;
  height: 100%;
}

.inert {
  opacity: 0.5;
}

/* #endregion Hyperlinks and buttons */



/* #region Header */

#main-header {
  --opacity: 0.9;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}

#nav-background {
  position: absolute;
  inset: 0;
  bottom: calc(-1 * var(--nav-overshoot));
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--page-background-color) 85%, transparent);
  box-shadow: 0 1px 1rem 0 rgba(0, 0, 0, 0.15);
}

#menu .nav-blur {
  position: absolute;
  inset: 0;
  top: 0.5px;
  bottom: calc(-1 * var(--nav-overshoot));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur, 0px));
  backdrop-filter: saturate(150%) blur(var(--blur, 0px));
  z-index: -1;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) calc(100% - var(--blur-start-height, 0px) - var(--blur-gradient-height, 0px)),
    rgba(0, 0, 0, 0) calc(100% - var(--blur-start-height, 0px))
  );
  pointer-events: none;
}

#nav-blur-1 {
  --blur: 3px;
  --blur-gradient-height: 8px;
  --blur-start-height: 0px;
}

#nav-blur-2 {
  --blur: 8px;
  --blur-gradient-height: 12px;
  --blur-start-height: 6px;
}

#menu-items {
  --link-padding: 1em;

  display: flex;
  flex-flow: row nowrap;
  column-gap: 0.5rem;
  margin-inline: calc(-1 * var(--link-padding));
}

#menu-items li {
  --link-height: 4rem;
  --underline-width: 4rem;
  --underline-thickness: 4px;
  --underline-color: black;
  --pill-color: 0, 0, 0;
  --pill-border-style: none;

  height: var(--link-height);
}

#menu-items a {
  position: relative;
  height: var(--link-height);
  display: flex;
  align-items: center;
  padding-inline: var(--link-padding);
  color: var(--color-text);
  text-decoration: none;
  outline: none; /* Outline is put on the pill instead */
}

/* Pill */
#menu-items a::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block: calc(3 * var(--underline-thickness));
  background: rgba(var(--pill-color), var(--pill-opacity));
  border-width: 2px;
  border-color: var(--color-text, black);
  border-style: var(--pill-border-style);
  border-radius: 10rem;
}

/* Underline */
#menu-items a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--underline-width);
  height: var(--underline-thickness);
  background: var(--underline-color);
  transform: translateX(-50%);
  opacity: var(--underline-opacity, 0%);
  border-start-start-radius: var(--underline-thickness);
  border-start-end-radius: var(--underline-thickness);
}

#menu-items a[aria-current="page"] {
  --underline-opacity: 100%;
  font-weight: 600;
}

#menu-items a:hover,
#menu-items a:focus-visible {
  --pill-opacity: 4%;
}

#menu-items a:focus-visible {
  --pill-border-style: solid;
}

#menu-link-home {
  margin-right: auto;
}

/* #endregion Header */



/* #region Footer */

footer {
}

.bottom-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: 2rem;
  padding-block-start: min(1rem, 2vw);
}

/* #endregion Footer */



/* #region About me */

/* #endregion About me */



/* #region Portfolio projects */

/* #endregion Portfolio projects */



/* #region Case study */

.key-takeaways {
  --gap: 2rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 1rem;

  .column {
    flex: 1 1 20em;
    display: flex;
    flex-flow: column;
    gap: var(--gap);
    background: linear-gradient(to bottom, var(--note-top), var(--note-bottom));
    padding-block: var(--sticky-note-padding-block, 3em 2em);
    padding-inline: var(--sticky-note-padding-inline, 3em);
    box-shadow: var(--shadow-image);
    max-width: fit-content;
    position: relative;

    &:nth-of-type(1) { rotate: var(--angle1, -5deg); }
    &:nth-of-type(2) { rotate: var(--angle2, 5deg); }
    &:nth-of-type(3) { rotate: var(--angle3, 0deg); }

    &::after {
      --size: 1.5em;

      position: absolute;
      top: 0.5em;
      left: calc(50% - 0.5 * var(--size));
      content: '';
      background: var(--pin-body);
      background: var(--pin-body) radial-gradient(circle at 30% 30%, var(--pin-light), transparent 40%);
      width: var(--size);
      height: var(--size);
      border-radius: 100%;
      box-shadow:
        0.3em 0.5em 0.8em 0 color-mix(in srgb, var(--pin-body) 20%, transparent),
        inset -0.1em -0.1em 0.5em 0 color-mix(in srgb, var(--pin-dark) 50%, transparent);
    }

    & > li {
      display: flex;
      flex-flow: column;

      p {
        font-family: 'WalterTurncoat';
        font-size: var(--fs-600);
        line-height: 0.9;
        margin-bottom: 0.25em;
        color: var(--color-blue-025);
      }

      ul {
        margin-inline-start: 1em;
      }
    }
  }
}

.project-heading {
  border-bottom: 1px solid #cacaca;
  padding-block: 2em;
}

.project-heading-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 0.5em;
  column-gap: 2em;
}

.project-heading-content p {
  flex: 1 1 var(--text-min-width);
}

.project-heading-content .logo-wrapper {
  max-width: 10em;
  max-height: 8em;
  display: grid;
  place-content: center;

  svg, img {
    max-width: inherit;
    max-height: inherit;
  }
}

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

article.layout {
  row-gap: 5em;
}

article[id].layout.full {
  margin-block-start: 2em;

  &.farther-away {
    margin-block-start: 8em;
  }
}

.subproject-heading {
  --dot-size: 11px;
  --dot-angle: 5deg;
  --mouse-x: -400px; /* Set via JS */
  --mouse-y: -400px; /* Set via JS */
  --mouse-size: 15em;
  --mouse-color: #aaa;
  --gradient-bottom-color: #555;
  --dot-color: #999;

  isolation: isolate;
  position: relative;
  min-height: 5rem;
  overflow: hidden;
}

.subproject-heading::before {
  --dot-perceived-angle: calc(var(--dot-angle) + 45deg);
  --dot-perceived-angle-orthogonal: calc(var(--dot-angle) - 45deg);
  --dot-speed-x: calc((20.5 * var(--dot-size)) * cos(var(--dot-angle)));
  --dot-speed-y: calc((20.5 * var(--dot-size)) * sin(var(--dot-angle)));
  --safe-area-x: max(var(--dot-speed-x), calc(-1 * var(--dot-speed-x)));  /* abs() */
  --safe-area-y: max(var(--dot-speed-y), calc(-1 * var(--dot-speed-y)));  /* abs() */
  --side-fade-size: min(3vw, 5rem);
  --side-fade: linear-gradient(to right,
    transparent 0rem,
    transparent var(--safe-area-x),
    black calc(var(--safe-area-x) + var(--side-fade-size)),
    black calc(100% - var(--safe-area-x) - var(--side-fade-size)),
    transparent calc(100% - var(--safe-area-x)),
    transparent 100%    
  ), linear-gradient(to top,
    black var(--safe-area-y),
    black calc(100% - var(--safe-area-y) - 3em),
    transparent calc(100% - var(--safe-area-y))
  );

  content: '';
  position: absolute;
  left: calc(-1 * var(--safe-area-x));
  right: calc(-1 * var(--safe-area-x));
  top: calc(-1 * var(--safe-area-y));
  bottom: calc(-1 * var(--safe-area-y));
  background:
    linear-gradient(to top, var(--gradient-bottom-color) var(--safe-area-y), #000 calc(100% - var(--safe-area-y))),
    repeating-linear-gradient(var(--dot-perceived-angle), #000, var(--dot-color), #000 var(--dot-size)),
    repeating-linear-gradient(var(--dot-perceived-angle-orthogonal), #000, var(--dot-color), #000 var(--dot-size)),
    radial-gradient(circle at calc(var(--mouse-x) + var(--safe-area-x)) calc(var(--mouse-y) + var(--safe-area-y)), var(--mouse-color), #000 var(--mouse-size));
  background-position:
    0 0,
    var(--pattern-x, 0px) var(--pattern-y, 0px),
    var(--pattern-x, 0px) var(--pattern-y, 0px);
  background-blend-mode: screen, difference;
  filter: contrast(20) invert(1) opacity(0.07);
  animation-name: move-dot-pattern;
  animation-duration: 20000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-mask-image: var(--side-fade);
  -webkit-mask-composite: source-in;
  mask-image: var(--side-fade);
  mask-composite: intersect;
  z-index: -1;
}

@property --pattern-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --pattern-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes move-dot-pattern {
  from {
    --pattern-x: 0px;
    --pattern-y: 0px;
  }
  to {
    --pattern-x: var(--dot-speed-x);
    --pattern-y: var(--dot-speed-y);
  }
}

.subproject-heading::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 40px;
  box-shadow:
    0 0 24px 0 rgba(0, 0, 0, 0.1),
    0 0 8px 0 rgba(0, 0, 0, 0.05);
}

.subproject-heading-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: 2rem;
  padding-block-start: min(1rem, 2vw);

  &:not(:has(aside)) {
    min-height: clamp(6em, 20vw, 10em);
    justify-content: center;
  }
}

.subproject-heading-content h2 {
  font-size: clamp(2rem, 7vw, 4rem);
  word-break: break-word;
  padding-block-start: min(3rem, 2vw);
  filter: drop-shadow(0 0 0.25em var(--page-background-color)) drop-shadow(0 0 0.25em var(--page-background-color));
}

.subproject-heading-content aside {
  display: flex;
  min-width: 6em;
  height: 100%;
  align-items: flex-end;
}

[data-soft-shadow] {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

[data-img-responsive] img {
  width: 100%;
}

.closer-before {
  margin-block-start: -2em;
}

.farther-before {
  margin-block-start: 3em;
}

.unwhite {
  filter: brightness(0.975);
}

.whiten {
  filter: brightness(1.025);
}

.rounded {
  border-radius: var(--radius-s);
}

.shadowed {
  box-shadow: var(--shadow-image);
}

.split {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1em;
  column-gap: 3em;
  justify-content: center;
}

.wide-row-gap {
  row-gap: 3em;
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
}

.grid-2-1 > :nth-child(1) { grid-area: 1 / 1 / span 1 / span 1; }
.grid-2-1 > :nth-child(2) { grid-area: 2 / 1 / span 1 / span 1; align-self: flex-end; }
.grid-2-1 > :nth-child(3) { grid-area: 1 / 2 / span 2 / span 1; }

.description-part .text {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--text-min-width);
  row-gap: 1em;
}

.split aside {
  max-width: var(--max, 15em);
}

.split aside.top    { align-self: flex-start; }
.split aside.center { align-self: center;     }
.split aside.bottom { align-self: flex-end;   }
.split article.top    { align-self: flex-start; }
.split article.center { align-self: center;     }
.split article.bottom { align-self: flex-end;   }

.split-equal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  gap: 2em;
  align-items: flex-end;

  &.align-top {
    align-items: flex-start;
  }
}

figure.image-wrapper,
figure.video-wrapper {
  --caption-margin: 0.5em;

  text-align: center;
}

figure.image-wrapper img {
  max-width: 100%;
  display: inline-block;
  aspect-ratio: var(--aspect-ratio, 1 / 1);
}

figure.image-wrapper img.loading {
  --bg: rgba(0, 0, 0, 0.03);
  --skeleton-bg: rgba(0, 0, 0, 0);

  background: linear-gradient(
    135deg,
    var(--bg) 40%,
    var(--skeleton-bg) calc(40% + 20rem),
    var(--bg) calc(40% + 25rem)
  );
  background-size: 300vw;
  background-position-x: 100%;
  animation: shimmer 3s infinite linear;
  border-radius: 16px;
}

@keyframes shimmer {
  to {
    background-position-x: 0%
  }
}

figure.image-wrapper figcaption,
figure.video-wrapper figcaption {
  text-align: center;
  font-style: italic;
  font-size: var(--fs-400);
  color: var(--color-text);
  margin-block-start: var(--caption-margin);
}

figure.video-wrapper {
  --radius: 1em;
  --caption-margin: 1em;

  display: grid;
  grid-template-rows: [video-start] auto [video-end caption-start] 1fr [caption-end];
}

figure.video-wrapper figcaption {
  grid-row: caption;
  grid-column: 1 / span 1;
}

figure.video-wrapper video {
  grid-row: video;
  grid-column: 1 / span 1;
  border-radius: var(--radius);
  aspect-ratio: var(--aspect-ratio, 1 / 1);
}

figure.video-wrapper .video-cover {
  --inset: -1px;

  grid-row: video;
  grid-column: 1 / span 1;
  position: relative;
  aspect-ratio: var(--aspect-ratio, 1 / 1);
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.1);
}

figure.video-wrapper .video-cover::before {
  --button-background-inner: rgba(0, 0, 0, 0.825);
  --button-background-middle: rgba(0, 0, 0, 0.15);
  --button-background-outer: rgba(0, 0, 0, 0.06);
  --inner-radius: 3em;
  --outer-radius: 15em;

  content: '';
  position: absolute;
  inset: var(--inset);
  background: radial-gradient(
    circle at center,
    var(--button-background-inner) var(--inner-radius),
    var(--button-background-middle) calc(1px + var(--inner-radius)),
    var(--button-background-outer) var(--outer-radius)
  );
  border-radius: calc(var(--radius) - var(--inset));
}

figure.video-wrapper .video-cover button {
  --size: 6em;

  width: var(--size);
  height: var(--size);
  position: absolute;
  top: 50%;
  left: calc(50% + 0.05 * var(--size));
  transform: translate(-50%, -50%);
  border: none;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05MSA1MEwxNiA3VjkzTDkxIDUwWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
  background-repeat: no-repeat;
  background-size: var(--size);
}

.arrow {
  --angle: 0deg;
  --size: 2.5rem;
  --length: 3.5rem;
  --thickness: 0.5rem;
  --color: black;

  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  transform: rotateZ(calc(var(--angle) - 45deg));
  pointer-events: none;
  z-index: 1;
}

.arrow::before {
  --border: var(--thickness) solid var(--color);

  content: '';
  position: absolute;
  inset: 0;
  border-top: var(--border);
  border-right: var(--border);
}

.arrow::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--length);
  height: var(--thickness);
  background: var(--color);
  transform: translate(-2px, 2px) rotateZ(-45deg);
  transform-origin: calc(100% - 0.5 * var(--thickness)) center;
  border-top-right-radius: var(--thickness);
  border-bottom-right-radius: var(--thickness);
}

/* #endregion Case study */



/* #region Password gate */

#password-gate {
  --corner-radius: 0.3em;
  --field-height: 2.3em;
  --icon-size: 2.5rem;

  .subproject-heading-content:nth-child(1) {
    margin-inline: auto;
    width: clamp(15em, 100%, 25em);
    box-shadow: var(--shadow-image);
    padding: 3em;
    background: var(--color-grey-100);
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .project-name {
    font-size: var(--fs-600);
    font-weight: 700;
    margin-block: 0.5em 1em;
    line-height: 1;
    text-align: center;
  }

  .password-field {
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
    column-gap: 0.5em;
    flex-wrap: wrap;
  }

  form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 0.2em;

    label {
      text-align: center;
      color: var(--color-grey-050);
    }

    input[type="text"] {
      font-family: inherit;
      padding-block: 0.5em;
      padding-inline: 1em;
      font-size: var(--fs-400);
      border: 1px solid var(--color-wcag-gray);
      border-radius: var(--corner-radius);
      width: clamp(10em, 100%, 25em);
      min-height: var(--field-height);
    }
  
    input[type="submit"] {
      background: var(--color-grey-010);
      border-radius: 10em;
      padding-inline: 2em;
      font-family: inherit;
      font-size: var(--fs-400);
      font-weight: 600;
      color: white;
      border: none;
      min-height: var(--field-height);
      max-width: fit-content;
      margin-inline: auto;
    }
  
    input[type="submit"]:hover,
    input[type="submit"]:focus-visible {
      filter: brightness(1.1);
    }
  
    #password-feedback {
      text-align: center;
    }
  }
}

/* #endregion Password gate */



/* #region Homepage */

h2.centered {
  text-align: center;
}

#featured-case-studies {
  --mockup-width: 300px;
  --project-favicon-size: 3rem;
}

#featured-case-studies .case-studies-list {
  display: grid;
  grid-template-columns: auto var(--mockup-width) 1fr;
  grid-template-areas: 'links phone details';
  gap: 1rem;
}

#featured-case-studies .showcase-links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-self: center;
}

#featured-case-studies label {
  --favicon-grayscale: 1;
  --favicon-brightness: 5;

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  background: white;
  text-decoration: none;
  font-weight: 600;
  color: inherit;
  padding-inline: 2rem;
  padding-block: 1rem;
  border-radius: 10rem;
  transition-property: background-color, color;
  transition-duration: 120ms;
  transition-timing-function: ease-in-out;
}

#featured-case-studies label .project-favicon {
  width: var(--project-favicon-size);
  height: var(--project-favicon-size);
  background: var(--img);
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(0) brightness(1);
  transition-property: filter;
  transition-duration: 120ms;
  transition-timing-function: ease-in-out;
}

#featured-case-studies input:checked + label {
  background: var(--item-accent-color);
  color: white;
}

#featured-case-studies input:checked + label .project-favicon {
  filter: grayscale(var(--favicon-grayscale)) brightness(var(--favicon-brightness));
}

#featured-case-studies label .keyboard-arrow-hint {
  --icon-size: 2.5rem;

  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 1rem);
  display: grid;
  place-items: center;
  color: var(--color-wcag-gray);
  pointer-events: none;
  opacity: 0;
}

#featured-case-studies input[data-screen-index="0"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="0"],
#featured-case-studies input[data-screen-index="1"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="1"],
#featured-case-studies input[data-screen-index="2"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="2"],
#featured-case-studies input[data-screen-index="3"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="3"],
#featured-case-studies input[data-screen-index="4"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="4"],
#featured-case-studies input[data-screen-index="5"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="5"],
#featured-case-studies input[data-screen-index="6"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="6"],
#featured-case-studies input[data-screen-index="7"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="7"],
#featured-case-studies input[data-screen-index="8"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="8"],
#featured-case-studies input[data-screen-index="9"]:checked:focus-visible ~ label .keyboard-arrow-hint[data-screen-index="9"] {
  opacity: 1;
}

#featured-case-studies .showcase-details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#featured-case-studies .showcase-details .showcase-detail {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

#featured-case-studies .showcase-details .showcase-detail.detail-visible {
  display: flex;
}

#featured-case-studies .showcase-details .showcase-detail-title {
  margin-block-start: 0.25rem;
  margin-block-end: 1rem;
}

#featured-case-studies .showcase-details .showcase-detail a {
  width: fit-content;
  margin-block-start: 2rem;
}

.heading-with-link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.big-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: fit-content;
  padding-inline: 2rem;
  padding-block: 1rem;
  border-radius: 10rem;
  text-decoration: none;
  font-weight: 600;

  &:has(.svg-wrapper:first-child) {
    padding-inline-start: 1.5rem;
  }

  &:has(.svg-wrapper:last-child) {
    padding-inline-end: 1.5rem;
  }
}

#featured-case-studies .phone-mockup {
  grid-area: phone;
  display: grid;
  place-items: center;
}

.overtext {
  font-size: var(--fs-300);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-wcag-gray);
}

#other-projects {
  --project-favicon-size: 3rem;
}

#other-projects .other-projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 1.5rem;
}

#other-projects .other-project > a {
  --icon-transition-duration: 160ms;
  --icon-shift: 1rem;
  --icon-padding-top: 0rem;

  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    'icon title'
    'icon description'
    'icon type';
  grid-template-columns: var(--project-favicon-size) auto;
  grid-template-rows: auto 1fr;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  background: white;
  text-decoration: none;
  color: inherit;
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
  border-radius: 2.5rem;
}

#other-projects .project-favicon {
  grid-area: icon;
  width: var(--project-favicon-size);
  height: var(--project-favicon-size);
  margin-block-start: var(--icon-padding-top);
  background: var(--img);
  background-size: contain;
  background-repeat: no-repeat;
  transition-property: opacity, transform;
  transition-duration: calc(0.5 * var(--icon-transition-duration));
  transition-timing-function: ease-in-out;
  opacity: 1;
  transform: translateX(0rem);
}

#other-projects .other-project-type {
  grid-area: type;
}

#other-projects .other-project-name {
  grid-area: title;
  font-size: var(--fs-500);
  font-weight: 600;
}

#other-projects .other-project-description {
  grid-area: description;
}

#other-projects .faux-button {
  grid-area: icon;
  width: var(--project-favicon-size);
  height: var(--project-favicon-size);
  margin-block-start: var(--icon-padding-top);
  display: grid;
  place-items: center;
  background: var(--color-text);
  color: white;
  border-radius: 100%;
  opacity: 0;
  transform: translateX(calc(-1 * var(--icon-shift)));
  transition-property: opacity, transform;
  transition-duration: calc(0.5 * var(--icon-transition-duration));
  transition-timing-function: ease-in-out;
}

#other-projects a:hover .project-favicon,
#other-projects a:focus-visible .project-favicon {
  opacity: 0;
  transform: translateX(var(--icon-shift));
  transition-duration: var(--icon-transition-duration);
}

#other-projects a:hover .faux-button,
#other-projects a:focus-visible .faux-button {
  opacity: 1;
  transform: translateX(0rem);
  transition-duration: var(--icon-transition-duration);
}

/* #endregion Homepage */




/* #region Testimonials */

#testimonials {
  --bento-gap: 2rem;
  --author-gap: 2rem;
  --avatar-gap: 1.25rem;
  --avatar-size: 3rem;
}

#testimonials .bento {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--bento-gap);
}

#testimonials .bento .bento-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--bento-gap);
  flex: 1 1 25rem;
}

#testimonials .bento .bento-column .testimonial {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--author-gap);
  border-radius: var(--radius-m);
  padding: 2rem;
  background: white;
  box-shadow:
    0 3px 2px 0 rgba(0, 0, 0, 0.06),
    0 12px 12px 0 rgba(0, 0, 0, 0.04),
    0 24px 24px 0 rgba(0, 0, 0, 0.02);
}

#testimonials .bento .bento-column .testimonial blockquote {
  --quote-decoration-offset: 0rem;

  position: relative;
}

#testimonials .bento .bento-column .testimonial blockquote::before,
#testimonials .bento .bento-column .testimonial blockquote::after {
  content: '"';
  font-style: italic;
  font-size: 800%;
  position: absolute;
  top: calc(-4rem + var(--quote-decoration-offset));
  left: -3.8rem;
  color: var(--color-accent);
}

#testimonials .bento .bento-column .testimonial blockquote::after {
  --quote-decoration-offset: 1rem;

  filter: brightness(0.5) saturate(2) blur(8px);
  opacity: 0.3;
}

#testimonials .bento .bento-column .testimonial blockquote p:first-child {
  text-indent: 1em;
}

#testimonials .bento .bento-column .testimonial blockquote p:last-child::after {
  content: '"';
  font-style: italic;
  color: var(--color-accent);
}

#testimonials .bento .bento-column .testimonial blockquote p + p {
  margin-top: 0.75em;
}

#testimonials .bento .bento-column .testimonial figcaption {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--avatar-gap);
  align-items: center;
}

#testimonials .bento .bento-column .testimonial figcaption .avatar {
  --ring-offset: -5px;
  --ring-width: 2px;

  width: var(--avatar-size);
  height: var(--avatar-size);
  position: relative;
}

#testimonials .bento .bento-column .testimonial figcaption .avatar::before {
  content: '';
  position: absolute;
  inset: var(--ring-offset);
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, 1) calc(100% - var(--ring-width)),
    rgba(255, 255, 255, 0) calc(100% - var(--ring-width) + 1px)
  ), var(--avatar);
  background-size: cover;
  border-radius: 100%;
  opacity: 0.5;
  filter: blur(2px);
}

#testimonials .bento .bento-column .testimonial figcaption .avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--avatar);
  background-size: cover;
  border-radius: 100%;
}

#testimonials .bento .bento-column .testimonial figcaption .author {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

#testimonials .bento .bento-column .testimonial figcaption .author .name {
}

#testimonials .bento .bento-column .testimonial figcaption .author .role {
  font-size: var(--fs-300);
}

/* #endregion Testimonials */



/* #region Media queries */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-name: unset !important;
  }
}

@media (width < 60em) {
  .hidden-m {
    display: none;
  }
  
  .bottom-buttons {
    column-gap: 1em;
  }
}

@media (width < 30em) {
  :root {
    --sticky-note-padding-inline: 1.5em;
    --sticky-note-padding-block: 2.5em 1.5em;
  }

  .hidden-s {
    display: none;
  }

  .shrinkable-to-icon {
    padding: 1em !important;
  }
}

/* #endregion Media queries */

/* #region Phone mockup */

@property --rot-x {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --rot-y {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.phone-wrapper {
  --perspective: 1000px;
  --rot-x: 0deg;
  --rot-y: 0deg;
  --scale: 0.6;

  --screen-width: calc(var(--scale) * 375px);
  --screen-height: calc(var(--scale) * 812px);
  --bezel-width: calc(var(--scale) * 20px);
  
  --phone-width: calc(var(--screen-width) + 2 * var(--bezel-width));
  --phone-height: calc(var(--screen-height) + 2 * var(--bezel-width));
  --phone-thickness: calc(var(--scale) * 50px);
  --phone-radius: calc(var(--scale) * 70px);

  --antenna-notch-width: calc(var(--scale) * 10px);
  --antenna-notch-offset: calc(var(--scale) * 30px);

  --default-scroll-duration: 1000ms;
  --tab-change-duration: 500ms;

  --color-screen-background: rgb(210, 210, 210);

  --color-metal-hue: 240deg;
  --color-metal-saturation-min: 50%;
  --color-metal-saturation-max: 90%;
  --color-metal-saturation-diff: calc(var(--color-metal-saturation-max) - var(--color-metal-saturation-min));
  --color-metal-lightness: 43%;
  --color-metal-lightness-step: 7%;
  --color-metal-200: hsl(var(--color-metal-hue),
    calc(var(--color-metal-saturation-min) + 0.50 * var(--color-metal-saturation-diff)),
    calc(var(--color-metal-lightness) - 3 * var(--color-metal-lightness-step))
  );
  --color-metal-300: hsl(var(--color-metal-hue),
    calc(var(--color-metal-saturation-min) + 0.20 * var(--color-metal-saturation-diff)),
    calc(var(--color-metal-lightness) - 2 * var(--color-metal-lightness-step))
  );
  --color-metal-400: hsl(var(--color-metal-hue),
    calc(var(--color-metal-saturation-min) + 0.15 * var(--color-metal-saturation-diff)),
    calc(var(--color-metal-lightness) - 1 * var(--color-metal-lightness-step))
  );
  --color-metal-500: hsl(var(--color-metal-hue),
    var(--color-metal-saturation-min),
    var(--color-metal-lightness)
  );
  --color-metal-600: hsl(var(--color-metal-hue),
    calc(var(--color-metal-saturation-min) + 0.25 * var(--color-metal-saturation-diff)),
    calc(var(--color-metal-lightness) + 2 * var(--color-metal-lightness-step))
  );
  --color-metal-700: hsl(var(--color-metal-hue),
    calc(var(--color-metal-saturation-min) + 0.50 * var(--color-metal-saturation-diff)),
    calc(var(--color-metal-lightness) + 4 * var(--color-metal-lightness-step))
  );
  --color-metal-800: hsl(var(--color-metal-hue),
    calc(var(--color-metal-saturation-min) + 0.60 * var(--color-metal-saturation-diff)),
    calc(var(--color-metal-lightness) + 5 * var(--color-metal-lightness-step))
  );
  --color-metal-900: hsl(var(--color-metal-hue),
    var(--color-metal-saturation-max),
    calc(var(--color-metal-lightness) + 6 * var(--color-metal-lightness-step))
  );

  --color-back: var(--color-metal-600);
  --color-sides: var(--color-metal-600);
  --color-metal-edge: var(--color-metal-700);
  --color-antenna-notch: var(--color-metal-700);
  --color-button-front: var(--color-metal-700);
  --color-button-sides: var(--color-metal-400);

  perspective: var(--perspective);
  width: var(--phone-width);
  height: var(--phone-height);
}

.phone-wrapper * {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* will-change: transform; */ /* force antialiasing */
}

@supports (-moz-appearance: none) {
  .phone-wrapper * {
    outline: 1px solid transparent; /* smoothing on Firefox */
  } 
}

.phone {
  width: var(--phone-width);
  height: var(--phone-height);
  transform: rotateX(var(--rot-x)) rotateY(var(--rot-y));
  transform-origin: center center calc(-0.5 * var(--phone-thickness));
  transition-property: --rot-x, --rot-y;
  transition-duration: var(--phone-transition-duration-override, 300ms);
  transition-timing-function: ease-out;
  position: relative;
}

.phone .front {
  --home-button-color: black;
  --status-bar-height: calc(var(--scale) * 96px);
  --screen-radius: calc(var(--phone-radius) - var(--bezel-width));

  --black-border-width: calc(var(--scale) * 12px);
  --metal-border-width: calc(var(--scale) * 8px);

  position: absolute;
  inset: 0;
  border-radius: var(--phone-radius);
}

.phone .front .screen {
  width: var(--screen-width);
  height: var(--screen-height);
  position: absolute;
  top: var(--bezel-width);
  left: var(--bezel-width);
  background: var(--color-screen-background);
  overflow: hidden;
  border-radius: var(--screen-radius);
  filter: brightness(clamp(0.85, calc(1 - 0.2 * (sin(var(--rot-y)) - sin(var(--rot-x)))), 1.02));
}

.phone .front .screen .status-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: var(--status-bar-height);
  padding-block-end: calc(var(--scale) * 48px);
  color: black;
  background: rgba(247, 247, 247, 0.85);
  -webkit-backdrop-filter: saturate(150%) blur(4px);
  backdrop-filter: saturate(150%) blur(4px);
  z-index: 1;
  border-block-end: calc(var(--scale) * 0.5px) solid rgba(0, 0, 0, 0.15);
  border-top-left-radius: var(--screen-radius);
  border-top-right-radius: var(--screen-radius);
  display: grid;
  row-gap: calc(var(--scale) * 4px);
  grid-template-columns: 1fr auto 1fr;
  box-shadow: 0 calc(var(--scale) * 2px) calc(var(--scale) * 5px) 0 rgba(0, 0, 0, 0.1);
}

.phone .front .screen .status-bar .current-time {
  margin-block-start: calc(var(--scale) * 8px);
  padding-inline-start: calc(var(--scale) * 0.85rem);
  font-size: calc(var(--scale) * 1.1rem);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  justify-self: center;
  align-self: center;
}

.phone .front .screen .status-bar .camera-cutout {
  position: relative;
  margin-block-start: calc(var(--scale) * 8px);
  width: calc(var(--scale) * 140px);
  height: calc(var(--scale) * 40px);
  background: black;
  border-radius: 100px;
}

.phone .front .screen .status-bar .camera-cutout::before {
  content: '';
  position: absolute;
  inset: calc(var(--scale) * 10px);
  left: unset;
  aspect-ratio: 1;
  border-radius: 100%;
  background: rgb(14, 13, 18);
}

.phone .front .screen .status-bar .icons {
  margin-block-start: calc(var(--scale) * 8px);
  padding-inline-end: calc(var(--scale) * 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone .front .screen .status-bar .icons svg {
  max-width: calc(var(--scale) * 77px);
}

.phone .front .screen .status-bar .address-bars-container {
  --bar-margin: calc(var(--scale) * 32px);
  --bar-width: calc(var(--screen-width) - 2 * var(--bar-margin));
  --bars-gap: calc(var(--scale) * 8px);

  grid-column: 1 / -1;
  min-width: var(--screen-width);
  height: calc(var(--scale) * 36px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-inline: var(--bar-margin);
  column-gap: var(--bars-gap);
  transition: transform var(--tab-change-duration);
  transform: translateX(calc(-1 * var(--screen-index, 0) * (var(--bar-width) + var(--bars-gap))));
}

.phone .front .screen .status-bar .address-bars-container .address-bar {
  justify-self: center;
  display: grid;
  grid-template-columns: calc(var(--scale) * 24px) 1fr calc(var(--scale) * 24px);
  align-items: center;
  padding-inline: calc(var(--scale) * 6px);
  width: var(--bar-width);
  height: calc(var(--scale) * 36px);
  border-radius: calc(var(--scale) * 10px);
  background: rgba(0, 0, 0, 0.1);
  gap: calc(var(--scale) * 4px);
  flex-shrink: 0;
}

.phone .front .screen .status-bar .address-bars-container .address-bar > * {
  height: calc(var(--scale) * 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone .front .screen .status-bar .address-bars-container .address-bar .address {
  gap: calc(var(--scale) * 4px);
}

.phone .front .screen .status-bar .address-bars-container .address-bar .address .icon {
  display: grid;
  place-items: center;
  opacity: 0.5;
}

.phone .front .screen .status-bar .address-bars-container .address-bar .address .icon,
.phone .front .screen .status-bar .address-bars-container .address-bar .address .icon svg {
  width: calc(var(--scale) * 16px);
  height: calc(var(--scale) * 16px);
}

.phone .front .screen .status-bar .address-bars-container .address-bar .icon.hidable {
  --low-pass-filter: clamp(0, calc(var(--screen-index, 0) - var(--this-index, 0) + 1), 1);
  --high-pass-filter: clamp(0, calc(var(--this-index, 0) - var(--screen-index, 0) + 1), 1);

  transition: opacity calc(0.5 * var(--tab-change-duration));
  opacity: calc(var(--low-pass-filter) * var(--high-pass-filter));
}

.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(1) { --this-index: 0; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(2) { --this-index: 1; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(3) { --this-index: 2; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(4) { --this-index: 3; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(5) { --this-index: 4; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(6) { --this-index: 5; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(7) { --this-index: 6; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(8) { --this-index: 7; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(9) { --this-index: 8; }
.phone .front .screen .status-bar .address-bars-container .address-bar:nth-child(10) { --this-index: 9; }

.phone .front .screen .status-bar .address-bars-container .address-bar .address p {
  font-size: calc(var(--scale) * 1.1rem);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.phone .front .screen .contents-container {
  --screen-gap: calc(var(--scale) * 20px);

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: var(--screen-gap);
  transition: transform var(--tab-change-duration);
  transform: translateX(calc(-1 * var(--screen-index, 0) * (var(--screen-width) + var(--screen-gap))));
}

.phone .front .screen .contents-container .content {
  width: var(--screen-width);
  height: var(--screen-height);
  background-image: var(--img);
  background-size: cover;
  background-position-y: var(--bg-position, var(--status-bar-height));
  background-repeat: no-repeat;
  box-shadow: 0 0 calc(var(--scale) * 8px) 0 rgba(0, 0, 0, 0.2);
  transition-property: background-position-y;
  transition-duration: var(--bg-scroll-duration, var(--default-scroll-duration));
  flex-shrink: 0;
}

.phone .front .screen .bottom-nav {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: calc(var(--scale) * 18px);
  padding-block-end: calc(var(--scale) * 8px);
  background: rgba(247, 247, 247, 0.85);
  -webkit-backdrop-filter: saturate(150%) blur(4px);
  backdrop-filter: saturate(150%) blur(4px);
  border-block-start: calc(var(--scale) * 0.5px) solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 calc(var(--scale) * -2px) calc(var(--scale) * 5px) 0 rgba(0, 0, 0, 0.1);
  border-end-start-radius: var(--screen-radius); /* Firefox fix */
  border-end-end-radius: var(--screen-radius); /* Firefox fix */
}

.phone .front .screen .bottom-nav .nav-buttons {
  width: 100%;
  height: calc(var(--scale) * 52px);
  color: #017BFF;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.phone .front .screen .bottom-nav .nav-buttons > div {
  display: grid;
  place-items: center;
}

.phone .front .screen .bottom-nav .nav-buttons > div,
.phone .front .screen .bottom-nav .nav-buttons svg {
  width: calc(var(--scale) * 24px);
  height: calc(var(--scale) * 24px);
}

.phone .front .screen .bottom-nav .nav-buttons .muted {
  color: black;
  opacity: 0.25;
}

.phone .front .screen .bottom-nav .home-button {
  width: calc(var(--scale) * 134px);
  height: calc(var(--scale) * 5px);
  border-radius: 100px;
  background: var(--home-button-color);
}

.phone .front .metal-front {
  position: absolute;
  inset: 0;
  background: var(--color-metal-edge);
  border-radius: calc(var(--screen-radius) + var(--black-border-width) + var(--metal-border-width));
}

.phone .front .metal-front::before {
  content: '';
  position: absolute;
  inset: calc(var(--scale) * 0.5 * var(--metal-border-width));
  background: var(--color-metal-500);
  border-radius: calc(var(--screen-radius) + var(--black-border-width) + 0.5 * var(--metal-border-width));
  filter: blur(calc(var(--scale) * 2px));
}

.phone .front .bezel {
  position: absolute;
  inset: var(--metal-border-width);
  background: black;
  border-radius: calc(var(--screen-radius) + var(--black-border-width));
}

@property --shine-pos {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.phone .front .shine {
  --shine-pos: calc(var(--scale) * -250px * (2 * sin(var(--rot-y)) - sin(var(--rot-x))));
  --shine: linear-gradient(30deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 1.0)
  );

  position: absolute;
  inset: var(--metal-border-width);
  background: var(--shine);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(
    calc(120deg + 0.75 * var(--rot-x)), /* Rotate the shine when facing down */
    rgba(255, 255, 255, 1.0) var(--shine-pos),
    rgba(255, 255, 255, 0.0) calc(var(--shine-pos) + var(--scale) * 64px)
  );
  mask-image: linear-gradient(
    calc(120deg + 0.75 * var(--rot-x)), /* Rotate the shine when facing down */
    rgba(255, 255, 255, 1.0) var(--shine-pos),
    rgba(255, 255, 255, 0.0) calc(var(--shine-pos) + var(--scale) * 64px)
  );
  transition-property: mask-image, -webkit-mask-image;
  transition-duration: var(--bg-scroll-duration, var(--default-scroll-duration));
  border-radius: calc(var(--screen-radius) + var(--black-border-width));
  filter: blur(calc(var(--scale) * 4px));
  opacity: 0.25;
}

.phone .back {
  position: absolute;
  inset: 0;
  border-radius: var(--phone-radius);
  background: var(--color-back);
  transform: rotateY(180deg) translateZ(var(--phone-thickness));
}

.phone .hairline-fixes {
  display: none;
  --inset: 0.5px;
  --radius: calc(var(--phone-radius) - var(--inset));
  --depth-1: 2px;
  --depth-2: calc(var(--phone-thickness) - var(--depth-1));

  position: absolute;
  inset: var(--inset);
}

.phone .hairline-fixes > * {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  background: var(--color-sides);
}

.phone .hairline-fixes .fix-front-1 {
  transform: translateZ(calc(-1 * var(--depth-1)));
}

.phone .hairline-fixes .fix-front-2 {
  transform: translateZ(calc(-1 * var(--depth-2)));
}

.phone .hairline-fixes .fix-back-1 {
  transform: rotateY(180deg) translateZ(var(--depth-1));
}

.phone .hairline-fixes .fix-back-2 {
  transform: rotateY(180deg) translateZ(var(--depth-2));
}

.phone .hairline-fixes .fix-sides-1 {
  transform:
    translateX(calc(0.5 * (var(--phone-width) - var(--phone-thickness))))
    rotateY(90deg)
    translateX(calc(0.5 * var(--phone-thickness))
  );
  backface-visibility: visible;
  width: calc(var(--phone-thickness) - 2 * var(--inset));
  border-radius: unset;
}

.phone .hairline-fixes .fix-sides-2 {
  transform:
    translateY(calc(0.5 * (var(--phone-height) - var(--phone-thickness))))
    rotateX(90deg)
    translateY(calc(-0.5 * var(--phone-thickness))
  );
  backface-visibility: visible;
  height: calc(var(--phone-thickness) - 2 * var(--inset));
  border-radius: unset;
}

.phone .sides {
  position: absolute;
  inset: 0;
}

.phone .sides > .right {
  position: absolute;
  width: var(--phone-thickness);
  height: calc(var(--phone-height) - 2 * var(--phone-radius));
  background: var(--color-sides);
  transform-origin: left center;
  transform: translateY(var(--phone-radius)) translateX(var(--phone-width)) rotateY(90deg);
}

.phone .sides > .right::before,
.phone .sides > .left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent var(--antenna-notch-offset),
    var(--color-antenna-notch) var(--antenna-notch-offset),
    var(--color-antenna-notch) calc(var(--antenna-notch-offset) + var(--antenna-notch-width)),
    transparent calc(var(--antenna-notch-offset) + var(--antenna-notch-width)),
    transparent calc(100% - var(--antenna-notch-offset) - var(--antenna-notch-width)),
    var(--color-antenna-notch) calc(100% - var(--antenna-notch-offset) - var(--antenna-notch-width)),
    var(--color-antenna-notch) calc(100% - var(--antenna-notch-offset)),
    transparent calc(100% - var(--antenna-notch-offset))
  );
}

.phone .sides > .left {
  position: absolute;
  width: var(--phone-thickness);
  height: calc(var(--phone-height) - 2 * var(--phone-radius));
  background: var(--color-sides);
  transform-origin: right center;
  transform: translateY(var(--phone-radius)) translateX(calc(-1 * var(--phone-thickness))) rotateY(-90deg);
}

.phone .sides > .top {
  position: absolute;
  width: calc(var(--phone-width) - 2 * var(--phone-radius));
  height: var(--phone-thickness);
  background: var(--color-sides);
  transform-origin: center bottom;
  transform: translateX(calc(var(--phone-radius))) translateY(calc(-1 * var(--phone-thickness))) rotateX(90deg);
}

.phone .sides > .top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
    transparent var(--antenna-notch-offset),
    var(--color-antenna-notch) var(--antenna-notch-offset),
    var(--color-antenna-notch) calc(var(--antenna-notch-offset) + var(--antenna-notch-width)),
    transparent calc(var(--antenna-notch-offset) + var(--antenna-notch-width))
  );
}

.phone .sides > .bottom {
  position: absolute;
  width: calc(var(--phone-width) - 2 * var(--phone-radius));
  height: var(--phone-thickness);
  background: var(--color-sides);
  transform-origin: center top;
  transform: translateX(var(--phone-radius)) translateY(var(--phone-height)) rotateX(-90deg);
}

.phone .sides > .bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    transparent var(--antenna-notch-offset),
    var(--color-antenna-notch) var(--antenna-notch-offset),
    var(--color-antenna-notch) calc(var(--antenna-notch-offset) + var(--antenna-notch-width)),
    transparent calc(var(--antenna-notch-offset) + var(--antenna-notch-width))
  );
}

.phone .notches {
  --corner-offset: calc(var(--phone-radius) + var(--antenna-notch-offset));
  --corner-offset-plus-width: calc(var(--corner-offset) + var(--antenna-notch-width));

  position: absolute;
  inset: 0;
  background: var(--color-antenna-notch);
  clip-path: polygon(
    /* top */
    calc(100% - var(--corner-offset-plus-width)) 0,
    calc(100% - var(--corner-offset)) 0,
    calc(100% - var(--corner-offset)) var(--bezel-width),
    calc(100% - var(--corner-offset-plus-width)) var(--bezel-width),
    calc(100% - var(--corner-offset-plus-width)) 0,

    /* bottom */
    var(--corner-offset-plus-width) 100%,
    var(--corner-offset) 100%,
    var(--corner-offset) calc(100% - var(--bezel-width)),
    var(--corner-offset-plus-width) calc(100% - var(--bezel-width)),
    var(--corner-offset-plus-width) 100%,
    calc(100% - var(--corner-offset-plus-width)) 0,

    /* left */
    0 var(--corner-offset),
    var(--bezel-width) var(--corner-offset),
    var(--bezel-width) var(--corner-offset-plus-width),
    0 var(--corner-offset-plus-width),
    0 var(--corner-offset),
    calc(100% - var(--corner-offset-plus-width)) 0,

    0 calc(100% - var(--corner-offset-plus-width)),
    var(--bezel-width) calc(100% - var(--corner-offset-plus-width)),
    var(--bezel-width) calc(100% - var(--corner-offset)),
    0 calc(100% - var(--corner-offset)),
    0 calc(100% - var(--corner-offset-plus-width)),
    calc(100% - var(--corner-offset-plus-width)) 0,

    /* right */
    calc(100% - var(--bezel-width)) var(--corner-offset),
    100% var(--corner-offset),
    100% var(--corner-offset-plus-width),
    calc(100% - var(--bezel-width)) var(--corner-offset-plus-width),
    calc(100% - var(--bezel-width)) var(--corner-offset),
    calc(100% - var(--corner-offset-plus-width)) 0,

    calc(100% - var(--bezel-width)) calc(100% - var(--corner-offset-plus-width)),
    100% calc(100% - var(--corner-offset-plus-width)),
    100% calc(100% - var(--corner-offset)),
    calc(100% - var(--bezel-width)) calc(100% - var(--corner-offset)),
    calc(100% - var(--bezel-width)) calc(100% - var(--corner-offset-plus-width)),
    calc(100% - var(--corner-offset-plus-width)) 0
  );
}

.phone .corner {
  --_reference-height: var(--phone-height);
  --_reference-radius: var(--phone-radius);

  --slice-count: 4;
  --angle-per-slice: calc(90deg / (var(--slice-count) + 1));
  --circumference: calc(1.570796 * var(--_reference-radius)); /* tau/4 for each corner */
  --slice-height: calc(var(--circumference) / var(--slice-count)); /* 10 slices per corner */

  width: 100%;
  height: var(--_reference-radius);
}

.phone .corner.top {
  transform-origin: center top;
  transform: translateZ(calc(-1 * var(--_reference-radius))) rotateX(90deg) translateY(calc(-0.5 * var(--slice-height) - 1px));
}

.phone .corner.bottom {
  transform: translateY(calc(var(--_reference-height) - 3 * var(--_reference-radius) - 0.50 * var(--slice-height) - 1px)) translateZ(calc(-1 * var(--_reference-radius)));
}

.phone .corner > div {
  --i: 0;

  position: absolute;
  width: 100%;
  height: calc(1px + var(--slice-height));
  transform-origin: center center;
  transform: rotateX(calc(-1 * var(--angle-per-slice) * (var(--i) - 1))) translateZ(calc(var(--_reference-radius)));
}

.phone .corner > div::before {
  content: '';
  position: absolute;
  inset: 0;
  /* inset-block: calc(var(--scale) * -2px); */
  background: var(--color-sides);
  /* border-radius: calc(var(--scale) * 4px); */
}

.phone .corner > div:nth-child(1)  { --i: 1; }
.phone .corner > div:nth-child(2)  { --i: 2; }
.phone .corner > div:nth-child(3)  { --i: 3; }
.phone .corner > div:nth-child(4)  { --i: 4; }
.phone .corner > div:nth-child(5)  { --i: 5; }
.phone .corner > div:nth-child(6)  { --i: 6; }
.phone .corner > div:nth-child(7)  { --i: 7; }
.phone .corner > div:nth-child(8)  { --i: 8; }
.phone .corner > div:nth-child(9)  { --i: 9; }
.phone .corner > div:nth-child(10) { --i: 10; }
.phone .corner > div:nth-child(11) { --i: 11; }
.phone .corner > div:nth-child(12) { --i: 12; }
.phone .corner > div:nth-child(13) { --i: 13; }
.phone .corner > div:nth-child(14) { --i: 14; }
.phone .corner > div:nth-child(15) { --i: 15; }
.phone .corner > div:nth-child(16) { --i: 16; }
.phone .corner > div:nth-child(17) { --i: 17; }
.phone .corner > div:nth-child(18) { --i: 18; }
.phone .corner > div:nth-child(19) { --i: 19; }
.phone .corner > div:nth-child(20) { --i: 20; }
.phone .corner > div:nth-child(21) { --i: 21; }

.phone .side-button {
  --button-width: calc(var(--scale) * 10px);
  --button-height: calc(var(--scale) * 10px);
  --button-thickness: calc(var(--scale) * 4px);
  --button-margin-top: calc(var(--scale) * 0px);
  
  --color-sides: var(--color-button-sides);
  --button-radius: calc(0.5 * var(--button-width));

  position: absolute;
  top: calc(var(--phone-radius) + var(--button-margin-top));
  width: var(--button-width);
  height: var(--button-height);
  border-radius: var(--button-radius);
  transform: translateX(calc(0.5 * (var(--phone-thickness) - var(--button-width))));
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
}

.phone .side-button .side-button-front {
  transform: translateZ(var(--button-thickness));
  width: 100%;
  height: 100%;
  border-radius: var(--button-radius);
  background: var(--color-button-front);
}

.phone .side-button .side-button-side {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--button-thickness);
  height: calc(var(--button-height) - 2 * var(--button-radius));
  background: var(--color-button-sides);
}

.phone .side-button .side-button-side-right {
  transform-origin: left center;
  transform: translateZ(var(--button-thickness)) translateY(var(--button-radius)) translateX(var(--button-width)) rotateY(90deg);
}

.phone .side-button .side-button-side-left {
  transform-origin: left center;
  transform: translateY(var(--button-radius)) rotateY(-90deg);
}

.phone .side-button .corner {
  --_reference-height: var(--button-height);
  --_reference-radius: var(--button-radius);
  --slice-count: 1;
}

.phone .side-button.side-button-power {
  --button-width: calc(var(--scale) * 20px);
  --button-height: calc(var(--scale) * 100px);
  --button-margin-top: calc(var(--scale) * 130px);
}

.phone .side-button.side-button-action {
  --button-width: calc(var(--scale) * 16px);
  --button-height: calc(var(--scale) * 36px);
  --button-margin-top: calc(var(--scale) * 24px);
}

.phone .side-button.side-button-volume-up {
  --button-width: calc(var(--scale) * 20px);
  --button-height: calc(var(--scale) * 60px);
  --button-margin-top: calc(var(--scale) * 95px);
}

.phone .side-button.side-button-volume-down {
  --button-width: calc(var(--scale) * 20px);
  --button-height: calc(var(--scale) * 60px);
  --button-margin-top: calc(var(--scale) * 170px);
}

/* #endregion Phone mockup */
