/* instrument-sans-latin-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/instrument-sans:vf@latest/latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Departure Mono */
@font-face {
  font-family: 'Departure Mono';
  font-style: normal;
  font-display: swap;
  src: url(/fonts/DepartureMono-Regular.woff2);
}

:root {
  /* Sizes */
  --max-width: 50ch;
  --gutter: 1rem;
  --ratio: 1.25;
  --scale0: 1rem;
  --scale-1: calc(var(--scale0) / var(--ratio));
  --scale-2: calc(var(--scale-1) / var(--ratio));
  --scale-3: calc(var(--scale-2) / var(--ratio));
  --scale-4: calc(var(--scale-3) / var(--ratio));
  --scale-5: calc(var(--scale-4) / var(--ratio));
  --scale-6: calc(var(--scale-5) / var(--ratio));
  --scale-7: calc(var(--scale-6) / var(--ratio));
  --scale-8: calc(var(--scale-7) / var(--ratio));
  --scale-9: calc(var(--scale-8) / var(--ratio));
  --scale-10: calc(var(--scale-9) / var(--ratio));
  --scale1: calc(var(--scale0) * var(--ratio));
  --scale2: calc(var(--scale1) * var(--ratio));
  --scale3: calc(var(--scale2) * var(--ratio));
  --scale4: calc(var(--scale3) * var(--ratio));
  --scale5: calc(var(--scale4) * var(--ratio));
  --scale6: calc(var(--scale5) * var(--ratio));
  --scale7: calc(var(--scale6) * var(--ratio));
  --scale8: calc(var(--scale7) * var(--ratio));
  --scale9: calc(var(--scale8) * var(--ratio));
  --scale10: calc(var(--scale9) * var(--ratio));
  --line-height: 1.5;
  --main-padding: calc(1.75rem + 2vw);

  /* Colors */
  --color-fg: #333333;
  --color-fg-lighter: color(from var(--color-fg) srgb calc(r + 0.1) calc(g + 0.1) calc(b + 0.1) / 1);
  --color-bg: #f1f1f1;
  --color-bg-darker: color(from var(--color-bg) srgb calc(r - 0.075) calc(g - 0.075) calc(b - 0.075) / 1);
  --color-hover: blue;

  /* Text Selection */
  --selection-bg: #111111;
  --selection-color: #eeeeee;

  /* Fonts */
  --font-body: 'Instrument Sans Variable', 'Switzer', system-ui, sans-serif;
  --font-mono: 'Departure Mono', 'JetBrains Mono Variable', monospace;

  /* MOUSE */
  --mouse-x: 0;
  --mouse-y: 0;
}

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

html {
  background-color: var(--color-bg);
  margin: 0;
  min-height: 100%;
  overflow-y: scroll;
  padding: 0;
  text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
  -moz-font-feature-settings: 'kern';
  -ms-font-feature-settings: 'kern';
  -webkit-font-feature-settings: 'kern';
  font-feature-settings: 'kern';
  font-size: 112.5%;
}

html:lang(en-US) {
  hyphens: auto;
  word-break: break-word;
}

@supports (hanging-punctuation: first) {
  html {
    hanging-punctuation: first;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 2dppx) {
  html {
    font-smoothing: subpixel-antialiased;
  }
}

@-ms-viewport {
  html {
    width: device-width;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  min-height: 100%;
  height: 100vh;
  line-height: var(--line-height);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body.show-crosshair {
  cursor: none;
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-color);
}

@media screen and (min-width: 80rem) {
  html {
    font-size: 150%;
  }
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
  font-size: 1rem;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on interactive elements */
button,
input,
label {
  line-height: 1.1;
  font: inherit;
  color: inherit;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilities */

/* The Flow Utility */
/* https://piccalil.li/blog/flow-utility/ */

.flow {
  --flow-space: 1em;
}

.flow>*+* {
  margin-block-start: var(--flow-space, 1em);
}

:is(h1, h2, h3, blockquote) {
  --flow-space: 1.5em;
}

:is(h1, h2, h3)+* {
  --flow-space: 0.5em;
}

h1,
h2,
h3 {
  font-weight: 700;
  /* line-height: 1.1; */
}

blockquote,
blockquote+* {
  --flow-space: 4rem;
}

/* Styles */

h1 {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  font-weight: bold;
}

h1>span+span {
  font-weight: normal;
}

.big-section-title {
  overflow: hidden;

  & h2 {
    font-weight: 700;
    line-height: 1.2;
    font-variation-settings: 'wdth' 80;
  }
}

h4 {
  font-weight: 600;
  display: flex;
  gap: 1em;
}

h4>span+span {
  font-weight: normal;
  opacity: 0.8;
}

#scrollSmootherWrapper {
  z-index: 10;
}

main {
  position: relative;
  padding: var(--main-padding);
  display: flex;
  flex-direction: column;
  gap: 16vmax;
  z-index: 10;
}

section.row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 40rem) {
  section.row {
    flex-direction: row;
    align-items: flex-start;
  }
}

section.row>* {
  flex-grow: 1;
  flex-basis: 100%;
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 40rem) {
  .info-block {
    position: sticky;
    top: 2rem;
  }
}

.tag-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

ul.taglist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

h5 {
  font-size: var(--scale-1);
  font-weight: 600;
}

li.tag {
  display: block;
  line-height: 1;
  /* padding: 0.25em 0.5em; */
  /* border-radius: 99em; */
  /* background-color: #eeeeee; */
  font-size: var(--scale-2);
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fg-lighter);
  font-variation-settings: 'wdth' 90;
}

.flow ul {
  padding-inline-start: 1rem;
}

.flow li {
  margin-block-end: 0.5em;
}

.row a {
  background-color: white;
  transition: all 0.2s ease;
}

.row a:hover,
.row a:focus-visible {
  color: white;
  background-color: var(--color-hover);
}

.svg-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.svg-bg img {
  width: 100%;
  height: 100%;
}

.svg-bg .bg-circle {
  width: 25vmin;
  height: 25vmin;
  border-radius: 999999rem;
  border: 0.25vmin solid #ddd;
  position: absolute;
}

.svg-bg .bg-svg {
  width: 50vmin;
  height: 50vmin;
  opacity: 0.25;
}

.svg-bg .bg-svg-2 {
  position: absolute;
  left: 0;
}

.svg-bg .bg-svg-3 {
  position: absolute;
  right: 0;
}

.dark-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 0;
  background-color: rgba(255, 255, 255, 1);
  mix-blend-mode: difference;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.debug {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  background-color: color(from var(--color-bg-darker) srgb r g b / 0.75);
  backdrop-filter: blur(6px);
  width: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: calc(var(--main-padding) * 0.5);
  overflow: hidden;
}

.debug * {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-grow: 1;
  flex-basis: 100%;
  text-align: center;
}

@media (min-width: 40rem) {
  .debug * {
    font-size: 12px;
  }
}

#debug-top {
  top: 0;
  right: 0;
  left: 0;
  width: 100vw;
  transform-origin: top center;
}

#debug-left {
  top: 50vh;
  left: -50vh;
  width: 100vh;
  transform-origin: top center;
  rotate: -90deg;
  text-transform: uppercase;
}

#debug-right {
  top: 50vh;
  right: -50vh;
  transform-origin: top center;
  rotate: 90deg;
  text-transform: uppercase;
  width: 100vh;
}

#debug-bottom {
  top: auto;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100vw;
  transform-origin: bottom center;
}

.debug button,
.debug .site-color-picker label {
  padding: 0.75em 1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 0.35em;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.debug button:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.debug .site-color-picker {
  display: flex;
  flex-direction: row;
  gap: 2px;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.debug .site-color-picker label {
  display: inline-flex;
  gap: 0.1rem;
  justify-content: center;
  position: relative;
  flex-basis: content;
  flex-grow: 0;
}

.debug .site-color-picker label input {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.debug .site-color-picker label:has(input:checked) {
  background-color: white;
}

.debug button kbd {
  font-size: 0.9em;
  border: 1px solid #aaa;
  background-color: #eee;
  padding: 0 0.5em;
  border-radius: 0.2em;
  box-shadow: 0 1px 0 0 #aaa;
  position: relative;
  top: -1px;
}

#crosshair {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.crosshair-x {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 1px;
  background-color: black;
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.2s ease;
  will-change: opacity, transform, background-color;
}

.crosshair-y {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
  height: 100vh;
  background-color: black;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.2s ease;
  will-change: opacity, transform, background-color;
}

.crosshair-stats {
  display: block;
  position: fixed;
  height: 34px;
  top: 0;
  left: 0;
  transform-origin: bottom left;
  opacity: 0;
  background-color: black;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.1s ease;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.2rem;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  color: wheat;
  will-change: opacity, transform, background-color;
}

section.big-section-title {
  h2 {
    letter-spacing: -0.02em;
  }

  .title-experience {
    font-size: 19vw;
  }

  .title-projects {
    font-size: 26vw;
  }

  .title-colophon {
    font-size: 22vw;
  }
}

/* Enter Animation Overlay */

div.enter-animation-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: transparent;
  pointer-events: none;
  display: grid;
  place-items: center;
}

div.enter-animation-overlay p {
  z-index: 10;
  text-transform: uppercase;
  color: white;
  font-family: var(--font-mono);
  animation: goodbye 2s cubic-bezier(0.76, 0.05, 0.86, 0.06) both;
}

div.enter-animation-overlay div {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

div.enter-animation-overlay div:nth-of-type(1) {
  background-color: #444;
  animation: scale-to-zero 1.1s cubic-bezier(0.69, 0.02, 0.69, 0.96) 1s both;
}

div.enter-animation-overlay div:nth-of-type(2) {
  background-color: #333;
  animation: scale-to-zero 1.2s cubic-bezier(0.69, 0.02, 0.69, 0.96) 0.8s both;
}

div.enter-animation-overlay div:nth-of-type(3) {
  background-color: #222;
  animation: scale-to-zero 1.3s cubic-bezier(0.69, 0.02, 0.69, 0.96) 0.6s both;
}

div.enter-animation-overlay div:nth-of-type(4) {
  background-color: #111;
  animation: scale-to-zero 1.4s cubic-bezier(0.69, 0.02, 0.69, 0.96) 0.4s both;
}

div.enter-animation-overlay div:nth-of-type(5) {
  background-color: #000;
  animation: scale-to-zero 1.5s cubic-bezier(0.69, 0.02, 0.69, 0.96) 0.2s both;
}

@keyframes scale-to-zero {
  from {
    scale: 1
  }

  to {
    scale: 0
  }
}

@keyframes goodbye {
  from {
    opacity: 1;
    letter-spacing: 2em;
    scale: 1;
  }

  to {
    opacity: 0;
    letter-spacing: 0;
    scale: 0.7
  }
}


/* FIT TEXT TO WIDTH OF CONTAINER */
/* https://piccalil.li/blog/riffing-on-the-latest-css-fit-text-approach/ */

.container-fill-text {
  --container-fill-text-captured-length: initial;

  display: flex;
  container-type: inline-size;

  /* Overrides a global style on headings */
  max-width: unset;

  line-height: var(--leading-micro);
  font-weight: var(--font-black);
}

.container-fill-text__reference {
  visibility: hidden;
}

.container-fill-text__container {
  --container-fill-text-captured-length: 100cqi;
  --container-fill-text-available-space: var(--container-fill-text-captured-length);

  flex-grow: 1;
  container-type: inline-size;
}

.container-fill-text__display {
  --container-fill-text-captured-length: 100cqi;
  --container-fill-text-ratio: tan(atan2(var(--container-fill-text-available-space),
        var(--container-fill-text-available-space) - var(--container-fill-text-captured-length)));

  display: block;

  /* AKA, width */
  inline-size: var(--container-fill-text-available-space);

  /* Apply the calculated size with sensible fallbacks for no support */
  font-size: var(--scale-5);

  /* The initial fallback value for no support now becomes our minimum clamp value */
  font-size: clamp(var(--scale-5),
      1em * var(--container-fill-text-ratio),
      var(--container-fill-text-max-font-size, infinity * 1px));
}

@property --container-fill-text-captured-length {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
}