/* ============================================================
   Base Reset & Global Styles
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-size: 16px;
  scrollbar-width: none; /* Firefox — hide the scrollbar track, scrolling itself stays enabled */
  -ms-overflow-style: none; /* legacy Edge */
}

body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  animation: page-fade-in 150ms ease forwards;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}

body.is-leaving {
  animation: page-fade-out 125ms ease forwards;
  pointer-events: none;
}

/* Hide the scrollbar track on every viewport size — scrolling (wheel, touchpad,
   touch, keyboard) stays fully enabled, only the visible scrollbar is removed.
   Also prevents it from flashing on during full-page navigations (e.g.
   between Project Detail pages), since it now never renders in the first
   place instead of toggling on/off around the transition. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, WebKit */
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

input,
textarea {
  background: transparent;
}

/* Webkit Autofill Fix */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  -webkit-text-fill-color: inherit;
  transition: background-color 9999s ease-in-out;
}

main {
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main > section {
  width: 100%;
}

h1,
h2,
h3 {
  color: var(--color-text-dark);
}

/* ============================================================
   Typography Utilities
   ============================================================ */

.text-bold-18 {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.125rem; /* 18px */
  line-height: 1.2; /* 120% */
  letter-spacing: 0;
  text-align: justify;
}