/* v1.1: readable type remains independent from the artwork's design units. */
:root{--cream:#FFE5C0}
.page{isolation:isolate;background:#FFE5C0}
.page::before,.page::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.page::before{inset:0;background:radial-gradient(circle 450px at 95% 140px,rgba(255,255,255,.32),transparent 100%)}
.page::after{inset:0;opacity:.025;background-image:url("assets/background-grain.svg");background-repeat:repeat}
.header::before{content:"";position:absolute;inset:0 0 auto;height:120px;background:linear-gradient(rgba(255,255,255,.55),transparent);pointer-events:none;z-index:-1}
.header nav>a{font-size:16px;color:#3B3329;text-decoration-thickness:1px;text-underline-offset:5px}
.header .menu-button{width:48px;height:48px;display:grid;place-items:center;opacity:1;position:relative;background:transparent}
.header .menu-button svg{width:24px;height:24px;color:#3B3329}
.header nav{gap:20px!important;height:48px!important;top:8px!important;right:12px;left:auto!important;width:auto!important}
.ui-readable.reference-type{height:auto!important;line-height:1.875;letter-spacing:.01em;font-family:var(--font-body);font-weight:400;color:#3B3329;white-space:normal}
.ui-readable.eyebrow{font-size:13px;letter-spacing:.14em;line-height:1.4;color:#6D5946;white-space:nowrap}
.ui-readable.body-copy{font-size:16px;line-height:30px}
.ui-readable.body-copy.light{font-size:14px;line-height:24px}
.ui-readable.text-link{font-size:15px;line-height:24px;text-decoration:underline;text-underline-offset:5px}
.ui-readable.text-link::after,.ui-profile::after{display:none}
.ui-readable.text-link{min-height:32px!important}
.ui-readable.story-label{font-size:19px;line-height:29px;color:#342C24}
.ui-readable.story-copy{font-size:16px;line-height:29px}
.ui-profile.reference-type{height:auto!important;white-space:normal;font-family:var(--font-body);font-weight:400;line-height:1.6;color:#342C24;width:calc(var(--u)*58)!important}
.ui-profile strong{display:block;font-size:22px;line-height:31px;font-weight:400}
.ui-profile small{font-size:14px;line-height:22px;color:#695441;margin-top:4px}
.ui-animal-copy{display:block;font-size:15px;line-height:25px;margin-top:6px}
.ui-step.reference-type{display:flex;flex-direction:column;justify-content:center;gap:12px;z-index:3}
.ui-step-button{border:0;background:none;padding:0;text-align:left;display:block;position:relative;width:100%;font-family:var(--font-body);cursor:default}
.ui-step-number{display:block;font-size:28px;line-height:34px;color:#6D5946;margin-bottom:8px}
.ui-step-title{display:block;font-size:22px;line-height:31px;color:#342C24}
.ui-step-short,.ui-step-plus{display:none}
.ui-step-copy{font-family:var(--font-body);font-size:16px;line-height:27px;margin:0}
.source-support .ui-readable{pointer-events:none}
.source-support h3.ui-readable{font-family:var(--font-display);font-size:clamp(18px,2.4cqw,27px);line-height:1.5;white-space:nowrap}
.source-support p.ui-readable{font-size:17px;line-height:29px}
.source-support a.ui-readable{font-size:15px;line-height:25px;white-space:nowrap}
.source-support .source-shape{transition:filter 180ms;filter:drop-shadow(0 10px 28px rgba(116,76,35,.07))}
.source-support .source-shape:hover{filter:brightness(1.04) drop-shadow(0 10px 28px rgba(116,76,35,.07))}
.source-support .source-shape:focus-visible{outline:3px solid #765827;outline-offset:4px}
.faq-item summary,.faq-item:nth-child(even) summary{height:auto;min-height:calc(var(--u)*31.986);padding:20px 28px;gap:16px}
.faq-item summary .faq-question{display:grid;grid-template-columns:24px 1fr;gap:8px;white-space:normal;font-size:18px;line-height:29px}
.faq-item summary .paw{width:24px;height:24px}
.faq-item .answer{font-size:16px;line-height:29px;margin:12px 0 0;padding:0 28px 24px 60px}
@media(max-width:800px){
 .page::before{background:radial-gradient(circle 210px at 95% 80px,rgba(255,255,255,.32),transparent)}
 .header nav>a{display:none}
 .header nav{top:0!important;right:8px}
 .header .menu-button svg{width:20px;height:20px}
 .header::before{height:90px}
 .ui-readable.eyebrow{font-size:12px;letter-spacing:.10em}
 .ui-readable.body-copy{font-size:15px;line-height:27px}
 .ui-readable.body-copy.light{font-size:13px;line-height:22px}
 #about .body-copy{left:calc(var(--u)*24)!important;top:calc(var(--u)*272)!important;width:calc(var(--u)*187)!important}
 #about>.text-link{top:calc(var(--u)*398)!important;left:calc(var(--u)*157)!important}
 #animals>.body-copy{width:calc(var(--u)*87)!important;top:calc(var(--u)*78)!important}
 #adoption>.body-copy:not(.light){top:calc(var(--u)*75)!important;left:calc(var(--u)*126)!important;width:calc(var(--u)*95)!important}
 #support>.body-copy{left:calc(var(--u)*112)!important;top:calc(var(--u)*81)!important;width:calc(var(--u)*108)!important}
 #family>.body-copy{left:calc(var(--u)*16)!important;top:calc(var(--u)*65)!important;width:calc(var(--u)*198)!important}
 .ui-readable.text-link{font-size:13px;line-height:22px;min-height:24px!important}
 .ui-profile.reference-type{width:calc(var(--u)*86)!important}
 .ui-profile strong{font-size:19px;line-height:27px}
 .ui-profile small{font-size:13px;line-height:20px}
 .ui-animal-copy{font-size:14px;line-height:23px;margin-top:6px}
 .ui-profile[data-modal="komugi"]{left:calc(var(--u)*137)!important;top:calc(var(--u)*151)!important}
 .ui-profile[data-modal="pochi"]{left:calc(var(--u)*8)!important;top:calc(var(--u)*224)!important}
 .ui-profile[data-modal="tama"]{left:calc(var(--u)*139)!important;top:calc(var(--u)*277)!important}
 .ui-profile[data-modal="kotetsu"]{left:calc(var(--u)*140)!important;top:calc(var(--u)*373)!important}
 .ui-step-button{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-height:48px}
 .ui-step-number{font-size:22px;line-height:27px;margin:0}
 .ui-step-title{font-size:18px;line-height:25px}
 .ui-step-full,.ui-step-copy{display:none}
 .ui-step-short{display:inline}
 .ui-step-plus{display:block;font-size:14px;position:absolute;bottom:-8px;right:0}
 .source-support h3.ui-readable{font-size:18px}
 .source-support p.ui-readable{font-size:15px;line-height:26px}
 .source-support a.ui-readable{font-size:14px;line-height:24px}
 .source-support .source-shape{filter:drop-shadow(0 6px 16px rgba(116,76,35,.06))}
 .ui-readable.story-label{font-size:17px;line-height:25px}
 .ui-readable.story-copy{font-size:15px;line-height:27px}
 .faq-item summary,.faq-item:nth-child(even) summary{min-height:80px;padding:18px 16px}
 .faq-item summary .faq-question{font-size:16px;line-height:25px}
 .faq-item .answer{font-size:15px;line-height:27px;padding:0 16px 22px 48px}
}

@media(max-width:800px){
 #adoption>.body-copy.light{left:calc(var(--u)*78)!important;top:calc(var(--u)*421)!important;width:calc(var(--u)*143)!important;font-size:13px;line-height:22px}
 #adoption>.text-link{top:calc(var(--u)*461)!important;width:calc(var(--u)*148)!important}
 .ui-step.reference-type{top:50%!important;transform:translateY(-50%)!important;height:auto!important;left:12%!important;width:76%!important}
 #family .ui-readable.story-label{white-space:nowrap;font-size:15px}
 #family .ui-readable.story-copy{font-size:15px;line-height:27px}
 #family>.text-link{left:calc(var(--u)*58)!important;width:calc(var(--u)*160)!important}
 #footer>.text-link{font-size:12px;line-height:20px;white-space:nowrap;width:auto!important}
}
.ui-step .ui-step-number{font-size:28px;line-height:34px;color:#6D5946}
.ui-step .ui-step-title,.ui-step .ui-step-full,.ui-step .ui-step-short{font-size:22px;line-height:31px;color:#342C24}
.ui-step .ui-step-copy{font-size:16px;line-height:27px}
.faq-question{flex:1;min-width:0}
.ui-readable[data-code-name="about-link"]{white-space:nowrap;width:auto!important}
@media(max-width:800px){
 .ui-step .ui-step-number{font-size:22px;line-height:27px}
 .ui-step .ui-step-title,.ui-step .ui-step-short{font-size:18px;line-height:25px}
 .ui-step .ui-step-plus{font-size:14px;line-height:18px}
 .ui-profile[data-modal="kotetsu"]{top:calc(var(--u)*371)!important}
 #animals>.text-link:not(.ui-profile){top:calc(var(--u)*417)!important;left:calc(var(--u)*112)!important;width:calc(var(--u)*108)!important}
}
@media(max-width:800px){
 .ui-profile[data-modal="pochi"]{left:calc(var(--u)*8)!important;top:calc(var(--u)*312)!important;width:calc(var(--u)*91)!important}
 .ui-profile[data-modal="tama"]{left:calc(var(--u)*175)!important;top:calc(var(--u)*278)!important;width:calc(var(--u)*50)!important}
 .ui-profile[data-modal="kotetsu"]{left:calc(var(--u)*24)!important;top:calc(var(--u)*373)!important;width:calc(var(--u)*195)!important}
 .ui-profile[data-modal="pochi"] strong,.ui-profile[data-modal="kotetsu"] strong{display:inline}
 .ui-profile[data-modal="pochi"] small,.ui-profile[data-modal="kotetsu"] small{display:inline;margin-left:8px}
}
@media(min-width:801px){
 .ui-profile[data-modal="pochi"]{left:calc(var(--u)*1)!important;top:calc(var(--u)*236)!important;width:calc(var(--u)*29)!important}
 .ui-profile[data-modal="tama"]{top:calc(var(--u)*185)!important}
 .ui-profile[data-modal="kotetsu"]{left:calc(var(--u)*178)!important;width:calc(var(--u)*46)!important}
}
#family .source-shape{background-image:linear-gradient(135deg,rgba(255,255,255,.12),transparent)}
#footer .footer-pink{background:linear-gradient(135deg,rgba(255,255,255,.12),transparent),#f9baae}
.ui-step.reference-type{padding:0!important}
.ui-step-button{cursor:pointer}

.ui-copy-more{display:block;padding:0;background:none;border:0;font-family:var(--font-body);font-size:13px;line-height:22px;text-decoration:underline;text-underline-offset:4px;min-height:24px}
@media(max-width:800px){
 #footer [data-code-name="footer-nav-0"],#footer [data-code-name="footer-nav-1"],#footer [data-code-name="footer-nav-2"]{top:calc(var(--u)*32)!important}
 #footer [data-code-name="footer-nav-3"],#footer [data-code-name="footer-nav-4"],#footer [data-code-name="footer-nav-5"]{top:calc(var(--u)*45)!important}
 #footer [data-code-name="footer-nav-6"],#footer [data-code-name="footer-nav-7"]{top:calc(var(--u)*58)!important}
 #footer [data-code-name="footer-nav-1"],#footer [data-code-name="footer-nav-4"],#footer [data-code-name="footer-nav-7"]{left:calc(var(--u)*65)!important}
 #footer [data-code-name="footer-nav-2"],#footer [data-code-name="footer-nav-5"]{left:calc(var(--u)*130)!important}
}
@media(max-width:800px){#footer>.ui-readable.text-link{min-height:20px!important}}

/* v1.2: composition-specific copy and independent, accessible controls. */
.free-body-copy{font-size:16px;line-height:1.8}
.shape-copy{letter-spacing:.01em}
.ui-readable.text-link{min-height:48px!important;display:flex;align-items:flex-start;padding-top:8px}
.ui-copy-more{min-height:48px;padding:10px 0}
.ui-step .ui-step-copy{line-height:1.65}
.ui-step .ui-step-full{display:inline;line-height:1.3}
.source-support h3.ui-readable{line-height:1.3}
.source-support p.ui-readable{line-height:1.65}
.source-support a.ui-readable{padding-top:0;min-height:48px!important}
.ui-readable.story-copy{line-height:1.65}
.ui-readable.body-copy.light{font-size:16px;line-height:1.8}
.ui-step-button{min-height:48px}
#footer>.ui-readable.text-link{min-height:48px!important}
@media(max-width:800px){
 .ui-step .ui-step-full{display:none}
 .source-support h3.ui-readable{font-size:clamp(14px,3.6cqw,18px)}
 .source-support p.ui-readable{font-size:clamp(12px,3.05cqw,15px);line-height:1.65}
 .source-support a.ui-readable{font-size:clamp(12px,3.05cqw,14px)}
 #family .ui-readable.story-label{font-size:clamp(13px,3.4cqw,15px);line-height:1.3}
 #family .ui-readable.story-copy{font-size:clamp(12px,3.05cqw,15px);line-height:1.65}
 #footer [data-code-name="footer-nav-3"],#footer [data-code-name="footer-nav-4"],#footer [data-code-name="footer-nav-5"]{top:calc(var(--u)*62)!important}
 #footer [data-code-name="footer-nav-6"],#footer [data-code-name="footer-nav-7"]{top:calc(var(--u)*92)!important}
 #adoption>.body-copy.light{font-size:15px;line-height:1.8}
 #adoption>.body-copy.light{top:calc(var(--u)*416)!important}
 #adoption>.text-link{top:calc(var(--u)*448)!important}
}
@media(max-width:599px){
 .ui-readable.body-copy,.ui-readable.body-copy.light{font-size:15px;line-height:1.8}
 .ui-readable.eyebrow{font-size:12px}
}
@media(min-width:600px) and (max-width:1023px){
 .ui-readable.body-copy,.ui-readable.body-copy.light{font-size:16px;line-height:1.8}
 .ui-readable.eyebrow{font-size:13px}
}
@media(min-width:1024px){
 .ui-readable.body-copy,.ui-readable.body-copy.light{font-size:clamp(16px,1.2vw,17px);line-height:1.8}
}

@media(max-width:800px){#family>.text-link{padding-top:0}}
@media(min-width:801px){
 #footer [data-code-name="footer-nav-3"],#footer [data-code-name="footer-nav-4"],#footer [data-code-name="footer-nav-5"]{top:calc(var(--u)*31.31224 + 50px)!important}
 #footer [data-code-name="footer-nav-6"],#footer [data-code-name="footer-nav-7"]{top:calc(var(--u)*31.31224 + 100px)!important}
}