*{box-sizing:border-box}
:root{--fg:#101214;--headerH:72px;--stationSans:"Suisse","Neue Helvetica","Helvetica Neue",Helvetica,Arial,sans-serif}
body{margin:0;background:#fff;color:var(--fg);font-family:var(--stationSans)}
::selection{background:#fef5a6;color:#101214}
a{color:inherit}
header{position:fixed;inset:0 0 auto;height:var(--headerH);padding:0 8px;display:flex;align-items:center;justify-content:space-between;background:#fff;z-index:10}
header a{font-size:26px;font-weight:700;text-decoration:none;text-transform:lowercase}
header .close{font-size:38px;font-weight:400;line-height:1;min-width:44px;min-height:44px;display:grid;place-items:center}
body[data-view="project"] header{justify-content:flex-end}
a:focus-visible{outline:2px solid #101214;outline-offset:5px}
.landscape{padding:calc(var(--headerH) + 24px) 8px 100px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:72px;align-items:start}
.tile{display:block;text-decoration:none;grid-column:span 4;min-width:0}
.tile:nth-child(7n+1){grid-column:2 / span 5;margin-top:30px}
.tile:nth-child(7n+2){grid-column:9 / span 3;margin-top:150px}
.tile:nth-child(7n+3){grid-column:1 / span 3;margin-top:60px}
.tile:nth-child(7n+4){grid-column:6 / span 6}
.tile:nth-child(7n+5){grid-column:3 / span 4;margin-top:90px}
.tile:nth-child(7n+6){grid-column:9 / span 3;margin-top:160px}
.tile:nth-child(7n){grid-column:5 / span 5;margin-top:30px}
.tile figure{margin:0}
.tile img{display:block;width:100%;height:auto}
.tile figcaption{font-size:13px;line-height:1.3;margin-top:8px;opacity:0;transition:opacity .15s}
.tile:hover figcaption,.tile:focus-visible figcaption{opacity:1}
.projectPage{position:fixed;inset:var(--headerH) 0 0;display:grid;grid-template-columns:minmax(400px,.34fr) .68fr;gap:16px;padding:0 8px;align-items:stretch;overflow:hidden}
.projectText{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:32px}
.title{font-family:var(--stationSans);font-size:42px;line-height:1;font-weight:700;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 28px}
.copy,.projectMeta,.infoGrid,.copyright{font-family:var(--stationSans);font-size:18px;line-height:1.22;font-weight:500;letter-spacing:0}
.copy{margin:0 0 18px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;text-wrap:pretty}
.projectMeta{margin:0 0 24px}
.info{margin:18px 0 22px}
.infoGrid div{margin:0}
.infoGrid .infoGap{height:1.22em}
.copyright{margin:36px 0 20px}
.projectImages{display:flex;flex-direction:column;gap:0;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.projectImages figure{margin:0;flex:none}
.projectText,.projectImages{scrollbar-width:none}
.projectText::-webkit-scrollbar,.projectImages::-webkit-scrollbar{display:none}
.projectImages img{width:100%;height:auto;display:block}
@media(hover:none){.tile figcaption{opacity:1}}
@media(prefers-reduced-motion:reduce){.tile figcaption{transition:none}}
@media(max-width:1000px){
:root{--headerH:68px}
.landscape{grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 8px;padding-top:calc(var(--headerH) + 16px)}
.tile:nth-child(n){grid-column:1 / -1;margin-top:0}
.tile:nth-child(3n+2){grid-column:2 / -1}
.tile:nth-child(3n){grid-column:1 / 6}
.tile figcaption{opacity:1}
.projectPage{position:static;display:flex;flex-direction:column;padding:var(--headerH) 8px 32px;gap:24px;overflow:visible}
.projectText,.projectImages{width:100%;overflow:visible;overscroll-behavior:auto}
.projectText{padding-bottom:0}
.title{font-size:30px}
.projectImages{gap:0}
}