/* About page wrapper — centered with site max-width */
.about-wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gap) }

/* About intro: single column (override shared .prose columns:2) */
.about-wrap .prose{ columns:1 }

/* About: let text blocks fill the full content column
   (override shared max-widths of 820/640px) */
.about-wrap .manifest,
.about-wrap .prose,
.about-wrap .essay{
  max-width:none;
}

/* About: Divisions grid (§ 02) — the four pillars card block */
.divisions{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.div-card{
  background:var(--bg);
  padding:clamp(24px, 3vw, 40px);
  display:flex; flex-direction:column; gap:.8rem;
  min-height:260px;
  overflow:hidden;
  transition:background .2s;
}
.div-card:hover{ background:var(--surface) }

/* § 02 cover image — pulled from the newest entry of each division.
   Uses negative margin to bleed into the card's padding on top/left/right. */
.div-cover{
  margin: calc(clamp(24px, 3vw, 40px) * -1);
  margin-bottom: .4rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.div-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(.35) contrast(1.02);
  transition: transform .5s ease, filter .3s ease;
}
.div-card:hover .div-cover img{
  transform: scale(1.04);
  filter: grayscale(0) contrast(1);
}

/* POOLzine cover — channel-style label overlay (matches the "≡03" /
   "099" block language of POOLtracks / POOLcast covers): black block,
   yellow display typo, centered on the image. */
.div-card.poolzine .div-cover{
  position: relative;
  isolation: isolate;
}
.div-card.poolzine .div-cover img{
  filter: grayscale(.2) contrast(1.05) brightness(.95);
}
.div-card.poolzine:hover .div-cover img{
  filter: grayscale(0) contrast(1.05) brightness(1);
}
.div-card.poolzine .div-cover::after{
  content: "ZINE";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--poolzine);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6cqw, 4.5rem);
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .5s ease;
  z-index: 1;
}
.div-card.poolzine:hover .div-cover::after{
  transform: translate(-50%, -50%) scale(1.02);
}
.div-num{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-light);
}
.div-name{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.div-card.poolcast   .div-name{ color:var(--poolcast) }
.div-card.pooltracks .div-name{ color:var(--pooltracks) }
.div-card.poolzine   .div-name{ color:var(--poolzine) }
.div-card.plo        .div-name{ color:var(--plo) }
.div-desc{
  font-size:.95rem; color:var(--text-mid); line-height:1.55; flex:1;
}
.div-link{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text);
  padding-top:.8rem; border-top:1px solid var(--line);
  display:inline-flex; align-items:center; gap:.5rem;
  align-self:flex-start;
}
.div-link:hover{ color:var(--text-light) }

@media (max-width:1100px){ .divisions{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:560px){  .divisions{ grid-template-columns:1fr } }