:root{
  /* ground: cool pavement stone */
  --stone:#EFEFEA;
  --stone-2:#E4E4DC;
  --slab:#F5F5F0;
  --grout:#D3D3C8;
  --line:#CFCFC4;
  /* brand blues, sampled from the logo */
  --deep:#2447C4;
  --deeper:#1B3596;
  --azure:#3078D8;
  --mid:#4878CC;
  --light:#6BA8E8;
  /* ink */
  --ink:#13151A;
  --ink-2:#53575E;
  /* metrics */
  --max:1280px;
  --gut:clamp(20px,4vw,32px);
  --edge:max(var(--gut), calc((100% - var(--max))/2 + var(--gut)));
  /* type scale */
  --t-sm:14.5px;
  --t-bd:17px;
  --t-lead:clamp(17.5px,1.5vw,20px);
  --t-h3:20px;
  --t-h2:clamp(26px,3.2vw,40px);
  --t-h1:clamp(32px,4.5vw,58px);
}

*{box-sizing:border-box}
html{background:var(--stone);overflow-x:clip;scroll-behavior:smooth}
/* on narrow screens the sticky nav wraps to two rows and is taller than a section's top padding */
@media (max-width:1039px){section[id]{scroll-margin-top:56px}}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-bd);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.022em;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--t-h1);line-height:1.04}
h2{font-size:var(--t-h2);line-height:1.08;max-width:19ch}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-0.012em}
p{margin:0}
a{color:var(--ink)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
canvas{display:block;width:100%;height:100%}

/* ---------- nav ---------- */
.bar{position:sticky;top:0;z-index:20;background:var(--stone);border-bottom:1px solid var(--line)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 0}
.brand{
  display:flex;align-items:center;gap:11px;
  font-weight:600;font-size:15.5px;letter-spacing:-0.015em;
  text-decoration:none;color:var(--ink);margin-right:auto;
}
.brand img{height:34px;width:auto;display:block;flex:none}
.navlinks{
  order:3;width:100%;
  display:flex;flex-wrap:wrap;gap:12px 20px;
  padding-top:10px;border-top:1px solid var(--line);
}
.navlinks a{
  font-size:var(--t-sm);font-weight:500;text-decoration:none;color:var(--ink-2);
  padding-bottom:1px;border-bottom:1px solid transparent;
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--deep);border-bottom-color:var(--deep)}
@media (min-width:1040px){
  .navlinks{order:0;width:auto;padding-top:0;border-top:0;margin-right:clamp(12px,2vw,28px);gap:clamp(16px,2.2vw,28px)}
}

/* language tiles: three small loose tesserae, kept pale so the Join button stays the one solid blue in the bar */
.lang{display:flex;align-items:center;gap:3px;margin-right:clamp(2px,0.8vw,10px)}
.lang a{
  --r:-3deg;--y:0px;
  display:grid;place-items:center;width:27px;height:23px;
  font:500 10.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.05em;
  color:var(--ink-2);background:var(--stone-2);text-decoration:none;
  transform:translateY(var(--y)) rotate(var(--r));
  transition:transform .22s ease,background-color .22s ease,color .22s ease;
}
.lang a:nth-child(2){--r:2deg;--y:1px}
.lang a:nth-child(3){--r:-1.5deg;--y:-1px}
.lang a:hover{color:var(--deep);background:color-mix(in srgb,var(--light) 22%,var(--stone-2));transform:translateY(-2px) rotate(0deg)}
.lang a[aria-current],.lang a.is-picked{color:var(--deeper);background:color-mix(in srgb,var(--light) 38%,var(--stone))}
.lang a.is-leaving{color:var(--ink-2);background:var(--stone-2)}
.lang a:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
/* Join is as wide in every language as its longest label ("Uneix-te"), so the tiles beside it never move */
.nav > .btn{min-width:6.6em;text-align:center}
/* phones: brand, tiles and Join share the first row */
@media (max-width:479px){
  .nav{column-gap:10px}
  .brand{gap:8px;font-size:14.5px}
  .brand img{height:30px}
  .lang{gap:2px;margin-right:0}
  .lang a{width:22px;height:21px;font-size:10px}
  .nav > .btn-sm{padding:7px 8px;min-width:5.5em}
}
@media (max-width:374px){
  .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* picked: the tile lifts and turns, as if prised out of the floor; on the new page it drops back into place */
.lang a.is-picked{animation:lang-pick .24s cubic-bezier(.3,.7,.4,1) forwards}
.lang a.is-settling{animation:lang-settle .5s cubic-bezier(.25,.8,.35,1.15)}
@keyframes lang-pick{to{transform:translateY(-6px) rotate(calc(var(--r) - 14deg)) scale(1.1)}}
@keyframes lang-settle{
  from{transform:translateY(-7px) rotate(calc(var(--r) + 16deg)) scale(1.1)}
  60%{transform:translateY(1px) rotate(calc(var(--r) - 3deg)) scale(.97)}
  to{transform:translateY(var(--y)) rotate(var(--r))}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;border-radius:0;cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;letter-spacing:0.005em;
  padding:9px 18px;border:1px solid var(--deep);background:var(--deep);color:#FFFFFF;
}
.btn:hover{background:var(--deeper);border-color:var(--deeper)}
.btn-sm{padding:7px 15px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:transparent;color:var(--deep);border-color:var(--deep)}
.btn-inv{background:#FFFFFF;color:var(--deeper);border-color:#FFFFFF}
.btn-inv:hover{background:var(--stone);color:var(--deeper);border-color:var(--stone)}

/* ---------- home hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr);
  padding:clamp(34px,5vw,56px) var(--edge) 0;
}
.hero-copy{max-width:620px;padding-bottom:clamp(34px,5vw,56px)}
.hero .sub{font-size:var(--t-lead);color:var(--ink-2);margin-top:20px;max-width:44ch}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.panel{
  position:relative;background:var(--stone-2);
  margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge));
  aspect-ratio:1/1;max-height:78vh;
}
@media (min-width:960px){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(0,min(48%,620px));
    gap:clamp(32px,4.5vw,64px);align-items:stretch;padding-top:0;padding-right:0;
  }
  .hero-copy{align-self:center;padding:clamp(56px,7vw,92px) 0}
  .panel{margin:0;aspect-ratio:auto;height:100%;min-height:440px;max-height:none;border-left:1px solid var(--line)}
}

/* ---------- mosaic seam ---------- */
.seam{height:24px;background:var(--stone-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:720px){.seam{height:32px}}

/* ---------- sections ---------- */
.sec{padding:clamp(52px,7vw,96px) 0}
.slabs{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--grout);border:1px solid var(--grout);
  margin-top:clamp(28px,3.6vw,44px);
}
@media (min-width:640px){
  .slabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slabs > .slab:nth-child(3){grid-column:1 / -1}
}
@media (min-width:1040px){
  .slabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slabs > .slab:nth-child(3){grid-column:auto}
}
.slab{background:var(--slab);padding:clamp(20px,2.3vw,28px)}
.slab > svg{display:block;width:56px;height:14px;margin-bottom:16px}
.slab h3{margin-bottom:10px}
.slab p{font-size:15.5px;color:var(--ink-2);line-height:1.58}

/* ---------- partner marquee ---------- */
.partners{padding:clamp(30px,4.5vw,52px) 0}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.marquee-track{display:flex;width:max-content;animation:marquee 57s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
.partner{
  display:flex;align-items:center;gap:11px;flex:none;
  color:var(--ink-2);padding:6px clamp(30px,4.2vw,62px);
  transition:color .25s ease;
}
.partner:hover{color:var(--deep)}
.partner a{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.partner a:focus-visible{outline:2px solid var(--deep);outline-offset:6px}
.partner-name{white-space:nowrap;font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-0.02em}
/* partner logos are masks filled with the current text colour, so they read as one family */
.logo{
  display:block;flex:none;height:var(--h);aspect-ratio:var(--ar);background:currentColor;
  -webkit-mask:var(--m) center / contain no-repeat;
          mask:var(--m) center / contain no-repeat;
}
.logo-bluedot{--m:url("/assets/partners/bluedot.svg");--h:clamp(18px,1.9vw,23px);--ar:1003 / 133}
.logo-kairos{--m:url("/assets/partners/kairos.svg");--h:clamp(23px,2.4vw,29px);--ar:7725.9 / 1508.4}
.logo-ea{--m:url("/assets/partners/ea-barcelona.png");--h:clamp(27px,2.8vw,35px);--ar:658 / 96}
.logo-apart{--m:url("/assets/partners/apart-mark.png");--h:clamp(20px,2.1vw,25px);--ar:174 / 164}
.logo-laish{--m:url("/assets/partners/laish.png");--h:clamp(28px,2.9vw,36px);--ar:467 / 120}
.logo-ias{--m:url("/assets/partners/ias.png");--h:clamp(25px,2.6vw,31px);--ar:324 / 120}
.tess{flex:none;width:9px;height:10px;background:var(--deep);transform:rotate(14deg)}
.tess.t2{background:var(--azure);transform:rotate(-9deg)}
.tess.t3{background:var(--light);transform:rotate(24deg)}
.tess.t4{background:var(--deeper);transform:rotate(-18deg)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- join strip ---------- */
.strip{background:var(--deep);color:#FFFFFF}
.strip-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:16px 0}
.strip strong{font-weight:600;font-size:15.5px;color:#FFFFFF}
.strip span{font-size:14.5px;color:#C7D8F7;max-width:52ch}
.strip .btn{margin-left:auto}
.strip :focus-visible{outline-color:#FFFFFF}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--stone);padding:34px 0 40px}
.foot-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.foot-brand img{height:26px;width:auto;display:block;flex:none}
.foot-meta{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.7}
.foot-meta a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-meta a:hover{color:var(--deep);border-bottom-color:var(--deep)}
.foot-cols{display:flex;flex-wrap:wrap;gap:20px 44px;margin-left:auto}
.foot-col{display:flex;flex-direction:column;gap:7px}
.foot-col a{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--deep)}
.foot-col a[aria-current]{color:var(--deep)}
.foot-social{display:flex;gap:18px;align-items:center}
.foot-social a{display:block;color:var(--ink-2);padding:2px}
.foot-social a:hover{color:var(--deep)}
.foot-social svg{display:block;width:19px;height:19px;fill:currentColor}

/* ---------- about page ---------- */
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,72px)}
.page-head h1{max-width:19ch}
.page-head p{font-size:var(--t-lead);color:var(--ink-2);margin-top:22px;max-width:50ch}
/* a shorter head for pages whose content should be visible on arrival (Events) */
.page-head-compact{padding:clamp(32px,4vw,52px) 0 clamp(26px,3.4vw,40px)}
.page-head-compact .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.page-head-compact h1{font-size:clamp(28px,3.2vw,42px);line-height:1.08;max-width:none}
.page-head-compact p{font-size:16.5px;margin-top:10px;max-width:60ch}
.page-head-compact .btn{flex:none}
.sec-tight{padding-top:clamp(32px,4vw,52px)}

.portrait{position:relative;overflow:hidden;background:var(--stone-2)}
.portrait canvas,.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.team{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--grout);border:1px solid var(--grout);
  margin-top:clamp(28px,3.6vw,44px);
}
@media (min-width:900px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}.team-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.person{background:var(--slab);padding:clamp(10px,1.4vw,16px) clamp(10px,1.4vw,16px) clamp(16px,2vw,22px)}
.person .portrait{aspect-ratio:4/5}
.person h3{margin-top:14px;font-size:clamp(16.5px,1.6vw,20px)}
.person h3 a{text-decoration:none}
.person h3 a:hover{color:var(--deep)}
.person .role{display:block;margin-top:2px;font-size:14.5px;color:var(--ink-2)}
.person .bio{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.portrait{cursor:crosshair}
a.portrait{display:block;cursor:pointer}
.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}


.contact{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--grout)}
.contact div{
  display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--grout);font-size:16.5px;
}
.contact dt{color:var(--ink-2)}
.contact dd{margin:0}
.contact a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact a:hover{color:var(--deep);border-bottom-color:var(--deep)}

.reveal{
  margin-top:28px;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);color:var(--ink-2);
  border-bottom:1px dotted var(--ink-2);
}
.reveal:hover{color:var(--deep);border-bottom-color:var(--deep)}
.news{margin-top:16px;max-width:520px}
.news p{font-size:15px;color:var(--ink-2)}
.news-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.news input{
  flex:1 1 220px;font:inherit;font-size:15px;padding:8px 12px;
  border:1px solid var(--grout);background:var(--slab);color:var(--ink);border-radius:0;
}
.news input:focus-visible{outline:2px solid var(--deep);outline-offset:0}

/* ---------- events page ---------- */
.events{
  display:grid;gap:1px;background:var(--grout);border:1px solid var(--grout);
  margin-top:clamp(28px,3.6vw,44px);
}
.event{display:grid;grid-template-columns:minmax(0,1fr);background:var(--slab)}
@media (min-width:760px){
  .event{grid-template-columns:minmax(0,min(42%,440px)) minmax(0,1fr)}
  .event.no-cover{grid-template-columns:minmax(0,1fr)}
}
.event-cover{display:block;position:relative;aspect-ratio:1/1;background:var(--stone-2);overflow:hidden}
.event-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.event-cover:hover img{transform:scale(1.025)}
.event-body{position:relative;padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start}
/* the date, set on a single loose tile */
.event-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;margin-bottom:22px;
  background:var(--deep);color:#FFFFFF;transform:rotate(-4deg);
  font-size:12.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;line-height:1.05;
}
.event-tile span{font-size:26px;letter-spacing:-0.02em}
.event-title{font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-0.022em;max-width:22ch}
.event-title a{text-decoration:none}
.event-title a:hover{color:var(--deep)}
.event-meta{margin-top:14px;font-size:16px;color:var(--ink);line-height:1.55}
.event-live{display:block;color:var(--deep);font-weight:600}
.event-summary{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.event-body .btn{margin-top:26px}

.event-empty{background:var(--slab);padding:clamp(22px,3vw,40px)}
.event-empty-lead{font-size:var(--t-h3);font-weight:600;letter-spacing:-0.012em}
.event-empty p + p{margin-top:8px;color:var(--ink-2);max-width:52ch}
.event-empty a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.event-empty a:hover{color:var(--deep);border-bottom-color:var(--deep)}

.past{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;border-top:1px solid var(--grout)}
.past a{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px 24px;
  padding:14px 0;border-bottom:1px solid var(--grout);text-decoration:none;color:var(--ink);
}
.past time{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--ink-2);padding-top:3px}
.past-title{font-weight:500;font-size:16.5px}
.past-place{font-size:14.5px;color:var(--ink-2)}
.past a:hover .past-title{color:var(--deep)}
@media (min-width:760px){
  .past a{grid-template-columns:9.5em minmax(0,1fr) minmax(0,19em);align-items:baseline}
  .past-place{text-align:right}
}

/* ---------- join page ---------- */
.btn-lg{padding:13px 26px;font-size:16px}
.cta-note{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.slab-link{display:block;text-decoration:none;color:var(--ink);transition:background .2s ease}
.slab-link:hover{background:#FFFFFF}
.slab-link:hover h3{color:var(--deep)}

/* ---------- resources page ---------- */
.lead{font-size:var(--t-lead);color:var(--ink-2);margin-top:18px;max-width:50ch}
.res-group{padding:clamp(40px,5.5vw,72px) 0;border-bottom:1px solid var(--grout)}
.res-group:last-of-type{border-bottom:0}
.res-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px clamp(32px,5vw,72px)}
@media (min-width:900px){
  .res-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .res-head{position:sticky;top:84px;align-self:start}
}
.res-head h2{font-size:clamp(24px,2.6vw,32px)}
.res-head p{margin-top:10px;font-size:15.5px;color:var(--ink-2);max-width:30ch}
.res{list-style:none;margin:0;padding:0;border-top:1px solid var(--grout)}
.res li{padding:16px 0 18px;border-bottom:1px solid var(--grout)}
.res a{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;text-decoration:none;color:var(--ink)}
.res-title{font-weight:600;font-size:18px;letter-spacing:-0.012em}
.res a:hover .res-title{color:var(--deep)}
.res a::after{content:"↗";font-size:14px;color:var(--ink-2);order:3;margin-left:auto}
.res a:hover::after{color:var(--deep)}
.res-by{font-size:14px;color:var(--ink-2)}
.res li p{margin-top:5px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.res-start{counter-reset:start}
.res-start li{counter-increment:start;display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:4px}
.res-start li::before{
  content:counter(start,decimal-leading-zero);grid-row:1 / span 2;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:13px;color:var(--deep);padding-top:4px;
}
.res-start li > *{grid-column:2}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .portrait:hover canvas{opacity:0}
  *{animation:none !important;transition:none !important}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto}
  .marquee-group{flex-wrap:wrap;justify-content:center;row-gap:12px}
  .marquee-group [aria-hidden="true"],.marquee-group[aria-hidden="true"]{display:none}
}