/* ============================================================
   layout.css — grid, spacing, section framing, base utilities
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  position: relative;
  z-index: var(--z-content);
}

section {
  position: relative;
  padding-block: var(--space-9);
  scroll-margin-top: var(--space-6);
}

@media (max-width: 768px) {
  section { padding-block: var(--space-7); }
}

/* The 3D canvas sits behind everything as a fixed full-viewport layer. */
.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Type utilities
   --------------------------------------------------------------- */

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--white-muted);
}

.display-01 {
  font-family: var(--font-display);
  font-size: var(--type-display-01);
  font-weight: 200;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  font-stretch: 100%;
}

.display-02 {
  font-family: var(--font-display);
  font-size: var(--type-display-02);
  font-weight: 200;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-stretch: 100%;
}

.heading-01 {
  font-family: var(--font-display);
  font-size: var(--type-heading-01);
  font-weight: 300;
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------
   Section header — shared scaffold for every section
   --------------------------------------------------------------- */
.section-header {
  margin-bottom: var(--space-6);
}

.section-header__label {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--white-muted);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--type-display-02);
  font-weight: 200;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.section-header__sub {
  margin-top: var(--space-3);
  color: var(--white-muted);
  max-width: 56ch;
}

/* ---------------------------------------------------------------
   Meta list — used in About and Contact
   --------------------------------------------------------------- */
.meta-list { display: flex; flex-direction: column; }

.meta-list__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid rgba(154, 160, 172, 0.18);
  align-items: baseline;
}

.meta-list__row:last-child { border-bottom: 1px solid rgba(154, 160, 172, 0.18); }
.meta-list__row dt { color: var(--white-muted); }
.meta-list__row dd { color: var(--white-cool); font-size: var(--type-body); }
.meta-list__row dd a:hover { color: var(--white-cool); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------
   Link styles
   --------------------------------------------------------------- */
.link {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--white-cool);
  padding-block: var(--space-1);
  transition: color var(--dur-normal) var(--ease-out-quart);
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--white-cool);
  transition: width var(--dur-slow) var(--ease-out-expo);
}

.link:hover::after { width: 100%; }

.link--primary { padding-left: 18px; }
.link--primary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background-color: var(--white-cool);
  transition: transform var(--dur-normal) var(--ease-out-expo);
}
.link--primary:hover::before {
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(74, 237, 198, 0.6);
}

.link--secondary { color: var(--white-muted); }
.link--secondary::after { background-color: var(--white-muted); }
.link--secondary:hover { color: var(--white-cool); }
.link--secondary:hover::after { background-color: var(--white-cool); }