html{color-scheme:light;background:#fdfcf9;scrollbar-width:none}html::-webkit-scrollbar{display:none}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}

@font-face{font-family:'SarahLoadingCulture';src:url('assets/LoadingCulture-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
#sarah-site{--s-ink:#514bdd;--s-paper:#fdfcf9;width:100%;color:var(--s-ink);background:transparent;font:14px/1.6 'DM Sans',Arial,sans-serif}
#sarah-site *{box-sizing:border-box}
#sarah-site [hidden]{display:none!important}
#sarah-site a,#sarah-site button{font:inherit;color:inherit}
#sarah-site button{cursor:pointer}
#sarah-site a{text-decoration:none}
#sarah-site a:hover,#sarah-site button:hover{text-decoration:underline;text-underline-offset:5px}
#sarah-site h1,#sarah-site h2,#sarah-site p,#sarah-site figure{margin:0;font-weight:400}
#sarah-site .stage{width:100%;max-width:1024px;margin:auto;container-type:inline-size}
#sarah-site .page{position:relative;isolation:isolate;overflow:clip;background:var(--s-paper);min-height:710px}
#sarah-site .nav{display:flex;justify-content:center;align-items:center;gap:26px;padding:25px 7%;font-size:13px;position:relative;z-index:4}
#sarah-site .nav button{border:0;background:none;padding:5px 0}
#sarah-site .nav a{padding:5px 0}
#sarah-site .nav button[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
#sarah-site .artwork{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
#sarah-site .butterfly{position:absolute;width:340px;height:auto;aspect-ratio:92/74}
#sarah-site .bf-one{left:clamp(8px,3cqw,60px);top:310px;transform:rotate(-25deg)}
#sarah-site .bf-two{right:clamp(8px,3cqw,60px);top:100px;width:245px;transform:rotate(24deg)}
#sarah-site .bf-three{right:38px;top:520px;width:125px;transform:rotate(-19deg)}
#sarah-site .horse-art{display:none;position:absolute;width:370px;height:auto;aspect-ratio:3/2;left:calc(50% - 185px);bottom:22px}
#sarah-site .home{position:relative;text-align:center;padding:20px 0 145px}
#sarah-site .intro{max-width:420px;margin:auto}
#sarah-site h1{font:400 54px/1.35 'SarahLoadingCulture',monospace;letter-spacing:0;white-space:nowrap}
#sarah-site .bio{font-size:14px;line-height:1.7;margin-top:12px}
#sarah-site .featured{display:block;width:320px;max-width:84%;margin:24px auto 0}
#sarah-site .featured figure{position:relative}
#sarah-site .video-image{position:relative}
#sarah-site .featured img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
#sarah-site .play{position:absolute;right:12px;bottom:12px;width:31px;height:31px;display:grid;place-items:center;background:#182967cc;color:white;border-radius:50%;font:12px/1 Arial,sans-serif}
#sarah-site .featured figcaption{font-size:12px;margin-top:10px}
#sarah-site .socials{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:26px auto 0;max-width:400px;font-size:12px;padding:0 10px}
#sarah-site .socials button{border:0;background:transparent;padding:0}
#sarah-site .socials [aria-expanded="true"]{text-decoration:underline;text-underline-offset:5px}
#sarah-site .social-preview{position:absolute;width:244px;max-width:calc(100% - 20px);z-index:30;background:#fffefb;color:var(--s-ink);border:1px solid var(--s-ink);border-radius:7px;box-shadow:4px 5px 0 #514bdd17;padding:18px;text-align:left;line-height:1.4}
#sarah-site .social-preview:before{content:'';position:absolute;left:var(--tip-left,50%);bottom:-6px;width:10px;height:10px;background:#fffefb;border-right:1px solid var(--s-ink);border-bottom:1px solid var(--s-ink);transform:rotate(45deg)}
#sarah-site .social-preview.below:before{bottom:auto;top:-6px;transform:rotate(225deg)}
#sarah-site .account-top{display:flex;align-items:center;gap:11px;padding-right:10px}
#sarah-site .account-icon{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;color:var(--s-ink)}
#sarah-site .account-icon span{display:grid;place-items:center}
#sarah-site .account-icon svg{display:block;width:26px;height:26px;fill:currentColor}
#sarah-site .account-platform{display:block;font-size:13px;font-weight:500}
#sarah-site .account-handle{display:block;font-size:11px;margin-top:3px;color:#69649a;overflow-wrap:anywhere}
#sarah-site .account-count{display:flex;align-items:baseline;gap:8px;margin-top:18px}
#sarah-site .account-count strong{font:400 27px/1.25 'SarahLoadingCulture',monospace;letter-spacing:-.5px}
#sarah-site .account-count span{font-size:12px}
#sarah-site .account-description{font-size:13px;line-height:1.6;margin-top:16px}
#sarah-site .account-link{display:inline-block;margin-top:13px;font-size:12px;text-decoration:none}
#sarah-site .account-missing{font-size:11px;margin-top:13px;color:#69649a}
#sarah-site .account-close{position:absolute;top:3px;right:4px;width:27px;height:27px;border:0;background:transparent;font:18px/1 Arial,sans-serif;display:grid;place-items:center}
#sarah-site .account-close:hover{text-decoration:none;background:#edebff;border-radius:3px}
#sarah-site .status{font-size:12px;margin-top:8px;text-align:center}
#sarah-site .motion-control{position:absolute;right:22px;bottom:16px;border:0;background:transparent;font-size:11px;z-index:4;padding:6px 0;opacity:.8}
#sarah-site .other{max-width:490px;margin:35px auto 60px;padding:25px 35px 40px;background:var(--s-paper);text-align:left;position:relative;z-index:2}
#sarah-site .other h2{font:400 34px/1.4 'SarahLoadingCulture',monospace;margin-bottom:24px}
#sarah-site .other a{display:block;margin-top:20px;text-decoration:underline;text-underline-offset:4px}
/* The isolated page keeps the trail above its paper, behind all readable content. */
#sarah-site .cursor-layer{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.25;overflow:hidden}
#sarah-site .cursor-pixel{position:absolute;width:23px;height:23px;display:grid;place-items:center;background:var(--s-ink);color:var(--s-paper);font:10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;pointer-events:none;will-change:opacity,transform}
#sarah-site .cursor-pixel.light{background:#fff;color:var(--s-ink)}
#sarah-site .cursor-pixel.empty{opacity:.5}
#sarah-site.horse .butterfly{display:none}
#sarah-site.horse .horse-art{display:block}
#sarah-site.horse .page{min-height:820px}
#sarah-site.horse .home{padding-bottom:285px}
@container(max-width:700px){
 #sarah-site .nav{gap:23px;padding:22px 6%;font-size:12px}
 #sarah-site .home{padding-top:23px;padding-bottom:210px}
 #sarah-site .intro{max-width:88%}
 #sarah-site h1{font-size:clamp(32px,10.5cqw,54px);line-height:1.4}
 #sarah-site .bio{font-size:14px;margin-top:14px}
 #sarah-site .featured{width:320px;max-width:82%;margin-top:25px}
 #sarah-site .socials{gap:14px 21px;max-width:330px;padding:0 20px;font-size:13px;margin-top:27px}
 #sarah-site .page{min-height:780px}
 #sarah-site .bf-one{width:245px;left:-43px;top:auto;bottom:14px;transform:rotate(-20deg)}
 #sarah-site .bf-two{display:none}
 #sarah-site .bf-three{width:110px;right:1px;top:auto;bottom:71px;transform:rotate(28deg)}
 #sarah-site .motion-control{right:14px;bottom:8px}
 #sarah-site .other{max-width:90%;padding:25px 18px}
 #sarah-site .other h2{font-size:30px}
 #sarah-site.horse .horse-art{width:94%;left:3%;bottom:30px}
 #sarah-site.horse .page{min-height:810px}
 #sarah-site.horse .home{padding-bottom:285px}
}
@media(pointer:coarse){#sarah-site .nav a,#sarah-site .nav button,#sarah-site .socials a,#sarah-site .socials button{min-height:44px;display:inline-flex;align-items:center}#sarah-site .socials{row-gap:0}#sarah-site .motion-control{min-height:44px}#sarah-site .cursor-layer{display:none}}
@media(pointer:coarse){#sarah-site .account-close{width:44px;height:44px;top:0;right:0}#sarah-site .social-preview{padding-top:23px}#sarah-site .account-link{min-height:44px;display:inline-flex;align-items:center;margin-top:3px}#sarah-site .account-top{padding-right:13px}}
@media(prefers-reduced-motion:reduce){#sarah-site *{transition:none!important}#sarah-site .cursor-layer{display:none}}

/* The approved design, with page layouts and touch-friendly sizing. */
#sarah-site{font-size:1rem}
#sarah-site .stage{max-width:none}
#sarah-site .page{min-height:100svh;display:flex;flex-direction:column}
#sarah-site .nav{gap:1.8rem;padding:1.5rem 1.25rem;font-size:.875rem}
#sarah-site .nav a{min-height:44px;display:inline-flex;align-items:center}
#sarah-site .nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
#sarah-site .home{flex:1;padding-top:1.25rem;padding-bottom:165px}
#sarah-site .bio{font-size:1rem}
#sarah-site .featured{width:340px;margin-top:1.6rem}
#sarah-site .featured img{height:auto}
#sarah-site .featured figcaption{font-size:.8125rem}
#sarah-site .socials{max-width:460px;gap:0 1.15rem;font-size:.875rem;margin-top:1.25rem}
#sarah-site .socials a,#sarah-site .socials button{min-height:44px;display:inline-flex;align-items:center}
#sarah-site .page-footer{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1.25rem,3vw,2.5rem);font-size:.8125rem;margin-top:auto}
#sarah-site .motion-control{position:static;font-size:inherit;padding:0;min-height:44px;opacity:1}
#sarah-site .email-link{display:inline-flex;align-items:center;min-height:44px}
#sarah-site .social-preview{width:260px;max-width:calc(100% - 24px);padding:20px}
#sarah-site .account-platform{font-size:.875rem}
#sarah-site .account-handle{font-size:.75rem}
#sarah-site .account-count span{font-size:.8125rem}
#sarah-site .account-description{font-size:.875rem}
#sarah-site .account-link{font-size:.875rem;min-height:35px;display:inline-flex;align-items:center}
#sarah-site .account-close{width:32px;height:32px}
#sarah-site .account-icon{font:500 20px/1 Arial,sans-serif}
#sarah-site .skip-link{position:absolute;left:12px;top:-100px;padding:12px;background:white;z-index:100}
#sarah-site .skip-link:focus{top:12px}
#sarah-site :focus-visible{outline:2px solid #514bdd;outline-offset:5px;border-radius:2px}
#sarah-site.horse .page{min-height:100svh}
#sarah-site.horse .home{padding-bottom:270px}
#sarah-site .horse-art{bottom:60px}
#sarah-site .bf-one{top:310px}
#sarah-site .bf-three{top:auto;bottom:90px}
#sarah-site .work-content{position:relative;z-index:2;width:min(760px,calc(100% - 48px));margin:20px auto 60px}
#sarah-site .work-intro{margin-bottom:48px}
#sarah-site .work-intro h1{font-size:clamp(2rem,6cqw,3.25rem);white-space:normal}
#sarah-site .work-intro p{margin-top:12px}
#sarah-site .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 28px}
#sarah-site .project{display:block;text-decoration:none;min-width:0}
#sarah-site .project img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .2s ease}
#sarah-site .project div{padding:18px 0 0}
#sarah-site .project h2{font-size:1.15rem;line-height:1.4;font-weight:500;margin:0}
#sarah-site .project p{font-size:.9375rem;line-height:1.7;margin-top:7px;color:#4c4980}
#sarah-site .project span{display:inline-block;font-size:.875rem;margin-top:14px;text-decoration:underline;text-underline-offset:4px}
#sarah-site .project:hover{text-decoration:none}
#sarah-site .project:hover img{transform:translateY(-3px)}
#sarah-site .project-lead{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:28px}
#sarah-site .project-lead div{padding:0}
#sarah-site .work-contact{border-top:1px solid #514bdd30;margin-top:56px;padding-top:34px}
#sarah-site .work-contact h2{font:400 1.9rem/1.5 SarahLoadingCulture,monospace}
#sarah-site .work-contact p{margin:12px 0}
#sarah-site .work-contact a{text-decoration:underline;text-underline-offset:5px;display:inline-block;min-height:44px}
#sarah-site.content-page .bf-one{display:none}
#sarah-site.content-page .bf-two{right:clamp(16px,3cqw,56px);top:26px;width:clamp(170px,26cqw,400px);opacity:.9;transform:rotate(14deg)}
#sarah-site.content-page .bf-three{right:auto;left:clamp(12px,3cqw,60px);top:auto;bottom:110px;width:clamp(110px,11cqw,170px);opacity:.7;transform:rotate(-16deg)}
#sarah-site.work-page .horse-art{display:none}
#sarah-site .shop-content{text-align:center;position:relative;z-index:2;margin:80px auto 220px;max-width:90%}
#sarah-site .shop-content h1{white-space:normal;font-size:clamp(2.25rem,7cqw,3.6rem);line-height:1.5}
#sarah-site .shop-content p{margin:20px 0 26px;max-width:340px}
#sarah-site .shop-content a{text-decoration:underline;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
#sarah-site .shop-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#sarah-site .shop-form input{background:#fffefb;border:1px solid #514bdd80;border-radius:4px;padding:0 14px;height:44px;min-width:220px;color:#34305e;font:inherit}
#sarah-site .shop-form button{border:1px solid #514bdd;border-radius:4px;background:#514bdd;color:#fff;padding:0 16px;height:44px;font:inherit;font-size:.875rem;cursor:pointer}
#sarah-site .shop-form button:disabled{opacity:.55;cursor:default}
#sarah-site .shop-status{margin-top:14px;font-size:.875rem}
#sarah-site .shop-status.error{color:#a33445}
#sarah-site .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container(max-width:700px){
 #sarah-site .nav{gap:1.35rem;padding:1rem .9rem}
 #sarah-site .home{padding-top:1.4rem;padding-bottom:205px}
 #sarah-site h1{font-size:clamp(1.75rem,9.6cqw,3.35rem);white-space:normal;line-height:1.45}
 #sarah-site .intro{max-width:94%}
 #sarah-site .bio{font-size:1rem}
 #sarah-site .bf-one{top:auto;bottom:90px;width:220px;left:-60px}
 #sarah-site .bf-three{bottom:120px;width:110px}
 #sarah-site .page-footer{gap:12px;padding:12px 20px;font-size:.75rem}
 #sarah-site .email-link{min-height:44px}
 #sarah-site .horse-art{bottom:100px}
 #sarah-site .work-content{width:calc(100% - 40px);margin:28px auto 35px}
 #sarah-site .work-intro{margin-bottom:32px}
 #sarah-site .work-grid{grid-template-columns:1fr;gap:36px}
 #sarah-site .project-lead{display:block}
 #sarah-site .project-lead div{padding-top:18px}
 #sarah-site .work-contact h2{font-size:1.6rem}
 #sarah-site.content-page .bf-two{display:block;width:140px;right:8px;top:74px;opacity:.7}
 #sarah-site.content-page .bf-three{display:none}
 #sarah-site .shop-content{margin:55px auto 250px}
}
@media(pointer:coarse){#sarah-site .account-close{width:44px;height:44px}#sarah-site .account-link{min-height:44px}#sarah-site .account-top{padding-right:15px}}


#sarah-site .yearbook-content{position:relative;z-index:2;width:min(600px,calc(100% - 40px));margin:24px auto 70px}
#sarah-site .yearbook-intro{margin-bottom:35px}
#sarah-site .yearbook-intro h1{font-size:clamp(1.8rem,5.5cqw,3rem);white-space:normal}
#sarah-site .yearbook-intro p{margin-top:14px}
#sarah-site .yearbook-compose{padding:24px 0 30px;border-bottom:1px solid #514bdd35;margin-bottom:16px}
#sarah-site .yearbook-note{font-size:.8125rem;line-height:1.6;color:#666184;margin-top:12px;max-width:440px}
#sarah-site .yearbook-compose label{display:block;font-size:.875rem;margin:20px 0 8px}
#sarah-site .yearbook-compose textarea{width:100%;min-height:125px;resize:vertical;background:#fffefb;border:1px solid #514bdd80;border-radius:4px;padding:14px;color:#34305e;font:inherit;line-height:1.6}
#sarah-site .yearbook-account,#sarah-site .yearbook-form-footer{display:flex;justify-content:space-between;align-items:center;gap:20px}
#sarah-site .yearbook-account{font-size:.875rem}
#sarah-site .yearbook-form-footer{margin-top:10px;font-size:.8125rem}
#sarah-site .yearbook-content button{border:1px solid #514bdd;border-radius:4px;background:#514bdd;color:#fff;padding:10px 16px;min-height:44px;font:inherit;font-size:.875rem;cursor:pointer}
#sarah-site .yearbook-content button:disabled{opacity:.55;cursor:default}
#sarah-site .yearbook-content #yearbook-signout{background:none;color:inherit;padding:4px 0;border:0}
#sarah-site .yearbook-content #yearbook-more{background:none;color:inherit;margin-top:20px}
#sarah-site #yearbook-status{margin-top:14px;font-size:.875rem}
#sarah-site #yearbook-status.error{color:#a33445}
#sarah-site .yearbook-message{padding:25px 0;border-bottom:1px solid #514bdd25}
#sarah-site .yearbook-message header{display:flex;justify-content:space-between;gap:15px;align-items:baseline}
#sarah-site .yearbook-message h2{font-size:.9375rem;font-weight:500;overflow-wrap:anywhere}
#sarah-site .yearbook-message time{font-size:.75rem;color:#666184;white-space:nowrap}
#sarah-site .yearbook-message p{color:#34305e;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:10px}
#sarah-site .yearbook-empty{font-size:.9375rem;color:#666184;padding:28px 0}
@container(max-width:700px){#sarah-site .yearbook-content{margin-top:28px}#sarah-site .yearbook-message header{flex-wrap:wrap;gap:5px 12px}}

#sarah-site .privacy-copy p{margin-bottom:24px;color:#34305e;line-height:1.8}#sarah-site .privacy-copy a{text-decoration:underline;text-underline-offset:4px}

#sarah-site #yearbook-user{overflow-wrap:anywhere;min-width:0}

/* Small, opt-in music control shared by every page. */
#sarah-site .footer-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end}
#sarah-site .music-control{border:0;background:none;padding:8px 0;min-height:44px;font-size:.8125rem;white-space:nowrap}
#sarah-site .music-control span[aria-hidden]{display:inline-block;margin-right:3px;font-size:1rem}
#sarah-site .music-control:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px}
@container(max-width:420px){#sarah-site .footer-controls{gap:12px}#sarah-site .music-control{font-size:.75rem}}

/* Home + shop (horse pages): the video and the horse are sized from the window HEIGHT, so both
   pages reserve exactly the same vertical space and nothing shifts when you move between them.
   Sizes are derived from a height first, then a width, so the reserved space and the drawn size
   can never disagree. Fixed cost below is nav + title + bio + caption + socials + footer. */
#sarah-site.horse{
 --s-free:calc(100svh - 430px);
 --s-video-h:clamp(124px,calc(var(--s-free) * .46),428px);
 --s-video-w:calc(var(--s-video-h) * 16 / 9);
 --s-horse-h:clamp(124px,calc(var(--s-free) * .28),400px);
 --s-horse-w:calc(var(--s-horse-h) * 3 / 2);
 --s-horse-bottom:clamp(20px,3.2svh,64px);
 --s-reserve:calc(var(--s-horse-h) + var(--s-horse-bottom) + 12px);
}
#sarah-site .nav{padding-top:clamp(.5rem,1.6svh,1.5rem);padding-bottom:clamp(.5rem,1.6svh,1.5rem)}
#sarah-site .page-footer{padding-top:clamp(.25rem,1svh,1rem);padding-bottom:clamp(.25rem,1svh,1rem)}
#sarah-site.horse .home{display:flex;flex-direction:column;justify-content:center;padding-top:1rem;padding-bottom:var(--s-reserve)}
#sarah-site.horse .intro{margin:0 auto}
#sarah-site.horse .featured{width:var(--s-video-w);max-width:min(84%,92vw);margin-top:clamp(1rem,2.2svh,2.4rem)}
#sarah-site.horse .socials{margin-top:clamp(.75rem,1.8svh,2rem)}
#sarah-site.horse .horse-art{width:var(--s-horse-w);left:calc(50% - var(--s-horse-w) / 2);bottom:var(--s-horse-bottom)}
#sarah-site.shop-page .shop-content{margin:0 auto;padding-bottom:var(--s-reserve);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}
@container(min-width:701px){
 #sarah-site.horse h1{font-size:clamp(36px,4.8svh,62px)}
 #sarah-site.horse .bio{font-size:clamp(1rem,1.6svh,1.15rem)}
}
@container(max-width:700px){
 #sarah-site.horse .featured{max-width:86%}
 #sarah-site.horse .horse-art{width:min(var(--s-horse-w),94%);left:auto;right:0}
 #sarah-site.horse .home{padding-bottom:calc(min(var(--s-horse-h),62.6vw) + var(--s-horse-bottom) + 12px)}
 #sarah-site.shop-page .shop-content{padding-bottom:calc(min(var(--s-horse-h),62.6vw) + var(--s-horse-bottom) + 12px)}
}

/* Small screens: the variables sit on #sarah-site, which is outside the .stage container, so these
   have to be a viewport media query rather than a container query. */
@media(max-width:700px){
 #sarah-site.horse{
  --s-free:calc(100svh - 395px);
  --s-video-h:clamp(104px,calc(var(--s-free) * .46),300px);
  --s-horse-h:clamp(98px,calc(var(--s-free) * .30),260px);
  --s-horse-bottom:clamp(14px,2.4svh,48px);
 }
}

@media(min-width:701px) and (max-height:700px){
 #sarah-site.horse{--s-free:calc(100svh - 386px);--s-video-h:clamp(92px,calc(var(--s-free) * .46),428px);--s-horse-h:clamp(88px,calc(var(--s-free) * .28),400px);--s-horse-bottom:clamp(12px,2.4svh,64px)}
}