/* Real photos + hand-drawn line doodles (About portrait, Contact scrapbook, Portfolio badge, 404). */
.ms-hand{font-family:var(--display);font-style:italic;font-weight:500;color:var(--violet);font-variation-settings:"SOFT" 100,"WONK" 1}
.ms svg{overflow:visible}
.ms-ln{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ms-tw{transform-box:fill-box;transform-origin:center;animation:msTw 2.6s ease-in-out infinite}
.ms-tw.d2{animation-delay:.9s}.ms-tw.d3{animation-delay:1.7s}
@keyframes msTw{0%,100%{transform:scale(.4) rotate(0);opacity:.25}50%{transform:scale(1) rotate(45deg);opacity:1}}
.ms-draw{stroke-dasharray:260;stroke-dashoffset:260;animation:msDraw 4.5s var(--ease) infinite}
@keyframes msDraw{0%{stroke-dashoffset:260}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}
.ms-float{animation:msFl 6s ease-in-out infinite}.ms-float.d2{animation-delay:-2s}.ms-float.d3{animation-delay:-4s}.ms-float.d4{animation-delay:-1s}
@keyframes msFl{0%,100%{translate:0 0}50%{translate:0 -6px}}
.ms-paw{opacity:0;animation:msPaw 4s infinite}
@keyframes msPaw{0%{opacity:0}10%,40%{opacity:.85}60%,100%{opacity:0}}
.ms-ring{transform-box:fill-box;transform-origin:center;animation:msSpin 22s linear infinite}@keyframes msSpin{to{transform:rotate(360deg)}}
.ms-caret{animation:msCaret 1s steps(1) infinite}@keyframes msCaret{50%{opacity:0}}

/* About: portrait extras around the existing .portrait frame */
.portrait .ms-spark{position:absolute;width:34px;z-index:2;pointer-events:none}
.portrait .ms-s1{left:-40px;top:16%}.portrait .ms-s2{right:-52px;top:52%}.portrait .ms-s3{left:-30px;top:62%;width:26px}
.portrait .ms-note{position:absolute;left:-18px;bottom:-62px;font-size:clamp(20px,2vw,26px);rotate:-6deg;white-space:nowrap}
.portrait .ms-arrow{position:absolute;left:-46px;bottom:-26px;width:74px;rotate:-14deg}
.portrait .ms-lap{position:absolute;right:-58px;bottom:-40px;width:96px}

/* Contact: crew scrapbook (a 2x2 grid in normal flow, so it never covers text) */
.ms-scrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px) clamp(18px,2.4vw,32px);max-width:500px;margin-top:48px;padding:14px 10px 10px}
.ms-pol{position:relative;background:#fff;border:1.5px solid var(--ink);padding:5.5% 5.5% 0;box-shadow:6px 8px 0 rgba(15,14,19,.14)}
.ms-pol img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%}
.ms-pol span{display:block;text-align:center;padding:8% 2% 10%;font-size:clamp(14px,1.3vw,17px);line-height:1.15}
.ms-pol .tape{position:absolute;width:38%;height:16px;left:31%;top:-9px;background:rgba(255,90,31,.55);rotate:-4deg}
.ms-scrap .a{rotate:-4deg}.ms-scrap .b{rotate:5deg;margin-top:22px}.ms-scrap .b .tape{background:rgba(183,163,255,.75)}
.ms-scrap .c{rotate:-6deg;margin-top:-10px}.ms-scrap .c .tape{background:rgba(168,216,255,.85)}
.ms-scrap .d{rotate:4deg;margin-top:12px}.ms-scrap .d .tape{background:rgba(255,90,31,.45)}
.ms-scrap .heart{position:absolute;left:47%;top:-6px;width:30px;z-index:5}
.ms-scrap .paws{position:absolute;left:40%;top:47%;width:22%;z-index:0}

/* About story + homepage proof: two overlapping polaroids */
.ms-duo{position:relative;width:min(100%,440px);aspect-ratio:1.3/1;margin-top:48px}
.ms-duo .ms-pol{position:absolute}
.ms-duo .l{left:2%;top:8%;width:50%;rotate:-5deg;z-index:2}
.ms-duo .r{right:2%;top:0;width:44%;rotate:6deg;z-index:1}.ms-duo .r .tape{background:rgba(183,163,255,.75)}
.ms-duo .ms-spark{position:absolute;width:30px}.ms-duo .ms-s1{left:-12px;top:-6px}.ms-duo .ms-s2{right:-8px;bottom:6%}
.ms-duo.home{margin-top:56px}

/* Homepage: Teddi beside the seal */
.ms-hi{position:relative;width:170px;flex:none;margin-left:auto}
.ms-hi .ms-pol{rotate:-6deg}.ms-hi .ms-pol .tape{background:rgba(255,255,255,.8)}
.ms-hi .ms-spark{position:absolute;width:26px;right:-14px;top:-10px}

/* Portfolio: Spicy badge in the page header */
.ms-badge{position:absolute;right:calc(var(--gut) + 10px);top:calc(var(--navh) + 56px);width:min(28vw,360px);aspect-ratio:1}
.ms-badge .pic{position:absolute;inset:12%;border-radius:50%;border:2px solid var(--ink);overflow:hidden;box-shadow:10px 10px 0 var(--lilac);padding:0;min-height:0}
.ms-badge .pic img{width:100%;height:100%;object-fit:cover;object-position:40% 40%;display:block}
.ms-badge .ringtxt{position:absolute;inset:0;width:100%}
.ms-badge .ms-spark{position:absolute;width:11%}.ms-badge .ms-s1{left:0;top:6%}.ms-badge .ms-s2{right:2%;bottom:10%}

/* 404: Spicy broke it */
.ms-404{display:grid;grid-template-columns:1fr minmax(280px,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.ms-win{position:relative;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff;box-shadow:10px 10px 0 var(--tang)}
.ms-win .bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:2px solid var(--ink);background:var(--paper)}
.ms-win .bar i{width:9px;height:9px;border-radius:50%;background:var(--tang)}.ms-win .bar i:nth-child(2){background:var(--sky)}.ms-win .bar i:nth-child(3){background:var(--lilac)}
.ms-win .bar b{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.08em}
.ms-win img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:50% 35%}
.ms-typed{margin:-26px 16px 0;position:relative;font-family:var(--mono);font-size:14px;background:var(--ink);color:var(--paper);border-radius:12px;padding:12px 14px;box-shadow:6px 6px 0 var(--sky)}
.ms-typed span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:msType 5s steps(26) infinite}
@keyframes msType{0%{width:0}55%,90%{width:26ch}100%{width:26ch}}
.ms-typed em{font-style:normal;color:var(--sky)}

@media (max-width:1100px){.ms-badge{width:min(30vw,300px)}}
@media (max-width:900px){
  .ms-badge{position:relative;right:auto;top:auto;width:min(70vw,300px);margin:36px auto 0}
  .ms-404{grid-template-columns:1fr}
  .portrait .ms-s2{right:-26px}.portrait .ms-lap{right:-20px;bottom:-46px;width:80px}
}
@media (max-width:600px){.ms-hi{width:140px;margin:16px 0 0}.ms-duo{width:100%}.portrait .ms-note{left:0;bottom:-58px}.portrait .ms-arrow{left:-22px}.portrait .ms-s1{left:-20px}.portrait .ms-s3{left:-16px}}
@media (prefers-reduced-motion:reduce){.ms *{animation:none!important}.ms-paw{opacity:.8}.ms-typed span{width:auto}.ms-draw{stroke-dashoffset:0}}