/* convert variable fonts online: https://dplugins.com/convert-variable-fonts-online/ */
@font-face {
  font-family: "Martian Mono";
  font-weight: 100 800;
  font-width: 75% 112.5%;
  font-display: swap;
  src: url("./assets/fonts/martian-mono/MartianMono-VariableFont_wdth_wght.woff2")
    format("woff2-variations");
}

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  src:
    local("Inter"),
    url("./assets/fonts/inter/Inter-VariableFont_opsz_wght.woff2")
      format("woff2-variations");
}

:root {
  --neutral-900: #062630;
  --neutral-700: #385159;
  --neutral-200: #e6e1df;
  --neutral-100: #faf5f3;
  --neutral-0: #ffffff;
  --light-salmon-500: #fea36f;
  --light-salmon-100: #ffe2d1;
  --light-salmon-50: #fff5ef;

  --text-gradient: linear-gradient(107deg, #ff9a60 -11.37%, #062630 61.84%);
  --gradient: linear-gradient(90deg, #ffe2d1 0%, #fff5ef 100%);
  --gradient-alt: linear-gradient(90deg, #385159 0%, #062630 100%);
  --box-shadow-color: #dfedf3;

  --font-size-xxs: 0.875rem; /* 14px */
  --font-size-xs: 1rem; /* 16px */
  --font-size-s: 1.25rem; /* 20px */
  --font-size-m: 1.5rem; /* 24px */
  --font-size-l: 1.5rem; /* 24px */
  --font-size-xl: 2.125rem; /* 34px */
  --font-size-xxl: 2.375rem; /* 38px */

  --spacing-025: 0.125rem; /* 2px */
  --spacing-050: 0.25rem; /* 4px */
  --spacing-075: 0.375rem; /* 6px */
  --spacing-100: 0.5rem; /* 8px */
  --spacing-150: 0.75rem; /* 12px */
  --spacing-175: 0.875rem; /* 14px */
  --spacing-200: 1rem; /* 16px */
  --spacing-250: 1.25rem; /* 20px */
  --spacing-300: 1.5rem; /* 24px */
  --spacing-400: 2rem; /* 32px */
  --spacing-500: 2.5rem; /* 40px */
  --spacing-600: 3rem; /* 48px */
  --spacing-800: 4rem; /* 64px */
  --spacing-1000: 5rem; /* 80px */
  --spacing-1500: 7.5rem; /* 120px */

  --radius-4: 0.25rem; /* 4px */
  --radius-6: 0.375rem; /* 6px */
  --radius-8: 0.5rem; /* 8px */
  --radius-10: 0.625rem; /* 10px */
  --radius-12: 0.75rem; /* 12px */
  --radius-16: 1rem; /* 16px */
  --radius-20: 1.25rem; /* 20px */
}

/* BASELINE STYLES */
/*
  Based on Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  background-color: var(--neutral-0);
  color: var(--neutral-700);
  font-family: "Inter", sans-serif;
  font-size: var(--font-size-s);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

header,
main,
footer {
  max-width: 78rem;
  padding: 0 var(--spacing-200);
}

main {
  display: grid;
  gap: var(--spacing-800);
}

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

p,
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  color: var(--neutral-900);
  font-family: "Martian Mono", monospace;
  /* text-wrap: balance; */
  margin-bottom: var(--spacing-300);
}

h1 {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -2px;
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -2px;
}

h3 {
  font-size: var(--font-size-m);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

em {
  font-weight: 600;
  font-style: normal;
}

/* UTILITIES */
.icon {
  height: 1.5rem; /* 24px */
  aspect-ratio: 1;
}

.image {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

/* See https://www.a11y-collective.com/blog/visually-hidden/ */
.sr-only {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* COMPONENTS */
.btn {
  --btn-color: var(--neutral-900);
  --btn-background-color: var(--light-salmon-50);
  --btn-background-hover: var(--gradient);
  --btn-outline: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-200);
  font-family: "Martian Mono", monospace;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-color);
  background-color: var(--btn-background-color);
  border: var(--spacing-025) solid var(--btn-color);
  border-radius: var(--radius-8);
  padding: var(--spacing-250) var(--spacing-250);
  max-width: 23.75rem; /* 380px */
}

.btn:hover,
.btn:focus {
  background: var(--btn-background-hover);
}

.btn:focus {
  outline: var(--spacing-025) solid var(--btn-outline);
  outline-offset: var(--spacing-050);
}

.btn--alt {
  --btn-color: var(--neutral-0);
  --btn-background-color: transparent;
  --btn-background-hover: var(--gradient-alt);
  --btn-outline: var(--neutral-0);
}

.five-stars {
  display: flex;
}

.rating {
  display: flex;
  gap: var(--spacing-150);
  align-items: center;
  font-family: "Martian Mono", monospace;
  font-size: var(--font-size-xxs);
  line-height: 1.2;
  letter-spacing: -1px;
}

.rating__avatars img {
  height: 2.5rem;
  max-width: none; /* prevents the image from shrinking */
}

/* See https://web.dev/articles/creative-list-styling */
.checklist {
  --checklist-gap: var(--spacing-175);
  --checklist-marker: 1.75rem;
  --checklist-margin: var(--spacing-200);
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--checklist-gap);
}

.checklist__item::before {
  content: url(./assets/images/icon-check.svg);
  width: var(--checklist-marker);
  height: var(--checklist-marker);
}

.checklist__item + .checklist__item {
  margin-top: var(--checklist-margin);
}

.checklist--small {
  --checklist-gap: var(--spacing-150);
  --checklist-marker: 1.5rem;
}

/* HEADER */
.header {
  width: 100%;
  padding-top: var(--spacing-300);
}

.header__logo {
  height: 2.25rem;
}

/* HERO SECTION */
.hero {
  display: grid;
  align-items: center;
  gap: var(--spacing-800);
  padding-top: var(--spacing-600);
  padding-bottom: var(--spacing-1000);
  position: relative;
}

.hero::before {
  content: "";
  background-color: var(--neutral-100);
  background-image: url(./assets/images/pattern-light-bg.svg);
  width: 100vw;
  position: absolute;
  top: calc(-2.25rem - var(--spacing-300));
  bottom: 0;
  /* See: https://css-tricks.com/full-bleed/ */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -2;
}

.hero__heading {
  /* See: https://fossheim.io/writing/posts/css-text-gradient/ */
  background-image: var(--text-gradient);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
}

.hero__text {
  max-width: 70ch;
  margin-bottom: var(--spacing-400);
}

.hero__btn {
  margin-bottom: var(--spacing-250);
}

.hero__image {
  border-radius: var(--radius-6);
  overflow: hidden;
  box-shadow: -2.54px 2.54px var(--box-shadow-color);
}

.hero__image img {
  aspect-ratio: auto;
}

/* READ TOGETHER & NOT AVERAGE SECTIONS */
.read-together,
.not-average {
  display: grid;
  align-items: center;
  gap: var(--spacing-500);
}

.read-together__image,
.not-average__image {
  border-radius: var(--radius-12);
  overflow: hidden;
  aspect-ratio: 1;
}

.not-average__text {
  max-width: 70ch;
}

.circle {
  position: relative;
}

.circle::after {
  content: "";
  background-image: url(./assets/images/pattern-circle.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(var(--spacing-025) * -1);
  bottom: calc(var(--spacing-025) * -1);
  left: calc(var(--spacing-150) * -1);
  right: calc(var(--spacing-200) * -1);
}

/* JOURNEY SECTION */
.journey {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  background:
    no-repeat url(./assets/images/pattern-glow.svg) bottom -542px right -542px,
    url(./assets/images/pattern-light-bg.svg) var(--neutral-100);
  border-radius: var(--radius-12);
  padding: var(--spacing-800) var(--spacing-200);
}

.journey__heading {
  max-width: 32rem;
  margin: 0;
}

.numbered-list {
  display: grid;
  gap: var(--spacing-400);
  font-family: "Martian Mono", monospace;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -1px;
}

.numbered-list__item::before {
  content: counter(list-item);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--neutral-900);
  border-radius: var(--radius-4);
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--spacing-200);
}

/* SECTION: READY */
.ready {
  background-color: var(--neutral-900);
  color: var(--neutral-0);
}

/* TABLET VIEW */
@media (width >= 40rem) {
  :root {
    --font-size-xs: 1.125rem; /* 18px */
    --font-size-l: 2.125rem; /* 34px */
    --font-size-xl: 3.125rem; /* 50px */
    --font-size-xxl: 3.875rem; /* 62px */
  }
  /* TABLET: BASELINE STYLES */
  header,
  main,
  footer {
    padding: 0 var(--spacing-400);
  }

  main {
    gap: var(--spacing-1000);
  }

  /* TABLET: COMPONENTS */
  .checklist {
    --checklist-margin: var(--spacing-300);
  }

  .checklist--small {
    --checklist-margin: var(--spacing-200);
  }

  /* TABLET: HEADER */
  .header {
    padding-top: var(--spacing-400);
  }

  /* TABLET: HERO SECTION */
  .hero {
    padding-top: var(--spacing-800);
  }

  .hero::before {
    top: calc(-2.25rem - var(--spacing-400));
  }

  .hero::after {
    content: "";
    background-image: url(./assets/images/pattern-glow.svg);
    background-position: bottom -542px right -542px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    z-index: -1;
  }

  .hero__image {
    border-radius: var(--radius-10);
    box-shadow: -5.21px 5.21px var(--box-shadow-color);
  }

  /* TABLET: READ TOGETHER & NOT AVERAGE SECTIONS */
  .read-together__image,
  .not-average__image {
    border-radius: var(--radius-20);
  }

  .read-together__heading {
    margin-bottom: var(--spacing-400);
  }

  .not-average {
    position: relative;
  }

  .not-average::after {
    content: "";
    background-image: url(./assets/images/logos-tech.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    height: 9rem;
    aspect-ratio: 0.87;
    right: var(--spacing-400);
    bottom: var(--spacing-400);
  }

  /* TABLET: JOURNEY SECTION */
  .journey {
    gap: var(--spacing-600);
    padding: var(--spacing-1000) var(--spacing-400);
  }

  .numbered-list {
    gap: var(--spacing-500);
  }

  .numbered-list__item::before {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--spacing-400);
  }
}

/* DESKTOP VIEW */
@media (width >= 64rem) {
  /* DESKTOP: BASELINE STYLES */
  main {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-1500) var(--spacing-1000);
  }

  /* DESKTOP: HERO SECTION */
  .hero {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
    gap: inherit;
    padding-top: var(--spacing-1000);
  }

  .hero__image {
    border-radius: var(--radius-8);
    box-shadow: -4px 4px var(--box-shadow-color);
  }

  /* DESKTOP: READ TOGETHER & NOT AVERAGE SECTIONS */
  .read-together,
  .not-average {
    grid-column: span 2;
    grid-template-columns: subgrid;
    gap: inherit;
  }

  .read-together__image,
  .not-average__image {
    border-radius: var(--radius-16);
  }

  .read-together__image {
    grid-row: 1;
    grid-column: 1;
  }

  .not-average::after {
    left: 46.5%;
  }

  /* DESKTOP: JOURNEY SECTION */
  .journey {
    grid-column: span 2;
    align-items: center;
    gap: var(--spacing-800);
    padding: var(--spacing-1000) var(--spacing-800);
  }

  .journey__heading {
    text-align: center;
  }

  .numbered-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-400);
  }

  .numbered-list__item {
    position: relative;
  }

  .numbered-list__item:not(:last-child)::after {
    content: url(./assets/images/pattern-arrow.svg);
    position: absolute;
    right: 0;
    top: 0;
  }
}