@layer reset, tokens, themes, base, layout, components, pages, utilities;

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Switzer-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Switzer-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Switzer Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 100%;
  ascent-override: 98%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@property --dusk-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}

@property --dusk-header-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #0c1012;
}

@property --dusk-header-rule {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --dusk-sky-top {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --dusk-sky-bottom {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  svg {
    display: block;
  }

  address {
    font-style: normal;
  }

  [hidden]:not([data-dusk-reveal]) {
    display: none !important;
  }
}

@layer tokens {
  :root {
    color-scheme: light;

    --dusk-palette-paper: #ededea;
    --dusk-palette-daylight: #f8f8f5;
    --dusk-palette-ink: #0c1012;
    --dusk-palette-stone: #5d6565;
    --dusk-palette-mist: #cad4d6;
    --dusk-palette-orange: #fa5f05;
    --dusk-palette-night: #0a1d29;
    --dusk-palette-night-high: #163542;
    --dusk-palette-dusk: #20424e;
    --dusk-palette-horizon: #6e8586;
    --dusk-palette-dawn-high: #e0e3e1;
    --dusk-palette-dawn-mid: #e1e5df;
    --dusk-palette-dawn-low: #f0e3d2;
    --dusk-palette-line-soft: #c6cac8;
    --dusk-palette-line-soft-rgb: 198 202 200;
    --dusk-palette-print-ink: #000;
    --dusk-palette-print-muted: #333;
    --dusk-palette-print-rule: #999;
    --dusk-palette-print-paper: #fff;
    --dusk-palette-orange-rgb: 250 95 5;
    --dusk-palette-ember-rgb: 246 138 76;
    --dusk-palette-peach-rgb: 243 180 138;
    --dusk-palette-glow-rgb: 243 217 186;
    --dusk-palette-haze-rgb: 89 124 128;
    --dusk-palette-violet-rgb: 176 140 168;
    --dusk-palette-daylight-rgb: 248 248 245;
    --dusk-palette-ink-rgb: 12 16 18;

    --dusk-font-family: "Switzer", "Switzer Fallback", system-ui, sans-serif;
    --dusk-font-weight-regular: 400;
    --dusk-font-weight-medium: 500;
    --dusk-font-cap-height: 0.68;
    --dusk-font-cap-offset: 0.315;
    --dusk-font-descent-offset: 0.365;

    --dusk-size-1: 0.25rem;
    --dusk-size-1-5: 0.375rem;
    --dusk-size-2: 0.5rem;
    --dusk-size-2-5: 0.625rem;
    --dusk-size-3: 0.75rem;
    --dusk-size-3-5: 0.875rem;
    --dusk-size-4: 1rem;
    --dusk-size-5: 1.25rem;
    --dusk-size-6: 1.5rem;
    --dusk-size-8: 2rem;
    --dusk-size-10: 2.5rem;
    --dusk-size-11: 2.75rem;
    --dusk-size-12: 3rem;
    --dusk-size-14: 3.5rem;
    --dusk-size-16: 4rem;
    --dusk-size-18: 4.5rem;
    --dusk-size-20: 5rem;
    --dusk-size-22: 5.5rem;
    --dusk-size-24: 6rem;
    --dusk-size-30: 7.5rem;
    --dusk-size-32: 8rem;
    --dusk-size-50: 12.5rem;

    --dusk-ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
    --dusk-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --dusk-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
    --dusk-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --dusk-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
    --dusk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dusk-duration-quick: 150ms;
    --dusk-duration-base: 240ms;
    --dusk-duration-slow: 560ms;
    --dusk-duration-slide: 480ms;
    --dusk-duration-fill: 420ms;
    --dusk-duration-fade: 280ms;
    --dusk-delay-follow: 60ms;

    --dusk-menu-in: 380ms;
    --dusk-menu-out: 280ms;
    --dusk-menu-out-delay: 80ms;
    --dusk-menu-item-in: 560ms;
    --dusk-menu-item-out: 120ms;
    --dusk-menu-item-delay: 180ms;
    --dusk-menu-item-stagger: 35ms;
    --dusk-menu-item-rise: var(--dusk-size-3);

    --dusk-entrance-glow: 3.2s;
    --dusk-entrance-glow-delay: 0s;
    --dusk-entrance-clouds: 3.6s;
    --dusk-entrance-clouds-delay: 0.4s;
    --dusk-entrance-ruler: 1.2s;
    --dusk-entrance-ruler-delay: 0.7s;
    --dusk-entrance-sun: 1.8s;
    --dusk-entrance-sun-delay: 0.85s;
    --dusk-entrance-mark: 0.6s;
    --dusk-entrance-mark-delay: 1.65s;
    --dusk-entrance-mark-stagger: 0.15s;

    --dusk-layer-backdrop: -1;
    --dusk-layer-scene: 0;
    --dusk-layer-guides: 1;
    --dusk-layer-content: 2;
    --dusk-layer-overlay: 3;
    --dusk-layer-header: 10;
    --dusk-layer-skip: 30;

    --dusk-text-body: 0.9375rem;
    --dusk-leading-body: 1.5rem;
    --dusk-leading-prose: 1.375rem;
    --dusk-text-title: clamp(1.5rem, 1.3144rem + 0.762vw, 2rem);
    --dusk-leading-title: clamp(2rem, 1.8144rem + 0.762vw, 2.5rem);
    --dusk-tracking-title: -0.015em;
    --dusk-text-display: clamp(3rem, 2.6288rem + 1.524vw, 4rem);
    --dusk-leading-display: clamp(3.25rem, 2.9713rem + 1.143vw, 4rem);
    --dusk-tracking-display: -0.03em;
    --dusk-text-menu: var(--dusk-size-8);
    --dusk-leading-menu: var(--dusk-size-10);
    --dusk-body-cap: calc(var(--dusk-leading-body) / 2 - var(--dusk-font-cap-offset) * var(--dusk-text-body));
    --dusk-body-descent: calc(var(--dusk-leading-body) / 2 - var(--dusk-font-descent-offset) * var(--dusk-text-body));
    --dusk-title-cap: calc(var(--dusk-leading-title) / 2 - var(--dusk-font-cap-offset) * var(--dusk-text-title));
    --dusk-title-descent: calc(var(--dusk-leading-title) / 2 - var(--dusk-font-descent-offset) * var(--dusk-text-title));
    --dusk-display-cap: calc(var(--dusk-leading-display) / 2 - var(--dusk-font-cap-offset) * var(--dusk-text-display));
    --dusk-display-descent: calc(var(--dusk-leading-display) / 2 - var(--dusk-font-descent-offset) * var(--dusk-text-display));

    --dusk-safe-top: env(safe-area-inset-top, 0px);
    --dusk-safe-inline: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --dusk-grid-columns: 12;
    --dusk-grid-gutter: var(--dusk-size-8);
    --dusk-grid-width: min(100rem, 76%, 100% - 2 * (var(--dusk-safe-inline) + var(--dusk-size-6)));
    --dusk-grid-margin: calc((100% - var(--dusk-grid-width)) / 2);
    --dusk-grid-column: calc((var(--dusk-grid-width) - (var(--dusk-grid-columns) - 1) * var(--dusk-grid-gutter)) / var(--dusk-grid-columns));
    --dusk-grid-step: calc(var(--dusk-grid-column) + var(--dusk-grid-gutter));
    --dusk-hang: var(--dusk-size-30);

    --dusk-viewport-height: 100vh;
    --dusk-header-height: var(--dusk-size-18);
    --dusk-target-size: var(--dusk-size-12);
    --dusk-stroke-hairline: 1px;
    --dusk-scroll-threshold: 1px;
    --dusk-focus-width: 2px;
    --dusk-focus-offset: 2px;
    --dusk-focus-halo: 4px;
    --dusk-frost-blur: 14px;
    --dusk-frost-saturate: 1.15;
    --dusk-frost-opacity: 84%;
    --dusk-mark-size: 11px;
    --dusk-ruler-offset: calc(var(--dusk-size-2) + var(--dusk-stroke-hairline));
    --dusk-measure: 30rem;
    --dusk-tile-reveal: 1s;
    --dusk-tile-ring-delay: 200ms;
    --dusk-tile-logo-delay: 350ms;
    --dusk-tile-stagger: 140ms;
    --dusk-tile-scan: 2.2s;
    --dusk-tile-scan-delay: 1s;
    --dusk-icon-arrow-right: url("/assets/icons/arrow-right.svg");
    --dusk-icon-arrow-up-right: url("/assets/icons/arrow-up-right.svg");
    --dusk-icon-arrow-left: url("/assets/icons/arrow-left.svg");
    --dusk-icon-email: url("/assets/icons/email.svg");
    --dusk-icon-github: url("/assets/icons/github.svg");
    --dusk-icon-linkedin: url("/assets/icons/linkedin.svg");
    --dusk-icon-resume: url("/assets/icons/resume.svg");
    --dusk-target-minimum: var(--dusk-size-11);
    --dusk-icon-line: 1.5px;
    --dusk-icon-gap: 6px;
    --dusk-space-kicker: var(--dusk-size-12);
    --dusk-space-meta: var(--dusk-size-24);
    --dusk-space-section: var(--dusk-size-32);
    --dusk-space-title: var(--dusk-size-10);
    --dusk-space-row: var(--dusk-size-10);
    --dusk-space-intro: var(--dusk-size-16);
    --dusk-space-columns: var(--dusk-size-16);
    --dusk-space-page-top: max(var(--dusk-size-16), var(--dusk-viewport-height) * 0.111);
    --dusk-space-footer-top: var(--dusk-size-16);
    --dusk-space-footer: var(--dusk-size-10);
    --dusk-space-footer-bar: auto;
    --dusk-footer-min-height: 25rem;
    --dusk-headline-extra-lines: 0;

    --dusk-grain: url("/assets/sketches/grain.svg");
    --dusk-grain-size: 180px;
    --dusk-grain-opacity: 0.5;
    --dusk-clouds: url("/assets/sketches/clouds.svg");
    --dusk-clouds-opacity: 0.62;
  }

  @supports (height: 100svh) {
    :root {
      --dusk-viewport-height: 100svh;
    }
  }

  @media (width < 48rem) {
    :root {
      --dusk-text-body: 1rem;
      --dusk-leading-prose: 1.5rem;
      --dusk-grid-columns: 4;
      --dusk-grid-gutter: var(--dusk-size-6);
      --dusk-grid-width: calc(100% - 2 * max(var(--dusk-size-6), var(--dusk-safe-inline)));
      --dusk-space-kicker: var(--dusk-size-8);
      --dusk-space-section: var(--dusk-size-20);
      --dusk-space-title: var(--dusk-size-8);
      --dusk-space-row: var(--dusk-size-8);
      --dusk-space-intro: var(--dusk-size-10);
      --dusk-space-columns: var(--dusk-size-12);
      --dusk-space-page-top: calc(var(--dusk-viewport-height) * 0.111);
      --dusk-space-footer-top: var(--dusk-size-12);
      --dusk-space-footer: var(--dusk-size-8);
      --dusk-space-footer-bar: var(--dusk-size-50);
      --dusk-footer-min-height: 0;
      --dusk-headline-extra-lines: 1;
    }
  }
}

@layer themes {
  .dusk-theme-sky,
  .dusk-footer {
    --dusk-surface: sky;
    --dusk-color-text: var(--dusk-palette-daylight);
    --dusk-color-text-muted: var(--dusk-palette-mist);
    --dusk-color-rule: rgb(var(--dusk-palette-daylight-rgb) / 0.12);
    --dusk-color-guide: rgb(var(--dusk-palette-daylight-rgb) / 0.045);
    --dusk-color-mark: rgb(var(--dusk-palette-daylight-rgb) / 0.21);
    --dusk-color-sun: rgb(var(--dusk-palette-daylight-rgb) / 0.11);
    color: var(--dusk-color-text);
  }

  .dusk-theme-paper,
  .dusk-theme-dawn,
  .dusk-theme-dawn .dusk-footer {
    --dusk-surface: paper;
    --dusk-color-text: var(--dusk-palette-ink);
    --dusk-color-text-muted: var(--dusk-palette-stone);
    --dusk-color-rule: var(--dusk-palette-line-soft);
    --dusk-color-guide: rgb(var(--dusk-palette-ink-rgb) / 0.035);
    --dusk-color-mark: rgb(var(--dusk-palette-ink-rgb) / 0.18);
    --dusk-color-sun: rgb(var(--dusk-palette-ink-rgb) / 0.065);
    color: var(--dusk-color-text);
  }

  .dusk-theme-paper {
    background-color: var(--dusk-palette-paper);
  }

  @media print {
    .dusk-theme-sky,
    .dusk-footer,
    .dusk-theme-paper,
    .dusk-theme-dawn,
    .dusk-theme-dawn .dusk-footer {
      --dusk-color-text: var(--dusk-palette-print-ink);
      --dusk-color-text-muted: var(--dusk-palette-print-muted);
      --dusk-color-rule: var(--dusk-palette-print-rule);
      background: var(--dusk-palette-print-paper);
      color: var(--dusk-color-text);
    }
  }
}

@layer base {
  :root {
    scroll-padding-top: calc(var(--dusk-header-height) + var(--dusk-size-4));
    timeline-scope: --dusk-sky-leading, --dusk-sky-trailing;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: var(--dusk-duration-base);
    }
  }

  body {
    min-height: var(--dusk-viewport-height);
    background-color: var(--dusk-palette-paper);
    color: var(--dusk-palette-ink);
    font-family: var(--dusk-font-family);
    font-size: var(--dusk-text-body);
    font-weight: var(--dusk-font-weight-regular);
    line-height: var(--dusk-leading-body);
    font-synthesis: none;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3 {
    font-weight: var(--dusk-font-weight-medium);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--dusk-text-display);
    line-height: var(--dusk-leading-display);
    letter-spacing: var(--dusk-tracking-display);
  }

  h2 {
    font-size: var(--dusk-text-title);
    line-height: var(--dusk-leading-title);
    letter-spacing: var(--dusk-tracking-title);
  }

  h3 {
    font-size: inherit;
    line-height: inherit;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-line: none;
    text-decoration-thickness: var(--dusk-stroke-hairline);
    text-underline-offset: 0.25em;
  }

  a > span {
    text-decoration-thickness: inherit;
  }

  ::selection {
    background-color: var(--dusk-palette-ink);
    color: var(--dusk-palette-paper);
  }

  :focus-visible {
    outline: var(--dusk-focus-width) solid currentColor;
    outline-offset: var(--dusk-focus-offset);
  }

  @media (hover: hover) and (pointer: fine) {
    a:not(:has(> span)):hover,
    a:hover > span {
      text-decoration-line: underline;
    }
  }

  @media (hover: none), (pointer: coarse) {
    a:active {
      opacity: 0.6;
    }
  }

  @media print {
    body {
      background: var(--dusk-palette-print-paper);
      color: var(--dusk-palette-print-ink);
    }

    a[href^="http"]::after,
    a[href^="mailto:"]::after {
      content: " (" attr(href) ")";
    }
  }
}

@layer layout {
  .dusk-container {
    width: var(--dusk-grid-width);
    margin-inline: auto;
  }

  .dusk-grid {
    display: grid;
    grid-template-columns: repeat(var(--dusk-grid-columns), minmax(0, 1fr));
    column-gap: var(--dusk-grid-gutter);
  }

  .dusk-pairs {
    display: grid;
    grid-template-columns: var(--dusk-hang) minmax(0, 1fr);
  }

  .dusk-stack {
    display: flex;
    flex-direction: column;
    gap: var(--dusk-stack-gap, var(--dusk-size-3));
  }

  .dusk-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dusk-cluster-gap, var(--dusk-size-8));
  }
}

@layer components {
  .dusk-skip-link {
    position: fixed;
    inset: var(--dusk-size-3) auto auto max(var(--dusk-size-6), env(safe-area-inset-left, 0px));
    z-index: var(--dusk-layer-skip);
    padding: var(--dusk-size-2-5) var(--dusk-size-4);
    background-color: var(--dusk-palette-paper);
    color: var(--dusk-palette-ink);
    border: var(--dusk-stroke-hairline) solid var(--dusk-palette-ink);
    transform: translateY(calc(-100% - var(--dusk-size-6)));

    &:focus-visible {
      transform: none;
    }
  }

  .dusk-header {
    --dusk-header-split: linear-gradient(to bottom, var(--dusk-palette-daylight) 0 var(--dusk-sky-top), var(--dusk-header-ink) var(--dusk-sky-top) calc(var(--dusk-header-height) - var(--dusk-sky-bottom)), var(--dusk-palette-daylight) calc(var(--dusk-header-height) - var(--dusk-sky-bottom)));
    --dusk-header-split-muted: linear-gradient(to bottom, var(--dusk-palette-mist) 0 var(--dusk-sky-top), var(--dusk-palette-stone) var(--dusk-sky-top) calc(var(--dusk-header-height) - var(--dusk-sky-bottom)), var(--dusk-palette-mist) calc(var(--dusk-header-height) - var(--dusk-sky-bottom)));
    --dusk-text-y: calc((var(--dusk-header-height) - var(--dusk-leading-body)) / 2);
    position: absolute;
    inset: 0 0 auto;
    z-index: var(--dusk-layer-header);
    height: var(--dusk-header-height);
    padding-block-start: var(--dusk-safe-top);
    box-sizing: content-box;
    transition: --dusk-header-ink var(--dusk-menu-out) var(--dusk-ease-exit) var(--dusk-menu-out-delay);

    :root[data-dusk-header-mode="observed"] & {
      position: fixed;
    }

    :root[data-dusk-scrolled] & {
      --dusk-header-rule: 1;
    }

    :root:has(.dusk-nav:target) & {
      --dusk-header-ink: var(--dusk-palette-daylight);
      transition: --dusk-header-ink var(--dusk-menu-in) var(--dusk-ease-emphasized);
    }

    :root:has(main > .dusk-theme-sky:first-child) & {
      --dusk-sky-top: var(--dusk-header-height);
    }

    @supports (animation-timeline: view()) {
      position: fixed;
      animation: dusk-sky-leading linear both, dusk-sky-trailing linear both, dusk-header-rule linear both;
      animation-timeline: --dusk-sky-leading, --dusk-sky-trailing, scroll(root block);
      animation-range: cover calc(100% - var(--dusk-safe-top) - var(--dusk-header-height)) cover calc(100% - var(--dusk-safe-top)), exit-crossing calc(0% - var(--dusk-safe-top) - var(--dusk-header-height)) exit-crossing calc(0% - var(--dusk-safe-top)), 0px var(--dusk-scroll-threshold);
    }

    &::before {
      content: "";
      position: absolute;
      inset: var(--dusk-safe-top) 0 calc(-1 * var(--dusk-stroke-hairline));
      background-image: linear-gradient(to top, rgb(var(--dusk-palette-line-soft-rgb) / var(--dusk-header-rule)) 0 var(--dusk-stroke-hairline), color-mix(in srgb, var(--dusk-palette-paper) var(--dusk-frost-opacity), transparent) var(--dusk-stroke-hairline));
      -webkit-backdrop-filter: blur(var(--dusk-frost-blur)) saturate(var(--dusk-frost-saturate));
      backdrop-filter: blur(var(--dusk-frost-blur)) saturate(var(--dusk-frost-saturate));
      clip-path: inset(max(var(--dusk-sky-top), min(var(--dusk-header-height) + var(--dusk-stroke-hairline), var(--dusk-sky-top) + (var(--dusk-sky-top) - var(--dusk-header-height) + var(--dusk-stroke-hairline)) * 1000)) 0 calc(var(--dusk-sky-bottom) + clamp(0px, var(--dusk-sky-bottom) * 1000, var(--dusk-stroke-hairline))) 0);
      transition: opacity var(--dusk-menu-out) var(--dusk-ease-exit) var(--dusk-menu-out-delay);
    }

    :root:has(.dusk-nav:target) &::before {
      opacity: 0;
      transition: opacity var(--dusk-menu-in) var(--dusk-ease-emphasized);
    }

    & :focus-visible {
      outline: var(--dusk-focus-width) solid var(--dusk-palette-daylight);
      outline-offset: var(--dusk-focus-offset);
      box-shadow: 0 0 0 var(--dusk-focus-halo) var(--dusk-palette-ink);
    }

    @media (forced-colors: active) {
      &::before {
        background: Canvas;
        clip-path: none;
      }
    }

    @media print {
      display: none;
    }
  }

  .dusk-header__bar {
    position: relative;
    z-index: var(--dusk-layer-guides);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--dusk-header-height);
  }

  .dusk-header__brand {
    --dusk-brand-line: linear-gradient(90deg, transparent 0%, rgb(var(--dusk-palette-orange-rgb) / 0.35) 30%, var(--dusk-palette-orange) 50%, rgb(var(--dusk-palette-orange-rgb) / 0.35) 70%, transparent 100%);
    position: relative;
    z-index: var(--dusk-layer-overlay);
    display: inline-flex;
    align-items: center;
    min-height: var(--dusk-target-minimum);
    font-weight: var(--dusk-font-weight-medium);
    white-space: nowrap;

    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      top: calc(50% + var(--dusk-leading-body) / 2);
      height: var(--dusk-stroke-hairline);
      background: var(--dusk-brand-line);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance);
      pointer-events: none;
    }

    & > span {
      text-decoration-line: none;
    }

    &:focus-visible::after {
      transform: scaleX(1);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover::after {
        transform: scaleX(1);
      }

      &:active::after {
        transform: scaleX(0);
        transform-origin: right;
        transition: transform var(--dusk-duration-fade) var(--dusk-ease-exit);
      }

      &:hover > span {
        text-decoration-line: none;
      }
    }

    @media (hover: none), (pointer: coarse) {
      &:active::after {
        transform: scaleX(1);
        transition-duration: var(--dusk-duration-fade);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      &::after,
      &:active::after {
        transition: none;
      }
    }

    @media (forced-colors: active) {
      &::after {
        background: CanvasText;
      }
    }
  }

  .dusk-header__brand > span,
  .dusk-nav :where(li > a) > span {
    color: transparent;
    background: var(--dusk-header-split) 0 calc(-1 * var(--dusk-text-y)) / 100% var(--dusk-header-height) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;

    @media (forced-colors: active) {
      color: CanvasText;
      background: none;
    }
  }

  .dusk-header__toggle > span {
    background: var(--dusk-header-split) 0 calc(-1 * var(--dusk-line-y)) / 100% var(--dusk-header-height) no-repeat;

    @media (forced-colors: active) {
      background: CanvasText;
    }
  }

  .dusk-nav__close > span {
    background-color: currentColor;
    transition: transform var(--dusk-menu-out) var(--dusk-ease-exit);

    .dusk-nav:target & {
      transition: transform var(--dusk-menu-in) var(--dusk-ease-emphasized);
    }

    @media (prefers-reduced-motion: reduce) {
      &,
      .dusk-nav:target & {
        transition: none;
      }
    }
  }

  .dusk-header__toggle,
  .dusk-nav__close {
    display: none;
    position: relative;
    width: var(--dusk-target-minimum);
    height: var(--dusk-target-minimum);
    margin-inline-end: calc(-1 * var(--dusk-size-3));

    & > span {
      position: absolute;
      inset-inline-start: var(--dusk-size-3);
      width: var(--dusk-size-5);
      height: var(--dusk-icon-line);
    }

    & > span:nth-child(1) {
      --dusk-line-y: calc(var(--dusk-header-height) / 2 - (var(--dusk-icon-gap) + var(--dusk-icon-line)) / 2);
      inset-block-start: calc(50% - (var(--dusk-icon-gap) + var(--dusk-icon-line)) / 2);
    }

    & > span:nth-child(2) {
      --dusk-line-y: calc(var(--dusk-header-height) / 2 + (var(--dusk-icon-gap) - var(--dusk-icon-line)) / 2);
      inset-block-start: calc(50% + (var(--dusk-icon-gap) - var(--dusk-icon-line)) / 2);
    }
  }

  .dusk-nav {
    --dusk-nav-divider: rgb(var(--dusk-palette-daylight-rgb) / 0.12);

    & ul {
      display: flex;
      gap: var(--dusk-size-8);
    }

    & li > a {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: var(--dusk-target-minimum);

      &::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 50%;
        width: max(100%, var(--dusk-target-minimum));
        transform: translateX(-50%);
      }

      &[aria-current="page"] > span {
        text-decoration-line: underline;
      }
    }

    @media (width >= 48rem) {
      --dusk-nav-arrow-size: var(--dusk-size-3-5);
      --dusk-nav-arrow-gap: var(--dusk-size-1-5);
      --dusk-nav-arrow-shift: calc(var(--dusk-nav-arrow-size) + var(--dusk-nav-arrow-gap));
      --dusk-nav-arrow-y: calc((var(--dusk-header-height) - var(--dusk-nav-arrow-size)) / 2);

      & .dusk-nav__home,
      & .dusk-nav__sky {
        display: none;
      }

      & li > a {
        gap: var(--dusk-nav-arrow-gap);
        margin-inline-end: calc(-1 * var(--dusk-nav-arrow-shift));
        overflow: clip;

        &::after {
          content: "";
          order: -1;
          flex: none;
          width: var(--dusk-nav-arrow-size);
          height: var(--dusk-nav-arrow-size);
          background: var(--dusk-header-split) 0 calc(-1 * var(--dusk-nav-arrow-y)) / 100% var(--dusk-header-height) no-repeat;
          -webkit-mask: var(--dusk-icon-arrow-right) center / contain no-repeat;
          mask: var(--dusk-icon-arrow-right) center / contain no-repeat;
          opacity: 0;
          transform: translateX(-150%);
          transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance), opacity var(--dusk-duration-fade) var(--dusk-ease-entrance);
        }

        & > span {
          transform: translateX(calc(-1 * var(--dusk-nav-arrow-shift)));
          transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance);
        }

        &[aria-current="page"] > span {
          background-image: var(--dusk-header-split-muted);
        }

        &:focus-visible::after {
          opacity: 1;
          transform: none;
        }

        &:focus-visible > span {
          transform: none;
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover::after {
            opacity: 1;
            transform: none;
          }

          &:hover > span {
            transform: none;
          }

          &:not([aria-current="page"]):hover > span {
            text-decoration-line: none;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          &::after,
          & > span {
            transition: none;
          }
        }

        @media (forced-colors: active) {
          &::after {
            background: CanvasText;
          }
        }
      }
    }

    @media (width < 48rem) {
      --dusk-sun-x: 73%;
      --dusk-afterglow-size: 170% 26%;
      position: fixed;
      inset: 0;
      z-index: var(--dusk-layer-guides);
      overflow: hidden;
      color: var(--dusk-palette-daylight);
      visibility: hidden;
      opacity: 0;
      will-change: opacity;
      transition: opacity var(--dusk-menu-out) var(--dusk-ease-exit) var(--dusk-menu-out-delay), visibility 0s linear calc(var(--dusk-menu-out-delay) + var(--dusk-menu-out));

      &:target {
        visibility: visible;
        opacity: 1;
        transition: opacity var(--dusk-menu-in) var(--dusk-ease-emphasized), visibility 0s;
      }

      & ul {
        position: relative;
        z-index: var(--dusk-layer-content);
        flex-direction: column;
        gap: 0;
        width: var(--dusk-grid-width);
        margin-inline: auto;
        padding-block-start: calc(var(--dusk-safe-top) + var(--dusk-header-height) + var(--dusk-viewport-height) * 0.111 - var(--dusk-size-3));
      }

      & li {
        border-block-end: var(--dusk-stroke-hairline) solid var(--dusk-nav-divider);
        opacity: 0;
        transform: translateY(var(--dusk-menu-item-rise));
        transition: opacity var(--dusk-menu-item-out) var(--dusk-ease-exit), transform var(--dusk-menu-item-out) var(--dusk-ease-exit);

        &:nth-child(2) {
          --dusk-index: 1;
        }

        &:nth-child(3) {
          --dusk-index: 2;
        }

        &:nth-child(4) {
          --dusk-index: 3;
        }
      }

      &:target li {
        --dusk-menu-item-wait: calc(var(--dusk-menu-item-delay) + var(--dusk-index, 0) * var(--dusk-menu-item-stagger));
        opacity: 1;
        transform: none;
        transition: opacity var(--dusk-menu-item-in) var(--dusk-ease-emphasized) var(--dusk-menu-item-wait), transform var(--dusk-menu-item-in) var(--dusk-ease-enter) var(--dusk-menu-item-wait);
      }

      & li > a {
        display: flex;
        min-height: var(--dusk-size-16);
        font-size: var(--dusk-text-menu);
        font-weight: var(--dusk-font-weight-medium);
        line-height: var(--dusk-leading-menu);
        letter-spacing: var(--dusk-tracking-title);

        --dusk-menu-arrow-size: var(--dusk-size-5);
        --dusk-menu-arrow-shift: calc(var(--dusk-menu-arrow-size) + var(--dusk-size-3));

        & > span {
          color: inherit;
          background-image: none;
          text-decoration-line: none;
          transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance);
        }

        &::before,
        &::after {
          content: "";
          position: absolute;
          inset: calc(50% - var(--dusk-menu-arrow-size) / 2) auto auto 0;
          width: var(--dusk-menu-arrow-size);
          height: var(--dusk-menu-arrow-size);
          -webkit-mask: var(--dusk-icon-arrow-right) center / contain no-repeat;
          mask: var(--dusk-icon-arrow-right) center / contain no-repeat;
          transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance), opacity var(--dusk-duration-fade) var(--dusk-ease-entrance);
        }

        &::before {
          background-color: var(--dusk-palette-orange);
          opacity: 0;
          transform: translateX(calc(-1 * var(--dusk-menu-arrow-shift)));
        }

        &::after {
          inset-inline: auto 0;
          background-color: var(--dusk-palette-mist);
          opacity: 0.75;
        }

        &:is([aria-current="page"], :active, :focus-visible) > span {
          text-decoration-line: none;
          transform: translateX(var(--dusk-menu-arrow-shift));
        }

        &:is([aria-current="page"], :active, :focus-visible)::before {
          opacity: 1;
          transform: none;
        }

        &:is([aria-current="page"], :active, :focus-visible)::after {
          opacity: 0;
          transform: translateX(var(--dusk-menu-arrow-shift));
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover > span {
            transform: translateX(var(--dusk-menu-arrow-shift));
          }

          &:hover::before {
            opacity: 1;
            transform: none;
          }

          &:hover::after {
            opacity: 0;
            transform: translateX(var(--dusk-menu-arrow-shift));
          }
        }

        @media (prefers-reduced-motion: reduce) {
          &::before,
          &::after,
          & > span {
            transition: none;
          }
        }

        @media (forced-colors: active) {
          &::before,
          &::after {
            background-color: CanvasText;
          }
        }
      }

      & .dusk-nav__close {
        display: block;
        position: absolute;
        inset-block-start: calc(var(--dusk-safe-top) + (var(--dusk-header-height) - var(--dusk-target-minimum)) / 2);
        inset-inline-end: calc(var(--dusk-grid-margin) - var(--dusk-size-3));
        z-index: var(--dusk-layer-content);
        margin: 0;
      }

      & .dusk-nav__sky {
        background-image: linear-gradient(to bottom, var(--dusk-palette-night), var(--dusk-palette-dusk) 62%, var(--dusk-palette-horizon));

        & .dusk-sky__afterglow {
          background-image: radial-gradient(ellipse var(--dusk-afterglow-size) at var(--dusk-sun-x) 100%, rgb(var(--dusk-palette-orange-rgb) / 0.5) 0%, rgb(var(--dusk-palette-ember-rgb) / 0.4) 18%, rgb(var(--dusk-palette-peach-rgb) / 0.24) 42%, rgb(var(--dusk-palette-glow-rgb) / 0.1) 62%, rgb(var(--dusk-palette-glow-rgb) / 0) 82%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        &,
        &:target,
        & li,
        &:target li {
          transform: none;
          transition-duration: var(--dusk-duration-quick);
          transition-delay: 0s;
        }
      }
    }
  }

  .dusk-nav:target .dusk-nav__close > span:nth-child(1) {
    transform: translateY(calc(var(--dusk-icon-gap) / 2)) rotate(45deg);
  }

  .dusk-nav:target .dusk-nav__close > span:nth-child(2) {
    transform: translateY(calc(var(--dusk-icon-gap) / -2)) rotate(-45deg);
  }

  @media (width < 48rem) {
    .dusk-header__toggle {
      display: block;
    }

    :root:has(.dusk-nav:target) {
      overflow: hidden;

      & :is(.dusk-header__toggle, main, .dusk-footer) {
        visibility: hidden;
        transition: visibility 0s linear var(--dusk-menu-in);
      }
    }
  }

  .dusk-anchor {
    position: fixed;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
  }

  .dusk-sky {
    position: absolute;
    inset: 0;
    z-index: var(--dusk-layer-scene);
    overflow: hidden;
    overflow-anchor: none;
    pointer-events: none;
    contain: strict;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: var(--dusk-layer-content);
      background-image: var(--dusk-grain);
      background-size: var(--dusk-grain-size);
      mix-blend-mode: soft-light;
      opacity: var(--dusk-grain-opacity);
    }

    @media print {
      display: none;
    }
  }

  .dusk-sky__afterglow,
  .dusk-sky__clouds {
    position: absolute;
    inset-inline: 0;
  }

  .dusk-sky__afterglow {
    inset-block: 0;
    transform-origin: var(--dusk-sun-x) 100%;
    background-image: radial-gradient(ellipse var(--dusk-afterglow-size) at var(--dusk-sun-x) 100%, rgb(var(--dusk-palette-orange-rgb) / 0.56) 0%, rgb(var(--dusk-palette-ember-rgb) / 0.46) 18%, rgb(var(--dusk-palette-peach-rgb) / 0.28) 42%, rgb(var(--dusk-palette-glow-rgb) / 0.12) 62%, rgb(var(--dusk-palette-glow-rgb) / 0) 82%);

    @media (prefers-reduced-motion: no-preference) {
      [data-dusk-animate] & {
        animation: dusk-rise var(--dusk-entrance-glow) var(--dusk-ease-entrance) var(--dusk-entrance-glow-delay) both;
      }
    }
  }

  .dusk-sky__clouds {
    inset-block-end: 7%;
    height: 22%;
    opacity: var(--dusk-clouds-opacity);
    background: var(--dusk-clouds) 0 0 / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to top, transparent, #000 25%, #000 60%, transparent), radial-gradient(ellipse 62% 140% at var(--dusk-sun-x) 100%, #000 25%, transparent 72%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, transparent, #000 25%, #000 60%, transparent), radial-gradient(ellipse 62% 140% at var(--dusk-sun-x) 100%, #000 25%, transparent 72%);
    mask-composite: intersect;

    @media (prefers-reduced-motion: no-preference) {
      [data-dusk-animate] & {
        animation: dusk-drift var(--dusk-entrance-clouds) var(--dusk-ease-entrance) var(--dusk-entrance-clouds-delay) both;
      }
    }
  }

  .dusk-guides {
    --dusk-x-start: var(--dusk-grid-margin);
    --dusk-x-mid: calc(var(--dusk-grid-margin) + 6 * var(--dusk-grid-step));
    --dusk-x-sun: var(--dusk-sun-x, calc(var(--dusk-grid-margin) + 9 * var(--dusk-grid-step)));
    --dusk-x-end: calc(var(--dusk-grid-margin) + var(--dusk-grid-width));
    --dusk-sun-radius: 0px;
    --dusk-sun-limit: min(36rem, 55vw);
    position: absolute;
    inset: 0;
    z-index: var(--dusk-layer-guides);
    overflow-anchor: none;
    pointer-events: none;

    & > [data-dusk-guide] {
      position: absolute;
      display: block;
    }

    & [data-dusk-at="start"] {
      --dusk-order: 0;
      left: var(--dusk-x-start);
    }

    & [data-dusk-at="mid"] {
      --dusk-order: 1;
      left: var(--dusk-x-mid);
    }

    & [data-dusk-at="sun"] {
      --dusk-order: 2;
      left: var(--dusk-x-sun);
    }

    & [data-dusk-at="end"] {
      --dusk-order: 3;
      left: calc(var(--dusk-x-end) - var(--dusk-stroke-hairline));
    }

    & [data-dusk-guide="vertical"] {
      inset-block: 0;
      width: var(--dusk-stroke-hairline);
      background-color: var(--dusk-color-guide);
      transform-origin: 50% 0;
    }

    & [data-dusk-guide="rule"] {
      inset-inline: 0;
      height: var(--dusk-stroke-hairline);
      background-color: var(--dusk-color-guide);
      transform-origin: 0 50%;
    }

    & [data-dusk-at="baseline"] {
      top: var(--dusk-y-baseline);
    }

    & [data-dusk-at="edge"] {
      top: 0;
    }

    & [data-dusk-guide="sun"] {
      left: calc(var(--dusk-x-sun) - var(--dusk-sun-radius));
      top: calc(100% - var(--dusk-sun-radius));
      width: calc(2 * var(--dusk-sun-radius));
      height: calc(2 * var(--dusk-sun-radius));
      border: var(--dusk-stroke-hairline) solid var(--dusk-color-sun);
      border-radius: 50%;
      clip-path: inset(0 0 50% 0);
      -webkit-mask-image: conic-gradient(from var(--dusk-sweep-from, 0deg), #000 0 var(--dusk-sweep), transparent var(--dusk-sweep) calc(360deg - var(--dusk-sweep)), #000 calc(360deg - var(--dusk-sweep)));
      mask-image: conic-gradient(from var(--dusk-sweep-from, 0deg), #000 0 var(--dusk-sweep), transparent var(--dusk-sweep) calc(360deg - var(--dusk-sweep)), #000 calc(360deg - var(--dusk-sweep)));
    }

    & [data-dusk-guide="ruler"] {
      left: calc(var(--dusk-x-start) - var(--dusk-ruler-offset));
      top: var(--dusk-y-ruler);
      width: var(--dusk-size-2);
      height: calc(var(--dusk-y-baseline) - var(--dusk-y-ruler));
      background-image: repeating-linear-gradient(to bottom, var(--dusk-color-guide) 0 var(--dusk-stroke-hairline), transparent var(--dusk-stroke-hairline) var(--dusk-size-2)), repeating-linear-gradient(to bottom, var(--dusk-color-mark) 0 var(--dusk-stroke-hairline), transparent var(--dusk-stroke-hairline) var(--dusk-leading-body));
      background-position: var(--dusk-size-1) 0, 0 0;
      background-size: var(--dusk-size-1) 100%, var(--dusk-size-2) 100%;
      background-repeat: no-repeat;
    }

    & [data-dusk-guide="mark"] {
      --dusk-order: 1;
      top: calc(var(--dusk-y-baseline) - (var(--dusk-mark-size) - var(--dusk-stroke-hairline)) / 2);
      width: var(--dusk-mark-size);
      height: var(--dusk-mark-size);
      margin-inline-start: calc((var(--dusk-mark-size) - var(--dusk-stroke-hairline)) / -2);
      background-image: linear-gradient(var(--dusk-color-mark), var(--dusk-color-mark)), linear-gradient(var(--dusk-color-mark), var(--dusk-color-mark));
      background-position: 50% 50%;
      background-size: var(--dusk-stroke-hairline) 100%, 100% var(--dusk-stroke-hairline);
      background-repeat: no-repeat;

      &[data-dusk-at="start"] {
        --dusk-order: 0;
      }
    }

    @media (width < 48rem) {
      --dusk-x-mid: calc(var(--dusk-grid-margin) + 2 * var(--dusk-grid-step));

      .dusk-theme-dawn & {
        --dusk-x-sun: calc(var(--dusk-grid-margin) + 2 * var(--dusk-grid-step) - var(--dusk-grid-gutter) / 2);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      [data-dusk-animate] & [data-dusk-guide="ruler"] {
        animation: dusk-reveal-down var(--dusk-entrance-ruler) var(--dusk-ease-standard) var(--dusk-entrance-ruler-delay) both;
      }

      [data-dusk-animate] & [data-dusk-guide="sun"] {
        animation: dusk-sweep var(--dusk-entrance-sun) var(--dusk-ease-standard) var(--dusk-entrance-sun-delay) both;
      }

      [data-dusk-animate] & [data-dusk-guide="mark"] {
        animation: dusk-land var(--dusk-entrance-mark) var(--dusk-ease-spring) calc(var(--dusk-entrance-mark-delay) + var(--dusk-order) * var(--dusk-entrance-mark-stagger)) both;
      }
    }

    @media print {
      display: none;
    }
  }

  .dusk-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dusk-size-6);
    padding-block-end: calc(var(--dusk-space-title) - var(--dusk-title-descent));
    border-block-end: var(--dusk-stroke-hairline) solid var(--dusk-color-rule);

    & p {
      white-space: nowrap;
    }
  }

  .dusk-arrow-link {
    --dusk-arrow-link-size: var(--dusk-size-14);
    --dusk-arrow-link-stroke: currentColor;
    --dusk-arrow-link-fill: var(--dusk-color-text);
    --dusk-arrow-link-on-fill: var(--dusk-palette-paper);
    --dusk-arrow-link-icon: var(--dusk-icon-arrow-up-right);
    --dusk-arrow-link-icon-size: var(--dusk-size-5);
    --dusk-arrow-link-travel: calc(var(--dusk-arrow-link-size) * 0.75);
    --dusk-arrow-link-exit: translate(var(--dusk-arrow-link-travel), calc(-1 * var(--dusk-arrow-link-travel)));
    --dusk-arrow-link-enter: translate(calc(-1 * var(--dusk-arrow-link-travel)), var(--dusk-arrow-link-travel));
    position: relative;
    display: grid;
    place-items: center;
    width: var(--dusk-arrow-link-size);
    aspect-ratio: 1;
    overflow: clip;
    isolation: isolate;
    border: var(--dusk-stroke-hairline) solid var(--dusk-arrow-link-stroke);
    border-radius: 50%;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: var(--dusk-layer-backdrop);
      border-radius: 50%;
      background-color: var(--dusk-arrow-link-fill);
      transform: scale(0);
      transition: transform var(--dusk-duration-fill) var(--dusk-ease-entrance);
    }

    & > svg {
      transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance);
    }

    &::after {
      content: "";
      position: absolute;
      width: var(--dusk-arrow-link-icon-size);
      height: var(--dusk-arrow-link-icon-size);
      background-color: var(--dusk-arrow-link-on-fill);
      -webkit-mask: var(--dusk-arrow-link-icon) center / contain no-repeat;
      mask: var(--dusk-arrow-link-icon) center / contain no-repeat;
      transform: var(--dusk-arrow-link-enter);
      transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance) var(--dusk-delay-follow);
    }

    &:focus-visible::before,
    a:focus-visible > &::before {
      transform: scale(1);
    }

    &:focus-visible > svg,
    a:focus-visible > & > svg {
      transform: var(--dusk-arrow-link-exit);
    }

    &:focus-visible::after,
    a:focus-visible > &::after {
      transform: none;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover::before,
      a:hover > &::before {
        transform: scale(1);
      }

      &:hover > svg,
      a:hover > & > svg {
        transform: var(--dusk-arrow-link-exit);
      }

      &:hover::after,
      a:hover > &::after {
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      &::before,
      &::after,
      & > svg {
        transition: none;
      }
    }

    @media (forced-colors: active) {
      &::before,
      &::after {
        display: none;
      }

      & > svg {
        transform: none;
      }
    }

    @media print {
      display: none;
    }
  }

  .dusk-arrow-link--back {
    --dusk-arrow-link-icon: var(--dusk-icon-arrow-left);
    --dusk-arrow-link-exit: translateX(calc(-1 * var(--dusk-arrow-link-travel)));
    --dusk-arrow-link-enter: translateX(var(--dusk-arrow-link-travel));
  }


  .dusk-dawn {
    &::before,
    &::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: var(--dusk-layer-backdrop);
    }

    &::before {
      background-image: radial-gradient(ellipse 34% 26% at 100% 100%, rgb(var(--dusk-palette-orange-rgb) / 0.1), rgb(var(--dusk-palette-orange-rgb) / 0) 72%), linear-gradient(to bottom, var(--dusk-palette-paper), var(--dusk-palette-dawn-high) 38%, var(--dusk-palette-dawn-mid) 62%, var(--dusk-palette-dawn-low));
    }

    &::after {
      background-image: var(--dusk-grain);
      background-size: var(--dusk-grain-size);
      mix-blend-mode: soft-light;
      opacity: var(--dusk-grain-opacity);
    }

    @media print {
      &::before,
      &::after {
        content: none;
      }
    }
  }

  .dusk-footer {
    --dusk-sun-x: calc(var(--dusk-grid-margin) + 9 * var(--dusk-grid-step));
    --dusk-afterglow-size: 85% 22%;
    --dusk-footer-baseline: calc(var(--dusk-space-footer-top) + var(--dusk-font-cap-height) * var(--dusk-text-title) + var(--dusk-space-footer));
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: var(--dusk-footer-min-height);
    overflow: clip;
    view-timeline: --dusk-sky-trailing block;
    view-timeline-inset: 0px;

    & > .dusk-sky {
      background-image: radial-gradient(ellipse 34% 40% at var(--dusk-sun-x) 0, rgb(var(--dusk-palette-violet-rgb) / 0.13), rgb(var(--dusk-palette-violet-rgb) / 0) 72%), radial-gradient(ellipse 52% 90% at var(--dusk-sun-x) 0, rgb(var(--dusk-palette-glow-rgb) / 0.12), rgb(var(--dusk-palette-haze-rgb) / 0.24) 38%, rgb(var(--dusk-palette-haze-rgb) / 0) 72%), linear-gradient(to bottom, var(--dusk-palette-horizon), var(--dusk-palette-dusk) 18%, var(--dusk-palette-dusk) 50%, var(--dusk-palette-night-high) 78%, var(--dusk-palette-night));
    }

    & .dusk-sky__afterglow {
      transform-origin: var(--dusk-sun-x) 0;
      background-image: radial-gradient(ellipse var(--dusk-afterglow-size) at var(--dusk-sun-x) 0, rgb(var(--dusk-palette-orange-rgb) / 0.52) 0%, rgb(var(--dusk-palette-ember-rgb) / 0.42) 18%, rgb(var(--dusk-palette-peach-rgb) / 0.24) 42%, rgb(var(--dusk-palette-glow-rgb) / 0.1) 62%, rgb(var(--dusk-palette-glow-rgb) / 0) 82%);
    }

    & .dusk-sky__clouds {
      --dusk-drift-from: -12%;
      inset-block: 6% auto;
      height: 20%;
      transform: scaleY(-1);
    }

    & .dusk-guides {
      --dusk-y-baseline: var(--dusk-footer-baseline);
      --dusk-sun-radius: min(var(--dusk-footer-baseline), var(--dusk-sun-limit));
      --dusk-sweep-from: 180deg;

      & [data-dusk-guide="sun"] {
        top: calc(-1 * var(--dusk-sun-radius));
        clip-path: inset(50% 0 0 0);
      }

      & [data-dusk-at="edge"] {
        display: none;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      &[data-dusk-animate] .dusk-sky__afterglow {
        --dusk-rise-from: -6%;
      }
    }

    .dusk-theme-dawn & {
      overflow: visible;
      view-timeline: none;

      & > .dusk-sky {
        background-image: none;

        &::after {
          content: none;
        }
      }

      & :is(.dusk-sky__afterglow, .dusk-sky__clouds) {
        display: none;
      }

      & .dusk-guides [data-dusk-at="edge"] {
        display: block;
      }
    }

    @media (width < 48rem) {
      --dusk-sun-x: calc(var(--dusk-grid-margin) + var(--dusk-grid-width));
      --dusk-afterglow-size: 110% 18%;

      & > .dusk-sky {
        background-image: linear-gradient(to bottom, var(--dusk-palette-horizon), var(--dusk-palette-dusk) 18%, var(--dusk-palette-dusk) 46%, var(--dusk-palette-night));
      }

      & .dusk-sky__clouds {
        display: none;
      }

      &:not(.dusk-theme-dawn *) .dusk-guides :is([data-dusk-guide="vertical"][data-dusk-at="mid"], [data-dusk-guide="vertical"][data-dusk-at="sun"]) {
        display: none;
      }
    }

    @media print {
      & > .dusk-sky {
        display: none;
      }
    }
  }

  .dusk-footer__inner {
    position: relative;
    z-index: var(--dusk-layer-content);
    display: flex;
    flex: 1;
    flex-direction: column;
    container: dusk-footer / inline-size;

    & h2 {
      padding-block-start: calc(var(--dusk-space-footer-top) - var(--dusk-title-cap));
    }

    & ul {
      margin-block-start: calc(2 * var(--dusk-space-footer) - var(--dusk-title-descent) - (var(--dusk-target-size) - var(--dusk-leading-body)) / 2 - var(--dusk-body-cap));
    }

    & li {
      display: flex;
      align-items: center;
      grid-column: span 2;
      min-height: var(--dusk-target-size);
      min-width: 0;
    }

    & li > :is(a, span) {
      --dusk-footer-icon: var(--dusk-icon-email);
      --dusk-footer-icon-size: var(--dusk-size-4);
      --dusk-footer-icon-gap: var(--dusk-size-2);
      --dusk-footer-icon-shift: calc(var(--dusk-footer-icon-size) + var(--dusk-footer-icon-gap));
      display: inline-flex;
      align-items: center;
      gap: var(--dusk-footer-icon-gap);
      min-height: var(--dusk-target-size);
      white-space: nowrap;

      &::before {
        content: "";
        flex: none;
        width: var(--dusk-footer-icon-size);
        height: var(--dusk-footer-icon-size);
        background-color: var(--dusk-color-text-muted);
        -webkit-mask: var(--dusk-footer-icon) center / contain no-repeat;
        mask: var(--dusk-footer-icon) center / contain no-repeat;
      }

      &.dusk-footer__link--linkedin {
        --dusk-footer-icon: var(--dusk-icon-linkedin);
      }

      &.dusk-footer__link--github {
        --dusk-footer-icon: var(--dusk-icon-github);
      }

      &.dusk-footer__link--resume {
        --dusk-footer-icon: var(--dusk-icon-resume);
      }

      &:is(span) {
        color: var(--dusk-color-text-muted);
      }

      &:is(a) {
        @media (hover: hover) and (pointer: fine) {
          margin-inline-end: calc(-1 * var(--dusk-footer-icon-shift));
          overflow: clip;

          &::before {
            background-color: currentColor;
            opacity: 0;
            transform: translateX(-150%);
            transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance), opacity var(--dusk-duration-fade) var(--dusk-ease-entrance);
          }

          & > span {
            transform: translateX(calc(-1 * var(--dusk-footer-icon-shift)));
            transition: transform var(--dusk-duration-slide) var(--dusk-ease-entrance);
          }

          &:is(:hover, :focus-visible)::before {
            opacity: 1;
            transform: none;
          }

          &:is(:hover, :focus-visible) > span {
            transform: none;
            text-decoration-line: none;
          }
        }
      }

      @media (prefers-reduced-motion: reduce) {
        &::before,
        & > span {
          transition: none;
        }
      }

      @media (forced-colors: active) {
        &::before {
          background-color: CanvasText;
        }
      }
    }

    @container dusk-footer (width < 40rem) {
      & ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      & li {
        grid-column: auto;
      }
    }

    @media print {
      & ul {
        display: block;
      }

      & li > a {
        display: inline;
        white-space: normal;

        &::before {
          content: none;
        }
      }
    }
  }

  .dusk-footer__bar {
    color: var(--dusk-color-text-muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--dusk-size-2) var(--dusk-size-6);
    margin-block-start: var(--dusk-space-footer-bar);
    padding-block: var(--dusk-size-6) max(var(--dusk-size-6), env(safe-area-inset-bottom, 0px));
  }

  @keyframes dusk-sky-leading {
    from {
      --dusk-sky-top: var(--dusk-header-height);
    }

    to {
      --dusk-sky-top: 0px;
    }
  }

  @keyframes dusk-header-rule {
    from {
      --dusk-header-rule: 0;
    }

    to {
      --dusk-header-rule: 1;
    }
  }

  @keyframes dusk-sky-trailing {
    from {
      --dusk-sky-bottom: 0px;
    }

    to {
      --dusk-sky-bottom: var(--dusk-header-height);
    }
  }

  @keyframes dusk-rise {
    from {
      opacity: 0;
      transform: translateY(var(--dusk-rise-from, 8%));
    }
  }

  @keyframes dusk-drift {
    from {
      opacity: 0;
      translate: 0 var(--dusk-drift-from, 12%);
    }
  }

  @keyframes dusk-reveal-down {
    from {
      clip-path: inset(0 0 100% 0);
    }
  }

  @keyframes dusk-sweep {
    from {
      --dusk-sweep: 0deg;
    }
  }

  @keyframes dusk-land {
    from {
      opacity: 0;
      transform: scale(0.4);
    }
  }
}

@layer pages {
  .landing-hero {
    --dusk-sun-x: calc(var(--dusk-grid-margin) + 9 * var(--dusk-grid-step));
    --dusk-afterglow-size: 130% 42%;
    --landing-hero-top: max(calc(var(--dusk-header-height) + var(--dusk-size-16) - var(--dusk-body-cap)), calc(var(--dusk-viewport-height) * 0.44 - var(--dusk-leading-body) - var(--dusk-space-kicker) + var(--dusk-body-descent) - 0.34 * var(--dusk-text-display)));
    --landing-hero-baseline: calc(var(--landing-hero-top) + var(--dusk-body-cap) + var(--dusk-font-cap-height) * (var(--dusk-text-body) + var(--dusk-text-display)) + var(--dusk-space-kicker) + var(--dusk-headline-extra-lines) * var(--dusk-leading-display));
    --landing-hero-meta-baseline: calc(var(--landing-hero-baseline) + var(--dusk-space-meta) + var(--dusk-font-cap-height) * var(--dusk-text-body) + var(--dusk-leading-body));
    --landing-hero-height: max(var(--dusk-viewport-height), 35rem);
    position: relative;
    height: var(--landing-hero-height);
    overflow: clip;
    view-timeline: --dusk-sky-leading block;
    view-timeline-inset: 0px;

    & > .dusk-sky {
      background-image: radial-gradient(ellipse 42% 34% at var(--dusk-sun-x) 100%, rgb(var(--dusk-palette-violet-rgb) / 0.16), rgb(var(--dusk-palette-violet-rgb) / 0) 72%), radial-gradient(ellipse 52% 70% at var(--dusk-sun-x) 100%, rgb(var(--dusk-palette-glow-rgb) / 0.14), rgb(var(--dusk-palette-haze-rgb) / 0.28) 38%, rgb(var(--dusk-palette-haze-rgb) / 0) 72%), linear-gradient(to bottom, var(--dusk-palette-night), var(--dusk-palette-night-high) 28%, var(--dusk-palette-dusk) 50%, var(--dusk-palette-dusk) 70%, var(--dusk-palette-horizon));
    }

    & .dusk-guides {
      --dusk-y-baseline: var(--landing-hero-meta-baseline);
      --dusk-y-ruler: calc(var(--landing-hero-top) + var(--dusk-body-cap));
      --dusk-sun-radius: min(var(--landing-hero-height) - var(--landing-hero-meta-baseline), var(--dusk-sun-limit));
    }

    & h1 {
      margin-block-start: calc(var(--dusk-space-kicker) - var(--dusk-body-descent) - var(--dusk-display-cap));
      margin-inline-start: -0.035em;
    }

    & dl {
      margin-block-start: calc(var(--dusk-space-meta) - var(--dusk-display-descent) - var(--dusk-body-cap));
    }

    & dd {
      margin: 0;
    }

    @media (width < 48rem) {
      --dusk-sun-x: calc(var(--dusk-grid-margin) + 3 * var(--dusk-grid-step) - var(--dusk-grid-gutter) / 2);
      --dusk-afterglow-size: 170% 30%;
      --landing-hero-top: calc(var(--dusk-safe-top) + var(--dusk-header-height) + var(--dusk-viewport-height) * 0.111 - var(--dusk-body-cap));
      --landing-hero-meta-baseline: calc(var(--landing-hero-baseline) + (var(--dusk-viewport-height) - var(--landing-hero-baseline)) * 0.618);
      --landing-hero-height: var(--dusk-viewport-height);

      & > .dusk-sky {
        background-image: radial-gradient(ellipse 70% 30% at var(--dusk-sun-x) 100%, rgb(var(--dusk-palette-violet-rgb) / 0.16), rgb(var(--dusk-palette-violet-rgb) / 0) 72%), radial-gradient(ellipse 90% 40% at var(--dusk-sun-x) 100%, rgb(var(--dusk-palette-glow-rgb) / 0.12), rgb(var(--dusk-palette-haze-rgb) / 0.26) 38%, rgb(var(--dusk-palette-haze-rgb) / 0) 72%), linear-gradient(to bottom, var(--dusk-palette-night), var(--dusk-palette-night-high) 22%, var(--dusk-palette-dusk) 42%, var(--dusk-palette-dusk) 74%, var(--dusk-palette-horizon));
      }

      & .dusk-sky__clouds {
        inset-block-end: 6%;
        height: 15%;
      }

      & .dusk-guides :is([data-dusk-guide="vertical"][data-dusk-at="mid"], [data-dusk-guide="ruler"]) {
        display: none;
      }

      & dl {
        position: absolute;
        inset-inline: var(--dusk-grid-margin);
        top: calc(var(--landing-hero-meta-baseline) - 1.5 * var(--dusk-leading-body) - var(--dusk-font-descent-offset) * var(--dusk-text-body));
        margin: 0;
      }
    }

    @media print {
      height: auto;
      min-height: 0;
    }
  }

  .landing-hero__content {
    position: absolute;
    inset: var(--landing-hero-top) 0 auto;
    z-index: var(--dusk-layer-content);

    @media (width < 48rem) {
      inset: 0;

      & > .dusk-container {
        padding-block-start: var(--landing-hero-top);
      }
    }

    @media print {
      position: static;

      & dl {
        position: static;
        padding-block-end: var(--dusk-size-8);
      }
    }
  }

  .landing-career {
    display: flow-root;
    padding-block: calc(var(--dusk-space-section) - var(--dusk-title-cap)) var(--dusk-space-section);

    & ol {
      container: landing-career / inline-size;
    }
  }

  .landing-entry {
    display: grid;
    grid-template-columns: var(--dusk-hang) minmax(0, 1fr) var(--dusk-size-14);
    grid-template-areas: "logo body link";
    align-items: center;
    padding-block: var(--dusk-space-row);

    & + & {
      border-block-start: var(--dusk-stroke-hairline) solid var(--dusk-color-rule);
    }

    &:last-child {
      padding-block-end: 0;
    }

    & > div {
      grid-area: body;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    & > .dusk-arrow-link {
      grid-area: link;
    }

    @container landing-career (width < 40rem) {
      grid-template-columns: var(--dusk-size-22) minmax(0, 1fr) var(--dusk-size-14);
      grid-template-areas: "logo . link" "body body body";
      row-gap: var(--dusk-size-5);
      column-gap: var(--dusk-size-4);
    }
  }

  .landing-entry__logo {
    --landing-tile-bleed: var(--dusk-size-6);
    --landing-tile-inset: var(--dusk-size-3);
    --landing-tile-dot: var(--dusk-size-1);
    --landing-tile-line: rgb(var(--dusk-palette-ink-rgb) / 0.13);
    --landing-tile-axis: rgb(var(--dusk-palette-ink-rgb) / 0.06);
    --landing-tile-ring: rgb(var(--dusk-palette-ink-rgb) / 0.09);
    --landing-tile-trace: rgb(var(--dusk-palette-orange-rgb) / 0.9);
    position: relative;
    grid-area: logo;
    display: grid;
    place-items: center;
    width: var(--dusk-size-22);
    aspect-ratio: 1;

    & > img {
      position: relative;
      display: block;

      @media (forced-colors: active) and (prefers-color-scheme: dark) {
        filter: invert(1);
      }
    }
  }

  .landing-entry__field {
    position: absolute;
    inset: 0;
    display: block;
    view-timeline: --landing-tile block;

    &::before {
      content: "";
      position: absolute;
      inset: calc(-1 * var(--landing-tile-bleed));
      background:
        linear-gradient(var(--landing-tile-line), var(--landing-tile-line)) 0 var(--landing-tile-bleed) / 100% var(--dusk-stroke-hairline) no-repeat,
        linear-gradient(var(--landing-tile-line), var(--landing-tile-line)) 0 calc(100% - var(--landing-tile-bleed)) / 100% var(--dusk-stroke-hairline) no-repeat,
        linear-gradient(var(--landing-tile-line), var(--landing-tile-line)) var(--landing-tile-bleed) 0 / var(--dusk-stroke-hairline) 100% no-repeat,
        linear-gradient(var(--landing-tile-line), var(--landing-tile-line)) calc(100% - var(--landing-tile-bleed)) 0 / var(--dusk-stroke-hairline) 100% no-repeat,
        linear-gradient(var(--landing-tile-axis), var(--landing-tile-axis)) 0 50% / 100% var(--dusk-stroke-hairline) no-repeat,
        linear-gradient(var(--landing-tile-axis), var(--landing-tile-axis)) 50% 0 / var(--dusk-stroke-hairline) 100% no-repeat;
      -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 100%);
      mask: radial-gradient(closest-side, #000 62%, transparent 100%);
    }

    &::after {
      content: "";
      position: absolute;
      inset: var(--landing-tile-inset);
      border: var(--dusk-stroke-hairline) solid var(--landing-tile-ring);
      border-radius: 50%;
    }
  }

  .landing-entry__trace {
    position: absolute;
    inset: var(--landing-tile-inset);
    border-radius: 50%;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border: var(--dusk-stroke-hairline) solid var(--landing-tile-trace);
      border-radius: 50%;
      -webkit-mask: conic-gradient(#000 0 42deg, transparent 42deg);
      mask: conic-gradient(#000 0 42deg, transparent 42deg);
      opacity: 0;
    }

    &::after {
      content: "";
      position: absolute;
      inset: calc(-1 * var(--landing-tile-dot) / 2);
      border-radius: 50%;
      background: radial-gradient(circle at 50% calc(var(--landing-tile-dot) / 2), var(--dusk-palette-orange) 0 calc(var(--landing-tile-dot) / 2), transparent calc((var(--landing-tile-dot) + var(--dusk-stroke-hairline)) / 2));
      opacity: 0;
    }
  }

  .landing-entry:nth-child(2) {
    --landing-index: 1;
  }

  .landing-entry:nth-child(3) {
    --landing-index: 2;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    :root[data-dusk-reveal-ready] .landing-entry:not([data-dusk-revealed]) :is(.landing-entry__field, .landing-entry__logo > img) {
      opacity: 0;
    }

    .landing-entry[data-dusk-revealed="view"] {
      --landing-wait: calc(var(--landing-index, 0) * var(--dusk-tile-stagger));

      & .landing-entry__field::before {
        animation: landing-tile-settle var(--dusk-tile-reveal) var(--dusk-ease-entrance) var(--landing-wait) both;
      }

      & .landing-entry__field::after {
        animation: landing-tile-settle var(--dusk-tile-reveal) var(--dusk-ease-entrance) calc(var(--landing-wait) + var(--dusk-tile-ring-delay)) both;
      }

      & .landing-entry__logo > img {
        animation: landing-tile-rise var(--dusk-tile-reveal) var(--dusk-ease-entrance) calc(var(--landing-wait) + var(--dusk-tile-logo-delay)) both;
      }

      & .landing-entry__trace::before {
        animation: landing-tile-scan var(--dusk-tile-scan) var(--dusk-ease-standard) calc(var(--landing-wait) + var(--dusk-tile-scan-delay)) 2 both;
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .landing-entry[data-dusk-revealed]:hover .landing-entry__trace::before {
        animation: landing-tile-rescan var(--dusk-tile-scan) var(--dusk-ease-standard) both;
      }
    }

    @supports (animation-timeline: view()) {
      .landing-entry__field {
        animation: landing-tile-drift linear both;
        animation-timeline: --landing-tile;
        animation-range: cover 0% cover 100%;
      }

      .landing-entry__trace::after {
        opacity: 0.85;
        animation: landing-tile-wind linear both;
        animation-timeline: --landing-tile;
        animation-range: cover 0% cover 100%;
      }
    }
  }

  @keyframes landing-tile-settle {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
  }

  @keyframes landing-tile-rise {
    from {
      opacity: 0;
      transform: translateY(var(--dusk-size-1-5));
    }
  }

  @keyframes landing-tile-scan {
    0% {
      opacity: 0;
      transform: rotate(0);
    }

    12%,
    88% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: rotate(360deg);
    }
  }

  @keyframes landing-tile-rescan {
    0% {
      opacity: 0;
      transform: rotate(0);
    }

    12%,
    88% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: rotate(360deg);
    }
  }

  @keyframes landing-tile-drift {
    from {
      transform: translateY(var(--dusk-size-2));
    }

    to {
      transform: translateY(calc(-1 * var(--dusk-size-2)));
    }
  }

  @keyframes landing-tile-wind {
    from {
      transform: rotate(-80deg);
    }

    to {
      transform: rotate(200deg);
    }
  }


  .about-article {
    position: relative;
    padding-block: calc(var(--dusk-safe-top) + var(--dusk-header-height) + var(--dusk-space-page-top) - var(--dusk-body-cap)) var(--dusk-space-section);

    & .dusk-guides {
      --dusk-y-baseline: calc(var(--dusk-safe-top) + var(--dusk-header-height) + var(--dusk-space-page-top) + var(--dusk-font-cap-height) * (var(--dusk-text-body) + var(--dusk-text-display)) + var(--dusk-space-kicker));
    }

    & > .dusk-container {
      position: relative;
      z-index: var(--dusk-layer-content);
    }

    & h1 {
      margin-block-start: calc(var(--dusk-space-kicker) - var(--dusk-body-descent) - var(--dusk-display-cap));
      margin-inline-start: -0.016em;
    }
  }

  .about-columns {
    row-gap: var(--dusk-space-columns);
    margin-block-start: calc(var(--dusk-space-intro) - var(--dusk-display-descent) - var(--dusk-title-cap));

    & > section {
      grid-column: span 6;
      min-width: 0;

      @media (width < 48rem) {
        grid-column: 1 / -1;
      }
    }
  }

  .about-prose {
    margin-block-start: calc(var(--dusk-size-6) - var(--dusk-body-cap));

    & > p:first-child {
      font-weight: var(--dusk-font-weight-medium);
    }

    & > :not(:first-child) {
      color: var(--dusk-color-text-muted);
      line-height: var(--dusk-leading-prose);
    }

    & li {
      display: flex;
      gap: var(--dusk-size-2-5);
      line-height: var(--dusk-leading-prose);
    }

    & li > :first-child {
      color: var(--dusk-color-text);
    }

    & li > :last-child {
      color: var(--dusk-color-text-muted);
    }
  }

  .error-page {
    --error-page-top: calc(var(--dusk-safe-top) + var(--dusk-header-height) + var(--dusk-space-page-top));
    --dusk-y-ruler: var(--error-page-top);
    --dusk-y-baseline: calc(var(--error-page-top) + var(--dusk-font-cap-height) * (var(--dusk-text-body) + var(--dusk-text-display)) + var(--dusk-space-kicker));
    position: relative;
    display: flow-root;
    min-height: var(--dusk-viewport-height);
    overflow: clip;
    padding-block: calc(var(--error-page-top) - var(--dusk-body-cap)) var(--dusk-space-section);

    & > .dusk-container {
      position: relative;
      z-index: var(--dusk-layer-content);
    }

    & h1 {
      margin-block-start: calc(var(--dusk-space-kicker) - var(--dusk-body-descent) - var(--dusk-display-cap));
      margin-inline-start: -0.035em;
    }

    & .dusk-guides {
      --dusk-sun-radius: min(var(--dusk-viewport-height) / 2, var(--dusk-sun-limit));
    }

    @media (width < 48rem) {
      & .dusk-guides :is([data-dusk-guide="vertical"][data-dusk-at="mid"], [data-dusk-guide="ruler"]) {
        display: none;
      }
    }
  }

  .error-page__text {
    max-width: var(--dusk-measure);
    margin-block-start: calc(var(--dusk-space-intro) - var(--dusk-display-descent) - var(--dusk-body-cap));
  }

  .error-page__home {
    display: inline-flex;
    align-items: center;
    gap: var(--dusk-size-4);
    margin-block-start: var(--dusk-size-8);
    font-weight: var(--dusk-font-weight-medium);

  }
}

@layer utilities {
  .dusk-muted {
    color: var(--dusk-color-text-muted);
  }

  .dusk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}