/* Scattered like collected tattoos, but in flow so every note has breathing room. */
.margin-note {
  display: block;
  width: fit-content;
  max-width: calc(100% - 28px);
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  line-height: 1.13;
  letter-spacing: .015em;
  color: #c5c2b4;
  overflow-wrap: normal;
}

/* Margins reserve the hive's stagger, including when a card has a note. */
.project-window { align-self: start; }
.project-window > a { height: auto; }
.project-window:nth-child(3n + 2) { transform: none; margin-top: 98px; }
.gallery-note {
  margin-block: 42px 18px;
  margin-inline: 16% 0;
  padding: 6px 0;
  transform: rotate(-7deg);
}
.gallery-note--growth {
  margin-top: 54px;
  margin-left: auto;
  margin-right: 9%;
  color: #b6c5aa;
  transform: rotate(6deg);
}
.gallery-note--details {
  margin-left: 7%;
  transform: rotate(-4deg);
}
.gallery-coda {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(55px, 9vw, 135px);
  padding: 26px 15% 6px 0;
  pointer-events: none;
}
.together-note { transform: rotate(5deg); font-size: 2rem; }
.margin-songbirds {
  width: 180px;
  height: auto;
  flex-shrink: 0;
  transform: rotate(-5deg);
}

.approach-method { min-width: 0; }
.approach-note {
  margin: 46px 8% 12px auto;
  transform: rotate(-5deg);
  color: #b6c5aa;
}
.about-keepsake {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 38px;
  margin: 60px 0 8px;
  padding-right: 6%;
  pointer-events: none;
}
.growing-note { transform: rotate(5deg); }
.margin-brain {
  width: 160px;
  height: auto;
  flex-shrink: 0;
  transform: rotate(-6deg);
}
/* Keep the existing contact paragraph styling when its annotation follows it. */
.contact-copy > p:not(.eyebrow) {
  color: var(--muted);
  max-width: 440px;
  margin: 28px 0 0;
}
.contact-note {
  margin: 52px 0 12px 19%;
  transform: rotate(-6deg);
}

@media (max-width: 1050px) {
  .gallery-note { margin-left: 8%; }
  .gallery-note--growth { margin-left: auto; margin-right: 6%; }
  .about-keepsake { gap: 20px; padding-right: 0; }
  .margin-brain { width: 140px; }
}
@media (max-width: 760px) {
  .project-window:nth-child(3n + 2) { margin-top: 0; }
  .project-window:nth-child(even) { transform: none; margin-top: 42px; }
  .gallery-note {
    max-width: calc(100% - 16px);
    font-size: 1.375rem;
    margin: 34px 8px 14px;
  }
  .gallery-note--growth { margin-top: 46px; }
  .gallery-coda { padding: 28px 6% 8px; gap: 42px; }
  .margin-songbirds { width: 140px; }
  .together-note { font-size: 1.75rem; }
}
@media (max-width: 700px) {
  .approach-note { margin-top: 38px; margin-right: 10%; }
  .about-keepsake { margin-top: 48px; padding-right: 8%; gap: 36px; }
  .margin-brain { width: 140px; }
  .contact-note { margin: 40px 0 10px 10%; }
}
@media (max-width: 400px) {
  .gallery-coda { gap: 28px; padding-right: 2%; }
  .margin-songbirds { width: 120px; }
  .about-keepsake { gap: 24px; padding-right: 2%; }
  .margin-brain { width: 120px; }
}
@media (max-width: 360px) {
  .project-window:nth-child(3n + 2),
  .project-window:nth-child(even) { margin-top: 0; }
  .gallery-note { margin: 34px 12% 16px; font-size: 1.5rem; }
  .gallery-note--growth { margin-left: auto; margin-right: 10%; }
}
@media print {
  .gallery-coda, .about-keepsake { display: none; }
  .project-window:nth-child(n) { margin-top: 0; }
}

/* Notes live outside project rows, with their own breathing room. */
.approach-specimen { min-width: 0; }
.relocated-details { margin: 32px auto 24px 12%; transform: rotate(-4deg); }
.relocated-growth { margin: 36px 8% 12px auto; color: #b6c5aa; transform: rotate(6deg); }

/* A botanical sprig flows beside the frame without covering the portrait. */
.portrait-botanical { position: absolute; z-index: 0; width: 16%; height: auto; right: -4%; top: 30%; transform: rotate(168deg); pointer-events: none; opacity: .85; }
@media (min-width: 701px) and (max-width: 850px) { .portrait-botanical { width: 13%; right: -7%; } }
@media (max-width: 700px) { .portrait-botanical { width: 12%; left: 0; right: auto; top: 33%; transform: rotate(178deg); } }