/* ---------------------------------------------------------------------------
   Latest & Coming Soon — shared post furniture.
   Three posts share this markup exactly; each layout file below arranges and
   colours them differently.
   ------------------------------------------------------------------------- */

.postfeed{ --post-ink: var(--paper); }

.post{ position: relative; color: var(--post-ink); }
.post + .post{ margin-top: 72px; }

.post-kicker{
  display: inline-block;
  font-family: var(--body);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  color: var(--soil); background: var(--peach);
  padding: 7px 14px; border-radius: 100px;
  margin-bottom: 16px;
}
.post-kicker.dark{ color: #ffd9c2; background: rgba(255,199,164,0.16); }

.post-title{
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--post-accent, var(--peach));
}
.post-copy{
  margin: 0 0 12px;
  font-size: 1.02rem; line-height: 1.64;
  color: var(--post-body, #e7dbd1);
}
.post-copy.quiet{ font-size: 0.92rem; opacity: 0.78; margin-top: 18px; }
.post-meta{
  font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--post-body); opacity: 0.7;
  margin: 16px 0 0;
}

/* ---------- gig gallery ---------- */
.post-head{
  display: grid;
  grid-template-columns: var(--head-cols, 0.92fr 1.08fr);
  gap: 18px 48px;
  align-items: end;
  margin-bottom: 28px;
}
@media (max-width: 820px){
  .post-head{ grid-template-columns: 1fr; gap: 14px; align-items: start; }
}

.gig-gallery{
  display: grid;
  grid-template-columns: 1.72fr 1fr 1fr;
  grid-auto-rows: clamp(250px, 30vw, 420px);
  gap: 14px;
}
.gig-gallery figure{ position: relative; margin: 0; overflow: hidden; border-radius: 16px; }
.gig-gallery img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.g-hero img{ object-position: center 50%; }
.gig-gallery figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 12px;
  font-family: var(--body); font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%);
}
@media (max-width: 820px){
  .gig-gallery{ grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(170px, 40vw, 260px); }
  .g-hero{ grid-column: 1 / -1; }
}

/* ---------- documentary: a strip of film ---------- */
.docpost{
  background: #16222c;
  border-radius: 10px;
  padding: 48px 34px;
  --post-accent: #ffd9c2;
  --post-body: #d8e0e6;
  overflow: hidden;
}
.docpost::before,
.docpost::after{
  content: '';
  position: absolute; left: 0; right: 0; height: 22px;
  background-image: radial-gradient(ellipse 6px 5px at center,
      rgba(255,255,255,0.34) 0 98%, transparent 100%);
  background-size: 26px 22px;
  background-repeat: repeat-x;
}
.docpost::before{ top: 0; }
.docpost::after{ bottom: 0; }
.docpost > *{ position: relative; }

.redact{
  font: inherit; color: transparent;
  background: #0b1219;
  border: 0; border-radius: 3px;
  padding: 0 5px; margin: 0 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  transition: color .18s ease, background .18s ease;
}
.redact:hover,
.redact:focus-visible,
.redact.shown{ color: #ffd9c2; background: rgba(255,217,194,0.12); }
@media (prefers-reduced-motion: reduce){ .redact{ transition: none; } }

/* ---------- Rivers and Reptiles ---------- */
.eppost{
  border-radius: 10px;
  padding: 40px 34px 36px;
}
/* standing on the bottom edge rather than over the heading */
.eppost-critter{
  position: absolute;
  width: 76px; height: auto;
  right: var(--ep-critter-x, 34px);
  bottom: -6px;
  transform: rotate(5deg);
  transform-origin: bottom center;
  filter: var(--ep-critter, brightness(0) opacity(0.72));
  pointer-events: none;
}
.post-head{ margin-bottom: 0; }
.gigpost .post-head{ margin-bottom: 28px; }
@media (max-width: 560px){ .eppost-critter{ width: 58px; } }