:root {
  --bg-primary: #F2EDE4;
  --bg-accent: #7A7D5E;
  --text-primary: #2B2926;
  --text-secondary: #8A8479;
  --accent: #C4A38A;
  --collage-overlay: #A3A88E;
  --highlight: #D4C9A8;
  --dark-ground: #3D3632;
  --ease-focus: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* compliance tokens from design: #000 Interactive | Dusty Intersection Observer container with `threshold: 0.3` trigger. Each element animates only once (add `data-revealed` flag (Google */

@keyframes focus-breathe {
  from { opacity: 0.98; }
  to { opacity: 1; }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Karla", sans-serif;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(196, 163, 138, 0.18), transparent 28vw),
    linear-gradient(180deg, var(--bg-primary), #ede5d7 48%, var(--bg-primary));
}

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 2px;
  height: 0;
  background: var(--accent);
}

.zine-scroll {
  position: relative;
}

.panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.micro-label {
  margin: 0;
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}

.panel-hero {
  background: var(--bg-primary);
  isolation: isolate;
}

.diagonal-slice {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.slice-cream {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
  background: var(--bg-primary);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.slice-cream::after {
  content: "";
  position: absolute;
  left: -10vw;
  top: 49%;
  width: 130vw;
  height: 2px;
  background: rgba(196, 163, 138, 0.4);
  transform: rotate(-32deg);
  transform-origin: center;
}

.slice-dark {
  z-index: 1;
  background: var(--dark-ground);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.hero-label {
  position: absolute;
  top: clamp(1.5rem, 4vw, 4rem);
  left: clamp(1.5rem, 4vw, 4rem);
}

.wordmark {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(7rem, 30vw, 24rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.78;
  color: var(--text-primary);
  text-transform: uppercase;
}

.collage-cluster {
  position: absolute;
  right: clamp(2rem, 8vw, 8rem);
  bottom: clamp(2rem, 7vw, 7rem);
  width: min(48vw, 660px);
  height: min(50vh, 520px);
}

.fragment,
.grid-cell.image-cell {
  position: absolute;
  filter: grayscale(40%) contrast(0.9);
  transition: filter 600ms ease-out, transform 800ms var(--ease-focus), opacity 800ms var(--ease-focus);
}

.hover-color:hover,
.hover-color.mobile-color {
  filter: grayscale(0%) contrast(1);
}

.fragment::before,
.grid-cell.image-cell::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-top: 2px solid rgba(122, 125, 94, 0.78);
  border-left: 2px solid rgba(122, 125, 94, 0.78);
  pointer-events: none;
}

.fragment::after,
.grid-cell.image-cell::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(122, 125, 94, 0.78);
  border-bottom: 2px solid rgba(122, 125, 94, 0.78);
}

.texture-concrete {
  background:
    radial-gradient(circle at 72% 28%, rgba(61, 54, 50, 0.24), transparent 28%),
    repeating-linear-gradient(90deg, #D4C9A8 0 1px, #F2EDE4 1px 3px, #C4A38A 3px 4px),
    linear-gradient(135deg, #F2EDE4, #D4C9A8);
}

.texture-paper {
  background:
    radial-gradient(circle at 30% 70%, rgba(122, 125, 94, 0.34), transparent 32%),
    repeating-linear-gradient(0deg, rgba(43, 41, 38, 0.08) 0 1px, transparent 1px 8px),
    linear-gradient(125deg, #F2EDE4, #D4C9A8 54%, #A3A88E);
}

.texture-sage {
  background:
    conic-gradient(from 20deg at 58% 42%, #A3A88E, #D4C9A8, #7A7D5E, #A3A88E),
    repeating-linear-gradient(45deg, rgba(242, 237, 228, 0.26) 0 2px, transparent 2px 7px);
}

.texture-rose {
  background:
    radial-gradient(circle at 22% 20%, rgba(242, 237, 228, 0.65), transparent 20%),
    linear-gradient(145deg, #C4A38A, #D4C9A8 48%, #8A8479);
}

.texture-gold {
  background:
    repeating-linear-gradient(135deg, rgba(61, 54, 50, 0.15) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, #D4C9A8, #F2EDE4 44%, #C4A38A);
}

.texture-umber {
  background:
    radial-gradient(circle at 80% 18%, rgba(212, 201, 168, 0.28), transparent 24%),
    linear-gradient(120deg, #3D3632, #2B2926 52%, #8A8479);
}

.crop-a { width: 42%; height: 48%; left: 2%; top: 12%; clip-path: polygon(5% 0, 100% 4%, 94% 100%, 0 92%); }
.crop-b { width: 30%; height: 70%; left: 39%; top: 0; clip-path: polygon(0 5%, 92% 0, 100% 96%, 8% 100%); }
.crop-c { width: 34%; height: 38%; right: 0; top: 22%; clip-path: polygon(6% 3%, 100% 0, 93% 88%, 0 100%); }
.crop-d { width: 38%; height: 34%; left: 13%; bottom: 0; clip-path: polygon(0 0, 96% 8%, 100% 100%, 8% 93%); }
.crop-e { width: 43%; height: 30%; right: 7%; bottom: 7%; clip-path: polygon(3% 8%, 100% 0, 96% 100%, 0 88%); }

.outline-mark {
  position: absolute;
  width: 60px;
  height: 90px;
  border: 1px solid rgba(138, 132, 121, 0.3);
}

.mark-one {
  right: 30vw;
  bottom: 20vh;
}

.panel-grid {
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 6rem);
  background: var(--bg-primary);
}

.section-rule {
  position: absolute;
  left: 5vw;
  top: 12vh;
  width: 36vw;
  height: 2px;
  background: rgba(196, 163, 138, 0.4);
  transform: rotate(-15deg);
}

.grid-label {
  position: absolute;
  top: clamp(1.5rem, 4vw, 4rem);
  right: clamp(1.5rem, 5vw, 5rem);
}

.pulse-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.grid-cell {
  position: relative;
  min-height: clamp(130px, 20vh, 220px);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 500ms var(--ease-focus), transform 500ms var(--ease-focus), filter 600ms ease-out;
}

.grid-cell.revealed {
  opacity: 1;
  transform: scale(1);
}

.text-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem;
  color: var(--text-primary);
}

.text-cell span {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3rem, 7vw, 6.6rem);
  letter-spacing: 0.04em;
  line-height: 0.85;
  text-transform: uppercase;
}

.text-cell small {
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.empty-cell {
  background: transparent;
}

.grid-cell.image-cell {
  position: relative;
  clip-path: polygon(3% 1%, 100% 0, 95% 100%, 0 94%);
}

.panel-band {
  display: grid;
  grid-template-rows: 30vh 40vh 30vh;
  background: var(--bg-primary);
}

.band-space {
  background:
    linear-gradient(90deg, transparent 0 78%, rgba(196, 163, 138, 0.16) 78% 78.3%, transparent 78.3%),
    var(--bg-primary);
  will-change: transform;
}

.statement-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg-accent);
  color: var(--bg-primary);
  opacity: 0;
  transform: scale(0.85);
  filter: blur(2px);
  transition: opacity 800ms var(--ease-focus), transform 800ms var(--ease-focus), filter 800ms var(--ease-focus);
}

.statement-band.revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.statement-band h2 {
  margin: 0.05em 0 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
}

.panel-drift {
  background:
    radial-gradient(circle at 84% 30%, rgba(163, 168, 142, 0.20), transparent 22vw),
    var(--bg-primary);
}

.drift-label {
  position: absolute;
  left: clamp(1.5rem, 5vw, 5rem);
  top: clamp(1.5rem, 6vw, 6rem);
}

.drift-fragment {
  will-change: transform;
}

.drift-one { left: 9vw; top: 23vh; width: 22vw; height: 32vh; clip-path: polygon(4% 0, 100% 7%, 95% 100%, 0 93%); }
.drift-two { right: 12vw; top: 13vh; width: 18vw; height: 23vh; clip-path: polygon(0 6%, 94% 0, 100% 93%, 7% 100%); }
.drift-three { left: 40vw; top: 30vh; width: 24vw; height: 42vh; clip-path: polygon(7% 0, 100% 3%, 91% 100%, 0 96%); }
.drift-four { left: 18vw; bottom: 8vh; width: 27vw; height: 21vh; clip-path: polygon(0 0, 100% 9%, 96% 92%, 5% 100%); }
.drift-five { right: 8vw; bottom: 18vh; width: 28vw; height: 28vh; clip-path: polygon(5% 8%, 100% 0, 92% 100%, 0 90%); }
.drift-six { left: 66vw; top: 48vh; width: 12vw; height: 30vh; clip-path: polygon(0 4%, 100% 0, 94% 100%, 8% 95%); }
.drift-seven { left: 31vw; top: 12vh; width: 10vw; height: 16vh; clip-path: polygon(8% 0, 100% 10%, 90% 100%, 0 86%); }
.drift-mark { right: 22vw; bottom: 7vh; }

.zoom-focus {
  opacity: 0;
  transform: scale(0.85);
  filter: blur(2px);
  transition: opacity 800ms var(--ease-focus), transform 800ms var(--ease-focus), filter 800ms var(--ease-focus);
}

.zoom-focus.revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.panel-whisper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}

.whisper-box {
  position: relative;
  max-width: 420px;
  padding: 2rem;
}

.whisper-box::before,
.whisper-box::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 60px;
  border: 1px solid rgba(138, 132, 121, 0.3);
}

.whisper-box::before {
  left: -18px;
  top: -10px;
}

.whisper-box::after {
  right: -10px;
  bottom: -18px;
}

.whisper-text {
  margin: 1rem 0 0;
  font-family: "Karla", sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-primary);
}

.whisper-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-focus), transform 500ms var(--ease-focus);
}

.whisper-text span.revealed {
  opacity: 1;
  transform: translateY(0);
}

.empty-exhale {
  height: 60vh;
  background: var(--bg-primary);
}

@media (max-width: 767px) {
  .slice-cream {
    clip-path: polygon(0 0, 100% 0, 0 78%);
  }

  .wordmark {
    font-size: clamp(6rem, 28vw, 9rem);
  }

  .collage-cluster {
    width: 78vw;
    height: 44vh;
    right: 6vw;
    bottom: 9vh;
  }

  .panel-grid {
    padding: 5rem 1rem 2rem;
  }

  .pulse-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cell {
    min-height: 120px;
  }

  .statement-band h2 {
    font-size: clamp(4rem, 18vw, 7rem);
  }

  .drift-one { width: 42vw; left: 6vw; }
  .drift-two { width: 34vw; right: 5vw; }
  .drift-three { width: 44vw; left: 28vw; }
  .drift-four { width: 46vw; left: 8vw; }
  .drift-five { width: 42vw; right: 6vw; }
  .drift-six { width: 22vw; left: 70vw; }
  .drift-seven { width: 20vw; left: 44vw; }
}