:root {
  --bg: #eae9e5;
  --text: #091312;
  --muted: rgba(9, 19, 18, 0.70);

  --accent: #687c4b;

  --line: rgba(9, 19, 18, 0.16);

  --button-bg: rgba(9, 19, 18, 0.03);
  --button-bg-hover: rgba(104, 124, 75, 0.07);

  --page-padding: clamp(24px, 4vw, 72px);
  --text-width: 720px;
  --text-size: clamp(22px, 1.45vw, 31px);
  --text-line-height: 1.72;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family:
    "General Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* SUBTLE GRAIN */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 9999;

  opacity: 0.02;

  background-image:
    radial-gradient(
      rgba(9, 19, 18, 0.14) 0.5px,
      transparent 0.5px
    );

  background-size: 4px 4px;
}

main {
  width: 100%;
}

/* HERO */

.hero {
  position: relative;

  min-height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-inline: var(--page-padding);

  text-align: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  animation: fadeIn 1s ease both;
}

h1 {
  margin: 0;

  white-space: nowrap;

  font-size: clamp(68px, 5.7vw, 136px);

  line-height: 0.95;

  letter-spacing: -0.055em;

  font-weight: 520;
}

.hero-about-link {
  margin-top: clamp(20px, 2vw, 30px);

  color: rgba(9, 19, 18, 0.54);

  font-size: clamp(13px, 0.68vw, 16px);

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 430;

  text-decoration: none;

  transition:
    color 0.24s ease,
    opacity 0.24s ease,
    transform 0.24s ease;
}

.hero-about-link:hover {
  color: var(--text);

  transform: translateY(-1px);
}

/* HERO INDICATOR */

.hero::after {
  content: "DÁL";

  position: absolute;

  left: 50%;
  bottom: 54px;

  transform: translateX(-50%);

  color: rgba(9, 19, 18, 0.50);

  font-size: 12px;

  line-height: 1;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-weight: 430;
}

.hero::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 18px;

  transform: translateX(-50%);

  width: 1px;

  height: 24px;

  background: rgba(9, 19, 18, 0.36);
}

/* TEXT SECTIONS */

.text-section {
  min-height: 88dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-inline: var(--page-padding);
}

.text-section p {
  width: min(100%, var(--text-width));

  margin: 0;

  color: var(--muted);

  text-align: center;

  font-size: var(--text-size);

  line-height: var(--text-line-height);

  letter-spacing: -0.028em;

  font-weight: 400;
}

/* FINAL SECTION */

.final {
  min-height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-inline: var(--page-padding);
}

nav {
  width: min(100%, 420px);

  display: flex;
  flex-direction: column;

  align-items: stretch;

  gap: 9px;
}

nav a {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 48px;

  color: rgba(9, 19, 18, 0.76);

  background: rgba(9, 19, 18, 0.018);

  border: 1px solid rgba(9, 19, 18, 0.11);

  border-radius: 999px;

  text-decoration: none;

  text-align: center;

  font-size: 19px;

  line-height: 1;

  letter-spacing: -0.025em;

  font-weight: 430;

  transition:
    color 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    transform 0.24s ease;
}

nav a:hover {
  color: var(--text);

  border-color: rgba(104, 124, 75, 0.34);

  background: rgba(104, 124, 75, 0.045);

  transform: translateY(-1px);
}

/* ABOUT PAGE */

.page-about .text-section {
  min-height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: 0;
  padding-bottom: 0;
}

.page-about .text-section p {
  width: min(100%, 680px);

  margin: 0 auto;

  text-align: center;
}

/* FLOATING HOME LINK */

.floating-home-link {
  position: fixed;

  top: clamp(20px, 3vw, 34px);
  left: clamp(20px, 3vw, 34px);

  z-index: 20;

  color: rgba(9, 19, 18, 0.48);

  font-size: 13px;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 430;

  text-decoration: none;

  padding: 10px 12px;

  border-radius: 999px;

  background: rgba(234, 233, 229, 0.72);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    color 0.24s ease,
    background 0.24s ease,
    transform 0.24s ease;
}

.floating-home-link:hover {
  color: var(--text);

  background: rgba(234, 233, 229, 0.92);

  transform: translateX(-1px);
}

/* STANDARD DESKTOP / 16:9 */

@media (min-width: 901px) and (max-width: 1399px) {

  :root {
    --text-width: 680px;
    --text-size: clamp(22px, 1.55vw, 30px);
    --text-line-height: 1.68;
  }

  h1 {
    font-size: clamp(72px, 6.2vw, 128px);
  }

  .hero-about-link {
    font-size: 14px;
  }

  nav {
    width: min(100%, 390px);
  }

  nav a {
    min-height: 48px;

    font-size: 19px;
  }
}

/* MACBOOKS / NOTEBOOKS / 16:10 RETINA */

@media
  (min-width: 1100px)
  and (max-width: 1728px)
  and (-webkit-min-device-pixel-ratio: 2) {

  :root {
    --text-width: 700px;
    --text-size: clamp(23px, 1.58vw, 32px);
    --text-line-height: 1.68;
  }

  h1 {
    font-size: clamp(80px, 6.5vw, 140px);
  }

  .hero-about-link {
    margin-top: 28px;

    font-size: 14px;
  }

  .hero::after {
    font-size: 13px;

    bottom: 58px;
  }

  .hero::before {
    bottom: 20px;

    height: 26px;
  }

  nav {
    width: min(100%, 420px);
  }

  nav a {
    min-height: 50px;

    font-size: 20px;
  }
}

/* LARGE DESKTOP / 21:9 / ULTRAWIDE */

@media (min-width: 1800px) {

  :root {
    --page-padding: clamp(40px, 4vw, 90px);
    --text-width: 660px;
    --text-size: clamp(24px, 1.12vw, 30px);
    --text-line-height: 1.82;
  }

  h1 {
    font-size: clamp(102px, 4.6vw, 142px);
  }

  .hero-about-link {
    margin-top: 26px;

    font-size: 13px;
  }

  .hero::after {
    font-size: 12px;

    bottom: 48px;
  }

  .hero::before {
    bottom: 16px;

    height: 22px;
  }

  nav {
    width: 380px;
  }

  nav a {
    min-height: 46px;

    font-size: 18px;
  }
}

/* EXTRA WIDE DESKTOP */

@media (min-width: 2400px) {

  :root {
    --text-width: 620px;
    --text-size: clamp(24px, 0.95vw, 29px);
    --text-line-height: 1.86;
  }

  h1 {
    font-size: clamp(112px, 4.2vw, 150px);
  }

  .hero-about-link {
    font-size: 13px;
  }

  nav {
    width: 360px;
  }

  nav a {
    min-height: 44px;

    font-size: 17px;
  }
}

/* TABLET */

@media (max-width: 900px) {

  :root {
    --page-padding: 26px;
    --text-width: 100%;
    --text-size: clamp(20px, 5.2vw, 27px);
    --text-line-height: 1.5;
  }

  .hero,
  .text-section,
  .final {
    padding-inline: var(--page-padding);
  }

  .hero {
    min-height: 92dvh;
  }

  h1 {
    white-space: normal;

    font-size: clamp(60px, 15vw, 90px);

    line-height: 0.92;

    letter-spacing: -0.06em;

    text-wrap: balance;
  }

  .hero-about-link {
    margin-top: 22px;

    font-size: 13px;

    letter-spacing: 0.09em;
  }

  .hero::after {
    bottom: 56px;

    font-size: 13px;

    letter-spacing: 0.16em;
  }

  .hero::before {
    bottom: 18px;

    height: 24px;
  }

  .text-section {
    min-height: 72dvh;
  }

  .text-section p {
    width: 100%;

    text-wrap: pretty;
  }

  .page-about .text-section {
    min-height: 100dvh;
  }

  .final {
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: 0;
    padding-bottom: 0;
  }

  nav {
    width: 100%;

    max-width: 340px;

    gap: 9px;

    margin-top: -8dvh;
  }

  nav a {
    min-height: 48px;

    font-size: clamp(18px, 4.6vw, 22px);

    border-radius: 999px;
  }

  .floating-home-link {
    top: 22px;
    left: 22px;

    font-size: 12px;

    padding: 9px 10px;
  }
}

/* SMALL MOBILE */

@media (max-width: 430px) {

  :root {
    --page-padding: 22px;
    --text-size: clamp(19px, 5.7vw, 25px);
    --text-line-height: 1.46;
  }

  .hero,
  .text-section,
  .final {
    padding-inline: var(--page-padding);
  }

  h1 {
    font-size: clamp(52px, 14.6vw, 72px);

    line-height: 0.9;
  }

  .hero-about-link {
    margin-top: 20px;

    font-size: 12px;
  }

  .hero::after {
    bottom: 50px;

    font-size: 12px;
  }

  .hero::before {
    bottom: 16px;

    height: 22px;
  }

  .text-section {
    min-height: 72dvh;
  }

  .page-about .text-section {
    min-height: 100dvh;
  }

  .final {
    min-height: 100dvh;
  }

  nav {
    max-width: 300px;

    margin-top: -10dvh;
  }

  nav a {
    min-height: 46px;

    font-size: 19px;
  }

  .floating-home-link {
    top: 18px;
    left: 18px;

    font-size: 11px;

    padding: 8px 9px;
  }
}

/* VERY SMALL MOBILE */

@media (max-width: 360px) {

  :root {
    --page-padding: 18px;
    --text-size: 19px;
    --text-line-height: 1.44;
  }

  h1 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .hero-about-link {
    font-size: 11px;
  }

  nav {
    max-width: 280px;
  }

  nav a {
    min-height: 44px;

    font-size: 18px;
  }
}

/* LANDSCAPE MOBILE / SHORT HEIGHT */

@media (max-height: 620px) and (min-width: 700px) {

  .hero {
    min-height: 100dvh;
  }

  h1 {
    font-size: clamp(56px, 8vw, 96px);
  }

  .hero-about-link {
    margin-top: 18px;

    font-size: 12px;
  }

  .hero::after,
  .hero::before {
    display: none;
  }

  .text-section {
    min-height: 100dvh;
  }

  .text-section p {
    font-size: clamp(20px, 2.5vw, 28px);

    line-height: 1.45;
  }

  .page-about .text-section {
    min-height: 100dvh;
  }

  .final {
    min-height: 100dvh;
  }
}

/* ANIMATION */

@keyframes fadeIn {

  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}