/* Personal portrait and an optional, isolated Instagram view. */
.view .portrait { background: #12212a; overflow: hidden; }
.portrait > img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.view .instagram-gallery { margin-top: 24px; padding: 24px; display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
.instagram-heading { display: flex; gap: 16px; align-items: center; min-width: 0; }
.instagram-heading > img { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; padding: 3px; border: 1px solid #9e94f4; flex-shrink: 0; }
.instagram-heading .micro { color: #9bfbd4; margin: 0 0 4px; }
.view .instagram-gallery h3 { font: 600 calc(var(--text-scale) * 24px)/1.25 var(--display); overflow-wrap: anywhere; }
.view .instagram-gallery .gallery-copy { font: calc(var(--text-scale) * 16px)/1.65 var(--font); color: #cfdfeb; max-width: 58ch; margin-top: 16px; }
.instagram-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.instagram-actions :is(a,button) { min-height: 44px; padding: 11px 15px; border-radius: 7px; font: 600 calc(var(--text-scale) * 14px)/1.5 var(--font); border: 1px solid #77ddc678; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.instagram-actions button { background: #21534d5c; color: #a2ffda; }
.instagram-actions a { border-color: #9ea5e879; color: #dde5fa; }
.instagram-actions :is(a,button):hover { background: #4a63894d; }
.view .instagram-gallery .gallery-note { font: calc(var(--text-scale) * 13px)/1.6 var(--font); color: #a4bdcd; margin-top: 12px; max-width: 65ch; }
.instagram-preview { border: 1px solid #7e9caf4d; border-radius: 12px; padding: 22px; display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; background: radial-gradient(ellipse at top right,#935dc82b,#0b1b2999 75%); }
.instagram-preview > svg { width: 46px; height: 46px; stroke: #baa1ff; }
.instagram-preview > strong { font: 500 calc(var(--text-scale) * 20px)/1.4 var(--display); }
.instagram-preview > span { font: calc(var(--text-scale) * 13px)/1.6 var(--font); color: #a9c6d7; }
.instagram-frame-area { grid-column: 1 / -1; min-width: 0; width: 100%; }
.instagram-frame-area[hidden], .instagram-preview[hidden] { display: none; }
.instagram-frame-area iframe { display: block; width: min(100%,560px); height: 680px; margin-inline: auto; border: 0; border-radius: 10px; background: #fff; }
@media (min-width: 700px) {
  .view .instagram-gallery { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: stretch; padding: 30px; }
}
@media (max-width: 359px) {
  .view .instagram-gallery { padding: 20px 14px; }
  .instagram-actions :is(a,button) { width: 100%; }
}