.hero-scratch .nav,
.hero-scratch .name,
.hero-scratch .descriptor {
  opacity: 1;
  animation: none;
}

.hero-scratch::before {
  z-index: 1;
}

.scratch-collage {
  position: absolute;
  z-index: 4;
  top: 31%;
  left: 50%;
  width: min(100%, 540px);
  height: 54%;
  max-height: 500px;
  transform: translateX(-50%);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.hero-scratch--main .scratch-collage {
  top: 30%;
  height: 56%;
  max-height: 520px;
}

.scratch-collage:focus-visible {
  outline: 3px dashed var(--cream);
  outline-offset: 4px;
}

.collage-item {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  pointer-events: none;
  -webkit-user-select: none;
}

.scratch-collage.is-revealed .collage-item {
  pointer-events: auto;
  cursor: pointer;
}

.collage-item:focus-visible {
  z-index: 6;
  outline: 3px dashed var(--cream);
  outline-offset: 3px;
}

.collage-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0);
  pointer-events: none;
  -webkit-user-drag: none;
}

.scratch-collage.is-ready .collage-art {
  filter: none;
}

.collage-person {
  z-index: 2;
  bottom: 0;
  left: 50%;
  height: 96%;
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
}

.collage-cinema {
  z-index: 3;
  top: 14%;
  left: 2%;
  width: 28%;
  aspect-ratio: 3 / 2;
}

.collage-coffee {
  z-index: 3;
  bottom: 8%;
  left: 0;
  width: 23%;
  aspect-ratio: 2 / 3;
}

.collage-laptop {
  z-index: 3;
  right: 0;
  bottom: 9%;
  width: 31%;
  aspect-ratio: 1312 / 1199;
}

.collage-earbuds {
  z-index: 3;
  top: 6%;
  right: 1%;
  width: 30%;
  aspect-ratio: 1246 / 1263;
}

.scratch-film {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.scratch-film[hidden] {
  display: none;
}

.scratch-hint {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  padding: 4px 6px 3px;
  transform: rotate(-2deg);
  background: var(--cream);
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.54rem, 2.2vw, 0.6rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}

.scratch-hint.is-visible {
  opacity: 1;
}

.story-dialog {
  position: fixed;
  inset: 0;
  width: min(350px, calc(100vw - 32px));
  max-width: none;
  max-height: min(74dvh, 510px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 6px 8px 0 var(--ink), 10px 14px 24px rgba(11, 21, 16, 0.22);
  overscroll-behavior: contain;
}

.story-dialog::backdrop {
  background: rgba(11, 21, 16, 0.48);
}

.story-card {
  position: relative;
  padding: 35px 22px 24px;
}

.story-dialog:not([data-item="person"]) .story-card {
  padding-top: 60px;
}

.story-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  border-bottom: 2px solid var(--ink);
  background: var(--green);
  content: "";
}

.story-close {
  position: absolute;
  top: 18px;
  right: 18px;
  min-height: 30px;
  padding: 3px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
}

.story-close:hover,
.story-close:focus-visible {
  color: var(--green-dark);
}

.story-close:focus-visible {
  outline: 2px dashed var(--green-dark);
  outline-offset: 2px;
}

.story-card h2 {
  max-width: calc(100% - 40px);
  margin: 9px 0 18px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: clamp(1.85rem, 7vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.story-copy,
.story-quote,
.story-credit {
  font-family: "Courier New", Courier, monospace;
}

.story-copy,
.story-quote {
  margin: 0;
  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.46;
}

.story-dialog[data-item="coffee"] .story-copy {
  white-space: pre-line;
}

.story-quote {
  padding-top: 13px;
  border-top: 2px solid var(--green);
}

.story-credit {
  margin: 18px 0 0;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.story-dialog [hidden] {
  display: none;
}

@media (max-height: 740px) {
  .scratch-collage {
    top: 31%;
    height: 52%;
  }
}

@media (max-width: 419px) {
  .scratch-collage {
    top: 32%;
    height: 51%;
  }

  .hero-scratch--main .scratch-collage {
    top: 31%;
    height: 56%;
  }
}

@media (max-width: 419px) and (max-height: 740px) {
  .scratch-collage {
    top: 31%;
    height: 53%;
  }

  .hero-scratch--main .scratch-collage {
    top: 31%;
    height: 53%;
  }
}

@media (max-width: 349px) and (min-height: 741px) {
  .hero-scratch--main .scratch-collage {
    height: 48%;
  }
}

@media (max-width: 349px) {
  .collage-person {
    height: 88%;
  }

  .scratch-hint {
    padding: 3px 5px 2px;
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .story-dialog[open] {
    animation: story-appear 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes story-appear {
  from { opacity: 0.6; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}