.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: #fbf9f4;
  color: #18241a;
}

header.fixed {
  border-bottom: 1px solid rgba(24, 36, 26, 0.08);
}

header.fixed nav {
  min-height: 84px;
}

header.fixed nav a {
  text-decoration: none;
}

header.fixed .md\:hidden a {
  border: 1px solid rgba(24, 36, 26, 0.16);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  line-height: 1;
}

header.fixed .md\:hidden a[href='index.html'] {
  border-color: rgba(24, 36, 26, 0.35);
}

.font-noto-serif {
  font-family: 'Noto Serif', serif;
}

.font-manrope {
  font-family: 'Manrope', sans-serif;
}

[data-live-progress] {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 70;
  background: linear-gradient(90deg, #18241a, #3d4a3e);
  box-shadow: 0 8px 18px rgba(24, 36, 26, 0.25);
  transition: width 0.15s linear;
}

body.js-motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

body.js-motion-ready .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.live-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.live-tilt.is-hovered {
  box-shadow: 0 20px 40px rgba(112, 90, 73, 0.12);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #fbf9f4;
}

::-webkit-scrollbar-thumb {
  background: #18241a;
}

@media (prefers-reduced-motion: reduce) {
  body.js-motion-ready .reveal-item,
  body.js-motion-ready .reveal-item.is-visible,
  .live-tilt {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  header.fixed {
    background: rgba(251, 249, 244, 0.92) !important;
    backdrop-filter: blur(14px);
  }

  header.fixed nav {
    min-height: auto;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    gap: 0.6rem !important;
  }

  header.fixed nav > div:first-child {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  header.fixed nav > div:first-child > a {
    font-size: 1.85rem !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap;
  }

  header.fixed .hidden.md\:flex {
    display: none !important;
  }

  header.fixed .md\:hidden {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(24, 36, 26, 0.1);
  }

  header.fixed .md\:hidden::-webkit-scrollbar {
    height: 0;
    width: 0;
  }

  header.fixed .md\:hidden a {
    white-space: nowrap;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
  }

  [class~='px-12'] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  [class~='py-6'] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  [class~='text-6xl'] {
    font-size: 2.25rem !important;
    line-height: 1.08 !important;
  }

  [class~='text-5xl'] {
    font-size: 1.875rem !important;
    line-height: 1.12 !important;
  }

  [class~='text-4xl'] {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  [class*='hidden md:flex'] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  [class~='pt-32'] {
    padding-top: 7rem !important;
  }

  [class~='gap-24'] {
    gap: 1.75rem !important;
  }

  [class~='gap-16'] {
    gap: 1.25rem !important;
  }

  [class~='gap-12'] {
    gap: 1rem !important;
  }

  [class*='h-[819px]'] {
    height: 60vh !important;
  }

  [class*='tracking-[0.2em]'] {
    letter-spacing: 0.12em !important;
  }
}