@font-face{font-family:Shantell;src:url('/assets/fonts/ShantellSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ShantellVariable;src:url('/assets/fonts/ShantellSans-Variable.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
:root{color-scheme:light dark;--paper:#fafaf7;--ink:#303331;--blue:#395a73;--grid:#556a7610;--muted:#656d6b;--line:#b7c0c2;--orange:#c46a3d;--green:#47725f;--rule:#d29c7930}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
body{position:relative;isolation:isolate;min-height:100svh;margin:0;color:var(--ink);font-family:Shantell,cursive;font-weight:400;-webkit-font-smoothing:antialiased}
#paper-grid{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
html.grid-ready{background-image:none}
a{color:var(--blue);text-decoration:none;text-underline-offset:6px;text-decoration-thickness:1px}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--blue);outline-offset:5px;border-radius:2px}
a.ink-link{position:relative;isolation:isolate;white-space:nowrap;transition:color .22s ease,transform .3s cubic-bezier(.2,.8,.2,1);text-decoration:none}
a.ink-link::before{content:'';position:absolute;z-index:-1;left:-5px;right:-5px;top:30%;bottom:20%;border-radius:35% 9% 25% 13%;background:var(--blue);opacity:0;transform:scaleX(.1) rotate(-2deg);transform-origin:left center;transition:transform .38s cubic-bezier(.18,.8,.2,1),opacity .25s ease;pointer-events:none}
a.ink-link::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:5px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7'%3E%3Cpath d='M2 4 Q24 1 43 4 T82 3 T118 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7'%3E%3Cpath d='M2 4 Q24 1 43 4 T82 3 T118 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.18,.8,.2,1);pointer-events:none}
a.ink-link:is(:hover,:focus-visible){color:var(--ink);transform:translateY(-2px) rotate(-.7deg)}
a.ink-link:is(:hover,:focus-visible)::before{opacity:.12;transform:scaleX(1) rotate(-2deg)}
a.ink-link:is(:hover,:focus-visible)::after{transform:scaleX(1)}
a.ink-link:active{transform:translateY(0) rotate(0)}
.skip-link{position:fixed;z-index:2;left:20px;top:16px;transform:translateY(-200%);padding:10px 16px;background:var(--paper);border:1px solid var(--line)}
.skip-link:focus{transform:none}
.page{width:min(100% - 80px,1000px);margin:0 auto;padding:32px 0 48px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px}
.home{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);width:62px;height:46px;flex:none}
.brand-logo{display:block;width:62px;height:46px;object-fit:contain;filter:none}
nav{display:flex;align-items:center;gap:30px}
nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.intro{padding:69px 0 58px;margin-left:56px;max-width:770px}
.scope{margin:0 0 17px;color:var(--muted);font-size:13px;letter-spacing:.1px;line-height:1.7}
h1{margin:0;font-size:clamp(44px,6.5vw,68px);line-height:1.4;letter-spacing:-2.7px;font-weight:400}
.intro-copy{max-width:650px;margin:21px 0 0;font-size:clamp(19px,2.4vw,23px);line-height:1.65;letter-spacing:-.5px}
.work{position:relative;scroll-margin-top:30px}
.work::before{position:absolute;content:'';top:33px;bottom:44px;left:17px;width:1px;background:var(--rule)}
.project{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);padding:28px 0 30px;gap:0;align-items:start}
.project+.project::before{content:'';position:absolute;left:56px;right:0;top:0;border-top:1px solid var(--line);opacity:.65;transform:rotate(-.12deg)}
.project-label{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:11px;line-height:32px}
.project-label>span:last-child{display:none}
.project-dot{display:inline-block;position:relative;z-index:1;flex:none;width:11px;height:11px;margin-left:12px;border-radius:50% 46% 51% 45%;background:var(--blue);box-shadow:0 0 0 6px var(--paper)}
.project-fyxed .project-dot{background:var(--green)}
.project-youtube .project-dot{background:var(--orange)}
.project-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px}
h2{margin:0;font-size:25px;font-weight:400;line-height:1.4;letter-spacing:-.7px}
.role{font-size:12px;color:var(--muted);line-height:1.8}
.project-body p{max-width:586px;margin:13px 0 12px;font-size:15px;line-height:1.9;letter-spacing:-.12px}
.project-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.contact{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--line);margin-left:56px;margin-top:17px;padding-top:26px}
.contact a{display:inline-flex;align-items:center;min-height:44px}
.email{font-size:17px;letter-spacing:-.4px}
@media(prefers-color-scheme:dark){:root{--paper:#202526;--ink:#e4e6df;--blue:#a4c0d2;--grid:#c0d3d70b;--muted:#a4aeac;--line:#4b5659;--orange:#dc9a73;--green:#95b8a5;--rule:#dc9a7340}.brand-logo{filter:invert(1)}}
@media(min-width:1200px){.page{padding-top:40px}.intro{padding-top:76px;padding-bottom:62px}}
@media(max-width:800px){.page{width:calc(100% - 48px)}.intro{margin-left:40px;padding-top:48px;padding-bottom:38px}.project{grid-template-columns:40px minmax(0,1fr)}.project+.project::before{left:40px}.project-body p{padding-right:15px}.project-heading{gap:4px 15px}.contact{margin-left:40px}}
@media(max-width:600px){.page{width:calc(100% - 40px);padding-top:18px;padding-bottom:28px}.topbar{gap:12px}nav{gap:18px}nav a{font-size:12px}.intro{margin-left:24px;padding:45px 0 36px}.scope{font-size:11px;margin-bottom:16px}h1{font-size:clamp(30px,9.2vw,50px);letter-spacing:-1.4px}.intro-copy{font-size:19px;margin-top:19px;max-width:410px}.work::before{left:5px;top:33px;bottom:40px}.project{grid-template-columns:24px minmax(0,1fr);padding:25px 0 24px}.project-dot{width:9px;height:9px;margin-left:1px;box-shadow:0 0 0 5px var(--paper)}.project+.project::before{left:24px}.project-heading{display:block}h2{font-size:24px}.role{display:block;margin-top:5px;font-size:11px}.project-body p{font-size:14px;line-height:1.85;margin-top:12px;padding-right:0}.project-link{font-size:12px}.contact{display:block;margin-left:24px;padding-top:19px;margin-top:10px}.email{font-size:clamp(13px,3.8vw,17px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a.ink-link,a.ink-link::before,a.ink-link::after{transition:none}a.ink-link:is(:hover,:focus-visible){transform:none}}