/* Additive presentation layer for the compiled portfolio. */
.site-page-content{scroll-behavior:smooth;animation:portfolio-enter .55s cubic-bezier(.2,.7,.2,1) both;min-width:0}
@keyframes portfolio-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.site-page a{transition:color .2s,translate .2s}.site-page a:hover{color:#ac342c;translate:3px 0}.site-page a:focus-visible,.project-tile:focus-visible{outline:3px solid #ad342c;outline-offset:5px}
.project-tile{display:flex;text-align:left;color:#202625;background:#f5f3e9;position:relative;isolation:isolate;min-height:145px;border:1px solid #8b9189!important;box-shadow:4px 4px 0 #d4d7ce!important;transition:transform .3s,box-shadow .3s,background .3s;flex-shrink:0}
.project-tile:after{content:'↗';font:34px Georgia,serif;position:absolute;right:24px;top:25px;transition:transform .3s}
.project-tile:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 #bfcac3!important;background:#e9eee4}.project-tile:hover:after{transform:translate(3px,-3px)}
.project-tile img{transition:transform .45s}.project-tile:hover img{transform:rotate(-9deg) scale(1.13)}
.project-tile h1{font-size:clamp(30px,4vw,52px)}.project-tile p{font-size:15px;letter-spacing:2px;margin-top:9px}
.project-tile--dusty{background:#242a28!important;color:#faf1de;min-height:190px;border-color:#242a28!important;box-shadow:5px 5px 0 #be4d3b!important}
.project-tile--dusty:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 100%,#a64b373d,transparent 65%),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px)}
.project-tile--dusty:hover{box-shadow:9px 9px 0 #be4d3b!important}.project-tile--dusty img{width:65px!important;height:auto!important;image-rendering:auto}.project-tile--dusty p{color:#e6ac91}
.site-page-content>.text-block{border-top:1px solid #d1d5cd;padding-top:24px}
@media(prefers-reduced-motion:reduce){.site-page-content{animation:none;scroll-behavior:auto}.site-page a,.project-tile,.project-tile img,.project-tile:after{transition:none}.project-tile:hover,.project-tile:hover img{transform:none}}
@media(max-width:760px){.site-page>div:not(.site-page-content){max-width:150px}.site-page-content{margin-left:158px;padding:24px 20px 40px 0}.project-tile{padding:20px 12px}.project-tile>div{margin-left:0!important}.project-tile img{margin-right:14px!important;width:36px!important;height:auto!important}.project-tile:after{right:9px;font-size:22px}.project-tile h1{font-size:28px}.project-tile p{font-size:12px;letter-spacing:0}.site-page-content>h1{font-size:40px}}

/* Small animated vignettes beside the original page titles. */
.portfolio-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;flex-shrink:0;margin-bottom:12px}
.portfolio-heading-copy{display:flex;flex-direction:column;flex:1 1 230px;min-width:0}
.portfolio-heading h1{font-size:clamp(36px,4.7vw,64px);overflow-wrap:anywhere}
.portfolio-heading h3{line-height:1.3}
.portfolio-heading portfolio-sprite{margin-left:auto}
.portfolio-heading--contact .portfolio-heading-copy>div{justify-content:flex-start!important;margin-top:14px}
.portfolio-heading--contact .portfolio-heading-copy>div>div:first-child{margin-left:0!important}
@media(max-width:760px){.portfolio-heading{gap:4px}.portfolio-heading-copy{flex-basis:180px}.portfolio-heading portfolio-sprite{width:120px}.portfolio-heading h1{font-size:36px}}

/* Illustrations accompany their own project, with text retaining reading width. */
.project-story-heading{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;text-align:left;flex-shrink:0}
.project-story-heading h2{flex:1 1 260px;min-width:0;line-height:1.15}
.project-story-heading portfolio-sprite{margin-left:auto}
@media(max-width:760px){.project-story-heading h2{font-size:26px;flex-basis:180px}.project-story-heading portfolio-sprite{width:120px}}