/* === Custom Properties === */
:root {
  --summit-night: #0E1017;
  --granite: #1C1E24;
  --slate: #2B2D33;
  --cloud: #353840;
  --ridge: #3F434C;
  --ridgeline: #4A4E57;
  --snow: #E8EAF0;
  --frost: #9BA1B0;
  --stone: #6B7080;
  --marker: #C84B31;
  --lichen: #5B8A72;
}

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--granite);
  color: var(--snow);
  font-family: 'Barlow', -apple-system, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  /* Rock texture */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 128px;
}

/* === Typography === */
.display-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.body-text {
  color: var(--frost);
  margin-bottom: 1rem;
  max-width: 40rem;
}

.body-text:last-child { margin-bottom: 0; }
.body-text.secondary { font-size: 1.25rem; }
.body-text.centered { text-align: center; margin: 0 auto 1rem; }

.dm-mono {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--stone);
  padding-left: 12px;
  border-left: 1px solid var(--stone);
  margin-bottom: 0.5rem;
}

.dm-mono.centered {
  text-align: center;
  border-left: none;
  padding-left: 0;
  margin-top: 1.5rem;
}

/* === Summit Bar === */
.summit-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: var(--summit-night);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 calc(80px + 24px);
  z-index: 100;
}

.wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--snow);
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.bar {
  height: 2px;
  background: var(--snow);
}

.bar-1 { width: 32px; }
.bar-2 { width: 24px; }
.bar-3 { width: 16px; }

/* === Spine === */
.spine {
  position: fixed;
  left: 0; top: 64px; bottom: 0;
  width: 80px;
  background: var(--slate);
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem 0;
}

.spine-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  transition: color 300ms ease;
  position: relative;
  padding-right: 8px;
}

.spine-label.active {
  color: var(--snow);
}

.spine-label.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--marker);
}

/* === Bands === */
.band {
  min-height: 100vh;
  padding: 100px 24px 60px calc(80px + 24px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.band-1 { background: var(--granite); }
.band-2 { background: var(--slate); }
.band-3 { background: var(--cloud); }
.band-4 { background: var(--ridge); }
.band-5 { background: var(--ridgeline); }

/* Divider lines */
.band + .band { border-top: 4px solid var(--ridgeline); }

/* === Grid === */
.band-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
}

.col-2-8 { grid-column: 2 / 9; }
.col-2-7 { grid-column: 2 / 8; }
.col-2-6 { grid-column: 2 / 7; }
.col-2-12 { grid-column: 2 / 13; }
.col-8-11 { grid-column: 8 / 12; }
.col-9-11 { grid-column: 9 / 12; }

/* === Bauhaus Triplet === */
.bauhaus-triplet {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}

.bh-circle {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--marker);
}

.bh-triangle {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid var(--lichen);
}

.bh-square {
  width: 12px; height: 12px;
  background: var(--stone);
}

.triplet-large .bh-circle { width: 24px; height: 24px; }
.triplet-large .bh-triangle { border-left-width: 12px; border-right-width: 12px; border-bottom-width: 24px; }
.triplet-large .bh-square { width: 24px; height: 24px; }

/* === Accent Border === */
.accent-border {
  border-left: 4px solid var(--marker);
  padding-left: 1.5rem;
}

/* === Mountain Dividers === */
.mountain-divider {
  width: 100%;
  height: 200px;
  display: block;
  margin-top: auto;
}

/* === Panorama === */
.panorama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.summit-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summit-heading { margin-bottom: 2rem; }

/* === Diagonal Lines === */
.diagonal-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 80px,
    rgba(74, 78, 87, 0.2) 80px,
    rgba(74, 78, 87, 0.2) 81px
  );
}

/* === Wind Lines === */
.wind-lines::after {
  content: '';
  position: absolute;
  right: -100px;
  top: 50%;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,112,128,0.15), transparent);
}

/* === Snow === */
.snow-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--snow);
  opacity: 0.2;
  animation: snowDrift var(--dur, 50s) linear infinite;
  animation-delay: var(--del, 0s);
}

@keyframes snowDrift {
  0% { transform: translate(0, -10px); opacity: 0; }
  5% { opacity: 0.2; }
  90% { opacity: 0.15; }
  100% { transform: translate(var(--dx, 30px), 100vh); opacity: 0; }
}

/* === Reveal === */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* === Shake Error === */
@keyframes shakeError {
  0% { transform: translateX(0); }
  15% { transform: translateX(4px); }
  30% { transform: translateX(-4px); }
  45% { transform: translateX(3px); }
  60% { transform: translateX(-3px); }
  75% { transform: translateX(1px); }
  90% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

[data-shake].shaking {
  animation: shakeError 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* === Responsive === */
@media (max-width: 768px) {
  .spine { display: none; }
  .summit-bar { padding-left: 24px; }
  .band { padding-left: 24px; }

  .band-grid {
    grid-template-columns: 1fr;
  }

  .col-2-8, .col-2-7, .col-2-6, .col-2-12,
  .col-8-11, .col-9-11 {
    grid-column: 1;
  }
}