/* ============================================================
   TRAVERSE PATH — base.css
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1.05;
  color: var(--color-text);
}

/* Utility */
.rule {
  height: 1px;
  background: var(--color-rule);
  margin: 0 var(--page-padding);
}

.label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Image placeholder box */
.img-box {
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-light);
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
}

@media (max-width: 768px) {
  body { font-size: 17px; }
  .rule { margin: 0 var(--page-padding-mob); }
}