:root { --wool-texture: url('/assets/little-bao-house/wool/felt-oat-v2.webp'); --wool-patch: url('/assets/little-bao-house/wool/felt-patch-v2.webp'); --wool-green: brightness(.4) sepia(.6) saturate(.7) hue-rotate(32deg); }
body { background-image: linear-gradient(#faf6edb8,#faf6edb8),var(--wool-texture); background-size: auto,512px 512px; }
h1,h2,h3 { text-shadow: 0 1px 0 #fff7dc70,0 2px 1px #312f2424; }
.button, .header nav a, .copy-command, .room-tabs button, .topics label, .motion-toggle, .compatibility span { position:relative; isolation:isolate; border-color:transparent; background:transparent; box-shadow:none; border-radius:0; }
.button::before, .header nav a::before, .copy-command::before, .room-tabs button::before, .topics label::before, .motion-toggle::before, .compatibility span::before { content:''; position:absolute; inset:-10px -12px; z-index:-1; pointer-events:none; border:22px solid transparent; border-image:var(--wool-patch) 190 140 fill /22px /0 stretch; filter:drop-shadow(0 3px 2px #3e39202a); }
.button::before { filter:var(--wool-green) drop-shadow(0 3px 2px #293c2d40); }
.button-cream::before { filter:drop-shadow(0 3px 2px #293c2d40); }
.button:hover, .button:active { background:transparent; box-shadow:none; transform:translateY(1px); }
.button:active::before { filter:var(--wool-green) drop-shadow(0 1px 1px #293c2d30); }
.button-cream:active::before { filter:drop-shadow(0 1px 1px #293c2d30); }
.header { border:0; }
.header nav { gap:28px; }
.header nav a { padding:10px 18px; color:#34452f; }
.header nav .nav-letter { border:0; border-radius:0; }
.header nav a:hover { text-decoration:none; transform:translateY(1px); }
.brand { position:relative; isolation:isolate; padding:13px 20px; }
.brand::before { content:''; position:absolute; inset:-4px -7px; z-index:-1; pointer-events:none; border:22px solid transparent; border-image:var(--wool-patch) 190 140 fill /22px /0 stretch; filter:drop-shadow(0 4px 3px #34452f26); }
.house-home > .header { position:absolute; z-index:3; top:20px; left:50%; transform:translateX(-50%); min-height:0; }
.welcome-scene { position:relative; height:max(600px,100svh); }
.scroll-welcome .welcome-scene { height:300svh; }
.welcome-stage { height:100svh; min-height:600px; position:relative; overflow:hidden; background:#6c7755; }
.scroll-welcome .welcome-stage { position:sticky; top:0; }
.welcome-poster, .welcome-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.welcome-film { opacity:0; pointer-events:none; }
.welcome-film.has-frame { opacity:1; }
.welcome-copy { position:absolute; left:5.6%; bottom:120px; max-width:400px; padding:22px 32px 30px; isolation:isolate; }
.welcome-copy::before { content:''; position:absolute; inset:-22px -18px; z-index:-1; border:38px solid transparent; border-image:var(--wool-patch) 190 140 fill /38px /0 stretch; }
.welcome-copy h1 { font-size:clamp(38px,4.8vw,65px); line-height:1.07; letter-spacing:-.025em; }
.welcome-copy p { margin-top:17px; font-size:16px; line-height:1.6; color:#4a493a; }
.welcome-controls { position:absolute; bottom:25px; left:5.6%; right:5.6%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.welcome-controls > div { display:flex; gap:25px; align-items:center; }
.scroll-invitation { position:relative; isolation:isolate; font-size:14px; font-weight:800; padding:10px 20px; color:#34452f; }
.scroll-invitation::before { content:''; position:absolute; inset:-9px -12px; z-index:-1; border:22px solid transparent; border-image:var(--wool-patch) 190 140 fill /22px /0 stretch; }
.welcome-controls .motion-toggle { min-height:44px; font-size:12px; color:#34452f; }
.motion-toggle::before { margin:0; font-size:inherit; }
.scene-description { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.family { position:relative; }
.family-stage { background-color:#e1e8d3; background-image:linear-gradient(#e1e8d3b3,#e1e8d3b3),var(--wool-texture); background-size:auto,400px; border-radius:40% 8% 12% 5% /3% 5% 5% 7%; box-shadow:0 5px 3px #343d2620; }
.portrait-felt { width:290px; padding:12px;background-image:var(--wool-texture);background-size:300px;border-radius:10px;box-shadow:0 3px 3px #343d2640; transform:rotate(-2deg); }
.portrait-felt img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:12px; }
.portrait-caption { font-size:10px; margin-top:14px; line-height:1.4; }
.family-intro .eyebrow, .eyebrow { text-transform:none; letter-spacing:0; font-size:13px; }
.stories, .founder-section, .qa-feature { background-image:linear-gradient(#eee5d5ad,#eee5d5ad),var(--wool-texture); background-size:auto,400px; }
.story > img, .room > img { border:14px solid transparent; border-image:var(--wool-patch) 190 140 /14px /5px stretch; border-radius:0; }
.story:hover > img, .kitten summary:hover img, .kitten:nth-child(even) summary:hover img { transform:none; box-shadow:none; }
.kitten summary img { padding:6px;background-image:var(--wool-texture);background-size:180px;box-shadow:0 2px 2px #343d2630; }
.kitten.is-featured summary img { outline:none; filter:drop-shadow(0 4px 2px #61754660); }
.kitten-more { background-image:var(--wool-texture); background-size:150px; border:1px solid #aeb196; box-shadow:0 2px 1px #3b352a24; }
.kitten[open] .kitten-more { background-color:#3f5233; background-image:linear-gradient(#3f5233da,#3f5233da),var(--wool-texture); }
.room-tabs { border:0; gap:18px; }
.room-tabs button { border-color:transparent; }
.room-tabs button[aria-selected='true'] { background:transparent; border-color:transparent; }
.room-tabs button[aria-selected='true']::before, .topics label:has(:checked)::before { filter:var(--wool-green) drop-shadow(0 2px 2px #293c2d30); }
.studio-preview, .studio-hero { background-image:linear-gradient(#293c2dec,#293c2dec),var(--wool-texture); background-size:auto,400px; }
.studio-star { display:none; }
.skill-preview { border:0; }
.compatibility span { color:#34452f; padding:8px 16px; }
.compatibility { gap:20px; }
.install-panel, .install-choice, .letter { background-image:linear-gradient(#faf6edc0,#faf6edc0),var(--wool-texture); background-size:auto,400px; }
.install-panel, .letter { border:28px solid transparent; border-image:var(--wool-patch) 190 140 /28px /10px stretch; padding:25px; box-shadow:none; transform:none; }
.install-choice { border:0; padding:20px 0; }
.install-choice pre { border:10px solid transparent; border-image:var(--wool-patch) 190 140 /10px /2px stretch; background:#293c2d; }
.letter textarea, .form-row input { border:10px solid transparent; border-image:var(--wool-patch) 190 140 /10px /1px stretch; background:#fffdf4; border-radius:0; }
.topics { gap:15px; }
.topics label:has(:checked) { background:transparent; border-color:transparent; }
.ask, .open-reviewers, .claude-section { background-image:linear-gradient(#e6eadca6,#e6eadca6),var(--wool-texture); background-size:auto,400px; }
.wish-list button { border-bottom:0; margin-bottom:15px; padding-bottom:24px; position:relative; }
.wish-list button::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background-image:var(--wool-texture); background-size:100px; border-radius:45%; box-shadow:0 1px 1px #6c67454d; }
.footer-bottom { border-top:0; }
@media(max-width:1050px){.header nav{gap:14px}.header nav a{padding-inline:12px}.welcome-copy{max-width:330px}.welcome-copy h1{font-size:49px}}
@media(max-width:700px){
 .house-home > .header { top:12px; padding-block:0; }
 .header .brand { padding:12px 15px; font-size:15px; }
 .header nav{gap:16px}.header nav a{padding:10px 11px}.house-home .header nav a[href='#stories']{display:none}
 .welcome-scene { height:max(620px,100svh); }
 .welcome-stage { min-height:620px; }
 .scroll-welcome .welcome-scene { height:260svh; }
 .welcome-stage { background-image:var(--wool-texture);background-size:400px; }
 .welcome-poster,.welcome-film{top:88px;height:calc(100svh - 350px);min-height:280px;max-height:calc(100vw * 4 / 3);object-position:42% 50%;}
 .welcome-copy{top:auto;}
 .welcome-copy{left:24px;right:24px;bottom:132px;max-width:none;padding:10px 16px 14px}
 .welcome-copy::before{inset:-10px;border-width:22px;border-image-width:22px}
 .welcome-copy h1 br{display:none}
 .welcome-copy h1{font-size:27px;line-height:1.1}.welcome-copy p{font-size:12px;line-height:1.4;margin-top:8px}
 .welcome-controls{left:25px;right:25px;bottom:22px;align-items:end;gap:20px}
 .welcome-controls > div{flex-direction:column;gap:18px;align-items:end}
 .welcome-controls .welcome-skip{font-size:12px;padding:10px 13px;min-height:44px}
 .scroll-invitation{font-size:11px;max-width:125px;padding:8px 12px}
 .welcome-controls .motion-toggle{font-size:11px;padding:7px 12px}
 .family-stage{padding:25px 16px;gap:17px}.portrait-felt{width:100%;padding:7px}
 .portrait-caption{display:none}.family-intro .eyebrow{font-size:11px}
 .rooms-ready .room-tabs{gap:18px}.room-tabs button{flex:1 0 calc(50% - 18px)}
 .install-panel,.letter{border-width:16px;border-image-width:16px;border-image-outset:5px;padding:18px 9px}
 .compatibility{gap:18px}.compatibility span{font-size:11px;padding:7px 12px}
}
html:not(.scroll-welcome) .scroll-invitation { visibility:hidden; }
html:not(.scroll-welcome) .motion-toggle { display:none; }
@media(prefers-reduced-motion:reduce){.welcome-stage{position:relative}.welcome-copy{opacity:1!important}.scroll-invitation{visibility:hidden}}

.studio-hero figure { background-image:var(--wool-texture);background-size:300px;border-radius:8px;transform:rotate(-1deg);box-shadow:0 4px 3px #14231d45; }
.about-hero > img { border:14px solid transparent;border-image:var(--wool-patch) 190 140 /14px /4px stretch;border-radius:0; }
.qa-heading h2 > span { display:none; }
.qa-benefits article,.qa-steps li,.film-process li { border-top:0;position:relative; }
.qa-benefits article::after,.qa-steps li::after,.film-process li::after { content:'';position:absolute;top:0;left:0;right:0;height:3px;background-image:var(--wool-texture);background-size:90px;border-radius:40%;box-shadow:0 1px 1px #625b3e30; }
.film-process li::before,.qa-steps li::before { background-image:var(--wool-texture);background-size:90px;box-shadow:0 2px 1px #625b3e30;border-radius:50%;width:32px;min-height:32px;line-height:32px;text-align:center; }

/* Deferred pictures retain their real dimensions and felt frames while loading. */
img[data-src]:not([src]) { opacity:0; }

/* Keep controls readable before the felt image arrives on a slow connection. */
.button::before,.header nav a::before,.copy-command::before,.room-tabs button::before,.topics label::before,.motion-toggle::before,.compatibility span::before,.brand::before,.welcome-copy::before,.scroll-invitation::before { background-color:#f3ebda;background-clip:padding-box;border-radius:12px; }