/* My story: one column, three rows. Title matches the intro's section titles. */
.about-layout { gap: 1.75rem; padding-bottom: 0; }
.about-hero { margin-bottom: 0; }
.story-divider { display: block; width: 100%; height: 56px; margin: 0; pointer-events: none; }

/* story on the left, the burger toy on the right */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.story-grid .bs { max-width: none; padding: 0; }
.story-grid .bs-head { flex-direction: column; align-items: flex-start; gap: .9rem; margin-bottom: .25rem; }
.story-grid .bs-title { margin-bottom: .25rem; }
.story-grid .bs-stage canvas { height: 290px; }
.story-title { margin: 0 0 1.5rem; font-size: 24px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: #585858; }
.story-rows { display: flex; flex-direction: column; gap: 2rem; max-width: 40em; }
.story-lead { margin: 0 0 .7rem; font-size: 21px; font-weight: 400; line-height: 1.4; letter-spacing: -.005em; color: #1c1c1c; }
.story-body { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.65; color: #585858; }
@media (max-width: 1024px) { .about-hero { margin-bottom: 3rem; } .story-grid { grid-template-columns: 1fr; gap: 3rem; } .story-grid .bs-stage canvas { height: 280px; } }
@media (max-width: 640px) { .story-lead { font-size: 19px; } .about-layout { gap: 1.5rem; } .story-grid .bs-stage canvas { height: 280px; } }

.kitchen-scene { display: block; width: 100%; height: 270px; margin-top: .5rem; pointer-events: none; }
@media (max-width: 640px) { .kitchen-scene { height: 230px; } }

/* photos: a loose pile; click to send the top one to the back */
.photos { display: block; }
.photos-hint { margin: -1rem 0 0; font-size: 16px; font-weight: 300; color: #585858; }
.photo-strip { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 3; margin: 1.75rem auto .75rem; }
.photos .photo-item { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #fffdfb; border: 6px solid #fffdfb; box-sizing: border-box; box-shadow: 0 6px 18px rgba(60, 40, 30, .12); cursor: pointer; user-select: none; -webkit-user-select: none; outline: none; transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, box-shadow .2s ease; will-change: transform; }
.photos .photo-item[aria-hidden="true"] { cursor: default; }
.photos .photo-item.leaving { transition: transform .3s cubic-bezier(.5, 0, .75, 0); }
.photos .photo-item.notrans { transition: none; }
.photos .photo-item:focus-visible { box-shadow: 0 0 0 2px rgba(211, 160, 160, .8), 0 6px 18px rgba(60, 40, 30, .12); }
.photos .photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; pointer-events: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) { .photos .photo-item { transition: none; } }
@media (max-width: 640px) { .photo-strip { width: min(88%, 420px); } }