/* Page scaffolding: grain overlay, colour panels, diagonal seams, section rhythm. */

/* Film-grain overlay across the whole viewport. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- panels ---------- */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.panel--ink { background: var(--ink); color: var(--paper); }
.panel--paper { background: var(--paper); color: var(--ink); }
.panel--tan { background: var(--tan); color: var(--ink); }
.panel--navy { background: var(--navy); color: var(--paper); }
.panel--sky { background: var(--sky); color: var(--ink); }
.panel--coral { background: var(--coral); color: var(--ink); }
.panel--yellow { background: var(--yellow); color: var(--ink); }

/* Angled seam between panels; padding compensates for the clipped area. */
.diagonal {
  margin-top: -8vw;
  clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
}
.section.diagonal { padding-top: calc(5.5rem + 8vw); }
footer.diagonal { padding-top: calc(3.5rem + 8vw); }

/* ---------- section rhythm ---------- */
.section { padding: 5.5rem 0; }
/* A following diagonal overlaps upwards by 8vw; reserve that space. */
.section:has(+ .diagonal) { padding-bottom: calc(5.5rem + 8vw); }
.section-head { margin-bottom: 2.5rem; }
.section-head .eyebrow { display: block; margin-bottom: 0.6rem; }
.section-head h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; }
.section-head p { margin-top: 0.7rem; font-size: 1.05rem; font-weight: 500; max-width: 42ch; }

/* ---------- multi-pitch rope line (scroll progress) ---------- */
.pitch-line {
  position: fixed;
  left: 16px;
  top: 96px;
  bottom: 28px;
  width: 3px;
  z-index: 45;
  pointer-events: none;
}
.pitch-line::before {
  content: '';
  position: absolute;
  inset: 0;
  border-left: 3px dashed rgba(22, 25, 27, 0.3);
}
.pitch-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0%;
  border-left: 3px solid var(--coral-deep);
}
.pitch-dot {
  position: absolute;
  left: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper-strong);
  border: 3px solid var(--ink);
  transform: translateY(-50%);
  transition: background 0.2s ease;
}
.pitch-dot.is-passed { background: var(--yellow); }

@media (max-width: 760px) {
  .pitch-line { display: none; }
}

@media (max-width: 600px) {
  .diagonal {
    margin-top: -10vw;
    clip-path: polygon(0 10vw, 100% 0, 100% 100%, 0 100%);
  }
  .section { padding: 3.5rem 0; }
  .section:has(+ .diagonal) { padding-bottom: calc(3.5rem + 10vw); }
  .section.diagonal { padding-top: calc(3.5rem + 10vw); }
  footer.diagonal { padding-top: calc(3rem + 10vw); }
}