@font-face{font-family:"Cantarell";font-weight:400;src:url("../assets/fonts/Cantarell-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Cantarell";font-weight:700;src:url("../assets/fonts/Cantarell-Bold.ttf") format("truetype");font-display:swap}
:root{--ink:#231a1e;--bg:#f8f8f8;--margin:32px;--ease:cubic-bezier(.22,.7,.2,1)}
@media(max-width:700px){:root{--margin:16px}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{font:400 15px/1.35 "Cantarell",system-ui,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
.nav{position:fixed;top:var(--margin);right:var(--margin);z-index:100;display:flex;gap:20px;font-size:15px;line-height:1}
.nav a{text-decoration:none;transition:opacity 300ms ease-out;padding:0}
.nav a:hover{opacity:.5}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.lang{display:inline-flex;gap:.3em}
.lang button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;opacity:.66;transition:opacity 300ms ease-out}
.lang button[aria-pressed="true"]{opacity:1}
.lang button:hover{opacity:1}
.lang button:focus-visible,.nav a:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

.home{text-decoration:none;position:fixed;top:var(--margin);left:var(--margin);z-index:100;display:block;width:56px;transition:opacity 300ms ease-out}
.home img{display:block;width:100%;height:auto}
.home:hover{opacity:.5}
.home:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* Drawer (home only) */
.scrim{position:fixed;inset:0;z-index:90;display:none}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);z-index:95;background:#f8f8f8;box-shadow:none;border-left:1px solid rgba(35,26,30,.12);transform:translateX(100%);visibility:hidden;transition:transform 350ms cubic-bezier(.22,.7,.2,1),visibility 0s linear 350ms}
.drawer.on{transform:none;visibility:visible;transition:transform 350ms cubic-bezier(.22,.7,.2,1),visibility 0s}
.drawer__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#f8f8f8}
.drawer__close{position:absolute;top:var(--margin);height:15px;left:var(--margin);z-index:2;font:inherit;font-size:15px;line-height:1;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;transition:opacity 300ms ease-out}
.drawer__close:hover{opacity:.5}
.drawer__close:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
html.embed{--margin:32px}
@media(max-width:500px){html.embed{--margin:16px}}
html.embed .nav,html.embed .home{display:none}
@media(prefers-reduced-motion:reduce){.drawer,.drawer.on{transition:none}}

/* Project pop-up (home): centred panel */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(248,248,248,.72);opacity:0;visibility:hidden;transition:opacity 300ms ease-out,visibility 0s linear 300ms}
.modal.on{opacity:1;visibility:visible;transition:opacity 300ms ease-out,visibility 0s}
.modal__panel{position:relative;width:min(960px,92vw);height:min(86vh,880px);background:#f8f8f8;border:1px solid rgba(35,26,30,.12);transform:translateY(8px);transition:transform 300ms cubic-bezier(.22,.7,.2,1)}
.modal.on .modal__panel{transform:none}
.modal__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#f8f8f8}
.modal__x{position:absolute;top:16px;right:16px;z-index:2;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;transition:opacity 300ms ease-out}
.modal__x:before,.modal__x:after{content:"";position:absolute;left:1px;right:1px;top:9.5px;height:1px;background:var(--ink);transform:rotate(45deg)}
.modal__x:after{transform:rotate(-45deg)}
.modal__x:hover{opacity:.5}
.modal__x:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
@media(max-width:700px){.modal__panel{width:100vw;height:100vh;height:100dvh;border:0}}
@media(prefers-reduced-motion:reduce){.modal,.modal.on,.modal__panel{transition:none}}
@media(max-width:700px){.nav .lang{position:absolute;right:0;top:26px}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ns{padding:32px var(--margin);font-size:15px;line-height:1.7}
.ns nav{margin-bottom:24px}
.ns ul{list-style:none;padding:0}
.ns img{display:block;width:100%;height:auto;margin:24px 0}