*{box-sizing:border-box}
:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#193c31;font-synthesis:none}
html{height:100%;overflow:hidden;overscroll-behavior:none;background:#193c31;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{position:fixed;inset:0;width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
button,a{-webkit-tap-highlight-color:transparent}

.experience{position:fixed;inset:0;height:100%;height:100dvh;overflow:hidden;background:#193c31}
.hero{position:absolute;inset:0;height:100%;touch-action:pinch-zoom;overscroll-behavior:none;overflow:hidden;isolation:isolate;background:#328fe1}
.scene-fallback{position:absolute;inset:0;z-index:-3}
.scene-fallback img{width:100%;height:100%;object-fit:cover}
.garden-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.has-garden-3d .scene-fallback{display:none}
.fallback-table{display:none}
.render-fallback .scene-fallback,.render-fallback .hero-ui{height:100%}
.render-fallback .fallback-table{display:none;position:absolute;inset:0;background:url('assets/table-wood.png') center/cover}
.render-fallback[data-view=table] .fallback-table{display:block}
.render-fallback[data-view=table] .intro{visibility:hidden}
#performance-report{position:fixed;right:12px;bottom:12px;z-index:20;max-width:calc(100vw - 24px);max-height:65vh;overflow:auto;padding:12px;color:#d8ffdd;background:#08170fe8;font:11px/1.4 monospace;white-space:pre-wrap;pointer-events:none;border-radius:8px}

.hero-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.header,.intro{pointer-events:auto}
.header{height:9.1svh;min-height:70px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border:0}
.wordmark{font-weight:600;font-size:20px;letter-spacing:-1.1px;text-decoration:none;color:white}
.button{-webkit-appearance:none;appearance:none;border:0;border-radius:999px;background:#577800;color:#e8e8df;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;font:600 14px/1 Arial,Helvetica,sans-serif;letter-spacing:-.02em;white-space:nowrap;touch-action:pinch-zoom;transition:background .18s ease,transform .18s ease}
.button span{font-size:19px;font-weight:400;line-height:1}
@media(hover:hover) and (pointer:fine){.button:hover{background:#678b0a;transform:translateY(-1px)}}
.button:active{background:#496700;transform:scale(.98)}
.button:focus-visible,.wordmark:focus-visible{outline:3px solid white;outline-offset:5px}
.hello{width:128px;min-height:44px;padding:0 18px}
.intro{isolation:isolate;position:relative;margin-left:5%;padding-top:10.6svh;width:max-content;max-width:90%;opacity:1;will-change:opacity}
.eyebrow{font-weight:600;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:2.3px;color:#deebd3;margin:0 0 30px}
h1{font-size:clamp(48px,5.05vw,94px);font-weight:400;letter-spacing:-.071em;line-height:1.1;margin:0}
h1 span{display:block}
h1 span+span{margin-top:.08em}
.description{font-weight:600;font-size:clamp(14px,.96vw,16px);line-height:1.6;margin:18px 0 28px;color:#e8eee8}
.explore{width:194px;min-height:50px;padding:0 20px}

@media(min-aspect-ratio:2/1){.intro{padding-top:5svh}h1{font-size:min(5.05vw,10svh)}}
@media(max-aspect-ratio:4/3) and (min-width:701px){h1{font-size:6vw}.intro{padding-top:9svh}}

@media(max-width:700px){
 .header{min-height:74px;height:74px;padding:0 6%}
 .wordmark{font-size:20px}
 .hello{min-height:44px;width:124px;font-size:14px}
 .intro{margin-left:6%;max-width:88%;padding-top:55px}
 .eyebrow{font-size:11px;margin-bottom:25px;letter-spacing:2px}
 h1{font-size:clamp(32px,7.9vw,55px);line-height:1.17;letter-spacing:-.065em}
 h1 span+span{margin-top:0}
 .description{font-weight:600;font-size:14px;line-height:1.7;margin:24px 0}
 .explore{font-size:14px;min-height:50px;width:190px}

}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


@media(max-width:700px){.intro::before{content:"";position:absolute;z-index:-1;inset:-80px -15px -40px -24px;pointer-events:none;background:radial-gradient(ellipse at 40% 45%,#143b5899,transparent 75%)}}

/* The paper links follow the same camera projection as the wooden table. */
.project-papers{position:absolute;inset:0;z-index:1;pointer-events:none;visibility:hidden}
.project-papers.is-visible{visibility:visible}
.project-paper{position:absolute;left:0;top:0;width:640px;height:460px;transform-origin:0 0;pointer-events:auto;color:#253930;text-decoration:none;outline:none;touch-action:pinch-zoom}
.paper-face{width:640px;height:460px;position:relative;padding:30px 34px 25px;background:#fffbea;transform-origin:0 0;backface-visibility:hidden;box-shadow:0 2px 1px #817453,1px 1px 0 #e7ddc5;overflow:hidden}

@font-face{font-family:PortfolioQuicksand;src:url('assets/projects/quicksand-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
.paper-face{display:flex;align-items:center;justify-content:center}
.veritaly-wordmark{position:relative;display:inline-block;font:700 112px/1 PortfolioQuicksand,Quicksand,sans-serif;letter-spacing:-.02em;color:#15131f;-webkit-text-stroke:.08em #15131f}
.veritaly-wordmark::after{content:attr(data-t);position:absolute;left:-.07em;top:-.07em;pointer-events:none;-webkit-text-stroke:0;background:linear-gradient(105deg,#009246 0 34%,#fff 34% 66%,#ce2b37 66% 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.twip{background:#f4fbf8}.tako{background:#fff4e6}.hearflow{background:#faf7ef}
.twip-wordmark{--lh:145px;display:flex;align-items:flex-end;gap:0}
.twip-wordmark img{height:var(--lh);width:auto;display:block;filter:brightness(0)}
.twip-bagslot{position:relative;flex:none;width:calc(var(--lh)*745/1044);height:var(--lh)}
.twip-bagslot img{position:absolute;left:calc(var(--lh)*20/1044);top:0;height:100%;width:auto;filter:none;transform-origin:50% 88%}
@media(prefers-reduced-motion:no-preference){.project-papers.is-visible .twip-bagslot img,.render-fallback .twip-bagslot img{animation:paperBagTrip 3.4s cubic-bezier(.36,.07,.19,.97) infinite}}
@keyframes paperBagTrip{0%,64%{transform:translateY(0) rotate(0)}70%{transform:translateY(-23%) rotate(-11deg)}76%{transform:translateY(0) rotate(6deg)}82%{transform:translateY(-10%) rotate(-4deg)}88%,100%{transform:translateY(0) rotate(0)}}
.flow-wordmark{display:flex;align-items:center;justify-content:center;gap:30px;color:#141516}
.flow-wordmark img{width:105px;height:150px;object-fit:contain;display:block}
.flow-wordmark span{font:600 145px/1 ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;letter-spacing:-.025em}
.tako-mascot{width:265px;height:265px;object-fit:contain;display:block}
.project-paper:focus-visible .paper-face{outline:5px solid #54720c;outline-offset:-6px}
.render-fallback .project-papers{visibility:hidden;top:22%;inset-inline:6%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;pointer-events:auto}
.render-fallback .project-paper{position:relative;width:100%;height:auto;transform:rotate(-3deg)!important}
.render-fallback .project-paper:nth-child(even){transform:rotate(4deg)!important}
.render-fallback .paper-face{width:100%;height:auto;aspect-ratio:640/460;padding:10%;transform:none!important;container-type:inline-size}
.render-fallback .veritaly-wordmark{font-size:21cqw}
.render-fallback .twip-wordmark{--lh:26cqw}
.render-fallback .flow-wordmark{gap:5cqw}.render-fallback .flow-wordmark span{font-size:29cqw}.render-fallback .flow-wordmark img{width:20cqw;height:29cqw}
.render-fallback .tako-mascot{width:52cqw;height:52cqw}

.render-fallback[data-view=table] .project-papers{visibility:visible}