@import "reset.css" layer(reset);

@font-face {
  font-family: "Pekora";
  font-weight: normal;
  font-display: swap;
  src:
    local("Pekora"),
    url("fonts/Pekora/Pekora Regular.woff") format("woff")
}

@font-face {
  font-family: "Pekora";
  font-style: italic;
  font-display: swap;
  src:
    local("Pekora"),
    url("fonts/Pekora/Pekora Regular Italic.woff") format("woff")
}

@font-face {
  font-family: "Pekora";
  font-weight: bold;
  font-display: swap;
  src:
    local("Pekora"),
    url("fonts/Pekora/Pekora Bold.woff") format("woff")
}

:root {
  --light: oklch(0.9731 0 0);
  --dark: oklch(0.1116 0.0068 224.94);

  --surface-0: light-dark(var(--light), var(--dark));
  --text-primary: light-dark(var(--dark), var(--light));
  --text-secondary: light-dark(oklch(0.47 0.02 270), oklch(0.73 0.006 270));

  --accent: light-dark(oklch(0.817 0.1059 19.87), oklch(0.8111 0.1009 19.87));

  --measure: 50ch;
  --measure-s: 30ch;

  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1140,20,1.25,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--1: clamp(0.8333rem, 0.7683rem + 0.3252vi, 1rem);
  --step-0: clamp(1rem, 0.9024rem + 0.4878vi, 1.25rem);
  --step-1: clamp(1.2rem, 1.0585rem + 0.7073vi, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2398rem + 1.0012vi, 1.9531rem);
  --step-3: clamp(1.728rem, 1.4496rem + 1.392vi, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.6919rem + 1.9086vi, 3.0518rem);
  --step-5: clamp(2.4883rem, 1.9707rem + 2.5881vi, 3.8147rem);
  --step-6: clamp(2.986rem, 2.2904rem + 3.4778vw, 4.7684rem);
  --step-7: clamp(3.5832rem, 2.6555rem + 4.6386vw, 5.9605rem);

  --line-height-xxs: 0.75;
  --line-height-xs: 1;
  --line-height-s: 1.15;
  --line-height-m: 1.5;

  /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,2000,48,1.25,5,2,&s=0.75|0.5|0.25|0.125|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-5xs: clamp(0.125rem, 0.0774rem + 0.2381vw, 0.375rem);
  --space-4xs: clamp(0.3125rem, 0.2292rem + 0.4167vw, 0.75rem);
  --space-3xs: clamp(0.3125rem, 0.2292rem + 0.4167vi, 0.75rem);
  --space-2xs: clamp(0.5625rem, 0.3839rem + 0.8929vi, 1.5rem);
  --space-xs: clamp(0.875rem, 0.6131rem + 1.3095vi, 2.25rem);
  --space-s: clamp(1.125rem, 0.7679rem + 1.7857vi, 3rem);
  --space-m: clamp(1.6875rem, 1.1518rem + 2.6786vi, 4.5rem);
  --space-l: clamp(2.25rem, 1.5357rem + 3.5714vi, 6rem);
  --space-xl: clamp(3.375rem, 2.3036rem + 5.3571vi, 9rem);
  --space-2xl: clamp(4.5rem, 3.0714rem + 7.1429vi, 12rem);
  --space-3xl: clamp(6.75rem, 4.6071rem + 10.7143vi, 18rem);
}


main {
  /* padding: var(--space-m); */
  padding-block: var(--space-l) var(--space-2xl);
}

body {
  color: var(--text-primary);
  background-color: var(--surface-0);
  min-height: 100vh;
  font-family: sans-serif;
  font-size: var(--step-0);
}

h1,
h2,
h3,
h4 {
  font-family: "Pekora";
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.1ex;
}

p {
  max-inline-size: var(--measure);
}

a {
  color: currentColor;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.3ex;
  text-underline-offset: 0.3ex;
  transition: 200ms;
  /* font-weight: bold; */

  &:hover {
    transition: 100ms;
    text-decoration-thickness: 0.5ex;
    text-decoration-skip-ink: none;
  }
}

figure {
  margin-inline: auto;
}

blockquote {
  padding-inline-start: 1em;
  border-inline-start: 2px solid var(--text-primary);

  p::before,
  p::after {
    content: "”";
  }
}

header {
  padding: var(--space-xs) var(--space-l);
  max-width: 120ch;
  margin-inline: auto;

  & a {
    text-decoration: none;
    font-family: "Pekora";
    text-transform: uppercase;
    letter-spacing: 0.1ex;
    font-weight: bold;
    font-size: var(--step-1);

    &:hover,
    &[aria-current="page"] {
      text-decoration: underline currentColor;
      text-decoration-thickness: 2px;
    }
  }
}

nav {
  padding-inline-start: var(--space-s);
}

dt {
  font-weight: bold;
}

dd {
  padding-inline-start: 1em;
}

.ingress {
  font-size: var(--step-2);
}

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

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

.breakout>* {
  grid-column: content;
}

.popout {
  grid-column: popout;
}

.feature {
  grid-column: feature;
}

.full {
  grid-column: full;
}


.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1rem);
  justify-content: flex-start;
  align-items: center;
}

.project-grid {
  display: grid;
  gap: var(--space-2xs) var(--space-4xs);


  @supports (width: min(250px, 100%)) {
    & {
      grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    }
  }


  li {
    position: relative;

    filter: grayscale();
    transition: 200ms;

    &:hover {
      transition: 100ms;
      filter: none;
    }
  }

  img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }


  a {
    text-decoration: underline currentColor;
    text-decoration-thickness: 0.1ex;
    text-decoration-line: none;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    &:hover {
      text-decoration: underline currentColor;
      text-decoration-thickness: 0.2ex;
    }
  }
}


/* .stack { */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: flex-start; */
/* } */

/* .stack>* { */
/* margin-block: 0; */
/* } */


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



:is(h1, h2, h3, h4)+* {
  --stack-space: var(--space-3xs);
}

:where(p, figure, dl, blockquote) {
  --stack-space: 1lh;
}

@media (prefers-color-scheme: dark) {
  .inv {
    filter: invert(1);
  }
}

.logo {
  margin-block-end: -0.5ex;
}

.box {
  max-inline-size: var(--measure-s);
}

.fifty-fifty {
  display: flex;
  gap: var(--space-l);
  flex-wrap: wrap;
}

.fifty-fifty>* {
  flex-basis: 20rem;
  flex-grow: 1;
}


:has(> .sidebar) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, 1rem);
}

.sidebar {
  /* ↓ The width when the sidebar *is* a sidebar */
  flex-basis: var(--sidebar-size, 20rem);
  flex-grow: 1;
}


:has(> .sidebar)> :not(.sidebar) {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: var(--sidebar-wrap-at, 50%);
}

.reel {
  scroll-snap-type: x mandatory;
  /* overflow-x: scroll; */
  /* overflow-block: visible; */
  overflow: visible;
  display: flex;
  gap: var(--space-xl);

  &>li {
    scroll-snap-align: start;
    width: 30ch;
  }
}

.signature {
  height: 1.5em;
  width: unset;

  picture:has(&) {
    --stack-space: 0px;
  }
}

.text-align\:center {
  text-align: center;
}