/* Portrait and an accessible constellation of click-to-open topics. */
#om.about-icon-page {
  display: grid;
  place-items: center;
  height: var(--welcome-height, 100dvh);
  padding: 96px 32px 64px;
  overflow-y: auto;
}
.about-composition { width: min(100%, 488px); margin: auto; text-align: center; }
.about-caption { margin: 0 0 24px; font-size: 12px; letter-spacing: .12em; color: var(--ink); opacity: .64; }
.about-icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.about-center-photo { grid-column: 2 / 4; grid-row: 1 / 3; margin: 0; min-width: 0; border-radius: 24px; overflow: hidden; border: 1px solid #ffffff80; }
.about-center-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.about-tile {
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 4px;
  border-radius: 24px;
  border: 1px solid var(--navigation-glass-border);
  background: var(--navigation-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--navigation-glass-shadow);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.about-tile svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.about-tile span { font-size: 12px; }
.about-tile:hover { transform: translateY(-4px); background: var(--navigation-glass-hover); color: var(--ink); }
.about-tile:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.about-invitation { margin: 24px 0 0; font-size: 12px; opacity: .56; }
@media(max-width: 600px) {
  #om.about-icon-page { padding: 96px 24px 48px; }
  .about-icon-grid { gap: 8px; }
  .about-tile { border-radius: 16px; gap: 8px; }
  .about-center-photo { border-radius: 16px; }
  .about-tile svg { width: 24px; height: 24px; }
  .about-tile span { font-size: 11px; }
}
@media(prefers-reduced-motion: reduce) { .about-tile { transition: none; } }

/* Nine equally sized tiles form a compact, staggered circular cluster. */
.about-composition { width: min(100%, 448px); }
.about-icon-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: 12px 8px;
  align-items: stretch;
}
.about-icon-grid > * {
  grid-column: span 2;
  aspect-ratio: 1;
  border-radius: 20px;
}
.about-icon-grid > .about-center-photo {
  grid-column: 4 / 6;
  grid-row: 2;
}
.about-icon-grid > .about-tile:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.about-icon-grid > .about-tile:nth-child(3) { grid-column: 4 / 6; grid-row: 1; }
.about-icon-grid > .about-tile:nth-child(4) { grid-column: 6 / 8; grid-row: 1; }
.about-icon-grid > .about-tile:nth-child(5) { grid-column: 1 / 3; grid-row: 2; }
.about-icon-grid > .about-tile:nth-child(6) { grid-column: 7 / 9; grid-row: 2; }
.about-icon-grid > .about-tile:nth-child(7) { grid-column: 2 / 4; grid-row: 3; }
.about-icon-grid > .about-tile:nth-child(8) { grid-column: 4 / 6; grid-row: 3; }
.about-icon-grid > .about-tile:nth-child(9) { grid-column: 6 / 8; grid-row: 3; }
.about-center-photo img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
@media(max-width: 600px) {
  .about-icon-grid { gap: 8px 4px; }
  .about-icon-grid > * { border-radius: 16px; }
  .about-tile { gap: 8px; }
  .about-tile span { font-size: 10px; }
}

.about-composition > .about-caption {
  margin: 0 0 32px;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.12;
  letter-spacing: -.055em;
  font-weight: 600;
  color: var(--ink);
  opacity: 1;
}

.about-composition > .about-caption {
  white-space: nowrap;
  width: max-content;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(28px, 7vw, 68px);
}

/* Position the heading higher, matching the marked reference area. */
#om.about-icon-page {
  align-items: start;
  padding-top: 64px;
}
.about-composition { margin: 0 auto; }

/* Circular topic buttons and matching portrait crop. */
.about-icon-grid > .about-tile,
.about-icon-grid > .about-center-photo {
  border-radius: 50%;
}

/* Eight evenly spaced topics orbit the central portrait. */
.about-icon-grid {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.about-icon-grid > .about-tile,
.about-icon-grid > .about-center-photo {
  position: absolute;
  width: 23%;
  height: 23%;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.about-icon-grid > .about-tile:nth-child(2) { left: 50%; top: 12%; }
.about-icon-grid > .about-tile:nth-child(3) { left: 76.87%; top: 23.13%; }
.about-icon-grid > .about-tile:nth-child(4) { left: 88%; top: 50%; }
.about-icon-grid > .about-tile:nth-child(5) { left: 76.87%; top: 76.87%; }
.about-icon-grid > .about-tile:nth-child(6) { left: 50%; top: 88%; }
.about-icon-grid > .about-tile:nth-child(7) { left: 23.13%; top: 76.87%; }
.about-icon-grid > .about-tile:nth-child(8) { left: 12%; top: 50%; }
.about-icon-grid > .about-tile:nth-child(9) { left: 23.13%; top: 23.13%; }
.about-icon-grid > .about-tile:hover {
  transform: translate(-50%, calc(-50% - 4px));
}

/* An asymmetric cluster: one large portrait and smaller satellite topics. */
.about-icon-grid > .about-center-photo {
  left: 30%;
  top: 29%;
  width: 44%;
  height: 44%;
}
.about-icon-grid > .about-tile { width: 21%; height: 21%; }
.about-icon-grid > .about-tile:nth-child(2) {
  left: 62%; top: 45%; width: 24%; height: 24%;
}
.about-icon-grid > .about-tile:nth-child(3) {
  left: 43%; top: 68%; width: 28%; height: 28%;
}
.about-icon-grid > .about-tile:nth-child(4) {
  left: 69%; top: 70%; width: 21%; height: 21%;
}
.about-icon-grid > .about-tile:nth-child(5) {
  left: 82%; top: 52%; width: 14%; height: 14%;
}
.about-icon-grid > .about-tile:nth-child(6) {
  left: 18%; top: 64%; width: 18%; height: 18%;
}
.about-icon-grid > .about-tile:nth-child(7) {
  left: 61%; top: 22%; width: 16%; height: 16%;
}
.about-icon-grid > .about-tile:nth-child(8) {
  left: 27%; top: 88%; width: 18%; height: 18%;
}
.about-icon-grid > .about-tile:nth-child(9) {
  left: 64%; top: 90%; width: 15%; height: 15%;
}
.about-icon-grid > .about-tile:nth-child(5),
.about-icon-grid > .about-tile:nth-child(7),
.about-icon-grid > .about-tile:nth-child(9) { gap: 4px; }
.about-icon-grid > .about-tile:nth-child(5) svg,
.about-icon-grid > .about-tile:nth-child(7) svg,
.about-icon-grid > .about-tile:nth-child(9) svg { width: 20px; height: 20px; }
.about-icon-grid > .about-tile:nth-child(5) span,
.about-icon-grid > .about-tile:nth-child(7) span,
.about-icon-grid > .about-tile:nth-child(9) span { font-size: 10px; }
@media(max-width: 600px) {
  .about-icon-grid > .about-tile { gap: 4px; padding: 4px; }
  .about-icon-grid > .about-tile svg { width: 20px; height: 20px; }
  .about-icon-grid > .about-tile:nth-child(5) span,
  .about-icon-grid > .about-tile:nth-child(7) span,
  .about-icon-grid > .about-tile:nth-child(9) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Move only these three circles to the user-marked positions. */
.about-icon-grid > .about-tile:nth-child(6) { left: 88%; top: 27%; }
.about-icon-grid > .about-tile:nth-child(8) { left: 102%; top: 50%; }
.about-icon-grid > .about-tile:nth-child(9) { left: 94%; top: 69%; }

/* Balance the cluster through position alone; keep all circle sizes intact. */
.about-icon-grid {
  left: -9%;
}
.about-icon-grid > .about-tile:nth-child(2) { left: 62%; top: 45%; }
.about-icon-grid > .about-tile:nth-child(3) { left: 44%; top: 66%; }
.about-icon-grid > .about-tile:nth-child(4) { left: 69%; top: 69%; }
.about-icon-grid > .about-tile:nth-child(5) { left: 82%; top: 52%; }
.about-icon-grid > .about-tile:nth-child(6) { left: 84%; top: 29%; }
.about-icon-grid > .about-tile:nth-child(7) { left: 60%; top: 22%; }
.about-icon-grid > .about-tile:nth-child(8) { left: 101%; top: 48%; }
.about-icon-grid > .about-tile:nth-child(9) { left: 90%; top: 70%; }

/* More breathing room between the white bubbles, lifted around the portrait. */
.about-icon-grid > .about-tile:nth-child(2) { left: 66%; top: 39%; }
.about-icon-grid > .about-tile:nth-child(3) { left: 52%; top: 64%; }
.about-icon-grid > .about-tile:nth-child(4) { left: 82%; top: 65%; }
.about-icon-grid > .about-tile:nth-child(5) { left: 92%; top: 44%; }
.about-icon-grid > .about-tile:nth-child(6) { left: 92%; top: 16%; }
.about-icon-grid > .about-tile:nth-child(7) { left: 61%; top: 9%; }
.about-icon-grid > .about-tile:nth-child(8) { left: 117%; top: 36%; }
.about-icon-grid > .about-tile:nth-child(9) { left: 102%; top: 65%; }

/* Emoji replacements occupy the same space as the former SVG icons. */
.about-icon-grid > .about-tile .about-emoji {
  position: static;
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 1;
  overflow: visible;
  clip-path: none;
}
.about-icon-grid > .about-tile:nth-child(5) .about-emoji,
.about-icon-grid > .about-tile:nth-child(7) .about-emoji,
.about-icon-grid > .about-tile:nth-child(9) .about-emoji {
  width: 20px;
  height: 20px;
  font-size: 20px;
}
@media(max-width: 600px) {
  .about-icon-grid > .about-tile .about-emoji {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
}

/* Gentle float uses transform, leaving the editor's translate/scale untouched. */
@keyframes about-bubble-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 4px)); }
}
body:not(.layout-editing) .about-icon-grid > .about-tile.layout-item {
  animation: about-bubble-float 8s ease-in-out infinite;
}
body:not(.layout-editing) .about-icon-grid > .about-tile:nth-child(2n) {
  animation-delay: -4s;
  animation-duration: 9s;
}
body:not(.layout-editing) .about-icon-grid > .about-tile:nth-child(3n) {
  animation-delay: -2s;
  animation-duration: 10s;
}
body:not(.layout-editing) .about-icon-grid > .about-tile:is(:hover, :focus-visible) {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.layout-editing) .about-icon-grid > .about-tile.layout-item {
    animation: none;
  }
}