:root{--paper:#f3f0e6;--ink:#30322c;--muted:#75776c;--accent:#91452e;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.4;color-scheme:light}*{box-sizing:border-box}body{position:relative;margin:0;min-height:max(850px,100svh)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--accent);outline-offset:5px}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}button:hover,a:hover{color:var(--accent)}[hidden]{display:none!important}header{position:absolute;left:5vw;top:58px;width:27vw;max-width:360px}.introduction{max-width:295px;margin-top:27px;font-size:13px;line-height:1.65;color:#62665a}.introduction p{margin:0 0 15px}.introduction p:last-child{margin-bottom:0}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(46px,5.1vw,78px);line-height:.98;letter-spacing:-3px;margin:0 0 25px}header>p{font-size:14px;line-height:1.5;margin:0}.work-index{position:relative;margin-left:38%;padding-top:70px;width:440px;max-width:54vw}h2{font-size:16px;font-weight:400;margin:0 0 27px}.work-list>button{display:grid;grid-template-columns:195px 1fr;text-align:left;width:100%;padding:5px 0;gap:13px;font-size:15px;line-height:1.35}.work-list>button span:last-child{color:var(--muted);font-size:13px;padding-top:2px}.work-list>button:hover span,.work-list>button[aria-expanded=true] span{color:var(--accent)}.work-list>button:hover span:first-child,.work-list>button[aria-expanded=true] span:first-child{text-decoration:underline;text-underline-offset:4px}.client-label{font-size:11px;color:var(--muted);margin:30px 0 10px}nav{display:flex;gap:28px;margin-top:40px;font-size:13px}nav button{text-decoration:underline;text-decoration-color:#a5a397;text-underline-offset:4px}.work-note{position:absolute;top:480px;left:38%;width:360px;padding:29px 32px 24px;background:#e8e9da;color:#343c2d;transform:rotate(-1.3deg);box-shadow:1px 3px 5px #30322c12}.close{position:absolute;right:13px;top:8px;font-family:Arial,sans-serif;font-size:23px;font-weight:400;line-height:1;padding:4px}.logo-area{height:60px;display:flex;align-items:center;margin:0 0 24px}.logo-area img{max-width:135px;max-height:56px;object-fit:contain;object-position:left center;filter:grayscale(1)}.work-note h2{font-family:Georgia,serif;font-size:25px;margin:0 0 12px;letter-spacing:-.5px}.work-note p{font-size:14px;line-height:1.6;margin:0 0 12px}#note-date{font-size:11px;opacity:.7;margin-bottom:0}.about-note{position:absolute;top:480px;left:calc(38% + 35px);width:380px;background:#e6dfd1;transform:rotate(1.1deg);padding:32px;box-shadow:1px 3px 5px #30322c12}.about-note h2{font-family:Georgia,serif;font-size:25px;margin:0 0 20px}.about-note p{font-family:Georgia,serif;font-size:17px;line-height:1.55;margin:0 0 18px}.about-note p:last-child{margin:0}#card-peek{position:absolute;bottom:125px;left:7vw;transform:rotate(-7deg);width:210px;min-height:116px;padding:20px 22px;background:#e7b85e;color:#493921;box-shadow:1px 2px 3px #30322c13;text-align:left;display:flex;flex-direction:column;justify-content:space-between;font-size:13px}#card-peek span:first-child{font-family:Georgia,serif;font-size:18px;letter-spacing:-.4px}#card-peek span:last-child{font-size:10px;text-decoration:underline;text-underline-offset:3px}#card-peek:hover{transform:rotate(-4deg)}#contact-card{position:fixed;left:12vw;top:42vh;width:345px;background:#e7b85e;color:#493921;padding:26px 29px 20px;box-shadow:2px 5px 12px #30322c18;z-index:10;transform:rotate(-3deg)}.card-handle{cursor:grab;touch-action:none;user-select:none;font-family:Georgia,serif;font-size:25px;letter-spacing:-.8px;padding-right:15px;margin-bottom:25px}.card-handle:active{cursor:grabbing}.card-handle .close{font-size:20px}#contact-card p{font-size:14px;line-height:1.4;margin:0 0 25px}#contact-card a{display:table;font-size:12px;margin:7px 0}#turn-card{font-size:10px;display:block;margin:25px 0 0 auto}#turn-card span{margin-left:5px}#card-back p:first-child{font-family:Georgia,serif;font-size:27px;line-height:1.2;letter-spacing:-.5px}#contact-card .card-small{font-size:12px;line-height:1.6;margin-bottom:0}footer{position:absolute;bottom:26px;left:5vw;right:5vw;display:flex;justify-content:flex-end;gap:22px;font-size:11px;color:var(--muted);pointer-events:none}footer a{pointer-events:auto}::selection{background:#e7b85e}@media(min-width:1500px){.work-index{width:490px}.work-list>button{grid-template-columns:220px 1fr;font-size:17px}.work-list>button span:last-child{font-size:14px}.work-note,.about-note{top:500px}}@media(max-width:1000px){header{left:32px}.work-index{margin-left:43%;max-width:53vw}.work-list>button{grid-template-columns:165px 1fr;gap:8px;font-size:14px}.work-list>button span:last-child{font-size:12px}.work-note{left:43%;width:330px}.about-note{left:43%;width:330px}#card-peek{left:40px}h1{font-size:53px}}@media(max-width:700px){body{min-height:100svh;padding-bottom:90px}header{position:relative;left:auto;top:auto;width:auto;max-width:none;margin:34px 25px 43px}.introduction{max-width:360px;margin-top:24px}h1{font-size:55px;letter-spacing:-2px;margin-bottom:20px}header>p{font-size:13px}.work-index{margin:0 25px;padding:0;max-width:none;width:auto}.work-index h2{margin-bottom:18px}.work-list>button{grid-template-columns:1fr 1fr;font-size:14px;padding:7px 0;gap:10px}.work-list>button span:last-child{font-size:12px}.client-label{margin-top:23px}nav{margin-top:27px}#card-peek{position:relative;left:auto;bottom:auto;margin:65px 0 20px 40px;width:190px;min-height:110px}.work-note,.about-note{position:relative;top:auto;left:auto;width:auto;margin:32px 28px 0;transform:rotate(-1deg)}#contact-card{width:min(345px,calc(100vw - 38px));left:19px;top:30vh;transform:rotate(-2deg)}footer{position:relative;bottom:auto;left:auto;right:auto;margin:50px 25px 0}#card-peek[hidden]{display:none!important}}@media(prefers-reduced-motion:reduce){#card-peek:hover{transform:rotate(-7deg)}}

/* A small family of printed cards, with lightly softened cut edges. */
.work-note,.about-note,#card-peek,#contact-card{border-radius:7px;border:1px solid #62574016;box-shadow:0 1px 1px #443a2814,0 5px 10px -4px #443a2824,0 18px 32px -15px #443a2830,inset 0 1px 0 #ffffff50}
.work-note{width:390px;min-height:245px;padding:29px 32px 26px;background:#e8e9da}
.logo-area{height:43px;margin-bottom:23px}.logo-area img{max-height:43px;max-width:120px}
.work-note h2{font-size:23px}.work-note p{font-size:13px}
#card-peek{width:230px;min-height:135px;padding:24px 25px;border-radius:6px;background:#e5ba69}
#contact-card{width:380px;min-height:235px;padding:28px 31px 22px;background:#e5ba69}
.card-handle{font-size:27px;margin-bottom:22px}
#contact-card p{margin-bottom:18px;font-size:13px}
#contact-card a{font-size:12px;margin:5px 0}
#turn-card{margin-top:18px}#card-front,#card-back{min-height:114px}
#card-back p:first-child{font-size:26px;margin-bottom:15px}
@media(max-width:1000px) and (min-width:701px){header{width:32vw}.introduction{font-size:12px}.work-note{width:330px}}
@media(max-width:700px){body{min-height:100svh}.work-note{width:auto;min-height:0}#contact-card{width:min(380px,calc(100vw - 38px));min-height:235px}#card-peek{width:215px;min-height:126px}footer{position:relative}}

.education-index{margin-top:32px}.education-index h2{margin-bottom:16px}
.work-note,.about-note{top:640px}
.education-card .logo-area{height:70px}.education-card .logo-area img{max-height:70px;max-width:100px}
#contact-card #card-back .card-small{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.8;letter-spacing:0;margin:0;padding-top:12px}
@media(min-width:1500px){.work-note,.about-note{top:660px}}
@media(min-width:701px){body{min-height:max(1020px,100svh)}}
@media(max-width:700px){.work-note,.about-note{top:auto}.education-index{margin-top:28px}.education-index h2{margin-bottom:12px}}
#work-note:not(.education-card) #note-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:700px){.work-note{min-height:300px}}

/* Physical motion lives on the objects, never on the surrounding layout. */
#contact-card{padding:0;min-height:0;background:transparent;border:0;box-shadow:none;transform:rotate(calc(-3deg + var(--drag-tilt,0deg)));transition:transform 380ms cubic-bezier(.2,.8,.2,1)}
.card-surface{position:relative;padding:28px 31px 22px;min-height:264px;border-radius:7px;background:#e5ba69;border:1px solid #62574016;box-shadow:0 1px 1px #443a2814,0 5px 10px -4px #443a2824,0 18px 32px -15px #443a2830,inset 0 1px 0 #ffffff50;backface-visibility:hidden;transform-origin:50% 50%;transition:box-shadow 220ms ease}
#contact-card.is-dragging{transform:translateY(-4px) rotate(calc(-3deg + var(--drag-tilt,0deg))) scale(1.012);transition:transform 100ms ease-out}
#contact-card.is-dragging .card-surface{box-shadow:0 3px 5px #443a2814,0 14px 25px -6px #443a2830,0 28px 45px -15px #443a2836,inset 0 1px 0 #ffffff50}
#card-front,#card-back{height:114px;min-height:114px}
#writing-footnote{font-family:Georgia,serif;font-size:21px;color:var(--accent);line-height:1;vertical-align:super;margin-left:3px;padding:0 4px;position:relative;top:3px}
#writing-footnote:hover,#writing-footnote[aria-expanded=true]{color:var(--ink)}
#writing-note{position:absolute;top:calc(100% + 17px);left:12px;width:300px;max-width:calc(100vw - 70px);padding:24px 28px 22px 23px;background:#e6dfd1;color:#474638;border-radius:3px;box-shadow:0 3px 5px #443a2810,0 12px 24px -12px #443a2830;transform:rotate(-1deg);z-index:4}
#writing-note p{font-family:Georgia,serif;font-size:15px;line-height:1.6;margin:0}#writing-note .close{font-size:17px;top:5px;right:6px}
@media(prefers-reduced-motion:reduce){#contact-card,#contact-card.is-dragging{transform:rotate(-3deg);transition:none}.card-surface{transition:none}}
/* Fleeting footprints, like ink appearing on an old map. */
.cursor-footstep{position:fixed;left:0;top:0;width:8px;height:16px;color:#6a6654;pointer-events:none;z-index:10000;opacity:0;transform-origin:50% 50%;animation:footstep-fade 1200ms ease-out forwards}
.cursor-footstep svg{display:block;width:100%;height:100%;fill:currentColor}
@keyframes footstep-fade{0%{opacity:0}8%{opacity:.34}35%{opacity:.27}100%{opacity:0}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-footstep{display:none;animation:none}}

#name-play{font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;color:inherit;display:inline-block}
#name-play:hover{color:inherit}.name-i{position:relative;display:inline-block}
.name-dot{position:absolute;left:.12em;top:.075em;width:.16em;height:.16em;border-radius:50%;background:#ad593e;transform:translateX(-50%);pointer-events:none;will-change:transform;z-index:2}
@media(prefers-reduced-motion:reduce){.name-dot{will-change:auto}}