/* POP ART — Build with it (Design Completion Campaign, 2026-09-29).
   A comic page: panels in the one 5px outline, each name in a yellow caption
   strip, Ben-Day fields with countable dots. Faces and colours are the room's
   (x-pop-art.css): Bangers for display and balloons, Archivo Narrow for text. */
.gm--pop-art {
  --gm-tag-inverse: var(--gm-color-ground);
  --gpa-d: var(--pp-bang, "Impact", sans-serif);
  --gpa-b: var(--pp-body, "Arial Narrow", Arial, sans-serif);
  --gpa-o: var(--gm-outline);
  max-width: 1180px; margin: 16px auto 0; padding: 0 clamp(12px, 3vw, 30px);
  color: var(--gm-color-ink); font: 400 18px/1.5 var(--gpa-b);
}
.gm--pop-art .gm__head { padding: 18px; border: var(--gpa-o) solid var(--gm-color-ink); background: var(--gm-color-ground); margin-bottom: 16px; }
.gm--pop-art .gm__title { font: 400 clamp(40px, 6vw, 72px)/.95 var(--gpa-d); text-transform: uppercase; letter-spacing: .02em; }
.gm--pop-art .gm__key, .gm--pop-art .gm__get { opacity: 1; font-size: 15px; }
.gm--pop-art .gm-t { border-width: 2px; font-weight: 700; }
.gm--pop-art :focus-visible { outline: 4px solid var(--gm-color-blue); outline-offset: 3px; }
.gm--pop-art .gm-gap { opacity: 1; border-width: 2px; background: var(--gm-color-ground); }

.gpa-dots-r { background: radial-gradient(circle, var(--gm-color-red) 34%, transparent 36%) 0 0 / 22px 22px, #FFD5CF; }
.gpa-dots-b { background: radial-gradient(circle, var(--gm-color-blue) 32%, transparent 34%) 0 0 / 20px 20px, #CFE3FF; }
.gpa-dots-y { background: radial-gradient(circle, var(--gm-color-red) 30%, transparent 32%) 0 0 / 18px 18px, var(--gm-color-yellow); }

.gpa-page { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.gpa-p { min-width: 0; border: var(--gpa-o) solid var(--gm-color-ink); background: var(--gm-color-ground); }
.gpa-s2 { grid-column: span 2; } .gpa-s3 { grid-column: span 3; } .gpa-s6 { grid-column: 1 / -1; }
.gpa-p .gm-f__head { margin: 0; padding: 8px 12px; gap: 8px; background: var(--gm-color-yellow); border-bottom: var(--gpa-o) solid var(--gm-color-ink); }
.gpa-p .gm-f__n { font: 700 14px/1.3 var(--gpa-b); }
.gpa-p .gm-f__name { font: 700 14px/1.3 var(--gpa-b); text-transform: uppercase; letter-spacing: .03em; }
.gpa-p .gm-f__note, .gpa-p .gm-f__spec, .gpa-p .gm-more { margin-left: 16px; margin-right: 16px; }
.gpa-p .gm-f__note { margin-top: 14px; opacity: 1; font-size: 15px; }
.gpa-p .gm-f__spec { margin-top: 16px; }
.gpa-p .gm-more { margin-bottom: 16px; }
.gpa-p .gm-more summary { min-height: 44px; display: flex; align-items: center; font: 700 14px/1.3 var(--gpa-b); text-transform: uppercase; }
.gpa-cap { margin: 10px 0 0; font-weight: 700; font-size: 16px; }

.gpa-sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gpa-sws li { display: grid; gap: 3px; min-width: 0; font-size: 14px; }
.gpa-sws span { display: block; aspect-ratio: 1; border: 4px solid var(--gm-color-ink); }
.gpa-sws code { font: 600 12px/1.2 var(--gpa-b); overflow-wrap: anywhere; }
.gpa-sound { display: grid; place-items: center; height: 120px; border: 4px solid var(--gm-color-ink); }
.gpa-sound span { font: 400 64px/1 var(--gpa-d); color: var(--gm-color-yellow); -webkit-text-stroke: 3px var(--gm-color-ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--gm-color-ink); transform: rotate(-6deg); }
.gpa-dip { display: grid; grid-template-columns: 1fr 1fr; height: 110px; border: 4px solid var(--gm-color-ink); }
.gpa-dip > span { position: relative; overflow: hidden; }
.gpa-dip__a { border-right: 6px solid var(--gm-color-ink); background: var(--gm-color-ground); }
.gpa-dip__a i { position: absolute; left: 30%; top: 38%; width: 34%; height: 24%; background: var(--gm-color-blue); border: 3px solid var(--gm-color-ink); }
.gpa-dip__b i { position: absolute; inset: -20% -30% -20% 5%; border-radius: 50%; background: var(--gm-color-yellow); border: 4px solid var(--gm-color-ink); }
.gpa-dotcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gpa-dotcmp span { display: block; height: 90px; border: 4px solid var(--gm-color-ink); }
.gpa-fine { position: relative; background: radial-gradient(circle, var(--gm-color-red) 34%, transparent 36%) 0 0 / 4px 4px, #FFD5CF; }
.gpa-fine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 3px), var(--gm-color-ink) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)); }
.gpa-scene { display: grid; place-items: center; height: 110px; border: 4px solid var(--gm-color-ink); }
.gpa-bub { position: relative; padding: 10px 16px; border: 4px solid var(--gm-color-ink); border-radius: 50%; background: var(--gm-color-ground); font: 400 20px/1.1 var(--gpa-d); letter-spacing: .04em; text-transform: uppercase; }
.gpa-move { display: flex; align-items: center; gap: 10px; height: 60px; }
.gpa-move i { display: block; border-radius: 50%; background: var(--gm-color-red); }
.gpa-disc { width: 140px; aspect-ratio: 1; border-radius: 50%; border: var(--gpa-o) solid var(--gm-color-ink); background-size: 26px 26px, auto; }

/* components */
.gpa-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 22px; }
.gpa-nav a, .gpa-nav__cur { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 4px solid var(--gm-color-ink); font: 700 15px/1 var(--gpa-b); text-transform: uppercase; color: var(--gm-color-ink); text-decoration: none; }
.gpa-nav a { background: var(--gm-color-ground); }
.gpa-nav a:hover { background: var(--gm-color-yellow); }
.gpa-nav__cur { position: relative; margin-bottom: 14px; border-radius: 50%; padding: 0 22px; background: var(--gm-color-ground); font: 400 20px/1 var(--gpa-d); letter-spacing: .04em; }
.gpa-nav__cur::after { content: ""; position: absolute; left: 26%; bottom: -16px; border: 8px solid transparent; border-top: 14px solid var(--gm-color-ink); border-bottom: 0; transform: skewX(-22deg); }
.gpa-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.gpa-card { display: grid; border: var(--gpa-o) solid var(--gm-color-ink); background: var(--gm-color-ground); color: var(--gm-color-ink); text-decoration: none; }
.gpa-card__cap { padding: 6px 10px; background: var(--gm-color-yellow); border-bottom: 4px solid var(--gm-color-ink); font: 700 13px/1.3 var(--gpa-b); text-transform: uppercase; }
.gpa-card:hover .gpa-card__cap { background: var(--gm-color-red); color: var(--gm-color-ground); }
.gpa-card__img { display: block; height: 90px; border-bottom: 4px solid var(--gm-color-ink); }
.gpa-card b { padding: 10px 12px; font: 400 24px/1.05 var(--gpa-d); letter-spacing: .02em; text-transform: uppercase; }
.gpa-form { display: grid; gap: 10px; }
.gpa-form label { justify-self: start; padding: 4px 10px; border: 4px solid var(--gm-color-ink); background: var(--gm-color-yellow); font: 700 14px/1.2 var(--gpa-b); text-transform: uppercase; }
.gpa-form input { min-height: 48px; padding: 8px 12px; border: var(--gpa-o) solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-ground); }
.gpa-form input:focus-visible { background: var(--gm-color-yellow); }
.gpa-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.gpa-btn { min-height: 52px; padding: 0 22px; border: var(--gpa-o) solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-yellow); color: var(--gm-color-ink); font: 400 24px/1 var(--gpa-d) !important; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.gpa-btn:hover { background: var(--gm-color-ink); color: var(--gm-color-yellow); }
.gpa-btn:active { background: var(--gm-color-red); color: var(--gm-color-ground); }
.gpa-btn:disabled { background: var(--gm-color-ground); color: var(--gm-color-ink); text-decoration: line-through; cursor: not-allowed; }

@media (max-width: 860px) {
  .gpa-s2, .gpa-s3 { grid-column: span 3; }
  /* Five half panels before the full-width Components cannot pair: Colour takes the first row. */
  .gpa-page > .gpa-p:first-child { grid-column: 1 / -1; }
  .gpa-ui { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .gpa-page { grid-template-columns: minmax(0, 1fr); }
  .gpa-s2, .gpa-s3, .gpa-s6 { grid-column: 1 / -1; }
  .gpa-sws { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}