@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-350.woff2') format('woff2');
  font-weight: 350;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-450.woff2') format('woff2');
  font-weight: 450;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-540.woff2') format('woff2');
  font-weight: 540;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-550.woff2') format('woff2');
  font-weight: 550;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Fira Mono';
  src: url('/fonts/firamono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

:root {
  --color-bg: light-dark(#fff, #3b454e);
  --color-text: light-dark(#191919, #fff);
  --color-icon: light-dark(#383838, #fff);
  --color-selection: light-dark(#d8d8d8, #4b5760);
  --color-tp: color-mix(in srgb, var(--color-icon) 30%, transparent);
  --color-tp-mid: color-mix(in srgb, var(--color-icon) 68%, transparent);
  --color-tp-light: color-mix(in srgb, var(--color-icon) 80%, transparent);

  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-dark-light: color .3s var(--ease-standard);
  --ease-dark-light-bg: background-color .3s var(--ease-standard);

  --font-name: 1.6875rem;
  --font-title: 1.058125rem;
  --font-p: 1.125rem;
  --font-button: min(1.1875rem + .625vw, 1.3125rem);

  --container-width: 56rem;
  --container-padding: min(8vw, 9rem);

  --header-padding-top: 2.25rem;
  --header-name-padding: .15rem;
  --header-name-margin: .5rem
}

/* base */
html {
  color-scheme: light dark;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--color-bg);
  transition: var(--ease-dark-light-bg);
  scrollbar-width: none
}

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

body {
  margin: unset;
  color: var(--color-text);
  font-family: Figtree, sans-serif;
  line-height: 1
}

body,
header {
  width: min(100% - var(--container-padding) * 2, var(--container-width));
  margin: 0 auto;
  padding-inline: var(--container-padding)
}

[symbols] {
  display: none
}

a {
  color: inherit
}

button {
  background-color: unset;
  border: unset;
  padding: unset;
  color: inherit;
  font: inherit;
  cursor: pointer;
  font-weight: 540;
  text-transform: lowercase;
  font-size: var(--font-button)
}

a:focus-visible,
button:focus-visible {
  outline: 1.75px solid var(--color-text);
  outline-offset: 1.5px;
  border-radius: 4px
}

/* scrollbar */
::-webkit-scrollbar {
  display: none
}

c-scrollbar {
  position: fixed;
  top: 50svh;
  right: calc(3.75vw - 2.75px / 2);
  transform: translateY(-50%);
  width: 2.75px;
  height: 72px;
  background: var(--color-tp);
  border-radius: 1.5px;
  z-index: 1;
  transition: var(--ease-dark-light-bg)
}

c-scrollbar span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--scrollbar-height, 0);
  background: var(--color-text);
  border-radius: inherit;
  transition: var(--ease-dark-light-bg)
}

/* page transition */
main {
  transition: opacity .3s var(--ease-standard)
}

[transitioning] c-scrollbar span {
  transition: height .3s var(--ease-standard)
}

[transitioning] main:first-of-type,
[transitioning] footer {
  opacity: 0
}

main+main {
  position: fixed;
  top: 0;
  opacity: 0;
  width: inherit
}

[transitioning] main+main {
  opacity: 1
}

/* header */
header {
  position: fixed;
  z-index: 1;
  padding: var(--header-padding-top) var(--container-padding) 0;
  inset: 0 0 auto
}

header::before {
  content: '';
  position: inherit;
  inset: inherit;
  height: 11rem;
  pointer-events: none;
  z-index: -1;
  background-color: var(--color-bg);
  will-change: background-color;
  contain: paint;
  transition: var(--ease-dark-light-bg);
  mask-image: linear-gradient(180deg, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 60%, transparent 100%)
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}

header nav a {
  white-space: nowrap;
  text-decoration: none;
  transition: var(--ease-dark-light)
}

header h1 {
  letter-spacing: .003em;
  margin: 0 0 var(--header-name-margin) -1px;
  font-size: var(--font-name);
  font-weight: 550;
  line-height: 1;
  text-transform: lowercase;
  padding-inline: var(--header-name-padding);
}

header h2 {
  letter-spacing: .018em;
  text-transform: uppercase;
  margin-block: 0;
  font-size: var(--font-title);
  font-weight: 350;
  line-height: 1;
}

header nav>a:last-child {
  letter-spacing: .003125rem;
  text-transform: lowercase;
  font-size: var(--font-button);
  font-weight: 540;
}

/* theme */
html[data-theme='light'] {
  color-scheme: light
}

html[data-theme='dark'] {
  color-scheme: dark
}

.theme-toggle {
  position: fixed;
  bottom: calc(3.75vw - 1.375rem / 2);
  right: calc(3.75vw - 1.375rem / 2);
  height: 1.375rem;
  width: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-tp)
}

.theme-toggle:hover {
  color: var(--color-tp-mid)
}

.theme-toggle svg {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity .3s var(--ease-standard),
    var(--ease-dark-light)
}

.theme-toggle svg:last-child {
  width: 70%
}

[data-theme='light'] .theme-toggle svg:last-child,
[data-theme='dark'] .theme-toggle svg:first-child {
  opacity: 1
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) .theme-toggle svg:last-child {
    opacity: 1
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle svg:first-child {
    opacity: 1
  }
}