#fambam-family-story { min-height: 220px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(240px,.9fr); gap: 24px; overflow: hidden; padding: clamp(24px,4vw,42px); margin: 0 0 42px; border: 1px solid oklch(85% .048 112); border-radius: 26px; background: oklch(93.5% .043 112); }
#fambam-family-story > div:first-child { max-width: 48ch; display: grid; align-content: center; gap: 12px; } #fambam-family-story h2 { max-width: 13ch; margin: 0; color: oklch(27% .025 92); font-size: clamp(1.75rem,4vw,2.7rem); line-height: 1.02; letter-spacing: -.055em; } #fambam-family-story p { margin: 0; color: oklch(51% .025 87); line-height: 1.55; }
.fambam-sticker,.fambam-birthday { width: fit-content; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-size: .72rem; font-weight: 780; }.fambam-sticker { padding: 7px 10px; color: oklch(36% .085 120); background: oklch(97% .03 110); }.fambam-birthday { padding: 10px 13px; color: oklch(43% .075 70); background: oklch(96.5% .045 82); }.fambam-birthday small { color: oklch(48% .04 75); font-weight: 500; }
.fambam-home-art { position: relative; min-height: 160px; align-self: end; background: radial-gradient(circle at 77% 20%, oklch(84% .125 86) 0 25px, transparent 26px), linear-gradient(155deg, transparent 0 56%, oklch(77% .074 126) 57%); }.fambam-home-art i { position: absolute; right: 56px; bottom: 0; width: 116px; height: 88px; border-radius: 12px 12px 7px 7px; background: oklch(72% .092 45); }.fambam-home-art i::before { content:""; position:absolute; top:-49px; left:-15px; border-right:73px solid transparent; border-bottom:52px solid oklch(54% .085 31); border-left:73px solid transparent; }.fambam-home-art b,.fambam-home-art em,.fambam-home-art span { position:absolute; bottom:7px; width:21px; border-radius:13px 13px 8px 8px; background:oklch(51% .08 125); }.fambam-home-art b { right:185px; height:61px; background:oklch(66% .08 48); }.fambam-home-art em { right:157px; height:51px; background:oklch(62% .08 235); }.fambam-home-art span { right:129px; height:38px; background:oklch(58% .09 320); }.fambam-home-art b::before,.fambam-home-art em::before,.fambam-home-art span::before { content:""; position:absolute; top:-16px; left:2px; width:17px; height:17px; border-radius:50%; background:oklch(80% .065 61); }.fambam-home-art strong { position:absolute; left:45px; bottom:12px; width:40px; height:12px; border-radius:999px; background:oklch(98% .012 100); }
.fambam-memory-book { padding: 0 0 35px; margin: 0 0 35px; border-bottom: 1px solid oklch(87% .021 84); }.fambam-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:15px; }.fambam-section-head p { margin:0; color:oklch(40% .077 125); font-size:.72rem; font-weight:780; letter-spacing:.1em; text-transform:uppercase; }.fambam-section-head h2 { margin:4px 0 0; color:oklch(27% .025 92); font-size:1.22rem; }.fambam-section-head button,.fambam-memory-controls button { min-height:40px; border:1px solid oklch(87% .021 84); border-radius:12px; padding:0 13px; color:oklch(27% .025 92); background:oklch(98.5% .011 88); font-weight:700; cursor:pointer; }.fambam-memory-controls { display:flex; gap:10px; margin-bottom:14px; }.fambam-memory-controls input:not(.fambam-photo-input) { flex:1; min-width:0; min-height:40px; border:1px solid oklch(87% .021 84); border-radius:12px; padding:0 12px; color:oklch(27% .025 92); background:oklch(98.5% .011 88); }
.fambam-memory-ribbon { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(156px,1fr); gap:12px; overflow-x:auto; padding:2px 2px 10px; }.fambam-memory-card { min-height:184px; display:grid; grid-template-rows:1fr auto; overflow:hidden; border:1px solid oklch(87% .021 84); border-radius:17px; background:oklch(98.5% .011 88); }.fambam-memory-card img { width:100%; height:122px; object-fit:cover; }.fambam-memory-card > div { display:grid; gap:3px; padding:12px; }.fambam-memory-card strong { color:oklch(27% .025 92); font-size:.82rem; }.fambam-memory-card small { color:oklch(51% .025 87); font-size:.69rem; }.fambam-memory-card.fanciful > span { display:grid; place-items:center; min-height:122px; color:oklch(43% .075 70); background:oklch(91% .065 78); font-size:2.25rem; }.fambam-memory-card.fanciful:nth-child(2n) > span { color:oklch(47% .095 325); background:oklch(91% .055 333); }
@media (max-width:700px) { #fambam-family-story { grid-template-columns:1fr; gap:8px; padding:24px 20px 0; margin-bottom:31px; border-radius:22px; } #fambam-family-story h2 { max-width:17ch; font-size:2rem; }.fambam-home-art { min-height:142px; }.fambam-home-art i { right:55px; transform:scale(.82); transform-origin:bottom right; }.fambam-home-art b { right:164px; }.fambam-home-art em { right:136px; }.fambam-home-art span { right:108px; }.fambam-memory-controls { flex-direction:column; }.fambam-memory-ribbon { grid-auto-columns:minmax(150px,72vw); }.fambam-section-head { align-items:flex-start; }.fambam-section-head button { display:none; } }