@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500;1,600&display=swap');
:root{--paper:#f5f3eb;--ink:#252820;--green:#397c36;--lime:#c7ed76;--line:#d5d7c9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:5px}.skip{position:absolute;left:20px;top:-80px;background:var(--lime);padding:10px;z-index:10}.skip:focus{top:10px}header{max-width:1380px;margin:auto;padding:20px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.wordmark{font-size:39px;letter-spacing:-3px;font-weight:700}.wordmark span{color:var(--green);font-size:29px;display:inline-block;margin-left:8px}nav{display:flex;align-items:center;gap:34px;font-size:14px}nav a:hover,.underlink:hover{color:var(--green)}.hello{border:1px solid var(--ink);border-radius:30px;padding:9px 20px}.hero{max-width:1380px;margin:auto;padding:70px 5% 65px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:45px}.eyebrow,.tiny,.art-label,.art-bottom{font-size:11px;letter-spacing:1.7px;font-weight:600}.eyebrow{margin:0 0 27px}.hero h1{font-size:clamp(58px,7.4vw,112px);line-height:.99;letter-spacing:-6px;font-weight:500;margin:0 0 28px;position:relative}em{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--green)}.spark{font-size:85px;color:var(--green);position:absolute;right:6%;bottom:0;transform:rotate(15deg)}.intro{font-size:18px;line-height:1.7}.pill{display:inline-flex;align-items:center;gap:55px;border-radius:50px;background:var(--ink);color:var(--paper);padding:13px 24px;margin-top:15px;font-size:14px}.pill:hover{background:var(--green)}.pill span{font-size:23px}.handwritten{font-family:Georgia,serif;font-style:italic;font-size:15px;transform:rotate(-3deg);color:var(--green);margin-top:23px}.portrait{margin:0;position:relative;height:510px;background:#e8e6de;border-radius:48% 48% 4px 4px;overflow:visible}.portrait img{width:100%;height:100%;object-fit:cover;object-position:85% center;filter:grayscale(1);border-radius:inherit}.portrait figcaption{position:absolute;bottom:19px;left:23px;font-size:10px;letter-spacing:2px;background:var(--paper);padding:5px 10px}.stamp{position:absolute;right:-20px;top:35px;background:var(--lime);width:135px;height:135px;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:14px;font-weight:600;line-height:1.4;transform:rotate(12deg)}.ribbon{overflow:hidden;white-space:nowrap;background:var(--lime);font-size:13px;letter-spacing:3px;padding:17px 0;text-align:center;word-spacing:12px}.name-section,.work,.play,.story,.contact{padding:90px max(5%,calc((100% - 1240px)/2))}h2{font-size:clamp(36px,4.4vw,65px);font-weight:500;letter-spacing:-2.5px;line-height:1.1;margin:0 0 25px}.name-section{display:grid;grid-template-columns:1fr 1fr;gap:10%;border-bottom:1px solid var(--line)}.hint{font-size:13px;color:var(--green);margin-top:35px}.full-name{font-size:clamp(35px,4.5vw,62px);font-weight:700;letter-spacing:5px;line-height:1.2}.full-name button{font:inherit;letter-spacing:inherit;color:var(--green);background:none;border:0;padding:0;transition:transform .2s}.full-name button:hover,.full-name button[aria-expanded=true]{transform:translateY(-3px);text-shadow:2px 2px var(--lime)}.reveal{margin-top:24px;background:#e9eddf;padding:20px 24px;border-left:3px solid var(--green);min-height:155px}.reveal h3{margin:7px 0;font-size:23px;font-weight:500;line-height:1.2}.reveal p{margin:5px 0;font-size:14px}.name-play>.tiny{font-size:9px;margin-top:12px;color:var(--green)}.section-top{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:45px}.section-top>p{max-width:340px;font-size:15px}.project{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;margin:0 0 60px}.project.reverse .project-art{order:2}.project-art{min-height:360px;position:relative;padding:25px 30px;overflow:hidden}.fork{background:#e4e9dc}.fork-mark{font-size:67px;line-height:.85;letter-spacing:-4px;margin-top:35px}.fork-mark i{font-family:Georgia,serif;font-weight:400}.fork-mark span{font-size:150px;position:absolute;right:35px;top:75px;color:var(--green)}.art-bottom{position:absolute;bottom:22px;left:30px;font-size:9px}.project-copy h3{font-size:35px;line-height:1.15;letter-spacing:-1.3px;font-weight:500;margin:17px 0}.project-copy p{font-size:15px}.project-copy .tiny{font-size:10px;color:var(--green)}details{border-top:1px solid var(--line);margin-top:25px;padding-top:15px;font-size:14px}summary{cursor:pointer;list-style:none;color:var(--green)}summary::-webkit-details-marker{display:none}summary span{float:right}details[open] summary span{transform:rotate(45deg)}details a{color:var(--green);text-decoration:underline;text-underline-offset:4px}.beerster{background:#e9b6a4}.hunt-type{position:relative;z-index:1;font-size:50px;line-height:1.04;margin-top:32px;letter-spacing:-2px}.hunt-type i{font-family:Georgia,serif}.egg{position:absolute;width:90px;height:120px;border-radius:55% 55% 45% 45%;background:var(--lime);right:65px;top:135px;transform:rotate(25deg)}.e2{right:10px;top:65px;background:#f5e9bc;transform:rotate(-15deg)}.e3{right:20px;top:245px;background:var(--green);width:50px;height:65px}.events{background:#293e32;color:var(--paper)}.event-type{font-size:64px;line-height:.95;margin-top:42px;letter-spacing:-3px}.event-type span{color:var(--lime);font-size:110px;position:absolute;right:40px;top:95px}.event-tags{display:flex;gap:8px;position:absolute;bottom:25px;flex-wrap:wrap}.event-tags span{border:1px solid #859384;border-radius:20px;padding:3px 9px;font-size:9px;letter-spacing:1px}.next-chapter{border-top:1px solid var(--line);padding:30px 0 0;display:flex;gap:30px;align-items:center}.mini-star{font-size:70px;color:var(--green)}.next-chapter h3{font-size:25px;font-weight:500;margin:5px 0}.next-chapter p{margin:0;font-size:14px}.next-chapter .tiny{font-size:10px}.play{background:#e9eddf}.play-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:55px}.play-note{padding:30px;background:var(--paper);display:block;transition:transform .2s}.music{transform:rotate(-2deg)}.outdoors{transform:rotate(1deg);background:#d8e6b7}.company{transform:rotate(-1deg);background:#ecdbc5}.music:hover{transform:rotate(0deg) translateY(-5px)}.note-icon{font-size:55px;line-height:1;color:var(--green)}.play-note h3{font-size:30px;letter-spacing:-1px;line-height:1.1;font-weight:500;margin:22px 0}.play-note p{font-size:14px}.note-link,.text-button{font-size:12px;color:var(--green);text-decoration:underline;text-underline-offset:5px}.text-button{border:0;padding:0;background:none;text-align:left}.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%}.large{font-size:23px;line-height:1.6;margin-top:0}.story-layout p:not(.large){font-size:15px}.underlink{display:block;font-size:13px;margin-top:15px;text-decoration:underline;text-underline-offset:5px}.contact{background:var(--lime);position:relative}.contact h2{font-size:clamp(42px,6.5vw,90px);max-width:1000px}.contact h2 span{font-family:Arial,sans-serif;color:var(--green)}.email{margin-left:25px;font-size:14px}.contact .handwritten{display:inline-block;margin-left:35px}footer{padding:25px 5%;display:flex;gap:25px;align-items:center;flex-wrap:wrap;font-size:11px}footer p{margin-right:auto}footer button{background:none;border:0;color:var(--green);font-size:28px}#last-secret{width:100%;text-align:right;color:var(--green)}[hidden]{display:none!important}@media(max-width:760px){header{padding:14px 6%}nav{gap:18px;font-size:12px}.hello{padding:6px 12px}.wordmark{font-size:32px}.hero{padding:45px 6%;grid-template-columns:1fr;gap:30px}.hero h1{font-size:70px;letter-spacing:-4px;max-width:500px}.spark{right:5%;font-size:65px}.portrait{height:390px;max-width:480px;width:100%;margin:auto}.stamp{right:5px;width:115px;height:115px;font-size:12px}.eyebrow{font-size:9px;letter-spacing:1.3px}.name-section,.work,.play,.story,.contact{padding:60px 6%}.name-section,.story-layout{grid-template-columns:1fr;gap:35px}.full-name{font-size:48px}.section-top{display:block}.section-top>p{max-width:100%}.project{grid-template-columns:1fr;gap:22px;margin-bottom:45px}.project.reverse .project-art{order:0}.project-art{min-height:330px}.play-grid{grid-template-columns:1fr;gap:22px;margin-top:35px}.play-note{padding:25px 30px}.play-note h3 br{display:none}.play-note h3{margin:15px 0}.note-icon{float:right}.email{display:block;margin:20px 0}.contact .handwritten{margin-left:0;display:block}footer{gap:16px}footer p{font-size:10px}.large{font-size:21px}.contact h2{letter-spacing:-2px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.portrait img{object-position:85% center;filter:grayscale(1)}
.stamp{top:auto;bottom:45px;right:-20px}
@media(max-width:760px){.stamp{top:auto;bottom:40px;right:-8px}}

/* Text-first actions: transparent at rest, a light green frame on interaction. */
.pill,.hello{background:transparent;color:var(--ink);border:1px solid transparent;border-radius:3px;transition:border-color .2s,color .2s;background:transparent}
.pill{gap:20px;padding:10px 15px;margin-left:-15px}
.hello{padding:8px 12px}
.pill:hover,.pill:focus-visible,.hello:hover,.hello:focus-visible{background:transparent;border-color:var(--green);color:var(--green)}
.link-arrow{display:inline-block!important;font-family:Arial,sans-serif;font-style:normal;transition:transform .22s ease;transform-origin:center;white-space:nowrap}

.pill .link-arrow{font-size:21px}
@media(prefers-reduced-motion:reduce){.link-arrow{transition:none}}

.contact .email{margin-left:0;display:inline-block}


.link-arrow{--destination:45deg;transform:rotate(0deg);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.arrow-external{--destination:-90deg}
.arrow-internal{--destination:45deg}
.arrow-down{--destination:90deg}
a:hover .link-arrow,a:focus-visible .link-arrow{transform:rotate(var(--destination))}
@media(prefers-reduced-motion:reduce){.link-arrow{transition:none}}

.contact-headline-link{color:var(--green);text-decoration:none}
.envelope-icon{width:.8em;height:.6em;vertical-align:baseline;margin-left:.12em;transition:transform .25s ease}
.contact-headline-link:hover em{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.contact-headline-link:hover .envelope-icon,.contact-headline-link:focus-visible .envelope-icon{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.envelope-icon{transition:none}}

.email-icon-swap{display:inline-block;position:relative;width:.92em;height:.8em;vertical-align:baseline;margin-left:.12em;color:var(--green)}
.email-rest-arrow{position:absolute;inset:0;font-family:Arial,sans-serif;font-style:normal;line-height:.8;opacity:1;transform:translate(0,0);transition:opacity .22s ease,transform .3s ease}
.email-send-icon{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translate(-5px,5px) scale(.85);transition:opacity .22s ease,transform .3s ease}
.contact-headline-link:hover .email-rest-arrow,.contact-headline-link:focus-visible .email-rest-arrow{opacity:0;transform:translate(7px,-7px)}
.contact-headline-link:hover .email-send-icon,.contact-headline-link:focus-visible .email-send-icon{opacity:1;transform:translate(0,0) scale(1)}
@media(prefers-reduced-motion:reduce){.email-rest-arrow,.email-send-icon{transition:none}}

.play-note:hover,.play-note:focus-within{transform:rotate(0deg) translateY(-5px)}

.garden-morph{display:inline-block;position:relative;width:1.2em;height:1.2em;vertical-align:-.2em;margin-left:.15em}
.garden-plus{position:absolute;inset:0;line-height:1.2;opacity:1;transform:rotate(0deg) scale(1);transition:opacity .2s ease,transform .3s ease}
.garden-circle{position:absolute;inset:.1em;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .3s ease}
#garden:hover .garden-plus,#garden:focus-visible .garden-plus{opacity:0;transform:rotate(90deg) scale(.4)}
#garden:hover .garden-circle,#garden:focus-visible .garden-circle{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.garden-plus,.garden-circle{transition:none}}

.pill:hover,.pill:focus-visible{border-color:transparent}

summary .garden-morph{float:right}
summary .garden-morph span{float:none}
details[open] summary .garden-morph{transform:none}
summary:hover .garden-plus,summary:focus-visible .garden-plus{opacity:0;transform:rotate(90deg) scale(.4)}
summary:hover .garden-circle,summary:focus-visible .garden-circle{opacity:1;transform:scale(1)}

.contact .handwritten{transform:rotate(0deg);transition:transform .3s ease;transform-origin:center}
.contact:has(.contact-headline-link:hover) .handwritten,.contact:has(.contact-headline-link:focus-visible) .handwritten{transform:rotate(-3deg)}
@media(prefers-reduced-motion:reduce){.contact .handwritten{transition:none}}

details[open] summary .garden-plus{transform:none}
summary:hover .garden-plus,summary:focus-visible .garden-plus{transform:rotate(90deg) scale(.4)}

/* Open stories offer a close symbol on hover, rather than a circle. */
details[open] summary:hover .garden-circle,details[open] summary:focus-visible .garden-circle{opacity:0;transform:scale(.4)}
details[open] summary:hover .garden-plus,details[open] summary:focus-visible .garden-plus{opacity:0;transform:none}
details[open] summary .garden-morph::after{content:'×';position:absolute;inset:0;line-height:1.2;opacity:0;transform:rotate(-45deg) scale(.5);transition:opacity .2s ease,transform .3s ease}
details[open] summary:hover .garden-morph::after,details[open] summary:focus-visible .garden-morph::after{opacity:1;transform:rotate(0deg) scale(1)}
@media(prefers-reduced-motion:reduce){details[open] summary .garden-morph::after{transition:none}}

/* Draw disclosure symbols with the same strokes and footprint. */
.project summary .garden-plus{font-size:0;line-height:0}
.project summary .garden-plus::before,.project summary .garden-plus::after{content:'';position:absolute;background:currentColor;left:50%;top:50%;width:.8rem;height:1px;transform:translate(-50%,-50%);transition:transform .3s ease,opacity .2s ease}
.project summary .garden-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.project details[open] summary .garden-plus::after{opacity:0}
.project details[open] summary .garden-morph::after{content:none}
.project details[open] summary:hover .garden-plus,.project details[open] summary:focus-visible .garden-plus{opacity:1;transform:rotate(0deg) scale(1)}
.project details[open] summary:hover .garden-plus::before,.project details[open] summary:focus-visible .garden-plus::before{transform:translate(-50%,-50%) rotate(45deg)}
.project details[open] summary:hover .garden-plus::after,.project details[open] summary:focus-visible .garden-plus::after{opacity:1;transform:translate(-50%,-50%) rotate(-45deg)}

.career{padding-top:0}.career-timeline{margin-top:35px}.career-entry{display:grid;grid-template-columns:220px 1fr;gap:35px;padding:25px 0;border-top:1px solid var(--line)}.career-entry h3{margin:0}.career-entry p{margin:8px 0}.career-role{color:var(--green)}@media(max-width:760px){.career-entry{grid-template-columns:1fr;gap:5px}}

.event-tags button{border:1px solid #859384;border-radius:20px;padding:3px 9px;font-size:9px;letter-spacing:1px;background:transparent;color:var(--paper);transition:background .2s,color .2s,border-color .2s}.event-tags button:hover,.event-tags button[aria-pressed=true]{background:var(--lime);color:var(--ink);border-color:var(--lime)}.event-tags button:focus-visible{outline-color:var(--lime)}