:root{--bg:#faf9f6;--fg:#181916;--muted:#777870;--line:#d7d8cf;--panel:#eeeee7;--accent:#d4ff5c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--fg);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;transition:background .5s,color .5s}body[data-theme=night]{--bg:#141513;--fg:#f6f6ee;--muted:#a3a69b;--line:#3c3e36;--panel:#252720}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}button:focus-visible,a:focus-visible,.carousel:focus-visible{outline:2px solid var(--fg);outline-offset:5px}.skip{position:fixed;top:-60px;background:var(--accent);color:#111;padding:10px;z-index:30}.skip:focus{top:0}aside{position:fixed;width:240px;inset:0 auto 0 0;padding:43px 32px;border-right:1px solid var(--line);display:flex;flex-direction:column}.logo{font-size:54px;font-weight:700;letter-spacing:-5px;line-height:1}.logo span{display:block;font-size:9px;letter-spacing:3.4px;margin-top:11px}nav{margin-top:106px;display:grid;gap:22px}nav a{display:flex;font-size:24px;gap:12px;align-items:baseline}nav i{font-style:normal;font-size:11px;color:var(--muted);width:10px}nav sup{font-size:9px;color:var(--muted);margin-left:auto}nav a:hover,nav a.active{font-style:normal}nav a.active i{color:var(--fg)}.sidebottom{margin-top:auto}.sidebottom p,.tiny,header,.sectionhead,.hint,.hero-top,.hero-caption a,.caption>span,footer div,.sidebottom small{font-size:9px;letter-spacing:1.4px;line-height:1.8}.sidebottom p{margin-bottom:24px}.sidebottom button{padding:0;font-size:11px}.sidebottom small{display:block;margin-top:8px;color:var(--muted);font-size:8px}main{margin-left:240px;padding:0 48px}header{display:flex;justify-content:space-between;padding:34px 0;border-bottom:1px solid var(--line);color:var(--muted)}section{padding:72px 0;border-bottom:1px solid var(--line)}#home{padding-top:0}.hero{padding-top:30px}.hero-top{display:flex;justify-content:space-between;font-size:8px}h1{font-size:clamp(70px,8.2vw,132px);letter-spacing:-7px;font-weight:500;line-height:.94;margin:40px 0 42px}h1 em{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500}.hero-frame{height:430px;display:block;position:relative;overflow:hidden;background:#b5b5a3;color:#f8f5e7}.sun{position:absolute;width:110px;height:110px;border-radius:50%;background:#eee9d0;top:58px;left:58%}.ridge{position:absolute;width:130%;height:85%;left:-10%;bottom:-30%;transform:rotate(-9deg);border-radius:45% 40% 0 0}.back{background:#7b8372;bottom:-16%;transform:rotate(12deg)}.front{background:#3e5043;box-shadow:0 -35px 70px #8e927b}.grain{position:absolute;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.frame-label,.frame-note{position:absolute;font-size:9px;letter-spacing:2px;left:24px;top:24px}.frame-note{top:auto;bottom:24px;font-size:8px}.frame-arrow{position:absolute;right:24px;bottom:20px;font-size:34px}.hero-caption{display:flex;justify-content:space-between;padding-top:18px;font-size:12px}.sectionhead{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:40px}h2{font-size:clamp(30px,3.3vw,50px);line-height:1.09;letter-spacing:-2px;font-weight:500;margin:0 0 28px}p{font-size:14px;line-height:1.85;max-width:530px}.story-grid,.art-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:65px}.signature{display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:22px;margin-top:28px}.daughter{margin:0;background:var(--panel);min-height:440px;display:flex;position:relative;align-items:center;justify-content:center;text-align:center}.daughter strong{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-weight:400;font-size:37px;display:block;margin:25px 0}.daughter .tiny{font-size:8px;color:var(--muted)}figcaption{position:absolute;bottom:18px;font-size:9px;color:var(--muted)}.photo-corners{position:absolute;inset:24px;border:1px solid var(--line)}.titleline{display:flex;justify-content:space-between;align-items:start}.arrows button{font-size:24px;padding:4px 9px}.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:24px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:16px;overscroll-behavior-x:contain}.film{flex:0 0 88%;scroll-snap-align:start}.filmvisual{width:100%;height:400px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#f5f1de}.filmvisual b{font-size:100px;letter-spacing:-7px;font-weight:500}.ymca{background:linear-gradient(140deg,#87917b,#394d3e)}.stn{background:linear-gradient(165deg,#c8bba2 40%,#647974 40%,#394e4c 70%)}.reel{background:#242a2a}.reel b{line-height:.8;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic}.filmvisual small{position:absolute;left:22px;bottom:20px;font-size:8px;letter-spacing:2px}.cross{position:absolute;left:20px;top:14px;font-size:24px}.play{position:absolute;right:24px;bottom:21px;border:1px solid #ffffff70;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px}.caption{display:flex;justify-content:space-between;align-items:center}.caption h3{font-size:16px;font-weight:500}.caption>span{color:var(--muted)}.hint{color:var(--muted);font-size:8px}.album{margin-top:40px}.album-top{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px}.album h3{font-size:17px;font-weight:500;margin:0}.album .carousel{margin-top:15px}.image-slot{flex:0 0 58%;height:340px;scroll-snap-align:start;position:relative;background:var(--panel);display:flex;align-items:center;justify-content:center;overflow:hidden}.image-slot:nth-child(2n){flex-basis:43%}.image-slot .abstract{position:absolute;inset:15% 25%;border:1px solid var(--muted);border-radius:50% 50% 0 0;opacity:.25;transform:rotate(-20deg)}.image-slot:nth-child(2n) .abstract{border-radius:0;transform:rotate(18deg);inset:20% 30%}.image-slot>span{position:absolute;bottom:16px;left:18px;font-size:8px;letter-spacing:1.5px;color:var(--muted)}.image-slot>strong{font-size:65px;font-weight:400;color:var(--muted);opacity:.3}.support{border-top:1px solid var(--line);align-self:center}.support button{width:100%;text-align:left;padding:24px 0;border-bottom:1px solid var(--line);font-size:20px}.support button span{float:right}.support small{display:block;font-size:8px;letter-spacing:1.2px;color:var(--muted);margin-top:10px}footer{padding:48px 0 28px}footer>a{display:flex;justify-content:space-between;font-size:75px;font-weight:600;letter-spacing:-5px}footer>a span{font-size:45px}footer div{display:flex;justify-content:space-between;color:var(--muted);margin-top:22px;font-size:8px}#cat-toggle{padding:18px 0 0;font-size:15px}#cat-toggle span{font-size:8px;letter-spacing:1px;color:var(--muted);margin-left:8px}#mouse,#cat{position:fixed;pointer-events:none;z-index:50;display:none;color:var(--fg)}#mouse{width:48px;height:36px;left:0;top:0}#mouse svg{display:block;width:100%;height:100%;image-rendering:pixelated;shape-rendering:crispEdges}#cat{width:67px;height:60px;transition:opacity .16s;opacity:0}#cat.bite{animation:bite .4s ease-in-out}@keyframes bite{50%{transform:translateX(-25px) rotate(-15deg)}}dialog{background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:48px;max-width:520px;width:90%}dialog::backdrop{background:#0009}dialog h2{margin-top:22px}#close{position:absolute;right:14px;top:12px}.tiny{color:var(--muted)}@media(hover:hover) and (pointer:fine){body.playful,body.playful a,body.playful button{cursor:none}body.playful #mouse{display:block}}@media(min-width:1500px){main{max-width:1450px}.hero-frame{height:520px}}@media(max-width:900px){aside{width:180px;padding:30px 24px}main{margin-left:180px;padding:0 28px}.story-grid,.art-grid{gap:28px}.hero-frame{height:330px}h1{letter-spacing:-4px}.filmvisual{height:330px}.daughter{min-height:380px}}@media(max-width:650px){aside{position:relative;width:auto;inset:auto;padding:24px;border-right:0;border-bottom:1px solid var(--line)}.logo{font-size:43px}.logo span{font-size:7px;letter-spacing:2.8px}nav{margin-top:28px;display:flex;gap:24px}nav a{font-size:16px;gap:0}nav i,nav sup{display:none}.sidebottom{position:absolute;right:24px;top:27px;text-align:right}.sidebottom p{display:none}.sidebottom small{font-size:7px}main{margin:0;padding:0 24px}header{padding:22px 0;font-size:7px}header span:last-child{display:none}.hero-top{font-size:7px}.hero-top span:last-child{display:none}h1{font-size:75px;margin:32px 0}.hero-frame{height:310px}.hero-caption{font-size:10px;gap:20px}.hero-caption a{font-size:7px;max-width:120px;text-align:right}section{padding:48px 0}.sectionhead{font-size:7px;margin-bottom:28px}.story-grid,.art-grid{grid-template-columns:1fr;gap:32px}.daughter{min-height:370px}.film{flex-basis:94%}.filmvisual{height:290px}.filmvisual b{font-size:73px}.caption h3{font-size:14px}.caption>span{font-size:7px}.image-slot{flex-basis:85%;height:300px}.image-slot:nth-child(2n){flex-basis:72%}footer div{gap:20px;font-size:7px}#mouse,#cat{display:none!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Pixel companions: integral pixels and stepped animation. */
#mouse{width:60px;height:36px;transform:translate(-100px,-100px)}#mouse svg,#cat svg,#snake svg,.mouse-preview svg,.mini-cat svg{width:100%;height:100%;display:block;shape-rendering:crispEdges;image-rendering:pixelated}#mouse .mouse-tail{transform-origin:20px 10px;animation:tail-wiggle .65s steps(2,end) infinite}.mouse-preview .mouse-tail{transform-origin:20px 10px;animation:tail-wiggle .65s steps(2,end) infinite}@keyframes tail-wiggle{0%,100%{transform:translateY(-1px)}50%{transform:translateY(1px)}}#cat{width:72px;height:60px}#cat .cat-jaw{transform:translateY(-2px)}#cat.bite{animation:pixel-pounce .4s steps(4,end)}#cat.bite .cat-jaw{animation:chomp .4s steps(2,end)}@keyframes pixel-pounce{0%,100%{transform:translateX(0)}50%{transform:translateX(-28px)}}@keyframes chomp{0%,100%{transform:translateY(-2px)}50%{transform:translateY(1px)}}.mini-cat{display:inline-block;width:24px;height:20px;vertical-align:middle}#snake{position:fixed;width:120px;height:66px;pointer-events:none;z-index:51;overflow:hidden;display:none;opacity:0;--reveal:0}#snake .snake-slide{height:100%;transform:translateX(calc((var(--reveal) - 1)*100%))}#snake .snake-tongue{opacity:0}#snake.strike{overflow:visible;animation:snake-strike .4s steps(4,end)}#snake.strike .snake-jaw{animation:snake-chomp .4s steps(2,end)}#snake.strike .snake-tongue{opacity:1}@keyframes snake-strike{0%,100%{transform:translateX(0)}45%{transform:translateX(36px)}}@keyframes snake-chomp{0%,100%{transform:translateY(0)}40%{transform:translateY(4px)}}#mouse.nibbled .mouse-body{animation:mouse-nibble .4s steps(2,end)}@keyframes mouse-nibble{50%{opacity:.25;transform:translateX(2px)}}body.playful #snake{display:block}.cursor-options{margin-top:20px;max-width:570px}.cursor-options summary{font-size:9px;letter-spacing:1.4px;cursor:pointer;padding:10px 0}.cursor-options fieldset{margin:16px 0 0;border:1px solid var(--line);padding:16px}.cursor-options legend{font-size:12px;padding:0 8px}.cursor-options #mouse-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}.cursor-options label{position:relative;border:1px solid var(--line);padding:14px 8px;display:grid;text-align:center;justify-items:center;gap:10px;cursor:pointer;letter-spacing:0}.cursor-options label:has(input:checked){border-color:var(--fg);background:var(--panel)}.cursor-options input{position:absolute;top:8px;left:8px;accent-color:var(--fg)}.mouse-preview{display:block;width:90px;height:54px}.cursor-options strong{font-size:12px;font-weight:500}.cursor-options small,.cursor-options p{font-size:9px;color:var(--muted);line-height:1.5}.cursor-options p{margin-bottom:0}@media(max-width:650px){nav a:first-child{position:relative}nav a:first-child i{display:inline;font-size:10px;margin-right:5px}#snake{width:90px;height:50px}.cursor-options #mouse-options{gap:5px}.mouse-preview{width:66px;height:40px}.cursor-options small{font-size:8px}}@media(prefers-reduced-motion:reduce){.mouse-tail{animation:none!important}#snake.strike{animation:none!important}}
/* Close-range encounters. A fresh life begins after each bite. */
#cat,#snake{width:96px;height:72px;overflow:visible;transition:opacity .08s;pointer-events:none}#snake .snake-slide{transform:none;clip-path:inset(0 calc((1 - var(--reveal))*100%) 0 0)}#cat:not(.attack){clip-path:inset(calc((1 - var(--reveal))*65%) 0 0 0)}#cat .cat-jaw{transform:none}#snake.attack .snake-slide{clip-path:none}#cat.attack,#snake.attack{animation:close-leap .4s steps(5,end) both}#cat.attack .cat-jaw,#snake.attack .snake-jaw{animation:close-chomp .4s steps(3,end)}#snake.attack .snake-tongue{opacity:1}@keyframes close-leap{0%,100%{transform:translate(0,0)}40%,65%{transform:translate(var(--leap-x),var(--leap-y))}}@keyframes close-chomp{30%{transform:translateY(4px)}65%{transform:translateY(0)}}#mouse.caught{filter:contrast(1.4)}#mouse.eaten{visibility:hidden}#mouse.respawn svg{animation:spawn .24s steps(3,end)}@keyframes spawn{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}.design-lab-link{display:inline-flex;flex-direction:column;gap:8px;margin-top:24px;font-size:9px;letter-spacing:1.4px;padding-bottom:10px;border-bottom:1px solid var(--line)}.design-lab-link span{color:var(--muted);font-size:8px}@media(max-width:650px){#snake{width:96px;height:72px}}@media(prefers-reduced-motion:reduce){#mouse.respawn svg{animation:none}#cat,#snake{display:none!important}}
/* SCIA typography: lowercase Helvetica Neue throughout. */
body,button,input,select,textarea,h1,h2,h3,h4,p,span,a,small,strong,em,i,legend,summary,figcaption{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}body{text-transform:lowercase}button,input,select,textarea{text-transform:inherit}
/* Jacob’s original S-shaped snake: first pose preserves every source pixel. */
#snake.user-snake{height:96px;width:96px}#snake.user-snake .snake-slide{clip-path:inset(0 0 calc((1 - var(--reveal))*100%) 0)}#snake.user-snake .user-snake-art{transform-origin:79px 48px}#snake.user-snake:not(.attack) .band-0{animation:own-wiggle-a 1.2s steps(2,end) infinite}#snake.user-snake:not(.attack) .band-1{animation:own-wiggle-b 1.2s steps(2,end) infinite}#snake.user-snake:not(.attack) .band-2{animation:own-wiggle-a 1.2s steps(2,end) infinite}#snake.user-snake:not(.attack) .band-3{animation:own-wiggle-b 1.2s steps(2,end) infinite}#snake.user-snake.attack .snake-slide{clip-path:none}#snake.user-snake.attack .user-snake-art{animation:own-snake-turn .4s steps(5,end) both}@keyframes own-wiggle-a{0%,100%{transform:translateX(0)}35%{transform:translateX(1px)}70%{transform:translateX(-1px)}}@keyframes own-wiggle-b{0%,100%{transform:translateX(0)}35%{transform:translateX(-1px)}70%{transform:translateX(1px)}}@keyframes own-snake-turn{0%,100%{transform:rotate(0)}35%,65%{transform:rotate(70deg)}}

/* Whole-pose sprite animation: no independently displaced body sections. */
.user-snake-art .slither-frame{opacity:0;animation:whole-slither 1.2s steps(1,end) infinite}
.user-snake-art .frame-0{animation-delay:0.0s}
.user-snake-art .frame-1{animation-delay:0.2s}
.user-snake-art .frame-2{animation-delay:0.4s}
.user-snake-art .frame-3{animation-delay:0.6s}
.user-snake-art .frame-4{animation-delay:0.8s}
.user-snake-art .frame-5{animation-delay:1.0s}
@keyframes whole-slither{0%{opacity:1}16.6667%,100%{opacity:0}}
.user-snake-art .eyes-open{animation:snake-blink 4.8s steps(1,end) infinite}.user-snake-art .eyes-blink{opacity:0;animation:snake-blink-lid 4.8s steps(1,end) infinite}.user-snake-art .snake-brows,.user-snake-art .snake-annoyed,.user-snake-art .snake-bite-mouth,.user-snake-art .snake-mouth{opacity:0}.user-snake-art .user-tongue{animation:tongue-flick 1.8s steps(1,end) infinite;transform-origin:26px 16px}
@keyframes tongue-flick{0%,36%,64%,100%{clip-path:inset(0 0 75% 0)}40%,57%,68%{clip-path:inset(0 0 100% 0)}46%,74%{clip-path:inset(0 0 0 0)}52%,80%{clip-path:inset(0 0 50% 0)}}
@keyframes snake-blink{0%,94%,100%{opacity:1}95%,98%{opacity:0}}@keyframes snake-blink-lid{0%,94%,100%{opacity:0}95%,98%{opacity:1}}
#snake[data-expression=focused] .snake-brows,#snake[data-expression=focused] .snake-mouth,#snake[data-expression=annoyed] .snake-annoyed,#snake[data-expression=annoyed] .snake-mouth{opacity:1}#snake[data-expression=annoyed] .eyes-open{animation:none}#snake.attack .snake-bite-mouth{opacity:1}#snake.attack .snake-mouth{opacity:0}#snake.attack .eyes-open{animation:none}#snake.attack .slither-frame{animation:none;opacity:0}#snake.attack .frame-0{opacity:1}#snake.attack .user-tongue{animation:none;clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.user-snake-art .slither-frame{animation:none;opacity:0}.user-snake-art .frame-0{opacity:1}.user-snake-art .eyes-open{animation:none;opacity:1}.user-snake-art .eyes-blink{animation:none;opacity:0}.user-snake-art .user-tongue{animation:none;clip-path:inset(0 0 75% 0)}}
/* The snake enters through the left window edge, in source-pixel columns. */
#snake{left:0;transform:translateX(var(--edge-x,-96px));transition:none!important}#snake .snake-slide,#snake.user-snake .snake-slide{clip-path:none;transform:none}#snake.attack{animation:edge-snake-strike .4s steps(8,end) both}@keyframes edge-snake-strike{0%,100%{transform:translate(var(--edge-x,-96px),0)}40%,65%{transform:translate(var(--leap-x),var(--leap-y))}}

.user-cat-art .cat-source-frame{display:none}.user-cat-art .cat-frame-0{display:inline}

#cat.user-cat{height:96px;width:96px}#cat.user-cat .user-cat-art{transform:scaleX(-1)}
/* Tiny noodle faces right, crawls in whole pixel poses, then swallows. */
#snake.noodle-snake{width:144px;height:108px}.tiny-noodle-art .noodle-frame,.tiny-noodle-art .noodle-meal{display:none}.tiny-noodle-art .noodle-frame{display:inline;opacity:0;animation:noodle-pose .8s steps(1,end) infinite}.tiny-noodle-art .noodle-frame-0{animation-delay:0s}.tiny-noodle-art .noodle-frame-1{animation-delay:.2s}.tiny-noodle-art .noodle-frame-2{animation-delay:.4s}.tiny-noodle-art .noodle-frame-3{animation-delay:.6s}@keyframes noodle-pose{0%{opacity:1}25%,100%{opacity:0}}.tiny-noodle-art .noodle-open-mouth{display:none}#snake.noodle-attack{animation:noodle-journey 2.2s steps(12,end) both}#snake.noodle-attack .noodle-open-mouth{display:inline}#snake[data-stage=neck] .noodle-frame,#snake[data-stage=middle] .noodle-frame,#snake[data-stage=belly] .noodle-frame{display:none}#snake[data-stage=neck] .meal-1,#snake[data-stage=middle] .meal-2,#snake[data-stage=belly] .meal-3{display:inline}#snake[data-stage=neck] .noodle-open-mouth,#snake[data-stage=middle] .noodle-open-mouth,#snake[data-stage=belly] .noodle-open-mouth{display:none}#mouse.swallowing svg{animation:whole-mouse-swallow .4s steps(7,end) both;transform-origin:0 50%}@keyframes whole-mouse-swallow{0%{transform:translateX(0) scale(1)}100%{transform:translateX(-30px) scale(.04)}}@keyframes noodle-journey{0%{transform:translate(var(--edge-x,-144px),0)}14%,34%{transform:translate(var(--leap-x),var(--leap-y))}55%,100%{transform:translate(0,0)}}@media(prefers-reduced-motion:reduce){.tiny-noodle-art .noodle-frame{animation:none;opacity:0}.tiny-noodle-art .noodle-frame-0{opacity:1}}
/* Current-mode icons; the Pacific-time schedule stays behind the scenes. */
#theme{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;padding:8px;vertical-align:middle;background:transparent;transition:border-color .2s,background .2s}#theme:hover{border-color:var(--fg);background:var(--panel)}#theme svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#theme .moon-spark{stroke-width:1.25}
/* Real portfolio photography: preserve full frames in the swipeable albums. */
.hero-frame.real-photo{background:#25372a}.hero-frame.real-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.hero-frame.real-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0004,transparent 35%,transparent 65%,#0005);pointer-events:none}.real-photo .frame-label,.real-photo .frame-note,.real-photo .frame-arrow{z-index:1;color:#fff}.photo-album{gap:24px;align-items:start}.photo-slide{margin:0;flex:0 0 70%;scroll-snap-align:start;min-width:0}.photo-slide.portrait{flex-basis:42%}.photo-slide>img{display:block;width:100%;height:380px;object-fit:contain;background:var(--panel)}.photo-slide>figcaption{position:static;display:flex;justify-content:space-between;gap:12px;padding-top:12px;color:var(--muted);font-size:8px;letter-spacing:1px;line-height:1.5}.photo-slide.portrait>img{background:transparent}@media(max-width:900px){.photo-slide>img{height:320px}.photo-slide{flex-basis:85%}.photo-slide.portrait{flex-basis:60%}}@media(max-width:650px){.photo-slide{flex-basis:92%}.photo-slide.portrait{flex-basis:76%}.photo-slide>img{height:300px}}
.daughter.real-portrait{display:block;background:transparent;min-height:0;align-self:start}.daughter.real-portrait>img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;object-position:top}.daughter.real-portrait>figcaption{position:static;text-align:left;padding-top:12px;font-size:8px;letter-spacing:1px;line-height:1.5;color:var(--muted)}@media(max-width:650px){.daughter.real-portrait>img{max-height:none}}
/* Secondary collections stay tucked away until requested. */
[hidden]{display:none!important}.more-albums-control{margin-top:36px;padding:28px 0 0;border-top:1px solid var(--line)}#more-albums{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 0;font-size:28px;letter-spacing:-1px;text-align:left}.more-symbol{font-size:30px;font-weight:400}.more-albums-control p{font-size:9px;color:var(--muted);letter-spacing:1px;margin:5px 0 0}#fewer-albums{display:block;padding:18px 0;margin-top:26px;border-top:1px solid var(--line);width:100%;font-size:14px;text-align:left}#more-albums:hover .more-label,#fewer-albums:hover{text-decoration:underline;text-underline-offset:5px}
/* Jacob’s mouse: the nose center is the pointer in both orientations. */
#mouse{width:64px;height:64px;transform:translate(-200px,-200px)}#mouse .mouse-facing{width:64px;height:64px;transform-origin:32px 32px}#mouse[data-direction=right] .mouse-facing{transform:scaleX(-1)}#mouse .user-mouse-art{display:block;width:64px;height:64px;shape-rendering:crispEdges;image-rendering:pixelated}#mouse .mouse-tail-pose{opacity:0;animation:mouse-tail-poses .72s steps(1,end) infinite}#mouse .tail-0{animation-delay:0s}#mouse .tail-1{animation-delay:.24s}#mouse .tail-2{animation-delay:.48s}@keyframes mouse-tail-poses{0%{opacity:1}33.3333%,100%{opacity:0}}#mouse.moving .foot-a{animation:mouse-steps-a .24s steps(2,end) infinite}#mouse.moving .foot-b{animation:mouse-steps-b .24s steps(2,end) infinite}@keyframes mouse-steps-a{0%,100%{transform:translate(0,0)}50%{transform:translate(1px,-1px)}}@keyframes mouse-steps-b{0%,100%{transform:translate(-1px,-1px)}50%{transform:translate(0,0)}}#mouse.swallowing svg{transform-origin:15px 29px;animation:nose-mouse-swallow .4s steps(7,end) both}@keyframes nose-mouse-swallow{0%{transform:translateX(0) scale(1)}100%{transform:translateX(var(--swallow-x,-30px)) scale(.04)}}body[data-theme=night] #mouse .user-mouse-art{filter:drop-shadow(0 0 .5px #fff8)}@media(prefers-reduced-motion:reduce){#mouse .mouse-tail-pose{animation:none;opacity:0}#mouse .tail-0{opacity:1}#mouse .mouse-foot{animation:none!important}}
/* Project inquiry: a focused, accessible ten-question dialog. */
body:has(dialog[open]){overflow:hidden}#project-inquiry{max-width:760px;width:calc(100% - 40px);max-height:calc(100dvh - 48px);padding:38px;overflow:auto}#project-inquiry::backdrop{background:#000a;backdrop-filter:blur(4px)}#inquiry-close{position:absolute;right:16px;top:12px;width:32px;height:32px;font-size:17px}#project-inquiry h2{margin:22px 0 12px}#inquiry-intro{font-size:13px;color:var(--muted);margin:0 0 26px;line-height:1.7}.inquiry-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}.inquiry-question{display:grid;gap:9px;min-width:0}.inquiry-question.wide{grid-column:1/-1}.inquiry-question>span{font-size:11px;letter-spacing:.2px}.inquiry-question input,.inquiry-question select,.inquiry-question textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:0;font:inherit;font-size:13px;line-height:1.5;padding:12px;min-height:44px;text-transform:none}.inquiry-question select{color-scheme:light dark}.inquiry-question textarea{resize:vertical}.inquiry-question input::placeholder,.inquiry-question textarea::placeholder{color:var(--muted);opacity:.8}.inquiry-question input:focus,.inquiry-question select:focus,.inquiry-question textarea:focus{outline:1px solid var(--fg);outline-offset:2px}.inquiry-question small{font-size:9px;color:var(--muted)}.inquiry-submit-row{display:flex;align-items:center;gap:20px;margin-top:30px}.inquiry-submit-row button{padding:14px 22px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-size:13px;min-height:46px}.inquiry-submit-row button:disabled{opacity:.5;cursor:wait}.inquiry-submit-row small{font-size:10px;line-height:1.7;color:var(--muted);max-width:220px}#inquiry-status{font-size:12px;line-height:1.7;margin:18px 0 0;max-width:none}#inquiry-handoff{margin-top:20px;border-top:1px solid var(--line);padding-top:20px}#inquiry-handoff>a,#inquiry-copy{display:inline-block;font-size:12px;border-bottom:1px solid var(--fg);padding:6px 0;margin:0 24px 20px 0}.inquiry-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}@media(max-width:650px){#project-inquiry{padding:28px 22px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.inquiry-fields{grid-template-columns:1fr;gap:20px}.inquiry-question.wide{grid-column:auto}.inquiry-submit-row{align-items:start;flex-direction:column;gap:12px}#project-inquiry h2{font-size:34px}}

#print-story{width:min(720px,calc(100vw - 40px));max-height:calc(100dvh - 48px);overflow:auto;padding:clamp(24px,5vw,56px);background:var(--bg);color:var(--fg)}#print-story-close{position:absolute;right:18px;top:18px}#print-story h2{font-size:clamp(32px,5vw,54px);line-height:1.06;margin:24px 0}#print-story h3{font-size:19px;margin:30px 0 12px}#print-story p{font-size:16px;line-height:1.65;margin:0 0 18px}.print-inquiry-link{display:inline-block;margin:12px 0 24px;border-bottom:1px solid currentColor;padding:8px 0}.print-source{display:block;font-size:11px;line-height:1.5;opacity:.65}

/* Click-only surprise cat, using four connected pixel walk poses. */
#cat.user-cat .user-cat-art{transform:none;filter:drop-shadow(1px 0 #7778) drop-shadow(-1px 0 #7778)}
.cat-walk-frame{display:none}.cat-walk-0{display:inline}
#cat.surprise{clip-path:none;animation:cat-surprise 1.05s linear both;transition:none}
#cat.surprise .cat-walk-frame{display:inline;animation:cat-walk-frames .32s steps(1,end) infinite}
#cat.surprise .cat-walk-1{animation-delay:-.24s}#cat.surprise .cat-walk-2{animation-delay:-.16s}#cat.surprise .cat-walk-3{animation-delay:-.08s}
@keyframes cat-walk-frames{0%,24.99%{opacity:1}25%,100%{opacity:0}}
@keyframes cat-surprise{0%{transform:translate(0,0)}33%{transform:translate(var(--cat-walk-x),0)}48%{transform:translate(calc(var(--cat-target-x)*.6),-25px)}62%,85%{transform:translate(var(--cat-target-x),var(--cat-target-y));opacity:1}100%{transform:translate(var(--cat-target-x),var(--cat-target-y));opacity:0}}

#support-idea{width:min(720px,calc(100vw - 40px));max-width:720px;max-height:calc(100dvh - 48px);overflow:auto;padding:clamp(24px,5vw,48px)}#support-close{position:absolute;right:18px;top:18px}#support-idea h2{margin:24px 0}#support-idea p{max-width:none}#support-idea .support-note{font-size:12px;color:var(--muted);line-height:1.6}.support-send{border-bottom:1px solid currentColor;padding:12px 0}.support-send:disabled{opacity:.5}

.rat-blink-lid{display:none}#mouse.blinking .rat-eye{visibility:hidden}#mouse.blinking .rat-blink-lid{display:inline}

/* Story meal: approach, swallow whole, show the lump, then leave left. */
#snake.noodle-attack{animation:story-meal-journey 3.8s linear both}
#mouse.swallowing svg{animation:story-whole-swallow .8s steps(12,end) both;transform-origin:15px 29px}
@keyframes story-whole-swallow{0%{transform:translateX(0);clip-path:inset(0 0 0 0)}100%{transform:translateX(-44px);clip-path:inset(0 0 0 100%)}}
@keyframes story-meal-journey{0%{transform:translate(var(--edge-x,-144px),0)}11%,32%{transform:translate(var(--leap-x),var(--leap-y))}53%,70%{transform:translate(0,0)}78%{transform:translate(-42px,3px)}86%{transform:translate(-90px,-3px)}94%{transform:translate(-140px,2px)}100%{transform:translate(-165px,0)}}
.departure-frame{display:none}#snake[data-stage=depart] .noodle-frame,#snake[data-stage=depart] .noodle-meal,#snake[data-stage=depart] .noodle-open-mouth{display:none}
#snake[data-stage=depart] .departure-frame{display:inline;opacity:0;animation:noodle-pose .6s steps(1,end) infinite}
#snake[data-stage=depart] .departure-1{animation-delay:-.45s}#snake[data-stage=depart] .departure-2{animation-delay:-.3s}#snake[data-stage=depart] .departure-3{animation-delay:-.15s}

/* Snake v1 stays intact; rotate its head toward the meal only during swallowing. */
#snake.v1-meal{animation:story-meal-journey 3.8s linear both}
#snake.v1-meal .user-snake-art{overflow:visible;transform:rotate(-90deg);transform-origin:79px 48px}
#snake.v1-meal .snake-bite-mouth{opacity:1}#snake.v1-meal .user-tongue{visibility:hidden}
#snake.v1-meal .slither-frame{animation:none;opacity:0}#snake.v1-meal .frame-0{opacity:1}
.v1-bulge{display:none}#snake[data-stage=neck] .v1-neck,#snake[data-stage=middle] .v1-middle,#snake[data-stage=belly] .v1-belly,#snake[data-stage=depart] .v1-belly{display:inline}
#snake.v1-meal[data-stage=neck] .snake-bite-mouth,#snake.v1-meal[data-stage=middle] .snake-bite-mouth,#snake.v1-meal[data-stage=belly] .snake-bite-mouth,#snake.v1-meal[data-stage=depart] .snake-bite-mouth{opacity:0}
#snake.v1-meal[data-stage=depart] .slither-frame{animation:whole-slither 1.2s steps(1,end) infinite;opacity:0}
#snake.v1-meal[data-stage=depart] .frame-1{animation-delay:.2s}#snake.v1-meal[data-stage=depart] .frame-2{animation-delay:.4s}#snake.v1-meal[data-stage=depart] .frame-3{animation-delay:.6s}#snake.v1-meal[data-stage=depart] .frame-4{animation-delay:.8s}#snake.v1-meal[data-stage=depart] .frame-5{animation-delay:1s}

/* Upright S-shaped Snake v1; a single connected lump follows the body. */
#snake.v1-meal .user-snake-art{transform:none!important;transform-origin:center;overflow:visible}
#snake.v1-meal .v1-bulge{display:none!important}
.v1-travel-bulge{display:none}
#snake.v1-meal[data-stage=neck] .v1-travel-bulge,#snake.v1-meal[data-stage=middle] .v1-travel-bulge,#snake.v1-meal[data-stage=belly] .v1-travel-bulge,#snake.v1-meal[data-stage=depart] .v1-travel-bulge{display:inline;animation:v1-meal-travel 1.5s linear both}
@keyframes v1-meal-travel{0%{transform:translate(26px,14px) scale(.5)}10%{transform:translate(26px,10px) scale(.8)}20%{transform:translate(25px,6px) scale(1)}30%{transform:translate(20px,4px)}40%{transform:translate(15px,5px)}50%{transform:translate(11px,8px)}60%{transform:translate(10px,12px)}70%{transform:translate(13px,15px)}80%{transform:translate(18px,18px)}90%{transform:translate(20px,20px)}100%{transform:translate(21px,23px)}}

.membership-preview{margin-top:80px;padding-top:40px;border-top:1px solid var(--line);scroll-margin-top:32px}.tier-preview-note{font-size:12px;color:var(--muted);max-width:650px}.tier-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:32px 0 0}.tier-card{text-align:left;min-height:205px;border:1px solid var(--line);border-top:4px solid var(--tier-color);padding:20px 14px;display:flex;flex-direction:column;gap:18px}.tier-card[aria-pressed=true]{background:var(--panel);outline:1px solid var(--fg);outline-offset:3px}.tier-card>span:first-child{font-size:8px;line-height:1.5;letter-spacing:1px;color:var(--muted)}.tier-card strong{font-size:clamp(18px,2vw,28px);font-weight:500;letter-spacing:-.7px}.tier-card small{font-size:11px;line-height:1.6}.tier-card-action{font-size:9px;margin-top:auto}.tier-detail{border-bottom:1px solid var(--line);padding:28px 0;min-height:220px}.tier-detail h3{font-size:26px;font-weight:500;margin:12px 0}.tier-detail ul{padding-left:18px;font-size:14px;line-height:1.9}.tier-pathways{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px}.tier-pathways h3{font-size:18px;font-weight:500}.tier-pathways p{font-size:13px}.tier-pathways button,.support-tier-link{font-size:12px;display:inline-block;border-bottom:1px solid var(--line);padding:10px 0}.support-tier-link{margin-bottom:12px}@media(max-width:1000px){.tier-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.tier-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.tier-card:last-child{grid-column:1/-1}.tier-card{min-height:180px}.tier-pathways{grid-template-columns:1fr;gap:12px}}

#cursor-style{display:block!important;font-size:9px!important;line-height:1.6;margin:0 0 18px!important;text-align:left;max-width:160px;color:var(--muted)}#mouse[data-style=realistic]{width:128px;height:72px}#mouse[data-style=realistic] .mouse-facing{width:128px;height:72px;transform-origin:64px 36px}#mouse .real-mouse-art{width:128px;height:72px;image-rendering:auto;shape-rendering:auto;overflow:visible;filter:drop-shadow(0 1px 1px #0002)}.real-body{transform-origin:9px 32px;animation:real-breathe 2.4s ease-in-out infinite}.real-tail{transform-origin:69px 35px;animation:real-tail-idle 2.2s ease-in-out infinite}.real-leg{transform-box:view-box;transform-origin:34px 40px}.real-leg.far{opacity:.65}.real-leg.leg-a{transform-origin:63px 40px}.real-eyelid{display:none}#mouse.blinking .real-eyelid{display:inline}#mouse[data-color=gray] .real-fur{filter:grayscale(.95)}#mouse[data-color=white] .real-fur{filter:grayscale(.7) brightness(1.5)}#mouse.moving .real-body{animation:real-scamper var(--real-stride,.22s) ease-in-out infinite}#mouse.moving .real-leg.leg-a{animation:real-foot-a var(--real-stride,.22s) linear infinite}#mouse.moving .real-leg.leg-b{animation:real-foot-b var(--real-stride,.22s) linear infinite}#mouse.moving .real-tail{animation:real-tail-run .42s ease-in-out infinite}#mouse:not(.moving) .real-leg{transition:transform .15s}#mouse[data-style=realistic].swallowing svg{transform-origin:9px 32px;animation:story-whole-swallow .8s linear both}
@keyframes real-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}@keyframes real-scamper{0%,100%{transform:rotate(var(--real-lean,0deg)) scaleY(1)}50%{transform:rotate(var(--real-lean,0deg)) scaleY(.975)}}@keyframes real-foot-a{0%,100%{transform:translate(2px,0) rotate(12deg)}50%{transform:translate(-3px,-2px) rotate(-18deg)}}@keyframes real-foot-b{0%,100%{transform:translate(-3px,-2px) rotate(-18deg)}50%{transform:translate(2px,0) rotate(12deg)}}@keyframes real-tail-idle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}@keyframes real-tail-run{0%,100%{transform:rotate(-8deg) scaleX(.97)}50%{transform:rotate(8deg) scaleX(1.02)}}@media(max-width:650px){#cursor-style{display:none!important}}@media(prefers-reduced-motion:reduce){.real-body,.real-leg,.real-tail{animation:none!important}}

/* Original artist animation, one compact GIF per theme. */
#theme{width:44px;height:44px;padding:2px;border:0;border-radius:0;overflow:hidden}#theme:hover{background:transparent}.theme-animation{display:block;width:40px;height:40px;object-fit:contain;image-rendering:pixelated}.theme-animation.moon-animation{filter:invert(1)}

/* A small forest Easter egg, with a nose-anchored crossfade into the real mouse. */
#mouse[data-style=realistic]{width:64px;height:36px}#mouse[data-style=realistic] .mouse-facing{width:64px;height:36px;transform-origin:32px 18px}#mouse .real-mouse-art{width:64px;height:36px}#mouse[data-style=realistic].swallowing svg{transform-origin:4.5px 16px}
.forest-scene{position:relative}#secret-mushroom{position:absolute;right:54px;bottom:38px;width:28px;height:28px;padding:3px;z-index:2;filter:drop-shadow(0 2px 1px #0008);transition:transform .2s}#secret-mushroom svg{width:22px;height:22px;display:block;image-rendering:pixelated}#secret-mushroom:hover{transform:translateY(-2px)}#secret-mushroom.discovered{animation:mushroom-bounce .5s ease-out}.creature-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#mouse .morph-pixel{position:absolute;inset:0}#mouse .morph-real{position:absolute;left:10.5px;top:13px;width:64px;height:36px;opacity:0}#mouse.morphing .morph-pixel{animation:pixel-to-real-out 1.5s ease-in-out both}#mouse.morphing .morph-real{animation:pixel-to-real-in 1.5s ease-in-out both}.morph-sparkles{position:absolute;left:12px;top:8px;font-size:40px;color:#f7d75b;text-shadow:0 0 12px #fff0ac;animation:mouse-magic 1.5s ease-out both}
@keyframes pixel-to-real-out{0%,18%{opacity:1;filter:none}42%{opacity:1;filter:brightness(2.2) blur(.4px)}70%,100%{opacity:0;filter:brightness(2) blur(2px)}}@keyframes pixel-to-real-in{0%,30%{opacity:0;filter:brightness(2) blur(3px)}70%{opacity:1;filter:brightness(1.3) blur(.3px)}100%{opacity:1;filter:none}}@keyframes mouse-magic{0%{opacity:0;transform:scale(.4) rotate(0)}35%{opacity:1;transform:scale(1.2) rotate(90deg)}100%{opacity:0;transform:scale(1.8) rotate(170deg)}}@keyframes mushroom-bounce{40%{transform:scale(.8)}70%{transform:scale(1.15)}}@media(hover:none){#secret-mushroom{display:none}}

.eslynn-interview>.tiny{display:block;margin-bottom:16px;font-size:8px;letter-spacing:1px}.eslynn-interview dl{margin:0}.eslynn-interview dt{font-size:12px;font-weight:600;line-height:1.5;margin:20px 0 5px}.eslynn-interview dd{font-size:14px;line-height:1.75;margin:0;max-width:530px}#story .real-portrait figcaption{position:static;display:block;padding:14px 0;font-size:12px;color:var(--fg)}#story .real-portrait{align-self:start;display:block;background:transparent}#story .real-portrait img{display:block;width:100%;height:auto}
.album-locked .album-top{align-items:center}.lock-badge{font-size:11px;border:1px solid var(--line,#777);padding:7px 12px}.album-lock-panel{min-height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border:1px solid var(--line,#8885);padding:36px 20px;background:var(--surface,transparent)}.album-lock-panel>span{font-size:32px}.album-lock-panel h4{font-size:28px;font-weight:400;margin:15px 0 5px}.album-lock-panel p{font-size:14px;margin:7px 0 18px}.album-lock-panel a{font-size:12px;text-decoration:underline}.album-lock-panel small{font-size:10px;opacity:.6;margin-top:20px}.photo-access-placeholder{min-height:220px;display:grid;place-items:center;text-align:center;font-size:13px;border:1px solid var(--line,#8885)}

/* Equal, circular 20px theme icons retain Jacob’s original animated textures. */
#theme{display:flex;align-items:center;justify-content:flex-start}
.theme-sun-disc,.theme-moon-disc{display:block;flex:none;width:20px;height:20px;border-radius:50%;overflow:hidden;isolation:isolate;clip-path:circle(50% at 50% 50%)}
.theme-sun-disc{background:#f8bf22}.theme-moon-disc{background:#d9d8ce}
.theme-sun-disc>.sun-animation,.theme-moon-disc>.moon-animation{width:26px;height:26px;max-width:none;transform:translate(-3px,-3px)}
.theme-moon-disc>.moon-animation{filter:invert(1)}