:root { --ink:#15202b; --cream:#fff4db; --blue:#3f68dd; --salmon:#ff9479; --yellow:#ffd55f; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:Manrope, sans-serif; background:var(--cream); transition:background-color .16s ease; } body.is-transitioning-rodney { background:var(--blue); } body.is-transitioning-aubrey { background:var(--salmon); }
.split-page { min-height:calc(100vh - 150px); display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; }
.person { min-height:760px; padding:28px clamp(28px,5vw,82px) 48px; position:relative; z-index:1; overflow:hidden; transition:transform .7s cubic-bezier(.75,0,.25,1), opacity .55s ease; }.person a { cursor:pointer; }
.person--rodney { background:var(--blue); color:var(--cream); }.person--aubrey { background:var(--salmon); color:var(--ink); }
.grain { position:absolute; inset:0; opacity:.15; pointer-events:none; 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%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
.topline { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; font:500 11px/1 'DM Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }.topline--right { color:#65445a; }.brand-mark { width:34px; height:34px; object-fit:cover; object-position:center; border-radius:50%; mix-blend-mode:multiply; }
.person-content { position:relative; z-index:1; max-width:470px; margin:clamp(70px,13vh,150px) auto 0; }.person--aubrey .person-content { margin-left:max(0px, clamp(0px, 5vw, 70px)); }
.eyebrow { margin:0 0 16px; font:500 11px/1 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
h1 { margin:0; font:700 clamp(58px,8vw,116px)/.85 Fraunces,serif; letter-spacing:-.07em; }h1 em{ font-weight:600; }
.portrait-stage { position:relative; width:min(100%,355px); height:292px; margin:28px 0 0; }.portrait-image { display:block; width:100%; height:270px; object-fit:contain; object-position:left center; filter:drop-shadow(8px 10px 0 rgba(21,32,43,.13)); transform-origin:50% 85%; will-change:transform; }.portrait-image--rodney { animation:rodney-shift 7s ease-in-out infinite; }.portrait-image--aubrey { position:relative; left:50px; animation:aubrey-shift 8s ease-in-out infinite 1.2s; }.thought { position:absolute; z-index:2; top:auto; bottom:265px; padding:10px 12px; min-width:132px; border:2px solid var(--ink); border-radius:18px 18px 18px 3px; background:var(--cream); color:var(--ink); box-shadow:4px 4px 0 rgba(21,32,43,.18); font:500 10px/1.35 'DM Mono',monospace; letter-spacing:.01em; opacity:0; pointer-events:none; transform:translateY(8px) scale(.92); }.thought:after,.thought:before { content:""; position:absolute; border-radius:50%; background:var(--cream); border:2px solid var(--ink); }.thought:after { width:10px; height:10px; bottom:-14px; left:18px; }.thought:before { width:5px; height:5px; bottom:-23px; left:11px; }.thought span { display:block; margin-bottom:4px; color:#df543c; font-size:9px; }.thought--rodney { left:164px; animation:thought-rodney 15s infinite; }.thought--aubrey { left:265px; animation:thought-aubrey 17s infinite 5s; }.thought--aubrey span { color:#087f6e; }
@keyframes thought-rodney { 0%,24%,100% {opacity:0;transform:translateY(8px) scale(.92)} 29%,48% {opacity:1;transform:translateY(0) scale(1)} 53% {opacity:0;transform:translateY(-3px) scale(.98)} } @keyframes thought-aubrey { 0%,28%,100% {opacity:0;transform:translateY(8px) scale(.92)} 33%,55% {opacity:1;transform:translateY(0) scale(1)} 60% {opacity:0;transform:translateY(-3px) scale(.98)} }
@keyframes rodney-shift { 0%,100% {transform:rotate(-2deg) translate(0,0) scale(1)} 28% {transform:rotate(.5deg) translate(7px,-5px) scale(1.018)} 53% {transform:rotate(-3deg) translate(-3px,2px) scale(.995)} 76% {transform:rotate(-.5deg) translate(4px,-3px) scale(1.01)} }
@keyframes aubrey-shift { 0%,100% {transform:rotate(2deg) translate(0,0) scale(1)} 25% {transform:rotate(-.5deg) translate(-7px,-6px) scale(1.018)} 55% {transform:rotate(3.2deg) translate(4px,2px) scale(.995)} 79% {transform:rotate(.5deg) translate(-3px,-4px) scale(1.01)} }
.bio { max-width:410px; font-size:15px; line-height:1.65; margin:0 0 28px; }.work-link { color:inherit; display:inline-flex; gap:22px; align-items:center; padding-bottom:7px; text-decoration:none; font:600 13px 'DM Mono',monospace; border-bottom:2px solid currentColor; }.work-link span{font-size:21px;line-height:10px}.work-link:hover{opacity:.6}.work-link.is-disabled { border-bottom-color:transparent; cursor:default; pointer-events:none; }
.contact { min-height:150px; padding:32px clamp(28px,6vw,100px); background:var(--yellow); display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; color:var(--ink); }.contact p { margin:0; font:700 clamp(28px,4vw,50px)/1 Fraunces,serif; letter-spacing:-.05em; }.contact-links { display:flex; gap:10px; }.contact a { color:inherit; text-decoration:none; padding:14px 17px; border:2px solid var(--ink); border-radius:99px; font:600 12px 'DM Mono',monospace; }.contact a:hover{background:var(--ink);color:var(--yellow)}.contact small { grid-column:1/-1; opacity:.7; font:11px 'DM Mono',monospace; }
.split-page.is-focused-aubrey .person--rodney { transform:translateX(-110vw); opacity:0; pointer-events:none; }.split-page.is-focused-rodney .person--aubrey { transform:translateX(110vw); opacity:0; pointer-events:none; }
.split-page.is-focused-aubrey .thought,.split-page.is-focused-rodney .thought { animation:none; opacity:0; }
.portfolio-reveal { position:absolute; top:0; bottom:0; width:50%; z-index:0; padding:clamp(105px,15vh,165px) clamp(28px,5vw,82px) 40px; }.portfolio-reveal h2 { margin:0 0 25px; font:700 clamp(52px,7vw,104px)/.86 Fraunces,serif; letter-spacing:-.07em; }.portfolio-reveal h2 em { font-weight:600; }.portfolio-reveal > p:last-child { max-width:280px; font-size:15px; line-height:1.6; }.portfolio-reveal--aubrey { left:0; background:var(--blue); color:var(--cream); }.portfolio-reveal--rodney { right:0; background:var(--salmon); color:var(--ink); }.portfolio-close { position:absolute; top:28px; right:28px; padding:10px 14px; color:inherit; background:transparent; border:2px solid currentColor; font:600 11px 'DM Mono',monospace; cursor:pointer; }.portfolio-close:hover { color:var(--ink); background:var(--yellow); }
.portfolio-reveal { position:absolute; top:0; bottom:0; width:50%; z-index:0; isolation:isolate; padding:clamp(86px,12vh,130px) clamp(28px,5vw,82px) 40px; }.portfolio-reveal:before { content:""; position:absolute; z-index:-1; inset:0; background:inherit; box-shadow:inset 0 0 0 1px rgba(21,32,43,.16); }.portfolio-reveal h2 { margin:0 0 25px; font:700 clamp(52px,7vw,104px)/.86 Fraunces,serif; letter-spacing:-.07em; }.portfolio-reveal h2 em { font-weight:600; }.portfolio-reveal > p:last-child { max-width:280px; font-size:15px; line-height:1.6; }.portfolio-reveal--aubrey { left:0; background:transparent; color:var(--ink); }.portfolio-reveal--aubrey:before { display:none; }.portfolio-reveal--aubrey .wireframe-card { border-color:rgba(21,32,43,.75); background:rgba(255,255,255,.16); }.portfolio-reveal--aubrey .wireframe-card--hero i { border-color:rgba(21,32,43,.65); }.portfolio-reveal--rodney { right:0; background:var(--salmon); color:var(--ink); }.portfolio-close { position:absolute; top:28px; right:28px; padding:10px 14px; color:inherit; background:transparent; border:2px solid currentColor; font:600 11px 'DM Mono',monospace; cursor:pointer; }.portfolio-reveal--rodney .portfolio-close { left:28px; right:auto; }.portfolio-close:hover { color:var(--ink); background:var(--yellow); }.wireframe-board { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; max-width:460px; }.wireframe-card { min-height:105px; padding:13px; border:2px dashed rgba(255,244,219,.8); display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,244,219,.06); }.wireframe-card strong { font:600 13px/1.35 'DM Mono',monospace; }.wireframe-ui { color:var(--yellow); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }.wireframe-card--hero { grid-row:span 2; min-height:220px; }.wireframe-card--hero strong { font-size:17px; }.wireframe-card--hero i { height:74px; border:2px solid rgba(255,244,219,.7); border-radius:50% 50% 0 0; border-bottom:0; }.wireframe-card--note { grid-column:1/-1; min-height:76px; background:#fff; color:var(--ink); border-style:solid; border-color:#fff; transform:rotate(-1deg); }.wireframe-card--note span { font:500 9px 'DM Mono',monospace; text-transform:uppercase; }
.portfolio-reveal { position:absolute; top:0; bottom:0; width:50%; z-index:0; isolation:isolate; padding:clamp(86px,12vh,130px) clamp(28px,5vw,82px) 40px; }.portfolio-reveal:before { content:""; position:absolute; z-index:-1; inset:0; background:inherit; box-shadow:inset 0 0 0 1px rgba(21,32,43,.16); }.portfolio-reveal h2 { margin:0 0 25px; font:700 clamp(52px,7vw,104px)/.86 Fraunces,serif; letter-spacing:-.07em; }.portfolio-reveal h2 em { font-weight:600; }.portfolio-reveal > p:last-child { max-width:280px; font-size:15px; line-height:1.6; }.portfolio-reveal--aubrey { left:0; background:transparent; color:var(--ink); }.portfolio-reveal--aubrey:before { display:none; }.portfolio-reveal--aubrey .wireframe-card { border-color:rgba(21,32,43,.75); background:rgba(255,255,255,.16); }.portfolio-reveal--aubrey .wireframe-card--hero i { border-color:rgba(21,32,43,.65); }.portfolio-reveal--rodney { right:0; background:transparent; color:var(--ink); }.portfolio-reveal--rodney:before { display:none; }.portfolio-close { position:absolute; top:28px; right:28px; padding:10px 14px; color:inherit; background:transparent; border:2px solid currentColor; font:600 11px 'DM Mono',monospace; cursor:pointer; }.portfolio-reveal--rodney .portfolio-close { left:28px; right:auto; }.portfolio-close:hover { color:var(--ink); background:var(--yellow); }.rodney-todo { position:relative; width:min(440px,90%); min-height:355px; margin:clamp(35px,7vh,80px) auto 0; padding:30px 34px; color:#fff; background:transparent; transform:rotate(1.2deg); }.rodney-todo > p { margin:0 0 18px; color:#dedede; font:700 30px 'DM Mono',monospace; letter-spacing:.04em; }.rodney-todo ul { width:52%; margin:0; padding:0; list-style:none; font:20px/1.45 'Bradley Hand','Comic Sans MS',cursive; }.rodney-todo li { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:8px; margin-bottom:7px; }.rodney-todo li:before { content:"□"; grid-column:1; font-family:'DM Mono',monospace; }.rodney-todo .sticky-note { position:absolute; right:-28px; top:82px; width:220px; min-height:205px; margin:0; padding:22px 20px; background:#ffe36a; box-shadow:8px 9px 0 rgba(21,32,43,.18); color:#263344; font:19px/1.25 'Bradley Hand','Comic Sans MS',cursive; transform:rotate(-6deg); }.aubrey-plaque { position:absolute; left:75px; bottom:75px; width:min(460px,calc(100% - 150px)); padding:22px 30px; color:#3c2d0e; background:linear-gradient(125deg,#b67808 0%,#ffe98a 21%,#d99b1d 45%,#fff1a5 65%,#a76d08 100%); border:2px solid #845308; box-shadow:inset 0 1px 1px rgba(255,255,255,.85), inset 0 -2px 3px rgba(102,58,0,.3), 5px 6px 0 rgba(21,32,43,.22); font:600 16px/1.45 'DM Mono',monospace; letter-spacing:-.02em; text-shadow:0 1px rgba(255,246,188,.75); }.plaque-signature { display:block; margin-top:8px; text-align:right; font:22px/1 'Bradley Hand','Comic Sans MS',cursive; }.plaque-screw { position:absolute; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff8c5 0 12%,#c48d1e 35%,#76500b 100%); box-shadow:inset 0 0 0 1px rgba(75,45,0,.55); }.plaque-screw:after { content:""; position:absolute; top:4px; left:1px; width:7px; height:1px; background:#664406; transform:rotate(-35deg); }.plaque-screw--tl { top:7px; left:7px; }.plaque-screw--tr { top:7px; right:7px; }.plaque-screw--bl { bottom:7px; left:7px; }.plaque-screw--br { bottom:7px; right:7px; }.wireframe-board { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; max-width:460px; }.wireframe-card { min-height:105px; padding:13px; border:2px dashed rgba(255,244,219,.8); display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,244,219,.06); }.wireframe-card strong { font:600 13px/1.35 'DM Mono',monospace; }.wireframe-ui { color:var(--yellow); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }.wireframe-card--hero { grid-row:span 2; min-height:220px; }.wireframe-card--hero strong { font-size:17px; }.wireframe-card--hero i { height:74px; border:2px solid rgba(255,244,219,.7); border-radius:50% 50% 0 0; border-bottom:0; }.wireframe-card--note { grid-column:1/-1; min-height:76px; background:#fff; color:var(--ink); border-style:solid; border-color:#fff; transform:rotate(-1deg); }.wireframe-card--note span { font:500 9px 'DM Mono',monospace; text-transform:uppercase; }
@media (max-width:700px) {.split-page{grid-template-columns:1fr}.person{min-height:650px}.person-content,.person--aubrey .person-content{margin:90px 0 0}.contact{grid-template-columns:1fr}.contact-links{flex-wrap:wrap}.portfolio-reveal{width:100%;height:650px;padding-top:100px}.portfolio-reveal--aubrey{left:0}.portfolio-reveal--rodney{right:0}.split-page.is-focused-aubrey .person--rodney,.split-page.is-focused-rodney .person--aubrey{transform:translateX(-110vw)}}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .portrait-image,.thought { animation:none; } .thought { opacity:1; transform:none; } }
.portfolio-reveal--rodney .rodney-todo { background:transparent !important; box-shadow:none !important; }.rodney-todo ul { width:80%; }.rodney-todo .sticky-note { cursor:pointer; transform-origin:50% 0; }.rodney-todo .sticky-note.is-falling { animation:sticky-fall 1.8s cubic-bezier(.2,.65,.8,1) forwards; pointer-events:none; } @keyframes sticky-fall { 0% { transform:translate(0,0) rotate(-6deg); opacity:1; } 100% { transform:translate(180px,105vh) rotate(300deg); opacity:0; } }
.thought { min-width:200px; padding:13px 15px; font:400 24px/1.1 Bangers,'Comic Sans MS','Bradley Hand',cursive; letter-spacing:.025em; }.thought span { margin-bottom:5px; font:600 10px 'DM Mono',monospace; letter-spacing:.05em; }
.thought--rodney,.thought--aubrey { animation:none; opacity:0; }.thought.is-speaking { animation:none; opacity:1; transform:translateY(0) scale(1); }
.portrait-motion { position:absolute; inset:0 auto auto 0; width:100%; height:270px; pointer-events:none; }.portrait-motion--rodney { transform-origin:177.5px 229.5px; animation:rodney-shift 7s ease-in-out infinite; }.portrait-motion--aubrey { left:50px; transform-origin:177.5px 229.5px; animation:aubrey-shift 8s ease-in-out infinite 1.2s; }.portrait-motion .portrait-image { animation:none !important; }.portrait-motion--aubrey .portrait-image--aubrey { left:0; }.mouth { position:absolute; z-index:2; display:block; width:18px; height:12px; opacity:0; pointer-events:none; }.mouth--rodney { left:126px; top:86px; height:8px; }.mouth--aubrey { left:159px; top:78px; width:26px; transform:rotate(4deg); }.portrait-stage:has(.thought--rodney.is-speaking) .mouth--rodney,.portrait-stage:has(.thought--aubrey.is-speaking) .mouth--aubrey { opacity:.72; }