/* 07 — brand shape */
.shape__plate { aspect-ratio: 16 / 9; border-radius: var(--r-m); width: 100%; }
.shape__box { width: 100%; }

.shape__anat { position: relative; }
.shape__badge { position: absolute; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-small); font-weight: 500; transform: translate(-50%, -50%); }
.shape__badge--1 { left: 9%; top: 18%; background: var(--blue); color: var(--navy); }
.shape__badge--2 { left: 9%; top: 68%; background: var(--navy); color: var(--sand); }
.shape__badge--3 { left: 91%; top: 88%; background: var(--navy); color: var(--sand); }
.shape__legend { gap: 10px; }
.shape__leg { width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; text-align: left; border: 1px solid var(--navy-15); background: var(--sand-soft); border-radius: var(--r-s); padding: 14px 16px; transition: background .15s, border-color .15s; }
.shape__leg:hover, .shape__leg:focus-visible, .shape__leg.is-on { background: var(--sand); border-color: var(--navy); }
.shape__leg-n { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--sand); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 500; }
.shape__built { margin-top: var(--gap); }
.shape__fig { font-size: var(--fs-h3); font-weight: 300; line-height: 1; letter-spacing: -.01em; }

/* orientations: equal height, widths 3:5, 1:1, 3:2 */
.shape__orient { display: flex; align-items: flex-start; justify-content: center; gap: clamp(14px, 3vw, 44px); }
.shape__o { margin: 0; display: grid; gap: 12px; min-width: 0; }
.shape__o--v { flex: 6 1 0; } .shape__o--s { flex: 10 1 0; } .shape__o--h { flex: 15 1 0; }
.shape__o .caption { text-align: center; color: var(--navy); opacity: .8; }
.shape__box--p { aspect-ratio: 3 / 4; width: 100%; max-width: 260px; }
.shape__box--fb { aspect-ratio: 2 / 3; width: 100%; }

.shape__photos { align-items: end; }
.shape__ph { width: 100%; border-radius: var(--r-m); container-type: inline-size; }
.shape__photos .shape__ph:first-child { max-width: 380px; }
.shape__ph-in { position: absolute; left: 0; right: 0; top: 0; height: var(--plate-top, 40%); padding: 8cqw 8cqw 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 7cqw; }
.shape__ph-logo { display: block; width: 38cqw; max-width: 100%; color: var(--blue); }
.shape__ph-logo svg { width: 100%; height: auto; }
.shape__ph-h { color: var(--blue); font-weight: 300; font-size: 6.2cqw; line-height: 1.15; letter-spacing: -.005em; max-width: 12em; }
.shape__photos .shape__ph:last-child .shape__ph-in { padding-top: 5cqw; gap: 3.4cqw; }
.shape__photos .shape__ph:last-child .shape__ph-logo { width: 24cqw; }
.shape__photos .shape__ph:last-child .shape__ph-h { font-size: 3.6cqw; }

.shape__fb { display: flex; justify-content: center; align-items: flex-start; gap: 0; padding-bottom: 28px; }
.shape__fb-i { margin: 0; width: min(100%, 300px); flex: 0 1 300px; display: grid; gap: 12px; }
.shape__fb-i .shape__box { outline: 1px solid var(--navy); }
.shape__fb-i .caption { color: var(--navy); opacity: .8; text-align: center; }

/* do / don't mini layouts */
.shape__fake { position: relative; width: 100%; max-width: 280px; aspect-ratio: 4 / 3; overflow: hidden; }
.shape__fake > [data-plate] { position: absolute; inset: 0; }
.shape__fake--wide { aspect-ratio: 3 / 2; max-width: 320px; }
.shape__fake--skew > [data-plate] { right: auto; width: 166.67%; transform: scaleX(.6); transform-origin: 0 0; }
.shape__fake--two > [data-plate] { bottom: auto; height: 50%; }
.shape__fake--two > [data-plate] + [data-plate] { top: 50%; bottom: 0; }
.shape__t { position: absolute; left: 8%; right: var(--plate-right, 30%); top: var(--plate-top); bottom: var(--plate-bottom); display: flex; align-items: center; margin: 0; font-size: 5.2cqw; line-height: 1.15; color: var(--navy); }
.shape__fake--wide > [data-plate] { container-type: inline-size; }
.shape__t--over { left: 40%; right: -8%; color: var(--navy); font-weight: 500; white-space: nowrap; }

/* page layout */
.shape__side { align-content: start; }
.shape__side .btn { justify-self: start; }
.shape__tool-lead { margin-top: 6px; }
.shape__intro { max-width: 52em; }
.shape__view { margin-top: 22px; }
.shape__photos--lg .shape__ph:first-child { max-width: 460px; }
.shape__fb--lg .shape__fb-i { flex-basis: 380px; width: min(100%, 380px); }
.shape__pairs { align-items: flex-start; }
.shape__pair { display: grid; gap: 18px; align-content: start; }
.shape__pair .rule__box { min-height: 0; }
.shape__pair .shape__fake { max-width: 100%; }

@media (max-width: 900px) { .shape__built { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .shape__orient { flex-direction: column; align-items: center; }
  .shape__o { width: 100%; flex: none; }
  .shape__o--v { width: 52%; } .shape__o--s { width: 72%; }
  .shape__fb-i { flex-basis: 50%; }
  .shape__badge { width: 24px; height: 24px; font-size: .75rem; }
}

.shape__pair .shape__fake--wide { aspect-ratio: 4 / 3; max-width: 100%; }