@charset "UTF-8";
:root{--paper:#f7f6f2;--ink:#252a29;--muted:#6b706c;--line:#dcded6;--accent:#c64b31}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:#e8cdad;color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:7px;border-radius:2px}
.wrap{width:min(1160px,calc(100% - 112px));margin-inline:auto}
.skip{position:absolute;top:-100px;left:20px;background:var(--ink);color:white;padding:12px;z-index:10}
.skip:focus{top:12px}
.topbar{display:flex;align-items:center;justify-content:space-between;height:116px}
.signature{font-family:Georgia,serif;font-size:35px;letter-spacing:-3px;font-weight:bold;line-height:1}
.signature span,h1 span{color:var(--accent)}
.contact{font-size:14px;border-bottom:1px solid var(--line);padding-bottom:3px}
.contact span,.project-link span,footer a span{display:inline-block;margin-left:8px;transition:transform .2s}
a:hover>span{transform:translate(2px,-2px)}
.intro{padding:49px 0 88px}
h1,h2,p{margin:0}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(64px,7.4vw,100px);font-weight:normal;line-height:1.08;letter-spacing:-5px}
.intro-bottom{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-top:35px}
.intro-bottom>p:first-child{font-size:25px;line-height:1.4;letter-spacing:-.6px}
.bio{font-size:16px;color:var(--muted);line-height:1.6;width:350px}
.project{border-top:1px solid var(--line);padding:52px 0;display:grid;grid-template-columns: .9fr 1.3fr;gap:70px;align-items:center}
.project-copy{padding:5px 0}
.project-title{display:flex;align-items:center;gap:17px;flex-wrap:wrap}
h2{font-size:25px;font-weight:600;letter-spacing:-.9px;line-height:1.25}
.status{font-size:12px;color:var(--muted);white-space:nowrap}
.live{color:#557358;display:flex;align-items:center;gap:6px}
.live>span{width:6px;height:6px;background:#648467;border-radius:50%}
.summary{font-family:Georgia,"Times New Roman",serif;font-size:31px;line-height:1.2;letter-spacing:-.8px;margin:23px 0}
.project-copy>p:not(.summary){color:#606660;font-size:15px;line-height:1.75;margin-top:16px;max-width:365px}
strong{color:var(--ink);font-weight:600}
.project-link{display:inline-block;font-size:14px;font-weight:600;margin-top:25px;padding-bottom:3px;border-bottom:1px solid var(--ink)}
.project-copy>p.reflection{font-size:14px;color:var(--ink);margin-top:24px}
.visual{height:490px;position:relative;overflow:hidden;border-radius:3px;isolation:isolate}
.trip-visual{background:#dde6d5}
.phone{position:absolute;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px #23392a26;border:5px solid #fff;background:white;line-height:0}
.phone img{width:100%;height:auto;display:block}
.trip-phone-main{width:224px;left:9%;top:48px;transform:rotate(-7deg);z-index:2}
.trip-phone-back{width:207px;right:8%;top:87px;transform:rotate(8deg);z-index:1}
.visual-note{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:18px 20px;text-align:center;font-size:11px;letter-spacing:.15px}
.trip-visual .visual-note{background:#dde6d5;color:#53654b}
.hobby-visual{background:#e5dccc;display:flex;align-items:center;justify-content:center;padding-bottom:25px}
.browser-frame{width:89%;border-radius:7px;overflow:hidden;box-shadow:0 22px 40px #45332225;transform:rotate(-3deg);background:white}
.browser-bar{height:31px;display:flex;gap:5px;align-items:center;background:#f5f5f2;padding:0 12px;position:relative}
.browser-bar i{width:5px;height:5px;border-radius:100%;background:#c9ccc6}
.browser-bar span{position:absolute;left:50%;transform:translateX(-50%);font-size:9px;color:#7b817a}
.hobby-crop{aspect-ratio:1.06;overflow:hidden;position:relative;background:white}
.hobby-crop img{position:absolute;width:177%;max-width:none;height:auto;left:-31%;top:-2%}
.hobby-visual .visual-note{background:#e5dccc;color:#76664f}
.ditch-visual{background:#e8c5c4}
.ditch-visual .phone{border:4px solid #242323;background:#242323;box-shadow:0 18px 32px #5e252c28;border-radius:28px}
.ditch-phone-main{width:203px;left:12%;top:50px;transform:rotate(-8deg);z-index:2}
.ditch-phone-back{width:205px;right:10%;top:98px;transform:rotate(9deg);z-index:1}
.ditch-visual .visual-note{background:#e8c5c4;color:#7f4e50}
footer{position:relative;border-top:1px solid var(--line);padding:65px 0 72px}
footer p{font-family:Georgia,serif;font-size:30px;letter-spacing:-.6px;margin-bottom:10px}
footer a{font-size:17px;border-bottom:1px solid #a7aaa1;padding-bottom:4px}
.footer-name{position:absolute;right:0;bottom:75px;font-size:12px;color:var(--muted)}
@media(min-width:1500px){.intro{padding-top:70px;padding-bottom:100px}}
@media(max-width:1050px){.wrap{width:calc(100% - 72px)}.project{gap:35px;grid-template-columns:1fr 1.15fr}.visual{height:450px}.phone{max-width:47%}.trip-phone-main{left:5%}.trip-phone-back{right:5%}.ditch-phone-main{left:7%}.ditch-phone-back{right:5%}.summary{font-size:29px}.bio{width:310px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.topbar{height:85px}.signature{font-size:30px}.intro{padding:35px 0 49px}h1{font-size:clamp(48px,10.6vw,76px);letter-spacing:-2.8px}.intro-bottom{display:block;margin-top:24px}.intro-bottom>p:first-child{font-size:23px}.bio{margin-top:23px;width:auto;font-size:15px}.bio br{display:none}.bio{max-width:350px}.project{display:flex;flex-direction:column;gap:28px;padding:35px 0 38px;align-items:stretch}.project-copy>p:not(.summary){max-width:520px}.summary{font-size:29px;margin:18px 0}.project-title{gap:13px}h2{font-size:24px}.visual{height:450px;width:100%;max-width:540px;align-self:center}.phone{max-width:none}.trip-phone-main{left:12%;width:210px}.trip-phone-back{right:10%;width:195px}.ditch-phone-main{left:12%;width:195px}.ditch-phone-back{right:11%;width:195px}.browser-frame{max-width:450px;width:84%}.hobby-visual{height:435px}.hobby-crop{aspect-ratio:1.2}.visual-note{font-size:10px}footer{padding:38px 0 45px}footer p{font-size:27px}.footer-name{display:block;position:static;margin-top:35px}}
@media(max-width:420px){.visual{height:385px}.trip-phone-main{left:7%;top:35px;width:175px}.trip-phone-back{right:5%;top:67px;width:168px}.ditch-phone-main{left:7%;top:33px;width:173px}.ditch-phone-back{right:6%;top:70px;width:173px}.hobby-visual{height:355px}.browser-frame{width:89%}.visual-note{font-size:9px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.project-gallery{grid-column:1/-1;margin-top:-25px;min-width:0}
.project-gallery summary{cursor:pointer;width:fit-content;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:5px;padding:8px 0}
.project-gallery summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.gallery-grid figure{margin:0;min-width:0}
.gallery-grid a{display:block;background:#eceae3;border:1px solid var(--line);padding:12px}
.gallery-grid img{display:block;width:100%;height:260px;object-fit:contain}
.gallery-grid figcaption{font-size:12px;color:var(--muted);margin-top:8px}
@media(max-width:760px){.project-gallery{margin-top:-8px}.gallery-grid{grid-template-columns:1fr;gap:22px}.gallery-grid img{height:auto;max-height:420px}}

/* Keep the complete phone screens inside each panel, including their rotation. */
.trip-visual .phone,.ditch-visual .phone{width:auto;height:74%;max-width:none;top:6%;border-radius:24px}
.trip-visual .phone img,.ditch-visual .phone img{width:auto;height:100%;max-width:100%;object-fit:contain}
.trip-visual .trip-phone-main{left:10%;right:auto}
.trip-visual .trip-phone-back{right:9%;left:auto;top:10%}
.ditch-visual .ditch-phone-main{left:12%;right:auto}
.ditch-visual .ditch-phone-back{right:10%;left:auto;top:10%}
@media(min-width:761px) and (max-width:1050px){
 .trip-visual .phone,.ditch-visual .phone{height:67%;top:10%}
 .trip-visual .trip-phone-main,.ditch-visual .ditch-phone-main{left:8%}
 .trip-visual .trip-phone-back,.ditch-visual .ditch-phone-back{right:7%;top:17%}
}
@media(max-width:420px){
 .trip-visual .phone,.ditch-visual .phone{height:71%;top:7%}
 .trip-visual .trip-phone-main,.ditch-visual .ditch-phone-main{left:8%}
 .trip-visual .trip-phone-back,.ditch-visual .ditch-phone-back{right:7%;top:12%}
}

.contact-section{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:start}
.contact-intro h2{font-family:Georgia,serif;font-weight:400;font-size:34px;line-height:1.2;letter-spacing:-1px}
.contact-intro p{font:inherit;color:var(--muted);margin:15px 0 24px}
.social-links{display:flex;gap:24px;flex-wrap:wrap}
.social-links a{font-size:14px}
#contact-form label{display:block;font-size:13px}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#contact-form input,#contact-form textarea{display:block;width:100%;margin:7px 0 19px;border:1px solid #c6cbc2;border-radius:4px;background:#fffefa;padding:11px 12px;color:var(--ink);font:inherit;font-size:16px}
#contact-form textarea{resize:vertical;min-height:130px}
#contact-form input:focus-visible,#contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#contact-form button{border:0;border-radius:4px;background:var(--ink);color:var(--paper);font:inherit;font-size:14px;padding:11px 22px;cursor:pointer;margin-top:14px}
#contact-form button:disabled{opacity:.5;cursor:default}
#contact-form button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#contact-status{font:inherit;font-size:13px;margin:12px 0 0;color:var(--muted);min-height:22px}
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){.contact-section{grid-template-columns:1fr;gap:30px}.contact-intro h2{font-size:30px}}
@media(max-width:420px){.contact-fields{grid-template-columns:1fr;gap:0}}
.hobby-public-screens{position:absolute;inset:28px 24px 65px;display:flex;align-items:center;gap:16px}
.hobby-public-catalog{width:68%;height:auto;box-shadow:0 12px 30px #30291b1c;border-radius:5px}
.hobby-public-mobile{width:30%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 12px 15px #30291b25)}