/* ==========================================================================
   TuneDance frontend — made for you, for every project.

   Every other band on this page is near-white with two blurred colour pools
   behind it, and by this point in the scroll that has stopped being a
   background and become wallpaper. This section is deliberately not that.

   Three things carry it:

   - A warm cream ground with visible grain, several steps deeper than the
     white sections either side, so arriving here feels like a change of room.
   - Square corners and close gaps. Rounded corners with generous padding is
     the card look; hard edges butted close together is a contact sheet.

   A full-bleed 1560px version of this was tried and reverted. Widening the
   container to fight blandness just made the art the loudest thing on the page
   and pushed the outer columns against the viewport edge. The grid sits back in
   the page's own 1200px column, which is also what keeps this section aligned
   with every other one above it.

   No borders, no rules, no fills, no shadows, no hover, no icons.
   ========================================================================== */

.made {
  --accent: #04a86b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(66px, 7.8vw, 124px) 24px clamp(70px, 8.2vw, 130px);
  background: linear-gradient(168deg, #f2ece2 0%, #ece4d7 52%, #e7ddcd 100%);
  color: #221f1a;
}

/* One large wash, off-centre and warm, rather than two symmetrical pools. */
.made::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 90%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 52% at 22% 30%, rgba(0, 201, 126, 0.26) 0%, transparent 70%);
  filter: blur(80px);
}

/* Grain, at a strength you can actually see. A cream this warm bands badly
   without it, and the texture is most of why the ground reads as a surface. */
.made::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.075'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.made__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.made__heading {
  margin: 0 auto clamp(12px, 1.6vw, 18px);
  max-width: 20ch;
  font-size: clamp(29px, 4.5vw, 60px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.042em;
  text-align: center;
  text-wrap: balance;
}

.made__hit { color: var(--accent); }

.made__sub {
  margin: 0 auto clamp(44px, 5.2vw, 82px);
  max-width: 54ch;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  text-align: center;
  color: rgba(34, 31, 26, 0.66);
}

/* --- The wall ------------------------------------------------------------ */

.made__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 50px) clamp(18px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Shapes at the corners ------------------------------------------------

   One hand-drawn shape per cell, tucked behind a corner of its image, nine
   shapes in the brand colours rotating down the grid so no two neighbours
   match: ring, blob, wave, dots, arcs, spark, pluses, triangle, bars. They
   sit under the image (the image paints above them), so each one peeks out
   rather than sitting on top, and the grid stops reading as nine identical
   rectangles. */

.use { position: relative; }

.use__art { position: relative; z-index: 1; }

.use::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(72px, 7.6vw, 108px);
  height: clamp(72px, 7.6vw, 108px);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.92;
}

.use:nth-child(9n + 1)::before { right: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='44' fill='none' stroke='%2300c97e' stroke-width='9'/%3E%3C/svg%3E"); transform: rotate(-8deg); }
.use:nth-child(9n + 2)::before { left: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M28 62 C 18 36, 48 14, 74 24 C 102 34, 110 68, 88 90 C 66 112, 36 100, 28 62 Z' fill='%23ff5d8f'/%3E%3C/svg%3E"); transform: rotate(6deg); }
.use:nth-child(9n + 3)::before { right: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M6 60 C 22 30, 38 30, 54 60 S 86 90, 102 60 S 118 40, 118 40' fill='none' stroke='%230e8bff' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E"); transform: rotate(-4deg); }
.use:nth-child(9n + 4)::before { left: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='20' cy='20' r='7' fill='%23ffc233'/%3E%3Ccircle cx='20' cy='60' r='7' fill='%23ffc233'/%3E%3Ccircle cx='20' cy='100' r='7' fill='%23ffc233'/%3E%3Ccircle cx='60' cy='20' r='7' fill='%23ffc233'/%3E%3Ccircle cx='60' cy='60' r='7' fill='%23ffc233'/%3E%3Ccircle cx='60' cy='100' r='7' fill='%23ffc233'/%3E%3Ccircle cx='100' cy='20' r='7' fill='%23ffc233'/%3E%3Ccircle cx='100' cy='60' r='7' fill='%23ffc233'/%3E%3Ccircle cx='100' cy='100' r='7' fill='%23ffc233'/%3E%3C/svg%3E"); transform: rotate(10deg); }
.use:nth-child(9n + 5)::before { right: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2300c97e' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M30 110 A 80 80 0 0 1 110 30'/%3E%3Cpath d='M30 78 A 48 48 0 0 1 78 30'/%3E%3Cpath d='M30 50 A 20 20 0 0 1 50 30'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(-12deg); }
.use:nth-child(9n + 6)::before { left: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 6 C 64 38, 82 56, 114 60 C 82 64, 64 82, 60 114 C 56 82, 38 64, 6 60 C 38 56, 56 38, 60 6 Z' fill='%23ffc233'/%3E%3C/svg%3E"); transform: rotate(7deg); }
.use:nth-child(9n + 7)::before { right: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg stroke='%230e8bff' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M30 14v32M14 30h32'/%3E%3Cpath d='M90 58v32M74 74h32'/%3E%3Cpath d='M40 84v22M29 95h22'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(-6deg); }
.use:nth-child(9n + 8)::before { left: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 14 L 108 100 L 12 100 Z' fill='none' stroke='%23ff5d8f' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: rotate(9deg); }
.use:nth-child(9n + 9)::before { right: -22px; top: -40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='14' y='44' width='12' height='32' rx='6' fill='%2300c97e'/%3E%3Crect x='36' y='26' width='12' height='68' rx='6' fill='%2300c97e'/%3E%3Crect x='58' y='10' width='12' height='100' rx='6' fill='%2300c97e'/%3E%3Crect x='80' y='32' width='12' height='56' rx='6' fill='%2300c97e'/%3E%3Crect x='102' y='50' width='12' height='20' rx='6' fill='%2300c97e'/%3E%3C/svg%3E"); transform: rotate(-5deg); }

.use { min-width: 0; }

/* 16:9, not 4:3. At three columns in a 1200px container a 4:3 plate is nearly
   290px tall and becomes the loudest thing in the section; 16:9 takes a quarter
   off that and lets the titles lead again.
   Square corners: rounding these is what made an earlier version read as nine
   cards. */
.use__art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

.use__title {
  margin: 0 0 clamp(7px, 0.9vw, 11px);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.036em;
  color: #221f1a;
  text-wrap: balance;
}

.use__copy {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.54;
  color: rgba(34, 31, 26, 0.68);
}

@media (max-width: 900px) {
  .made__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .made__grid { grid-template-columns: 1fr; gap: 26px; }
}