@font-face{font-family:FGrotesk;src:url('fgrotesk-book.woff') format('woff');font-weight:400;font-display:swap}
:root{
 --mdb-background:#fff;--mdb-text:#101010;--mdb-muted:#626262;--mdb-panel:#fff;--mdb-accent:#0000ff;
 --mdb-heading:FGrotesk,Arial,sans-serif;--mdb-body:FGrotesk,Arial,sans-serif;
 --mdb-ui-size:20px;--mdb-project-title-size:62px;--mdb-list-tint:10%;
}
*{box-sizing:border-box;letter-spacing:0}
html{scrollbar-gutter:stable}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--mdb-background);color:var(--mdb-text);font:400 var(--mdb-ui-size)/1.3 var(--mdb-body);-webkit-font-smoothing:antialiased}
body>main{flex:1 0 auto}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}button{color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--mdb-accent);outline-offset:5px}
::selection{background:var(--mdb-accent);color:var(--mdb-background)}
[hidden]{display:none!important}
body [data-link]{color:var(--mdb-link-text,var(--mdb-text))}
body [data-link]:is(:hover,:focus-visible){color:var(--mdb-link-hover,var(--mdb-accent))}
body [data-link]:focus-visible{outline-color:var(--mdb-link-hover,var(--mdb-accent))}
a:not([data-link]):not(.brand):hover{color:var(--mdb-accent)}

/* Wordmark, primary navigation, disciplines and view switch. */
.site-header{padding:38px 40px 0}
.brand,.brand:hover,.brand:focus-visible{display:block;text-decoration:none;color:#000}
.brand-shape{display:block;width:100%;aspect-ratio:2990.65/244.24;background:currentColor;mask:url('wordmark.svg') center/contain no-repeat;-webkit-mask:url('wordmark.svg') center/contain no-repeat}
.brand-type{font-family:var(--mdb-heading);font-size:clamp(32px,9.45vw,170px);line-height:.98;overflow-wrap:anywhere}
.header-navigation{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3.5fr) minmax(135px,1fr);align-items:start;gap:20px;margin:42px 0 26px}
.site-nav{display:flex;align-items:baseline;gap:16px}
.site-nav a{text-decoration:none}
body .site-nav [aria-current=page],body .project-filter[aria-pressed=true]{font-weight:400;color:#000}
body .site-nav [aria-current=page]:is(:hover,:focus-visible),body .project-filter[aria-pressed=true]:is(:hover,:focus-visible){color:var(--mdb-link-hover,var(--mdb-accent))}
.project-filters{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 16px}
.project-filter{border:0;background:none;padding:0;white-space:nowrap;font:inherit}
.board-actions{grid-column:3;display:flex;justify-content:flex-end}
.view-toggle{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;white-space:nowrap;line-height:1.3}
.view-icon{display:block;flex:none;width:1.05em;height:1.05em}
.view-icon-board{width:.95em;height:.95em}
.header-tagline{grid-column:2;text-align:center;margin:0}

/* Loose image board. JavaScript gives each visit a fresh composition. */
.project-board{margin:8px 28px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;padding:26px 20px;position:relative;isolation:isolate}
.project-card{min-width:0;display:block;text-decoration:none;align-self:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.project-card[data-scale=small]{width:70%;justify-self:center}
.project-card[data-scale=medium]{width:84%;justify-self:center}
.project-card[data-scale=large]{width:100%}
.project-photo{display:block;overflow:hidden;background:color-mix(in srgb,var(--mdb-text) 5%,var(--mdb-background))}
.project-photo img{display:block;width:100%;height:auto;pointer-events:none}
.project-caption{display:block;padding-top:9px;line-height:1.2;overflow-wrap:anywhere}
.project-name{text-transform:none}
.project-category{display:none}
.board-ready{display:block;padding:0}
.board-ready .project-card{position:absolute;left:0;top:0;cursor:grab;touch-action:auto;will-change:transform}
.board-ready .dragging{cursor:grabbing}
.dragging .project-photo,.drag-ready .project-photo{box-shadow:0 8px 24px #0002}
.board-link-card .project-photo{background:transparent}
.cover-placeholder{display:grid;place-items:center;aspect-ratio:1;padding:20px;font-family:var(--mdb-heading)}
.filter-empty{padding:40px;margin:0}
.empty-board{min-height:40vh;padding:60px 40px}
.empty-board h2{font:inherit;font-weight:700}

/* One row per project. Hover borders and tint use its own link color. */
.project-board.project-list{display:block;border-bottom:1px solid color-mix(in srgb,var(--mdb-text) 20%,transparent);margin:8px 40px 0;padding:0}
.board-ready.project-list .project-card{position:relative;display:grid;grid-template-columns:80px minmax(0,1.2fr) minmax(0,1.3fr);gap:26px;align-items:center;width:100%!important;transform:none!important;border-top:1px solid color-mix(in srgb,var(--mdb-text) 20%,transparent);padding:12px 16px 12px 25px;cursor:pointer;touch-action:pan-y;will-change:auto}
.project-list .project-card::after{content:"";position:absolute;inset:-1px 0;pointer-events:none;border-top:1px solid transparent;border-bottom:1px solid transparent}
.project-list .project-card:is(:hover,:focus-visible){background:color-mix(in srgb,var(--mdb-link-hover,var(--mdb-accent)) var(--mdb-list-tint),transparent);z-index:1}
.project-list .project-card:is(:hover,:focus-visible)::after{border-color:var(--mdb-link-hover,var(--mdb-accent))}
.project-list .project-photo{height:60px;background:transparent}
.project-list .project-photo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.project-list .project-caption{padding:0}
.project-list .project-category{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Project stories: a half-screen panel, with a normal page as fallback. */
.project-dialog{position:fixed;left:auto;right:0;top:0;bottom:0;margin:0;width:50vw;max-width:none;height:100dvh;max-height:none;padding:0 0 30px;border:0;border-left:1px solid color-mix(in srgb,var(--mdb-text) 15%,transparent);background:var(--mdb-panel);color:var(--mdb-text);overscroll-behavior:contain;overflow:auto}
.project-dialog::backdrop{background:#0002}
.project-dialog[open]{animation:panel-in .35s ease-out}
@keyframes panel-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.dialog-toolbar{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;background:var(--mdb-panel);padding:18px 30px}
.dialog-toolbar button{appearance:none;-webkit-appearance:none;border:0;border-radius:0;box-shadow:none;background:none;display:flex;gap:10px;align-items:center;padding:0}
.project-dialog[data-pointer-open="true"] #close-project:focus{outline:none}
body #close-project{color:#000}
@media(hover:hover) and (pointer:fine){body #close-project:hover{color:var(--mdb-link-hover,#ff1b1b)}}
.dialog-toolbar button span{font-size:1.2em;line-height:1}
.dialog-content{padding:24px 30px 0}
.story-header :is(h1,h2){font:400 min(var(--mdb-project-title-size),5vw)/1.05 var(--mdb-heading);margin:0 0 28px;overflow-wrap:anywhere}
.story-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.tag{display:inline-block;border:1px solid currentColor;padding:4px 12px 5px;border-radius:30px;font:inherit;font-size:.84em;line-height:1.2}
.year{margin-left:auto}
.story-copy{font-size:inherit;line-height:1.5;max-width:40em;margin-bottom:30px}
.story-copy p{margin:0 0 1em}
.story-copy img,.story-copy video{max-width:100%;height:auto}
.story-copy a{text-underline-offset:3px}
.credits{line-height:1.3;margin:0 0 28px}
.story-gallery{display:grid;gap:28px}
.story-gallery figure{margin:0}
.story-gallery img{display:block;width:100%;height:auto}
.story-gallery figcaption{margin-top:8px;font-size:.78em;color:var(--mdb-muted);line-height:1.35;white-space:pre-line}
.next-project{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:40px 30px 0;padding:0;border:0;background:none;text-align:left;width:fit-content;max-width:calc(100% - 60px);text-decoration:none}
.next-project>span:first-child{color:#000}
.next-project>span:last-child{overflow-wrap:anywhere}
.standalone-project{width:100%;max-width:920px;margin:30px auto 50px;padding:0 30px}
.standalone-project .story-header{margin-top:40px}
.standalone-project .story-header :is(h1,h2){font-size:var(--mdb-project-title-size)}
.back-link{text-decoration:none}
.text-page{max-width:850px;margin:50px auto;padding:0 24px}
.text-page h1{font:inherit;font-weight:700}

/* Contact details follow the two-column reference. */
.site-footer{margin-top:auto;padding:76px 40px 36px;display:grid;grid-template-columns:232px minmax(0,1fr);gap:24px 40px;align-items:start;line-height:1.2}
.footer-address{grid-column:1;grid-row:1}
.footer-contact{grid-column:2;grid-row:1;overflow-wrap:anywhere}
.footer-contact a{display:block;width:fit-content;text-decoration:none}
.footer-vat{display:block}
.copyright{grid-column:1;grid-row:2;white-space:nowrap}
.social-links{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:8px 16px}
.social-links a{text-decoration:none}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;z-index:999999;top:10px;left:10px;padding:15px;background:var(--mdb-background)}

@media(min-width:783px){body.admin-bar .project-dialog{top:32px;height:calc(100dvh - 32px)}}
@media(max-width:1000px){
 .site-header{padding:28px 28px 0}
 .header-navigation{grid-template-columns:1fr auto;margin-top:30px;gap:20px}
 .board-actions{grid-column:2;grid-row:1}
 .header-navigation .project-filters{grid-column:1/-1;grid-row:2;justify-content:flex-start}
 .header-tagline{grid-column:2;grid-row:1;text-align:right}
 .project-board{grid-template-columns:repeat(3,minmax(0,1fr))}
 .project-board.project-list{margin-left:28px;margin-right:28px}
 .site-footer{padding-left:28px;padding-right:28px}
 .project-dialog{width:60vw}
}
@media(max-width:700px){
 body{font-size:min(var(--mdb-ui-size),4.65vw)}
 .site-header{padding:20px 16px 0}
 .brand-shape{aspect-ratio:1555.76/526.69;mask-image:url('wordmark-stacked.svg');-webkit-mask-image:url('wordmark-stacked.svg')}
 .brand-type{font-size:16vw}
 .header-navigation{margin-top:28px;margin-bottom:16px;gap:20px 16px}
 .project-filters{gap:9px 14px}
 .site-nav{gap:14px}
 .header-tagline{max-width:10em}
 .project-board{margin:0 8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;padding:20px 12px}
 .board-ready{padding:0}
 .project-board.project-list{margin:8px 16px 0}
 .board-ready.project-list .project-card{grid-template-columns:55px minmax(0,1fr);gap:8px 16px;padding:12px 12px 12px 25px}
 .project-list .project-photo{height:60px;grid-row:1/3}
 .project-list .project-category{grid-column:2}
 .project-list .project-caption{align-self:end}
 .project-dialog{width:100vw;border:0}
 .dialog-toolbar{padding:16px 20px}
 .dialog-content{padding:20px 20px 0}
 .story-header :is(h1,h2),.standalone-project .story-header :is(h1,h2){font-size:min(var(--mdb-project-title-size),10vw)}
 .next-project{margin:32px 20px 0;max-width:calc(100% - 40px)}
 .standalone-project{padding:0 20px}
 .site-footer{padding:58px 16px 32px;grid-template-columns:1fr;gap:22px}
 .footer-address{grid-row:1}.footer-contact{grid-column:1;grid-row:2}
 .social-links{grid-column:1;grid-row:3}.copyright{grid-column:1;grid-row:4}
 .filter-empty{padding:28px 16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Native video is visual material, with no separate player interface. */
.project-photo video{display:block;width:100%;height:auto;pointer-events:none;object-fit:cover}
.project-list .project-photo video{height:100%;object-fit:contain;object-position:left center}
.story-gallery video{display:block;width:100%;height:auto}
video[data-project-media]::-webkit-media-controls{display:none!important}
.standalone-project .next-project{margin-left:0;margin-right:0}