.chain {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  padding: var(--space-6) var(--space-2);
}
/* moved over from The Trade section (removed 2026-09-02, see DESIGN.md)
   — same night-skyline photo (research/leonida/assets/Vice_City_08.jpg
   via visitleonida.online) and the same treatment: desaturated, faded to
   var(--bg-deep) top and bottom so it reads as atmosphere behind the
   bento grid, not a second photo competing with .chain__card--lg's own. */
.chain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, var(--bg-deep) 0%, rgba(5,5,6,0.85) 12%, rgba(5,5,6,0.9) 88%, var(--bg-deep) 100%),
    url('../assets/trade-bg.jpg');
  background-size: cover;
  background-position: center, center 30%;
  filter: saturate(0.7);
  transform: scale(1.05);
}

.chain > .section-heading,
.chain__grid {
  position: relative;
  z-index: 1;
}

.chain > .section-heading {
  width: var(--container);
  /* base .section-heading caps at max-width: 16ch for line-wrapping —
     harmless when left-aligned, but combined with margin-inline: auto
     centering this now-narrower box, it made the heading read as
     centered on the page instead of left-aligned with .chain__grid
     below it (which has no such cap). Overriding it back open lets the
     heading's box span the same full container width, so both line up
     on the same left edge. */
  max-width: none;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.chain__grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1px;
  /* design-system blue (var(--cyan)) frames the whole bento instead of the
     old barely-there white hairline — the gap shows through as the grid
     lines between cards, and the border repeats it around the outer
     cutout, so both read as one consistent frame. */
  background: rgba(22, 232, 224, 0.35);
  border: 1px solid rgba(22, 232, 224, 0.45);
}

.chain__card {
  background: var(--bg-deep);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 12rem;
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* background-color, not the background shorthand — a shorthand here would
   reset background-image to none on hover, wiping .chain__card--lg's
   photo (and now .chain::before's would be a separate matter, but the
   same trap) every time the cursor entered any card. z-index on hover
   lifts the card above its neighbors so the glow's box-shadow — which
   spills out past the card's own edges — doesn't get clipped by the
   next grid cell painting over it. */
.chain__card:hover {
  background-color: #0f0d14;
  z-index: 3;
  box-shadow:
    0 0 0 1px rgba(22, 232, 224, 0.7),
    0 0 28px 4px rgba(22, 232, 224, 0.4),
    inset 0 0 32px rgba(22, 232, 224, 0.12);
}

.chain__card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin-bottom: 0.5rem;
  color: var(--magenta);
}
.chain__card p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg);
  opacity: 0.78;
}

.chain__card--lg {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 22rem;
  position: relative;
  background-image:
    linear-gradient(0deg, rgba(5,5,6,0.92) 0%, rgba(5,5,6,0.55) 45%, rgba(5,5,6,0.15) 100%),
    url('../assets/solanachain.jpg');
  background-size: cover;
  background-position: center;
}
.chain__card--lg h3 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); color: var(--cyan); }
.chain__card--lg p { max-width: 32ch; }

/* the four social/community tiles: a 2x2 grid filling the same footprint
   .chain__card--lg takes up on its own — each spans a quarter of the
   bento (3 of 12 columns, 1 of 2 rows), so the whole section tiles
   perfectly with no leftover space. Every tile gets its own full-bleed
   background image (background-size: cover crops/scales each one to
   exactly fill its own card) plus the same scrim as .chain__card--lg for
   text legibility over it. */
.chain__card--social {
  grid-column: span 3;
  position: relative;
  overflow: hidden;
}
.chain__card--social h3,
.chain__card--social p {
  position: relative;
  z-index: 2;
}
.chain__card--social h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.chain__card--social p { max-width: 24ch; }

.chain__card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(5,5,6,0.94) 0%, rgba(5,5,6,0.5) 55%, rgba(5,5,6,0.08) 100%);
}

.chain__card--gta {
  background-image: url('../assets/discordlogo.png');
  background-size: cover;
  background-position: center;
}
.chain__card--reddit {
  background-image: url('../assets/reddit.jpg');
  background-size: cover;
  background-position: center;
}
.chain__card--telegram {
  background-image: url('../assets/chain-bg.jpg');
  background-size: cover;
  background-position: center 20%;
}
.chain__card--x {
  background-image: url('../assets/og-image.jpg');
  background-size: cover;
  background-position: center;
}

@media (max-width: 800px) {
  .chain__grid { grid-template-columns: repeat(4, 1fr); }
  .chain__card--lg { grid-column: span 4; grid-row: auto; min-height: 14rem; }
  .chain__card--social { grid-column: span 2; }
}