@import url("https://meyerweb.com/eric/tools/css/reset/reset.css");

@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Lora:ital,wght@0,400..700;1,400..700&&display=swap");

:root {
    --ok-l: 0.5033;
  --ok-c: 0.0788;
  --ok-h: 144.29;

  --primary: oklch(var(--ok-l) var(--ok-c) var(--ok-h));
  --ink: oklch(calc(var(--ok-l) / 2) calc(var(--ok-c) / 2) var(--ok-h));
  --ink-muted: color-mix(in oklch, var(--ink) 50%, transparent);
  --paper: oklch(
    calc(var(--ok-l) * 1.9) calc(var(--ok-c) / 4) calc(var(--ok-h) / 2)
  );
  --paper-muted: color-mix(in oklch, var(--paper) 50%, transparent);

  --space: 32px;
  --space-xs: calc(var(--space) / 4);
  --space-s: calc(var(--space) / 2);
  --space-m: calc(var(--space) * 2);
  --space-l: calc(var(--space) * 3);
  --space-xl: calc(var(--space) * 4);
  
  --w-max: 1080px;
  --w-aside: calc(256px + var(--space-xl));
}

::selection {
  background-color: var(--primary);
  color: var(--paper);
}

body {
  font-family: serif;
  min-height: 100dvh;
  background-color: var(--ink);
  display: flex;
  flex-direction: column;
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-size: 16px;
}






/* = MOBILE = */
aside {
  display: contents;
  user-select: none;
}

aside header {
  background-color: var(--ink);
  color: var(--paper);
  order: -1;
  text-transform: uppercase;
  
  p {
      font-weight: 400;
      font-style: italic;
      font-size: 1rem;
  }
}

aside footer {
  background-color: var(--ink);
  color: var(--paper);
  margin-top: auto;
  .footnote {
    color: var(--paper);
    font-size: 0.9rem;
    font-weight: 400;
    font-style: italic;
  }

  .copyright {
    color: var(--paper-muted);
    font-weight: 400;
    font-size: 0.9rem;
  }
}

aside header, aside footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

main {
  background-color: var(--paper);
  flex: 1;
}

main article {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  letter-spacing: 0.01rem;

  header::after {
    content: "—";
  }

  p {
    line-height: 2;
  }
}

main article section {
  display: flex;
  flex-direction: column;
  gap: var(--space);

  header {
    font-size: 1.5rem;
  }

  a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 0.1em solid var(--primary);
    transition: all 0.15s ease-in-out;

    &:hover {
      color: var(--primary);
      border-color: var(--ink);
    }
  }
}

aside header, aside footer, main {
  padding: var(--space);
}








/* = DESKTOP = */

@media (min-width: 881px) {
  body {
    display: grid;
    grid-template-columns: var(--w-aside) 1fr;
    max-width: var(--w-max);
    margin-inline: auto;
  }

  aside {
 display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  background-color: var(--ink);
  color: var(--paper);
  order: -1;
  }

  aside header {
    order: 0;
    background-color: transparent;
    flex: 1;
  }

  aside footer {
    background-color: transparent;
  }

  main {
    background-color: var(--paper);
    position: relative;
  }
  
  aside header, aside footer, main {
  padding: var(--space-m);
}

   aside::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: max(0px, calc((100% - var(--w-max)) / 2));
    height: 100dvh;
    background-color: var(--ink);
    pointer-events: none;
  }
  
  main::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: max(0px, calc((100% - var(--w-max)) / 2));
    height: 100dvh;
    background-color: var(--paper);
    pointer-events: none;
  }
}

.slab {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

sup {
  font-size: 0.75rem;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.3rem;
  font-feature-settings: "sups" 1;
}

strong {
  font-weight: 700;
}

small {
  color: var(--ink-muted);
}

.cv__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  h1 {
    display: flex;
    gap: var(--space-xs);
    font-weight: 700;

    span {
      font-weight: 500;
    }

    span::before {
      content: "(";
    }

    span::after {
      content: ")";
    }
  }

  h2 {
    color: var(--ink-muted);
  }

  ul {
    display: flex;
    gap: var(--space-xs);

    li + li::before {
      content: "·";
      margin-right: var(--space-xs);
    }
  }
}

/* main article section p {
  text-wrap: balance;
} */

aside header h1 {
  font-size: 1.573rem;
}