:root { --pad: 14px; --gap: 14px; --caption: 12px; --blue: #0864e8; }
* { box-sizing: border-box; }
html { background: #fff; scroll-behavior: smooth; }
body { margin: 0; padding: var(--pad); color: #111; background: #fff; font: var(--caption)/1.18 Arial, Helvetica, sans-serif; text-transform: uppercase; }
a { color: inherit; }
.topline { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: 14px; border-top: 1px dotted var(--blue); pointer-events: none; }
.gallery-link { position: fixed; z-index: 10; top: 14px; right: 0; padding: 5px 9px; color: #fff; background: var(--blue); text-decoration: none; text-transform: none; }
.grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 28px var(--gap); align-items: start; }
.work { min-width: 0; grid-column: span 3; }
.work.wide { grid-column: span 4; }
.work.xwide { grid-column: span 5; }
.work.narrow { grid-column: span 2; }
.work-link { display: block; text-decoration: none; }
.work img { display: block; width: 100%; height: auto; background: #f0f0f0; }
.caption { margin-top: 12px; overflow-wrap: anywhere; }
.number { display: block; margin-bottom: 2px; }
.work-link:hover .work-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.footer { margin-top: 54px; padding-bottom: 20px; text-transform: none; font-size: 14px; }
.footer a { text-decoration: none; }
.project { max-width: 1120px; margin: 0 auto; }
.project-nav { display: flex; justify-content: space-between; gap: 20px; margin: 12px 0 36px; text-transform: none; }
.project-title { font-size: 12px; font-weight: normal; margin: 0 0 22px; }
.project-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 28px; align-items: start; margin-bottom: 30px; }
.project-main-image { width: 100%; height: auto; display: block; }
.project-description { text-transform: none; font-size: 14px; line-height: 1.45; max-width: 38em; }
.project-description p { margin: 0 0 1em; }
.project-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap); align-items: start; }
.project-gallery img { display: block; width: 100%; height: auto; }
.project-gallery img.full { grid-column: 1 / -1; }
.project-meta { margin-top: 30px; font-size: 12px; text-transform: none; }
@media(max-width:760px) {
 :root { --pad: 10px; --gap: 10px; --caption: 11px; }
 .grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 24px var(--gap); }
 .work, .work.wide { grid-column: span 3; }
 .work.xwide { grid-column: span 4; }
 .work.narrow { grid-column: span 2; }
 .caption { margin-top: 8px; }
 .project-intro { grid-template-columns: 1fr; gap: 18px; }
 .project-gallery { grid-template-columns: 1fr; }
 .project-gallery img.full { grid-column: auto; }
}
@media(max-width:430px) {
 .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .work, .work.wide, .work.xwide, .work.narrow { grid-column: span 1; }
 .work.xwide { grid-column: span 2; }
 .project-nav { margin-bottom: 24px; }
}