/* Quiet material palette; expressive typography and a few hand-drawn gestures. */
body.play-page{background:#f6f3ec}
#sada-playful{--sp-bg:#f6f3ec;--sp-ink:#302e29;--sp-wine:#682e3a;--sp-acid:#ede9df;--sp-line:#d4cec2;--sp-muted:#686258;line-height:1.55}
#sada-playful .sp-mast{padding:27px 6% 0;gap:6%}
#sada-playful .sp-signature{width:60%;transform:none;transition:transform .4s}
#sada-playful .sp-signature:hover{transform:rotate(-1deg)}
#sada-playful .sp-nav{gap:9px;padding-top:23px;font-size:11px;letter-spacing:.09em;line-height:1.5}
#sada-playful .sp-nav a{padding:5px 0;transition:transform .3s,color .3s}
#sada-playful .sp-nav a:hover{transform:translateX(-5px)}
#sada-playful .sp-intro{grid-template-columns:.85fr 1.15fr;gap:6%;padding:38px 7% 92px;min-height:430px}
#sada-playful .sp-playground{padding:25px 0 0 3%;min-height:300px}
#sada-playful .sp-sticker{background:transparent;color:var(--sp-wine);border:1px solid var(--sp-wine);padding:15px 26px;font:italic 400 27px/1.1 Georgia,serif;letter-spacing:-.03em;transform:rotate(-6deg);transition:transform .35s,background .35s}
#sada-playful .sp-sticker:hover{transform:rotate(3deg);background:var(--sp-acid)}
#sada-playful .sp-sticker:active{transform:rotate(-2deg) scale(.98)}
#sada-playful .sp-idea-line{margin-top:24px;font-size:12px;max-width:230px;color:var(--sp-muted)}
#sada-playful .sp-arrow-link{gap:24px;margin-top:10px}
#sada-playful .sp-arrow{width:34px;height:145px;border-left:1.5px solid var(--sp-wine);transition:transform .4s}
#sada-playful .sp-arrow:before,#sada-playful .sp-arrow:after{left:-1.5px;width:25px;height:1.5px;background:var(--sp-wine)}
#sada-playful .sp-arrow-link:hover .sp-arrow{transform:rotate(-2deg) translateY(7px)}
#sada-playful .sp-hand{font:italic 16px/1.3 Georgia,serif;max-width:100px;transform:rotate(-5deg);margin-bottom:8px}
#sada-playful .sp-manifest{padding-top:8px}
#sada-playful .sp-small{font-size:11px;line-height:1.5;letter-spacing:.12em}
#sada-playful .sp-manifest h1{font:400 clamp(40px,5.5vw,82px)/1.04 Georgia,'Times New Roman',serif;letter-spacing:-.052em;margin:18px 0 0}
#sada-playful .sp-type-line{min-height:1.12em;font-style:italic;letter-spacing:-.05em}
#sada-playful .sp-caret{font:400 .72em/1 Georgia,serif;margin-left:4px;opacity:.55;vertical-align:5%}
#sada-playful .sp-type-controls{gap:16px 28px;margin-top:27px;font-size:12px;letter-spacing:0;color:var(--sp-muted)}
#sada-playful .sp-motion{padding:6px 0;border-bottom:1px solid var(--sp-line);font-size:11px}
#sada-playful .sp-section-tag{margin-bottom:35px;padding-top:21px;border-top:1px solid var(--sp-line)}
#sada-playful .sp-section-tag h2{font:400 11px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.13em}
#sada-playful .sp-section-tag>span{font-size:11px;letter-spacing:.035em;color:var(--sp-muted)}
#sada-playful .sp-gallery{padding:0 7% 85px}
#sada-playful .sp-gallery-grid{grid-template-columns:1.17fr 1fr .88fr;gap:5%}
#sada-playful .sp-work{transform:none}
#sada-playful .sp-work-b{margin-top:100px}
#sada-playful .sp-work-c{margin-top:30px}
#sada-playful .sp-image-button>img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#sada-playful .sp-image-button:hover>img{transform:scale(1.035)}
#sada-playful .sp-view{bottom:13px;right:13px;background:var(--sp-bg);color:var(--sp-wine);width:42px;height:42px;font-size:24px;line-height:1;transform:none;transition:transform .35s}
#sada-playful .sp-image-button:hover .sp-view{transform:rotate(12deg)}
#sada-playful .sp-work figcaption{padding:20px 0}
#sada-playful .sp-work figcaption>span{font-size:11px;letter-spacing:.05em;color:var(--sp-muted)}
#sada-playful .sp-work h3{font:400 clamp(23px,2.75vw,42px)/1.12 Georgia,serif;letter-spacing:-.04em;margin:12px 0 13px}
#sada-playful .sp-work figcaption p{font-size:11px}
#sada-playful .sp-sketch-note{position:absolute;top:-64px;left:3%;color:var(--sp-wine);font:italic 16px/1.3 Georgia,serif;transform:rotate(-4deg);display:flex;gap:14px;align-items:center}
#sada-playful .sp-sketch-note span{font:400 44px/1 Georgia,serif;transform:rotate(8deg)}
#sada-playful .sp-concept-note{font-size:11px;margin-top:30px;max-width:480px}
#sada-playful .sp-about{grid-template-columns:1.3fr 1fr;padding:85px 7% 95px}
#sada-playful .sp-about .sp-small{letter-spacing:.12em;margin-bottom:32px}
#sada-playful .sp-about h2{font:400 clamp(36px,5.6vw,78px)/1.06 Georgia,serif;letter-spacing:-.048em}
#sada-playful .sp-about h2 em{font:italic 400 1em/1.06 Georgia,serif;transform:rotate(-3deg);border-bottom-width:1px;padding:0 4px 12px}
#sada-playful .sp-about-copy{padding-top:5px;font-size:14px;line-height:1.7;color:var(--sp-muted)}
#sada-playful .sp-doodle{font-size:76px;margin-bottom:30px}
#sada-playful .sp-about-copy em{color:var(--sp-wine)}
#sada-playful .sp-services{padding:65px 7% 75px}
#sada-playful .sp-services .sp-section-tag{border-top:0;padding-top:0}
#sada-playful .sp-services details,#sada-playful .sp-services details:last-child{border-color:#c8c0b3}
#sada-playful .sp-services summary{grid-template-columns:38px 1fr 40px;padding:25px 0}
#sada-playful .sp-services summary>span:first-child{font-size:11px;color:var(--sp-muted)}
#sada-playful .sp-services summary h3{font:400 clamp(32px,5.2vw,72px)/1.12 Georgia,serif;letter-spacing:-.045em;transition:color .3s,transform .3s}
#sada-playful .sp-services summary:hover h3{color:var(--sp-wine);transform:translateX(5px)}
#sada-playful .sp-plus{font-size:34px;color:var(--sp-wine)}
#sada-playful .sp-service-body{grid-template-columns:1.4fr 1fr;padding-left:63px;line-height:1.7;color:var(--sp-muted)}
#sada-playful .sp-service-body>span{font-size:11px;max-width:250px;letter-spacing:.025em}
#sada-playful .sp-contact{background:#eee5df;color:var(--sp-wine);padding:60px 7% 65px}
#sada-playful .sp-contact-top{letter-spacing:.09em}
#sada-playful .sp-contact-top>span:last-child{font-size:96px;transform:rotate(-5deg)}
#sada-playful .sp-contact h2{font:400 clamp(60px,9.4vw,146px)/.99 Georgia,serif;letter-spacing:-.06em;margin:27px 0 43px}
#sada-playful .sp-contact h2 em{font-weight:400}
#sada-playful .sp-contact-bottom{align-items:center}
#sada-playful .sp-brief-open{background:transparent;color:var(--sp-wine);border:1px solid var(--sp-wine);padding:22px 30px;transform:rotate(-3deg);font-size:12px;letter-spacing:.05em;transition:transform .35s,background .35s}
#sada-playful .sp-brief-open:hover{transform:rotate(2deg);background:var(--sp-bg)}
#sada-playful .sp-contact-bottom p{font-size:11px;line-height:1.7;color:var(--sp-muted)}
#sada-playful .sp-footer{padding:28px 7%;font-size:11px;letter-spacing:.04em;color:var(--sp-muted)}
#sada-playful dialog{padding-top:40px}#sada-playful dialog::backdrop{background:rgba(36,31,28,.7)}
#sada-playful .sp-close{width:44px;height:40px;color:var(--sp-wine)}
#sada-playful .sp-brief{padding:40px 28px}#sada-playful .sp-brief .sp-small{font-size:11px}
#sada-playful .sp-brief h2{font:400 45px/1.1 Georgia,serif;letter-spacing:-.04em;color:var(--sp-wine)}
#sada-playful .sp-brief>p:not(.sp-small){font-size:13px}
#sada-playful .sp-brief-form input,#sada-playful .sp-brief-form select,#sada-playful .sp-brief-form textarea{background:#faf8f2;border-color:#b7ae9f}
#sada-playful .sp-download{color:var(--sp-bg);letter-spacing:.03em}#sada-playful .sp-summary{background:var(--sp-acid)}
@media(min-width:1600px){#sada-playful .sp-intro{padding-top:65px;padding-bottom:105px}}
@media(max-width:900px){#sada-playful .sp-nav{gap:4px;padding-top:12px}#sada-playful .sp-intro{padding-top:30px;padding-bottom:65px;min-height:380px;grid-template-columns:.8fr 1.2fr;gap:5%}#sada-playful .sp-manifest h1{font-size:5.8vw}#sada-playful .sp-playground{min-height:275px}#sada-playful .sp-arrow{height:120px}#sada-playful .sp-work-b{margin-top:80px}#sada-playful .sp-sketch-note{font-size:14px}#sada-playful .sp-sketch-note span{font-size:36px}#sada-playful .sp-about{gap:7%}#sada-playful .sp-about-copy{font-size:13px}}
@media(max-width:620px){#sada-playful .sp-mast{padding:22px 6% 0}#sada-playful .sp-signature{width:94%;margin:auto}#sada-playful .sp-nav{gap:12px;padding:21px 0 0}#sada-playful .sp-nav a{padding:10px 0}#sada-playful .sp-intro{padding:40px 7% 45px;gap:35px;min-height:0}#sada-playful .sp-manifest{padding-top:0}#sada-playful .sp-manifest h1{font-size:clamp(36px,10.3vw,62px);margin-top:15px}#sada-playful .sp-type-controls{gap:10px 20px;margin-top:25px;font-size:12px}#sada-playful .sp-playground{min-height:135px;padding:8px 0 0;gap:17px}#sada-playful .sp-sticker{padding:14px 25px;font-size:26px}#sada-playful .sp-idea-line{margin:0;font-size:11px}#sada-playful .sp-arrow-link{margin:0;gap:20px}#sada-playful .sp-arrow{height:105px;width:20px}#sada-playful .sp-hand{font-size:14px;max-width:68px}#sada-playful .sp-gallery{padding:0 7% 45px}#sada-playful .sp-section-tag{gap:15px;margin-bottom:28px}#sada-playful .sp-section-tag h2{font-size:11px}#sada-playful .sp-section-tag>span{font-size:11px;max-width:104px}#sada-playful .sp-gallery-grid{grid-template-columns:1fr;gap:55px}#sada-playful .sp-work{max-width:none;transform:none}#sada-playful .sp-work-a{margin:0 8% 0 0}#sada-playful .sp-work-b{margin:16px 0 0 12%}#sada-playful .sp-work-c{margin:0 12% 0 0}#sada-playful .sp-work h3{font-size:31px}#sada-playful .sp-work figcaption{padding-top:16px}#sada-playful .sp-sketch-note{top:-53px;font-size:16px}#sada-playful .sp-concept-note{margin-top:25px}#sada-playful .sp-about{padding:50px 7% 60px}#sada-playful .sp-about h2{font-size:clamp(37px,10vw,60px)}#sada-playful .sp-about-copy{padding-top:35px}#sada-playful .sp-doodle{font-size:66px;margin-bottom:22px}#sada-playful .sp-services{padding:40px 7% 50px}#sada-playful .sp-services summary{grid-template-columns:20px 1fr 25px;gap:10px;padding:22px 0}#sada-playful .sp-services summary h3{font-size:clamp(28px,7.4vw,45px)}#sada-playful .sp-services summary>span:first-child{font-size:11px}#sada-playful .sp-plus{font-size:30px}#sada-playful .sp-service-body{padding:0 10px 25px 30px}#sada-playful .sp-service-body>span{font-size:11px}#sada-playful .sp-contact{padding:42px 7% 50px}#sada-playful .sp-contact-top{font-size:11px}#sada-playful .sp-contact-top>span:first-child{max-width:220px}#sada-playful .sp-contact-top>span:last-child{font-size:63px}#sada-playful .sp-contact h2{font-size:clamp(43px,11vw,70px);margin-top:32px;margin-bottom:35px}#sada-playful .sp-contact-bottom p{font-size:11px}#sada-playful .sp-footer{font-size:11px}}
@media(pointer:coarse){#sada-playful .sp-motion{min-height:44px}#sada-playful .sp-nav a{min-height:44px;display:flex;align-items:center}}
@media(prefers-reduced-motion:reduce){#sada-playful *{transition:none!important}}
