:root{--ink:#222;--ink-soft:#555;--muted:#767676;--line:#e5e5e5;--paper:#fff;--paper-alt:#f5f5f5;--gutter:30px;--page:1280px;--header-h:60px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);min-height:100vh;color:var(--ink);font-family:var(--font-body);flex-direction:column;margin:0;font-size:1.0625rem;font-weight:300;line-height:1.7;display:flex}main{flex:1}img,video{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.25}strong{font-weight:600}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{z-index:100;background:var(--ink);color:var(--paper);padding:.5rem 1rem;position:absolute;top:-3rem;left:1rem}.skip-link:focus{top:1rem}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.site-header{z-index:20;height:var(--header-h);padding:0 max(16px, calc((100vw - var(--page)) / 2 + 8px));background:var(--paper);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.logo img{width:86px;height:40px}.site-header nav{font-family:var(--font-heading);gap:2.6rem;font-size:.95rem;display:flex}.site-header nav a{color:var(--ink);text-decoration:none;transition:color .2s}.site-header nav a:hover,.site-header nav a[aria-current=page]{color:var(--muted)}.menu-toggle{cursor:pointer;background:0 0;border:0;margin-right:-12px;padding:12px;display:none}.menu-icon,.menu-icon:before,.menu-icon:after{background:var(--ink);width:22px;height:2px;transition:transform .25s;display:block}.menu-icon{position:relative}.menu-icon:before,.menu-icon:after{content:"";position:absolute}.menu-icon:before{top:-7px}.menu-icon:after{top:7px}.menu-open .menu-icon{background:0 0}.menu-open .menu-icon:before{transform:translateY(7px)rotate(45deg)}.menu-open .menu-icon:after{transform:translateY(-7px)rotate(-45deg)}@media (width<=960px){.menu-toggle{z-index:2;display:block}.site-header nav{background:var(--paper);visibility:hidden;opacity:0;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;font-size:1.4rem;transition:opacity .25s,visibility .25s;position:fixed;inset:0}.menu-open .site-header nav{visibility:visible;opacity:1}.menu-open{overflow:hidden}}.site-footer{background:var(--paper-alt);text-align:center;font-family:var(--font-heading);margin-top:50px;padding:30px 16px;font-size:.9rem}.site-footer p{margin:0}.site-footer a{text-decoration:none}.container{width:100%;max-width:var(--page);margin:0 auto;padding:0 16px}.narrow{max-width:820px}.page-title{text-align:center;margin:70px 0 50px;font-size:1.75rem}.page-title:after{content:"";background:var(--ink);width:36px;height:1px;margin:22px auto 0;display:block}.page-intro{text-align:center;max-width:640px;color:var(--ink-soft);margin:-20px auto 50px}.prose p{margin:0 0 1.4em}.portfolio-wrap{container-type:inline-size}.portfolio{--cols:3;grid-template-columns:repeat(var(--cols), minmax(0, 1fr));grid-auto-rows:calc((100cqi - (var(--cols) - 1) * var(--gutter)) / var(--cols));grid-auto-flow:dense;gap:var(--gutter);margin:0;padding:0;list-style:none;display:grid}.portfolio>.tall{grid-row:span 2}.portfolio>.wide{grid-column:span 2}@media (width<=900px){.portfolio{--cols:2;--gutter:16px}}@media (width<=560px){.portfolio{--cols:1}.portfolio>.tall{grid-row:span 1}.portfolio>.wide{grid-column:span 1}}.tile{background:var(--paper-alt);height:100%;text-decoration:none;display:block;position:relative;overflow:hidden}.tile img{object-fit:cover;width:100%;height:100%;transition:transform .6s}.tile-caption{text-align:center;opacity:0;background:#ffffffd9;flex-direction:column;justify-content:center;align-items:center;padding:1rem;transition:opacity .3s;display:flex;position:absolute;inset:0}.tile-caption h2{margin:0;font-size:1.15rem}.tile-caption .meta{color:var(--ink-soft);margin-top:.3rem;font-size:.9rem}.tile-caption .meta:before{content:"";background:var(--ink);width:30px;height:1px;margin:.6rem auto;display:block}.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}.tile:hover .tile-caption,.tile:focus-visible .tile-caption{opacity:1}@media (hover:none){.tile-caption{opacity:1;padding:.7rem 1rem;inset:auto 0 0}.tile-caption .meta:before{display:none}}.badge{border:1px solid var(--ink);font-family:var(--font-heading);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;padding:0 .6em;font-size:.75rem;display:inline-block}
