@import './fonts.css';

:root {
  /* --step--2: clamp(0.69rem, calc(0.66rem + 0.15vw), 0.80rem); */
  /* --step--1: clamp(0.83rem, calc(0.79rem + 0.24vw), 1.00rem); */
  --font-size-body: clamp(1.00rem, calc(0.93rem + 0.36vw), 1.25rem);
  --font-size-h4: clamp(1.20rem, calc(1.10rem + 0.52vw), 1.56rem);
  --font-size-h3: clamp(1.44rem, calc(1.29rem + 0.73vw), 1.95rem);
  --font-size-h2: clamp(1.73rem, calc(1.52rem + 1.02vw), 2.44rem);
  --font-size-h1: clamp(2.07rem, calc(1.79rem + 1.40vw), 3.05rem);

  --white: #fefefe;
  --white-50: rgba(254, 254, 254, 0.5);
  --light-grey: #efefef;
  --dark-grey: #333;
  --black: #222;
  --black-50: rgba(34, 34, 34, 0.5);

  --background: var(--white);
  --background-50: var(--white-50);
  --text: var(--black);
  --text-secondary: var(--black-50);
  --elevation-1: var(--light-grey);

  --content-width: 70rem;

  color-scheme: light dark;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --background: var(--black);
    --background-50: var(--black-50);
    --text: var(--white);
    --text-secondary: var(--white-50);
    --elevation-1: var(--dark-grey);
  }
}

*, *::after, *::before {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

*:focus-visible {
  outline: 0.125rem solid var(--text);
  outline-offset: 0.25rem;
  text-decoration: none;
}

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

::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-track {
  background-color: var(--background);
}

::-webkit-scrollbar-thumb {
  background-color: var(--text-secondary);
  border-radius: 0.5rem;
  border: 0.25rem solid var(--background);
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: 'Inconsolata', serif;
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background-color: var(--background);
  margin: 0;
  padding: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 2rem;
  line-height: 1.25;
}

h1, .h1 {
  font-size: var(--font-size-h1);
}

h2, .h2 {
  font-size: var(--font-size-h2);
}

h3, .h3 {
  font-size: var(--font-size-h3);
}

h4, .h4 {
  font-size: var(--font-size-h4);
}

h5, .h5, h6, .h6 {
  font-size: var(--font-size-body);
}

p {
  margin-top: 0;
  margin-bottom: 2.1875rem;
  max-width: 46rem;
}

strong {
  font-weight: 700;
  /* font-size: calc(var(--font-size-body) * 1.15); */
}

a {
  color: inherit;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: var(--text-secondary);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.375rem;
  background-image: linear-gradient(to right, var(--text), var(--text));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 100% 0%;
  hyphens: manual;
  transition: background-size 200ms ease, color 200ms ease, text-underline-offset 200ms ease;
  transition-delay: 0ms, 0ms, 50ms;
}

a:hover {
  /* background-position: 0% 100%; */
  background-size: 100% 100%;
  text-underline-offset: 0;
  color: var(--background);
  transition-delay: 50ms, 50ms, 0ms;
}

img, svg {
  display: block;
  max-width: 100%;
}

header {
  background-color: var(--background-50);
  position: sticky;
  top: 0;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  z-index: 1;
}

header .wrapper {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3rem 0rem;
  display: flex;
  align-items: center;
}

header .wrapper .home-link {
  background-image: none;
}

header .wrapper .home-link:hover {
  color: var(--text-secondary);
}

header .wrapper .home-link svg {
  width: 1.75rem;
  height: 1.75rem;
}

header .wrapper .menu-button-container {
  position: relative;
  margin-left: auto;
  display: none;
}

header .wrapper .close-menu-button {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: none;
  display: none;
}

header:target .wrapper .close-menu-button {
  display: block;
}

header .wrapper .menu-button {
  display: block;
  background-image: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

header .wrapper .menu-button:hover {
  color: currentColor;
}

header .wrapper .menu-button::before,
header .wrapper .menu-button::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  position: absolute;
  top: calc(50% - 0.0625rem);
  left: 0.5rem;
  background-color: currentColor;
  transition: transform 350ms ease;
}

header .wrapper .menu-button::before {
  transform: translateY(-0.25rem);
}

header .wrapper .menu-button::after {
  transform: translateY(0.25rem);
}

header:target .wrapper .menu-button::before {
  transform: rotate(45deg);
}

header:target .wrapper .menu-button::after {
  transform: rotate(-45deg);
}

header .wrapper nav,
footer .wrapper nav {
  margin-left: auto
}

header .wrapper menu,
footer .wrapper menu {
  list-style: none;
  display: flex;
  gap: 3rem;
  margin: 0;
  padding: 0;
}

header .wrapper menu a,
footer .wrapper a {
  text-decoration: none;
  font-weight: 400;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  word-spacing: -0.25em;
  line-height: 1;
}

header .wrapper li:last-child a {
  background-image: none;
  background-color: var(--text);
  color: var(--background);
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  font-weight: 700;
  transition: background-color 200ms ease;
}

header .wrapper li:last-child a:hover {
  background-color: var(--text-secondary);
}

header .wrapper li:last-child a:active {
  translate: 0 0.125rem;
}

footer {
  margin-top: auto;
  padding-block: 3rem;
}

footer .wrapper {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

footer .wrapper p {
  color: var(--text-secondary);
  margin: 0;
}

main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-block: 9rem;
}

main section {
  scroll-margin-top: 17rem;
  margin-top: 12rem;
  animation: appear 350ms cubic-bezier(0.33, 1, 0.68, 1) 100ms backwards;
}

main section > :last-child {
  margin-bottom: 0;
}

main section:first-child {
  margin-top: 0;
}

main .hero {
  animation: appear 350ms cubic-bezier(0.33, 1, 0.68, 1) 100ms backwards;
}

main .separator {
  margin-top: 10.5rem;
  animation: appear 350ms cubic-bezier(0.33, 1, 0.68, 1) 100ms backwards;
}

#heading + .submissions {
  border-top: 0.0625rem solid var(--elevation-1);
  margin-top: 8rem;
}

main .submissions {
  padding-block: 4rem;
  border-bottom: 0.0625rem solid var(--elevation-1);
  margin-top: 0;
}

main .submissions h2 {
  color: var(--text-secondary);
}

main .submissions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 2rem;
}

main .submissions.two-col ul {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--content-width) / 2 - 1rem), 1fr));
}

main :nth-child(2) {
  animation-delay: 200ms;
}

main :nth-child(2) {
  animation-delay: 300ms;
}

main :nth-child(3) {
  animation-delay: 400ms;
}

main :nth-child(4) {
  animation-delay: 500ms;
}

main :nth-child(5) {
  animation-delay: 600ms;
}

main :nth-child(6) {
  animation-delay: 700ms;
}

main :nth-child(7) {
  animation-delay: 800ms;
}

main .separator + section {
  margin-top: 10.5rem;
}

@keyframes appear {
  from {
    opacity: 0;
    translate: 0 2rem;
  }
}

#intro .h3 {
  font-weight: 400;
  margin-bottom: 0;
}

#work ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 2rem;
}

#work ul a {
  text-decoration: none;
  background-image: none;
  display: block;
}

#work ul a:hover img,
#work ul a:focus-visible img {
  scale: 1.5;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 60s;
}

#work ul a:hover figcaption,
#work ul a:focus-visible figcaption {
  translate: 0;
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

#work ul figure {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

#work figure img {
  transition: scale 5s ease;
}

#work figure figcaption {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  background-color: var(--black-50);
  padding: 0.5rem 1rem 0.5rem 2rem;
  border-radius: 2rem;
  color: var(--white);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  box-shadow: inset 0 0 0 0.0625rem rgba(254, 254, 254, 0.05);
  transition: translate 250ms cubic-bezier(0.32, 0, 0.67, 0);
  translate: 0 calc(100% + 1rem);
}

#work figcaption svg {
  width: 1.5rem;
  height: 1.5625rem;
  margin-left: auto;
}

#posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#posts li:not(:last-child) {
  margin-bottom: 4rem;
}

#posts a {
  display: flex;
  align-items: center;
  gap: 4rem;
  text-decoration: none;
  padding-right: 2rem;
}

#posts a img {
  aspect-ratio: 3 / 2;
  width: 16rem;
}

#posts a h2 {
  margin-bottom: 0;
}

#posts a p {
  color: var(--text-secondary);
  margin: 0;
  transition: color 200ms ease;
}

#posts a:hover p {
  transition-delay: 50ms;
  --text-secondary: var(--black-50);
}

#posts a svg {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
}

#contact .wrapper {
  display: flex;
  align-items: flex-end;
}

#contact .wrapper .left {
  margin-right: 6rem;
}

#contact .wrapper svg {
  width: 9.8125rem;
  height: 9.8125rem;
  margin-left: auto;
}

#heading, #body {
  padding-left: 6rem;
}

#heading h1 {
  margin-bottom: 1rem;
}

#heading p {
  color: var(--text-secondary);
}

#heading p.large {
  font-size: var(--font-size-h3);
}

#heading + .hero {
  margin-top: 8rem;
  max-width: 70rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#body {
  margin-top: 8rem;
}

#features {
  margin-top: 8rem;
}

#features h2 {
  padding-left: 6rem;
  margin-bottom: 4rem;
}

#features ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  gap: 2rem;
  list-style: none;
}

#features ul li {
  background-color: var(--elevation-1);
  padding: 2.5rem;
}

#features ul li > :last-child {
  margin-bottom: 0;
}

#projectPagination {
  display: flex;
  justify-content: space-between;
}

#projectPagination a {
  display: flex;
  align-items: center;
  text-decoration: none;
  background-image: none;
  line-height: 1;
}

#projectPagination a:not(:last-child):hover {
  color: var(--text-secondary);
}

#projectPagination a:last-child {
  background-image: none;
  background-color: var(--text);
  color: var(--background);
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  padding-right: 1rem;
  font-weight: 700;
  margin-left: 2rem;
  transition: background-color 200ms ease;
}

#projectPagination a:last-child:hover {
  background-color: var(--text-secondary);
}

#projectPagination a:first-child span {
  margin-left: 1.5rem;
}

#projectPagination a:last-child span {
  margin-right: 1.5rem;
}

#projectPagination svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

@media screen and (max-width: 73rem) {
  footer, header, main {
    padding-inline: 1.5rem;
  }
}

@media screen and (min-width: 40rem) and (max-width: 73rem) {
  @supports selector(::-webkit-scrollbar) {
    footer, header, main {
      padding-right: 0.5rem; /* The scrollbar is 1rem wide */
    }
  }
}