/* Approved pineapple section, 2026-10-30. Integrated photographic scene. */
#crack-previous[hidden] { display: none !important; }
.pineapple-moment { position:relative; isolation:isolate; aspect-ratio:2/1; background:var(--cream); color:var(--text-dark); overflow:hidden; scroll-margin-top:var(--nav-h); }
.pineapple-visual { position:absolute; inset:0; background:url("assets/pineapple-spacious-scene.png") center/100% 100% no-repeat; }
.pineapple-ready { white-space:nowrap; }
.pineapple-copy { position:relative; margin-left:54%; width:43%; padding:14% 0 5%; }
.pineapple-copy h2 { font-family:var(--display); font-weight:400; font-size:clamp(34px,4.6vw,88px); line-height:1.08; letter-spacing:.005em; }
.pineapple-copy h2 .tone { display:block; }
.pineapple-copy p { font-size:clamp(14px,1.25vw,24px); line-height:1.6; margin:1.2em 0 0; max-width:29em; }
@media(min-width:2000px) { .pineapple-copy { padding-top:14%; } }
@media(max-width:700px) {
 .pineapple-moment { aspect-ratio:auto; }
 .pineapple-visual { position:relative; aspect-ratio:1.3; background-size:auto 100%; background-position:left center; }

 .pineapple-copy { margin:0; width:auto; padding:32px 24px 42px; background:var(--cream); }
 .pineapple-copy h2 { font-size:clamp(40px,10.5vw,66px); }
 .pineapple-copy p { font-size:17px; max-width:30em; }
}

.pineapple-title-line { display:block; white-space:nowrap; }
@media(max-width:700px) { .pineapple-copy h2 { font-size:clamp(27px,7.2vw,48px); } }

/* Trim only the bottom edge; preserve the approved photo scale and placement. */
@media(min-width:701px) {
 .pineapple-moment { aspect-ratio:25/11; }
 .pineapple-visual { bottom:auto; width:100%; aspect-ratio:2/1; }
 .pineapple-copy { padding-top:9.6%; }
}

/* Soften the bright photo: 30% black at the right edge, fading to 10% at the left. */
.pineapple-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,11,8,.1), rgba(14,11,8,.3)); pointer-events:none; }