/* Section 3 — round 3 (Claude Design, 1 Sep 2026). Scope: .promise only.
   Two treatments of the B direction, fixing the two QC defects:
   1. photo seam -> integrated edge (dissolve or physical print)
   2. stranded ANTIFRAGILE label -> label sits above the statement, same column. */

.promise[data-statement^="b-"] .promise-inner { grid-template-columns: minmax(0,1fr); gap: 26px; padding-top: 92px; padding-bottom: 96px; }
.promise[data-statement^="b-"] .promise-label { padding-top: 0; }
.promise[data-statement^="b-"] .promise-body { grid-template-columns: minmax(0,7fr) minmax(0,4fr); grid-template-rows: auto 1fr; column-gap: clamp(40px,5vw,80px); row-gap: 30px; align-items: start; }
.promise[data-statement^="b-"] .promise-copy { grid-column: 1; grid-row: 1; max-width: 11.5em; font-size: clamp(40px,4.2vw,62px); }
.promise[data-statement^="b-"] .promise-copy em { display: block; }
.promise[data-statement^="b-"] .promise-support { grid-column: 1; grid-row: 2; max-width: 30em; }
.promise[data-statement^="b-"] .promise-photo { display: block; grid-column: 2; grid-row: 1 / 3; position: relative; min-width: 0; }

/* B-dissolve — the photograph emerges from the section's own dark, all four edges fade into the ground (same mask language as the locked hero). */
.promise[data-statement="b-dissolve"] .promise-photo { align-self: stretch; display: flex; align-items: center; }
.promise[data-statement="b-dissolve"] .promise-photo image-slot,
.promise[data-statement="b-dissolve"] .promise-photo img {
  width: 100%; aspect-ratio: 4 / 5; max-height: 470px; object-fit: cover; object-position: 66% 86%;
  filter: saturate(.86) contrast(1.06) brightness(.92);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
              linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
                      linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
}
.promise[data-statement="b-dissolve"]::after { opacity: .5; }

/* B-print — the photograph is a physical print lying on the dark ground: paper margin, slight tilt, deep soft shadow. The edge is intentional, an object, not a seam. */
.promise[data-statement="b-print"] .promise-photo { align-self: center; justify-self: end; width: min(100%, 392px); padding: 11px 11px 15px; background: var(--paper); transform: rotate(-.7deg); box-shadow: 0 38px 80px -30px rgba(0,0,0,.9), 0 8px 22px rgba(0,0,0,.42); }
.promise[data-statement="b-print"] .promise-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.07), transparent 42%, rgba(15,13,9,.10)); }
.promise[data-statement="b-print"] .promise-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 66% 86%; filter: saturate(.84) contrast(1.05); }
.promise[data-statement="b-print"]::after { opacity: .5; }

@media (max-width: 960px) {
  .promise[data-statement^="b-"] .promise-body { column-gap: 30px; }
}
@media (max-width: 700px) {
  .promise[data-statement^="b-"] .promise-inner { padding-top: 64px; padding-bottom: 68px; gap: 20px; }
  .promise[data-statement^="b-"] .promise-body { grid-template-columns: minmax(0,1fr); row-gap: 26px; }
  .promise[data-statement^="b-"] .promise-copy { max-width: none; font-size: clamp(36px,10.4vw,46px); }
  .promise[data-statement^="b-"] .promise-photo { grid-column: 1; grid-row: 3; margin-top: 8px; }
  .promise[data-statement="b-dissolve"] .promise-photo { align-self: auto; display: block; }
  .promise[data-statement="b-dissolve"] .promise-photo image-slot,
  .promise[data-statement="b-dissolve"] .promise-photo img { aspect-ratio: auto; height: 270px; max-height: none; }
  .promise[data-statement="b-print"] .promise-photo { justify-self: center; width: min(100%, 330px); transform: rotate(-.5deg); }
  .promise[data-statement="b-print"] .promise-photo img { aspect-ratio: 4 / 3; }
}