/* Playground page: freeform art gallery blocks. */

.pg-logo {
  display: block;
  width: 95px;
  height: 110px;
  border-radius: 9.5px;
  overflow: hidden;
  border: 0.95px solid var(--ink);
  background: var(--accent);
  margin-bottom: 40px;
}
.pg-logo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; mix-blend-mode: multiply; }

.pg-content {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.pg-block { position: relative; }

/* --- block 1: seagull/cat pairing --- */
.pg-block--1 { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.pg-block--1 .pg-pair { display: flex; align-items: center; gap: 17px; }
.pg-tall-frame img {
  height: 429px;
  width: auto;
  border: 1px solid var(--ink-soft);
  object-fit: cover;
}
.pg-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 429px;
  width: 314px;
}
.pg-stack img {
  width: 314px;
  height: 314px;
  object-fit: cover;
  border: 1px solid var(--ink-soft);
}
.pg-note-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.pg-note-group img.pg-arrow { width: 150px; height: auto; }

/* --- block 2: calendar + cat series --- */
.pg-block--2 {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.pg-cal-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pg-cal-col img { width: 255px; height: 362px; object-fit: cover; }
.pg-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  width: 793px;
}
.pg-cat-grid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

/* --- block 3: worm pattern + icon grid --- */
.pg-block--3 { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.pg-block--3 img.pg-solucan { width: 614px; height: 434px; object-fit: cover; }
.pg-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 434px;
}
.pg-icon-grid img { width: 214px; height: 214px; object-fit: cover; }

/* --- block 4: tomato branding --- */
.pg-block--4 .pg-caption { margin-bottom: 15px; display: block; }
.pg-block--4 .pg-row { position: relative; display: flex; gap: 19px; align-items: center; }
.pg-block--4 img.pg-square { width: 216px; height: 216px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--ink-soft); }
.pg-block--4 img.pg-banner { flex: 1 1 0; min-width: 0; width: auto; height: 216px; border: 1px solid var(--ink-soft); object-fit: cover; }
.pg-block--4 .pg-arrow-side-wrap {
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 121px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-block--4 .pg-arrow-side {
  width: 121px;
  max-width: none;
  height: 54px;
  transform: rotate(-90deg) scaleY(-1);
  flex-shrink: 0;
}

/* --- block 5: open mic poster + turtle/duck --- */
.pg-block--5 { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; position: relative; }
.pg-block--5 img.pg-poster { width: 314px; height: 444px; object-fit: cover; }
.pg-block--5 img.pg-wide { width: 734px; height: 271px; object-fit: cover; }
.pg-block--5 .pg-note-group { position: absolute; left: 341px; top: 306px; }

/* --- block 6: cat photo pairing --- */
.pg-block--6 { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
.pg-block--6 img { height: 422px; width: auto; object-fit: cover; }

/* --- shared: handwritten captions & arrows --- */
.pg-caption {
  font-family: var(--script);
  font-weight: 700;
  font-size: 20px;
  color: var(--cherry);
  text-align: center;
}
.pg-caption--lg { font-size: 32px; }
.pg-note-group .pg-caption { width: 210px; text-align: center; }