/* ============================================================
   GECKO — Posts de Instagram (1080 × 1080)
   ============================================================ */
.post {
  width: 1080px; height: 1080px; position: relative; overflow: hidden;
  font-family: var(--font-body); color: var(--ink); background: var(--paper);
  display: flex; flex-direction: column;
}
.post * { box-sizing: border-box; }
.post .wm { font-family: var(--font-display); font-weight: 900; letter-spacing: -.035em; line-height: .9; display: inline-flex; align-items: flex-end; }
.post .wm .m { display: inline-block; width: .34em; height: .8em; margin-left: .1em; background: var(--red); transform: skewX(-16deg); }
.post .mono { font-family: var(--font-mono); }
.post .haz { background-image: repeating-linear-gradient(-45deg, var(--ink) 0 26px, var(--red) 26px 52px); }

/* corner brand + handle bar */
.pbar { display: flex; align-items: center; justify-content: space-between; padding: 54px 60px; }
.pbar .wm { font-size: 46px; }
.pbar .wm.light { color: var(--white); }
.pbar .wm.light .m { background: var(--white); }
.handle { font-family: var(--font-mono); font-size: 24px; letter-spacing: .08em; color: var(--steel-2); }
.handle.light { color: rgba(255,255,255,.6); }

.pfoot { display: flex; align-items: center; justify-content: space-between; padding: 44px 60px; font-family: var(--font-mono); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.pfoot.light { color: rgba(255,255,255,.62); }
.pfoot .dotsep { display: inline-flex; gap: 16px; align-items: center; }

.pbody { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 60px; }

/* themes */
.post.ink { background: var(--ink); color: var(--white); }
.post.red { background: var(--red); color: var(--white); }
.post.ink .handle, .post.red .handle { color: rgba(255,255,255,.6); }

.kicker { font-family: var(--font-mono); font-size: 24px; letter-spacing: .26em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 16px; }
.kicker::before { content:""; width: 46px; height: 3px; background: var(--red); }
.kicker.light { color: var(--white); }
.kicker.light::before { background: var(--white); }

.huge { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; line-height: .92; }
.outline { -webkit-text-stroke: 3px currentColor; color: transparent; }

.tape { position: absolute; left: 0; right: 0; height: 30px; }

.pill { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; background: var(--red); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 26px; letter-spacing: .04em; padding: 14px 28px; border-radius: 999px; }
.pill.ink { background: var(--ink); }
.pill.ghost { background: transparent; border: 2px solid currentColor; }

.ph-img { position: relative; background-color: var(--paper-2); background-image: repeating-linear-gradient(-45deg, rgba(20,21,26,.06) 0 16px, transparent 16px 32px); display: grid; place-items: center; color: var(--steel-2); font-family: var(--font-mono); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.ph-img::after { content: attr(data-label); padding: 8px 14px; border: 1.5px dashed var(--line-2); border-radius: 6px; background: rgba(255,255,255,.5); }