@charset "UTF-8";
/*
    This brilliant binary counter idea is sourced from:
    https://medium.com/hypersphere-codes/counting-in-css-unlock-magic-of-css-variables-8e610881097a
*/
:root {
  --_counter-0: 0;
  --_counter-1: 0;
  --_counter-2: 0;
  --_counter-3: 0;
}

[data-is-counter] > :nth-child(2n) {
  --_counter-0: 1;
}

[data-is-counter] > :nth-child(4n+3),
[data-is-counter] > :nth-child(4n) {
  --_counter-1: 1;
}

[data-is-counter] > :nth-child(8n),
[data-is-counter] > :nth-child(8n-1),
[data-is-counter] > :nth-child(8n-2),
[data-is-counter] > :nth-child(8n-3) {
  --_counter-2: 1;
}

[data-is-counter] > :nth-child(16n),
[data-is-counter] > :nth-child(16n-1),
[data-is-counter] > :nth-child(16n-2),
[data-is-counter] > :nth-child(16n-3),
[data-is-counter] > :nth-child(16n-4),
[data-is-counter] > :nth-child(16n-5),
[data-is-counter] > :nth-child(16n-6),
[data-is-counter] > :nth-child(16n-7) {
  --_counter-3: 1;
}

[data-is-counter] > * {
  --pcds-count-n: calc(var(--_counter-0) + 2 * var(--_counter-1) + 4 * var(--_counter-2) + 8 * var(--_counter-3));
}

[data-icon] {
  display: inline flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
[data-icon]::before {
  --icon-color: currentColor;
  content: "";
  flex-shrink: 0;
  inline-size: 1.5em;
  aspect-ratio: 1/1;
  background-color: var(--icon-color, currentColor);
  mask: var(--icon-mask) center center/100% auto no-repeat;
  transition: background-color 0.1s ease, mask 0.1s ease, scale var(--_duration, 0.1s) var(--_timing-function, ease), rotate var(--_duration, 0.1s) var(--_timing-function, ease);
}
[data-icon][data-icon-position=trailing]::before {
  order: 999;
}
[data-icon][data-icon=youtube]::before {
  --icon-mask: url("/assets/images/icons/icon-youtube.svg");
}
[data-icon][data-icon=linkedin]::before {
  --icon-mask: url("/assets/images/icons/icon-linkedin.svg");
}
[data-icon][data-icon=email]::before {
  --icon-mask: url("/assets/images/icons/icon-email.svg");
}
[data-icon][data-icon=flickr]::before {
  --icon-mask: url("/assets/images/icons/icon-flickr.svg");
}
[data-icon][data-icon=download]::before {
  --icon-mask: url("/assets/images/icons/icon-download.svg");
}
[data-icon][data-icon=photo-album]::before {
  --icon-mask: url("/assets/images/icons/icon-photo-album.svg");
}
[data-icon][data-icon=send]::before {
  --icon-mask: url("/assets/images/icons/icon-send.svg");
}
[data-icon][data-icon=document]::before {
  --icon-mask: url("/assets/images/icons/icon-document.svg");
}
[data-icon][data-icon=pdf]::before {
  --icon-mask: url("/assets/images/icons/icon-pdf.svg");
}
[data-icon][data-icon=listen]::before {
  --icon-mask: url("/assets/images/icons/icon-listen.svg");
}
[data-icon][data-icon=expand]::before {
  --icon-mask: url("/assets/images/icons/icon-expand.svg");
}
[data-icon][data-icon=left-right]::before {
  --icon-mask: url("/assets/images/icons/icon-left-right.svg");
}
[data-icon][data-icon=spinner]::before {
  --icon-mask: url("/assets/images/icons/icon-spinner.svg");
}
[data-icon][data-icon=ok]::before {
  --icon-mask: url("/assets/images/icons/icon-ok.svg");
}
[data-icon][data-icon=error]::before {
  --icon-mask: url("/assets/images/icons/icon-error.svg");
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(*) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
  }
  ::view-transition-group(transition-page-head) {
    animation-timing-function: ease-in-out;
    animation-duration: 0.3s;
  }
  ::view-transition-old(transition-page-head) {
    animation-name: transition-page-head-out;
  }
  ::view-transition-new(transition-page-head) {
    animation-name: transition-page-head-out;
  }
  @keyframes transition-page-head-out {
    50% {
      translate: 0 -0.25rem;
    }
  }
  @keyframes transition-page-head-in {
    from {
      transform: translateY(-0.25rem);
      opacity: 0;
    }
  }
  ::view-transition-old(transition-main-headline) {
    animation-name: transition-main-headline-out;
    animation-duration: 0.2s;
  }
  ::view-transition-new(transition-main-headline) {
    animation-name: transition-main-headline-in;
    animation-duration: 0.2s;
    animation-delay: 0.1s;
  }
  @keyframes transition-main-headline-out {
    to {
      transform: scaleX(1.3) skewX(-60deg) skewY(5deg);
      filter: blur(0.5rem);
      opacity: 0;
    }
  }
  @keyframes transition-main-headline-in {
    from {
      transform: scaleX(1.3) skewX(60deg) skewY(-5deg);
      filter: blur(0.5rem);
      opacity: 0;
    }
  }
  ::view-transition-group(transition-main-title) {
    animation-duration: 0.2s;
  }
  ::view-transition-old(transition-main-title) {
    animation-name: transition-main-title-out;
  }
  ::view-transition-new(transition-main-title) {
    animation-name: transition-main-title-in;
    animation-delay: 0.2s;
  }
  @keyframes transition-main-title-out {
    to {
      transform: scaleX(1.3) skewX(-60deg) skewY(5deg);
      filter: blur(0.5rem);
      opacity: 0;
    }
  }
  @keyframes transition-main-title-in {
    from {
      transform: scaleX(1.3) skewX(60deg) skewY(-5deg);
      filter: blur(0.5rem);
      opacity: 0;
    }
  }
  ::view-transition-group(transition-navigation-marker-current) {
    animation-timing-function: cubic-bezier(0.3, 0.3, 0.6, 1.1);
  }
  ::view-transition-old(transition-navigation-marker-current) {
    animation-name: navigation-marker-current-keyframes;
    animation-duration: 0.3s;
  }
  ::view-transition-new(transition-navigation-marker-current) {
    animation-name: navigation-marker-current-keyframes;
    animation-duration: 0.3s;
  }
  @keyframes navigation-marker-current-keyframes {
    50% {
      transform: scaleX(1.5);
    }
  }
  @keyframes transition-navigation-marker-bounce {
    from {
      transform: scaleX(1.75);
    }
  }
}
:root {
  --base-size-scale: 125%;
  /*
      Layout

  |<——————————————————————————————————————————— full ————————————————————————————————————————————>|
  |                                                                                               |
  |    |                                                                                     |    |
  |    |<————————————————————————————————————— feature —————————————————————————————————————>|    |
  |    |                                                                                     |    |
  |    |      |                                                                       |      |    |
  |    |      |<—————————————————————————————— content ——————————————————————————————>|      |    |
  |    |      |                                                                       |      |    |
  |    |      |                                   |                                   |      |    |
  |    |      |<—————————————— meta —————————————>|<————————————— body ——————————————>|      |    |
  |    |      |           |                       |                                   |      |    |
  |    |      |           |           |           |           |           |           |      |    |
  |    |      |   col-1   |   col-2   |   col-3   |   col-4   |   col-5   |   col-6   |      |    |
  |    |      |           |           |           |           |           |           |      |    |
  |    |      |           |                       |                       |           |      |    |
  |    |      |           |<——————————————————— popin ———————————————————>|           |      |    |
  |    |      |           |                                               |           |      |    |

  */
  --layout-row-gap: 3rem;
  --layout-column-gap: 3rem;
  --layout-margin: clamp(1rem, 6vw, 3rem);
  --layout-margin-start: clamp(1rem, 6vw, 3rem);
  --layout-margin-end: clamp(1rem, 6vw, 3rem);
  --layout-feature: minmax(0, 1fr);
  --layout-content: 35rem;
  --layout-single-column: min(var(--layout-content) / 3, (100% - var(--layout-margin-start) - var(--layout-margin-end)) / 6);
  --layout-meta: min(var(--layout-content), (100% - var(--layout-margin-start) - var(--layout-margin-end)) / 2);
  --layout-body: min(var(--layout-content), (100% - var(--layout-margin-start) - var(--layout-margin-end)) / 2);
  --layout-column: content;
  --layout:
      [full-start] var(--layout-margin-start)
          [feature-start] var(--layout-feature)
              [content-start meta-start col-1-start]
                  var(--layout-single-column)
              [col-1-end popin-start col-2-start]
                  var(--layout-single-column)
              [col-2-end col-3-start]
                  var(--layout-single-column)
              [col-3-end meta-end body-start col-4-start]
                  var(--layout-single-column)
              [col-4-end col-5-start]
                  var(--layout-single-column)
              [col-5-end popin-end col-6-start]
                  var(--layout-single-column)
              [col-6-end body-end content-end]
          var(--layout-feature) [feature-end]
      var(--layout-margin-end) [full-end] ;
  /*
      Type scale
  */
  --type-scale-level-small: clamp(.7rem, .6rem + .6svi, 1rem);
  --type-scale-level-base: clamp(.85rem, .7rem + .75svi, 1.25rem);
  --type-scale-level-headline: clamp(1.75rem, 1.5rem + 1svi, 2.5rem);
  --type-scale-level-hero: clamp(3rem, 20cqi, 6rem);
  --text-body-color: oklch(.25 0 0 / 1);
  --text-link-underline-color: oklch(from var(--page-color) calc(l * .9) c h / 1);
  --text-link-underline-color-hover: var(--text-link-underline-color);
  --text-link-underline-color-active: var(--text-link-underline-color);
  --text-link-underline-thickness: .2em;
  --text-link-underline-offset: .2em;
  --text-link-underline-style: dotted;
  --text-link-underline-style-hover: dashed;
  --text-link-underline-style-active: solid;
  /*
      page color in oklch space
  */
  --page-color-lightness: .8;
  --page-color-chroma: .3;
  --page-color-hue: 140;
  --page-color: oklch(var(--page-color-lightness) var(--page-color-chroma) var(--page-color-hue) / 1);
  --attached-shadow-color: oklch(.2 0 0 / 1);
  --attached-shadow-offset-inline: .5rem;
  --attached-shadow-offset-block: .75rem;
  --attached-shadow: var(--attached-shadow-offset-inline) var(--attached-shadow-offset-block) 0 var(--attached-shadow-color);
  --floating-shadow-color: oklch(.2 0 0 / 1);
  --floating-shadow-offset-inline: -.5rem;
  --floating-shadow-offset-block: .5rem;
  --floating-shadow: 0 calc(var(--floating-shadow-offset-block) - var(--floating-shadow-offset-inline)) 0 var(--floating-shadow-offset-inline) var(--floating-shadow-color);
  --floating-shadow-hover: 0 calc(var(--floating-shadow-offset-block) - (1.5 * var(--floating-shadow-offset-inline))) 0 var(--floating-shadow-offset-inline) var(--floating-shadow-color);
  --pop-timing-function: cubic-bezier(.3, .1, .3, 1.6);
  --release-timing-function: cubic-bezier(.2, .6, .4, 1);
  --selection-background-color: var(--text-body-color);
  --selection-color: white;
}

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  interpolate-size: allow-keywords;
  font-size: var(--base-size-scale);
  line-height: 1.5;
  text-wrap-style: pretty;
  text-size-adjust: none;
}

html {
  --article-background-color: var(--page-color);
  --article-text-color: var(var(--text-body-color));
  scroll-timeline: --page-scroll block;
  background-color: var(--article-background-color);
  color: var(--article-text-color);
}

.home {
  --page-color-hue: 125;
  --article-text-color: oklch(.2 0 0 / 1);
}

.project {
  --page-color-hue: 230;
  --article-text-color: oklch(.2 0 0 / 1);
}

.about {
  --page-color-hue: 75;
  --article-text-color: oklch(.25 0 0 / 1);
}

body {
  font-size: var(--type-scale-level-base);
}
body[data-is-frozen] {
  overflow: hidden;
}

h1,
h2,
h3 {
  font-weight: 400;
}

h4 {
  font-weight: 700;
}

:where(a) {
  color: currentColor;
  text-underline-offset: var(--text-link-underline-offset);
  text-decoration-color: var(--text-link-underline-color);
  text-decoration-style: var(--text-link-underline-style);
  text-decoration-thickness: var(--text-link-underline-thickness);
  transition: color 0.2s ease, text-decoration 0.15s ease;
}
:where(a):hover, :where(a):focus-visible {
  color: oklch(from var(--page-color) 0.3 0.2 h/1);
  text-decoration-color: var(--text-link-underline-color-hover);
  text-decoration-style: var(--text-link-underline-style-hover);
}
:where(a):active {
  text-decoration-color: var(--text-link-underline-color-active);
  text-decoration-style: var(--text-link-underline-style-active);
}
:where(a)[target=_blank] {
  --icon-mask: url("/assets/images/icons/icon-youtube.svg");
}

h1 {
  font-size: var(--type-scale-level-base);
  font-weight: 700;
}

h3 {
  font-family: var(--text-headline-typeface);
  font-size: var(--type-scale-level-headline);
  font-weight: var(--text-headline-weight);
  line-height: 1;
}

strong {
  font-weight: 800;
}

form {
  --layout-column: body;
  display: grid;
  gap: 1rem;
}
form button[type=submit] {
  grid-column: -1;
}

fieldset {
  display: grid;
  row-gap: 0.5rem;
  border: none;
}
@container page (inline-size > 30rem) {
  fieldset {
    grid-template-columns: 1fr 3fr;
    column-gap: var(--layout-column-gap);
  }
}
@container (inline-size > 50rem) and (inline-size <= 70rem) {
  fieldset {
    grid-template-columns: 1fr;
  }
}
fieldset > * {
  text-box-trim: trim-both;
}

input[type=text],
input[type=email],
textarea {
  padding-block: 0.75em;
  padding-inline: 0.75em;
  border: none;
  background-color: oklch(100% 0 0deg / 0.15);
  color: inherit;
  caret-color: var(--page-color);
  font-family: "Sono", monospace;
  font-size: var(--type-scale-level-small);
  transition: scale 0.1s ease;
}
input[type=text]:focus-visible,
input[type=email]:focus-visible,
textarea:focus-visible {
  outline: none;
  border: none;
  background-color: oklch(100% 0 0deg / 0.1);
  box-shadow: 0 0 0 0.1em var(--page-color) inset;
  scale: 1.02;
}

textarea {
  resize: vertical;
  field-sizing: content;
  min-block-size: 5rem;
  max-block-size: min(16.5rem, 40vh);
}

button[type=submit],
.button {
  --_background-color: oklch(from var(--page-color) .5 c h / 1);
  --_timing-function: var(--release-timing-function);
  --_duration: .15s;
  display: inline-flex;
  justify-content: center;
  padding-block: 0.5rem;
  padding-inline: var(--layout-column-gap);
  border: none;
  background-color: var(--_background-color);
  box-shadow: var(--floating-shadow);
  color: oklch(95% 0 0deg);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--_duration) ease-in-out, box-shadow var(--_duration) var(--_timing-function), color var(--_duration) ease-in-out, scale var(--_duration) var(--_timing-function);
}
button[type=submit][disabled],
.button[disabled] {
  --_background-color: oklch(from var(--page-color) .3 0 h / 1);
  cursor: default;
}
button[type=submit]:not([disabled]):hover, button[type=submit]:not([disabled]):focus-visible,
.button:not([disabled]):hover,
.button:not([disabled]):focus-visible {
  --_timing-function: var(--pop-timing-function);
  --_duration: .15s;
  outline: none;
  background-color: oklch(from var(--page-color) 0.55 calc(c * 1.1) h/1);
  box-shadow: var(--floating-shadow-hover);
  scale: 1.05;
}
button[type=submit]:not([disabled]):hover[data-icon]::before, button[type=submit]:not([disabled]):focus-visible[data-icon]::before,
.button:not([disabled]):hover[data-icon]::before,
.button:not([disabled]):focus-visible[data-icon]::before {
  scale: 1.25;
  rotate: -20deg;
}
button[type=submit]:not([disabled]):active,
.button:not([disabled]):active {
  outline: none;
  background-color: oklch(from var(--page-color) 0.85 calc(c * 1.1) h/1);
  color: var(--text-body-color);
  scale: 1.02;
}
button[type=submit]:not([disabled]):active[data-icon]::before,
.button:not([disabled]):active[data-icon]::before {
  scale: 1.25;
  rotate: -15deg;
}

figure {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  font-family: var(--text-headline-typeface);
  font-size: var(--type-scale-level-small);
  font-style: italic;
  text-align: center;
  text-wrap-style: balance;
  line-height: 1;
}

picture {
  display: inline-block;
}

figcaption {
  justify-self: stretch;
  padding-block: 0.5rem;
}

nav ul {
  padding-inline-start: 0;
  list-style-type: none;
}

.container {
  container-name: page;
  container-type: inline-size;
}
.container > * {
  display: grid;
  grid-template-columns: var(--layout);
  row-gap: var(--layout-column-gap);
  align-items: start;
}
.container > * > * {
  grid-column: var(--layout-column);
}

aside {
  --article-background-color: oklch(.95 0 0 / 1);
  --article-padding-block-start: 6rem;
  --article-padding-block-end: 4rem;
  padding-block: var(--article-padding-block-start) var(--article-padding-block-end);
  background-color: var(--article-background-color);
  color: oklch(20% 0 0deg);
}
aside:has(.headline:first-child) {
  --article-padding-block-start: 0;
}

.title-card {
  --article-background-color: var(--text-body-color);
  color: oklch(95% 0 0deg);
}

.container article:first-of-type .headline[data-is-page-transitioned=true] {
  view-transition-name: transition-main-headline;
}
.container article:first-of-type .hero .title[data-is-page-transitioned=true] {
  view-transition-name: transition-main-title;
}

article {
  --article-padding-block-start: 6rem;
  --article-padding-block-end: 4rem;
  padding-block-start: var(--article-padding-block-start);
  padding-block-end: var(--article-padding-block-end);
  background-color: var(--article-background-color);
}
@container page (inline-size > 50rem) {
  article {
    container-type: inline-size;
  }
}
article:has(.headline:first-child) {
  --article-padding-block-start: 0;
}
article:first-of-type {
  --article-background-color: var(--page-color);
  --text-link-underline-color: oklch(from currentColor l c h / .5);
  --text-link-underline-color-hover: var(--text-link-underline-color);
  --text-link-underline-color-active: var(--text-link-underline-color);
}

.page-head {
  z-index: 9;
  position: sticky;
  inset: 0 0 auto;
  padding-block: 1rem;
  background-color: var(--page-color);
}
@container page (inline-size > 30rem) {
  .page-head[data-is-page-transitioned=true] {
    view-transition-name: transition-page-head;
  }
  .page-head[data-is-page-transitioned=true] [aria-current=page]::after {
    view-transition-name: transition-navigation-marker-current;
  }
}
@container page (inline-size > 50rem) {
  .page-head {
    padding-block: 1.75rem;
  }
}
.page-head > section {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@container page (inline-size > 30rem) {
  .page-head > section {
    align-items: baseline;
  }
}
.page-head a {
  color: inherit;
  text-decoration: none;
}
.page-head h1 {
  display: grid;
}
@container page (inline-size > 50rem) {
  .page-head h1 {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
  }
}
.page-head h1 .tagline {
  font-size: var(--type-scale-level-small);
  font-weight: 400;
  letter-spacing: -0.05ex;
}
@container page (inline-size > 50rem) {
  .page-head h1 .tagline {
    padding-inline-start: 0.5rem;
    box-shadow: 1px 0 0 currentColor inset;
  }
}
.page-head .main-navigation {
  margin-inline-start: auto;
}
.page-head .main-navigation a {
  --_marker-width: 2rem;
  --_marker-height: .2rem;
  --_marker-color: currentColor;
  --_marker-size: var(--_marker-height);
  --_marker-clip-path:
      polygon(
          calc(50% - var(--_marker-size) / 2) 0%,
          calc(50% + var(--_marker-size) / 2) 0%,
          calc(50% + var(--_marker-size) / 2) 100%,
          calc(50% - var(--_marker-size) / 2) 100%
      ) ;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@container page (inline-size <= 30rem) {
  .page-head .main-navigation a {
    padding-block: 0.5em;
    padding-inline: 1em;
  }
  .page-head .main-navigation a[aria-current=page]::after {
    content: "";
    display: block;
    inline-size: 0.75em;
    block-size: 0.3em;
    border-style: solid;
    border-color: var(--_marker-color);
    border-inline-start-width: 0.15rem;
    border-inline-end-width: 0;
    border-block-start-width: 0;
    border-block-end-width: 0.15rem;
    rotate: -45deg;
  }
}
@container page (inline-size > 30rem) {
  .page-head .main-navigation a {
    --_marker-content: "";
    position: relative;
    display: grid;
    gap: 0.25rem;
  }
  .page-head .main-navigation a::after {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-start: calc(50% - var(--_marker-width) / 2);
    inline-size: var(--_marker-width);
    block-size: var(--_marker-height);
    border-radius: var(--_marker-height);
    background-color: var(--_marker-color);
    opacity: 0;
    clip-path: var(--_marker-clip-path);
    transition: clip-path 0.1s ease, opacity 0.1s ease;
  }
}
.page-head .main-navigation a[aria-current=page] {
  --_marker-size: var(--_marker-width);
}
.page-head .main-navigation a[aria-current=page]::after {
  inset-block-start: auto;
  inset-block-end: -0.5rem;
  opacity: 1;
}
@media (pointer: fine) {
  .page-head .main-navigation a:not([aria-current=page]):hover, .page-head .main-navigation a:not([aria-current=page]):focus-visible {
    --_marker-size: var(--_marker-width);
  }
  .page-head .main-navigation a:not([aria-current=page]):hover::after, .page-head .main-navigation a:not([aria-current=page]):focus-visible::after {
    opacity: 0.25;
  }
}
@container page (inline-size <= 30rem) {
  .page-head .main-navigation::before {
    opacity: 0;
    background-color: oklch(0% 0 0deg);
    transition: opacity var(--toggle-transition-duration) ease;
  }
  .page-head .main-navigation:focus-within::before {
    z-index: 1;
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.5;
  }
  .page-head .main-navigation:focus-within ul {
    display: grid;
    opacity: 1;
    translate: 0 1rem;
    scale: 1;
  }
  @starting-style {
    .page-head .main-navigation:focus-within ul {
      opacity: 0;
      translate: 0 -1rem;
      scale: 1.1;
    }
  }
  .page-head .main-navigation:focus-within .navigation-toggle {
    transform: rotate(-45deg);
  }
  .page-head .main-navigation:focus-within .navigation-toggle::before {
    transform: translateY(0) rotate(90deg);
  }
  .page-head .main-navigation:focus-within .navigation-toggle::after {
    transform: translateY(0);
  }
}
@container page (inline-size <= 30rem) {
  .page-head ul {
    z-index: 9;
    display: none;
    position: fixed;
    inset-inline: var(--layout-margin);
    background-color: var(--article-background-color);
    box-shadow: var(--attached-shadow);
    font-size: var(--type-scale-level-headline);
    opacity: 0;
    translate: 0 -1rem;
    scale: 1.1;
    transition-property: display, opacity, translate, scale;
    transition-duration: 0.15s;
    transition-behavior: allow-discrete;
  }
}
@container page (inline-size > 30rem) {
  .page-head ul {
    display: flex;
    gap: 1.5rem;
  }
}
@container page (inline-size > 50rem) {
  .page-head ul {
    gap: 3rem;
  }
}
.page-head .avatar {
  display: none;
  order: -1;
}
.page-head .avatar img {
  block-size: 4rem;
  border-radius: 50%;
}

@keyframes speaking {
  0%, 25%, 50%, 75%, 100% {
    rotate: 0deg;
    translate: 0;
  }
  12.5% {
    rotate: -5deg;
    translate: -0.05em -0.05em;
  }
  37.5% {
    rotate: 10deg;
    translate: -0.05em 0.05em;
  }
  62.5% {
    rotate: -10deg;
    translate: 0.05em 0.05em;
  }
  87.5% {
    rotate: 5deg;
    translate: 0.05em -0.05em;
  }
}
.pronunciation {
  justify-self: start;
  position: relative;
}
.pronunciation [data-icon] {
  --_timing-function: var(--pop-timing-function);
  --_duration: .15s;
  --_base_x_offset: 100%;
  position: absolute;
  inset-inline-end: 0;
  display: grid;
  opacity: 0.7;
  transition: display var(--_duration) ease allow-discrete, opacity var(--_duration) ease, scale var(--_duration) var(--_timing-function), translate var(--_duration) ease, rotate var(--_duration) var(--_timing-function);
  translate: calc(var(--_base_x_offset) + 0.25em);
}
@media (pointer: fine) {
  .pronunciation [data-icon] {
    --_base_x_offset: -100%;
    display: none;
    inset-inline-start: 0;
    inset-inline-end: auto;
    transform-origin: center 75%;
    translate: calc(var(--_base_x_offset) + 0.25em) 0;
  }
  .pronunciation [data-icon]:hover, .pronunciation [data-icon]:focus {
    opacity: 1;
    scale: 1.5;
    rotate: -20deg;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pronunciation [data-icon].speaking {
    animation-name: speaking;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-composition: accumulate;
    rotate: -20deg;
  }
}
.pronunciation:hover [data-icon], .pronunciation:focus-within [data-icon] {
  translate: calc(var(--_base_x_offset) + 0.25em) 0;
}
@media (pointer: fine) {
  .pronunciation:hover [data-icon], .pronunciation:focus-within [data-icon] {
    display: grid;
    translate: calc(var(--_base_x_offset)) 0;
  }
}
@starting-style {
  .pronunciation:hover [data-icon], .pronunciation:focus-within [data-icon] {
    translate: calc(var(--_base_x_offset) + 0.25em) 0;
  }
  @media (pointer: fine) {
    .pronunciation:hover [data-icon], .pronunciation:focus-within [data-icon] {
      opacity: 0;
      translate: calc(var(--_base_x_offset)) 0;
    }
  }
}

@container page (inline-size > 50rem) {
  .content {
    --layout-column: body;
    z-index: 1;
    align-self: stretch;
    box-shadow: 1px 0 0 currentColor inset;
    padding-inline-start: 1.5rem;
  }
}
.content section {
  --_border-color: currentColor;
  --_border-thickness: .1rem;
  --_border-dash-scale: 1;
  --_border-gap-scale: 9;
}
.content section:not(:first-of-type) {
  padding-block-start: var(--layout-row-gap);
  position: relative;
}
.content section:not(:first-of-type)::before {
  content: "";
  display: block;
  block-size: var(--_border-thickness);
  margin-block-end: var(--layout-row-gap);
  background-image: repeating-linear-gradient(to right, var(--_border-color) 0, var(--_border-color) calc(var(--_border-dash-scale) * var(--_border-thickness)), transparent calc(var(--_border-dash-scale) * var(--_border-thickness)), transparent calc((var(--_border-dash-scale) + var(--_border-gap-scale)) * var(--_border-thickness)));
}
.content section:not(:first-of-type).section--image::before, .content section:not(:first-of-type).section--image + *::before, .content section:not(:first-of-type).section--file::before, .content section:not(:first-of-type).section--file + *::before, .content section:not(:first-of-type).section--gallery::before, .content section:not(:first-of-type).section--gallery + *::before {
  display: none;
}
.content section > figure {
  --_margin-inline-start: var(--layout-margin-start);
  --_margin-inline-end: var(--layout-margin-end);
  margin-inline: calc(-1 * var(--_margin-inline-start)) calc(-1 * var(--_margin-inline-end));
}
@container page (inline-size > 50rem) {
  .content section > figure {
    --_margin-inline-start: calc(var(--layout-column-gap) / 2);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .content section > figure {
    animation-name: card-reveal;
    animation-fill-mode: both;
    animation-timing-function: var(--pop-timing-function);
    animation-timeline: view();
    animation-range: entry 10% entry-crossing 100%;
  }
}
.content section > figure img {
  inline-size: 100%;
  max-block-size: 100vh;
  background-color: currentColor;
  box-shadow: var(--attached-shadow);
  object-position: top;
}
@media (prefers-reduced-motion: no-preference) {
  .content section > figure img {
    animation-name: image-scroll;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-timeline: view(30vh 25vh);
  }
}
@keyframes image-scroll {
  to {
    object-position: bottom;
  }
}
.content section > figure figcaption {
  box-shadow: 0 -1px 0 currentColor inset;
}

.section--copy ::marker {
  content: "✜";
}
.section--copy ul {
  padding-inline-start: 1em;
}
.section--copy ul:not(:first-child) {
  margin-block-start: 1em;
}
.section--copy li {
  padding-inline-start: 0.5em;
}
.section--copy p:not(:first-child) {
  margin-block-start: 1em;
}
.section--copy li:not(:first-child) {
  margin-block-start: 0.5em;
}

.section--file a {
  color: inherit;
  text-decoration: none;
}
.section--file figure {
  position: relative;
}
.section--file [data-icon] {
  --_timing-function: var(--release-timing-function);
  --_duration: .15s;
  position: relative;
}
.section--file [data-icon]:hover, .section--file [data-icon]:focus-visible {
  --_timing-function: var(--pop-timing-function);
}
.section--file [data-icon]:hover::before, .section--file [data-icon]:focus-visible::before {
  scale: 1.25;
  rotate: -20deg;
}
.section--file [data-icon]:active::before {
  scale: 1.2;
  rotate: -15deg;
}
.section--file [data-icon]::before {
  z-index: 2;
  position: absolute;
  inline-size: 20cqmin;
  color: white;
  mix-blend-mode: difference;
  pointer-events: none;
}

.image-gallery {
  --_max-block-size: min(24rem, 70svb);
  --_margin-inline-start: var(--layout-margin-start);
  --_margin-inline-end: var(--layout-margin-end);
  --_gap: 1rem;
  --_padding-block: var(--_gap);
  --_padding-inline: var(--_gap);
  --_background-color: oklch(from var(--text-body-color) .4 c h / 1);
}
@container page (inline-size > 50rem) {
  .image-gallery {
    --_margin-inline-start: calc(.5 * var(--layout-column-gap));
    --_margin-inline-end: calc(50vw - 100% - 1.5rem);
  }
}
.image-gallery:hover, .image-gallery:focus-visible {
  --_timing-function: var(--pop-timing-function);
}
.image-gallery:hover::before, .image-gallery:focus-visible::before {
  translate: -2cqmin 0;
}
.image-gallery:hover::after, .image-gallery:focus-visible::after {
  translate: 2cqmin 0;
}
.image-gallery::before, .image-gallery::after {
  --icon-color: white;
  content: "";
  z-index: 9;
  position: absolute;
  inset-block-start: calc(50% + 1.5rem);
  inline-size: 20cqmin;
  aspect-ratio: 1/1;
  display: block;
  background-color: var(--icon-color, currentColor);
  mask: var(--icon-mask) center center/100% auto no-repeat;
  transform: translateY(-50%);
  transition: scale var(--_duration, 0.1s) var(--_timing-function, ease), translate var(--_duration, 0.1s) var(--_timing-function, ease);
  mix-blend-mode: difference;
  pointer-events: none;
}
.image-gallery::before {
  --icon-mask: url("/assets/images/icons/icon-expand.svg");
  inset-inline-end: calc(50% + 1rem);
}
.image-gallery::after {
  --icon-mask: url("/assets/images/icons/icon-left-right.svg");
  inset-inline-start: calc(50% + 1rem);
}
.image-gallery ul {
  --_timing-function: var(--release-timing-function);
  container-type: inline-size;
  display: flex;
  gap: var(--_gap);
  max-block-size: var(--_max-block-size);
  margin-inline-start: calc(-1 * var(--_margin-inline-start));
  margin-inline-end: calc(-1 * var(--_margin-inline-end));
  padding-inline: var(--_padding-inline);
  border-block-width: var(--_gap);
  border-block-style: solid;
  border-color: var(--_background-color);
  background-color: var(--_background-color);
  box-shadow: var(--attached-shadow);
  overflow-inline: scroll;
  overflow-block: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--attached-shadow-color) transparent;
  scroll-snap-type: inline;
  list-style-type: none;
}
@media (prefers-reduced-motion: no-preference) {
  .image-gallery ul {
    animation-name: card-reveal;
    animation-fill-mode: both;
    animation-timing-function: var(--pop-timing-function);
    animation-timeline: view();
    animation-range: entry 10% entry-crossing 100%;
  }
}
@media (orientation: portrait) {
  .image-gallery ul {
    --_max-block-size: min(24rem, 50svb);
  }
}
body[data-is-frozen] .image-gallery ul {
  overflow: hidden;
}

.image-gallery li {
  place-content: center;
}
.image-gallery figure {
  margin: 0;
  scroll-snap-align: center;
}
.image-gallery img {
  max-inline-size: 70cqi;
  object-fit: contain;
}
.image-gallery figcaption {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.image {
  box-shadow: 1px 0 0 currentColor inset;
}
@container page (inline-size > 50rem) {
  .image {
    --layout-column: body;
  }
}

@container page (inline-size > 50rem) {
  .hero {
    --layout-column: meta;
    align-self: stretch;
    margin-inline-end: calc(var(--layout-column-gap) / 2);
  }
}
.hero section {
  container-type: inline-size;
  display: grid;
  row-gap: 1.5rem;
}
@container page (inline-size > 50rem) {
  .hero section {
    position: sticky;
    inset-block-start: 7rem;
  }
}
.hero .headline {
  padding-block: 1em 0;
}

.title {
  font-family: "Mohave", sans-serif;
  font-size: var(--type-scale-level-hero);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap-style: balance;
  text-rendering: geometricPrecision;
}
.hero .title {
  border-block-end: 0.1em solid currentColor;
}

.headline {
  padding-block: 2em;
  font-family: var(--text-headline-typeface);
  font-size: var(--type-scale-level-headline);
  font-weight: var(--text-headline-weight);
  font-style: italic;
  text-align: center;
  line-height: 1.25;
  text-wrap-style: balance;
  text-rendering: geometricPrecision;
}
@container page (inline-size > 30rem) {
  .headline {
    --layout-column: popin;
  }
}

.client {
  font-family: "Mohave", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style-type: none;
  font-size: var(--type-scale-level-small);
}

.keyword {
  padding: 0.25em 1em;
  background-color: oklch(0% 0 0deg / 0.15);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
  list-style-type: none;
}

.cta {
  padding-block: 1.5em;
}
@container page (inline-size <= 30rem) {
  .cta {
    display: grid;
  }
}
.cta .button {
  padding-inline: var(--layout-column-gap);
}

@property --_hover-timeline {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.card-deck {
  --_card-background-color: white;
  --_card-scale-factor: .05;
  --_hover-timeline: .0;
  --_timing-function: var(--release-timing-function);
  --_duration: .2s;
  display: grid;
  column-gap: calc(var(--layout-column-gap) / 2);
  row-gap: calc(var(--layout-row-gap) / 2);
  list-style-type: none;
}

@keyframes card-reveal {
  from {
    translate: 0 6rem;
    opacity: 0;
  }
}
.card {
  container-type: inline-size;
  isolation: isolate;
  position: relative;
  display: flex;
  scale: calc(1 + var(--_hover-timeline) * var(--_card-scale-factor));
}
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: --_hover-timeline var(--_duration) var(--_timing-function);
  }
  .card:hover, .card:focus-within {
    --_hover-timeline: 1.0;
    --_timing-function: var(--pop-timing-function);
  }
}
.card::before, .card::after {
  --_layer-color: var(--_card-background-color);
  content: "";
  z-index: -1;
  display: block;
  position: absolute;
  inset: 0;
  background-color: var(--_layer-color);
  scale: 1;
}
.card::before {
  --_layer-color: var(--attached-shadow-color);
  z-index: -2;
  translate: 0 calc(var(--_hover-timeline) * var(--floating-shadow-offset-block));
  scale: calc(1 / (1 + var(--_hover-timeline) * var(--_card-scale-factor))) 1;
}
.card a {
  color: currentColor;
  text-decoration: none;
}
.card a:focus, .card a:active {
  outline: none;
}
.card a::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}
.card h3 {
  font-style: italic;
  text-wrap-style: balance;
}
.card .thumbnail {
  display: flex;
  padding: 0;
}
.card .thumbnail img {
  inline-size: 100%;
  aspect-ratio: 16/9;
}
.card .client-logo {
  display: flex;
  background-color: white;
}
.card .client-logo img {
  object-fit: contain;
  max-block-size: 2rem;
}

.article-list {
  --article-background-color: oklch(.8 0 0 / 1);
  --article-padding-block-start: var(--layout-row-gap);
  --article-padding-block-end: var(--layout-row-gap);
}
.article-list .title {
  text-align: center;
}

.layout--list .card {
  display: grid;
  grid-template-columns: [content-start] 3fr [content-end thumbnail-start] 2fr [thumbnail-end];
  padding: 1.5rem 0;
}
.layout--list .card > *:not(figure) {
  grid-column: content;
  margin-inline: var(--layout-column-gap);
}
.layout--list .card:nth-child(2n) {
  direction: rtl;
}
.layout--list .card h3 {
  margin-block-end: 1rem;
}
.layout--list .thumbnail {
  grid-column: thumbnail;
  grid-row: 1/span 3;
  margin-block: -1.5rem;
  padding: 0;
}

.layout--grid .card-deck {
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
}
.layout--grid .card {
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .layout--grid .card {
    --_entry: 10%;
    --_entry-crossing: 30%;
    animation-name: card-reveal;
    animation-fill-mode: both;
    animation-timing-function: var(--pop-timing-function);
    animation-timeline: view();
    animation-range: entry var(--_entry) entry-crossing var(--_entry-crossing);
  }
  @container (inline-size > 29.5em) {
    .layout--grid .card {
      --_entry: calc(mod(var(--pcds-count-n) - 2, 3) * 8%);
      --_entry-crossing: calc(mod(var(--pcds-count-n) - 1, 5) * 8% + 50%);
    }
  }
}
.layout--grid .teaser {
  padding-block: 1em;
  padding-inline: calc(var(--layout-column-gap) / 2);
}
.layout--grid .thumbnail img {
  aspect-ratio: 2/1;
}

.contact {
  --article-padding-block-end: 0;
}
.contact::after {
  grid-column: content;
  content: "";
  display: block;
  block-size: 1px;
  background-color: currentColor;
}

.page-foot {
  --text-link-underline-color: oklch(1 0 0 / .3);
  --text-link-underline-color-hover: oklch(from currentColor l c h / .7);
  --text-link-underline-color-active: oklch(from currentColor l c h / .9);
  z-index: -1;
  padding-block: 4rem;
  background-color: var(--text-body-color);
  color: oklch(95% 0 0deg);
}
.page-foot .social-links ul {
  column-gap: 2rem;
}
@container (inline-size > 30rem) {
  .page-foot .social-links ul {
    column-count: 2;
  }
}
@container (inline-size > 50rem) {
  .page-foot .social-links ul {
    column-count: 3;
  }
}
.page-foot .social-links li {
  display: flex;
  margin-block-end: 1rem;
}
.page-foot .social-links a {
  color: currentColor;
  transition: color 0.2s ease;
}
.page-foot .social-links a:hover, .page-foot .social-links a:active {
  color: oklch(from var(--page-color) 0.9 0.25 h/1);
}

:root {
  --toggle-color: var(--text-body-color);
  --toggle-size: 2rem;
  --toggle-thickness: .1rem;
  --toggle-transition-duration: .15s;
}

.navigation-toggle {
  display: none;
  transition: transform var(--toggle-transition-duration) ease;
}
@container (inline-size < 30rem) {
  .navigation-toggle {
    display: block;
    position: relative;
    display: block;
    inline-size: var(--toggle-size);
    block-size: 0;
    margin-block: calc(var(--toggle-size) / 2 - var(--toggle-thickness) / 2);
    border: none;
    outline: none;
    border-block: calc(var(--toggle-thickness) / 2) solid var(--toggle-color);
    background-color: transparent;
    color: transparent;
  }
  .navigation-toggle::before, .navigation-toggle::after {
    content: "";
    position: absolute;
    inset: calc(var(--toggle-thickness) / -2) 0 auto;
    block-size: 0;
    border-block-start: var(--toggle-thickness) solid var(--toggle-color);
    transition: transform var(--toggle-transition-duration) ease;
  }
  .navigation-toggle::before {
    transform: translateY(-0.7rem);
  }
  .navigation-toggle::after {
    transform: translateY(0.7rem);
  }
}

.floating-nav {
  --_floater-color: currentColor;
  z-index: 5;
  position: fixed;
  inset-block-start: 8rem;
  inset-inline-start: 0;
  display: flex;
  font-size: var(--type-scale-level-small);
  line-height: 1.25;
}
.floating-nav:hover ul {
  display: var(--_visible-display);
  translate: 0 0;
  scale: 1;
  opacity: 1;
}
.floating-nav::before {
  content: "";
  display: block;
  position: absolute;
  inset-block-start: 1em;
  inset-inline-start: 0.5em;
  inline-size: 1rem;
  aspect-ratio: 1/1.5;
  background-image: linear-gradient(var(--_floater-color) 20%, transparent 0, transparent 40%, var(--_floater-color) 0, var(--_floater-color) 60%, transparent 0, transparent 80%, var(--_floater-color) 0);
}
.floating-nav ul {
  --_visible-display: block;
  z-index: -1;
  position: relative;
  display: none;
  padding-block: 0.75em;
  padding-inline: 3em 1.5em;
  background-color: oklch(100% 0 0deg);
  box-shadow: var(--attached-shadow);
  translate: -3em 0;
  scale: 0.95;
  transition: translate 0.1s ease, scale 0.1s ease, opacity 0.1s ease, display 0.1s ease allow-discrete;
  opacity: 0;
}
@starting-style {
  .floating-nav ul {
    display: none;
    translate: -3em 0;
    scale: 0.95;
    opacity: 0;
  }
}
.floating-nav li:not(:has(a)) {
  margin-block-end: 0.5em;
  padding-block: 0 0.5em;
  box-shadow: 0 -1px 0 currentColor inset;
  font-weight: 600;
}
.floating-nav a {
  display: flex;
  gap: 0.5em;
  padding-block: 0.5em;
  text-decoration: none;
  transition: scale 0.1s ease;
}
.floating-nav a:hover, .floating-nav a:focus-visible {
  scale: 1.02;
}

.featured-work {
  font-size: var(--type-scale-level-small);
}
.featured-work ul {
  padding-inline-start: 0;
  list-style-type: none;
}

/*# sourceMappingURL=new-1.css.map */