.ab .dm-surface { overflow: visible; }
.ab-grid { position: relative; display: block; }
.ab .term-body { min-height: 420px; font-size: 12.5px; }
.ab .dm-bar { position: relative; }
.ab-skip { margin-left: auto; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #b9bbc2; font: 500 11px/1 var(--mono); cursor: pointer; }
.ab-skip:hover { color: #fff; border-color: #fff; }
.ab .term a { color: #8ab4ff; text-underline-offset: 3px; }
.ab .tag { display: inline-block; margin: 0 4px 2px 0; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #e9e8e4; }
.ab .yr { color: #e8c07a; }
/* the same small photo as the "Say hi" on the homepage: off-white card, soft shadow, a slight tilt */
.ab-polaroid { position: absolute; bottom: calc(-1 * clamp(34px, 4vw, 64px)); right: clamp(18px, 4vw, 56px); z-index: 3; margin: 0; width: clamp(120px, 14vw, 190px); rotate: 5deg; padding: 9px 9px 11px; background: #fbfaf7; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.18); }
.ab-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 9px; }
@media (max-width: 860px) { .ab-polaroid { position: relative; bottom: 0; right: 0; rotate: -4deg; margin: 18px auto -12px; } }
@media (prefers-reduced-motion: reduce) { .ab-polaroid { rotate: 0deg; } }