/* Instagram facade: poster cards built from Mary's own photography, so
   nothing of Instagram's loads until someone taps one. */
.ig-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
@media (min-width:900px){
  .ig-grid--feature{grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:stretch}
}
.ig-card{position:relative;display:block;width:100%;padding:0;border:1px solid var(--hair-oro);
  border-radius:var(--r);overflow:hidden;background:var(--plum-900);cursor:pointer;
  aspect-ratio:9/16;text-align:left;
  transition:transform .2s var(--ease),border-color .2s var(--ease)}
.ig-card:hover{transform:translateY(-3px);border-color:var(--hair-oro-2)}
.ig-card:active{transform:translateY(0)}
.ig-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,1,9,.9) 0%,rgba(6,1,9,.25) 48%,rgba(6,1,9,.5) 100%)}
.ig-card__play{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;
  width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(6,1,9,.55);box-shadow:inset 0 0 0 1.5px var(--oro);color:var(--oro);
  backdrop-filter:blur(4px);transition:transform .2s var(--ease)}
.ig-card:hover .ig-card__play{transform:scale(1.08)}
.ig-card__play svg{width:22px;height:22px;margin-left:3px}
.ig-card__label{position:absolute;left:14px;right:14px;bottom:13px;z-index:2;
  font-size:14px;font-weight:600;color:var(--on-dark);line-height:1.3}
.ig-card__label small{display:block;font-size:12px;font-weight:500;color:var(--on-dark-muted);margin-top:2px}

/* the embed once it is live */
.ig-live{min-height:420px;border-radius:var(--r);overflow:hidden;background:var(--plum-900);
  border:1px solid var(--hair-oro);display:flex;justify-content:center}
.ig-live iframe{max-width:100%!important;margin:0 auto!important}

/* a phone gets a sheet; an inline embed inside a grid is unreadable at 375px */
.ig-sheet{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;
  background:rgba(6,1,9,.86);backdrop-filter:blur(6px)}
.ig-sheet.open{display:flex}
.ig-sheet__panel{position:relative;width:100%;max-height:92vh;overflow:auto;
  background:var(--plum-950);border-top-left-radius:20px;border-top-right-radius:20px;
  border-top:1px solid var(--hair-oro);padding:48px 12px calc(16px + env(safe-area-inset-bottom))}
.ig-sheet__x{position:absolute;right:10px;top:8px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(252,181,87,.12);color:var(--oro);font-size:26px;line-height:1;cursor:pointer}
.ig-sheet__body{display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){.ig-card,.ig-card__play{transition:none}}

/* Always-available escape hatch: Instagram embeds are blocked in some
   browsers and privacy modes, so the permalink is never more than one tap
   away even when the embed cannot render. */
.ig-item{display:flex;flex-direction:column;gap:8px}
.ig-card__out{font-size:13px;font-weight:600;color:var(--oro);text-decoration:none;
  text-align:center;padding:6px 4px;border-radius:999px}
.ig-card__out:hover{background:rgba(252,181,87,.1)}